/* SLAP OUT: portrait-first video stage with an overlay HUD; wide screens add
   fighter cards (left) and the multiplier ladder plus history (right). */
:root {
  --so-red: #d7262f; --so-red-deep: #8f1219; --so-gold: #e3b45a; --so-ink: #0b0c10;
  --so-chalk: #f4f2ec; --so-glass: rgba(10, 11, 16, 0.62); --so-edge: rgba(255, 255, 255, 0.16);
  --so-font: "Inter", "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--so-ink); color: var(--so-chalk); font-family: var(--so-font); overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

.so-root { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
/* On the RGS the unified game menu (T10) is a fixed bar at the bottom: the whole game stays above it.
   kits/mines/client/main.js also sets the root's bottom to the menu's height; this holds without it. */
html.asgf-menu .so-root { bottom: var(--asgf-menu-h, 0px); }
.so-root.is-shake .so-screen { animation: so-shake 0.5s cubic-bezier(.36,.07,.19,.97); }
@keyframes so-shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(5px, -2px); } 30%, 50%, 70% { transform: translate(-8px, 2px); } 40%, 60% { transform: translate(8px, -1px); } }

/* ---------- stage ---------- */
.so-stage { position: absolute; inset: 0; overflow: hidden; background: #000; }
.so-screen, .so-video, .so-chalk, .so-shade, .so-flash { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Anchored near the top: on short phone screens (browser bars, RGS menu) cover crops the bottom, which
   sits under the controls anyway, instead of the fighters' heads. */
.so-video { object-fit: cover; object-position: 50% 8%; opacity: 0; transition: opacity 0.12s linear; background: #000; }
.so-video.is-on { opacity: 1; }
.so-shade { pointer-events: none; background:
  linear-gradient(to bottom, rgba(0,0,0,0.55) 0, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.78) 74%, rgba(0,0,0,0.92) 100%); }
.so-chalk { pointer-events: none; }
.so-flash { pointer-events: none; background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.55), rgba(255,255,255,0) 60%); opacity: 0; }
.so-flash.is-on { animation: so-flash 0.35s ease-out; }
@keyframes so-flash { from { opacity: 1; } to { opacity: 0; } }

