src/styles/main.css

:root{
  --ink:#0b0d18; --panel:#1C1F2B; --panel-2:#222636; --mist:#2A2E3D; --mist-2:#363B4E;
  --chalk:#F4F6FB; --fog:#B4BACB;
  --amber:#F0A830; --amber-soft:rgba(240,168,48,.14);
  --spring:#46D39A; --spring-soft:rgba(70,211,154,.16);
  --coral:#FF6B6B; --coral-soft:rgba(255,107,107,.16);
  --violet:#8B7BFF;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sinhala:"Iskoola Pota","Noto Sans Sinhala",system-ui,sans-serif;
  --tamil:"Latha","Noto Sans Tamil",system-ui,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:#0b0d18;color:var(--chalk);font-family:var(--sans);min-height:100vh;
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;
  perspective:1400px;perspective-origin:50% 30%;
  text-shadow:0 1px 2px rgba(0,0,0,.55)}

/* ---- Premium scrollbar (wide grip) ---- */
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.18));border-radius:99px;margin:4px}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ffd166,var(--amber) 50%,#9a5a08);border-radius:99px;
  border:3px solid rgba(0,0,0,.4);min-height:48px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(0,0,0,.35)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ffe18c,#ffd166 50%,var(--amber))}
::-webkit-scrollbar-corner{background:transparent}
html{scrollbar-width:auto;scrollbar-color:var(--amber) rgba(0,0,0,.3)}

/* full-screen 3D scene */
#bg3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}

.wrap{max-width:1180px;margin:0 auto;padding:24px 18px 60px;position:relative;z-index:2}

/* header */
header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:baseline;gap:12px}
.logo{font-family:var(--mono);font-weight:900;font-size:32px;letter-spacing:.32em;text-indent:.32em;
  color:#FFE08A;-webkit-text-stroke:1px rgba(255,224,138,.65);
  text-shadow:
    0 2px 0 #5a3a08,
    0 3px 0 rgba(0,0,0,.55),
    0 0 22px rgba(240,168,48,.7),
    0 0 40px rgba(240,168,48,.35)}
.tagline{font-size:13.5px;color:#E2E7F2;font-weight:500;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 8px rgba(0,0,0,.5)}
.hgroup{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.total{background:linear-gradient(180deg,rgba(40,46,66,.22),rgba(20,24,38,.30));backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:9px 16px;text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,.4),0 8px 14px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.15)}
.total .n{font-family:var(--mono);font-size:24px;font-weight:800;color:var(--spring);line-height:1;
  text-shadow:0 2px 0 rgba(0,0,0,.4),0 0 14px rgba(70,211,154,.4);
  transition:transform .15s ease}
.total .n.bump{animation:counterBump .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes counterBump{
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(240,168,48,0)); }
  35%  { transform: scale(1.45); filter: drop-shadow(0 0 14px rgba(240,168,48,.85)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(240,168,48,0)); }
}
.total .l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog);margin-top:3px}

.user-chip{display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,rgba(40,46,66,.22) 0%,rgba(20,24,38,.30) 100%);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:6px 8px 6px 12px;font-size:12.5px;
  box-shadow:0 4px 0 rgba(0,0,0,.4),0 8px 16px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.15)}
.user-chip .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--spring));
  display:grid;place-items:center;color:#1a1404;font-weight:700;font-size:13px}
.user-chip .name{color:var(--chalk);font-weight:600;line-height:1.1}
.user-chip .stars{color:var(--amber);font-size:10.5px;font-family:var(--mono)}
.user-chip button{background:transparent;border:1px solid var(--mist);color:var(--fog);font:inherit;font-size:11px;
  padding:4px 8px;border-radius:8px;cursor:pointer;margin-left:4px}
.user-chip button:hover{color:var(--coral);border-color:var(--coral)}

/* track */
.track-hint{font-size:11px;color:var(--fog);margin:0 4px 8px;letter-spacing:.05em}
.track{display:flex;gap:10px;overflow-x:auto;padding:8px 12px 14px;margin-bottom:10px;
  scrollbar-width:auto;scrollbar-color:var(--amber) rgba(0,0,0,.25);
  /* Transparent fade-out at both ends, no sharp cut line */
  mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.track::-webkit-scrollbar{height:14px}
.track::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2));border-radius:99px;margin:0 12px}
.track::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ffd166,var(--amber) 50%,#9a5a08);
  border-radius:99px;border:2px solid rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.3)}
