/*
 * B07 Arcade Pixel, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * Crisp 8-bit UI for an indie game studio's trailer page. Every control is the pixel art Gemini
 * generated for this design (sheets2/b07-pixel-sheet.jpg), point-sampled to its true pixels by the
 * cutter: purple tiles for play, pause, volume, mute, captions and fullscreen, the orange experience
 * bar for the seek, the white knob that hangs below the bar as the playhead, and the brass horn (no
 * hearts) as the unit of the volume meter. A plain dark band (not a drawn panel) holds the row, and
 * PRESS START never blinks.
 *
 * One grid: each sampled cell is 1.5 CSS px (an art pixel, two cells, is 3 CSS px, whole device pixels
 * on a 2x screen), tiles, bar, knob and horns alike, and every image scales with
 * image-rendering: pixelated, never smoothed.
 */

@font-face {
  font-family: "Press Start 2P";
  src: url(fonts/PressStart2P-400.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.sk-root[data-skin="b07"] {
  --media-accent-color: #ffc23a;
  --media-accent-text-color: #14102a;
  --media-border-radius: 0px;
  --media-font-family: "Press Start 2P", ui-monospace, monospace;

  --px-navy: #14102a;
  --px-lilac: #c9b8ff;
  --px-gold: #ffc23a;

  /* the grid: one sampled cell = 1.5 CSS px; tiles are 40 x 30 cells, the bar 54 x 20, knob 5 x 7,
     horn 36 x 22 */
  --px: 1.5px;
  --px-tile-w: calc(40 * var(--px));
  --px-tile-h: calc(30 * var(--px));
  --px-bar-h: calc(20 * var(--px));

  --sk-icon-render: pixelated;
  --sk-pad: 4px;
  --sk-hit: var(--px-tile-h);
  --sk-icon: var(--px-tile-h);
  --sk-btn-radius: 0px;
  --sk-ink: #ffffff;
  --sk-ink-2: var(--px-lilac);
  --sk-surface: var(--px-navy);
  --sk-surface-solid: var(--px-navy);
  --sk-blur: 0px;
  --sk-hairline: transparent;
  --sk-shadow: none;
  --sk-cc-on: var(--px-gold);
  --sk-focus: var(--px-gold);
  --sk-focus-gap: var(--px-navy);
  --sk-focus-w: 3px;
  --sk-error-accent: var(--px-gold);
  --sk-scrim: none;
  /* Nov 15, 2026: Chrome has no VTTCue.lineAlign, so a cue hangs below the core's line instead of sitting on it;
     116 = the 69px band + a one-line cue + a gap (92 left the cue's lower half under the near-opaque band) */
  --sk-cue-clearance: 116px;

  --px-band-pad: 12px;
  --px-band-h: calc(var(--px-tile-h) + var(--px-band-pad) * 2);
}

/* Captions stay in a plain, legible face; the pixel font is for the controls only */
.sk-root[data-skin="b07"] > mux-video {
  font-family: "Inter", system-ui, sans-serif;
}

/* Stepped timing: the controls come in over two frames and leave in one */
.sk-root[data-skin="b07"] .sk-controls,
.sk-root[data-skin="b07"] .sk-backdrop {
  transition-timing-function: steps(2, jump-end);
}
.sk-root[data-skin="b07"] .sk-controls:not([data-visible]):not(:has(:focus-visible)) {
  transition-timing-function: steps(1, jump-start);
}

/* ---------- The band ---------- */

.px-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  height: var(--px-band-h);
  padding: var(--px-band-pad) calc(16px + var(--px-tile-w) + 9px) var(--px-band-pad) 16px;
  background: rgb(20 16 42 / .94);
  color: var(--sk-ink);
}

/* Tiles: the art is the whole button (its own outline, face, highlight and glyph) */
.sk-root[data-skin="b07"] :is(.px-panel .sk-btn, .sk-fs) {
  width: var(--px-tile-w);
  height: var(--px-tile-h);
  transition: none;
}
.sk-root[data-skin="b07"] :is(.px-panel .sk-btn, .sk-fs) .sk-icon {
  width: var(--px-tile-w);
  height: var(--px-tile-h);
}
.sk-root[data-skin="b07"] :is(.px-panel .sk-btn, .sk-fs):hover .sk-icon {
  filter: brightness(1.25);
}
/* pressed: the tile drops one art pixel, instantly (no easing in a pixel world) */
.sk-root[data-skin="b07"] :is(.px-panel .sk-btn, .sk-fs):active .sk-icon {
  filter: brightness(.9);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="b07"] :is(.px-panel .sk-btn, .sk-fs):active .sk-icon {
    translate: 0 calc(2 * var(--px));
  }
}

