.breakout-shell { padding-top: 48px; padding-bottom: 60px; }
.breakout-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.breakout-intro h1 { font-size: clamp(40px, 7vw, 80px); line-height: 1.1; letter-spacing: -.055em; margin: 12px 0 16px; }
.breakout-intro h1 em { font-style: normal; color: #ffb55c; }
.breakout-intro p, .breakout-info p { color: #adb6c9; line-height: 1.7; }
.breakout-arena { background: #111727; border: 1px solid #323d55; border-radius: 16px; padding: 20px; overflow: hidden; }
.breakout-arena button, .quiet-button { min-height: 44px; border-radius: 7px; cursor: pointer; }
.breakout-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.breakout-top .eyebrow { color: #b3bbcc; font-size: 10px; }
.breakout-top button, .quiet-button { color: #c5ccdc; background: #1c2436; border: 1px solid #43516b; padding: 9px 14px; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffb55c; margin-right: 6px; }
.breakout-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 8px; }
.breakout-hud > div { border-left: 2px solid #36415a; padding-left: 14px; }
.breakout-hud > div:first-child { border-color: #ffb55c; }
.breakout-hud span { display: block; color: #a0acc1; font-size: 10px; letter-spacing: .12em; }
.breakout-hud strong { display: block; font-size: clamp(20px, 3vw, 32px); font-variant-numeric: tabular-nums; margin-top: 6px; color: #f7f6ff; }
.breakout-stage { width: min(100%, 800px, calc(66svh * 4 / 3)); min-width: min(100%, 260px); margin: auto; border: 1px solid #3b4864; border-bottom: 2px solid #ffb55c; border-radius: 6px; overflow: hidden; }
#court { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; touch-action: none; cursor: crosshair; }
.breakout-effects { height: 40px; flex: 0 0 40px; display: grid; align-content: center; text-align: center; color: #b4e9ed; font-size: 12px; line-height: 18px; white-space: pre-line; font-variant-numeric: tabular-nums; }
.breakout-controls, .breakout-bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.breakout-controls p { color: #a0acc1; font-size: 12px; line-height: 1.6; }
.breakout-controls strong { color: #e2e7f2; }
.breakout-pad { display: flex; gap: 8px; flex-shrink: 0; }
.breakout-pad button { background: #202b42; border: 1px solid #4b5974; color: #fff; width: 64px; font-size: 25px; touch-action: none; user-select: none; }
.breakout-pad button.active { background: #3a6580; border-color: #64e7e7; }
.breakout-bottom { border-top: 1px solid #2c374d; padding-top: 16px; }
.breakout-bottom p { font-size: 13px; color: #c6cfdf; line-height: 1.5; margin: 0; }
.breakout-arena .cta { background: #ffb55c; color: #151821; border: 0; flex-shrink: 0; }
.breakout-arena button:disabled { opacity: .6; cursor: default; }
.breakout-finish { margin-top: 24px; border-top: 1px solid #4a5470; padding-top: 24px; }
.breakout-finish h2 { font-size: clamp(25px, 5vw, 40px); margin: 10px 0; }
.breakout-save { display: flex; gap: 12px; margin-top: 8px; }
.breakout-save input { background: #0a1020; color: #fff; border: 1px solid #53607a; padding: 12px; border-radius: 6px; min-width: 0; flex: 1; font-size: 16px; }
.breakout-note { color: #a0acc1; font-size: 12px; line-height: 1.7; }
.breakout-info { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 64px 0; }
.breakout-info h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.2; margin: 16px 0; letter-spacing: -.03em; }
.breakout-powerups article { position: relative; padding: 4px 0 16px 65px; }
.breakout-powerups h3 { font-size: 18px; margin: 10px 0; }
.power-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; font-size: 25px; position: absolute; left: 0; top: 8px; }
.wide-icon { color: #66eded; background: #17454b; border: 1px solid #389b9e; }
.slow-icon { color: #d1b0ff; background: #33294a; border: 1px solid #8663ae; }
.breakout-ranking { border-top: 1px solid #303a50; padding-top: 32px; }
.breakout-ranking h2 { font-size: clamp(26px, 4vw, 38px); }
#ranking { padding: 0; list-style-position: inside; }
#ranking li { padding: 16px; border-bottom: 1px solid #303a50; overflow-wrap: anywhere; color: #ccd5e7; }
#ranking li strong { color: #ffb55c; margin-left: 12px; font-variant-numeric: tabular-nums; }
.breakout-arena:fullscreen, .breakout-arena.game-fullscreen-fallback { height: 100dvh; overflow: auto; background: #111727; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-radius: 0; }
.breakout-arena:fullscreen .breakout-top, .breakout-arena.game-fullscreen-fallback .breakout-top { position: sticky; top: -1px; z-index: 2; background: #111727; padding-bottom: 6px; }
.breakout-arena:fullscreen .breakout-stage, .breakout-arena.game-fullscreen-fallback .breakout-stage { width: min(100%, 1000px, calc((100dvh - 280px) * 4 / 3)); }
@media (max-width: 600px) {
  .breakout-shell { padding-top: 28px; }
  .breakout-intro { display: block; }
  .breakout-intro > a { display: inline-block; margin-top: 10px; }
  .breakout-arena { padding: 12px; }
  .breakout-top .eyebrow { font-size: 8px; }
  .breakout-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 16px 0 4px; }
  .breakout-hud > div { padding-left: 7px; }
  .breakout-hud span { font-size: 8px; }
  .breakout-hud strong { font-size: 20px; }
  .breakout-controls { gap: 8px; flex-wrap: wrap; }
  .breakout-controls p { font-size: 11px; }
  .breakout-pad button { width: 58px; }
  .breakout-bottom, .breakout-save { flex-direction: column; align-items: stretch; }
  .breakout-bottom .cta, .breakout-save .cta { justify-content: center; }
  .breakout-info { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .breakout-ranking .section-top { align-items: start; gap: 14px; flex-direction: column; }
  .breakout-effects { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .breakout-arena * { scroll-behavior: auto; transition: none; } }

/* Wide controls are part of the game area on every device. */
.breakout-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0; }
.breakout-controls p { margin: 0; }
.breakout-pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 12px; }
.breakout-pad button { width: 100%; min-width: 0; min-height: 72px; font-size: 30px; }


.breakout-stage { box-shadow: 0 0 32px #33bde010, inset 0 0 0 1px #7ad9ff18; }
/* Keep room for both upgrades, including the compact fullscreen layout. */
#breakout-game:is(:fullscreen, .game-fullscreen-fallback) .breakout-stage { width: min(100%, 1000px, calc((100dvh - 301px) * 4 / 3)); }
#breakout-game:is(:fullscreen, .game-fullscreen-fallback) :is(.breakout-top, .breakout-hud, .breakout-controls, .breakout-bottom) { flex-shrink: 0; }
@media (max-height: 540px) and (orientation: landscape) {
  #breakout-game:is(:fullscreen, .game-fullscreen-fallback) { grid-template-rows: auto 40px minmax(0, 1fr) auto; }
  #breakout-game:is(:fullscreen, .game-fullscreen-fallback) .breakout-effects { grid-column: 1; grid-row: 2; align-self: center; }
  #breakout-game:is(:fullscreen, .game-fullscreen-fallback) .breakout-stage { grid-row: 3 / 5; width: min(100%, calc((100dvh - 148px) * 4 / 3)); }
  #breakout-game:is(:fullscreen, .game-fullscreen-fallback) .breakout-controls { grid-row: 2 / 4; }
  #breakout-game:is(:fullscreen, .game-fullscreen-fallback) .breakout-bottom { grid-row: 4; }
}
/* Preserve the reserved notices region while no upgrade is active. */
.breakout-effects:empty { display: grid; }