/* Mogged mini app. Single dark theme: red / black / white. */
:root{
  --ink:#09080A;
  --panel:#141114;
  --panel-2:#1c171a;
  --line:#2b2427;
  --bone:#F5F0F0;
  --mute:#8C8186;
  --red:#FF2A3A;
  --red-deep:#A8001A;
  --beat:1.2675s;
  --wide:"Archivo", "Arial Black", Impact, sans-serif;
  --display:"Big Shoulders Display", "Oswald", "Arial Narrow", Impact, sans-serif;
  --serif:"Instrument Serif", "Times New Roman", Georgia, serif;
  --body:"Manrope", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--ink);color:var(--bone)}
body{font-family:var(--body);font-size:14px;line-height:1.5;min-height:100vh;min-height:100dvh;overscroll-behavior:none}
body.editing{overflow:hidden}
[hidden]{display:none !important}
button{font:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.grain{
  position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sweep{0%{background-position:100% 0}55%,100%{background-position:0% 0}}
@keyframes beat{0%{transform:scale(1)}8%{transform:scale(1.045)}40%,100%{transform:scale(1)}}

/* ================= MENU ================= */
#menu,.view{
  max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:18px;min-height:100vh;min-height:100dvh;
  padding:calc(14px + env(safe-area-inset-top)) 18px calc(110px + env(safe-area-inset-bottom));
  background:radial-gradient(520px 380px at 50% 12%, rgba(255,42,58,.12), transparent 70%);
}
.me{display:flex;align-items:center;gap:10px}
.me .mini{width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.me .mini img{width:100%;height:100%;object-fit:cover;display:block}
.me .who{flex:1;min-width:0;line-height:1.2}
.me .who b{font-weight:700;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .who span{font-family:var(--mono);font-size:11px;color:var(--mute)}
.best{font-family:var(--mono);font-size:11px;color:var(--mute);text-align:right;line-height:1.25}
.best strong{display:block;font-family:var(--display);font-weight:900;font-size:22px;color:var(--bone);letter-spacing:.02em}

.hero{position:relative;display:grid;justify-items:center;padding-top:14px}
.portrait{position:relative;width:212px;height:212px;display:grid;place-items:center}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,42,58,.45);animation:beat var(--beat) cubic-bezier(.2,.8,.2,1) infinite}
.ring.r2{inset:-16px;border-color:rgba(255,42,58,.18);animation-delay:.08s}
.ring.r3{inset:-34px;border-color:rgba(255,42,58,.07);animation-delay:.16s}
.face{
  position:relative;width:188px;height:188px;border-radius:50%;overflow:hidden;isolation:isolate;
  /* iOS Safari ignores overflow+radius for animated children — clip-path/mask keep the photo round */
  clip-path:circle(50%);-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0);
  background:radial-gradient(70% 60% at 50% 38%, #ff4655 0%, #d10a24 40%, #5a0010 78%, #1a0006 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 0 70px rgba(255,42,58,.35);
}
.face .avatar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;border-radius:50%;animation:zoom 9s ease-in-out infinite alternate}
.face::before{content:"";position:absolute;inset:-20%;z-index:2;mix-blend-mode:screen;background:conic-gradient(from 0deg, transparent 0 70%, rgba(255,255,255,.28) 80%, transparent 90%);animation:spin 6s linear infinite}
.face::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.05)}}
.tag{
  position:absolute;z-index:4;bottom:-2px;left:50%;transform:translateX(-50%) rotate(-3deg);
  font-family:var(--serif);font-style:italic;font-size:21px;white-space:nowrap;color:var(--bone);
  background:var(--ink);padding:0 10px;border:1px solid var(--line);border-radius:3px;line-height:1.35;
}

.logo{
  position:relative;margin:30px 0 0;font-family:var(--wide);font-stretch:125%;font-weight:900;
  font-size:clamp(38px,12.5vw,52px);line-height:1;text-transform:uppercase;white-space:nowrap;
  animation:pulse var(--beat) cubic-bezier(.2,.8,.2,1) infinite;
}
.logo .fill{
  display:block;color:transparent;
  background:linear-gradient(100deg,#b0001b 0%,#ff2a3a 28%,#ff6b77 42%,#ffffff 50%,#ff6b77 58%,#ff2a3a 72%,#b0001b 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 3px 0 #000) drop-shadow(0 0 22px rgba(255,42,58,.5));
  animation:sweep 3.6s ease-in-out infinite;
}
@keyframes pulse{0%{transform:scale(1)}8%{transform:scale(1.04)}40%,100%{transform:scale(1)}}
.sub{margin:6px 0 0;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--mute);text-align:center}

.track{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(20,17,20,.7)}
.track .disc{width:34px;height:34px;border-radius:50%;flex:none;position:relative;border:1px solid var(--line);background:repeating-radial-gradient(circle at 50% 50%, #221c1f 0 2px, #141114 2px 4px);animation:spin 6s linear infinite}
.track .disc::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--red)}
.track .meta{flex:1;min-width:0;line-height:1.25}
.track .meta b{font-size:13px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track .meta span{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.wave{display:flex;align-items:center;gap:2px;height:26px;flex:none}
.wave i{display:block;width:2px;border-radius:1px;background:var(--red);opacity:.85;animation:wv var(--beat) ease-in-out infinite}
@keyframes wv{0%,100%{transform:scaleY(.35)}10%{transform:scaleY(1)}50%{transform:scaleY(.5)}}

.vol{display:flex;align-items:center;gap:10px;margin-top:-8px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;color:var(--mute);cursor:pointer}
.vol-k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.vol input{flex:1;min-width:0;accent-color:var(--red);cursor:pointer}
.vol b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--bone);min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.dev{display:grid;gap:10px;padding:14px;border:1px dashed #3a3135;border-radius:14px}
.dev-h{font-weight:700;display:flex;justify-content:space-between;align-items:center}
.dev-h span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--red)}
.dev-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dev label{display:grid;gap:4px;font-size:12px;color:var(--mute)}
.dev input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--bone);border-radius:10px;padding:9px 11px;font:inherit;font-size:14px}
.dev input[type=file]{padding:7px}
.notg{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:var(--mute);font-size:13px}