/* Focus: a square gold ring outside a navy gap */
.sk-root[data-skin="b07"] :is(.sk-btn, .sk-error-close):focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--px-navy);
}

/* Captions: on = a gold bar under the tile (shape and position); off = the tile dimmed */
.sk-root[data-skin="b07"] .sk-cc::after {
  bottom: -7px;
  width: calc(12 * var(--px));
  height: calc(2 * var(--px));
  border-radius: 0;
}
.sk-root[data-skin="b07"] .sk-cc:not([data-active]) .sk-icon {
  filter: saturate(.25) brightness(.7);
}

/* Fullscreen: the band's last tile on desktop; top-right on phones */
.sk-root[data-skin="b07"] .sk-controls > .sk-fs {
  position: absolute;
  right: 16px;
  bottom: var(--px-band-pad);
}

/* ---------- Time: the pixel font, every digit one cell wide ---------- */

.px-panel .sk-time {
  padding: 4px 4px 0;
  font: 400 15px/1 var(--media-font-family);
  -webkit-font-smoothing: none;
  font-variant-numeric: tabular-nums;
  gap: .4em;
}
.px-panel .sk-time media-time-separator,
.px-panel .sk-time media-time[data-type="duration"] {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the experience bar ---------- */

.px-seek {
  --sk-seek-hit: 44px;
  --sk-seek-radius: 0px;
  margin-inline: 4px;
}
.sk-root[data-skin="b07"] .px-seek .sk-track,
.sk-root[data-skin="b07"] .px-seek[data-interactive] .sk-track {
  height: var(--px-bar-h);
  border-radius: 0;
  background: none;
  overflow: visible;
  transition: none;
}
/* uniform columns between the stepped ends, so the middle stretches without changing a pixel row */
.sk-root[data-skin="b07"] .px-seek .sk-track::before,
.sk-root[data-skin="b07"] .px-seek .sk-track > :is(.sk-buffer, .sk-fill) {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(6 * var(--px));
  border-image-source: url(art/seek-unplayed.png);
  border-image-slice: 0 6 fill;
  border-image-width: 0 calc(6 * var(--px));
  border-image-repeat: stretch;
  border-radius: 0;
  background: none;
  image-rendering: pixelated;
}
.sk-root[data-skin="b07"] .px-seek .sk-track > .sk-buffer {
  filter: brightness(2.2) saturate(.6);
  clip-path: inset(calc(6 * var(--px)) calc(100% - var(--media-slider-buffer, 0%)) calc(8 * var(--px)) 0);
}
.sk-root[data-skin="b07"] .px-seek .sk-track > .sk-fill {
  border-image-source: url(art/seek-played.png);
  clip-path: inset(0 calc(100% - var(--media-slider-fill, 0%)) 0 0);
}
/* the playhead: the knob that hangs below the bar (its top sits on the bar's 13th cell row) */
.sk-root[data-skin="b07"] .px-seek .sk-thumb {
  --sk-thumb-w: calc(5 * var(--px));
  /* thumb containment (Gus's rule, Nov 7): the core centers the thumb on the fill
     percentage, so unclamped it spills half its width past the track at 0% and 100%.
     Travel is clamped to [half width + 0px, 100% - half width - 0px] so the thumb
     stays fully inside its track at both ends, mid-drag grow included. */
  left: clamp(calc(var(--sk-thumb-w) / 2), var(--media-slider-fill), calc(100% - var(--sk-thumb-w) / 2));
  top: calc(50% - var(--px-bar-h) / 2 + 12 * var(--px));
  width: calc(5 * var(--px));
  height: calc(7 * var(--px));
  border-radius: 0;
  background: url(art/knob.png) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  translate: -50% 0;
}
.sk-root[data-skin="b07"] .px-seek[data-interactive] .sk-thumb {
  filter: brightness(1.1) drop-shadow(0 0 0 var(--px-gold));
}

/* Volume: a meter of three brass horns; dim horns are the track, bright horns the level */
.px-panel .sk-volume {
  gap: 0;
}
.sk-root[data-skin="b07"] .sk-volume-slider {
  --sk-vol-w: calc(3 * 36 * var(--px) + 2 * 3 * var(--px));
  margin-inline: 8px 2px;
}
.sk-root[data-skin="b07"] .sk-volume-slider .sk-track {
  height: calc(22 * var(--px));
  border-radius: 0;
  background: none;
  overflow: visible;
}
/* dim horns (the art greyed by a filter) are the track */
.sk-root[data-skin="b07"] .sk-volume-slider .sk-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(art/horn.png) 0 0 / calc(36 * var(--px)) 100% space;
  image-rendering: pixelated;
  filter: grayscale(1) brightness(.6);
  opacity: .85;
}
/* the horns as generated are the level, clipped at the fill */
.sk-root[data-skin="b07"] .sk-volume-slider .sk-fill {
  inset: 0;
  width: auto;
  border-radius: 0;
  background: url(art/horn.png) 0 0 / calc(36 * var(--px)) 100% space;
  image-rendering: pixelated;
  clip-path: inset(0 calc(100% - var(--media-slider-fill, 0%)) 0 0);
}
/* the meter has no thumb drawn: the horns are the level, the ring is the focus */
.sk-root[data-skin="b07"] .sk-volume-slider .sk-thumb {
  opacity: 0;
}

