/* ============================================================
   ATMS 313 — Fronts & Frontogenesis Study System
   Design: Dark atmospheric aesthetic, meteorology-inspired
   ============================================================ */

:root {
  --bg: #080e1a;
  --bg2: #0d1b2a;
  --bg3: #112236;
  --surface: #152840;
  --surface2: #1a3350;
  --border: #1f3f60;
  --border-bright: #2d5f8a;
  --text: #d0e8ff;
  --text-muted: #7aa8cc;
  --text-dim: #4a7090;
  --accent: #4fc3f7;
  --accent2: #ffcc02;
  --cold: #64b5f6;
  --warm: #ef9a9a;
  --green: #81c784;
  --red: #ef5350;
  --orange: #ff8a65;
  --purple: #ce93d8;
  --fg-color: #26c6da;
  --fl-color: #ef9a9a;
  --font-display: 'Syne', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --font-body: 'DM Sans', sans-serif;
  --radius: 10px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --glow: 0 0 20px rgba(79,195,247,0.15);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
}

.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(79,195,247,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,195,247,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.scanline-overlay {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.015) 2px, rgba(0,0,0,0.015) 4px
  );
}

.section { display: none; position: relative; z-index: 2; min-height: 100vh; animation: fadeIn 0.3s ease; }
.section.active { display: block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

#landing { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:2rem; }
#landing.active { display:flex; }

.landing-content { max-width:900px; width:100%; text-align:center; }
.logo-badge { display:inline-block; background:var(--surface); border:1px solid var(--border-bright); color:var(--accent); font-family:var(--font-mono); font-size:.75rem; padding:.35rem 1rem; border-radius:100px; margin-bottom:1.5rem; letter-spacing:.1em; }
.hero-title { font-family:var(--font-display); font-size:clamp(2.5rem,8vw,5.5rem); font-weight:800; line-height:1.0; margin-bottom:1.2rem; }
.title-line { display:block; color:var(--text); }
.title-line.accent { color:var(--accent2); text-shadow:0 0 60px rgba(255,204,2,.3); }
.hero-sub { color:var(--text-muted); font-size:1.05rem; max-width:620px; margin:0 auto 2.5rem; }

.module-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:2rem; }
@media(min-width:700px){.module-grid{grid-template-columns:repeat(4,1fr);}}
.module-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem .75rem; cursor:pointer; transition:all .2s; text-align:center; }
.module-card:hover { border-color:var(--accent); background:var(--surface2); transform:translateY(-3px); box-shadow:var(--glow); }
.module-icon { font-size:1.8rem; margin-bottom:.5rem; }
.module-name { font-family:var(--font-display); font-weight:700; font-size:.95rem; margin-bottom:.25rem; }
.module-desc { color:var(--text-muted); font-size:.75rem; }

