/* ---------- Base ---------- */
:root {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  color: #f7f0e8;
  background: #100f1f;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overflow: clip; }
body {
  background: radial-gradient(circle at 12% 18%, #3c2a57 0, transparent 38%),
    radial-gradient(circle at 88% 82%, #213a5a 0, transparent 38%), #100f1f;
  overscroll-behavior: none;
  touch-action: none;
}
button { font: inherit; cursor: pointer; }
button:focus-visible, .board:focus-visible, a:focus-visible, input:focus-visible, [data-keyboard-scroll]:focus-visible { outline: 3px solid #f7cb75; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Stage: a fixed design size scaled to the window (game.js sets the variables) ---------- */
/* The fixed, clipped viewport keeps the unscaled stage from widening a phone's layout viewport. */
.viewport { position: fixed; inset: 0; overflow: hidden; overflow: clip; contain: strict; touch-action: none; }
@media (pointer: coarse) {
  /* Browser toolbar changes must not resize a running match. */
  .viewport { bottom: auto; height: 100%; height: 100svh; }
}
.stage {
  --stage-w: 1280px; --stage-h: 720px; --stage-scale: 1; --board: 402px; --cpu-board: 402px;
  position: absolute; left: 50%; top: 50%; width: var(--stage-w); height: var(--stage-h);
  transform: translate(-50%, -50%) scale(var(--stage-scale)); transform-origin: center;
  overflow: hidden; overflow: clip; user-select: none; -webkit-user-select: none;
}
.shell { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px 22px 12px; }

/* ---------- Header ---------- */
.masthead { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: 46px; }
.eyebrow, .mini-label { margin: 0; color: #e9b476; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.masthead h1 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: .08em; white-space: nowrap; }
.masthead h1 span { color: #f4c375; }
.match-state { justify-self: center; padding: 5px 16px; border: 1px solid #f5ca8455; border-radius: 99px; background: #1a1d33cc; color: #f5ca84; font-size: 15px; white-space: nowrap; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.sound-button { flex: none; min-width: 58px; height: 36px; padding: 0 8px; border: 1px solid #f5c37b; border-radius: 9px; background: #262c45; color: #ffe0a4; font-size: 13px; font-weight: 800; white-space: nowrap; }
.sound-button[aria-pressed="false"] { border-color: #a7aabc; color: #c3c5d2; }
#bgm-toggle { min-width: 72px; }
.stage[data-layout="tall"] #bgm-toggle { display: none; }
.pause-button { display: grid; place-items: center; width: 40px; height: 36px; border: 1px solid #f5c37b; border-radius: 9px; background: #262c45; color: #ffe0a4; }
.help-button { width: 36px; height: 36px; border: 1px solid #f5c37b; border-radius: 50%; background: #f1be77; color: #24213a; font-size: 19px; font-weight: 900; }
.sound-button:hover, .pause-button:hover { background: #343b5c; }
.help-button:hover { background: #ffd79c; }

/* ---------- Versus area ---------- */
.versus-shell { position: relative; isolation: isolate; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 10px; border: 1px solid #ffffff26; border-radius: 22px; background: linear-gradient(140deg, #343047, #25283f 47%, #192739); box-shadow: 0 22px 55px #08081266; }
.match-topline { position: absolute; z-index: 6; left: 16px; right: 16px; top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: space-between; pointer-events: none; }
.cutin-slot { position: relative; min-width: 0; height: 0; }
.skill-cutin { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 74px; display: flex; align-items: center; gap: 10px; overflow: hidden; padding: 4px 10px 4px 6px; border: 1px solid #8ec5f8; border-radius: 12px; background: linear-gradient(100deg, #335d83f8, #192a43fa 65%, #152139fa); box-shadow: inset 3px 0 #c4e6ff, 0 0 16px #8ec5f888; pointer-events: none; }
.cpu-cutin-slot .skill-cutin { border-color: #ffaaa1; background: linear-gradient(100deg, #8b4c5af8, #3f283bfa 65%, #2a2036fa); box-shadow: inset 3px 0 #ffd3c3, 0 0 16px #ffaaa188; }
.skill-cutin.is-entering { animation: skillCutinIn .28s cubic-bezier(.16,.85,.2,1) both; }
@keyframes skillCutinIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
.cpu-cutin-slot .skill-cutin.is-entering { animation-name: cpuSkillCutinIn; }
@keyframes cpuSkillCutinIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
.skill-cutin-portrait { display: block; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 9px; background: #171d30; }
.skill-cutin-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.55); transform-origin: center 25%; }
.skill-cutin-copy { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; color: #fff6e7; }
.skill-cutin-copy small { color: #ffe3a7; font-size: 10px; font-weight: 900; letter-spacing: .07em; }
.skill-notice { display: block; max-height: 2.5em; overflow: hidden; color: #fff6e7; font-size: 16px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }

/* ---------- Gauge ---------- */
.tug-section { position: relative; flex: none; padding: 9px 16px 7px; border: 1px solid #ffffff24; border-radius: 14px; background: #101827ab; }
.tug-labels { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.tug-labels span:first-child { color: #8ec5f8; }
.tug-labels span:last-child { color: #ffaaa1; }
.tug-labels strong { color: #fff0c9; font-size: 17px; font-variant-numeric: tabular-nums; }
.tug-track { position: relative; height: 26px; margin: 7px 8px 4px; border-radius: 99px; background: linear-gradient(90deg, #477fca, #5aa5e4 47%, #f2d39e 50%, #ec9b87 53%, #c94f69); box-shadow: inset 0 3px 8px #0b0a1b77, 0 0 0 2px #ffffff2d; }
.tug-track.danger-human { box-shadow: inset 14px 0 13px #dcf1ff, inset 0 3px 8px #0b0a1b77, 0 0 0 2px #b8ddff; }
.tug-track.danger-cpu { box-shadow: inset -14px 0 13px #fff0e6, inset 0 3px 8px #0b0a1b77, 0 0 0 2px #ffc2b9; }
.gauge-stage-layer { position: absolute; z-index: 1; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.gauge-stage-layer span { position: absolute; display: block; pointer-events: none; }
.gauge-projectile { z-index: 5; top: 50%; width: 23px; height: 18px; border: 1px solid currentColor; border-radius: 55% 45% 45% 55%; transform: translate(-50%, -50%) scale(var(--energy-scale, 1)); background: radial-gradient(circle at 58% 48%, #fff 0 12%, currentColor 28%, transparent 76%); filter: drop-shadow(0 0 5px currentColor); animation: projectileGlow .34s ease-in-out infinite alternate; }
.gauge-projectile::before { content: ''; position: absolute; top: 50%; left: -14px; width: 17px; height: 9px; border-radius: 100%; transform: translateY(-50%); background: linear-gradient(90deg, transparent, currentColor); opacity: .8; }
.gauge-projectile.gauge-human { color: #99d9ff; }
.gauge-projectile.gauge-cpu { color: #ffb1a5; transform: translate(-50%, -50%) scaleX(-1) scale(var(--energy-scale, 1)); }
.gauge-projectile.is-contact { filter: drop-shadow(0 0 9px currentColor); }
.gauge-projectile.is-followup { outline: 1px solid #ffe5a7; outline-offset: 2px; }
.gauge-projectile.is-followup::after { content: '✦'; position: absolute; top: -9px; left: 8px; color: #ffe5a7; font-size: 10px; }
.gauge-projectile.is-quiet { animation: none; filter: none; }
@keyframes projectileGlow { from { filter: drop-shadow(0 0 3px currentColor); } to { filter: drop-shadow(0 0 9px currentColor); } }
.gauge-preview { top: 50%; height: 2px; background: currentColor; opacity: .55; transform: translateY(-50%); }
.gauge-human { color: #b6e2ff; }
.gauge-cpu { color: #ffb5ac; }
.gauge-band { top: 23%; height: 54%; border-radius: 99px; background: currentColor; box-shadow: 0 0 12px currentColor; opacity: 0; animation: gaugeBand .55s ease-out forwards; }
.gauge-band.gauge-medium { height: 70%; top: 15%; }
.gauge-band.gauge-heavy { height: 85%; top: 8%; }
.gauge-extra { top: 42%; height: 16%; filter: brightness(1.5); }
.gauge-shock { top: 50%; height: 1px; background: currentColor; opacity: 0; animation: gaugeShock .36s ease-out forwards; }
@keyframes gaugeShock { 0% { opacity: 0; } 20% { opacity: .65; } 100% { opacity: 0; } }
.gauge-human.gauge-band { transform-origin: left center; }
.gauge-cpu.gauge-band { transform-origin: right center; }
@keyframes gaugeBand { 0% { transform: scaleX(0); opacity: .95; } 45% { transform: scaleX(1); opacity: .9; } 100% { transform: scaleX(1); opacity: 0; } }
.gauge-ring { top: 50%; width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); animation: gaugeRing .45s ease-out forwards; }
@keyframes gaugeRing { from { opacity: 1; scale: .45; } to { opacity: 0; scale: 2; } }
.gauge-star, .gauge-finish-star { top: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; animation: gaugeStar .55s ease-out forwards; }
@keyframes gaugeStar { from { opacity: 1; transform: translate(-50%, -50%) scale(1.6); } to { opacity: 0; transform: translate(-50%, calc(-50% + var(--star-y, 0px))) scale(.4); } }
.gauge-finish-star { width: 6px; height: 6px; animation-name: gaugeFinishStar; }
@keyframes gaugeFinishStar { from { opacity: 1; transform: translate(-50%, -50%) scale(1.4); } to { opacity: 0; transform: translate(calc(-50% + var(--star-x)), calc(-50% + var(--star-y))) scale(.3); } }
.gauge-banner { position: absolute; z-index: 1; left: 27%; top: 30px; padding: 1px 8px; border: 1px solid #ffdc9b; border-radius: 6px; background: #171e35e8; color: #ffdfaa; font-size: 12px; font-weight: 900; white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
.gauge-banner.is-animated { animation: gaugeBanner .7s ease-out both; }
.gauge-banner-boost.is-animated { animation-duration: 1s; }
.gauge-banner-heavy.is-animated { animation-duration: .6s; }
.gauge-banner-clash.is-animated { animation-duration: .5s; }
.gauge-banner-finish.is-animated { animation-duration: .54s; }
.gauge-banner-reverse { border-color: #c1e0ff; color: #ecf5ff; }
.gauge-banner-finish { border-color: #ffe39b; background: #3e2d42; color: #fff2c9; font-size: 14px; }
@keyframes gaugeBanner { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.9); } 22% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
.tug-caption .gauge-event-human { color: #b6e2ff; font-weight: 900; }
.tug-caption .gauge-event-cpu { color: #ffb5ac; font-weight: 900; }
.gauge-boost { animation: gaugeBoost 1s ease-out; }
@keyframes gaugeBoost { 30% { color: #fff; text-shadow: 0 0 9px #ffe18c, 0 0 16px #ffb947; } }
.tug-track::before, .tug-track::after { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 12px; font-weight: 900; }
.tug-track::before { content: "LOSE"; left: 12px; }
.tug-track::after { content: "WIN"; right: 12px; }
.tug-center { position: absolute; z-index: 2; left: 50%; top: -3px; height: 32px; border-left: 2px dashed #fff9; }
.tug-marker { position: absolute; z-index: 3; top: 50%; left: 50%; width: 30px; height: 36px; border: 3px solid #ffeda4; border-radius: 8px; background: #201f39; box-shadow: 0 3px 8px #0009, 0 0 12px #ffe7a477; transform: translate(-50%, -50%); transition: left .22s ease; }
.tug-track.is-contested .tug-marker { border-color: #fff; box-shadow: 0 0 12px #91d9ff, 0 0 18px #ffaaa1; }
.tug-marker::after { content: "◆"; display: grid; place-items: center; width: 100%; height: 100%; color: #ffdc7d; font-size: 15px; }
/* A longer hit message must not add a line and push both boards down. */
.tug-caption { display: flex; align-items: baseline; justify-content: center; gap: .3em; min-width: 0; height: 1.5em; line-height: 1.5; margin: 2px 0 0; white-space: nowrap; overflow: hidden; color: #c1c0d0; font-size: 12px; }
.tug-caption #gauge-event { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tug-caption .gauge-details { flex: none; color: inherit; }
.tug-caption strong { color: #ffdc89; font-variant-numeric: tabular-nums; }
.tug-caption span { color: #f4e3bd; font-variant-numeric: tabular-nums; }

/* ---------- Boards ---------- */
.arena { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.board-panel { position: relative; min-width: 0; min-height: 0; display: grid; justify-content: center; align-content: center; column-gap: 12px; row-gap: 6px; padding: 8px 12px; border: 1px solid #ffffff22; border-radius: 17px; background: #101b2e9c; overflow: hidden; }
.human-panel { border-color: #78abdc6e; --attack-glow: #8ec5f8; }
.cpu-panel { border-color: #e499986e; --attack-glow: #ffaaa1; }
.side-heading { display: contents; }
.hud-portrait-frame { display: block; overflow: hidden; border: 1px solid #f3c989a1; border-radius: 12px; background: radial-gradient(circle at 50% 30%, #6a526b, #161d30 78%); }
.cpu-panel .hud-portrait-frame { border-color: #efa0a2a1; }
.hud-portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.side-copy { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; }
.side-copy .mini-label { grid-column: 1; }
.side-copy h2 { grid-column: 2; margin: 0; font-size: 19px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.character-name { color: #ffe5ac; }
.charge-badge { display: inline-block; padding: 1px 4px; border: 1px solid #ffe3a7; border-radius: 5px; color: #ffe3a7; font-size: .62em; line-height: 1.1; vertical-align: middle; }
.side-stats { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-variant-numeric: tabular-nums; }
.side-stats strong { color: #f6d088; font-size: 15px; }
.side-stats span { color: #d4d3df; font-size: 13px; }
.combo-track { grid-column: 1 / -1; height: 6px; overflow: hidden; margin-top: 3px; border-radius: 99px; background: #080e1d; }
.combo-track > div { width: 0; height: 100%; border-radius: inherit; background: #87bbf0; }
.cpu-panel .combo-track > div { background: #ed9aa4; }
.board { --size: var(--board); width: var(--size); height: var(--size); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: calc(var(--size) * .016); padding: calc(var(--size) * .022); border: 1px solid #d6b78c50; border-radius: calc(var(--size) * .04); background: linear-gradient(145deg, #171a2b, #101628); box-shadow: inset 0 0 0 4px #ffffff06, 0 10px 25px #09091b55; touch-action: none; }
.board-cpu { --size: var(--cpu-board); pointer-events: none; border-color: #c581965c; }
.cell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; border-radius: 5px; background: #ffffff0b; overflow: hidden; }
.cell.is-moving-block, .cell.is-moving-player { overflow: visible; }
.cell.is-moving-block { z-index: 2; }
.cell.is-moving-player { z-index: 3; }
.tile { position: relative; width: 88%; height: 88%; display: grid; place-items: center; border-radius: 16%; border: 1px solid #fff7; box-shadow: inset 0 2px 0 #ffffff55, 0 3px 0 #090b1d5c; transition: transform .17s, opacity .17s; pointer-events: none; }
.tile.is-swapping { animation: tileSwap var(--swap-ms, 110ms) cubic-bezier(.2, .72, .2, 1) both; }
@keyframes tileSwap { from { transform: translate(var(--swap-x), var(--swap-y)); } to { transform: translate(0, 0); } }
.tile .symbol { font-size: calc(var(--size) * .085); line-height: 1; text-shadow: 0 2px 4px #0005; transform: translateY(-1px); }
.tile.ruby { background: linear-gradient(145deg, #ff7083, #b9234f 72%); color: #fff5f4; }
.tile.amber { background: linear-gradient(145deg, #ffe0a0, #e69b49 72%); color: #fff9e8; }
.tile.mint { background: linear-gradient(145deg, #b9f4ce, #45b891 72%); color: #f1fff2; }
.tile.blue { background: linear-gradient(145deg, #b3dafc, #588bde 72%); color: #f4fbff; }
.tile.player { background: linear-gradient(145deg, #fffdf3, #d9cfeb); color: #715b89; border: 2px solid #fff; box-shadow: inset 0 3px 0 #fff, 0 0 0 3px #f6c772, 0 0 20px #f9d890a1, 0 6px 14px #0005; }
.tile.player .symbol { font-size: calc(var(--size) * .1); text-shadow: 0 1px 0 #fff; }
.board.has-pending-input .tile.player { outline: 2px solid #ffe7a2; outline-offset: 2px; }
.board.has-pending-input .tile.player[data-pending]::before { content: attr(data-pending); position: absolute; z-index: 2; top: -8px; right: -7px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #ffe7a2; color: #26243c; font-size: 13px; font-weight: 900; }
.board.input-rejected { border-color: #ffcfac; box-shadow: inset 0 0 0 2px #ffcfac66, 0 10px 25px #09091b55; }
.cell.is-input-rejected { box-shadow: inset 0 0 0 2px #ffcfac; }
.tile.cpu-cursor { background: linear-gradient(145deg, #ffe0dd, #cf8d9b); color: #753c5c; box-shadow: inset 0 3px 0 #fff5, 0 0 0 3px #ee9bad, 0 0 20px #e96a8ba1, 0 6px 14px #0005; }
.cell.is-matched .tile { animation: matchVanish .2s ease-out forwards; }
@keyframes matchVanish { 0% { transform: scale(1); opacity: 1; filter: brightness(1); } 32% { transform: scale(1.08); opacity: 1; filter: brightness(1.55); } 100% { transform: scale(.12) rotate(18deg); opacity: 0; filter: brightness(1.2); } }
.cell.is-new .tile { animation: pop .28s backwards; }
.cell.is-target { background: #f6c87c46; box-shadow: inset 0 0 0 2px #f6c87c; }
.cell.is-target .tile { transform: scale(.9); }
@keyframes pop { from { transform: scale(.18); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hit-label { min-height: 20px; margin: 0; color: #ecd6a6; font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-panel.attack { animation: attackFlash .23s ease-out; }
@keyframes attackFlash { 55% { box-shadow: inset 0 0 0 2px var(--attack-glow), 0 0 15px var(--attack-glow); } }

/* Wide: big portrait on the outside edge of each board */
.stage[data-layout="wide"] .human-panel { grid-template-columns: var(--art-w) var(--board); grid-template-areas: "art copy" "art board" "art hit"; }
.stage[data-layout="wide"] .cpu-panel { grid-template-columns: var(--board) var(--art-w); grid-template-areas: "copy art" "board art" "hit art"; }
.stage[data-layout="wide"] .hud-portrait-frame { grid-area: art; align-self: stretch; border: 0; border-radius: 12px; background: radial-gradient(ellipse at 50% 28%, #6a526b, #1a2034 70%, transparent); }
.stage[data-layout="wide"] .hud-portrait { object-fit: cover; object-position: center 8%; transform: scale(1.05); }
.stage[data-layout="wide"] .human-panel .hud-portrait-frame { mask-image: linear-gradient(90deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); }
.stage[data-layout="wide"] .cpu-panel .hud-portrait-frame { mask-image: linear-gradient(270deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(270deg, #000 70%, transparent); }
.stage[data-layout="wide"].no-art .hud-portrait-frame { display: none; }
.stage[data-layout="wide"] .side-copy { grid-area: copy; }
.stage[data-layout="wide"] .board { grid-area: board; }
.stage[data-layout="wide"] .hit-label { grid-area: hit; }
.stage[data-layout="wide"] .bottom-strip { display: flex; justify-content: space-between; align-items: center; min-height: 20px; padding: 0 6px; }
.stage[data-layout="wide"] .dpad { display: none; }
.stage[data-layout="wide"] .controls-label { flex-direction: row; gap: 10px; }

/* Tall (phones): COM strip on top, your board large, d-pad below */
.stage[data-layout="tall"] .shell { padding: 8px 10px 10px; gap: 6px; }
.stage[data-layout="tall"] .masthead { grid-template-columns: auto minmax(0, 1fr) auto; height: 40px; gap: 6px; }
.stage[data-layout="tall"] .match-state { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.stage[data-layout="tall"] .eyebrow { display: none; }
.stage[data-layout="tall"] .masthead h1 { font-size: 17px; letter-spacing: .04em; }
.stage[data-layout="tall"] .header-actions { gap: 6px; }
.stage[data-layout="tall"] .pause-button { width: 36px; }
.stage[data-layout="tall"] .match-state { padding: 4px 8px; font-size: 12px; }
.stage[data-layout="tall"] .sound-button { min-width: 50px; height: 34px; font-size: 12px; }
.stage[data-layout="tall"] .versus-shell { padding: 8px; gap: 7px; border-radius: 16px; }
/* tall: a slim one-line cut-in over the gauge labels, so the track stays visible */
.stage[data-layout="tall"] .match-topline { left: 10px; right: 10px; top: 3px; grid-template-columns: repeat(2, minmax(0, 205px)); }
.stage[data-layout="tall"] .skill-cutin { height: 32px; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 8px; }
.stage[data-layout="tall"] .skill-cutin-portrait { width: 26px; height: 26px; border-radius: 6px; }
.stage[data-layout="tall"] .skill-cutin-copy small { display: none; }
.stage[data-layout="tall"] .skill-notice { font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.stage[data-layout="tall"] .tug-section { padding: 6px 8px 5px; }
.stage[data-layout="tall"] .tug-labels { font-size: 11px; }
.stage[data-layout="tall"] .tug-labels strong { font-size: 14px; }
.stage[data-layout="tall"] .tug-track { height: 22px; margin: 5px 4px 3px; }
.stage[data-layout="tall"] .tug-marker { width: 26px; height: 30px; }
.stage[data-layout="tall"] .tug-center { height: 28px; }
.stage[data-layout="tall"] .tug-caption { font-size: 10px; }
.stage[data-layout="tall"] .arena { flex: none; display: flex; flex-direction: column-reverse; gap: 7px; }
.stage[data-layout="tall"] .board-panel { padding: 6px 8px; }
.stage[data-layout="tall"] .cpu-panel { grid-template-columns: 52px minmax(0, 1fr) var(--cpu-board); grid-template-areas: "art copy board" "hit hit board"; justify-content: stretch; align-items: center; }
.stage[data-layout="tall"] .cpu-panel .hud-portrait-frame { grid-area: art; width: 52px; height: 52px; }
.stage[data-layout="tall"] .cpu-panel .side-copy { grid-area: copy; }
.stage[data-layout="tall"] .cpu-panel .board { grid-area: board; }
.stage[data-layout="tall"] .cpu-panel .hit-label { grid-area: hit; align-self: start; text-align: left; font-size: 11px; }
.stage[data-layout="tall"] .human-panel { grid-template-columns: 52px var(--board-copy); grid-template-areas: "art copy" "board board" "hit hit"; justify-content: center; }
.stage[data-layout="tall"] .human-panel .hud-portrait-frame { grid-area: art; width: 52px; height: 52px; }
.stage[data-layout="tall"] .human-panel .side-copy { grid-area: copy; align-self: center; }
.stage[data-layout="tall"] .human-panel .board { grid-area: board; justify-self: center; }
.stage[data-layout="tall"] .human-panel .hit-label { grid-area: hit; font-size: 12px; min-height: 16px; }
.stage[data-layout="tall"] .side-copy h2 { font-size: 16px; }
.stage[data-layout="tall"] .side-stats strong { font-size: 13px; }
.stage[data-layout="tall"] .side-stats span { font-size: 12px; }
.stage[data-layout="tall"] .bottom-strip { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.stage[data-layout="tall"] .controls-label strong, .stage[data-layout="tall"] #notice { display: none; }
.stage[data-layout="tall"] .controls-label, .stage[data-layout="tall"] .score-box { font-size: 11px; line-height: 1.4; }
.stage[data-layout="tall"].no-dpad .dpad { display: none; }
.stage[data-layout="tall"].no-dpad .bottom-strip { flex: none; display: flex; justify-content: space-between; gap: 8px; }
.stage[data-layout="tall"].no-dpad .controls-label, .stage[data-layout="tall"].no-dpad .score-box { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Controls strip ---------- */
.bottom-strip { flex: none; }
.controls-label { display: flex; flex-direction: column; gap: 3px; color: #d9d5df; font-size: 12px; }
.controls-label strong { color: #f3c17d; font-size: 13px; }
.dpad { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 46px); gap: 4px; }
.dpad button { border: 1px solid #f8d29954; border-radius: 10px; background: #f0bd79; color: #2b263e; font-size: 24px; font-weight: 900; box-shadow: 0 3px 0 #9e6b57; touch-action: none; }
.dpad button:hover { background: #ffdda5; }
.dpad button:active { transform: translateY(2px); box-shadow: 0 1px 0 #9e6b57; }
.dpad-up { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-center { grid-column: 2; grid-row: 2; display: grid; place-items: center; color: #f4bf7e; font-size: 20px; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down { grid-column: 2; grid-row: 3; }
.score-box { display: flex; flex-direction: column; align-items: end; gap: 3px; font-size: 12px; text-align: right; }
.stage[data-layout="wide"] .score-box { flex-direction: row; gap: 14px; }
.score-box span { color: #c1bfd0; }
.score-box strong { color: #f3ca86; }

/* ---------- Match effects ---------- */
.match-fx-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; overflow: clip; }
.match-fx-layer span { position: absolute; display: block; pointer-events: none; }
.match-fx-count { z-index: 2; padding: 1px 6px; border-radius: 6px; background: #161c2de8; color: #fff4cd; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; white-space: nowrap; animation: fxCount .37s ease-out forwards; }
@keyframes fxCount { from { transform: translate(-50%, -35%) scale(.8); opacity: 0; } 25% { opacity: 1; } to { transform: translate(-50%, -145%) scale(1); opacity: 0; } }
.match-fx-spark { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 9px currentColor; animation: fxSpark .21s ease-out forwards; }
.match-fx-spark.fx-human { color: #8ec5f8; }
.match-fx-spark.fx-cpu { color: #ffaaa1; }
@keyframes fxSpark { from { transform: translate(-50%, -50%) scale(.35); opacity: 1; } to { transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.1); opacity: 0; } }
.match-fx-wave { width: 24px; height: 24px; border: 2px solid; border-radius: 50%; animation: fxWave .3s ease-out forwards; }
.match-fx-wave.fx-human { border-color: #8ec5f8; }
.match-fx-wave.fx-cpu { border-color: #ffaaa1; }
@keyframes fxWave { from { transform: translate(-50%, -50%) scale(.35); opacity: 1; } to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
.match-fx-impact-label { z-index: 3; padding: 2px 7px; border: 1px solid currentColor; border-radius: 7px; background: #141a2de8; font-size: 13px; font-weight: 900; white-space: nowrap; animation: fxImpactLabel .32s ease-out forwards; }
.match-fx-impact-label.fx-human { color: #a8d5ff; }
.match-fx-impact-label.fx-cpu { color: #ffc1bd; }
@keyframes fxImpactLabel { from { transform: translate(-50%, -10%) scale(.8); opacity: 0; } 25% { opacity: 1; } to { transform: translate(-50%, -120%) scale(1); opacity: 0; } }

/* ---------- Overlays & dialogs (inside the stage, so they scale with it) ---------- */
.overlay { position: absolute; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 16px; background: #090d1ddc; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
#help-panel { z-index: 1100; }
.dialog { position: relative; width: min(100%, 520px); max-height: 100%; overflow: auto; overscroll-behavior: contain; padding: 24px; border: 1px solid #f5c88381; border-radius: 20px; background: linear-gradient(155deg, #443859, #28253e); box-shadow: 0 30px 80px #0009; user-select: text; -webkit-user-select: text; }
.dialog, .achievement-list { touch-action: pan-y pinch-zoom; }
.dialog h2 { margin: 4px 0 10px; font-size: 26px; }
.dialog p:not(.mini-label) { color: #e1dce8; font-size: 14px; line-height: 1.65; }
.modal-help { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: 1px solid #f5c883; border-radius: 50%; background: #f2c184; color: #282139; font-weight: 900; }
.modal-sound-button { position: absolute; top: 16px; right: 58px; }
.modal-bgm-button { position: absolute; top: 16px; right: 130px; }
.dialog p.keyboard-guide { margin: 10px 0 0; color: #ffe0a0; font-size: 12px; text-align: center; }
.input-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.input-key { min-height: 36px; border: 1px solid #f5c88380; border-radius: 8px; background: #252b42; color: #ffe3b5; font: inherit; font-weight: 800; }
.input-key-wide { grid-column: span 3; font-size: 12px; }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; }
.dialog-heading button { border: 0; background: none; color: #fff; font-size: 28px; line-height: 1; padding: 4px 8px; }
.help-dialog { width: min(100%, 640px); }
.help-section h3 { margin: 14px 0 2px; color: #ffd890; font-size: 15px; }
.help-section p { margin: 4px 0; }
.modal-choices { display: grid; gap: 9px; margin-top: 16px; }
.choice-button, .secondary-button { width: 100%; border: 1px solid #f5c88380; border-radius: 11px; padding: 12px 14px; background: #f2c184; color: #282139; text-align: left; font-weight: 800; font-size: 15px; }
.choice-button:hover, .choice-button:focus-visible { background: #ffdaa3; }
.choice-button strong { display: block; font-size: 16px; }
.choice-button span { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; }
.secondary-button { margin-top: 10px; background: #252b42; color: #f5dfba; text-align: center; }
.secondary-button:hover, .secondary-button:focus-visible { background: #313957; }
.dialog .game-home-link { position: static; display: inline-flex; justify-content: center; margin-top: 4px; }
.modal-links { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }

/* Title */
.result-dialog.title-dialog { width: min(100%, 560px); padding: 30px 30px 24px; text-align: center; }
.title-dialog #modal-kicker { color: #f4c375; text-align: left; }
.title-dialog #modal-title { margin: 10px 0 6px; color: #fff1cc; font-size: 44px; letter-spacing: .08em; text-shadow: 0 4px 20px #f5c47766; }
.title-dialog .modal-choices { gap: 12px; }
.title-cast { height: 132px; overflow: hidden; border: 1px solid #ffe1a355; border-radius: 18px; background: #272b48; }
.title-cast img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.dialog p.title-flow { margin: 0; color: #ffe7b8; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.title-dialog .choice-button, .opponent-dialog .choice-button, .pause-dialog .choice-button, .result-dialog .choice-button.center { text-align: center; font-size: 17px; }
.title-dialog .secondary-button { margin-top: 0; }

/* Difficulty */
.difficulty-list { display: grid; gap: 9px; }
.difficulty-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; text-align: left; }
.difficulty-card .difficulty-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #282139; color: #ffd890; font-size: 20px; }
.difficulty-card .difficulty-record { justify-self: end; text-align: right; font-size: 11px; font-weight: 700; color: #4a3b52; white-space: nowrap; }
.difficulty-card[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #fff3d3; }

/* Character select */
.result-dialog.menu-dialog { width: min(100%, 860px); }
.menu-dialog .modal-choices { margin-top: 10px; }
.menu-dialog #modal-title { margin-bottom: 2px; }
.character-picker { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "feature tabs" "feature grid" "detail detail"; gap: 10px; }
.character-feature { grid-area: feature; position: relative; height: 300px; overflow: hidden; border: 1px solid #f5c88380; border-radius: 14px; background: radial-gradient(circle at 50% 35%, #65506e, #171e32 75%); }
.character-feature-image { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.3); transform-origin: center 20%; }
.character-feature-name { position: absolute; inset: auto 0 0; padding: 28px 8px 10px; background: linear-gradient(transparent, #101624eb); color: #fff4de; font-size: 22px; text-align: center; text-shadow: 0 2px 4px #000; }
.character-tabs { grid-area: tabs; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-self: start; }
.character-tab { min-height: 36px; padding: 4px; border: 1px solid #e9c79777; border-radius: 8px; background: #1d2238; color: #ead9bf; font-size: 13px; font-weight: 800; }
.character-tab[aria-selected="true"] { border-color: #ffe0a4; background: #70513b; color: #fff4d7; }
.character-grid { grid-area: grid; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; }
.character-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid #ffffff44; border-radius: 10px; background: #1b2237; color: #f7f0e8; text-align: left; }
.character-card:hover { background: #293550; }
.character-card[aria-pressed="true"] { border-color: #ffe0a4; box-shadow: inset 0 0 0 2px #ffe0a4; background: #2d3350; }
.character-color { position: relative; display: grid; flex: none; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 9px; background: var(--character-color); color: #1b2034; font-size: 14px; font-weight: 900; }
.character-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
.character-card-image[hidden], .character-detail-image[hidden], .hud-portrait[hidden] { display: none; }
.character-card-copy { min-width: 0; }
.character-card-copy strong, .character-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.character-card-copy strong { font-size: 16px; }
.character-card-copy small { color: #d2c9da; font-size: 12px; }
.character-detail { padding: 8px 10px; border: 1px solid #ffffff33; border-radius: 10px; background: #171e32; }
.character-skill-detail { grid-area: detail; min-height: 0; padding: 10px 14px; }
.character-detail.character-skill-detail strong { font-size: 15px; }
.character-detail strong { color: #ffe4ac; font-size: 13px; }
.character-detail p { margin: 2px 0; }
.character-skill-list { display: grid; gap: 3px; margin: 5px 0 0; padding: 0; list-style: none; }
.character-skill-list li { color: #e8e3eb; font-size: 12px; line-height: 1.45; }
.character-skill-detail .character-skill-list li { font-size: 13px; }
.character-skill-list b { color: #ffdda2; }
.character-detail-image { float: right; width: 44px; height: 44px; margin: -2px 0 2px 8px; object-fit: cover; object-position: center 10%; border-radius: 8px; }
.character-help { display: grid; gap: 6px; margin-top: 12px; }

/* Opponent preview & results */
.result-dialog.opponent-dialog { width: min(100%, 600px); }
.opponent-preview { min-height: 124px; padding: 14px; border-color: #f5c88380; background: linear-gradient(135deg, #412f4b, #171e32); }
.opponent-preview strong { display: block; font-size: 19px; }
.opponent-preview .character-detail-image { width: 120px; height: 120px; margin-left: 14px; border-radius: 12px; }
.opponent-preview .character-skill-list li { font-size: 12px; }
.round-ladder { display: flex; justify-content: center; gap: 8px; margin: 2px 0 4px; }
.round-ladder span { display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border: 2px solid #ffffff33; border-radius: 10px; background: #171e32; color: #8d87a3; font-size: 13px; font-weight: 900; }
.round-ladder span img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
.round-ladder span.is-won { border-color: #8ec5f8; opacity: .55; }
.round-ladder span.is-next { border-color: #ffe0a4; box-shadow: 0 0 12px #ffe0a477; }
.pause-dialog { text-align: center; }
.pause-settings { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pause-settings button { border: 1px solid #f4c780; border-radius: 9px; padding: 8px 12px; background: #22283e; color: #ffe0a4; font-size: 13px; font-weight: 800; }
.help-fx-setting { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.help-fx-setting button { border: 1px solid #f4c780; border-radius: 8px; padding: 6px 10px; background: #22283e; color: #ffe0a4; font-size: 13px; font-weight: 800; }
.help-fx-setting small { color: #dbd4df; font-size: 12px; }
.rotate-hint { z-index: 1200; text-align: center; }
.rotate-icon { margin: 0; color: #ffd890; font-size: 44px !important; line-height: 1 !important; }

/* Tall dialogs */
.stage[data-layout="tall"] .dialog { padding: 18px 16px; border-radius: 16px; }
.stage[data-layout="tall"] .dialog h2 { font-size: 22px; }
.stage[data-layout="tall"] .title-dialog #modal-title { font-size: 36px; }
.stage[data-layout="tall"] .character-picker { grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "feature detail" "tabs tabs" "grid grid"; gap: 8px; }
.stage[data-layout="tall"] .character-grid { grid-auto-rows: auto; }
.stage[data-layout="tall"] .character-feature { height: 132px; }
.stage[data-layout="tall"] .character-feature-name { font-size: 16px; padding: 18px 6px 6px; }
.stage[data-layout="tall"] .character-skill-detail { padding: 8px 10px; }
.stage[data-layout="tall"] .character-skill-detail .character-skill-list li { font-size: 11px; }
.stage[data-layout="tall"] .character-detail.character-skill-detail strong { font-size: 13px; }
.stage[data-layout="tall"] .character-card { padding: 6px 8px; gap: 8px; }
.stage[data-layout="tall"] .character-color { width: 44px; height: 44px; }
.stage[data-layout="tall"] .character-card-copy strong { font-size: 14px; }
.stage[data-layout="tall"] .character-card-copy small { font-size: 11px; }
.stage[data-layout="tall"] .opponent-preview .character-detail-image { width: 84px; height: 84px; }

/* 妨害: stones, their warning strip and landing */
.tile.stone { background: repeating-linear-gradient(135deg, #8a8ea3 0 6px, #7a7e93 6px 12px), #80849a; color: #2d3042; border: 2px solid #c7cad8; box-shadow: inset 0 2px 0 #ffffff40, inset 0 -3px 0 #4a4d5f, 0 3px 0 #090b1d5c; }
.tile.stone .symbol { font-weight: 900; opacity: .75; }
.cell.is-landed .tile { animation: stoneLand .42s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes stoneLand { from { transform: translateY(-70%) scale(1.25); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.cell.is-matched .tile.stone { animation: stoneCrack .24s ease-out forwards; }
@keyframes stoneCrack { 0% { transform: scale(1); } 40% { transform: scale(1.12) rotate(-6deg); filter: brightness(1.5); } 100% { transform: scale(.2) rotate(12deg); opacity: 0; } }
.stone-warning { grid-area: board; align-self: start; justify-self: center; z-index: 4; position: relative; top: -12px; display: grid; gap: 3px; min-width: 112px; padding: 4px 12px 5px; border: 2px solid #ffcf9a; border-radius: 10px; background: #2b2232f2; color: #ffe2bd; font-size: 15px; font-weight: 900; text-align: center; box-shadow: 0 0 14px #ff9b7a88; animation: warnPulse .5s ease-in-out infinite alternate; pointer-events: none; }
.stone-warning span::before { content: '▼ '; color: #ff9b7a; }
.stone-warning i { display: block; height: 4px; border-radius: 9px; background: #ff9b7a; }
@keyframes warnPulse { to { box-shadow: 0 0 22px #ff9b7a; } }
.stage[data-layout="tall"] .cpu-panel .stone-warning { min-width: 80px; padding: 2px 6px 3px; font-size: 12px; top: -4px; }
.toast { position: absolute; z-index: 30; left: 50%; bottom: 46px; width: max-content; max-width: min(92%, 640px); padding: 10px 18px; border: 2px solid #ffd890; border-radius: 12px; background: #231d36f5; color: #fff1cc; font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center; box-shadow: 0 10px 30px #0009; transform: translateX(-50%); animation: toastIn .3s ease-out both; pointer-events: none; }
.toast-achievement { border-color: #9fe0ff; color: #e6f7ff; }
.toast-achievement::before { content: '🏆 '; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.stage[data-layout="tall"] .toast { bottom: 18px; font-size: 13px; padding: 8px 12px; }

/* Wide with portraits: a skill cut-in appears over the bottom of its own portrait */
.stage[data-layout="wide"]:not(.no-art) .match-topline { top: auto; bottom: 62px; left: 29px; right: 29px; grid-template-columns: repeat(2, calc(var(--art-w) + 6px)); }
.stage[data-layout="wide"]:not(.no-art) .skill-cutin { top: auto; bottom: 0; height: auto; min-height: 70px; padding: 6px 8px 6px 6px; }
.stage[data-layout="wide"]:not(.no-art) .skill-cutin-portrait { width: 48px; height: 48px; }
.stage[data-layout="wide"]:not(.no-art) .skill-notice { max-height: 3.7em; font-size: 15px; }

/* Achievements */
.result-dialog.achievements-dialog { width: min(100%, 760px); }
.achievement-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; max-height: calc(var(--stage-h) - 300px); overflow: auto; padding-right: 4px; }
.achievement-list h3 { grid-column: 1 / -1; margin: 8px 0 0; color: #ffd890; font-size: 14px; }
.achievement { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #ffffff22; border-radius: 9px; background: #171e32; color: #9d98b0; }
.achievement strong { display: block; font-size: 14px; }
.achievement small { display: block; font-size: 12px; line-height: 1.4; }
.achievement.is-unlocked { border-color: #ffd89077; background: #2a2440; color: #fff1cc; }
.achievement-mark { flex: none; font-size: 20px; color: #6c6880; }
.achievement.is-unlocked .achievement-mark { color: #ffd890; }
.stage[data-layout="tall"] .achievement-list { grid-template-columns: 1fr; }
.unlocked-note { margin: 0 !important; padding: 8px 12px; border: 1px solid #9fe0ff66; border-radius: 10px; background: #18304a; color: #d9f3ff !important; font-weight: 800; text-align: center; }
.link-button { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 14px; border: 1px solid #ffffff38; border-radius: 99px; background: #070b14c7; color: #f5f8ff; font-size: 12px; font-weight: 700; }
.link-button:hover { border-color: #ffd890; }

/* Title menu */
.title-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.title-entry { text-align: left !important; }
.title-entry strong, .title-entry span { display: block; }
.title-entry span { margin-top: 2px; font-size: 12px; font-weight: 500; }
.title-entry.choice-button { grid-column: 1 / -1; text-align: center !important; }
.title-entry.choice-button strong { font-size: 19px; }
.title-entry strong { font-size: 16px; }
.title-entry span { color: inherit; opacity: .8; }
.stage[data-layout="tall"] .title-menu { grid-template-columns: 1fr; }
.result-dialog.title-dialog { width: min(100%, 620px); }
.character-card.is-cleared { border-color: #ffd89088; }

/* Story scenes: background, two portraits, text box */
.story-scene { position: absolute; z-index: 900; inset: 0; overflow: hidden; background: #0b0a18; cursor: pointer; user-select: none; }
.story-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: background-image .4s; }
.story-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #07081299 80%, #070812dd); }
.story-bg-festival { background-color: #1c1830; background-image: radial-gradient(circle at 20% 70%, #ffb46a55 0, transparent 22%), radial-gradient(circle at 75% 65%, #ff8fa055 0, transparent 20%), radial-gradient(circle at 50% 20%, #3a2f6b 0, transparent 60%), linear-gradient(180deg, #151a3a, #2a2140 70%, #3a2a3c); }
.story-bg-skyrope { background-color: #0d1230; background-image: linear-gradient(160deg, transparent 44%, #ffe9b066 48%, #fff6dc 50%, #ffe9b066 52%, transparent 56%), radial-gradient(circle at 30% 30%, #ffffff22 0 1px, transparent 2px), linear-gradient(180deg, #070b22, #1b1f4a); }
.story-bg-tower { background-color: #161a2e; background-image: radial-gradient(ellipse at 50% 0%, #4c3f7a 0, transparent 60%), linear-gradient(180deg, #10132a, #262844 65%, #3b3550); }
.story-bg-rift { background-color: #12091f; background-image: radial-gradient(ellipse at 50% 30%, #000 0 12%, #6b4fa0aa 18%, transparent 42%), linear-gradient(180deg, #0b0614, #2a1640); }
.story-bg-dawn { background-color: #3a2a48; background-image: radial-gradient(ellipse at 50% 100%, #ffd39a 0, #ff9f86aa 30%, transparent 62%), linear-gradient(180deg, #2b3a6b, #b5788f 70%, #ffc89a); }
.story-actor { position: absolute; bottom: 150px; width: 46%; max-width: 520px; aspect-ratio: 1; transition: filter .2s, transform .2s, opacity .2s; filter: brightness(.55) saturate(.8); transform: scale(.96); }
.story-actor.is-speaking { filter: none; transform: none; }
.story-left { left: 2%; }
.story-right { right: 2%; }
.story-face { position: absolute; inset: 0; }
.story-right .story-face { transform: scaleX(-1); }
.story-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 12px 20px #0009); }
.story-portrait.is-front { z-index: 2; opacity: 1; }
.story-portrait.is-leaving { z-index: 1; }
/* expression change: the new face pops in brighter while the old one sinks away under a soft flash */
.story-actor.is-changing .story-portrait.is-front { animation: faceIn .3s cubic-bezier(.2, .8, .25, 1) both; }
.story-actor.is-changing .story-portrait.is-leaving { animation: faceOut .3s linear both; }
@keyframes faceIn { 0% { opacity: 0; transform: translateY(-1.6%) scale(1.035); filter: brightness(1.45) drop-shadow(0 12px 20px #0009); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; filter: drop-shadow(0 12px 20px #0009); } }
/* the old face stays solid under the new one until it is almost in, so the figure never turns see-through */
@keyframes faceOut { 0%, 50% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(.6%) scale(.99); } }
.story-actor::after { content: ''; position: absolute; left: 22%; top: 4%; width: 56%; height: 56%; border-radius: 50%; background: radial-gradient(circle, #fffbea 0, #fff2c466 34%, transparent 70%); opacity: 0; pointer-events: none; }
.story-actor.is-changing::after { animation: faceFlash .32s ease-out; }
@keyframes faceFlash { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: .75; } 100% { opacity: 0; transform: scale(1.25); } }
.story-actor.is-entering { animation: actorIn .32s ease-out; }
@keyframes actorIn { from { opacity: 0; translate: 0 3%; } }
.story-actor[data-face="sad"]:not(.is-exact) .story-portrait { filter: saturate(.6) brightness(.85) drop-shadow(0 12px 20px #0009); }
.story-actor[data-face="angry"]:not(.is-exact) .story-portrait { filter: drop-shadow(0 0 14px #ff6f6f88) drop-shadow(0 12px 20px #0009); }
.story-actor[data-face="surprised"].is-speaking { animation: storyHop .3s ease-out; }
@keyframes storyHop { 40% { transform: translateY(-14px); } }
.story-emote { position: absolute; top: 12%; right: 16%; min-width: 46px; padding: 2px 10px; border: 3px solid #fff; border-radius: 999px; background: #ffffffee; color: #2b2340; font-size: 26px; font-weight: 900; text-align: center; box-shadow: 0 4px 10px #0007; }
.story-emote:empty { display: none; }
.story-right .story-emote { right: auto; left: 16%; }
.story-box { position: absolute; left: 50%; bottom: 22px; width: min(92%, 980px); min-height: 128px; padding: 18px 26px 16px; border: 2px solid #ffd89099; border-radius: 16px; background: linear-gradient(160deg, #241d3af2, #141a2ef5); box-shadow: 0 16px 40px #000a; transform: translateX(-50%); }
.story-name { position: absolute; top: -18px; left: 22px; min-width: 120px; padding: 4px 16px; border: 2px solid #ffd890; border-radius: 10px; background: #3a2c48; color: #fff1cc; font-size: 18px; text-align: center; }
.story-name:empty, .story-box.is-narration .story-name { display: none; }
.story-text { margin: 4px 0 0; color: #f6f0ff; font-size: 21px; line-height: 1.7; white-space: pre-wrap; }
.story-box.is-narration .story-text { color: #e5ddf5; font-style: italic; text-align: center; }
.story-next { position: absolute; top: 14px; right: 142px; z-index: 2; border: 1px solid #ffd89099; border-radius: 999px; padding: 6px 14px; background: #0b0d1ccc; color: #ffd890; font-size: 13px; font-weight: 800; }
@keyframes nextBlink { to { transform: translateY(4px); opacity: .5; } }
.story-scene.is-cg .story-actor, .story-scene.is-cg .story-box { opacity: 0; pointer-events: none; transition: opacity .6s; }
.story-cg { animation: cgIn 1.4s ease-out both; }
.story-cg::after { display: none; }
@keyframes cgIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
#modal.has-key-art { background: linear-gradient(180deg, #090d1d55, #090d1dcc 85%), var(--key-art) center / cover no-repeat; backdrop-filter: none; -webkit-backdrop-filter: none; }
#modal.has-key-art .title-dialog { background: linear-gradient(155deg, #443859e8, #28253eee); }
.story-skip { position: absolute; top: 14px; right: 16px; z-index: 2; border: 1px solid #ffffff55; border-radius: 999px; padding: 6px 14px; background: #0b0d1ccc; color: #f0eaff; font-size: 13px; font-weight: 800; }
.stage[data-layout="tall"] .story-actor { width: 92%; bottom: 200px; }
.stage[data-layout="tall"] .story-left { left: 4%; }
.stage[data-layout="tall"] .story-right { right: 4%; }
/* phones show only the speaker, large */
.stage[data-layout="tall"] .story-actor:not(.is-speaking) { opacity: 0; }
.stage[data-layout="tall"] .story-box { width: calc(100% - 20px); bottom: 14px; min-height: 150px; padding: 18px 16px 14px; }
.stage[data-layout="tall"] .story-text { font-size: 17px; }

/* Online */
.countdown { position: absolute; z-index: 40; left: 50%; top: 46%; color: #fff1cc; font-size: 120px; font-weight: 900; text-shadow: 0 0 30px #ffd890, 0 6px 0 #3a2c48; transform: translate(-50%, -50%); pointer-events: none; animation: countPop .4s ease-out; }
@keyframes countPop { from { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
.room-code { margin: 6px 0 !important; padding: 12px; border: 2px dashed #ffd890; border-radius: 14px; background: #171e32; color: #fff1cc !important; font-size: 44px !important; font-weight: 900; letter-spacing: .3em; text-align: center; user-select: all; -webkit-user-select: all; }
.code-input { width: 100%; padding: 12px; border: 2px solid #ffd890; border-radius: 12px; background: #171e32; color: #fff1cc; font: 900 32px/1 inherit; letter-spacing: .3em; text-align: center; text-transform: uppercase; }
.online-versus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.online-fighter { display: grid; justify-items: center; gap: 6px; padding: 10px; border: 1px solid #ffffff33; border-radius: 12px; background: #171e32; }
.online-fighter small { color: #cfc8e0; font-size: 12px; }
.online-standing, .rating-note { margin: 0 !important; padding: 8px 12px; border: 1px solid #ffd89055; border-radius: 10px; background: #171e32; color: #fff1cc !important; font-weight: 800; text-align: center; }
.rating-note { font-size: 16px !important; }
.online-fighter img { width: 120px; height: 120px; object-fit: cover; object-position: center 10%; border-radius: 10px; }
.title-entry[data-action="online"]:not(:hover) span { color: inherit; }

/* Wide without room for the big portraits */
.stage[data-layout="wide"].no-art .human-panel, .stage[data-layout="wide"].no-art .cpu-panel { grid-template-columns: var(--board); grid-template-areas: "copy" "board" "hit"; }

/* Character select: the nested selection box takes part in the picker grid */
.character-selection { display: contents; }
.menu-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; align-items: stretch; }
.menu-actions .secondary-button { margin-top: 0; }
.stage[data-layout="tall"] .menu-actions { grid-template-columns: 1fr; }
.stage[data-layout="tall"] .menu-actions .choice-button { order: -1; }

/* Tutorial */
.coach { position: absolute; z-index: 8; inset: 8px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 16px 18px; border: 2px solid #ffd890; border-radius: 14px; background: linear-gradient(160deg, #3a2f52f5, #1b2238f8); box-shadow: 0 0 24px #ffd89044; }
.coach-head { display: flex; justify-content: space-between; align-items: center; }
.coach-head small { color: #ffd890; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.coach > strong { color: #fff1cc; font-size: 22px; }
.coach p { margin: 0; color: #ece6f2; font-size: 15px; line-height: 1.65; }
.coach-progress { color: #ffd890; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.coach-skip { border: 1px solid #ffffff55; border-radius: 8px; padding: 4px 10px; background: #ffffff12; color: #e6dff0; font-size: 12px; }
.coach.is-compact { inset: auto 8px 8px; padding: 10px 14px; gap: 3px; }
.coach.is-compact > strong { font-size: 16px; }
.coach.is-compact p { font-size: 12px; line-height: 1.5; }
.stage[data-layout="tall"] .coach { inset: 4px; padding: 8px 10px; gap: 2px; }
.stage[data-layout="tall"] .coach > strong { font-size: 15px; }
.stage[data-layout="tall"] .coach p { font-size: 11.5px; line-height: 1.45; }
.stage[data-layout="tall"] .coach-progress { font-size: 12px; }
.stage[data-layout="tall"] .coach.is-compact { inset: 4px; }
.cell.tutorial-hint { background: #ffd89055; box-shadow: inset 0 0 0 3px #ffd890; animation: hintPulse .9s ease-in-out infinite alternate; }
@keyframes hintPulse { from { box-shadow: inset 0 0 0 2px #ffd89088; } to { box-shadow: inset 0 0 0 4px #ffe9b8, 0 0 14px #ffd890; } }

@media (prefers-reduced-motion: reduce) {
  .cell.is-matched .tile { animation: none; transition: opacity .1s; opacity: 0; }
  .tile.is-swapping { animation: none; }
  .cell.is-new .tile, .board-panel.attack, .match-fx-layer span { animation: none; }
  .skill-cutin.is-entering, .cpu-cutin-slot .skill-cutin.is-entering { animation: none; }
  .tug-marker { transition: none; }
  .gauge-stage-layer span, .gauge-banner, .gauge-boost { animation: none !important; }
  .gauge-projectile { filter: none; }
  .tug-track.danger-human, .tug-track.danger-cpu { box-shadow: inset 0 3px 8px #0b0a1b77, 0 0 0 2px #ffffff99; }
  .cell.tutorial-hint, .cell.is-landed .tile, .stone-warning, .toast, .story-actor, .story-next, .countdown { animation: none !important; }
  .story-actor.is-changing .story-portrait { animation: faceFade .15s linear both !important; }
  .story-actor.is-changing .story-portrait.is-leaving { animation-direction: reverse !important; }
  .story-actor.is-changing::after { animation: none !important; }
  @keyframes faceFade { from { opacity: 0; } to { opacity: 1; } }
}