/* Preview: the storyboard frame in a gold square border, the time in the pixel font */
.px-seek .sk-preview {
  bottom: calc(100% + 12px);
}
/* Nov 15, 2026 (coordinator audit g1b): everything on this skin moves in stepped frames and shares one
   pixel grid; the core seek preview and CC-on mark still eased, and the mute tile rendered off-grid
   (1.579 px per cell against 1.5). Step the two core animations and size the mute face in grid units. */
.sk-root[data-skin="b07"] .px-seek .sk-preview,
.sk-root[data-skin="b07"] .sk-cc::after { transition-timing-function: steps(2, jump-end); }
.sk-root[data-skin="b07"] .px-panel .sk-mute .sk-icon.sk-mute-face { width: calc(38 * var(--px)); height: calc(28 * var(--px)); }
.px-seek .sk-preview-image {
  --sk-preview-radius: 0px;
  border: 3px solid var(--px-gold);
  box-shadow: 0 0 0 3px var(--px-navy);
}
.px-seek .sk-preview-time {
  padding: 6px 8px 4px;
  border-radius: 0;
  background: var(--px-navy);
  box-shadow: 0 0 0 3px var(--px-gold);
  font: 400 12px/1 var(--media-font-family);
  -webkit-font-smoothing: none;
}

/* ---------- Center play: PRESS START (decorative; the band's Play is the real one) ---------- */

