/* ============================================================
   NiftyWise Game — game.css  (Light Mode · All Devices)
   ============================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  --g-bg:        #F5F4F1;
  --g-surface:   #FFFFFF;
  --g-card:      #FFFFFF;
  --g-card2:     #F0EEE9;
  --g-orange:    #FF5C1A;
  --g-orange-lo: rgba(255,92,26,0.08);
  --g-green:     #1DB877;
  --g-green-lo:  rgba(29,184,119,0.09);
  --g-red:       #E8453C;
  --g-red-lo:    rgba(232,69,60,0.08);
  --g-ink:       #111111;
  --g-ink2:      #2E2E2E;
  --g-muted:     #6B6B6B;
  --g-muted2:    #9A9A9A;
  --g-line:      #E8E6E1;
  --g-r:         14px;
  --g-r-lg:      20px;
  --g-r-xl:      24px;
  --g-sh-sm:     0 1px 4px rgba(0,0,0,0.05), 0 2px 10px rgba(0,0,0,0.04);
  --g-sh:        0 2px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  --g-trans:     0.18s ease;
}

/* ── 2. Base ──────────────────────────────────────────────── */
.game-wrap {
  background:  var(--g-bg);
  min-height:  calc(100vh - var(--nav-h, 68px));
  padding-top: var(--nav-h, 68px);
  font-family: 'Figtree', -apple-system, sans-serif;
  color:       var(--g-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.game-wrap *, .game-wrap *::before, .game-wrap *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

/* No background reset — each element owns its own */
.game-wrap button {
  font-family: inherit;
  cursor:      pointer;
  border:      none;
  outline:     none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.game-wrap a { color: inherit; text-decoration: none; }

/* ── 3. Screen System ─────────────────────────────────────── */
.game-screen { width: 100%; }
.game-hidden  { display: none !important; }

/* ── 4. Lobby ─────────────────────────────────────────────── */
.game-lobby {
  max-width:      800px;
  margin:         0 auto;
  padding:        44px 20px 100px;
  display:        flex;
  flex-direction: column;
  gap:            28px;
}

.game-back-site {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--g-muted);
  transition:  color var(--g-trans);
}
.game-back-site:hover { color: var(--g-ink); }

/* ── Player Stats Bar ─────────────────────────────────────── */
.lobby-player {
  display:       flex;
  align-items:   center;
  gap:           0;
  background:    var(--g-card);
  border:        1px solid var(--g-line);
  border-radius: var(--g-r-xl);
  padding:       14px 20px;
  box-shadow:    var(--g-sh-sm);
}

/* ── Stat group ───────────────────────────── */
.lp-stat {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex:        1;
  min-width:   0;
}

.lp-stat-body {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  min-width:      0;
}

.lp-stat-val {
  font-size:   15px;
  font-weight: 800;
  color:       var(--g-ink);
  font-family: 'Fraunces', Georgia, serif;
  line-height: 1.2;
  white-space: nowrap;
}
.lp-stat-val span { color: var(--g-orange); }

.lp-stat-label {
  font-size:      10.5px;
  color:          var(--g-muted);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height:    1;
  white-space:    nowrap;
}

/* Vertical divider between stats */
.lp-sep {
  width:       1px;
  height:      32px;
  background:  var(--g-line);
  flex-shrink: 0;
  margin:      0 16px;
}

/* XP ring wrap — positions ⚡ icon centred inside the SVG ring */
.lp-ring-wrap {
  position:    relative;
  width:       44px;
  height:      44px;
  flex-shrink: 0;
}

.xp-ring-svg {
  width:   44px;
  height:  44px;
  display: block;
}

.lp-ring-icon {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  font-size:      15px;
  line-height:    1;
  pointer-events: none;
  color:          var(--g-orange);
}

/* Streak icon — orange-tinted circle */
.lp-streak-badge {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      rgba(255,92,26,0.08);
  border:          1.5px solid rgba(255,92,26,0.20);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.level-badge {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  border:          2.5px solid var(--g-orange);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Fraunces', Georgia, serif;
  font-size:       18px;
  font-weight:     700;
  color:           var(--g-orange);
  background:      var(--g-orange-lo);
  flex-shrink:     0;
  box-shadow:      0 0 0 4px rgba(255,92,26,0.07);
}

/* ── Lobby Hero ───────────────────────────────────────────── */
.lobby-hero {
  text-align: center;
  padding:    4px 0;
}

.lobby-eyebrow {
  display:        inline-block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color:          var(--g-orange);
  background:     var(--g-orange-lo);
  border:         1px solid rgba(255,92,26,0.18);
  border-radius:  20px;
  padding:        4px 14px;
  margin-bottom:  16px;
}

.lobby-title {
  font-family:    'Fraunces', Georgia, serif;
  font-size:      clamp(30px, 6vw, 52px);
  font-weight:    900;
  line-height:    1.1;
  color:          var(--g-ink);
  margin-bottom:  12px;
  letter-spacing: -0.8px;
}

.lobby-subtitle {
  font-size:   clamp(14px, 2.5vw, 16px);
  line-height: 1.70;
  color:       var(--g-muted);
  max-width:   480px;
  margin:      0 auto;
}

/* ── Module Cards ─────────────────────────────────────────── */
.module-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.module-card {
  background:     var(--g-card);
  border:         1.5px solid var(--g-line);
  border-radius:  var(--g-r-xl);
  overflow:       hidden;
  cursor:         pointer;
  display:        flex;
  flex-direction: column;
  user-select:    none;
  box-shadow:     var(--g-sh);
  transition:     transform var(--g-trans), box-shadow var(--g-trans), border-color var(--g-trans);
  -webkit-tap-highlight-color: transparent;
}

.module-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(255,92,26,0.35);
  box-shadow:   0 12px 40px rgba(255,92,26,0.10), 0 3px 10px rgba(0,0,0,0.07);
}

.module-card:active { transform: translateY(-1px); }

.module-card-body {
  padding:        24px 24px 18px;
  display:        flex;
  flex-direction: column;
  gap:            11px;
  flex:           1;
}

.module-card-foot {
  padding:    15px 24px 18px;
  border-top: 1.5px solid var(--g-line);
  background: linear-gradient(to bottom, rgba(255,92,26,0.04), rgba(255,92,26,0.01));
}

.module-card-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             10px;
}

.module-icon { font-size: 48px; line-height: 1; flex-shrink: 0; }
.module-icon--svg { font-size: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }

.module-tags { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }

.mod-tag {
  display:        inline-block;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.3px;
  padding:        3px 10px;
  border-radius:  20px;
  background:     var(--g-card2);
  color:          var(--g-muted);
  white-space:    nowrap;
  border:         1px solid var(--g-line);
}

.mod-tag-diff {
  background:   var(--g-orange-lo);
  color:        var(--g-orange);
  border-color: rgba(255,92,26,0.22);
}

.module-name {
  font-family:    'Fraunces', Georgia, serif;
  font-size:      clamp(18px, 3vw, 22px);
  font-weight:    800;
  color:          var(--g-ink);
  line-height:    1.2;
  letter-spacing: -0.2px;
}

.module-desc {
  font-size:   13px;
  line-height: 1.65;
  color:       var(--g-muted);
  flex:        1;
}

.module-play-btn {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            6px;
  width:          100%;
  padding:        13px 18px;
  min-height:     48px;
  background:     var(--g-orange);
  color:          #fff;
  font-size:      14px;
  font-weight:    700;
  border-radius:  var(--g-r);
  border:         none;
  cursor:         pointer;
  transition:     background var(--g-trans), transform var(--g-trans), box-shadow var(--g-trans);
  box-shadow:     0 4px 14px rgba(255,92,26,0.28);
  letter-spacing: 0.1px;
}

.module-play-btn:hover  { background: #e84d0f; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,92,26,0.34); }
.module-play-btn:active { background: #d44510; transform: translateY(0); }

/* Guest note */
.lobby-guest-note {
  text-align:    center;
  font-size:     14px;
  color:         var(--g-muted);
  padding:       18px 20px;
  background:    var(--g-card);
  border:        1px solid var(--g-line);
  border-radius: var(--g-r-lg);
  box-shadow:    var(--g-sh-sm);
  line-height:   1.65;
}
.lobby-guest-note a { color: var(--g-orange); font-weight: 600; }
.lobby-guest-note a:hover { text-decoration: underline; }

/* ── 5. Game Header ───────────────────────────────────────── */
.game-header {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             8px 10px;
  padding:         10px 20px;
  background:      var(--g-card);
  border-bottom:   1px solid var(--g-line);
  position:        sticky;
  top:             var(--nav-h, 68px);
  z-index:         10;
  box-shadow:      0 1px 6px rgba(0,0,0,0.05);
}

.game-back-btn {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   13px;
  font-weight: 600;
  color:       var(--g-muted);
  padding:     8px 14px;
  min-height:  38px;
  border-radius: 10px;
  border:      1px solid var(--g-line);
  background:  var(--g-card2);
  transition:  all var(--g-trans);
  white-space: nowrap;
  flex-shrink: 0;
}
.game-back-btn:hover  { color: var(--g-ink); border-color: rgba(0,0,0,0.20); }
.game-back-btn:active { background: var(--g-line); }

/* Q counter */
.game-q-counter {
  font-size:   13px;
  font-weight: 700;
  color:       var(--g-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.game-q-counter span { color: var(--g-ink); }
.q-of { color: var(--g-muted2); }

/* Progress bar — grows to fill space, drops to its own row on small screens */
.game-prog-bar-wrap {
  flex:     1 1 120px;
  min-width: 80px;
}

.game-prog-bar {
  width:         100%;
  height:        6px;
  background:    var(--g-line);
  border-radius: 6px;
  overflow:      hidden;
}

.game-prog-fill {
  height:        100%;
  background:    var(--g-orange);
  border-radius: 6px;
  transition:    width 0.5s cubic-bezier(0.4,0,0.2,1);
  width:         0%;
}

.game-xp-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  font-size:     13px;
  font-weight:   700;
  color:         var(--g-orange);
  background:    var(--g-orange-lo);
  border:        1.5px solid rgba(255,92,26,0.22);
  border-radius: 20px;
  padding:       5px 13px;
  white-space:   nowrap;
  flex-shrink:   0;
}

/* ── 6. Timer Bar ─────────────────────────────────────────── */
.timer-bar { width: 100%; height: 4px; background: rgba(0,0,0,0.06); overflow: hidden; }
.timer-fill { height: 100%; background: var(--g-orange); transition: width 1s linear; width: 100%; }

/* ── 7. Game Body ─────────────────────────────────────────── */
.game-body {
  max-width:      700px;
  margin:         0 auto;
  padding:        20px 20px 80px;
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

/* ── Candle Stage ─────────────────────────────────────────── */
.candle-stage {
  background:      var(--g-card);
  border:          1.5px solid var(--g-line);
  border-radius:   var(--g-r-xl);
  min-height:      200px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px;
  overflow:        hidden;
  box-shadow:      var(--g-sh);
  transition:      border-color 0.3s ease, box-shadow 0.3s ease;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,0.025) 39px, rgba(0,0,0,0.025) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,0.025) 39px, rgba(0,0,0,0.025) 40px);
}

.candle-stage.glow         { border-color: var(--g-orange); box-shadow: 0 0 0 3px rgba(255,92,26,0.10), var(--g-sh); }
.candle-stage.correct-glow { border-color: var(--g-green);  box-shadow: 0 0 0 3px rgba(29,184,119,0.12), var(--g-sh); }
.candle-stage.wrong-glow   { border-color: var(--g-red);    box-shadow: 0 0 0 3px rgba(232,69,60,0.10), var(--g-sh); }

#candle-svg-wrap { width: 100%; max-width: 360px; display: flex; align-items: center; justify-content: center; }
.candle-svg      { width: 100%; height: auto; display: block; }

/* ── Concept Stage ────────────────────────────────────────── */
.concept-stage {
  background:     var(--g-card);
  border:         1.5px solid var(--g-line);
  border-radius:  var(--g-r-xl);
  padding:        24px 20px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  text-align:     center;
  box-shadow:     var(--g-sh);
}

.concept-category {
  display:        inline-block;
  font-size:      10px;
  font-weight:    800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color:          var(--g-orange);
  background:     var(--g-orange-lo);
  border:         1px solid rgba(255,92,26,0.22);
  border-radius:  20px;
  padding:        4px 14px;
}

.concept-icon { font-size: 44px; line-height: 1; }

/* ── Question Text ────────────────────────────────────────── */
.question-text {
  font-family:    'Fraunces', Georgia, serif;
  font-size:      clamp(17px, 3.5vw, 22px);
  font-weight:    700;
  line-height:    1.42;
  color:          var(--g-ink);
  text-align:     center;
  padding:        2px 4px;
  letter-spacing: -0.2px;
}

/* ── Options ──────────────────────────────────────────────── */
.options-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}

.option-btn {
  background:     var(--g-card);
  border:         1.5px solid rgba(0,0,0,0.11);
  border-radius:  var(--g-r);
  padding:        16px 18px;
  min-height:     58px;
  font-size:      14.5px;
  font-weight:    600;
  color:          var(--g-ink);
  text-align:     left;
  cursor:         pointer;
  touch-action:   manipulation;
  transition:     border-color var(--g-trans), box-shadow var(--g-trans), transform var(--g-trans), background var(--g-trans), color var(--g-trans);
  line-height:    1.48;
  display:        flex;
  align-items:    flex-start;
  gap:            12px;
  position:       relative;
  overflow:       hidden;
  animation:      optionAppear 0.28s ease both;
  box-shadow:     0 1px 3px rgba(0,0,0,0.07), 0 3px 12px rgba(0,0,0,0.05);
  -webkit-tap-highlight-color: transparent;
}

.option-btn:nth-child(2) { animation-delay: 0.07s; }
.option-btn:nth-child(3) { animation-delay: 0.14s; }
.option-btn:nth-child(4) { animation-delay: 0.21s; }

.option-btn::before {
  content:       '';
  position:      absolute;
  left:          0; top: 0; bottom: 0;
  width:         0;
  border-radius: 0 2px 2px 0;
  background:    var(--g-orange);
  transition:    width 0.16s ease;
}

.option-btn:hover:not(:disabled) {
  border-color: rgba(255,92,26,0.65);
  background:   rgba(255,92,26,0.055);
  color:        var(--g-ink);
  transform:    translateY(-2px);
  box-shadow:   0 10px 28px rgba(255,92,26,0.14), 0 2px 8px rgba(0,0,0,0.06);
}
.option-btn:hover:not(:disabled)::before { width: 4px; }
.option-btn:active:not(:disabled)        { transform: translateY(0) scale(0.984); box-shadow: var(--g-sh-sm); }

.option-btn.correct {
  border-color: var(--g-green);
  background:   rgba(29,184,119,0.07);
  color:        #146b47;
  animation:    gamePop 0.4s ease;
  box-shadow:   0 0 0 3px rgba(29,184,119,0.11);
}
.option-btn.correct::before { background: var(--g-green); }

.option-btn.wrong {
  border-color: var(--g-red);
  background:   rgba(232,69,60,0.06);
  color:        #a12e27;
  animation:    gameShake 0.4s ease;
  box-shadow:   0 0 0 3px rgba(232,69,60,0.09);
}
.option-btn.wrong::before { background: var(--g-red); }

.option-btn.reveal {
  border-color: var(--g-green);
  background:   rgba(29,184,119,0.07);
  color:        #146b47;
  opacity:      0.85;
}
.option-btn.reveal::before { background: var(--g-green); }

.option-btn:disabled { cursor: default; }
.option-btn:disabled:not(.correct):not(.wrong):not(.reveal) { opacity: 0.38; }

.opt-letter {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           26px;
  height:          26px;
  min-width:       26px;
  border-radius:   50%;
  background:      #ECEAE5;
  font-size:       11px;
  font-weight:     800;
  flex-shrink:     0;
  margin-top:      1px;
  transition:      background 0.16s ease, color 0.16s ease, transform 0.16s ease;
  color:           #444444;
}

.opt-label {
  flex:        1;
  min-width:   0;
  word-break:  break-word;
  line-height: 1.48;
}

.option-btn:hover:not(:disabled) .opt-letter { background: var(--g-orange); color: #fff; transform: scale(1.1); }
.option-btn.correct .opt-letter { background: rgba(29,184,119,0.18); color: #146b47; }
.option-btn.wrong   .opt-letter { background: rgba(232,69,60,0.15);  color: #a12e27; }
.option-btn.reveal  .opt-letter { background: rgba(29,184,119,0.15); color: #146b47; }

/* Focus visible for keyboard users */
.option-btn:focus-visible { outline: 3px solid var(--g-orange); outline-offset: 2px; }
.module-play-btn:focus-visible,
.exp-next-btn:focus-visible,
.game-back-btn:focus-visible { outline: 3px solid var(--g-orange); outline-offset: 2px; }

/* ── Signal Badge ─────────────────────────────────────────── */
.signal-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding:        4px 10px;
  border-radius:  20px;
  flex-shrink:    0;
  margin-left:    auto;
}

.signal-badge.bullish { background: rgba(29,184,119,0.10);  color: #146b47; border: 1px solid rgba(29,184,119,0.25); }
.signal-badge.bearish { background: rgba(232,69,60,0.08);   color: #a12e27; border: 1px solid rgba(232,69,60,0.22); }
.signal-badge.neutral { background: rgba(130,100,0,0.07);   color: #7A6000; border: 1px solid rgba(130,100,0,0.18); }

/* ── Explanation Panel ────────────────────────────────────── */
.exp-panel {
  background:     var(--g-card);
  border:         1.5px solid var(--g-line);
  border-top:     3px solid var(--g-orange);
  border-radius:  var(--g-r-xl);
  padding:        22px 20px 18px;
  display:        flex;
  flex-direction: column;
  gap:            14px;
  box-shadow:     var(--g-sh);
}

.exp-panel.correct-result { border-top-color: var(--g-green); }
.exp-panel.wrong-result   { border-top-color: var(--g-red); }
.exp-panel.timeout-result { border-top-color: var(--g-muted2); }

.exp-result-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: 'Fraunces', Georgia, serif;
  font-size:   clamp(18px, 3vw, 21px);
  font-weight: 700;
  flex-wrap:   wrap;
}

.exp-result-emoji { font-size: 24px; line-height: 1; flex-shrink: 0; }
.exp-result-text.correct-text  { color: #146b47; }
.exp-result-text.wrong-text    { color: #a12e27; }
.exp-result-text.timeout-text  { color: var(--g-muted); }

.exp-body {
  font-size:   clamp(13.5px, 2.5vw, 15px);
  line-height: 1.70;
  color:       #2A2A2A;
}
.exp-body strong { color: var(--g-ink); font-weight: 700; }

.exp-tip {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  font-size:     clamp(12.5px, 2.3vw, 13.5px);
  color:         #3A3A3A;
  background:    rgba(255,92,26,0.05);
  border-left:   3px solid var(--g-orange);
  border-radius: 0 10px 10px 0;
  padding:       11px 14px;
  line-height:   1.60;
}
.exp-tip strong { color: var(--g-orange); font-weight: 700; white-space: nowrap; }

.exp-next-btn {
  width:          100%;
  padding:        16px 20px;
  min-height:     54px;
  background:     var(--g-ink);
  color:          #fff;
  font-size:      15px;
  font-weight:    700;
  border-radius:  var(--g-r);
  border:         none;
  cursor:         pointer;
  touch-action:   manipulation;
  transition:     background var(--g-trans), transform var(--g-trans);
  text-align:     center;
  letter-spacing: 0.2px;
}
.exp-next-btn:hover  { background: #2a2a2a; transform: translateY(-1px); }
.exp-next-btn:active { background: #444; transform: scale(0.985); }

/* ── Results Screen ───────────────────────────────────────── */
#screen-results {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      calc(100vh - var(--nav-h, 68px) - 80px);
}

.results-wrap {
  max-width:      500px;
  width:          100%;
  padding:        40px 20px 100px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            18px;
  text-align:     center;
}

.results-trophy { font-size: clamp(64px, 16vw, 88px); line-height: 1; }

.results-round-label {
  font-size:      11px;
  font-weight:    800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color:          var(--g-muted);
}

.results-score-big {
  font-family:    'Fraunces', Georgia, serif;
  font-size:      clamp(48px, 14vw, 72px);
  font-weight:    900;
  color:          var(--g-ink);
  line-height:    1;
  letter-spacing: -1px;
}

.results-stats-row { display: flex; gap: 10px; width: 100%; justify-content: center; }

.rstat {
  flex:           1;
  background:     var(--g-card);
  border:         1.5px solid var(--g-line);
  border-radius:  var(--g-r-lg);
  padding:        18px 12px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
  align-items:    center;
  max-width:      140px;
  box-shadow:     var(--g-sh-sm);
}

.rstat-val { font-family: 'Fraunces', Georgia, serif; font-size: clamp(22px, 6vw, 30px); font-weight: 700; color: var(--g-orange); line-height: 1; }
.rstat-lbl { font-size: 11px; font-weight: 600; color: var(--g-muted); letter-spacing: 0.3px; text-align: center; }

.results-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; }

/* ── XP Float & Streak ────────────────────────────────────── */
.xp-float {
  position:       fixed;
  top:            calc(var(--nav-h, 68px) + 14px);
  right:          20px;
  font-family:    'Fraunces', Georgia, serif;
  font-size:      20px;
  font-weight:    900;
  color:          var(--g-orange);
  pointer-events: none;
  z-index:        600;
  opacity:        0;
}

.streak-popup {
  position:      fixed;
  top:           50%;
  left:          50%;
  transform:     translate(-50%, -60%) scale(0.85);
  background:    var(--g-card);
  border:        2px solid var(--g-orange);
  border-radius: var(--g-r-xl);
  padding:       28px 36px;
  text-align:    center;
  z-index:       600;
  opacity:       0;
  pointer-events: none;
  box-shadow:    0 20px 60px rgba(255,92,26,0.16), 0 4px 16px rgba(0,0,0,0.08);
  max-width:     calc(100vw - 40px);
}

.streak-popup.active {
  opacity:    1;
  transform:  translate(-50%, -60%) scale(1);
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: auto;
}

.streak-popup-flame  { font-size: 48px; line-height: 1; margin-bottom: 8px; }
.streak-popup-title  { font-family: 'Fraunces', Georgia, serif; font-size: clamp(22px, 5vw, 26px); font-weight: 900; color: var(--g-orange); }
.streak-popup-sub    { font-size: 13px; color: var(--g-muted); margin-top: 4px; }

/* ── Misc ─────────────────────────────────────────────────── */
#lp-level  { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 900; }
#lp-xp-val { color: var(--g-orange); }
#lp-streak { color: var(--g-orange); }
#xp-ring   { transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Utility Buttons ──────────────────────────────────────── */
.game-btn-orange {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         14px 28px;
  min-height:      52px;
  background:      var(--g-orange);
  color:           #fff;
  font-family:     'Figtree', sans-serif;
  font-size:       15px;
  font-weight:     700;
  border-radius:   var(--g-r);
  border:          none;
  cursor:          pointer;
  touch-action:    manipulation;
  transition:      background var(--g-trans), transform var(--g-trans), box-shadow var(--g-trans);
  text-decoration: none;
  box-shadow:      0 4px 14px rgba(255,92,26,0.28);
}
.game-btn-orange:hover  { background: #e84d0f; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,92,26,0.34); }
.game-btn-orange:active { background: #d44510; transform: scale(0.985); }

.game-btn-ghost {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         14px 28px;
  min-height:      52px;
  background:      transparent;
  color:           var(--g-muted);
  font-family:     'Figtree', sans-serif;
  font-size:       15px;
  font-weight:     600;
  border-radius:   var(--g-r);
  border:          1.5px solid var(--g-line);
  cursor:          pointer;
  touch-action:    manipulation;
  transition:      border-color var(--g-trans), color var(--g-trans), background var(--g-trans);
  text-decoration: none;
}
.game-btn-ghost:hover  { border-color: rgba(0,0,0,0.22); color: var(--g-ink); background: var(--g-card2); }
.game-btn-ghost:active { background: var(--g-line); }

/* ── Time-Up Prompt ───────────────────────────────────────── */
.time-up-prompt {
  background:     var(--g-card);
  border:         1.5px solid rgba(255,92,26,0.30);
  border-top:     3px solid var(--g-orange);
  border-radius:  var(--g-r-xl);
  padding:        24px 20px 20px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  text-align:     center;
  box-shadow:     0 4px 24px rgba(255,92,26,0.10), var(--g-sh);
}

.tup-icon  { font-size: 30px; line-height: 1; }

.tup-title {
  font-family:    'Fraunces', Georgia, serif;
  font-size:      clamp(18px, 3.5vw, 21px);
  font-weight:    800;
  color:          var(--g-ink);
  line-height:    1.2;
}

.tup-sub {
  font-size:   13.5px;
  color:       var(--g-muted);
  line-height: 1.55;
  margin-bottom: 6px;
}

.tup-actions {
  display: flex;
  gap:     10px;
  width:   100%;
}

.tup-btn-more {
  flex:           1;
  padding:        13px 16px;
  min-height:     50px;
  background:     var(--g-card2);
  color:          var(--g-ink);
  font-family:    inherit;
  font-size:      14px;
  font-weight:    700;
  border-radius:  var(--g-r);
  border:         1.5px solid rgba(0,0,0,0.11);
  cursor:         pointer;
  touch-action:   manipulation;
  transition:     background var(--g-trans), border-color var(--g-trans), transform var(--g-trans), box-shadow var(--g-trans);
  -webkit-tap-highlight-color: transparent;
}
.tup-btn-more:hover {
  background:   #E2DED7;
  border-color: rgba(0,0,0,0.22);
  transform:    translateY(-2px);
  box-shadow:   0 6px 18px rgba(0,0,0,0.10);
}
.tup-btn-more:active { transform: translateY(0) scale(0.98); box-shadow: none; }

.tup-btn-reveal {
  flex:           1;
  padding:        13px 16px;
  min-height:     50px;
  background:     var(--g-orange);
  color:          #fff;
  font-family:    inherit;
  font-size:      14px;
  font-weight:    700;
  border-radius:  var(--g-r);
  border:         none;
  cursor:         pointer;
  touch-action:   manipulation;
  transition:     background var(--g-trans), transform var(--g-trans), box-shadow var(--g-trans);
  box-shadow:     0 4px 16px rgba(255,92,26,0.30);
  -webkit-tap-highlight-color: transparent;
}
.tup-btn-reveal:hover {
  background:  #e84d0f;
  transform:   translateY(-2px);
  box-shadow:  0 10px 28px rgba(255,92,26,0.40);
}
.tup-btn-reveal:active {
  background:  #d44510;
  transform:   translateY(0) scale(0.98);
  box-shadow:  0 3px 10px rgba(255,92,26,0.22);
}

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes optionAppear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gameShake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-7px); }
  30%     { transform: translateX(7px); }
  45%     { transform: translateX(-5px); }
  60%     { transform: translateX(5px); }
  75%     { transform: translateX(-2px); }
  90%     { transform: translateX(2px); }
}

@keyframes gamePop {
  0%   { transform: scale(0.95); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes xpFloat {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 1; }
  70%  { opacity: 1; transform: translateY(-50px); }
  100% { opacity: 0; transform: translateY(-80px); }
}

/* ── Daily Challenge Card ─────────────────────────────────── */
.module-card--daily {
  grid-column:  1 / -1;
  background:   linear-gradient(135deg, #0d1421 0%, #1c0d00 100%);
  border-color: rgba(255,92,26,0.45);
  position:     relative;
  overflow:     hidden;
}

.module-card--daily::before {
  content:      '';
  position:     absolute;
  inset:        0;
  background:   radial-gradient(ellipse 80% 60% at 70% 50%, rgba(255,92,26,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.daily-streak-bar {
  height:     3px;
  background: linear-gradient(90deg, var(--g-orange) 0%, #FFD166 50%, var(--g-orange) 100%);
  background-size: 200% 100%;
  animation:  dailyBarShimmer 3s linear infinite;
}

@keyframes dailyBarShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.module-card--daily .module-card-body { gap: 8px; }

.daily-eyebrow {
  font-size:      10px;
  font-weight:    800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color:          var(--g-orange);
  opacity:        0.9;
}

.module-card--daily .module-name {
  color: #ffffff;
  font-size: clamp(20px, 3.5vw, 26px);
}

.module-card--daily .module-desc { color: rgba(255,255,255,0.60); }

.module-card--daily .module-card-foot {
  border-top-color: rgba(255,255,255,0.10);
  background:       rgba(255,92,26,0.08);
}

.module-card--daily:hover {
  border-color: rgba(255,92,26,0.75);
  box-shadow:   0 16px 48px rgba(255,92,26,0.20), 0 3px 10px rgba(0,0,0,0.25);
}

.module-play-btn--daily {
  background: linear-gradient(135deg, #FF5C1A 0%, #FF8C42 100%);
  box-shadow: 0 4px 18px rgba(255,92,26,0.40);
}
.module-play-btn--daily:hover { background: linear-gradient(135deg, #e84d0f 0%, #e87830 100%); }

/* Completed state */
.module-card--completed { opacity: 0.72; cursor: default !important; }
.module-card--completed:hover {
  transform:    none !important;
  border-color: rgba(255,92,26,0.45) !important;
  box-shadow:   var(--g-sh) !important;
}

.daily-countdown {
  font-size:   13px;
  font-weight: 600;
  color:       rgba(255,255,255,0.55);
  text-align:  center;
  padding:     4px 0;
  letter-spacing: 0.2px;
}

/* 3x XP tag */
.mod-tag--xp {
  background:   rgba(255,215,0,0.15);
  color:        #FFD166;
  border-color: rgba(255,215,0,0.30);
  font-weight:  800;
}

/* ── Strategy card ────────────────────────────────────────── */

/* ── Difficulty tags ──────────────────────────────────────── */
.diff-beginner {
  background:   rgba(29,184,119,0.10);
  color:        #117a4a;
  border-color: rgba(29,184,119,0.28);
}

.diff-intermediate {
  background:   rgba(255,92,26,0.09);
  color:        #c44310;
  border-color: rgba(255,92,26,0.28);
}

.diff-advanced {
  background:   rgba(232,69,60,0.09);
  color:        #a12e27;
  border-color: rgba(232,69,60,0.26);
}

/* ── Wide options grid (single column for text-heavy modules) */
.options-grid--wide { grid-template-columns: 1fr; }

/* ── Responsive — Tablet 768px ────────────────────────────── */
@media (max-width: 768px) {
  .game-lobby     { padding: 32px 18px 80px; gap: 24px; }
  .game-body      { padding: 18px 18px 80px; }
  #candle-svg-wrap { max-width: 300px; }
}

/* ── Responsive — Mobile 600px ────────────────────────────── */
@media (max-width: 600px) {
  /* Lobby */
  .module-grid    { grid-template-columns: 1fr; gap: 14px; }
  .module-card-body { padding: 20px 20px 16px; gap: 10px; }
  .module-card-foot { padding: 14px 20px 18px; }
  .module-icon    { font-size: 44px; }
  .module-name    { font-size: 20px; }

  /* Options — always single column on phones */
  .options-grid   { grid-template-columns: 1fr; gap: 9px; }
  .option-btn     { padding: 15px 16px; min-height: 56px; font-size: 14px; }

  /* Game body */
  .game-body      { padding: 16px 16px 80px; gap: 12px; }
  .game-lobby     { padding: 24px 16px 70px; gap: 20px; }

  /* Candle stage — smaller on mobile to leave room for content */
  .candle-stage   { min-height: 170px; padding: 16px; }
  .concept-stage  { padding: 20px 16px; }

  /* Results */
  .results-stats-row { gap: 8px; }
  .rstat          { padding: 16px 10px; }
}

/* ── Responsive — Small phone 480px ──────────────────────── */
@media (max-width: 480px) {
  .tup-actions { flex-direction: column; }
  /* Header — progress bar drops to its own full-width row */
  .game-header { padding: 9px 14px; gap: 6px 8px; }
  .game-prog-bar-wrap { order: 10; flex: 0 0 100%; }

  /* Hide text labels that waste space */
  .back-label  { display: none; }
  .xp-label   { display: none; }

  /* XP chip shows just the icon + number */
  .game-xp-chip { padding: 5px 10px; font-size: 13px; }

  /* Lobby */
  .lobby-title  { font-size: 28px; letter-spacing: -0.5px; }
  .lobby-player    { padding: 12px 16px; }
  .lp-sep          { margin: 0 12px; height: 28px; }
  .lp-ring-wrap    { width: 38px; height: 38px; }
  .xp-ring-svg     { width: 38px; height: 38px; }
  .lp-ring-icon    { font-size: 13px; }
  .level-badge     { width: 38px; height: 38px; font-size: 16px; }
  .lp-streak-badge { width: 38px; height: 38px; }
  .lp-stat-val     { font-size: 14px; }
  .lp-stat-label   { font-size: 10px; }

  /* Playing */
  .question-text { font-size: 17px; }
  .exp-panel     { padding: 18px 16px; }
  .exp-result-row { font-size: 18px; }
  .game-header   { top: var(--nav-h, 68px); }

  /* Results */
  .results-wrap   { padding: 32px 16px 80px; gap: 14px; }
  .results-trophy { font-size: 64px; }
  .results-score-big { font-size: 52px; }
  .results-actions { flex-direction: column; }
  .game-btn-orange,
  .game-btn-ghost  { width: 100%; }
}

/* ── Responsive — Very small 360px ───────────────────────── */
@media (max-width: 360px) {
  .lobby-title    { font-size: 26px; }
  .game-lobby     { padding: 20px 14px 60px; }
  .game-body      { padding: 14px 14px 70px; gap: 10px; }
  .option-btn     { padding: 13px 14px; font-size: 13px; }
  .module-card-body { padding: 18px 18px 14px; }
  .module-card-foot { padding: 12px 18px 16px; }
  /* Tighten stats bar on very small screens */
  .lp-sep         { margin: 0 8px; }
  .lp-stat-label  { display: none; }
  .lp-ring-wrap, .lp-streak-badge, .level-badge { width: 34px; height: 34px; }
  .xp-ring-svg    { width: 34px; height: 34px; }
}

/* ── Badge System ─────────────────────────────────────────── */
.lobby-badges-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.lobby-badges-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--g-muted, #888);
  margin-bottom: 12px;
}
.lobby-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--g-card2, #F0EEE9);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 100px;
  padding: 5px 10px 5px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--g-ink, #0f172a);
  cursor: default;
  transition: transform .15s;
}
.badge-chip:hover { transform: scale(1.07); }
.badge-chip-name  { font-size: 11px; }
.badges-empty {
  font-size: 12px;
  color: var(--g-muted, #888);
  font-style: italic;
}

/* Badge Toast Notification */
.badge-toast {
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid rgba(255,92,26,0.35);
  border-radius: 16px;
  padding: 12px 16px 12px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  min-width: 220px;
  max-width: 300px;
  opacity: 0;
  pointer-events: none;
}
.badge-toast-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.badge-toast-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--g-orange, #FF5C1A);
  margin-bottom: 1px;
}
.badge-toast-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--g-ink, #0f172a);
  line-height: 1.2;
}
.badge-toast-desc {
  font-size: 11px;
  color: var(--g-muted, #888);
  margin-top: 1px;
}