/* Layout: one phone-width app column on a dark felt; stacked screens, bottom nav */
:root{
  --ink:#101512; --panel:#1A2420; --slate:#283B33; --line:#2F443B; --chalk:#F4F3EB; --muted:#9AA69F;
  --lime:#C5F45A; --lime-ink:#101512; --lose:#E5484D; --win:#C5F45A; --push:#9AA69F;
  --qb:#F765A3; --rb:#2EE6D6; --wr:#58A6FF; --te:#FFAE42; --k:#B9B9B9; --td:#FFD23F;
  --card:#F4F3EB; --card-ink:#101512;
  --display:'Barlow Condensed', 'Arial Narrow', sans-serif; --body:'Manrope', system-ui, sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ color-scheme:dark } }
:root[data-theme="light"]{ color-scheme:dark }
html,body{height:100%}
/* the page is never shorter than the screen: when a screen swaps in short content (Loading…) iOS would otherwise
   resize the page and the fixed bottom bar jumps up, then back down */
body{min-height:100vh;min-height:100lvh}
.app{min-height:100vh;min-height:100lvh}
.nav{transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden}
/* Sizing: every length is in rem, so the root size scales the whole app to the screen. A 390-wide phone is
   16px; smaller phones shrink a little, Pro Max sizes grow a little; tablets get a larger, wider column. */