.sk-root[data-skin="b07"] .sk-center {
  padding-bottom: var(--px-band-h);
}
.sk-root[data-skin="b07"] .px-start {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  cursor: pointer;
  transition-timing-function: steps(2, jump-end);
}
/* the title-screen tile is drawn at twice the band's pixel size, still on whole pixels */
.px-start-frame {
  display: grid;
  place-items: center;
  --sk-icon: calc(60 * var(--px));
}
.px-start-frame .sk-icon {
  grid-area: 1 / 1;
  width: calc(80 * var(--px));
  height: calc(60 * var(--px));
}
.sk-root[data-skin="b07"] .px-start:hover .px-start-frame {
  filter: brightness(1.2);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="b07"] .px-start:active .px-start-frame {
    translate: 0 calc(4 * var(--px));
  }
}
.px-start-words {
  font: 400 16px/1 var(--media-font-family);
  letter-spacing: 2px;
  -webkit-font-smoothing: none;
  /* a navy pixel outline, so the words read on any frame (never blinks) */
  text-shadow: 2px 0 0 #14102a, -2px 0 0 #14102a, 0 2px 0 #14102a, 0 -2px 0 #14102a, 2px 2px 0 #14102a, -2px -2px 0 #14102a, 2px -2px 0 #14102a, -2px 2px 0 #14102a;
}
.px-when-ended,
.px-start[data-ended] .px-when-play {
  display: none;
}
.px-start[data-ended] .px-when-ended {
  display: inline;
}

/* ---------- Designed states ---------- */

/* Loading: the pixel gear tile turns in four steps */
.sk-root[data-skin="b07"] .sk-spinner {
  width: var(--px-tile-w);
  height: var(--px-tile-h);
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.sk-root[data-skin="b07"] .sk-spinner .sk-icon {
  width: calc(37 * var(--px));
  height: calc(29 * var(--px));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="b07"] .sk-loading[data-visible] .sk-spinner .sk-icon {
    animation: px-blink-free 800ms steps(4) infinite;
  }
}
@keyframes px-blink-free {
  from { translate: 0 0; }
  50% { translate: 0 calc(-2 * var(--px)); }
  to { translate: 0 0; }
}
.sk-root[data-skin="b07"] .sk-error {
  gap: 10px;
  padding: 22px 10px 10px;
  border-radius: 0;
  background: var(--px-navy);
  box-shadow: 0 0 0 3px var(--px-lilac), 0 0 0 6px var(--px-navy);
}
.sk-root[data-skin="b07"] .sk-error-title {
  padding-inline: 10px;
  font: 400 14px/1.5 var(--media-font-family);
  -webkit-font-smoothing: none;
}
.sk-root[data-skin="b07"] .sk-error-text {
  padding-inline: 10px;
  color: #ddd4ff;
  font-family: "Inter", system-ui, sans-serif;
}
.sk-root[data-skin="b07"] .sk-error-close {
  width: 100%;
  height: 48px;
  border-radius: 0;
  background: var(--px-gold);
  color: var(--px-navy);
  font: 400 14px/1 var(--media-font-family);
  -webkit-font-smoothing: none;
}
.sk-root[data-skin="b07"] .sk-empty p {
  padding: 14px 18px 12px;
  border-radius: 0;
  background: var(--px-navy);
  box-shadow: 0 0 0 3px var(--px-lilac);
  font: 400 13px/1 var(--media-font-family);
}

/* ---------- Mid widths: the bar keeps its room; volume is mute plus the arrow-key hotkeys ---------- */
/* Nov 15, 2026: below a 900px player (was 680): from 680 to 899px the 181px meter squeezed the experience bar
   to a 27 to 207px stub, and the hover preview, wider than the stub, ran off the player's left edge */