.topic-pills { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.pill { background:var(--surface); border:1px solid var(--border-bright); color:var(--accent); font-family:var(--font-mono); font-size:.72rem; padding:.3rem .85rem; border-radius:100px; cursor:pointer; transition:all .15s; letter-spacing:.05em; }
.pill:hover { background:var(--accent); color:var(--bg); }

.top-nav { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:1rem; background:rgba(8,14,26,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:.75rem 1.5rem; flex-wrap:wrap; }
.back-btn { background:var(--surface); border:1px solid var(--border-bright); color:var(--accent); font-family:var(--font-mono); font-size:.75rem; padding:.4rem .85rem; border-radius:6px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.back-btn:hover { background:var(--accent); color:var(--bg); }
.nav-title { font-family:var(--font-display); font-weight:700; color:var(--text); }
.nav-pills { display:flex; gap:.35rem; flex-wrap:wrap; margin-left:auto; }
.nav-pill { background:transparent; border:1px solid var(--border); color:var(--text-muted); font-size:.72rem; font-family:var(--font-mono); padding:.3rem .65rem; border-radius:6px; cursor:pointer; transition:all .15s; }
.nav-pill:hover,.nav-pill.active { background:var(--accent); border-color:var(--accent); color:var(--bg); }

.study-container { max-width:860px; margin:0 auto; padding:1.5rem; }
.topic-content { display:none; }
.topic-content.active { display:block; animation:fadeIn .25s ease; }
.topic-title { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:var(--accent2); margin-bottom:1.25rem; border-bottom:1px solid var(--border); padding-bottom:.75rem; text-align:center; }

.learning-targets { background:linear-gradient(135deg,var(--surface),var(--bg3)); border:1px solid var(--border-bright); border-left:3px solid var(--accent2); border-radius:var(--radius); padding:1rem 1.25rem; margin-bottom:1.5rem; }
.learning-targets h3 { color:var(--accent2); font-size:.85rem; margin-bottom:.5rem; font-family:var(--font-mono); }
.learning-targets li { color:var(--text); margin-left:1.2rem; font-size:.9rem; margin-bottom:.25rem; }

.concept-block { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.35rem; margin-bottom:1.25rem; }
.concept-block h3 { font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--accent); margin-bottom:.85rem; }
.concept-block p { color:var(--text); margin-bottom:.75rem; }

.info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.75rem; margin-top:.75rem; }
.info-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.85rem; font-size:.85rem; }
.info-card.highlight { color:var(--text-muted); text-align:center; font-size:.82rem; }
.info-icon { font-size:1.4rem; margin-bottom:.4rem; }
.info-title { font-weight:600; color:var(--accent); margin-bottom:.25rem; font-size:.82rem; }
.info-body { color:var(--text-muted); font-size:.8rem; }

.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.75rem; }
@media(max-width:600px){.compare-grid{grid-template-columns:1fr;}}
.compare-card { border-radius:8px; padding:1rem; font-size:.85rem; }
.compare-card.cold { background:rgba(100,181,246,.08); border:1px solid rgba(100,181,246,.3); }
.compare-card.warm { background:rgba(239,154,154,.08); border:1px solid rgba(239,154,154,.3); }
.compare-card h4 { margin-bottom:.5rem; font-size:.9rem; }
.compare-card.cold h4 { color:var(--cold); }
.compare-card.warm h4 { color:var(--warm); }
.compare-card ul { padding-left:1.1rem; color:var(--text-muted); }
.compare-card li { margin-bottom:.25rem; }

.callout { background:rgba(79,195,247,.07); border:1px solid rgba(79,195,247,.25); border-left:3px solid var(--accent); border-radius:8px; padding:.75rem 1rem; margin-top:.75rem; font-size:.87rem; color:var(--text); }
.callout.warning { background:rgba(255,204,2,.07); border-color:rgba(255,204,2,.3); border-left-color:var(--accent2); }
.callout strong { color:var(--accent); }
.callout.warning strong { color:var(--accent2); }

.bullet-list { padding-left:1.2rem; color:var(--text); }
.bullet-list li { margin-bottom:.4rem; }

.diagram-box { margin:.75rem 0; border-radius:8px; overflow:hidden; }
.diagram-box svg { width:100%; height:auto; }

.sounding-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.75rem; }
@media(max-width:600px){.sounding-grid{grid-template-columns:1fr;}}
.sounding-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.75rem; font-size:.82rem; }
.sounding-label { font-family:var(--font-mono); font-size:.72rem; padding:.2rem .5rem; border-radius:4px; margin-bottom:.4rem; display:inline-block; }
.sounding-label.warm-sector { background:rgba(239,154,154,.2); color:var(--warm); }
.sounding-label.cold-sector { background:rgba(100,181,246,.2); color:var(--cold); }
.sounding-label.warm-front { background:rgba(129,199,132,.2); color:var(--green); }

.timeline { position:relative; padding-left:2rem; }
.timeline::before { content:''; position:absolute; left:.7rem; top:0; bottom:0; width:2px; background:var(--border-bright); }
.timeline-step { position:relative; margin-bottom:1rem; }
.step-num { position:absolute; left:-2rem; top:0; width:1.4rem; height:1.4rem; border-radius:50%; background:var(--accent); color:var(--bg); font-weight:700; font-size:.7rem; font-family:var(--font-mono); display:flex; align-items:center; justify-content:center; }
.step-text { color:var(--text); font-size:.87rem; padding-top:.1rem; }

