/* Self-hosted brand faces, same pairing as gamedex: Archivo 800 for display,
   IBM Plex Sans for the interface. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plex";
  src: url("fonts/plex-sans.woff2") format("woff2");
  font-weight: 100 700; font-style: normal; font-display: swap;
}

/* ==========================================================================
   whatnow.gg — design system
   Heritage purple on near-black. Token names match gamedex so ported pick
   CSS lands unchanged; values shift toward the whatnow gradient brand.
   ========================================================================== */
:root {
  color-scheme: dark;

  --bg: #0b0a14;
  --bg-2: #0f0d1c;
  --surface: #161424;
  --surface-2: #1c1930;
  --surface-3: #262240;
  --border: #262240;
  --border-soft: #1c1930;

  --text: #eceaf6;
  --muted: #9d96b8;
  --dim: #645d80;

  --accent: #8b6cff;
  --accent-deep: #4f2fe0;
  --grad: linear-gradient(135deg, #8b6cff, #4f2fe0);
  --accent-soft: rgba(139, 108, 255, .16);
  --accent-line: rgba(139, 108, 255, .45);
  --on-accent: #0b0713;

  --good: #34d399;
  --warn: #fbbf24;
  --bad: #f87171;

  --bar-bg: rgba(15, 13, 28, .72);
  --glass: rgba(26, 23, 44, .82);
  --overlay: rgba(5, 4, 12, .72);
  --shimmer: rgba(255, 255, 255, .055);

  --accent-2: #22d3ee;

  --r: 12px;
  --r-sm: 8px;
  --r-lg: 16px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 10px 30px rgba(0, 0, 0, .45);
  --sh-3: 0 24px 64px rgba(0, 0, 0, .6);
  --glow: 0 0 0 1px var(--accent-line), 0 10px 34px rgba(139, 108, 255, .20);
  --ease: cubic-bezier(.2, .8, .2, 1);

  --display: "Archivo", system-ui, sans-serif;
  --font: "Plex", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 "Plex", system-ui, sans-serif;
}
h1, h2, h3 { font-family: "Archivo", system-ui, sans-serif; font-weight: 800; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  padding: 9px 16px; cursor: pointer; transition: all .15s var(--ease);
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--grad); border-color: transparent; color: #fff; font-weight: 600; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-steam { background: #171a21; border-color: #2a475e; color: #fff; font-weight: 600; }
.btn-steam:hover { background: #1b2838; }

/* ---- topbar ------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--bar-bg);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-name { font-family: "Archivo"; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.brand-tld { opacity: .4; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.topbar-me { display: flex; align-items: center; gap: 8px; color: var(--text); }
.topbar-me img { width: 26px; height: 26px; border-radius: 6px; }

/* ---- landing ------------------------------------------------------------ */
.landing { max-width: 620px; margin: 0 auto; padding: 64px 20px; text-align: center; }
.landing-logo { border-radius: 22px; box-shadow: var(--sh-2); }
.landing h1 { font-size: clamp(34px, 6vw, 52px); letter-spacing: -.02em; margin: 22px 0 10px; }
.landing-sub { color: var(--muted); font-size: 17px; max-width: 44ch; margin: 0 auto; }
.landing-entry {
  margin: 36px auto 0; padding: 26px; max-width: 460px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.landing-or { color: var(--dim); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.landing-form { display: flex; gap: 8px; width: 100%; }
.landing-form input {
  flex: 1; min-width: 0; padding: 9px 12px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
}
.landing-form input:focus { border-color: var(--accent-line); outline: none; }
.landing-err { color: var(--bad); font-size: 14px; }
.landing-note { color: var(--dim); font-size: 13px; margin-top: 26px; }

/* ---- library ------------------------------------------------------------ */
#appview { max-width: 1180px; margin: 0 auto; padding: 26px 20px 80px; }
.lib-owner { display: flex; align-items: center; gap: 14px; }
.lib-avatar { width: 56px; height: 56px; border-radius: 12px; box-shadow: var(--sh-1); }
.lib-owner h2 { margin: 0; font-size: 24px; }
.lib-meta { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 10px; }
.lib-status { color: var(--muted); padding: 18px 0; }
.lib-status:empty { display: none; }

.game-grid {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.game-tile {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r); overflow: hidden; transition: transform .15s var(--ease);
}
.game-tile:hover { transform: translateY(-2px); border-color: var(--border); }
.game-tile img { display: block; width: 100%; aspect-ratio: 460/215; object-fit: cover; }
.game-tile-body { padding: 10px 12px; }
.game-tile-name { font-weight: 600; font-size: 14px; }
.game-tile-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.private-box {
  max-width: 560px; margin: 48px auto; padding: 30px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); text-align: center;
}
.private-box h2 { margin: 0 0 10px; }
.private-box p { color: var(--muted); }
.private-note { font-size: 13px; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Ported picker styles, extracted from gamedex style.css (pick/pkg/pk-pop/
   roll/facet/view-chip families plus the primitives they lean on).
   ========================================================================== */

/* ---- the search field, once -------------------------------------------------
   Three of these had drifted apart (top bar, Groupings, Reviews). One component
   now: the icon sits inside, the input owns the box, and focus is the same
   everywhere. */
.field { position: relative; display: inline-flex; align-items: center; min-width: 0; }

.field .ico {
  position: absolute; left: 12px; color: var(--dim); pointer-events: none;
  transition: color .15s var(--ease);
}

.field input {
  width: 100%; min-width: 0;      /* an input's intrinsic size would force overflow */
  padding: 9px 14px 9px 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text); font: 400 13.5px var(--font);
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}

.field input::placeholder { color: var(--dim); }

.field input:focus {
  outline: none; border-color: var(--accent-line);
  background: var(--surface-2); box-shadow: 0 0 0 4px var(--accent-soft);
}

.field input:focus + .ico, .field:focus-within .ico { color: var(--accent); }

.field input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.field-top { flex: 1; max-width: 560px; }

/* The global box gets its own round ✕ (the native cancel-button is WebKit-only and styles
   poorly), shown purely by :placeholder-shown — so programmatic clears on tab switches need
   no JS bookkeeping to hide it. */
.field-top input::-webkit-search-cancel-button { display: none; }

.field-top input:not(:placeholder-shown) { padding-right: 38px; }

.field input:placeholder-shown ~ .search-x { display: none; }

/* The inline per-list filter that sits in the result bar. Smaller than the top-bar box, and it
   grows to take the slack between the Filters button and the count without shoving them. */
.field-inline { flex: 0 1 240px; min-width: 130px; }

.field-inline input { padding: 6px 12px 6px 30px; font-size: 12.5px; }

.field-inline .ico { left: 10px; }

.field-facet { display: flex; width: 100%; }

.field-facet .ico { left: 10px; }

.facet-opt {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 6px; cursor: pointer; border-radius: var(--r-sm);
  transition: background .12s;
}

.facet-opt:hover { background: var(--surface); }

.facet-opt input { accent-color: var(--accent); cursor: pointer; }

.facet-opt .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

.facet-opt .cnt { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }

.facet-opt.checked { background: var(--accent-soft); }

.facet-opt.checked .lbl { color: var(--text); font-weight: 500; }

.facet-more { background: none; border: none; color: var(--accent-2); cursor: pointer; font-size: 12px; padding: 5px 4px; }

.facet-more:hover { text-decoration: underline; }

.chip.tag-more {
  cursor: pointer; font: inherit; font-size: 11.5px; line-height: 1;
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600;
}

.chip.tag-more:hover { background: var(--surface-2); }


/* Placeholders hold an ICON now, not a character — so they need to centre a box,
   and the icon should sit back rather than shout. */
.card-cover.ph, .cover-big.ph, .h-hero-cover.ph, .fr-art.ph, .rev-cover.ph,
.tl-cover.ph, .pick-ph, .poster-ph, .sim-ph, .rl-ph, .fr-ph, .cmdk-ph, .ch-chip-ph,
.empty-art {
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); opacity: .55;
}

.chip.score { background: var(--accent-soft); border-color: var(--accent-line); font-weight: 700; }

.chip.facet-link { color: var(--text); }

.chip.facet-link:hover { border-color: var(--accent-line); color: var(--accent); text-decoration: none; }

.chip {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 11px; font-size: 11.5px; transition: all .14s;
}

.chip.manual { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }


/* ---- Picker ------------------------------------------------------------- */
.picker { flex: 1; overflow-y: auto; padding: 26px 20px; }

.pick-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 26px; justify-content: center; }

.pick-controls label { color: var(--muted); font-size: 13.5px; }

.pick-btn {
  background: linear-gradient(92deg, var(--accent), #9b7bff);
  color: #fff; border: none; border-radius: 999px;
  padding: 11px 24px; font: 700 14.5px/1 var(--display); cursor: pointer;
  box-shadow: 0 8px 24px rgba(124, 92, 255, .3);
  transition: transform .14s var(--ease), box-shadow .14s;
}

.pick-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124, 92, 255, .45); }

