/* =====================================================================
   CYBERPUNK: a night market in the rain. A neon city stands behind the
   page (js/backdrops/cyberpunk.js paints it on the backdrop canvas), and the
   page sits on it in dark glass: translucent panels, 1px lines, square
   corners with a lit notch. Three neon colours and nothing else - PINK is
   the accent and the headline glow, CYAN anything you can select, YELLOW a
   live value. Condensed Bricolage for display, IBM Plex Mono for labels,
   Space Grotesk for reading.
   Spec: docs/themes/cyberpunk.md
   ===================================================================== */
:root[data-theme="cyberpunk"] {
  color-scheme: dark;
  --neon-pink: #ff2e88; --neon-cyan: #2de2ff; --neon-yellow: #ffe53b;
  --glow-pink: rgba(255, 46, 136, .55); --glow-cyan: rgba(45, 226, 255, .5); --glow-yellow: rgba(255, 229, 59, .45);
  --bg: #0a0614; --surface: rgba(15, 9, 29, .84); --surface-2: #1d1433; --sunk: rgba(4, 2, 10, .6);
  --text: #f5eeff; --muted: #b9acd6; --faint: #8374a8; --border: #2e2350; --border-strong: #4d3c7d; --rule: var(--border-strong);
  --accent: var(--neon-pink);
  --primary: var(--neon-cyan); --primary-strong: #8ff3ff; --primary-contrast: #04141a; --primary-soft: rgba(45, 226, 255, .13);
  --danger: #ff4d6d; --danger-soft: rgba(255, 77, 109, .15); --success: #3dffa8;
  --radius: 0px; --r-ctl: 0px; --r-ctl-in: 0px; --r-dialog: 0px; --r-menu: 0px; --r-board: 0px; --r-cell: 1px; --r-pill: 0px;
  --content-w: 1040px;
  --shadow: none;
  --dialog-shadow: 0 0 0 1px var(--neon-pink), 0 0 42px rgba(255, 46, 136, .28), 0 24px 60px rgba(0, 0, 0, .7);
  --menu-shadow: 0 18px 48px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 46, 136, .16);
  --overlay: rgba(6, 3, 14, .62);
  --scroll-thumb: rgba(255, 46, 136, .4); --scroll-thumb-hover: rgba(255, 46, 136, .75);
  --font: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --toast-bg: #0f0a1c; --toast-fg: var(--text); --toast-action: var(--neon-yellow);
  --record-bg: var(--neon-yellow); --record-fg: #1a1200;
  /* 2048: tiles climb from the dark through violet into the three neons */
  --g-board: rgba(4, 2, 10, .75); --g-slot: #150e27;
  --t2: #1d1433; --t4: #2a1c4a; --t8: #45206b; --t16: #6d2382; --t32: #a3258f; --t64: var(--neon-pink);
  --t128: #9d5cff; --t256: var(--neon-cyan); --t512: #3dffa8; --t1024: #ffb13b; --t2048: var(--neon-yellow);
  --t-ink: var(--text); --t-paper: var(--text);
  --t64-fg: #16040d; --t128-fg: #0d0520; --t256-fg: #04141a; --t512-fg: #03170e; --t1024-fg: #1a0f00; --t2048-fg: #1a1200;
  /* memory grid */
  --flash: var(--neon-cyan); --tile: #1d1433;
  /* card table: a wet street at night under a pink sign */
  --table-bg: radial-gradient(120% 90% at 50% 0%, #2a1147, #120a24 60%, #07040e);
  --table-frame: 0 0 0 1px rgba(255, 46, 136, .55), 0 0 26px rgba(255, 46, 136, .16);
  --slot-line: rgba(45, 226, 255, .42);
  --card-paper: #f4eefc; --card-r: .06;
  --card-shadow: 0 0 0 1px #2a1c4a, 0 2px 8px rgba(0, 0, 0, .55);
  --court-panel: #e9dcff; --court-rule: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent);
  --suit-red: #d80f5c; --suit-black: #150a24;
  --card-back-art: repeating-linear-gradient(135deg, rgba(255, 46, 136, .38) 0 2px, transparent 2px 7px), #150a24;
  --back-edge: var(--neon-cyan); --back-edge-w: .035;
  --back-shadow: 0 0 0 1px #2a1c4a, 0 0 10px rgba(45, 226, 255, .25);
  --font-card: var(--font-display);
}

