/* Graildraft UI. Mobile first. */
/* Midnight League (Lior 2026-11-02): one dark theme everywhere. Navy ground, ivory for actions (was mint; Lior picked ivory 2026-11-02 round 4), gold kept for Pocket, Grail
   moments and chase cards only, so gold always means something. System + contrast matrix: ~/Desktop/vault/graildraft/
   midnight-2026-11-02/ (OKLCH canonical; WCAG 2.2 + APCA checked on bg/surface/raised). .vault stays as an alias. */
:root,.vault{
  --bg:#0f1430; --surface:#181f45; --raised:#232a50; --line:#333b5d; --field:#777f9c;
  --ink:#f3f5fb; --muted:#d0d5e8; --subtle:#b5bbd1;
  --accent:#f6ecd7; --accent-hover:#e9ddc4; --accent-ink:#0f1430; --accent-text:#f6ecd7; --accent-soft:color-mix(in oklab,var(--accent) 14%,var(--surface));
  --gold:#e0a82e; --gold-ink:#2a1e14; --gold-text:#eebb58; --gold-soft:color-mix(in oklab,#e0a82e 16%,#181f45);
  --up:#5edb81; --down:#ff8c8a; --focus:#9db3fe;
  --new:#6fd3ff; --new-text:#77d9ff; --heat:#ff8a3d; --heat-text:#ff9b52; --lime:#5edb81; --lime-text:#5edb81; --ai:#9dc9f7;
  --night:#0b0f26;
  --r:14px; --tabh:64px; --ease:cubic-bezier(.2,.8,.2,1);
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
.vault{color:var(--ink)}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--accent)}
@font-face{font-family:"Inter";src:url("/fonts/inter-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-latin.woff2") format("woff2");font-weight:500 800;font-stretch:75% 100%;font-display:swap}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 var(--body);min-height:100dvh}
a{color:var(--accent-text)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}
.top{background:var(--bg);color:var(--ink)}
.top > .wrap{display:flex;align-items:center;gap:10px;min-height:52px;padding-top:env(safe-area-inset-top)}
.logo{font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.logo span{color:var(--accent-text)}
.top .who{margin-left:auto;font-size:14px;color:var(--muted)}
.top .who a{display:inline-flex;align-items:center;min-height:44px}
main{padding:18px 0 calc(var(--tabh) + 28px + env(safe-area-inset-bottom))}
h1{font-size:28px;line-height:1.1;letter-spacing:-.02em;margin:4px 0 6px}
h2{font-size:19px;letter-spacing:-.01em;margin:26px 0 10px}
.muted{color:var(--muted)} .subtle{color:var(--subtle);font-size:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.vault .card{border-color:var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 18px;border-radius:12px;border:0;background:var(--accent);color:var(--accent-ink);font-weight:750;cursor:pointer;text-decoration:none;transition:filter .15s ease,transform .15s ease;-webkit-user-select:none;user-select:none}
.btn:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.btn:hover{filter:brightness(1.05)}} .btn[disabled]{opacity:.55;cursor:wait}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--field)}
.btn.block{width:100%} .btn.sm{min-height:40px;padding:0 14px;font-size:15px}
.row{display:flex;gap:8px;align-items:center}
.row > *{flex:1}
label.f{display:grid;gap:6px;margin-bottom:12px;font-size:14px;color:var(--muted);font-weight:600}
input[type=text],input[type=email],input[type=search],input[type=number],input[type=date],input:not([type]),select{width:100%;min-height:48px;background:var(--surface);border:1px solid var(--field);border-radius:10px;padding:0 12px;color:var(--ink);font-size:16px}
input::placeholder{color:var(--subtle);opacity:1}
.err{color:var(--down);font-size:14px;min-height:20px;margin:6px 0 0}
.ok{color:var(--up)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:650;padding:4px 10px;border-radius:99px;background:var(--raised);border:1px solid var(--line);color:var(--muted)}
.pill.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--up)}
.pill.live{color:var(--ink);border-color:var(--line)}
.up{color:var(--up)} .down{color:var(--down)}
.big{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stats div{background:var(--raised);border-radius:12px;padding:10px 12px}
.stats b{display:block;font-size:19px}
.k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle)}
/* lists */
.list{display:grid;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.list:empty{display:none}
.list > .item,.list > .arow{border:0;border-radius:0;border-top:1px solid var(--line)}
.list > :first-child{border-top:0}
.list > .empty,.list > p{margin:0;border:0;border-radius:0}
.item{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:background-color .15s ease;color:inherit}
.item:active{background:var(--raised)}
@media (hover:hover) and (pointer:fine){button.item:hover,a.item:hover{background:var(--raised)}}
.dot{width:10px;height:36px;border-radius:4px}
.item .nm{font-weight:650;line-height:1.25}
.item .meta{font-size:13px;color:var(--subtle);margin-top:2px}
.item .px{text-align:right;font-weight:700;white-space:nowrap}
.item .px small{display:block;font-weight:600;font-size:13px}
.lrow{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow .rk{font-weight:800;color:var(--subtle);text-align:center}
.lrow.me{background:var(--accent-soft);border-radius:0}
.lrow .v{text-align:right;font-weight:700;white-space:nowrap}
.lrow .v small{display:block;font-size:13px;font-weight:600}
/* market filters */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:10px 0;scrollbar-width:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:650;cursor:pointer;-webkit-user-select:none;user-select:none}
.chip .gdot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.tabs button{background:none;border:0;min-height:var(--tabh);color:var(--subtle);font-size:12px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;-webkit-user-select:none;user-select:none}
.tabs button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-current=page]{color:var(--ink);box-shadow:inset 0 2px 0 var(--accent)}
.tabs button[aria-current=page] svg{stroke:var(--accent-text)}
/* sheet */
.scrim{position:fixed;inset:0;background:rgb(10 12 16 / .5);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:min(720px,100%);max-height:92dvh;overflow:auto;overscroll-behavior:contain;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:up .26s var(--ease)}
.sheet::before{content:"";display:block;width:36px;height:5px;border-radius:3px;background:var(--line);margin:-8px auto 10px}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet .close{float:right;min-width:44px;min-height:44px;border-radius:22px;border:0;background:var(--raised);color:var(--ink);cursor:pointer;font-size:16px}
.qty{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center;margin:12px 0}
.qty button{min-height:48px;border-radius:10px;border:1px solid var(--field);background:var(--surface);font-size:22px;cursor:pointer}
.qty button:disabled{opacity:.4;cursor:default}
.qty input{text-align:center;font-size:20px;font-weight:700}
.spark{width:100%;height:56px;display:block;margin:10px 0}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;background:var(--ink);color:var(--surface);padding:12px 16px;border-radius:12px;font-weight:650;max-width:calc(100vw - 32px);box-shadow:0 10px 30px rgb(0 0 0 / .18);animation:up .22s var(--ease)}
.rules ul{padding-left:20px} .rules li{margin:10px 0;color:var(--muted);max-width:68ch} .rules b{color:var(--ink)}
.empty{text-align:center;padding:28px 12px;color:var(--subtle);border:1px dashed var(--line);border-radius:var(--r)}
.progress{height:8px;background:var(--raised);border-radius:99px;overflow:hidden;margin:8px 0}
.progress i{display:block;height:100%;background:var(--accent);border-radius:99px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* rips */
.tag{color:var(--accent-text);font-weight:700}
.ripbox{margin-top:16px;padding:14px;border-radius:14px;background:var(--raised);border:1px solid color-mix(in oklab,var(--accent) 35%,var(--line))}
.ripbox .stats div{background:var(--surface)}
.chaselist{display:grid;gap:6px}
.chaselist div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.chaselist span:last-child{text-align:right;font-weight:700;white-space:nowrap}
.chaselist small,.pull small{display:block;font-size:12px;color:var(--subtle);font-weight:600}
.pull{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--raised);border:1px solid var(--line);margin-bottom:8px}
.pull strong{white-space:nowrap}
.pull.hit{animation:flip .35s cubic-bezier(.2,.8,.2,1)}
.pull.chase{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 14%,var(--raised))}
.pull.chase strong{color:var(--gold-text)}
.pull.last.chase{box-shadow:0 0 0 1px var(--gold),0 0 28px color-mix(in oklab,var(--gold) 45%,transparent)}
@keyframes flip{from{transform:perspective(600px) rotateX(-70deg);opacity:0}to{transform:none;opacity:1}}
.tally{margin-top:6px}
/* box -> packs -> cards */
.packstack{position:relative;height:120px;margin:14px 0}
.packstack i{position:absolute;left:calc(50% - 40px + var(--i) * 6px - 33px);top:calc(var(--i) * -1px + 14px);width:80px;height:104px;border-radius:8px;background:linear-gradient(160deg,color-mix(in oklab,var(--gold) 70%,#fff) 0%,var(--gold) 40%,#a8781c 100%);box-shadow:0 2px 0 rgb(0 0 0 / .35);transform:rotate(calc(var(--i) * 1.5deg - 8deg));animation:deal .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes deal{from{transform:translateY(-30px) rotate(-20deg);opacity:0}}
.packrev .stage{display:grid;place-items:center;min-height:min(62dvh,440px);margin:10px 0}
.pcard{margin:0;width:min(250px,64vw);animation:flip .4s cubic-bezier(.2,.8,.2,1)}
.pcard img,.pcard-fallback{display:block;width:100%;aspect-ratio:63/88;height:auto;border-radius:4.5%/3.2%;background:var(--raised);box-shadow:0 10px 30px rgb(0 0 0 / .45)}
.pcard-fallback{display:grid;place-items:center;padding:16px;text-align:center;font-weight:700;border:1px solid var(--line)}
.pcard figcaption{display:grid;grid-template-columns:1fr auto;gap:0 10px;margin-top:10px;align-items:baseline}
.pcard figcaption span{grid-column:1;color:var(--subtle);font-size:13px}
.pcard figcaption strong{grid-row:1/3;grid-column:2;font-size:20px}
.pcard.hit figcaption strong{color:var(--gold-text)}
.pcard.chase img{box-shadow:0 0 0 2px var(--gold),0 0 40px color-mix(in oklab,var(--gold) 55%,transparent)}
.strip{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.strip span{font-size:12px;font-weight:700;padding:3px 8px;border-radius:99px;background:var(--raised);color:var(--muted)}
.strip span.hit{background:color-mix(in oklab,var(--gold) 22%,var(--raised));color:var(--gold-text)}
/* item sheet: actions stay in reach while the details scroll */
.acts{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));margin:14px -16px calc(-18px - env(safe-area-inset-bottom));padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:color-mix(in oklab,var(--surface) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:grid;gap:8px;z-index:2}
.acts:not(:has(button)){display:none}
.acts .err{margin:0;min-height:0}
.actrow{display:flex;gap:8px}
.actrow > .btn{flex:1}
.actrow .qty{margin:0;flex:0 0 150px;grid-template-columns:44px 1fr 44px}
.acts #tot{margin:0}
.stats .k{color:var(--muted)} /* 4.5:1 on the raised tiles */
.acts p.subtle{margin:0}
/* pulls history */
.pullgrp{padding:12px 0;border-top:1px solid var(--line)}
.pullhead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px}
.pullhead div{display:grid}
.pullhead > span{font-weight:700;white-space:nowrap;text-align:right}
.pullhead small{display:block}
.minis{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.mini{margin:0;flex:0 0 72px;text-align:center}
.mini img{display:block;width:72px;height:auto;aspect-ratio:63/88;border-radius:4px;background:var(--raised);opacity:.7}
.mini.hit img{opacity:1;box-shadow:0 0 0 2px var(--gold)}
.mini figcaption{font-size:12px;font-weight:700;color:var(--subtle);margin-top:3px}
.mini.hit figcaption{color:var(--gold-text)}
/* reveal caption: appears after the flip */
.packrev .stage{grid-template-rows:auto auto;gap:10px}
.revcap{display:flex;justify-content:space-between;gap:12px;width:min(250px,64vw);animation:capin .25s ease-out}
.revcap span{display:grid}
.revcap small{color:var(--subtle);font-size:13px}
.revcap strong{font-size:20px;white-space:nowrap}
.revcap.hit strong{color:var(--gold-text)}
@keyframes capin{from{opacity:0;transform:translateY(4px)}}
/* activity */
.arow{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.arow.star{border-color:color-mix(in oklab,var(--gold) 45%,var(--line))}
.aic{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--raised);color:var(--gold-text);font-weight:800}
.arow .nm{font-weight:650;line-height:1.25}
.arow .meta{font-size:13px;color:var(--subtle);margin-top:2px}
.arow .px{text-align:right;font-weight:700;white-space:nowrap}
.arow .px small{display:block;font-size:13px;font-weight:600}
/* Market: what I can afford */
.cashbar{position:sticky;top:56px;z-index:3;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:0 0 8px}
.cashbar .k{display:block}
.cashbar b{font-size:22px;font-weight:800;letter-spacing:-.01em}
.cashbar > .subtle{text-align:right}
.cashbar .filters{grid-column:1/-1;margin:6px 0 0;padding:0}
.banner{background:color-mix(in oklab,var(--accent) 14%,var(--surface));border:1px solid color-mix(in oklab,var(--accent) 40%,var(--line));border-radius:12px;padding:10px 12px;margin:0 0 8px;font-size:14px}
.item.over > :not(.px){opacity:.5}
.item.over .px{color:var(--muted)}
.item .px small.subtle{display:block;font-size:12px;font-weight:600}
.tag.ok{color:var(--up)}
.star{color:var(--gold-text)}
.watchsm{float:right;margin-top:2px;min-height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--line);background:var(--raised);color:var(--muted);font-size:14px;font-weight:650;cursor:pointer}
.watchsm[aria-pressed=true],#watch[aria-pressed=true]{color:var(--accent-text);border-color:color-mix(in oklab,var(--accent) 45%,var(--line))}
/* Sell to afford */
.affhead{display:flex;gap:12px;align-items:center;margin-top:6px}
.affrow{grid-template-columns:auto 1fr auto}
.affrow.on{border-color:color-mix(in oklab,var(--accent) 55%,var(--line))}
.qty.sm{grid-template-columns:40px 28px 40px;gap:4px;margin:0}
.qty.sm button{min-height:40px;font-size:18px}
.qty.sm output{text-align:center;font-weight:800}
/* Head-to-head */
.h2h{border-color:color-mix(in oklab,var(--accent) 35%,var(--line));background:linear-gradient(160deg,color-mix(in oklab,var(--accent) 8%,var(--surface)),var(--surface) 60%)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:12px 0 4px}
.vs > div{display:grid;gap:2px;min-width:0}
.vs > div:last-child{text-align:right}
.vs span{font-size:14px;color:var(--muted);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs b{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.vs i{font-style:normal;font-weight:800;color:var(--subtle);font-size:13px;text-transform:uppercase}
.vsline{font-weight:800;margin:4px 0 6px}
.lastwk .share{margin-top:10px}
.lrow.game{grid-template-columns:1fr auto 1fr}
.lrow.game > div{display:grid;min-width:0}
.lrow.game > div:last-child{text-align:right}
.lrow.game b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow.game span{font-size:14px;font-weight:700}
.lrow.game i{font-style:normal;color:var(--subtle);font-size:12px;font-weight:800;text-transform:uppercase}
.seg{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;margin:18px 0 10px}
.seg button{flex:1;min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700;cursor:pointer;font-size:14px}
.seg button[aria-selected=true]{background:var(--raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.trow .rk{font-size:22px}
.tcount{font-size:12px;font-weight:700;color:var(--accent-text);white-space:nowrap}
/* Trophy case + missions */
.trophies{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.trophy{display:grid;justify-items:center;text-align:center;gap:2px;background:var(--surface);border:1px solid color-mix(in oklab,var(--gold) 30%,var(--line));border-radius:12px;padding:12px 8px}
.trophy span{font-size:28px}
.trophy b{font-size:13px;line-height:1.2}
.trophy small{font-size:12px;color:var(--subtle)}
.missions summary{cursor:pointer;list-style:none}
.missions summary::-webkit-details-marker{display:none}
.missions summary > span{display:flex;justify-content:space-between;align-items:baseline}
.missions ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.missions li{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start}
.missions li small{display:block;color:var(--subtle);font-size:13px}
.missions li.done b{color:var(--muted)}
.bic{font-size:20px;line-height:1.2;text-align:center;color:var(--subtle)}
.badgerow{display:flex;flex-wrap:wrap;gap:8px;font-size:26px;margin-top:6px}
/* First copy: a separate signal from value (gold) - sky blue, "new for your Binder" */
:root{--new:#6fd3ff}
.newstamp{position:absolute;top:10px;right:-8px;z-index:3;transform:rotate(8deg);background:var(--new);color:#04202b;font-weight:900;font-size:13px;letter-spacing:.12em;padding:5px 10px;border-radius:6px;box-shadow:0 4px 14px rgba(111,211,255,.45),0 0 0 2px #04202b;animation:stamp .42s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{from{transform:rotate(-12deg) scale(2.2);opacity:0}to{transform:rotate(8deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.newstamp{animation:none}}
.v-tile{position:relative}
.newtxt{font-style:normal;color:var(--new-text);font-weight:750}
.newpill{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.08em;color:#04202b;background:var(--new);border-radius:4px;padding:1px 5px;vertical-align:2px}
.strip span.new{box-shadow:inset 0 0 0 1.5px var(--new)}
.firstnote{color:var(--new-text);font-weight:650;font-size:14px;margin:8px 0}
.mini{position:relative}
.mini .mininew{position:absolute;top:-4px;right:-4px;z-index:1;font-style:normal;font-size:10px;font-weight:900;letter-spacing:.06em;color:#04202b;background:var(--new);border-radius:4px;padding:1px 4px}
.mini.new img{opacity:1;box-shadow:0 0 0 2px var(--new)}
/* New version banner: under sheets (z 20), so it never covers a reveal or a buy button */
.update{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom));z-index:15;display:flex;align-items:center;gap:10px;width:min(560px,calc(100vw - 32px));background:var(--raised);border:1px solid color-mix(in oklab,var(--accent) 50%,var(--line));border-radius:14px;padding:10px 10px 10px 14px;box-shadow:0 10px 30px rgb(0 0 0 / .18)}
.update span{flex:1;display:grid;font-size:14px}
.update small{color:var(--muted)}
.update .x{background:none;border:0;color:var(--subtle);font-size:16px;min-width:36px;min-height:36px;cursor:pointer}
.newstamp.quiet{animation:none;transform:none;top:8px;right:8px;font-size:11px;padding:3px 7px;box-shadow:0 0 0 2px #04202b;opacity:.92}
/* Pack reveal: fixed slots so nothing shifts between flips and the result */
.packrev .stage{min-height:min(52dvh,380px);margin:8px 0 0}
.packrev .capslot{min-height:56px;display:grid;place-items:center;margin:8px 0 4px}
.packrev .tally{min-height:132px}
.packrev .strip{min-height:30px}
.revacts{display:grid;gap:8px}
.revacts .row2{display:flex;gap:8px;min-height:40px}
.revacts .row2 .btn{flex:1}
/* Portfolio split bar (league tabs) */
.pfbar{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px;margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px}
.pfbar > div{display:grid;padding:4px 8px}
.pfbar > div + div{border-left:1px solid var(--line)}
.pfbar .k{font-size:11px}
.pfbar b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.pfbar > div:first-child b{color:var(--accent-text)}
.stats.three{grid-template-columns:1fr 1fr 1fr}
.packrev{display:flex;flex-direction:column;height:min(96dvh,860px)}
.packrev .tally{height:150px;min-height:0;overflow:hidden}
.packrev .strip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-height:30px;margin:6px 0 10px;flex:none}
.packrev .strip span{flex:none}
.packrev .revacts{margin-top:auto}
.packrev .stage{flex:1 1 0;min-height:0;height:auto}
.packrev .capslot{flex:none}
/* Pull Luck + Pocket Points */
.luck{font-weight:650}.luck.small{font-size:14px;font-weight:500;color:var(--muted);margin-top:4px}.countup{font-variant-numeric:tabular-nums}
.ptsline{margin:6px 0 0;font-size:14px;color:var(--gold-text)}
.subtle.small{font-size:13px;margin:6px 0 0}
.packrev .tally{height:170px}
.gpcard{display:flex;width:100%;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;color:var(--ink);font:inherit;border-color:color-mix(in oklab,var(--gold) 35%,var(--line))}
.gpcard > span:first-child{display:grid}
.gpcard b{font-size:24px;font-weight:800;color:var(--gold-text)}
.gpgo{font-weight:700;color:var(--gold-text);font-size:15px}
.gpbal{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 8px}
.gpbal > div{display:grid;background:var(--raised);border-radius:12px;padding:10px 12px}
.gpbal b{font-size:20px;font-weight:800}
.gpbal > div:first-child b{color:var(--gold-text)}
.gprow.armed{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.gprow[aria-disabled=true]{cursor:default}
.px small.gold{color:var(--gold-text);display:block;font-size:12px;font-weight:700}
/* Auto-sell */
.revhead{justify-content:space-between;align-items:center;gap:8px;flex-wrap:nowrap}
.revhead .k{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aspill{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 10px;border-radius:99px;border:1px solid var(--line);background:var(--raised);color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis;transition:border-color .2s ease,color .2s ease}
.aspill b{color:var(--ink);font-weight:750}
.aspill.on{border-color:color-mix(in oklab,var(--lime) 55%,var(--line));color:var(--lime-text)}
.aspill:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tally .aspill{margin-top:8px}
.scrim.top{z-index:22}
.assheet{width:min(460px,100%);text-align:center}
.assheet h2{margin:6px 0 6px}
.asbolt{width:56px;height:56px;margin:4px auto 0;border-radius:50%;display:grid;place-items:center;font-size:26px;background:color-mix(in oklab,var(--lime) 22%,var(--surface))}
.aslist{border:1px solid var(--line);border-radius:14px;padding:6px;margin:14px 0 10px;text-align:left;display:grid;gap:2px}
.aslist legend{padding:0 6px}
.asopt{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:10px;cursor:pointer;text-align:left}
@media (hover:hover) and (pointer:fine){.asopt:hover{background:var(--raised)}}
.asopt input{accent-color:var(--accent);width:18px;height:18px;flex:none;margin:0}
.asopt i{width:9px;height:9px;border-radius:50%;flex:none}
.asopt small{color:var(--subtle);font-size:12px}
.asopt > span{display:grid}
.asdup{margin-bottom:14px}
.soldtxt{font-style:normal;color:var(--lime-text);font-weight:650}
.strip span.sold{background:color-mix(in oklab,var(--lime) 16%,var(--raised));color:var(--lime-text);text-decoration:line-through;text-decoration-thickness:1px}
/* Graildraft Pack + Heat */
:root{--heat:#ff8a3d}
.gpk{display:grid;gap:10px}
.gpk.ready{border-color:color-mix(in oklab,var(--gold) 55%,var(--line));background:linear-gradient(135deg,color-mix(in oklab,var(--gold) 12%,var(--surface)),var(--surface) 60%)}
.gpkhead{display:flex;align-items:center;gap:12px}
.gpkbtns{display:flex;flex-direction:column;gap:6px;flex:none}
.openall .openallgrid{flex-wrap:wrap;justify-content:center;max-height:46vh;overflow-y:auto;margin-top:12px}
.openall .mini figcaption small{display:block;color:var(--subtle);font-size:11px}
.gpkhead > span:nth-child(2){flex:1;display:grid;min-width:0}
.gpkhead b{font-size:17px;font-weight:800}
.gpkhead small{color:var(--subtle);font-size:13px}
.gpkicon{font-size:30px;line-height:1;flex:none}
.gpk.ready .gpkicon{animation:gpkbob 1.6s ease-in-out infinite}
@keyframes gpkbob{50%{transform:translateY(-3px) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.gpk.ready .gpkicon{animation:none}}
.gpkhead .btn{flex:none}
.heatrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;flex-wrap:wrap}
.heatrow b{color:var(--heat-text)}
.heatrow small{color:var(--subtle);font-size:12px}
.heat{height:8px;border-radius:99px;background:var(--raised);overflow:hidden}
.heat i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ffb347,var(--heat),#ff4d4d);transition:width .4s ease-out}
.heatline{margin:6px 0 0;font-size:13px;color:var(--muted)}
.heatline.hot{color:var(--heat-text);font-size:14px}
.bonustxt{font-style:normal;color:var(--heat-text);font-weight:700}
.strip span.bonus{background:color-mix(in oklab,var(--heat) 22%,var(--raised));color:var(--heat-text);box-shadow:inset 0 0 0 1.5px var(--heat)}
.is-bonus{filter:drop-shadow(0 0 18px color-mix(in oklab,var(--heat) 70%,transparent))}
.packrev .tally{height:206px}
.aichip{display:inline-block;vertical-align:1px;margin-left:4px;padding:1px 6px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--ai);background:color-mix(in oklab,var(--ai) 10%,var(--surface));border:1px solid color-mix(in oklab,var(--ai) 35%,var(--line))}
.aino{margin:8px 2px 0}

/* ===================== 2026-10 redesign: light shop, dark vault ===================== */
body{font-variant-numeric:tabular-nums}
html{-webkit-tap-highlight-color:transparent}
a{text-underline-offset:2px}
.k{text-transform:none;letter-spacing:0;font-size:13px;font-weight:650;color:var(--subtle)} /* no ALL-CAPS labels */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo{font-size:19px}

/* Masthead: the vault band under the wordmark (league name, phase, one money meter) */
#mast:empty{display:none}
.mast{padding-top:6px;padding-bottom:16px}
.mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mhead h1{margin:0;font-size:26px}
.mhead .btn{flex:none;margin-top:2px}
.phase{margin:4px 0 0;font-size:14px;color:var(--muted)}
.phase b{color:var(--ink);font-weight:650}
.amt{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:14px}
.amt b{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1}
.amt span{font-size:15px;color:var(--muted)}
.amt span.up{color:var(--up);font-weight:700} .amt span.down{color:var(--down);font-weight:700}
.meter{position:relative;height:10px;border-radius:5px;background:var(--accent);overflow:hidden;margin:12px 0 7px}
.meter i{position:absolute;inset:0 auto 0 0;background:#5b6070;border-right:2px solid var(--bg);transition:width .45s var(--ease)}
.legend{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0}
.legend .kd{background:#5b6070} .legend .kc{background:var(--accent)}
.top .btn.ghost{background:transparent;border-color:var(--field);color:var(--ink)}

/* Market: one sticky row (search + Filters), cash joins it only when the masthead is gone */
.mbar{position:sticky;top:0;z-index:4;margin:0 -16px;padding:10px 16px 8px;background:color-mix(in oklab,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mfind{display:flex;gap:8px;align-items:center}
.search{position:relative;flex:1;min-width:0}
.search svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);stroke:var(--subtle);fill:none;stroke-width:2;pointer-events:none}
.search input{padding-left:38px;border-radius:12px;min-height:46px}
.fbtn{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 13px;border-radius:12px;border:1px solid var(--field);background:var(--surface);color:var(--ink);font-weight:650;cursor:pointer}
.fbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.fbtn .n{min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;display:inline-grid;place-items:center;padding:0 5px}
.mcash{display:none;flex:none;font-size:13px;color:var(--muted);text-align:right;line-height:1.2}
.mcash b{display:block;font-size:16px;color:var(--ink)}
.mbar.stuck .mcash{display:block}
.mbar.stuck{border-bottom:1px solid var(--line)}
.filters.games{margin:4px -16px 0;padding:2px 16px 6px}
.mres{display:flex;justify-content:space-between;align-items:center;margin:8px 0 6px;font-size:14px;color:var(--subtle)}
.sort{position:relative;display:inline-flex;align-items:center}
.sort select{appearance:none;-webkit-appearance:none;width:auto;min-height:44px;border:0;background:none;font-weight:650;color:var(--ink);padding:0 22px 0 6px;font-size:14px;cursor:pointer;text-align:right;text-align-last:right}
.sort::after{content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.src{margin:12px 2px 0}
.more{padding:14px;text-align:center;font-size:14px;color:var(--subtle);border-top:1px solid var(--line)!important}
.empty{text-align:center;padding:30px 18px;color:var(--subtle);border:1px dashed var(--line);border-radius:var(--r);background:var(--surface)}
.list > .empty{border:0}
.empty b{display:block;color:var(--ink);margin-bottom:4px}
.empty .btn{margin-top:12px}

/* market rows + the ruler */
.mrow{grid-template-columns:44px minmax(0,1fr) auto!important;align-items:center}
.mrow .mid{display:grid;gap:2px;min-width:0}
.mrow .nm{display:block}
.mrow .meta{display:block;line-height:1.3}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.tag{font-size:12px;font-weight:700;color:var(--accent-text)}
.tag.plain{color:var(--subtle)}
.tag.held{color:var(--up)}
.item .px{min-width:88px}
.item .px b{display:block;font-size:16px;font-weight:750}
.item .px small{display:block;font-size:12px;font-weight:600}
.item .px small.muted{color:var(--subtle)}
.ruler{display:block;margin-top:6px}
.ruler .bar{display:block;height:4px;border-radius:2px;background:var(--raised);overflow:hidden;width:80px;margin-left:auto}
.ruler .bar i{display:block;height:100%;background:#5b6070;border-radius:2px}
.ruler small{display:block;font-size:12px;font-weight:600;color:var(--subtle);margin-top:3px}
.ruler.cash .bar i{background:var(--down);opacity:.8}
.ruler.cash small{color:var(--down);font-weight:700}
.ruler.maxed small,.ruler.full small{color:var(--accent-text);font-weight:700}
.item.over > :not(.px){opacity:1}
.item.over .nm,.item.over .px b{color:var(--muted)}
.star{color:var(--gold-text)}
.banner{background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 45%,var(--line));color:var(--ink)}

/* filter sheet */
.fsheet{width:min(520px,100%)}
.fset{border:0;margin:16px 0 0;padding:0}
.fset legend{font-weight:700;margin-bottom:8px;padding:0}
.segctl{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--raised);border-radius:12px;padding:3px;gap:3px}
.segctl label{position:relative}
.segctl input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.segctl span{display:grid;place-items:center;min-height:42px;border-radius:9px;font-size:14px;font-weight:650;color:var(--muted)}
.segctl input:checked + span{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0 / .12)}
.segctl input:focus-visible + span{outline:2px solid var(--focus);outline-offset:1px}
.sw{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;border-bottom:1px solid var(--line);cursor:pointer}
.sw > span{display:grid;gap:2px}
.sw small{color:var(--subtle);font-size:13px}
.sw input{appearance:none;-webkit-appearance:none;flex:none;width:50px;height:30px;border-radius:15px;background:#c3c7cf;position:relative;cursor:pointer;transition:background-color .2s;margin:0}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0 / .25);transition:transform .2s var(--ease)}
.sw input:checked{background:var(--ink)}
.sw input:checked::after{transform:translateX(20px)}
.sw input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* item sheet: ruler under the stepper; two columns on wide screens */
.acts #tot{font-size:14px;color:var(--muted)}
.acts #tot b{color:var(--ink)}
.acts #tot .ruler{margin:0 0 6px}
.acts #tot .ruler .bar{width:100%;height:6px;margin:0}
.qty input{border-color:var(--field)}
@media (min-width:760px){
  .scrim{align-items:center}
  .sheet{border-radius:20px;border-bottom:1px solid var(--line);max-height:88dvh}
  .sheet::before{display:none}
  .sheet:has(> .v-hero){width:min(880px,100%);display:grid;grid-template-columns:300px 1fr;column-gap:28px;align-items:start}
  .sheet:has(> .v-hero) > .v-hero{grid-row:1/span 30;width:100%;margin:8px 0 0;position:sticky;top:0}
  .sheet:has(> .v-hero) > .close{grid-column:2;justify-self:end}
  .sheet:has(> .v-hero) > :not(.v-hero):not(.close){grid-column:2}
  .acts{position:static;margin:16px 0 0;padding:14px 0 0;background:none;backdrop-filter:none}
}

/* My team summary */
.teamsum .tsrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.progress{position:relative}
.progress em{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.5}
.progress i{background:#5b6070}
.vault .progress i,.missions .progress i{background:var(--accent)}

/* head-to-head: a vault object */
.h2h{background:var(--bg);border-color:var(--bg)}
.h2h.vault .k{color:var(--muted)}
.vs b{font-size:36px}

/* Binder: the vault panel */
.binderwrap{margin:0 -16px;padding:16px 16px 20px;background:var(--bg);color:var(--ink);border-radius:0}
@media (min-width:752px){.binderwrap{margin:0;border-radius:18px}}
.binderwrap .subtle{color:var(--subtle)}

/* reveals sit in the vault */
.sheet.vault{background:var(--surface);border-color:var(--line)}

/* home */
.missions{border-color:var(--line)}
.aspill{background:var(--surface)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--field)}}
.gamepill{color:var(--ink);gap:7px}
.gamepill .gdot{width:8px;height:8px;border-radius:50%;background:var(--c)}
.lgrow{grid-template-columns:40px 1fr auto!important}
.rankb{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--night);color:var(--gold);font-weight:800;font-size:15px}
.gpk.ready{background:var(--gold-soft);border-color:color-mix(in oklab,var(--gold) 55%,var(--line))}
/* a11y gate fixes */
.h2h .row{flex-wrap:wrap;gap:2px 10px}
.lrow .v small{white-space:normal}
details > summary{min-height:44px;display:flex;align-items:center}
.minis:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.logo{display:inline-flex;align-items:center;min-height:44px}
.item .nm,.arow .nm,.v-cap-n,.revcap b{line-height:1.3}
.aichip{font-size:11px}
.mini .mininew{font-size:11px}
.rules li{max-width:31em}
/* break-ui fixes (worst case: 76-char sealed names, 24-char player names, 40-char league names, 15 items) */
.item .nm,.lrow > div,.sheet h2,.mrow .meta,.v-cap-n,.mhead h1,.arow .nm{overflow-wrap:anywhere}
.lrow > div{min-width:0}
details.missions > summary{display:block}
.mhead h1{font-size:clamp(21px,6.4vw,26px)}
.tabs button{white-space:nowrap}
@media (max-width:359px){.tabs button{font-size:11px}}
/* mobile-native pass: taps fire immediately; controls don't select their label or pop the long-press callout */
button,a,[role=button],summary,.v-pocket,.v-spine,.v-box{touch-action:manipulation}
button.item,a.item,.v-pocket,.v-spine,.v-box,.fbtn,.sort select,.segctl label,.sw{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (min-width:760px){
  .sheet:has(> .v-hero) > .pill{justify-self:start;margin-top:10px}
  .sheet:has(> .v-hero) > .watchsm{justify-self:start;float:none;margin-top:8px}
}
.actrow .qty input{min-width:0;padding:0 2px;font-size:18px}
.toast{background:var(--raised);color:var(--ink);border:1px solid var(--line);box-shadow:inset 3px 0 0 var(--accent),0 12px 30px -10px rgb(0 0 0/.7)}
/* Missions: a chevron says it opens and closes (Lior 2026-11-02) */
.missions .chev{display:inline-block;width:8px;height:8px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.missions[open] .chev{transform:translateY(1px) rotate(-135deg)}
/* Quantity boxes have their own - and + buttons: no browser spinner arrows, number centred */
.qty input{-moz-appearance:textfield;appearance:textfield;text-align:center}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Home league card: label the value */
.lgval .lglbl{display:block;font-size:11px;font-weight:600;color:var(--subtle);text-transform:none}
/* Market: show more */
.more{display:grid;justify-items:center;gap:6px;margin:12px 0}.more small{color:var(--subtle)}
/* Public feed (site/play/feedview.js): Recent + Top, on the homepage and #/feed */
.gf-tabs{margin:0 0 12px;max-width:320px}
.gf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.gf-chips button{min-height:40px;padding:0 14px;border-radius:999px;border:0;background:var(--surface);color:var(--muted);font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:background-color .15s ease,color .15s ease}
.gf-chips button[aria-pressed=true]{background:var(--ink);color:var(--bg);box-shadow:none}
@media (hover:hover){.gf-chips button:hover{color:var(--ink)}.gf-chips button[aria-pressed=true]:hover{color:var(--bg)}}
.gf-list,.gf-board ol{display:grid;margin:0;padding:0;list-style:none;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.gf-row,.gf-board li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.gf-board li{grid-template-columns:44px minmax(0,1fr) auto}
.gf-row:first-child,.gf-board li:first-child{border-top:0}
.gf-row:focus{outline:2px solid var(--focus);outline-offset:-2px}
.gf-row.gold{background:var(--gold-soft)}
.gf-row img,.gf-board img,.gf-ph{width:44px;aspect-ratio:63/88;height:auto;border-radius:5px;background:var(--raised);object-fit:cover;display:block}
.gf-ph{display:grid;place-items:center;font-size:20px;color:var(--gold-text)}
.gf-row b,.gf-board b{display:block;line-height:1.3;font-weight:650;overflow-wrap:anywhere}
.gf-m{font-size:13px;color:var(--subtle);margin-top:2px;overflow-wrap:anywhere}
.gf-v{color:var(--gold-text);font-weight:800}
.gf-who{font-weight:750;color:var(--ink)}
.gf-ai{display:inline-block;margin-left:5px;padding:0 6px;border-radius:5px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:11px;font-weight:800;line-height:18px;vertical-align:1px;white-space:nowrap}
.gf-watch{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0 -10px;font-size:14px;font-weight:700;color:var(--mint,#5cf2c2)}
.gf-n{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.gf-boards{display:grid;gap:18px}
.gf-board h3{margin:0 0 8px;font-size:15px;font-weight:750;color:var(--muted)}
.gf-more{margin:12px 0 0;width:100%}
.gf-empty{margin:0;padding:18px;color:var(--subtle);background:var(--surface);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}

/* A league-mate's uploaded photo is a button: tap to report it */
.avrep{all:unset;cursor:pointer;display:inline-flex;vertical-align:middle;border-radius:50%}
.avrep:focus-visible{outline:2px solid var(--focus,#5cf2c2);outline-offset:2px}

/* Design pass 2026-11-03: one Next-up line, then the extras as a strip of buttons (each opens a sheet), then the list. */
.nextslot{display:flex;align-items:center;gap:12px;padding:12px 14px}
.nextslot .nsic{font-size:22px;line-height:1}
.nextslot>div{flex:1;min-width:0}.nextslot b{display:block;line-height:1.3}.nextslot small{display:block;color:var(--subtle);margin-top:2px}
.pstrip{display:flex;gap:8px;overflow-x:auto;margin:0 0 12px;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pstrip::-webkit-scrollbar{display:none}
.pchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px/1 var(--body,inherit);cursor:pointer;transition:background-color .15s ease}
.pchip b{font-weight:800;color:var(--accent-text,var(--accent))}
@media (hover:hover){.pchip:hover{background:var(--raised)}}
.pchip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.panelsheet .panelbody>.card{margin:48px 0 0;border:0;background:transparent;padding:0;box-shadow:none}
/* Want list (2026-11-03): who needs a card you hold, and the "Need" mark on a missing binder pocket. */
.needtag{display:inline-block;margin:2px 0 1px;font:700 12px/1.3 var(--body,inherit);color:var(--up)}
.needbox{margin:14px 0 0;padding:12px 14px;border-radius:14px;background:color-mix(in oklab,var(--up) 12%,var(--surface));border:1px solid color-mix(in oklab,var(--up) 40%,var(--line))}
.needbox b{color:var(--ink)}
/* Market stock and drops (functions/_stock.ts) */
.tag.drop{color:var(--new-text)}
.tag.few{color:var(--heat-text)}
.tag.out{color:var(--subtle)}
.stockline{margin:10px 0 0;font-size:14px;color:var(--muted)}
.stockline.few b{color:var(--heat-text)}
.stockline.out{color:var(--subtle);font-weight:650}
.drops .dhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.drops h2{margin:0;font-size:18px}
.drops .list{margin-top:8px}
/* Duplicate trade-in */
.splist{display:flex;flex-direction:column;gap:6px;margin:10px 0 14px}
.sprow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;min-height:44px}
.sprow input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.sprow .mid{flex:1;min-width:0;display:flex;flex-direction:column}
.sprow .mid b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sprow .pts{font-weight:700;white-space:nowrap}
/* Collector's shelf (#/c/<id>) */
.shelfhead{display:flex;gap:16px;align-items:center}
.shelfhead h1{margin:2px 0;font-size:28px;overflow-wrap:anywhere}
.shelfstats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.shelfstats div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column}
.shelfstats b{font-size:24px;font-family:var(--display, inherit)}
.shelfstats span{color:var(--muted);font-size:13px}
.shelfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.shelfcard{display:flex;flex-direction:column;gap:2px;color:var(--ink);text-decoration:none;min-width:0}
.shelfcard img{width:100%;height:auto;aspect-ratio:63/88;object-fit:cover;border-radius:10px;background:var(--raised);margin-bottom:6px}
.shelfcard b{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.shelfcard .px{font-weight:700;color:var(--gold-text)}
.shelfset{margin:6px 0 12px}
.shelfbadges{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:640px){.shelfstats{grid-template-columns:repeat(4,1fr)}}
.shelfrow{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}.shelfrow b{min-width:0;overflow-wrap:anywhere}
.shelflink{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in oklab,currentColor 40%,transparent);text-underline-offset:3px}.shelflink:hover{text-decoration-color:currentColor}
/* Neo's quick fixes (2026-11-05) */
/* a tapped tab answers at once */
.tabs button:active{color:var(--ink);background:var(--raised)}
/* loading skeletons: a screen never sits empty while it loads */
.skel{display:grid;gap:12px}
.skel .skcard,.skel .skline,.skel .skrow i,.skel .skcover,.skel .skgrid i{background:linear-gradient(100deg,var(--surface) 30%,var(--raised) 50%,var(--surface) 70%);background-size:300% 100%;animation:skel 1.3s linear infinite;border-radius:12px}
.skel .skcard{height:150px}
.skel .skline{height:56px}
.skel .skrow{display:flex;gap:8px}.skel .skrow i{display:block;width:110px;height:40px;border-radius:999px}
.skel .skcover{height:74px}
.skel .skgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.skel .skgrid i{display:block;aspect-ratio:63/88;border-radius:8px}
@keyframes skel{from{background-position:100% 0}to{background-position:-200% 0}}
/* desktop: the tabs move up into the header and the column widens (Neo: the desktop layout was a stretched phone) */
@media (min-width:1024px){
  :root{--tabh:0px}
  .top > .wrap{max-width:1180px}
  main .wrap{max-width:880px}
  #mast .wrap,#mast > *{max-width:880px;margin-left:auto;margin-right:auto}
  .tabs{position:absolute;top:env(safe-area-inset-top);bottom:auto;left:50%;right:auto;transform:translateX(-50%);background:none;border:0;padding:0;z-index:12}
  .tabs .wrap{display:flex;gap:4px;max-width:none;padding:6px 0 0}
  .tabs button{flex-direction:row;min-height:44px;padding:0 14px;border-radius:10px;font-size:14px;gap:8px}
  .tabs button svg{width:18px;height:18px}
  .tabs button[aria-current=page]{box-shadow:none;background:var(--surface)}
  @media (hover:hover){.tabs button:hover{color:var(--ink);background:var(--surface)}}
  .toast{bottom:24px}.update{bottom:20px}
  main{padding-bottom:48px}
}

/* Modal scrollbars (Lior 2026-11-05): a thin rounded thumb that sits inside the sheet, clear of its rounded corners,
   instead of the browser's grey bar pinned to the edge. Covers the sheet itself and every vertical scroller inside it. */
.scrim ::-webkit-scrollbar,.scrim::-webkit-scrollbar{width:12px;height:12px}
.scrim ::-webkit-scrollbar-track{background:transparent;margin:18px 0}
.scrim ::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--subtle) 38%,transparent);background-clip:padding-box;border:4px solid transparent;border-radius:99px}
.scrim ::-webkit-scrollbar-thumb:hover{background-color:color-mix(in oklab,var(--subtle) 62%,transparent)}
.scrim ::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){.scrim *{scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--subtle) 45%,transparent) transparent}}

/* Account > Links (rules, privacy, contact, feedback) */
.card.links{padding:12px 0 4px}
.card.links > .k{display:block;padding:0 16px 4px}
.lnk{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:12px 16px;border:0;border-top:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.card.links > .k + .lnk{border-top:0}
.lnk b{display:block;font-weight:700}
.lnk small{display:block;color:var(--subtle);font-size:13px}
.lnk .wi{font-size:18px;text-align:center}
.lnk .chev{color:var(--subtle);font-size:22px;line-height:1}
@media (hover:hover) and (pointer:fine){.lnk:hover{background:color-mix(in oklab,var(--accent) 6%,transparent)}}
.lnk:active{background:color-mix(in oklab,var(--accent) 10%,transparent)}
.backlnk{display:inline-block;margin:0 0 10px;color:var(--subtle);text-decoration:none;font-weight:600}

/* A toast that takes you somewhere: text + one button on the right */
.toast.has-go{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;width:max-content}
.toast .tgo{flex:none;min-height:36px;padding:0 12px;border:0;border-radius:9px;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:750;font-size:14px;cursor:pointer;white-space:nowrap}
.toast .tgo:active{transform:scale(.97)}

/* What's new since your last visit */
.newsheet h2{margin:2px 0 12px}
.newlist{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:2px}
.newlist li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.newlist li:first-child{border-top:0}
.newlist .ni{font-size:20px;text-align:center}
.newlist .nt{line-height:1.4}
.newlist .btn.sm{min-height:36px;padding:0 12px;font-size:14px;white-space:nowrap}
/* Last copy shown while the fresh league data loads (leagueView, 2026-11-11): a thin moving bar; the screen stays usable */
#view.is-stale::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:linear-gradient(90deg,transparent,#e0a82e,transparent) no-repeat;background-size:50% 100%;animation:gd-stale 1.1s linear infinite}
@keyframes gd-stale{from{background-position:-60% 0}to{background-position:160% 0}}
@media (prefers-reduced-motion:reduce){#view.is-stale::before{animation:none;background:#e0a82e;opacity:.6}}