/* Change Up! — the pixel skin. Loaded after style.css, every rule scoped to
   html[data-skin="pixel"] (set by skin.js before first paint, toggled from
   the home screen), so the look is one attribute and the classic skin is
   untouched underneath.

   The look: hard edges, one-pixel-grid borders with a hard drop shadow, a
   dot-matrix scoreboard in LED amber, the ice painted on the pixel grid
   (sprites.js), and two pixel fonts — Press Start 2P for the big shouts
   and the numbers, Silkscreen for labels. Body text, names and the answer
   box stay in the system sans: the game is typing a name against a clock.
   Drawn for the light palette (white ice, user 2026-10-07); a dark palette
   is kept below for a future toggle.

   Fonts: Press Start 2P (CodeMan38) and Silkscreen (Jason Kottke), both
   SIL Open Font License 1.1, latin + latin-ext subsets, self-hosted in
   fonts/ — the deployed page's CSP allows only 'self'. */

@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/press-start-2p-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/press-start-2p-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/silkscreen-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/silkscreen-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/silkscreen-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/silkscreen-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

[data-skin="pixel"] {
  --px-big: "Press Start 2P", "Silkscreen", monospace;
  --px-label: "Silkscreen", "Press Start 2P", monospace;
  --ink: #0b0f14;
  --ink-shadow: rgba(11, 15, 20, .85);
  --led: #ffb000;
  --led-red: #ff4b3e;
  --ice: #c9e7f6;
  --ice-line: #a9cde0;
  --card: #ffffff;
  --card-edge: #0b0f14;
  --overlay: rgba(232, 244, 251, .97);
  --text: #0f1b2b;
  --muted: #4f6273;
  /* Ice blocks (nhl-game-logs docs/design-change-up-ice-blocks.md, 4a): the
     menu cards' ice, its bevel, the blue on-state and its LED lettering, the
     headings' ice blue and glow */
  --block: #d9f1fc; --block-btn: #eef9fe; --block-hi: #ffffff; --block-lo: #8ccbe8;
  --block-on: #1c5fb8; --block-on-hi: #7fb8ff; --block-on-lo: #0d3a7a;
  --block-led: #8fe6ff; --block-led-dim: #dff5ff;
  --block-head: #1b6fb3; --block-glow: rgba(120, 210, 255, .95);
}
@media (prefers-color-scheme: dark) {
  [data-skin="pixel"]:not([data-theme="light"]) {
    --ink: #04070b; --ink-shadow: rgba(0, 0, 0, .8);
    --ice: #0f2236; --ice-line: #1b3550; --card: #182634; --card-edge: #04070b;
    --overlay: rgba(14, 30, 46, .97); --text: #eaf2fa; --muted: #9db0c3;
    --blue: #5b9bf0; --red: #ff5a6e;
    --block: #182634; --block-btn: #1f3042; --block-hi: #2f4660; --block-lo: #060b12;
    --block-on: #1c5fb8; --block-on-hi: #7fb8ff; --block-on-lo: #0d3a7a;
    --block-led: #8fe6ff; --block-led-dim: #dff5ff;
    --block-head: #8fe6ff; --block-glow: rgba(95, 211, 255, .7);
  }
}
[data-skin="pixel"][data-theme="dark"] {
  --ink: #04070b; --ink-shadow: rgba(0, 0, 0, .8);
  --ice: #0f2236; --ice-line: #1b3550; --card: #182634; --card-edge: #04070b;
  --overlay: rgba(14, 30, 46, .97); --text: #eaf2fa; --muted: #9db0c3;
  --blue: #5b9bf0; --red: #ff5a6e;
  --block: #182634; --block-btn: #1f3042; --block-hi: #2f4660; --block-lo: #060b12;
  --block-on: #1c5fb8; --block-on-hi: #7fb8ff; --block-on-lo: #0d3a7a;
  --block-led: #8fe6ff; --block-led-dim: #dff5ff;
  --block-head: #8fe6ff; --block-glow: rgba(95, 211, 255, .7);
}

/* The rink: painted by sprites.js, scaled up crisp. No frost gradient. */
[data-skin="pixel"] .rink { image-rendering: pixelated; background: var(--ice); }
[data-skin="pixel"] .rink::before { background: none; }

/* Panels: square, a 3px ink border, a hard shadow. */
[data-skin="pixel"] .lineup,
[data-skin="pixel"] .ice,
[data-skin="pixel"] .ticker,
[data-skin="pixel"] .series,
[data-skin="pixel"] .sub,
[data-skin="pixel"] .name-card,
[data-skin="pixel"] .setup,
[data-skin="pixel"] .mode,
[data-skin="pixel"] .chain-list,
[data-skin="pixel"] .controls button {
  border-radius: 0; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink-shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Ice blocks (the design, 4b): every menu card and tile a block of ice — the
   pale fill, a 3 px bevel, the bubbles tile (sprites.js installIceBlocks)
   frozen in. The fill and the tile are two declarations: a page without
   --sp-ice still gets the fill. */
[data-skin="pixel"] .setup, [data-skin="pixel"] .mode {
  background-color: var(--block);
  background-image: var(--sp-ice);
  background-size: 96px 96px; background-repeat: repeat; background-position: left top;
  image-rendering: pixelated;
  box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--block-lo), 4px 4px 0 var(--ink-shadow);
}
[data-skin="pixel"] .mode.on {
  border-color: var(--ink);
  box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--block-lo), 4px 4px 0 var(--blue), 0 0 16px 5px rgba(28, 95, 184, .55);
}
[data-skin="pixel"] .mode:active { transform: translate(4px, 4px); box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--block-lo); }
[data-skin="pixel"] .mode small { font-size: 13px; }
/* The Play-online card (R1): the one menu card that is not a .setup, and had
   no pixel rule at all — the same block, its lead-in in the heading font. */
[data-skin="pixel"] .online-card {
  border-radius: 0; border: 3px solid var(--ink);
  background-color: var(--block);
  background-image: var(--sp-ice);
  background-size: 96px 96px; background-repeat: repeat; background-position: left top;
  image-rendering: pixelated;
  box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--block-lo), 4px 4px 0 var(--ink-shadow);
}
[data-skin="pixel"] .online-card p strong { font: 700 11px/1.5 var(--px-label); text-transform: uppercase; letter-spacing: 0; color: var(--block-head); text-shadow: 0 0 6px var(--block-glow); }
[data-skin="pixel"] .lineups { gap: 10px; margin-bottom: 10px; }
[data-skin="pixel"] .lineup { padding: 6px; }
[data-skin="pixel"] .lineup .lhead { font: 10px/1.2 var(--px-label); text-transform: uppercase; color: var(--text); letter-spacing: 0; padding: 1px 2px 3px; }