/* ---------- the backdrop ----------
   The canvas sits under everything (z-index -1, fixed). Over it, one fixed veil:
   the content column is darkened so text stays readable while the city shows at
   the sides and between panels, plus faint scanlines. body::after follows the
   canvas in the tree, so at the same z-index it paints over it. */
:root[data-theme="cyberpunk"] { background: var(--bg); }
[data-theme="cyberpunk"] body { background: transparent; }
[data-theme="cyberpunk"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .14) 2px 3px),
    linear-gradient(90deg, rgba(10, 6, 20, 0), rgba(10, 6, 20, .4) calc(50% - var(--content-w) / 2 + 40px), rgba(10, 6, 20, .4) calc(50% + var(--content-w) / 2 - 40px), rgba(10, 6, 20, 0)),
    radial-gradient(140% 100% at 50% 40%, transparent 60%, rgba(0, 0, 0, .45));
}
/* the reader is for long text: the city stays, but well behind it */
[data-theme="cyberpunk"] body[data-route="docs"] .backdrop { opacity: .4; }
[data-theme="cyberpunk"] ::selection { background: var(--neon-pink); color: #16040d; }

/* labels, buttons and numbers are mono, tracked, uppercase - the city's signage type */
[data-theme="cyberpunk"] :is(.btn, .segmented button, .tool, .stat-label, .field label, .main-nav a, .section-title, .section-count, .box > h3, .t-label, .icon-tile span, .offline-badge, .toast-action, .record, .footer-links, .version, .hint-text, .game-status, .layout-tag, .theme-btn .theme-name) {
  font-family: var(--font-mono); text-transform: uppercase;
}
/* display type is Bricolage at its narrowest width */
[data-theme="cyberpunk"] :is(.hero-title, .brand, .footer-brand, .game-meta h3, .dialog h2, .settings-title, .t-display, .stat-value, .keypad button, .g2048-board > div, .page > .section-head .section-title) {
  font-family: var(--font-display); font-stretch: 75%; font-weight: 800;
}

/* ---------- chrome ---------- */
[data-theme="cyberpunk"] .topbar {
  background: rgba(8, 5, 16, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 46, 136, .45);
  box-shadow: 0 1px 14px rgba(255, 46, 136, .18);
}
[data-theme="cyberpunk"] .brand { font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; text-shadow: -1.5px 0 var(--glow-pink), 1.5px 0 var(--glow-cyan); }
[data-theme="cyberpunk"] .brand-text span { color: var(--neon-pink); }
[data-theme="cyberpunk"] .brand:hover { color: var(--text); }
/* the masthead is the title on the home screen */
[data-theme="cyberpunk"] body[data-route="home"] .brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-theme="cyberpunk"] :is(.icon-btn, .theme-btn, .topbar .lang-toggle) { border: 1px solid var(--border-strong); background: rgba(10, 6, 20, .6); }
[data-theme="cyberpunk"] .icon-btn { width: 38px; height: 38px; }
[data-theme="cyberpunk"] .icon-btn:hover { background: var(--primary-soft); border-color: var(--neon-cyan); color: var(--neon-cyan); }
[data-theme="cyberpunk"] .topbar .lang-toggle { height: 38px; padding: 2px; }
[data-theme="cyberpunk"] .theme-btn { height: 38px; }
[data-theme="cyberpunk"] .theme-btn:hover { background: rgba(10, 6, 20, .6); border-color: var(--neon-pink); box-shadow: 0 0 12px rgba(255, 46, 136, .3); }
[data-theme="cyberpunk"] .theme-btn .theme-name { font-size: .72rem; letter-spacing: .16em; }
[data-theme="cyberpunk"] .theme-btn .theme-swatch { width: 30px; height: 28px; border-radius: 0; }
[data-theme="cyberpunk"] .theme-menu {
  background: rgba(12, 7, 24, .94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: rgba(255, 46, 136, .5);
}
[data-theme="cyberpunk"] :is(.theme-opt:hover, .theme-opt:focus-visible) { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--neon-pink); }
[data-theme="cyberpunk"] .theme-opt[aria-checked="true"] strong, [data-theme="cyberpunk"] .theme-opt:hover strong { color: var(--neon-pink); }
[data-theme="cyberpunk"] .theme-opt .ico { color: var(--neon-pink); }
[data-theme="cyberpunk"] .main-nav a { color: var(--muted); font-size: .72rem; font-weight: 400; letter-spacing: .18em; }
[data-theme="cyberpunk"] .main-nav a:hover { background: transparent; color: var(--text); box-shadow: inset 0 -1px 0 var(--border-strong); }
[data-theme="cyberpunk"] .main-nav a[aria-current="true"] { background: transparent; color: var(--neon-cyan); box-shadow: inset 0 -2px 0 var(--neon-cyan); text-shadow: 0 0 10px var(--glow-cyan); }

