/* Single dark look on purpose: true black for an OLED display. */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root{
  color-scheme: dark;
  --ground:#000000; --surface:#0a0a0c; --raise:#141519; --line:#24252b; --line-2:#34363e;
  --text:#f4f0e6; --muted:#a4a6ae; --faint:#6e7179;
  --accent:#f2c14e; --accent-ink:#161005;
  --owned:#7fe0ae; --owned-bg:#0f2a1e;
  --series-value:#b8801c; --series-paid:#5b8fe8;
  --cond:"Big Shoulders Display", "Arial Narrow", ui-sans-serif, sans-serif;
  --serif:"Instrument Serif", Georgia, serif;
  --body:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --maxw: 4300px;
}
@supports (color: color(display-p3 1 1 1)) { :root { --accent: color(display-p3 1 0.78 0.27); --owned: color(display-p3 0.5 0.93 0.68); } }
html{font-size:clamp(15px, 0.34vw + 9px, 22px);background:var(--ground)}
body{background:var(--ground);color:var(--text);font-family:var(--body);font-size:1rem;line-height:1.5;padding-inline:clamp(16px,3.2vw,120px);padding-block:0 6rem;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.wrap{max-width:var(--maxw);margin-inline:auto;position:relative;z-index:1}
.cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cap.gold{color:var(--accent)}

/* Contour field behind everything */
.field{position:fixed;inset:-6%;z-index:0;pointer-events:none;background:url("../art/contours.svg") center/cover no-repeat;opacity:.075;animation:drift 90s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-1.5%,0,0) scale(1.02)}to{transform:translate3d(1.5%,-1%,0) scale(1.06)}}

/* Header */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding-block:1rem;background:linear-gradient(#000 70%, rgba(0,0,0,0))}
.brand{font-family:var(--cond);font-weight:900;font-size:1.6rem;letter-spacing:.02em;text-transform:uppercase;line-height:.9;display:flex;align-items:center;gap:.7rem}
.brand small{display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;font-size:1rem;letter-spacing:0;color:var(--accent)}
.brand i{display:inline-block;width:1rem;height:1.35rem;border:2px solid var(--accent);border-radius:3px;position:relative}
.brand i::after{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:1px;background:var(--accent)}
.tabs{display:flex;gap:.25rem;padding:.3rem;border:1px solid var(--line);border-radius:999px;background:rgba(10,10,12,.7);backdrop-filter:blur(10px)}
.tab{min-height:2.6rem;padding:0 1.1rem;border-radius:999px;border:0;background:transparent;color:var(--muted);font-family:var(--cond);font-weight:800;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase}
.tab:hover{color:var(--text)}
.tab[aria-current="page"]{background:var(--text);color:#000}
.bar-actions{display:flex;justify-content:flex-end;gap:.5rem}
.btn{min-height:2.75rem;padding:0 1.2rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(10,10,12,.6);font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:.5rem}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.btn svg{width:1.1rem;height:1.1rem}
.icon-btn{width:2.75rem;height:2.75rem;border-radius:999px;border:1px solid var(--line-2);background:rgba(10,10,12,.7);display:inline-flex;align-items:center;justify-content:center;padding:0}
.icon-btn svg{width:1.2rem;height:1.2rem}
.icon-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}

/* Ticker */
.ticker{position:relative;z-index:1;overflow:hidden;border-block:1px solid var(--line);margin-inline:calc(-1 * clamp(16px,3.2vw,120px));white-space:nowrap;padding-block:.6rem}
.ticker-track{display:inline-flex;gap:3rem;animation:tick 80s linear infinite;padding-left:3rem}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.tk{display:inline-flex;align-items:baseline;gap:.8rem;font-family:var(--cond);font-weight:800;font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase}
.tk .mono{font-size:.9rem;font-weight:600;letter-spacing:0}
.tk .up{color:var(--accent)}
.tk .dn{color:#9fb8ff}
.tk::after{content:"✦";color:var(--faint);margin-left:3rem;font-size:.8rem}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,3vw,120px);align-items:end;padding-block:clamp(32px,min(5vw,7vh),140px) clamp(16px,min(2.5vw,3vh),72px)}
@media (min-width: 2400px){ .display{white-space:nowrap} .hero .lede{max-width:70ch} }
.hero.solo{grid-template-columns:minmax(0,1fr) auto}
.display{margin:.6rem 0 0;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(64px,min(8.6vw,14vh),380px);line-height:.82;letter-spacing:-.005em;text-wrap:balance}
.display em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--accent);letter-spacing:-.02em;font-size:.86em}
.reveal{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{clip-path:inset(0 0 100% 0);transform:translateY(.12em)}to{clip-path:inset(0 0 0 0);transform:none}}
.lede{margin:1.4rem 0 0;max-width:52ch;font-size:1.05rem;color:var(--muted)}
.cover{width:100%;height:auto;max-height:34vh;object-fit:contain;object-position:right bottom;display:block;border-radius:6px}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.4rem;margin-top:2rem}
.stat{display:flex;flex-direction:column;gap:.15rem}
.stat b{font-family:var(--cond);font-weight:800;font-size:2.3rem;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ring{display:flex;align-items:center;gap:1rem}
.ring svg{width:4.2rem;height:4.2rem}

.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-top:clamp(28px,3vw,80px)}
.section-head h2{margin:0;font-family:var(--cond);font-weight:900;font-size:clamp(34px,2.6vw,96px);text-transform:uppercase;line-height:.9}
.section-head h2 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--accent)}

.grid{display:grid;gap:clamp(28px,2.4vw,80px) clamp(20px,1.8vw,56px);padding-block:1.4rem}
.grid.pairs{grid-template-columns:repeat(auto-fill,minmax(min(100%,34rem),1fr))}
.grid.pairs.five{grid-template-columns:repeat(auto-fill,minmax(min(100%,34rem),1fr))}
@media (min-width: 3200px){ .grid.pairs.five{grid-template-columns:repeat(5,minmax(0,1fr))} }
.grid.singles{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.grid.products{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.empty{padding:2.5rem;border:1px dashed var(--line-2);border-radius:18px;color:var(--muted);text-align:center}

/* Tiles */
.tile{display:flex;flex-direction:column;gap:1rem;padding:0;border:0;background:none;text-align:left;--tx:0deg;--ty:0deg;--gx:50%;--gy:50%;--ga:0}
.tile-art{position:relative;display:flex;align-items:center;justify-content:center;transform:perspective(1200px) rotateX(var(--tx)) rotateY(var(--ty));transition:transform .2s ease-out, filter .35s;filter:drop-shadow(0 1.4rem 2rem rgba(0,0,0,.95))}
.tile-art img{display:block;width:100%;height:auto;aspect-ratio:734/1024;object-fit:cover;border-radius:4.8%/3.4%;transition:filter .4s ease}
.tile-art.pair img{width:50%;border-radius:4.8%/3.4%}
.tile-art.own img{border-radius:10px;object-fit:contain}
.tile-art.product{aspect-ratio:1/1;width:100%}
.tile-art.product img{position:absolute;left:6%;top:6%;width:88%;height:88%;aspect-ratio:auto;object-fit:contain;border-radius:0}
.tile.wish .tile-art img{filter:saturate(.6) brightness(.66)}
.tile.wish:hover .tile-art img,.tile.wish:focus-visible .tile-art img{filter:none}
.tile-glare{position:absolute;inset:0;pointer-events:none;border-radius:4.8%/3.4%;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.55),rgba(255,255,255,0) 55%);mix-blend-mode:soft-light;opacity:var(--ga);transition:opacity .18s}
.tile-art.pair .tile-glare{border-radius:2.4%/3.4%}
.tile-art.product .tile-glare{display:none}
/* living foil frame: always on owned cards, on hover for the rest */
.tile-art::before{content:"";position:absolute;inset:-5px;border-radius:calc(4.8% + 4px)/calc(3.4% + 4px);padding:2px;background:conic-gradient(from var(--ang),#ffd76e,#86ffc9,#74c8ff,#c79bff,#ff8aa0,#ffd76e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s;animation:spinang 6s linear infinite;pointer-events:none}
.tile-art.pair::before{border-radius:calc(2.4% + 3px)/calc(3.4% + 4px)}
.tile-art.product::before{display:none}
.tile:hover .tile-art::before,.tile:focus-visible .tile-art::before{opacity:.75}
.tile.owned .tile-art::before{opacity:1}
/* Build 11: a hidden frame doesn't spin (it was repainting every tile, every frame) */
.tile-art::before{animation-play-state:paused}
.tile:hover .tile-art::before,.tile:focus-visible .tile-art::before,.tile.owned .tile-art::before{animation-play-state:running}
@keyframes spinang{to{--ang:360deg}}
.tile-noimg{width:100%;aspect-ratio:734/1024;border-radius:4.8%/3.4%;border:1px dashed var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.85rem;text-align:center;padding:12px;box-sizing:border-box}
.tile-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;align-items:baseline}
.tile-name{font-family:var(--cond);font-weight:800;font-size:1.45rem;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.tile-price{font-family:var(--cond);font-weight:800;font-size:1.45rem;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.tile-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tile-note{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);text-align:right}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;background:var(--raise);color:#d9dbe0;white-space:nowrap}
.pill.owned{background:var(--owned-bg);color:var(--owned)}
.pill.sold{background:#23202a;color:#c9b8ff}
.pill.watch{background:transparent;border:1px solid var(--line-2)}

/* Portfolio */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.9rem;padding-block:.5rem 1.4rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem;display:flex;flex-direction:column;gap:.4rem}
.kpi span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kpi b{font-family:var(--cond);font-weight:800;font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums}
.kpi small{font-size:.78rem;color:var(--faint)}
.panel-card{background:rgba(10,10,12,.85);border:1px solid var(--line);border-radius:18px;padding:1.6rem;display:flex;flex-direction:column;gap:1rem;margin-block:.8rem 1.4rem}
.panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.8rem}
.panel-head h2{margin:0;font-family:var(--cond);font-weight:900;font-size:2rem;text-transform:uppercase;line-height:1}
.panel-head p{margin:.35rem 0 0;color:var(--muted);font-size:.9rem;max-width:70ch}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.4rem}
.seg{display:inline-flex;gap:.25rem;padding:.25rem;border:1px solid var(--line);border-radius:999px}
.seg button{min-height:2.3rem;padding:0 .9rem;border:0;border-radius:999px;background:transparent;font-weight:700;font-size:.82rem;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--text);color:#000}
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;overflow:visible}
.chart .tip{position:absolute;pointer-events:none;background:#0f1013;border:1px solid var(--line-2);border-radius:10px;padding:.6rem .8rem;font-size:.82rem;min-width:10rem;box-shadow:0 10px 30px rgba(0,0,0,.6);transform:translate(-50%,-110%);white-space:nowrap}
.chart .tip b{display:block;font-family:var(--mono);font-size:.75rem;color:var(--muted);font-weight:400;margin-bottom:.25rem}
.chart .tip div{display:flex;justify-content:space-between;gap:1rem}
.chart .tip i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:.5rem}
.legend i{display:inline-block;width:18px;height:0;border-top:2px solid}
table{width:100%;border-collapse:collapse;font-size:.9rem}
.table-wrap{overflow-x:auto}
th{text-align:left;font-family:var(--mono);font-weight:400;color:var(--muted);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:.6rem .75rem;border-bottom:1px solid var(--line)}
td{padding:.75rem;border-bottom:1px solid var(--line);vertical-align:middle}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.mover{display:flex;align-items:center;gap:.75rem}
.mover img{width:2.2rem;height:auto;border-radius:3px}
.meter{height:.7rem;border-radius:999px;background:var(--raise);overflow:hidden;display:flex}
.meter i{display:block;height:100%}
details.tbl summary{cursor:pointer;color:var(--muted);font-size:.9rem;min-height:2rem}

