* {
  box-sizing: border-box;
}

/* Several rules below set display on elements that also use the hidden
   attribute (canvases, buttons, panels). hidden must always win. */
[hidden] {
  display: none !important;
}

:root {
  --yellow: #ffe600;
  --cyan: #3cf2ff;
  --blue: #2429d4;
  --pale: #ffe98a;
  --red: #ff2b2b;
  --green: #3cf28a;
  --panel: rgba(3, 2, 16, 0.86);
  --body-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #000;
  /* A downward swipe at the top of the page must not pull-to-refresh mid-game. */
  overscroll-behavior-y: contain;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Press Start 2P", monospace;
  color: #fff;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overflow-x: hidden;
}

.arcade {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 12px 26px;
  width: 100%;
  max-width: 480px;
}

.title {
  margin: 0;
  font-size: clamp(18px, 6vw, 28px);
  line-height: 1.2;
  text-align: center;
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255, 230, 0, 0.55);
  letter-spacing: 4px;
}

.title-sub {
  display: inline-block;
  vertical-align: middle;
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(60, 242, 255, 0.5);
}

/* ------------------------------------------------------------------------
   HUD */

.hud {
  --hero: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hud-stats {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 4vw, 26px);
  width: 100%;
}

.hud-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 52px;
}

.hud-label {
  font-size: 8px;
  color: var(--cyan);
  letter-spacing: 1px;
}

.hud-value {
  font-size: 13px;
  color: #fff;
}

.hud-lives {
  display: flex;
  gap: 4px;
  height: 13px;
  align-items: center;
}

.hud-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(420px, 100%);
  padding: 0 2px;
}

.hud-player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.hud-player-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hud-name {
  font-size: 11px;
  line-height: 1.2;
  color: var(--hero);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-tools {
  display: flex;
  gap: 6px;
  flex: none;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--cyan);
  background: #000;
  border: 2px solid var(--cyan);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.icon-button:hover {
  background: var(--cyan);
  color: #000;
}

.icon-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.icon {
  width: 22px;
  height: 22px;
}

/* Each icon button holds both pictures; aria-pressed picks one. */
.icon-button[aria-pressed="true"] .icon-sound-on,
.icon-button[aria-pressed="false"] .icon-sound-off,
.icon-button[aria-pressed="true"] .icon-expand,
.icon-button[aria-pressed="false"] .icon-shrink {
  display: none;
}

#mute-button[aria-pressed="true"] {
  color: #7b80ff;
  border-color: #7b80ff;
}

#mute-button[aria-pressed="true"]:hover {
  background: #7b80ff;
  color: #000;
}

.hud-tilt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.tilt-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.tilt-readout {
  min-width: 4ch;
  font-size: 11px;
  line-height: 1.2;
  text-align: right;
  color: #fff;
}

/* A bowl seen from above: the marble rolls to the low side of the board. */
.tilt-gauge {
  --tilt: var(--green);
  --tilt-glow: rgba(60, 242, 138, 0.45);
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--tilt);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 0 1.5px, transparent 2px),
    radial-gradient(circle, transparent 0 5.5px, rgba(255, 255, 255, 0.12) 6px 6.8px, transparent 7.3px),
    #05051a;
  box-shadow:
    0 0 8px var(--tilt-glow),
    inset 0 0 6px rgba(0, 0, 0, 0.8);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.tilt-gauge[data-level="mid"] {
  --tilt: var(--yellow);
  --tilt-glow: rgba(255, 230, 0, 0.45);
}

.tilt-gauge[data-level="high"] {
  --tilt: var(--red);
  --tilt-glow: rgba(255, 43, 43, 0.5);
}

.tilt-gauge[data-level="thud"] {
  --tilt: var(--red);
  --tilt-glow: rgba(255, 43, 43, 0.95);
  background-color: rgba(255, 43, 43, 0.3);
  transition: none;
}

.tilt-dial {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* North marker, so the turn of the dial shows in first person. */
.tilt-north {
  position: absolute;
  top: 1px;
  left: 50%;
  width: 2px;
  height: 5px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--cyan);
}

.tilt-marble {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 15%, var(--tilt) 55%, rgba(0, 0, 0, 0.6) 100%);
  box-shadow: 0 0 6px var(--tilt-glow);
  will-change: transform;
}

