/* Spotwise: shared look. Mostly white, cream-green accents, Apple-like spacing and motion. */
:root{
  --bg:#FFFFFF; --soft:#F6F7F4; --soft2:#F2F3EF; --line:#ECEDE8; --rule:#F0F1EC; --field:#DCDDD7;
  --ink:#1D1D1F; --ink2:#3A3A3C; --muted:#6E6E73; --quiet:#8E8E93;
  --green:#2F5D48; --green-d:#1F4434; --green-m:#5E8B6E; --mint:#E9F0E4; --mint2:#F3F7F0; --motif:#D3DFCC;
  --big:#B4410C; --big-soft:#FBEDE5; --big-line:#F1C9B8; --med:#E39B5A; --small:#C9CCC4;
  --heart:#C62828; --diamond:#1D5FBF; --club:#2E7D32; --spade:#1D1D1F;
  --ease:cubic-bezier(.2,.8,.2,1);
  --body:Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:"Inter Tight",Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; position:relative; overflow-x:hidden}
a{color:var(--green)} a:hover{color:var(--green-d)}
button,input,select{font:inherit}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0; letter-spacing:-.025em; text-wrap:balance}
h1{font-size:clamp(34px,4.2vw,56px); line-height:1.05; letter-spacing:-.04em}
h2{font-size:26px; line-height:1.2}
p{margin:0}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--green-m); outline-offset:2px}

/* background motifs */
.motifs{position:fixed; inset:0; pointer-events:none; z-index:0}
.motifs svg{position:absolute; fill:none; stroke:var(--motif); stroke-linejoin:round}