.modes{display:grid;gap:10px}
.solo{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px;text-align:left;
  padding:16px 18px;border:0;border-radius:16px;cursor:pointer;color:var(--ink);overflow:hidden;
  background:linear-gradient(165deg,#ffffff 0%,#f1eaea 55%,#d9cfd1 100%);
  box-shadow:0 14px 40px -12px rgba(255,42,58,.45), inset 0 1px 0 #fff;
  transition:transform .15s ease, box-shadow .2s ease;
}
.solo::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-18deg);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,70%{left:-80px}100%{left:120%}}
.solo:active{transform:scale(.98)}
.solo:disabled{opacity:.4;cursor:not-allowed}
.solo .k{grid-column:1/-1;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.solo .t{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:36px;line-height:.9;text-transform:uppercase}
.solo .d{display:block;margin-top:8px;font-family:var(--body);font-stretch:100%;font-size:12px;font-weight:600;opacity:.65;text-transform:none;line-height:1.3}
.solo .go{width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(255,42,58,.5)}
.duel{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:14px 18px;border-radius:16px;border:1px dashed #3a3135;background:transparent;color:var(--bone);text-align:left;cursor:not-allowed}
.duel .t{display:block;font-family:var(--display);font-weight:700;font-size:26px;line-height:.95;text-transform:uppercase;letter-spacing:.02em;color:#b5abaf}
.duel .d{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.soon{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid #3a3135;color:var(--mute)}

.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.sec-h h2{margin:0;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase}
.sec-h span{font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.ladder{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.ladder .step{display:grid;gap:6px}
.ladder .bar{height:6px;border-radius:2px;background:var(--panel-2)}
.ladder .step.hit .bar{background:linear-gradient(90deg,var(--red-deep),var(--red))}
.ladder .step.here .bar{background:var(--red);box-shadow:0 0 12px var(--red)}
.ladder small{font-family:var(--mono);font-size:9.5px;color:var(--mute);white-space:nowrap}
.ladder .step.here small{color:var(--bone);font-weight:600}
.ladder-note{margin:10px 0 0;font-size:12px;color:var(--mute)}

/* ================= EDIT ================= */
#edit{position:fixed;inset:0;z-index:20;background:#000;overflow:hidden}
#edit.shake{animation:shake .3s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,80%{transform:translate(1px,-1px) rotate(.15deg)}40%,60%{transform:translate(-2px,1px) rotate(-.2deg)}}
/* letterbox bars */
#edit::before,#edit::after{content:"";position:absolute;left:0;right:0;height:0;z-index:2;background:#000;transition:height .12s cubic-bezier(.1,.9,.2,1)}
#edit::before{top:0}
#edit::after{bottom:0}
#edit.bars::before,#edit.bars::after{height:17%}

/* ---- loading ---- */
.load{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;
  padding:24px 28px calc(24px + env(safe-area-inset-bottom));
  background:radial-gradient(420px 320px at 50% 36%, rgba(255,42,58,.16), transparent 70%), #000;
  transition:opacity .2s;
}
.load.out{opacity:0;pointer-events:none}
.load-av{width:116px;height:116px;border-radius:50%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.85);box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 60px rgba(255,42,58,.35);animation:beat var(--beat) cubic-bezier(.2,.8,.2,1) infinite}
.load-k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.load-title{font-family:var(--wide);font-weight:900;font-size:clamp(28px,9vw,42px);line-height:1;text-transform:uppercase;text-align:center;animation:breathe calc(var(--beat) * 2) ease-in-out infinite}
@keyframes breathe{0%,100%{font-stretch:78%;letter-spacing:.06em}50%{font-stretch:125%;letter-spacing:0}}
.load-bar{width:min(100%,320px);display:grid;gap:9px}
.bar-track{height:4px;border-radius:2px;background:#1f191c;overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--red-deep),var(--red) 70%,#ffb3ba);box-shadow:0 0 14px var(--red)}
.bar-meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.bar-meta b{color:var(--bone);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- avatar layer ---- */
.av{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.av.on{opacity:1}
.av.hide{opacity:0}
.frame{position:relative;width:min(90vw,460px);aspect-ratio:1;transition:filter .3s;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.frame.punch{animation:punch .28s cubic-bezier(.1,.9,.2,1)}
.frame.blurzoom{animation:blurzoom .32s cubic-bezier(.1,.9,.2,1)}
.frame.whip{animation:whip .3s cubic-bezier(.1,.9,.2,1)}
@keyframes whip{0%{transform:translateX(22%);filter:url(#mblur)}60%{filter:url(#mblur)}100%{transform:none;filter:none}}
@keyframes punch{0%{transform:scale(1.05)}100%{transform:none}}
@keyframes blurzoom{0%{transform:scale(1.12);filter:blur(8px)}100%{transform:none;filter:none}}
.kb{position:absolute;inset:0;overflow:hidden;background:#000;filter:contrast(1.12) saturate(1.1)}
.kb::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:multiply;background:linear-gradient(160deg,#ff3b4a,#6a0012)}
/* hard-cut crops: scale + focus point jump instantly on every hit */
.crop{position:absolute;inset:0;transform:scale(var(--s,1));transform-origin:var(--ox,50%) var(--oy,50%)}
.crop img{width:100%;height:100%;object-fit:cover;display:block;animation:kb 10s ease-in-out infinite alternate}
@keyframes kb{from{scale:1}to{scale:1.1}}
.av.mirror .crop img{transform:scaleX(-1)}
.av.bw .kb{filter:grayscale(1) contrast(1.6)}
.av.duo .kb{filter:grayscale(1) contrast(1.3) brightness(1.1)}
.av.duo .kb::after{opacity:1}
.av.inv .kb{animation:inv .16s steps(1)}
@keyframes inv{0%{filter:invert(1) contrast(1.3)}100%{filter:contrast(1.12) saturate(1.1)}}
.av.dim .frame{filter:brightness(.26) blur(4px) saturate(1.2)}
.av.tilt{animation:tilt .34s cubic-bezier(.1,.9,.2,1)}
@keyframes tilt{0%{transform:perspective(800px) rotateY(20deg) rotateZ(-4deg) scale(1.1)}100%{transform:none}}

/* blurred copy of the avatar fills the screen behind the frame */
.bgfill{position:absolute;inset:-8%;opacity:0;transition:opacity .35s}
#edit.show-bg .bgfill{opacity:1}
.bgfill img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.15);animation:bgdrift 12s ease-in-out infinite alternate;will-change:transform}
.bgfill::after{content:"";position:absolute;inset:0;background:rgba(6,4,6,.58)}
.bgfill.pulse img{animation:bgpulse .45s cubic-bezier(.1,.9,.2,1), bgdrift 12s ease-in-out infinite alternate}
@keyframes bgdrift{from{translate:-2% 0}to{translate:2% -2%}}
@keyframes bgpulse{0%{scale:1.1}100%{scale:1}}

/* speed ramp: the camera creeps in, accelerating toward the next hit, then the cut snaps it back */
.push{position:absolute;inset:0}
.push.go{animation:push var(--push,.5s) cubic-bezier(.55,0,.9,.45) forwards}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.1)}}

/* cinematic grade + vignette over the whole shot */
.grade-ov{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.6)),
    linear-gradient(180deg, rgba(20,60,85,.2), transparent 45%, rgba(255,50,40,.13));
}

/* impact ring on the key moments */
.ringfx{position:absolute;z-index:2;left:50%;top:46%;width:64vmin;height:64vmin;margin:-32vmin 0 0 -32vmin;border-radius:50%;border:2px solid rgba(255,255,255,.9);opacity:0;pointer-events:none}
.ringfx.go{animation:ringfx .7s cubic-bezier(.1,.9,.2,1)}
@keyframes ringfx{0%{transform:scale(.2);opacity:1;border-width:14px}100%{transform:scale(2.2);opacity:0;border-width:1px}}
.frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(closest-side, transparent 60%, rgba(0,0,0,.55))}

.sline{position:absolute;left:0;right:0;height:1px;top:8%;background:var(--red);box-shadow:0 0 16px var(--red);opacity:0}
.brackets{
  position:absolute;inset:-12px;pointer-events:none;opacity:0;transition:opacity .2s;
  --c:rgba(255,42,58,.9);--l:26px;--w:2px;
  background:
    linear-gradient(var(--c),var(--c)) top left/var(--l) var(--w),
    linear-gradient(var(--c),var(--c)) top left/var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) top right/var(--l) var(--w),
    linear-gradient(var(--c),var(--c)) top right/var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) var(--w),
    linear-gradient(var(--c),var(--c)) bottom left/var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) var(--w),
    linear-gradient(var(--c),var(--c)) bottom right/var(--w) var(--l);
  background-repeat:no-repeat;
}
#edit.scanning .sline{opacity:1;animation:scan 1.27s linear infinite alternate}
#edit.scanning .brackets{opacity:1}
@keyframes scan{from{top:6%}to{top:94%}}
.readout{
  position:absolute;z-index:3;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom));text-align:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#d9cfd1;opacity:0;
}
#edit.scanning .readout{opacity:1}

/* ---- kinetic type ---- */
.big{position:absolute;z-index:3;left:0;right:0;top:24%;padding:0 20px;text-align:center;opacity:0;pointer-events:none}
.big.on{opacity:1}
.big.center{top:50%;translate:0 -50%}
.big.top{top:calc(9% + env(safe-area-inset-top))}
.big .lbl{display:block;margin-bottom:12px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);animation:rise .35s cubic-bezier(.1,.9,.2,1) both}
.big .pre{display:block;margin-bottom:4px;font-family:var(--serif);font-style:italic;font-size:clamp(24px,7.5vw,36px);line-height:1.1;color:#d9cfd1;animation:rise .4s cubic-bezier(.1,.9,.2,1) both}
.big .main{
  position:relative;display:inline-block;max-width:100%;
  font-family:var(--wide);font-weight:900;font-stretch:125%;font-size:clamp(30px,10.5vw,62px);line-height:.95;
  text-transform:uppercase;overflow-wrap:anywhere;color:var(--bone);
  animation:widen .55s cubic-bezier(.1,.9,.2,1) both;
}
.big.center .main{font-size:clamp(40px,14vw,84px)}
.big.top .main{font-size:clamp(26px,9vw,52px)}
/* outline echoes above and below the word */
.big .main::before,.big .main::after{content:attr(data-text);position:absolute;left:0;right:0;color:transparent;-webkit-text-stroke:1px rgba(245,240,240,.4);pointer-events:none}
.big .main::before{top:-.95em;opacity:.6}
.big .main::after{top:.95em;opacity:.3}
.big.top .main::before,.big .pre + .main::before{display:none}
.big .main.thump{animation:thump .3s cubic-bezier(.1,.9,.2,1)}
@keyframes widen{0%{font-stretch:62%;font-weight:200;letter-spacing:.3em;opacity:0}100%{font-stretch:125%;font-weight:900;letter-spacing:0;opacity:1}}
@keyframes thump{0%{font-stretch:78%;transform:scale(1.05)}100%{font-stretch:125%;transform:none}}

/* ---- avatar score card ---- */
.card{
  position:absolute;z-index:3;left:0;right:0;bottom:0;display:grid;gap:4px;
  padding:48px 22px calc(30px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, rgba(0,0,0,.88) 38%);
  opacity:0;transform:translateY(24px);transition:opacity .2s, transform .25s cubic-bezier(.1,.9,.2,1);
}
.card.on{opacity:1;transform:none}
.card .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.card .score{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:60px;line-height:1;font-variant-numeric:tabular-nums}
.card .score small{font-size:18px;color:var(--mute);margin-left:4px}
.card .verdict{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.2;color:#eadfe0;max-width:36ch}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.card .tags:empty{display:none}
.card .tags span{font-family:var(--mono);font-size:10.5px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#d6cdcf}

.stamp{
  position:absolute;z-index:3;left:50%;top:40%;translate:-50% -50%;rotate:-8deg;pointer-events:none;white-space:nowrap;
  font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:clamp(40px,13vw,78px);line-height:1;text-transform:uppercase;
  color:transparent;background:linear-gradient(100deg,#b0001b 0%,#ff2a3a 30%,#ffffff 50%,#ff2a3a 70%,#b0001b 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 4px 0 #000) drop-shadow(0 0 28px rgba(255,42,58,.65));opacity:0;
}
.stamp.low{font-size:clamp(30px,9.5vw,60px);background-image:linear-gradient(100deg,#5d5559 0%,#b9b0b4 35%,#ffffff 50%,#b9b0b4 65%,#5d5559 100%);filter:drop-shadow(0 4px 0 #000)}
.stamp.on{opacity:1;animation:stampIn .5s cubic-bezier(.1,.9,.2,1), sweep 2.4s ease-in-out .5s infinite}
@keyframes stampIn{0%{scale:3.4;opacity:0}35%{opacity:1}100%{scale:1}}

/* ---- nick / username breakdown ---- */
.brk{
  position:absolute;z-index:3;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;display:grid;gap:12px;
  padding:0 22px calc(30px + env(safe-area-inset-bottom));opacity:0;
}
.brk.on{opacity:1}
.brk .ref{justify-self:start;font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:5px 10px;border:1px solid rgba(255,42,58,.65);border-radius:999px;color:#ffd0d4;background:rgba(0,0,0,.4);animation:rise .35s cubic-bezier(.1,.9,.2,1) both}
.caps{display:grid;gap:9px}
.cap{font-weight:700;font-size:18px;line-height:1.35;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.85);max-width:32ch}
.cap .w{display:inline-block;opacity:0;animation:pop .32s cubic-bezier(.1,.9,.2,1) forwards}
.cap .hl{background:var(--red);padding:0 .24em;border-radius:4px;text-shadow:none}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.brk-score{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);animation:rise .35s cubic-bezier(.1,.9,.2,1) both}
.brk-score .n{font-family:var(--wide);font-weight:900;font-stretch:125%;font-size:42px;line-height:1;font-variant-numeric:tabular-nums}
.brk-score small{font-family:var(--mono);color:var(--mute);font-size:13px}
.tone{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600}
.tone.mid{background:transparent;color:var(--bone);border:1px solid rgba(255,255,255,.35)}
.tone.bad{background:var(--red);color:#fff}

/* ---- transitions ---- */
.flash,.shutter,.leak{position:absolute;pointer-events:none;opacity:0;z-index:4}
.flash{inset:0;background:#fff;z-index:5}
.flash.go{animation:flash .32s ease-out}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
.shutter{inset:0;background:#000}
.shutter.go{animation:shut .11s steps(1)}
@keyframes shut{0%{opacity:1}100%{opacity:0}}
.leak{
  inset:-20%;mix-blend-mode:screen;
  background:radial-gradient(38% 50% at 30% 50%, rgba(255,120,60,.8), transparent 70%), radial-gradient(34% 44% at 70% 40%, rgba(255,42,58,.7), transparent 70%);
}
.leak.go{animation:leak .65s ease-out}
@keyframes leak{0%{opacity:0;transform:translateX(-25%)}25%{opacity:1}100%{opacity:0;transform:translateX(25%)}}

.skip{
  position:absolute;z-index:6;top:calc(12px + env(safe-area-inset-top));right:12px;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.4);color:var(--bone);cursor:pointer;font-size:14px;
}

/* ---- final ---- */
.final{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  max-width:480px;margin:0 auto;animation:rise .45s cubic-bezier(.1,.9,.2,1);
}
#edit:has(.final:not([hidden])) .av{opacity:.18;filter:blur(8px)}
.f-top{display:flex;align-items:center;gap:12px}
.f-av{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--red);box-shadow:0 0 24px rgba(255,42,58,.45)}
.f-k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.f-name{font-weight:800;font-size:17px;overflow-wrap:anywhere}
.f-total{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:96px;line-height:.9;font-variant-numeric:tabular-nums}
.f-total small{font-size:22px;color:var(--mute);margin-left:6px}
.f-rank{
  font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:34px;line-height:1;text-transform:uppercase;
  color:transparent;background:linear-gradient(100deg,#b0001b 0%,#ff2a3a 30%,#ffffff 50%,#ff2a3a 70%,#b0001b 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:sweep 2.8s ease-in-out infinite;
}
.f-rows{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.f-rows li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.f-rows .l{font-weight:700}
.f-rows .s{font-family:var(--display);font-weight:900;font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.f-rows .v{grid-column:1/-1;font-size:12.5px;color:var(--mute)}
.f-err{font-size:15px;color:#eadfe0}
.f-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.btn-main,.btn-ghost{padding:14px;border-radius:14px;font-weight:800;font-size:15px;cursor:pointer}
.btn-main{border:0;background:#fff;color:var(--ink);box-shadow:0 10px 30px -10px rgba(255,42,58,.6)}
.btn-ghost{border:1px solid var(--line);background:transparent;color:var(--bone)}

/* ---- dev lookup ---- */
.dev-look{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.dev-look button{padding:10px 14px;border-radius:10px;border:0;background:var(--red);color:#fff;font-weight:700;font-size:13px;cursor:pointer}
.dev-look button:disabled{opacity:.5;cursor:wait}
.dev-note{margin:0;font-size:12px;color:var(--mute)}

/* ---- breakdown chips ---- */
.brk .chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---- results: rows fly in on the hits of the results sound ---- */
.final{justify-content:flex-start;gap:14px;padding-top:calc(58px + env(safe-area-inset-top));overflow-y:auto;animation:none}
.f-rows li{opacity:0;transform:translateX(28px);filter:blur(6px);transition:opacity .22s, transform .4s cubic-bezier(.1,.9,.2,1), filter .3s}
.f-rows li.on{opacity:1;transform:none;filter:none}
.f-sum{display:grid;gap:7px}
.f-sum .cap{font-size:16.5px;max-width:none}
.f-total-wrap{display:grid;gap:6px;opacity:0;transform:scale(1.3);filter:blur(12px);transition:opacity .2s, transform .45s cubic-bezier(.1,.9,.2,1), filter .35s}
.f-total-wrap.on{opacity:1;transform:none;filter:none}
.f-total-wrap .f-k{margin-bottom:2px}
.f-total{font-size:84px}
.f-btns{opacity:0;pointer-events:none;transition:opacity .3s}
.f-btns.on{opacity:1;pointer-events:auto}

/* ---- share the results as a GIF ---- */
.btn-share{
  grid-column:1/-1;padding:14px;border-radius:14px;border:0;background:var(--red);color:#fff;
  font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 10px 30px -10px rgba(255,42,58,.7);
}
.btn-share:disabled{opacity:.8;cursor:default}
.f-gif{grid-column:1/-1;width:100%;border-radius:12px;border:1px solid var(--line)}

/* ---- rank picture from the chart: flashes over the avatar with its white background, then dissolves ---- */
.rankfx{
  position:absolute;z-index:3;left:50%;top:50%;width:min(90vw,460px);aspect-ratio:1;translate:-50% -50%;
  pointer-events:none;opacity:0;
}
.rankfx img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;box-shadow:0 0 60px rgba(255,255,255,.35)}
.rank-cap{
  position:absolute;left:0;right:0;bottom:-8%;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#fff;
}
/* peaks at 50% so the avatar shows through the picture, then melts away smoothly */
.rankfx.go{animation:rankfx 1.45s linear forwards}
@keyframes rankfx{
  0%{opacity:0;scale:1.15;filter:brightness(2.4) blur(8px);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  9%{opacity:.5;scale:1;filter:brightness(1.3) blur(0)}
  20%{opacity:.5;scale:1.01;filter:brightness(1) blur(0);animation-timing-function:cubic-bezier(.25,.6,.3,1)}
  100%{opacity:0;scale:1.06;filter:brightness(1) blur(10px)}
}

/* ================= WALLET & MODE CARDS ================= */
.wallet{display:flex;align-items:baseline;gap:4px;flex:none;padding:6px 11px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,42,58,.45);background:rgba(255,42,58,.08);color:var(--bone)}
.wallet-n{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:15px;line-height:1}
.wallet-k{font-family:var(--mono);font-size:10.5px;color:#ffc2c7}
.price{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;
  padding:4px 9px;border-radius:999px;background:var(--ink);color:#fff;white-space:nowrap}
.price:empty{display:none}

.check{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:8px;text-align:left;
  padding:16px 18px;border-radius:16px;cursor:pointer;color:var(--bone);overflow:hidden;
  border:1px solid rgba(255,42,58,.4);
  background:radial-gradient(120% 140% at 100% 0%, rgba(255,42,58,.22), transparent 55%), linear-gradient(165deg,#1b1518,#110e10);
  transition:transform .15s ease;
}
.check:active{transform:scale(.98)}
.check .k{grid-column:1/-1;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.check .t{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:30px;line-height:.9;text-transform:uppercase}
.check .d{display:block;margin-top:8px;font-family:var(--body);font-stretch:100%;font-size:12px;font-weight:600;color:var(--mute);text-transform:none;line-height:1.3}
.check .go{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,42,58,.6);color:var(--red);display:grid;place-items:center}
.check .price{background:rgba(255,42,58,.16);color:#ffd0d4}

/* ================= TABS & VIEWS ================= */
.tabs{
  position:fixed;z-index:15;left:50%;bottom:calc(10px + env(safe-area-inset-bottom));translate:-50% 0;
  display:flex;gap:4px;padding:5px;border-radius:20px;
  background:rgba(20,17,20,.82);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 40px -10px rgba(0,0,0,.85);
}
.tabs button{display:grid;justify-items:center;gap:3px;min-width:68px;padding:8px 10px 6px;border:0;border-radius:15px;
  background:transparent;color:var(--mute);cursor:pointer;font-size:10.5px;font-weight:700;transition:color .2s, background .2s}
.tabs button svg{width:20px;height:20px}
.tabs button.on{color:var(--bone);background:rgba(255,42,58,.14)}
.tabs button.on svg{color:var(--red)}
body.editing .tabs{display:none}

.view{animation:rise .3s cubic-bezier(.1,.9,.2,1)}
.v-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:6px}
.v-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.v-t{margin:4px 0 0;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:40px;line-height:.9;text-transform:uppercase}
.v-note{font-family:var(--mono);font-size:10.5px;color:var(--mute);text-align:right;max-width:15ch;line-height:1.35}
.v-btn{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--bone);cursor:pointer}
.empty{margin:0;padding:22px;border:1px dashed #3a3135;border-radius:14px;text-align:center;color:var(--mute)}

/* ---- top ---- */
.podium{display:grid;grid-template-columns:1fr 1.18fr 1fr;align-items:end;gap:8px}
.podium:empty{display:none}
.pod{position:relative;grid-row:1;display:grid;justify-items:center;gap:5px;min-width:0;padding:22px 8px 12px;border-radius:16px;
  border:1px solid var(--line);background:linear-gradient(180deg,#161214,#0e0c0d);color:var(--bone);cursor:pointer;text-align:center;font:inherit}
.pod.p1{grid-column:2;padding-top:26px;border-color:rgba(255,42,58,.55);
  background:radial-gradient(100% 70% at 50% 0%, rgba(255,42,58,.28), transparent 70%), linear-gradient(180deg,#1c1417,#0e0c0d);
  box-shadow:0 18px 40px -16px rgba(255,42,58,.6)}
.pod.p2{grid-column:1}
.pod.p3{grid-column:3}
.pod:active{transform:scale(.98)}
.pod img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid #3a3135;background:var(--panel)}
.pod.p1 img{width:76px;height:76px;border-color:var(--red);box-shadow:0 0 26px rgba(255,42,58,.5)}
.pod .crown{position:absolute;top:6px;left:50%;translate:-50% 0;width:22px;height:22px;color:var(--red);filter:drop-shadow(0 0 8px rgba(255,42,58,.8))}
.pod .pl{position:absolute;top:8px;left:10px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--mute)}
.pod.p1 .pl{color:var(--red)}
.pod .nm{max-width:100%;font-weight:800;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod .sc{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.pod.p1 .sc{font-size:31px}
.pod .rk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.pod.me,.trow.me{outline:1px solid var(--red);outline-offset:2px}

.toplist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.trow{display:grid;grid-template-columns:30px 40px 1fr auto;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;
  border:1px solid var(--line);background:rgba(20,17,20,.7);cursor:pointer;animation:rise .35s cubic-bezier(.1,.9,.2,1) both}
.trow:active{transform:scale(.99)}
.trow .pl{font-family:var(--mono);font-size:12px;color:var(--mute);text-align:center}
.trow img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--panel)}
.trow .who{min-width:0;line-height:1.25}
.trow .who b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .who span{display:block;font-family:var(--mono);font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .sc{text-align:right;line-height:1.1}
.trow .sc b{display:block;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:19px;font-variant-numeric:tabular-nums}
.trow .sc small{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.t-load{padding:18px;text-align:center;color:var(--mute);font-family:var(--mono);font-size:12px}

.mybar{position:sticky;bottom:calc(84px + env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:16px;border:1px solid rgba(255,42,58,.5);
  background:linear-gradient(100deg,rgba(60,8,16,.95),rgba(20,17,20,.95));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.9)}
.mybar img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.mybar .mb-t{flex:1;min-width:0;line-height:1.25}
.mybar .mb-t b{display:block;font-size:13.5px}
.mybar .mb-t span{font-family:var(--mono);font-size:11px;color:#ffc2c7}
.mybar .mb-sc{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:22px}
.mybar button{flex:none;padding:9px 13px;border-radius:12px;border:0;background:#fff;color:var(--ink);font-weight:800;font-size:13px;cursor:pointer}

/* ---- bonuses ---- */
.balance{position:relative;overflow:hidden;display:grid;justify-items:center;padding:24px 18px 20px;border-radius:20px;text-align:center;
  border:1px solid rgba(255,42,58,.4);
  background:radial-gradient(80% 90% at 50% 0%, rgba(255,42,58,.3), transparent 70%), linear-gradient(180deg,#1a1316,#0d0b0c)}
.bal-n{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:76px;line-height:.9;font-variant-numeric:tabular-nums;
  color:transparent;background:linear-gradient(180deg,#fff 30%,#ff9aa3);-webkit-background-clip:text;background-clip:text}
.bal-k{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#ffc2c7}
.bal-note{margin:10px 0 0;font-size:12.5px;color:var(--mute)}
/* minmax(0,1fr): a long ref link must shrink inside the card instead of pushing it past the screen */
.bcard{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(20,17,20,.75)}
.bcard.done{border-color:rgba(255,255,255,.12);opacity:.75}
.bc-top{display:flex;align-items:center;gap:12px}
.bc-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;background:rgba(255,42,58,.14);color:var(--red)}
.bc-txt{flex:1;min-width:0;line-height:1.3}
.bc-txt b{display:block;font-size:15px}
.bc-txt span{display:block;font-size:12.5px;color:var(--mute)}
.bc-plus{flex:none;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:22px;color:var(--red)}
.bc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bc-btns.one{grid-template-columns:1fr}
.bc-btns button{padding:12px;font-size:14px}
.bc-btns button:disabled{opacity:.6;cursor:default}
.bc-msg{margin:0;font-size:12.5px;color:#ffc2c7;min-height:0}
.bc-msg:empty{display:none}
.ref-link{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:12px;border:1px dashed #3a3135;
  background:var(--ink);color:var(--bone);cursor:pointer;text-align:left}
.ref-link code{flex:1;min-width:0;font-family:var(--mono);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref-link span{flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.promo{display:flex;gap:8px}
.promo input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--ink);color:var(--bone);
  font-family:var(--mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase}
.promo input:focus{outline:none;border-color:rgba(255,42,58,.6)}
.promo button{padding:12px 16px;font-size:14px}

/* ---- admin ---- */
.acard{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(20,17,20,.75)}
.acard h3{margin:0;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.04em;text-transform:uppercase}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.st{display:grid;gap:2px;padding:10px;border-radius:12px;background:var(--ink);border:1px solid var(--line)}
.st b{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:20px;line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.st span{font-size:10.5px;color:var(--mute);line-height:1.2}
.st.hot{border-color:rgba(255,42,58,.45);background:rgba(255,42,58,.08)}
.aform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}
.aform .wide{grid-column:1/-1}
.aform label{display:grid;gap:5px;font-size:12px;color:var(--mute)}
.aform input:not([type=checkbox]),.aform textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--ink);color:var(--bone);font:inherit;font-size:16px}
.aform textarea{resize:vertical;min-height:96px;line-height:1.4}
.aform input:focus,.aform textarea:focus{outline:none;border-color:rgba(255,42,58,.6)}
.aform button{padding:12px;font-size:14px}
.aform .sw{display:flex;align-items:center;gap:10px;color:var(--bone);font-size:14px;cursor:pointer}
.aform .sw input{appearance:none;-webkit-appearance:none;width:40px;height:24px;flex:none;border-radius:999px;background:#2b2427;position:relative;cursor:pointer;transition:background .2s}
.aform .sw input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.aform .sw input:checked{background:var(--red)}
.aform .sw input:checked::after{transform:translateX(16px)}
.hint{margin:0;font-size:11.5px;color:var(--mute)}
.amsg{font-size:13px;color:var(--bone);white-space:pre-line;line-height:1.45}
.amsg:empty{display:none}
.amsg.err{color:#ffb3ba}
.promos{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.promos li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--ink);border:1px solid var(--line)}
.promos li.off{opacity:.5}
.promos .pc{border:0;background:transparent;color:var(--bone);font-family:var(--mono);font-size:13px;font-weight:600;cursor:pointer;padding:0}
.promos .pi{flex:1;font-size:12px;color:var(--mute)}
.promos .pt{padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--bone);font-size:11px;cursor:pointer}

/* ---- bottom sheet ---- */
.sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .2s}
.sheet-card{position:relative;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 20px calc(24px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;
  border:1px solid var(--line);border-bottom:0;background:linear-gradient(180deg,#171315,#0d0b0c);
  animation:sheetUp .38s cubic-bezier(.1,.9,.2,1)}
.sheet-card::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#3a3135;margin:0 auto 16px}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes fadeIn{from{opacity:0}}
.sh-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.sh-t{margin:6px 0 14px;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:25px;line-height:1;text-transform:uppercase}
.sh-p{margin:0 0 16px;font-size:14.5px;color:#d9cfd1;line-height:1.45}
.sh-note{margin:14px 0 0;font-size:12px;color:var(--mute)}
.sh-msg{margin:10px 0 0;font-size:13px;color:#ffc2c7}
.sh-msg:empty{display:none}
.sh-err{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,42,58,.1);border:1px solid rgba(255,42,58,.35);color:#ffc2c7;font-size:13.5px}
.sh-btns{display:grid;gap:8px}
.sh-load{display:flex;align-items:center;gap:10px;padding:16px 4px;font-family:var(--mono);font-size:12px;color:var(--mute)}
.sh-load i{width:14px;height:14px;border-radius:50%;border:2px solid #3a3135;border-top-color:var(--red);animation:spin .7s linear infinite}
.sh-find{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}
.sh-find:focus-within{border-color:rgba(255,42,58,.6)}
.sh-find .at{font-family:var(--mono);font-size:16px;color:var(--red);font-weight:600}
.sh-find input{flex:1;min-width:0;border:0;background:transparent;color:var(--bone);font:inherit;font-size:16px;outline:none;padding:9px 0}
.sh-find .btn-main{padding:10px 16px;font-size:14px}
.sh-found:empty{display:none}
.sh-found{margin-top:12px;display:grid;gap:10px;animation:rise .3s cubic-bezier(.1,.9,.2,1)}
.fcard{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--ink)}
.fcard img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--red)}
.fc-who{min-width:0;line-height:1.3}
.fc-who b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-who span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.btn-go{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:15px 18px;border:0;border-radius:14px;
  background:var(--red);color:#fff;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 10px 30px -10px rgba(255,42,58,.8)}
.btn-go span{font-family:var(--mono);font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.25)}

/* top entry: short breakdown */
.en-top{display:flex;align-items:center;gap:12px}
.en-top img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--red);box-shadow:0 0 22px rgba(255,42,58,.45)}
.en-who{flex:1;min-width:0;line-height:1.3}
.en-who b{display:block;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en-who span{font-family:var(--mono);font-size:11.5px;color:var(--mute)}
.en-total{text-align:right;line-height:1}
.en-total b{display:block;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:38px}
.en-total small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.en-place{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.en-rows{list-style:none;margin:14px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.en-rows li{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.en-rows .l{font-weight:700}
.en-rows .s{font-family:var(--display);font-weight:900;font-size:21px;line-height:1;font-variant-numeric:tabular-nums}
.en-rows .bar{grid-column:1/-1;height:3px;border-radius:2px;background:#1f191c;overflow:hidden}
.en-rows .bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--red-deep),var(--red));animation:grow .7s cubic-bezier(.1,.9,.2,1) both}
@keyframes grow{from{width:0}}
.en-rows .v{grid-column:1/-1;font-size:12.5px;color:var(--mute)}
.en-sum{display:grid;gap:7px;margin-top:14px}
.en-sum .cap{font-size:15.5px;max-width:none}

/* toast */
.toast{position:fixed;z-index:60;left:50%;top:calc(14px + env(safe-area-inset-top));translate:-50% -20px;opacity:0;pointer-events:none;
  max-width:calc(100% - 32px);padding:10px 16px;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:13.5px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6);transition:opacity .2s, translate .3s cubic-bezier(.1,.9,.2,1)}
.toast.on{opacity:1;translate:-50% 0}

/* ---- daily game ---- */
.streak{display:flex;gap:6px}
.dot{flex:1 1 0;min-width:0;display:grid;place-items:center;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--ink);
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--mute)}
.dot.on{border-color:transparent;background:linear-gradient(160deg,var(--red),var(--red-deep));color:#fff}
/* not ".big": that class is the edit's big word overlay (absolute, invisible) */
.dot.bonus{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:13px;color:#ffc2c7;border-color:rgba(255,42,58,.5)}
.dot.bonus.on{color:#fff}
.dot.next{border-color:var(--red);color:var(--bone);box-shadow:0 0 0 3px rgba(255,42,58,.18);animation:beat var(--beat) cubic-bezier(.2,.8,.2,1) infinite}
.daily.ready{border-color:rgba(255,42,58,.5);box-shadow:0 14px 34px -16px rgba(255,42,58,.6)}
.daily .btn-share:disabled{background:var(--panel-2);color:var(--mute);box-shadow:none}
.bal-n.bump{animation:bump .5s cubic-bezier(.1,.9,.2,1)}
@keyframes bump{0%{transform:scale(1.35)}100%{transform:none}}

/* ---- story card, notifications ---- */
.steps{margin:0;padding:0 0 0 20px;display:grid;gap:6px;font-size:13px;color:#d9cfd1;line-height:1.4}
.steps li::marker{color:var(--red);font-family:var(--mono);font-weight:600}
.bcard.slim{padding:12px 16px}
.toggle{display:flex;align-items:center;gap:12px;cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle i{position:relative;width:44px;height:26px;flex:none;border-radius:999px;background:#2b2427;transition:background .2s}
.toggle i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle input:checked + i{background:var(--red)}
.toggle input:checked + i::after{transform:translateX(18px)}
.toggle input:focus-visible + i{outline:2px solid var(--red);outline-offset:3px}

/* ---- story button on the results ---- */
.btn-story{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(255,42,58,.6);color:#fff;font-weight:800;font-size:15px;
  background:linear-gradient(100deg,rgba(255,42,58,.28),rgba(255,42,58,.08))}
.btn-story span{font-family:var(--mono);font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--red)}
.btn-story:disabled{opacity:.7}

/* ---- seasons ---- */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;border:1px solid var(--line);background:rgba(20,17,20,.7)}
.seg button{padding:9px;border:0;border-radius:10px;background:transparent;color:var(--mute);font-weight:700;font-size:13px;cursor:pointer}
.seg button.on{background:#fff;color:var(--ink)}
.season-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px dashed #3a3135;background:rgba(20,17,20,.6)}
.season-card .sc-ic{font-size:22px;flex:none}
.season-card .sc-t{flex:1;min-width:0;line-height:1.3}
.season-card .sc-t b{display:block;font-size:14px}
.season-card .sc-t span{font-size:12px;color:var(--mute)}
.season-card .sc-soon{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid #3a3135;color:var(--mute)}
.season-card.live{display:grid;gap:2px;border-style:solid;border-color:rgba(255,42,58,.45);
  background:radial-gradient(100% 120% at 100% 0%, rgba(255,42,58,.2), transparent 60%), rgba(20,17,20,.8)}
.season-card.live b{font-size:15px}
.season-card.live span{font-size:12px;color:#ffc2c7}

/* ---- admin: messages editor ---- */
.aform select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--ink);color:var(--bone);font:inherit;font-size:15px}
.msg-photo{display:flex;align-items:center;gap:8px}
.msg-photo span{flex:1;min-width:0;font-size:13px;color:var(--mute)}
.msg-photo .btn-ghost{padding:9px 12px;font-size:13px}
.btn-ghost.file{display:inline-block;cursor:pointer}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}