/* Life icons and the hero badge beside the name. Each is a small canvas
   drawn with the hero's own sprite, so a new hero needs no CSS. The global
   canvas rule would stretch them, so they are sized outright. */
.hud-hero-icon {
  display: flex;
  flex: none;
}

.life-icon,
.hud .life-icon {
  flex: none;
  width: 14px;
  height: 12px;
  background: transparent;
}

/* ------------------------------------------------------------------------
   Stage */

.stage {
  position: relative;
  border: 3px solid var(--blue);
  box-shadow: 0 0 18px rgba(36, 41, 212, 0.55);
  line-height: 0;
  width: min(420px, 100%);
  aspect-ratio: 420 / 460;
  background: #000;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

/* Absolute, so the WebGL canvas can stack on top while the stage keeps its
   aspect-ratio box. */
#game-canvas {
  position: absolute;
  inset: 0;
}

.stage canvas[hidden] {
  display: none;
}

/* Swipes on the board steer; they must never pan the page. The panels are
   siblings of the canvases, so they still scroll. */
.stage > canvas {
  touch-action: none;
}

/* DOM version of READY / PAUSED / LOADING for the 3D views. */
.status-banner {
  position: absolute;
  top: 63%;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 24px);
  padding: 9px 14px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--pale);
  font-size: clamp(11px, 3.6vw, 16px);
  line-height: 1.3;
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.toast {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.92);
  border: 2px solid var(--cyan);
  color: var(--cyan);
  font-size: 8px;
  line-height: 1.7;
  text-align: center;
  pointer-events: none;
  animation: toast-in 0.18s ease-out;
}

/* Rocket launch: the big captions, and the white flash that hides the
   change of world. Both sit over the board and never take clicks. */
.launch-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18%;
  pointer-events: none;
}

.launch-caption {
  margin: 0;
  max-width: calc(100% - 24px);
  padding: 10px 14px;
  font-size: clamp(12px, 3.6vw, 20px);
  line-height: 1.4;
  letter-spacing: 2px;
  text-align: center;
  color: var(--yellow);
  background: rgba(0, 0, 0, 0.55);
  text-shadow:
    0 0 10px rgba(255, 230, 0, 0.7),
    0 0 24px rgba(255, 120, 40, 0.5);
}

.launch-caption.is-count {
  padding: 6px 22px;
  font-size: clamp(40px, 16vw, 96px);
  line-height: 1.1;
  color: #fff;
  background: transparent;
  text-shadow:
    0 0 14px rgba(120, 220, 255, 0.9),
    0 0 40px rgba(60, 140, 255, 0.7);
}

.launch-caption.pop {
  animation: launch-pop 0.45s ease-out;
}

