:root {
  /* Numbers: Noto Serif TC Black has even, heavy lining figures (Cinzel's old-style digits read poorly) */
  --num-font: 'Noto Serif TC', 'PingFang TC', 'Microsoft JhengHei', serif;
  --gold: #f6c955;
  --gold-deep: #b9771c;
  --ink: #0d0920;
  --night: #170f38;
  --storm: #3b2a8a;
  --bolt: #8fe3ff;
  --text: #f4ecd8;
  --muted: #b8acd6;
  --cell: clamp(40px, min(calc((60vw - 64px) / 6.674), calc((100dvh - 125px) / 5.917)), 175px);
  --speed: 1;
  font-family: 'Noto Serif TC', 'PingFang TC', 'Microsoft JhengHei', serif;
  color: var(--text);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}
/* Solid colour only on <html> (painted on the canvas, beneath everything). A body background would be
   painted above the z-index:-2 .backdrop and hide the underwater background image. */
html { background: #04122b; }
body { background: transparent; }

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.45; }

.backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(3, 10, 28, 0.45) 100%),
    url('/.netlify/images?url=/img/bg.jpg&w=1920&fm=webp') center / cover no-repeat,
    #04122b;
  z-index: -2;
}

.flash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(190, 235, 255, 0.85), rgba(120, 160, 255, 0.25) 60%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.flash.on { animation: flash 0.5s ease-out; }
@keyframes flash { 0% { opacity: 0.9; } 30% { opacity: 0.2; } 45% { opacity: 0.7; } 100% { opacity: 0; } }

/* ---------- Layout ---------- */
.stage {
  min-height: 100dvh;
  display: grid;
  /* Equal side columns keep the board exactly centred on screen */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    'left board right'
    'controls controls controls'
    'note note note';
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.25rem 0 0;
  position: relative;
}

/* Back to the KAS電子 lobby */
.lobby-link { position: absolute; z-index: 3; top: 0.4rem; left: 0.6rem; padding: 0.15rem 0.7rem; border-radius: 999px; border: 1px solid rgba(246, 201, 85, 0.5); background: rgba(3, 11, 29, 0.55); color: #f6dc8c; font-size: 0.8rem; text-decoration: none; }
.lobby-link:hover { background: rgba(246, 201, 85, 0.15); }

/* The title stays for screen readers and SEO; the banner above the board replaces it visually. */
.title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.title h1 { margin: 0; }

.side { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; }
/* Centred in the left column with roomier spacing between the medallion, buy button and panels */
.side-left { grid-area: left; justify-self: center; width: 230px; gap: 1.6rem; }
/* Character anchored to the bottom-right corner of the screen (as in the reference art), sized to the
   space right of the board so the trident never overlaps the frame. The hand is allowed to run off the edge. */
.side-right { position: fixed; right: -3vw; bottom: 0; z-index: 1; pointer-events: none; }

/* ---------- Board ---------- */
.board-wrap { grid-area: board; display: flex; flex-direction: column; align-items: center; }

/* Board frame artwork (frame.png). The board sits where the art's column dividers fall:
   in cell units the frame is 6.674 × 5.917 cells, with the board inset 0.337 / 0.736 / 0.337 / 0.181. */
.board-frame {
  position: relative;
  width: calc(var(--cell) * 6.674);
  height: calc(var(--cell) * 5.917);
  padding: calc(var(--cell) * 0.736) calc(var(--cell) * 0.337) calc(var(--cell) * 0.181);
}
/* The frame art and its shadow live on a pseudo-element: a filter on .board-frame itself would make the browser
   re-blur the whole frame on every frame of a tumble */
.board-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/.netlify/images?url=/img/frame.png&w=1208&fm=webp&q=75') center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 30px rgba(90, 150, 255, 0.25));
  pointer-events: none;
}

/* 消除贏分 sits inside the banner plate painted at the top of the frame */
.tumble-banner {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  width: 48%;
  height: calc(var(--cell) * 0.72);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(var(--cell) * 0.04);
  text-align: center;
  pointer-events: none;
}
.tumble-label { display: block; font-weight: 900; font-size: calc(var(--cell) * 0.15); letter-spacing: 0.2em; padding-left: 0.2em; color: #f2ecdc; line-height: 1.2; }
.tumble-banner strong {
  display: block;
  font-family: var(--num-font);
  font-size: calc(var(--cell) * 0.3);
  line-height: 1.05;
  background: linear-gradient(180deg, #fff6d0 0%, #f6c955 50%, #c27f1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #3a1f06) drop-shadow(0 0 8px rgba(246, 201, 85, 0.4));
  font-variant-numeric: tabular-nums;
}
.tumble-banner.bump strong { animation: charged 0.45s ease-out; }

.board {
  position: relative;
  width: calc(var(--cell) * 6);
  height: calc(var(--cell) * 5);
  overflow: hidden;
  border-radius: 8px;
}

.cell {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell)));
  will-change: transform;
}
.cell.moving { transition: transform calc(var(--dur, 380ms) * var(--speed)) cubic-bezier(0.33, 1.25, 0.6, 1); }
.cell.falling { transition: transform calc(320ms * var(--speed)) cubic-bezier(0.55, 0, 1, 0.45); }
.cell img {
  position: relative;
  z-index: 1;
  width: 88%;
  height: 88%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.cell.win img { animation: winPulse calc(620ms * var(--speed)) ease-in-out; }
.cell.win::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 6%;
  border-radius: 14px;
  background: radial-gradient(circle, rgba(255, 230, 140, 0.55), transparent 70%);
  animation: glow calc(620ms * var(--speed)) ease-in-out;
}
.cell.pop img, .cell.pop .orb-ball { animation: pop calc(240ms * var(--speed)) ease-in forwards; }
.cell.scatter-hit img { animation: scatterHit 0.9s ease-in-out infinite; }