.equation-box { background:var(--surface); border:1px solid var(--border-bright); border-radius:8px; padding:1rem 1.2rem; margin:.75rem 0; }
.eq-label { font-family:var(--font-mono); font-size:.72rem; color:var(--text-dim); margin-bottom:.5rem; }
.eq-label-sm { font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); }
.eq-display { font-family:var(--font-mono); font-size:.9rem; color:var(--text); display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin-bottom:.5rem; }
.eq-display.compact { background:var(--surface); padding:.6rem 1rem; border-radius:6px; border:1px solid var(--border); }
.eq-term { color:var(--accent); }
.eq-term.clickable { cursor:pointer; text-decoration:underline dotted; transition:color .15s; }
.eq-term.clickable:hover { color:var(--accent2); }
.eq-op { color:var(--text-dim); }
.eq-labels-row { display:flex; flex-wrap:wrap; gap:1rem; font-size:.72rem; color:var(--text-dim); font-family:var(--font-mono); margin-top:.4rem; }
.eq-note { font-size:.75rem; color:var(--text-dim); margin-top:.5rem; font-style:italic; }

.term-info-box { display:none; background:rgba(79,195,247,.06); border:1px solid var(--border-bright); border-radius:8px; padding:.85rem 1rem; margin-top:.75rem; font-size:.85rem; animation:fadeIn .2s ease; }
.term-info-box.active { display:block; }
.term-info-box h4 { color:var(--accent); margin-bottom:.5rem; font-size:.9rem; }
.term-info-box ul { padding-left:1.1rem; color:var(--text-muted); }
.term-info-box li { margin-bottom:.3rem; }
.fg-tag { color:var(--fg-color); font-weight:700; }
.fl-tag { color:var(--fl-color); font-weight:700; }

.diab-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.5rem; }
.diab-cell { background:var(--surface); border-radius:6px; padding:.6rem; font-size:.8rem; }
.diab-cell strong { display:block; margin-bottom:.3rem; color:var(--text); }
.diab-row { margin-bottom:.2rem; color:var(--text-muted); }
.sun { color:var(--accent2); }
.moon { color:var(--purple); }