/* ---------- controls ----------
   Every button is a dark glass slab with a 1px neon edge and a lit notch in its
   top-right corner (::after, in the edge colour, --bc). */
[data-theme="cyberpunk"] .btn {
  --bc: var(--border-strong);
  position: relative;
  border: 1px solid var(--bc); background: rgba(10, 6, 20, .7); color: var(--text);
  font-size: .76rem; font-weight: 600; letter-spacing: .2em;
}
[data-theme="cyberpunk"] .btn::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px;
  background: var(--bc); clip-path: polygon(0 0, 100% 0, 100% 100%);
  transition: var(--fade);
}
[data-theme="cyberpunk"] .btn:hover:not(:disabled) { --bc: var(--neon-pink); background: rgba(255, 46, 136, .1); box-shadow: 0 0 14px rgba(255, 46, 136, .3); }
[data-theme="cyberpunk"] .btn-primary { --bc: var(--neon-cyan); background: var(--primary-soft); color: #eafcff; text-shadow: 0 0 8px var(--glow-cyan); }
[data-theme="cyberpunk"] .btn-primary:hover:not(:disabled) { --bc: var(--neon-cyan); background: var(--neon-cyan); color: var(--primary-contrast); text-shadow: none; box-shadow: 0 0 20px var(--glow-cyan); }
[data-theme="cyberpunk"] .btn-danger { --bc: var(--danger); color: var(--danger); }
[data-theme="cyberpunk"] .btn-danger:hover:not(:disabled) { --bc: var(--danger); background: var(--danger-soft); box-shadow: 0 0 14px rgba(255, 77, 109, .3); }
[data-theme="cyberpunk"] .btn:disabled { opacity: 1; color: var(--faint); --bc: var(--border); }
[data-theme="cyberpunk"] .docs-link { font-size: .72rem; }
[data-theme="cyberpunk"] .segmented { padding: 3px; background: rgba(10, 6, 20, .6); box-shadow: inset 0 0 0 1px var(--border-strong); }
[data-theme="cyberpunk"] .segmented button { font-size: .72rem; font-weight: 400; letter-spacing: .14em; }
[data-theme="cyberpunk"] .segmented button[aria-pressed="true"] { background: var(--primary-soft); color: var(--neon-cyan); box-shadow: inset 0 0 0 1px var(--neon-cyan); text-shadow: 0 0 8px var(--glow-cyan); }
[data-theme="cyberpunk"] .stat { background: var(--surface); border-color: var(--border-strong); }
[data-theme="cyberpunk"] .stat-label { color: var(--muted); font-size: .58rem; font-weight: 400; letter-spacing: .2em; }
[data-theme="cyberpunk"] .stat-value { color: var(--neon-yellow); font-size: 1.3rem; text-shadow: 0 0 10px var(--glow-yellow); }
[data-theme="cyberpunk"] .tool { font-size: .64rem; font-weight: 400; letter-spacing: .12em; }
[data-theme="cyberpunk"] .tool:hover:not(:disabled) { background: transparent; color: var(--neon-cyan); }
[data-theme="cyberpunk"] .tool[aria-pressed="true"] { background: var(--primary-soft); color: var(--neon-cyan); box-shadow: inset 0 0 0 1px var(--neon-cyan); }
[data-theme="cyberpunk"] .tool .badge { background: var(--neon-pink); color: #16040d; font-family: var(--font-mono); box-shadow: 0 0 8px var(--glow-pink); }
[data-theme="cyberpunk"] .hint-text { color: var(--muted); font-size: .72rem; letter-spacing: .14em; }
[data-theme="cyberpunk"] .field label { color: var(--muted); font-size: .66rem; font-weight: 400; letter-spacing: .2em; }
[data-theme="cyberpunk"] .field input { border-color: var(--border-strong); background: var(--sunk); font-family: var(--font-mono); }
[data-theme="cyberpunk"] .field input:hover:not(:focus-visible) { border-color: var(--neon-pink); }
[data-theme="cyberpunk"] .field input:focus-visible { outline: 1px solid var(--neon-cyan); outline-offset: 0; border-color: var(--neon-cyan); box-shadow: 0 0 14px var(--glow-cyan); }
[data-theme="cyberpunk"] .switch { width: 46px; height: 24px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--border-strong); }
[data-theme="cyberpunk"] .switch::before { top: 5px; left: 5px; width: 14px; height: 14px; border-radius: 0; background: var(--faint); box-shadow: none; }
[data-theme="cyberpunk"] .switch[aria-checked="true"] { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--neon-cyan), 0 0 12px rgba(45, 226, 255, .25); }
[data-theme="cyberpunk"] .switch[aria-checked="true"]::before { transform: translateX(22px); background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }
[data-theme="cyberpunk"] :is(.check input, .range) { accent-color: var(--neon-cyan); }