.pick-btn:active { transform: translateY(0); }

.pick-count { color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Only rendered when there's something to undo, so it never sits there greyed out asking
   to be read as a control you can't use. */
.pick-reset {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font: 600 12px var(--font); padding: 5px 13px; cursor: pointer;
  transition: all .14s;
}

.pick-reset:hover { border-color: var(--bad); color: var(--bad); }

/* Same chips as the saved-views bar, which is the same idea one tab over. */
.pick-saved {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  max-width: 820px; margin: -14px auto 20px;
}

.pick-result { display: flex; justify-content: center; }

.pick-empty { color: var(--dim); padding: 48px; text-align: center; }


/* ---- the filter builder ----
   Criteria are chips in a group box; a group can hold another group, so this whole
   block has to read the same at any depth — hence the shared .pkg. */
.pick-builder { max-width: 820px; margin: 0 auto 26px; }

/* The phone chrome — a pool bar up top ("preset · N games" + the Criteria pill), the
   controls/saved/builder gathered into a bottom sheet, and the roll button in a sticky
   thumb-zone bar. Inert at desktop widths: the sheet wrapper dissolves (display: contents)
   so the controls, saved bar and builder flow inline exactly where they always did, and
   the phone-only bars don't render at all. The media query below turns them on. */
.pick-mtop, .pick-shhead, .pick-shgo, .pick-bar, .pick-shback { display: none; }

.pick-shwrap, .pick-shbody { display: contents; }

.pick-filters-n {
  background: var(--accent-soft); color: var(--accent); border-radius: 999px;
  font: 700 11px var(--font); padding: 1px 8px; min-width: 20px; text-align: center;
}

.pkg { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 10px 12px 12px; }

.pkg.nested { background: var(--surface-2); margin: 2px 0; flex: 1 1 100%; }

/* A negated group inverts everything inside it — that has to be visible from the
   outside, or you're reading the chips and getting the answer backwards. */
.pkg.neg { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }

.pkg-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.pkg-op { font: 600 12px var(--font); padding: 3px 8px; }

.pkg-x {
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--dim); font: 700 10px var(--font); letter-spacing: .08em;
  padding: 4px 7px; cursor: pointer; transition: all .14s;
  margin-left: auto;
}