html{font-size:clamp(13.5px,min(4.1026vw,2.05vh),17.5px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (min-width:700px) and (min-height:700px){ html{font-size:clamp(17px,2.35vw,22px)} :root{--col:34rem} }
body{margin:0;background:var(--ink);color:var(--chalk);font-family:var(--body);font-size:0.875rem;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.app{max-width:var(--col,26.875rem);overflow-x:clip;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:var(--ink);position:relative;padding-inline:0}
.screen{display:flex;flex-direction:column;flex:1;padding:1rem 1rem calc(7rem + env(safe-area-inset-bottom,0px)) 1rem;gap:0.875rem;min-width:0}
.startbar{display:flex;flex-direction:column;gap:0.375rem;padding-top:0.25rem}   /* was sticky over the page; it read as a box scrolling inside the screen */
.screen[hidden]{display:none!important}
/* a solid strip behind the iPhone clock, so scrolled content never shows through it */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--ink);z-index:9;pointer-events:none}
/* clear the iPhone status bar / notch (the app draws under it when installed) */
.screen{padding-top:calc(1rem + env(safe-area-inset-top,0px));padding-left:calc(1rem + env(safe-area-inset-left,0px));padding-right:calc(1rem + env(safe-area-inset-right,0px))}
h1,h2,h3{margin:0;font-family:var(--display);text-wrap:balance;letter-spacing:.5px}
.eyebrow{font-size:0.6875rem;font-weight:700;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:0.625rem;padding-top:0.25rem}
.brand{min-width:0;flex-shrink:1;display:flex;align-items:center;gap:0.625rem;font-family:var(--display);font-weight:800;font-size:1.625rem;letter-spacing:1px}
.brand b{color:var(--lime);font-weight:800}
.chips{flex-shrink:0;display:flex;align-items:center;gap:0.375rem;background:var(--panel);border-radius:1.375rem;padding:0 0.75rem;height:2.5rem;font-family:var(--display);font-weight:700;font-size:1.125rem;color:var(--lime);font-variant-numeric:tabular-nums}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:0.875rem;padding:0.875rem}
.slate{background:var(--slate);border:1px solid #3A5247;border-radius:1rem;padding:0.875rem 1rem}
.btn{height:3.125rem;border-radius:0.75rem;border:0;background:var(--lime);color:var(--lime-ink);font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:1px;display:flex;align-items:center;justify-content:center;text-decoration:none;width:100%}
.btn.ghost{background:var(--panel);color:var(--chalk);border:1px solid var(--line)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.sm{height:2.5rem;font-size:1rem}
.row{display:flex;gap:0.625rem;align-items:center}
.stakechips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.375rem;margin-top:-2px}
.stakechips button{height:2rem;border-radius:0.5625rem;border:1px solid var(--line);background:var(--ink);color:var(--chalk);font-family:var(--display);font-weight:800;font-size:0.9375rem;letter-spacing:.5px}
.stakechips button:disabled{opacity:.35}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5rem}
.big{font-family:var(--display);font-weight:800;font-size:1.875rem;line-height:1;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.lime{color:var(--lime)}.lose{color:var(--lose)}
input{width:100%;height:3rem;border-radius:0.625rem;border:1px solid var(--line);background:var(--panel);color:var(--chalk);padding:0 0.875rem;font-family:inherit;font-size:0.9375rem}
label{display:flex;flex-direction:column;gap:0.375rem;font-size:0.75rem;font-weight:700;color:var(--muted)}
input,select{box-sizing:border-box;min-width:0;max-width:100%}
.agree{display:flex;gap:0.625rem;align-items:flex-start;font-size:0.8125rem;font-weight:600;color:var(--chalk)}
.agree input[type=checkbox]{width:1.375rem;height:1.375rem;flex-shrink:0;margin:0;accent-color:var(--lime)}
.agree label{display:block;font-size:0.8125rem;font-weight:600;color:var(--chalk);line-height:1.35}
.lnk{background:none;border:0;padding:0;color:var(--lime);font-weight:800;font-size:inherit;cursor:pointer}
/* 16px or more, or iPhones zoom the page in when a box is tapped (and it stays zoomed) */
input,select,textarea{font-size:max(16px,1rem)!important}
/* quick taps on +/- never zoom the page (iOS double-tap zoom) */
html,body,button,a,input,select,label,.sidebet,.chipbtn{touch-action:manipulation}
/* a typed amount between − and + */
input.amt{font-size:max(16px,1.375rem)!important;width:5.5rem;height:2.5rem;border:0;background:none;text-align:center;font-family:var(--display);font-weight:800;color:var(--lime);padding:0;-moz-appearance:textfield}
input.amt::-webkit-outer-spin-button,input.amt::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.amt:focus{outline:2px solid var(--lime);outline-offset:-2px;border-radius:0.5rem}
select{width:100%;height:3rem;border-radius:0.625rem;border:1px solid var(--line);background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C5F45A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.75rem center;color:var(--chalk);padding:0 1.875rem 0 0.75rem;font-family:inherit;font-size:0.9375rem;-webkit-appearance:none;appearance:none}
.lbl{font-size:0.75rem;font-weight:700;color:var(--muted);margin-bottom:-0.375rem}
.dob{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:0.5rem}
/* gauge */
.gauge{position:relative;height:4.75rem}
.gauge .track{position:absolute;left:0;right:0;top:1.625rem;height:0.625rem;border-radius:0.3125rem;background:var(--ink)}
.gauge .win{position:absolute;top:1.625rem;height:0.625rem;border-radius:0.3125rem;background:var(--lime);opacity:.4}
/* the end zone: 58 to 62, where a win is a Touchdown */
.gauge .tdz{position:absolute;top:1.625rem;height:0.625rem;background:repeating-linear-gradient(135deg,var(--td) 0 3px,rgba(255,210,63,.3) 3px 6px);box-shadow:0 0 0 1px rgba(255,210,63,.55)}
.needle.td .v:not([data-who]){color:var(--td)}
.needle.td svg{fill:var(--td)}
.needle.td{filter:drop-shadow(0 0 5px rgba(255,210,63,.7))}
.tdkey{color:var(--td);font-weight:800;white-space:nowrap}
.tdkey i{display:inline-block;width:0.75rem;height:0.5rem;margin-right:0.25rem;vertical-align:0.05rem;background:repeating-linear-gradient(135deg,var(--td) 0 2px,rgba(255,210,63,.3) 2px 4px)}
.gauge .tgt{position:absolute;top:1.25rem;width:2px;height:1.375rem;background:var(--lime);margin-left:-1px}
.gauge .lbl{position:absolute;top:2.75rem;font-size:0.6875rem;color:var(--muted);font-weight:600}
.qmspin{width:2.75rem;height:2.75rem;border-radius:50%;border:0.25rem solid var(--slate);border-top-color:var(--lime);animation:qmsp 0.9s linear infinite}@keyframes qmsp{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.qmspin{animation:none}}
.shufwrap{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.125rem;background:rgba(16,21,18,.88)}
.shufdeck{position:relative;width:5.25rem;height:7.25rem}
.shufdeck .cb{position:absolute;inset:0;border-radius:0.625rem;border:2px solid var(--lime);background:repeating-linear-gradient(45deg,#283B33 0 0.375rem,#1A2420 0.375rem 0.75rem);box-shadow:0 0.25rem 0.625rem rgba(0,0,0,.4)}
.shufdeck .cb::after{content:"";position:absolute;inset:30% 25%;border-radius:50%;border:2px solid var(--lime);opacity:.6}
.shufdeck .cb.l{animation:shufL 1.1s ease-in-out}.shufdeck .cb.r{animation:shufR 1.1s ease-in-out}
@keyframes shufL{0%{transform:translate(0,0)}25%{transform:translate(-3.875rem,0.375rem) rotate(-14deg)}50%{transform:translate(0,0)}75%{transform:translate(-3.125rem,-0.25rem) rotate(-10deg)}100%{transform:translate(0,0)}}
@keyframes shufR{0%{transform:translate(0,0)}25%{transform:translate(3.875rem,0.375rem) rotate(14deg)}50%{transform:translate(0,0)}75%{transform:translate(3.125rem,-0.25rem) rotate(10deg)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion: reduce){.shufdeck .cb.l,.shufdeck .cb.r{animation:none}}
.mascot{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card.dealin,.card.dealin::after,.card.turnover,.card.turnover::after,.card.dealslide{animation-delay:var(--dd,0s)!important}
.hand.mini{zoom:.62;gap:0.5rem;overflow-x:auto;margin-top:0.25rem}
.cltag{position:absolute;top:0.25rem;right:0.25rem;z-index:3;background:rgba(16,21,18,.85);color:var(--lime);font-family:var(--display);font-weight:800;font-size:0.625rem;letter-spacing:.04em;padding:2px 0.375rem;border-radius:0.375rem}
.flagwrap{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;pointer-events:none;background:radial-gradient(circle,rgba(16,21,18,.88),rgba(16,21,18,.55) 75%);animation:flagFade 1.5s ease both}
.flagtoss{animation:flagToss .8s cubic-bezier(.25,.6,.3,1) both;filter:drop-shadow(0 0.5rem 0.625rem rgba(0,0,0,.5))}
.flagtxt{text-align:center;animation:flagTxt 1.5s ease both}
.flagt{font-family:var(--display);font-weight:800;font-size:2.5rem;letter-spacing:.04em;color:#FFD100;text-shadow:0 3px 0 #101512,0 0 1.125rem rgba(0,0,0,.6);line-height:1}
.flags{font-weight:800;font-size:0.875rem;color:var(--chalk);text-shadow:0 2px 0.375rem #101512;margin-top:0.25rem}
.tdball{font-size:4rem;animation:tdSpin .9s cubic-bezier(.25,.6,.3,1) both}
@keyframes flagToss{0%{transform:translate(10.625rem,-16.25rem) rotate(-320deg) scale(.5);opacity:0}15%{opacity:1}72%{transform:translate(-0.375rem,0.5rem) rotate(14deg) scale(1.05)}86%{transform:translate(2px,-3px) rotate(-6deg) scale(1)}100%{transform:none}}
@keyframes flagTxt{0%,35%{opacity:0;transform:translateY(0.625rem)}50%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes flagFade{0%{opacity:0}10%,85%{opacity:1}100%{opacity:0}}
@keyframes tdSpin{0%{transform:translateY(7.5rem) rotate(-180deg) scale(.4);opacity:0}70%{transform:translateY(-0.625rem) rotate(20deg) scale(1.1);opacity:1}100%{transform:none}}
@media (prefers-reduced-motion: reduce){.flagtoss,.flagtxt,.flagwrap,.tdball{animation:none}}
.sidebet{border:1px solid var(--line);border-radius:0.75rem;padding:0.5rem 0.625rem;background:var(--ink);font-size:0.75rem}
.sidebet.on{border-color:var(--lime);background:var(--slate)}
.chipbtn{flex:1;height:1.875rem;border-radius:0.5rem;border:1px solid var(--line);background:var(--panel);color:var(--chalk);font-weight:800;font-size:0.75rem;cursor:pointer}
.chipbtn.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.midslot{flex:1;min-width:0}
.midslot .slate{background:none;border:0;padding:0;box-shadow:none;gap:2px!important}
.midslot .eyebrow{font-size:0.5625rem;justify-content:center!important}
.midslot .eyebrow>span:first-child{display:none}
.midslot .gauge{height:4.125rem;margin:0 1rem}
.midslot .gauge .lbl{display:none}
.midslot .gauge .lbl:nth-of-type(2){display:block;top:3.25rem!important}
.midslot .slate>div:last-child{display:none!important}
.midslot .eyebrow span:last-child{white-space:nowrap}
.midslot .gauge .lbl{font-size:0.625rem}
.midslot .slate>div:last-child{font-size:0.625rem!important;gap:0.375rem}
.midslot .slate>div:last-child span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%}
.navbadge{display:none;min-width:1rem;height:1rem;border-radius:0.5rem;background:var(--lime);color:var(--ink);font-size:0.625rem;font-weight:900;align-items:center;justify-content:center;padding:0 0.25rem;margin-left:0.25rem;vertical-align:middle}
#actionGrid{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
#actionGrid .btn{padding:0 2px;font-size:0.875rem;letter-spacing:0;line-height:1.05}
#tblBar:not([hidden]){display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.875rem}
.cbox{position:fixed;inset:0;z-index:90;background:rgba(16,21,18,.8);display:flex;align-items:center;justify-content:center;padding:1rem}
.cbox-in{background:var(--panel);border:1px solid var(--line);border-radius:1.125rem;padding:1.125rem;max-width:22.5rem;width:100%}
.splash{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;pointer-events:none;transition:opacity .55s ease}
.splash.out{opacity:0}
.sp-cards{position:relative;width:7.5rem;height:6.875rem}
.sp-c{position:absolute;left:1.875rem;top:0.375rem;width:3.75rem;height:5.375rem;border-radius:0.5625rem;border:3px solid var(--lime);background:repeating-linear-gradient(45deg,#283B33 0 0.3125rem,#1A2420 0.3125rem 0.625rem)}
.sp-l{animation:spL .9s cubic-bezier(.2,.7,.3,1) both}.sp-r{animation:spR .9s cubic-bezier(.2,.7,.3,1) .08s both}
.sp-ball{position:absolute;left:2.375rem;top:1.5rem;font-size:2.625rem;animation:spB .9s cubic-bezier(.2,.7,.3,1) .45s both}
.sp-logo{display:none}
.sp-word{font-family:var(--display);font-weight:800;font-size:3rem;letter-spacing:.02em;animation:spW .7s ease .7s both}
.sp-tag{font-weight:700;letter-spacing:2px;font-size:0.75rem;color:var(--muted);animation:spW .7s ease 1s both}
@keyframes spL{0%{transform:translate(0,2.5rem) rotate(0) scale(.6);opacity:0}100%{transform:translate(-1.125rem,0) rotate(-14deg);opacity:1}}
@keyframes spR{0%{transform:translate(0,2.5rem) rotate(0) scale(.6);opacity:0}100%{transform:translate(1.125rem,0) rotate(14deg);opacity:1}}
@keyframes spB{0%{transform:translateY(-5rem) rotate(-200deg) scale(.4);opacity:0}70%{transform:translateY(0.375rem) rotate(10deg) scale(1.1);opacity:1}100%{transform:none;opacity:1}}
@keyframes spW{0%{transform:translateY(0.75rem);opacity:0}100%{transform:none;opacity:1}}
.sudot{width:0.5rem;height:0.5rem;border-radius:0.25rem;background:var(--line)}.sudot.on{background:var(--lime)}
.felt{position:relative;border-radius:1.625rem;padding:0.75rem 0.75rem 0.75rem;background:radial-gradient(ellipse at 50% 45%,#2a5244 0%,#1b3a2f 55%,#122a22 100%);border:2px solid #34574a;box-shadow:inset 0 0 2.5rem rgba(0,0,0,.45),0 0.375rem 1.125rem rgba(0,0,0,.35);display:flex;flex-direction:column;gap:0.375rem;overflow:hidden}
.felt .hand{gap:0.375rem}
.seathd{display:flex;align-items:center;gap:0.5rem;padding-right:3.25rem}
.ava{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--ink);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;line-height:1}
.ava.me{border-color:var(--lime)}
.rolechip{font-size:0.625rem;font-weight:900;letter-spacing:.08em;padding:0.25rem 0.5rem;border-radius:62.4375rem;background:var(--ink);color:var(--chalk);border:1px solid var(--line)}
.rolechip.dl{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.felt-mid{display:flex;align-items:center;gap:0.625rem;padding:0.5rem 0.25rem;border-top:1px dashed rgba(197,244,90,.18);border-bottom:1px dashed rgba(197,244,90,.18)}
.mdeck{position:relative;width:2.5rem;height:3.375rem;flex-shrink:0}
.mdeck .cbk,.shufdeck.mini .cb{position:absolute;width:2.5rem;height:3.375rem;border-radius:0.375rem;border:1.5px solid var(--lime);background:repeating-linear-gradient(45deg,#283B33 0 0.25rem,#1A2420 0.25rem 0.5rem)}
.mdeck .cbk:nth-child(1){top:0;left:0}.mdeck .cbk:nth-child(2){top:-2px;left:1px}.mdeck .cbk:nth-child(3){top:-0.25rem;left:2px}
.shufdeck.mini{width:2.5rem;height:3.375rem;flex-shrink:0}.shufdeck.mini .cb{inset:auto}
.shufdeck.mini .cb::after{display:none}
.potchip{flex-shrink:0;width:3.375rem;height:3.375rem;border-radius:50%;background:var(--ink);border:2px dashed var(--lime);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:0.9375rem;line-height:1}
.potchip span{font-size:0.5rem;letter-spacing:.1em;color:var(--muted);font-family:var(--body)}
.dbtn{position:absolute;right:0.875rem;width:2.125rem;height:2.125rem;border-radius:50%;background:var(--chalk);color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.125rem;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0.5rem rgba(0,0,0,.5);border:3px solid var(--lime);transition:top .9s cubic-bezier(.6,.05,.3,1);z-index:6}
.seat-top .card.dealin{--fx:4.375rem;--fy:9.375rem}.seat-bot .card.dealin,.seat-bot .card.dealslide{--fx:4.375rem;--fy:-9.375rem}.seat-top .card.dealslide{--fx:4.375rem;--fy:9.375rem}
.card.dealin{animation:ddIn .62s cubic-bezier(.2,.7,.3,1) both}
.card.dealin::after,.card.turnover::after{content:"";position:absolute;inset:0;border-radius:0.625rem;background:repeating-linear-gradient(45deg,#283B33 0 0.375rem,#1A2420 0.375rem 0.75rem);box-shadow:inset 0 0 0 2px var(--lime);pointer-events:none;z-index:5}
.card.dealin::after{animation:ddBack .62s both}.card.turnover{animation:ddTurn .5s ease-in-out both}.card.turnover::after{animation:ddBack2 .5s both}
.card.dealslide{animation:ddSlide .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes ddIn{0%{transform:translate(var(--fx),var(--fy)) rotate(14deg) scale(.6);opacity:.3}55%{transform:translate(0,0) rotate(0) scale(1);opacity:1}77%{transform:scaleX(.04)}100%{transform:scaleX(1)}}
@keyframes ddBack{0%,76%{opacity:1}77%,100%{opacity:0}}
@keyframes ddSlide{0%{transform:translate(var(--fx),var(--fy)) rotate(14deg) scale(.6);opacity:.3}100%{transform:none;opacity:1}}
@keyframes ddTurn{0%{transform:scaleX(1)}50%{transform:scaleX(.04)}100%{transform:scaleX(1)}}
@keyframes ddBack2{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.card.dealin,.card.turnover,.card.dealslide,.card.dealin::after,.card.turnover::after{animation:none}.card.dealin::after,.card.turnover::after{display:none}.dbtn{transition:none}}
.needle{position:absolute;top:0;margin-left:-0.875rem;width:1.75rem;display:flex;flex-direction:column;align-items:center;transition:left .4s}
.needle.below{top:2.375rem;flex-direction:column-reverse}
.needle.below svg{transform:rotate(180deg)}
.needle .v{font-family:var(--display);font-weight:800;font-size:0.9375rem;line-height:1}
/* labeled pills: "YOU 40.6" above the bar (with your avatar), "REF 27.5+" below it */
.needle .v[data-who]{transition:transform .4s;display:flex;align-items:center;gap:0.25rem;white-space:nowrap;background:var(--chalk);color:var(--ink,#101512)!important;border-radius:999px;padding:0.125rem 0.5rem 0.125rem 0.125rem;font-size:0.8125rem;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.needle .v[data-who]::before{content:"";width:1.125rem;height:1.125rem;border-radius:50%;flex-shrink:0;background:var(--ava,var(--slate)) center/cover;box-shadow:inset 0 0 0 1.5px var(--ink,#101512)}
.needle .v[data-who]::after{content:attr(data-who);order:-1;font-size:0.625rem;letter-spacing:.06em;margin-right:0.125rem}
.needle .v[data-who]::before{order:-2}
.needle.below .v[data-who]{background:rgba(16,21,18,.88);color:var(--lose)!important;box-shadow:inset 0 0 0 1.5px var(--lose);padding:0.125rem 0.5rem}
.needle.below .v[data-who]::before{width:0.375rem;height:0.375rem;background:var(--lose);box-shadow:none}
.needle.td .v[data-who]{background:var(--td)}
/* in season, while the games are on: the bar fills with points scored so far; the YOU pill sits at your pace */
.gauge .gnow{position:absolute;left:0;top:2rem;height:0.25rem;border-radius:0.125rem;background:var(--chalk);opacity:.9;transition:width .4s;pointer-events:none}
.gauge .gnowl{position:absolute;top:2.375rem;transform:translateX(-50%);font-size:0.5625rem;font-weight:900;letter-spacing:.06em;color:var(--chalk);white-space:nowrap;pointer-events:none}
.needle svg{display:block}
/* cards */
.hand{display:flex;gap:0.5rem;overflow-x:auto;overflow-y:hidden;padding-bottom:0.375rem;min-width:0}
.card{flex-shrink:0;width:5rem;height:6.75rem;border-radius:0.625rem;background:var(--card);color:var(--card-ink);position:relative;overflow:hidden;border:0;padding:0;text-align:left;font-family:var(--body)}
.card .stripe{position:absolute;left:0;top:0;bottom:0;width:0.3125rem}
.card .art{height:3.125rem;display:flex;align-items:flex-end;justify-content:center}
.card .art svg{display:block;margin-bottom:-0.25rem;width:2.875rem;height:2.875rem}
.card .art .head{width:2.125rem;height:2.125rem;border-radius:1.0625rem 1.0625rem 0 0;background:var(--card);opacity:.85;margin-bottom:-0.25rem}
.card .art.rank{align-items:center;background:#E6E4DA;font-family:var(--display);font-weight:800;font-size:1.5rem}
.card .nm{padding:0.25rem 0.3125rem 0 0.625rem;font-family:var(--display);font-weight:800;font-size:0.8125rem;line-height:1.05;white-space:nowrap;overflow:hidden}
.card .nm.long{font-size:0.7188rem}
.card .nm.xlong{font-size:0.625rem}
.card .nm.xxlong{font-size:0.5625rem;letter-spacing:-.01em}
.card .bot{position:absolute;left:0.625rem;right:0.4375rem;bottom:0.3125rem;display:flex;align-items:flex-end;justify-content:space-between;gap:0.25rem}
.card .sub{font-size:0.5625rem;font-weight:700;color:#555;white-space:nowrap;overflow:hidden;min-width:0;padding-bottom:2px}
.card .pts{flex-shrink:0;font-family:var(--display);font-weight:800;font-size:1.1875rem;line-height:1;font-variant-numeric:tabular-nums}
.card.hidden-card{background:linear-gradient(145deg,var(--slate),var(--panel));border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.card.flip .pts{color:var(--card-ink)}
.card.flip .sub.proj{text-decoration:line-through}
.card.up .pts{color:#2E7D32}.card.down .pts{color:#C62828}
/* nav */
.nav{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:var(--col,26.875rem);height:4.75rem;padding-bottom:env(safe-area-inset-bottom,0px);background:#141A17;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.nav button{background:none;border:0;color:var(--muted);font-size:0.6875rem;font-weight:700;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0.25rem;letter-spacing:1px}
.nav button.on{color:var(--lime)}
.pill{font-size:0.625rem;font-weight:800;letter-spacing:1px;border-radius:0.375rem;padding:3px 0.5rem;border:1px solid var(--lime);color:var(--lime)}
.pill.red{border-color:var(--lose);color:var(--lose)}
.banner{border-radius:1rem;padding:1.125rem 1rem;display:flex;justify-content:space-between;align-items:center}
.banner.win{background:var(--lime);color:var(--lime-ink)}
.banner.lose{background:var(--lose);color:var(--chalk)}
.banner.push{background:var(--slate);color:var(--chalk)}
.banner.mini{padding:0.5rem 0.875rem;border-radius:0.875rem;margin:0.25rem 0;gap:0.5rem}
.banner.mini .eyebrow{font-size:0.625rem}
.banner.mini{flex-wrap:wrap;row-gap:0.25rem}
.banner .parts{flex-basis:100%;display:flex;flex-wrap:wrap;gap:0.25rem 0.625rem;font-size:0.6875rem;font-weight:800;border-top:1px solid currentColor;padding-top:0.25rem;opacity:.9}
.parts-row{display:flex;flex-wrap:wrap;gap:0.25rem 0.625rem;font-size:0.6875rem;font-weight:800}
.hist{display:flex;flex-direction:column;gap:0.375rem;max-height:60vh;overflow-y:auto}
.hist .hrow{display:grid;grid-template-columns:1fr auto;gap:0.125rem 0.5rem;padding:0.5rem 0.625rem;border:1px solid var(--line);border-radius:0.625rem;background:var(--ink);font-size:0.75rem}
.btn .sub2{display:block;font-size:0.6875rem;font-weight:800;opacity:.85}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:6rem;background:var(--slate);border:1px solid var(--line);padding:0.625rem 1rem;border-radius:0.75rem;font-weight:700;font-size:0.8125rem;max-width:23.75rem;z-index:5}
.seat{display:flex;align-items:center;gap:0.625rem;padding:0.625rem 0.75rem;border-radius:0.75rem;background:var(--panel);border:1px solid var(--line)}
.seat .av{width:2.125rem;height:2.125rem;border-radius:1.0625rem;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:0.8125rem;color:var(--ink);flex-shrink:0}
.tabs{display:flex;gap:1.125rem;border-bottom:1px solid var(--line);font-size:0.75rem;font-weight:800;letter-spacing:1px}
.tabs button{background:none;border:0;color:var(--muted);padding:0.5rem 0;border-bottom:2px solid transparent}
.tabs button.on{color:var(--chalk);border-bottom-color:var(--lime)}
table{width:100%;border-collapse:collapse;font-size:0.75rem;font-weight:600;font-variant-numeric:tabular-nums}
td,th{padding:0.3125rem 0;text-align:right}td:first-child,th:first-child{text-align:left}
th{font-size:0.625rem;letter-spacing:1px;color:var(--muted)}
.sheet{position:fixed;inset:0;background:rgba(16,21,18,.75);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet>div{width:100%;max-width:var(--col,26.875rem);background:var(--ink);border-radius:1.25rem 1.25rem 0 0;max-height:88%;overflow:auto;padding:0 1rem 1.5rem 1rem}
.hero{height:12.5rem;margin:0 -1rem;background:linear-gradient(160deg,var(--heroA,#0A8A98) 0%,var(--slate) 55%,var(--ink) 100%);position:relative;border-radius:1.25rem 1.25rem 0 0}
@media (prefers-reduced-motion: reduce){.needle{transition:none}}
.kpi{background:var(--panel);border-radius:0.75rem;padding:0.625rem 0.75rem}
.kpi .v{font-family:var(--display);font-weight:800;font-size:1.375rem;line-height:1.1}
.help{font-size:0.75rem;color:var(--muted);line-height:1.45}
/* ---------- Oklahoma ---------- */
.okscore{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.375rem;text-align:center}
.okscore>div{background:var(--panel);border:1px solid var(--line);border-radius:0.75rem;padding:0.375rem 0.25rem}
.okscore b{font-family:var(--display);font-weight:800;font-size:1.375rem;font-variant-numeric:tabular-nums}
.okfelt{gap:0.5rem;padding-bottom:1rem}
.okside{display:flex;flex-direction:column;gap:0.375rem}
.okhd{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem}
.okhd b{flex:1;min-width:0}
.okleft{display:flex;align-items:center;gap:0.375rem;font-size:0.6875rem;font-weight:800;color:var(--muted)}
.mdeck.sm{width:1.5rem;height:2rem}.mdeck.sm .cbk{width:1.5rem;height:2rem;border-radius:0.25rem}
.okrow{display:flex;align-items:center;gap:0.5rem;min-height:6.75rem}
.okslot{border-radius:0.75rem;transition:box-shadow .3s}
.okslot.won,.okmini.won{box-shadow:0 0 0 3px var(--lime),0 0 1.25rem rgba(197,244,90,.45);border-radius:0.75rem}
.okslot.empty .card{opacity:.55}
.okdrill{display:flex;gap:0.25rem;padding-left:0.5rem;border-left:2px dashed rgba(197,244,90,.35)}
.okmini{width:3.75rem;height:5.0625rem;flex-shrink:0;border-radius:0.5rem}
.okmini>.card{transform:scale(.75);transform-origin:top left}
.okmini>.card.dealslide{animation-name:okSlide}
@keyframes okSlide{0%{transform:translate(-2.5rem,0) scale(.5);opacity:0}100%{transform:scale(.75);opacity:1}}
.okmini>.card.turnover{animation-name:okTurn}
@keyframes okTurn{0%{transform:scale(.75)}50%{transform:scale(.03,.75)}100%{transform:scale(.75)}}
.okmid{display:flex;align-items:center;gap:0.625rem;min-height:2.5rem;padding:0.375rem 0.5rem;border-top:1px dashed rgba(197,244,90,.18);border-bottom:1px dashed rgba(197,244,90,.18);font-size:0.8125rem;font-weight:800}
.okmid b{font-family:var(--display);font-size:1.375rem}
.okmid.pop{animation:okPop .35s ease-out}
@keyframes okPop{0%{transform:scale(.92);opacity:.4}100%{transform:none;opacity:1}}
.okd{font-family:var(--display);font-weight:800;font-size:1.125rem;background:var(--ink);border:1px solid var(--line);border-radius:0.5rem;padding:0.125rem 0.5rem;font-variant-numeric:tabular-nums}
.okprog{position:absolute;left:0;right:0;bottom:0;height:0.25rem;background:rgba(0,0,0,.35)}
.okprog i{display:block;height:100%;background:var(--lime);transition:width .4s}
.oklog{display:flex;flex-direction:column;gap:0.25rem}
.okrowlog{display:grid;grid-template-columns:1.75rem 1fr auto;gap:0.5rem;align-items:center;padding:0.4375rem 0.625rem;border:1px solid var(--line);border-radius:0.625rem;background:var(--panel);font-size:0.75rem;font-weight:700}
.okrowlog .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okrowlog>b{font-family:var(--display);font-size:1rem}
.okdl{display:block;margin-top:0.125rem;font-size:0.6875rem;overflow:hidden;text-overflow:ellipsis}
.okrule{display:flex;gap:0.625rem;font-size:0.8125rem;line-height:1.35}
.okrule>b{flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:0.9375rem}
.okpresets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.375rem}
.okpresets button{height:2.25rem;border-radius:0.5625rem;border:1px solid var(--line);background:var(--ink);color:var(--chalk);font-family:var(--display);font-weight:800;font-size:1rem}
.okpresets button.on{border-color:var(--lime);background:var(--slate);color:var(--lime)}
.okpresets button:disabled{opacity:.35}
.okpop{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:flagFade 1.5s both}
.okpop>div{display:flex;flex-direction:column;align-items:center;transform:rotate(-6deg);animation:tdSpin .6s both}
.okpop span{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.3em;color:var(--chalk);text-shadow:0 2px 0 #101512}
.okpop b{font-family:var(--display);font-weight:800;font-size:4.5rem;line-height:.9;color:var(--lime);text-shadow:0 4px 0 #101512,0 0 1.5rem rgba(0,0,0,.6)}
.okpop small{margin-top:0.375rem;font-weight:800;font-size:0.8125rem;color:var(--chalk);background:rgba(16,21,18,.85);padding:0.25rem 0.625rem;border-radius:0.5rem}
/* ---------- Daily Spin ---------- */
.spinbox{display:flex;flex-direction:column;align-items:center;gap:0.75rem;text-align:center}
.wheelwrap{position:relative;width:min(16.5rem,74vw);aspect-ratio:1}
.wheelwrap svg.wheel{width:100%;height:100%;display:block;transition:transform 4.2s cubic-bezier(.12,.72,.14,1);filter:drop-shadow(0 0.375rem 1rem rgba(0,0,0,.45))}
.wheelwrap .ptr{position:absolute;left:50%;top:-0.375rem;transform:translateX(-50%);width:0;height:0;border-left:0.75rem solid transparent;border-right:0.75rem solid transparent;border-top:1.375rem solid var(--chalk);filter:drop-shadow(0 2px 0 #101512);z-index:2}
.wheelwrap .hub{position:absolute;left:50%;top:50%;width:24%;height:24%;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink);border:3px solid var(--lime);display:flex;align-items:center;justify-content:center}
.wheelwrap .hub img{width:70%;height:70%;object-fit:contain}
.spinres{font-family:var(--display);font-weight:800;font-size:2.5rem;line-height:1;color:var(--lime);min-height:2.5rem}
.spinres.pop{animation:okPop .4s ease-out}
.odds{display:flex;flex-wrap:wrap;justify-content:center;gap:0.25rem 0.625rem;font-size:0.6875rem;font-weight:700;color:var(--muted)}
.odds b{color:var(--chalk)}
@media (prefers-reduced-motion: reduce){.wheelwrap svg.wheel{transition-duration:.4s}.okmid.pop,.spinres.pop,.okmini>.card.dealslide,.okmini>.card.turnover{animation:none}}
/* ---------- live in-season cards ---------- */
.card.lv-in{outline:2px solid var(--lose);outline-offset:-2px;animation:lvPulse 1.6s ease-in-out infinite}
@keyframes lvPulse{0%,100%{outline-color:rgba(229,72,77,1)}50%{outline-color:rgba(229,72,77,.25)}}
.livetag{position:absolute;top:0.25rem;right:0.25rem;z-index:4;display:flex;align-items:center;gap:3px;font-family:var(--display);font-weight:800;font-size:0.5625rem;letter-spacing:.06em;padding:2px 0.3125rem;border-radius:0.375rem;background:var(--lose);color:#fff}
.livetag.post{background:#101512;color:var(--chalk)}
.livetag i{width:5px;height:5px;border-radius:50%;background:#fff;animation:lvDot 1s steps(2,end) infinite}
@keyframes lvDot{50%{opacity:0}}
.card .lvp{font-weight:800;color:#333;letter-spacing:0}
.card .lvp.rk{color:#101512;background:#E9E6DA;border-radius:0.25rem;padding:0 0.1875rem}
.card.lv-in .pts{color:#B3261E}
@media (prefers-reduced-motion: reduce){.card.lv-in,.livetag i{animation:none}}
.oddsbar{display:block;height:0.3125rem;border-radius:3px;background:var(--ink);overflow:hidden}.oddsbar i{display:block;height:100%;background:var(--lime);border-radius:3px}
/* ---------- Oklahoma v2 ---------- */
.okhead{display:grid;grid-template-columns:1fr auto 1fr;gap:0.5rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:0.875rem;padding:0.5rem 0.625rem}
.okhead b{font-family:var(--display);font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums}
.okp{display:flex;align-items:center;gap:0.5rem;min-width:0}.okp.r{justify-content:flex-end}
.okp .eyebrow{max-width:6.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okc{text-align:center}
.okback{position:relative;flex-direction:column}
.okhint{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.125rem;text-align:center;padding:0 0.25rem}
.okhint span{font-size:0.5625rem;font-weight:900;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.okhint b{font-family:var(--display);font-weight:800;font-size:1.125rem;line-height:1;color:var(--lime)}
.oklab{position:absolute;bottom:0.3125rem;left:0;right:0;text-align:center;font-size:0.5625rem;font-weight:900;color:var(--lime);letter-spacing:.04em}
.okhintline{background:var(--slate);border:1px solid var(--lime);border-radius:0.625rem;padding:0.5rem 0.625rem;font-size:0.8125rem;font-weight:800}
.okhints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.375rem}
.okhints button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:0.375rem 0.25rem;border-radius:0.625rem;border:1px solid var(--line);background:var(--ink);color:var(--chalk);cursor:pointer}
.okhints button span{font-size:0.6875rem;font-weight:800}
.okhints button b{font-family:var(--display);font-weight:800;font-size:1.125rem;color:var(--lime)}
.okhints button small{font-size:0.5625rem;font-weight:800;color:var(--muted)}
.okmus{display:flex;flex-direction:column;gap:0.375rem}
.okmu{display:grid;grid-template-columns:auto 1fr auto;gap:0.5rem;align-items:center;padding:0.375rem;border:1px solid var(--line);border-radius:0.75rem;background:var(--panel)}
.okmu.pend{border-color:#3a4a42}
.okmm{width:3.75rem;height:5.0625rem;flex-shrink:0}
.okmm>.card{transform:scale(.75);transform-origin:top left}
.okmuc{display:flex;flex-direction:column;align-items:center;gap:0.125rem;text-align:center;min-width:0}
.okmuc .pill{font-size:0.5rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.lv .pts{font-size:1.0625rem}
.okpair{display:flex;gap:0.1875rem}
.okmm.sm{width:2.875rem;height:3.875rem}.okmm.sm>.card{transform:scale(.575)}
.okmu.drill{border-color:rgba(197,244,90,.45)}
.lgcards{display:flex;align-items:center;gap:0.1875rem;overflow-x:auto}
/* Hi-Lo Streak */
.hlfelt{padding:0.875rem 0.75rem 1rem}
.hlrow{display:flex;align-items:center;justify-content:center;gap:0.875rem}
.hlcol{display:flex;flex-direction:column;align-items:center;gap:0.375rem}
.hlcol .okhd{font-size:0.6875rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.hlvs{font-family:var(--display);font-weight:800;font-size:1.125rem;color:var(--lime);opacity:.85}
.hlfelt .okback .okhint b{font-family:var(--display);font-size:1.75rem;color:var(--lime)}
.hlfelt .okback .okhint span{font-size:0.625rem;font-weight:800;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.hlcall{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.125rem;height:3.75rem;line-height:1}
.hlcall small{font-family:var(--body);font-size:0.6875rem;font-weight:800;letter-spacing:0;opacity:.8}
.hltrail{gap:0.375rem;padding-bottom:0.25rem}
.hlt{display:flex;flex-direction:column;align-items:center;gap:0.125rem;font-size:0.625rem;font-weight:800;flex-shrink:0}
/* card rows and wide tables scroll sideways only (scaled-down cards keep their full-size box, which made rows scroll up and down too) */
.lgcards,.hand.mini,[style*="overflow-x:auto"]{overflow-y:hidden}
.okmm{overflow:hidden}
.okhint b.nm{font-size:0.75rem;line-height:1.1;word-break:break-word}
.hlbuy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.125rem;line-height:1}
.hlbuy small{font-family:var(--body);font-size:0.6875rem;font-weight:800;letter-spacing:0;color:var(--lime)}
.hlgot{font-style:normal;font-family:var(--display);font-weight:800;font-size:0.875rem;color:var(--chalk);margin-top:0.25rem;letter-spacing:.04em;line-height:1.1;max-width:100%;overflow-wrap:anywhere}
.hlrange{display:block;font-size:0.625rem;font-weight:800;color:var(--muted);margin-top:0.125rem;letter-spacing:.02em}
.hlgot.sm{font-size:0.75rem;letter-spacing:0}
.hlspent{font-size:0.625rem;font-weight:800;color:var(--lose);margin-top:1px}
.hldelta{position:absolute;right:0.5rem;top:100%;font-family:var(--display);font-weight:800;font-size:1rem;color:var(--lose);pointer-events:none;animation:hlDelta 1.6s ease-out both}
@keyframes hlDelta{0%{opacity:0;transform:translateY(-0.25rem)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(1rem)}}
.hlextras{display:grid;gap:0.625rem}
/* tappable panels: plain until you touch them, then the lime trim shows */
button.panel{transition:border-color .12s,background-color .12s;-webkit-tap-highlight-color:transparent}
button.panel:active,button.panel:focus-visible{border-color:var(--lime);background-color:var(--slate)}
.okrng{font-size:0.5625rem;font-weight:800;color:var(--chalk);opacity:.85;margin-top:0.125rem}
.card .art.fanart svg{width:5.5rem;height:5.5rem;margin-bottom:-0.375rem}   /* your fan, big enough to see on the fan card */
/* ---------- Holdout ---------- */
.hospots{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.hospot{display:flex;flex-direction:column;gap:2px;padding:0.5rem 0.625rem;border-radius:0.75rem;border:1px dashed var(--line);background:var(--ink);color:var(--chalk);text-align:left;min-width:0;font:inherit}
.hospot.cur{border-style:solid;border-color:#3A5247}
.hospot.on{border:1px solid var(--lime);background:var(--slate);cursor:pointer}
.hospot b{font-family:var(--display);font-weight:800;font-size:1.125rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:1px}
.hospot small{font-size:0.625rem;font-weight:700;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hostep{display:flex;align-items:center;gap:0.75rem;background:var(--panel);border:1px solid var(--line);border-radius:0.875rem;padding:0.625rem 0.75rem}
.hostept{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.15;letter-spacing:.5px}
.hopips{display:flex;gap:0.3125rem;margin-top:0.375rem}.hopips i{width:0.75rem;height:0.75rem;border-radius:50%;border:2px solid var(--lime);transition:background .2s}.hopips i.on{background:var(--lime)}
.hoc.sel{transform:translateY(-0.25rem)}
.hoc.sel .hocback{box-shadow:inset 0 0 0 2px var(--lime),0 0 0 3px var(--lime),0 0.5rem 1rem rgba(0,0,0,.45)}
.btn.horing span{display:inline-block;margin-right:0.5rem;animation:hoRing .9s ease-in-out infinite}
.btn.horing{animation:okPop .35s ease-out both}
.hoprompt{display:flex;align-items:center;gap:0.625rem;font-size:0.8125rem;line-height:1.3}
.hoprompt>span:first-child{flex:1;min-width:0}
.hoavg{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0}
.hoavg small{font-size:0.5625rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hoavg b{font-family:var(--display);font-weight:800;font-size:1.375rem;color:var(--lime);line-height:1}
/* the contracts: paper on the front (number, signature lines, a yellow flag tucked in the corner), the player on the back */
.hogrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0.4375rem;perspective:40rem}
.hogrid.sm{gap:0.3125rem;margin:0.5rem 0}
.hoc{position:relative;aspect-ratio:3/4;border:0;padding:0;border-radius:0.5rem;background:none;color:inherit;transform-style:preserve-3d;transition:transform .5s;-webkit-tap-highlight-color:transparent}
.hoc:disabled{opacity:1;cursor:default;color:inherit}
.hoc[data-slot]{cursor:pointer}
.hocback,.hocface{position:absolute;inset:0;border-radius:0.5rem;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.hocback{background:linear-gradient(165deg,#F4F3EB 0%,#D9D5C2 100%);color:var(--card-ink);box-shadow:inset 0 0 0 1px rgba(16,21,18,.25),0 2px 0 rgba(0,0,0,.35)}
.hocback::after{content:"";position:absolute;left:20%;right:20%;bottom:24%;height:1px;background:rgba(16,21,18,.4);box-shadow:0 -0.3rem 0 rgba(16,21,18,.18)}
.hocback small{font-size:0.4375rem;font-weight:900;letter-spacing:.14em;opacity:.6}
.hocback b{font-family:var(--display);font-weight:800;font-size:1.625rem;line-height:1}
.hocback em{position:absolute;bottom:0;left:0;right:0;font-style:normal;background:var(--lime);color:var(--lime-ink);font-size:0.5rem;font-weight:900;letter-spacing:.12em;text-align:center;padding:1px 0}
.hocflag{position:absolute;top:0.25rem;right:0.25rem;width:0.625rem;height:0.5rem;background:#FFD100;border:1px solid #101512;border-radius:1px 3px 3px 1px;z-index:2}
.hoc[data-slot]:active .hocback{filter:brightness(.92)}
.hoc.mine .hocback{box-shadow:inset 0 0 0 2px var(--lime),0 0 0 2px var(--lime)}
.hocface{transform:rotateY(180deg);background:linear-gradient(165deg,var(--tc,#333) 0%,#1A2420 85%);color:var(--chalk);padding:0.25rem 0.1875rem;text-align:center;gap:1px}
.hocface .hocpos{font-size:0.4375rem;font-weight:900;letter-spacing:.06em;white-space:nowrap}
.hocface b{font-family:var(--display);font-weight:800;font-size:0.6875rem;line-height:1.05;overflow-wrap:anywhere}
.hocface b.lg{font-size:0.5625rem}
.hocface .hocpr{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1}
.hocut{position:absolute;bottom:0.25rem;left:50%;transform:translateX(-50%) rotate(-4deg);background:var(--lose);color:#fff;font-style:normal;font-family:var(--display);font-weight:800;font-size:0.5625rem;letter-spacing:.16em;padding:0 0.3125rem;border-radius:0.1875rem;line-height:1.35}
.hocut.you{background:var(--lime);color:var(--lime-ink)}.hocut.pick{background:var(--slate);color:var(--chalk);letter-spacing:.08em;white-space:nowrap}
.hoc.mine.shown .hocface{box-shadow:inset 0 0 0 2px #3A5247}
.hoc.shown{transform:rotateY(180deg)}
.hoc.open .hocface{filter:saturate(.6) brightness(.85)}
.hoc.open .hocface b,.hoc.open .hocface .hocpr{opacity:.8}
.hoc.rev{animation:hoRev .62s cubic-bezier(.3,.7,.3,1) .12s both}
.hoc.rev .hocface{animation:hoGlow .9s ease .5s both}
@keyframes hoRev{0%{transform:rotateY(0) scale(1)}55%{transform:rotateY(110deg) scale(1.12)}100%{transform:rotateY(180deg) scale(1)}}
@keyframes hoGlow{0%{box-shadow:0 0 0 0 rgba(255,209,0,.9)}100%{box-shadow:0 0 0 0.5rem rgba(255,209,0,0)}}
/* the board: this round's players, a line through every one cut */
.hoboard{display:grid;grid-template-columns:1fr 1fr;gap:0.25rem 0.5rem;margin-top:0.375rem}
.hoboard>div{display:flex;justify-content:space-between;gap:0.375rem;font-size:0.75rem;font-weight:700;padding:0.1875rem 0.4375rem;border-radius:0.375rem;background:var(--ink);min-width:0}
.hoboard>div span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.hoboard>div small{color:var(--muted);font-weight:700}
.hoboard>div b{font-family:var(--display);font-weight:800;color:var(--lime)}
.hoboard>div.out{opacity:.38;text-decoration:line-through}.hoboard>div.out b{color:var(--muted)}
/* the GM's call */
.hodeal{background:var(--panel);border:2px solid var(--lime);border-radius:0.875rem;padding:0.875rem;display:flex;flex-direction:column;gap:0.75rem;animation:okPop .35s ease-out both}
.hodealhd{display:flex;gap:0.625rem;align-items:center}
.hodealhd>span{font-size:1.375rem;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--slate);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:hoRing .9s ease-in-out .2s 2}
.hodealhd b{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1.1}
@keyframes hoRing{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}40%{transform:rotate(13deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.hovol{display:inline-block;font-size:0.625rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:0.125rem 0.5rem;border-radius:1rem;background:var(--slate)}
.hovol.boom{background:#FFD100;color:#101512}.hovol.vol{color:var(--te)}.hovol.steady{color:var(--rb)}
/* lineups and the score */
.hoscore{display:flex;flex-direction:column;gap:0.5rem}
.hoscorerow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0.5rem}
.hoscorerow>div{display:flex;flex-direction:column;min-width:0}
.hoscorerow small{font-size:0.625rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hoscorerow b{font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1;font-variant-numeric:tabular-nums}
.hoscorerow .muted{font-size:0.625rem;font-weight:700}
.howin{align-items:center;text-align:center}.howin b{font-size:2rem}
.hojust{border-radius:0.875rem;padding:0.625rem 0.875rem;display:flex;flex-direction:column;gap:2px;animation:okPop .35s ease-out both}
.hojust.up{background:var(--lime);color:var(--lime-ink)}.hojust.down{background:var(--slate);color:var(--chalk);border:1px solid #3A5247}
.holines{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem}
.holine{display:flex;flex-direction:column;gap:0.5rem;min-width:0}
.holrow{display:flex;gap:0.5rem;align-items:center;min-width:0}
.horecap{padding:0.625rem 0.75rem}
.horecap summary{cursor:pointer;list-style:none;display:flex;gap:0.5rem;align-items:baseline;font-size:0.8125rem;flex-wrap:wrap}
.horecap summary::-webkit-details-marker{display:none}
.horecap summary::after{content:"›";margin-left:auto;color:var(--lime);transition:transform .2s}
.horecap[open] summary::after{transform:rotate(90deg)}
@media (prefers-reduced-motion: reduce){.hoc,.hoc.rev,.hoc.rev .hocface,.hodeal,.hodealhd>span,.btn.horing,.btn.horing span{animation:none;transition:none}}
/* a result popping in once the dealer's last card has landed */
.resultin{animation:okPop .35s ease-out both}
@media (prefers-reduced-motion: reduce){.resultin{animation:none}}

/* YOU WIN: coins burst from the middle, headline and the tokens won */
.winwrap{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:radial-gradient(circle at 50% 45%,rgba(247,207,91,.28),rgba(16,21,18,.55) 60%);animation:wFade 2.1s ease both;overflow:hidden}
.winwrap .wrays{position:absolute;width:44rem;height:44rem;background:repeating-conic-gradient(from 0deg,rgba(247,207,91,.16) 0 9deg,transparent 9deg 22deg);border-radius:50%;animation:wSpin 2.1s linear both;-webkit-mask:radial-gradient(circle,#000 20%,transparent 62%);mask:radial-gradient(circle,#000 20%,transparent 62%)}
.winwrap .wcoin{position:absolute;width:2.75rem;height:2.75rem;left:50%;top:50%;margin:-1.375rem;animation:wCoin 1.6s cubic-bezier(.15,.7,.3,1) both;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.winwrap .wcoin svg{width:100%;height:100%}
.winwrap .wconf{position:absolute;left:50%;top:50%;width:0.5rem;height:0.875rem;border-radius:2px;animation:wCoin 1.7s cubic-bezier(.15,.7,.3,1) both}
.winwrap .wcore{position:relative;display:flex;flex-direction:column;align-items:center;gap:0.5rem;animation:wPop .5s cubic-bezier(.2,1.6,.4,1) both}
.winwrap .wtitle{font-family:var(--display);font-weight:900;font-size:4rem;line-height:.95;letter-spacing:.01em;font-style:italic;text-align:center;background:linear-gradient(180deg,#fff 0%,#fff 45%,#C5F45A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #101512;filter:drop-shadow(0 4px 0 #101512) drop-shadow(0 0 18px rgba(197,244,90,.55))}
.winwrap .wamt{display:flex;align-items:center;gap:0.5rem;background:#101512;border:2px solid #C5F45A;border-radius:1rem;padding:0.375rem 1rem 0.375rem 0.5rem;font-family:var(--display);font-weight:900;font-size:2.5rem;color:#C5F45A;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.winwrap .wamt small{font-size:0.75rem;color:var(--chalk);letter-spacing:.08em;margin-left:0.125rem;align-self:flex-end;padding-bottom:0.5rem}
.winwrap .wci{width:2.5rem;height:2.5rem;display:block}.winwrap .wci svg{width:100%;height:100%}
.winwrap .wsub{font-weight:800;font-size:0.875rem;color:var(--chalk);text-shadow:0 2px 6px #000}
@keyframes wCoin{0%{transform:translate(0,0) scale(.2) rotate(0);opacity:0}12%{opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 140px)) scale(var(--s,1)) rotate(var(--r));opacity:0}}
@keyframes wPop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes wSpin{from{transform:rotate(0) scale(.6);opacity:0}20%{opacity:1}to{transform:rotate(40deg) scale(1.1);opacity:.6}}
@keyframes wFade{0%{opacity:0}8%{opacity:1}82%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.winwrap,.winwrap .wcore,.winwrap .wrays{animation:none}}

/* the Ref's points so far: a thin red line along the bottom of the bar */
.gauge .gnowr{position:absolute;left:0;top:2.125rem;height:3px;border-radius:2px;background:var(--lose);opacity:.85;transition:width .4s;pointer-events:none}

/* injury report on a card: Q (Questionable) in amber, OUT/D/IR in red */
.injtag{position:absolute;top:0.25rem;left:0.375rem;z-index:4;font-family:var(--display);font-weight:900;font-size:0.625rem;line-height:1;padding:0.1875rem 0.3125rem;border-radius:0.3125rem;letter-spacing:.04em;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.injtag.q{background:#FFB020;color:#101512}
.injtag.out{background:var(--lose);color:#fff}

/* home tiles: a closed game reads as closed */
.tile.closed{opacity:.55}
.tile.closed .lime{color:var(--muted)}
/* cards and tiles answer a press, so it's clear they do something */
/* a press shows on the thing pressed, without moving anything around it */
button.card:active{filter:brightness(.85)}
.tile:active,[data-tg]:active,[data-bsid]:active{background:var(--slate)}
/* the one-time tip: tap a card */
.coach{position:fixed;left:1rem;right:1rem;bottom:6rem;margin:0 auto;z-index:70;max-width:20rem;background:var(--chalk);color:#101512;border-radius:0.875rem;padding:0.75rem 0.875rem;font-weight:800;font-size:0.875rem;box-shadow:0 8px 24px rgba(0,0,0,.5);display:flex;gap:0.625rem;align-items:center;animation:wPop .35s cubic-bezier(.2,1.4,.4,1) both}
.coach b{font-family:var(--display);font-size:1.25rem}
.coach button{margin-left:auto;background:#101512;color:var(--chalk);border:0;border-radius:0.5rem;padding:0.375rem 0.625rem;font-weight:900;font-size:0.75rem}
/* nav icons */
.nav button{flex-direction:column;gap:0.125rem}
.nav button svg{width:1.25rem;height:1.25rem}
.nav button .navbadge{position:absolute;top:0.625rem;left:calc(50% + 0.375rem)}

/* projected vs actual: a tick across the bar where each hand was projected (yours white, the Ref's red); the pills are
   the real points */
.gauge .gproj{position:absolute;top:1.3125rem;height:1.25rem;width:0;margin-left:-1px;border-left:2.5px dotted var(--chalk);pointer-events:none;transition:left .4s;z-index:2}
.gauge .gpr{border-left-color:var(--lose);top:1.5625rem}
/* in the middle of the table the pills already say it: the text line under the bar would only wrap */
.midslot div:has(> #playgL), .midslot div:has(> #mgL), .midslot div:has(> #tgL){display:none}

/* a hand fans out (overlapping) only when it wouldn't fit the table: fitHands() in ui.js sets the overlap */
.felt .hand > .card{box-shadow:-3px 0 8px rgba(0,0,0,.35)}
/* the dealer button never sits on top of the seat's text */
.felt .seat-bot .help,.felt .seat-top .help{padding-right:2.75rem}
/* computers: a real desktop layout, not a phone in the middle of the screen. A wider column at a normal type size,
   game tiles four across, and the page framed on the desk. */
@media (min-width:1024px) and (pointer:fine){
  html{font-size:16px}
  :root{--col:62rem}
  body{background:#0B0F0D}
  .app{box-shadow:0 0 0 1px var(--line),0 20px 60px rgba(0,0,0,.5)}
  #modeTiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .screen{padding-left:2rem;padding-right:2rem}
  .felt{max-width:46rem;margin-left:auto;margin-right:auto;width:100%}
  .nav{height:4rem}
}

/* sheets: the close button sits at the top and stays there while the sheet scrolls */
.sheetbar{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;margin:0 -1rem;padding:0.75rem 1rem 0.5rem;background:var(--ink);border-radius:1.25rem 1.25rem 0 0}
.nextslot{transition:opacity .25s}.nextslot.waiting{opacity:0}.nextslot.nofit{display:none!important}
/* game screens: just the title up top, no description line under it */
#playSub,#okSub,#hlSub,#hoSub{display:none}
/* a game screen loading: hide the bare page; a spinner only if it takes a moment */
.screen.loading>:not(.topbar){visibility:hidden}
.screen.loading::after{content:"";position:fixed;left:50%;top:42%;width:2.25rem;height:2.25rem;margin-left:-1.125rem;border-radius:50%;border:0.25rem solid var(--slate);border-top-color:var(--lime);opacity:0;animation:qmsp .9s linear infinite,ldIn .2s .25s forwards}
@keyframes ldIn{to{opacity:1}}
/* projected finish markers: a bold dotted post with a dot on the end (yours above the bar, the Ref's below), and the
   same mark drawn small in the legend so "PROJECTED" points at something you can see */
.gauge .gproj{border-left-width:3px;opacity:.95}
.gauge .gproj::after{content:"";position:absolute;left:-5.5px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--chalk);box-shadow:0 0 0 2px rgba(16,21,18,.8)}
.gauge .gpr::after{top:auto;bottom:-4px;background:var(--lose)}
.gpkey{display:inline-block;width:0;height:0.75rem;border-left:3px dotted currentColor;margin:0 0.3rem -0.1rem 0.15rem;position:relative}
.gpkey::after{content:"";position:absolute;left:-5px;top:-3px;width:7px;height:7px;border-radius:50%;background:currentColor}
/* Account rows that open the Store and Your Fan; the token chip opens the Store */
.navrow{display:flex;align-items:center;gap:0.75rem;width:100%;text-align:left;color:inherit;cursor:pointer}
.navrow .mascot{width:2.5rem;height:2.5rem;flex-shrink:0}
.topbar .chips{cursor:pointer}
.tier{display:flex;flex-direction:column;gap:0.375rem}.tier.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime) inset}
/* five tabs in the bottom bar */
.nav button{letter-spacing:0.5px;font-size:0.625rem;min-width:0;white-space:nowrap}
/* Leagues | Tournaments switch */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:0.25rem;padding:0.25rem;background:var(--ink);border:1px solid var(--line);border-radius:0.875rem}
.seg button{height:2.5rem;border:0;border-radius:0.625rem;background:none;color:var(--muted);font-family:var(--display);font-weight:800;font-size:0.9375rem;letter-spacing:1px;cursor:pointer}
.seg button.on{background:var(--lime);color:var(--ink)}