/* ══════════════════════════════════════════════════════════════════════
   PIXEL UP! · DISCOVERY layer (UX lane 2) — pairs with assets/ux/discover.js
   Uses only arcade.css tokens: ink outlines, hard offset shadows, Inter.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · instant search dropdown (fixed, positioned under #q by JS) ── */
.dc-sug{position:fixed;z-index:150;overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border:3.5px solid var(--ink);border-radius:16px;
  box-shadow:var(--bevel),var(--pop-2);padding:6px}
.dc-sug[hidden]{display:none}
.dc-opt{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:6px 8px;border-radius:11px;border:2.5px solid transparent;cursor:pointer}
.dc-opt.on{background:var(--panel-2);border-color:var(--cool);box-shadow:var(--pop-0)}
.dc-th{display:block;width:64px;aspect-ratio:4/3;border:2.5px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--ink-2)}
.dc-th svg{width:100%;height:100%}
.dc-tx{min-width:0}
.dc-tx b{display:block;font-weight:900;font-size:14.5px;letter-spacing:-.02em;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-tx small{display:block;font-size:11.5px;font-weight:700;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-tx mark{background:var(--sun);color:var(--ink);border-radius:3px;padding:0 1px}
.dc-go{font-weight:900;font-size:12px;color:var(--ink);background:var(--sun);border:2.5px solid var(--ink);
  border-radius:8px;padding:3px 8px;opacity:0}
.dc-opt.on .dc-go{opacity:1}
.dc-empty{padding:16px 12px;color:var(--dim);font-weight:700;font-size:13.5px}
.dc-empty b{color:var(--txt-2)}
.dc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 6px 4px;margin-top:4px;
  border-top:2.5px dashed var(--line)}
.dc-all{font-weight:900;font-size:12.5px;letter-spacing:.04em;color:var(--sun);padding:5px 12px;
  border:2.5px solid var(--line);border-radius:999px}
.dc-all:hover,.dc-all:focus-visible{color:var(--ink);background:var(--sun);border-color:var(--ink);box-shadow:var(--pop-0)}
.dc-hint{margin-left:auto;font-size:11px;font-weight:700;color:var(--dim)}
.dc-hint kbd{margin:0 1px}
@media (max-width:640px){ .dc-hint{display:none} .dc-opt{grid-template-columns:56px minmax(0,1fr)} .dc-th{width:56px} .dc-go{display:none} }

/* ── 2 · filter + sort bar ── */
.dc-bar{display:flex;flex-direction:column;gap:9px;margin:0 0 14px;padding:10px 12px;
  border:3px solid var(--ink);border-radius:14px;background:var(--ink-2);box-shadow:var(--pop-0)}
.dc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.dc-sort{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.dc-sort select{font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.02em;text-transform:none;
  color:var(--txt);background:var(--panel);border:2.5px solid var(--line);border-radius:10px;padding:6px 8px;max-width:100%}
.dc-sort select:focus-visible{border-color:var(--cool)}
.dc-bar .chip{cursor:pointer}
.dc-rnd{border-color:var(--sun);color:var(--sun)}
.dc-count{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--dim)}
.dc-cats{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:thin}
.dc-cats::-webkit-scrollbar{height:6px}
.dc-cats::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.dc-cats .chip{padding:5px 11px;font-size:12px}
.dc-cats .chip:hover{transform:none}
.dc-lbl{flex:none;font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dc-clear{flex:none;font-weight:900;font-size:12px;color:var(--hot);padding:4px 10px;border:2.5px solid var(--line);border-radius:999px}
.dc-clear:hover{border-color:var(--hot)}
.dc-clear[hidden]{display:none}
.dc-hide{display:none!important}
/* re-sorted / filtered: no 2×2 features, titles always visible */
.mosaic.dc-flat .tile.big{grid-column:auto;grid-row:auto;border-width:3px;box-shadow:var(--pop-1)}
.mosaic.dc-flat .tile.big .tt{font-size:11.5px;padding:16px 8px 7px}
.dc-none{margin:0}
.dc-none .dc-clear{margin-left:8px}
@media (max-width:640px){
  .dc-bar{padding:9px 10px;gap:7px}
  .dc-row{gap:7px}
  .dc-long{display:none}
  .dc-sort{flex-basis:100%}
  .dc-sort select{flex:1;min-width:0}
  .dc-count{margin-left:0;flex-basis:100%}
}

/* pressed state must survive the house skin (l8-arcade.css paints every .chip
   the same with !important), so it is forced here and also marked with a ✓ —
   colour is never the only cue */
.dc-bar .chip[aria-pressed="true"],.dc-basis .chip[aria-pressed="true"]{
  background:var(--sun)!important;color:#0b0710!important;border-color:#0b0710!important}
.dc-bar .chip[aria-pressed="true"]::after,.dc-basis .chip[aria-pressed="true"]::after{content:'✓';font-weight:900;margin-left:2px}

/* ── 3 · surprise + because-you-played ── */
.dc-chip-surprise{border-color:var(--sun);color:var(--sun);cursor:pointer}
.dc-side-surprise .g{background:var(--sun)!important;color:var(--ink)!important}
.dc-because .sec-head .dc-more{cursor:pointer}
.dc-basis{display:flex;gap:7px;overflow-x:auto;padding:0 2px 10px;scrollbar-width:none}
.dc-basis::-webkit-scrollbar{display:none}
.dc-basis .chip{padding:5px 11px;font-size:12px;cursor:pointer}
.dc-why{display:block;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--cool);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-note{margin:2px 0 0;font-size:12px;font-weight:600;color:var(--dim);max-width:80ch}

@media (prefers-reduced-motion: reduce){
  .dc-opt,.dc-bar .chip,.dc-basis .chip{transition:none}
}