.so-glass { background: var(--so-glass); border: 1px solid var(--so-edge); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.so-k { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.78; font-weight: 600; }
.so-v { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* top bar */
.so-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 8px; z-index: 3; }
.so-balance { padding: 5px 12px; min-width: 0; }
.so-tag { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border-radius: 8px; background: var(--so-gold); color: #1a1205; }
.so-tools { margin-left: auto; display: flex; gap: 8px; }
.so-icon { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }
.so-icon svg { width: 22px; height: 22px; }
.so-icon.is-on { background: var(--so-gold); color: #1a1205; border-color: transparent; }
.so-icon-sound .so-x { display: none; }
.so-icon-sound.is-muted .so-x { display: inline; }
.so-icon-sound.is-muted .so-wave { display: none; }

/* callout ("Survived · 1.29×", "KO") */
.so-callout { position: absolute; left: 0; right: 0; top: 30%; text-align: center; z-index: 3; pointer-events: none;
  font-size: clamp(28px, 9vw, 54px); font-weight: 900; font-style: italic; letter-spacing: -0.01em; text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,0.55), 0 0 24px rgba(0,0,0,0.6); opacity: 0; transform: scale(0.9); }
.so-callout.is-on { animation: so-call 1.6s ease-out forwards; }
.so-callout.is-ko { color: #fff; -webkit-text-stroke: 2px var(--so-red); font-size: clamp(64px, 24vw, 140px); }
@keyframes so-call { 0% { opacity: 0; transform: scale(1.5); } 12% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.03); } }

/* HUD */
.so-hud { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px;
  padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
.so-plate { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 0 4px; }
.so-mult { display: block; font-size: 34px; line-height: 1; font-weight: 900; font-style: italic; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.so-plate-r { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.so-level { font-size: 12px; font-weight: 700; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.06em; }
.so-next { font-size: 15px; font-weight: 800; color: var(--so-gold); font-variant-numeric: tabular-nums; }

.so-pick-k { margin: 0 4px 4px; }
.so-pick-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.so-opt { min-height: 48px; border-radius: 12px; border: 1px solid var(--so-edge); background: var(--so-glass); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px; }
.so-opt-name { font-size: 15px; font-weight: 800; }
.so-opt-odds { font-size: 12px; opacity: 0.8; }
.so-opt.is-selected { background: var(--so-chalk); color: var(--so-ink); border-color: transparent; }
.so-opt.is-unavailable { opacity: 0.4; text-decoration: line-through; }
.so-opt:disabled:not(.is-unavailable):not(.is-selected) { opacity: 0.7; }
.so-reason { margin: 4px 4px 0; font-size: 12px; color: var(--so-gold); }

.so-money { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.so-bet { display: flex; align-items: center; justify-content: space-between; padding: 2px; min-height: 52px; }
.so-bet-mid { text-align: center; min-width: 0; }
.so-round { width: 44px; height: 44px; border-radius: 11px; border: 0; background: rgba(255,255,255,0.1); font-size: 24px; font-weight: 700; line-height: 1; }
.so-round:disabled { opacity: 0.35; }
.so-cash { min-height: 52px; border-radius: 14px; border: 2px solid var(--so-gold); background: linear-gradient(#2a2213, #15110a); color: var(--so-gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px; }
.so-cash-l { font-size: 15px; font-weight: 900; letter-spacing: 0.04em; }
.so-cash-s { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-height: 0; }
.so-cash:disabled { opacity: 0.38; border-color: rgba(227,180,90,0.5); }

.so-slap { min-height: 62px; border: 0; border-radius: 16px; color: #fff; padding: 6px 12px;
  background: linear-gradient(180deg, #ef3a42 0%, var(--so-red) 45%, var(--so-red-deep) 100%);
  box-shadow: 0 6px 0 #5e0a0f, 0 10px 24px rgba(215,38,47,0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  transition: transform 0.08s, box-shadow 0.08s; }
.so-slap:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 #5e0a0f; }
.so-slap-l { font-size: 22px; font-weight: 900; font-style: italic; letter-spacing: 0.02em; }
.so-slap-s { font-size: 13px; font-weight: 700; opacity: 0.9; font-variant-numeric: tabular-nums; }
.so-slap:disabled { filter: grayscale(0.6) brightness(0.7); }
.so-error { margin: 0; font-size: 13px; color: #ff8a8f; text-align: center; min-height: 0; }
.so-error:empty { display: none; }

/* celebration and toast */
.so-banner { position: absolute; left: 50%; top: 38%; z-index: 5; transform: translate(-50%, -50%) scale(0.8); opacity: 0; pointer-events: none;
  min-width: min(84%, 340px); text-align: center; padding: 18px 20px; border-radius: 20px;
  background: radial-gradient(circle at 50% 0, rgba(227,180,90,0.35), rgba(11,12,16,0.9) 70%); border: 2px solid var(--so-gold); }
.so-banner.is-on { pointer-events: auto; animation: so-pop 0.35s cubic-bezier(.2,1.6,.4,1) forwards; }
.so-banner.is-leaving { animation: so-out 0.3s ease-in forwards; }
@keyframes so-pop { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes so-out { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } }
.so-b-tier { font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase; color: var(--so-gold); letter-spacing: 0.05em; }
.so-b-amt { font-size: 40px; font-weight: 900; font-variant-numeric: tabular-nums; }
.so-b-x { font-size: 16px; font-weight: 700; opacity: 0.85; }
.so-toast { position: absolute; left: 50%; top: 72px; z-index: 6; transform: translate(-50%, -8px); opacity: 0; transition: opacity 0.2s, transform 0.2s;
  padding: 8px 14px; font-size: 14px; font-weight: 700; pointer-events: none; white-space: nowrap; }
.so-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- splash and intro ---------- */
.so-splash { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px;
  background: radial-gradient(circle at 50% 30%, #2a2c36 0, #0b0c10 70%); }
.so-logo { display: flex; flex-direction: column; align-items: center; line-height: 0.88; font-weight: 900; font-style: italic;
  /* sized by the room above the menu bar too, so Tap to start always shows on a short landscape screen */
  font-size: clamp(36px, min(22vw, calc((100vh - var(--asgf-menu-h, 0px)) * 0.22)), 132px);
  letter-spacing: -0.03em; color: #fff; text-shadow: 3px 0 0 var(--so-red), -3px 0 0 #3a55ff; }
.so-start { min-width: 220px; min-height: 56px; border: 0; border-radius: 28px; background: var(--so-red); font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; }
.so-start:disabled { opacity: 0.5; }
.so-skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); min-height: 44px; padding: 0 20px;
  border-radius: 22px; border: 1px solid var(--so-edge); background: rgba(0,0,0,0.45); font-size: 14px; font-weight: 700; }
.so-root.is-intro .so-splash { background: transparent; }
.so-root.is-intro .so-logo { display: none; }
.so-root.is-splash .so-hud, .so-root.is-splash .so-top, .so-root.is-intro .so-hud, .so-root.is-intro .so-top { visibility: hidden; }

/* ---------- rules dialog ---------- */
.so-dialog { position: absolute; inset: 0; z-index: 10; background: rgba(5,6,9,0.985); display: flex; flex-direction: column; align-items: center; }
.so-dialog-bar { width: 100%; max-width: 620px; display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 16px 10px; }
.so-dialog-h { margin: 0; font-size: 20px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.so-close { margin-left: auto; min-width: 88px; min-height: 44px; border-radius: 22px; border: 1px solid var(--so-edge); background: rgba(255,255,255,0.08); font-size: 15px; font-weight: 700; }
.so-dialog-body { width: 100%; max-width: 620px; overflow-y: auto; padding: 0 16px 32px; font-size: 14px; line-height: 1.45; user-select: text; -webkit-user-select: text; }
.so-dialog-body p { margin: 0 0 10px; }
.so-rules-strong { font-weight: 700; }
.so-rules-note { font-size: 13px; opacity: 0.8; }
.so-rules-key { margin: 14px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--so-gold); background: rgba(227,180,90,0.08); }
.so-rules-key p { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.so-rules-key .so-rules-note { font-size: 13px; font-weight: 400; margin: 0; }
.so-rules-h { margin: 20px 0 8px; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--so-gold); }
.so-rules-t { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.so-rules-t th, .so-rules-t td { padding: 6px 4px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.08); }
.so-rules-t th:first-child { text-align: left; }
.so-rules-t thead th { font-size: 12px; opacity: 0.75; font-weight: 700; }
.so-dialog .so-fighter { margin-top: 10px; }

/* ---------- side panels (wide screens) ---------- */
.so-side { display: none; }
.so-side-h { margin: 0 0 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
.so-fighter { display: flex; gap: 14px; padding: 14px; border-radius: 16px; margin-bottom: 14px; }
.so-fighter.is-player { background: linear-gradient(135deg, rgba(215,38,47,0.32), rgba(215,38,47,0.08)); border: 1px solid rgba(215,38,47,0.7); }
.so-fighter.is-opponent { background: linear-gradient(135deg, rgba(20,20,22,0.95), rgba(48,38,16,0.6)); border: 1px solid var(--so-gold); }
.so-mono { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-style: italic; font-size: 20px; }
.is-player .so-mono { background: var(--so-red); }
.is-opponent .so-mono { background: #0e0e10; color: var(--so-gold); border: 2px solid var(--so-gold); }
.so-fighter-role { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.8; }
.is-opponent .so-fighter-role { color: var(--so-gold); }
.so-fighter-name { margin: 2px 0 6px; font-size: 18px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.so-fighter-bio { margin: 0; font-size: 13px; line-height: 1.45; opacity: 0.9; }
.so-ladder { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.so-rung { display: flex; justify-content: space-between; padding: 4px 12px; border-radius: 8px; font-size: 14px; font-variant-numeric: tabular-nums; background: rgba(255,255,255,0.04); }
.so-rung-n { opacity: 0.6; }
.so-rung-x { font-weight: 800; }
.so-rung.is-done { background: rgba(215,38,47,0.25); }
.so-rung.is-next { background: var(--so-chalk); color: var(--so-ink); }
.so-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.so-hist, .so-hist-empty { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); }
.so-hist.is-ko .so-hist-b { opacity: 0.6; }
.so-hist.is-cash .so-hist-b, .so-hist.is-clear .so-hist-b { color: var(--so-gold); font-weight: 800; }

/* Wide screens: the 9:16 stage between the side panels, as tall as the room above the menu bar
   (6 Nov 2026: at 100vh it ran under the RGS menu bar and hid TAKE THE SLAP at 1440×900). */
@media (min-aspect-ratio: 5/4) and (min-width: 900px) and (min-height: 560px) {
  .so-root { display: grid; grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 1fr min(calc((100vh - var(--asgf-menu-h, 0px)) * 9 / 16), 46vw) 1fr; background:
    radial-gradient(circle at 20% 20%, rgba(215,38,47,0.18), transparent 50%), radial-gradient(circle at 80% 80%, rgba(227,180,90,0.12), transparent 50%), var(--so-ink); }
  .so-stage { position: relative; inset: auto; grid-column: 2; grid-row: 1; height: 100%; min-height: 0; box-shadow: 0 0 60px rgba(0,0,0,0.8); }
  .so-side { display: block; overflow-y: auto; padding: 28px 28px; }
  .so-left { grid-column: 1; grid-row: 1; }
  .so-right { grid-column: 3; grid-row: 1; }
  .so-root.is-splash .so-side, .so-root.is-intro .so-side { visibility: hidden; }
}
@media (max-height: 680px) {
  .so-mult { font-size: 28px; }
  .so-slap { min-height: 56px; }
  .so-hud { gap: 6px; }
}
/* Short landscape (phones on their side, small windows): the video on the left, the controls in a
   panel on the right, so TAKE THE SLAP and CASH OUT fit above the menu bar (844×390, 740×360). */
@media (min-aspect-ratio: 5/4) and (max-width: 899.98px), (min-aspect-ratio: 5/4) and (max-height: 559.98px) {
  .so-root { --so-panel: clamp(260px, 40vw, 380px); }
  .so-screen { right: var(--so-panel); width: auto; }
  .so-video { object-position: 50% 30%; }
  .so-top, .so-callout { right: var(--so-panel); }
  .so-top { padding-top: max(8px, env(safe-area-inset-top)); }
  .so-callout { top: 26%; font-size: clamp(24px, 6vh, 44px); }
  .so-callout.is-ko { font-size: clamp(48px, 18vh, 110px); }
  .so-banner { left: calc((100% - var(--so-panel)) / 2); top: 45%; min-width: min(80%, 300px); padding: 10px 14px; }
  .so-b-amt { font-size: 30px; }
  .so-toast { left: calc((100% - var(--so-panel)) / 2); top: 60px; }
  .so-hud { left: auto; top: 0; width: var(--so-panel); justify-content: center; gap: 6px; overflow: hidden;
    padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) 10px;
    background: linear-gradient(90deg, rgba(11,12,16,0.9), var(--so-ink) 24px); border-left: 1px solid var(--so-edge); }
  .so-mult { font-size: 26px; }
  .so-pick-k { display: none; }
  .so-opt { min-height: 44px; }
  .so-bet, .so-cash { min-height: 46px; }
  .so-slap { min-height: 52px; }
  .so-slap-l { font-size: 19px; }
  .so-shade { background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 80%, rgba(0,0,0,0.35) 100%); }
  /* on the RGS the menu bar holds the bet: CASH OUT takes the row */
  html.asgf-menu .so-money { grid-template-columns: 1fr; }
  html.asgf-menu .so-bet { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .so-callout.is-on { animation-duration: 1.2s; }
  .so-root.is-shake .so-screen { animation: none; }
}

/* ---------- RGS: the unified game menu (T10) shows bet, balance, win and sound ----------
   kits/shared/platform/menu.js sets html.asgf-menu; the layout keeps its place. */
html.asgf-menu .so-balance, html.asgf-menu .so-bet, html.asgf-menu .so-icon-sound { visibility: hidden; }
/* Every general control is on the panel (Henrik and Jonny, 8 Nov 2026): TURBO and rules are the panel's TURBO and INFO,
   its PLAY is TAKE THE SLAP, so those buttons are hidden too. CASH OUT stays the game's own round button, and the
   strength choice stays (the round's setting, beside the screen). */
html.asgf-menu .so-tools, html.asgf-menu .so-slap { visibility: hidden; }

/* history replay (RGS T6): the round is only shown, so the bet, auto cash-out and PLAY controls are hidden; the layout stays */
html[data-asgf-replay] .so-round, html[data-asgf-replay] .so-cash, html[data-asgf-replay] .so-slap { visibility: hidden; }