/* Layout: one phone-width column floating over a living rangoli night sky; home = hero, 2x2 glowing game cards, practice strip, leaderboard; game = glass clue stage over guess log. Deliberately single dark theme. */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#0A0912; --glass:rgba(30,25,48,.72); --solid:#191527; --sunk:rgba(255,255,255,.06); --ink:#F4EEE2; --muted:#A79FC0; --line:rgba(255,255,255,.10);
  --marigold:#FFB020; --vermilion:#FF5A3C; --good:#4ADE80; --warn:#FBBF24; --bad:#FB6060;
  --c-city:#3DD6D0; --c-movie:#FF4F9A; --c-cricket:#86E05A; --c-brand:#FF8A3D;
  --f-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Hind",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px 48px}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 70% at 50% -10%,rgba(255,176,32,.16),transparent 60%),radial-gradient(80% 60% at 100% 100%,rgba(255,79,154,.10),transparent 60%)}
canvas#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
#app.enter{animation:enter .55s cubic-bezier(.2,.9,.2,1) both}
@keyframes enter{from{opacity:.01;transform:translateY(18px) scale(.985);filter:blur(4px)}}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.05;text-wrap:balance}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted);font-size:14px}

/* Hero */
.top{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:var(--glass);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line);font-weight:600;font-size:14px;white-space:nowrap}
.pill.pro{color:var(--marigold);box-shadow:inset 0 0 0 1px rgba(255,176,32,.4)}
.flame{display:inline-block;transform-origin:50% 90%}
.pill.hot .flame{animation:flick 1.4s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(-4deg)}50%{transform:scale(1.2) rotate(4deg)}}
.hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 4px}
.hero h1{font-size:clamp(60px,18vw,92px);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(100deg,#FFD27A 0%,var(--marigold) 30%,#FFF4D6 45%,var(--vermilion) 70%,var(--marigold) 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite;filter:drop-shadow(0 6px 30px rgba(255,140,32,.35))}
@keyframes shine{to{background-position:-250% 0}}
.scripts{height:34px;position:relative;width:100%;overflow:hidden}
.scripts span{position:absolute;inset:0;font-size:24px;font-weight:800;color:var(--ink);opacity:0;transform:translateY(100%);transition:opacity .6s,transform .6s cubic-bezier(.2,.9,.2,1)}
.scripts span.on{opacity:.9;transform:none}
.scripts span.out{opacity:0;transform:translateY(-100%)}
.tag{color:var(--muted);max-width:34ch;font-size:16px}
.tag em{color:var(--marigold);font-style:normal;font-weight:600}
.dayline{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.dayline .pill{font-weight:500;color:var(--muted)}
.dayline .pill b{color:var(--ink);font-weight:600}

/* Game cards */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{--rx:0deg;--ry:0deg;position:relative;text-align:left;border-radius:var(--r);padding:16px;min-height:170px;
  display:flex;flex-direction:column;gap:6px;isolation:isolate;transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease;animation:rise .7s cubic-bezier(.2,.9,.2,1) both}
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--ang),transparent 0 55%,var(--gc) 75%,transparent 95%);animation:spin 5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--gc) 26%,transparent),transparent 60%),var(--glass);box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -20px color-mix(in srgb,var(--gc) 70%,transparent)}
@keyframes spin{to{--ang:360deg}}
.tile:nth-child(2){animation-delay:.08s}.tile:nth-child(3){animation-delay:.16s}.tile:nth-child(4){animation-delay:.24s}
.tile:nth-child(2)::before{animation-delay:-1.2s}.tile:nth-child(3)::before{animation-delay:-2.5s}.tile:nth-child(4)::before{animation-delay:-3.7s}
@keyframes rise{from{transform:translateY(24px) scale(.96);opacity:.01}}
.tile .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:color-mix(in srgb,var(--gc) 18%,transparent);box-shadow:0 0 24px -4px var(--gc);animation:bob 3.2s ease-in-out infinite}
.tile:nth-child(even) .ico{animation-delay:-1.6s}
@keyframes bob{50%{transform:translateY(-4px) rotate(-4deg)}}
.tile h3{font-size:26px;color:var(--gc);margin-top:6px}
.tile .dev{font-family:"Baloo 2",var(--f-display);font-size:13px;color:var(--muted);margin-top:-6px}
.tile .sub{font-size:14px;color:var(--muted);line-height:1.3}
.tile .state{margin-top:auto;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tile .play{color:var(--gc);display:inline-flex;gap:4px;align-items:center}
.tile .play i{font-style:normal;transition:transform .25s}
.tile:hover .play i{transform:translateX(4px)}
.dots{display:inline-flex;gap:3px}
.dots i{width:10px;height:10px;border-radius:3px;background:var(--line)}
.dots i.g{background:var(--good)}.dots i.y{background:var(--warn)}.dots i.o{background:#FB923C}.dots i.r{background:var(--bad)}

/* Practice strip */
.strip{display:flex;align-items:center;gap:14px;border-radius:var(--r);padding:16px;flex-wrap:wrap;position:relative;overflow:hidden;
  background:linear-gradient(110deg,rgba(255,176,32,.18),rgba(255,90,60,.12)),var(--glass);box-shadow:inset 0 0 0 1px rgba(255,176,32,.25)}
.strip .t{flex:1;min-width:170px}
.strip b{font-family:var(--f-display);font-size:20px}
.strip small{display:block;color:var(--muted);font-size:13px}
.coins{display:flex;gap:6px}
.coins i{font-style:normal;font-size:20px;filter:drop-shadow(0 0 8px rgba(255,176,32,.8));transition:filter .4s,opacity .4s,transform .4s}
.coins i.used{filter:grayscale(1) brightness(.6);opacity:.35;transform:scale(.8)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:14px;font-weight:600;background:var(--sunk);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:transform .15s,box-shadow .2s}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(135deg,#FFC94D,var(--marigold) 50%,var(--vermilion));color:#2A1400;box-shadow:0 8px 24px -8px rgba(255,140,32,.8);position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{60%,100%{transform:translateX(120%)}}
.btn.ghost{background:transparent}
.btn.full{width:100%}

/* Leaderboard */
.card{background:var(--glass);backdrop-filter:blur(12px);border-radius:var(--r);padding:18px;box-shadow:inset 0 0 0 1px var(--line)}
.lb-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.lb-head h2{font-size:24px}
.lb{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lb li{display:grid;grid-template-columns:32px 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);animation:rise .5s both}
.lb li:first-child{border-top:0}
.lb .rk{font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--muted);text-align:center}
.lb li:nth-child(1) .rk{color:var(--marigold);text-shadow:0 0 12px rgba(255,176,32,.7)}
.lb .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.lb .me{color:var(--marigold);font-weight:700;font-size:11px;margin-left:6px;letter-spacing:.08em}
.lb .sc{font-family:var(--f-display);font-weight:800;font-size:20px}
.lb .st{font-size:13px;color:var(--muted)}
.empty{color:var(--muted);font-size:14px;padding:8px 0;display:flex;gap:10px;align-items:center}
footer{text-align:center;color:var(--muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ig{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;
  background:linear-gradient(var(--solid),var(--solid)) padding-box,linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5) border-box;border:1.5px solid transparent;transition:transform .2s}
.ig:hover{transform:translateY(-2px)}
.ig b{color:var(--marigold);font-weight:600}
.ghead .mode{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig.small{align-self:center;padding:7px 14px;font-size:13px;color:var(--muted)}

/* Game header */
.ghead{display:flex;align-items:center;gap:12px}
.back{width:44px;height:44px;border-radius:14px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-size:20px;display:grid;place-items:center;transition:transform .2s}
.back:hover{transform:translateX(-3px)}
.ghead .ttl{flex:1;min-width:0}
.ghead h2{font-size:32px;color:var(--gc);text-shadow:0 0 24px color-mix(in srgb,var(--gc) 50%,transparent)}
.ghead .mode{font-size:13px;color:var(--muted)}
.lives{display:flex;gap:2px}
.lives i{font-style:normal;font-size:18px;filter:drop-shadow(0 0 6px rgba(255,176,32,.9));transition:filter .6s,opacity .6s,transform .6s}
.lives i.lost{filter:grayscale(1) brightness(.5);opacity:.35;transform:translateY(3px) scale(.85)}
.lives i.dying{animation:snuff .8s both}
@keyframes snuff{30%{transform:scale(1.4);filter:drop-shadow(0 0 14px #FF5A3C)}100%{filter:grayscale(1) brightness(.5);opacity:.35;transform:translateY(3px) scale(.85)}}

/* Stage */
.stage{background:var(--glass);backdrop-filter:blur(14px);border-radius:var(--r);padding:18px;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -30px color-mix(in srgb,var(--gc) 60%,transparent)}
.stage::before{content:"";position:absolute;width:420px;height:420px;right:-180px;top:-180px;z-index:-1;opacity:.14;border-radius:50%;
  background:repeating-conic-gradient(var(--gc) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,transparent 30%,#000 31% 33%,transparent 34% 48%,#000 49% 70%,transparent 71%);mask:radial-gradient(circle,transparent 30%,#000 31% 33%,transparent 34% 48%,#000 49% 70%,transparent 71%);animation:turn 40s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.stage .eyebrow{margin-bottom:12px;display:flex;justify-content:space-between;gap:10px}
.clues{display:grid;gap:8px}
.clue{display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:14px;background:var(--sunk);box-shadow:inset 3px 0 0 var(--gc)}
.clue .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gc);font-weight:700;min-width:78px}
.clue .v{font-weight:600;min-width:0}
.clue.locked{justify-content:center;font-size:14px;box-shadow:inset 0 0 0 1px dashed var(--line);background:transparent;border:1px dashed var(--line)}
.clue.locked .v{font-weight:500;color:var(--muted)}
.clue.new,.stat.new{animation:flip .7s cubic-bezier(.2,.8,.2,1.25) both}
@keyframes flip{from{transform:perspective(600px) rotateX(-95deg);opacity:.01;filter:brightness(2)}60%{filter:brightness(1.4)}}

/* Movie reel */
.reel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:4px 0 14px}
.frame{min-width:0;aspect-ratio:10/8;border-radius:10px;background:#000;display:grid;place-items:center;font-size:clamp(22px,7.5vw,34px);position:relative;box-shadow:0 0 0 1px var(--line),0 10px 20px -10px var(--gc)}
.frame::before,.frame::after{content:"";position:absolute;left:6px;right:6px;height:5px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 6px,transparent 6px 12px)}
.frame::before{top:4px}.frame::after{bottom:4px}
.frame.locked{background:var(--sunk);color:var(--muted);font-size:20px;box-shadow:0 0 0 1px var(--line)}
.frame.new{animation:pop .6s cubic-bezier(.2,.8,.2,1.5) both}
@keyframes pop{from{transform:scale(.3) rotate(-12deg);opacity:.01}}

/* Cricket card */
.statcard{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:var(--sunk);border-radius:14px;padding:11px 13px;min-width:0;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--gc) 60%,transparent)}
.stat.wide{grid-column:1/-1}
.stat .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat .v{font-family:var(--f-display);font-size:22px;font-weight:700;color:var(--gc);line-height:1.2}
.stat.long .v{font-size:17px;line-height:1.3}
.stat.wide .v{font-family:var(--f-body);font-size:15px;color:var(--ink);font-weight:600}
.stat.locked{box-shadow:none;border:1px dashed var(--line);background:transparent}
.stat.locked .v{color:var(--muted);opacity:.6}

/* Brand sign */
.sign{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;margin-bottom:12px;border-radius:14px;background:radial-gradient(100% 120% at 50% 0%,color-mix(in srgb,var(--gc) 25%,transparent),transparent 70%),rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px var(--line)}
.tiles-name{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.lt{width:30px;height:40px;border-radius:8px;background:rgba(255,255,255,.07);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:21px;border-bottom:3px solid var(--gc)}
.lt.on{background:var(--gc);color:#1A0E00;box-shadow:0 0 18px -2px var(--gc)}
.lt.new{animation:pop .6s cubic-bezier(.2,.8,.2,1.5) both}
.tiles-name .gap{width:12px}
.tiles-name .sym{font-family:var(--f-display);font-size:22px;font-weight:800;align-self:center}

/* Guess input */
.guessbox{position:relative}
.guessbox input{width:100%;padding:15px 16px;border-radius:16px;border:0;background:var(--glass);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font:inherit;font-size:17px;transition:box-shadow .25s}
.guessbox input::placeholder{color:var(--muted)}
.guessbox input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--gc),0 0 28px -8px var(--gc)}
.sugg{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:var(--solid);border-radius:16px;box-shadow:0 20px 40px -12px rgba(0,0,0,.8),inset 0 0 0 1px var(--line);list-style:none;margin:0;padding:6px;max-height:250px;overflow:auto;z-index:5;animation:rise .25s both}
.sugg li{padding:10px 12px;border-radius:10px;cursor:pointer}
.sugg li.on,.sugg li:hover{background:color-mix(in srgb,var(--gc) 20%,transparent)}
.row{display:flex;gap:8px}
.row .guessbox{flex:1;min-width:0}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.flash{animation:flash .6s}
@keyframes flash{30%{box-shadow:inset 0 0 0 2px var(--bad),0 0 50px -10px var(--bad)}}

/* Guess log */
.log{display:flex;flex-direction:column;gap:8px}
.gl{background:var(--glass);border-radius:16px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:8px}
.gl.new{animation:slide .5s cubic-bezier(.2,.9,.2,1.2) both}
@keyframes slide{from{transform:translateY(-14px) scale(.96);opacity:.01}}
.gl .gtop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gl .name{font-weight:600;min-width:0}
.gl.win{box-shadow:inset 0 0 0 2px var(--good),0 0 30px -10px var(--good)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--sunk);color:var(--muted);display:inline-flex;gap:4px;align-items:center}
.chip.ok{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.chip.near{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.arrow{display:inline-block;animation:needle 1.1s cubic-bezier(.2,.8,.2,1.3) both}
@keyframes needle{from{transform:rotate(calc(var(--b) + 540deg))}to{transform:rotate(var(--b))}}
.compass{display:flex;align-items:center;gap:10px}
.compass .dial{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gc) 50%,transparent);display:grid;place-items:center;font-size:20px;color:var(--gc)}
.bar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--bad),var(--warn),var(--good));border-radius:3px;transform-origin:left;animation:grow 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}}