@keyframes launch-pop {
  from {
    opacity: 0;
    transform: scale(1.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.launch-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  background: radial-gradient(circle at 50% 40%, #ffffff 0 35%, #dff0ff 100%);
  pointer-events: none;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ------------------------------------------------------------------------
   Overlay panels */

.overlay-panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  background: var(--panel);
  text-align: center;
  line-height: 1.9;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* The content is centred with auto margins instead of justify-content, so a
   panel taller than the stage scrolls from its top instead of clipping it. */
.overlay-panel.start,
.overlay-panel.end {
  justify-content: flex-start;
  padding: 12px 10px;
}

/* The start panel leaves the 420px board frame and fills the window, so the
   pickers can use the full width. The game shows faintly through it. It sits
   under the toast (z-index 30) so start-up messages still show. */
.overlay-panel.start {
  position: fixed;
  z-index: 20;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(120% 60% at 50% -12%, rgba(36, 41, 212, 0.5), transparent 62%),
    radial-gradient(90% 50% at 50% 115%, rgba(60, 242, 255, 0.14), transparent 60%),
    rgba(2, 1, 12, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.setup-form,
.end-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: auto 0;
  line-height: 1.5;
}

/* Gaps shrink with the window height, so the whole form, START included,
   fits one screen on laptops and desktops. */
.setup-form {
  gap: clamp(8px, 1.8vh, 18px);
  width: min(1280px, 100%);
}

/* Title and name share one line when there is room. */
.start-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 48px;
  width: 100%;
}

.start-title {
  margin: 0;
  font-size: clamp(20px, min(4vw, 5vh), 36px);
  line-height: 1.2;
  letter-spacing: 4px;
  color: var(--yellow);
  text-shadow:
    0 0 12px rgba(255, 230, 0, 0.6),
    0 0 34px rgba(255, 160, 0, 0.3);
}

.start-title-sub {
  display: inline-block;
  vertical-align: middle;
  font-size: clamp(8px, 1.3vw, 13px);
  letter-spacing: 3px;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(60, 242, 255, 0.5);
}

/* Section titles with a line running out to each side. */
.picker-label {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-size: clamp(8px, 1.1vw, 11px);
}

.picker-label::before,
.picker-label::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(60, 242, 255, 0.55));
}

.picker-label::after {
  background: linear-gradient(90deg, rgba(60, 242, 255, 0.55), transparent);
}

.start-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 40px;
  width: 100%;
}

/* ------------------------------------------------------------------------
   Picker carousels (src/carousel.ts). The script counts how many cards fit
   from --card-min and --max-visible and writes --visible. */

.carousel {
  --arrow-room: 0px;
  position: relative;
  width: 100%;
  padding: 0 var(--arrow-room);
}

.picker-track {
  --gap: 10px;
  --card-min: 140px;
  --max-visible: 6;
  --visible: 2;
  --fade: 34px;
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  gap: var(--gap);
  /* Room for the selected card's glow and lift, which the scroll box would clip. */
  padding: 6px 6px 10px;
  scroll-padding-inline: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.picker-track::-webkit-scrollbar {
  display: none;
}

.picker-track > * {
  scroll-snap-align: start;
}

/* Fewer cards than fit: keep their size and centre the row. */
.carousel:not(.is-scrollable) .picker-track {
  justify-content: center;
}

/* Cards fade out at an edge that has more behind it. */
.carousel.can-next .picker-track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
}

.carousel.can-prev .picker-track {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade));
}

.carousel.can-prev.can-next .picker-track {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}

.carousel-arrow {
  position: absolute;
  top: calc(50% - 12px);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  transform: translateY(-50%);
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: rgba(2, 1, 12, 0.88);
  color: var(--cyan);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(60, 242, 255, 0.35);
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.carousel-arrow.prev {
  left: 0;
}

.carousel-arrow.next {
  right: 0;
}

.carousel.is-scrollable .carousel-arrow {
  display: inline-flex;
}

.carousel-arrow:hover:not(:disabled) {
  background: var(--cyan);
  color: #000;
}

.carousel-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.carousel-dots {
  display: none;
  justify-content: center;
  gap: 7px;
  margin-top: -4px;
  line-height: 0;
}

.carousel.is-scrollable .carousel-dots {
  display: flex;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.carousel-dot.on {
  background: var(--cyan);
  box-shadow: 0 0 5px var(--cyan);
}

.overlay-title {
  margin: 0;
  font-size: 13px;
  color: var(--yellow);
}

.overlay-hint {
  margin: 0;
  font-size: 7px;
  line-height: 1.8;
  color: var(--cyan);
}

.field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  width: 100%;
}

.field-label {
  margin: 0;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--cyan);
}

/* 16px keeps iOS from zooming into the field on focus. */
.name-input {
  width: min(240px, 100%);
  min-height: 44px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  color: var(--yellow);
  caret-color: var(--yellow);
  background: #000;
  border: 2px solid var(--blue);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.name-input::placeholder {
  color: rgba(255, 230, 0, 0.35);
}

.name-input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 10px rgba(255, 230, 0, 0.4);
}

/* Real radio inputs stay focusable for the keyboard but are drawn by their labels. */
.hero-radio,
.segment-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* The hero row: see "Picker carousels". Hero cards are wide and short: the
   portrait sits beside the name and stats, the trait runs across the bottom. */
.hero-grid {
  --card-min: 236px;
  --max-visible: 5;
}