.track::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ffe18c,#ffd166 50%,var(--amber))}
.lvl{flex:0 0 auto;min-width:130px;height:142px;border-radius:18px;
  background:linear-gradient(180deg,rgba(40,46,66,.12) 0%,rgba(24,28,42,.20) 100%);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.06);cursor:pointer;position:relative;padding:14px 10px 18px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;overflow:hidden;user-select:none;
  transform-style:preserve-3d;
  box-shadow:
    0 8px 0 rgba(0,0,0,.45),
    0 14px 28px rgba(0,0,0,.45),
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -8px 16px rgba(0,0,0,.35);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,border-color .2s ease}
.lvl:hover{transform:translateY(-4px) rotateX(-2deg);box-shadow:0 14px 0 rgba(0,0,0,.4),0 22px 40px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -8px 16px rgba(0,0,0,.35)}
.lvl:active{transform:translateY(2px);box-shadow:0 4px 0 rgba(0,0,0,.45),0 8px 16px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.1),inset 0 -8px 16px rgba(0,0,0,.4)}
.lvl .g-emoji{font-size:26px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
/* 3D-extruded grade number — large, bevelled, amber gradient with depth shadows */
.lvl .g-num{font-family:var(--mono);font-weight:900;font-size:38px;line-height:.95;
  background:linear-gradient(180deg,#fff5d6 0%,#ffd166 35%,#ec9d2a 70%,#9a5a08 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:
    0 1px 0 rgba(0,0,0,.05),
    1px 2px 0 rgba(110,60,5,.55),
    2px 3px 0 rgba(80,40,5,.45),
    3px 5px 6px rgba(0,0,0,.55);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.45));
  letter-spacing:.02em;transform:translateZ(0)}
.lvl.current .g-num{filter:drop-shadow(0 0 14px rgba(255,209,102,.7)) drop-shadow(0 4px 6px rgba(0,0,0,.55))}
.lvl.done .g-num{background:linear-gradient(180deg,#d8ffea 0%,#6fe2b0 40%,#1aa172 100%);
  -webkit-background-clip:text;background-clip:text}
.lvl .g-name{font-family:var(--mono);font-weight:700;font-size:13px;color:#fff;text-align:center;letter-spacing:.04em;line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 8px rgba(0,0,0,.4)}
.lvl .g-sub{font-size:10.5px;color:#dde2ed;text-align:center;line-height:1.1;
  text-shadow:0 1px 2px rgba(0,0,0,.7)}
.lvl.current .g-name,.lvl.done .g-name{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.5)}
.lvl.current .g-sub,.lvl.done .g-sub{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.lvl .g-pct{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--amber);margin-top:auto}
.lvl .g-bar{position:absolute;left:8px;right:8px;bottom:7px;height:5px;background:var(--mist);border-radius:99px;overflow:hidden}
.lvl .g-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--spring),#5fe0aa);transition:width .6s ease;border-radius:99px}
.lvl.done{background:linear-gradient(180deg,rgba(70,211,154,.32),rgba(20,80,55,.6));border-color:rgba(70,211,154,.5);
  box-shadow:0 8px 0 rgba(15,60,40,.6),0 14px 28px rgba(70,211,154,.25),inset 0 2px 0 rgba(255,255,255,.18)}
.lvl.done .g-pct{color:var(--spring)}
.lvl.done::after{content:"✓";position:absolute;top:6px;right:8px;font-size:14px;color:var(--spring);font-weight:700;text-shadow:0 0 8px var(--spring)}
.lvl.current{background:linear-gradient(180deg,rgba(255,200,90,.38),rgba(100,55,5,.7));border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(240,168,48,.35),0 10px 0 rgba(70,40,0,.6),0 16px 32px rgba(240,168,48,.4),inset 0 2px 0 rgba(255,255,255,.25);
  transform:translateY(-4px) rotateX(-3deg)}
.lvl.current .g-pct{color:#fff;text-shadow:0 0 8px var(--amber)}

/* grid */
.grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
@media (max-width:880px){ .grid{grid-template-columns:1fr} }

/* Main typing area — clear glass, not frosted. Low alpha, minimal blur. */
.card{background:linear-gradient(180deg,rgba(40,46,66,.18) 0%,rgba(20,24,38,.28) 100%);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:30px 26px 26px;position:relative;overflow:hidden;
  box-shadow:0 12px 0 rgba(0,0,0,.35),0 20px 50px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.15),inset 0 -10px 20px rgba(0,0,0,.25);
  transform-style:preserve-3d}