.pkg-x:hover { color: var(--bad); border-color: var(--bad); }

/* A negated group inverts everything inside it, and its select says so in words
   ("Match none of") — this just makes the box agree at a glance. */
.pkg.neg > .pkg-bar > .pkg-op { color: var(--bad); border-color: var(--bad); }

.pkg-kids { display: flex; flex-wrap: wrap; gap: 7px; align-items: flex-start; }

.pkg-empty { color: var(--dim); font-size: 12.5px; margin: 0 2px 9px; }


.pk-chip {
  position: relative;                       /* the popover anchors to this */
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); font-size: 12px; overflow: visible;
}

.pk-chip.open { border-color: var(--accent-line); box-shadow: var(--glow); }

.pk-chip.neg { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }

.pk-chip.todo { border-style: dashed; }

/* Names a field this collection can't answer, so it filters nothing — say so
   rather than let it pass for a working criterion. */
.pk-chip.broken { border-color: var(--warn); border-style: dashed; }

.pk-chip.broken .pk-chip-f { color: var(--warn); }

.pk-chip-f { padding: 5px 4px 5px 12px; font-weight: 700; color: var(--text); white-space: nowrap; }

.pk-chip-not, .pk-chip-v, .pk-chip-x { background: none; border: none; cursor: pointer; font: inherit; }

.pk-chip-not { color: var(--dim); padding: 5px 4px; font-style: italic; }

.pk-chip-not:hover { color: var(--bad); }

.pk-chip.neg .pk-chip-not { color: var(--bad); font-weight: 700; font-style: normal; }