@container sk (max-width: 899px) {
  .sk-root[data-skin="b07"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: two rows in the band (the bar on top); fullscreen top-right ---------- */
/* Nov 15, 2026: below a 680px player (was 520): from 520 to 679px the single row left the bar 48 to 207px wide */

@container sk (max-width: 679px) {
  .sk-root[data-skin="b07"] :is(.sk-controls, .sk-center) {
    /* a finer grid on phones (an art pixel is 2.4 CSS px); the tap boxes stay 44px tall */
    --px: 1.2px;
    --px-tile-w: calc(40 * var(--px));
    --px-tile-h: calc(30 * var(--px));
    --px-bar-h: calc(20 * var(--px));
    --px-band-pad: 6px;
    --px-band-h: calc(var(--px-band-pad) * 2 + 30px + 4px + 44px);
  }
  .sk-root[data-skin="b07"] :is(.px-panel .sk-btn, .sk-fs) {
    height: 44px;
  }
  .px-panel {
    display: grid;
    grid-template-columns: var(--px-tile-w) var(--px-tile-w) auto 1fr var(--px-tile-w);
    grid-template-rows: 30px 44px;
    gap: 4px 6px;
    padding: var(--px-band-pad) 10px;
  }
  .px-panel .sk-seek {
    grid-column: 1 / -1;
    grid-row: 1;
    --sk-seek-hit: 30px;
    margin-inline: 0;
  }
  .px-panel .sk-play { grid-column: 1; grid-row: 2; }
  .px-panel .sk-volume { grid-column: 2; grid-row: 2; }
  .px-panel .sk-time { grid-column: 3; grid-row: 2; font-size: 11px; }
  .px-panel .sk-cc { grid-column: 5; grid-row: 2; }
  /* Nov 15, 2026: the captions-on bar sits just under the CC art, inside the player (at -7px the player's
     bottom edge cut it) */
  .sk-root[data-skin="b07"] .sk-cc::after {
    bottom: -3px;
  }
  /* touch: the core's 44px seek hit box reached 3px into the buttons below; 38px fills the row and its gaps */
  @media (pointer: coarse) {
    .px-panel .sk-seek {
      height: 38px;
    }
  }
  /* the hover preview fits above the bar on short players: the thumbnail scales to the player (it sizes itself
     from max-width; 96 to 160px), 4px above the bar */
  .px-seek .sk-preview {
    bottom: calc(100% + 4px);
  }
  .px-seek .sk-preview-image {
    max-width: min(160px, 100cqw - 240px);
  }
  .sk-root[data-skin="b07"] .sk-controls > .sk-fs {
    top: 10px;
    right: 10px;
    bottom: auto;
  }
  .px-start-frame .sk-icon {
    width: var(--px-tile-w);
    height: var(--px-tile-h);
  }
  .px-start-words {
    font-size: 12px;
  }
  .sk-root[data-skin="b07"][data-started]:not([data-ended]) .px-start {
    opacity: 0;
    pointer-events: none;
  }
}
/* Nov 15, 2026: viewport 711px = a 679px player (the page pads 16px a side), where the two-row band now starts;
   120 = the 90px two-row band + a one-line cue + a gap (96 left the cue's lower edge under the band) */
@media (max-width: 711px) {
  .sk-root[data-skin="b07"] {
    --sk-cue-clearance: 120px;
  }
}

/* ---------- Preference fallbacks ---------- */

/* Reduced transparency and more contrast: the band goes fully solid */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .px-panel {
    background: var(--px-navy);
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="b07"] {
    --sk-ink-2: #e4dcff;
  }
}
@media (forced-colors: active) {
  .px-panel {
    border-top: 2px solid CanvasText;
    background: Canvas;
  }
  .sk-root[data-skin="b07"] .px-seek .sk-track {
    outline: 1px solid CanvasText;
  }
  .sk-root[data-skin="b07"] .px-seek .sk-track > .sk-buffer {
    border-image: none;
    background: repeating-linear-gradient(90deg, CanvasText 0 1px, Canvas 1px 4px);
    filter: none;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="b07"] .px-seek .sk-track > .sk-fill {
    border-image: none;
    background: Highlight;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="b07"] :is(.sk-error, .sk-empty p) {
    border: 2px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }
  .sk-root[data-skin="b07"] .sk-error-close {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }
}