.hero-card {
  --hero: var(--yellow);
  --hero-accent: #ff9d00;
  --hero-glow: #fff27a;
  --portrait: 64px;
  position: relative;
  display: grid;
  grid-template-columns: var(--portrait) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas:
    "portrait name"
    "portrait tagline"
    "portrait stats"
    "trait trait"
    "text text";
  align-content: start;
  column-gap: 12px;
  row-gap: 4px;
  min-width: 0;
  padding: 10px 12px 11px;
  text-align: left;
  border: 2px solid rgba(36, 41, 212, 0.9);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(22, 17, 74, 0.9), rgba(5, 4, 24, 0.94));
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.hero-card:hover {
  border-color: var(--hero-accent);
  transform: translateY(-2px);
}

.hero-card.is-selected {
  border-color: var(--hero);
  background: linear-gradient(180deg, rgba(40, 32, 110, 0.95), rgba(8, 6, 32, 0.95));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--hero) 20%, rgba(22, 17, 74, 0.95)),
    rgba(5, 4, 24, 0.95) 70%
  );
  box-shadow:
    0 0 0 1px var(--hero),
    0 0 16px var(--hero);
  transform: translateY(-3px);
}

.hero-card:has(.hero-radio:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The global canvas rule would stretch these to the card; size them outright.
   The soft disc behind is the hero's own glow colour. */
.hero-card .hero-portrait {
  grid-area: portrait;
  align-self: center;
  width: var(--portrait);
  height: var(--portrait);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 68%);
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-glow) 26%, transparent), transparent 68%);
}

.hero-name {
  grid-area: name;
  align-self: end;
  font-size: 9px;
  color: var(--hero);
  overflow-wrap: anywhere;
}

.hero-tagline {
  grid-area: tagline;
  font-size: 7px;
  line-height: 1.6;
  color: var(--cyan);
}

/* Its parts go straight into the card's grid; the span itself stays as the
   text the radio's aria-describedby points at. */
.hero-detail {
  display: contents;
}

.hero-stats {
  grid-area: stats;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  max-width: 150px;
  margin-top: 3px;
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.stat-label {
  font-size: 7px;
  color: #9aa0ff;
}

.pips {
  display: flex;
  gap: 2px;
}

.pip {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.14);
}

.pip.on {
  background: var(--hero);
  box-shadow: 0 0 3px var(--hero);
}

.trait-name {
  grid-area: trait;
  margin-top: 5px;
  padding-top: 7px;
  border-top: 1px solid rgba(154, 160, 255, 0.2);
  font-size: 7px;
  color: var(--hero-accent);
}

/* Trait sentences use a plain font; the pixel font is unreadable at this size. */
.trait-text {
  grid-area: text;
  font-family: var(--body-font);
  font-size: 11px;
  line-height: 1.35;
  color: #c9ccf5;
}

/* Board picker: a small map preview beside the name. */
.board-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* The board row: see "Picker carousels". Board cards are compact: a small
   map beside the name and tagline. */
.board-grid {
  --card-min: 200px;
  --max-visible: 6;
}

.board-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px;
  text-align: left;
  border: 2px solid rgba(36, 41, 212, 0.9);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(22, 17, 74, 0.9), rgba(5, 4, 24, 0.94));
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.board-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
}

.board-card.is-selected {
  border-color: var(--yellow);
  background: linear-gradient(180deg, rgba(58, 50, 40, 0.95), rgba(5, 4, 24, 0.95) 70%);
  box-shadow:
    0 0 0 1px var(--yellow),
    0 0 16px rgba(255, 230, 0, 0.55);
  transform: translateY(-3px);
}

.board-card:has(.board-radio:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.board-card .board-preview {
  flex: none;
  width: 56px;
  height: 61px;
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 0 10px rgba(36, 41, 212, 0.45);
}

.board-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.board-name {
  font-size: 9px;
  color: var(--yellow);
  overflow-wrap: anywhere;
}

.board-tagline {
  font-family: var(--body-font);
  font-size: 11px;
  line-height: 1.35;
  color: #c9ccf5;
}

.segmented {
  display: flex;
  gap: 6px;
}

.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--cyan);
  color: var(--cyan);
  font-size: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.segment-input:checked + .segment {
  background: var(--cyan);
  color: #000;
}

