:root {
  color-scheme: dark;
  --gold: #ffd34f;
  --cyan: #74efff;
  --panel: rgba(2, 10, 20, .84);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #030913; }
body { color: #fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { font: inherit; }
button { color: inherit; }
.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; }

#gameShell { position: fixed; inset: 0; overflow: hidden; background: #030913; touch-action: none; user-select: none; }
#gameCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }

.corner-controls { position: absolute; z-index: 60; top: max(8px, env(safe-area-inset-top)); display: flex; gap: 6px; pointer-events: none; }
.left-controls { left: max(8px, env(safe-area-inset-left)); }
.right-controls { right: max(8px, env(safe-area-inset-right)); }
.corner-button { pointer-events: auto; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.38); border-radius: 11px; color: #fff; background: rgba(3,12,23,.86); box-shadow: 0 6px 16px rgba(0,0,0,.4); text-decoration: none; font-size: 1.28rem; line-height: 1; cursor: pointer; touch-action: manipulation; }
.corner-button:active { transform: scale(.94); }
.corner-button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(42,31,1,.9); }
.hold-reset { --hold: 0; background: conic-gradient(var(--gold) calc(var(--hold) * 1turn), rgba(3,12,23,.86) 0); }

#gameHud { position: absolute; z-index: 28; top: max(8px, env(safe-area-inset-top)); left: 50%; width: min(780px, calc(100vw - 310px)); min-height: 52px; transform: translateX(-50%); display: grid; grid-template-columns: 150px 1fr 105px; align-items: center; gap: 10px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; background: linear-gradient(180deg, rgba(3,12,24,.92), rgba(2,7,15,.78)); box-shadow: 0 8px 22px rgba(0,0,0,.38); pointer-events: none; }
.game-title { display: grid; line-height: .9; letter-spacing: .07em; }
.game-title strong { color: #fff; font-size: .98rem; }
.game-title span { margin-top: 4px; color: var(--gold); font: 900 .68rem/1 system-ui, sans-serif; }
.hud-stats { display: grid; grid-template-columns: repeat(3, minmax(78px, 1fr)); gap: 7px; }
.hud-pill { display: flex; align-items: baseline; justify-content: center; gap: 7px; min-height: 34px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.055); }
.hud-pill span { color: #b9cad8; font: 800 .62rem/1 system-ui, sans-serif; letter-spacing: .08em; }
.hud-pill strong { color: #fff; font-size: 1rem; }
.hud-pill.home-runs strong { color: var(--gold); }
.pitch-readout { justify-self: end; color: var(--cyan); font: 900 .72rem/1 system-ui, sans-serif; letter-spacing: .08em; text-align: right; }

.full-overlay { position: absolute; z-index: 45; inset: 0; display: grid; place-items: center; padding: 76px 24px 24px; background: radial-gradient(circle at 50% 45%, rgba(5,19,34,.28), rgba(1,5,12,.8)); }
.start-card, .finish-card { width: min(730px, 90vw); padding: 24px 28px; border: 1px solid rgba(255,255,255,.32); border-radius: 22px; text-align: center; background: linear-gradient(160deg, rgba(4,18,33,.93), rgba(2,7,16,.94)); box-shadow: 0 24px 70px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.12); }
.eyebrow, .finish-card > p:first-child { margin: 0; color: var(--cyan); font: 900 .72rem/1 system-ui, sans-serif; letter-spacing: .18em; }
.start-card h1 { margin: 7px 0 9px; font: 950 clamp(2.4rem, 7vw, 5.2rem)/.78 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .02em; text-shadow: 0 6px 20px rgba(0,0,0,.65); }
.start-card h1 em { color: var(--gold); font-style: normal; }
.start-card > p:not(.eyebrow) { max-width: 610px; margin: 0 auto 14px; color: #d8e3eb; font: 700 .94rem/1.35 system-ui, sans-serif; }
.start-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0 18px; }
.start-rules span { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #dce7ef; background: rgba(255,255,255,.05); font: 750 .72rem/1.2 system-ui, sans-serif; }
.start-rules b { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #05101a; background: var(--gold); }
.primary-action { min-width: 245px; min-height: 52px; border: 2px solid rgba(255,255,255,.7); border-radius: 999px; padding: 10px 20px; color: #06111b; background: linear-gradient(180deg, #ffe66d, #f3b918); box-shadow: 0 10px 28px rgba(244,185,24,.28); font-weight: 950; letter-spacing: .04em; cursor: pointer; touch-action: manipulation; }
.primary-action:active { transform: translateY(2px) scale(.98); }

.finish-card h2 { margin: 7px 0 8px; color: var(--gold); font: 950 clamp(2.1rem, 6vw, 4.4rem)/1 Impact, sans-serif; letter-spacing: .04em; }
.round-score { display: grid; justify-items: center; margin: 8px 0; }
.round-score span { font: 950 5.6rem/.9 Impact, sans-serif; text-shadow: 0 7px 24px rgba(0,0,0,.55); }
.round-score small { margin-top: 5px; color: #b8cbd9; font-weight: 900; letter-spacing: .15em; }
.finish-card > p:not(:first-child) { margin: 8px 0 18px; color: #d5e0e8; font-weight: 700; }

.message-banner { position: absolute; z-index: 40; left: 50%; top: 47%; min-width: 290px; transform: translate(-50%, -50%); padding: 13px 22px; border: 2px solid var(--gold); border-radius: 16px; text-align: center; background: rgba(2,9,17,.9); box-shadow: 0 16px 46px rgba(0,0,0,.55); pointer-events: none; }
.message-banner strong { display: block; color: var(--gold); font: 950 1.8rem/1 Impact, sans-serif; letter-spacing: .07em; }
.message-banner span { display: block; margin-top: 5px; color: #d7e4ec; font: 750 .75rem/1 system-ui, sans-serif; }
.swipe-guide { position: absolute; z-index: 34; left: 50%; bottom: max(17px, env(safe-area-inset-bottom)); width: min(420px, 52vw); transform: translateX(-50%); padding: 9px 58px 9px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 14px; text-align: center; color: #fff; background: rgba(2,10,19,.78); pointer-events: none; }
.swipe-guide strong { display: block; color: var(--gold); font: 900 .88rem/1 system-ui, sans-serif; letter-spacing: .1em; }
.swipe-guide span { color: #c5d4df; font: 700 .67rem/1.2 system-ui, sans-serif; }
.swipe-guide i { position: absolute; right: 16px; top: 1px; color: var(--cyan); font: normal 2.6rem/1 system-ui, sans-serif; animation: swipePulse 1s ease-in-out infinite; }
@keyframes swipePulse { 50% { transform: translate(6px,-6px); opacity: .55; } }

.pause-notice { position: absolute; z-index: 70; inset: 0; display: grid; place-content: center; gap: 5px; text-align: center; background: rgba(1,5,12,.62); pointer-events: none; }
.pause-notice strong { color: var(--gold); font: 950 3.2rem/1 Impact, sans-serif; letter-spacing: .08em; }
.pause-notice span { color: #d8e5ee; font-weight: 750; }

#portraitGuard { display: none; position: absolute; z-index: 95; inset: 0; place-items: center; align-content: center; gap: 9px; padding: 30px; color: #fff; text-align: center; background: radial-gradient(circle, #12324a, #030913); }
#portraitGuard div { color: var(--gold); font-size: 4rem; }
#portraitGuard strong { font-size: 1.35rem; letter-spacing: .08em; }
#portraitGuard span { color: #bfd0dd; font: 650 .9rem/1.3 system-ui, sans-serif; }

body.clean-layout .game-title,
body.clean-layout .pitch-readout,
body.clean-layout .swipe-guide { opacity: 0; pointer-events: none; }
body.screen-locked #backButton,
body.screen-locked #pauseButton,
body.screen-locked #resetButton,
body.screen-locked #layoutCleanButton,
body.screen-locked #cleanScreen { opacity: .3; pointer-events: none; }
body.screen-locked #screenLock { opacity: 1; pointer-events: auto; }

@media (orientation: portrait) and (max-width: 900px) {
  #portraitGuard { display: grid; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .corner-controls { top: max(5px, env(safe-area-inset-top)); gap: 4px; }
  .corner-button { width: 31px; height: 31px; border-radius: 9px; font-size: 1.05rem; }
  #gameHud { top: max(5px, env(safe-area-inset-top)); width: min(650px, calc(100vw - 270px)); min-height: 41px; grid-template-columns: 118px 1fr 82px; padding: 4px 8px; gap: 7px; border-radius: 10px; }
  .game-title strong { font-size: .78rem; }
  .game-title span { font-size: .54rem; }
  .hud-pill { min-height: 29px; padding: 4px 6px; gap: 4px; }
  .hud-pill span { font-size: .49rem; }
  .hud-pill strong { font-size: .79rem; }
  .pitch-readout { font-size: .58rem; }
  .full-overlay { padding: 52px 18px 15px; }
  .start-card, .finish-card { width: min(690px, 91vw); padding: 13px 20px; border-radius: 16px; }
  .start-card h1 { margin: 5px 0 6px; font-size: clamp(2rem, 9vh, 3.6rem); }
  .start-card > p:not(.eyebrow) { margin-bottom: 8px; font-size: .72rem; }
  .start-rules { margin: 8px 0 10px; gap: 6px; }
  .start-rules span { min-height: 42px; padding: 5px; font-size: .57rem; }
  .start-rules b { width: 21px; height: 21px; }
  .primary-action { min-width: 210px; min-height: 42px; padding: 7px 16px; font-size: .76rem; }
  .swipe-guide { bottom: max(9px, env(safe-area-inset-bottom)); padding-block: 6px; }
  .message-banner { min-width: 235px; padding: 9px 16px; }
  .message-banner strong { font-size: 1.35rem; }
  .round-score span { font-size: 4rem; }
}