/* Sheets */
.overlay{position:fixed;inset:0;background:rgba(5,4,10,.7);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:fade .3s both}
@keyframes fade{from{opacity:0}}
.sheet{background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--gc,var(--marigold)) 22%,transparent),transparent 60%),var(--solid);border-radius:26px;padding:24px;width:min(420px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px;
  box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -20px rgba(0,0,0,.9);animation:up .55s cubic-bezier(.2,.9,.2,1.15) both;text-align:center}
@keyframes up{from{transform:translateY(50px) scale(.92);opacity:.01}}
.sheet .big{font-size:60px;line-height:1;animation:boing .9s cubic-bezier(.2,.8,.2,1.6) .15s both}
@keyframes boing{from{transform:scale(0) rotate(-30deg)}}
.sheet h2{font-size:34px}
.sheet .ans{font-family:var(--f-display);font-size:28px;font-weight:800;color:var(--gc,var(--marigold))}
.sharebox{background:rgba(0,0,0,.3);border-radius:14px;padding:12px;white-space:pre-wrap;text-align:left;font-size:15px;user-select:all;box-shadow:inset 0 0 0 1px var(--line)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{background:var(--sunk);border-radius:14px;padding:10px 4px}
.stats b{display:block;font-family:var(--f-display);font-size:28px;line-height:1.1}
.stats span{font-size:12px;color:var(--muted)}
.perks{text-align:left;display:grid;gap:8px;margin:0;padding:0;list-style:none}
.perks li{display:flex;gap:10px;align-items:flex-start}
.perks li::before{content:"✦";color:var(--marigold)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan{border-radius:16px;padding:14px 10px;box-shadow:inset 0 0 0 1.5px var(--line);display:flex;flex-direction:column;gap:2px;align-items:center;transition:transform .2s}
.plan:hover{transform:translateY(-3px)}
.plan.best{box-shadow:inset 0 0 0 2px var(--marigold),0 0 30px -10px var(--marigold)}
.plan b{font-family:var(--f-display);font-size:28px}
.plan small{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:14px;font-weight:600;z-index:60;animation:up .3s both;max-width:calc(100% - 32px)}
canvas#fx{position:fixed;inset:0;pointer-events:none;z-index:70;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.iconbtn{padding:7px 10px}
.sec{display:flex;flex-direction:column;gap:12px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sec-head h2{font-size:28px}
.sec-head .muted{margin:2px 0 0}
.hbtn{width:36px;height:36px;flex:0 0 auto;border-radius:50%;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--f-display);font-weight:800;font-size:18px;color:var(--marigold);transition:transform .2s}
.hbtn:hover{transform:rotate(12deg) scale(1.08)}
.progress{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.progress b{color:var(--ink)}
.badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--sunk);color:var(--muted)}
.badge.new{background:color-mix(in srgb,var(--gc) 22%,transparent);color:var(--gc);animation:pulse 2.4s ease-in-out infinite}
.badge.ok{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.badge.miss{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
@keyframes pulse{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--gc) 10%,transparent)}}
.tile.mini{min-height:110px}
.tile.mini h3{font-size:20px}
.navdots{display:flex;justify-content:center;gap:6px}
.navdots i{width:8px;height:8px;border-radius:4px;background:var(--line);transition:width .3s,background .3s}
.navdots i.on{width:22px;background:var(--marigold)}
.slide{display:flex;flex-direction:column;gap:10px;align-items:center;animation:rise .4s both}
.helplist{text-align:left;margin:0;padding-left:20px;display:grid;gap:8px}
.helplist li::marker{color:var(--gc);font-weight:700}
.field{padding:14px;border-radius:14px;border:0;background:var(--sunk);color:var(--ink);font:inherit;font-size:17px;box-shadow:inset 0 0 0 1.5px var(--line)}
.field:focus{outline:none;box-shadow:inset 0 0 0 2px var(--marigold)}
.err{color:var(--bad)!important}
.linkbtn{color:var(--marigold);text-decoration:underline;font-size:14px;padding:0}
.skel{height:46px;border-radius:14px;margin-bottom:8px;background:linear-gradient(90deg,var(--sunk) 0%,rgba(255,255,255,.12) 50%,var(--sunk) 100%);background-size:200% 100%;animation:skel 1.2s linear infinite}
.skel.short{width:60%}
@keyframes skel{to{background-position:-200% 0}}
.btn:disabled,input:disabled{opacity:.55;cursor:default}
/* Phone fit */
.wrap>*{min-width:0}
#app .wrap{width:100%}
@media (max-width:420px){.ghead{gap:8px}.ghead h2{font-size:26px}.lives{gap:0}.lives i{font-size:13px}.hbtn{width:32px;height:32px;font-size:16px}.back{width:40px;height:40px}}