.segment-input:focus-visible + .segment {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.segment-input:disabled + .segment {
  opacity: 0.3;
  cursor: not-allowed;
}

.picker-note {
  margin: -4px 0 0;
  font-size: 7px;
  color: #ff9d9d;
}

.start-button {
  min-width: 200px;
  min-height: 48px;
  font-size: 14px;
  box-shadow: 0 0 12px rgba(255, 230, 0, 0.35);
  animation: start-glow 1.6s ease-in-out infinite;
}

@keyframes start-glow {
  50% {
    box-shadow: 0 0 22px rgba(255, 230, 0, 0.7);
  }
}

/* End panel */

.end-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.card-frame {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 140px;
  border: 2px solid var(--blue);
  background: #05030f;
  box-shadow: 0 0 12px rgba(60, 242, 255, 0.25);
}

.card-frame[data-format="square"] {
  width: 140px;
}

.card-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-status {
  margin: 0;
  padding: 6px;
  font-size: 6px;
  line-height: 1.7;
  color: var(--cyan);
}

.end-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  text-align: left;
}

.new-high {
  margin: 0;
  padding: 5px 7px;
  font-size: 9px;
  color: #000;
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(255, 230, 0, 0.6);
  animation: new-high-blink 0.9s step-end infinite;
}

@keyframes new-high-blink {
  50% {
    background: #fff27a;
  }
}

