:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4f1ed;
  background: #11141d;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; overflow-x: clip; touch-action: pan-x pan-y; background: radial-gradient(circle at 50% -12%, #263241, #11141d 55%); }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .43; cursor: not-allowed; }
.app {
  max-width: 940px; min-height: 100dvh; margin: auto;
  padding: calc(env(safe-area-inset-top) + 15px) 14px calc(env(safe-area-inset-bottom) + 22px);
  display: flex; flex-direction: column; gap: 14px;
}
.top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.top a { color: #d7e9e6; font-size: .7rem; letter-spacing: .17em; font-weight: 800; text-decoration: none; }
.top span { color: #89909e; font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; }
.eyebrow { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #8fc5c5; font-weight: 800; margin: 0 0 7px; }
h1 { font-size: clamp(2.1rem, 7vw, 3.6rem); line-height: 1.05; letter-spacing: -.055em; margin: 0; }
h2 { font-size: 1.05rem; margin: 0; }
p { color: #b0b5c2; line-height: 1.45; }
.lead { max-width: 580px; margin: 12px 0 0; }
.card { border: 1px solid #353f4d; background: #1b2530; border-radius: 20px; padding: 19px; }
.stack { display: grid; gap: 15px; }
.setup { max-width: 500px; width: 100%; margin: auto; }
.label { color: #aab1c0; font-size: .78rem; display: block; margin-bottom: 7px; }
.count-row { display: flex; gap: 8px; }
.count-row button {
  flex: 1; padding: 12px; border: 1px solid #4a5264; border-radius: 12px;
  color: #e6e9f2; background: #171b25;
}
.count-row button.selected { border-color: #88d7d3; background: #1e3b42; }
.name-input {
  width: 100%; margin-bottom: 8px; padding: 13px; background: #121721;
  border: 1px solid #4b5363; border-radius: 12px; color: #fff; outline: none;
}
.name-input:focus { border-color: #8dd7d3; }
.name-input::placeholder { color: #858b98; }
.primary { width: 100%; padding: 15px 16px; border: 0; border-radius: 13px; background: #a8e4db; color: #10262b; font-weight: 850; }
.error { color: #f4a4a4; font-size: .85rem; min-height: 1.2em; }
.error:empty { display: none; }

.race-head { display: grid; gap: 8px; }
.clock-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.clock { font-size: 2.1rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.race-track { height: 8px; border-radius: 8px; background: #363e4e; overflow: hidden; }
.race-fill { height: 100%; width: 100%; background: #7de3d6; transition: width .06s linear; }
.race-fill.danger { background: #f2977c; }
.boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.board {
  position: relative; isolation: isolate; overflow: hidden;
  min-width: 0; border: 1px solid #526174; background: linear-gradient(160deg, #223245, #172330);
  border-radius: 19px; padding: 13px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: 0 14px 30px #0003;
}
.board > * { position: relative; z-index: 1; }
.board:nth-child(2) { border-color: #755669; background: linear-gradient(160deg, #3b2b3a, #251c2c); }
.board.pair { border-color: #a7efe2; box-shadow: 0 0 0 2px #8ddbd333, 0 14px 30px #0003; }
.board:nth-child(2).pair { border-color: #f5b5d2; box-shadow: 0 0 0 2px #e8a9c833, 0 14px 30px #0003; }
.player-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 5px; }
.player-head h2 { overflow-wrap: anywhere; }
.player-head small { color: #a5b5c0; font-size: .68rem; }
.score { font-size: 1.7rem; font-weight: 900; color: #99e8df; font-variant-numeric: tabular-nums; line-height: 1; }
.board:nth-child(2) .score { color: #f5b5d2; }
.score small { display: block; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: #939dac; text-align: right; margin-top: 4px; }

.reels {
  display: flex; justify-content: center; align-items: center; gap: 5px;
  border: 2px solid #687d88; border-radius: 15px; padding: 7px 5px;
  background: linear-gradient(#0c111b, #182231 50%, #0c111b);
  box-shadow: inset 0 5px 10px #000a, 0 2px 0 #a9b9ab33;
  overflow: hidden;
}
.board:nth-child(2) .reels { border-color: #997588; }
.reel { flex: 0 1 21%; min-width: 0; max-width: 90px; border-radius: 8px; overflow: hidden; background: #1c1b20; }
.reels[data-count="2"] .reel { flex-basis: 39%; }
.reels[data-count="3"] .reel { flex-basis: 28%; }
.reel-window { width: 100%; aspect-ratio: 1 / 1.3; position: relative; overflow: hidden; }
.reel-window::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-top: 1px solid #ffffff2b; border-bottom: 1px solid #000b;
  box-shadow: inset 0 10px 12px #000a, inset 0 -9px 12px #000a;
}
.reel-strip { display: flex; flex-direction: column; width: 100%; transform: translateY(var(--stop)); }
.reel.spinning .reel-strip {
  animation: reel-spin 540ms cubic-bezier(.1, .57, .16, 1) var(--delay) both;
}
.reel-symbol {
  position: relative; flex: none; display: block; width: 100%; aspect-ratio: 1;
  background-image: url('./assets/pasch-classic-symbols.png');
  background-repeat: no-repeat; background-size: 300% 200%;
}
.empty-symbol {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #7f8a96; font-size: clamp(1.5rem, 4vw, 2.6rem); font-weight: 200;
}
@keyframes reel-spin {
  0% { transform: translateY(0); filter: blur(1.5px); }
  72% { filter: blur(1px); }
  92% { filter: blur(0); }
  100% { transform: translateY(var(--stop)); filter: blur(0); }
}
.status { font-size: .78rem; color: #b8c6d1; min-height: 2.2em; line-height: 1.3; margin: 0; text-align: center; }
.board.pair .status { color: #b1f3e9; font-weight: 800; }
.board:nth-child(2).pair .status { color: #f7c7de; }
.spin {
  width: 100%; min-height: 57px; border: 0; border-radius: 12px;
  background: #8be2da; color: #11252a; font-weight: 900; font-size: 1.05rem;
  box-shadow: inset 0 -4px 0 #25635b66, 0 5px 0 #0a1119;
}
.spin:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 #25635b66, 0 2px 0 #0a1119; }
.spin:disabled { opacity: .55; transform: none; cursor: wait; }
.board:nth-child(2) .spin { background: #f0b0cf; color: #2c1923; box-shadow: inset 0 -4px 0 #8a526f66, 0 5px 0 #0a1119; }
.claim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.claim button {
  min-height: 49px; border: 1px solid #6e8290; border-radius: 10px;
  background: #243945; color: #f4fff9; padding: 6px 4px;
  font-weight: 750; font-size: .76rem; line-height: 1.1;
}
.board:nth-child(2) .claim button { background: #493240; border-color: #986b88; }
.claim button.score-choice { background: #3e5f49; border-color: #8dc6a0; }
.board:nth-child(2) .claim button.score-choice { background: #5f4b39; border-color: #d9ad8b; }
.paytable { display: grid; gap: 5px; padding: 6px 7px; border: 1px solid #685465; border-radius: 10px; background: #17131d; }
.paytable > small { color: #d9c8ac; font-size: .53rem; font-weight: 900; letter-spacing: .1em; text-align: center; }
.tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.track {
  display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px;
  border: 1px solid #485365; border-radius: 8px; padding: 3px 1px;
  color: #aab7c8; font-size: .63rem; white-space: nowrap;
}
.track.active { background: #294841; color: #c9fff0; border-color: #6fbcae; }
.board:nth-child(2) .track.active { background: #583c51; color: #ffd5e8; border-color: #cf91b2; }
.track strong { font-size: .88rem; font-variant-numeric: tabular-nums; }
.mini-symbol {
  display: block; width: 23px; height: 23px; flex: none;
  background-image: url('./assets/pasch-classic-symbols.png');
  background-repeat: no-repeat; background-size: 300% 200%;
  border-radius: 4px;
}
.footer { font-size: .68rem; color: #77808f; text-align: center; margin-top: auto; }
.final { max-width: 500px; width: 100%; margin: auto; text-align: center; }
.final .score-list { display: grid; gap: 8px; margin: 16px 0; }
.final .score-list div { display: flex; justify-content: space-between; padding: 13px; border-radius: 10px; background: #161c28; }
.final strong { color: #9ae5dc; }
@media (max-width: 420px) {
  .app { padding-left: 8px; padding-right: 8px; }
  .board { padding: 8px; gap: 9px; border-radius: 14px; }
  .reels { padding: 5px 3px; gap: 3px; border-radius: 10px; }
  .score { font-size: 1.45rem; }
  .player-head h2 { font-size: .95rem; }
  .claim button { font-size: .68rem; min-height: 47px; }
  .track { font-size: .55rem; }
  .mini-symbol { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel.spinning .reel-strip { animation: none; transform: translateY(var(--stop)); }
}

/* The two narrow rails belong to each player's machine, including on phones. */
.board.hit { border-color: #a7efe2; box-shadow: 0 0 0 2px #8ddbd333, 0 14px 30px #0003; }
.board:nth-child(2).hit { border-color: #f5b5d2; box-shadow: 0 0 0 2px #e8a9c833, 0 14px 30px #0003; }
.playfield {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: stretch; gap: 5px; min-height: 164px;
}
.machine { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.machine .reels { padding: 4px 2px; gap: 2px; min-height: 100px; }
.machine .spin { min-height: 46px; font-size: .9rem; }
.timing-guide { display: grid; gap: 3px; opacity: .5; }
.timing-guide.active { opacity: 1; }
.timing-guide small { color: #b7cbd0; font-size: .52rem; font-weight: 800; letter-spacing: .04em; text-align: center; white-space: nowrap; }
.timing-track { position: relative; height: 10px; overflow: hidden; border-radius: 6px; background: #41505d; }
.timing-guide.ready .timing-track { box-shadow: 0 0 0 1px #b7eee4; }
.timing-window { position: absolute; inset-block: 0; left: 50%; transform: translateX(-50%); background: #85dfae; }
.timing-marker {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  border-radius: 2px; background: #fff; box-shadow: 0 0 5px #fff;
  animation: timing-sweep var(--timing-sweep) linear infinite alternate;
  animation-delay: var(--timing-offset);
}
@keyframes timing-sweep { to { left: calc(100% - 4px); } }
.reel.stopped .reel-strip { transform: translateY(-28.333333%); }
.reel.running .reel-strip { transform: translateY(0); animation: reel-cycle 440ms linear infinite; }
.reel.stopping .reel-strip { animation: reel-stop 190ms cubic-bezier(.18, .72, .24, 1) both; }
@keyframes reel-cycle { to { transform: translateY(-50%); } }
@keyframes reel-stop {
  from { transform: translateY(var(--from)); }
  84% { transform: translateY(calc(var(--to) - 3px)); }
  to { transform: translateY(var(--to)); }
}
.rail-title {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .47rem; font-weight: 900; letter-spacing: .12em;
}
.upgrade-rail, .push-rail {
  border: 1px solid #5f7180; border-radius: 9px; min-width: 0;
  color: #d8e8e8; background: #17232c;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 6px 1px;
}
.upgrade-rail { opacity: .55; }
.upgrade-rail.ready {
  opacity: 1; border-color: #a8e4db; background: #26464a;
  box-shadow: 0 0 10px #8be2da44;
}
.board:nth-child(2) .upgrade-rail.ready { border-color: #f0b0cf; background: #5b3e51; box-shadow: 0 0 10px #f0b0cf44; }
.upgrade-count { font-size: .88rem; font-weight: 900; line-height: 1; }
.rail-offer { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .46rem; font-weight: 850; white-space: nowrap; }
.rail-hint { font-size: .75rem; font-weight: 800; }
.push-rail { border-color: #677783; }
.push-rail strong { font-size: .9rem; line-height: 1; }
.push-steps {
  width: 10px; height: 108px; display: flex; flex-direction: column;
  gap: 2px; justify-content: stretch;
}
.push-step { flex: 1; background: #31404a; border-radius: 2px; }
.push-step.complete { background: #7adbd1; }
.push-step.current { background: linear-gradient(to top, #7adbd1 var(--step-fill), #31404a var(--step-fill)); }
.board:nth-child(2) .push-step.complete { background: #eaa9c9; }
.board:nth-child(2) .push-step.current { background: linear-gradient(to top, #eaa9c9 var(--step-fill), #453644 var(--step-fill)); }
.upgrade-panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px; padding: 7px; border: 1px solid #6fa9a9; border-radius: 10px;
  background: #21313b;
}
.upgrade-panel span { grid-column: 1 / -1; font-size: .67rem; color: #c7dad9; font-weight: 750; }
.upgrade-panel button {
  border: 1px solid #88bab7; border-radius: 8px; padding: 7px 3px;
  background: #2e4c50; color: #edf9f5; font-size: .68rem; font-weight: 800;
}
.board:nth-child(2) .upgrade-panel { border-color: #d0a2bd; background: #3a2c3b; }
.board:nth-child(2) .upgrade-panel button { border-color: #d0a2bd; background: #67465b; }
.reward-choice--cherry { --reward-top: #a8243c; --reward-bottom: #330d20; --reward-glow: #fa586a99; --reward-accent: #ff9a9c; --reward-ink: #3a1107; }
.reward-choice--lemon { --reward-top: #9d711e; --reward-bottom: #33220c; --reward-glow: #f7d76499; --reward-accent: #ffe796; --reward-ink: #50300c; }
.reward-choice--bell { --reward-top: #a0641e; --reward-bottom: #30200e; --reward-glow: #f2bf5688; --reward-accent: #ffdc91; --reward-ink: #51300c; }
.reward-choice--diamond { --reward-top: #176da1; --reward-bottom: #0a2139; --reward-glow: #6fceff88; --reward-accent: #a4e6ff; --reward-ink: #09254c; }
.reward-choice--clover { --reward-top: #207c4a; --reward-bottom: #0c2c22; --reward-glow: #75db8688; --reward-accent: #bbf8b7; --reward-ink: #144528; }
.reward-choice--star { --reward-top: #a34f34; --reward-bottom: #36141c; --reward-glow: #ffaf6577; --reward-accent: #ffe0a2; --reward-ink: #4a2110; }
.playfield.choice-open { grid-template-columns: minmax(96px, .95fr) minmax(0, 2.3fr) minmax(96px, .95fr); gap: 6px; }
.choice-button {
  min-width: 0; min-height: 100%; padding: 8px 5px; border: 2px solid; border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; line-height: 1.1; overflow-wrap: anywhere; box-shadow: inset 0 1px 0 #fff5, 0 3px 8px #0007;
}
.choice-button strong { font-size: clamp(.77rem, 1.3vw, .96rem); font-weight: 950; }
.choice-effect strong { font-size: clamp(.82rem, 1.2vw, .9rem); overflow-wrap: normal; }
.choice-symbol { display: block; width: 28px; height: 28px; flex: none; border-radius: 6px; background-image: url('./assets/pasch-classic-symbols.png'); background-size: 300% 200%; filter: drop-shadow(0 2px 3px #000a); }
.choice-detail { font-size: .61rem; font-weight: 800; line-height: 1.2; color: #ffe0a5; }
.choice-effect { border-color: var(--reward-accent); color: #fff8ed; background: radial-gradient(circle at 50% 20%, var(--reward-glow), transparent 65%), linear-gradient(var(--reward-top), var(--reward-bottom)); }
.choice-upgrade { border-color: #eac082; color: #ffe7ba; background: linear-gradient(#65452e, #281e24); }
.choice-max { opacity: .55; }
button.choice-button:hover, button.choice-button:focus-visible { filter: brightness(1.2); transform: translateY(-2px); }
.choice-open .machine .reels { border-color: var(--reward-accent); box-shadow: inset 0 3px 9px #000c, 0 0 12px var(--reward-glow); }
.pasch-points {
  position: absolute; z-index: 5; top: 4px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; min-width: 70px; padding: 3px 9px 2px;
  border: 2px solid #ffe4a2; border-radius: 10px; color: #fff8df;
  background: linear-gradient(#9f3b2d, #471622); box-shadow: 0 3px 10px #000b, 0 0 13px #ffbd5c99;
  font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 1000; line-height: .95;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #3d101a;
  pointer-events: none;
}
.pasch-points small { margin-top: 3px; font-size: .46rem; font-weight: 950; letter-spacing: .12em; }
.choice-pending .pasch-points { animation: pasch-points-pop .65s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes pasch-points-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(.55); }
  55% { opacity: 1; transform: translateX(-50%) scale(1.2); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
.choice-pending .match-reel {
  border-color: var(--reward-accent); box-shadow: 0 0 0 1px var(--reward-accent), 0 0 14px var(--reward-glow);
  animation: match-reel-pop .55s ease-out both, match-reel-pulse 1.4s ease-in-out .55s infinite;
}
.choice-pending .match-reel .reel-symbol:nth-child(2) { filter: brightness(1.2) drop-shadow(0 0 8px var(--reward-accent)); animation: match-symbol-pop .6s ease-out both; }
.choice-pending .match-reel .reel-window::before {
  content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, var(--reward-glow), transparent 68%);
  animation: match-glow .75s ease-out both;
}
@keyframes match-reel-pop { 0% { transform: scale(.9); filter: brightness(1); } 45% { transform: scale(1.055); filter: brightness(1.5); } 100% { transform: scale(1); filter: brightness(1); } }
@keyframes match-reel-pulse { 50% { box-shadow: 0 0 0 2px var(--reward-accent), 0 0 22px var(--reward-glow); } }
@keyframes match-symbol-pop { 0% { transform: scale(.78); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes match-glow { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .35; } }
@media (max-width: 900px) {
  .playfield.choice-open { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'machine machine' 'effect upgrade'; }
  .choice-open .machine { grid-area: machine; }
  .choice-effect { grid-area: effect; }
  .choice-upgrade { grid-area: upgrade; }
  .choice-button { min-height: 67px; }
}
@media (max-width: 420px) {
  .choice-button { min-height: 86px; padding: 7px 4px; gap: 4px; }
  .choice-button strong { font-size: .78rem; }
  .choice-effect strong { font-size: .94rem; }
  .choice-detail { font-size: .57rem; }
  .pasch-points { min-width: 60px; padding: 3px 6px 2px; font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-pending .match-reel, .choice-pending .match-reel .reel-symbol:nth-child(2), .choice-pending .match-reel .reel-window::before, .choice-pending .pasch-points { animation: none; }
}
.status { min-height: 1.6em; }
.hit-status { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: left; line-height: 1.15; }
.hit-status > div { min-width: 0; }
.hit-status strong, .hit-status > div > span { display: block; overflow-wrap: anywhere; }
.hit-status strong { color: #f0f8ee; font-size: .7rem; }
.hit-status > div > span { margin-top: 2px; color: #bfd2d3; font-size: .64rem; }
.hit-symbol {
  display: block; flex: none; width: 29px; height: 29px; border-radius: 7px;
  background-image: url('./assets/pasch-classic-symbols.png');
  background-repeat: no-repeat; background-size: 300% 200%;
}
.pity { display: grid; gap: 4px; }
.pity-label { display: flex; justify-content: space-between; gap: 4px; color: #a9c0cb; font-size: .61rem; font-weight: 800; letter-spacing: .03em; }
.pity-label strong { color: #e3f8ee; font-size: .65rem; }
.pity.full .pity-label, .pity.full .pity-label strong { color: #eaf5b4; }
.board:nth-child(2) .pity.full .pity-label, .board:nth-child(2) .pity.full .pity-label strong { color: #ffd8b7; }
.pity-track { height: 6px; border-radius: 8px; background: #394653; overflow: hidden; }
.pity-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #80d9a1, #dff5a2); transition: width .18s ease; }
.board:nth-child(2) .pity-track span { background: linear-gradient(90deg, #d698c7, #f6d1a5); }
@media (max-width: 420px) {
  .playfield { grid-template-columns: 19px minmax(0, 1fr) 19px; gap: 3px; min-height: 148px; }
  .machine .reels { min-height: 91px; }
  .machine .spin { min-height: 41px; }
  .push-steps { width: 7px; height: 92px; }
  .rail-title { font-size: .4rem; }
  .upgrade-count, .push-rail strong { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reel.running .reel-strip { animation-duration: 2s; }
}

.symbol-help { margin-top: 13px; border-top: 1px solid #45515e; padding-top: 10px; }
.symbol-help summary { color: #d5eee9; font-size: .86rem; font-weight: 750; cursor: pointer; }
.symbol-help-list { display: grid; gap: 8px; margin-top: 12px; }
.symbol-help-list > div { display: grid; grid-template-columns: 24px 70px 1fr; align-items: center; gap: 7px; font-size: .75rem; color: #bec8cc; }
.symbol-help-list strong { color: #edf5f4; }
.symbol-help-list .mini-symbol { width: 24px; height: 24px; }
.board.hit-tier-3, .board:nth-child(2).hit-tier-3 { border-color: #d8bf91; }
.board.hit-tier-4, .board:nth-child(2).hit-tier-4 { border-color: #f2d79b; }
.board.hit-tier-3 .hit-status strong, .board.hit-tier-4 .hit-status strong { color: #ffe9bd; }
/* Slot cabinet skin: both players keep their own controls on narrow screens. */
:root { color: #fff3da; background: #130a10; }
body {
  background:
    radial-gradient(ellipse at 50% -15%, #6b3425 0, transparent 46%),
    radial-gradient(ellipse at 3% 66%, #3c1430 0, transparent 43%),
    radial-gradient(ellipse at 98% 70%, #253145 0, transparent 45%),
    repeating-linear-gradient(135deg, #190d17 0 5px, #140b14 5px 10px);
}
.app { max-width: 1000px; gap: 16px; }
.top { padding: 2px 3px 10px; border-bottom: 1px solid #b68346aa; }
.top a { color: #ffdf9b; text-shadow: 0 0 12px #ffb75180; font-size: .8rem; }
.top span { color: #c7a785; }
.brand-link { border: 0; background: none; padding: 0; color: #ffdf9b; text-shadow: 0 0 12px #ffb75180; font-size: .8rem; letter-spacing: .17em; font-weight: 900; }
.brand-link:hover, .brand-link:focus-visible { color: #fff5cf; }
.main-menu { width: min(100%, 540px); margin: auto; gap: 25px; }
.menu-hero { position: relative; text-align: center; padding: 37px 10px 18px; }
.menu-hero::before {
  content: ''; position: absolute; z-index: -1; inset: -3% -5% 1%; border-radius: 50%;
  background: radial-gradient(ellipse, #aa4b3450, #602a2240 42%, transparent 73%);
  filter: blur(10px);
}
.menu-hero h1 { color: #ffdf9a; font-size: clamp(4.2rem, 16vw, 7.3rem); font-weight: 1000; letter-spacing: -.09em; line-height: .78; transform: skew(-4deg); text-shadow: 0 3px 0 #a76032, 0 7px 0 #573022, 0 12px 15px #000c, 0 0 40px #ffba6666; }
.menu-hero h1 span { color: #ff8c68; text-shadow: 0 3px 0 #a83d3b, 0 7px 0 #632232, 0 12px 15px #000c, 0 0 40px #ff896888; }
.menu-hero p:last-child { margin: 23px 0 0; color: #f9d6a1; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: .8rem; }
.menu-actions { display: grid; gap: 11px; }
.menu-actions button {
  display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 65px; padding: 15px 20px;
  border: 2px solid #bd8950; border-radius: 15px; color: #ffe7bc;
  background: linear-gradient(145deg, #5b3034, #2b1b2c 64%, #221522);
  box-shadow: inset 0 1px 0 #ffe0a344, inset 0 -3px 0 #150b14, 0 5px 13px #0008;
  font-size: .95rem; font-weight: 950; letter-spacing: .075em; text-align: left;
}
.menu-actions button span { color: #ffcb7a; font-size: 1.3rem; }
.menu-actions button:hover, .menu-actions button:focus-visible { border-color: #ffe1a1; filter: brightness(1.12); }
.menu-actions .menu-primary { color: #3a1b0f; background: linear-gradient(#ffe8aa, #e6a44d); border-color: #ffe4aa; }
.menu-actions .menu-primary span { color: #753617; }
.boards-solo { grid-template-columns: minmax(0, 460px); justify-content: center; }
.option-note { margin: 0; color: #cdae91; font-size: .84rem; }
.text-back { align-self: start; border: 0; background: transparent; color: #f5c77e; padding: 7px 0; font-weight: 800; }
.text-back:hover, .text-back:focus-visible { color: #ffe3ab; text-decoration: underline; }
.lobby-card { text-align: center; }
.lobby-kicker { margin: 0; color: #dcb585; font-size: .75rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.lobby-code { padding: 12px; border: 2px solid #d49e60; border-radius: 13px; color: #ffe4a2; background: #170d15; font: 950 clamp(2.5rem, 11vw, 4rem)/1 ui-monospace, monospace; letter-spacing: .16em; text-indent: .16em; text-shadow: 0 0 14px #f1a55b88; }
.copy-button { border: 1px solid #a97b50; border-radius: 11px; background: #412b2b; color: #ffe1ac; padding: 11px 15px; font-weight: 800; }
.lobby-players { display: grid; gap: 9px; text-align: left; }
.lobby-players > div { display: flex; align-items: center; gap: 11px; border: 1px solid #875b41; border-radius: 10px; padding: 11px 13px; color: #fff1d7; background: #251822; font-weight: 800; }
.lobby-players .waiting { color: #bca999; font-weight: 600; }
.lobby-dot { width: 11px; height: 11px; border-radius: 50%; background: #ffca73; box-shadow: 0 0 9px #ffbd61; }
.waiting .lobby-dot { background: #684c46; box-shadow: none; }
.lobby-wait { margin: 0; text-align: center; }
.code-input { text-align: center; text-transform: uppercase; letter-spacing: .23em; font-weight: 900; font-size: 1.3rem; }
.eyebrow { color: #f3c879; }
.setup h1, .final h1 {
  color: #ffd880; text-shadow: 0 2px 0 #754123, 0 0 24px #ed924477;
  font-weight: 950; letter-spacing: -.06em;
}
.lead, p { color: #d4c5bd; }
.card {
  border: 1px solid #a87544; background: linear-gradient(150deg, #35202a, #1c1421);
  box-shadow: inset 0 1px 0 #ffdfa733, 0 14px 32px #0005;
}
.count-row button { border-color: #8a6554; color: #f6e9d7; background: #211620; }
.count-row button.selected { border-color: #f9cc75; background: #53392c; box-shadow: inset 0 0 14px #e5a25144; }
.name-input { background: #160f19; border-color: #8b6451; }
.name-input:focus { border-color: #f6cb76; }
.primary {
  border: 1px solid #ffe0a2; color: #3a1b0f; font-weight: 950;
  background: linear-gradient(#ffe8aa, #e6a44d);
  box-shadow: inset 0 2px 0 #fff8, inset 0 -3px 0 #a25b2e, 0 4px 12px #0005;
}
.race-head {
  padding: 9px 12px; border: 2px solid #c39557; border-radius: 15px;
  background: linear-gradient(160deg, #381b23, #170d15);
  box-shadow: inset 0 0 0 2px #392621, 0 7px 18px #0006;
}
.race-head .eyebrow { margin: 0; color: #f5cc85; }
.clock { color: #ffe4ad; text-shadow: 0 0 12px #ffb56199; }
.race-track { height: 9px; border: 1px solid #8f663d; background: #100a10; box-shadow: inset 0 2px 3px #000a; }
.race-fill { background: linear-gradient(90deg, #e58743, #ffdc81); box-shadow: 0 0 9px #ffbc59; }
.race-fill.danger { background: linear-gradient(90deg, #b83c3a, #ff7a51); }
.keyboard-hint { display: none; color: #d8ad78; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-align: right; }
@media (hover: hover) and (pointer: fine) { .keyboard-hint { display: block; } }
.board {
  --player-accent: #8ce4db;
  border: 3px solid #bd8b4b; border-radius: 22px;
  padding: 17px 11px 11px; gap: 9px;
  background:
    linear-gradient(105deg, #ffffff12, transparent 25% 75%, #0005),
    linear-gradient(155deg, #592b35, #291723 46%, #17111d);
  box-shadow: inset 0 0 0 2px #f6c36e55, inset 0 2px 17px #ffe3a81b,
    0 7px 0 #4e301f, 0 18px 26px #0008;
}
.board:nth-child(2) {
  --player-accent: #f4a4d0;
  border-color: #bd8b4b;
  background:
    linear-gradient(105deg, #ffffff12, transparent 25% 75%, #0005),
    linear-gradient(155deg, #542b42, #281b32 48%, #16111e);
}
.board::before {
  content: ''; position: absolute; top: 5px; left: 12px; right: 12px; height: 8px;
  background: radial-gradient(circle, #ffe2a2 0 2px, #ae6837 3px, transparent 4px) 0 0 / 17px 8px repeat-x;
  filter: drop-shadow(0 0 3px #ffd274); pointer-events: none;
}
.board.hit::before { animation: cabinet-lights .18s steps(2, end) 4; }
@keyframes cabinet-lights { 50% { opacity: .35; } }
.board.hit, .board:nth-child(2).hit {
  border-color: #ffe1a1;
  box-shadow: inset 0 0 0 2px #ffe7b477, 0 0 15px var(--player-accent), 0 7px 0 #4e301f, 0 18px 26px #0008;
}
.player-head {
  align-items: center; gap: 6px; min-height: 54px; padding: 6px;
  border: 1px solid #8c603b; border-radius: 12px;
  background: linear-gradient(#34141f, #1a0b16);
  box-shadow: inset 0 1px 0 #ffd59333;
}
.player-head h2 { color: #fff1d8; font-weight: 900; line-height: 1.05; }
.player-head small { color: #d1ac88; }
.score {
  min-width: 60px; padding: 4px 6px; border: 1px solid #a76d36; border-radius: 8px;
  color: #ffd572; background: #130a0b; text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 0 8px #ffb446aa; box-shadow: inset 0 0 10px #e9983622;
}
.board:nth-child(2) .score { color: #ffd572; }
.score small { color: #b99562; }
.playfield {
  padding: 7px 4px; border: 1px solid #9c693c; border-radius: 15px;
  background: linear-gradient(150deg, #25131a, #100c15);
  box-shadow: inset 0 0 0 2px #ffda7650, inset 0 0 18px #0009;
}
.machine .reels {
  position: relative; border: 3px solid #e5b56c; border-radius: 12px;
  padding: 5px 3px; gap: 3px;
  background: linear-gradient(#693f2b, #251b1b 20% 80%, #593824);
  box-shadow: inset 0 3px 9px #000c, 0 0 0 2px #734925, 0 2px 6px #0007;
}
.board:nth-child(2) .reels { border-color: #e5b56c; }
.reel {
  max-width: 150px; border: 1px solid #b78a55; border-radius: 5px; background: #281912;
  box-shadow: inset 0 0 8px #0008, 1px 0 0 #ffe4a744;
}
.reel-window::after {
  border-top: 1px solid #fff7; border-bottom: 1px solid #000d;
  box-shadow: inset 0 13px 13px #000b, inset 0 -12px 13px #000b;
}
.empty-symbol { color: #ddc693; text-shadow: 0 0 9px #f2c36a; }
.machine .spin {
  min-height: 49px; border: 2px solid #f5c274; border-radius: 999px;
  color: #fff6dd; background: linear-gradient(#fa8265 0%, #d83e43 48%, #921b32 100%);
  font-size: 1rem; letter-spacing: .08em; text-shadow: 0 1px 1px #5b1020;
  box-shadow: inset 0 2px 0 #ffd4a088, inset 0 -4px 0 #681020,
    0 4px 0 #35101b, 0 0 12px #ef6a4e77;
}
.board:nth-child(2) .spin { color: #fff6dd; background: linear-gradient(#fa8265, #d83e43 48%, #921b32); box-shadow: inset 0 2px 0 #ffd4a088, inset 0 -4px 0 #681020, 0 4px 0 #35101b, 0 0 12px #ef6a4e77; }
.machine .spin:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #ffd4a088, inset 0 -2px 0 #681020, 0 1px 0 #35101b; }
.machine .spin:disabled { opacity: .55; transform: none; }
.upgrade-rail, .push-rail {
  border-color: #b2804b; background: linear-gradient(90deg, #5a3a29, #251a1b 55%, #6d492d);
  color: #ffe4ad; box-shadow: inset 0 0 0 1px #f7c46b44;
}
.upgrade-rail.ready, .board:nth-child(2) .upgrade-rail.ready { border-color: #ffe2a1; background: #6f3c25; box-shadow: 0 0 9px #f5b45d; }
.push-step { background: #3e2a26; }
.push-step.complete { background: #ffd276; }
.push-step.current { background: linear-gradient(to top, #ffd276 var(--step-fill), #3e2a26 var(--step-fill)); }
.board:nth-child(2) .push-step.complete { background: #ffd276; }
.board:nth-child(2) .push-step.current { background: linear-gradient(to top, #ffd276 var(--step-fill), #3e2a26 var(--step-fill)); }
.timing-track { border: 1px solid #b58453; background: #241c20; }
.timing-guide.ready .timing-track { box-shadow: 0 0 0 1px #f7d482, 0 0 9px #f6c96e; }
.status { color: #ead8bb; }
.hit-status strong { color: #ffe39c; }
.hit-status > div > span { color: #ead6c2; }
.pity-label { color: #d1ac83; }
.pity-label strong { color: #ffe5a7; }
.pity-track { background: #1a1016; border: 1px solid #9e663d; }
.pity-track span, .board:nth-child(2) .pity-track span { background: linear-gradient(90deg, #b9563e, #ffcf73); }
.track { border-color: #895d3e; color: #d1b597; background: #21151d; }
.track.active, .board:nth-child(2) .track.active { border-color: #f1c077; color: #ffe7b3; background: #6b3d26; }
.final .score-list div { border: 1px solid #845a40; background: #241820; }
.final strong { color: #ffda82; }
.rule-list { display: grid; gap: 8px; margin-top: 13px; }
.rule-list > div { display: flex; align-items: center; gap: 10px; }
.rule-list > div > span {
  display: grid; place-items: center; width: 25px; height: 25px; flex: none;
  border: 1px solid #e0ad61; border-radius: 50%; color: #3c1c0d;
  background: linear-gradient(#ffdf9b, #cb8740); font-size: .75rem; font-weight: 950;
  box-shadow: inset 0 1px 0 #fff8, 0 2px 4px #0006;
}
.rule-list p { margin: 0; color: #ead8c3; font-size: .82rem; }
.board.spinning::before { animation: cabinet-lights .36s steps(2, end) infinite; }
.board.spinning .machine .reels { box-shadow: inset 0 3px 9px #000c, 0 0 0 2px #a97837, 0 0 13px #ffd07188; }
@media (max-width: 420px) {
  .board { padding: 14px 6px 7px; gap: 7px; border-width: 2px; border-radius: 15px; }
  .board::before { top: 3px; left: 7px; right: 7px; height: 6px; background-size: 13px 6px; }
  .player-head { min-height: 45px; padding: 4px; }
  .player-head h2 { font-size: .82rem; }
  .player-head small { font-size: .55rem; }
  .score { min-width: 46px; padding: 3px 4px; font-size: 1.26rem; }
  .score small { font-size: .46rem; }
  .playfield { grid-template-columns: 16px minmax(0, 1fr) 16px; gap: 3px; padding: 5px 3px; }
  .machine .reels { min-height: 92px; padding: 4px 1px; gap: 2px; }
  .machine .spin { min-height: 44px; font-size: .83rem; }
  .push-steps { width: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .board.hit::before, .board.spinning::before { animation: none; }
}