/* 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:#15171E}
.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(21,23,30,.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)}