/* Deal check */
.deal{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.4rem;align-items:start}
.field-l{display:flex;flex-direction:column;gap:.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field-l input,.field-l select,.field-l textarea{font-family:var(--body);letter-spacing:0;text-transform:none;min-height:2.8rem;border-radius:12px;border:1px solid var(--line-2);background:#0d0e11;padding:.6rem .9rem;color:var(--text);font-size:1rem}
.field-l textarea{min-height:10rem;resize:vertical;line-height:1.45}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.drop{border:1.5px dashed var(--line-2);border-radius:14px;padding:1rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;color:var(--muted);font-size:.9rem;min-height:4.2rem}
.drop.over{border-color:var(--accent);color:var(--text)}
.drop img{width:4.2rem;height:4.2rem;object-fit:cover;border-radius:8px}
.gauge{position:relative;height:3.6rem;margin-top:1.4rem}
.gauge .track{position:absolute;left:0;right:0;top:1.5rem;height:.5rem;border-radius:999px;background:var(--raise)}
.gauge .band{position:absolute;top:1.5rem;height:.5rem;background:var(--accent);opacity:.85;border-radius:999px}
.gauge .mk{position:absolute;top:.9rem;width:2px;height:1.7rem;background:var(--text)}
.gauge .mk span{position:absolute;top:-1.15rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.7rem;white-space:nowrap;color:var(--muted)}
.gauge .mk.ask{background:#9fb8ff}
.gauge .mk.ask span{top:2rem;color:#c9d6ff}
.verdict{font-family:var(--cond);font-weight:900;font-size:2.6rem;line-height:1;text-transform:uppercase}
.msg{white-space:pre-wrap;background:#0d0e11;border:1px solid var(--line);border-radius:12px;padding:1rem;font-size:.95rem;line-height:1.5}
.flags{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.ai-out{display:flex;flex-direction:column;gap:1rem}

/* Stage */
.stage{position:fixed;inset:0;z-index:50;background:#000;display:flex;justify-content:center}
.stage[hidden]{display:none!important}
.stage-inner{width:min(100%, max(2700px, 180vh));display:grid;grid-template-columns:minmax(0,1fr) minmax(22rem, 27rem);height:100%}
.viewport{position:relative;overflow:hidden;touch-action:none;cursor:grab;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none}
.viewport.dragging{cursor:grabbing}
.spot{position:absolute;left:50%;top:50%;width:90%;height:80%;transform:translate(-50%,-48%);background:radial-gradient(closest-side,rgba(242,193,78,.08),rgba(0,0,0,0));pointer-events:none}
.rig{perspective:2000px;margin-top:-4vh}
.obj{position:relative;transform-style:preserve-3d;will-change:transform;--h:640px;--gx:50%;--gy:50%;--ga:0;--hp:50%;--ho:0}
.face{display:flex;height:var(--h);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.front{position:relative;transform:translateZ(var(--dz,1.4px))}
.face.back{position:absolute;inset:0;transform:rotateY(180deg) translateZ(var(--dz,1.4px))}
.half{position:relative;height:100%;flex:0 0 auto;transition:transform .85s cubic-bezier(.2,.9,.25,1.12)}
.half img{display:block;height:100%;width:auto;-webkit-user-drag:none;pointer-events:none;border-radius:4.8%/3.4%}
.face.back .half{flex:1 1 0}
.face.back .half img{width:100%;object-fit:cover}
.half.own img{border-radius:10px}
.obj.product .half img{border-radius:0}
.obj.apart .face.front .half:first-child{transform:translateX(-14%)}
.obj.apart .face.front .half:last-child{transform:translateX(14%)}
.obj.apart .face.back .half:first-child{transform:translateX(-14%)}
.obj.apart .face.back .half:last-child{transform:translateX(14%)}
.obj.apart .slice{opacity:0;transition-delay:0s}
.slice{position:absolute;inset:0;border-radius:4.8%/3.4%;background:#d7d3ca;transition:opacity .3s .55s}
.slice.core{background:#1b1b1d}
.obj.is-pair .slice{border-radius:2.4%/3.4%}
.obj.is-own .slice{border-radius:10px}
.obj.product .slice{border-radius:3px}
.fx{position:absolute;inset:0;pointer-events:none;border-radius:4.8%/3.4%}
.holo{background:repeating-linear-gradient(115deg,#ff8a8a 0%,#ffd76e 6%,#86ffc9 12%,#74c8ff 18%,#c79bff 24%,#ff8a8a 30%);background-size:320% 320%;background-position:var(--hp) 50%;mix-blend-mode:color-dodge;opacity:var(--ho)}
.glare{background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.7),rgba(255,255,255,0) 50%);mix-blend-mode:soft-light;opacity:var(--ga)}
.half.own .fx{border-radius:10px}
.obj.product .fx{border-radius:0}
.seamflash{position:absolute;top:3%;bottom:3%;left:50%;width:2px;margin-left:-1px;background:linear-gradient(180deg,#74c8ff,#c79bff,#ff8a8a,#ffd76e,#86ffc9);opacity:0;pointer-events:none;transform:translateZ(2px)}
.seamflash.go{animation:seam 1s ease-out .6s}
@keyframes seam{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.tickmark{position:absolute;left:50%;width:1px;height:1.1rem;margin-left:-.5px;background:var(--accent);opacity:.9;transition:opacity .4s .7s}
.tickmark.t{top:-1.6rem}.tickmark.b{bottom:-1.6rem}
.obj.apart .tickmark{opacity:0;transition-delay:0s}
.side{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back-blank{height:100%;aspect-ratio:734/1024;box-sizing:border-box;border-radius:4.8%/3.4%;background:#0e0f12;border:1px solid #2a2b31;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:12%;text-align:center;color:var(--muted);font-size:clamp(11px,1.4vh,16px)}
.back-blank strong{color:var(--text);font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1.6em}
.obj.product .back-blank{border-radius:3px}

.chips{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 6.2rem);transform:translateX(-50%);display:flex;gap:2.4rem;align-items:flex-end;pointer-events:none;white-space:nowrap}
.chip{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.chip b{font-family:var(--cond);font-weight:800;font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.chip span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chip.gold b{color:var(--accent)}
.joinbar{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 1.2rem);transform:translateX(-50%);display:flex;gap:.5rem}
.joinbtn{min-height:3rem;padding:0 1.6rem;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font-family:var(--cond);font-weight:900;font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 0 6px rgba(242,193,78,.12)}
.joinbtn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2);box-shadow:none}
.stage-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 1.2rem);left:1.2rem;right:1.2rem;display:flex;justify-content:space-between;align-items:center;gap:.8rem;pointer-events:none}
.stage-top > *{pointer-events:auto}
.count{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 1.2rem);text-align:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#5e616a;pointer-events:none}
.controls{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 2.6rem);transform:translateX(-50%);display:flex;gap:.3rem;padding:.3rem;border:1px solid var(--line);border-radius:999px;background:rgba(10,10,12,.85);backdrop-filter:blur(8px)}
.ctl{min-height:2.75rem;min-width:2.75rem;padding:0 .9rem;border:0;border-radius:999px;background:transparent;font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.ctl:hover{background:var(--raise)}
.ctl[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.ctl svg{width:1.1rem;height:1.1rem}
.stage.clean .panel,.stage.clean .controls,.stage.clean .hint,.stage.clean .count,.stage.clean .chips,.stage.clean .joinbar{display:none}
.stage.clean .stage-inner{grid-template-columns:minmax(0,1fr);width:100%}
.stage.clean.idle{cursor:none}
.stage.clean.idle .stage-top{opacity:0;transition:opacity .6s}
.showcase-cap{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 3rem);text-align:center;pointer-events:none;display:none}
.stage.showcase .showcase-cap{display:block}
.showcase-cap b{display:block;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3vw,110px);line-height:.9}
.showcase-cap span{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.panel{border-left:1px solid var(--line);background:var(--surface);overflow-y:auto;padding:5rem 1.8rem 2.5rem;display:flex;flex-direction:column;gap:1.4rem}
.panel h2{margin:0;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:2.6rem;line-height:.9}
.panel .sub{color:var(--muted);font-size:.95rem;margin-top:.5rem}
.facts{display:flex;flex-direction:column}
.facts h3{margin:0 0 .3rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
.fact{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.fact span:first-child{color:var(--muted);font-size:.88rem}
.fact .mono{font-weight:600;font-size:.95rem;text-align:right}
.fact .gold{color:var(--accent)}
.fact .green{color:var(--owned)}
.links{display:flex;flex-wrap:wrap;gap:.5rem}
.links a{min-height:2.5rem;display:inline-flex;align-items:center;padding:0 .9rem;border-radius:999px;border:1px solid var(--line-2);color:var(--text);text-decoration:none;font-size:.85rem;font-weight:700}
.links a:hover{border-color:var(--accent);color:var(--accent)}
.block{display:flex;flex-direction:column;gap:.75rem}
.block h3{margin:0;font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1.4rem}
.block p{margin:0;color:var(--muted);font-size:.88rem}
.slotrow{display:flex;flex-direction:column;gap:.5rem}
.slotrow-label{font-size:.88rem;font-weight:600}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.slot{display:flex;flex-direction:column;gap:.4rem}
.slot-box{aspect-ratio:3/4;border-radius:10px;border:1px dashed #3a3b42;background:#0f1013;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:.82rem;color:var(--muted);text-align:center;padding:0}
.slot-box img{width:100%;height:100%;object-fit:cover}
.slot-box.filled{border-style:solid}
.mini{min-height:2.25rem;border-radius:8px;border:1px solid var(--line-2);background:transparent;font-size:.82rem;font-weight:700;padding:0 .75rem}
.mini:hover{border-color:var(--accent)}
.toggle{display:flex;align-items:center;gap:.6rem;font-size:.88rem;min-height:2.75rem}
.toggle input{width:1.2rem;height:1.2rem;accent-color:var(--accent)}
.status{font-size:.82rem;color:var(--accent);min-height:1.2em}
form.f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
form.f .full{grid-column:1 / -1}
form.f label{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;color:var(--muted)}
form.f input,form.f select{min-height:2.6rem;border-radius:10px;border:1px solid var(--line-2);background:#0f1013;padding:0 .75rem;color:var(--text);font-size:.95rem}
form.f .actions{grid-column:1 / -1;display:flex;gap:.5rem;flex-wrap:wrap}
.confirm{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.88rem}
.spark{min-height:8rem}

/* Build 12: the live card, a WebGL canvas over the viewer; the DOM card underneath hides once the live one has drawn, and
   keeps its layout so taps, the loupe and the glow still find it */
.live{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .35s ease;display:block}
.viewport.live-on .live{opacity:1}
.viewport.live-on .obj .face,.viewport.live-on .obj .slice,.viewport.live-on .obj .side{visibility:hidden}
.live-note{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 6.4rem);transform:translate(-50%,.4rem);padding:.35rem .8rem;border-radius:999px;background:rgba(10,10,12,.7);border:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
.live-note.on{opacity:1;transform:translate(-50%,0)}
html[data-lay="phone"] .live-note{bottom:calc(env(safe-area-inset-bottom,0px) + 4.6rem)}
/* Menu overlay */
.menu{position:fixed;inset:0;z-index:70;background:#000;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;padding:6rem clamp(16px,5vw,200px) 3rem;align-items:center}
.menu[hidden]{display:none!important}
.menu-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:40rem}
.menu-art img{width:100%;border-radius:4.8%/3.4%;filter:grayscale(1) contrast(1.1) brightness(.8)}
.menu nav{display:flex;flex-direction:column;align-items:flex-end}
.menu nav button{border:0;background:none;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(56px,7vw,300px);line-height:.88;color:var(--text);padding:0;text-align:right;position:relative}
.menu nav button:hover{color:var(--accent)}
.menu nav button[aria-current="page"]{color:var(--faint)}
.menu nav button[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;top:52%;height:.06em;background:var(--accent)}
.menu nav small{font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:.1em;margin-top:2rem}

/* Cursor ring */
.cursor{position:fixed;left:0;top:0;z-index:90;width:2.6rem;height:2.6rem;margin:-1.3rem 0 0 -1.3rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);pointer-events:none;transition:width .25s, height .25s, margin .25s, background .25s, border-color .25s;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#000;mix-blend-mode:normal}
.cursor.big{width:5.4rem;height:5.4rem;margin:-2.7rem 0 0 -2.7rem;background:var(--accent);border-color:transparent}
.cursor span{opacity:0;transition:opacity .2s}
.cursor.big span{opacity:1}

/* Add dialog */
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none!important}
.modal-card{width:min(36rem,100%);max-height:90vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.modal-card h2{margin:0;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:2rem}


/* Pokémon color accents */
.tile{position:relative;--c1:#f2c14e;--c2:#f2c14e}
.tile-halo{position:absolute;left:-4%;right:-4%;top:-6%;bottom:-6%;border-radius:40px;background:linear-gradient(90deg,var(--c1),var(--c2));filter:blur(56px);opacity:0;transition:opacity .5s;z-index:-1;pointer-events:none}
.tile:hover .tile-halo,.tile:focus-visible .tile-halo{opacity:.5}
.tile.owned .tile-halo{opacity:.26}
.tile-bar{grid-column:1 / -1;display:block;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--c1) 0 50%,var(--c2) 50% 100%);margin:.1rem 0 .35rem}
.rv{transform:translateY(3.2rem) rotateX(9deg);transform-origin:50% 100%;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.in{transform:none}

/* Stage color field */
.stage-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;--cl:#222;--cr:#222}
.stage-bg .gl,.stage-bg .gr{position:absolute;top:-10%;bottom:-10%;width:55%;opacity:0;transition:opacity 1s ease, transform 1.2s cubic-bezier(.2,.8,.2,1)}
.stage-bg .gl{left:-5%;background:radial-gradient(ellipse 55% 50% at 75% 50%, color-mix(in srgb,var(--cl) 55%,transparent), transparent 72%);transform:translateX(-4%)}
.stage-bg .gr{right:-5%;background:radial-gradient(ellipse 55% 50% at 25% 50%, color-mix(in srgb,var(--cr) 55%,transparent), transparent 72%);transform:translateX(4%)}
.stage.lit .stage-bg .gl,.stage.lit .stage-bg .gr{opacity:.7}
.stage-bg .jl,.stage-bg .jr{position:absolute;top:0;bottom:0;width:50%;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.16,1,.3,1), opacity 1s;opacity:0;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.stage-bg .jl{left:0;transform-origin:100% 50%;background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--cl) 42%,transparent) 100%)}
.stage-bg .jr{right:0;transform-origin:0 50%;background:linear-gradient(270deg,transparent 0%,color-mix(in srgb,var(--cr) 42%,transparent) 100%)}
.stage-bg .seamline{position:absolute;left:50%;top:12%;bottom:12%;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.5),transparent);opacity:0;transition:opacity 1s .4s}
.stage.joined .stage-bg .jl,.stage.joined .stage-bg .jr{transform:scaleX(1);opacity:1}
.stage.joined .stage-bg .gl,.stage.joined .stage-bg .gr{opacity:.25}
.stage.joined .stage-bg .seamline{opacity:.5}
.stage-inner{position:relative;z-index:1}
/* Art glow (Build 10b): light from the card's art fills the viewer out to the screen edges */
.stage-bg .aurabox{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.stage.lit .stage-bg .aurabox{opacity:1}
.stage-bg .aura{position:absolute;left:-3%;top:-7.5%;width:106%;height:115%;display:block;transform-origin:50% 50%;will-change:transform,opacity}
.stage-bg .aura-prism{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.stage-bg.aura-on .gl,.stage-bg.aura-on .gr,.stage-bg.aura-on .jl,.stage-bg.aura-on .jr{display:none}
.stage-bg.aura-on .seamline{left:var(--ax,50%)}
.panel{background:rgba(10,10,12,.92)}
.obj.animating .half{transition:none}
.obj.animating .slice,.obj.animating .tickmark{opacity:0;transition:none}
.scene-copy .display{text-shadow:0 .04em .35em rgba(0,0,0,.85)}
.sweep{position:absolute;left:50%;width:7%;margin-left:-3.5%;height:34%;top:-34%;background:linear-gradient(transparent,rgba(255,255,255,.95),transparent);mix-blend-mode:screen;pointer-events:none;opacity:0;filter:blur(2px)}
.shock{position:absolute;left:0;top:0;width:40vh;height:40vh;margin:-20vh 0 0 -20vh;border-radius:50%;border:2px solid rgba(255,255,255,.7);box-shadow:0 0 40px rgba(255,255,255,.35), inset 0 0 40px rgba(255,255,255,.2);pointer-events:none;opacity:0}

/* Slabs */
.half.slab{aspect-ratio:.611/1;height:100%;position:relative;border-radius:2.4%/1.5%;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,rgba(255,255,255,.1));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4), inset 0 0 22px rgba(255,255,255,.08);padding:4.5% 5.5%;box-sizing:border-box;display:flex;flex-direction:column;gap:3%}
.face.back .half.slab{flex:0 0 auto}
.slab-label{flex:0 0 16.5%;box-sizing:border-box;background:#f7f5ef;border:calc(var(--h) * .006) solid var(--lab,#c8102e);border-radius:1.5%;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;align-items:center;padding:2.5% 4%;color:#141414;gap:0 4%;font-family:var(--body);font-size:calc(var(--h) * .0165);line-height:1.15;overflow:hidden}
.slab-label b{display:block;font-weight:700;letter-spacing:.02em}
.slab-label span{display:block}
.slab-grade{text-align:right;font-weight:800;line-height:1}
.slab-grade span{font-size:.9em;letter-spacing:.04em}
.slab-grade big{display:block;font-size:2.5em;font-family:var(--cond);font-weight:900}
.slab-grader{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.78em;border-top:1px solid #d8d4ca;padding-top:2%;margin-top:2%}
.slab-grader i{display:inline-block;height:1em;width:40%;background:repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 3px,#111 3px 5px,transparent 5px 6px)}
.slab-label.back{grid-template-columns:1fr;text-align:center;font-family:var(--mono)}
.slab-window{flex:1 1 auto;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);border-radius:1.6%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 8px 24px rgba(0,0,0,.6)}
.cardwrap{position:relative;height:94%;aspect-ratio:734/1024}
.cardwrap img{height:100%;width:100%;object-fit:cover;border-radius:4.8%/3.4%;display:block}
.cardwrap .back-blank{height:100%;width:100%}
.half.slab .sheen{position:absolute;inset:0;pointer-events:none;border-radius:2.4%/1.5%;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.26) 47%,rgba(255,255,255,.05) 52%,transparent 60%);background-size:260% 100%;background-position:var(--hp) 0;mix-blend-mode:screen}
.obj.is-slab .slice{border-radius:2.4%/1.5%;background:rgba(205,222,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.obj.is-slab .slice.core{background:rgba(205,222,255,.08)}

/* Magnifier */
.loupe{position:fixed;left:0;top:0;z-index:65;width:17rem;height:17rem;margin:-8.5rem 0 0 -8.5rem;border-radius:50%;pointer-events:none;overflow:hidden;background:#000;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 8px rgba(0,0,0,.65),0 24px 70px rgba(0,0,0,.85);display:none}
.loupe.on{display:block}
.loupe .lz{position:absolute;left:50%;top:50%;transform-origin:0 0;background-repeat:no-repeat;background-size:100% 100%}
.loupe::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.3),transparent 38%),radial-gradient(circle at 50% 50%,transparent 62%,rgba(0,0,0,.45) 100%);pointer-events:none}
.loupe .lmag{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);font-family:var(--mono);font-size:.7rem;color:#fff;background:rgba(0,0,0,.6);padding:.1rem .45rem;border-radius:999px;z-index:2}
.viewport.loupe-on{cursor:none}

/* Scroll scene */
.scene{position:relative;height:260vh;margin-inline:calc(-1 * clamp(16px,3.2vw,120px))}
.scene-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.scene-bg{position:absolute;inset:0;pointer-events:none}
.scene-bg i{position:absolute;top:0;bottom:0;width:50%;opacity:var(--sj,0);-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.scene-bg .l{left:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,#b9c9e8 34%,transparent))}
.scene-bg .r{right:0;background:linear-gradient(270deg,transparent,color-mix(in srgb,#3f67c9 48%,transparent))}
.scene-cards{position:relative;display:flex;height:min(66vh,44vw);perspective:2200px;will-change:transform}
.scene-cards img{height:100%;width:auto;border-radius:4.8%/3.4%;will-change:transform;filter:drop-shadow(0 2rem 3rem rgba(0,0,0,.95))}
.scene-cards .sl{transform-origin:100% 50%}
.scene-cards .sr{transform-origin:0 50%}
.scene-flash{position:absolute;left:50%;top:50%;width:3px;height:min(66vh,44vw);transform:translate(-50%,-50%);background:linear-gradient(180deg,#74c8ff,#c79bff,#ff8a8a,#ffd76e,#86ffc9);opacity:0;pointer-events:none;filter:blur(1px)}
.scene-shock{position:absolute;left:50%;top:50%;width:50vh;height:50vh;margin:-25vh 0 0 -25vh;border-radius:50%;border:2px solid rgba(255,255,255,.7);opacity:0;pointer-events:none}
.scene-copy{position:absolute;left:clamp(16px,3.2vw,120px);top:12vh;z-index:2;max-width:min(44rem,32vw)}
.scene-copy .display{font-size:clamp(56px,min(7vw,12vh),300px)}
.scene-note{position:absolute;right:clamp(16px,3.2vw,120px);bottom:10vh;z-index:2;text-align:right;max-width:26rem}
.scene-hint{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scene-hint i{display:block;width:1px;height:3rem;background:linear-gradient(var(--accent),transparent);animation:hintline 1.8s ease-in-out infinite}
@keyframes hintline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.quote{margin:clamp(24px,3vw,90px) 0 0;max-width:62rem;font-family:var(--serif);font-size:clamp(22px,1.9vw,54px);line-height:1.25;color:var(--text)}
.quote em{color:var(--accent)}
.quote cite{display:block;margin-top:1rem;font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Story timeline */
.story{position:relative;margin-inline:calc(-1 * clamp(16px,3.2vw,120px))}
.story-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.story-track{display:flex;gap:clamp(24px,3vw,110px);padding-inline:clamp(16px,3.2vw,120px);will-change:transform}
.st{flex:0 0 auto;width:clamp(260px,22vw,560px);display:flex;flex-direction:column;gap:1rem}
.st-year{font-family:var(--cond);font-weight:900;font-size:clamp(64px,6vw,220px);line-height:.85;color:var(--text)}
.st-year small{display:block;font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;color:var(--accent);margin-bottom:.4rem}
.st-art{display:flex;height:clamp(180px,26vh,440px);align-items:flex-end}
.st-art img{height:100%;width:auto;border-radius:4.8%/3.4%;filter:drop-shadow(0 1rem 2rem rgba(0,0,0,.9))}
.st-art.worn img{filter:sepia(.45) saturate(.7) contrast(.9) brightness(.8) drop-shadow(0 1rem 2rem rgba(0,0,0,.9));transform:rotate(-3deg)}
.st-art.worn img+img{transform:rotate(4deg) translateX(-18%)}
.st h3{margin:0;font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1.8rem;line-height:1}
.st p{margin:0;color:var(--muted);max-width:34ch}
.st.buy .st-year{color:var(--accent)}
.st-line{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 10%,var(--line-2) 90%,transparent);pointer-events:none}


/* Scout: suggested cards */
.scout-top{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem}
.scout-key{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;font-size:.82rem;color:var(--muted)}
.scout-key .pill{margin-right:.4rem}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.8rem;padding-block:1rem .4rem}
.grp{position:relative;display:flex;flex-direction:column;gap:.55rem;text-align:left;padding:1rem 1.1rem 1.1rem;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--text);overflow:hidden}
.grp:hover{border-color:var(--line-2)}
.grp[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.grp-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1rem}
.grp b{font-family:var(--cond);font-weight:800;font-size:1.5rem;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.grp .mono{font-size:.8rem;color:var(--muted);white-space:nowrap}
.grp p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.45}
.grp-fan{display:flex;height:4.6rem;margin-top:.1rem}
.grp-fan img{height:100%;width:auto;border-radius:4.8%/3.4%;margin-right:-1.3rem;box-shadow:0 .4rem 1rem rgba(0,0,0,.8)}
.scout-tools{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;padding-block:1.4rem .2rem;border-top:1px solid var(--line);margin-top:1.2rem}
.scout-tools .seg{flex-wrap:wrap;border-radius:18px}
.sel{min-height:2.6rem;border-radius:999px;border:1px solid var(--line-2);background:#0d0e11;color:var(--text);padding:0 1rem;font-weight:700;font-size:.85rem}
.grid.scout{grid-template-columns:repeat(auto-fill,minmax(min(100%,16.5rem),1fr));gap:clamp(34px,2.6vw,80px) clamp(20px,1.8vw,56px)}
.grid.scout.picks{grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.sc{position:relative;display:flex;flex-direction:column;gap:.75rem;--c1:#f2c14e;min-width:0}
.sc-art{position:relative;display:block;width:100%;padding:0;border:0;background:none;border-radius:4.8%/3.4%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sc-art img{display:block;width:100%;height:auto;aspect-ratio:734/1024;object-fit:cover;border-radius:4.8%/3.4%;filter:drop-shadow(0 1.2rem 1.8rem rgba(0,0,0,.95));transition:filter .4s}
.sc-art::after{content:"";position:absolute;left:-6%;right:-6%;top:-4%;bottom:-4%;border-radius:40px;background:var(--c1);filter:blur(60px);opacity:0;z-index:-1;transition:opacity .5s;pointer-events:none}
.sc-art:hover{transform:translateY(-6px)}
.sc-art:hover::after,.sc.wished .sc-art::after{opacity:.35}
.sc.wished .sc-art::before{content:"";position:absolute;inset:-5px;border-radius:calc(4.8% + 4px)/calc(3.4% + 4px);padding:2px;background:conic-gradient(from var(--ang),#ffd76e,#86ffc9,#74c8ff,#c79bff,#ff8aa0,#ffd76e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinang 6s linear infinite;pointer-events:none}
.sc.passed .sc-art img{filter:grayscale(.85) brightness(.4)}
.sc.passed .sc-name,.sc.passed .sc-price{color:var(--faint)}
.sc-head{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.sc-name{font-family:var(--cond);font-weight:800;font-size:1.5rem;line-height:1;letter-spacing:.02em;text-transform:uppercase;overflow-wrap:anywhere}
.sc-price{font-family:var(--cond);font-weight:800;font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}
.sc-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:-.4rem}
.sc-pills{display:flex;flex-wrap:wrap;gap:.35rem}
.pill.v-pullback{background:var(--owned-bg);color:var(--owned)}
.pill.v-holding{background:var(--raise);color:#d9dbe0}
.pill.v-peak{background:#2b1810;color:#ffb48c}
.pill.plasma{background:#0e1a38;color:#9cbcff}
.pill.fav{background:transparent;border:1px solid rgba(242,193,78,.45);color:var(--accent)}
.pill.lg{background:transparent;border:1px solid var(--line-2);color:#d9dbe0}
.sc-spark{display:block;width:100%;height:3.4rem;overflow:visible}
.sc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:0}
.sc-stats div{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.sc-stats dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.sc-stats dd{margin:0;font-family:var(--mono);font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums}
.sc-stats .up{color:var(--accent)}.sc-stats .dn{color:#9fb8ff}
.sc-why{margin:0;font-size:.88rem;line-height:1.45;color:var(--muted)}
.sc-actions{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:auto}
.sc-links{display:flex;gap:1rem;margin-top:-.3rem}
.sc-actions .btn{min-height:2.5rem;padding:0 1rem;font-size:.84rem}
.btn.on{border-color:var(--owned);color:var(--owned)}
.sc-links a{font-size:.8rem;font-weight:700;color:var(--muted);text-decoration:none;padding:.5rem .3rem;min-height:2.5rem;display:inline-flex;align-items:center}
.sc-links a:hover{color:var(--accent)}
.scout-status{min-height:1.3em;font-size:.85rem;color:var(--accent)}
.lightbox{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.94);display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,26rem);gap:2rem;padding:clamp(16px,3vw,64px);align-items:center}
.lightbox[hidden]{display:none!important}
.lightbox img{max-height:calc(100vh - 6rem);max-width:100%;width:auto;justify-self:center;border-radius:4.8%/3.4%;box-shadow:0 2rem 5rem rgba(0,0,0,.9)}
.lightbox .lb-side{display:flex;flex-direction:column;gap:1rem;max-height:calc(100vh - 6rem);overflow-y:auto}
.lightbox h2{margin:0;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:2.6rem;line-height:.9}
.lightbox .lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 1rem);right:1rem}
@media (max-width: 1100px){ .lightbox{grid-template-columns:minmax(0,1fr);align-content:start;overflow-y:auto} .lightbox img{max-height:62vh} .lightbox .lb-side{max-height:none} }

/* Potential options: launcher */
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:flex-end}
.opt-launch{position:relative;display:flex;align-items:center;gap:1.3rem;min-height:5.2rem;padding:.7rem 1.5rem .7rem .9rem;border-radius:1.2rem;border:1px solid var(--line-2);background:linear-gradient(120deg,rgba(242,193,78,.12),rgba(10,10,12,.7) 55%);text-align:left;overflow:hidden}
.opt-launch:hover{border-color:var(--accent)}
.opt-launch::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0 70%,var(--accent) 80%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinb 5s linear infinite;pointer-events:none}
.opt-fan{position:relative;width:4.6rem;height:4rem;flex:none}
.opt-fan img,.opt-fan i{position:absolute;bottom:0;left:50%;width:2.5rem;aspect-ratio:660/921;border-radius:.2rem;object-fit:cover;transform-origin:50% 120%;box-shadow:0 6px 16px rgba(0,0,0,.6);background:var(--raise);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.opt-fan :nth-child(1){transform:translateX(-50%) rotate(-16deg)}
.opt-fan :nth-child(2){transform:translateX(-50%) rotate(0deg)}
.opt-fan :nth-child(3){transform:translateX(-50%) rotate(16deg)}
.opt-launch:hover .opt-fan :nth-child(1){transform:translateX(-62%) rotate(-24deg)}
.opt-launch:hover .opt-fan :nth-child(3){transform:translateX(-38%) rotate(24deg)}
.opt-launch b{display:block;font-family:var(--cond);font-weight:900;font-size:1.7rem;text-transform:uppercase;line-height:.95;letter-spacing:.02em}
.opt-launch small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:.3rem}
.tile-noimg.pending{border-style:solid;border-color:color-mix(in srgb,var(--c1) 45%,transparent);background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--c1) 30%,#000),#050506 70%);flex-direction:column;gap:.4rem;color:var(--text)}
.tile-noimg.pending strong{font-family:var(--cond);font-weight:900;font-size:1.6rem;text-transform:uppercase;line-height:.9}
.pill.picked{background:rgba(242,193,78,.14);color:var(--accent)}

/* Potential options: deck */
.deck{position:fixed;inset:0;z-index:60;background:#000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;--dc:#f2c14e}
.deck[hidden]{display:none}
.deck-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.deck-bg .glow{position:absolute;inset:-20%;background:radial-gradient(40% 55% at 50% 55%,color-mix(in srgb,var(--dc) 38%,transparent),transparent 70%);transition:background 1s ease}
.deck-bg img{position:absolute;left:50%;top:50%;width:70vmax;transform:translate(-50%,-50%) scale(1.3);filter:blur(80px) saturate(1.4);opacity:.28;transition:opacity .8s ease}
.deck-bg .grain{position:absolute;inset:0;background:url("../art/contours.svg") center/cover;opacity:.06}
.deck-top{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:1rem 2rem;align-items:center;padding:1.2rem clamp(16px,3vw,120px) .4rem}
.deck-h{margin:.2rem 0 0;font-family:var(--cond);font-weight:900;font-size:clamp(34px,2.4vw,84px);text-transform:uppercase;line-height:.9}
.deck-h em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--accent)}
.deck-tabs{display:flex;gap:.25rem;padding:.3rem;border:1px solid var(--line);border-radius:999px;background:rgba(10,10,12,.7);backdrop-filter:blur(10px);overflow-x:auto;max-width:100%}
.deck-tabs button{min-height:2.5rem;padding:0 1rem;border:0;border-radius:999px;background:transparent;color:var(--muted);font-family:var(--cond);font-weight:800;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.deck-tabs button[aria-selected="true"]{background:var(--text);color:#000}
.deck-tabs button span{font-family:var(--mono);font-size:.72rem;margin-left:.3rem;opacity:.75}
.deck-main{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(20px,3vw,140px);align-items:center;padding:.6rem clamp(16px,4vw,200px);min-height:0}
.deck-info,.deck-nums{min-width:0;max-height:100%;overflow-y:auto;scrollbar-width:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.deck-info{justify-self:end;max-width:40rem;text-align:right}
.deck-nums{justify-self:start;max-width:34rem;width:100%}
.deck.swap .deck-info{opacity:0;transform:translateX(-24px)}
.deck.swap .deck-nums{opacity:0;transform:translateX(24px)}
.dk-name{margin:.5rem 0 0;font-family:var(--cond);font-weight:900;font-size:clamp(40px,min(3.8vw,8.5vh),150px);line-height:.85;text-transform:uppercase;letter-spacing:-.005em}
.dk-name span{white-space:nowrap}
.dk-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end;margin-top:1rem}
.dk-verdict{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;padding:.45rem .9rem;border-radius:999px;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor}
.dk-verdict i{width:.55rem;height:.55rem;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.v-strong{color:#6fe3a5}.v-solid{color:var(--accent)}.v-spec{color:#9db4ff}.v-skip{color:#ff8a7a}
.dk-why{margin:.9rem 0 0 auto;max-width:36ch;font-size:.9rem;color:var(--muted)}
.dk-read{margin:1rem 0 0 auto;font-family:var(--serif);font-size:clamp(18px,min(1.25vw,2.8vh),40px);line-height:1.25;color:#e6e1d6;max-width:30ch;text-wrap:pretty}
.dk-big{font-family:var(--cond);font-weight:900;font-size:clamp(44px,min(4.6vw,9vh),180px);line-height:.85;font-variant-numeric:tabular-nums}
.dk-big small{display:block;font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.dk-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:min(1.4rem,2vh);padding-top:min(1.2rem,2vh);border-top:1px solid var(--line)}
.dk-rows div{display:flex;flex-direction:column;gap:.15rem}
.dk-rows b{font-family:var(--cond);font-weight:800;font-size:clamp(22px,min(1.7vw,4vh),60px);line-height:1;font-variant-numeric:tabular-nums}
.dk-rows span{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dk-rows .up{color:#6fe3a5}.dk-rows .down{color:#ff8a7a}
.dk-spark{margin-top:1.4rem;width:100%;height:auto;display:block}
.dk-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.dk-links a{color:var(--muted);font-size:.85rem;text-decoration:none;border-bottom:1px solid var(--line-2)}
.dk-links a:hover{color:var(--text);border-color:var(--accent)}
.deck-stack{position:relative;height:100%;max-height:74vh;aspect-ratio:660/921;touch-action:none;perspective:1400px;justify-self:center}
.dk-card{position:absolute;inset:0;border-radius:4.4%/3.2%;transform-origin:50% 90%;will-change:transform;user-select:none;-webkit-user-select:none}
.dk-card .face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#050506;box-shadow:0 40px 90px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.dk-card img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}
.dk-card .glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.28),transparent 45%);mix-blend-mode:soft-light;opacity:var(--ga,0);transition:opacity .3s}
.dk-card.top{cursor:grab}
.dk-card.top:active{cursor:grabbing}
.dk-card.n1{transform:translateY(3.5%) scale(.93);filter:brightness(.45)}
.dk-card.n2{transform:translateY(7%) scale(.86);filter:brightness(.25)}
.dk-card.n1,.dk-card.n2{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.dk-stamp{position:absolute;top:9%;padding:.3rem 1rem;border:4px solid currentColor;border-radius:.6rem;font-family:var(--cond);font-weight:900;font-size:clamp(34px,3vw,90px);letter-spacing:.06em;text-transform:uppercase;opacity:0;pointer-events:none;background:rgba(0,0,0,.35);backdrop-filter:blur(2px)}
.dk-stamp.yes{left:8%;color:#6fe3a5;transform:rotate(-14deg)}
.dk-stamp.no{right:8%;color:#ff8a7a;transform:rotate(14deg)}
.dk-stamp.later{left:50%;bottom:10%;top:auto;color:#9db4ff;transform:translateX(-50%)}
.dk-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:10%;text-align:center;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--c) 42%,#000),#040405 72%);border:2px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:inherit;box-sizing:border-box}
.dk-ph strong{font-family:var(--cond);font-weight:900;font-size:clamp(48px,4vw,150px);line-height:.85;text-transform:uppercase}
.dk-ph span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.deck-foot{position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:.6rem 16px 1.4rem}
.dk-actions{display:flex;align-items:center;gap:clamp(12px,1.4vw,40px)}
.dk-btn{width:clamp(64px,4.4vw,120px);height:clamp(64px,4.4vw,120px);border-radius:50%;border:1px solid var(--line-2);background:rgba(10,10,12,.75);backdrop-filter:blur(8px);display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,border-color .2s,background .2s}
.dk-btn svg{width:42%;height:42%}
.dk-btn:hover{transform:scale(1.07)}
.dk-btn.no{color:#ff8a7a}.dk-btn.no:hover{border-color:#ff8a7a;background:rgba(255,138,122,.1)}
.dk-btn.yes{color:#6fe3a5;width:clamp(76px,5.2vw,140px);height:clamp(76px,5.2vw,140px)}.dk-btn.yes:hover{border-color:#6fe3a5;background:rgba(111,227,165,.1)}
.dk-btn.later,.dk-btn.undo{width:clamp(48px,3.2vw,84px);height:clamp(48px,3.2vw,84px);color:var(--muted)}
.dk-btn:disabled{opacity:.3;pointer-events:none}
.dk-hint{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dk-prog{display:flex;align-items:center;gap:.8rem;font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
.dk-prog i{display:block;width:clamp(80px,8vw,260px);height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.dk-prog i b{display:block;height:100%;background:var(--accent);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.dk-done{text-align:center;max-width:36rem;justify-self:center;grid-column:1 / -1}
.dk-done h3{margin:0;font-family:var(--cond);font-weight:900;font-size:clamp(40px,3vw,110px);text-transform:uppercase;line-height:.9}
.dk-done p{color:var(--muted)}
.deck-list{position:relative;overflow:auto;padding:1rem clamp(16px,4vw,200px) 2rem;min-height:0}
.deck-list[hidden],.deck-main[hidden],.deck-foot[hidden]{display:none}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:1.6rem 1.2rem}
.dl-card{display:flex;flex-direction:column;gap:.5rem}
.dl-card .art{position:relative;aspect-ratio:660/921;border-radius:4.4%/3.2%;overflow:hidden;background:#050506}
.dl-card .art img{width:100%;height:100%;object-fit:cover;display:block}
.dl-card .art .dk-ph strong{font-size:1.6rem}
.dl-card h4{margin:0;font-family:var(--cond);font-weight:800;font-size:1.3rem;text-transform:uppercase;line-height:1}
.dl-card p{margin:0;font-size:.82rem;color:var(--muted)}
.dl-card .row{display:flex;flex-wrap:wrap;gap:.35rem}
.dl-card .row button{min-height:2.2rem;padding:0 .8rem;border-radius:999px;border:1px solid var(--line-2);background:transparent;font-size:.78rem;font-weight:600}
.dl-card .row button:hover{border-color:var(--accent)}
.dl-empty{color:var(--muted);text-align:center;padding:4rem 0}
.dl-note{color:var(--muted);max-width:70ch;margin:0 0 1.4rem}
@keyframes spinb{to{--ang:360deg}}
@media (max-width: 1100px){
  .deck-top{grid-template-columns:minmax(0,1fr) auto}
  .deck-tabs{grid-column:1 / -1;order:3}
  .deck-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;overflow-y:auto;padding-top:.6rem;gap:1rem}
  .deck-stack{height:min(48vh,110vw);justify-self:center;order:1}
  .deck-main{-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent);padding-bottom:3rem}
  .deck-info{order:2;justify-self:stretch;text-align:left;max-width:none}
  .deck-info .dk-chips{justify-content:flex-start}
  .dk-read,.dk-why{margin-left:0}
  .deck-nums{order:3;max-width:none}
  .dk-hint{display:none}
}

/* Page transitions: the new page opens from the centre seam, like a LEGEND splitting */
::view-transition-old(root){animation:vt-out .72s cubic-bezier(.7,0,.2,1) both}
::view-transition-new(root){animation:vt-in .72s cubic-bezier(.7,0,.2,1) both}
@keyframes vt-in{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes vt-out{to{opacity:.15;transform:scale(.965);filter:brightness(.35)}}
.vt-seam{position:fixed;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:100;pointer-events:none;display:none;background:linear-gradient(180deg,transparent,#ffd76e 20%,#fff 50%,#ffd76e 80%,transparent);box-shadow:0 0 24px 4px rgba(242,193,78,.55);view-transition-name:vtseam}
html.vt .vt-seam{display:block}
::view-transition-group(vtseam){animation:none}
::view-transition-old(vtseam){display:none}
::view-transition-new(vtseam){animation:vt-seam .72s cubic-bezier(.7,0,.2,1) both}
@keyframes vt-seam{0%{opacity:0;transform:scaleY(0)}30%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1) scaleX(8)}}

/* First load: a gold seam draws, then the page splits open */
.boot{position:fixed;inset:0;z-index:200;pointer-events:none}
.boot i{position:absolute;top:0;bottom:0;width:50.5%;background:#000}
.boot i.l{left:0}.boot i.r{right:0}
.boot b{position:absolute;left:50%;top:18%;bottom:18%;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#ffd76e 15%,#fff 50%,#ffd76e 85%,transparent);box-shadow:0 0 30px 6px rgba(242,193,78,.45);transform:scaleY(0);animation:boot-line .8s cubic-bezier(.6,0,.2,1) .1s forwards}
.boot span{position:absolute;left:50%;top:calc(82% + 1.2rem);transform:translateX(-50%);font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);opacity:0;animation:boot-cap .5s ease .35s forwards;white-space:nowrap}
@keyframes boot-line{to{transform:scaleY(1)}}
@keyframes boot-cap{to{opacity:.8}}
.boot.open i.l{transform:translateX(-101%);transition:transform .9s cubic-bezier(.76,0,.24,1)}
.boot.open i.r{transform:translateX(101%);transition:transform .9s cubic-bezier(.76,0,.24,1)}
.boot.open b{opacity:0;transform:scaleY(1) scaleX(14);transition:opacity .5s ease,transform .6s ease}
.boot.open span{opacity:0!important;transition:opacity .2s}

/* Kinetic headlines: weight eases lighter while you scroll, then settles back */
.display,.section-head h2{font-weight:var(--kw,900);transition:letter-spacing .4s ease}
html.kin .display{letter-spacing:.01em}
/* Magnetic controls */
.btn,.ctl,.dk-btn,.opt-launch,.icon-btn,.joinbtn{translate:var(--mx,0px) var(--my,0px);transition:translate .35s cubic-bezier(.2,1.6,.4,1),border-color .2s,background .2s,transform .2s ease}
.mag-on{transition:translate .08s linear,border-color .2s,background .2s,transform .2s ease!important}
@media (max-width: 600px){ #showcase-btn{font-size:0;gap:0;padding:0;width:2.75rem;justify-content:center} .brand{font-size:1.3rem} }
@media (prefers-reduced-motion: reduce){ ::view-transition-old(root),::view-transition-new(root),::view-transition-new(vtseam){animation:none} .boot{display:none} }

/* Foil shader layer */
.foil{position:absolute;left:0;top:0;width:100%;height:100%;mix-blend-mode:hard-light;transition:opacity .3s;pointer-events:none;border-radius:4.8%/3.4%;display:block}
.gl > .fx.holo,.gl > .fx.glare,.dk-card .face.gl .glare{display:none}
.dk-card .face .foil{border-radius:inherit}
/* Now playing */
.np{position:absolute;left:1.4rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1.2rem);z-index:3;display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);pointer-events:none;opacity:0;transition:opacity .8s ease}
.np.on{opacity:1}
.np i{display:inline-flex;gap:2px;align-items:flex-end;height:.8rem}
.np i b{display:block;width:2px;background:var(--accent);animation:npbar 1s ease-in-out infinite}
.np i b:nth-child(2){animation-delay:.2s}.np i b:nth-child(3){animation-delay:.4s}
@keyframes npbar{0%,100%{height:25%}50%{height:100%}}
@media (max-width: 1100px){ .np{display:none} }

/* Slab reveal */
.reveal-ov{position:fixed;inset:0;z-index:95;background:radial-gradient(60% 70% at 50% 45%,color-mix(in srgb,var(--rc,#f2c14e) 26%,#000),#000 72%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,160px);padding:clamp(16px,4vw,160px);opacity:0;transition:opacity .5s ease}
.reveal-ov[hidden]{display:none}
.reveal-ov.on{opacity:1}
.rv-stage{justify-self:end;perspective:1600px;height:min(74vh,120vw);display:flex;align-items:center}
.rv-obj{position:relative;height:100%;transform-style:preserve-3d;animation:rv-drop 1.3s cubic-bezier(.16,1,.3,1) both}
.rv-obj .face{height:100%}
.rv-obj img.rv-raw{height:100%;width:auto;border-radius:4.8%/3.4%;display:block;box-shadow:0 40px 90px -20px rgba(0,0,0,.95)}
.rv-light{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:2.4%/1.5%}
.rv-light::after{content:"";position:absolute;top:-20%;bottom:-20%;width:30%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-14deg);animation:rv-sweep 1.4s cubic-bezier(.3,0,.2,1) .9s both;mix-blend-mode:screen}
@keyframes rv-drop{0%{transform:translateY(-70vh) rotateX(38deg) rotateZ(-6deg);opacity:0}60%{opacity:1}100%{transform:none}}
@keyframes rv-sweep{to{left:120%}}
.rv-copy{max-width:36rem;animation:rv-copy .8s cubic-bezier(.2,.8,.2,1) .7s both}
@keyframes rv-copy{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.rv-copy h2{margin:.4rem 0 0;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(48px,4.4vw,160px);line-height:.85}
.rv-copy .rv-row{display:flex;gap:2.4rem;margin-top:1.6rem}
.rv-copy .rv-row div{display:flex;flex-direction:column;gap:.2rem}
.rv-copy .rv-row b{font-family:var(--cond);font-weight:800;font-size:clamp(30px,2vw,72px);line-height:1}
.rv-copy .rv-row span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rv-copy .rv-acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
@media (max-width: 900px){ .reveal-ov{grid-template-columns:minmax(0,1fr);align-content:center;overflow-y:auto} .rv-stage{justify-self:center;height:48vh} }

/* Binder */
.binder-tabs{display:flex;flex-wrap:wrap;gap:.25rem;padding:.3rem;border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto}
.binder-tabs button{min-height:2.5rem;padding:0 1rem;border:0;border-radius:999px;background:transparent;color:var(--muted);font-family:var(--cond);font-weight:800;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.binder-tabs button[aria-pressed="true"]{background:var(--text);color:#000}
.binder-tabs button span{font-family:var(--mono);font-size:.7rem;margin-left:.35rem;opacity:.75}
.binder{position:relative;margin-top:1.6rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem}
.bnd-spread{position:relative;display:grid;grid-template-columns:repeat(var(--pages,2),minmax(0,1fr));gap:0;perspective:2400px;max-width:calc(var(--pages,2) * min(var(--pmax,44rem),62vh * var(--pw,.78)));margin-inline:auto;width:100%}
.bnd-page{position:relative;padding:clamp(14px,1.6vw,40px);background:linear-gradient(180deg,#0e0f13,#08090b);border:1px solid #1c1d22;box-shadow:inset 0 0 60px rgba(0,0,0,.6);display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:clamp(8px,1vw,24px);transform-origin:left center;backface-visibility:hidden}
.bnd-page:first-child{border-radius:14px 4px 4px 14px;transform-origin:right center}
.bnd-page:last-child{border-radius:4px 14px 14px 4px}
.bnd-page:only-child{border-radius:14px}
.bnd-spread::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:26px;margin-left:-13px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.7),rgba(0,0,0,0));pointer-events:none}
.bnd-spread.one::after{display:none}
.pocket{position:relative;aspect-ratio:734/1024;border-radius:5%/3.6%;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);padding:0;border:0;overflow:visible}
.pocket.sq{aspect-ratio:1/1}
.pocket img{position:absolute;inset:4%;width:92%;height:92%;object-fit:cover;border-radius:4.8%/3.4%}
.pocket.sq img{object-fit:contain}
.pocket.miss img{filter:grayscale(1) brightness(.3) contrast(1.15);transition:filter .4s}
.pocket.miss:hover img{filter:grayscale(.6) brightness(.6)}
.pocket.want img{filter:saturate(.55) brightness(.42)}
.pocket.own img{box-shadow:0 10px 30px rgba(0,0,0,.8)}
.pocket.own::before{content:"";position:absolute;inset:1%;border-radius:6%/4.2%;padding:2px;background:conic-gradient(from var(--ang),#ffd76e,#86ffc9,#74c8ff,#c79bff,#ff8aa0,#ffd76e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinang 6s linear infinite;pointer-events:none;z-index:1}
.pocket::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,.1),transparent 40%,transparent 70%,rgba(255,255,255,.05));pointer-events:none}
.pocket .plab{position:absolute;left:6%;right:6%;bottom:5%;z-index:2;font-family:var(--mono);font-size:clamp(9px,.62rem,14px);letter-spacing:.08em;text-transform:uppercase;color:#cfd1d6;text-shadow:0 1px 6px #000;text-align:center;line-height:1.2}
.pocket.miss .plab{color:#7b7e86}
.pocket .ptag{position:absolute;top:5%;right:6%;z-index:2;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;padding:.15rem .4rem;border-radius:999px;background:rgba(242,193,78,.18);color:var(--accent)}
.pocket.empty{visibility:hidden}
.pocket:hover:not(.empty){box-shadow:inset 0 0 0 1px rgba(242,193,78,.5)}
.bnd-nav{width:3.4rem;height:3.4rem;border-radius:50%;border:1px solid var(--line-2);background:rgba(10,10,12,.7);display:inline-flex;align-items:center;justify-content:center}
.bnd-nav:disabled{opacity:.25}
.bnd-nav svg{width:1.3rem;height:1.3rem}
.bnd-foot{display:flex;justify-content:center;gap:1.4rem;margin-top:1rem;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.bnd-flip{animation:bnd-flip .6s cubic-bezier(.4,0,.2,1)}
.bnd-flip.back{animation-name:bnd-flip-b}
@keyframes bnd-flip{0%{transform:rotateY(0)}50%{transform:rotateY(-90deg);filter:brightness(.4)}51%{transform:rotateY(90deg);filter:brightness(.4)}100%{transform:rotateY(0)}}
@keyframes bnd-flip-b{0%{transform:rotateY(0)}50%{transform:rotateY(90deg);filter:brightness(.4)}51%{transform:rotateY(-90deg);filter:brightness(.4)}100%{transform:rotateY(0)}}
@media (max-width: 1100px){ .binder{grid-template-columns:minmax(0,1fr)} .bnd-nav{display:none} }

/* Benchmark */
.bench-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.8rem}
.bench-stats div{border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.3rem}
.bench-stats span{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bench-stats b{font-family:var(--cond);font-weight:800;font-size:1.9rem;line-height:1}
.bench-stats small{font-size:.78rem;color:var(--faint)}
.bench-stats .up{color:#6fe3a5}.bench-stats .dn{color:#ff8a7a}

/* Vault */
.vault{position:relative;height:440vh;margin-inline:calc(-1 * clamp(16px,3.2vw,120px))}
.vault-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.vault-sticky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vault-title{position:absolute;left:clamp(16px,3.2vw,120px);top:12vh;z-index:2;pointer-events:none;opacity:calc(1 - var(--vp,0) * 12);transform:translateY(calc(var(--vp,0) * -200px))}
.vault-title .display{font-size:clamp(56px,min(7vw,12vh),300px);text-shadow:0 .04em .35em rgba(0,0,0,.85)}
.vault-title p{max-width:34rem;color:var(--muted);margin:1rem 0 0}
.vault-hud{position:absolute;left:clamp(16px,3.2vw,120px);bottom:8vh;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:.3rem}
.vault-hud b{font-family:var(--cond);font-weight:900;font-size:clamp(40px,3.4vw,130px);text-transform:uppercase;line-height:.9}
.vault-hud span{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vault-hud.in{animation:vhud .7s cubic-bezier(.2,.8,.2,1)}
@keyframes vhud{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.vault-tip{position:fixed;left:0;top:0;z-index:5;pointer-events:none;background:rgba(10,10,12,.9);border:1px solid var(--line-2);border-radius:12px;padding:.6rem .9rem;display:flex;flex-direction:column;gap:.15rem;opacity:0;transition:opacity .2s;backdrop-filter:blur(8px)}
.vault-tip.on{opacity:1}
.vault-tip b{font-family:var(--cond);font-weight:800;font-size:1.3rem;text-transform:uppercase;line-height:1}
.vault-tip span{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.vault-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);animation:vload 1.4s ease-in-out infinite}
@keyframes vload{50%{opacity:.35}}
.vault .scene-hint{z-index:2;opacity:calc(1 - var(--vp,0) * 10)}
.vault-flat{padding-bottom:2rem}
.vault-shelf{display:flex;gap:1rem;overflow-x:auto;padding:1rem 0 1.4rem;scroll-snap-type:x mandatory}
.vs-item{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;border:0;background:none;padding:0;scroll-snap-align:start}
.vs-item > img,.vs-halves > img{height:11rem;width:auto;border-radius:4.8%/3.4%;filter:brightness(.55) saturate(.7)}
.vs-item.own > img,.vs-halves > img.lit{filter:none}
.vs-item > span:last-child{font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1rem;max-width:12rem}
.vault.flat{display:none}

/* ---------- Layouts: html[data-lay] = desk | tablet | phone ---------- */
.lay-row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1.4rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lay-row b{font-weight:700;margin-right:.4rem}
.lay-row button{font:inherit;letter-spacing:inherit;text-transform:inherit;padding:.55rem .85rem;min-height:2.6rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink,#eee)}
.lay-row button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.lay-row small{flex-basis:100%;text-transform:none;letter-spacing:.02em;font-size:.72rem;margin-top:.2rem}
#info-btn{display:none;min-height:2.75rem;padding:0 1rem;border:1px solid var(--line);border-radius:999px;background:rgba(10,10,12,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-weight:700;font-size:.85rem;align-items:center;gap:.45rem}
#info-btn svg{width:1.05rem;height:1.05rem}
.stage-top .count{margin-left:auto}

/* Touch layouts: the card gets the whole screen, details slide up as a sheet */
html[data-lay="tablet"] .stage-inner,html[data-lay="phone"] .stage-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:100%}
html[data-lay="tablet"] .viewport,html[data-lay="phone"] .viewport{grid-row:1;grid-column:1;height:100%}
html[data-lay="tablet"] .panel,html[data-lay="phone"] .panel{position:absolute;left:0;right:0;bottom:0;z-index:6;max-height:72vh;max-height:72dvh;border:0;border-top:1px solid var(--line);border-radius:1.4rem 1.4rem 0 0;padding:2.2rem 1.4rem calc(env(safe-area-inset-bottom,0px) + 2rem);transform:translateY(105%);transition:transform .45s cubic-bezier(.16,1,.3,1);box-shadow:0 -30px 80px rgba(0,0,0,.6);background:rgba(12,12,14,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overscroll-behavior:contain}
html[data-lay="tablet"] .panel{left:auto;width:min(34rem,100%);right:0;border-left:1px solid var(--line);border-radius:1.4rem 0 0 0}
html[data-lay="tablet"] .panel::before,html[data-lay="phone"] .panel::before{content:"";position:absolute;top:.8rem;left:50%;width:2.8rem;height:4px;margin-left:-1.4rem;border-radius:4px;background:rgba(255,255,255,.25)}
html[data-lay="tablet"] .stage.sheet .panel,html[data-lay="phone"] .stage.sheet .panel{transform:none}
html[data-lay="tablet"] #info-btn,html[data-lay="phone"] #info-btn{display:inline-flex}
html[data-lay="tablet"] .stage.sheet #info-btn,html[data-lay="phone"] .stage.sheet #info-btn{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
html[data-lay="tablet"] .hint,html[data-lay="phone"] .hint,html[data-lay="tablet"] .chips,html[data-lay="phone"] .chips{display:none}
html[data-lay="tablet"] .ctl{min-height:3.1rem;min-width:3.1rem}
html[data-lay="tablet"] .ctl span{display:none}
html[data-lay="tablet"] .controls{bottom:calc(env(safe-area-inset-bottom,0px) + 1.4rem)}
html[data-lay="phone"] .controls{bottom:calc(env(safe-area-inset-bottom,0px) + .9rem);max-width:calc(100vw - 1.2rem);overflow-x:auto;scrollbar-width:none;gap:.1rem}
html[data-lay="phone"] .controls::-webkit-scrollbar{display:none}
html[data-lay="phone"] .ctl{padding:0 .55rem;flex:none}
html[data-lay="phone"] .ctl span{display:none}
html[data-lay="phone"] .stage-top{left:.8rem;right:.8rem;top:calc(env(safe-area-inset-top,0px) + .8rem)}
html[data-lay="phone"] .joinbar{top:calc(env(safe-area-inset-top,0px) + 4.2rem)}
html[data-lay="tablet"] .stage,html[data-lay="phone"] .stage{height:100vh;height:100dvh}

/* Immersive full screen: only the card, tap to bring the controls back */
.stage.immersive .panel,.stage.immersive .controls,.stage.immersive .hint,.stage.immersive .chips,.stage.immersive .joinbar,.stage.immersive .count,.stage.immersive .np,.stage.immersive #info-btn,.stage.immersive #close{display:none!important}
.stage.immersive .stage-inner{grid-template-columns:minmax(0,1fr);width:100%}
.stage.immersive .viewport{cursor:default}
#imm-exit{display:none;position:absolute;right:calc(env(safe-area-inset-right,0px) + 1rem);top:calc(env(safe-area-inset-top,0px) + 1rem);z-index:7;min-height:2.9rem;padding:0 1.05rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(10,10,12,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:700;font-size:.85rem;align-items:center;gap:.45rem;transition:opacity .5s ease}
#imm-exit svg{width:1.05rem;height:1.05rem}
.stage.immersive #imm-exit{display:inline-flex}
.stage.immersive.calm #imm-exit{opacity:0;pointer-events:none}
.imm-tip{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 1.6rem);transform:translateX(-50%);z-index:7;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .6s ease;display:none}
.stage.immersive .imm-tip{display:block}
.stage.immersive:not(.calm) .imm-tip{opacity:.9}

/* Top bar: tabs drop to their own scrolling row whenever the single row would not fit (iPad landscape, small laptops) */
.tab{white-space:nowrap}
@media (max-width: 1780px){
  .bar{grid-template-columns:auto auto}
  .tabs{grid-column:1 / -1;order:3;justify-self:start;overflow-x:auto;max-width:100%;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
}
html[data-lay="tablet"] .bar,html[data-lay="phone"] .bar{grid-template-columns:auto auto}
html[data-lay="tablet"] .tabs,html[data-lay="phone"] .tabs{grid-column:1 / -1;order:3;justify-self:start;overflow-x:auto;max-width:100%;scrollbar-width:none}
html[data-lay="tablet"] .tab{min-height:2.9rem}

/* Grids a little denser on phones so two cards sit side by side */
html[data-lay="phone"] .grid.scout,html[data-lay="phone"] .grid.scout.picks{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem .9rem}
html[data-lay="tablet"] .grid.scout{grid-template-columns:repeat(auto-fill,minmax(min(100%,14.5rem),1fr))}

/* ---------- Build 8 ---------- */
/* alerts */
#alert-btn{position:relative}
#alert-btn b{position:absolute;top:-.25rem;right:-.25rem;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 .68rem/1.15rem var(--mono);text-align:center}
#alert-btn b[hidden]{display:none}
.drawer{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,0);transition:background .38s ease}
.drawer[hidden]{display:none!important}
.drawer.on{background:rgba(0,0,0,.6)}
.drawer-card{box-sizing:border-box;position:absolute;top:0;right:0;bottom:0;width:min(34rem,100%);background:rgba(12,12,14,.97);border-left:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow-y:auto;overscroll-behavior:contain;padding:calc(env(safe-area-inset-top,0px) + 1.4rem) 1.4rem calc(env(safe-area-inset-bottom,0px) + 2rem);transform:translateX(102%);transition:transform .38s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:1.2rem}
.drawer.on .drawer-card{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.drawer-head h2{margin:0;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:2.4rem;line-height:.9}
.al-sec{display:flex;flex-direction:column;gap:.6rem}
.al-sec h3{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--cond);font-weight:800;text-transform:uppercase;font-size:1.35rem}
.al-sec h3 .mono{font-size:.68rem;letter-spacing:.1em;font-weight:400;text-transform:uppercase}
.al-empty{margin:0;font-size:.88rem}
.al-row,.al-deal{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:.8rem;align-items:center;padding:.7rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none}
.al-deal{grid-template-columns:auto minmax(0,1fr) auto}
.al-deal:hover{border-color:var(--accent)}
.al-row.hit{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.al-art{display:flex;height:3.4rem}
.al-art img,.al-deal > img{height:3.4rem;width:auto;border-radius:4.8%/3.4%}
.al-ph{width:2.4rem;height:3.4rem;border-radius:4px;background:var(--raise)}
.al-main,.al-deal > span:nth-child(2){display:flex;flex-direction:column;gap:.25rem;min-width:0}
.al-main b,.al-deal b{font-family:var(--cond);font-weight:800;font-size:1.15rem;text-transform:uppercase;line-height:1}
.al-main small,.al-deal small{color:var(--muted);font-size:.78rem}
.al-main .pill{align-self:flex-start}
.al-num{text-align:right;display:flex;flex-direction:column}
.al-num b{font-family:var(--mono);font-size:1rem}
.al-t{display:flex;flex-direction:column;gap:.2rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.al-t input,.al-add input,.al-add select{min-height:2.6rem;border-radius:10px;border:1px solid var(--line-2);background:#0d0e11;color:var(--text);padding:0 .7rem;font-family:var(--mono);font-size:.95rem;width:6.5rem}
.al-add{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.al-add select{flex:1 1 12rem;width:auto;font-family:var(--body)}
.al-status{min-height:1.2em;color:var(--accent);font-size:.85rem;margin:0}
.pill.alert{background:rgba(242,193,78,.16);color:var(--accent);border:1px solid rgba(242,193,78,.4)}
html[data-lay="phone"] .drawer-card{top:auto;left:0;width:100%;max-height:88dvh;border-left:0;border-top:1px solid var(--line);border-radius:1.4rem 1.4rem 0 0;transform:translateY(102%)}
html[data-lay="phone"] .al-row{grid-template-columns:auto minmax(0,1fr) auto}
html[data-lay="phone"] .al-row .mini{grid-column:2 / -1;justify-self:start}

/* planner */
#planner{margin-block:1rem 1.4rem}
.pl-set{display:flex;gap:.8rem;flex-wrap:wrap}
.pl-set .field-l input{width:10rem}
.pl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:1rem 2rem;padding-block:.4rem .6rem}
.pl-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:center;text-align:left;padding:1.2rem;border:1px solid rgba(242,193,78,.5);border-radius:18px;background:radial-gradient(120% 140% at 0% 50%,rgba(242,193,78,.12),transparent 60%),var(--surface);color:var(--text)}
.pl-top:hover{border-color:var(--accent)}
.pl-art{display:flex;height:clamp(9rem,14vw,16rem);filter:drop-shadow(0 1rem 1.6rem rgba(0,0,0,.9))}
.pl-art img{height:100%;width:auto;border-radius:4.8%/3.4%}
.pl-copy{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.pl-copy b{font-family:var(--cond);font-weight:900;font-size:clamp(28px,2.4vw,72px);text-transform:uppercase;line-height:.9}
.pl-price{font-family:var(--mono);font-size:1.05rem;color:var(--accent)}
.pl-price small{color:var(--muted);font-size:.78rem;margin-left:.6rem}
.pl-copy ul{margin:.3rem 0 0;padding-left:1.1rem;color:var(--muted);font-size:.9rem;display:flex;flex-direction:column;gap:.2rem}
.pl-q{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.pl-q button{width:100%;display:grid;grid-template-columns:5.2rem auto minmax(0,1fr) auto;gap:1rem;align-items:center;text-align:left;padding:.55rem .8rem;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text)}
.pl-q button:hover{border-color:var(--line-2);background:var(--surface)}
.pl-q li.first button{border-color:rgba(242,193,78,.45)}
.pl-q li.over button{opacity:.55}
.pl-when{font-family:var(--mono);font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.pl-thumb img{height:2.6rem;width:auto;border-radius:3px;display:block}
.pl-name{font-weight:700;display:flex;flex-direction:column;min-width:0}
.pl-name small{font-weight:400;color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-cost{font-family:var(--mono);text-align:right;display:flex;flex-direction:column}
.pl-cost small{color:var(--faint);font-size:.7rem}
.pl-foot{font-size:.85rem;margin:.2rem 0 0}
html[data-lay="phone"] .pl-top{grid-template-columns:minmax(0,1fr)}
html[data-lay="phone"] .pl-art{height:11rem;justify-content:center}
html[data-lay="phone"] .pl-q button{grid-template-columns:auto minmax(0,1fr) auto}
html[data-lay="phone"] .pl-when{grid-column:1 / -1}

/* centering check */
#cen{margin-top:1.4rem}
.cen-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.6rem;align-items:start}
.cen-box{position:relative;display:flex;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}
#cen:not(.has) .cen-box,#cen:not(.has) .cen-tools{display:none}
#cen.has #cen-drop{display:none}
.cen-stage{position:relative;line-height:0}
#cen-cv{display:block;max-width:100%;border-radius:6px}
.cen-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,transparent var(--x0),rgba(255,138,160,.22) var(--x0) var(--x1),transparent var(--x1) var(--x2),rgba(116,200,255,.22) var(--x2) var(--x3),transparent var(--x3))}
.cen-shade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent var(--y0),rgba(255,215,110,.2) var(--y0) var(--y1),transparent var(--y1) var(--y2),rgba(134,255,201,.2) var(--y2) var(--y3),transparent var(--y3))}
.cg{position:absolute;z-index:2;border:0;padding:0;background:transparent;touch-action:none}
.cg[data-ax="x"]{top:0;bottom:0;width:28px;margin-left:-14px;cursor:ew-resize}
.cg[data-ax="y"]{left:0;right:0;height:28px;margin-top:-14px;cursor:ns-resize}
.cg::before{content:"";position:absolute;background:#f2c14e;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.cg[data-ax="x"]::before{left:13px;top:0;bottom:0;width:2px}
.cg[data-ax="y"]::before{top:13px;left:0;right:0;height:2px}
.cg.inner::before{background:#74c8ff}
.cg::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#f2c14e;box-shadow:0 0 0 2px #000}
.cg.inner::after{background:#74c8ff}
.cg[data-ax="x"]::after{left:7px;top:calc(50% - 7px)}
.cg[data-ax="y"]::after{top:7px;left:calc(50% - 7px)}
.cg.on::before,.cg:focus-visible::before{width:3px;height:auto}
#cen-zoom{position:absolute;right:.6rem;top:.6rem;width:150px;height:150px;border-radius:50%;border:2px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(0,0,0,.8);z-index:3;pointer-events:none;background:#000}
#cen-zoom[hidden]{display:none}
.cen-tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.cen-tools label{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cen-tools input[type=range]{width:9rem;accent-color:var(--accent)}
.cen-nums{display:flex;flex-wrap:wrap;gap:1rem 2.2rem}
.cen-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.cen-chip{font-family:var(--mono);font-size:.75rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--line-2);color:var(--faint);text-decoration:line-through}
.cen-chip.ok{border-color:rgba(127,224,174,.5);color:var(--owned);text-decoration:none;background:var(--owned-bg)}
.cen-chip small{opacity:.75;margin-left:.2rem}
.cen-note{font-size:.84rem}
#cen-drop{min-height:9rem;justify-content:center}
@media (max-width: 1100px){ .cen-grid{grid-template-columns:minmax(0,1fr)} }

/* menu fits any screen height, including the 1440px tall ultrawide */
.menu{overflow-y:auto;align-items:safe center}
.menu nav button{font-size:clamp(38px,min(7vw,7.6vh),300px)}

/* gallery mode */
.menu-extra{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:1.2rem;justify-content:flex-end}
.menu-extra .btn{font-family:var(--body)}
.menu-extra label{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.menu-extra input{width:1.1rem;height:1.1rem;accent-color:var(--accent)}
.stage.gallery{cursor:none}
.stage.gallery .showcase-cap{opacity:0;transition:opacity 2.4s ease}
.stage.gallery.gcap .showcase-cap{opacity:1}
.stage.gallery .stage-top{opacity:0;transition:opacity .8s}
.stage.gallery:not(.idle) .stage-top{opacity:1}
.stage.gallery .np{display:none}
.stage.gallery .stage-inner{transition:transform 6s ease-in-out}
.stage.gallery::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity 180s linear;pointer-events:none;z-index:9}
.stage.gallery.gdim::after{opacity:.38}

/* depth layers: the art lifts off the card as it tilts */
.dl{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;pointer-events:none;border-radius:4.8%/3.4%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:transform}
.dl.plate{opacity:var(--pt,0);object-fit:fill}
.dl.fg{transform:translate(calc(var(--pdx,0) * var(--h) * .042), calc(var(--pdy,0) * var(--h) * -.042)) scale(1.016)}
#depth-btn[disabled]{opacity:.35;cursor:default}
.viewport.light-on{cursor:crosshair}
.film.rot video{position:absolute;left:50%;top:50%;width:var(--fh,100vh);height:var(--fw,100vw);max-width:none;transform:translate(-50%,-50%) rotate(90deg);object-fit:cover}
#depth-btn b{font-family:var(--cond);font-weight:900;font-size:1.05rem;letter-spacing:.04em}
.obj.animating .dl{transition:none}

/* ---------- iPhone: less text, more card ---------- */
html[data-lay="phone"] body{padding-inline:14px}
html[data-lay="phone"] .brand{font-size:1.05rem;gap:.5rem;line-height:1}
html[data-lay="phone"] .brand small{display:none}
html[data-lay="phone"] .brand i{width:.7rem;height:.95rem}
html[data-lay="phone"] .bar{padding-block:.6rem .4rem;gap:.5rem}
html[data-lay="phone"] .bar-actions{gap:.35rem}
html[data-lay="phone"] .bar-actions .icon-btn,html[data-lay="phone"] #showcase-btn{width:2.4rem;height:2.4rem;min-height:2.4rem}
html[data-lay="phone"] .tabs{padding:.2rem;gap:0;border-color:transparent;background:transparent;margin-inline:-4px}
html[data-lay="phone"] .tab{font-size:.92rem;min-height:2.3rem;padding:0 .75rem;letter-spacing:.04em}
html[data-lay="phone"] .ticker{display:none}
html[data-lay="phone"] .lede,html[data-lay="phone"] .scene-note,html[data-lay="phone"] .scout-key,html[data-lay="phone"] .grp p,html[data-lay="phone"] .panel-head p,html[data-lay="phone"] .quote cite{display:none}
html[data-lay="phone"] .hero,html[data-lay="phone"] .hero.solo{padding-block:1.4rem .6rem;gap:1rem}
html[data-lay="phone"] .display{font-size:clamp(40px,12.5vw,58px)}
html[data-lay="phone"] .cap{font-size:.62rem;letter-spacing:.12em}
html[data-lay="phone"] .meta-row{gap:.6rem 1.4rem;margin-top:1rem}
html[data-lay="phone"] .stat b{font-size:1.5rem}
html[data-lay="phone"] .stat span{font-size:.58rem}
html[data-lay="phone"] .section-head{margin-top:1.4rem}
html[data-lay="phone"] .section-head h2{font-size:1.7rem}
html[data-lay="phone"] .panel-card{padding:1rem;border-radius:14px;gap:.8rem}
html[data-lay="phone"] .panel-head h2{font-size:1.45rem}
html[data-lay="phone"] .quote{font-size:1.15rem}
/* card tiles: two across, name and price only */
html[data-lay="phone"] .grid{gap:1.6rem .9rem;padding-block:.8rem}
html[data-lay="phone"] .grid.singles,html[data-lay="phone"] .grid.products{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-lay="phone"] .tile{gap:.55rem}
html[data-lay="phone"] .tile-meta{gap:.15rem .5rem}
html[data-lay="phone"] .tile-name,html[data-lay="phone"] .tile-price{font-size:1rem}
html[data-lay="phone"] .grid.pairs .tile-name,html[data-lay="phone"] .grid.pairs .tile-price{font-size:1.25rem}
html[data-lay="phone"] .tile-sub,html[data-lay="phone"] .tile-note{display:none}
html[data-lay="phone"] .tile-bar{margin:0 0 .15rem}
html[data-lay="phone"] .tile .pill{font-size:.56rem;padding:.18rem .45rem}
html[data-lay="phone"] .tile-halo{filter:blur(34px)}
/* scout cards: art, name, price, one tag and the buttons; details open on tap */
html[data-lay="phone"] .sc-why,html[data-lay="phone"] .sc-stats,html[data-lay="phone"] .sc-spark,html[data-lay="phone"] .sc-sub,html[data-lay="phone"] .sc-links{display:none}
html[data-lay="phone"] .sc{gap:.5rem}
html[data-lay="phone"] .sc-name,html[data-lay="phone"] .sc-price{font-size:1rem}
html[data-lay="phone"] .sc-head{flex-direction:column;gap:.15rem}
html[data-lay="phone"] .sc-pills .pill:not(:first-child){display:none}
html[data-lay="phone"] .sc-pills .pill{font-size:.56rem}
html[data-lay="phone"] .sc-actions .btn{min-height:2.2rem;padding:0 .7rem;font-size:.72rem}
html[data-lay="phone"] .groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
html[data-lay="phone"] .grp{padding:.7rem .75rem}
html[data-lay="phone"] .grp b{font-size:1.05rem}
html[data-lay="phone"] .grp .mono{font-size:.66rem}
html[data-lay="phone"] .grp-fan{height:3rem}
html[data-lay="phone"] .opt-launch{min-height:4rem;padding:.5rem 1rem .5rem .6rem;gap:.8rem}
html[data-lay="phone"] .opt-launch b{font-size:1.25rem}
/* viewer */
html[data-lay="phone"] .joinbtn{min-height:2.5rem;padding:0 1.1rem;font-size:.95rem;white-space:nowrap;box-shadow:0 0 0 4px rgba(242,193,78,.12)}
html[data-lay="phone"] .panel h2{font-size:1.9rem}
html[data-lay="phone"] .fact{padding:.45rem 0}
html[data-lay="phone"] .fact span:first-child{font-size:.82rem}
html[data-lay="phone"] .pl-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1rem}
html[data-lay="phone"] .pl-copy b{font-size:1.6rem}
html[data-lay="phone"] .pl-copy ul{font-size:.8rem}
html[data-lay="phone"] .pl-set .field-l input{width:8.5rem}
html[data-lay="phone"] .kpi b{font-size:1.7rem}
html[data-lay="phone"] .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
html[data-lay="phone"] .kpi{padding:.8rem .9rem}
html[data-lay="phone"] .kpi small{display:none}

/* ---------- Build 11 fixes: the phone viewer and page fit the screen in both orientations ---------- */
/* every viewer button gets an equal share of the width, so all of them show (before, the last ones sat off screen) */
html[data-lay="phone"] .controls{width:min(calc(100vw - 1.2rem),34rem);max-width:none;overflow:visible;justify-content:space-between;gap:0;box-sizing:border-box}
html[data-lay="phone"] .ctl{flex:1 1 0;min-width:0;padding:0}
/* full width sections match the phone's 14 px page margin (they used the desktop one, which overflowed in landscape) */
html[data-lay="phone"] .scene,html[data-lay="phone"] .ticker,html[data-lay="phone"] .story,html[data-lay="phone"] .vault{margin-inline:-14px}
/* tile glows stay within the tile's width (the blur still spreads past it), so they can't widen the page */
html[data-lay="phone"] .tile-halo{left:0;right:0}
/* ---------- Films (Blender renders of each LEGEND pair) ---------- */
.film{position:absolute;inset:0;z-index:8;background:#000;opacity:0;transition:opacity .7s ease;display:flex;align-items:center;justify-content:center}
.film[hidden]{display:none!important}
.film.on{opacity:1}
.film video{width:100%;height:100%;object-fit:contain;background:#000}
#film-close{position:absolute;right:calc(env(safe-area-inset-right,0px) + 1rem);top:calc(env(safe-area-inset-top,0px) + 1rem);min-height:2.9rem;padding:0 1.05rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(10,10,12,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;gap:.45rem;transition:opacity .6s}
.film-cap{position:absolute;left:calc(env(safe-area-inset-left,0px) + 1.4rem);bottom:calc(env(safe-area-inset-bottom,0px) + 1.2rem);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);pointer-events:none;transition:opacity 1.5s}
.film.quiet #film-close,.film.quiet .film-cap{opacity:0}
.stage.gallery .film #film-close{display:none}
#film-btn[hidden]{display:none}

/* ---------- Film hero ---------- */
.film-hero{position:relative;margin-inline:calc(-1 * clamp(16px,3.2vw,120px));height:calc(100svh - 6.5rem);min-height:420px;overflow:hidden;background:#000;isolation:isolate}
.film-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.6s ease;background:#000}
.film-hero:not(.cover) video{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.film-hero.cover video{object-fit:cover}
.film-hero.cover{height:auto;min-height:0;aspect-ratio:32/9;max-height:88svh}
.film-hero.cover[data-shape="t"]{aspect-ratio:4/3}
.film-hero.cover[data-shape="p"]{aspect-ratio:9/16}
.film.cover video{object-fit:cover}
/* Build 11 fix: the film layer shares the class name "cover" with the home page's cover image, which is capped at 34% of
   the screen height; on phones that squeezed the film into a band across the top. The film always fills the viewer. */
.film.cover{max-height:none;height:auto;border-radius:0;overflow:hidden}
/* Build 11: filmFit sizes the viewer film so it never crops into the card; where it letterboxes, the edges fade to black */
.film.cover video{flex:none;max-width:none;max-height:none}
.film.cover.bars-x::before,.film.cover.bars-y::before{content:"";position:absolute;left:50%;top:50%;width:var(--fvw);height:var(--fvh);transform:translate(-50%,-50%);pointer-events:none}
.film.cover.bars-x::before{background:linear-gradient(90deg,#000,rgba(0,0,0,0) 5%,rgba(0,0,0,0) 95%,#000)}
.film.cover.bars-y::before{background:linear-gradient(180deg,#000,rgba(0,0,0,0) 5%,rgba(0,0,0,0) 95%,#000)}
html[data-lay="phone"] .film-hero{margin-inline:calc(50% - 50vw);width:100vw;max-width:none;box-sizing:border-box}
html[data-lay="phone"] .film-hero.cover{aspect-ratio:auto;height:min(calc(100svh - 64px), calc(100vw * 16 / 9 / .98));max-height:none;min-height:0}
.film-hero video.on{opacity:1}
/* Film hero glow (Build 10c): the playing film's light spills onto the page around it */
.fh-glowwrap{position:relative;height:0;pointer-events:none}
.fh-glow{position:absolute;left:0;top:0;display:block;opacity:0;transition:opacity 1.6s ease}
.fh-glow.on{opacity:1}
/* Build 11: on every layout but the phone, the hero keeps its film's own shape (32:9, 4:3 or 9:16), centered, with the glow
   filling the sides. A box wider than its film had cropped the film's top and bottom, which cut into the card on a 16:9 TV
   and on an iPad in portrait. (This replaces the 10c rule that centered only the ultrawide film.) */
html:not([data-lay="phone"]) .film-hero.cover{--fha:32 / 9;--fhw:min(calc(100% + 2 * clamp(16px,3.2vw,120px)), calc(88svh * var(--fha)));width:var(--fhw);margin-inline:calc((100% - var(--fhw)) / 2)}
html:not([data-lay="phone"]) .film-hero.cover[data-shape="t"]{--fha:4 / 3}
html:not([data-lay="phone"]) .film-hero.cover[data-shape="p"]{--fha:9 / 16}
.fh-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,0) 38%),linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 45%)}
.fh-copy{position:absolute;left:clamp(16px,3.2vw,120px);bottom:clamp(20px,5vh,80px);right:clamp(16px,3.2vw,120px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem;z-index:2}
.fh-copy .cap{margin-bottom:.5rem}
.fh-name{margin:0;font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(40px,min(6vw,9vh),220px);line-height:.85;transition:opacity .6s}
.fh-sub{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--muted);margin-top:.6rem;text-transform:uppercase}
.fh-side{display:flex;flex-direction:column;align-items:flex-end;gap:.8rem}
.fh-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem}
.fh-play[hidden]{display:none}
html[data-lay="phone"] .fh-btns{justify-content:flex-start}
.fh-dots{display:flex;gap:.45rem}
.fh-dots button{width:2.6rem;height:.35rem;border:0;border-radius:999px;background:rgba(255,255,255,.22);padding:0;position:relative;overflow:hidden}
.fh-dots button[aria-current="true"]{background:rgba(255,255,255,.35)}
.fh-dots button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;animation:fhbar var(--fhd,16s) linear forwards}
@keyframes fhbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fh-scroll{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
html[data-lay="phone"] .film-hero{height:auto;aspect-ratio:9/13;min-height:0;margin-top:.4rem}
html[data-lay="phone"] .film-hero:not(.cover){aspect-ratio:16/12}
html[data-lay="phone"] .fh-name{font-size:2.1rem}
html[data-lay="phone"] .fh-side{align-items:flex-start}
html[data-lay="phone"] .fh-scroll{display:none}
@media (prefers-reduced-motion: reduce){ .fh-dots button[aria-current="true"]::after{animation:none;transform:none} }

@media (max-width: 1100px){
  .hero,.hero.solo,.cols,.deal{grid-template-columns:minmax(0,1fr)}
  .stage-inner{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .panel{border-left:0;border-top:1px solid var(--line);max-height:44vh;padding:1.2rem 1rem 1.8rem}
  .hint,.chips{display:none}
  .controls{bottom:.8rem}
  .ctl span{display:none}
  .bar{grid-template-columns:auto auto}
  .tabs{grid-column:1 / -1;order:3;justify-self:start;overflow-x:auto;max-width:100%}
  .menu{grid-template-columns:minmax(0,1fr)}
  .menu-art{display:none}
  .scene-copy{max-width:none;right:16px;top:9vh}
  .scene-note{display:none}
  .scene-cards{height:min(46vh,62vw)}
  .cursor{display:none}
}
@media (pointer: coarse){ .cursor{display:none} }
@media (prefers-reduced-motion: reduce){
  .scene{height:auto}
  .scene-sticky{position:relative;height:auto;min-height:80vh}
  .rv{transform:none;transition:none}
  .scene-hint i{animation:none}
  .tile-art,.half,.slice,.tickmark{transition:none}
  .seamflash.go,.reveal,.field,.ticker-track,.tile-art::before{animation:none}
  .cursor{display:none}
}
/* ---------- Build 11: performance and quality levels ---------- */
/* nothing on the page animates while a full screen layer (viewer, deck) covers it */
html.dc-cover .field,html.dc-cover .ticker-track,html.dc-cover .tile-art::before,html.dc-cover .sc-art::before,html.dc-cover .pocket::before,html.dc-cover .opt-launch::after,html.dc-cover .scene-hint i,html.dc-cover .fh-dots button::after{animation-play-state:paused!important}
/* Light quality (html[data-q="low"]): the costliest decorations go; everything you use stays */
html[data-q="low"] .tile-halo,html[data-q="low"] .sc-art::after{display:none}
html[data-q="low"] .field{animation:none}
html[data-q="low"] .tile-art{filter:none}
/* frame meter: press ` */
.fmeter{position:fixed;right:12px;top:12px;z-index:95;pointer-events:none;background:rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px 10px;font:600 11px/1.4 "JetBrains Mono",ui-monospace,Consolas,monospace;color:#e8e6df}
.fmeter[hidden]{display:none}
.fmeter canvas{display:block;width:240px;height:56px;margin-bottom:6px}
.fmeter pre{margin:0;font:inherit;white-space:pre}
/* ---------- Build 11: motion polish (all of it off with reduced motion) ---------- */
/* tiles: the spring drives --tx, --ty and --lift, so the transform itself has no CSS transition */
.tile-art.spring{transition:filter .35s;transform:perspective(1200px) translateY(calc(var(--lift, 0) * -8px)) rotateX(var(--tx)) rotateY(var(--ty)) scale(calc(1 + var(--lift, 0) * .015))}
/* headings below the fold start clipped and rise when they scroll in (the same rise the page titles use) */
.pre-rise{clip-path:inset(0 0 100% 0)}
/* the viewer fades in and the card settles up into place. "backwards", not "both": a finished animation that keeps
   holding opacity makes the browser draw the whole viewer into an extra layer every frame (measured: about 35% slower) */
.stage:not([hidden]){animation:stageIn .32s ease-out backwards}
.stage:not([hidden]) .rig{animation:rigIn .6s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes stageIn{from{opacity:0}to{opacity:1}}
@keyframes rigIn{from{opacity:0;transform:translateY(18px) scale(.965)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .stage:not([hidden]),.stage:not([hidden]) .rig{animation:none} .pre-rise{clip-path:none} }
/* ---------- Build 11: price freshness notice (only when prices might not be current) ---------- */
.fresh{position:fixed;left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:92;display:flex;gap:.5rem;align-items:center;max-width:min(36rem,calc(100vw - 32px));padding:.5rem .5rem .5rem 1rem;border-radius:999px;background:rgba(20,16,6,.94);border:1px solid rgba(242,193,78,.55);color:var(--accent);font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.fresh[hidden]{display:none}
.fresh button{flex:none;width:2rem;height:2rem;border-radius:50%;border:0;background:transparent;color:inherit;font-size:1.1rem;line-height:1}
/* Menu > Motion > Calm (Phase 4): the same stillness as the device's reduced motion setting, on any device */
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
html.calm::view-transition-group(*),html.calm::view-transition-old(*),html.calm::view-transition-new(*){animation:none!important}
html.calm .pre-rise{clip-path:none}
/* and the same changes the reduced motion blocks make (13-films.css, 09-build7.css, 15-motion.css, 16-vault-slabs.css); keep in step */
html.calm .scene{height:auto}
html.calm .scene-sticky{position:relative;height:auto;min-height:80vh}
html.calm .rv{transform:none;transition:none}
html.calm .scene-hint i,html.calm .seamflash.go,html.calm .reveal,html.calm .field,html.calm .ticker-track,html.calm .tile-art::before{animation:none}
html.calm .tile-art,html.calm .half,html.calm .slice,html.calm .tickmark,html.calm .vslab-case,html.calm .vslab-art{transition:none}
html.calm .cursor,html.calm .boot{display:none}
html.calm .fh-dots button[aria-current="true"]::after{animation:none;transform:none}
html.calm .stage:not([hidden]),html.calm .stage:not([hidden]) .rig{animation:none}
/* Build 13: the Legends page is purely visual, and the slabs live in the Vault */
#stage.pure #slab-btn,#stage.pure .hint-slab{display:none}
.vault-link p{margin:.2rem 0 .8rem}
/* the slabs you own, each next to its card art (Build 13.1: the Vault script sets --vsh so the row splits evenly, all in one row when they fit) */
.vslabs{padding:clamp(20px,4vh,72px) 0 clamp(36px,7vh,120px)}
/* the glow behind a slab never widens the page (on a phone it reached a few pixels past the edge) */
.vslabs{overflow-x:clip}
@supports not (overflow-x:clip){.vslabs{overflow:hidden}}
.vslabs-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 3rem;margin-bottom:clamp(24px,5vh,72px)}
.vslabs-head h2{margin:.5rem 0 0;font-family:var(--cond);font-weight:900;font-size:clamp(44px,4.2vw,150px);text-transform:uppercase;line-height:.9}
.vslabs-head h2 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--accent)}
.vslabs-head p{max-width:36rem;margin:.9rem 0 0}
.vslabs-head .meta-row{margin-top:0}
.vslab-row{display:flex;flex-wrap:wrap;gap:clamp(36px,5vh,80px) clamp(28px,3.6vw,120px)}
.vslab{--sh:var(--vsh,clamp(200px,min(46vh,calc((100vw - 60px) / 1.29)),660px));position:relative;display:flex;flex-direction:column;gap:1.1rem;border:0;background:none;padding:0;color:inherit;text-align:left;cursor:pointer;font:inherit}
.vslab-glow{position:absolute;left:-10%;right:-10%;top:-8%;height:calc(var(--sh) * 1.16);background:radial-gradient(closest-side at 32% 50%,color-mix(in srgb,var(--c1) 60%,transparent),transparent),radial-gradient(closest-side at 72% 52%,color-mix(in srgb,var(--c2) 50%,transparent),transparent);filter:blur(42px);opacity:.42;pointer-events:none;transition:opacity .5s}
.vslab:hover .vslab-glow,.vslab:focus-visible .vslab-glow{opacity:.8}
.vslab-pair{position:relative;display:flex;align-items:center;gap:clamp(14px,1.5vw,44px);height:var(--sh)}
.vslab-case{--h:var(--sh);height:var(--sh);display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 24px 50px rgba(0,0,0,.6))}
.vslab-art{height:calc(var(--sh) * .9);aspect-ratio:734/1024;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.vslab-art img{width:100%;height:100%;object-fit:cover;border-radius:4.8%/3.4%;display:block;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.vslab:hover .vslab-case,.vslab:focus-visible .vslab-case{transform:translateY(-8px) rotate(-1.2deg)}
.vslab:hover .vslab-art,.vslab:focus-visible .vslab-art{transform:translateY(-4px) rotate(.8deg)}
.vslab-cap{position:relative;display:flex;flex-direction:column;gap:.3rem}
.vslab-cap b{font-family:var(--cond);font-weight:900;font-size:clamp(24px,1.7vw,52px);text-transform:uppercase;line-height:1}
.vslab-cap span{font-size:.92rem;color:var(--muted)}
.vslab-cap .mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--text)}
.vslab-cap .mono.dim{color:var(--muted)}
.vslab-none{margin:0}
/* the flat vault (phones and browsers without 3D): an owned, graded half sits in its slab */
.vs-halves{display:flex;align-items:center;gap:.35rem;height:11rem}
.vs-case{--h:11rem;height:11rem;display:block}
@media (prefers-reduced-motion:reduce){.vslab-case,.vslab-art{transition:none}}