.overlay{position:absolute;inset:0;background:rgba(11,13,24,.78);backdrop-filter:blur(8px);display:grid;place-items:center;text-align:center;padding:24px;z-index:5}
.overlay.hidden{display:none}
.overlay h2{font-size:24px;margin:0 0 8px}
.overlay p{color:var(--fog);font-size:14px;max-width:380px;margin:0 auto 22px}

.speaker-row{display:flex;flex-direction:column;align-items:center;gap:16px}
.speaker{width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ffd166 0%,var(--amber) 28%,#b87a1a 75%,#7c4f0e 100%);
  border:none;display:grid;place-items:center;cursor:pointer;position:relative;
  box-shadow:
    0 6px 0 #5e3a06,                                /* tight depth — was 10px, looked detached */
    0 12px 18px rgba(0,0,0,.5),                     /* soft cast shadow */
    inset 0 6px 14px rgba(255,255,255,.45),
    inset 0 -8px 18px rgba(0,0,0,.4);
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease;
  transform-style:preserve-3d}
.speaker:hover{transform:translateY(-2px) scale(1.03);
  box-shadow:0 8px 0 #5e3a06,0 16px 26px rgba(0,0,0,.55),inset 0 6px 14px rgba(255,255,255,.5),inset 0 -8px 18px rgba(0,0,0,.4)}
.speaker:active{transform:translateY(3px) scale(.98);
  box-shadow:0 2px 0 #5e3a06,0 6px 12px rgba(0,0,0,.5),inset 0 6px 14px rgba(255,255,255,.4),inset 0 -8px 18px rgba(0,0,0,.5)}
.speaker svg{width:46px;height:46px;fill:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
/* Pulsing animation ring — pinned to the speaker centre so it grows symmetrically */
.speaker .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--amber);opacity:0;pointer-events:none}
.speaker .ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--amber);opacity:0}
.speaker.playing .ring{animation:pulse 1.1s ease-out infinite}
.speaker.playing{animation:bounce 1.1s ease-in-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.replay-hint{font-size:12px;color:var(--fog)}
.replay-hint b{color:var(--amber);font-weight:600}

.meaning{margin-top:18px;background:linear-gradient(135deg,rgba(139,123,255,.08),rgba(70,211,154,.06));
  border:1px solid rgba(139,123,255,.25);border-radius:14px;padding:14px 16px;min-height:84px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center;transition:opacity .3s ease}
.meaning.empty{opacity:.5}
.meaning .col{display:flex;flex-direction:column;gap:4px}
.meaning .lab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.meaning .val{font-size:16px;font-weight:600;color:var(--chalk);min-height:24px;word-wrap:break-word}
.meaning .col.si .val{font-family:var(--sinhala);color:#ffd166}
.meaning .col.ta .val{font-family:var(--tamil);color:#a0e8af}
.meaning .val.loading{color:var(--fog);font-weight:400;font-style:italic;font-size:13px}

.tiles{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin:22px 0 6px;min-height:60px}
.tile{width:50px;height:60px;border-radius:12px;
  background:linear-gradient(180deg,#3b4360 0%,#252a40 100%);
  border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;font-family:var(--mono);font-size:26px;font-weight:700;color:var(--chalk);
  box-shadow:0 4px 0 rgba(0,0,0,.5),0 8px 14px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.35);
  text-shadow:0 2px 4px rgba(0,0,0,.5);
  transform-style:preserve-3d;
  transition:background .12s ease,border-color .12s ease,color .12s ease,transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s ease}
.tile.ghost{color:var(--fog);opacity:.4;background:linear-gradient(180deg,#1c2030,#12141d);border:1px dashed rgba(255,255,255,.1);box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05)}
.tile.ok{background:linear-gradient(180deg,#5fe3a6 0%,#2b8c61 100%);border-color:rgba(70,211,154,.7);color:#fff;
  box-shadow:0 5px 0 #154025,0 10px 20px rgba(70,211,154,.5),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.25);
  transform:translateY(-3px)}
.tile.bad{background:linear-gradient(180deg,#ff8b8b 0%,#a83838 100%);border-color:rgba(255,107,107,.7);color:#fff;
  box-shadow:0 5px 0 #5a1414,0 10px 20px rgba(255,107,107,.5),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 6px rgba(0,0,0,.3)}
.tile.reveal{background:linear-gradient(180deg,#ffd166 0%,#b87a1a 100%);border-color:rgba(240,168,48,.7);color:#fff;
  box-shadow:0 5px 0 #5e3a06,0 10px 20px rgba(240,168,48,.5),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 6px rgba(0,0,0,.3)}
.tiles.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

#typed{width:100%;background:rgba(8,10,18,.18);border:1px solid rgba(255,255,255,.08);border-bottom:2px solid var(--mist);color:#fff;
  font-family:var(--mono);font-size:22px;letter-spacing:.04em;text-align:center;padding:12px 8px;outline:none;border-radius:10px;
  caret-color:var(--amber);transition:border-color .15s ease,background .15s ease;margin-top:14px;
  text-shadow:0 1px 2px rgba(0,0,0,.7)}
#typed:focus{border-color:var(--amber);background:rgba(8,10,18,.32);box-shadow:0 0 0 3px rgba(240,168,48,.25)}
#typed::placeholder{color:#aab2c4;letter-spacing:0;font-family:var(--sans);font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#typed:disabled{opacity:.5}
.feedback{text-align:center;margin-top:14px;font-size:14px;min-height:22px;color:#dde2ed;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.feedback.good{color:#7afac0;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(70,211,154,.4)}
.feedback.fail{color:#ff9a9a;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 10px rgba(255,107,107,.4)}
.feedback .ans{font-family:var(--mono);color:#ffd166;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 8px rgba(240,168,48,.5)}
.controls{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
button.btn{font-family:var(--sans);font-size:14px;font-weight:700;border-radius:12px;padding:12px 22px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,#3b4360 0%,#252a40 100%);
  color:#fff;position:relative;
  box-shadow:0 5px 0 rgba(0,0,0,.5),0 10px 18px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.2),inset 0 -3px 6px rgba(0,0,0,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.6);transform-style:preserve-3d;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s ease,background .12s ease,color .12s ease}
button.btn:hover{transform:translateY(-2px);color:#fff;
  border-color:rgba(255,209,102,.55);
  box-shadow:0 7px 0 rgba(0,0,0,.5),0 14px 28px rgba(240,168,48,.35),0 0 0 1px rgba(255,209,102,.25),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.3);
  background:linear-gradient(180deg,#5a6488 0%,#363e5c 100%)}
button.btn:active{transform:translateY(3px);color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.45);
  background:linear-gradient(180deg,#262c42 0%,#171b2c 100%)}
/* Gold/amber glossy 3D — same palette as the speaker button */
button.btn.ghostbtn{background:linear-gradient(180deg,#ffd166 0%,var(--amber) 45%,#b87a1a 100%);
  border-color:rgba(255,221,150,.6);color:#3a2406;
  text-shadow:0 1px 1px rgba(255,255,255,.4);
  box-shadow:0 5px 0 #5e3a06,0 10px 22px rgba(184,122,26,.5),
    inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(90,40,6,.4),
    inset 0 0 14px rgba(255,225,150,.3)}
button.btn.ghostbtn:hover{background:linear-gradient(180deg,#ffdc84 0%,#f7b53f 45%,#c98a22 100%);
  box-shadow:0 6px 0 #5e3a06,0 13px 28px rgba(200,138,34,.6),
    inset 0 2px 0 rgba(255,255,255,.75),inset 0 -3px 8px rgba(90,40,6,.38),
    inset 0 0 16px rgba(255,235,170,.45)}
.btn.danger{color:#fff;background:linear-gradient(180deg,#ff8b8b 0%,#a83838 100%);
  box-shadow:0 5px 0 #5a1414,0 10px 18px rgba(255,107,107,.4),inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 6px rgba(0,0,0,.3)}
.btn.danger:hover{background:linear-gradient(180deg,#ffaaaa,#bf4444)}
.btn.danger:active{box-shadow:0 2px 0 #5a1414,0 4px 8px rgba(255,107,107,.5),inset 0 2px 0 rgba(255,255,255,.2),inset 0 -3px 6px rgba(0,0,0,.4)}

.levelup{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:6}
.levelup span{font-family:var(--mono);font-weight:700;font-size:26px;color:var(--amber);background:#1a1d28;
  padding:16px 32px;border-radius:18px;text-align:center;white-space:pre-line;
  box-shadow:0 18px 60px -16px rgba(240,168,48,.7),0 0 0 1px var(--amber)}

.burst{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:visible}
.burst .star{position:absolute;width:14px;height:14px;background:linear-gradient(45deg,var(--amber),#ffd166);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 0 6px var(--amber))}

/* sidebar */
.side{display:flex;flex-direction:column;gap:14px}
.pcard{background:linear-gradient(180deg,rgba(40,46,66,.12) 0%,rgba(20,24,38,.20) 100%);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:18px;
  box-shadow:0 8px 0 rgba(0,0,0,.35),0 14px 28px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.14),inset 0 -8px 16px rgba(0,0,0,.25);
  transform-style:preserve-3d}
.pcard .eyebrow{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.pcard .lvlnum{font-family:var(--mono);font-weight:700;font-size:26px;line-height:1.15;color:var(--amber);text-shadow:0 0 22px rgba(240,168,48,.5);margin-top:2px}
.pcard .lvldesc{font-size:13px;color:var(--fog);margin-bottom:14px;margin-top:2px}
.bar{height:12px;border-radius:99px;background:var(--mist);overflow:hidden;position:relative}
.bar > i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--spring),#5fe0aa,var(--amber));transition:width .6s ease;box-shadow:0 0 12px rgba(70,211,154,.6)}
.barlabel{display:flex;justify-content:space-between;font-size:12px;margin-top:8px;color:var(--fog)}
.barlabel b{color:var(--chalk);font-family:var(--mono)}
.ministats{display:flex;gap:10px;margin-top:14px}
.ministat{flex:1;background:var(--panel-2);border-radius:12px;padding:9px;text-align:center}
.ministat .n{font-family:var(--mono);font-weight:700;font-size:18px}
.ministat .l{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog);margin-top:3px}
.ministat.rem .n{color:var(--amber)} .ministat.strk .n{color:var(--spring)}

.fam h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin:0 0 10px;display:flex;justify-content:space-between}
.fam h3 span{color:var(--spring);font-family:var(--mono)}
.famlist{max-height:280px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:6px}
.famlist .fw{font-family:var(--mono);font-size:13px;background:var(--spring-soft);color:var(--spring);
  border:1px solid rgba(70,211,154,.3);border-radius:8px;padding:4px 9px;cursor:pointer;transition:transform .15s ease}
.famlist .fw:hover{transform:translateY(-2px);background:rgba(70,211,154,.28)}
.famlist .fw .s{font-size:9.5px;color:var(--amber);margin-left:4px;letter-spacing:-.5px}
.famempty{color:var(--fog);font-size:13px;text-align:center;padding:18px 8px}

/* leaderboard */
.leaderboard{background:linear-gradient(180deg,rgba(40,46,66,.22) 0%,rgba(20,24,38,.30) 100%);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 18px;
  box-shadow:0 8px 0 rgba(0,0,0,.4),0 14px 28px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.12);
  transform-style:preserve-3d}
.leaderboard h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.leaderboard h3 .live{font-family:var(--mono);color:var(--spring);font-size:10px;display:flex;align-items:center;gap:5px}
.leaderboard h3 .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--spring);box-shadow:0 0 8px var(--spring);animation:livepulse 2s ease infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.4}}
.lb-row{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;font-size:13px;transition:background .15s ease}
.lb-row:hover{background:var(--mist)}
.lb-row.me{background:linear-gradient(90deg,var(--amber-soft),transparent);border:1px solid rgba(240,168,48,.3)}
.lb-row .rank{font-family:var(--mono);font-weight:700;color:var(--fog);text-align:center;font-size:13px}
.lb-row.r1 .rank{color:#ffd700}
.lb-row.r2 .rank{color:#c0c0c0}
.lb-row.r3 .rank{color:#cd7f32}
.lb-row .who{display:flex;align-items:center;gap:7px;min-width:0}
.lb-row .who .a{width:22px;height:22px;border-radius:50%;background:var(--mist);display:grid;place-items:center;font-size:10.5px;font-weight:700;flex-shrink:0}
.lb-row .who .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .pts{font-family:var(--mono);color:var(--amber);font-weight:700;font-size:13px}
.lb-stats{display:flex;justify-content:space-around;padding:12px 4px 6px;border-top:1px solid var(--mist);margin-top:8px;text-align:center}
.lb-stats div{font-size:10.5px;letter-spacing:.06em;color:var(--fog);text-transform:uppercase}
.lb-stats div b{display:block;font-family:var(--mono);font-size:16px;color:var(--chalk);margin-bottom:2px}
.lb-stats div b.green{color:var(--spring)}

/* settings */
details.settings{background:linear-gradient(180deg,rgba(40,46,66,.22) 0%,rgba(20,24,38,.30) 100%);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:2px 16px;
  box-shadow:0 6px 0 rgba(0,0,0,.4),0 10px 22px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.1)}
details.settings summary{cursor:pointer;padding:12px 0;font-size:13px;font-weight:600;color:var(--fog);list-style:none}
details.settings summary::-webkit-details-marker{display:none}
details.settings summary::before{content:"⚙  "}
.set-row{padding:6px 0 14px}
.set-row label{display:block;font-size:12.5px;margin-bottom:7px}
.set-row .hint{color:var(--fog);font-size:11px;margin-bottom:7px}
input[type=range]{width:100%;accent-color:var(--amber)}
select{width:100%;background:var(--ink);color:var(--chalk);border:1px solid var(--mist);border-radius:9px;padding:8px 10px;font-family:var(--sans);font-size:12.5px}
.pct{font-family:var(--mono);color:var(--amber)}
.toggle{display:flex;align-items:center;gap:10px;font-size:12.5px;cursor:pointer}
footer{text-align:center;color:var(--fog);font-size:11.5px;margin-top:26px;line-height:1.7}

/* auth screen */
.auth-screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;
  background:radial-gradient(ellipse at top,rgba(28,31,43,.45),rgba(11,13,24,.65));backdrop-filter:blur(6px)}
.auth-screen.hidden{display:none}
.auth-card{width:100%;max-width:440px;
  background:linear-gradient(180deg,rgba(48,54,76,.95) 0%,rgba(20,24,38,.97) 100%);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:36px 32px;
  box-shadow:
    0 18px 0 rgba(0,0,0,.4),
    0 30px 80px -10px rgba(0,0,0,.85),
    inset 0 2px 0 rgba(255,255,255,.15),
    inset 0 -10px 24px rgba(0,0,0,.35);
  transform-style:preserve-3d}
.auth-card h2{font-family:var(--mono);font-weight:900;font-size:30px;margin:0 0 8px;letter-spacing:.18em;
  color:#FFE08A;-webkit-text-stroke:1px rgba(255,224,138,.55);
  text-shadow:0 2px 0 #5a3a08,0 3px 0 rgba(0,0,0,.55),0 0 22px rgba(240,168,48,.7)}
.auth-card .sub{color:#E2E7F2;font-size:14px;margin-bottom:22px;font-weight:500;
  text-shadow:0 1px 2px rgba(0,0,0,.8)}
.auth-tabs{display:flex;gap:6px;background:var(--ink);padding:5px;border-radius:12px;margin-bottom:20px}
.auth-tabs button{flex:1;background:transparent;color:var(--fog);border:none;padding:9px;font:inherit;font-weight:600;font-size:13px;border-radius:9px;cursor:pointer;transition:all .15s ease}
.auth-tabs button.active{background:var(--amber);color:#1a1404}
.auth-field{margin-bottom:14px}
.auth-field label{display:block;font-size:11px;color:var(--fog);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.auth-field input{width:100%;background:var(--ink);border:1px solid var(--mist);color:var(--chalk);padding:11px 14px;border-radius:10px;font:inherit;font-size:14px;outline:none;transition:border-color .15s ease}
.auth-field input:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.auth-field .err{color:var(--coral);font-size:11.5px;margin-top:5px;min-height:14px}
.auth-card button.primary{width:100%;
  background:linear-gradient(180deg,#ffd166 0%,var(--amber) 50%,#b87a1a 100%);
  color:#1a1404;border:none;padding:14px;font:inherit;font-weight:800;font-size:15px;border-radius:13px;cursor:pointer;
  box-shadow:0 7px 0 #5e3a06,0 14px 26px rgba(240,168,48,.5),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(120,70,5,.3);
  transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s ease;margin-top:6px;
  text-shadow:0 1px 0 rgba(255,230,160,.6)}
.auth-card button.primary:hover{transform:translateY(-2px);box-shadow:0 9px 0 #5e3a06,0 18px 32px rgba(240,168,48,.65),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 6px rgba(120,70,5,.3)}
.auth-card button.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #5e3a06,0 6px 12px rgba(240,168,48,.5),inset 0 2px 0 rgba(255,255,255,.4),inset 0 -3px 6px rgba(120,70,5,.4)}
.auth-link{background:none;border:none;color:var(--amber);font:inherit;font-size:12.5px;cursor:pointer;padding:4px 0;margin-top:12px}
.auth-link:hover{text-decoration:underline}
.auth-card .guest{margin-top:18px;padding-top:18px;border-top:1px solid var(--mist);text-align:center}
.auth-card .guest button{background:transparent;border:1px dashed var(--mist-2);color:var(--fog);font:inherit;font-size:12px;padding:8px 16px;border-radius:9px;cursor:pointer}
.auth-card .guest button:hover{border-color:var(--fog);color:var(--chalk)}

/* ===== Weather-stage journey medals ===== */
.pcard.medals h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog);margin:0 0 12px;display:flex;justify-content:space-between}
.pcard.medals h3 span{color:var(--amber);font-family:var(--mono)}
.medal-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.medal{aspect-ratio:1/1.15;border-radius:10px;background:linear-gradient(180deg,rgba(40,46,66,.55),rgba(20,24,38,.7));
  border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 2px 4px;text-align:center;opacity:.35;transition:all .25s ease;position:relative;overflow:hidden}
.medal .m-emoji{font-size:18px;line-height:1;filter:grayscale(.7)}
.medal .m-name{font-size:8.5px;color:var(--fog);margin-top:3px;letter-spacing:0;line-height:1.05;
  width:100%;text-align:center;padding:0 1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.medal.earned{opacity:1}
.medal.earned .m-emoji{filter:none;transform:scale(1.08)}
.medal.earned .m-name{color:var(--chalk);font-weight:600}
.medal.medal-bronze.earned{background:linear-gradient(180deg,#c49070,#7a4a25);border-color:#d8a07a;box-shadow:0 0 14px rgba(196,144,112,.45)}
.medal.medal-silver.earned{background:linear-gradient(180deg,#d5dae4,#7a8290);border-color:#e5eaf2;box-shadow:0 0 14px rgba(213,218,228,.5)}
.medal.medal-gold.earned  {background:linear-gradient(180deg,#ffd76a,#a67309);border-color:#ffe18c;box-shadow:0 0 16px rgba(255,215,106,.55)}
.medal.medal-trophy.earned{background:linear-gradient(180deg,#fff0a0,#bf9300);border-color:#fff6c0;box-shadow:0 0 22px rgba(255,232,120,.75),inset 0 0 10px rgba(255,250,200,.4)}
.medal.current::after{content:"";position:absolute;inset:-2px;border-radius:12px;border:2px solid var(--amber);
  box-shadow:0 0 16px rgba(240,168,48,.7);pointer-events:none;animation:medalPulse 1.4s ease-in-out infinite}
@keyframes medalPulse{0%,100%{opacity:.8}50%{opacity:.35}}
.medal-cap{margin-top:10px;font-size:10.5px;color:var(--fog);line-height:1.4;text-align:center;letter-spacing:.02em}
.medal-cap b{color:var(--amber);font-weight:700}

/* ===== Admin dashboard ===== */
.admin-card{width:min(1100px,96vw);max-height:90vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(34,38,54,.95),rgba(20,24,38,.97));
  border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.admin-card.page{width:min(1400px,100%);max-height:none;height:100%;border-radius:14px}
.admin-card.page header{padding:22px 26px}
.admin-card.page header h2{font-size:22px}
.admin-card header{display:flex;align-items:center;gap:18px;
  padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.25)}
.admin-card header h2{margin:0;font-family:var(--mono);font-size:18px;letter-spacing:.1em;color:var(--amber);white-space:nowrap}
.admin-card header .admin-current{flex:1;font-size:12.5px;color:var(--fog);font-family:var(--mono)}
.admin-card header .admin-current b{color:var(--chalk);font-weight:600}
.admin-card header .admin-head-actions{display:flex;gap:8px;align-items:center}
.admin-card header .close{background:transparent;border:none;color:var(--fog);font-size:26px;
  cursor:pointer;width:36px;height:36px;border-radius:8px;line-height:1}
.admin-card header .close:hover{background:rgba(255,255,255,.08);color:var(--chalk)}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;padding:18px 22px;
  background:rgba(0,0,0,.18)}
.admin-stat{background:linear-gradient(180deg,rgba(40,46,66,.45),rgba(20,24,38,.55));
  border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px 14px;text-align:center}
.admin-stat .n{font-family:var(--mono);font-size:24px;font-weight:800;color:var(--spring)}
.admin-stat .l{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--fog);margin-top:3px}
.admin-stat.online-now .n{color:#7afac0}
.admin-stat.online-now{position:relative}
.admin-stat.online-now::before{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:#46d39a;box-shadow:0 0 8px #46d39a;animation:pulseOnline 1.5s ease-in-out infinite}
@keyframes pulseOnline{0%,100%{opacity:.6}50%{opacity:1}}
.admin-btn.primary{background:linear-gradient(180deg,#ffd76a,#a67309);color:#1a1404;border-color:#ffd76a}
.admin-btn.primary:hover{filter:brightness(1.1)}
.admin-table .email .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#454c60;margin-right:8px;vertical-align:middle}
.admin-table .email .dot.online{background:#46d39a;box-shadow:0 0 6px #46d39a}
.admin-actions{display:flex;align-items:center;gap:8px;padding:12px 22px;
  border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(0,0,0,.12)}
.admin-btn{padding:7px 14px;font-size:12px}
.admin-btn.ghost{background:rgba(60,68,92,.4)}
.admin-spacer{flex:1}
.admin-warn{font-size:11px;color:var(--fog);font-style:italic}
.admin-search{background:rgba(8,10,18,.5);border:1px solid rgba(255,255,255,.1);color:var(--chalk);
  border-radius:8px;padding:7px 12px;font:inherit;font-size:12.5px;min-width:240px;font-family:var(--sans)}
.admin-search::placeholder{color:var(--fog)}
.admin-search:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,168,48,.18)}
.admin-empty{padding:40px;text-align:center;color:var(--fog);font-size:13px;font-style:italic}
.admin-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 22px;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.18);
  font-size:11px;color:var(--fog);letter-spacing:.02em}
.admin-table-wrap{overflow:auto;flex:1;padding:0}
.admin-table{width:100%;border-collapse:collapse;font-size:12.5px}
.admin-table th{position:sticky;top:0;background:rgba(15,18,30,.95);text-align:left;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog);
  padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);z-index:2}
.admin-table td{padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--chalk)}
.admin-table tr:hover td{background:rgba(255,255,255,.03)}
.admin-table .email{font-family:var(--mono);font-size:11.5px;color:#cfd5e3}
.admin-table .email em{color:var(--amber);font-style:normal;font-size:10.5px}
.admin-table .role{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.role-admin{background:rgba(240,168,48,.18);color:var(--amber);border:1px solid rgba(240,168,48,.45)}
.role-user {background:rgba(255,255,255,.05);color:var(--fog);border:1px solid rgba(255,255,255,.1)}
.admin-table .acts{display:flex;gap:5px}
.admin-table .acts button{width:28px;height:28px;border-radius:7px;border:1px solid rgba(255,255,255,.1);
  background:rgba(40,46,66,.5);color:var(--chalk);cursor:pointer;font-size:13px;line-height:1;padding:0}
.admin-table .acts button:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.admin-table .acts button:disabled{opacity:.3;cursor:not-allowed}

/* Admin chip in header — only visible when user.isAdmin */
.admin-chip{background:linear-gradient(180deg,rgba(240,168,48,.2),rgba(184,122,26,.4));
  border:1px solid rgba(240,168,48,.5);color:var(--amber);font-size:11px;font-weight:700;
  letter-spacing:.06em;padding:7px 12px;border-radius:10px;cursor:pointer;font-family:var(--mono);
  transition:all .15s ease}
.admin-chip:hover{background:linear-gradient(180deg,#ffd76a,#a67309);color:#1a1404;transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}}