@keyframes winPulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-3deg); } 70% { transform: scale(1.12) rotate(2deg); } }
@keyframes glow { from { opacity: 0; } 40% { opacity: 1; } to { opacity: 0.6; } }
@keyframes pop { to { transform: scale(0.1) rotate(25deg); opacity: 0; } }
@keyframes scatterHit { 50% { transform: scale(1.15); } }

/* Multiplier orbs: trident-framed emblem art, one PNG per colour tier, value drawn on the sphere */
.orb-ball {
  position: relative;
  width: 104%;
  height: 104%;
  flex: none;
  font-family: var(--num-font);
  font-weight: 900;
  font-size: calc(var(--cell) * 0.25);
  /* Glow is a gradient layer rather than a drop-shadow filter, which is costly on moving elements */
  background:
    var(--orb) center / contain no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--glow) 55%, transparent) 30%, transparent 64%) center / 100% 100% no-repeat;
  animation: orbIdle 2.4s ease-in-out infinite;
}
.orb-ball > span {
  position: absolute;
  left: 50.6%;
  top: 52.2%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffe58a;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe07a 40%, #e9a72a 70%, #9a5a0c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #3a1f06) drop-shadow(0 0 3px rgba(0, 0, 0, 0.9));
}
.tier-green { --orb: url('/.netlify/images?url=/img/orb-green.png&w=160&fm=webp&q=70'); --glow: #6dffc4; }
.tier-blue { --orb: url('/.netlify/images?url=/img/orb-blue.png&w=160&fm=webp&q=70'); --glow: #7fb8ff; }
.tier-purple { --orb: url('/.netlify/images?url=/img/orb-purple.png&w=160&fm=webp&q=70'); --glow: #e58aff; }
.tier-red { --orb: url('/.netlify/images?url=/img/orb-red.png&w=160&fm=webp&q=70'); --glow: #ff8a5a; }
.orb-ball.long { font-size: calc(var(--cell) * 0.19); }
.orb-ball.charged { animation: charged 0.5s ease-out; }
@keyframes orbIdle { 50% { transform: scale(1.06); } }
@keyframes charged { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.35); filter: brightness(2.2); } 100% { transform: scale(1); filter: brightness(1); } }

.bolts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}
.bolts polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; animation: boltFade 0.45s ease-out forwards; }
@keyframes boltFade { 0% { opacity: 1; } 60% { opacity: 0.9; } 100% { opacity: 0; } }

.win-float {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
  font-family: var(--num-font);
  font-weight: 900;
  font-size: calc(var(--cell) * 0.34);
  color: #fff6c9;
  text-shadow: 0 0 10px #ffb400, 0 3px 0 #6b3a00;
  pointer-events: none;
  animation: floatUp calc(900ms * var(--speed)) ease-out forwards;
  white-space: nowrap;
}
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }

.toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 4;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 22, 90, 0.95), rgba(15, 8, 40, 0.95));
  border: 2px solid var(--gold);
  box-shadow: 0 0 24px rgba(246, 201, 85, 0.5);
  font-weight: 900;
  font-size: clamp(0.9rem, 2.2vw, 1.4rem);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast .x { color: var(--bolt); }

/* ---------- Side ---------- */
/* Character: the body plus an arm-and-trident layer of the same size, so only the arm moves */
.hero {
  position: relative;
  width: min(calc((100vw - var(--cell) * 6.674) / 2 + 3vw - 1.5rem), calc(94dvh * 0.833));
  aspect-ratio: 833 / 1000;
  animation: breathe 4s ease-in-out infinite;
}
.thor, .hero-arm img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(143, 227, 255, 0.35)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.7));
}
/* Pivots at the elbow (fractions of hero.png) */
.hero-arm { position: absolute; inset: 0; transform-origin: 26.6% 59.3%; pointer-events: none; }
.hero-arm .hero-trident {
  opacity: 0;
  filter: brightness(1.6) drop-shadow(0 0 14px #9fe8ff) drop-shadow(0 0 30px rgba(143, 227, 255, 0.8));
}
/* Sits on the middle prong tip */
.trident-flare {
  position: absolute;
  left: 9.8%;
  top: 0.4%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 8%, rgba(190, 240, 255, 0.85) 18%, rgba(110, 200, 255, 0.35) 40%, transparent 68%);
  opacity: 0;
}
/* The hand lifts the trident when multiplier orbs land */
.hero.raise .hero-arm { animation: armRaise calc(1100ms * var(--speed)) cubic-bezier(0.3, 1.3, 0.5, 1); }
.hero.raise .hero-trident { animation: tridentGlow calc(1100ms * var(--speed)) ease-out; }
.hero.raise .trident-flare { animation: flare calc(1100ms * var(--speed)) ease-out; }
/* Each lightning strike from the trident tip */
.hero.strike .thor { filter: drop-shadow(0 0 40px rgba(170, 235, 255, 0.95)) brightness(1.2); }
.hero.strike .hero-trident { animation: tridentGlow 0.5s ease-out; }
.hero.strike .trident-flare { animation: flare 0.5s ease-out; }
@keyframes breathe { 50% { transform: translateY(-6px) scale(1.01); } }
@keyframes armRaise {
  0% { transform: none; }
  30%, 70% { transform: translate(2.5%, -17%) rotate(6deg); }
  100% { transform: none; }
}
@keyframes tridentGlow { 0% { opacity: 0; } 25%, 65% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flare { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; transform: scale(1.2); } 60% { opacity: 0.8; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.4); } }

