:root {
  color-scheme: dark;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --cyan: #38e7ff;
  --amber: #ffb236;
  --ink: #071017;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #05090d; overscroll-behavior: none; }
body { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; color: #fff; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.app-shell { width: min(100vw, 1280px); padding: 18px; }
.game-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - 62px); margin: auto; overflow: hidden; border: 1px solid #2a414c; border-radius: 16px; background: #071510; box-shadow: 0 22px 80px #000, 0 0 0 4px #020609; user-select: none; }
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.outside-tip { margin: 13px 0 0; color: #6f8791; text-align: center; font-size: 12px; letter-spacing: .08em; }

.page { position: absolute; inset: 0; z-index: 5; display: none; }
.page.is-active { display: flex; }
.menu-page { align-items: center; flex-direction: column; justify-content: center; background: linear-gradient(90deg, rgba(2,7,10,.93), rgba(2,7,10,.25) 40%, rgba(2,7,10,.25) 60%, rgba(2,7,10,.93)); }
.menu-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, transparent 0 18%, rgba(2,7,9,.38) 62%, #020609 105%); pointer-events: none; }
.title-lockup { position: relative; z-index: 2; text-align: center; transform: translateY(-6%); text-shadow: 0 5px 22px #000; }
.title-lockup .eyebrow { display: block; margin-bottom: 8px; color: #95f6ef; font-size: clamp(8px, 1vw, 13px); font-weight: 800; letter-spacing: .42em; }
.title-lockup h1 { margin: 0; font-size: clamp(42px, 8vw, 94px); line-height: .86; font-weight: 1000; font-style: italic; letter-spacing: -.08em; background: linear-gradient(#fff 8%, #c6faff 36%, #32d8de 50%, #097695 68%, #dcffff 71%, #15516f 92%); -webkit-background-clip: text; color: transparent; -webkit-text-stroke: clamp(1px, .22vw, 3px) #062a3a; filter: drop-shadow(0 0 15px #11d9ff80); }
.title-lockup p { margin: 3px 0 0; color: #ffd36a; font-size: clamp(15px, 2.2vw, 28px); font-weight: 1000; font-style: italic; letter-spacing: .65em; text-indent: .65em; text-shadow: 0 2px #683400, 0 0 16px #f80; }
.menu-actions { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(2, minmax(145px, 220px)); gap: 10px; margin-top: clamp(15px, 3.4vw, 35px); }
.primary-btn { position: relative; min-height: clamp(53px, 7.4vw, 78px); padding: 9px 22px; overflow: hidden; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); background: linear-gradient(130deg, #14313c, #071119); border: 1px solid #4cecff; text-align: left; box-shadow: inset 0 0 18px #24cce82e; transition: .18s ease; }
.primary-btn::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(100deg, transparent, #fff4, transparent); transition: .35s; }
.primary-btn:hover { transform: translateY(-3px) scale(1.025); filter: brightness(1.28); }
.primary-btn:hover::after { transform: translateX(110%); }
.primary-btn span { display: block; font-size: clamp(16px, 2vw, 25px); font-weight: 950; font-style: italic; }
.primary-btn small { color: #aac2c9; font-size: clamp(8px, 1vw, 11px); letter-spacing: .12em; }
.primary-btn.amber { border-color: #ffbd46; box-shadow: inset 0 0 18px #ff8f242e; }
.text-btn { grid-column: 1 / -1; justify-self: center; padding: 7px 18px; background: transparent; color: #b7cad1; font-size: clamp(10px, 1.1vw, 13px); letter-spacing: .16em; text-decoration: underline; text-underline-offset: 5px; }
.menu-footnote { position: absolute; z-index: 3; bottom: 4%; color: #76929b; font-size: clamp(8px, 1vw, 11px); letter-spacing: .22em; }
.menu-tops i { position: absolute; z-index: 1; width: clamp(70px, 12vw, 150px); aspect-ratio: 1; border-radius: 50%; opacity: .42; filter: blur(.2px); animation: menuSpin 5s linear infinite; }
.menu-top-a { left: 7%; top: 31%; background: repeating-conic-gradient(#e7ffff 0 8deg, #177e99 8deg 22deg, #061c29 22deg 30deg); box-shadow: 0 0 50px #26e7ff; }
.menu-top-b { right: 8%; top: 37%; background: repeating-conic-gradient(#fff0a3 0 8deg, #d13b16 8deg 22deg, #260900 22deg 30deg); box-shadow: 0 0 50px #ff651f; animation-direction: reverse !important; }
@keyframes menuSpin { to { transform: rotate(360deg); } }

.select-page, .help-page { flex-direction: column; padding: 4.2% 6.5%; background: linear-gradient(135deg, rgba(3,12,17,.94), rgba(8,37,40,.86)); backdrop-filter: blur(7px); }
.panel-header { display: flex; align-items: center; gap: 14px; }
.panel-header div { display: flex; flex-direction: column; }
.panel-header span { font-size: clamp(18px, 2.5vw, 32px); font-weight: 950; font-style: italic; letter-spacing: .05em; }
.panel-header small { color: #5edbcf; font-size: clamp(8px, 1vw, 11px); font-weight: 800; letter-spacing: .22em; }
.back-btn { width: clamp(32px, 4vw, 46px); aspect-ratio: 1; border-radius: 4px; background: #122a33; color: #82f2eb; font-size: clamp(24px, 3vw, 38px); line-height: 1; border: 1px solid #2a6973; }
.fighter-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4%; flex: 1; min-height: 0; padding: 1.5% 6%; }
.fighter-card { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; height: 94%; border: 1px solid #4aa5b4; background: linear-gradient(160deg, #0d2732c7, #071016e8); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); box-shadow: inset 0 0 34px #2bd8ff18; }
.p2-card { border-color: #b36e49; box-shadow: inset 0 0 34px #ff892b18; clip-path: polygon(0 0, 92% 0, 100% 100%, 8% 100%); }
.player-tag { position: absolute; top: 5%; color: #86f7ee; font-size: clamp(8px, .9vw, 12px); font-weight: 900; letter-spacing: .2em; }
.p2-card .player-tag { color: #ffc277; }
.fighter-card h2 { margin: 4px 0 7px; font-size: clamp(12px, 1.6vw, 21px); font-weight: 900; }
.fighter-card > small { color: #76949e; font-size: clamp(7px, .9vw, 11px); }
.spinner-preview { width: clamp(62px, 10vw, 116px); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(#eefcff 0 8deg, var(--main) 8deg 23deg, var(--deep) 23deg 30deg); border: clamp(5px, .7vw, 8px) double #d9eff2; box-shadow: 0 0 24px var(--glow), inset 0 0 15px #000; animation: menuSpin 2.8s linear infinite; }
.spinner-preview::after { content: ""; display: block; width: 38%; aspect-ratio: 1; margin: 31%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--main) 32%, #081016 70%); box-shadow: 0 0 9px #fff; }
.spinner-red { --main: #ff4c23; --deep: #521107; --glow: #ff572e; }
.spinner-blue { --main: #29bfff; --deep: #06385f; --glow: #28dcff; }
.spinner-green { --main: #48e978; --deep: #075034; --glow: #49ff9a; }
.versus-mark { display: flex; flex-direction: column; font-size: clamp(24px, 4vw, 54px); line-height: .66; font-weight: 1000; font-style: italic; color: #fff; text-shadow: -3px 0 #16d8e7, 3px 0 #ff7c2d; transform: skew(-8deg); }
.swatches { display: flex; gap: clamp(5px, .8vw, 10px); margin-bottom: 5px; }
.swatch { width: clamp(14px, 2vw, 23px); aspect-ratio: 1; border-radius: 50%; border: 2px solid #ffffff35; box-shadow: 0 2px 7px #000; }
.swatch.red { background: #ff4824; }.swatch.blue { background: #24bfff; }.swatch.green { background: #45e876; }
.swatch.is-selected { outline: 2px solid #fff; outline-offset: 2px; transform: scale(1.1); }
.match-options { display: flex; justify-content: center; gap: 5%; }
.match-options label { display: flex; align-items: center; gap: 10px; color: #a8bbc2; font-size: clamp(9px, 1.1vw, 13px); }
.stepper { display: flex; align-items: center; border: 1px solid #315666; background: #071117; }
.stepper button { width: clamp(24px, 3vw, 36px); height: clamp(22px, 2.7vw, 32px); background: #102933; color: #8cf6ed; }
.stepper b { min-width: clamp(27px, 3vw, 38px); text-align: center; font-size: clamp(12px, 1.6vw, 19px); }
.start-btn { align-self: center; min-width: 28%; margin-top: 1.4%; padding: clamp(8px, 1.1vw, 14px) 30px; background: linear-gradient(#ffe478, #f38b16); color: #291000; font-size: clamp(14px, 1.7vw, 22px); font-weight: 1000; font-style: italic; clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); box-shadow: 0 0 25px #ff96186b; }

.help-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2%; flex: 1; align-items: center; }
.help-content article { display: flex; gap: 12px; height: 62%; padding: 8% 6%; background: #0b2029d9; border-top: 2px solid #3bdacc; }
.help-content b { color: #4fe9d9; font-size: clamp(21px, 3vw, 40px); font-style: italic; }
.help-content h2 { margin: 3px 0 8px; font-size: clamp(12px, 1.5vw, 19px); }
.help-content p { margin: 0; color: #94aab2; font-size: clamp(8px, 1.05vw, 13px); line-height: 1.65; }
.secondary-btn { align-self: center; padding: 9px 34px; background: #173b47; border: 1px solid #54dcd2; color: #d9fffb; font-weight: 800; }

.hud { position: absolute; inset: 0 0 auto; z-index: 4; display: none; align-items: flex-start; justify-content: center; gap: 1px; padding-top: .45%; pointer-events: none; }
.hud.is-active { display: flex; }
.score-chip { display: flex; align-items: center; gap: clamp(3px, .55vw, 7px); min-width: 14%; height: clamp(21px, 3vw, 34px); padding: 0 1.1%; background: linear-gradient(90deg, #40130edb, #161c22d8); border-bottom: 2px solid #ff6f2c; transform: skew(-10deg); box-shadow: 0 3px 10px #0008; }
.score-chip > * { transform: skew(10deg); }
.score-chip i { width: clamp(9px, 1.35vw, 16px); aspect-ratio: 1; border-radius: 50%; background: #ff5427; box-shadow: 0 0 8px #ff642a; }
.score-chip span { flex: 1; font-size: clamp(7px, .9vw, 11px); font-weight: 800; }
.score-chip b { font-size: clamp(15px, 2vw, 23px); font-style: italic; }
.player-two { background: linear-gradient(90deg, #161c22e8, #07304aeb); border-color: #32d7ff; transform: skew(10deg); }
.player-two > * { transform: skew(-10deg); }.player-two i { background: #28c2ff; box-shadow: 0 0 10px #39dcff; }
.round-chip { display: flex; align-items: center; flex-direction: column; justify-content: center; width: clamp(36px, 5vw, 58px); height: clamp(27px, 3.8vw, 43px); background: #081116e8; border: 1px solid #c4f9f4; clip-path: polygon(13% 0, 87% 0, 100% 22%, 88% 100%, 12% 100%, 0 22%); }
.round-chip span { color: #809ca4; font-size: clamp(4px, .5vw, 6px); font-weight: 900; }.round-chip b { font-size: clamp(12px, 1.55vw, 18px); }
.pause-btn { position: absolute; right: 2%; top: 9%; width: clamp(27px, 3.6vw, 42px); aspect-ratio: 1; border: 1px solid #65818a; border-radius: 50%; background: #061015c9; color: #a8c2c8; pointer-events: auto; font-weight: 900; }
.score-banner { position: absolute; z-index: 7; left: 50%; top: 48%; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; min-width: 30%; padding: 7px 22px 8px; opacity: 0; background: linear-gradient(90deg, transparent, #4b160de8 15%, #10171ced 85%, transparent); border-block: 1px solid #ff7a3e; transform: translate(-50%, -50%) scale(.65); pointer-events: none; text-align: center; filter: drop-shadow(0 5px 16px #000); }
.score-banner small { grid-column: 1 / -1; color: #ffd378; font-size: clamp(6px, .7vw, 9px); font-weight: 900; letter-spacing: .35em; }
.score-banner strong { padding-right: 18px; font-size: clamp(15px, 2.3vw, 28px); font-style: italic; }.score-banner b { color: #ffe38a; font-size: clamp(20px, 3vw, 36px); }
.score-banner.player-two-score { background: linear-gradient(90deg, transparent, #0a3c55e8 15%, #10171ced 85%, transparent); border-color: #55dfff; }
.score-banner.is-active { animation: scoreReveal 1.15s ease both; }
@keyframes scoreReveal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.65); } 15%, 68% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -57%) scale(1.04); } }
.countdown { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; background: #02090c2e; color: #fff; font-size: clamp(64px, 16vw, 180px); font-weight: 1000; font-style: italic; text-shadow: 0 0 18px #39d7ff, 5px 5px 0 #0c5d7b; pointer-events: none; }
.countdown.is-active { display: grid; animation: countPulse .7s ease-in-out infinite; }
@keyframes countPulse { 0% { transform: scale(.75); opacity: 0; } 35% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.08); opacity: .7; } }

.modal-panel { position: absolute; inset: 0; z-index: 9; display: none; place-items: center; background: #01070bbd; backdrop-filter: blur(5px); }
.modal-panel.is-open { display: grid; }
.modal-card { display: flex; align-items: stretch; flex-direction: column; min-width: 34%; padding: 4% 5%; border: 1px solid #397481; background: linear-gradient(150deg, #102b35, #071017); box-shadow: 0 18px 60px #000, inset 0 0 35px #35d9ec12; text-align: center; }
.modal-kicker { color: #52e1d7; font-size: clamp(7px, .9vw, 11px); font-weight: 800; letter-spacing: .24em; }.modal-card h2 { margin: 8px 0 20px; font-size: clamp(20px, 3vw, 39px); font-style: italic; }.result-card p { margin: -10px 0 17px; color: #ffd45e; font-size: clamp(23px, 4vw, 48px); font-weight: 1000; }

.touch-controls { position: absolute; inset: 0; z-index: 5; display: none; pointer-events: none; }
.touch-controls.is-active { display: block; }
.touch-pad { position: absolute; bottom: 4%; display: grid; grid-template: repeat(3, clamp(25px, 5.5vw, 46px)) / repeat(3, clamp(25px, 5.5vw, 46px)); pointer-events: auto; opacity: .72; }
.p1-pad { left: 4%; }.p2-pad { right: 4%; }
.touch-pad button { border: 1px solid #ffffff42; border-radius: 50%; background: #08151bc7; color: #c9ffff; font-size: clamp(8px, 1.5vw, 15px); }
.touch-pad button:nth-child(1) { grid-area: 1 / 2; }.touch-pad button:nth-child(2) { grid-area: 2 / 1; }.touch-pad i { grid-area: 2 / 2; }.touch-pad button:nth-child(4) { grid-area: 2 / 3; }.touch-pad button:nth-child(5) { grid-area: 3 / 2; }
.touch-pad button.is-pressed { background: #4ce3ef; color: #061015; transform: scale(.92); }

@media (pointer: fine) { .touch-controls { display: none !important; } }
@media (max-aspect-ratio: 4 / 3) {
  .app-shell { padding: 6px; }.outside-tip { display: none; }.game-frame { max-height: 100svh; border-radius: 7px; }
}
@media (max-width: 680px) {
  .select-page, .help-page { padding: 3.3% 4%; }
  .fighter-grid { padding: 1% 2%; gap: 2%; }
  .help-content article { gap: 5px; }
  .menu-actions { margin-top: 10px; }
}