.dilatation-box { margin-top:.75rem; }
.interactive-dilatation { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:1rem; margin-top:.75rem; }
#dilatation-canvas { width:100%; height:auto; border-radius:6px; }
.dilatation-controls { margin-top:.75rem; font-size:.85rem; }
.dilatation-controls label { color:var(--text-muted); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
input[type="range"] { accent-color:var(--accent); }
#beta-val { color:var(--accent); font-family:var(--font-mono); }
.angle-rule { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.5rem; }
.angle-card { padding:.65rem; border-radius:6px; font-size:.83rem; text-align:center; }
.angle-card.fg { background:rgba(38,198,218,.1); border:1px solid rgba(38,198,218,.3); color:var(--fg-color); }
.angle-card.fl { background:rgba(239,154,154,.1); border:1px solid rgba(239,154,154,.3); color:var(--fl-color); }
.fg-result-box { margin-top:.5rem; font-family:var(--font-mono); font-size:.85rem; padding:.4rem .75rem; border-radius:6px; text-align:center; }

.banded-precip-box { display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:600px){.banded-precip-box{grid-template-columns:1fr 1fr;}}
.banded-diagram svg { width:100%; height:auto; border-radius:8px; }

.qv-formula { margin:.75rem 0; }
.qv-rule { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.75rem; }
.qv-card { border-radius:8px; padding:.75rem; font-size:.85rem; text-align:center; }
.qv-card.up { background:rgba(129,199,132,.1); border:1px solid rgba(129,199,132,.3); color:var(--green); }
.qv-card.down { background:rgba(239,83,80,.1); border:1px solid rgba(239,83,80,.3); color:var(--red); }

.steps-container { display:flex; flex-direction:column; gap:.5rem; }
.dyn-step { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.step-header { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:var(--surface); cursor:pointer; transition:background .15s; }
.step-header:hover { background:var(--surface2); }
.step-header .step-num { position:static; width:auto; height:auto; border-radius:6px; background:var(--accent); color:var(--bg); font-family:var(--font-mono); font-size:.72rem; font-weight:700; padding:.2rem .5rem; white-space:nowrap; }
.step-header .step-arrow { margin-left:auto; color:var(--text-dim); transition:transform .2s; }
.step-header.open .step-arrow { transform:rotate(180deg); }
.step-body { display:none; padding:.85rem 1rem; background:var(--bg2); font-size:.87rem; color:var(--text-muted); }
.step-body.open { display:block; animation:fadeIn .2s; }
.step-body p { margin-bottom:.5rem; }
.step-body ul { padding-left:1.1rem; }
.step-body li { margin-bottom:.25rem; }

.circ-diagram { margin:.75rem 0; }
.circ-diagram svg { width:100%; height:auto; }

.coord-table { margin-top:.75rem; }
.coord-row { display:grid; grid-template-columns:140px 1fr; gap:.75rem; padding:.6rem 0; border-bottom:1px solid var(--border); font-size:.85rem; }
.coord-row.highlight-coord { background:rgba(79,195,247,.06); border-radius:6px; padding:.6rem; border:1px solid var(--border-bright); }
.coord-name { font-family:var(--font-mono); color:var(--accent); font-size:.8rem; }
.coord-desc { color:var(--text-muted); }

.adv-list { display:flex; flex-direction:column; gap:.6rem; margin-top:.75rem; }
.adv-item { display:flex; gap:.75rem; padding:.65rem .85rem; border-radius:8px; font-size:.87rem; }
.adv-item.green { background:rgba(129,199,132,.07); border:1px solid rgba(129,199,132,.25); }
.adv-item.red { background:rgba(239,83,80,.07); border:1px solid rgba(239,83,80,.25); }
.adv-icon { font-size:1rem; flex-shrink:0; margin-top:.15rem; }

.slope-compare { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.75rem; }
.slope-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.85rem; font-size:.85rem; }
.slope-card.highlight-coord { border-color:var(--border-bright); background:rgba(79,195,247,.06); }
.slope-card h4 { color:var(--accent); font-size:.85rem; margin-bottom:.4rem; }

.stability-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.75rem; }
.stability-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.85rem; display:flex; gap:.75rem; align-items:center; font-size:.83rem; }
.stability-icon { font-family:var(--font-mono); font-size:1.2rem; color:var(--accent2); }

.omega-rule { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.75rem; }
.omega-card { border-radius:8px; padding:.85rem; font-size:.83rem; text-align:center; }
.omega-card.up { background:rgba(129,199,132,.1); border:1px solid rgba(129,199,132,.3); }
.omega-card.down { background:rgba(239,83,80,.1); border:1px solid rgba(239,83,80,.3); }
.omega-icon { font-size:1.5rem; margin-bottom:.4rem; }

.cyclone-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.75rem; margin-top:.75rem; }
.cyclone-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.85rem; font-size:.83rem; }
.cyclone-title { font-weight:700; color:var(--accent); margin-bottom:.4rem; font-size:.87rem; }
.fold-explanation ol { padding-left:1.4rem; color:var(--text-muted); }
.fold-explanation li { margin-bottom:.4rem; font-size:.87rem; }
.shear-explanation p { margin-bottom:.6rem; font-size:.87rem; }

.boundary-table { border-radius:8px; overflow:hidden; border:1px solid var(--border); margin-top:.75rem; font-size:.8rem; }
.boundary-row { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:0; }
.boundary-row.header { background:var(--surface2); font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); }
.boundary-row.header span,.boundary-row span { padding:.5rem .6rem; border-bottom:1px solid var(--border); }
.boundary-row:last-child span { border-bottom:none; }
.b-name { font-weight:600; color:var(--accent); }
.numbered-steps { padding-left:1.4rem; color:var(--text-muted); }
.numbered-steps li { margin-bottom:.5rem; font-size:.87rem; }