/* The scoreboard and the series board: a dot-matrix sheet in LED amber. */
[data-skin="pixel"] .scoreboard,
[data-skin="pixel"] .sboard {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1.2px) 0 0 / 4px 4px,
    #0b0f14;
  color: var(--led); border-radius: 0; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink-shadow);
}
[data-skin="pixel"] .scoreboard { border-width: 0 0 3px; box-shadow: none; }
[data-skin="pixel"] .scoreboard .brand { font: 9px/1.2 var(--px-big); letter-spacing: 0; opacity: .7; }
[data-skin="pixel"] .scoreboard .brand.last { color: var(--led-red); opacity: 1; text-shadow: 0 0 6px rgba(255, 75, 62, .6); }
[data-skin="pixel"] .scoreboard .chain { font: 20px/1 var(--px-big); margin-top: 3px; text-shadow: 0 0 6px rgba(255, 176, 0, .6); }
[data-skin="pixel"] .scoreboard .sname { font: 11px/1.3 var(--px-label); text-transform: uppercase; }
[data-skin="pixel"] .scoreboard .slives { color: var(--led); letter-spacing: 3px; font-size: 11px; }
[data-skin="pixel"] .scoreboard .seat.on .sname::before, [data-skin="pixel"] .scoreboard .seat.right.on .sname::after { color: #35e08a; }
[data-skin="pixel"] .sboard { padding: 10px 12px 12px; margin-bottom: 12px; }
[data-skin="pixel"] .sside .sn { font: 11px/1.3 var(--px-label); text-transform: uppercase; color: #eaf2fa; }
[data-skin="pixel"] .sside.s0 .sn { border-bottom: 3px solid var(--blue); } [data-skin="pixel"] .sside.s1 .sn { border-bottom: 3px solid var(--red); }
[data-skin="pixel"] .sside .sscore { font: 34px/1 var(--px-big); color: var(--led); text-shadow: 0 0 8px rgba(255, 176, 0, .55); margin: 6px 0 4px; }
[data-skin="pixel"] .sside .sshots { font: 8px/1.4 var(--px-label); color: #9db0c3; text-transform: uppercase; }
[data-skin="pixel"] .sshots .st { border-radius: 0; --tick: #3dff7a; }
[data-skin="pixel"] .smid .sgame { font: 8px/1.4 var(--px-label); color: #9db0c3; }
[data-skin="pixel"] .smid .sclock { font: 18px/1 var(--px-big); color: var(--led-red); text-shadow: 0 0 8px rgba(255, 75, 62, .5); min-height: 18px; margin: 4px 0 3px; }
[data-skin="pixel"] .smid .speriod { font: 10px/1.2 var(--px-label); color: #eaf2fa; text-transform: uppercase; }
[data-skin="pixel"] .smid .sdots { font-size: 12px; letter-spacing: 3px; margin-top: 2px; }
[data-skin="pixel"] .sdots .d0 { color: var(--blue); } [data-skin="pixel"] .sdots .d1 { color: var(--red); }

/* Chips: square, their team colours, a hard 2px shadow. */
[data-skin="pixel"] .chip { border-radius: 0; border-width: 2px; box-shadow: 2px 2px 0 var(--ink-shadow); }
[data-skin="pixel"] .chip.bench, [data-skin="pixel"] .chip.empty, [data-skin="pixel"] .chip.callup { border-color: var(--ink); box-shadow: none; }
[data-skin="pixel"] .chip .cs { font: 7px/1.3 var(--px-label); letter-spacing: 0; }
/* The OVR on a chip at 16 px, the label font's next crisp size: at 8 px the
   holes of an 8 were one pixel each and filled in (user, 2026-10-08 — the
   stretched OVR put an 8 on half the chips). */
[data-skin="pixel"] .chip .co { font: 16px/1 var(--px-label); }
/* The bench peek: the chevron a solid triangle in the system font (Silkscreen's ▾ is a
   dot at this size); the rows square with the ink border; the bubble's 3 px ink border
   and hard shadow, the caret's ink edges. */
[data-skin="pixel"] button.chip.bench .co { font: 9px/12px var(--px-label); }
[data-skin="pixel"] button.chip.bench:not(:disabled) .co::after { content: "▼"; font: 700 8px/12px system-ui, sans-serif; }
[data-skin="pixel"] button.chip.bench[aria-expanded="true"] .co::after { content: "▲"; }
[data-skin="pixel"] button.chip.bench[aria-expanded="true"] { border-color: var(--accent); box-shadow: 2px 2px 0 var(--ink-shadow); }
[data-skin="pixel"] .brow { border-radius: 0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink-shadow); padding: 1px 5px; }
[data-skin="pixel"] .brow .bp { font: 7px/1 var(--px-label); letter-spacing: 0; opacity: 1; }
[data-skin="pixel"] .brow .bo { font: 12px/1 var(--px-label); opacity: 1; }
[data-skin="pixel"] .bench-list { gap: 4px; }
[data-skin="pixel"] .bench-pop { border-radius: 0; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink-shadow); top: calc(100% + 10px); }
[data-skin="pixel"] .bench-pop::before { border-left: 3px solid var(--ink); border-top: 3px solid var(--ink); top: -8px; width: 11px; height: 11px; }
@media (max-width: 420px) { [data-skin="pixel"] .lineups { gap: 7px; } [data-skin="pixel"] .lineup { padding: 3px; } }
[data-skin="pixel"] .chip .cx { border-radius: 0; box-shadow: 0 0 0 2px var(--ink); top: -6px; right: -6px; }
/* The back of a chip (his ratings): the scoreboard's dot-matrix sheet and
   font (user: it did not match the rest). */
[data-skin="pixel"] .chip .cb { border-radius: 0; background: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.2px) 0 0 / 4px 4px, #0b0f14; padding: 2px 4px; }
[data-skin="pixel"] .chip .ca { font-size: 8px; }
[data-skin="pixel"] .chip .ca i { font: 8px/1 var(--px-label); letter-spacing: 0; color: #9db0c3; }
[data-skin="pixel"] .chip .ca b { font: 8px/1 var(--px-label); }
[data-skin="pixel"] .chip .ca.boost b { color: var(--led); }
/* A skater's back, two columns of three: the acronym at 7 px over the rating
   at 16 px, the chip's own OVR size. */
[data-skin="pixel"] .chip .cb:not(.goalie) { padding: 3px 5px; box-shadow: 0 0 0 2px var(--ink), 4px 4px 0 var(--ink-shadow); }
[data-skin="pixel"] .chip .cb:not(.goalie) .ca i { font: 7px/8px var(--px-label); opacity: 1; }
[data-skin="pixel"] .chip .cb:not(.goalie) .ca b { font: 16px/15px var(--px-label); }
[data-skin="pixel"] .chip .cb.goalie .ca { font-size: 16px; } [data-skin="pixel"] .chip .cb.goalie .ca i { font-size: 8px; } [data-skin="pixel"] .chip .cb.goalie .ca b { font-size: 16px; }
[data-skin="pixel"] .flag { border-radius: 0; }
/* chemistry (nhl-game-logs docs/design-change-up-chem-glow.md): hard rings in
   steps, no bloom — the bright ring and a dim one swapping on the kind's beat
   (an LED chase); the stack a bright ring, a hairline, the green ring (:where'd
   to the base's weight, as in style.css, so .lit and .can keep winning) */
[data-skin="pixel"] .chip:is(.chem-history, .chem-team, .chem-country) {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px rgb(var(--glow)), 0 0 0 6px rgba(var(--glow), .4), 4px 4px 0 var(--ink-shadow);
  animation: px-chem var(--beat) steps(1) infinite;
}
@keyframes px-chem { 50% { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px rgba(var(--glow), .45), 0 0 0 6px rgb(var(--glow)), 4px 4px 0 var(--ink-shadow); } }
[data-skin="pixel"] .chip:is(.chem-history, .chem-team):where(.chem-country) {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px rgb(var(--glow)), 0 0 0 5px var(--card), 0 0 0 7px rgb(var(--chem-green)), 4px 4px 0 var(--ink-shadow);
  animation: px-chem-2 var(--beat) steps(1) infinite;
}
@keyframes px-chem-2 { 50% { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px rgba(var(--glow), .45), 0 0 0 5px var(--card), 0 0 0 7px rgba(var(--chem-green), .45), 4px 4px 0 var(--ink-shadow); } }
[data-skin="pixel"] .flag.on { animation-timing-function: steps(1); }
/* the sparkles: a 5-pixel cross on each corner, blinking between the cross and its dot; the ⇄ badge keeps the ::after of a .in chip (style.css) */
[data-skin="pixel"] .chip:is(.chem-history, .chem-team, .chem-country)::before, [data-skin="pixel"] .chip:is(.chem-history, .chem-team, .chem-country):not(.in)::after {
  content: ""; width: 2px; height: 2px; background: #fff; text-shadow: none; font-size: 0;
  box-shadow: 2px 0 0 rgb(var(--glow)), -2px 0 0 rgb(var(--glow)), 0 2px 0 rgb(var(--glow)), 0 -2px 0 rgb(var(--glow)), 4px 0 0 rgba(var(--glow), .5), -4px 0 0 rgba(var(--glow), .5), 0 4px 0 rgba(var(--glow), .5), 0 -4px 0 rgba(var(--glow), .5);
  animation: px-chem-spark 1s steps(1) infinite;
}
[data-skin="pixel"] .chip:is(.chem-history, .chem-team, .chem-country)::before { top: -8px; right: -6px; }
[data-skin="pixel"] .chip:is(.chem-history, .chem-team, .chem-country):not(.in)::after { bottom: -6px; left: -8px; animation-delay: -.5s; }
[data-skin="pixel"] .chip.chem-country:is(.chem-history, .chem-team):not(.in)::after { box-shadow: 2px 0 0 rgb(var(--chem-green)), -2px 0 0 rgb(var(--chem-green)), 0 2px 0 rgb(var(--chem-green)), 0 -2px 0 rgb(var(--chem-green)), 4px 0 0 rgba(var(--chem-green), .5), -4px 0 0 rgba(var(--chem-green), .5), 0 4px 0 rgba(var(--chem-green), .5), 0 -4px 0 rgba(var(--chem-green), .5); }
[data-skin="pixel"] .chip.in:is(.chem-history, .chem-team, .chem-country)::before { top: auto; right: auto; bottom: -6px; left: -8px; }
@keyframes px-chem-spark { 50% { box-shadow: 2px 0 0 rgb(var(--glow)), -2px 0 0 rgb(var(--glow)), 0 2px 0 rgb(var(--glow)), 0 -2px 0 rgb(var(--glow)); } }
/* the flip after the chemistry rules, the whole shorthand: the pixel ring outweighs style.css's .chip.flipping (R1) */
[data-skin="pixel"] .chip.flipping { animation: chip-flip .3s steps(2); }
[data-skin="pixel"] .chip.lit { animation: px-lit 1.1s steps(3) both; }
@keyframes px-lit { 0% { background: #35e08a; color: #0b0f14; transform: translate(-2px, -2px); } 100% { transform: none; } }

/* The event sheet: the scene (sprites.js) when there is one, then the line. */
[data-skin="pixel"] .ice { min-height: 96px; padding: 10px 12px 12px; gap: 6px; margin: 0 0 12px; }
/* The scene runs into the sheet's side padding (nhl-game-logs docs/design-change-up-animations.md D6):
   a true 4× (336 px) wherever the sheet has room, else an even shrink, its height
   following the backing store's 336 : 128 (sprites.js writes only its width): a
   phone squeezed the width alone. The −12 px margins keep it centred in the flex column. */
[data-skin="pixel"] .ice .scene { display: block; image-rendering: pixelated; margin: -2px -12px 0; max-width: calc(100% + 24px); height: auto; }
[data-skin="pixel"] .event-line { font: 700 17px/1.35 var(--px-label); letter-spacing: 0; text-shadow: none; }
[data-skin="pixel"] .event-line b { text-shadow: 2px 2px 0 rgba(11, 15, 20, .18); }
[data-skin="pixel"] .event-detail { font: 11px/1.4 var(--px-label); color: var(--muted); }
@media (max-width: 420px) { [data-skin="pixel"] .event-line { font-size: 15px; } }

/* The shout: Press Start 2P, outlined in ink, a hard drop, stepped in fast
   (a tad quicker than the first mock, user 2026-10-07). */
[data-skin="pixel"] .callout {
  font: 30px/1.2 var(--px-big); letter-spacing: 0; border-radius: 0; background: none; box-shadow: none;
  padding: 8px 12px;
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    3px 3px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink),
    6px 6px 0 var(--ink-shadow);
  animation: px-shout .3s steps(3) both;
}
/* The reason under the shout ("Sidney Crosby was already named"): 16 px, the
   font's crisp 2×, wrapping — 11 px was too small to read in time (user).
   In the scoreboard's amber under every shout, the green ones too (Buzzer!,
   Free pick, Coin flip): white on the ink outline was hard to read (user
   2026-10-28). */
[data-skin="pixel"] .callout .why { font: 700 16px/1.3 var(--px-label); text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px -2px 0 var(--ink); color: var(--led); margin-top: 8px; white-space: normal; max-width: 86vw; margin-left: auto; margin-right: auto; }
@keyframes px-shout { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (max-width: 420px) { [data-skin="pixel"] .callout { font-size: 22px; } }
/* The wall's WOW! (section 18): stepped in like the shout, PACE.wowMs after it. */
[data-skin="pixel"] .callout .wow { margin-top: 8px; animation: px-wow .3s steps(3) both; }
@keyframes px-wow { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* A commentator's saying (nhl-game-logs docs/design-change-up-sayings.md,
   style A; its rise, section 10, look 3): the shout's own face at 24 px,
   the font's crisp 3×, in the scoreboard's LED amber (the voice FINAL and
   the name game's faults already speak in), outlined in ink like the shout
   with a hard drop. It rises in style.css's three beats (small is the 16 px
   it used to be), and the large one hits: white for an instant settling to
   the amber in steps, jolted (px-rise-hit, PACE.sayHitMs after the saying).
   16 px on a phone, where the long ones wrap to a second line. */
[data-skin="pixel"] .callout .say { font: 24px/1.4 var(--px-big); color: var(--led); margin-top: 14px; letter-spacing: 0;
  animation: rise-beats .45s linear both, px-rise-hit .32s steps(4) forwards;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 5px 5px 0 var(--ink-shadow); }
@keyframes px-rise-hit {
  0% { color: #fff; translate: 0 0; }
  20% { translate: -4px 2px; }
  40% { translate: 4px -2px; }
  60% { translate: -2px 1px; }
  80% { translate: 1px 0; }
  100% { color: var(--led); translate: 0 0; }
}
@media (max-width: 420px) { [data-skin="pixel"] .callout .say { font-size: 16px; } }
/* FINAL: the scoreboard's amber — the text colour on the ink outline was
   black on black (user). */
[data-skin="pixel"] .callout.neutral { color: var(--led); }
/* The name game's faults too (ICING! time expired, already named…): the red
   shout and its white reason were hard to read over the name card (user).
   The shout takes the amber (the reason under it has it already). */
[data-skin="pixel"] .callout:not(.ok):not(.s0):not(.s1) { color: var(--led); }

/* The ticker: a log sheet, the clock in Silkscreen. */
[data-skin="pixel"] .ticker { padding: 8px 10px; margin-bottom: 12px; font-size: 12.5px; }
[data-skin="pixel"] .ticker .tc { font: 11px/1.5 var(--px-label); color: var(--muted); opacity: 1; min-width: 40px; }
[data-skin="pixel"] .ticker li { padding: 3px 0; border-bottom: 1px dashed var(--ice-line); }
[data-skin="pixel"] .ticker li:last-child { border-bottom: 0; }
[data-skin="pixel"] .ticker li.big { color: var(--text); }
[data-skin="pixel"] .ticker li.big span:last-child::before { content: "▸ "; color: var(--red); }

/* Buttons: a pressed state that moves into its own shadow. */
[data-skin="pixel"] .controls { gap: 12px; }
[data-skin="pixel"] .controls button { font: 12px/1.3 var(--px-label); text-transform: uppercase; padding: 12px; }
[data-skin="pixel"] .controls button:active, [data-skin="pixel"] .go:active, [data-skin="pixel"] .answer button:active { transform: translate(4px, 4px); box-shadow: none; }

/* The review row (the replay design, section 5): the buttons' square panels,
   the slider a sheet with an ink edge and a square ink thumb with the hard
   drop; the scrubbed time in Silkscreen; PAUSED in the scoreboard's amber. */
[data-skin="pixel"] #s-review { gap: 8px; animation-timing-function: steps(3); }
[data-skin="pixel"] #s-review button { border-radius: 0; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink-shadow); font-size: 14px; }
[data-skin="pixel"] #s-review button:active { transform: translate(3px, 3px); box-shadow: none; }
[data-skin="pixel"] #s-review #s-snap { font: 12px/1.3 var(--px-label); text-transform: uppercase; }
[data-skin="pixel"] #s-review .rt { font: 10px/1.3 var(--px-label); color: var(--text); text-transform: uppercase; }
[data-skin="pixel"] #s-review input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 0; background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
[data-skin="pixel"] #s-review input[type="range"]::-moz-range-track { height: 8px; border-radius: 0; background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
[data-skin="pixel"] #s-review input[type="range"]::-webkit-slider-thumb { width: 16px; height: 28px; margin-top: -10px; border-radius: 0; border: 0; background: var(--ink); box-shadow: 3px 3px 0 var(--ink-shadow); }
[data-skin="pixel"] #s-review input[type="range"]::-moz-range-thumb { width: 16px; height: 28px; border-radius: 0; border: 0; background: var(--ink); box-shadow: 3px 3px 0 var(--ink-shadow); }
[data-skin="pixel"] body.review .ice { outline: 3px solid var(--blue); outline-offset: -8px; }
[data-skin="pixel"] .smid .spaused { font: 8px/1.4 var(--px-big); letter-spacing: 0; color: var(--led); opacity: 1; text-shadow: 0 0 6px rgba(255, 176, 0, .6); }
[data-skin="pixel"] .go, [data-skin="pixel"] .answer button, [data-skin="pixel"] .answer input,
[data-skin="pixel"] .setup input[type=text], [data-skin="pixel"] .setup select, [data-skin="pixel"] .setup textarea {
  border-radius: 0; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink-shadow);
}
[data-skin="pixel"] .seg button { border-radius: 0; border: 2px solid var(--ink); }
/* Ice blocks (the design, 4c): every button, tab and chip a smaller block
   with a 2 px bevel; the picked one the deep-blue block with ice-cyan LED
   lettering — one on-state for the setup card, the tabs and the chips. */
[data-skin="pixel"] .seg button, [data-skin="pixel"] .dex-tab:not(.on),
[data-skin="pixel"] .standings-chip:not(.on), [data-skin="pixel"] .flame-chip {
  background: var(--block-btn);
  box-shadow: inset 2px 2px 0 var(--block-hi), inset -2px -2px 0 var(--block-lo), 2px 2px 0 var(--ink-shadow);
}
[data-skin="pixel"] .seg button.on, [data-skin="pixel"] .dex-tab.on, [data-skin="pixel"] .standings-chip.on {
  background: var(--block-on); color: var(--block-led); border-color: var(--ink);
  text-shadow: 0 0 6px rgba(111, 227, 255, .8);
  box-shadow: inset 2px 2px 0 var(--block-on-hi), inset -2px -2px 0 var(--block-on-lo), 2px 2px 0 var(--ink-shadow);
}
[data-skin="pixel"] .dex-tab.on b { color: var(--block-led); }
[data-skin="pixel"] .dex-tab.on small { color: var(--block-led-dim); }
[data-skin="pixel"] .seg button:active { transform: translate(2px, 2px); box-shadow: inset 2px 2px 0 var(--block-hi), inset -2px -2px 0 var(--block-lo); }
/* Ice blocks (R1b, the user 2026-11-02): the go buttons — Drop the puck,
   Play online, the room's, the post screen's, the Profile's, the HockeyDex
   sheet's — the blue block too, with the 3 px bevel of a card: one on-state
   for the whole menu; the answer's Go and the lit speed button with them.
   The quiet ones and the replay's row are the off block; Delete keeps the
   danger red, in a red bevel. The buzzer, the pages board's arrows and the
   text links are not buttons of the menu and stay as they are. */
[data-skin="pixel"] .go, [data-skin="pixel"] .answer button, [data-skin="pixel"] .controls button.on {
  background: var(--block-on); color: var(--block-led); border-color: var(--ink);
  text-shadow: 0 0 6px rgba(111, 227, 255, .8);
  box-shadow: inset 3px 3px 0 var(--block-on-hi), inset -3px -3px 0 var(--block-on-lo), 4px 4px 0 var(--ink-shadow);
}
[data-skin="pixel"] .go.quiet, [data-skin="pixel"] .controls button, [data-skin="pixel"] #s-review button {
  background: var(--block-btn); color: var(--text); border-color: var(--ink); text-shadow: none;
  box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--block-lo), 4px 4px 0 var(--ink-shadow);
}
[data-skin="pixel"] .go.danger { background: var(--red); color: #ffffff; text-shadow: none; box-shadow: inset 3px 3px 0 #ff8a9a, inset -3px -3px 0 #7a0a1c, 4px 4px 0 var(--ink-shadow); }
[data-skin="pixel"] .go:active, [data-skin="pixel"] .answer button:active, [data-skin="pixel"] .controls button:active, [data-skin="pixel"] #s-review button:active {
  transform: translate(4px, 4px); box-shadow: inset 3px 3px 0 var(--block-on-hi), inset -3px -3px 0 var(--block-on-lo);
}
[data-skin="pixel"] .go.quiet:active, [data-skin="pixel"] .controls button:not(.on):active, [data-skin="pixel"] #s-review button:active { box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--block-lo); }
[data-skin="pixel"] .setup input[type=text], [data-skin="pixel"] .setup select, [data-skin="pixel"] .setup textarea { box-shadow: none; background: var(--card); }
/* Ice blocks (the design, 4d): one heading font on every menu block — the
   labels, the Rules summary, the Team and Classic titles, the cards'
   headings, Earned at — the label font's bold cut, ice blue with a glow. */
[data-skin="pixel"] .setup label, [data-skin="pixel"] .setup .rules summary,
[data-skin="pixel"] .mode strong, [data-skin="pixel"] .profile .profile-card h2,
[data-skin="pixel"] .chips-label {
  font: 700 11px/1.5 var(--px-label); text-transform: uppercase; letter-spacing: 0;
  color: var(--block-head); text-shadow: 0 0 6px var(--block-glow);
}
/* The rules: their headings in the label font, like the labels above them
   (user: the list did not match the rest of the card). */
[data-skin="pixel"] .setup .rules li { font-size: 13px; line-height: 1.45; }
/* The rules' headings read like the footer's links — the label font at
   10 px, the accent blue, a 2 px rule under — the 8 px grey was hard to read
   (user, 2026-10-07). */
[data-skin="pixel"] .setup .rules li b { font: 10px/1.6 var(--px-label); color: var(--accent); border-bottom: 2px solid currentColor; display: inline-block; margin-right: 4px; vertical-align: 1px; padding: 0 1px 1px; }
[data-skin="pixel"] .go { font: 14px/1.3 var(--px-big); text-transform: uppercase; }
[data-skin="pixel"] .go.install { font-size: 10px; padding: 8px 14px; }
[data-skin="pixel"] .go:disabled { transform: none; box-shadow: inset 3px 3px 0 var(--block-on-hi), inset -3px -3px 0 var(--block-on-lo), 4px 4px 0 var(--ink-shadow); }
[data-skin="pixel"] .answer button { font: 11px/1.3 var(--px-big); text-transform: uppercase; }
/* The title frozen in a 2 px white rim (both palettes); room under the tag
   for the Zamboni (below); a little more room over Difficulty, Their name
   and the party list (the design, 4e). */
[data-skin="pixel"] .title { font: 40px/1.3 var(--px-big); letter-spacing: 0;
  text-shadow: -2px 0 0 #ffffff, 2px 0 0 #ffffff, 0 -2px 0 #ffffff, 0 2px 0 #ffffff, 4px 4px 0 var(--ink-shadow); }
[data-skin="pixel"] .tag { font-size: 14px; margin-bottom: 58px; }
[data-skin="pixel"] .setup .row > div[data-view] { margin-top: 20px; }
[data-skin="pixel"] .foot .link { font: 10px/1.4 var(--px-label); text-decoration: none; border-bottom: 2px solid currentColor; padding: 2px 0; }
[data-skin="pixel"] .board, [data-skin="pixel"] .foot { font-size: 12px; }
[data-skin="pixel"] .result { font: 18px/1.5 var(--px-big); letter-spacing: 0; margin: 20px 0 10px; }
[data-skin="pixel"] .series h3 { font: 12px/1.4 var(--px-big); }
/* the post screen's HockeyDex box (the match finds, section 6): the panel's square ink
   border; the tiles are chips, square already; the pixel chip's taller OVR sets the row */
[data-skin="pixel"] .finds { border-radius: 0; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink-shadow); }
[data-skin="pixel"] .finds h3 { font: 12px/1.4 var(--px-big); margin-bottom: 4px; }
[data-skin="pixel"] .find-grid { --row: 74px; }
[data-skin="pixel"] .find.on { outline-color: var(--ink); }
[data-skin="pixel"] .find-detail { border-top: 2px solid var(--ink); }
[data-skin="pixel"] .find-detail .dex-bio p.dex-card-name { font: 13px/1.4 var(--px-big); }
[data-skin="pixel"] .chain-list { padding-left: 32px; }
@media (max-width: 420px) {
  [data-skin="pixel"] .title { font-size: 28px; }
  [data-skin="pixel"] .result { font-size: 14px; }
}

/* The name card: the man himself, skating, in his team's colours (phase 3,
   sprites.js playCard), then the name. */
[data-skin="pixel"] .name-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 18px 10px 12px; }
[data-skin="pixel"] .name-card .card-sprite { flex: 0 0 auto; display: block; image-rendering: pixelated; }
[data-skin="pixel"] .name-card .card-text { min-width: 0; }
[data-skin="pixel"] .name-card .nm { letter-spacing: 0; }
@media (max-width: 420px) { [data-skin="pixel"] .name-card { gap: 10px; padding: 8px 12px 8px 8px; } [data-skin="pixel"] .name-card .nm { font-size: 24px; } }
[data-skin="pixel"] .puck .ring-bg { stroke: var(--ink); }
[data-skin="pixel"] .puck .letter { font: 44px/1 var(--px-big); }
[data-skin="pixel"] .puck .letter.free { font-size: 12px; }
[data-skin="pixel"] .puck .secs { font: 10px/1 var(--px-label); }
[data-skin="pixel"] .hint { font: 10px/1.6 var(--px-label); }
/* The buzzer (style.css has the mini): the skin's ink border and hard
   shadow under its base, the word in Press Start 2P, a stepped blink of an
   inner highlight when armed (the base and the shadow kept through it). */
[data-skin="pixel"] .buzzer { border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--buzzer-base), 4px 9px 0 var(--ink-shadow); background: var(--buzzer); text-shadow: none; }
[data-skin="pixel"] .buzzer .bw { font: 13px/1 var(--px-big); letter-spacing: 0; }
[data-skin="pixel"] .buzzer.armed { animation: px-buzz-blink 1.2s steps(2, jump-none) infinite; transform: none; }
@keyframes px-buzz-blink { 0% { box-shadow: 0 5px 0 var(--buzzer-base), 4px 9px 0 var(--ink-shadow); } 100% { box-shadow: 0 5px 0 var(--buzzer-base), 4px 9px 0 var(--ink-shadow), inset 0 0 0 4px var(--buzzer-hi); } }
[data-skin="pixel"] .buzzer.pressed { background: var(--buzzer-deep); transform: translateY(4px); box-shadow: 0 1px 0 var(--buzzer-base), 4px 5px 0 var(--ink-shadow); }
[data-skin="pixel"] .buzzer.pressed .bw { font-size: 10px; }
[data-skin="pixel"] .pass-to { font: 10px/1.4 var(--px-label); letter-spacing: 0; }
[data-skin="pixel"] .pass-name { font: 22px/1.4 var(--px-big); }
[data-skin="pixel"] .overlay .box .go { margin-top: 8px; }

/* Hard-stepped versions of the motion that stays. */
[data-skin="pixel"] .sside.scored .sscore { animation: px-pop .5s steps(3); }
@keyframes px-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
[data-skin="pixel"] .event-line.enter, [data-skin="pixel"] .name-card.enter { animation-timing-function: steps(5); }
[data-skin="pixel"] .ice.shake, [data-skin="pixel"] .answer.shake { animation-timing-function: steps(4); }
[data-skin="pixel"] .puck .letter.pop { animation-timing-function: steps(3); }
[data-skin="pixel"] .puck .letter.drop { animation-timing-function: steps(4); }   /* the puck drop's halo (the user's pick: the halo, not the outline) */
[data-skin="pixel"] .puck .letter.pop.drop { animation-timing-function: steps(3), steps(4); }   /* the pop and the halo together at the landing (R2) */

@media (prefers-reduced-motion: reduce) {
  [data-skin="pixel"] .chip.chem-team, [data-skin="pixel"] .chip.chem-history, [data-skin="pixel"] .chip.chem-country, [data-skin="pixel"] .chip.lit, [data-skin="pixel"] .chip.flipping,
  [data-skin="pixel"] .chip:is(.chem-history, .chem-team, .chem-country)::before, [data-skin="pixel"] .chip:is(.chem-history, .chem-team, .chem-country):not(.in)::after,
  [data-skin="pixel"] .callout, [data-skin="pixel"] .callout .wow, [data-skin="pixel"] .callout .say, [data-skin="pixel"] .sside.scored .sscore, [data-skin="pixel"] #s-review,
  [data-skin="pixel"] .buzzer.armed { animation: none; }
}

/* Achievements */
[data-skin="pixel"] .case-head, [data-skin="pixel"] .case-detail { font-size: 12px; }
[data-skin="pixel"] .unlock-name { font: 16px/1.5 var(--px-big); }
[data-skin="pixel"] .unlock-title { font: 10px/1.5 var(--px-label); letter-spacing: 0; }
[data-skin="pixel"] .unlock-desc, [data-skin="pixel"] .unlock-who { font-size: 12px; }
/* The HockeyDex page (style.css has the layout) */
[data-skin="pixel"] .dex .title b, [data-skin="pixel"] .dex .title span { font-family: var(--px-big); }
[data-skin="pixel"] .dex-n strong { font: 24px/1 var(--px-big); color: var(--text); }
[data-skin="pixel"] .dex-n { font-family: var(--px-label); }
[data-skin="pixel"] .dex-bar { border-radius: 0; border: 3px solid var(--ink); height: 16px; background: var(--ice); }
[data-skin="pixel"] .dex-bar span { background: #35b06a; }
[data-skin="pixel"] .dex-search { border-radius: 0; border: 3px solid var(--ink); }
[data-skin="pixel"] .dex-tab { border-radius: 0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink-shadow); }
[data-skin="pixel"] .dex-tab b { font: 12px/1.3 var(--px-big); }
[data-skin="pixel"] .dex-tab small { font: 8px/1.3 var(--px-label); }
[data-skin="pixel"] .dex-tab.on i { background: var(--led); }
[data-skin="pixel"] .dex-tab.done.on i { background: #ffe37a; }
[data-skin="pixel"] .dex-tab .dex-mark { top: 1px; right: 1px; }
[data-skin="pixel"] .dex .profile-card p.dex-ladder-line { font-size: 12px; }
/* the letter's and the open name's headings keep their own look under the
   ice blocks' heading rule (the ice-blocks design, 4d): style.css 701 weighs
   the same as that rule and loses to it, so it is restated here */
[data-skin="pixel"] .dex .profile-card h2.dex-letter, [data-skin="pixel"] .dex .profile-card h2.dex-open-head { font: 12px/1.4 var(--px-big); color: var(--text); text-transform: none; text-shadow: none; }
[data-skin="pixel"] .dex-chip { border-radius: 0; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink-shadow); }
[data-skin="pixel"] .dex-chip.zero { box-shadow: none; border-color: var(--muted); }
[data-skin="pixel"] .dex-chip.on { background: var(--ink); color: var(--led); border-color: var(--ink); }
[data-skin="pixel"] .dex-chip.on span { color: #eaf2fa; }
[data-skin="pixel"] .dex-name { border-radius: 0; }
[data-skin="pixel"] .dex-pic { border-radius: 0; }
[data-skin="pixel"] .dex-mono { display: none; }
[data-skin="pixel"] .dex .profile-card .dex-bio p.dex-card-name { font: 13px/1.4 var(--px-big); }
/* the letters' slots (nhl-game-logs docs/design-change-up-letters.md; mocks/letters/'s
   pixel rules for the pick B): the skin's square font on a 3 px line, a live `?`
   in the text's colour, the lit letter on the ink's line; the pill's buttons at
   11 px (the skin's 14 px block button is too big under a row) */
[data-skin="pixel"] .dex-q, [data-skin="pixel"] .dex-lit { font: 12px/1 var(--px-big); }
[data-skin="pixel"] .dex-q::after, [data-skin="pixel"] .dex-lit::after { height: 3px; }
[data-skin="pixel"] button.dex-q { color: var(--text); }
[data-skin="pixel"] .dex-lit { color: var(--text); }
[data-skin="pixel"] .dex-lit::after { background: var(--ink); }
[data-skin="pixel"] .dex-q.armed, [data-skin="pixel"] button.dex-q.armed:hover { background: var(--amber); color: var(--ink); }
[data-skin="pixel"] .dex-q.armed::after { background: var(--ink); }
[data-skin="pixel"] .dex .profile-card p.dex-reveal { font-size: 12px; }
[data-skin="pixel"] .dex-reveal .go { font-size: 11px; padding: 6px 10px; box-shadow: inset 3px 3px 0 var(--block-on-hi), inset -3px -3px 0 var(--block-on-lo), 3px 3px 0 var(--ink-shadow); }
[data-skin="pixel"] .dex-reveal .go.quiet { box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--block-lo), 3px 3px 0 var(--ink-shadow); }
[data-skin="pixel"] .dex-reveal .go.quiet { padding: 5px 10px; }
[data-skin="pixel"] .dex-meta.dex-hint { font-size: 12px; }
[data-skin="pixel"] .dex-progress .dex-q, [data-skin="pixel"] .dex-progress .dex-lit { font-size: 10px; }
/* The standings page's Badges list (style.css has the layout) */
[data-skin="pixel"] .standings-chips { gap: 5px; }
[data-skin="pixel"] .standings-chip { border-radius: 0; border: 2px solid var(--ink); font: 9px/1.3 var(--px-label); text-transform: uppercase; padding: 3px 4px; }
[data-skin="pixel"] .standings-chip:focus-visible { outline: 3px solid var(--blue); }
[data-skin="pixel"] .standings-tabs .dex-tab b { font-size: 11px; }
[data-skin="pixel"] .standings-sub { font: 10px/1.3 var(--px-label); letter-spacing: 0; }
[data-skin="pixel"] .profile .profile-card .badge-sep { font: 10px/1.3 var(--px-label); letter-spacing: 0; }
[data-skin="pixel"] .case-b { border-radius: 0; }
[data-skin="pixel"] .case-b.on, [data-skin="pixel"] .case-b:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[data-skin="pixel"] .badge-detail { border-top: 2px solid var(--ink); }
[data-skin="pixel"] .badge-detail-head .badge-name { font: 13px/1.4 var(--px-big); }
@media (max-width: 420px) {
  [data-skin="pixel"] .dex-n strong { font-size: 16px; }
  [data-skin="pixel"] .dex-n { font-size: 12px; }
}

/* The profile picture (nhl-game-logs docs/design-change-up-avatar.md, the M1
   mock's pixel rules): square boxes, the tile's frame in the sheet's grey and
   the LED green on the turn, the name band in the label font. The seat name
   one size down beside a tile (section 16, decision 5: "Computer" clipped at
   375; app.js writes "CPU" when it still does, D19). */
[data-skin="pixel"] .avatar { border-radius: 0; }
[data-skin="pixel"] .scoreboard .avatar.tile { border: 2px solid #3a4552; }
[data-skin="pixel"] .scoreboard .seat.on .avatar.tile { border-color: #35e08a; box-shadow: 0 0 8px #35e08a; }
[data-skin="pixel"] .scoreboard .sname { font-size: 10px; }
[data-skin="pixel"] .me-name { font: 14px/1.4 var(--px-big); }
[data-skin="pixel"] .me-sub { font-size: 12px; }
[data-skin="pixel"] .me-name.band { border-radius: 0; font-size: 12px; padding: 4px 10px; }
/* The daily streak's chip and the Profile page's Streak card (the streaks
   design, D10, D14; mocks/streaks/index.html): a square chip in the ink
   border, the count in the big pixel font; square dots on the grid. */
[data-skin="pixel"] .flame-chip { border-radius: 0; border: 2px solid var(--ink); font: 11px/1 var(--px-big); padding: 3px 7px 3px 5px; }
[data-skin="pixel"] .flame-chip.cold { color: var(--muted); border-color: var(--muted); }
[data-skin="pixel"] .streak-grid .day { border-radius: 0; }
[data-skin="pixel"] .streak-now { font: 14px/1.4 var(--px-big); }

/* The pages board: the scoreboard's dot-matrix sheet, the page in LED amber,
   square dots. */
[data-skin="pixel"] .pages-board {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1.2px) 0 0 / 4px 4px,
    #0b0f14;
  color: var(--led); border-radius: 0; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink-shadow);
}
[data-skin="pixel"] .pb-arrow { border-radius: 0; }
[data-skin="pixel"] .pb-name { font: 16px/1.3 var(--px-big); letter-spacing: 0; text-shadow: 0 0 6px rgba(255, 176, 0, .6); }
[data-skin="pixel"] .pb-sub { font: 10px/1.4 var(--px-label); text-transform: uppercase; }
[data-skin="pixel"] .pb-dots i { border-radius: 0; }

/* The Picture card and the HockeyDex's assign in the pixel skin (the M1 mock's rules). */
[data-skin="pixel"] .pick.on .avatar, [data-skin="pixel"] .pick:focus-visible .avatar { outline: 3px solid var(--ink); }
[data-skin="pixel"] .profile .profile-card p.pick-name, [data-skin="pixel"] .profile .profile-card p.profile-name { font: 12px/1.4 var(--px-big); }
[data-skin="pixel"] .pick { border-radius: 0; }
/* the badge on the picture's row (the OG design, D11): square, the ink outline */
[data-skin="pixel"] .pin-pick { border-radius: 0; }
[data-skin="pixel"] .pin-pick.pin-none { border: 2px solid var(--ink); font: 10px/1.4 var(--px-label); text-transform: uppercase; }
[data-skin="pixel"] .pin-pick.on, [data-skin="pixel"] .pin-pick:focus-visible { outline: 3px solid var(--ink); }
[data-skin="pixel"] .pic-sheet { border-radius: 0; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink-shadow); }
[data-skin="pixel"] .pic-sheet .go { font-size: 10px; }

/* The line change (nhl-game-logs docs/design-change-up-line-change.md, section 6; the
   user's pick A; mocks/line-change/?look=a): the head and the lines in the skin's fonts,
   the lit slots a hard ink dash that steps, the chosen row's hard shadow. The polish
   (docs/design-change-up-line-change-polish.md, D2-D4): the title frozen in the white rim
   like the home's and the result's, the sub line and the card's head in the Ice blocks
   heading style; the hint and the wait an ice block with the bevel, the name and the
   slots in the heading blue; the ⇄ on a row the chip's ink square with LED letters. */
[data-skin="pixel"] .lc-head .lc-title { font: 16px/1.2 var(--px-big); text-transform: uppercase; text-shadow: -2px 0 0 #ffffff, 2px 0 0 #ffffff, 0 -2px 0 #ffffff, 0 2px 0 #ffffff, 3px 3px 0 var(--ink-shadow); }
[data-skin="pixel"] .lc-head .lc-sub { font: 700 10px/1.4 var(--px-label); text-transform: uppercase; color: var(--block-head); text-shadow: 0 0 6px var(--block-glow); margin-top: 4px; }
[data-skin="pixel"] .lc-head .puck .letter { font: 16px/1 var(--px-big); }
[data-skin="pixel"] #screen-lines .lineup .lhead { font-weight: 700; color: var(--block-head); text-shadow: 0 0 6px var(--block-glow); }
[data-skin="pixel"] .lc-seat .lc-hint, [data-skin="pixel"] .lc-foot .lc-wait { font: 10px/1.4 var(--px-label); color: var(--text); background: var(--block); border: 2px solid var(--ink); border-radius: 0; padding: 6px 8px;
  box-shadow: inset 2px 2px 0 var(--block-hi), inset -2px -2px 0 var(--block-lo), 2px 2px 0 var(--ink-shadow); }
[data-skin="pixel"] .lc-seat .lc-hint b { color: var(--block-head); text-shadow: 0 0 6px var(--block-glow); }
[data-skin="pixel"] .brow .bx { border-radius: 0; background: var(--ink); color: var(--led); font: 8px/14px var(--px-label); }
[data-skin="pixel"] .chip.can { outline: 3px dashed var(--ink); outline-offset: 1px; animation: lc-can-px 1s steps(2) infinite; }
@keyframes lc-can-px { 0%, 100% { outline-color: var(--ink); } 50% { outline-color: var(--led); } }
[data-skin="pixel"] .chip.in::after { border-radius: 0; background: var(--ink); color: var(--led); font: 8px/14px var(--px-label); }
[data-skin="pixel"] .brow.sel { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 2px 2px 0 var(--ink-shadow); }
@media (prefers-reduced-motion: reduce) { [data-skin="pixel"] .chip.can { animation: none; } }

/* The Zamboni (nhl-game-logs docs/design-change-up-ice-blocks.md, 4f; its drive
   since docs/design-change-up-animations.md D1): on the home's locker card only,
   a real rail over the card's top edge (.zam, put in #me by web/app.js
   runZamboni) that clips the machine, so it enters from behind the card's left
   edge and leaves behind its right edge. The machine (.zam-car, sprites.js'
   four phases at 2×, --sp-zamboni 272 × 36: one 68 × 36 phase shown) and its
   fresh white lane (.zam-lane, 8 px under the machine's rear) move by transform
   alone, from app.js with the Web Animations API — one sprite pixel a step, 16
   steps a second, on every screen; the wheels step through the phases. Parked
   at 38 % with its lane behind it under reduced motion. */
[data-skin="pixel"] #me { position: relative; overflow: visible; }
[data-skin="pixel"] #me > .zam { position: absolute; left: 0; right: 0; top: -39px; height: 39px; overflow: hidden; pointer-events: none; z-index: 2; }
[data-skin="pixel"] #me .zam-car {
  position: absolute; top: 0; left: 0; width: 68px; height: 36px; transform: translateX(-68px); will-change: transform;
  background: var(--sp-zamboni) 0 0 / 272px 36px no-repeat; image-rendering: pixelated;
}
[data-skin="pixel"] #me .zam-lane { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #ffffff; transform: translateX(-100%); will-change: transform; }
/* The badge pinned on the picture (nhl-game-logs docs/design-change-up-og.md, R3,
   the user 2026-11-04): the pin rides above the rail (2), so the
   Zamboni drives behind the crest, not over it (the pin's own z-index 1 competes in
   #me's stacking context, the box making none of its own). */
[data-skin="pixel"] #me .avatar .pin { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  [data-skin="pixel"] #me .zam-car { transform: none; left: 38%; }
  [data-skin="pixel"] #me .zam-lane { transform: none; width: 44%; }
}

/* Two languages (nhl-game-logs docs/design-change-up-languages.md, 6d): a
   French page hides the data-t text until web/lang.js applyStrings has filled
   it and set data-strings, so it never flashes the English of the markup. */
html[data-lang="fr"]:not([data-strings]) [data-t],
html[data-lang="fr"]:not([data-strings]) [data-t-html] { visibility: hidden; }

/* Ice blocks on the post screen (R1c, the user 2026-11-02, after a few
   games): the series summary with its three stars, the HockeyDex box, the
   names list, the two final lineups and the lines under the result are the
   same block as the menu's cards; their headings the heading font; the
   result frozen in the title's rim. The game screens' own panels (the
   lineups and the ice during play, the ticker) are not touched. */
[data-skin="pixel"] .series, [data-skin="pixel"] .finds, [data-skin="pixel"] .chain-list,
[data-skin="pixel"] #screen-post .sub, [data-skin="pixel"] #screen-post .lineup {
  background-color: var(--block);
  background-image: var(--sp-ice);
  background-size: 96px 96px; background-repeat: repeat; background-position: left top;
  image-rendering: pixelated;
  box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--block-lo), 4px 4px 0 var(--ink-shadow);
}
[data-skin="pixel"] .finds h3, [data-skin="pixel"] .series h3, [data-skin="pixel"] #screen-post .lineup .lhead {
  font: 700 11px/1.5 var(--px-label); text-transform: uppercase; letter-spacing: 0;
  color: var(--block-head); text-shadow: 0 0 6px var(--block-glow);
}
/* The Stats box (the series stats, section 6; look A): the summary's ice block and heading;
   the toggle two small ice blocks (the setup's .seg), the heads in the label font with the glow. */
