/* ============================================================
   ESCAPE THE VIVA — Dashboard (gold/red/dark game theme)
   ============================================================ */

/* ----- Start-screen pill ----- */
.dash-pill{
  position:absolute; top:16px; right:16px; z-index:30;
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 6px; border-radius:100px; cursor:pointer;
  background:linear-gradient(135deg, rgba(240,180,41,.16), rgba(230,48,48,.16));
  border:1px solid rgba(240,180,41,.4);
  color:#fff; font-weight:800; font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.4); backdrop-filter:blur(6px);
  transition:transform .15s ease, box-shadow .2s ease;
}
.dash-pill:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(240,180,41,.3); }
.dash-pill img{ width:30px; height:30px; border-radius:50%; }
.dash-pill .dash-pill-ic{ font-size:14px; opacity:.9; }

/* ----- Dashboard screen ----- */
#dashboard-screen{ display:none; }
#dashboard-screen.active{ display:block; }

.dash{
  --gold:#f0b429; --gold2:#b87200; --red:#e63030; --green:#2ecc71;
  --card:rgba(30,26,21,.94); --line:rgba(240,180,41,.16); --muted:#9a9184;
  position:absolute; inset:0; overflow-y:auto;
  background:
    radial-gradient(1000px 560px at 85% -8%, rgba(240,180,41,.09), transparent 55%),
    radial-gradient(760px 520px at -5% 108%, rgba(230,48,48,.09), transparent 55%),
    #0b0a09;
  color:#ece7df; font-family:inherit;
}
.dash-wrap{ display:flex; min-height:100%; }