.games-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; max-width:900px; margin:2rem auto; padding:0 1.5rem; }
.game-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; cursor:pointer; transition:all .2s; }
.game-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow),var(--glow); }
.game-icon { font-size:2rem; margin-bottom:.6rem; }
.game-name { font-family:var(--font-display); font-weight:700; font-size:1.05rem; margin-bottom:.35rem; }
.game-desc { color:var(--text-muted); font-size:.82rem; margin-bottom:.75rem; }
.game-difficulty { display:inline-block; font-family:var(--font-mono); font-size:.65rem; padding:.2rem .6rem; border-radius:100px; }
.game-difficulty.easy { background:rgba(129,199,132,.2); color:var(--green); }
.game-difficulty.medium { background:rgba(255,204,2,.15); color:var(--accent2); }
.game-difficulty.hard { background:rgba(239,83,80,.2); color:var(--red); }

.game-overlay { display:none; position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.85); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:1rem; }
.game-overlay.active { display:flex; }
.game-modal { background:var(--bg2); border:1px solid var(--border-bright); border-radius:12px; width:100%; max-width:860px; max-height:90vh; overflow-y:auto; position:relative; padding:2rem 1.5rem 1.5rem; }
.close-game { position:absolute; top:1rem; right:1rem; background:var(--surface); border:1px solid var(--border); color:var(--text-muted); font-size:.75rem; padding:.35rem .75rem; border-radius:6px; cursor:pointer; font-family:var(--font-mono); transition:all .15s; }
.close-game:hover { background:var(--red); color:white; border-color:var(--red); }

.front-finder-container { padding:1.5rem; max-width:900px; margin:0 auto; }
.front-score-display { font-family:var(--font-mono); color:var(--accent2); }

.flashcard-area { display:flex; flex-direction:column; align-items:center; padding:2rem 1.5rem; gap:1.25rem; }
.flashcard-progress { font-family:var(--font-mono); color:var(--text-muted); font-size:.8rem; }
.flashcard { width:100%; max-width:580px; height:280px; perspective:1200px; cursor:pointer; position:relative; }
.flashcard .card-face { position:absolute; inset:0; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; padding:2rem; text-align:center; backface-visibility:hidden; transition:transform .5s cubic-bezier(.4,0,.2,1); border:1px solid var(--border-bright); }
.flashcard .card-face.front { background:var(--surface); transform:rotateY(0deg); font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--accent); }
.flashcard .card-face.back { background:var(--bg3); transform:rotateY(180deg); font-size:.9rem; color:var(--text); line-height:1.6; }
.flashcard.flipped .card-face.front { transform:rotateY(-180deg); }
.flashcard.flipped .card-face.back { transform:rotateY(0deg); }
.fc-controls { display:flex; gap:.75rem; }
.fc-btn { padding:.5rem 1.25rem; border-radius:8px; border:none; cursor:pointer; font-size:.85rem; font-family:var(--font-body); font-weight:500; transition:all .15s; }
.fc-btn.wrong { background:rgba(239,83,80,.2); color:var(--red); }
.fc-btn.wrong:hover { background:var(--red); color:white; }
.fc-btn.right { background:rgba(129,199,132,.2); color:var(--green); }
.fc-btn.right:hover { background:var(--green); color:white; }
.fc-btn.flip { background:var(--surface); color:var(--text); border:1px solid var(--border-bright); }
.fc-btn.flip:hover { background:var(--surface2); }
.fc-nav { display:flex; gap:.75rem; }
.fc-nav button { background:transparent; border:1px solid var(--border); color:var(--text-muted); padding:.4rem 1rem; border-radius:6px; cursor:pointer; font-size:.82rem; transition:all .15s; }
.fc-nav button:hover { border-color:var(--accent); color:var(--accent); }

.game-title { font-family:var(--font-display); font-size:1.4rem; font-weight:800; color:var(--accent2); margin-bottom:.4rem; }
.game-subtitle { color:var(--text-muted); font-size:.85rem; margin-bottom:1.5rem; }
.game-score-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; font-family:var(--font-mono); }
.score-display { color:var(--accent); font-size:1rem; }
.lives-display { color:var(--red); }
.timer-display { color:var(--accent2); }

