:root {
  --bg-color: #0f172a;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --header-bg: rgba(15, 23, 42, 0.8);
  --border-color: #334155;
  
  --c-metal: #3b82f6;
  --c-metal-bg: rgba(59, 130, 246, 0.15);
  
  --c-nonmetal: #10b981;
  --c-nonmetal-bg: rgba(16, 185, 129, 0.15);
  
  --c-amphoteric: #d946ef;
  --c-amphoteric-bg: rgba(217, 70, 239, 0.15);
  
  --c-other: #64748b;
  --c-other-bg: rgba(100, 116, 139, 0.1);
  
  --cell-w: 48px;
  --cell-h: 56px;
  --cell-gap: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

/* Header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 50px;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 100;
  border-bottom: 1px solid var(--border-color);
}
.site-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.portal-link {
  margin-left: auto;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
}

/* Control Panel */
.app-container {
  padding-top: 50px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.control-panel {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: #1e293b;
  flex-shrink: 0;
}
.tabs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.quiz-toggle {
  background: #f43f5e;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.quiz-toggle.active {
  background: #e11d48;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  background: #334155;
  border: none;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.tab-btn.active {
  background: #fff;
  color: #0f172a;
}
.legend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.color-box {
  width: 12px; height: 12px;
  border-radius: 2px;
}
.color-box.metal { background: var(--c-metal-bg); border: 1px solid var(--c-metal); }
.color-box.nonmetal { background: var(--c-nonmetal-bg); border: 1px solid var(--c-nonmetal); }
.color-box.amphoteric { background: var(--c-amphoteric-bg); border: 1px solid var(--c-amphoteric); }

/* Map Area */
.map-wrapper {
  flex: 1;
  overflow: auto;
  position: relative;
  padding: 24px;
}
/* This container defines the coordinate system */
.map-container {
  position: relative;
  /* width and height will be set dynamically via JS based on layout */
  transition: width 0.5s, height 0.5s;
}

/* Element Cell */
.element {
  position: absolute;
  width: var(--cell-w);
  height: var(--cell-h);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s, background-color 0.3s;
  /* using transform for positioning */
  top: 0; left: 0;
}

.element .number {
  position: absolute;
  top: 2px; left: 4px;
  font-size: 9px;
  color: rgba(255,255,255,0.5);
}
.element .symbol {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.element .charge {
  position: absolute;
  top: 2px; right: 4px;
  font-size: 9px;
  font-weight: bold;
}
.element .name {
  font-size: 9px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

/* Categories */
.element.metal { background: var(--c-metal-bg); border: 1px solid rgba(59, 130, 246, 0.4); color: #93c5fd; }
.element.nonmetal { background: var(--c-nonmetal-bg); border: 1px solid rgba(16, 185, 129, 0.4); color: #6ee7b7; }
.element.amphoteric { background: var(--c-amphoteric-bg); border: 1px solid rgba(217, 70, 239, 0.4); color: #f0abfc; }
.element.other { background: var(--c-other-bg); border: 1px solid rgba(100, 116, 139, 0.3); color: #94a3b8; }

.element.metal .charge { color: #bfdbfe; }
.element.nonmetal .charge { color: #a7f3d0; }
.element.amphoteric .charge { color: #f5d0fe; }

/* Frequencies & States */
.element.pale { opacity: 0.15; pointer-events: none; }
.element.dimmed { opacity: 0.15; }
.element.highlight { 
  opacity: 1; 
  box-shadow: 0 0 15px rgba(255,255,255,0.5); 
  border-color: #fff;
  z-index: 10;
}
.element.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px #fff;
  z-index: 11;
}
.element.quiz-selected {
  border-color: #f43f5e;
  box-shadow: 0 0 0 3px #f43f5e;
  background-color: rgba(244, 63, 94, 0.2) !important;
  z-index: 12;
}

/* Heatmap Mode Styles */
.map-container.heatmap-mode .element {
  color: #0f172a !important;
  border-color: rgba(0,0,0,0.15) !important;
}
.map-container.heatmap-mode .element .number {
  color: #000 !important;
  font-weight: bold;
  font-size: 10px;
}
.map-container.heatmap-mode .element .name {
  color: rgba(0,0,0,0.7) !important;
}
.map-container.heatmap-mode .element .charge {
  display: none !important;
}

/* Quiz UI */
.quiz-container {
  background: #1e293b;
  border-bottom: 1px solid var(--border-color);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quiz-prompt {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}
.quiz-controls {
  display: flex;
  gap: 12px;
}
.quiz-btn {
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.quiz-btn:hover { opacity: 0.9; }
.check-btn { background: #3b82f6; color: #fff; }
.next-btn { background: #10b981; color: #fff; }
.quiz-result {
  font-size: 0.85rem;
  font-weight: bold;
}
.quiz-result.correct { color: #34d399; }
.quiz-result.wrong { color: #f87171; }

/* Modal Overlay */
.overlay-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.overlay-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.modal-card {
  background: #1e293b;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 90%;
  max-width: 320px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
}
.overlay-backdrop.show .modal-card {
  transform: translateY(0) scale(1);
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(255,255,255,0.1);
  border: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-header {
  padding: 20px 20px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.modal-symbol {
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}
.modal-number { font-size: 12px; color: var(--text-muted); }
.modal-name { font-size: 16px; font-weight: 700; }

.modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 0.85rem;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  padding-bottom: 6px;
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--text-muted); }
.info-value { font-weight: 600; text-align: right; max-width: 60%; }

.modal-footer {
  padding: 16px 20px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--border-color);
}
.co-occur-title {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.co-occur-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.co-occur-badge {
  background: rgba(255,255,255,0.1);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .tabs-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: visible;
    padding-bottom: 0;
  }
  .tab-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
    flex: 0 0 auto;
  }
  .quiz-toggle {
    align-self: stretch;
    text-align: center;
    padding: 8px 12px;
    font-size: 0.85rem;
  }
  .legend {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* --- Ver 3 Visual Learning Styles --- */

/* 1. Flame Reaction */
.flame-effect-red { animation: flame-red 0.8s infinite alternate; z-index: 10; border-color: #ff4444 !important; color: #fff !important; }
.flame-effect-yellow { animation: flame-yellow 0.7s infinite alternate; z-index: 10; border-color: #ffff00 !important; color: #fff !important; }
.flame-effect-orange { animation: flame-orange 0.9s infinite alternate; z-index: 10; border-color: #ffa500 !important; color: #fff !important; }
.flame-effect-yellowgreen { animation: flame-yellowgreen 0.8s infinite alternate; z-index: 10; border-color: #9acd32 !important; color: #fff !important; }
.flame-effect-purple { animation: flame-purple 0.85s infinite alternate; z-index: 10; border-color: #f0abfc !important; color: #fff !important; }
.flame-effect-teal { animation: flame-teal 0.75s infinite alternate; z-index: 10; border-color: #008080 !important; color: #fff !important; }

@keyframes flame-red { from { background-color: rgba(255,0,0,0.3); box-shadow: 0 0 10px rgba(255,0,0,0.6); } to { background-color: rgba(255,0,0,0.7); box-shadow: 0 0 20px rgba(255,0,0,1); } }
@keyframes flame-yellow { from { background-color: rgba(255,255,0,0.3); box-shadow: 0 0 10px rgba(255,255,0,0.6); } to { background-color: rgba(255,255,0,0.7); box-shadow: 0 0 20px rgba(255,255,0,1); } }
@keyframes flame-orange { from { background-color: rgba(255,165,0,0.3); box-shadow: 0 0 10px rgba(255,165,0,0.6); } to { background-color: rgba(255,165,0,0.7); box-shadow: 0 0 20px rgba(255,165,0,1); } }
@keyframes flame-yellowgreen { from { background-color: rgba(154,205,50,0.3); box-shadow: 0 0 10px rgba(154,205,50,0.6); } to { background-color: rgba(154,205,50,0.7); box-shadow: 0 0 20px rgba(154,205,50,1); } }
@keyframes flame-purple { from { background-color: rgba(128,0,128,0.3); box-shadow: 0 0 10px rgba(128,0,128,0.6); } to { background-color: rgba(128,0,128,0.7); box-shadow: 0 0 20px rgba(128,0,128,1); } }
@keyframes flame-teal { from { background-color: rgba(0,128,128,0.3); box-shadow: 0 0 10px rgba(0,128,128,0.6); } to { background-color: rgba(0,128,128,0.7); box-shadow: 0 0 20px rgba(0,128,128,1); } }

/* 2. SCOP Allotropes */
.scop-watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15vw;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: 0;
  letter-spacing: 2vw;
  display: none;
}
.map-container.scop-mode .scop-watermark {
  display: block;
}
.scop-highlight {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.5) !important;
  border-color: #fff !important;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* 3. States of Matter */
.state-gas {
  animation: float-gas 3s ease-in-out infinite;
  background-color: rgba(135, 206, 235, 0.25) !important;
  border-color: #87ceeb !important;
}
.state-liquid {
  animation: wave-liquid 2.5s ease-in-out infinite;
  background-color: rgba(65, 105, 225, 0.5) !important;
  border-color: #4169e1 !important;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50% !important;
}
.state-solid {
  background-color: rgba(169, 169, 169, 0.15) !important;
  border-color: #a9a9a9 !important;
}

@keyframes float-gas {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -6px; }
}
@keyframes wave-liquid {
  0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* Base styles for visual modes */
.map-container.visual-mode .element:not(.active-visual) {
  opacity: 0.15;
  pointer-events: none;
}