.game-page { width: 100vw; height: 100vh; height: 100svh; overflow: hidden; }
.game-header { position: fixed; z-index: 30; display: flex; align-items: center; justify-content: space-between; inset: 0 0 auto; min-height: 4.5rem; padding: env(safe-area-inset-top) max(var(--page-pad), env(safe-area-inset-right)) 0 max(var(--page-pad), env(safe-area-inset-left)); background: linear-gradient(to bottom, rgba(2,4,6,.88), transparent); pointer-events: none; }
.game-header a, .game-header button { pointer-events: auto; }
.game-actions { display: flex; align-items: center; gap: 0.65rem; }
.orientation-label { color: var(--muted); font: 0.62rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.icon-button { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.icon-button:hover { border-color: var(--cyan); color: var(--cyan); }
.game-main { position: fixed; inset: 0; }
.scoreboard { position: fixed; z-index: 20; top: max(.9rem, env(safe-area-inset-top)); left: 50%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; width: min(52vw, 42rem); transform: translateX(-50%); pointer-events: none; }
.player-score { display: flex; align-items: baseline; gap: 0.8rem; color: var(--muted); font: 0.65rem var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.player-score strong { color: var(--text); font: 800 clamp(2rem, 5vw, 4rem)/0.8 var(--font-sans); text-shadow: 0 0 1rem currentColor; }
.player-score--one strong { color: var(--cyan); }
.player-score--two { justify-content: flex-end; }
.player-score--two strong { color: var(--orange); }
.match-target { color: var(--muted); text-align: center; font: 0.56rem var(--font-mono); text-transform: uppercase; }
.match-target strong { display: block; color: var(--text); font-size: 0.85rem; }
.arena-frame { position: fixed; inset: 0; }
.play-arena { container-type: size; position: relative; overflow: hidden; width: 100vw; height: 100vh; height: 100svh; border: 0; background: #020609; box-shadow: inset 0 0 8rem rgba(48, 242, 255, 0.045); cursor: crosshair; touch-action: none; user-select: none; }
.play-grid { position: absolute; inset: 0; opacity: 0.42; background-image: linear-gradient(rgba(48,242,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(48,242,255,.06) 1px, transparent 1px); background-size: 8% 13.333%; }
:root[data-motion="reduced"] .play-grid { opacity: .2; }
:root[data-motion="intense"] .play-grid { opacity: .68; background-size: 5% 8%; }
.center-line { position: absolute; top: 3%; bottom: 3%; left: 50%; border-left: 1px dashed rgba(238,250,255,.23); }
.brick-wall { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.power-up-layer { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.projectile-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.cannon-shot { --shot-color: var(--cyan); position: absolute; border-radius: 999px; background: white; box-shadow: 0 0 .45rem white, 0 0 .9rem var(--shot-color); color: var(--shot-color); will-change: transform; }
.cannon-shot--1 { --shot-color: var(--cyan); }
.cannon-shot--2 { --shot-color: var(--orange); }
.cannon-shot.is-impact { animation: shot-impact 240ms ease-out forwards; }
.cannon-shot.is-faded { animation: shot-fade 240ms ease-out forwards; }
.falling-power { --drop-color: var(--cyan); position: absolute; display: grid; aspect-ratio: 1; place-items: center; border: 1px solid var(--drop-color); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--drop-color), transparent 58%), rgba(2,4,6,.92) 72%); box-shadow: 0 0 .7rem var(--drop-color), inset 0 0 .55rem color-mix(in srgb, var(--drop-color), transparent 35%); color: var(--drop-color); will-change: transform; animation: drop-signal 850ms ease-in-out infinite alternate; }
.falling-power .power-icon { width: 68%; height: 68%; }
.falling-power.is-caught { animation: drop-caught 360ms var(--ease-organic) forwards; }
.falling-power.is-missed { animation: drop-missed 360ms ease-out forwards; }
.pickup-notice { position: fixed; left: 50%; padding: .35rem .6rem; border: 1px solid currentColor; border-radius: 999px; background: rgba(2,4,6,.82); font: .62rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); animation: pickup-notice 2.2s ease-out forwards; }
.pickup-notice--1 { bottom: 16%; color: var(--cyan); }
.pickup-notice--2 { top: 16%; color: var(--orange); }
.pickup-notice--system { top: 12%; color: var(--text); }
@keyframes drop-signal { to { filter: brightness(1.45); } }
@keyframes drop-caught { 60% { filter: brightness(3); opacity: 1; } to { filter: brightness(4) blur(3px); opacity: 0; } }
@keyframes drop-missed { to { filter: blur(4px); opacity: 0; } }
@keyframes pickup-notice { 82% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -1rem); } }
@keyframes extension-lock { 50% { filter: brightness(2); opacity: .45; transform: scale(1.08); } }
@keyframes impulse-flash { 35% { filter: brightness(2.8); } }
@keyframes impulse-trail { 25% { opacity: .85; } to { opacity: 0; } }
@keyframes shield-break { 35% { filter: brightness(3); opacity: 1; } to { filter: blur(5px); opacity: 0; } }
@keyframes cannon-fire { 45% { filter: brightness(3); box-shadow: 0 0 1rem currentColor; } }
@keyframes shot-impact { to { filter: brightness(4) blur(3px); opacity: 0; } }
@keyframes shot-fade { to { opacity: 0; } }
@keyframes level-cleared { to { clip-path: inset(48% 0 round 50%); filter: brightness(3) blur(3px); opacity: 0; } }
@keyframes level-enter { from { clip-path: inset(48% 0 round 50%); filter: brightness(3) blur(4px); opacity: 0; } }
.play-brick { position: absolute; width: auto; height: auto; will-change: transform; }
.play-brick[data-strength="2"] { border-width: 2px; }
.play-brick[data-strength="3"] { outline: 1px solid color-mix(in srgb, var(--brick-color), transparent 56%); outline-offset: -3px; }
body:not([data-test-mode="true"]) .ai-target { outline: none; }
body[data-test-mode="true"][data-show-ai-targets="true"] .ai-target { outline: 2px solid currentColor; outline-offset: 3px; animation: ai-target-pulse 900ms ease-in-out infinite alternate; }
body[data-test-mode="true"] .ai-target--1 { color: var(--cyan); }
body[data-test-mode="true"] .ai-target--2 { color: var(--orange); }
@keyframes ai-target-pulse { to { filter: brightness(1.8); } }
.brick-wall.is-cleared .play-brick { animation: level-cleared 480ms var(--ease-out) forwards !important; }
.brick-wall.is-entering .play-brick { animation: level-enter 680ms var(--ease-organic) backwards !important; }
.ball-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.play-paddle, .play-ball { position: absolute; z-index: 2; will-change: transform; }
.play-paddle { left: 0; top: 0; width: 1.4%; height: 18%; border: 1px solid color-mix(in srgb, currentColor, white 58%); border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, currentColor, transparent 72%), color-mix(in srgb, currentColor, white 70%), color-mix(in srgb, currentColor, transparent 72%)); box-shadow: 0 0 .55rem currentColor, 0 0 1.5rem color-mix(in srgb, currentColor, transparent 66%); transition: filter var(--fast); }
:root[data-motion="intense"] .play-paddle { box-shadow: 0 0 1rem currentColor, 0 0 2.8rem currentColor, 0 0 4.5rem color-mix(in srgb, currentColor, transparent 55%); }
:root[data-motion="reduced"] .play-paddle { box-shadow: 0 0 .35rem currentColor; }
.play-paddle::after { position: absolute; inset: 12% 18%; border: 0; border-radius: inherit; background: white; filter: blur(.12rem); opacity: .75; content: ""; }
.play-paddle.has-extension::before { position: absolute; inset: -3px -45%; border-block: 2px solid currentColor; border-radius: inherit; box-shadow: 0 0 .55rem currentColor; content: ""; animation: extension-lock 520ms var(--ease-organic); }
.play-paddle[data-extensions="2"] { filter: brightness(1.16); }
.play-paddle[data-extensions="3"] { filter: brightness(1.32); }
.cannon-barrel { position: absolute; display: none; top: 50%; left: 100%; width: 1rem; height: .28rem; border-radius: 0 999px 999px 0; background: currentColor; box-shadow: 0 0 .65rem currentColor; transform: translateY(-50%); }
.play-paddle--two .cannon-barrel { right: 100%; left: auto; border-radius: 999px 0 0 999px; }
.play-paddle.has-cannon .cannon-barrel { display: block; }
.play-paddle.is-firing .cannon-barrel { animation: cannon-fire 220ms var(--ease-out); }
.play-paddle[data-cannons="2"] .cannon-barrel { filter: brightness(1.25); }
.play-paddle[data-cannons="3"] .cannon-barrel { filter: brightness(1.5); }
.goal-shield { position: absolute; z-index: 2; top: 12%; bottom: 12%; width: 2px; border-radius: 999px; background: var(--green); box-shadow: 0 0 .7rem var(--green), 0 0 1.5rem var(--green); opacity: 0; transition: opacity var(--medium); }
.goal-shield--one { left: 1.2%; }
.goal-shield--two { right: 1.2%; }
.goal-shield.is-active { opacity: .48; }
.goal-shield.is-triggered { animation: shield-break 640ms var(--ease-out); }
.goal-wall { position: absolute; z-index: 2; top: 8%; bottom: 8%; width: .42rem; border: 1px solid var(--green); border-radius: .18rem; background: repeating-linear-gradient(to bottom, var(--green) 0 4.5%, transparent 4.5% 6.5%); box-shadow: 0 0 .65rem var(--green), inset 0 0 .45rem var(--green); opacity: 0; transform: scaleY(.08); transition: opacity var(--medium), transform var(--medium) var(--ease-organic); }
.goal-wall--one { left: 1.2%; }
.goal-wall--two { right: 1.2%; }
.goal-wall.is-active { opacity: .72; transform: scaleY(1); }
.goal-wall.is-triggered { animation: wall-impact 500ms var(--ease-out); }
@keyframes wall-impact { 45% { filter: brightness(3); box-shadow: 0 0 1.8rem var(--green); transform: scaleY(1.025) scaleX(1.8); } }
.play-paddle--one { color: var(--cyan); }
.play-paddle--two { color: var(--orange); }
.play-ball { left: 0; top: 0; width: 2%; aspect-ratio: 1; border-radius: 50%; background: white; box-shadow: 0 0 .65rem white, 0 0 1.4rem var(--cyan); }
:root[data-motion="intense"] .play-ball { box-shadow: 0 0 1rem white, 0 0 2.4rem var(--cyan), 0 0 4rem var(--magenta); }
:root[data-motion="reduced"] .play-ball { box-shadow: 0 0 .35rem white, 0 0 .8rem var(--cyan); }
.play-ball::after { position: absolute; top: 50%; right: 50%; width: 320%; height: 34%; border-radius: 999px; background: linear-gradient(90deg, transparent, currentColor); content: ""; opacity: 0; transform: translateY(-50%) rotate(var(--ball-angle, 0rad)); transform-origin: right center; }
.play-ball.is-owned-one { box-shadow: 0 0 .65rem white, 0 0 1.5rem var(--cyan), 0 0 2.4rem var(--cyan); }
.play-ball.is-owned-two { box-shadow: 0 0 .65rem white, 0 0 1.5rem var(--orange), 0 0 2.4rem var(--orange); }
.play-ball.is-spawning { animation: ball-spawn 460ms var(--ease-organic); }
@keyframes ball-spawn { 45% { filter: brightness(3); box-shadow: 0 0 2.8rem var(--magenta); } }
.play-ball[data-impulse-player="1"] { color: var(--cyan); }
.play-ball[data-impulse-player="2"] { color: var(--orange); }
.play-ball.is-impulsed { animation: impulse-flash 620ms var(--ease-out); }
.play-ball.is-impulsed::after { animation: impulse-trail 620ms var(--ease-out); }
.play-brick[data-owner="1"]::before, .play-brick[data-owner="1"]::after { border-color: var(--cyan); }
.play-brick[data-owner="2"]::before, .play-brick[data-owner="2"]::after { border-color: var(--orange); }
.energy-hud { position: fixed; z-index: 4; top: max(3.3rem, calc(env(safe-area-inset-top) + 3rem)); display: flex; gap: .3rem; pointer-events: none; }
.energy-hud--one { left: max(.8rem, env(safe-area-inset-left)); }
.energy-hud--two { right: max(.8rem, env(safe-area-inset-right)); flex-direction: row-reverse; }
.energy-meter { --charge: 0; --energy-color: var(--cyan); position: relative; display: block; overflow: hidden; width: clamp(1.5rem, 3vw, 2.7rem); height: .3rem; border: 1px solid color-mix(in srgb, var(--energy-color), transparent 55%); border-radius: 999px; background: rgba(0,0,0,.58); }
.energy-meter::after { position: absolute; inset: 0; background: var(--energy-color); box-shadow: 0 0 .65rem var(--energy-color); content: ""; transform: scaleX(var(--charge)); transform-origin: left; transition: transform var(--medium) var(--ease-organic); }
.energy-hud--two .energy-meter::after { transform-origin: right; }
.energy-meter.is-charged { animation: energy-tick 440ms var(--ease-organic); }
.energy-meter.is-full { box-shadow: 0 0 .6rem var(--energy-color); }
.capacity-meter { --capacity: 0; --player-color: white; position: relative; display: block; overflow: hidden; width: clamp(2rem, 4vw, 3.5rem); height: .45rem; border: 1px solid color-mix(in srgb, var(--player-color), white 35%); border-radius: 999px; background: rgba(0,0,0,.58); }
.capacity-meter::after { position: absolute; inset: 0; background: var(--player-color); box-shadow: 0 0 .7rem var(--player-color); content: ""; opacity: .8; transform: scaleX(var(--capacity)); transform-origin: left; transition: transform var(--medium) var(--ease-organic); }
.energy-hud--two .capacity-meter::after { transform-origin: right; }
.capacity-meter.is-changing { animation: capacity-tick 480ms var(--ease-organic); }
.capacity-meter.is-full { box-shadow: 0 0 .8rem var(--player-color); }
.bonus-stack { position: fixed; z-index: 4; top: max(4.25rem, calc(env(safe-area-inset-top) + 4rem)); display: flex; gap: .28rem; pointer-events: none; }
.bonus-stack--one { left: max(.8rem, env(safe-area-inset-left)); }
.bonus-stack--two { right: max(.8rem, env(safe-area-inset-right)); flex-direction: row-reverse; }
.bonus-slot { --slot-color: var(--muted); display: grid; width: 1.55rem; aspect-ratio: 1; place-items: center; border: 1px dashed color-mix(in srgb, var(--slot-color), transparent 48%); border-radius: .34rem; color: var(--slot-color); opacity: .16; transition: border-color var(--medium), box-shadow var(--medium), opacity var(--medium), transform var(--medium) var(--ease-organic); }
.bonus-slot.is-unlocked { border-style: solid; opacity: .48; }
.bonus-slot.is-filled { background: color-mix(in srgb, var(--slot-color), transparent 86%); box-shadow: 0 0 .65rem color-mix(in srgb, var(--slot-color), transparent 45%); opacity: 1; transform: scale(1.04); }
.bonus-slot .power-icon { width: 78%; height: 78%; }
.bonus-slot { position: relative; }
.bonus-count { position: absolute; right: -.18rem; bottom: -.2rem; min-width: .78rem; padding: .08rem .16rem; border-radius: 999px; background: var(--slot-color); color: #03070a; font: 700 .58rem/1 var(--font-mono); text-align: center; box-shadow: 0 0 .35rem var(--slot-color); }
@keyframes energy-tick { 50% { filter: brightness(2); transform: scaleY(1.8); } }
@keyframes capacity-tick { 50% { filter: brightness(2); transform: scale(1.08); } }
.play-paddle.is-overdrive { animation: paddle-overdrive 420ms ease-in-out infinite alternate; }
@keyframes paddle-overdrive {
  to { filter: brightness(1.55) drop-shadow(0 0 .7rem var(--yellow)); box-shadow: 0 0 .35rem currentColor, 0 0 1rem var(--yellow); }
}
.play-paddle.has-magnet { outline: 1px solid var(--green); outline-offset: .3rem; }
.play-paddle.has-magnet::after { border-color: var(--green); box-shadow: 0 0 .8rem var(--green); }
.play-paddle.is-holding { filter: brightness(1.5) drop-shadow(0 0 .75rem var(--green)); }
.play-ball.is-magnetized { animation: magnet-hold 380ms ease-in-out infinite alternate; box-shadow: 0 0 .65rem white, 0 0 1.8rem var(--green), 0 0 3rem var(--green); }
.play-ball.is-magnet-released { animation: magnet-release 400ms var(--ease-out); }
@keyframes magnet-hold { to { filter: brightness(1.55); } }
@keyframes magnet-release { 40% { filter: brightness(3); box-shadow: 0 0 2.5rem var(--green); } }
.play-ball.is-expanded { outline: 1px solid color-mix(in srgb, var(--violet), transparent 32%); outline-offset: .18rem; box-shadow: 0 0 .75rem white, 0 0 1.8rem var(--violet), 0 0 3rem color-mix(in srgb, var(--violet), transparent 45%); }
.play-ball.is-expanding { animation: ball-expansion 700ms var(--ease-organic); }
@keyframes ball-expansion { 45% { filter: brightness(2.8); box-shadow: 0 0 3rem var(--violet); } }
.play-ball.is-plasma { background: #fff; box-shadow: 0 0 .8rem white, 0 0 2rem var(--violet), 0 0 3.4rem var(--magenta); }
.play-ball.is-plasma::after { opacity: .72; background: linear-gradient(90deg, transparent, var(--violet), white); animation: plasma-tail 430ms ease-in-out infinite alternate; }
.play-ball.is-plasma-charged { animation: plasma-charge 660ms var(--ease-organic); }
.play-ball.is-plasma.is-expanded { outline-color: var(--magenta); box-shadow: 0 0 1rem white, 0 0 2.5rem var(--violet), 0 0 4rem var(--magenta); }
@keyframes plasma-tail { to { filter: brightness(1.8); opacity: 1; } }
@keyframes plasma-charge { 50% { filter: brightness(3.2); box-shadow: 0 0 4rem var(--magenta); } }
.game-overlay { position: absolute; z-index: 10; display: grid; inset: 0; place-items: center; background: rgba(2, 4, 6, 0.68); backdrop-filter: blur(5px); }
.game-overlay[hidden] { display: none; }
.start-panel, .message-panel { width: min(88%, 28rem); max-height: calc(100vh - 2rem); overflow-y: auto; text-align: center; }
.start-panel h1 { margin-bottom: .8rem; font-size: clamp(2rem, 5vw, 4rem); }
.start-panel > p:not(.eyebrow), .message-panel > p { color: var(--muted); font-size: .82rem; }
.start-panel label { display: block; margin: 1.2rem 0 .4rem; color: var(--muted); font: .62rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.start-panel input, .start-panel select { margin: 0 .45rem 1rem; padding: .72rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-align: center; }
.start-panel input { width: 5rem; }
.start-panel select { max-width: 14rem; }
.start-panel > button[type="submit"] { display: flex; width: min(100%, 18rem); margin: .25rem auto 0; }
.message-panel > strong { display: block; margin-bottom: .7rem; font-size: clamp(3rem, 11vw, 7rem); line-height: .9; text-shadow: 0 0 2rem currentColor; }
.message-panel > p:first-child { color: var(--cyan); font: .65rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.message-actions { display: flex; justify-content: center; gap: .6rem; margin-top: 1rem; }
.control-guide { position: fixed; z-index: 20; right: max(var(--page-pad), env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); left: max(var(--page-pad), env(safe-area-inset-left)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--muted); font: .65rem var(--font-mono); text-transform: uppercase; pointer-events: none; transition: opacity var(--fast); }
.control-player { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 .6rem; }
.control-player b { grid-row: span 2; color: var(--cyan); font-size: 1rem; }
.control-player span { color: var(--text); }
.control-player small { font-size: .55rem; }
.control-player--two { justify-content: end; text-align: right; }
.control-player--two b { order: 3; color: var(--orange); }
.control-guide > p { margin: 0; }
kbd { padding: .18rem .35rem; border: 1px solid var(--line-strong); border-radius: .2rem; background: var(--surface); color: var(--text); font: inherit; }
.play-arena[data-orientation="portrait"] { width: 100vw; height: 100vh; height: 100svh; padding-bottom: env(safe-area-inset-bottom); }
.play-arena[data-orientation="portrait"] .center-line { inset: 50% 3% auto; border-top: 1px dashed rgba(238,250,255,.23); border-left: 0; }
.play-arena[data-orientation="portrait"] .play-paddle { width: 18%; height: 1.4%; }
.play-arena[data-orientation="portrait"] .play-paddle.has-extension::before { inset: -45% -3px; border-block: 0; border-inline: 2px solid currentColor; }
.play-arena[data-orientation="portrait"] .cannon-barrel { top: auto; bottom: 100%; left: 50%; width: .28rem; height: 1rem; border-radius: 999px 999px 0 0; transform: translateX(-50%); }
.play-arena[data-orientation="portrait"] .play-paddle--two .cannon-barrel { top: 100%; right: auto; bottom: auto; left: 50%; border-radius: 0 0 999px 999px; }
.play-arena[data-orientation="portrait"] .goal-shield { top: auto; right: 12%; bottom: auto; left: 12%; width: auto; height: 2px; }
.play-arena[data-orientation="portrait"] .goal-shield--one { bottom: 1.2%; }
.play-arena[data-orientation="portrait"] .goal-shield--two { top: 1.2%; }
.play-arena[data-orientation="portrait"] .goal-wall { top: auto; right: 8%; bottom: auto; left: 8%; width: auto; height: .42rem; background: repeating-linear-gradient(to right, var(--green) 0 4.5%, transparent 4.5% 6.5%); transform: scaleX(.08); }
.play-arena[data-orientation="portrait"] .goal-wall--one { bottom: 1.2%; }
.play-arena[data-orientation="portrait"] .goal-wall--two { top: 1.2%; }
.play-arena[data-orientation="portrait"] .goal-wall.is-active { transform: scaleX(1); }
.play-arena[data-orientation="portrait"] .play-ball { width: 3.333%; }
@media (max-height: 42rem) {
  .game-header { min-height: 3.5rem; }
  .control-guide small, .start-panel > p:not(.eyebrow) { display: none; }
  .start-panel h1 { margin-bottom: .3rem; font-size: 1.7rem; }
  .start-panel label { margin: .45rem 0 .2rem; }
  .start-panel input, .start-panel select { margin-bottom: .35rem; padding: .48rem; }
}
@media (max-width: 50rem) { .scoreboard { width: calc(100% - 1.4rem); } }
@media (max-width: 50rem) and (orientation: portrait) { .scoreboard { top: 4.8rem; } }
@media (max-width: 35rem) { .orientation-label, .match-target span { display: none; } .player-score span { font-size: .55rem; } .control-guide { right: .7rem; left: .7rem; } }

.game-page[data-game-state="playing"] .match-target,
.game-page[data-game-state="playing"] .brand,
.game-page[data-game-state="countdown"] .brand,
.game-page[data-game-state="point"] .brand,
.game-page[data-game-state="playing"] .orientation-label,
.game-page[data-game-state="countdown"] .orientation-label,
.game-page[data-game-state="point"] .orientation-label,
.game-page[data-game-state="playing"] .game-actions > a,
.game-page[data-game-state="countdown"] .game-actions > a,
.game-page[data-game-state="point"] .game-actions > a,
.game-page[data-game-state="paused"] .game-actions > a { opacity: 0; pointer-events: none; }
.game-page[data-game-state="menu"] #pause-button,
.game-page[data-game-state="gameover"] #pause-button { opacity: 0; pointer-events: none; }
.game-page[data-game-state="menu"] .scoreboard,
.game-page[data-game-state="menu"] .control-guide { opacity: 0; pointer-events: none; }
.game-page[data-game-state="playing"] .control-guide,
.game-page[data-game-state="point"] .control-guide { opacity: 0; }
.game-page[data-game-state="playing"] .match-target,
.game-page[data-game-state="point"] .match-target { opacity: 0; }
.game-page[data-game-state="playing"] .game-header,
.game-page[data-game-state="point"] .game-header { background: none; }
.game-page[data-game-state="point"] .game-overlay { background: transparent; backdrop-filter: none; }
.game-page[data-game-state="point"] .message-panel > strong { font-size: clamp(2.4rem, 8vw, 5rem); }

.game-page[data-game-state="playing"] .player-score strong,
.game-page[data-game-state="point"] .player-score strong { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.game-page[data-orientation="landscape"][data-game-state="playing"] #pause-button,
.game-page[data-orientation="landscape"][data-game-state="point"] #pause-button { position: fixed; top: max(.7rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
.game-page[data-orientation="landscape"] .options-button { position: fixed; top: max(.7rem, env(safe-area-inset-top)); left: calc(50% + 2.8rem); }
.game-page[data-orientation="landscape"] .scoreboard { width: calc(100% - 2 * var(--page-pad)); }

.game-page[data-orientation="portrait"] .scoreboard { position: static; width: auto; transform: none; }
.game-page[data-orientation="portrait"] .player-score { position: fixed; z-index: 20; right: max(.8rem, env(safe-area-inset-right)); left: auto; }
.game-page[data-orientation="portrait"] .player-score--two { top: 42%; flex-direction: row-reverse; }
.game-page[data-orientation="portrait"] .player-score--one { bottom: 43%; }
.game-page[data-orientation="portrait"] .player-score span { display: none; }
.game-page[data-orientation="portrait"] .match-target { position: fixed; top: max(.8rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); }
.game-page[data-orientation="portrait"] #pause-button { position: fixed; top: 50%; left: max(.7rem, env(safe-area-inset-left)); transform: translateY(-50%); }
.game-page[data-orientation="portrait"] .options-button { position: fixed; top: calc(50% + 2.8rem); left: max(.7rem, env(safe-area-inset-left)); }
.game-page[data-orientation="portrait"] .energy-hud { right: max(.45rem, env(safe-area-inset-right)); left: auto; flex-direction: column; }
.game-page[data-orientation="portrait"] .energy-hud--two { top: 18%; }
.game-page[data-orientation="portrait"] .energy-hud--one { top: auto; bottom: 18%; flex-direction: column-reverse; }
.game-page[data-orientation="portrait"] .energy-meter { width: .3rem; height: clamp(1.2rem, 3vh, 2rem); }
.game-page[data-orientation="portrait"] .energy-meter::after { transform: scaleY(var(--charge)); transform-origin: bottom; }
.game-page[data-orientation="portrait"] .capacity-meter { width: .45rem; height: clamp(1.7rem, 4vh, 2.8rem); }
.game-page[data-orientation="portrait"] .capacity-meter::after { transform: scaleY(var(--capacity)); transform-origin: bottom; }
.game-page[data-orientation="portrait"] .bonus-stack { left: max(.45rem, env(safe-area-inset-left)); flex-direction: column; }
.game-page[data-orientation="portrait"] .bonus-stack--two { top: 18%; }
.game-page[data-orientation="portrait"] .bonus-stack--one { top: auto; bottom: 18%; }
.game-page[data-orientation="portrait"][data-game-state="playing"] .player-score,
.game-page[data-orientation="portrait"][data-game-state="point"] .player-score { gap: .4rem; }