/* ---------- surfaces, dialog, toast ---------- */
/* panels: dark glass with a cyan bracket on the top-left corner */
[data-theme="cyberpunk"] .box { position: relative; border-color: var(--border-strong); background: var(--surface); }
[data-theme="cyberpunk"] .box::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px;
  border-top: 2px solid var(--neon-cyan); border-left: 2px solid var(--neon-cyan);
  pointer-events: none;
}
[data-theme="cyberpunk"] .box > h3 { color: var(--neon-cyan); font-size: .72rem; font-weight: 600; letter-spacing: .26em; }
[data-theme="cyberpunk"] .overlay { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
[data-theme="cyberpunk"] .dialog { position: relative; background: #0f0a1c; padding: 26px 24px 22px; }
[data-theme="cyberpunk"] .dialog::after {
  content: ""; position: absolute; top: 0; right: 0; width: 12px; height: 12px;
  background: var(--neon-pink); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
[data-theme="cyberpunk"] .dialog h2, [data-theme="cyberpunk"] .settings-title { font-size: 1.9rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; text-shadow: -1.5px 0 var(--glow-pink), 1.5px 0 var(--glow-cyan); }
[data-theme="cyberpunk"] .rules { padding-left: 0; list-style: none; }
[data-theme="cyberpunk"] .rules li { position: relative; padding-left: 1.4em; }
[data-theme="cyberpunk"] .rules li::before { content: "//"; position: absolute; left: 0; color: var(--neon-pink); font-family: var(--font-mono); font-size: .85em; }
[data-theme="cyberpunk"] .record { padding: 4px 9px; font-size: .72rem; letter-spacing: .16em; box-shadow: 0 0 14px var(--glow-yellow); }
[data-theme="cyberpunk"] #toast { border: 1px solid var(--neon-pink); box-shadow: 0 0 22px rgba(255, 46, 136, .3); font-family: var(--font-mono); font-size: .8rem; }
[data-theme="cyberpunk"] #toast > span::before { content: "\25CF\2002"; color: var(--neon-pink); }
[data-theme="cyberpunk"] .toast-action { letter-spacing: .14em; }
[data-theme="cyberpunk"] .install-banner { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong), inset 3px 0 0 var(--neon-yellow); }
[data-theme="cyberpunk"] .install-banner strong { color: var(--neon-yellow); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
[data-theme="cyberpunk"] .offline-badge { font-size: .68rem; letter-spacing: .14em; }
[data-theme="cyberpunk"] .offline-badge i { border-radius: 0; }
[data-theme="cyberpunk"] .offline-badge.ready i { box-shadow: 0 0 8px var(--success); }
[data-theme="cyberpunk"] .drawer {
  background: rgba(12, 7, 24, .92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-left: 1px solid var(--neon-pink);
  box-shadow: -10px 0 40px rgba(255, 46, 136, .18);
}
[data-theme="cyberpunk"] .setting { border-top-color: var(--border); }
[data-theme="cyberpunk"] .icon-tile { border-color: var(--border-strong); background: var(--surface); }
[data-theme="cyberpunk"] .icon-tile span { font-size: .6rem; letter-spacing: .1em; }
[data-theme="cyberpunk"] .icon-tile .ico { color: var(--neon-cyan); filter: drop-shadow(0 0 4px var(--glow-cyan)); }
[data-theme="cyberpunk"] .swatch-item i { border-radius: 0; }
[data-theme="cyberpunk"] .t-display { text-transform: uppercase; font-size: 2.2rem; text-shadow: -1.5px 0 var(--glow-pink), 1.5px 0 var(--glow-cyan); }
[data-theme="cyberpunk"] .t-label { letter-spacing: .26em; }
[data-theme="cyberpunk"] .layout-tag { border-bottom-color: var(--border-strong); font-size: .66rem; letter-spacing: .12em; }
[data-theme="cyberpunk"] .layout-tag strong::before { border-radius: 0; box-shadow: 0 0 6px var(--neon-pink); }

/* ---------- home: the night-market poster ---------- */
[data-theme="cyberpunk"] .home-hero { position: relative; margin: 34px 0 34px; }
[data-theme="cyberpunk"] .hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px .9em;
  margin-bottom: 14px;
  color: var(--muted); font: 400 .7rem/1.4 var(--font-mono); letter-spacing: .32em; text-transform: uppercase;
}
[data-theme="cyberpunk"] .hero-meta::before { content: ""; width: 44px; height: 2px; background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }
[data-theme="cyberpunk"] .meta-date .date-long { display: none; }
[data-theme="cyberpunk"] .meta-count { color: var(--neon-cyan); font-weight: 600; }
[data-theme="cyberpunk"] .hero-meta > * + *::before { content: "\00b7"; margin-right: .9em; color: var(--faint); }
[data-theme="cyberpunk"] .hero-title {
  display: block;
  margin: 0; max-width: 11ch;
  color: #fff4fb;
  font-size: clamp(3.2rem, 11vw, 7.4rem); line-height: .86; letter-spacing: .005em; text-transform: uppercase;
  text-shadow: -.035em 0 rgba(255, 46, 136, .9), .035em 0 rgba(45, 226, 255, .85), 0 0 .35em rgba(255, 46, 136, .45);
}
[data-theme="cyberpunk"] .intro { max-width: 46ch; margin: 22px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
/* a vertical neon sign hung beside the masthead; the name of the thing, in katakana */
[data-theme="cyberpunk"] .home-hero::after {
  content: "\30C6\30FC\30DE\30FB\30AE\30E3\30E9\30EA\30FC";
  position: absolute; top: 0; right: 6px;
  padding: 10px 6px;
  writing-mode: vertical-rl; text-orientation: upright;
  border: 1.5px solid var(--neon-pink);
  color: #ffd6ea; font: 700 1.05rem/1 "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", "Noto Sans JP", sans-serif; letter-spacing: .1em;
  text-shadow: 0 0 6px var(--neon-pink), 0 0 14px var(--neon-pink);
  box-shadow: 0 0 12px var(--glow-pink), inset 0 0 10px rgba(255, 46, 136, .3);
  background: rgba(10, 4, 20, .5);
}
[data-theme="cyberpunk"] .install-banner { margin-bottom: 18px; }

/* section heads: a pink // before a tracked mono title, a rule that fades out, the count in yellow */
[data-theme="cyberpunk"] .section-head { align-items: center; gap: 4px 12px; margin: 0 0 14px; }
[data-theme="cyberpunk"] .section-title { color: var(--text); font-size: .78rem; font-weight: 600; letter-spacing: .3em; }
[data-theme="cyberpunk"] .section-title::before { content: "//\2002"; color: var(--neon-pink); text-shadow: 0 0 8px var(--glow-pink); }
[data-theme="cyberpunk"] .section-head::after { content: ""; flex: 1; order: 2; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
[data-theme="cyberpunk"] .section-count { display: block; order: 3; padding: 2px 7px; box-shadow: inset 0 0 0 1px var(--neon-yellow); color: var(--neon-yellow); font-size: .7rem; letter-spacing: .1em; }
[data-theme="cyberpunk"] .section-note { order: 4; flex-basis: 100%; color: var(--muted); font-size: .84rem; }
[data-theme="cyberpunk"] .page > .section-head .section-title { font-size: 2.1rem; font-weight: 800; letter-spacing: .01em; line-height: 1; }
[data-theme="cyberpunk"] .page > .section-head .section-title::before { content: none; }
[data-theme="cyberpunk"] .home-section + .home-section { margin-top: 36px; }

/* entries: dark glass with a lit left edge. The neon goes by position - pink, cyan,
   yellow - like the signs on a street, never by the entry's own colour. */
[data-theme="cyberpunk"] .game-list { gap: 14px; }
[data-theme="cyberpunk"] .game-card {
  --n: var(--neon-pink); --ng: var(--glow-pink);
  position: relative;
  border-color: var(--border); background: var(--surface);
  box-shadow: inset 2px 0 0 var(--n);
}
[data-theme="cyberpunk"] .game-card:nth-child(3n+2) { --n: var(--neon-cyan); --ng: var(--glow-cyan); }
[data-theme="cyberpunk"] .game-card:nth-child(3n+3) { --n: var(--neon-yellow); --ng: var(--glow-yellow); }
[data-theme="cyberpunk"] :is(.game-card:hover, .game-card:focus-visible) {
  transform: none; outline: none;
  border-color: var(--n); background: rgba(22, 12, 40, .9);
  box-shadow: inset 2px 0 0 var(--n), 0 0 0 1px var(--n), 0 0 22px var(--ng);
}
[data-theme="cyberpunk"] .game-card:active { transform: none; background: var(--surface-2); }
[data-theme="cyberpunk"] .game-card .game-icon {
  width: 54px; height: 54px; border-radius: 0;
  background: transparent; color: var(--n);
  box-shadow: inset 0 0 0 1px var(--n), 0 0 10px var(--ng), inset 0 0 12px var(--ng);
}
[data-theme="cyberpunk"] .game-icon svg { width: 36px; height: 36px; filter: drop-shadow(0 0 3px var(--n)); }
[data-theme="cyberpunk"] .game-icon svg [fill="#fff"] { fill: var(--n); }
[data-theme="cyberpunk"] .game-icon svg [stroke="#fff"] { stroke: var(--n); }
[data-theme="cyberpunk"] .kind-line .game-card .game-icon { color: var(--n); }
[data-theme="cyberpunk"] .kind-line .game-card .game-icon svg { width: 28px; height: 28px; stroke-width: 1.8; }
[data-theme="cyberpunk"] .game-meta h3 { font-size: 1.3rem; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
[data-theme="cyberpunk"] .game-meta p { margin-top: 4px; font-size: .84rem; }
[data-theme="cyberpunk"] .game-status { margin-top: 7px; color: var(--n); font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-shadow: 0 0 8px var(--ng); }
[data-theme="cyberpunk"] .kind-art .game-card { align-items: stretch; }
[data-theme="cyberpunk"] .kind-art .game-card .game-icon { width: auto; height: auto; box-shadow: inset 0 -1px 0 var(--n); background: var(--table-bg); }
[data-theme="cyberpunk"] .kind-art .game-icon svg { filter: none; }

/* ---------- footer: the wire ---------- */
[data-theme="cyberpunk"] .site-footer { background: rgba(6, 4, 12, .82); border-top: 1px solid rgba(255, 46, 136, .5); font-family: var(--font-mono); font-size: .76rem; }
[data-theme="cyberpunk"] .footer-brand { display: inline-block; padding: 5px 10px; background: var(--neon-pink); color: #16040d; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 0 16px var(--glow-pink); }
[data-theme="cyberpunk"] .footer-brand::before { content: "\25CF\2002"; font-size: .7em; vertical-align: .12em; }
[data-theme="cyberpunk"] .footer-note { margin-top: 8px; }
[data-theme="cyberpunk"] .footer-links { font-size: .7rem; letter-spacing: .16em; }
[data-theme="cyberpunk"] .footer-links a:hover { color: var(--neon-yellow); text-decoration: none; text-shadow: 0 0 8px var(--glow-yellow); }
[data-theme="cyberpunk"] .version { color: var(--neon-cyan); letter-spacing: .1em; }

/* ---------- game pieces ---------- */
[data-theme="cyberpunk"] .g2048-board { box-shadow: inset 0 0 0 1px var(--border-strong); }
[data-theme="cyberpunk"] .g2048-board > div { font-size: 1.9rem; }
[data-theme="cyberpunk"] .g2048-board .d3 { font-size: 1.55rem; }
[data-theme="cyberpunk"] .g2048-board .d4 { font-size: 1.25rem; }
[data-theme="cyberpunk"] .g2048-board :is(.v64, .v128, .v256, .v512, .v1024, .v2048) { box-shadow: 0 0 14px color-mix(in srgb, var(--tb) 55%, transparent); }
[data-theme="cyberpunk"] .mem-grid i { box-shadow: inset 0 0 0 1px var(--border-strong); }
[data-theme="cyberpunk"] .mem-grid i.lit { box-shadow: 0 0 16px var(--glow-cyan); }
[data-theme="cyberpunk"] .mem-grid i.bad { box-shadow: 0 0 16px rgba(255, 77, 109, .5); }
[data-theme="cyberpunk"] .keypad button { border-color: var(--border-strong); background: var(--surface); font-size: 1.5rem; }
[data-theme="cyberpunk"] .keypad button:hover { border-color: var(--neon-cyan); background: var(--primary-soft); color: var(--neon-cyan); }
[data-theme="cyberpunk"] .keypad button.accent { border-color: var(--neon-cyan); background: var(--primary-soft); color: var(--neon-cyan); }
[data-theme="cyberpunk"] .keypad button.accent:hover:not(:disabled) { background: var(--neon-cyan); color: var(--primary-contrast); box-shadow: 0 0 18px var(--glow-cyan); }

@media (max-width: 700px) {
  [data-theme="cyberpunk"] .home-hero::after { display: none; }
  [data-theme="cyberpunk"] .hero-meta { letter-spacing: .2em; }
}

/* ---------- hover: everything clickable has to visibly react ---------- */
[data-theme="cyberpunk"] .segmented button:hover:not([aria-pressed="true"]) { background: transparent; color: var(--neon-pink); }
[data-theme="cyberpunk"] :is(.switch, .range):hover, [data-theme="cyberpunk"] .check:hover input { outline-color: rgba(45, 226, 255, .55); }
[data-theme="cyberpunk"] .icon-tile:hover { border-color: var(--neon-cyan); }