/* sidebar */
.dash-side{
  width:236px; flex:0 0 236px; padding:24px 16px; box-sizing:border-box;
  background:linear-gradient(180deg, rgba(22,18,15,.98), rgba(12,11,10,.98));
  border-right:1px solid var(--line); display:flex; flex-direction:column;
}
.dash-logo{ font-size:19px; font-weight:900; color:#fff; text-shadow:2px 2px 0 #000; line-height:1.05; letter-spacing:.5px; }
.dash-logo .vi{ color:var(--red); text-shadow:2px 2px 0 #000, 0 0 18px rgba(230,48,48,.5); }
.dash-logo small{ display:block; font-size:8px; letter-spacing:3px; color:var(--muted); margin-top:8px; text-transform:uppercase; }
.dash-nav{ display:flex; flex-direction:column; gap:2px; margin-top:22px; }
.dash-nav a{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px; color:#c3bcb0; font-weight:700; font-size:13.5px; cursor:pointer; text-decoration:none; transition:background .15s,color .15s,transform .1s; }
.dash-nav a .ic{ width:18px; text-align:center; font-size:15px; }
.dash-nav a:hover{ background:rgba(240,180,41,.08); color:#fff; }
.dash-nav a.active{ background:linear-gradient(120deg, var(--gold), var(--gold2)); color:#1a1206; box-shadow:0 6px 16px rgba(240,180,41,.3); }
.dash-side-foot{ margin-top:auto; display:flex; align-items:center; gap:11px; padding:12px; border-radius:13px; background:rgba(0,0,0,.4); border:1px solid var(--line); }
.dash-side-foot img{ width:42px; height:42px; border-radius:50%; }
.dash-side-foot .nm{ font-weight:800; font-size:13px; color:#fff; }
.dash-side-foot .lv{ font-size:10px; color:var(--gold); margin-top:1px; }

/* main */
.dash-main{ flex:1; padding:24px 26px 44px; box-sizing:border-box; min-width:0; }
.dash-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.dash-hi{ font-size:23px; font-weight:900; color:#fff; text-shadow:2px 2px 0 #000; line-height:1.15; }
.dash-hi .accent{ color:var(--gold); }
.dash-hi small{ display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin-top:4px; letter-spacing:.2px; }
.dash-top-right{ display:flex; align-items:center; gap:12px; }
.dash-streak{ display:flex; align-items:center; gap:9px; padding:9px 16px; border-radius:13px; background:rgba(230,48,48,.12); border:1px solid rgba(230,48,48,.32); color:var(--gold); font-weight:900; font-size:17px; }
.dash-streak .fire{ font-size:19px; }
.dash-streak small{ display:block; font-size:8px; letter-spacing:1px; color:#d3a; color:#e0b0a0; font-weight:700; }
.dash-back-btn{ padding:11px 20px; border:none; border-radius:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; font-size:12.5px; color:#1a1206; cursor:pointer; background:linear-gradient(135deg,#b87200,#f0b429); box-shadow:0 6px 18px rgba(240,180,41,.4); transition:transform .15s; }
.dash-back-btn:hover{ transform:translateY(-2px); }

/* grids */
.dash-grid{ display:grid; gap:16px; }
.g-4{ grid-template-columns:repeat(4,1fr); }
.g-2{ grid-template-columns:1.9fr 1fr; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 14px 34px rgba(0,0,0,.42); }
.card h3{ margin:0 0 16px; font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; color:#d8cba8; display:flex; align-items:center; gap:8px; font-weight:800; }

/* readiness ring */
.ring-wrap{ display:block; text-align:center; }
.ring{ position:relative; width:158px; height:158px; }
.ring .rbg{ fill:none; stroke:rgba(255,255,255,.07); stroke-width:11; }
.ring .rfg{ fill:none; stroke:url(#goldgrad); stroke-width:11; stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.ring .rtxt{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring .rtxt b{ font-size:36px; font-weight:900; color:#fff; line-height:1; text-shadow:2px 2px 0 #000; }
.ring .rtxt span{ font-size:10px; color:var(--gold); letter-spacing:3px; margin-top:5px; }

/* subject cards */
.subj-name{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:13.5px; color:#fff; margin-bottom:14px; }
.subj-ring{ width:104px; height:104px; margin:0 auto; position:relative; }
.subj-ring .sbg{ fill:none; stroke:rgba(255,255,255,.07); stroke-width:8; }
.subj-ring .sfg{ fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.subj-ring b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:23px; font-weight:900; color:#fff; text-shadow:1px 1px 0 #000; }
.subj-tag{ text-align:center; font-size:11.5px; margin-top:12px; font-weight:800; }
.subj-tag.strong{ color:var(--green); } .subj-tag.good{ color:var(--gold); } .subj-tag.avg{ color:#ff9f45; } .subj-tag.weak{ color:var(--red); }
.subj-topics{ text-align:center; font-size:10.5px; color:var(--muted); margin-top:5px; }

/* at a glance */
.glance-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:13px; }
.glance-row:last-child{ border-bottom:none; }
.glance-row .gl-l{ color:#c3bcb0; display:flex; align-items:center; gap:9px; }
.glance-row .gl-v{ font-weight:900; color:var(--gold); font-size:14px; }

/* progress */
.prog-svg{ width:100%; height:220px; display:block; }
.prog-x{ display:flex; justify-content:space-between; margin-top:8px; font-size:10px; color:var(--muted); }

/* weak areas */
.weak-item{ margin-bottom:14px; }
.weak-top{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:6px; color:#e8e2d8; }
.weak-top .wp{ color:var(--red); font-weight:900; }
.weak-bar{ height:9px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.weak-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,#e63030,#ff8a45); transition:width 1s ease; }
.weak-bloom{ margin-top:14px; padding:13px; border-radius:12px; background:rgba(230,48,48,.1); border:1px solid rgba(230,48,48,.26); }
.weak-bloom small{ font-size:9.5px; color:#e0a; color:#e6b3a8; letter-spacing:1px; text-transform:uppercase; font-weight:700; }
.weak-bloom b{ display:block; font-size:16px; color:#ff7a6a; margin-top:3px; }
.weak-cta{ width:100%; margin-top:14px; padding:13px; border:none; border-radius:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase; font-size:12px; color:#fff; cursor:pointer; background:linear-gradient(135deg,#e63030,#b81d1d); box-shadow:0 6px 18px rgba(230,48,48,.34); transition:transform .15s; }
.weak-cta:hover{ transform:translateY(-2px); }

/* Friendlier "nothing here yet" placeholder — icon + heading + short line,
   used in place of a bare grey sentence in Leaderboard/Weak Areas/Analytics. */
.dash-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:6px; padding:28px 16px; color:#9a9184;
}
.dash-empty .de-icon{ font-size:32px; opacity:.85; margin-bottom:2px; }
.dash-empty .de-title{ font-size:13.5px; font-weight:800; color:#d8cba8; }
.dash-empty .de-sub{ font-size:12px; color:#9a9184; max-width:260px; line-height:1.5; }

.dash-note{ text-align:center; color:#6f685e; font-size:11px; margin-top:22px; }

/* mobile */
.dash-burger{ display:none; }
@media (max-width:900px){
  .dash-side{ position:fixed; z-index:60; left:0; top:0; bottom:0; transform:translateX(-100%); transition:transform .25s ease; box-shadow:20px 0 60px rgba(0,0,0,.6); }
  .dash-side.open{ transform:none; }
  .dash-burger{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:rgba(0,0,0,.4); color:var(--gold); font-size:20px; cursor:pointer; flex:0 0 auto; }
  .dash-main{ padding:16px 15px 40px; }
  .dash-top{ margin-bottom:18px; }
  .dash-hi{ font-size:17px; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .g-2{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .dash-hi{ font-size:15px; order:2; width:100%; }
  .dash-top-right{ order:1; margin-left:auto; }
  .ring{ width:140px; height:140px; }
}

/* ===== Leaderboard ===== */
.lb-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; margin-bottom:7px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.lb-row.me{ background:rgba(240,180,41,.12); border-color:rgba(240,180,41,.4); }
.lb-rank{ width:24px; text-align:center; font-weight:900; color:#f0b429; font-size:15px; }
.lb-av{ width:36px; height:36px; border-radius:50%; }
.lb-name{ flex:1; font-weight:700; font-size:14px; color:#ece7df; }
.lb-xp{ font-weight:900; color:#f0b429; font-size:13px; }

/* ===== Achievements ===== */
.ach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ach-card{ text-align:center; padding:18px 12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); opacity:.55; }
.ach-card.got{ opacity:1; background:rgba(240,180,41,.08); border-color:rgba(240,180,41,.35); box-shadow:0 8px 22px rgba(240,180,41,.14); }
.ach-ic{ font-size:34px; }
.ach-nm{ font-weight:900; font-size:14px; color:#fff; margin-top:8px; }
.ach-ds{ font-size:11px; color:#9a9184; margin-top:4px; line-height:1.4; }
.ach-badge{ margin-top:10px; font-size:10px; font-weight:800; color:#1a1206; background:linear-gradient(135deg,#f0b429,#b87200); padding:4px 10px; border-radius:20px; display:inline-block; letter-spacing:1px; }
.ach-lock{ margin-top:10px; font-size:10px; color:#6f685e; }
@media (max-width:900px){ .ach-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ach-grid{ grid-template-columns:1fr; } }

/* ===== Analytics ===== */
.an-stat{ text-align:center; padding:22px 12px; }
.an-num{ font-size:32px; font-weight:900; color:#f0b429; text-shadow:2px 2px 0 #000; }
.an-lbl{ font-size:11px; color:#9a9184; margin-top:6px; letter-spacing:.5px; text-transform:uppercase; font-weight:700; }
.an-bloom-row{ display:flex; align-items:center; gap:12px; padding:8px 0; }
.an-bloom-lbl{ flex:0 0 130px; font-size:12.5px; font-weight:700; color:#e8e2d8; }
.an-bloom-bar{ flex:1; height:10px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.an-bloom-fill{ height:100%; border-radius:6px; transition:width .9s ease; }
.an-bloom-pct{ flex:0 0 44px; text-align:right; font-weight:900; font-size:13px; color:#fff; }
@media (max-width:520px){ .an-bloom-lbl{ flex-basis:96px; font-size:11px; } }

/* ============================================================
   POLISH PASS — spacing, alignment, consistency, mobile
   ============================================================ */

/* consistent card rhythm + equal-height cards in a row */
/* cards are plain blocks; ring centering done on ring elements directly */
.card h3{ margin-bottom:14px; }

/* subject cards: equal height, centered content */
.subj-tag{ margin-top:auto; }

/* readiness card: center the ring vertically */

/* progress graph: add breathing room + baseline */
.prog-svg{ margin-top:4px; }

/* section header consistency */
.dash-section h3, .dash-main > .dash-section > h3{ letter-spacing:1px; }
.dash-grid + h3{ margin-top:24px !important; }

/* nicer empty-state text */
.card [style*="text-align:center"]{ line-height:1.5; }

/* buttons: unified feel */
.dash-back-btn, .weak-cta, .dash-play-btn{ transition:transform .15s ease, box-shadow .25s ease, filter .15s ease; }
.dash-back-btn:active, .weak-cta:active{ transform:translateY(0) scale(.99); }

/* section fade-in when switching nav */
.dash-section{ animation:dashFade .35s ease both; }
@keyframes dashFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* tighten top bar on desktop */
.dash-top{ padding-bottom:4px; border-bottom:1px solid rgba(240,180,41,.08); }

/* ---- MOBILE refinements ---- */
@media (max-width:900px){
  .dash-main{ padding:14px 13px 40px; }
  .card{ padding:16px; border-radius:15px; }
  .dash-top{ gap:12px; align-items:flex-start; }
  .dash-hi{ font-size:16px; }
  .dash-hi small{ font-size:11px; }
  .dash-back-btn{ padding:10px 16px; font-size:11.5px; }
  .ring{ width:150px; height:150px; }
  .ring .rtxt b{ font-size:32px; }
  .subj-ring{ width:96px; height:96px; }
  .subj-ring b{ font-size:21px; }
  /* give the burger a fixed spot */
  .dash-burger{ position:sticky; top:0; }
  /* graphs don't overflow */
  .prog-svg{ height:180px; }
  .an-bloom-lbl{ font-size:11.5px; }
}
@media (max-width:520px){
  .dash-main{ padding:12px 11px 36px; }
  .g-4{ grid-template-columns:1fr 1fr; gap:11px; }
  .card h3{ font-size:11.5px; }
  .dash-hi{ font-size:15px; width:100%; }
  .dash-top-right{ width:100%; justify-content:flex-start; }
  .ring{ width:130px; height:130px; }
  .ring .rtxt b{ font-size:28px; }
  .lb-name{ font-size:13px; }
  .lb-xp{ font-size:12px; }
}

/* ============================================================
   MOBILE DASHBOARD REFINEMENT (from real screenshots)
   ============================================================ */
@media (max-width:520px){
  /* tighten cards — less wasted vertical space */
  .card{ padding:15px 15px; }
  .dash-grid{ gap:12px; }

  /* readiness ring: smaller + lighter stroke so it doesn't dominate */
  #sec-home .ring{ width:132px; height:132px; }
  #sec-home .ring .rfg, #sec-home .ring .rbg{ stroke-width:9; }
  #sec-home .ring .rtxt b{ font-size:30px; }
  .ring-wrap{ padding:4px 0; }

  /* readiness card doesn't need to be so tall */
  #sec-home .dash-grid.g-4 > .card:first-child{ padding-bottom:10px; }

  /* subject cards: tighter, rings a touch smaller */
  #subjects-wrap .subj-ring{ width:88px; height:88px; }
  #subjects-wrap .subj-ring b{ font-size:20px; }
  #subjects-wrap .subj-name{ margin-bottom:8px; font-size:13px; }
  #subjects-wrap .subj-tag{ margin-top:10px; }
  #subjects-wrap .subj-topics{ margin-top:3px; }

  /* at-a-glance rows a bit tighter */
  .glance-row{ padding:9px 0; font-size:13px; }

  /* section headers tighter */
  .dash-main > .dash-section > h3, .dash-grid + h3{ margin-top:18px !important; margin-bottom:10px; }

  /* top bar: back-to-game + greeting stack cleanly */
  .dash-top{ flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:16px; }
  .dash-top-right{ order:0; width:auto; }
  .dash-hi{ order:1; font-size:17px; }
  .dash-burger{ margin-bottom:2px; }
}

/* ===== Leaderboard period tabs ===== */
.lb-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.lb-tab{ flex:1; padding:9px 10px; border-radius:10px; border:1px solid rgba(240,180,41,.2); background:rgba(0,0,0,.3); color:#c3bcb0; font-weight:800; font-size:12px; cursor:pointer; transition:all .18s ease; }
.lb-tab:hover{ background:rgba(240,180,41,.08); color:#fff; }
.lb-tab.active{ background:linear-gradient(120deg,#f0b429,#b87200); color:#1a1206; border-color:transparent; box-shadow:0 4px 12px rgba(240,180,41,.3); }
@media (max-width:520px){ .lb-tab{ font-size:11px; padding:8px 6px; } }

/* ===== Fix: dashboard pill overlapping the start badge on mobile ===== */
@media (max-width:600px){
  /* push the start content down so the pill doesn't cover the badge */
  #start-screen .start-content{ padding-top:64px; }
  .dash-pill{ top:12px; right:12px; padding:5px 12px 5px 5px; font-size:12px; }
  .dash-pill img{ width:26px; height:26px; }
}

/* ===== FIX: center ring & content inside flex cards (polish pass broke margin:auto) ===== */
/* ===== ring centering handled by .dash-grid > .card align-items:center above ===== */

/* subject card: keep the name at top-left, center only the ring/tag */

/* ============================================================
   CLEAN RING CENTERING (block layout, no flex conflicts)
   ============================================================ */
.card{ display:block; }                 /* cards are simple blocks */
.ring-wrap{ display:block; text-align:center; width:100%; }
.ring{ display:inline-block; position:relative; }   /* centered by text-align:center on parent */
.subj-ring{ display:block; margin:0 auto; }         /* auto-centers in block */
.ring-wrap svg, .ring svg{ display:block; }

/* ===== FORCE readiness ring centered (verified via render) ===== */
.ring-wrap{ text-align:center !important; }
.ring{ display:inline-block !important; margin:0 auto !important; }

/* ===== FIX: make ring SVG scale to its container (was overflowing) ===== */
.ring svg{ width:100% !important; height:100% !important; display:block; }
.subj-ring svg{ width:100% !important; height:100% !important; display:block; }