:root {
  --ink: #f3e6d0;
  --muted: #b8a48a;
  --accent: #c45c26;
  --cell: #0a0806;
  --win: #e8b84a;
  --border: #5a4a38;
  --panel: #2a2118;
  --meter-label: #f0c43a;
  --meter-value: #ffffff;
  /* bg.png design space */
  --art-w: 500;
  --art-h: 889;
  /* reel box (13,566)–(486,820) as % of art */
  --reel-l: 2.6%;
  --reel-t: 63.667%;
  --reel-w: 94.6%;
  --reel-h: 28.571%;
  /* footer meter bar (~848–889) */
  --meter-top: 95.4%;
  --meter-h: 4.2%;
  font-family: "Helvetica Compressed", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
}

@font-face {
  font-family: "Kanban Std";
  src: url("/assets/hap/fonts/KanbanStd-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Compressed";
  src: url("/assets/hap/fonts/HelveticaCompressed.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.sym,
.hs-sym {
  position: relative;
  container-type: size;
}

.ball-value {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-sizing: border-box;
  max-width: 78%;
  overflow: hidden;
  font-family: "Kanban Std", "Bahnschrift", sans-serif;
  /* Fit inside the ball: width-based, then step down by digit count */
  font-size: min(22cqw, 3.4vmin, 1.25rem);
  font-weight: 400;
  letter-spacing: 0;
  color: #0a0604;
  text-shadow: none;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}

.ball-value[data-len="4"] {
  font-size: min(18cqw, 2.9vmin, 1.05rem);
}

.ball-value[data-len="5"] {
  font-size: min(15cqw, 2.4vmin, 0.9rem);
}

.ball-value[data-len="6"] {
  font-size: min(12.5cqw, 2vmin, 0.75rem);
}

.ball-value[data-len="7"],
.ball-value[data-len="8"],
.ball-value[data-len="9"] {
  font-size: min(10.5cqw, 1.7vmin, 0.65rem);
}

.ball-value-currency {
  font-size: 0.72em;
  vertical-align: 0.08em;
  margin-right: 0.02em;
}

.ball-value-amount {
  font-size: 1em;
}

.hs-sym .ball-value {
  top: 54%;
  max-width: 82%;
  font-size: min(24cqw, 3vmin, 1.1rem);
}

.hs-sym .ball-value[data-len="4"] {
  font-size: min(20cqw, 2.6vmin, 0.95rem);
}

.hs-sym .ball-value[data-len="5"] {
  font-size: min(16cqw, 2.2vmin, 0.8rem);
}

.hs-sym .ball-value[data-len="6"] {
  font-size: min(13.5cqw, 1.85vmin, 0.7rem);
}

.hs-sym .ball-value[data-len="7"],
.hs-sym .ball-value[data-len="8"],
.hs-sym .ball-value[data-len="9"] {
  font-size: min(11cqw, 1.55vmin, 0.6rem);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #0a0604;
  color: var(--ink);
}

.app {
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.5rem 0.5rem 1.5rem;
}

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 500 / 889;
  max-height: min(92vh, 920px);
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
  container-type: inline-size;
  container-name: stage;
}

.stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  display: block;
}

.stage-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.reel-slot {
  position: absolute;
  left: var(--reel-l);
  top: var(--reel-t);
  width: var(--reel-w);
  height: var(--reel-h);
  z-index: 2;
}

.reel-window[hidden],
.hs-window[hidden] {
  display: none !important;
}

.reel-window,
.hs-window {
  width: 100%;
  height: 100%;
  /* Art already frames the window — keep our layer clean */
  background: transparent;
  border: none;
  padding: 0;
  gap: 1px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  box-sizing: border-box;
}

.reel-window {
  grid-template-rows: 1fr;
}

.hs-window {
  grid-template-rows: repeat(3, 1fr);
}

.reel-col {
  position: relative;
  overflow: hidden;
  background: #050403;
  height: 100%;
  box-sizing: border-box;
}

.reel-band {
  will-change: transform;
}

.sym {
  height: var(--sym-h, 33.333%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  flex-shrink: 0;
}

.sym img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.sym-fallback {
  font-size: 0.55rem;
  text-transform: uppercase;
  color: var(--win);
  text-align: center;
  word-break: break-all;
}

.hs-cell-reel {
  position: relative;
  overflow: hidden;
  background: #050403;
  height: 100%;
  box-sizing: border-box;
}

.hs-cell-reel.locked {
  box-shadow: inset 0 0 0 1px rgba(232, 184, 74, 0.55);
  background: #2a1c0c;
}

.hs-cell-reel.empty-cell {
  background: #050403;
}

.hs-band {
  will-change: transform;
}

.hs-sym {
  height: var(--sym-h, 100%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  flex-shrink: 0;
}

.hs-sym img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.hs-sym.dim {
  filter: brightness(0.35) saturate(0.5);
  opacity: 0.85;
}

.hs-sym.is-ball {
  filter: none;
  opacity: 1;
}

/* Feature banners over the art, above the reel */
.phase {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 58%;
  z-index: 4;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  min-height: 1.6em;
  pointer-events: none;
  text-shadow: 0 1px 3px #000;
}

.phase.is-idle {
  opacity: 0;
}

.phase[data-mode="hs"] {
  color: #ffd27a;
  background: rgba(58, 42, 18, 0.85);
  border-color: #e8b84a;
  opacity: 1;
}

.phase[data-mode="fg"] {
  color: #9fd4ff;
  background: rgba(26, 40, 56, 0.85);
  border-color: #5a8ab8;
  opacity: 1;
}

.respins {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 61.2%;
  z-index: 4;
  text-align: center;
  color: var(--win);
  font-size: 0.8rem;
  min-height: 1em;
  pointer-events: none;
  text-shadow: 0 1px 3px #000;
}

/* Footer HUD — sit in the black meter bar, below the reel frame */
.hud-meters {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--meter-top);
  height: var(--meter-h);
  z-index: 3;
  display: grid;
  grid-template-columns: 0.85fr 1.55fr 0.95fr 0.95fr;
  align-items: center;
  column-gap: 0.35rem;
  padding: 0 3.5% 0 3%;
  box-sizing: border-box;
  /* Mask baked-in demo numbers on the art */
  background: #000;
  pointer-events: none;
}

.hud-meter {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.28em;
  min-width: 0;
  line-height: 1;
}

.hud-label {
  flex: 0 0 auto;
  color: var(--meter-label);
  font-family: "Helvetica Compressed", "Arial Narrow", sans-serif;
  font-size: clamp(0.55rem, 2.6cqw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: none;
}

.hud-value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--meter-value);
  font-family: "Helvetica Compressed", "Arial Narrow", sans-serif;
  font-size: clamp(0.95rem, 5.2cqw, 1.55rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.hud-lines .hud-value {
  font-size: clamp(0.8rem, 4.2cqw, 1.2rem);
}

.hud-credit .hud-value {
  font-size: clamp(1.05rem, 5.6cqw, 1.7rem);
}

/* Controls live under the cabinet art */
.controls {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 0.45rem;
  width: 100%;
  max-width: inherit;
  margin: 0.65rem auto 0;
  padding: 0 0.15rem;
  box-sizing: border-box;
}

.controls button {
  appearance: none;
  border: 1px solid #8a6a30;
  background: rgba(40, 24, 10, 0.92);
  color: #ffe8b0;
  padding: 0.7rem 0.4rem;
  font-family: "Helvetica Compressed", "Arial Narrow", sans-serif;
  font-size: clamp(0.85rem, 3.5vw, 1.05rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.controls button#spin {
  background: rgba(180, 70, 20, 0.95);
  border-color: #e09040;
  font-size: clamp(1rem, 4.2vw, 1.25rem);
  padding: 0.85rem 0.4rem;
}

.controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.status {
  margin: 0.75rem 0.25rem;
  font-size: 0.85rem;
  font-family: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
}

.meta {
  color: var(--muted);
  font-size: 0.72rem;
  margin: 0.15rem 0;
}

.meta code {
  color: var(--ink);
  word-break: break-all;
}

.debug {
  margin: 0.5rem 0.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-family: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
}

.debug summary {
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
}

.panel h2 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.06em;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--ink);
}