.matching-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1rem; }
.match-item { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.65rem .85rem; cursor:pointer; font-size:.83rem; transition:all .15s; min-height:52px; display:flex; align-items:center; }
.match-item:hover { border-color:var(--accent2); }
.match-item.selected { border-color:var(--accent); background:rgba(79,195,247,.12); }
.match-item.matched { border-color:var(--green); background:rgba(129,199,132,.12); pointer-events:none; opacity:.7; }
.match-item.wrong { border-color:var(--red); background:rgba(239,83,80,.12); animation:shake .3s; }
.match-item.term { color:var(--accent); font-weight:600; }
.match-item.def { color:var(--text-muted); }

.connections-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:1rem 0; }
.conn-item { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.6rem .4rem; cursor:pointer; font-size:.78rem; text-align:center; transition:all .15s; min-height:54px; display:flex; align-items:center; justify-content:center; }
.conn-item:hover { border-color:var(--accent2); }
.conn-item.selected { border-color:var(--accent2); background:rgba(255,204,2,.1); }
.conn-item.solved { pointer-events:none; opacity:.8; }
.conn-submit-btn { width:100%; padding:.65rem; background:var(--accent); color:var(--bg); border:none; border-radius:8px; font-weight:700; font-size:.9rem; cursor:pointer; margin-bottom:1rem; transition:all .15s; }
.conn-submit-btn:hover { background:var(--accent2); }
.conn-submit-btn:disabled { opacity:.4; cursor:not-allowed; }
.conn-result { display:flex; flex-direction:column; gap:.4rem; }
.conn-result-row { padding:.5rem 1rem; border-radius:6px; font-size:.82rem; }
.conn-result-row.cat-1 { background:rgba(255,204,2,.2); color:var(--accent2); }
.conn-result-row.cat-2 { background:rgba(79,195,247,.2); color:var(--accent); }
.conn-result-row.cat-3 { background:rgba(129,199,132,.2); color:var(--green); }
.conn-result-row.cat-4 { background:rgba(206,147,216,.2); color:var(--purple); }

.fgfl-card { background:var(--surface); border:1px solid var(--border-bright); border-radius:10px; padding:1.5rem; margin-bottom:1.25rem; text-align:center; }
.fgfl-scenario { font-size:1rem; color:var(--text); margin-bottom:1rem; line-height:1.6; }
.fgfl-buttons { display:flex; gap:1rem; justify-content:center; }
.fgfl-btn { padding:.65rem 2rem; border-radius:8px; border:none; cursor:pointer; font-weight:700; font-size:.9rem; font-family:var(--font-display); transition:all .15s; }
.fgfl-btn.fg { background:rgba(38,198,218,.15); color:var(--fg-color); border:2px solid var(--fg-color); }
.fgfl-btn.fg:hover { background:var(--fg-color); color:var(--bg); }
.fgfl-btn.fl { background:rgba(239,154,154,.15); color:var(--fl-color); border:2px solid var(--fl-color); }
.fgfl-btn.fl:hover { background:var(--fl-color); color:var(--bg); }
.fgfl-feedback { padding:.65rem; border-radius:8px; font-size:.87rem; text-align:center; margin-top:.75rem; }
.fgfl-feedback.correct { background:rgba(129,199,132,.15); color:var(--green); border:1px solid var(--green); }
.fgfl-feedback.wrong { background:rgba(239,83,80,.15); color:var(--red); border:1px solid var(--red); }

