/* Dink Signal · game styles. Same file as the Split Step tennis game with the Dink Signal palette; brand overrides are at the bottom. */
:root{--navy:#0B1E44;--deep:#06101F;--panel:#132B57;--panel2:#0E2550;--y:#C6F02B;--blue:#137A85;--mut:#A9B8D2;--txt:#D5DEEC;--red:#FF6B6B;--grn:#54D67C;--line:rgba(255,255,255,.13);--cond:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--navy);overflow:hidden;overscroll-behavior:none}
body{color:#fff;font:400 16px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--y)}a:hover{color:#D6FF4A}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
#game{position:fixed;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.cond{font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.mono{font:600 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.k{color:var(--y);margin:0}.y{color:var(--y)}.r{color:var(--red)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- match HUD ---------- */
.hud{position:absolute;inset:0;pointer-events:none}
.topb{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 10px 0}
.hb{pointer-events:auto;flex:none;width:44px;height:44px;border-radius:14px;background:rgba(11,30,68,.78);border:1.5px solid var(--line);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hb svg{width:20px;height:20px}
.sb{display:grid;gap:3px;min-width:176px;background:rgba(7,18,46,.86);border:1.5px solid var(--line);border-radius:14px;padding:6px 8px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s}
.zp .sb{border-color:var(--y);box-shadow:0 0 22px rgba(198,240,43,.35)}
.sb .rw{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:7px}
.sb .sv{width:8px;height:8px;border-radius:50%;background:var(--y);opacity:0}.sb .sv.on{opacity:1;box-shadow:0 0 10px var(--y)}
.sb .nm{font:800 16px/1 var(--cond);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb .rw+.rw .nm{color:var(--mut)}
.sb .gm{font:800 20px/1 var(--cond);min-width:18px;text-align:center;color:var(--mut);display:none}.g .sb .gm{display:block}
.sb .pt{font:800 22px/1 var(--cond);min-width:34px;text-align:center;background:var(--y);color:var(--navy);border-radius:6px;padding:3px 4px}
.sb .rw+.rw .pt{background:#1D3A6E;color:#fff}
.sb .br{grid-column:2/-1;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.sb .br i{display:block;height:100%;width:100%;background:var(--grn);transition:width .25s}.sb .br i.low{background:var(--red)}
.sb .mo{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(198,240,43,.16);overflow:hidden}.sb .mo i{display:block;height:100%;width:0;background:var(--y);transition:width .25s}
.warm .sb .pt,.warm .sb .br,.warm .sb .mo{visibility:hidden}
.sub{position:absolute;left:0;right:0;top:calc(118px + env(safe-area-inset-top));margin:0;text-align:center;color:var(--mut);text-shadow:0 1px 6px #000}
.sit{position:absolute;left:50%;top:calc(140px + env(safe-area-inset-top));transform:translateX(-50%) scale(.9);font:800 20px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;background:rgba(7,18,46,.86);border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s}
.sit.on{opacity:1;transform:translateX(-50%)}.sit.hot{background:var(--y);color:var(--navy);border-color:var(--y)}
.feed{position:absolute;left:10px;top:34%;margin:0;padding:0;list-style:none;display:grid;gap:5px}
.feed li{font:800 17px/1 var(--cond);letter-spacing:.05em;text-transform:uppercase;background:rgba(7,18,46,.8);border-left:3px solid var(--y);border-radius:0 8px 8px 0;padding:6px 10px 6px 8px;animation:fd .22s ease-out;transition:opacity .35s,transform .35s;white-space:nowrap}
.feed li b{color:var(--y);margin-right:4px}.feed li.out{opacity:0;transform:translateX(-12px)}
@keyframes fd{from{opacity:0;transform:translateX(-16px)}}
.meter{position:absolute;right:calc(12px + env(safe-area-inset-right));top:30%;height:38%;width:18px;border-radius:10px;background:rgba(5,13,32,.7);border:1.5px solid rgba(255,255,255,.22);overflow:hidden;opacity:0;transform:translateX(16px);transition:opacity .12s,transform .12s}
.meter.on{opacity:1;transform:none}
.meter .z{position:absolute;inset:0;background:linear-gradient(0deg,#4B5B74 0%,#4B5B74 11%,#2F9E5B 11%,#54D67C 68%,#C6F02B 68%,#C6F02B 75%,#FF5C5C 75%,#FF5C5C 100%);opacity:.33}
.meter.srv .z{background:linear-gradient(0deg,#2F9E5B 0%,#54D67C 56%,#C6F02B 56%,#C6F02B 73%,#FF5C5C 73%,#FF5C5C 100%)}
.meter .f{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,#54D67C,#C6F02B);box-shadow:0 0 12px rgba(198,240,43,.6)}
.meter .f.hot{background:#FF5C5C;box-shadow:0 0 14px rgba(255,92,92,.8)}
.mlab{position:absolute;right:calc(36px + env(safe-area-inset-right));top:30%;transform:translateY(-4px);text-align:right;opacity:0;transition:opacity .12s}.mlab.on{opacity:1}
.mlab b{display:block;font:800 22px/1 var(--cond);color:var(--y);text-shadow:0 2px 10px #000;text-transform:uppercase}
.chip{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(7,18,46,.84);border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;font:800 18px/1 var(--cond);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .15s}
.chip.on{opacity:1}.warm .chip{top:calc(140px + env(safe-area-inset-top));bottom:auto}.chip i{font-style:normal;color:var(--y)}
.fb{position:absolute;left:0;right:0;top:50%;text-align:center;font:800 44px/1 var(--cond);text-shadow:0 3px 18px rgba(0,0,0,.6);opacity:0}
.fb.go{animation:fb .75s ease-out}.fb.y{color:var(--y)}.fb.r{color:#FF8A8A}
@keyframes fb{0%{opacity:0;transform:translateY(10px) scale(.86)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.ban{position:absolute;left:0;right:0;top:21%;text-align:center;opacity:0}
.ban b{display:block;font:800 clamp(52px,15vw,96px)/.9 var(--cond);text-shadow:0 4px 30px rgba(0,0,0,.65)}
.ban small{display:inline-block;margin-top:10px;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--y);color:var(--navy);padding:7px 10px;border-radius:8px}
.ban small:empty{display:none}.ban.y b{color:var(--y)}.ban.r b{color:#FF7A7A}.ban.go{animation:ban 1.45s ease-out}
@keyframes ban{0%{opacity:0;transform:scale(1.25)}12%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.hint{position:absolute;left:16px;right:16px;bottom:calc(64px + env(safe-area-inset-bottom));margin:0;text-align:center;font:600 15px/1.35 Inter,sans-serif;color:#E6EDF7;text-shadow:0 2px 10px rgba(0,0,0,.95);opacity:0;transition:opacity .2s}
.hint.on{opacity:1}.hint b{color:var(--y);font-weight:700}
.lean{position:absolute;left:10px;right:10px;bottom:calc(118px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.lean button{pointer-events:auto;min-height:48px;padding:0 14px;border-radius:14px;background:rgba(7,18,46,.8);border:1.5px solid var(--line);font:800 17px/1 var(--cond);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px;cursor:pointer}
.lean i{font-style:normal;color:var(--y)}.lean button.on{background:var(--y);color:var(--navy);border-color:var(--y)}.lean button.on i{color:var(--navy)}
.lcam{position:absolute;right:10px;top:calc(182px + env(safe-area-inset-top));width:132px;background:rgba(7,18,46,.9);border:1.5px solid var(--line);border-radius:12px;padding:7px;display:grid;gap:5px;opacity:0;transform:translateX(20px)}
.lcam svg{width:100%;border-radius:6px;display:block}.lcam b{font:800 18px/1 var(--cond);letter-spacing:.05em}.lcam span{color:var(--mut);font-size:9.5px}
.lcam.go{animation:lc 2.2s ease-out}
@keyframes lc{0%{opacity:0;transform:translateX(20px)}10%,82%{opacity:1;transform:none}100%{opacity:0}}
.warmbar{position:absolute;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));pointer-events:auto}
.toast{position:absolute;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);background:var(--y);color:var(--navy);border-radius:12px;padding:10px 14px;font:700 14px/1.2 Inter,sans-serif;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:86%}

/* ---------- menus ---------- */
.scr{position:absolute;inset:0;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:calc(14px + env(safe-area-inset-top)) 16px calc(26px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(5,12,30,.9) 0%,rgba(11,30,68,.62) 34%,rgba(11,30,68,.93) 100%);touch-action:pan-y;-webkit-overflow-scrolling:touch}
.scr.solid{background:linear-gradient(180deg,#071433,#0B1E44 30%)}
.col{width:100%;max-width:460px;display:flex;flex-direction:column;gap:14px}
.tp{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px}
.bk{font:600 13px/1 Inter,sans-serif;color:var(--mut);text-decoration:none;padding:12px 0;background:none;border:0;cursor:pointer}.bk:hover{color:#fff}
.idc{display:flex;align-items:center;gap:8px;background:rgba(19,43,87,.9);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px 6px 6px;cursor:pointer}
.idc b{font:800 15px/1 var(--cond);letter-spacing:.05em;background:var(--y);color:var(--navy);border-radius:999px;padding:5px 9px}.idc span{font:600 11px/1 var(--mono);letter-spacing:.08em;color:var(--txt)}
.tbh{margin:0;font:800 clamp(64px,20.5vw,112px)/.84 var(--cond);letter-spacing:-.005em;color:var(--y);text-transform:uppercase}
.tbh span{display:block;font-size:.3em;letter-spacing:.12em;color:#fff;margin-bottom:6px}
.h2{margin:0;font:800 clamp(40px,12vw,56px)/.92 var(--cond);text-transform:uppercase}.h3{margin:0;font:800 26px/1 var(--cond);letter-spacing:.02em;text-transform:uppercase}
.lede{margin:0;font-size:16px;color:var(--txt);text-wrap:pretty}.lede b{color:#fff}
.note{margin:0;font-size:12.5px;line-height:1.45;color:var(--mut)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border-radius:14px;border:2px solid transparent;font:800 20px/1 var(--cond);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;text-align:center}
.btn-y{background:var(--y);color:var(--navy);box-shadow:0 6px 0 #97B812}.btn-y:hover{color:var(--navy);background:#D6FF4A}.btn-y:active{transform:translateY(3px);box-shadow:0 3px 0 #97B812}
.btn-o{background:rgba(19,43,87,.6);border-color:rgba(255,255,255,.3);color:#fff}.btn-o:hover{border-color:var(--y);color:#fff}
.btn.big{width:100%;font-size:25px;padding:18px 16px}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1}
.lnk{min-height:46px;border-radius:14px;background:rgba(19,43,87,.9);border:1.5px solid var(--line);font:800 16px/1.05 var(--cond);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;text-decoration:none;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 10px}
.lnk:hover{border-color:rgba(198,240,43,.6);color:#fff}
.lock{width:13px;height:13px;flex:none;color:var(--y)}
.tourc{position:relative;display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:center;text-align:left;border-radius:18px;background:linear-gradient(180deg,#16326A,#0E2550);border:1.5px solid rgba(198,240,43,.5);padding:10px;cursor:pointer;width:100%}
.tourc canvas,.ev canvas{width:100%;aspect-ratio:3/2;border-radius:10px;display:block;background:#081737}
.tourc b{display:block;font:800 30px/.95 var(--cond);letter-spacing:.02em;text-transform:uppercase;color:var(--y)}.tourc small{display:block;margin-top:5px;font-size:13px;line-height:1.35;color:var(--txt)}
.tourc em{position:absolute;right:10px;top:10px;font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--y);border-radius:6px;padding:5px 6px;display:flex;gap:4px;align-items:center}.tourc em .lock{color:var(--navy);width:10px;height:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{position:relative;min-height:66px;text-align:left;border-radius:14px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.tile:hover{border-color:rgba(198,240,43,.55)}.tile b{font:800 20px/1 var(--cond);letter-spacing:.04em;text-transform:uppercase}.tile small{font-size:12.5px;line-height:1.3;color:var(--mut)}
.tile .lock{position:absolute;right:10px;top:10px}
.pro{border-radius:18px;background:linear-gradient(180deg,#132B57,#0E2550);border:1.5px solid rgba(198,240,43,.45);padding:14px;display:flex;flex-direction:column;gap:10px}
.ptop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 10px}.ptop b{font:800 26px/1 var(--cond);letter-spacing:.03em;color:var(--y);text-transform:uppercase}.ptop span{font:600 12px/1 var(--mono);letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px;color:var(--txt)}.ticks li{position:relative;padding-left:24px}.ticks li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;border-left:2.5px solid var(--y);border-bottom:2.5px solid var(--y);transform:rotate(-45deg)}
.rank{border-radius:16px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);padding:12px 14px;display:grid;gap:8px}
.rank .big{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.rank .big b{font:800 48px/.9 var(--cond);color:var(--y)}.rank .big span{font:600 11px/1.3 var(--mono);letter-spacing:.1em;color:var(--mut);text-transform:uppercase;text-align:right}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}.bar i{display:block;height:100%;background:var(--y);border-radius:3px}
.evs{display:grid;gap:8px}
.ev{display:grid;grid-template-columns:92px 1fr auto;gap:11px;align-items:center;text-align:left;border-radius:16px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);padding:8px;cursor:pointer;width:100%}
.ev:hover{border-color:rgba(198,240,43,.55)}.ev b{display:block;font:800 21px/1 var(--cond);letter-spacing:.02em;text-transform:uppercase}
.ev .tg{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.tag{font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border-radius:5px;padding:4px 5px;background:#1D3A6E;color:var(--txt);white-space:nowrap}
.tag.mj{background:var(--y);color:var(--navy)}.tag.s-clay{background:#C8643C;color:#fff}.tag.s-grass{background:#3D7D37;color:#fff}.tag.s-hard{background:#137A85;color:#fff}.tag.s-indoor{background:#2B3D78;color:#fff}
.ev .rt{text-align:right;font:600 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);display:grid;gap:4px;justify-items:end}.ev .rt b{font:800 18px/1 var(--cond);color:var(--y)}
.pips{display:inline-flex;gap:2px}.pips i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2)}.pips i.on{background:var(--y)}
.hero{position:relative;border-radius:18px;overflow:hidden;border:1.5px solid var(--line)}.hero canvas{display:block;width:100%;aspect-ratio:16/9;background:#081737}
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(180deg,transparent,rgba(5,12,30,.92))}
.fxl{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:14px;color:var(--txt)}.fxl li{padding-left:14px;position:relative}.fxl li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--y)}
.draw{display:grid;gap:6px}
.dr{display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;border-radius:14px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);padding:6px 10px 6px 6px}
.dr.next{border-color:var(--y)}.dr.done{opacity:.62}.dr canvas{width:50px;height:58px;border-radius:9px;display:block;background:#1B3566}
.dr b{display:block;font:800 19px/1 var(--cond);letter-spacing:.03em;text-transform:uppercase}.dr small{display:block;font-size:12.5px;color:var(--mut);line-height:1.3;margin-top:2px}
.dr em{font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--y);text-align:right}
/* matchup */
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:4px}
.vs figure{margin:0;text-align:center;min-width:0}.vs canvas{width:100%;max-width:150px;aspect-ratio:3/4;display:block;margin:0 auto}
.vs figcaption b{display:block;font:800 21px/1 var(--cond);letter-spacing:.03em;text-transform:uppercase}.vs figcaption span{font:600 10px/1.3 var(--mono);letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.vs>i{font:800 34px/1 var(--cond);font-style:normal;color:var(--y);padding-bottom:44px}
.cmp{display:grid;gap:6px}
.cr{display:grid;grid-template-columns:26px 1fr 64px 1fr 26px;align-items:center;gap:6px;font:800 16px/1 var(--cond)}
.cr span{font:600 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:center}
.cr .b{height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;display:flex}.cr .b.l{justify-content:flex-end}
.cr .b i{display:block;height:100%;background:var(--y);border-radius:4px}.cr .b.rr i{background:#FF8A7A}.cr b:last-child{text-align:right;color:#FF8A7A}.cr b:first-child{color:var(--y)}
.card{border-radius:14px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);padding:11px 12px;display:grid;gap:5px}
.card h3{margin:0;font:800 19px/1 var(--cond);letter-spacing:.04em;text-transform:uppercase}.card p{margin:0;font-size:13.5px;line-height:1.4;color:var(--txt)}
.card .mono{color:var(--y)}
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:2px}.lanes div{background:#0B1E44;border-radius:8px;padding:6px 4px;text-align:center}.lanes b{display:block;font:800 20px/1 var(--cond);color:var(--y)}.lanes span{font:600 9px/1 var(--mono);letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
/* locker */
.stage{position:relative;border-radius:18px;background:radial-gradient(120% 90% at 50% 100%,#137A85 0%,#0F5F68 45%,#0E2550 100%);border:1.5px solid var(--line);display:grid;grid-template-columns:42% 1fr;gap:8px;padding:8px 12px 10px 4px;align-items:center;overflow:hidden}
.stage canvas{width:100%;aspect-ratio:3/4;display:block}
.sts{display:grid;gap:7px}
.st{display:grid;grid-template-columns:68px 1fr 50px;align-items:center;gap:6px}
.st span{font:600 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#D9E4F2}
.st .b{position:relative;height:9px;border-radius:5px;background:rgba(5,12,30,.5);overflow:hidden}
.st .b i{position:absolute;left:0;top:0;bottom:0;background:var(--y);border-radius:5px;transition:width .25s}.st .b u{position:absolute;top:0;bottom:0;transition:left .25s,width .25s}.st .b u.up{background:var(--grn)}.st .b u.dn{background:var(--red)}
.st b{font:800 17px/1 var(--cond);text-align:right;white-space:nowrap}.st b em{font-style:normal;font-size:13px;margin-left:3px}.st b em.up{color:var(--grn)}.st b em.dn{color:var(--red)}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none;touch-action:pan-x}.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;min-height:40px;padding:0 13px;border-radius:999px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);font:800 16px/1 var(--cond);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--y);color:var(--navy);border-color:var(--y)}
.items{display:grid;gap:7px}
.it{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;text-align:left;border-radius:14px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);padding:10px 12px;cursor:pointer;width:100%}
.it.sel{border-color:var(--y);background:#16326A}.it.eq em{color:var(--grn)}
.it b{font:800 20px/1 var(--cond);letter-spacing:.03em;text-transform:uppercase}.it b small{font:600 9.5px/1 var(--mono);letter-spacing:.1em;color:var(--mut);margin-left:6px;vertical-align:2px}
.it p{grid-column:1/-1;margin:0;font-size:13px;line-height:1.35;color:var(--mut)}
.it em{font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--y);display:flex;align-items:center;gap:4px}
.pk{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}.pk i{font:800 14px/1 var(--cond);font-style:normal;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:4px 6px;background:rgba(84,214,124,.16);color:var(--grn)}.pk i.dn{background:rgba(255,107,107,.15);color:var(--red)}.pk i.nu{background:#1D3A6E;color:var(--mut)}
.dock{position:sticky;bottom:-26px;margin:0 -16px -26px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(11,30,68,0),#0B1E44 34%);display:grid;gap:6px}
/* rivals */
.rv{display:grid;grid-template-columns:88px 1fr;gap:10px;border-radius:16px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);padding:8px 12px 10px 8px;align-items:start}
.rv canvas{width:88px;height:112px;border-radius:12px;background:#1B3566;display:block}
.rv b{display:block;font:800 24px/1 var(--cond);letter-spacing:.02em;text-transform:uppercase}.rv p{margin:3px 0 0;font-size:13px;line-height:1.35;color:var(--txt)}
.rv .ab{margin-top:6px;font-size:12.5px;color:var(--mut)}.rv .ab b{display:inline;font:800 15px/1 var(--cond);letter-spacing:.05em;color:var(--y)}
.mini{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:8px}.mini div{text-align:center}.mini b{display:block;font:800 16px/1 var(--cond)}.mini span{font:600 8px/1 var(--mono);letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
/* result, records */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.stats div{background:rgba(16,38,82,.94);border-radius:14px;padding:10px 6px;text-align:center}
.stats dt{font:600 9.5px/1.1 var(--mono);letter-spacing:.08em;color:var(--mut);text-transform:uppercase}.stats dd{margin:6px 0 0;font:800 26px/1 var(--cond)}
.xp{border-radius:16px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);padding:12px;display:grid;gap:8px}
.xp .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.xp .hd b{font:800 30px/1 var(--cond);color:var(--y)}.xp .hd span{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.fts{display:flex;flex-wrap:wrap;gap:5px}.fts i{font:800 14px/1 var(--cond);font-style:normal;letter-spacing:.04em;text-transform:uppercase;background:#1D3A6E;border-radius:6px;padding:5px 7px}.fts i b{color:var(--y);margin-left:4px}
.trs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tr{border-radius:14px;background:rgba(16,38,82,.94);border:1.5px solid var(--line);padding:10px 6px;text-align:center;display:grid;gap:5px;justify-items:center}
.tr svg{width:34px;height:34px;color:rgba(255,255,255,.18)}.tr.won{border-color:var(--y)}.tr.won svg{color:var(--y)}.tr b{font:800 14px/1.05 var(--cond);letter-spacing:.04em;text-transform:uppercase}.tr span{font:600 9px/1 var(--mono);letter-spacing:.08em;color:var(--mut);text-transform:uppercase}
.how{display:grid;gap:8px}.how div{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;background:rgba(16,38,82,.94);border-radius:16px;padding:10px 12px}
.how .g{width:56px;height:56px;border-radius:14px;background:#0B1E44;position:relative;overflow:hidden}.how .g i{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--y);box-shadow:0 0 0 6px rgba(198,240,43,.18)}
.how .g.up i{animation:gup 1.4s infinite}.how .g.dn i{animation:gdn 1.4s infinite}.how .g.tap i{animation:gtap 1.4s infinite}.how .g.side i{animation:gside 1.8s infinite}.how .g.two i{animation:gtwo 1.8s infinite}
@keyframes gup{0%,20%{transform:translateY(14px)}60%,100%{transform:translateY(-14px);opacity:0}}@keyframes gdn{0%,20%{transform:translateY(-14px)}60%,100%{transform:translateY(14px);opacity:0}}@keyframes gtap{0%,40%,100%{transform:scale(1)}50%{transform:scale(.6)}}@keyframes gside{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}@keyframes gtwo{0%,35%{transform:scale(1.5)}45%,60%{transform:scale(.6);opacity:.3}70%,80%{transform:scale(1)}90%{transform:scale(.6)}}
.how b{display:block;font:800 20px/1 var(--cond);letter-spacing:.03em;text-transform:uppercase}.how p{margin:3px 0 0;font-size:13.5px;line-height:1.4;color:var(--txt)}
.tg{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 14px;border-radius:14px;background:rgba(16,38,82,.94);font:600 15px/1.2 Inter,sans-serif;cursor:pointer}
.tg input{width:22px;height:22px;accent-color:var(--y)}.tg small{display:block;font-weight:400;color:var(--mut);font-size:12.5px;margin-top:2px}
.seg{display:flex;gap:6px;background:rgba(16,38,82,.94);padding:5px;border-radius:14px}.seg button{flex:1;min-height:42px;border-radius:10px;border:0;background:none;color:var(--mut);font:800 16px/1 var(--cond);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}.seg button.on{background:var(--y);color:var(--navy)}
.sel{display:grid;gap:6px}.sel label{font:600 10px/1 var(--mono);letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.sel select{width:100%;min-height:48px;border-radius:12px;background:#0E2550;border:1.5px solid var(--line);color:#fff;font:800 19px/1 var(--cond);letter-spacing:.03em;text-transform:uppercase;padding:0 12px}
/* paywall sheet */
.pw{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,8,20,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:pan-y}
.pw .sh{position:relative;width:100%;max-width:480px;max-height:94%;overflow:auto;border-radius:24px 24px 0 0;background:linear-gradient(180deg,#16326A,#0B1E44 46%);border:1.5px solid rgba(198,240,43,.5);border-bottom:0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));display:grid;gap:12px;animation:up .28s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.pw .x{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:0;font-size:24px;line-height:1;cursor:pointer}
.pw .pr{display:flex;align-items:baseline;gap:10px}.pw .pr b{font:800 60px/.9 var(--cond);color:var(--y)}.pw .pr span{font:600 11px/1.3 var(--mono);letter-spacing:.1em;color:var(--mut);text-transform:uppercase}
.pw .strip{display:flex;gap:6px;overflow:hidden;border-radius:12px}.pw .strip canvas{flex:1;min-width:0;aspect-ratio:3/2;border-radius:8px;background:#081737}
/* waitlist dialog */
.wl{border:0;padding:0;border-radius:20px;background:var(--panel);color:#fff;width:min(420px,92vw)}.wl::backdrop{background:rgba(3,8,20,.75)}
.wl form{position:relative;padding:22px 18px 18px;display:grid;gap:10px}.wl p{margin:0;color:var(--txt);font-size:15px}
.wl-x{position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:0;font-size:24px;line-height:1;cursor:pointer}
.mail{display:flex;gap:8px;flex-wrap:wrap}.mail input{flex:1;min-width:180px;min-height:48px;border-radius:12px;border:1.5px solid var(--line);background:#0B1E44;color:#fff;padding:0 12px;font:400 16px Inter,sans-serif}
.micro{font-size:12px!important;color:var(--mut)!important}.f-ok{color:var(--grn)!important;font-weight:600}.f-err{color:var(--red)!important}
form.sent .mail{display:none}
/* embed (homepage preview) */
.emb{display:none}.embed .scr,.embed .hud{display:none!important}
.embed .emb{display:flex;position:absolute;inset:0;align-items:flex-end;justify-content:center;padding-bottom:16px;text-decoration:none}
.emb span{font:800 18px/1 var(--cond);letter-spacing:.06em;background:var(--y);color:var(--navy);padding:10px 16px;border-radius:12px;text-transform:uppercase}
.emb i{position:absolute;left:10px;top:10px;font:600 10px/1 var(--mono);letter-spacing:.12em;font-style:normal;color:#fff;background:rgba(255,92,92,.9);padding:5px 7px;border-radius:6px;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.fb.go,.ban.go,.lcam.go{animation-duration:.01s}.feed li{animation:none}}
@media (min-width:900px) and (min-height:640px){.col{max-width:500px;margin-block:auto}}
@media (max-height:620px){.tbh{font-size:64px}}

/* ---------- Dink Signal overrides ---------- */
.tbh{font:italic 900 clamp(31px,9.7vw,66px)/.9 "Barlow",var(--cond);letter-spacing:-.012em}.tbh span{font:800 .34em/1 var(--cond);font-style:normal;letter-spacing:.14em;margin-bottom:8px}
.ban b{font:italic 900 clamp(34px,10.2vw,72px)/.92 "Barlow",var(--cond)}
.meter .z{background:linear-gradient(0deg,#18909B 0%,#18909B 35%,#2F9E5B 35%,#54D67C 75%,#F2B84B 75%,#F2B84B 83%,#FF5C5C 83%,#FF5C5C 100%)}
.tag.s-wood{background:#B5803F;color:#fff}.tag.s-tile{background:#E0672F;color:#fff}.tag.s-park{background:#6E6A64;color:#fff}.tag.s-hard{background:#137A85;color:#fff}
.seg.opp button{min-height:46px;font-size:18px}