/* ══════════════════════════════════════════════════════════
   skins.css — what a look (skins.js) changes beyond its tokens, and the
   sheet that picks one. The first part only matches html[data-skin], and
   the arcade's own look has no data-skin, so it never applies to Pixel.
   ══════════════════════════════════════════════════════════ */

/* ── what belongs to pixel art alone ── */
html[data-skin] body{-webkit-font-smoothing:antialiased}
html[data-skin] .bg-grid::after{display:none}
html[data-skin] .bg-grid{opacity:.25}
html[data-skin] .choice:hover,html[data-skin] .game-card:hover,html[data-skin] .pv-card:hover,
html[data-skin] .prime-btn:hover,html[data-skin] .ghost-btn:hover,html[data-skin] .ov-howto:hover{box-shadow:var(--block-hover)}

/* one weight was Silkscreen's limit; these faces have them all */
html[data-skin] .wordmark,html[data-skin] h1,html[data-skin] h2,html[data-skin] h3,html[data-skin] h4,
html[data-skin] .prime-btn,html[data-skin] .ghost-btn,html[data-skin] .link-btn,html[data-skin] .seg button,
html[data-skin] .mini-btn,html[data-skin] .room-code,html[data-skin] .join-kicker,html[data-skin] .seat,
html[data-skin] .chip,html[data-skin] .pad-you,html[data-skin] .pad-title,html[data-skin] .ov-kicker,
html[data-skin] .ov-title,html[data-skin] .toast,html[data-skin] .sheet-item,html[data-skin] .sheet-head,
html[data-skin] .mp-row,html[data-skin] .switch b,html[data-skin] .action-btn,html[data-skin] .dp,
html[data-skin] .buzzer,html[data-skin] .menu-sel,html[data-skin] .field span{font-weight:var(--ui-weight)}

/* a chip or a small button goes by the smaller radius; a dot stays round */
html[data-skin] .chip,html[data-skin] .gc-meta span,html[data-skin] .net-pill,html[data-skin] .pad-you,
html[data-skin] .seg,html[data-skin] .seg button,html[data-skin] .switch .track{border-radius:var(--r-sm)}

/* what never had a radius to take over: pixel art wanted these square */
html[data-skin] .ov-inner,html[data-skin] .gate-card,html[data-skin] .sing-modal-card,html[data-skin] .ov-seat,
html[data-skin] .ov-howto,html[data-skin] .ov-clip,html[data-skin] .sheet-card,html[data-skin] .sheet-panel,
html[data-skin] .toast,html[data-skin] .join-card,html[data-skin] .lb-card,html[data-skin] .gc-tag{border-radius:var(--r)}
html[data-skin] .ov-inner,html[data-skin] .sing-modal-card{overflow:auto}

/* ── the game's menu: its colours give way to the look's ──
   The scene behind stays the game's; stretched smooth and out of focus it
   is a colour wash, not pixel art. */
html[data-skin][data-skin] .themed{--th-panel:var(--panel-solid);--th-ink:var(--ink);--th-dim:var(--ink-dim);--th-accent:var(--brand);--th-line:var(--line)}
html[data-skin] .themed .prime-btn,html[data-skin] .gm-modal.themed .prime-btn{color:var(--on-brand)}
html[data-skin] .menu-bg{image-rendering:auto;filter:blur(4px) saturate(1.1);transform:scale(1.03)}
html[data-skin] .stage-overlay.themed > .ov-inner,html[data-skin] .gate-overlay.themed > .gate-card,
html[data-skin] .gm-modal.themed .sing-modal-card{border-width:var(--edge)}

/* ── Neon: the one look that lights its own type ── */
html[data-skin="neon"] .ov-title,html[data-skin="neon"] .gate-title,
html[data-skin="neon"] .room-code,html[data-skin="neon"] .wordmark .wm-b{text-shadow:var(--tblock)}
html[data-skin="neon"] .game-card,html[data-skin="neon"] .choice{border-color:rgba(var(--brand-rgb),.35)}

/* ── the sheet ── */
.skin-card{width:min(560px,100%);max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;
  text-align:left;align-items:stretch;gap:.7rem}
#sk-pick,#sk-editor{display:grid;gap:.7rem;min-width:0}
#sk-pick[hidden],#sk-editor[hidden],.sk-box[hidden]{display:none}
.sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.sk-look{display:grid;gap:.25rem;justify-items:start;padding:.45rem;text-align:left;cursor:pointer;min-height:44px;
  background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:var(--r)}
.sk-look.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.sk-mini{display:flex;align-items:center;justify-content:center;width:100%;height:64px;border-radius:var(--r-sm);
  overflow:hidden;font-size:1.3rem}
.sk-mini-card{display:flex;align-items:center;gap:.5rem;padding:.35rem .55rem;border:1px solid;font-style:normal;font-size:1rem}
.sk-mini-btn{display:block;width:26px;height:12px}
.sk-name{font-size:.92rem}
.sk-blurb{color:var(--ink-dim);font-size:.72rem;line-height:1.3}
.sk-box{display:grid;gap:.45rem}
.sk-code{width:100%;box-sizing:border-box;padding:.5rem;font-family:ui-monospace,monospace;font-size:.8rem;resize:none;
  background:var(--bg-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm)}
.sk-field{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:.35rem}
.sk-field .sheet-label{flex:0 0 100%;margin:0}
.sk-colour{width:44px;height:36px;padding:0;border:2px solid var(--line);background:none;cursor:pointer;border-radius:var(--r-sm)}
.sk-swatch{width:36px;height:36px;padding:0;cursor:pointer;border:2px solid var(--line);border-radius:var(--r-sm)}
.sk-swatch.on{outline:2px solid var(--brand);outline-offset:2px}
.sk-note{margin:0;min-height:1.3em;font-size:.85rem;color:var(--ink-dim)}
.sk-note.bad{color:var(--p2)}
.landing-foot .link-btn{background:none;border:0;cursor:pointer;color:var(--ink-faint);font:inherit;padding:.35rem .2rem}
.landing-foot .link-btn:hover,.landing-foot .link-btn:focus-visible{color:var(--ink);text-decoration:underline}
/* lighter than the other popups: the page behind is the live preview */
.skin-modal{background:rgba(5,4,8,.35);backdrop-filter:none;-webkit-backdrop-filter:none}