/* Total multiplier medallion */
.medal { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.medal-label {
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: #fff3c4;
  text-shadow: 0 2px 0 #3a1f06, 0 0 6px #000;
}
.medal-ring {
  position: relative;
  width: 220px;
  aspect-ratio: 1;
  background: url('/.netlify/images?url=/img/medal.png&w=340&fm=webp&v=2') center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
/* Sits in the blank centre disc of the emblem artwork */
.medal-ring strong {
  position: absolute;
  left: 49.9%;
  top: 54.2%;
  transform: translate(-50%, -50%);
  font-family: var(--num-font);
  font-weight: 900;
  /* Shrinks for 4+ character values so they stay inside the ring (--len is set by setMedal) */
  font-size: calc(3.8rem * min(1, calc(3.6 / var(--len, 2))));
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff 0%, #fff0a6 35%, var(--gold) 60%, #a35a0c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #3a1f06) drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
}
.mult-val.bump { animation: charged 0.5s ease-out; }
/* The multiplier sign stays small and light so the number carries the emphasis */
.mult-x { font-size: 0.5em; font-weight: 600; margin-left: 0.04em; }
.orb-ball .mult-x { margin: 0 0.03em 0 0; }

/* Display panels on the left: steel-blue chamfered frame, gold inner line, parchment fill and a V emblem on top */
.stone-panel {
  --ch: 10px;
  position: relative;
  width: 100%;
  border: 9px solid transparent;
  padding: 14px 8px 8px;
  background:
    radial-gradient(ellipse at 35% 25%, rgba(255, 255, 255, 0.45), transparent 65%) padding-box,
    linear-gradient(180deg, #ebe5d8 0%, #ddd5c6 55%, #c3b9a7 100%) padding-box,
    linear-gradient(180deg, #4f6d95, #3a5579 60%, #2c4364) border-box;
  clip-path: polygon(var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch));
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
}
/* Gold line with chamfered corners where the frame meets the parchment */
.stone-panel::before {
  --n: 9px;
  content: '';
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: linear-gradient(135deg, #fff1b8, #e3b058 35%, #a8671a 60%, #e3b058 85%, #fff1b8);
  clip-path: polygon(evenodd,
    var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n), var(--n) 0,
    calc(var(--n) + 1px) 3px, 3px calc(var(--n) + 1px), 3px calc(100% - var(--n) - 1px), calc(var(--n) + 1px) calc(100% - 3px), calc(100% - var(--n) - 1px) calc(100% - 3px), calc(100% - 3px) calc(100% - var(--n) - 1px), calc(100% - 3px) calc(var(--n) + 1px), calc(100% - var(--n) - 1px) 3px, calc(var(--n) + 1px) 3px
  );
}
.stone-panel::after {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  width: 64px;
  height: 30px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.5' stop-color='%23e3b058'/%3E%3Cstop offset='1' stop-color='%23a8671a'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234d6b93'/%3E%3Cstop offset='1' stop-color='%23314a6d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 1h70L36 33z' fill='url(%23g)'/%3E%3Cpath d='M8 4.5h56L36 28z' fill='url(%23s)'/%3E%3Cpath d='M36 7l4 7-4 7-4-7z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fs-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
}
.fs-panel strong, .fs-panel span {
  width: 100%;
  text-align: center;
  background: linear-gradient(180deg, #213d66, #12233f);
  color: #8fe3ff;
}
.fs-panel strong { font-family: var(--num-font); font-size: 2.2rem; line-height: 1.15; padding-top: 0.2rem; border-radius: 3px 3px 0 0; }
.fs-panel span { font-weight: 900; letter-spacing: 0.15em; padding-bottom: 0.3rem; font-size: 1.2rem; border-radius: 0 0 3px 3px; }
body.in-fs .fs-panel { display: flex; }
body.in-fs .buy { display: none; }

.history { height: 200px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.history ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.history li {
  display: grid;
  grid-template-columns: 1.4em 1.6em 1fr;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 2px;
  background: linear-gradient(90deg, #233f68, #142640);
  border: 1px solid rgba(227, 176, 88, 0.55);
  color: #fff3c4;
  font-weight: 900;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  animation: rise 0.3s ease-out;
}
.history li img { width: 1.4em; height: 1.4em; object-fit: contain; }
.history li b { text-align: right; color: #fff; }

/* Buy button artwork (btn-buy.png): the title is painted in, the price plate is blank and shows the live price */
.buy {
  --buy-w: 200px;
  position: relative;
  width: var(--buy-w);
  aspect-ratio: 447 / 480;
  border: none;
  padding: 0;
  background: url('/.netlify/images?url=/img/btn-buy.png&w=460&fm=webp') center / contain no-repeat;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
  transition: transform 0.15s, filter 0.15s;
}
.buy:not(:disabled):hover { transform: scale(1.05); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 16px rgba(143, 227, 255, 0.55)) brightness(1.08); }
.buy:not(:disabled):active { transform: scale(0.97); }
.buy-price {
  position: absolute;
  left: 50%;
  top: 67.1%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--num-font);
  font-weight: 900;
  /* Shrinks for long prices so it stays on the plate (--len is set from game.js) */
  font-size: calc(var(--buy-w) * 0.13 * min(1, calc(6.5 / var(--len, 6))));
  line-height: 1;
  color: #0b2350;
  -webkit-text-stroke: 1px rgba(255, 240, 190, 0.6);
  text-shadow: 0 1px 0 rgba(255, 246, 210, 0.7), 0 2px 3px rgba(0, 0, 0, 0.35);
}

/* ---------- Controls ---------- */
.controls {
  grid-area: controls;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem clamp(0.8rem, 3vw, 3rem);
  padding: 0.55rem 1.5rem 1.3rem;
  /* Light veil only, so the underwater background shows through as in the mock-up */
  background: linear-gradient(180deg, transparent, rgba(2, 10, 26, 0.55) 45%, rgba(2, 8, 22, 0.75));
}
.meter { display: flex; flex-direction: column; align-items: center; min-width: 6.5rem; }
.meter-label { font-size: 0.85rem; color: #e6e1d4; letter-spacing: 0.1em; }
.meter strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; color: #fff; line-height: 1.15; }
.meter-win strong { color: #f7a53a; }
.bet-row { display: flex; align-items: center; gap: 0.3rem; }
.bet-arrows { display: flex; flex-direction: column; }
.bet-arrows button {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.55rem;
  line-height: 1.1;
  color: #cfd6e6;
}
.actions { display: flex; align-items: center; gap: 0.9rem; }
.icon-btn {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.55);
  font-size: 1.3rem;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}
.icon-btn:not(:disabled):hover { background: rgba(255, 255, 255, 0.12); }
.icon-btn.active { background: var(--bolt); color: var(--ink); border-color: var(--bolt); box-shadow: 0 0 14px var(--bolt); }
.menu-btn { width: 3.2rem; height: 3.2rem; font-size: 1.5rem; }
.sound-btn { font-size: 1rem; width: 2.2rem; height: 2.2rem; margin-left: -0.6rem; }

/* Button module artwork (btn-*.png, cut from the supplied mock-up). On desktop it sits in the right-hand column,
   below the sea god, centred in the space right of the board; the glyphs stay in the markup for accessibility. */
.actions {
  --side: calc((100vw - var(--cell) * 6.674) / 2);
  --m: min(400px, calc(var(--side) - 3rem));
  position: absolute;
  right: 0;
  bottom: 0.6rem;
  width: var(--side);
  justify-content: center;
  gap: 0;
}
.actions .art-btn {
  width: calc(var(--m) * 0.2);
  height: calc(var(--m) * 0.2);
  border: none;
  border-radius: 50%;
  background: center / contain no-repeat;
  font-size: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
  transition: transform 0.12s, filter 0.15s;
}
/* The generic .icon-btn hover uses the background shorthand, which would reset size/position and leave only the
   art's transparent corner showing, so restate them here */
.actions .art-btn:not(:disabled):hover { background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(143, 227, 255, 0.6)) brightness(1.1); }
.actions .art-btn:not(:disabled):active { transform: scale(0.94); }
#turboBtn { background-image: url('/.netlify/images?url=/img/btn-turbo.png&w=240&fm=webp'); filter: saturate(0.35) brightness(0.7) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
#turboBtn.active { background-color: transparent; box-shadow: none; filter: drop-shadow(0 0 14px var(--bolt)) brightness(1.15); }
#betDown { background-image: url('/.netlify/images?url=/img/btn-minus.png&w=240&fm=webp'); }
#betUp { background-image: url('/.netlify/images?url=/img/btn-plus.png&w=240&fm=webp'); }

.spin-wrap { position: relative; }
.spin {
  width: calc(var(--m) * 0.4);
  height: calc(var(--m) * 0.4);
  border: none;
  border-radius: 50%;
  padding: 0;
  /* The art already has the spin arrow; busy/auto states switch to the blank face and draw on top */
  background: url('/.netlify/images?url=/img/btn-spin.png&w=440&fm=webp&v=3') center / contain no-repeat;
  color: var(--gold);
  font-size: calc(var(--m) * 0.08);
  font-weight: 900;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 16px rgba(246, 201, 85, 0.35));
  display: grid;
  place-items: center;
  transition: transform 0.12s, filter 0.15s;
}
.spin span { display: block; line-height: 1; visibility: hidden; }
.spin:not(:disabled):hover { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(246, 201, 85, 0.6)) brightness(1.08); }
.spin:not(:disabled):active { transform: scale(0.93); }
.spin:disabled { opacity: 1; }
.spin.busy, .spin.auto { background-image: url('/.netlify/images?url=/img/btn-spin-blank.png&w=440&fm=webp&v=3'); }
.spin.busy span, .spin.auto span { visibility: visible; }
/* While a spin plays the button shows a white stop square, as in the original */
.spin.busy span { width: 22%; height: 22%; border-radius: 6px; background: #fff; font-size: 0; }
.spin.auto { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 20px var(--bolt)); }
.spin.auto span { width: auto; height: auto; background: none; text-shadow: 0 0 10px rgba(246, 201, 85, 0.7), 0 2px 0 #3a1f06; }
.auto-btn {
  position: absolute;
  /* Double size, centred on the spin button's upper-right corner (shifted out along the 45° diagonal).
     The art (btn-auto.png) has jewel spikes around the ring, so the box is a little larger than the ring. */
  right: calc(var(--m) * -0.1);
  top: calc(var(--m) * -0.1);
  z-index: 1;
  width: calc(var(--m) * 0.2);
  height: calc(var(--m) * 0.2);
  font-size: 0;
  border: none;
  background: url('/.netlify/images?url=/img/btn-auto.png&w=240&fm=webp') center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  transition: transform 0.12s, filter 0.15s;
}
.auto-btn:not(:disabled):hover { background: url('/.netlify/images?url=/img/btn-auto.png&w=240&fm=webp') center / contain no-repeat; transform: scale(1.06); filter: drop-shadow(0 0 12px rgba(143, 227, 255, 0.6)) brightness(1.1); }
.auto-btn:not(:disabled):active { transform: scale(0.94); }

.bar-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  display: flex;
  justify-content: center;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
#coinInfo { position: absolute; right: 1rem; }


/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(5, 3, 15, 0.72);
  backdrop-filter: blur(3px);
  padding: 1rem;
  animation: fadeIn 0.25s ease-out;
}
.overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } }

.panel {
  position: relative;
  width: min(420px, 100%);
  padding: 1.6rem 1.4rem;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(180deg, #2a1a66, #110a30);
  border: 3px solid var(--gold);
  box-shadow: 0 0 50px rgba(143, 227, 255, 0.35);
  animation: rise 0.35s cubic-bezier(0.3, 1.4, 0.6, 1);
}
.panel h2 { margin: 0 0 0.6rem; color: var(--gold); letter-spacing: 0.15em; }
.panel p { color: var(--muted); }
.panel b { color: var(--gold); }
.panel-gold { background: radial-gradient(circle at 50% 0%, #4b38b5, #140b3a 70%); }
.panel-kicker { font-size: 1.2rem; margin: 0; color: var(--bolt) !important; letter-spacing: 0.3em; }
.panel-big {
  font-family: var(--num-font);
  font-weight: 900;
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  color: var(--gold);
  text-shadow: 0 0 18px rgba(246, 201, 85, 0.7), 0 4px 0 #5a2f05;
  line-height: 1.2;
}
.panel-sub { margin: 0.2rem 0 1rem; font-size: 1.1rem; }
.panel-btns { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem; }
.panel-wide { width: min(760px, 100%); text-align: left; }
@keyframes rise { from { transform: translateY(30px) scale(0.92); opacity: 0; } }

.gold-btn, .ghost-btn {
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.1em;
}
.gold-btn { border: none; background: linear-gradient(180deg, #fff2b0, var(--gold) 50%, var(--gold-deep)); color: #3a1f06; box-shadow: 0 0 18px rgba(246, 201, 85, 0.6); }
.ghost-btn { border: 2px solid rgba(143, 227, 255, 0.6); background: rgba(0, 0, 0, 0.35); }
.ghost-btn:hover { background: rgba(143, 227, 255, 0.15); }

/* Autoplay panel: auto-frame.png (960×626, title painted in) as a 9-slice border-image, so the header and gold frame
   keep their proportions while the body grows to fit the options. --k converts art pixels to screen pixels. */
.auto-panel {
  --w: min(94vw, 720px);
  --k: calc(var(--w) / 960);
  width: var(--w);
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  border-style: solid;
  border-width: calc(var(--k) * 248) calc(var(--k) * 30) calc(var(--k) * 34);
  border-image: url('/.netlify/images?url=/img/auto-frame.png&w=1440&fm=webp') 248 30 34 fill / 1 / 0 stretch;
  padding: 0.2rem 1rem 0.6rem;
  color: #e9e4d6;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7));
  animation: rise 0.35s cubic-bezier(0.3, 1.4, 0.6, 1);
}
/* Buttons use the blank pill art (btn-pill.png) cut from the original panel */
.pill-btn {
  aspect-ratio: 286 / 118;
  border: none;
  padding: 0 0 0.1em;
  background: url('/.netlify/images?url=/img/btn-pill.png&w=300&fm=webp') center / contain no-repeat;
  font-family: var(--num-font);
  font-weight: 900;
  color: #f6dc8c;
  text-shadow: 0 2px 0 #3a1f06, 0 0 6px rgba(0, 0, 0, 0.8);
  transition: transform 0.12s, filter 0.15s;
}
.pill-btn:hover { filter: brightness(1.15); }
.pill-btn:active { transform: scale(0.95); }
.pill-btn.on { color: #fff6cf; filter: brightness(1.3) drop-shadow(0 0 8px rgba(246, 201, 85, 0.85)); }
.auto-counts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.auto-counts .pill-btn { width: 100%; min-width: 0; font-size: max(0.8rem, calc(var(--k) * 30)); }
.auto-stops { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid rgba(246, 201, 85, 0.45); }
.auto-stops h3 { margin: 0 0 0.4rem; text-align: center; font-size: max(0.85rem, calc(var(--k) * 28)); letter-spacing: 0.15em; color: var(--gold); }
.auto-stop {
  display: grid;
  grid-template-columns: 1fr minmax(5.5rem, 26%);
  grid-template-areas: 'label label' 'range out';
  align-items: center;
  column-gap: 0.9rem;
  padding: 0 calc(var(--k) * 60) 0.35rem;
  font-size: max(0.75rem, calc(var(--k) * 24));
}
.auto-stop span { grid-area: label; color: #d8d2c2; }
.auto-stop output {
  grid-area: out;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(246, 201, 85, 0.7);
  border-radius: 6px;
  background: rgba(2, 12, 30, 0.75);
  text-align: center;
  font-family: var(--num-font);
  font-weight: 900;
  color: #ffb648;
}
.auto-stop input[type='range'] {
  grid-area: range;
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  margin: 0;
  background: none;
  cursor: pointer;
}
.auto-stop input[type='range']::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold) var(--fill, 0%), rgba(255, 255, 255, 0.18) var(--fill, 0%)); }
.auto-stop input[type='range']::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--gold) var(--fill, 0%), rgba(255, 255, 255, 0.18) var(--fill, 0%)); }
.auto-stop input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8d6, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 6px rgba(246, 201, 85, 0.7); }
.auto-stop input[type='range']::-moz-range-thumb { width: 20px; height: 20px; border: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff8d6, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 6px rgba(246, 201, 85, 0.7); }
.auto-toggles { display: flex; justify-content: space-around; gap: 1rem; padding: 0.3rem calc(var(--k) * 60) 0; font-size: max(0.75rem, calc(var(--k) * 24)); }
.switch { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: #d8d2c2; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { position: relative; flex: none; width: 2.4em; height: 1.3em; border-radius: 999px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(246, 201, 85, 0.5); transition: background 0.15s; }
.switch i::after { content: ''; position: absolute; top: 50%; left: 0.1em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; transform: translateY(-50%); transition: left 0.15s; }
.switch input:checked + i { background: linear-gradient(180deg, #fff2b0, var(--gold) 50%, var(--gold-deep)); }
.switch input:checked + i::after { left: calc(100% - 1.15em); }
.switch input:focus-visible + i { outline: 2px solid var(--bolt); outline-offset: 2px; }
.auto-btns { display: flex; justify-content: center; gap: calc(var(--k) * 60); margin-top: 0.7rem; }
.pill-wide { width: max(7rem, calc(var(--k) * 250)); font-size: max(0.9rem, calc(var(--k) * 32)); letter-spacing: 0.2em; }
.pill-btn[data-close] { filter: saturate(0.6) brightness(0.85); color: #e9e4d6; }
.pill-btn[data-close]:hover { filter: saturate(0.8) brightness(1); }
.pill-ok { color: #fff3c4; filter: drop-shadow(0 0 10px rgba(246, 201, 85, 0.7)) brightness(1.15); }

.close-x {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  border: none;
  background: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--muted);
}
.info-scroll { max-height: 70dvh; overflow-y: auto; padding-right: 0.4rem; }
.info-scroll h3 { color: var(--bolt); font-size: 1rem; margin: 1.2rem 0 0.6rem; }
.paytable { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.pay-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(246, 201, 85, 0.25);
}
.pay-item img { width: 56px; height: 56px; object-fit: contain; }
.pay-item ul, .pay-scatter ul { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; line-height: 1.5; }
.pay-item b { color: var(--gold); }
.pay-scatter { display: flex; align-items: center; gap: 1rem; }
.pay-scatter img { width: 80px; }
.rules { padding-left: 1.2rem; line-height: 1.7; font-size: 0.9rem; }
.rules b { color: var(--gold); }
.note { font-size: 0.78rem; }

/* Buy-feature confirm: navy card with a thin gold frame and notched corners */
.buy-panel {
  --notch: clamp(14px, 2.4vw, 30px);
  position: relative;
  width: min(92vw, 820px);
  padding: clamp(1.6rem, 5vw, 3.2rem) clamp(1.2rem, 5vw, 3.5rem) clamp(1.6rem, 4.5vw, 3rem);
  text-align: center;
  background:
    radial-gradient(ellipse 40% 18% at 50% 0%, rgba(90, 160, 255, 0.55), transparent 70%),
    radial-gradient(ellipse at 50% 40%, #142a63 0%, #0c1b44 55%, #081233 100%);
  clip-path: polygon(var(--notch) 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, var(--notch) 100%, 0 calc(100% - var(--notch)), 0 var(--notch));
  animation: rise 0.35s cubic-bezier(0.3, 1.4, 0.6, 1);
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.7));
}
/* Gold frame drawn inset, following the notched shape */
.buy-panel::before {
  content: '';
  position: absolute;
  pointer-events: none;
  background: linear-gradient(135deg, #fff1b8, var(--gold) 30%, #9a5a0c 55%, var(--gold) 80%, #fff1b8);
  inset: 10px;
  --n: calc(var(--notch) - 6px);
  clip-path: polygon(evenodd,
    var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n), var(--n) 0,
    var(--n) 2px, 2px calc(var(--n) + 1px), 2px calc(100% - var(--n) - 1px), calc(var(--n) + 1px) calc(100% - 2px), calc(100% - var(--n) - 1px) calc(100% - 2px), calc(100% - 2px) calc(100% - var(--n) - 1px), calc(100% - 2px) calc(var(--n) + 1px), calc(100% - var(--n) - 1px) 2px, var(--n) 2px
  );
}
.buy-panel h2 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(1.8rem, 5.2vw, 3.6rem);
  letter-spacing: 0.12em;
  padding-left: 0.12em;
  background: linear-gradient(180deg, #fff6d0 0%, #f6c955 45%, #c27f1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #3a1f06) drop-shadow(0 0 14px rgba(246, 201, 85, 0.35));
}
.buy-sub {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 1rem 0 0;
  font-weight: 600;
  font-size: clamp(0.85rem, 2.2vw, 1.4rem);
  color: #e9e4d6;
}
.buy-sub::before, .buy-sub::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.buy-sub::after { background: linear-gradient(90deg, var(--gold), transparent); }
.buy-sub b { color: var(--gold); font-family: var(--num-font); padding: 0 0.15em; }
.buy-amount {
  position: relative;
  margin: clamp(0.8rem, 3vw, 1.8rem) 0 clamp(1.2rem, 4vw, 2.6rem);
  padding-bottom: 0.6rem;
  font-family: var(--num-font);
  font-weight: 900;
  font-size: clamp(2.4rem, 9vw, 6.2rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff8d6 0%, #ffd766 40%, #e2a12c 65%, #a4630f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #4a2706) drop-shadow(0 0 18px rgba(255, 196, 80, 0.35));
}
/* Glowing gold line under the price */
.buy-amount::after {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 3px;
  background: radial-gradient(ellipse at center, #fff3c0 0%, #f6c955 25%, rgba(246, 201, 85, 0.25) 60%, transparent 100%);
  filter: blur(0.5px);
}
.buy-btns { display: flex; justify-content: center; gap: clamp(1rem, 5vw, 4rem); }
.buy-cancel, .buy-ok {
  flex: 0 1 290px;
  padding: clamp(0.7rem, 2vw, 1.15rem) 1rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(1.1rem, 3vw, 2rem);
  letter-spacing: 0.15em;
  transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
}
.buy-cancel { border: 2px solid var(--gold); background: rgba(5, 12, 35, 0.6); color: #f2eee4; }
.buy-cancel:hover { box-shadow: 0 0 18px rgba(246, 201, 85, 0.4); }
.buy-ok {
  border: none;
  background: linear-gradient(180deg, #ffe9a3 0%, #f6c955 45%, #d9952a 100%);
  color: #2b1704;
  box-shadow: 0 0 22px rgba(246, 201, 85, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 6px rgba(120, 60, 0, 0.35);
}
.buy-ok:hover { filter: brightness(1.08); box-shadow: 0 0 32px rgba(246, 201, 85, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.buy-cancel:active, .buy-ok:active { transform: scale(0.96); }

/* Free-spin intro: full artwork with the 開始 button in the art made clickable */
.fs-intro-art {
  position: relative;
  width: min(94vw, 1100px, calc((100dvh - 2rem) * 1.678));
  aspect-ratio: 1624 / 968;
  animation: rise 0.45s cubic-bezier(0.3, 1.4, 0.6, 1);
  filter: drop-shadow(0 0 40px rgba(110, 200, 255, 0.45)) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7));
}
.fs-intro-art img { display: block; width: 100%; height: 100%; border-radius: 1.2%; }
.fs-intro-btn {
  position: absolute;
  left: 37.25%;
  top: 75.4%;
  width: 25.25%;
  height: 16%;
  border: none;
  border-radius: 999px;
  background: transparent;
  animation: introBtn 1.6s ease-in-out infinite;
}
.fs-intro-btn:hover, .fs-intro-btn:focus-visible { background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 30px rgba(143, 227, 255, 0.9); outline: none; }
.fs-intro-btn:active { background: rgba(255, 255, 255, 0.22); }
@keyframes introBtn { 50% { box-shadow: 0 0 26px rgba(246, 201, 85, 0.75), inset 0 0 18px rgba(255, 255, 255, 0.25); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Big win */
.bigwin-inner { text-align: center; animation: rise 0.4s cubic-bezier(0.3, 1.4, 0.6, 1); }
.bigwin-title {
  font-weight: 900;
  font-size: clamp(3rem, 12vw, 7rem);
  letter-spacing: 0.15em;
  background: linear-gradient(180deg, #ffffff 0%, #fff0a6 30%, var(--gold) 55%, #a35a0c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px rgba(143, 227, 255, 0.8)) drop-shadow(0 5px 0 #3a1f06);
  animation: titlePulse 0.9s ease-in-out infinite;
}
.bigwin-amount {
  font-family: var(--num-font);
  font-weight: 900;
  font-size: clamp(2.2rem, 8vw, 4.5rem);
  color: #fff8dc;
  text-shadow: 0 0 20px #ffb400, 0 4px 0 #6b3a00;
  font-variant-numeric: tabular-nums;
}
@keyframes titlePulse { 50% { transform: scale(1.06); } }

/* ---------- Responsive ---------- */
/* Short desktop screens: shrink the left column so it never outgrows the board */
@media (min-width: 961px) and (max-height: 860px) {
  .side-left { width: 190px; gap: 1rem; }
  .medal-ring { width: 160px; }
  .medal-ring strong { font-size: calc(2.8rem * min(1, calc(3.6 / var(--len, 2)))); }
  .medal-label { font-size: 1rem; }
  .buy { --buy-w: 150px; }
  .history { height: 140px; }
  .history li { font-size: 0.9rem; }
}
@media (max-width: 960px) {
  :root { --cell: clamp(36px, min(calc((100vw - 16px) / 6.674), calc((100dvh - 330px) / 5.917)), 120px); }
  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 'board' 'left' 'controls' 'note';
    gap: 0.5rem;
    padding-top: 1.2rem;
  }
  .side-right { right: -10px; top: 0; bottom: auto; z-index: -1; opacity: 0.35; }
  .hero { width: 216px; }
  .trident-flare { display: none; }
  .side-left { justify-self: center; width: auto; flex-direction: row; align-items: center; gap: 0.6rem; }
  .medal { flex-direction: row; }
  .medal-label { writing-mode: vertical-rl; font-size: 0.8rem; }
  .medal-ring { width: 86px; }
  .medal-ring strong { font-size: calc(1.45rem * min(1, calc(3.6 / var(--len, 2)))); }
  .buy { --buy-w: 116px; }
  .stone-panel::after { display: none; }
  .stone-panel { border-width: 6px; padding: 6px; }
  .fs-panel { padding: 4px; width: auto; }
  .fs-panel strong { font-size: 1.2rem; padding: 0.1rem 0.6rem 0; }
  .fs-panel span { font-size: 0.7rem; padding: 0 0.6rem 0.2rem; }
  .history { width: 140px; height: 64px; padding: 4px; }
  .history li { font-size: 0.72rem; }
  .controls { flex-wrap: wrap; gap: 0.4rem 0.9rem; padding: 0.5rem 0.6rem 1.2rem; }
  .meter { min-width: 4.6rem; }
  .meter strong { font-size: 1.05rem; }
  .meter-label { font-size: 0.72rem; }
  .menu-btn { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
  .actions { position: static; width: 100%; --m: min(340px, 92vw); margin-top: calc(var(--m) * 0.09); }
  #coinInfo { display: none; }
  .auto-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem 0.4rem; }
  .auto-counts .pill-btn { font-size: 0.95rem; }
}

/* ---------- Loading screen ---------- */
/* Covers the game until preload() has everything; then either fades away or shows 點擊進入遊戲 (autoplay blocked). */
.loader {
  z-index: 40;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(18, 40, 90, 0.55), rgba(3, 8, 22, 0.96) 70%),
    #030816;
  backdrop-filter: none;
  animation: none;
  transition: opacity 0.45s ease;
}
.loader.leaving { opacity: 0; pointer-events: none; }
.loader-inner { display: grid; justify-items: center; gap: 0.5rem; width: min(420px, 86vw); text-align: center; }
.loader-brand { font-weight: 900; letter-spacing: 0.4em; font-size: 0.85rem; color: rgba(246, 201, 85, 0.75); }
.loader-en { margin-top: -0.3rem; font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; color: #b9d4ff; opacity: 0.8; }
.loader-progress { display: grid; gap: 0.6rem; width: 100%; margin-top: 1.6rem; }
.loader-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(246, 201, 85, 0.45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.loader-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), #fff2b0);
  box-shadow: 0 0 12px rgba(246, 201, 85, 0.7);
  transition: width 0.3s ease-out;
}
.loader-text { font-size: 0.9rem; letter-spacing: 0.2em; color: #d8e4ff; }
.loader-text b { font-family: var(--num-font); color: var(--gold); letter-spacing: 0.05em; }
.loader .start-btn { margin-top: 1.6rem; }
.loader-progress[hidden], .start-btn[hidden] { display: none; }
.start-btn {
  display: grid;
  gap: 1.2rem;
  place-items: center;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}
.start-title {
  font-size: clamp(2.6rem, 10vw, 4.6rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(246, 201, 85, 0.7), 0 4px 0 #5a2f05;
}
.start-cta {
  padding: 0.7rem 2rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: #3a1f06;
  background: linear-gradient(180deg, #fff2b0, var(--gold) 50%, var(--gold-deep));
  box-shadow: 0 0 22px rgba(246, 201, 85, 0.6);
  animation: startPulse 1.6s ease-in-out infinite;
}
@keyframes startPulse { 50% { transform: scale(1.06); box-shadow: 0 0 36px rgba(246, 201, 85, 0.9); } }

/* ---------- Phone landscape ---------- */
/* Short, wide screens: the stacked phone layout would scroll, so use three columns instead.
   Board in the middle sized to the screen height; medal and buy button on the left; menu, meters and the
   button module (spin on top, turbo / − / + below) on the right. Placed last so it overrides the phone rules. */
@media (orientation: landscape) and (max-height: 540px) {
  :root {
    --side-min: 170px;
    --cell: clamp(32px, min(calc((100dvh - 26px) / 5.917), calc((100vw - 2 * var(--side-min) - env(safe-area-inset-left) - env(safe-area-inset-right)) / 6.674)), 120px);
  }
  .stage {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: 'left board controls';
    gap: 0 0.5rem;
    height: 100dvh;
    min-height: 0;
    padding: 4px max(0.4rem, env(safe-area-inset-right)) 18px max(0.4rem, env(safe-area-inset-left));
    overflow: hidden;
  }
  .side-right { right: -4vw; top: auto; bottom: 0; z-index: 0; opacity: 0.3; }
  .hero { width: min(36vw, calc(100dvh * 0.833)); }
  .trident-flare { display: none; }

  /* Left column */
  .side-left { justify-self: center; align-self: center; width: auto; flex-direction: column; gap: 0.5rem; }
  .medal { flex-direction: column; }
  .medal-label { writing-mode: horizontal-tb; font-size: 0.8rem; }
  .medal-ring { width: min(120px, 15vw, 30dvh); }
  .medal-ring strong { font-size: calc(1.7rem * min(1, calc(3.6 / var(--len, 2)))); }
  .buy { --buy-w: min(112px, 14vw, 30dvh); }
  .fs-panel strong { font-size: 1.3rem; }
  .history { display: none; }

  /* Right column */
  .controls {
    grid-area: controls;
    align-self: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.25rem;
    width: min(230px, 100%);
    padding: 0;
    background: none;
  }
  .menu-btn, .sound-btn { position: absolute; top: 0; width: 2.1rem; height: 2.1rem; font-size: 1rem; margin: 0; }
  .menu-btn { left: 0; }
  .sound-btn { left: 2.5rem; font-size: 0.85rem; }
  .controls { padding-top: 2.5rem; }
  .meter { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; min-width: 0; padding: 0.1rem 0.5rem; border-radius: 8px; background: rgba(2, 10, 26, 0.6); }
  .meter strong { font-size: 0.95rem; }
  .meter-label { font-size: 0.7rem; }
  .bar-foot { display: none; }
  .actions {
    --m: min(270px, calc(100dvh * 0.64));
    position: static;
    width: 100%;
    margin-top: calc(var(--m) * 0.1);
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-areas: 'spin spin spin' 'turbo down up';
    justify-content: center;
    justify-items: center;
    gap: 0 0.4rem;
  }
  .spin-wrap { grid-area: spin; }
  #turboBtn { grid-area: turbo; }
  #betDown { grid-area: down; }
  #betUp { grid-area: up; }


  /* Overlays sized to the short screen height */
  .overlay { padding: 0.5rem; }
  .buy-panel { width: min(80vw, 560px); padding: 1rem 1.5rem 1.1rem; }
  .buy-panel h2 { font-size: clamp(1.3rem, 8dvh, 2rem); }
  .buy-sub { margin-top: 0.4rem; font-size: 0.85rem; }
  .buy-amount { margin: 0.3rem 0 0.8rem; padding-bottom: 0.3rem; font-size: clamp(1.8rem, 14dvh, 3rem); }
  .buy-cancel, .buy-ok { flex-basis: 200px; padding: 0.55rem 1rem; font-size: 1rem; }
  .panel { padding: 1rem 1.2rem; }
  .panel-wide .info-scroll { max-height: calc(100dvh - 6rem); }
  .start-title { font-size: clamp(2rem, 14dvh, 3.6rem); }
  /* Autoplay panel: counts and toggles on the left, stop sliders on the right */
  .auto-panel { --w: min(94vw, 600px); display: grid; grid-template-columns: 1fr 1.25fr; grid-template-areas: 'counts stops' 'btns stops'; grid-template-rows: auto 1fr; column-gap: 0.8rem; padding: 0 0.6rem 0.3rem; }
  .auto-counts { grid-area: counts; grid-template-columns: repeat(4, 1fr); align-content: start; }
  .auto-counts .pill-btn { font-size: 0.75rem; }
  .auto-stops { grid-area: stops; margin: 0; padding: 0; border: none; }
  .auto-stops h3 { font-size: 0.75rem; margin-bottom: 0.15rem; }
  .auto-stop { padding: 0 0 0.15rem; font-size: 0.68rem; grid-template-columns: 1fr 4.6rem; }
  .auto-stop output { padding: 0.1rem 0.3rem; }
  .auto-toggles { padding: 0.15rem 0 0; font-size: 0.68rem; flex-wrap: wrap; justify-content: flex-start; gap: 0.4rem 0.8rem; }
  .auto-btns { grid-area: btns; align-self: end; gap: 0.4rem; margin-top: 0.3rem; }
  .pill-wide { width: min(7rem, 46%); font-size: 0.85rem; }
}