.pk-chip-v { color: var(--accent); padding: 5px 4px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pk-chip-v:hover { text-decoration: underline; }

.pk-chip.todo .pk-chip-v { color: var(--dim); font-style: italic; }

.pk-chip-x { color: var(--dim); padding: 5px 11px 5px 5px; font-size: 10px; border-radius: 0 999px 999px 0; }

.pk-chip-x:hover { color: var(--bad); }


.pk-add {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
  border-radius: 999px; padding: 5px 12px; font: 600 12px var(--font); cursor: pointer;
  transition: all .14s;
}

.pk-add:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.pk-add.ghost { background: none; border-color: var(--border); color: var(--dim); }

.pk-add.ghost:hover { border-color: var(--accent-line); color: var(--accent); background: none; }


/* Anchored to its chip rather than the viewport: it scrolls with the thing it belongs to,
   which is why it needs no positioning JS to STAY put. It does need a little to LAND —
   positionPickPop() nudges it back inside the edges and flips it above a chip near the
   bottom, then caps its height to the room that leaves. Anything it sets is inline, so
   the values here are only ever the starting point it measures from. */
.pk-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  width: min(268px, calc(100vw - 20px)); max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--accent-line);
  border-radius: var(--r); box-shadow: var(--sh-3); padding: 8px;
  cursor: default; text-align: left;
  animation: popin .14s var(--ease);
}

.pk-pop:focus { outline: none; }
        /* it takes focus so Escape and the arrows reach it */
.pk-pop.up { top: auto; bottom: calc(100% + 6px); }

.pk-pop .facet-opt input:focus-visible, .pk-pop-field:focus-visible, .pk-pop .facet-more:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-sm);
}

.pk-pop-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

.pk-pop-refield {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font: 700 12px var(--font); padding: 6px 9px; cursor: pointer;
}

.pk-pop-refield:hover { border-color: var(--accent-line); color: var(--accent); }

.pk-pop-refield .chev { color: var(--dim); font-size: 9px; }

.pk-pop-clear { background: none; border: none; color: var(--dim); font: 600 11px var(--font); cursor: pointer; padding: 4px; }

.pk-pop-clear:hover { color: var(--bad); }

.pk-pop .field { width: 100%; margin-bottom: 6px; }

.pk-pop-list { display: flex; flex-direction: column; }

.pk-pop-grp {
  color: var(--dim); font: 800 9.5px var(--display); letter-spacing: .14em;
  text-transform: uppercase; padding: 8px 6px 3px;
}

.pk-pop-field {
  text-align: left; background: none; border: none; color: var(--text);
  font: 500 12.5px var(--font); padding: 5px 6px; border-radius: var(--r-sm); cursor: pointer;
}

.pk-pop-field:hover { background: var(--surface-2); }