.end-name {
  margin: 0;
  font-size: 12px;
  color: var(--hero, #fff);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.end-score {
  margin: 0;
  font-size: 9px;
  color: var(--cyan);
}

.format-toggle {
  display: flex;
  gap: 6px;
}

.toggle-button {
  min-width: 52px;
  min-height: 40px;
  font-family: inherit;
  font-size: 9px;
  color: var(--cyan);
  background: #000;
  border: 2px solid var(--cyan);
  cursor: pointer;
}

.toggle-button[aria-pressed="true"] {
  color: #000;
  background: var(--cyan);
}

.toggle-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.end-actions .arcade-button {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 10px;
}

/* ------------------------------------------------------------------------
   Buttons */

.arcade-button {
  font-family: inherit;
  font-size: 12px;
  padding: 12px 20px;
  background: #000;
  color: var(--yellow);
  border: 2px solid var(--yellow);
  cursor: pointer;
  letter-spacing: 2px;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.arcade-button.small,
.arcade-button.alt {
  color: var(--cyan);
  border-color: var(--cyan);
}

.arcade-button.small {
  font-size: 8px;
  padding: 9px 11px;
}

.arcade-button:hover:not(:disabled) {
  background: var(--yellow);
  color: #000;
}

.arcade-button.small:hover:not(:disabled),
.arcade-button.alt:hover:not(:disabled) {
  background: var(--cyan);
  color: #000;
}

.arcade-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.arcade-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Its two rows sit in the page column as before; full screen puts them side by side. */
.play-bar {
  display: contents;
}

.view-switcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.view-button {
  min-width: 60px;
  min-height: 44px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--yellow);
  background: #000;
  border: 2px solid var(--yellow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.view-button[aria-pressed="true"] {
  color: #000;
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(255, 230, 0, 0.45);
}

.view-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.view-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.view-hint {
  margin-left: 4px;
  font-size: 7px;
  color: #7b80ff;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.dpad {
  display: none;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 56px);
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
}

.dpad-key {
  font-family: inherit;
  font-size: 14px;
  color: var(--yellow);
  background: rgba(36, 41, 212, 0.25);
  border: 2px solid var(--blue);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.dpad-key:active {
  background: var(--blue);
  color: #000;
}

.dpad-key.up {
  grid-area: 1 / 2;
}
.dpad-key.left {
  grid-area: 2 / 1;
}
.dpad-key.down {
  grid-area: 2 / 2;
}
.dpad-key.right {
  grid-area: 2 / 3;
}

.dpad-caption {
  display: none;
  margin: 0;
  font-size: 7px;
  line-height: 1.6;
  letter-spacing: 1px;
  text-align: center;
  color: var(--cyan);
}

/* Touch devices get the on-screen pad; mouse/keyboard users do not. */
@media (hover: none), (pointer: coarse) {
  .dpad {
    display: grid;
  }
  .dpad-caption {
    display: block;
  }
}

/* The key hint means nothing without a keyboard. */
@media (hover: none) and (pointer: coarse) {
  .view-hint {
    display: none;
  }
}

/* ------------------------------------------------------------------------
   Sizes */

@media (max-width: 380px) {
  .hud-value {
    font-size: 11px;
  }
  .trait-text {
    font-size: 10px;
  }
  .picker-track {
    --gap: 8px;
  }
}

/* Phones: two small boards per row, one wide hero. */
@media (max-width: 520px) {
  .board-grid {
    --card-min: 148px;
  }
  .board-card {
    gap: 8px;
    padding: 8px;
  }
  .board-card .board-preview {
    width: 44px;
    height: 48px;
  }
  .hero-grid {
    --card-min: 220px;
  }
}

/* Tablets and up: arrows beside the rows, and a little more room. The count
   of cards shown follows the width (src/carousel.ts). */
@media (min-width: 700px) {
  .carousel {
    --arrow-room: 46px;
  }
  .picker-track {
    --gap: 14px;
    --fade: 48px;
  }
  .hero-grid {
    --card-min: 250px;
  }
  .hero-card {
    --portrait: 76px;
    column-gap: 14px;
    padding: 12px 14px 13px;
  }
  .board-card .board-preview {
    width: 64px;
    height: 70px;
  }
  .hero-name,
  .board-name {
    font-size: 10px;
  }
  .hero-tagline {
    font-size: 8px;
  }
  .name-input {
    width: 300px;
  }
  .start-button {
    min-width: 240px;
    min-height: 52px;
    font-size: 15px;
  }
}

@media (min-width: 1200px) {
  .hero-grid {
    --card-min: 270px;
  }
  .trait-text,
  .board-tagline {
    font-size: 12px;
  }
}

/* Short windows (a laptop, a phone on its side): tighter cards so both rows
   and START fit one screen. */
@media (max-height: 760px) {
  .hero-card {
    --portrait: 58px;
    padding: 8px 12px 9px;
  }
  .board-card {
    padding: 6px 12px;
  }
  .board-card .board-preview {
    width: 50px;
    height: 55px;
  }
  .trait-text,
  .board-tagline {
    font-size: 11px;
  }
  .trait-name {
    margin-top: 3px;
    padding-top: 5px;
  }
  .start-button {
    min-height: 46px;
  }
}

@media (max-height: 600px) {
  .start-title {
    font-size: 18px;
  }
  .overlay-panel.start .overlay-hint {
    display: none;
  }
  .hero-card {
    --portrait: 48px;
  }
  .picker-track {
    padding-top: 4px;
    padding-bottom: 8px;
  }
}

/* Touch screens swipe the rows; overlaid arrows would only cover the cards. */
@media (hover: none) and (pointer: coarse) {
  .carousel {
    --arrow-room: 0px;
  }
  .carousel.is-scrollable .carousel-arrow {
    display: none;
  }
}

/* ------------------------------------------------------------------------
   Full screen: the board takes all the room the HUD and buttons leave.
   --fs-chrome is the height of everything on the page that is not the board. */

.is-fullscreen .arcade {
  --fs-chrome: 168px;
  --fs-height: 100vh;
  --stage-w: max(240px, min(calc(100vw - 24px), calc((var(--fs-height) - var(--fs-chrome)) * 420 / 460)));
  justify-content: center;
  gap: 8px;
  max-width: none;
  min-height: var(--fs-height);
  padding: 8px 12px;
}

/* Mobile browser bars come and go; dvh tracks the height actually shown. */
@supports (height: 100dvh) {
  .is-fullscreen .arcade {
    --fs-height: 100dvh;
  }
}

/* Room for the on-screen pad under the board. */
@media (hover: none), (pointer: coarse) {
  .is-fullscreen .arcade {
    --fs-chrome: 320px;
  }
}

.is-fullscreen .title {
  display: none;
}

.is-fullscreen .stage,
.is-fullscreen .hud-meta {
  width: var(--stage-w);
}

.is-fullscreen .play-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  width: var(--stage-w);
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .start-button,
  .new-high,
  .launch-caption.pop {
    animation: none;
  }
  .hero-card,
  .board-card,
  .carousel-arrow,
  .carousel-dot,
  .tilt-gauge,
  .arcade-button,
  .icon-button {
    transition: none;
  }
  .hero-card:hover,
  .hero-card.is-selected,
  .board-card:hover,
  .board-card.is-selected {
    transform: none;
  }
}