.kahoot-question { font-size:1.05rem; color:var(--text); margin-bottom:1.25rem; line-height:1.6; font-weight:500; }
.kahoot-options { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-bottom:1rem; }
.kahoot-btn { padding:.85rem 1rem; border-radius:8px; border:2px solid transparent; cursor:pointer; font-size:.85rem; text-align:left; font-family:var(--font-body); transition:all .15s; }
.kahoot-btn:nth-child(1){background:rgba(239,83,80,.15);color:var(--red);border-color:rgba(239,83,80,.3);}
.kahoot-btn:nth-child(2){background:rgba(79,195,247,.12);color:var(--cold);border-color:rgba(79,195,247,.3);}
.kahoot-btn:nth-child(3){background:rgba(129,199,132,.12);color:var(--green);border-color:rgba(129,199,132,.3);}
.kahoot-btn:nth-child(4){background:rgba(206,147,216,.12);color:var(--purple);border-color:rgba(206,147,216,.3);}
.kahoot-btn:hover { filter:brightness(1.3); transform:scale(1.02); }
.kahoot-btn.correct { background:rgba(129,199,132,.3)!important; border-color:var(--green)!important; pointer-events:none; }
.kahoot-btn.wrong { background:rgba(239,83,80,.3)!important; border-color:var(--red)!important; pointer-events:none; }
.kahoot-btn.reveal { background:rgba(129,199,132,.15)!important; border-color:rgba(129,199,132,.4)!important; pointer-events:none; }
.kahoot-timer-bar { height:5px; background:var(--border); border-radius:100px; margin-bottom:1rem; overflow:hidden; }
.kahoot-timer-fill { height:100%; background:var(--accent2); border-radius:100px; transition:width .1s linear; }
.next-question-btn { width:100%; padding:.65rem; background:var(--accent); color:var(--bg); border:none; border-radius:8px; font-weight:700; cursor:pointer; margin-top:.75rem; }
.explanation-box { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; font-size:.83rem; color:var(--text-muted); margin-top:.6rem; }

.front-map-area { width:100%; }
.front-q { font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin-bottom:.5rem; color:var(--accent); }
.front-instruction { color:var(--text-muted); font-size:.85rem; margin-bottom:1rem; }
.front-svg-wrap { position:relative; }
.front-svg-wrap svg { width:100%; height:auto; border-radius:8px; cursor:crosshair; }
.front-tool-bar { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; align-items:center; }
.front-tool-btn { padding:.4rem .9rem; border-radius:6px; border:2px solid transparent; cursor:pointer; font-size:.78rem; font-family:var(--font-mono); transition:all .15s; background:transparent; }
.front-tool-btn.cold-f { background:rgba(100,181,246,.15); color:var(--cold); border-color:rgba(100,181,246,.4); }
.front-tool-btn.cold-f.active { background:var(--cold); color:var(--bg); }
.front-tool-btn.warm-f { background:rgba(239,154,154,.15); color:var(--warm); border-color:rgba(239,154,154,.4); }
.front-tool-btn.warm-f.active { background:var(--warm); color:var(--bg); }
.front-tool-btn.stat-f { background:rgba(129,199,132,.15); color:var(--green); border-color:rgba(129,199,132,.4); }
.front-tool-btn.stat-f.active { background:var(--green); color:var(--bg); }
.front-tool-btn.erase { background:rgba(239,83,80,.1); color:var(--red); border-color:rgba(239,83,80,.3); }
.front-tool-btn.erase.active { background:var(--red); color:white; }
.front-check-btn { padding:.5rem 1.2rem; background:var(--accent2); color:var(--bg); border:none; border-radius:6px; cursor:pointer; font-weight:700; font-size:.85rem; margin-left:auto; }
.front-feedback { padding:.65rem 1rem; border-radius:8px; font-size:.85rem; margin-top:.75rem; }
.front-feedback.correct { background:rgba(129,199,132,.15); color:var(--green); border:1px solid var(--green); }
.front-feedback.partial { background:rgba(255,204,2,.12); color:var(--accent2); border:1px solid var(--accent2); }
.front-feedback.wrong { background:rgba(239,83,80,.12); color:var(--red); border:1px solid var(--red); }

.game-result { text-align:center; padding:2rem; }
.result-score { font-family:var(--font-display); font-size:3rem; font-weight:800; color:var(--accent2); }
.result-label { color:var(--text-muted); margin-bottom:1.5rem; }
.result-grade { font-size:1.2rem; font-weight:700; margin-bottom:.5rem; }
.play-again-btn { padding:.65rem 2rem; background:var(--accent); color:var(--bg); border:none; border-radius:8px; font-weight:700; font-size:.9rem; cursor:pointer; transition:all .15s; }
.play-again-btn:hover { background:var(--accent2); }

@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-6px);} 60%{transform:translateX(6px);} }
::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px;}

/* ── Game modal header ── */
.game-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--border); }
#game-title-bar { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--accent2); }