/* header */
.top{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--rule)}
.top .in{max-width:1120px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; gap:12px}
.logo{font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
.logo .word{display:inline-flex; align-items:baseline; white-space:nowrap}
.logo .dot{color:var(--green-m)}
.logo svg.o{width:.714em; height:.664em; margin:0 .005em 0 .05em; overflow:visible; transform:translateY(.012em)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.icon-btn{width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); background:none; border:0; cursor:pointer; transition:background .2s ease, transform .2s ease}
.icon-btn:hover{background:var(--mint)} .icon-btn:active{transform:scale(.94)}
.spacer{margin-left:auto}

/* main column */
main{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:72px 32px 120px; display:flex; flex-direction:column; gap:52px}
@media (max-width:700px){ main{padding:40px 16px 80px; gap:36px} .top .in{padding:0 12px} }

/* buttons */
.btn{height:44px; padding:0 18px; border-radius:12px; border:0; background:var(--green); color:#fff; font-size:15px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:background .2s ease, transform .2s ease}
.btn:hover{background:#244A39; color:#fff} .btn:active{transform:scale(.97)}
.btn.ghost{background:#fff; color:var(--ink); border:1px solid var(--field)} .btn.ghost:hover{background:var(--soft)}
.btn.soft{background:var(--mint); color:var(--green-d)} .btn.soft:hover{background:#DCE8D9}
.btn.danger{background:#fff; color:var(--big); border:1px solid var(--big-line)} .btn.danger:hover{background:var(--big-soft)}
.btn.pill{border-radius:999px}
.btn:disabled{opacity:.55; cursor:default}

/* cards and boxes */
.card{background:#fff; border:1px solid var(--line); border-radius:28px; padding:36px}
.soft-card{background:var(--soft); border-radius:24px; padding:32px}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
.kpi{position:relative; min-width:0; background:var(--soft); border-radius:24px; padding:32px 32px 60px; display:flex; flex-direction:column; gap:6px; color:var(--ink); text-decoration:none}
.kpi.accent{background:var(--mint)}
.kpi .label{font-size:14px; font-weight:500; color:var(--muted)} .kpi.accent .label{color:var(--green)}
.kpi .value{font-family:var(--display); font-size:clamp(26px,2.4vw,34px); font-weight:600; letter-spacing:-.03em; line-height:1.1; white-space:nowrap}
.kpi .sub{font-size:12px; color:var(--muted)} .kpi.accent .sub{color:var(--green)}
.kpi .go{font-size:13px; font-weight:600; color:var(--green); margin-top:4px}
@media (max-width:960px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px} .kpi{padding:24px 24px 56px} }
.sevbar{display:flex; height:8px; border-radius:4px; overflow:hidden; gap:2px; margin-top:4px}
.sevbar i{display:block} .sevbar .b{background:var(--big)} .sevbar .m{background:var(--med)} .sevbar .s{background:var(--small)}

/* tooltip */
/* "?" explanations open inside their own box, so they never spill over other parts of the page */
.tip{position:static}
.tip button{position:absolute; right:12px; bottom:12px; z-index:6; width:32px; height:32px; border-radius:50%; border:1px solid #D9DCD4; background:#fff; color:var(--muted); font-size:13px; font-weight:600; cursor:help; transition:background .2s, color .2s, border-color .2s}
.tip button:hover,.tip button:focus-visible,.tip:hover button{background:var(--green); border-color:var(--green); color:#fff; outline:none}
.tip span{position:absolute; inset:0; z-index:5; border-radius:24px; background:var(--ink); color:#fff; font-size:13.5px; line-height:1.5; padding:22px 24px 52px; display:flex; align-items:center; overflow:auto; opacity:0; transform:scale(.98); pointer-events:none; transition:opacity .25s ease, transform .3s var(--ease)}
.tip:hover span,.tip:focus-within span{opacity:1; transform:none}
@media (max-width:960px){ .tip span{font-size:12.5px; padding:16px 18px 48px} }

/* motion: blocks rise in, grow a little on hover */
@keyframes rise{from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none}}
@keyframes slide{from{opacity:0; transform:translateX(-24px)} to{opacity:1; transform:none}}
.reveal{animation:rise .75s var(--ease) backwards}
main>*{animation:rise .75s var(--ease) backwards}
main>*:nth-child(2){animation-delay:.06s} main>*:nth-child(3){animation-delay:.12s} main>*:nth-child(4){animation-delay:.18s} main>*:nth-child(5){animation-delay:.24s}
.lift{transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.lift:hover{transform:translateY(-2px) scale(1.025); box-shadow:0 16px 40px rgba(29,29,31,.10)}
.lift-sm{transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.lift-sm:hover{transform:scale(1.01); box-shadow:0 16px 40px rgba(29,29,31,.08)}
.kpis>.kpi{animation:rise .75s var(--ease) backwards}
.kpis>.kpi:nth-child(2){animation-delay:.08s} .kpis>.kpi:nth-child(3){animation-delay:.14s} .kpis>.kpi:nth-child(4){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }

/* segmented control and chips */
.seg{display:inline-flex; gap:2px; padding:3px; background:var(--soft2); border-radius:10px}
.seg button{border:0; border-radius:8px; padding:7px 14px; font-size:13px; font-weight:600; background:transparent; color:var(--muted); cursor:pointer; transition:background .2s, color .2s}
.seg button[aria-checked=true],.seg button[aria-selected=true]{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.seg.round{border-radius:999px} .seg.round button{border-radius:999px; padding:6px 12px; font-size:12px}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{height:36px; padding:0 14px; border-radius:999px; border:0; font-size:14px; font-weight:600; background:var(--soft2); color:var(--ink); cursor:pointer; transition:background .2s}
.chip:hover{background:var(--mint)} .chip[aria-pressed=true]{background:var(--ink); color:#fff}

/* forms */
label.f{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink2)}
.field{height:48px; border:1px solid var(--field); border-radius:12px; padding:0 14px; font-size:16px; font-weight:400; background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s}
.field:focus{outline:none; border-color:var(--green-m); box-shadow:0 0 0 4px rgba(94,139,110,.18)}
.err{color:var(--big); font-size:14px; min-height:1.2em}
.okmsg{color:var(--green); font-size:14px; min-height:1.2em}

/* lists */
.list{background:#fff; border:1px solid var(--line); border-radius:24px; overflow-x:auto}
.list .head,.list .row{display:grid; gap:16px; padding:18px 28px; align-items:center; border-bottom:1px solid var(--rule)}
.list .head{font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--muted)}
.list .row{padding:22px 28px; transition:background .2s ease}
.list .row:last-child{border-bottom:0}
.list .row:hover{background:var(--soft)}
.list .row.sel{background:var(--mint2)}
.tag{font-size:12px; font-weight:600; border-radius:999px; padding:2px 8px; white-space:nowrap}
.tag.big{color:var(--big); background:var(--big-soft)} .tag.medium{color:#8A5A12; background:#FBF0DE} .tag.small{color:#4A5560; background:#EEF0F2} .tag.ok{color:var(--green); background:var(--mint)} .tag.un{color:var(--muted); background:var(--soft2)}
.empty{padding:28px; color:var(--muted)}
input[type=checkbox]{accent-color:var(--green); width:18px; height:18px; cursor:pointer}

/* bars */
.bars .r{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) 84px; gap:14px; align-items:center; padding:13px 10px; border-radius:12px; transition:background .2s}
.bars .r:hover{background:var(--soft)}
.track{height:10px; border-radius:5px; background:var(--soft2)} .track i{display:block; height:10px; border-radius:5px; background:var(--green-m); transition:width .5s var(--ease)}
.track.thin, .track.thin i{height:6px; border-radius:3px}

/* menu panel */
.scrim{position:fixed; inset:0; background:rgba(29,29,31,.18); z-index:40; opacity:0; pointer-events:none; transition:opacity .3s ease}
.scrim.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:12px; left:12px; bottom:12px; width:340px; max-width:calc(100% - 24px); z-index:41; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(24px); -webkit-backdrop-filter:saturate(180%) blur(24px); border-radius:28px; box-shadow:0 24px 64px rgba(29,29,31,.16); padding:20px; display:flex; flex-direction:column; gap:10px; transform:translateX(calc(-100% - 40px)); visibility:hidden; transition:transform .45s var(--ease), visibility 0s linear .45s}
.drawer.open{transform:none; visibility:visible; transition:transform .45s var(--ease)}
.drawer .hd{display:flex; align-items:center; justify-content:space-between; padding:4px 4px 16px 12px}
.nav-item{display:flex; align-items:center; gap:14px; height:52px; padding:0 14px; border-radius:14px; color:var(--ink); text-decoration:none; font-size:16px; font-weight:600; transition:background .2s}
.nav-item:hover{background:var(--soft2); color:var(--ink)} .nav-item.cur{background:var(--soft)}
.nav-group{display:flex; flex-direction:column; gap:4px; background:var(--soft); border-radius:16px; padding:4px}
.sub-item{display:flex; flex-direction:column; gap:2px; padding:14px 14px 14px 48px; border-radius:12px; color:var(--ink); text-decoration:none; transition:background .2s, transform .25s var(--ease)}
.sub-item:hover{background:var(--mint); transform:translateX(3px); color:var(--ink)}
.sub-item b{font-size:15px; font-weight:600} .sub-item span{font-size:13px; color:var(--muted)}
.drawer .who{margin-top:auto; display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--rule)}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--mint); color:var(--green); display:inline-flex; align-items:center; justify-content:center; font-weight:600}

/* playing cards */
.pc{display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:40px; padding:0 5px; border-radius:7px; background:#fff; border:1px solid #E1E4DC; font-weight:600; font-size:16px; box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pc.h{color:var(--heart)} .pc.d{color:var(--diamond)} .pc.c{color:var(--club)} .pc.s{color:var(--spade)}
.pc.sm{min-width:24px; height:30px; font-size:13px; border-radius:5px; padding:0 4px}

/* poker table */
.tablewrap{position:relative; background:#CFE0C7; border-radius:32px; padding:52px 36px 60px}
.ptable{position:relative; height:300px; border-radius:150px; background:#fff; box-shadow:inset 0 0 0 10px #F1F6EE, 0 12px 30px rgba(47,93,72,.16)}
.ptable .mid{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.ptable .mid .pot{font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.02em}
.ptable .mid .lbl{font-size:12px; font-weight:600; color:var(--muted)}
.seat{position:absolute; transform:translate(-50%,-50%); background:#fff; border:1px solid #E1E4DC; border-radius:12px; padding:6px 12px; text-align:center; white-space:nowrap; font-size:12px; transition:opacity .3s}
.seat b{display:block; font-weight:600} .seat .stk{color:var(--muted)}
.seat.folded{opacity:.5}
.seat.allin{background:var(--big-soft); border-color:var(--big-line); color:#8A3109} .seat.allin .stk{color:#8A3109}
.seat.hero{background:var(--ink); color:#fff; border-color:var(--ink); padding:6px 10px; display:flex; flex-direction:column; align-items:center; gap:4px}
.seat.hero .stk{color:#D1D1D6; font-weight:600}
.seat .act{display:block; font-size:11px; font-weight:600; color:var(--green)}
.seat .bet{position:absolute; left:50%; transform:translateX(-50%); font-size:11px; font-weight:600; background:var(--mint); color:var(--green-d); border-radius:999px; padding:1px 7px}
.dealer{position:absolute; transform:translate(-50%,-50%); width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid var(--field); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center}
@media (max-width:700px){ .tablewrap{padding:72px 14px 48px; border-radius:24px} .unitsw{top:12px; right:12px} .ptable{height:240px} .seat{font-size:11px; padding:4px 8px} }

/* situation + answer */
.sit{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:0; font-size:15px}
.sit dt{color:var(--muted); font-size:13px; font-weight:500; padding-top:2px}
.sit dd{margin:0}
.choices{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.choice{min-height:56px; padding:8px 12px; border-radius:16px; border:1px solid var(--field); background:#fff; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; transition:transform .2s ease, background .2s ease, border-color .2s ease}
.choice:hover{border-color:var(--green-m); background:var(--soft)} .choice:active{transform:scale(.97)}
.choice.right{border-color:var(--green); background:var(--mint); color:var(--green-d)}
.choice.wrong{border-color:var(--big-line); background:var(--big-soft); color:var(--big)}
.choice.close{border-color:#E8C96A; background:#FBF3D9; color:#7A5B0C}
.choice.picked{box-shadow:0 0 0 3px rgba(29,29,31,.85); position:relative}
.choice.picked::after{content:"Your pick"; position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:10px; font-weight:600; padding:1px 7px; border-radius:999px; white-space:nowrap}
.choice:disabled{cursor:default}
.verdict{display:flex; flex-direction:column; gap:12px; border-radius:20px; padding:24px; background:var(--soft); animation:rise .5s var(--ease)}
.verdict h3{font-size:19px}
.verdict ul{margin:0; padding-left:20px; color:var(--ink2)}
.verdict .basis{font-size:13px; color:var(--muted)}
.soltab{display:flex; flex-direction:column; gap:6px; margin-top:4px}
.solrow{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 44px 64px; gap:10px; align-items:center; font-size:14px}
.solrow .track{height:8px} .solrow .track i{height:8px; background:var(--small)}
.solrow.t-right .track i{background:var(--green-m)} .solrow.t-close .track i{background:#E5C04B} .solrow.t-wrong .track i{background:#E7A58B}

/* ---- page helpers ---- */
[hidden]{display:none !important}
.top.plain{position:relative; background:transparent; border-bottom:0; backdrop-filter:none; -webkit-backdrop-filter:none}
.back{font-size:14px; font-weight:600; text-decoration:none}
.pagehead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px}
.pagehead .t{display:flex; flex-direction:column; gap:8px; min-width:0}
.pagehead h1{font-size:clamp(32px,3.8vw,52px); overflow-wrap:anywhere}
.pagehead .sub{font-size:16px; color:var(--muted)}
.split{display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start}
.split>.main{flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:20px}
.split>.side{flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:20px}
.selbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:8px 8px 8px 0; border-radius:16px; transition:background .3s ease, padding .3s ease}
.selbar span{font-size:14px; font-weight:600; color:var(--muted)}
.selbar.on{background:var(--green); padding-left:20px} .selbar.on span{color:#fff}
.selbar .acts{display:flex; gap:8px}
.selbar .clear{height:36px; padding:0 14px; border-radius:10px; border:0; background:transparent; font-size:14px; font-weight:600; color:#fff; cursor:pointer}
.selbar .go2{height:36px; padding:0 16px; border-radius:10px; background:#fff; color:var(--green-d); display:flex; align-items:center; font-size:14px; font-weight:600; text-decoration:none}
.mini-btn{justify-self:end; height:36px; padding:0 14px; border-radius:10px; background:var(--mint); color:var(--green-d); display:inline-flex; align-items:center; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; border:0; cursor:pointer; transition:background .2s, transform .2s}
.mini-btn:hover{background:#DCE8D9; color:var(--green-d)} .mini-btn:active{transform:scale(.96)}
.leakbox{background:#fff; border:1px solid var(--line); border-radius:24px; padding:12px 28px}
.leak{display:flex; flex-direction:column; gap:10px; padding:18px 0; border-bottom:1px solid var(--rule)}
.leak:last-child{border-bottom:0}
.leak .n{display:flex; justify-content:space-between; gap:12px; font-size:14px}
.postiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); gap:12px}
.postiles div{border-radius:14px; padding:18px 8px; display:flex; flex-direction:column; align-items:center; gap:2px}
.postiles span{font-size:12px; font-weight:600} .postiles b{font-family:var(--display); font-size:22px; font-weight:600}
.drop{border:1.5px dashed var(--field); border-radius:24px; padding:40px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; transition:background .2s, border-color .2s}
.drop.over{background:var(--mint2); border-color:var(--green-m)}
dialog.modal{border:0; border-radius:28px; padding:36px; width:min(520px,calc(100vw - 32px)); box-shadow:0 30px 80px rgba(29,29,31,.22); color:var(--ink)}
dialog.modal::backdrop{background:rgba(29,29,31,.28); backdrop-filter:blur(2px)}
dialog.modal[open]{animation:rise .45s var(--ease)}
.uprow{display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:10px 0; border-bottom:1px solid var(--rule)}
.uprow:last-child{border-bottom:0}
.spin{width:14px; height:14px; border-radius:50%; border:2px solid var(--mint); border-top-color:var(--green); display:inline-block; animation:spin .8s linear infinite; vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.handrow{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,.6fr) minmax(0,.7fr) minmax(0,2fr) 90px}
.navrow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.navrow .meta{font-size:14px; color:var(--muted)}
.modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px}
.mode{position:relative; background:var(--soft); border-radius:28px; padding:36px; display:flex; flex-direction:column; gap:12px; color:var(--ink); text-decoration:none}
.mode.accent{background:var(--mint)}
.mode .ic{width:48px; height:48px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--green); margin-bottom:8px}
.mode b{font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.02em}
.mode .d{font-size:15px; line-height:1.5; color:var(--muted)}
.mode .go{font-size:14px; font-weight:600; color:var(--green); margin-top:6px}
.optrow{display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px}
.optrow>span{width:120px; font-size:14px; font-weight:600; color:var(--ink2)}
.acct-sec{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px}
.kpi.notip{padding-bottom:32px}
@media (max-width:960px){ .kpi.notip{padding-bottom:24px} }
@media (max-width:700px){ .bars .r{grid-template-columns:minmax(0,1fr) auto; row-gap:8px} .bars .r>b{grid-column:1/-1} }
.agree{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--ink2); cursor:pointer}
.agree input{margin-top:2px; width:16px; height:16px; flex:none}
.linkbtn{border:0; background:none; padding:4px 0; font-size:14px; font-weight:600; color:var(--green); cursor:pointer; align-self:center}
.linkbtn:hover{color:var(--green-d)}
.foot{position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 32px 40px; display:flex; gap:10px; font-size:13px; color:var(--muted)}
.foot a{color:var(--muted); text-decoration:none} .foot a:hover{color:var(--green)}

/* replay screen */
/* table top left, hand details on the right, the question and answer under the table */
.spotgrid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); grid-template-areas:"table info" "q info"; gap:24px; align-items:start}
.spotgrid>.tablewrap{grid-area:table; min-width:0}
.spotgrid>.spotinfo{grid-area:info; min-width:0; display:flex; flex-direction:column; gap:18px; padding:28px}
.spotgrid>.spotq{grid-area:q; min-width:0; display:flex; flex-direction:column; gap:18px; padding:28px}
.spotq .choices{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:900px){ .spotgrid{grid-template-columns:minmax(0,1fr); grid-template-areas:"table" "info" "q"} }
.unitsw{position:absolute; top:14px; right:16px; z-index:3}
.unitsw .seg{background:rgba(255,255,255,.55)}
.unitsw .seg button{color:var(--green-d)}
.unitsw .seg button[aria-checked=true]{background:#fff; color:var(--ink)}
.betchip{position:absolute; transform:translate(-50%,-50%); font-size:11px; font-weight:600; background:var(--mint); color:var(--green-d); border-radius:999px; padding:1px 7px; white-space:nowrap}
.seat.folded{opacity:1; background:#F1F3EE; border-color:#E1E4DC; color:#9A9CA0} .seat.folded .stk{color:#A6A8AC}
.story{display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:14px; margin-top:2px}
.story h4{margin:0; font-family:var(--display); font-size:15px; font-weight:600}
.story .srow{display:grid; grid-template-columns:84px minmax(0,1fr); gap:10px; font-size:14px; line-height:1.5}
.story .srow b{color:var(--muted); font-weight:600}
/* every page a little closer on computer screens, like zooming the browser to 120-130% */
@media (min-width:1200px){ body{zoom:1.2} }
@media (min-width:1600px){ body{zoom:1.3} }
.solhead{font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.01em}
.solhead span:last-child{text-align:right}
.solnote{font-size:12px; color:var(--muted); margin-top:4px}
.solhead .span2{grid-column:span 2}
.solrow>span:last-child{text-align:right}
.mixnote{background:var(--mint2); border-radius:12px; padding:10px 12px; font-size:14px; color:var(--green-d)}