.pk-pop-field.on { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

.pk-pop-empty { color: var(--dim); font-size: 12px; padding: 10px 6px; margin: 0; }

.pk-pop-set { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  color: var(--muted); font-size: 12px; margin-bottom: 6px; }

.pick-card {
  display: flex; gap: 26px; align-items: flex-start;
  background:
    radial-gradient(120% 60% at 12% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; max-width: 820px; width: 100%;
  box-shadow: var(--sh-2);
  animation: popin .24s var(--ease);
}

/* The art column holds a REAL grid card, which brings its own hover/trailer behaviour —
   so no :hover transform on the panel itself, or the two would fight. */
.pick-art { flex: 0 0 auto; width: 218px; }

.pick-art .card { width: 100%; cursor: pointer; }

.pick-hint { display: block; margin-top: 10px; text-align: center;
  font: 500 11.5px var(--font); color: var(--dim); }

.pick-info { min-width: 0; flex: 1; }

.pick-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
  font: 800 10.5px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* The split-title flair (see pickCard): the series name as a small letterspaced over-line
   in the SECOND accent — a different voice from the violet "YOUR PICK" eyebrow above it —
   with the subtitle carrying the full display weight underneath. */
.pick-t-pre { display: block; font: 700 11.5px/1.3 var(--font); letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 4px; }

.pick-info h2 { margin: 0 0 12px; font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; text-wrap: balance; }

.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.pick-info .hero-stats { margin: 0 0 16px; }

.pick-info .vd { margin-bottom: 16px; }
              /* the predicted-rating panel */
.pick-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.pick-reroll, .pick-open {
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 999px; padding: 9px 18px; cursor: pointer; font: 600 13px var(--font);
  border: 1px solid var(--border); transition: all .14s;
}

.pick-reroll { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.pick-reroll:hover { filter: brightness(1.08); }

.pick-open { background: var(--surface-3); color: var(--text); }

.pick-open:hover { border-color: var(--accent-line); color: var(--accent); }


/* The roll-animation toggle, sat with the other controls. Small and quiet — a setting you
   set once, not a thing you read every visit. */
.pick-anim {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  color: var(--muted); font-size: 12.5px;
}

.pick-anim input { accent-color: var(--accent); cursor: pointer; margin: 0; }


/* ---- the dice-roll reveal ------------------------------------------------
   A slot-reel of covers under a tumbling die, both easing to a stop on the winner. Lives in
   #pickResult in place of the card until the die lands; the box is sized so nothing below it
   jumps when the card takes over. */
.pick-roll {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  min-height: 264px; justify-content: center; padding: 8px 0;
}

.roll-reel-mask {
  position: relative; width: min(440px, 86vw); height: 132px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.roll-reel { position: absolute; top: 0; left: 0; display: flex; gap: 10px; height: 132px; will-change: transform, filter; }

.roll-tile {
  flex: none; width: 92px; height: 132px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--surface-3); box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
}

.roll-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.roll-tile img.pixel { object-fit: contain; background: #05070b; }

.roll-tile .roll-ph { color: var(--dim); }

.roll-reel-hi {
  position: absolute; top: -5px; bottom: -5px; left: 50%; width: 100px; transform: translateX(-50%);
  border: 2px solid var(--accent); border-radius: 10px; box-shadow: var(--glow);
  opacity: 0; transition: opacity .25s var(--ease); pointer-events: none;
}

.roll-reel-hi.lit { opacity: 1; }

/* A CSS 3D cube; each face is a 3x3 pip grid, empty cells hidden. Pips take the accent so the
   die reads as ours, not a board-game prop. */
.roll-die-scene { perspective: 560px; width: 62px; height: 62px; }

.roll-die { position: relative; width: 62px; height: 62px; transform-style: preserve-3d; transform: translateZ(-31px); }

.roll-face {
  position: absolute; width: 62px; height: 62px; border-radius: 13px;
  background: linear-gradient(150deg, #ffffff, #d7d9e6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 -7px 16px rgba(80, 60, 160, .18);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 10px; gap: 2px;
}

.roll-face i {
  width: 11px; height: 11px; border-radius: 50%; align-self: center; justify-self: center;
  background: radial-gradient(circle at 35% 30%, #8a6bff, #5a3ce0);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .35);
}

.roll-face i.off { visibility: hidden; }

.roll-word {
  font: 800 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* One-shot glow as the card lands — set on the freshly-rendered card, so it fires only after
   a roll and never on an ordinary re-render. */
.pick-card.rolled-in { animation: popin .24s var(--ease), pickLanded .5s var(--ease); }

.view-chip, .view-save {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 11px; font: 500 12px var(--display);
  transition: border-color .14s, color .14s;
}

.view-chip:hover { border-color: var(--accent-line); color: var(--accent); }

.view-save { border-style: dashed; color: var(--muted); }

.view-save:hover { border-color: var(--accent-line); color: var(--accent); }

.view-x { color: var(--dim); font-size: 10px; }

.view-x:hover { color: var(--bad); }


/* ---- Time-boxed picker --------------------------------------------------- */
.pick-time { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
               /* the search box below is the redundant twin */
  .field-top { order: 3; flex: 1 1 100%; max-width: none; }

  /* Shorthand, not overflow-y: a `visible` on one axis next to `auto` on the
     other computes back to `auto`, which would keep the nested scroller. */
  .gridwrap, .stats, .picker, .challenges { overflow: visible; flex: none; }

  /* Stacked, but STRETCHED. `align-items: center` on a column flex sizes children to their
     content on the cross axis instead of to the container — so the info column grew as wide
     as its widest line and pushed out of the card, and everything inside it (the stats, the
     prediction panel) was laid out against a width nobody asked for. */
  /* The popover stays anchored to its chip here too. It used to become a sheet docked to
     the bottom of the screen, on the grounds that 268px hanging off a chip's left edge
     lands off-screen for any chip on the right half of a phone — true, but the cure put
     the values an inch off the bottom bezel while the chip they belonged to sat up by the
     header, which is one thought rendered as far apart as the viewport allows. It's
     nudged back inside the edge instead; see positionPickPop(). */
  .pk-chip-v { max-width: 150px; }


  /* ---- Pick: the card as hero, the builder as a bottom sheet, the roll in the thumb
     zone. The pool bar reads "preset · N games" with the Criteria pill beside it; the pill
     opens a sheet holding everything the desktop controls row and inline builder say; the
     roll button sits fixed at the bottom where the thumb already is. ---- */
  .picker { padding: 12px 12px calc(92px + env(safe-area-inset-bottom, 0px)); }

  .pick-mtop { display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px; }

  .pick-msum { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .pick-crit {
    margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
    border-radius: 999px; padding: 8px 14px; font: 600 13px var(--font); cursor: pointer;
  }


  /* The sheet. Painted open/closed from state on every render, so the slide only plays on
     the tap that flips it (pickSheetSet), never on the re-renders an edit inside causes.
     Head and CTA stay put; the middle scrolls when the tree outgrows the screen. */
  .pick-shback:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 34;
    background: var(--overlay); backdrop-filter: blur(2px);
  }

  .pick-shwrap {
    display: flex; flex-direction: column; position: fixed; z-index: 35;
    left: 0; right: 0; bottom: 0; max-height: 84dvh;
    background: var(--bg-2); border-top: 1px solid var(--border);
    border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .5);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%); visibility: hidden;
    transition: transform .26s var(--ease), visibility .26s;
  }

  .pick-shwrap.open { transform: none; visibility: visible; }

  .pick-shbody { display: block; overflow-y: auto; min-height: 0; margin: 0 -16px; padding: 0 16px; }

  .pick-shhead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

  .pick-shhead b { font: 800 17px/1.2 var(--display); letter-spacing: -.01em; }

  .pick-shcount { margin-left: auto; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }

  .pick-shclose { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 4px 8px; }

  .pick-shgo {
    display: block; width: 100%; margin-top: 12px; padding: 14px; border: none;
    border-radius: 13px; cursor: pointer; font: 700 14.5px/1 var(--display); color: #fff;
    background: linear-gradient(92deg, var(--accent), #9b7bff);
    box-shadow: 0 8px 24px rgba(124, 92, 255, .3);
  }

  .pick-shgo[disabled] { filter: saturate(.4) brightness(.75); cursor: default; }

  /* Inside the sheet the head and the CTA already say what the button and count said. */
  .pick-controls { justify-content: flex-start; margin-bottom: 14px; }

  .pick-controls .pick-btn, .pick-controls .pick-count { display: none; }

  .pick-saved { justify-content: flex-start; margin: 0 0 14px; }

  .pick-builder { margin: 0 0 4px; }


  /* The hero card: art full-bleed and cropped a little shorter than 3:4, no scrim text —
     the typography below does the talking — and re-roll handed to the sticky bar. */
  .pick-card { flex-direction: column; align-items: stretch; text-align: center; }

  .pick-art { align-self: stretch; width: 100%; }

  .pick-art .card { aspect-ratio: 3 / 3.4; border-radius: var(--r-lg); }

  .pick-art .card-body { display: none; }

  .pick-hint { display: none; }

  .pick-info { width: 100%; min-width: 0; }

  .pick-info h2 { font-size: 27px; }

  .pick-chips, .pick-actions { justify-content: center; }

  .pick-actions .pick-reroll { display: none; }


  /* The thumb-zone roll bar. Under the drawers and sheets (z 29+); the gradient apron is
     click-through so it doesn't swallow taps on the content it fades over. */
  .pick-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 27;
    padding: 26px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--bg) 58%, transparent);
    pointer-events: none;
  }

  .pick-bar .pick-btn {
    display: block; width: 100%; pointer-events: auto;
    padding: 15px 24px; font-size: 15.5px; border-radius: 14px;
  }

  /* "Slimmer" here means just the rating. On a phone the reasoning is hidden — the per-signal
     evidence (.vd-why), the verdict sentence (.vd-say) and the average footnote (.vd-foot) all
     live one tap away in Full details — leaving a compact row: the score, its "You'd probably
     rate this" label, and the confidence chip. Desktop still shows the whole verdict. */
  .pick-info .vd { padding: 12px 16px; margin-bottom: 12px; }

  .pick-info .vd-top { margin-bottom: 0; align-items: center; gap: 6px 12px; }

  .pick-info .vd-num { font: 800 32px/1 var(--display); }

  .pick-info .vd-num small { font-size: 14px; }

  .pick-info .vd-side { flex: 1 1 auto; order: 0; padding-top: 0; }

  .pick-info .vd-eye { margin-bottom: 0; }

  .pick-info .vd-say,
  .pick-info .vd-why,
  .pick-info .vd-foot { display: none; }

  /* Keep the confidence, but condensed to just the level — "Low", not "Low confidence" — a
     small pill that sits beside the score rather than a full chip of its own. */
  .pick-info .vd-conf { padding: 4px 7px; font-size: 8.5px; }

  .pick-info .vd-conf-lbl { display: none; }

  .pick-info .hero-stats { margin-bottom: 12px; padding: 12px 0 4px; gap: 6px 10px; }

  .pick-info .hero-stat { flex-basis: 72px; }

  .pick-info .hero-stat b { font-size: 17px; }
}

.sh-tools .field { flex:1 1 auto; min-width:180px; }
@media (max-width: 860px) {

  .sh-tools .field { flex:1 1 140px; }
}
@media (max-width: 760px) {

  input, select, textarea,
  .field input, .facet-filter,
  .chb-row input[type="text"], .chb-row input[type="date"], .chb-row select,
  .map-row input, .page-jump input, .auth-form input, .px-guess input,
  .rec-bar select {
    font-size: 16px;
  }
}

@keyframes popin { from { transform: scale(.96) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* ---- whatnow-specific additions over the ported styles ------------------ */
.steam-signin img { display: block; border-radius: 4px; }
.steam-signin:hover img { filter: brightness(1.12); }

.pick-art .pick-cover {
  display: block; width: 100%; border-radius: var(--r);
  aspect-ratio: 600/900; object-fit: cover; box-shadow: var(--sh-2);
}
.pick-art .pick-cover.wide { aspect-ratio: 460/215; }
.pick-open { display: inline-flex; align-items: center; }
a.pick-open:hover { text-decoration: none; }

dialog.ui-prompt {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 22px; min-width: min(360px, 90vw); box-shadow: var(--sh-3);
}
dialog.ui-prompt::backdrop { background: var(--overlay); }
dialog.ui-prompt h3 { margin: 0 0 12px; font-size: 17px; }
dialog.ui-prompt input {
  width: 100%; padding: 9px 12px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text);
}
dialog.ui-prompt input:focus { border-color: var(--accent-line); outline: none; }
.ui-prompt-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* Friend rows in the __pk_shared popover (friend.js) */
.pk-pop-action {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: none; border: 0; border-top: 1px solid var(--border-soft);
  color: var(--accent); cursor: pointer; border-radius: 0;
}
.pk-pop-action:hover { background: var(--accent-soft); }

/* ---- fixes over the port ------------------------------------------------- */
/* gamedex's base select rule lived outside the pick-prefixed extraction */
select {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 6px 9px; font-size: 12.5px; font-family: inherit;
  cursor: pointer; transition: border-color .14s;
}
select:hover { border-color: var(--accent-line); }
select:focus { outline: none; border-color: var(--accent-line); }

/* The six face rotations that make the die 3D (extraction missed .rf*) */
.rf1 { transform: rotateY(0deg) translateZ(31px); }
.rf2 { transform: rotateY(90deg) translateZ(31px); }
.rf3 { transform: rotateY(180deg) translateZ(31px); }
.rf4 { transform: rotateY(-90deg) translateZ(31px); }
.rf5 { transform: rotateX(90deg) translateZ(31px); }
.rf6 { transform: rotateX(-90deg) translateZ(31px); }

/* Here the picker is a normal page section, not a full-height tab pane */
.picker { flex: none; overflow-y: visible; padding: 26px 0; }

/* Launch buttons on the pick card, gamedex-style */
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
a.btn:hover { text-decoration: none; }
.btn.launch {
  background: linear-gradient(92deg, var(--accent), var(--accent-2));
  color: #fff; border: none; font-weight: 600;
  box-shadow: 0 6px 18px rgba(139, 108, 255, .28);
}
.btn.launch:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--accent-line); color: var(--accent); }
.ico { flex-shrink: 0; vertical-align: -.15em; }
button .ico, a .ico { pointer-events: none; }