:root{
  color-scheme: dark;
  --night:#0A1411;--pitch:#10211A;--pitch-2:#163027;--edge:#24443A;
  --chalk:#EEF2EA;--chalk-dim:#A3B5AB;--chalk-faint:#6F8579;
  --gold:#E6B84E;--silver:#C9D2D6;--win:#46B277;--miss:#D9543A;
  --paper:#F6F3EA;--ink:#10211A;
  --display:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Barlow Semi Condensed","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--chalk);font-family:var(--body);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(120% 60% at 50% -10%,rgba(230,240,220,.10),transparent 60%),repeating-linear-gradient(180deg,rgba(255,255,255,.018) 0 64px,transparent 64px 128px)}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{position:relative;z-index:1;max-width:480px;margin:0 auto;padding-inline:16px;padding-block:0 112px}
h1,h2,h3{margin:0;font-family:var(--display);text-transform:uppercase;text-wrap:balance}
.eyebrow{font:700 12px/1.2 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-dim)}
.title{font-size:38px;font-weight:900;line-height:.92;margin-top:6px}
.hint{font-size:14px;color:var(--chalk-faint);margin:10px 0 0}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:16px 14px}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand svg{width:32px;height:32px;flex-shrink:0;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.brand-name{font:900 20px/.88 var(--display);text-transform:uppercase;letter-spacing:.01em}
.brand-name small{display:block;font:700 11px/1 var(--display);letter-spacing:.3em;color:var(--gold);margin-bottom:3px}
.chips{display:flex;gap:4px;flex-shrink:0}
.chip{display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;background:var(--pitch);border:1px solid var(--edge);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip svg{width:15px;height:15px;flex-shrink:0}
.btn{height:52px;padding:0 18px;border-radius:10px;border:0;font:800 18px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn svg{width:18px;height:18px}
.btn-gold{background:var(--gold);color:#1B1405}
.btn-gold:hover:not(:disabled){background:#F0C660}
.btn-ghost{background:transparent;border:1px solid var(--edge);color:var(--chalk)}
.btn-ghost:hover:not(:disabled){border-color:var(--chalk-dim)}
.btn-block{width:100%}
.stack{display:grid;gap:8px}
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 0;margin-bottom:8px;font:800 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-dim)}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--chalk-faint);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--chalk-dim)}
.hero{position:relative;overflow:hidden;border-radius:18px;padding:20px 18px 18px;background:linear-gradient(160deg,#1C3A2F,#10211A 70%);border:1px solid var(--edge)}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 40px,transparent 40px 80px)}
.hero::after{content:"";position:absolute;right:-50px;bottom:-80px;width:220px;height:220px;border:2px solid rgba(238,242,234,.08);border-radius:50%}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:44px;font-weight:900;line-height:.9;margin:8px 0 10px}
.hero h1 span{color:var(--gold)}
.hero p{margin:0 0 16px;color:var(--chalk-dim);max-width:32ch}
.hero-done{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hero-done .tilt{width:78px;flex-shrink:0}
.hero-done b{display:block;font:900 24px/1 var(--display);text-transform:uppercase}
.hero-done span{color:var(--chalk-dim);font-size:15px}
.section-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:24px 0 10px}
.section-title h2{font-size:24px;font-weight:900}
.section-title span{font-size:14px;color:var(--chalk-dim);font-variant-numeric:tabular-nums;text-align:right}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode{position:relative;text-align:left;padding:14px 14px 12px;border-radius:var(--r);background:var(--pitch);border:1px solid var(--edge);display:flex;flex-direction:column;gap:6px;min-height:138px}
.mode:hover{border-color:var(--chalk-dim)}
.mode svg.ic{width:30px;height:30px;color:var(--gold)}
.mode h3{font-size:22px;font-weight:900;line-height:.95}
.mode p{margin:0;font-size:14px;color:var(--chalk-dim);line-height:1.3}
.mode .cost{margin-top:auto;display:flex;align-items:center;gap:5px;font:800 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.mode .cost svg{width:14px;height:14px;color:var(--gold)}
.passbar{display:block;width:100%;margin-top:10px;text-align:left;padding:14px;border-radius:var(--r);background:linear-gradient(120deg,#2A2208,#12190F);border:1px solid rgba(230,184,78,.45)}
.passbar .pb-claim{display:block;margin-top:10px;padding:10px;border-radius:10px;background:var(--gold);color:var(--night);text-align:center;font:800 17px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.passbar .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.passbar b{font:900 20px/1 var(--display);text-transform:uppercase}
.passbar span{font-size:14px;color:var(--chalk-dim)}
.meter{height:6px;border-radius:3px;background:rgba(238,242,234,.12);margin-top:10px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--gold);border-radius:3px}
.strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.tile{padding:14px;border-radius:var(--r);background:var(--pitch);border:1px solid var(--edge);text-align:left}
.tile b{display:block;font:900 28px/1 var(--display);font-variant-numeric:tabular-nums}
.tile span{font-size:13px;color:var(--chalk-dim)}
.match{background:linear-gradient(180deg,var(--pitch-2),var(--pitch));border:1px solid var(--edge);border-radius:var(--r);padding:18px 18px 16px}
.match-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.match h1{font-size:38px;font-weight:900;line-height:.92;margin-top:8px}
.match h1 span{color:var(--gold)}
.board{font:800 15px/1 var(--display);letter-spacing:.06em;color:var(--chalk-dim);text-align:right;text-transform:uppercase;flex-shrink:0}
.board b{display:block;font-size:32px;color:var(--chalk);font-variant-numeric:tabular-nums;letter-spacing:0}
.pips{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:16px 0 4px}
.pip{height:8px;border-radius:2px;background:rgba(238,242,234,.12)}
.pip.used{background:var(--miss)}.pip.now{background:var(--chalk)}.pip.won{background:var(--win)}
.pip-legend{display:flex;justify-content:space-between;font-size:13px;color:var(--chalk-faint);font-variant-numeric:tabular-nums}
.clues{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.clue{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:11px 12px;border-radius:10px;background:rgba(10,20,17,.55);border:1px solid var(--edge);animation:clueIn .45s cubic-bezier(.2,.8,.2,1) both}
.clue-n{font:800 20px/1 var(--display);color:var(--gold);padding-top:1px}
.clue.locked{background:transparent;border-style:dashed;color:var(--chalk-faint);animation:none}
.clue.locked .clue-n{color:var(--chalk-faint)}
@keyframes clueIn{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.guess{margin-top:16px;position:relative}
.guess label{display:block;margin-bottom:8px}
.guess-row{display:flex;gap:8px}
.guess input{flex:1;min-width:0;height:52px;border-radius:10px;border:1px solid var(--edge);background:var(--night);color:var(--chalk);padding:0 14px;font:600 18px var(--body)}
.guess input::placeholder{color:var(--chalk-faint);font-weight:500}
.sugg{list-style:none;margin:6px 0 0;padding:6px;position:absolute;left:0;right:0;z-index:20;background:#0E1C16;border:1px solid var(--edge);border-radius:10px;max-height:240px;overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.sugg li{padding:11px 12px;border-radius:7px;font-weight:600;cursor:pointer}
.sugg li[aria-selected="true"],.sugg li:hover{background:var(--pitch-2)}
.misses{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.miss{font-size:14px;font-weight:600;padding:4px 9px;border-radius:6px;background:rgba(217,84,58,.14);color:#F2A08E;text-decoration:line-through}
.err{font-size:14px;color:#F2A08E;min-height:20px;margin-top:6px}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.result{text-align:center;padding-top:6px;scroll-margin-top:96px}
.result h2{font-size:34px;font-weight:900;line-height:.95;margin-top:6px}
.result .sub{color:var(--chalk-dim);margin:8px 0 14px}
.reveal{display:flex;justify-content:center;margin:18px 0 14px;perspective:900px}
.reveal .tilt{width:190px;animation:flipIn .9s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes flipIn{0%{transform:rotateY(180deg) scale(.7);opacity:0}60%{opacity:1}100%{transform:none}}
.grid-share{font-size:24px;letter-spacing:4px;margin:0 0 12px}
.tickbar{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 12px 10px 14px;border-radius:14px;border:1px solid var(--edge);background:rgba(255,255,255,.03)}
.tickbar.out{border-color:rgba(230,184,78,.7);background:rgba(230,184,78,.10)}
.tickbar .tb-ico{color:var(--gold);display:flex;flex:0 0 auto}
.tickbar .tb-ico svg{width:24px;height:24px}
.tickbar .tb-txt{flex:1;min-width:0;line-height:1.2}
.tickbar .tb-txt b{display:block;font-family:var(--display);text-transform:uppercase;font-size:19px;letter-spacing:.02em}
.tickbar .tb-txt span{display:block;color:var(--chalk-dim);font-size:14px}
.tickbar.out .tb-txt span{color:var(--chalk)}
.tickbar .tb-btn{flex:0 0 auto;width:auto;padding:10px 14px;min-height:0;font-size:15px;white-space:nowrap}
.tickbar .tb-note{flex:0 0 auto;color:var(--chalk-faint);font-size:13px;text-align:right;max-width:96px}
.mode .cost.out{color:var(--gold);font-weight:700}
.freetag{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 7px;border-radius:4px;background:var(--win);color:var(--night);font:800 12px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase}
.lastgo{margin:14px 0 4px;padding:16px;border-radius:14px;border:1px solid rgba(230,184,78,.55);background:rgba(230,184,78,.08);text-align:center}
.lastgo h3{font-family:var(--display);text-transform:uppercase;font-size:24px;letter-spacing:.02em;margin:0 0 4px}
.lastgo p{color:var(--chalk-dim);margin:0 0 12px}
.reveal.missed .c3{filter:grayscale(1) brightness(.8);opacity:.9}
.saver{margin:4px 0 14px;padding:14px;border-radius:12px;border:1px solid rgba(230,184,78,.45);background:rgba(230,184,78,.07);text-align:left}
.saver h3{font-size:20px;color:var(--gold)}
.saver p{margin:4px 0 10px;color:var(--chalk-dim);font-size:15px}
.saver .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.saver .btn{height:46px;font-size:16px}
.copied{font-size:14px;color:var(--win);min-height:20px}
.copybox{width:100%;background:var(--night);color:var(--chalk);border:1px solid var(--edge);border-radius:8px;padding:10px;font:500 15px var(--body)}
.report-row{display:flex;justify-content:center;margin-top:10px}
.play-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:14px}
.play-head h1{font-size:34px;font-weight:900;line-height:.92}
.progress{display:flex;gap:5px;margin-bottom:14px}
.progress i{flex:1;height:6px;border-radius:3px;background:rgba(238,242,234,.12)}
.progress i.ok{background:var(--win)}.progress i.no{background:var(--miss)}.progress i.cur{background:var(--chalk)}
.card{background:var(--pitch);border:1px solid var(--edge);border-radius:var(--r);padding:16px}
.q{font:800 22px/1.1 var(--display);text-transform:uppercase;margin:0 0 12px}
.path{list-style:none;padding:0;margin:0}
.path li{position:relative;padding:8px 0 8px 30px;font-weight:600;font-size:17px;border-left:2px solid var(--edge);margin-left:8px}
.path li::before{content:"";position:absolute;left:-7px;top:13px;width:12px;height:12px;border-radius:50%;background:var(--night);border:2px solid var(--gold)}
.path li:last-child{border-left-color:transparent}
.path .loan,.hint .loan{font-weight:500;font-size:.8em;color:var(--chalk-dim);letter-spacing:.02em}
.sheet-list{display:grid;gap:10px}
.line{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pl{padding:7px 10px;border-radius:8px;background:rgba(10,20,17,.6);border:1px solid var(--edge);font-weight:600;font-size:15px;white-space:nowrap}
.pl.blank{border:2px dashed var(--gold);color:var(--gold);min-width:90px;text-align:center;font-weight:800}
.pl.filled{border-color:var(--win);background:rgba(70,178,119,.15)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.opt{min-height:56px;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:var(--night);font-weight:700;font-size:16px;line-height:1.2;text-align:center}
.opt:hover:not(:disabled){border-color:var(--chalk-dim)}
.opt.right{background:rgba(70,178,119,.2);border-color:var(--win);opacity:1}
.opt.wrong{background:rgba(217,84,58,.18);border-color:var(--miss);opacity:1}
.opt.gone{visibility:hidden}
.tools{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.tool{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--edge);background:none;font-weight:700;font-size:14px}
.tool svg{width:14px;height:14px}
.feedback{margin-top:12px;min-height:24px;font-weight:700}
.feedback.ok{color:var(--win)}.feedback.no{color:#F2A08E}
.hol{display:grid;gap:10px}
.hol-card{padding:16px;border-radius:var(--r);background:var(--pitch);border:1px solid var(--edge);text-align:center}
.hol-card .nm{font:900 28px/1 var(--display);text-transform:uppercase}
.hol-card .gl{font:900 54px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;margin-top:6px}
.hol-card .gl small{display:block;font:600 13px var(--body);color:var(--chalk-dim);letter-spacing:.1em;text-transform:uppercase}
.hol-vs{text-align:center;font:900 16px/1 var(--display);letter-spacing:.2em;color:var(--chalk-faint)}
.hol-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.timer{height:8px;border-radius:4px;background:rgba(238,242,234,.12);overflow:hidden;margin-bottom:14px}
.timer i{display:block;height:100%;background:var(--gold);transition:width 1s linear}
.end{text-align:center;padding:18px 16px}
.end h2{font-size:40px;font-weight:900;line-height:.95;margin:6px 0}
.end p{color:var(--chalk-dim);margin:0 0 16px}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.stat{background:var(--night);border:1px solid var(--edge);border-radius:10px;padding:10px 6px;text-align:center}
.stat b{display:block;font:800 26px/1 var(--display);font-variant-numeric:tabular-nums}
.stat span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim)}

/* Card */
.tilt{perspective:800px;width:100%;max-width:100%;touch-action:pan-y}
.c3{--rx:0deg;--ry:0deg;--gx:50%;--gy:30%;position:relative;aspect-ratio:5/7;width:100%;max-width:100%;border-radius:10px;padding:5%;container-type:inline-size;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease;box-shadow:0 10px 24px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.25) inset}
.tilt.active .c3{transition:none}
.c3-in{position:relative;height:100%;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;background:var(--field);color:var(--chalk)}
.c3-pitch{position:absolute;inset:0;width:100%;height:100%}
.c3-pitch .ln{fill:none;stroke:var(--lines);stroke-width:.8}
.c3-num{position:absolute;right:-4%;top:14%;font:900 78cqw/.8 var(--display);color:transparent;-webkit-text-stroke:1.2px var(--numline);letter-spacing:-.04em;pointer-events:none}
.c3-top{position:relative;display:flex;justify-content:space-between;align-items:center;padding:7% 7% 0;font:700 clamp(7px,5.6cqw,12px)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.c3-top span:first-child{white-space:nowrap}
@container (max-width:150px){.c3-tier{display:none}}
.flag{display:block;flex-shrink:0;width:14cqw;height:9.5cqw;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.c3-mid{position:relative;flex:1}
.c3-plate{position:relative;padding:0 7% 8%}
.c3-last{font:900 clamp(11px,16.5cqw,40px)/.9 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--name);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c3-first{font:700 clamp(8px,7.2cqw,15px)/1 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--meta);margin-bottom:3%}
.c3-rule{height:1px;background:var(--lines);margin:5% 0 4%}
.c3-meta{display:flex;justify-content:space-between;gap:6px;font:700 clamp(7px,5.6cqw,12px)/1.1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--meta)}
.c3-tier{font:900 clamp(7px,5.6cqw,12px)/1 var(--display);letter-spacing:.14em;padding:2.5% 4%;border-radius:3px;background:var(--tierbg);color:var(--tierfg);text-transform:uppercase}
.c3-glare{position:absolute;inset:0;border-radius:10px;pointer-events:none;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.35),transparent 45%);mix-blend-mode:overlay;opacity:0;transition:opacity .3s}
.tilt.active .c3-glare{opacity:1}
.c3-holo{position:absolute;inset:0;pointer-events:none}
.c3.standard{background:#E4DECD;box-shadow:0 3px 8px rgba(0,0,0,.35);--field:#F3EEE0;--lines:rgba(16,33,26,.13);--numline:rgba(16,33,26,.09);--meta:#5E6B63;--name:#10211A;--tierbg:#10211A;--tierfg:#F3EEE0}
.c3.standard .c3-pitch ellipse,.c3.standard .c3-glare{display:none}
.c3.silver{background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),linear-gradient(135deg,#F2F5F6,#A6B1B8 40%,#EEF2F4 58%,#8C98A0);--field:#18252E;--lines:rgba(210,222,230,.22);--numline:rgba(210,222,230,.14);--meta:#B4C3CC;--name:#EEF3F6;--tierbg:#C9D2D6;--tierfg:#18252E}
.c3.silver .c3-holo{background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);background-size:250% 100%;animation:sheen 4.5s ease-in-out infinite}
.c3.gold{background:linear-gradient(135deg,#FBEBB5,#C9962F 38%,#FFF1C4 52%,#A87520 78%,#E9C467);--field:#17130A;--lines:rgba(230,184,78,.35);--numline:rgba(230,184,78,.22);--meta:#D9BE7E;--name:#F3D27C;--tierbg:#E6B84E;--tierfg:#1B1405}
.c3.gold .c3-holo{mix-blend-mode:color-dodge;opacity:.55;background:linear-gradient(115deg,transparent 15%,rgba(255,215,90,.5) 32%,rgba(120,220,255,.35) 48%,rgba(255,130,210,.35) 64%,transparent 82%);background-size:300% 100%;animation:sheen 3.4s linear infinite}
.c3.elite{background:linear-gradient(135deg,#0B3A2D,#46D6A8 24%,#08271F 44%,#8BE9FF 64%,#0B3A2D 84%,#46D6A8);background-size:220% 220%;animation:frame 7s linear infinite;--field:#05201A;--lines:rgba(110,235,200,.35);--numline:rgba(110,235,200,.2);--meta:#86D9BF;--name:#C9FBEA;--tierbg:#46D6A8;--tierfg:#03140F}
.c3.elite .c3-holo{mix-blend-mode:color-dodge;opacity:.55;background:linear-gradient(115deg,transparent 15%,rgba(70,214,168,.5) 32%,rgba(139,233,255,.45) 48%,rgba(190,140,255,.35) 64%,transparent 82%);background-size:300% 100%;animation:sheen 3s linear infinite}
.c3.elite .c3-pitch ellipse{filter:hue-rotate(110deg)}
.c3.legend{background:linear-gradient(135deg,#0B0904,#E6B84E 22%,#0B0904 40%,#F8DE8E 62%,#0B0904 80%,#E6B84E);background-size:220% 220%;animation:frame 6s linear infinite;--field:#050505;--lines:rgba(230,184,78,.45);--numline:rgba(230,184,78,.3);--meta:#CDB77E;--name:#F6D98A;--tierbg:#050505;--tierfg:#F6D98A}
.c3.legend .c3-tier{box-shadow:0 0 0 1px #E6B84E}
.c3.legend .c3-holo{mix-blend-mode:color-dodge;opacity:.7;background:linear-gradient(115deg,transparent 8%,rgba(255,70,120,.45) 22%,rgba(255,215,90,.55) 36%,rgba(80,220,255,.5) 52%,rgba(170,110,255,.45) 68%,transparent 88%);background-size:300% 100%;animation:sheen 2.6s linear infinite}
@keyframes sheen{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes frame{0%{background-position:0 0}100%{background-position:220% 220%}}
.lv{display:flex;gap:3px;justify-content:center;margin-top:6px}
.lv i{width:14px;height:4px;border-radius:2px;background:#CFC8B5}
.lv i.on{background:var(--ink)}
.dark .lv i{background:var(--edge)}.dark .lv i.on{background:var(--gold)}

.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.count{font:800 30px/1 var(--display);font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0}
.count small{display:block;font:600 12px var(--body);letter-spacing:.14em;color:var(--chalk-dim);text-transform:uppercase}
.legend-key{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.key{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:4px 9px 4px 5px;border-radius:999px;background:var(--pitch);border:1px solid var(--edge)}
.key i{width:13px;height:18px;border-radius:3px;display:block}
.tabs{display:flex;gap:6px;margin:14px 0 12px;overflow-x:auto;padding-bottom:2px}
.tab{flex-shrink:0;padding:8px 13px;border-radius:999px;border:1px solid var(--edge);background:transparent;font-weight:700;font-size:15px;color:var(--chalk-dim)}
.tab[aria-selected="true"]{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.page{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:16px 14px 18px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.page-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:14px}
.page-title h2{font-size:22px;font-weight:900;line-height:1}
.page-title span{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums;flex-shrink:0}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.slot{aspect-ratio:5/7;border-radius:9px;border:2px dashed #BDB6A2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8A8370}
.slot b{font:900 26px/1 var(--display);font-variant-numeric:tabular-nums}
.slot span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.slot-wrap{min-width:0}
.slot-btn{all:unset;display:block;cursor:pointer;width:100%}
.slot-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:9px}
.slot-name{font-size:12px;font-weight:700;text-align:center;margin-top:4px;text-transform:uppercase;letter-spacing:.04em}
.locked-list{display:grid;gap:8px;margin-top:16px}
.locked-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px;border-radius:12px;border:1px solid var(--edge);background:var(--pitch);text-align:left;width:100%}
.locked-item h3{font-size:20px;line-height:1}
.locked-item p{margin:3px 0 0;font-size:14px;color:var(--chalk-dim)}
.lock{flex-shrink:0;font:800 13px/1 var(--display);letter-spacing:.08em;padding:7px 10px;border-radius:6px;background:rgba(230,184,78,.14);color:var(--gold);text-transform:uppercase}
.table-wrap{overflow-x:auto;margin-top:12px;border:1px solid var(--edge);border-radius:var(--r);background:var(--pitch)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim);text-align:left;padding:12px 12px 8px}
th.num,td.num{text-align:right}
td{padding:12px;border-top:1px solid var(--edge);font-weight:600}
td.pos{font:800 20px/1 var(--display);width:44px;color:var(--chalk-dim)}
tr.me td{background:rgba(230,184,78,.09)}
tr.me td.pos{color:var(--gold)}
tr.gap td{padding:4px 12px;color:var(--chalk-faint);text-align:center}
.form{display:flex;gap:3px}
.form i{width:9px;height:9px;border-radius:2px;background:var(--win)}
.form i.l{background:var(--miss)}
.tabnote{margin:0;font-size:15px;color:var(--chalk-dim)}
.callout{margin-top:12px;padding:14px;border-radius:12px;background:rgba(230,184,78,.07);border:1px solid rgba(230,184,78,.35);font-size:15px}
.callout b{color:var(--gold)}
.plus{border-radius:18px;padding:20px 18px;background:linear-gradient(150deg,#2A2208,#15110A 60%);border:1px solid rgba(230,184,78,.5)}
.plus h2{font-size:32px;font-weight:900;line-height:.92}
.plus h2 em{font-style:normal;color:var(--gold)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 4px;padding:4px;border-radius:12px;background:rgba(0,0,0,.3)}
.seg button{border:0;background:none;border-radius:9px;padding:9px 6px;font-weight:700;color:var(--chalk-dim);line-height:1.2}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1B1405}
.seg small{display:block;font-size:12px;font-weight:600;opacity:.8}
.price{font:900 40px/1 var(--display);margin:10px 0 4px;font-variant-numeric:tabular-nums}
.price small{font:600 16px var(--body);color:var(--chalk-dim)}
.perks{list-style:none;padding:0;margin:12px 0 16px;display:grid;gap:9px}
.perks li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-weight:500}
.perks li::before{content:"";width:18px;height:18px;margin-top:2px;border-radius:5px;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231B1405' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.track{overflow-x:auto;margin-top:12px;border-radius:12px;border:1px solid var(--edge);background:var(--night)}
.track-grid{display:grid;grid-template-columns:70px repeat(6,80px);min-width:max-content}
.track-grid>div{padding:10px 8px;border-left:1px solid var(--edge);border-top:1px solid var(--edge);font-size:13px;font-weight:700;text-align:center;line-height:1.2}
.track-grid .rh{border-left:0;text-align:left;color:var(--chalk-dim);font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center}
.track-grid .lvh{border-top:0;font:800 16px/1 var(--display);color:var(--chalk-dim)}
.track-grid .lvh.cur{color:var(--gold)}
.track-grid .done{color:var(--chalk-faint);text-decoration:line-through}
.track-grid .locked{color:var(--chalk-faint)}
.track-grid .prem{color:var(--gold)}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.how div{padding:10px 8px;border-radius:10px;background:var(--night);border:1px solid var(--edge);font-size:14px;font-weight:600;line-height:1.25;text-align:center}
.how b{display:block;font:900 22px/1 var(--display);color:var(--gold);margin-bottom:4px}
.lvlrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lvlrow b{font:900 26px/1 var(--display);text-transform:uppercase}
.lvlrow span{font-size:14px;color:var(--chalk-dim);font-variant-numeric:tabular-nums;text-align:right}
.rw-head,.rewards li{display:grid;grid-template-columns:72px 1fr 1fr;gap:8px;align-items:center}
.rw-head{margin-top:16px;padding:0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-faint)}
.rw-head span:last-child{color:var(--gold)}
.rewards{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.rewards li{padding:10px;border-radius:10px;background:var(--night);border:1px solid var(--edge);font-size:14px;font-weight:700}
.rewards .rl{font:800 15px/1 var(--display);text-transform:uppercase;color:var(--chalk-dim)}
.rewards .rp{color:var(--gold)}
.rewards .rp.off{color:var(--chalk-faint)}
.items{display:grid;gap:10px;margin-top:10px}
.club-q{width:100%;height:52px;margin-top:8px;border-radius:10px;border:1px solid var(--edge);background:var(--pitch);color:var(--chalk);padding:0 14px;font:600 18px var(--body)}
.club-q::placeholder{color:var(--chalk-faint);font-weight:500}
.club-sel{min-height:22px;margin-top:8px;color:var(--chalk-dim);font-size:15px}
.club-sel b{color:var(--gold)}
.club-list{display:grid;gap:6px;margin-top:6px}
.club-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 12px;border-radius:10px;border:1px solid var(--edge);background:var(--pitch);font-weight:700;text-align:left;font-size:16px}
.club-row small{font-size:13px;font-weight:600;color:var(--chalk-faint);flex-shrink:0}
.club-row[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.club-row.add{border-style:dashed}
.chal{display:grid;gap:14px}
.ch-row{display:flex;align-items:center;gap:12px}
.ch-main{flex:1;min-width:0}
.ch-main b{display:block;font-size:16px;line-height:1.25}
.ch-main .meter{margin-top:7px}
.ch-main span{display:block;margin-top:5px;font-size:13px;color:var(--chalk-dim)}
.ch-btn{flex-shrink:0;padding:9px 14px;border-radius:8px;border:0;background:var(--gold);color:#1B1405;font:900 16px/1 var(--display);text-transform:uppercase;letter-spacing:.05em}
.ch-done{flex-shrink:0;font:800 14px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--win)}
.album-rw{margin:-6px 0 14px;font-size:14px;font-weight:700;color:#6B5A2A}
.item{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:var(--r);background:var(--pitch);border:1px solid var(--edge);text-align:left;width:100%}
button.item:hover:not(:disabled){border-color:var(--chalk-dim)}
.item .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--night);border:1px solid var(--edge);color:var(--gold)}
.item .ico svg{width:26px;height:26px}
.item h3{font-size:20px;line-height:1}
.item p{margin:3px 0 0;font-size:14px;color:var(--chalk-dim)}
.item .buy{font:900 18px/1 var(--display);padding:10px 12px;border-radius:8px;background:var(--gold);color:#1B1405;white-space:nowrap}
.item .buy.alt{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.item .buy.own{background:transparent;border:1px solid var(--edge);color:var(--chalk-dim)}
.item.feature{border-color:rgba(230,184,78,.6);background:linear-gradient(120deg,#231C08,var(--pitch))}
.proto{font-size:13px;color:var(--chalk-faint);text-align:center;margin-top:12px}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(10,20,17,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--edge);padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px))}
.nav-in{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.nav button{background:none;border:0;padding:7px 2px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:3px;font:800 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--chalk-faint)}
.nav button svg{width:22px;height:22px}
.nav button[aria-current="page"]{color:var(--chalk)}
.nav button[aria-current="page"] svg{color:var(--gold)}
.overlay{position:fixed;inset:0;z-index:50;background:rgba(3,8,6,.78);display:flex;align-items:flex-end;justify-content:center;padding:0 12px}
.sheet{width:100%;max-width:480px;background:var(--pitch);border:1px solid var(--edge);border-bottom:0;border-radius:18px 18px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom, 0px));max-height:92%;overflow:auto;animation:up .3s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
.sheet h2{font-size:30px;font-weight:900;line-height:.95}
.sheet p{color:var(--chalk-dim)}
.center{text-align:center}
.big-card{width:min(240px,66vw);margin:8px auto 14px}
.radios{display:grid;gap:8px;margin:14px 0}
.radios label{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;border:1px solid var(--edge);font-weight:600;cursor:pointer}
.radios input{accent-color:var(--gold);width:18px;height:18px}
.adbox{height:160px;border-radius:12px;border:1px dashed var(--edge);display:grid;place-items:center;color:var(--chalk-faint);margin:12px 0;font-weight:700;text-align:center}
.adbox b{display:block;font:900 44px/1 var(--display);color:var(--chalk)}
.lvl{position:fixed;inset:0;z-index:60;background:radial-gradient(circle at 50% 40%,rgba(230,184,78,.25),rgba(3,8,6,.95) 60%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;text-align:center;overflow:hidden}
.lvl .burst{position:absolute;width:460px;height:460px;border-radius:50%;background:repeating-conic-gradient(rgba(230,184,78,.16) 0 8deg,transparent 8deg 22deg);animation:spin 14s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.lvl .eyebrow{color:var(--gold);position:relative}
.lvl h2{position:relative;font-size:46px;font-weight:900;line-height:.9;margin:8px 0 6px}
.lvl .from{position:relative;font:800 20px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--chalk-dim);margin-bottom:18px}
.lvl .from b{color:var(--gold)}
.lvl .tilt{position:relative;width:min(230px,60vw);animation:levelUp 1.3s cubic-bezier(.2,.9,.25,1.1) both}
@keyframes levelUp{0%{transform:scale(.8) rotateY(0)}45%{transform:scale(1.08) rotateY(360deg);filter:brightness(2.2)}100%{transform:none;filter:none}}
.lvl .btn{position:relative;margin-top:22px;min-width:220px}
.lvl .tip{position:relative;font-size:13px;color:var(--chalk-faint);margin-top:10px}
.onb{position:fixed;inset:0;z-index:70;background:var(--night);overflow:auto;padding:24px 16px calc(24px + env(safe-area-inset-bottom, 0px))}
.onb-in{max-width:440px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;gap:18px}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:22px;height:5px;border-radius:3px;background:rgba(238,242,234,.15)}
.dots i.on{background:var(--gold)}
.onb h2{font-size:44px;font-weight:900;line-height:.9}
.onb h2 span{color:var(--gold)}
.onb p{color:var(--chalk-dim);margin:0;font-size:18px}
.onb-art{display:flex;justify-content:center;gap:10px;padding:14px 0 4px}
.onb-art .tilt{width:108px}
.onb-art .tilt:nth-child(1){transform:rotate(-7deg) translateY(10px)}
.onb-art .tilt:nth-child(3){transform:rotate(7deg) translateY(10px)}
.clubs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.club{padding:12px;border-radius:10px;border:1px solid var(--edge);background:var(--pitch);font-weight:700;text-align:left;font-size:16px}
.club[aria-pressed="true"]{border-color:var(--gold);background:rgba(230,184,78,.12);color:var(--gold)}
.onb .spacer{flex:1}
.mini-table{display:grid;gap:6px}
.mini-table div{display:flex;justify-content:space-between;padding:10px 12px;border-radius:8px;background:var(--pitch);border:1px solid var(--edge);font-weight:700}
.mini-table div.me{border-color:var(--gold);color:var(--gold)}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);z-index:80;background:var(--chalk);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:calc(100% - 32px);text-align:center;animation:up .25s ease}
.foot{margin-top:28px;text-align:center;font-size:13px;color:var(--chalk-faint)}
.foot .legal-links{margin-top:8px}.foot a,.legal-agree a{color:var(--chalk-dim);text-decoration:underline}
.foot button{background:none;border:0;text-decoration:underline;color:var(--chalk-dim);font-size:13px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:370px){.brand-name{font-size:17px}.brand svg{width:28px;height:28px}.chip{padding:5px 7px;font-size:14px}.hero h1{font-size:38px}.mode h3{font-size:19px}}

/* ---- live app additions ---- */
.onb .callout{margin-top:6px}
.top-right{display:flex;align-items:center;gap:6px}
.acct{width:34px;height:34px;border-radius:50%;border:1px solid var(--edge);background:var(--pitch);display:grid;place-items:center;padding:0}
.acct svg{width:18px;height:18px;color:var(--chalk-dim)}
.mode-tag{font-size:12px;color:var(--chalk-faint);text-align:center;margin-top:6px}

.brand-name{font-size:18px}
.c3-last{font-size:clamp(11px,15cqw,40px)}
@media (max-width:400px){.chips{gap:3px}.chip{padding:5px 7px;font-size:14px}.acct{width:30px;height:30px}.brand svg{width:28px;height:28px}.brand-name{font-size:16px}}

/* ---------- version 6: Team Sheet pitch, Higher or Lower categories ---------- */
.gold{color:var(--gold)}
.feedback small{display:block;font-weight:500;font-size:14px;color:var(--chalk-dim);margin-top:4px}
.ts-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.ts-note{display:block;font-size:13px;color:var(--chalk-dim);margin-top:4px}
.ts-form{flex:none;font:900 18px/1 var(--display);letter-spacing:.06em;color:var(--ink);background:var(--gold);padding:7px 9px 6px;border-radius:7px}
.ts-pitch{position:relative;border-radius:12px;overflow:hidden;padding:14px 4px;border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) center/100% 1.5px no-repeat,
    radial-gradient(circle at 50% 50%,transparent 17%,rgba(255,255,255,.16) 17.4%,rgba(255,255,255,.16) 18.2%,transparent 18.6%) center/100% 60% no-repeat,
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) top/44% 1.5px no-repeat,
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) bottom/44% 1.5px no-repeat,
    repeating-linear-gradient(180deg,#1C5A3C 0 11.1%,#1A5337 0 22.2%)}
.ts-pitch::before,.ts-pitch::after{content:"";position:absolute;left:28%;right:28%;height:13%;border:1.5px solid rgba(255,255,255,.16)}
.ts-pitch::before{top:-1px;border-top:0}.ts-pitch::after{bottom:-1px;border-bottom:0}
.ts-lines{position:relative;z-index:1;display:grid;gap:12px}
.ts-row{display:flex;justify-content:space-around;align-items:flex-start}
.tp{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 2px}
.tp-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--chalk);border:2px solid rgba(0,0,0,.25);font:900 16px/1 var(--display);font-style:normal;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.tp b{display:block;margin-top:4px;font-size:12px;line-height:1.15;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);overflow-wrap:anywhere}
.tp span{font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.62);margin-top:2px}
.tp.gap .tp-dot{background:var(--gold);border-color:#fff;animation:tpPulse 1.6s ease-in-out infinite}
.tp.gap b{color:var(--gold)}
.tp.got .tp-dot{background:var(--win);color:#fff}.tp.got b{color:#B6F0CF}
.tp.was .tp-dot{background:var(--miss);color:#fff}.tp.was b{color:#FFD2C6}
@keyframes tpPulse{50%{box-shadow:0 0 0 7px rgba(230,184,78,.25)}}
@media (prefers-reduced-motion:reduce){.tp.gap .tp-dot{animation:none}}
.hol-cat{margin:0 0 12px;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:rgba(230,184,78,.08)}
.hol-cat b{display:block;font:900 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--gold)}
.hol-cat span{display:block;font-size:13px;color:var(--chalk-dim);margin-top:3px}
.hol-q{text-align:center;margin:14px 0 0}
.hol-card.ok{border-color:var(--win)}.hol-card.no{border-color:var(--miss)}
.hol-btns .btn{padding-left:6px;padding-right:6px}

/* version 8: weekly challenge difficulty tags */
.ch-tier{display:inline-block;width:max-content;justify-self:start;align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-bottom:5px;border:1px solid var(--edge);color:var(--chalk-dim)}
.ch-tier.t2{color:var(--silver);border-color:rgba(201,210,214,.4)}
.ch-tier.t3{color:var(--gold);border-color:rgba(230,184,78,.5)}

/* version 9: every level of a card */
.lvstrip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:6px 0 14px;text-align:center}
.lvmini{background:none;border:0;padding:4px 2px 2px;border-radius:9px;color:var(--chalk-dim);font:700 10px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.lvmini .tilt{pointer-events:none}
.lvmini span{display:block;margin-top:5px;font-size:9px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lvmini .c3-top,.lvmini .c3-plate{display:none}
.lvmini .c3{border-radius:7px}
.lvmini.ahead .c3{filter:saturate(.55) brightness(.62)}
.lvmini[aria-selected="true"]{background:rgba(230,184,78,.14);outline:1.5px solid var(--gold);color:var(--gold)}
.lvmini:focus-visible{outline:2px solid var(--chalk)}
.big-card.preview{position:relative}
.big-card.preview::after{content:"Preview";position:absolute;top:-8px;right:-8px;z-index:3;background:var(--chalk);color:var(--ink);font:800 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;border-radius:6px}
.rules{text-align:left;margin:4px 0 16px;padding-left:20px;display:grid;gap:8px;font-size:15px;color:var(--chalk-dim)}
.rules b{color:var(--chalk)}

/* version 16: divisions */
.crest{display:inline-flex;align-items:center;gap:2px;vertical-align:-3px}
.crest svg{width:15px;height:18px}
.crest.big svg{width:44px;height:53px}
.crest .troph{font-size:11px;line-height:1}
.div-head{display:flex;align-items:center;gap:12px;margin:4px 0 12px}
.div-head h2{font:900 26px/1 var(--display);text-transform:uppercase}
.div-head span{font-size:13px;color:var(--chalk-dim)}
.divtab tr.z-up td.pos{box-shadow:inset 3px 0 0 var(--win)}
.divtab tr.z-down td.pos{box-shadow:inset 3px 0 0 var(--miss)}
.divtab tr.zline td{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--win);padding:4px 10px;border-top:1px dashed var(--win)}
.divtab tr.zline.down td{color:#F2A08E;border-top-color:var(--miss)}
.divladder{display:grid;gap:8px;margin:4px 0 14px}
.divladder div{display:flex;align-items:center;gap:8px;font-size:15px}
.divladder span{color:var(--chalk-dim);font-size:13px}
.tile-div{display:flex;align-items:center;gap:6px;font-size:18px!important}

.founder{display:inline-block;font:800 11px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:#1B1405;background:linear-gradient(135deg,#F3D27A,#E6B84E 55%,#B8892A);border-radius:999px;padding:3px 7px;vertical-align:middle;white-space:nowrap;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.goldname{color:#F3D27A;font-weight:800;text-shadow:0 0 8px rgba(230,184,78,.35)}
.passbar .dotbadge,.dotbadge{color:#1B1405 !important;font-family:var(--body) !important;line-height:18px;display:inline-block;min-width:18px;padding:1px 6px;margin-right:4px;border-radius:999px;background:var(--gold);color:#1B1405;font-weight:900;font-size:12px;text-align:center}
.passtab td,.passtab th{font-size:13px;padding:7px 8px;vertical-align:top}
.passtab td.pl-lock{color:var(--chalk-faint)}
.passtab td.pl-ready{color:var(--gold);font-weight:700}
.passtab td.pl-got{color:var(--chalk-dim)}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.sbadge{font:800 11px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:4px 8px}
.sbadge.champ{background:linear-gradient(135deg,#F3D27A,#E6B84E 55%,#B8892A);color:#1B1405;border:0;animation:champglow 2.4s ease-in-out infinite}
@keyframes champglow{0%,100%{box-shadow:0 0 0 rgba(230,184,78,0)}50%{box-shadow:0 0 12px rgba(230,184,78,.7)}}
@media (prefers-reduced-motion:reduce){.sbadge.champ{animation:none}}

/* ---- premium landing + onboarding (v29) ---- */
.onb{background:radial-gradient(90% 45% at 50% -5%,rgba(230,184,78,.17),transparent 62%),radial-gradient(70% 40% at 100% 105%,rgba(70,178,119,.14),transparent 60%),repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 56px,transparent 56px 112px),var(--night)}
.wordmark{display:flex;flex-direction:column;align-items:flex-start;margin-top:6px}
.wordmark small{font:800 14px/1 var(--display);letter-spacing:.46em;color:var(--gold);text-transform:uppercase;margin:0 0 4px 3px}
.wordmark b{font:900 84px/.8 var(--display);text-transform:uppercase;letter-spacing:.01em;background:linear-gradient(180deg,#FFFFFF 10%,#D9E2D5 90%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 rgba(0,0,0,.35))}
.onb .lede{font-size:21px;line-height:1.3;color:var(--chalk);margin-top:-4px}
.onb .lede span{color:var(--gold);font-weight:700}
.teaser{position:relative;border-radius:18px;padding:16px;background:linear-gradient(160deg,#17321F 0%,#0E1D16 100%);border:1px solid rgba(230,184,78,.38);box-shadow:0 22px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden}
.teaser::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.07) 48%,transparent 60%);background-size:260% 100%;animation:sheen 5s ease-in-out infinite}
.teaser-head{display:flex;gap:14px;align-items:center}
.mystery{position:relative;width:64px;height:82px;flex:none;border-radius:10px;background:linear-gradient(160deg,#3A2E0B,#12190F);border:1px solid rgba(230,184,78,.7);display:grid;place-items:center;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.mystery svg{position:absolute;left:0;right:0;bottom:0;width:100%;fill:rgba(230,184,78,.24)}
.mystery b{position:relative;font:900 36px/1 var(--display);color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.5)}
.onb .teaser h3{font-size:30px;line-height:.95;margin-top:4px}
.eyebrow.tgold{color:var(--gold)}
.worth{display:block;margin-top:6px;font-size:14px;color:var(--chalk-dim)}
.worth b{color:var(--gold)}
.teaser-clues{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px;position:relative;z-index:1}
.teaser-clues li{display:flex;gap:10px;align-items:center;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);font-size:16px;color:var(--chalk)}
.teaser-clues i{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:800 13px/1 var(--display);background:var(--gold);color:#1B1405}
.teaser-clues li.lock{color:var(--chalk-faint);border-style:dashed}
.teaser-clues li.lock i{background:rgba(255,255,255,.08);color:var(--chalk-faint)}
.teaser.anim .teaser-clues li{opacity:0;animation:teaseIn .55s cubic-bezier(.2,.8,.2,1) forwards}
.teaser.anim .teaser-clues li:nth-child(1){animation-delay:.25s}
.teaser.anim .teaser-clues li:nth-child(2){animation-delay:.75s}
.teaser.anim .teaser-clues li:nth-child(3){animation-delay:1.1s}
.teaser.anim .teaser-clues li:nth-child(4){animation-delay:1.3s}
@keyframes teaseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.feat{display:flex;gap:8px;flex-wrap:wrap}
.feat span{font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;border-radius:999px;border:1px solid var(--edge);color:var(--chalk-dim);background:rgba(16,33,26,.75)}
@media (min-width:700px){.onb-in{min-height:0;padding-top:4vh}.onb .spacer{flex:0 0 6px}}
@media (max-width:380px){.wordmark b{font-size:70px}.onb .teaser h3{font-size:26px}}

.feat-h{font:700 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:-8px}
.onb-modes{margin-top:2px}
.onb-modes .mode{min-height:0;background:linear-gradient(160deg,#17321F,#0F1F18);border-color:rgba(230,184,78,.28);animation:teaseIn .5s cubic-bezier(.2,.8,.2,1) both}
.onb-modes .mode:nth-child(2){animation-delay:.1s}.onb-modes .mode:nth-child(3){animation-delay:.2s}.onb-modes .mode:nth-child(4){animation-delay:.3s}
/* Delete my account */
.btn-ghost.danger{color:var(--miss);border-color:rgba(217,84,58,.35)}
.btn-ghost.danger:hover:not(:disabled){border-color:var(--miss)}
.btn-danger{background:var(--miss);color:#fff}
.btn-danger:hover:not(:disabled){background:#E4644A}
.dellist{margin:10px 0 0;padding-left:20px;color:var(--chalk-dim);font-size:15px}
.dellist li{margin:4px 0}
.goneacct{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.goneacct h1{font-size:40px}
.goneacct p{color:var(--chalk-dim);margin:0 0 8px}
.goneacct a.btn{text-decoration:none}
/* Continue with Google (Google's standard white button) */
.btn-google{background:#fff;color:#1F1F1F;gap:12px;font:600 17px/1 var(--body);letter-spacing:0;text-transform:none;border:1px solid #DADCE0}
.btn-google svg{width:20px;height:20px}
.btn-google:hover:not(:disabled){background:#F5F7F7}
.or{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:var(--chalk-faint);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--edge)}
/* Logo: the Question Ball mark next to the wordmark */
.brand svg.brand-mark{width:22px;height:36px}
.lockup{display:flex;align-items:center;gap:14px;margin-top:6px}
.lockup .wordmark{margin-top:0}
.lock-mark{width:58px;height:98px;flex:none;filter:drop-shadow(0 5px 0 rgba(0,0,0,.35))}
@media (max-width:380px){.lock-mark{width:48px;height:82px}}
/* v36 polish */
.rank-tabs .tab{flex:1 1 0;padding:8px 6px;font-size:14px;text-align:center;min-width:0}
.seg{display:flex;background:var(--pitch);border:1px solid var(--edge);border-radius:999px;padding:3px;margin:-2px 0 10px}
.seg button{flex:1;border:0;background:transparent;color:var(--chalk-dim);font:700 14px/1 var(--body);padding:9px 0;border-radius:999px}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1B1405}
.ch-pct{flex-shrink:0;font:800 16px/1 var(--display);letter-spacing:.04em;color:var(--chalk-faint);min-width:44px;text-align:right}
.col-intro{margin-top:14px}
.linkbtn{background:none;border:0;padding:0;color:var(--gold);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.legend-key{margin-top:14px}
.legend-key .key{padding:4px 8px 4px 5px;font-size:12.5px}
.hint a,p a{color:var(--gold);text-underline-offset:3px}
.hint a:visited,p a:visited{color:var(--gold)}
.acc-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.acc-links button,.acc-links a{flex:1 1 auto;border:1px solid var(--edge);background:transparent;color:var(--chalk);border-radius:999px;padding:9px 12px;font:700 14px/1 var(--body);text-align:center;text-decoration:none}
.acc-links a:visited{color:var(--chalk)}
/* v37: level-up chance banner, collection */
.chance{margin:0 0 12px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--gold);background:linear-gradient(135deg,rgba(230,184,78,.20),rgba(230,184,78,.06));box-shadow:0 0 0 3px rgba(230,184,78,.08)}
.chance-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.chance-top span{font:800 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.chance-top b{font:900 20px/1 var(--display);text-transform:uppercase;color:var(--chalk)}
.chance p{margin:6px 0 0;font-size:15px;color:var(--chalk)}
.chance.used{border-color:var(--edge);background:var(--pitch);box-shadow:none}
.chance.used .chance-top span{color:var(--chalk-dim)}
.chance.used p{color:var(--chalk-dim)}
.slot-btn{position:relative}
.upnow{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#1B1405;font:900 12px/24px var(--body);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:2}
.upkey{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#1B1405;font:900 10px/18px var(--body);text-align:center;vertical-align:1px}
.album-empty{margin:0 0 14px;font-size:15px;color:#4A5A50}
.page .btn-ghost{color:var(--ink);border-color:#CFC8B4}.page .btn-ghost:hover:not(:disabled){border-color:#8E8672}
/* v38 */
.streak-line{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:16px;color:var(--chalk)}
.streak-line svg{width:20px;height:20px;color:var(--gold);flex:none}
.streak-line b{color:var(--gold)}
.pb-banner{display:flex;align-items:center;gap:8px;justify-content:center;margin:14px 0 4px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--gold);background:linear-gradient(135deg,rgba(230,184,78,.22),rgba(230,184,78,.06));color:var(--gold);font-weight:800;font-size:18px}
.pb-banner svg{width:20px;height:20px}
#holBoard .section-title{margin-top:18px}

/* ===== v39: laptops and big screens (1000px and wider). Phones are unchanged. ===== */
@media (min-width:1000px){
  body{font-size:18px}
  .wrap{max-width:1200px;padding-inline:32px;padding-top:92px;padding-bottom:48px}
  .wrap{z-index:auto}#screen,.foot{position:relative;z-index:1}
  /* One bar along the top: logo on the left, the menu in the middle, coins and account on the right */
  .nav{top:0;bottom:auto;height:72px;padding:0 32px;border-top:0;border-bottom:1px solid var(--edge)}
  .nav-in{max-width:none;height:100%;display:flex;justify-content:center;align-items:center;gap:6px}
  .nav button{flex-direction:row;gap:9px;padding:11px 16px;font-size:15px;border-radius:999px;border:1px solid transparent}
  .nav button:hover{color:var(--chalk);background:rgba(255,255,255,.04)}
  .nav button[aria-current="page"]{background:rgba(230,184,78,.10);border-color:rgba(230,184,78,.45)}
  .top{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:1200px;height:72px;padding:0 32px;z-index:31;pointer-events:none}
  .top>*{pointer-events:auto}
  .brand svg.brand-mark{width:24px;height:40px}.brand-name{font-size:22px}
  .chip{font-size:16px}.acct{width:38px;height:38px}
  .toast{bottom:32px}
  .foot{margin-top:48px}

  /* Two columns (Home and Shop) */
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  .home-cols{grid-template-columns:1.1fr 1fr}
  .section-title.first{margin-top:0}
  .section-title h2{font-size:28px}

  /* Home */
  .hero{padding:32px 32px 28px;border-radius:22px}
  .hero h1{font-size:68px;margin:10px 0 14px}
  .hero p{font-size:19px;max-width:40ch}
  .hero .btn{font-size:20px;padding-block:18px}
  .hero::after{width:320px;height:320px;right:-70px;bottom:-110px}
  .passbar{padding:18px 20px;margin-top:14px}
  .strip{margin-top:14px}
  .modes{gap:14px}
  .mode{min-height:178px;padding:18px 18px 16px;gap:8px;transition:border-color .15s,transform .15s}
  .mode:hover{border-color:rgba(230,184,78,.55);transform:translateY(-2px)}
  .mode svg.ic{width:36px;height:36px}
  .mode h3{font-size:26px}
  .mode p{font-size:15px}

  /* Game screens: a comfortable reading width, a little bigger */
  body[data-screen="daily"] #screen,body[data-screen="round"] #screen{max-width:760px;margin-inline:auto}
  .clue{font-size:19px;padding:13px 14px}
  .q{font-size:26px}

  /* Higher or Lower: the two players side by side */
  .hol{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
  .hol-card{padding:28px 16px}
  .hol-card .nm{font-size:32px}.hol-card .gl{font-size:72px}
  .hol-btns .btn{font-size:20px;padding-block:18px}

  .end{padding:28px 28px 24px}

  /* Collection: more cards per row */
  body[data-screen="collection"] .tabs{flex-wrap:wrap;overflow:visible}
  .page{padding:24px 24px 26px}
  .slots{grid-template-columns:repeat(6,1fr);gap:16px}

  /* Rankings: wider tables, still easy to read across */
  body[data-screen="rankings"] #screen{max-width:920px;margin-inline:auto}
  body[data-screen="rankings"] td{padding:14px 16px;font-size:18px}

  /* Pop-ups sit in the middle of the screen instead of sliding up from the bottom */
  .overlay{align-items:center;padding:24px}
  .sheet{max-width:560px;border-radius:18px;border-bottom:1px solid var(--edge);max-height:88vh;padding:26px 26px 24px}
}
@media (min-width:1000px) and (max-width:1120px){
  .nav button{padding:10px 11px;font-size:14px;gap:7px}
}
/* v40: "Correct!" above the new-card celebration */
.win-head{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:10px 18px 10px 10px;border-radius:999px;background:rgba(70,178,119,.16);border:1px solid var(--win);text-align:left;animation:up .35s ease both}
.win-tick{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--win);color:#06120C;font:900 24px/1 var(--body)}
.win-head b{display:block;font:900 30px/1 var(--display);text-transform:uppercase;color:var(--chalk)}
.win-head small{display:block;margin-top:3px;font-size:15px;font-weight:700;color:var(--chalk-dim)}
/* v40: sign-in first on the landing page */
.signbox{background:rgba(16,33,26,.82);border:1px solid rgba(230,184,78,.45);border-radius:18px;padding:18px 16px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.sign-h{font-size:28px;font-weight:900;line-height:1;margin:0 0 6px}
.sign-sub{margin:0 0 14px;color:var(--chalk-dim);font-size:16px;line-height:1.35}
.signbox .legal-agree{margin:12px 0 0}
.land-more{display:flex;flex-direction:column;gap:18px}
.land-foot{margin-top:4px}
@media (min-width:1000px){
  .onb .onb-in.land:not(.sent){max-width:1100px;display:grid;grid-template-columns:1.1fr 1fr;column-gap:56px;row-gap:18px;align-content:start;padding-top:5vh}
  .onb-in.land:not(.sent)>.lockup,.onb-in.land:not(.sent)>.lede,.onb-in.land:not(.sent)>.land-more,.onb-in.land:not(.sent)>.land-foot{grid-column:1}
  .onb-in.land:not(.sent)>.signbox{grid-column:2;grid-row:1 / span 4;align-self:start;position:sticky;top:5vh;padding:28px 26px}
  .sign-h{font-size:36px}
}
.signbox form{margin-top:10px}.signbox>.callout+.hint,.signbox>.hint+.btn,.signbox>.btn+.btn{margin-top:12px}
.onb-who{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:10px 14px;border-radius:12px;border:1px solid rgba(230,184,78,.45);background:rgba(230,184,78,.08);font-size:15px;color:var(--chalk-dim)}
.onb-who b{color:var(--chalk)}.onb-who .linkbtn{font-size:15px}
/* v43: invite a friend */
.invite{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 14px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--edge);background:var(--pitch)}
.invite b{display:block;font:900 22px/1 var(--display);text-transform:uppercase}
.invite span{display:block;margin-top:4px;font-size:15px;color:var(--chalk-dim)}
.invite .btn{padding-inline:22px}
.invite .copied{grid-column:1/-1}
.invite .copied:empty{display:none}
.invited{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:rgba(230,184,78,.12);border:1px solid rgba(230,184,78,.45);font-size:16px}
.invited b{color:var(--gold)}
@media (min-width:1000px){.invite{padding:18px 20px}}
/* v45: Card Trials */
.trialbox{display:grid;gap:6px;margin:4px 0 12px;padding:14px;border-radius:var(--r);border:1px solid var(--gold);background:linear-gradient(135deg,rgba(230,184,78,.18),rgba(230,184,78,.05));text-align:left}
.trialbox b{font:900 20px/1.05 var(--display);text-transform:uppercase;color:var(--chalk)}
.trialbox span{font-size:15px;color:var(--chalk-dim)}
.trialbox .btn{margin-top:6px}
.trialbox.done{border-color:var(--edge);background:var(--pitch)}
/* ===== v46: LEVEL UP ===== */
.mode.wide{grid-column:1/-1}
.lvtile{flex-direction:row;align-items:center;gap:14px;min-height:0;padding:16px 16px 14px;border-color:rgba(230,184,78,.55);background:linear-gradient(120deg,rgba(230,184,78,.16),rgba(230,184,78,.03) 60%),var(--pitch)}
.lvtile svg.ic{width:38px;height:38px;flex:none}
.lvtile-txt{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.lvtile-txt p{max-width:46ch}
.lvtile-tag{flex:none;align-self:flex-start;font:800 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px;border:1px solid var(--edge);color:var(--chalk-dim)}
.lvtile-tag.on{background:var(--gold);border-color:var(--gold);color:#1B1405}
.onb-modes .mode.wide{min-height:0}
@media (max-width:560px){.lvtile{flex-direction:column;align-items:flex-start;gap:6px}.lvtile-tag{position:absolute;top:14px;right:14px}.lvtile-txt p{max-width:none}}

.lv-lede{color:var(--chalk-dim);margin:0 0 12px;max-width:60ch}
.lvladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:6px}
.lvladder div{display:grid;gap:2px;padding:10px;border-radius:12px;border:1px solid var(--edge);background:var(--pitch);text-align:center}
.lvladder .lvl-step{font:700 11px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--chalk-dim)}
.lvladder b{font:900 22px/1 var(--display);color:var(--gold)}
.lvladder small{font-size:13px;color:var(--chalk-faint)}
.lvlist{display:grid;gap:10px}
.lvrow{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:var(--r);border:1px solid var(--edge);background:var(--pitch)}
.lvrow.ready{border-color:rgba(230,184,78,.55)}
.lvrow-card{background:none;border:0;padding:0;width:58px;display:block}
.lvrow-txt{display:grid;gap:2px;min-width:0}
.lvrow-txt b{font:900 22px/1 var(--display);text-transform:uppercase}
.lvrow-lv{font-weight:700}.lvrow-lv em,.lvhead em,.lvnudge em{font-style:normal;color:var(--gold)}
.lvrow-meta{font-size:14px;color:var(--chalk-dim)}
.lvwhen{font:800 13px/1.25 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--chalk-faint);text-align:right}
.lvrow.tried .lvrow-card,.lvrow.wait .lvrow-card,.lvrow.today .lvrow-card{opacity:.75}
.lv-empty{text-align:center;display:grid;gap:10px;margin-top:10px}
.lv-empty p{color:var(--chalk-dim)}

.lvintro-card{width:120px;margin:10px auto 8px}
.lvfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lvfacts div{display:grid;gap:2px;padding:10px 6px;border-radius:12px;border:1px solid var(--edge);background:rgba(10,20,17,.5)}
.lvfacts b{font:900 26px/1 var(--display);color:var(--gold)}
.lvfacts span{font-size:13px;color:var(--chalk-dim)}

.lvhead{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px;margin:0 0 12px;padding:10px 12px;border-radius:var(--r);border:1px solid rgba(230,184,78,.55);background:linear-gradient(135deg,rgba(230,184,78,.16),rgba(230,184,78,.04))}
.lvhead-card{width:52px}
.lvhead b{display:block;font:900 22px/1 var(--display);text-transform:uppercase}
.lvhead span{display:block;font-weight:700;margin-top:2px}
.lvhead small{display:block;font-size:13px;color:var(--chalk-dim)}
.trialq{position:relative;overflow:hidden;padding-top:22px}
.tclock{position:absolute;left:0;right:0;top:0;height:7px;background:rgba(238,242,234,.08)}
.tclock i{display:block;height:100%;width:100%;background:var(--gold);transition:width .1s linear}
.tclock.low i{background:var(--miss)}
.trialq .eyebrow{margin-bottom:6px}

.lvnudge{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:var(--r);border:1px solid rgba(230,184,78,.55);background:linear-gradient(120deg,rgba(230,184,78,.14),rgba(230,184,78,.03))}
.lvnudge-card{width:44px}
.lvnudge b{display:block;font:900 20px/1 var(--display);text-transform:uppercase;margin-top:2px}
.lvnudge span{display:block;font-weight:700}
.lvnudge .eyebrow{color:var(--gold)}
@media (min-width:1000px){
  .lvlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-screen="levelup"] #screen{max-width:1000px;margin-inline:auto}
  .lvtile{padding:20px 22px}
}
.invite+.strip{margin-top:14px}
/* v50: streak reminders */
.remind{display:grid;gap:6px;margin-top:14px;padding:14px;border-radius:var(--r);border:1px solid var(--edge);background:var(--pitch);text-align:left}
.remind b{font:900 20px/1.05 var(--display);text-transform:uppercase}
.remind span{font-size:15px;color:var(--chalk-dim)}
.remind-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.acc-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:10px 0 4px;padding:12px 14px;border-radius:12px;border:1px solid var(--edge);background:var(--pitch);color:var(--chalk);text-align:left}
.acc-toggle b{display:block;font-size:16px}.acc-toggle small{display:block;font-size:13px;color:var(--chalk-dim)}
.acc-toggle i{font-style:normal;font:800 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;border:1px solid var(--edge);color:var(--chalk-dim)}
.acc-toggle[aria-pressed="true"] i{background:var(--gold);border-color:var(--gold);color:#1B1405}

/* v56 HOME TURF */
.turftile{border-color:rgba(238,242,234,.32);background:linear-gradient(120deg,rgba(206,17,36,.16),rgba(206,17,36,.03) 60%),var(--pitch)}
.turftile svg.flag{width:46px;height:31px;flex:none;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.35)}
.tf-eye{display:flex;align-items:center;gap:8px}
.tf-eye svg.flag{width:21px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.tf-s{font-size:23px;line-height:1.3;font-weight:800;margin:12px 0 4px;min-height:3.9em}
.tf-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tf-btn{min-height:88px;border-radius:14px;border:2px solid var(--edge);background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:900 24px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;transition:transform .1s,border-color .15s}
.tf-btn i{font-style:normal;font-size:26px;line-height:1}
.tf-true{border-color:rgba(70,178,119,.55);background:rgba(70,178,119,.1)}.tf-true i{color:var(--win)}
.tf-false{border-color:rgba(217,84,58,.55);background:rgba(217,84,58,.1)}.tf-false i{color:#F2A08E}
.tf-btn:active:not(:disabled){transform:scale(.97)}
.tf-btn:disabled{opacity:.4}
.tf-btn.right{opacity:1;background:rgba(70,178,119,.28);border-color:var(--win)}
.tf-btn.wrong{opacity:1;background:rgba(217,84,58,.26);border-color:var(--miss)}
.tf-fact{margin:6px 0 0;font-size:16px;line-height:1.45;color:var(--chalk-dim)}
.tf-hint{text-align:center;margin:12px 0 0}
@media (min-width:900px){.tf-s{font-size:26px;min-height:2.6em}.tf-btn{min-height:100px}}

/* v58 CARD FLIP REVEAL: the card arrives face down (or at its old level), turns over and shines */
.lvl .flip{position:relative;width:min(230px,60vw);max-width:100%;perspective:1200px}
.lvl .flip .tilt{width:100%;animation:none}
.flip-in{position:relative;transform-style:preserve-3d;animation:cardFlip 1.15s .3s cubic-bezier(.3,.85,.3,1.05) both}
.flip-back,.flip-front{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-back{position:absolute;inset:0}
.flip-back .tilt{width:100%}
.flip-front{transform:rotateY(180deg)}
.cardback{width:100%;aspect-ratio:5/7;border-radius:10px;display:flex;align-items:center;justify-content:center;
 background:repeating-linear-gradient(45deg,rgba(230,184,78,.12) 0 10px,transparent 10px 20px),linear-gradient(160deg,#1E4535,#0C1D16);
 border:4px solid var(--gold);box-shadow:inset 0 0 0 6px rgba(8,19,15,.9),inset 0 0 0 8px rgba(230,184,78,.45),0 18px 40px rgba(0,0,0,.6)}
.cardback b{font:900 110px/1 var(--display);color:var(--gold)}
@keyframes cardFlip{0%{transform:rotateY(0) scale(.86)}55%{transform:rotateY(200deg) scale(1.05)}100%{transform:rotateY(180deg) scale(1)}}
.flip-shine{position:absolute;inset:0;border-radius:10px;pointer-events:none;overflow:hidden;
 background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:cardShine 1s 1.35s ease-out both;mix-blend-mode:screen}
@keyframes cardShine{from{background-position:-150% 0;opacity:1}to{background-position:150% 0;opacity:0}}
.lvl .flip.lv-gold,.lvl .flip.lv-elite,.lvl .flip.lv-legend{filter:drop-shadow(0 0 0 rgba(230,184,78,0));animation:cardGlow 1.6s 1.3s ease-out both}
.lvl .flip.lv-elite{--glow:rgba(47,203,154,.75)}.lvl .flip.lv-gold,.lvl .flip.lv-legend{--glow:rgba(230,184,78,.8)}
@keyframes cardGlow{0%{filter:drop-shadow(0 0 0 transparent)}35%{filter:drop-shadow(0 0 28px var(--glow))}100%{filter:drop-shadow(0 0 10px var(--glow))}}
@media (prefers-reduced-motion:reduce){.flip-in{animation:none;transform:rotateY(180deg)}.flip-shine,.lvl .flip{animation:none}}

/* v58 next-legend countdown */
.nextleg{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:14px 0 14px;padding:12px 16px;border-radius:12px;border:1px solid rgba(230,184,78,.45);background:rgba(230,184,78,.07)}
.nextleg span{font:700 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-dim)}
.nextleg b{font:900 34px/1 var(--display);color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* v58 gold pulse on a correct answer */
.feedback.ok{animation:okPulse .8s ease-out both}
@keyframes okPulse{0%{transform:scale(.96);text-shadow:0 0 0 rgba(230,184,78,0)}35%{transform:scale(1.04);text-shadow:0 0 18px rgba(230,184,78,.9)}100%{transform:scale(1);text-shadow:0 0 0 rgba(230,184,78,0)}}
.opt.right,.tf-btn.right{animation:okRing .9s ease-out}
@keyframes okRing{0%{box-shadow:0 0 0 0 rgba(230,184,78,.7)}100%{box-shadow:0 0 0 14px rgba(230,184,78,0)}}
.onb-modes svg.flag{width:40px;height:27px;border-radius:3px}
@media (prefers-reduced-motion:reduce){.feedback.ok,.opt.right,.tf-btn.right{animation:none}}

/* v58 club colour stripe next to your own name */
.clubbar{display:inline-block;width:7px;height:1.05em;border-radius:2px;margin-right:7px;vertical-align:-.15em;background:linear-gradient(var(--c1) 55%,var(--c2) 55%);box-shadow:0 0 0 1px rgba(255,255,255,.18)}

/* v58 welcome screen: the example clues arrive quickly so the box never sits empty */
.teaser.anim .teaser-clues li{animation-duration:.4s}
.teaser.anim .teaser-clues li:nth-child(1){animation-delay:.05s}
.teaser.anim .teaser-clues li:nth-child(2){animation-delay:.18s}
.teaser.anim .teaser-clues li:nth-child(3){animation-delay:.3s}
.teaser.anim .teaser-clues li:nth-child(4){animation-delay:.4s}
@media (prefers-reduced-motion:reduce){.teaser.anim .teaser-clues li{opacity:1;animation:none}}
.stat b [data-count],.feedback [data-count]{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;display:inline;margin:0}

/* v61 holding page (until launch) */
.hold{text-align:left}
.hold-eye{color:var(--gold);margin-top:22px}
.hold-h{font:900 44px/.95 var(--display);text-transform:uppercase;margin:10px 0 0;text-wrap:balance}
.hold-h span{color:var(--gold)}
.hold-p{color:var(--chalk-dim);margin:14px 0 20px;font-size:17px;line-height:1.45}
.hold .btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.hold-tester{display:block;margin:22px auto 0;color:var(--chalk-faint)}
.hold-form{margin-top:16px}
.hold-form label{display:block;font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-dim);margin-bottom:8px}
.hold-row{display:flex;gap:8px}
.hold-row input{flex:1;min-width:0;background:var(--pitch);border:1px solid var(--edge);border-radius:12px;color:var(--chalk);font:700 18px/1 var(--body);letter-spacing:.12em;padding:14px;text-transform:uppercase}
/* PUZZLE PACKS (v63): Summer of 1990 */
.pk-badge{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;font:900 22px/1 var(--display);color:#1B1405;background:linear-gradient(150deg,#F3D27E,var(--gold) 55%,#B98A2A);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.pk-badge.sm{display:inline-grid;width:22px;height:22px;border-radius:6px;font-size:12px;margin-right:8px;vertical-align:-6px}
.item .pk-ico{font:900 22px/1 var(--display);color:#1B1405;background:linear-gradient(150deg,#F3D27E,var(--gold) 55%,#B98A2A);border:0}
.packitem .linkbtn{margin-top:6px}
.pk-hero{margin:4px 0 6px}
.pk-hero h1{font-size:44px;line-height:.92;margin-top:6px;color:var(--gold)}
.pk-hero p{color:var(--chalk-dim);margin:10px 0 12px;max-width:52ch}
.pklist{display:flex;flex-direction:column;gap:10px}
.pkrow{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:var(--r);background:var(--pitch);border:1px solid var(--edge)}
.pkrow.played{border-color:rgba(230,184,78,.45)}
.pk-n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:900 20px/1 var(--display);border:1px solid var(--gold);color:var(--gold)}
.pk-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.pk-txt b{font:800 19px/1.05 var(--display);text-transform:uppercase}
.pk-txt>span{font-size:14px;color:var(--chalk-dim)}
.pk-rws{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pk-rw{font-size:12.5px;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid var(--edge);color:var(--chalk-dim);white-space:nowrap}
.pk-rw.got{border-color:var(--gold);color:var(--gold)}
.pk-go{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pk-go small{font-size:12.5px;color:var(--chalk-faint);white-space:nowrap}
.pk-go .btn{height:44px;padding:0 14px;min-width:78px}
.packtile .pk-badge{width:40px;height:40px}
@media (max-width:380px){.pkrow{grid-template-columns:34px 1fr;}.pk-n{width:34px;height:34px;font-size:17px}.pk-go{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}

/* LANDING POLISH (v66): card fan, calmer heading, breathing room above Google */
.land-fan{position:relative;display:flex;justify-content:center;align-items:flex-end;margin:10px 0 0;padding:4px 0 22px}
.land-fan .fan-card{width:96px;margin:0 -1px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.land-fan .f0{transform:rotate(-9deg) translateY(10px)}
.land-fan .f1{width:112px;z-index:2;transform:translateY(-4px)}
.land-fan .f2{transform:rotate(9deg) translateY(10px)}
.fan-cap{text-align:center;margin:0 0 10px;font:800 15px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim)}
.fan-cap span{color:var(--gold)}
.onb-in.land .signbox{padding:20px 18px}
.sign-h{font-size:30px;margin:0 0 8px}
.onb .signbox .sign-sub{margin:0 0 20px}
@media (min-width:1000px){.onb-in.land:not(.sent)>.land-fan,.onb-in.land:not(.sent)>.fan-cap{grid-column:1}.onb-in.land:not(.sent)>.signbox{grid-row:1 / span 6}.sign-h{font-size:38px}.land-fan{justify-content:flex-start;padding-left:14px}.fan-cap{text-align:left}}

/* v69: note shown instead of the Google button inside Instagram/Facebook/TikTok browsers */
.onb .signbox .inapp-note{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:rgba(230,184,78,.10);border:1px solid rgba(230,184,78,.35);color:var(--chalk);font:500 15px/1.4 var(--body);text-align:left}

/* v72: guest Daily Legend (signed-out visitors land straight in today's legend) */
.onb .guest .match{margin-top:4px}
.onb .guest .match h1{font-size:36px}
.onb .guest .result h2{font-size:38px}
.onb .guest .g-keep{list-style:none;margin:6px 0 16px;padding:0;display:grid;gap:8px;text-align:left}
.onb .guest .g-keep li{position:relative;padding:10px 12px 10px 38px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid var(--edge);color:var(--chalk);font:500 16px/1.35 var(--body)}
.onb .guest .g-keep li:before{content:"✓";position:absolute;left:13px;top:9px;color:var(--gold);font-weight:900}
.onb .guest .g-small{text-align:center;font-size:14px;margin-top:8px}
.onb .g-have{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--chalk-dim);font:500 16px var(--body)}
.onb .g-back{align-self:flex-start;margin:-6px 0 -4px}

/* v72: locked game modes under the guest Daily Legend (the tease) */
.onb .g-more{margin-top:4px}
.onb .g-more-h{margin-bottom:12px}
.onb .g-more-h h2{font-size:38px;margin-top:6px}
.onb .g-more-h p{font-size:16px;margin-top:8px}
.onb .g-locked .mode{cursor:pointer;color:inherit;font:inherit;text-align:left;opacity:.92}
.onb .g-locked .mode h3,.onb .g-locked .mode p{filter:saturate(.7)}
.onb .g-lock{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid rgba(230,184,78,.45);color:var(--gold);font:800 11px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.onb .g-lock svg{width:11px;height:11px}

/* v72: a guest miss shows a face-down card instead of the answer */
.onb .g-mystery{width:150px;aspect-ratio:5/7;margin:18px auto 14px;border-radius:18px;display:flex;align-items:center;justify-content:center;
 background:repeating-linear-gradient(45deg,rgba(230,184,78,.10) 0 12px,transparent 12px 24px),linear-gradient(160deg,#1E4535,#0C1D16);
 border:5px solid var(--gold);box-shadow:0 24px 50px rgba(0,0,0,.55),inset 0 0 0 8px rgba(8,19,15,.9),inset 0 0 0 10px rgba(230,184,78,.5)}
.onb .g-mystery b{font:900 120px/1 var(--display);color:var(--gold)}

/* v73: showing what we sell, calmly */
.oot{display:grid;gap:10px;margin-top:14px}
.oot-opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;text-align:left;padding:14px 16px;border-radius:14px;background:var(--pitch);border:1px solid var(--edge);color:var(--chalk);font:inherit;cursor:pointer}
.oot-opt b{font:800 19px/1.1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.oot-opt span{color:var(--chalk-dim);font:500 15px/1.3 var(--body)}
.oot-opt.gold{border-color:rgba(230,184,78,.7);background:linear-gradient(160deg,rgba(230,184,78,.16),rgba(230,184,78,.05))}
.oot-opt.gold b{color:var(--gold)}
.oot-opt:disabled{opacity:.5;cursor:default}
.oot-plus{justify-self:center;margin-top:2px;font-size:15px}
.newtag{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 7px;border-radius:99px;background:var(--gold);color:var(--night);font:800 11px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase}
.prem-now{margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(230,184,78,.10);border:1px solid rgba(230,184,78,.3);color:var(--chalk);font:500 14px/1.35 var(--body)}
.prem-offer{margin-top:12px;padding:14px;border-radius:14px;border:1px solid rgba(230,184,78,.6);background:linear-gradient(160deg,rgba(230,184,78,.14),rgba(230,184,78,.04));display:grid;gap:8px;text-align:left}
.prem-offer b{font:800 18px/1.1 var(--display);text-transform:uppercase;color:var(--gold)}
.prem-offer span{color:var(--chalk);font:500 15px/1.35 var(--body)}
.prem-offer span b{font:inherit;text-transform:none;color:inherit;font-weight:700}

/* v76: small Sign in link top right of the guest Daily Legend, for players who already have an account */
.onb .g-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.onb .g-signin{flex:none;padding:9px 16px;border-radius:99px;border:1px solid rgba(230,184,78,.55);background:rgba(0,0,0,.25);color:var(--gold);font:800 15px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

/* ---------- LEGEND TRIAL (version 83): the black & gold luxury look ---------- */
.gold{background:linear-gradient(100deg,#B8892E,#F7E3A1 45%,#E6B84E 60%,#9C7424);-webkit-background-clip:text;background-clip:text;color:transparent}
.ey{font:800 13px/1 var(--display);letter-spacing:.42em;text-transform:uppercase}.ey.dim{color:rgba(243,238,220,.6)}
.rule{height:1px;background:linear-gradient(90deg,transparent,#E6B84E,transparent);margin:14px auto;width:70%}
.btnlux{display:block;width:100%;max-width:320px;margin:0 auto;padding:17px 0;border-radius:14px;border:1px solid #F7E3A1;cursor:pointer;text-align:center;
  font:900 19px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:#0b0906;
  background:linear-gradient(100deg,#B8892E,#F7E3A1 45%,#E6B84E 60%,#9C7424);box-shadow:0 0 28px rgba(230,184,78,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.btnlux:active{transform:scale(.98)}
.leggh{display:block;margin:10px auto 0;padding:10px 16px;background:none;border:0;cursor:pointer;font:600 15px/1 var(--body);color:rgba(243,238,220,.6)}
.lspark{position:absolute;width:4px;height:4px;border-radius:50%;background:#F7E3A1;box-shadow:0 0 8px #F7E3A1;pointer-events:none;animation:lspark 2.8s ease-in-out infinite}
@keyframes lspark{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:.9;transform:scale(1.2)}}
@media (prefers-reduced-motion: reduce){.lspark{animation:none;opacity:.5}}
/* the card page box */
.legbox{display:grid;gap:6px;margin:4px 0 12px;padding:16px;border-radius:16px;text-align:left;color:#F3EEDC;
  background:linear-gradient(160deg,#16120b,#060504);border:1px solid rgba(247,227,161,.6);box-shadow:0 0 26px rgba(230,184,78,.3)}
.legbox b{font:900 22px/1.05 var(--display);letter-spacing:.04em;text-transform:uppercase}
.legbox span{font-size:15px;color:rgba(243,238,220,.8)}.legbox .btnlux{margin-top:8px;max-width:none;font-size:17px;padding:15px 0}
.legbox.done{box-shadow:none;border-color:rgba(230,184,78,.3)}
/* home / Level Up banner */
.legbanner{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 4px;padding:16px;border-radius:16px;text-align:left;cursor:pointer;color:#F3EEDC;
  background:radial-gradient(120% 120% at 0% 0%,#2a2214,#0b0906 60%,#050403);border:1px solid rgba(247,227,161,.6);box-shadow:0 0 26px rgba(230,184,78,.3)}
.legbanner>div{flex:1;position:relative}.legbanner b{display:block;margin-top:6px;font:900 22px/1.05 var(--display);text-transform:uppercase}
.legbanner span{display:block;margin-top:4px;font-size:15px;color:rgba(243,238,220,.8)}.legbanner .legarrow{flex:none;font:900 26px/1 var(--display);color:#E6B84E;margin:0}
/* sheets and the round screen in black & gold */
.sheet.lux{background:radial-gradient(120% 60% at 50% 0%,#2a2214 0%,#0b0906 55%,#050403 100%);border-color:rgba(230,184,78,.45);color:#F3EEDC}
body[data-lux="1"]{background:radial-gradient(120% 60% at 50% 0%,#2a2214 0%,#0b0906 55%,#050403 100%) fixed #050403}
.legsheet,.legplay,.legend-end,.legfinal{position:relative;text-align:center;color:#F3EEDC}
.legsheet{padding:6px 0 4px}
.halo{position:absolute;left:50%;top:50%;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;background:radial-gradient(circle,rgba(247,227,161,.42),rgba(230,184,78,.12) 40%,transparent 68%);pointer-events:none}
.leg-cardwrap{position:relative;width:170px;margin:22px auto 0}.leg-cardwrap.big{width:210px}
.leg-card{position:relative}.ghostcard{position:absolute;inset:-12px;border-radius:22px;border:2px solid rgba(247,227,161,.55);box-shadow:0 0 40px rgba(230,184,78,.5)}
.legname{margin:28px 0 0;font:900 36px/1 var(--display);text-transform:uppercase}.legh{margin:22px 0 0;font:900 30px/1.05 var(--display);text-transform:uppercase}
.legtxt{margin:12px auto 20px;max-width:330px;font:500 16px/1.45 var(--body);color:rgba(243,238,220,.85)}.legtxt b{font-weight:800}
.legpick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 10px}
.legpick-card{background:none;border:0;padding:0;cursor:pointer;color:#F3EEDC;font:800 14px/1.2 var(--display);text-transform:uppercase}.legpick-card span{display:block;margin-top:6px}
/* playing */
.legplay{padding-top:10px}
.pips{display:flex;gap:10px;justify-content:center;margin-top:14px}
.pips i{width:15px;height:15px;transform:rotate(45deg);border:1.5px solid #E6B84E}
.pips i.on{background:linear-gradient(135deg,#F7E3A1,#B8892E);box-shadow:0 0 10px rgba(230,184,78,.8)}.pips i.no{border-color:var(--miss);background:var(--miss)}.pips i.cur{box-shadow:0 0 8px rgba(230,184,78,.6)}
.legclock{--p:1;width:84px;height:84px;margin:20px auto 0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(#E6B84E calc(var(--p) * 100%),rgba(230,184,78,.15) 0)}
.legclock b{width:72px;height:72px;border-radius:50%;background:#0b0906;display:flex;align-items:center;justify-content:center;font:900 32px/1 var(--display);color:#F7E3A1}
.legclock.low{background:conic-gradient(var(--miss) calc(var(--p) * 100%),rgba(230,184,78,.15) 0)}
.legnum{margin-top:20px}.legqq{margin:14px 6px 16px;font:800 24px/1.15 var(--display);text-transform:uppercase}.legnote{margin:-8px 0 12px}
.legopts .opt{background:rgba(230,184,78,.05);border-color:rgba(230,184,78,.45);color:#F3EEDC}
.legfoot{margin:18px 0 0;font:600 13px/1 var(--body);color:rgba(243,238,220,.45)}
.legfinal{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:legin .4s ease-out}
.legfinal h2{margin:16px 0 0;font:900 52px/1 var(--display);text-transform:uppercase}
@keyframes legin{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:none}}
/* result */
.legend-end{padding-top:20px}.legend-end .legbtns{margin-top:8px}
.legstamp{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(-12deg);padding:8px 20px;border:3px solid #F7E3A1;border-radius:10px;
  font:900 40px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:#F7E3A1;text-shadow:0 0 18px rgba(230,184,78,.9);background:rgba(5,4,3,.55);animation:legstamp .6s cubic-bezier(.2,1.6,.4,1) .3s both}
@keyframes legstamp{from{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.2)}to{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}}

/* ---------- HOME: "My collection" showcase (version 84): slow, classy, the player's own cards ---------- */
.tile-full{grid-column:1/-1}
.showcase{position:relative;overflow:hidden;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center;width:100%;margin-top:14px;padding:12px 14px 14px 14px;cursor:pointer;
  border-radius:var(--r);text-align:left;color:var(--chalk);border:1px solid rgba(230,184,78,.45);
  background:radial-gradient(120% 140% at 0% 50%,rgba(230,184,78,.16),rgba(230,184,78,0) 55%),var(--pitch)}
.sc-stage{position:relative;height:146px}
.sc-card{position:absolute;left:8px;top:2px;width:100px;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.sc-card.back1{transform:translate(14px,5px) rotate(7deg) scale(.9);opacity:.55;filter:saturate(.7) brightness(.8)}
.sc-card.back2{transform:translate(-8px,9px) rotate(-6deg) scale(.86);opacity:.35;filter:saturate(.6) brightness(.7)}
.sc-card.front{transform:rotate(-2deg);filter:drop-shadow(0 12px 20px rgba(0,0,0,.55))}
.sc-card.front.enter{animation:scin .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes scin{from{opacity:0;transform:translate(22px,4px) rotate(5deg) scale(.92)}to{opacity:1;transform:rotate(-2deg)}}
.sc-name.enter{animation:scfade .7s ease-out both}@keyframes scfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sc-glow{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;background:radial-gradient(circle,rgba(247,227,161,.32),transparent 65%);pointer-events:none}
.sc-txt .eyebrow{color:var(--gold)}
.sc-txt b{display:block;margin-top:6px;font:900 32px/1 var(--display);font-variant-numeric:tabular-nums}.sc-txt b small{font-size:17px;color:var(--chalk-dim);font-weight:800}
.sc-name{display:block;margin-top:9px;font:900 19px/1.05 var(--display);text-transform:uppercase}
.sc-lv{display:block;margin-top:3px;font:700 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sc-txt .meter{margin-top:10px}.sc-go{display:block;margin-top:9px;font:700 13px/1 var(--body);color:var(--chalk-dim)}
.sc-dots{position:absolute;left:16px;bottom:8px;display:flex;gap:5px}.sc-dots i{width:5px;height:5px;border-radius:50%;background:rgba(238,242,234,.25)}.sc-dots i.on{background:var(--gold)}
.sc-back{width:100px;aspect-ratio:5/7;border-radius:12px;display:flex;align-items:center;justify-content:center;font:900 54px/1 var(--display);color:var(--gold);
  background:repeating-linear-gradient(45deg,rgba(230,184,78,.10) 0 9px,rgba(0,0,0,0) 9px 18px),linear-gradient(160deg,#1E4535,#0C1D16);
  border:3px solid var(--gold);box-shadow:inset 0 0 0 6px rgba(8,19,15,.9),inset 0 0 0 7px rgba(230,184,78,.5)}
@media (prefers-reduced-motion: reduce){.sc-card,.sc-card.front.enter,.sc-name.enter{transition:none;animation:none}}
/* version 85: guest share grid spacing */
.onb-in.guest .result .grid-share{margin-top:20px}
/* version 86: short "about the game" text on Home (for new visitors and search engines) */
.about{margin:28px 0 6px;padding:18px 18px 8px;border-top:1px solid rgba(238,242,234,.1);color:var(--chalk-dim);font-size:14px;line-height:1.5}
.about h2{font:900 20px/1.1 var(--display);text-transform:uppercase;color:var(--chalk);margin:0 0 8px}
.about h3{font:800 15px/1.1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--chalk);margin:14px 0 6px}
.about ul{margin:0;padding-left:18px}.about li{margin:3px 0}.about b{color:var(--chalk)}
body:not([data-screen="home"]) .about{display:none}
.about a{color:var(--gold);font-weight:700}