[data-skin="pixel"] .stats {
  border-radius: 0; border: 3px solid var(--ink);
  background-color: var(--block); background-image: var(--sp-ice); background-size: 96px 96px; background-repeat: repeat; background-position: left top; image-rendering: pixelated;
  box-shadow: inset 3px 3px 0 var(--block-hi), inset -3px -3px 0 var(--block-lo), 4px 4px 0 var(--ink-shadow);
}
[data-skin="pixel"] .stats h3 { font: 700 11px/1.5 var(--px-label); text-transform: uppercase; letter-spacing: 0; color: var(--block-head); text-shadow: 0 0 6px var(--block-glow); }
[data-skin="pixel"] .stats .seg { border: 0; border-radius: 0; gap: 4px; overflow: visible; }
[data-skin="pixel"] .stats .seg button { border: 2px solid var(--ink); border-radius: 0; font: 700 9px/1.4 var(--px-label); text-transform: uppercase; letter-spacing: 0; padding: 4px 8px; min-width: 56px; }
[data-skin="pixel"] .stats-t th { font: 700 8px/1.4 var(--px-label); letter-spacing: 0; color: var(--block-head); text-shadow: 0 0 4px var(--block-glow); border-bottom: 2px solid var(--ink); }
[data-skin="pixel"] .stats-t th.sorted { color: var(--text); }
[data-skin="pixel"] .stats-t td { border-bottom: 1px solid var(--ice-line); }
[data-skin="pixel"] .stats-t tr.odd td { background: rgba(28, 95, 184, .08); }
[data-skin="pixel"] .stats-t tr.total td { border-top: 2px solid var(--ink); }
[data-skin="pixel"] .stats-t tr.more td { font: 8px/1.6 var(--px-label); }
[data-skin="pixel"] .result { text-shadow: -2px 0 0 #ffffff, 2px 0 0 #ffffff, 0 -2px 0 #ffffff, 0 2px 0 #ffffff, 3px 3px 0 var(--ink-shadow); }

/* Historic Lines (look A; moved from mocks/historic/index.html): the week strip's squares, the
   labels in the pixel fonts, the square corners. */
[data-skin="pixel"] .hl-week i { border-radius: 0; border: 2px solid var(--ink); background: var(--ice); width: 10px; height: 10px; }
[data-skin="pixel"] .hl-week i.on { background: #ff7a1a; border-color: var(--ink); }
[data-skin="pixel"] .hl-era { font: 9px/1.4 var(--px-label); letter-spacing: 0; }
[data-skin="pixel"] .hl-nick { font: 12px/1.3 var(--px-big); }
[data-skin="pixel"] .hl-name { font-size: 13px; }
[data-skin="pixel"] .hl-blank, [data-skin="pixel"] .dex-pic.unknown, [data-skin="pixel"] .hl-detail, [data-skin="pixel"] .hl-sheet { border-radius: 0; }
[data-skin="pixel"] .hl-blank { border: 2px solid var(--ink-shadow); background: var(--ice); color: var(--ink-shadow); font: 11px/1 var(--px-big); }
[data-skin="pixel"] .hl-grid .case-b small { font: 7px/1.4 var(--px-label); }
[data-skin="pixel"] .hl-detail-words .hl-nick { font-size: 12px; }