/* dice — shared feature styles (Roll the dice, vibe picker, budget slider, recently viewed, compare tray,
   rarity meter, share card) used by home, shop, name, saved, compare and bid. Builds on site.css variables. */

.pill--light{color:#111111}
.ncard{min-width:0}
@media (max-width:420px){.names{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dz-link{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* ---------- compare toggle on name cards + floating pill ---------- */
.dz-cmp{margin-inline-start:auto;width:30px;height:30px;margin-block:-6px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:2px solid var(--line);background:var(--card);color:var(--muted);font-size:.74rem;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.ncard__top .dz-cmp i,.ncard__top .dz-try i{color:inherit;font-size:inherit}
.dz-cmp:hover{border-color:var(--ink);color:var(--ink)}
.dz-cmp[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.ncard__new + .dz-cmp,.dz-try + .dz-cmp{margin-inline-start:6px}
.dz-try{margin-inline-start:auto;width:30px;height:30px;margin-block:-6px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--blue-soft);color:var(--blue);font-size:.76rem;cursor:pointer}
.dz-try:hover{background:var(--blue);color:#fff}
.ncard__new + .dz-try{margin-inline-start:6px}
.ncard--blue .dz-cmp{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.dz-cmp-pill{position:fixed;inset-inline-end:20px;bottom:80px;z-index:65;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-weight:800;font-size:.9rem;box-shadow:0 14px 30px rgba(17,17,17,.22);transition:transform .2s ease,opacity .2s ease}
.dz-cmp-pill b{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--gold);color:var(--on-gold);display:inline-grid;place-items:center;font-size:.78rem}
.dz-cmp-pill[hidden]{display:none}
@media (max-width:520px){.dz-cmp-pill{min-height:44px;padding:0 12px;gap:8px}.dz-cmp-pill__t{display:none}}
.dz-cmp-pill:hover{transform:translateY(-2px)}
body:has(.lp-sticky.show) .dz-cmp-pill{bottom:156px}

/* ---------- Roll the dice ---------- */
.roll{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:stretch}
.roll__controls{display:grid;gap:18px;align-content:start}
.roll__controls .seg{display:flex;width:100%;background:var(--card)}
.roll__controls .seg button{flex:1;justify-content:center;padding:0 8px}
.roll__budget{display:flex;flex-wrap:wrap;gap:8px}
.roll__go{min-height:62px;font-size:1.1rem}
.roll__go i{font-size:1.3rem}
.roll__fine{font-size:.84rem;color:var(--muted);font-weight:600}
.roll__stage{position:relative;border-radius:var(--r-lg);background:var(--ink);color:#fff;padding:clamp(20px,3vw,32px);display:grid;gap:18px;align-content:center;min-height:300px;overflow:hidden}
:root[data-theme="dark"] .roll__stage{background:#000}
.roll__label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65)}
.roll__label span:last-child{color:var(--gold)}
.roll__window{--row:1.25em;position:relative;height:var(--row);overflow:hidden;font-size:clamp(2.2rem,6vw,4.2rem);font-weight:800;letter-spacing:-.035em;line-height:var(--row);
  border-block:3px solid rgba(255,255,255,.14);box-sizing:content-box}
.roll__reel{display:grid;will-change:transform}
.roll__reel span{display:block;height:var(--row);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roll__reel.is-blur span:not(:last-child){opacity:.55}
.roll__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:34px;font-weight:700;font-size:.92rem;color:rgba(255,255,255,.8)}
.roll__price{padding:6px 14px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-weight:800}
.roll__acts{display:flex;flex-wrap:wrap;gap:10px}
.roll__acts[hidden]{display:none}
.roll__acts .pill--line{border-color:rgba(255,255,255,.4);color:#fff}
.roll__acts .pill--line:hover{border-color:#fff}
.roll__msg{font-weight:700;color:rgba(255,255,255,.85)}
.roll__msg:empty{display:none}
.roll__pips{position:absolute;bottom:18px;inset-inline-end:18px;display:grid;grid-template-columns:repeat(3,8px);gap:5px;opacity:.25}
.roll__pips i{width:8px;height:8px;border-radius:50%;background:#fff}
.roll__pips i:nth-child(2),.roll__pips i:nth-child(4),.roll__pips i:nth-child(6),.roll__pips i:nth-child(8){visibility:hidden}
@media (prefers-reduced-motion:no-preference){.roll.is-rolling .roll__go i{animation:dzSpin .6s linear infinite}@keyframes dzSpin{to{transform:rotate(360deg)}}}
@media (max-width:820px){.roll{grid-template-columns:1fr}.roll__stage{min-height:250px}}
.rollp{container-type:inline-size}
@container (max-width:780px){.roll{grid-template-columns:1fr}.roll__stage{min-height:250px}}
@media (max-width:520px){.roll__controls .seg button{font-size:.78rem;padding:0 4px;gap:5px}.roll__controls .seg button i{display:none}}

/* ---------- Vibe picker ---------- */
.vibes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.vibe{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 8px;border-radius:999px;border:2px solid var(--line);background:var(--card);font-weight:800;font-size:.95rem;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.vibe i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cream);font-size:.9rem;color:var(--ink)}
.vibe:hover{border-color:var(--ink)}
.vibe[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.vibe[aria-pressed="true"] i{background:#fff;color:var(--blue)}
.sec--cream .vibe{border-color:transparent}
.sec--cream .vibe[aria-pressed="true"]{border-color:var(--blue)}
.vibe-out__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px}
.vibe-out__head p{color:var(--ink-2);font-weight:600}
@media (max-width:520px){.vibe{min-height:44px;font-size:.86rem;padding-inline-end:14px}.vibe i{width:30px;height:30px}}

/* ---------- Budget slider ---------- */
.budget{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:start}
.budget__q{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1;letter-spacing:-.035em}
.budget__q output{display:inline-block;color:var(--gold);min-width:3ch}
.budget__range{margin-top:28px}
.budget__range input{width:100%;height:44px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.budget__range input::-webkit-slider-runnable-track{height:12px;border-radius:999px;background:rgba(255,255,255,.25)}
.budget__range input::-moz-range-track{height:12px;border-radius:999px;background:rgba(255,255,255,.25)}
.budget__range input::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;margin-top:-12px;border-radius:50%;background:var(--gold);border:4px solid #fff}
.budget__range input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--gold);border:4px solid #fff}
.budget__ticks{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.7);margin-top:4px}
.budget__count{margin-top:22px;font-weight:700;color:rgba(255,255,255,.88)}
.budget__count b{color:#fff;font-size:1.3rem}
.budget .pill{margin-top:22px}
.budget .names{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.budget .ncard{border-color:transparent;color:var(--ink)}
@media (max-width:860px){.budget{grid-template-columns:1fr}}

/* ---------- Recently viewed strip ---------- */
.recent{padding:clamp(40px,6vw,64px) 0}
.recent__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.recent__head h2{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.recent__head button{background:none;border:0;padding:0;cursor:pointer;font-weight:700;font-size:.86rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.recent__strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,200px);gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.recent__strip .ncard{scroll-snap-align:start}

/* ---------- Empty / status boxes ---------- */
.dz-empty{grid-column:1/-1;border-radius:var(--r-lg);background:var(--cream);padding:clamp(28px,5vw,44px) 22px;text-align:center;display:grid;gap:14px;justify-items:center;color:var(--ink-2);font-weight:600}
.dz-empty i.big{font-size:2.2rem;color:var(--gold-deep)}
.sec--cream .dz-empty{background:var(--card)}

/* ---------- Rarity meter ---------- */
.rarity{border-radius:var(--r);background:var(--cream);padding:20px 22px;display:grid;gap:12px}
.rarity__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rarity__top h3{font-size:1.1rem}
.rarity__tier{font-weight:800;font-size:.86rem;padding:5px 12px;border-radius:999px;background:var(--ink);color:var(--paper)}
.rarity__bar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rarity__bar i{height:12px;border-radius:999px;background:var(--line)}
.rarity__bar i.on{background:var(--blue)}
.rarity__bar i.on:nth-child(n+4){background:var(--gold)}
.rarity__scale{display:flex;justify-content:space-between;font-size:.74rem;font-weight:700;color:var(--muted)}
.rarity p{color:var(--ink-2);font-size:.94rem}
.rarity p b{color:var(--ink)}

/* =====================================================================
   NEXT LEVEL (home, shop, name, saved, compare, bid)
   Hard shadows and chunky outlines, no glows, no gradients.
   ===================================================================== */
:root{--hard:#111111;--hard-line:#111111}
:root[data-theme="dark"]{--hard:#000;--hard-line:#3A3A3A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hard:#000;--hard-line:#3A3A3A}}

/* tickers never push the page sideways */
.tk-wrap{overflow:hidden;padding:16px 0;margin:-16px 0;position:relative;z-index:4}
.tk-wrap .ticker{margin:0 -20px}

/* ---------- name cards: tilt, hard shadow, stickers ---------- */
.ncard{transition:border-color .18s ease,transform .25s ease,box-shadow .18s ease,rotate .25s ease}
.ncard:not(.is-loading):not(.ncard--gone):hover{border-color:var(--hard-line);box-shadow:6px 6px 0 var(--blue);transform:translateY(-4px)}
.ncard:not(.is-loading):hover .ncard__name{color:var(--blue)}
:root[data-theme="dark"] .ncard:not(.is-loading):hover .ncard__name{color:var(--link)}
.ncard__new{border:2px solid #111111;font-weight:900;rotate:-5deg;background:var(--blue);color:#fff;box-shadow:2px 2px 0 #111111}
.ncard__stk{position:absolute;top:-13px;inset-inline-start:-6px;z-index:3;padding:4px 11px;font-size:.72rem;border-width:2px;box-shadow:3px 3px 0 #111111;rotate:-6deg;pointer-events:none}
.ncard__stk i{font-size:.7rem}
.ncard.is-loading{position:relative;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .ncard.is-loading::after{content:"";position:absolute;inset:0;background:var(--card);opacity:.5;animation:dzPulse 1.2s ease-in-out infinite}
  @keyframes dzPulse{50%{opacity:0}}
}

/* ---------- empty states: Dicey + speech bubble ---------- */
.dz-empty--scene{grid-template-columns:auto minmax(0,1fr);text-align:start;justify-items:start;align-items:center;gap:clamp(14px,3vw,30px);padding:clamp(22px,4vw,36px);border:3px dashed var(--line)}
.dz-empty__dicey{width:clamp(150px,20vw,240px);justify-self:center;margin-block:-24px -18px}
.dz-empty__dicey img{width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.16))}
.dz-empty__say{position:relative;display:grid;gap:12px;justify-items:start;padding:20px 24px;border-radius:24px;background:var(--card);color:var(--ink-2);font-weight:600;box-shadow:6px 6px 0 var(--hard)}
.sec--cream .dz-empty__say,.dz-empty--scene .dz-empty__say{background:var(--card)}
.dz-empty--scene{background:var(--cream)}
.sec--cream .dz-empty--scene{background:var(--paper)}
.dz-empty__say::before{content:"";position:absolute;inset-inline-start:-12px;top:28px;border:12px solid transparent;border-inline-end-color:var(--card);border-inline-start:0}
.dz-empty__say strong{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:900;letter-spacing:-.025em;color:var(--ink);line-height:1.1}
.dz-empty__acts{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:620px){
  .dz-empty--scene{grid-template-columns:1fr;justify-items:center;text-align:center}
  .dz-empty__say{justify-items:center}
  .dz-empty__acts{justify-content:center}
  .dz-empty__say::before{inset-inline-start:50%;top:-12px;border:12px solid transparent;border-bottom-color:var(--card);border-top:0;translate:-50% 0}
}
@media (prefers-reduced-motion:no-preference){.dz-empty__dicey img{animation:dzBob 3.2s ease-in-out infinite}@keyframes dzBob{50%{translate:0 -8px}}}

/* ---------- Roll the dice: game stage ---------- */
.roll__stage{overflow:visible;border:3px solid var(--hard);box-shadow:10px 10px 0 var(--blue);min-height:380px;padding-top:clamp(64px,7vw,84px)}
.roll__fx{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3}
.roll__fx i{position:absolute;top:-16px;width:10px;height:16px;border-radius:2px;animation:dzConf 1.5s cubic-bezier(.25,.6,.4,1) forwards}
@keyframes dzConf{to{transform:translate(var(--dx),460px) rotate(var(--r));opacity:.9}}
.roll__dicey{position:absolute;top:-150px;inset-inline-end:-24px;width:clamp(170px,17vw,240px);z-index:2;pointer-events:none}
.roll__dicey img{width:100%;height:auto;filter:drop-shadow(0 14px 16px rgba(0,0,0,.3));transform-origin:50% 90%}
.roll__label{padding-inline-end:clamp(120px,13vw,170px)}
.roll__window{--row:1.2em;font-size:clamp(2.4rem,6.4vw,5rem);border:3px solid rgba(255,255,255,.16);border-radius:22px;padding:0 .35em;background:rgba(255,255,255,.05)}
.roll__reel span{color:#fff}
.roll.is-landed .roll__reel span:last-child{color:var(--gold)}
.roll__price{font-size:1.15rem;padding:8px 16px;border:2px solid #000}
.roll__go{border:3px solid var(--hard);box-shadow:0 6px 0 var(--hard);transition:transform .1s ease,box-shadow .1s ease,background-color .15s ease}
.roll__go:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--hard)}
.roll__go:active,.roll.is-rolling .roll__go{transform:translateY(5px);box-shadow:0 1px 0 var(--hard)}
.roll__controls .seg{border:3px solid var(--hard);padding:4px}
.roll__budget .chip{border:3px solid var(--hard);box-shadow:0 3px 0 var(--hard);transition:transform .1s ease,box-shadow .1s ease}
.roll__budget .chip[aria-pressed="true"]{background:var(--blue);border-color:var(--hard);color:#fff;transform:translateY(3px);box-shadow:0 0 0 var(--hard)}
.roll__pips{display:none}
@media (prefers-reduced-motion:no-preference){
  .roll.is-rolling .roll__dicey img{animation:dzShake .32s ease-in-out infinite}
  .roll.is-landed .roll__window{animation:dzLand .7s cubic-bezier(.2,1.7,.4,1)}
  .roll.is-landed .roll__dicey img{animation:dzPop .6s cubic-bezier(.2,1.6,.4,1)}
  .roll.is-landed .roll__price{animation:dzPop .5s cubic-bezier(.2,1.6,.4,1) .1s both}
  @keyframes dzShake{0%,100%{rotate:-6deg}50%{rotate:6deg;translate:0 -6px}}
  @keyframes dzLand{0%{scale:.92}55%{scale:1.06}100%{scale:1}}
  @keyframes dzPop{0%{scale:.6}100%{scale:1}}
}
@media (max-width:820px){.roll__stage{min-height:300px;margin-top:96px}}
@container (max-width:780px){.roll__stage{margin-top:96px}}
@media (max-width:520px){.roll__dicey{width:140px;top:-96px;inset-inline-end:-10px}.roll__label{padding-inline-end:92px}.roll__stage{padding-top:52px;box-shadow:6px 6px 0 var(--blue)}}

/* ---------- vibe picker: arcade buttons ---------- */
.vibe{border:3px solid var(--hard);box-shadow:0 5px 0 var(--hard);transition:transform .1s ease,box-shadow .1s ease,background-color .15s ease}
.sec--cream .vibe{border-color:var(--hard)}
.vibe:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--hard);border-color:var(--hard)}
.vibe[aria-pressed="true"],.sec--cream .vibe[aria-pressed="true"]{background:var(--blue);border-color:var(--hard);transform:translateY(4px);box-shadow:0 1px 0 var(--hard)}
.vibe i{background:var(--gold);color:var(--on-gold)}
.vibes{gap:14px 12px;margin-bottom:30px}
[data-vibe-grid]{gap:22px 14px}
[data-vibe-grid] .ncard:not(.is-loading){border:3px solid var(--hard-line);box-shadow:4px 4px 0 var(--hard)}
[data-vibe-grid] .ncard:nth-child(odd){rotate:-1.4deg}
[data-vibe-grid] .ncard:nth-child(even){rotate:1.2deg}
[data-vibe-grid] .ncard:hover{rotate:0deg}
[data-vibe-grid] .ncard:nth-child(3):not(.is-loading){background:var(--blue);color:#fff;border-color:#111111}
[data-vibe-grid] .ncard:nth-child(3) .ncard__top,[data-vibe-grid] .ncard:nth-child(3) .ncard__top i,[data-vibe-grid] .ncard:nth-child(3) .wl-heart{color:rgba(255,255,255,.85)}
[data-vibe-grid] .ncard:nth-child(3) .dz-cmp,[data-vibe-grid] .ncard:nth-child(3) .dz-try{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
[data-vibe-grid] .ncard:nth-child(3):hover .ncard__name{color:#fff}

/* ---------- budget slider: game control ---------- */
.budget__q output{padding:0 .18em;border-radius:.18em;background:var(--gold);color:var(--on-gold);border:4px solid #111111;box-shadow:6px 6px 0 #111111;rotate:-3deg;margin:.08em .04em}
.budget__range input{height:56px}
.budget__range input::-webkit-slider-runnable-track{height:18px;border-radius:999px;background:#111111;border:3px solid #fff}
.budget__range input::-moz-range-track{height:18px;border-radius:999px;background:#111111;border:3px solid #fff}
.budget__range input::-moz-range-progress{height:18px;border-radius:999px;background:var(--gold)}
.budget__range input::-webkit-slider-thumb{width:46px;height:46px;margin-top:-17px;border-radius:13px;background:#fff;border:4px solid #111111;box-shadow:4px 4px 0 #111111;rotate:12deg;transition:rotate .2s ease}
.budget__range input:active::-webkit-slider-thumb{rotate:-12deg}
.budget__range input::-moz-range-thumb{width:38px;height:38px;border-radius:12px;background:#fff;border:4px solid #111111;box-shadow:4px 4px 0 #111111}
.budget__ticks{font-size:.9rem}
.budget .names .ncard{border:3px solid #111111}
.budget .names .ncard:nth-child(odd){rotate:-1.5deg}
.budget .names .ncard:nth-child(even){rotate:1.2deg}
.budget .names .ncard:hover{rotate:0deg;box-shadow:6px 6px 0 var(--gold)}

/* ---------- rarity meter: dice that light up ---------- */
.rmeter{display:flex;gap:clamp(6px,1.2vw,10px);align-items:center}
.rmeter .die3d{--s:clamp(36px,4.4vw,48px);background:var(--card);box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);border:2px solid var(--line);opacity:.55;transition:transform .3s ease,opacity .3s ease}
.rmeter .die3d i.on{background:var(--line);box-shadow:none}
.rmeter .die3d.lit{opacity:1;background:var(--blue);border-color:var(--hard)}
.rmeter .die3d.lit i.on{background:#fff}
.rmeter .die3d.lit.hot{background:var(--gold)}
.rmeter .die3d.lit.hot i.on{background:#111111}
.rmeter .die3d.lit:nth-child(odd){rotate:-8deg}
.rmeter .die3d.lit:nth-child(even){rotate:7deg}

/* ---------- compare pill: chunkier ---------- */
.dz-cmp-pill{border:3px solid var(--gold);box-shadow:5px 5px 0 var(--blue)}

/* ---------- section helpers used by several pages ---------- */
.sec,.recent{position:relative}
.recent.wavy::before{background:var(--paper)}
.recent.sec--cream.wavy::before{background:var(--cream)}
.hero-stk{display:inline-flex;margin-inline-start:14px;vertical-align:middle;translate:0 -.3em;font-size:clamp(.9rem,1.4vw,1.1rem);letter-spacing:0;line-height:1.2}
.hero-cta-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.hero-cta-row .doodle{position:absolute;width:96px;color:var(--gold);pointer-events:none}
.tilt-l{rotate:-2deg}.tilt-r{rotate:2deg}
@media (max-width:620px){.hero-stk{display:flex;width:max-content;margin:12px 0 0;translate:0}}

/* Dicey renders: clip to the figure so the render's soft floor band doesn't show as a box on flat colours */