:root {
  color-scheme: dark;
  --ink: #f8fbff;
  --glass: rgba(3, 13, 8, .82);
  --gold: #ffd85a;
  --cyan: #8ef3ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #020805; 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: #07140d; touch-action: none; user-select: none; }
#gameCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#stadiumShade { pointer-events: none; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.46), transparent 15%, transparent 82%, rgba(0,0,0,.38)); }

#scoreboard {
  position: absolute;
  z-index: 25;
  top: max(7px, env(safe-area-inset-top));
  left: 50%;
  width: min(700px, calc(100vw - 330px));
  height: 54px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px;
  overflow: hidden;
  color: var(--ink);
  background: rgba(2,10,6,.9);
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
}
.team, .game-status { display: flex; align-items: center; justify-content: center; min-width: 0; }
.team { gap: 9px; padding: 0 10px; }
.team strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; letter-spacing: .07em; }
.team b { font-size: 1.65rem; }
.home-team { justify-content: flex-start; background: linear-gradient(90deg, rgba(22,100,206,.9), rgba(13,58,116,.35)); }
.away-team { justify-content: flex-end; background: linear-gradient(270deg, rgba(190,35,52,.9), rgba(92,14,26,.35)); }
.team-mark { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-weight: 900; }
.game-status { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 31px 17px; gap: 0 10px; padding: 3px 12px; text-align: center; }
.game-status span { justify-self: end; color: #cedbd2; font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
.game-status strong { justify-self: start; color: var(--gold); font-size: 1.3rem; }
.game-status b { grid-column: 1 / -1; align-self: start; font-size: .7rem; letter-spacing: .08em; }

.corner-controls { position: absolute; z-index: 44; 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: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; color: #fff; background: rgba(3,14,8,.82); box-shadow: 0 5px 13px rgba(0,0,0,.35); text-decoration: none; font-size: 1.28rem; line-height: 1; cursor: pointer; }
.corner-button:active { transform: scale(.94); }
.corner-button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.clean-screen { color: var(--cyan); }
.hold-reset { font-size: 1.18rem; }

#seasonBadge { position: absolute; z-index: 24; top: 69px; left: max(14px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; color: #fff; background: rgba(2,12,7,.75); }
#seasonBadge span { color: var(--gold); font-size: .64rem; font-weight: 900; letter-spacing: .1em; }
#seasonBadge strong { font-size: .72rem; letter-spacing: .04em; }
.pause-notice { position: absolute; z-index: 56; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 13px 23px; border: 2px solid var(--gold); border-radius: 14px; color: #fff; background: rgba(2,10,6,.92); font-weight: 900; letter-spacing: .12em; }
.message-banner { position: absolute; z-index: 46; left: 50%; top: 47%; transform: translate(-50%,-50%); min-width: 260px; padding: 12px 20px; border: 2px solid var(--gold); border-radius: 14px; color: #fff; text-align: center; background: rgba(2,10,6,.92); box-shadow: 0 14px 38px rgba(0,0,0,.5); pointer-events: none; }
.message-banner strong { display: block; color: var(--gold); font-size: 1.45rem; letter-spacing: .06em; }
.message-banner span { display: block; margin-top: 3px; color: #d5e0d8; font-size: .75rem; font-weight: 700; }

.full-overlay { position: absolute; z-index: 60; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: radial-gradient(circle at 50% 46%, rgba(18,92,54,.28), rgba(1,7,4,.92)); backdrop-filter: blur(8px); }
.start-card, .break-card, .results-card { width: min(900px, 95vw); max-height: 95vh; overflow: auto; padding: 20px 28px; border: 1px solid rgba(255,255,255,.3); border-radius: 22px; color: #fff; text-align: center; background: linear-gradient(145deg, rgba(7,35,20,.97), rgba(2,10,6,.98)); box-shadow: 0 22px 64px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.12); }
.eyebrow, .break-card > p, .results-card > p { margin: 0; color: var(--cyan); font-size: .7rem; font-weight: 900; letter-spacing: .17em; }
.start-card h1 { margin: 5px 0 8px; font-size: clamp(2.25rem, 5.7vw, 4.7rem); line-height: .9; letter-spacing: -.015em; }
.start-card h1 em { color: var(--gold); font-style: normal; }
.start-copy { max-width: 690px; margin: 8px auto 12px; color: #d2dfd7; font-size: .96rem; font-weight: 620; line-height: 1.35; }
.quick-guide { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 10px 0 12px; }
.quick-guide span { padding: 8px; border-radius: 9px; color: #c8d8ce; background: rgba(255,255,255,.055); font-size: .72rem; font-weight: 620; line-height: 1.25; }
.quick-guide b { display: block; margin-bottom: 3px; color: #fff; font-size: .74rem; letter-spacing: .08em; }
.start-card h2 { margin: 4px 0 8px; color: var(--gold); font-size: .84rem; letter-spacing: .12em; }
.team-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.team-choice { min-height: 52px; display: grid; grid-template-columns: 31px 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 0 8px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: #fff; text-align: left; background: rgba(255,255,255,.055); cursor: pointer; }
.team-choice i { grid-row: 1 / 3; width: 30px; height: 30px; border: 3px solid var(--club-secondary); border-radius: 50%; background: var(--club-primary); box-shadow: inset 0 0 0 3px rgba(255,255,255,.14); }
.team-choice strong { align-self: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.team-choice small { align-self: start; color: #aebfb4; font-size: .6rem; }
.team-choice.selected { border-color: var(--gold); background: rgba(255,216,90,.14); box-shadow: 0 0 0 2px rgba(255,216,90,.12); }
.opening-choice { display: flex; justify-content: center; gap: 10px; margin: 12px 0 8px; }
.primary-action, .secondary-action { min-width: 190px; min-height: 46px; padding: 9px 17px; border: 1px solid rgba(255,255,255,.4); border-radius: 12px; font-weight: 900; letter-spacing: .04em; cursor: pointer; }
.primary-action { color: #081108; background: linear-gradient(180deg, #ffe47c, #e9b92e); }
.primary-action:disabled { opacity: .42; cursor: default; }
.secondary-action { color: #fff; background: linear-gradient(180deg, #22583b, #10311f); }
.start-card small { color: #9bb0a2; font-size: .7rem; font-weight: 650; }
.break-card { width: min(520px, 90vw); }
.break-card h2, .results-card h2 { margin: 6px 0 8px; font-size: clamp(2.1rem, 7vw, 4rem); }
.break-card span { display: block; margin-bottom: 16px; color: #bfd0c4; }

.results-card { width: min(780px, 94vw); }
.final-score { display: grid; grid-template-columns: minmax(80px,1fr) auto auto auto minmax(80px,1fr); align-items: center; gap: 12px; margin: 10px auto; font-size: .85rem; font-weight: 850; }
.final-score b { color: var(--gold); font-size: 2.4rem; }
.final-score i { color: #9eb1a4; font-style: normal; }
.table-wrap { margin: 10px 0 14px; max-height: 43vh; overflow: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; }
.league-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.league-table th, .league-table td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: center; }
.league-table th:nth-child(2), .league-table td:nth-child(2) { text-align: left; }
.league-table th { position: sticky; top: 0; color: var(--cyan); background: #092317; font-size: .62rem; letter-spacing: .07em; }
.league-table tr.user-club { color: var(--gold); background: rgba(255,216,90,.08); }

#touchControls { position: absolute; z-index: 30; inset: 0; pointer-events: none; }
.joystick { position: absolute; left: max(25px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; pointer-events: auto; touch-action: none; opacity: .72; }
.joystick-ring { position: absolute; inset: 0; border: 2px solid rgba(255,255,255,.38); border-radius: inherit; background: radial-gradient(circle, rgba(255,255,255,.035) 0 34%, rgba(1,8,4,.17) 35% 100%); box-shadow: inset 0 0 18px rgba(0,0,0,.25); }
.joystick-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(219,247,230,.2); box-shadow: 0 5px 16px rgba(0,0,0,.35); }
.action-buttons { position: absolute; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 10px; pointer-events: auto; }
.game-button { width: 82px; height: 82px; border: 2px solid rgba(255,255,255,.47); border-radius: 50%; color: #fff; background: rgba(3,16,9,.6); box-shadow: 0 7px 18px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.15); font-size: .78rem; font-weight: 900; letter-spacing: .03em; cursor: pointer; touch-action: none; }
.game-button:active, .game-button.active { transform: scale(.95); border-color: var(--gold); filter: brightness(1.2); }
.first-action { background: rgba(26,102,190,.62); }
.second-action { width: 92px; height: 92px; background: rgba(185,35,50,.68); }
.sprint-button { background: rgba(224,147,24,.63); }
.game-button:disabled { opacity: .36; filter: grayscale(.3); }

#portraitGuard { display: none; position: absolute; z-index: 90; inset: 0; place-items: center; align-content: center; gap: 9px; padding: 30px; color: #fff; text-align: center; background: radial-gradient(circle, #155638, #020805); }
#portraitGuard div { color: var(--gold); font-size: 4rem; }
#portraitGuard strong { font-size: 1.3rem; letter-spacing: .08em; }
#portraitGuard span { color: #bed0c4; font-size: .9rem; font-weight: 650; }
body.screen-locked #backButton, body.screen-locked #pauseButton, body.screen-locked #cleanScreen, body.screen-locked #resetButton { 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) {
  #scoreboard { height: 42px; width: min(600px, calc(100vw - 300px)); border-radius: 9px; }
  .corner-button { width: 30px; height: 30px; border-radius: 8px; font-size: 1.02rem; }
  .corner-controls { top: max(5px, env(safe-area-inset-top)); gap: 4px; }
  .team-mark { width: 24px; height: 24px; font-size: .7rem; }
  .team strong { font-size: .62rem; }
  .team b { font-size: 1.18rem; }
  .game-status { grid-template-rows: 23px 13px; padding: 2px 7px; }
  .game-status strong { font-size: 1.02rem; }
  .game-status span, .game-status b { font-size: .55rem; }
  #seasonBadge { top: 49px; left: max(7px, env(safe-area-inset-left)); padding: 4px 7px; }
  #seasonBadge span { font-size: .52rem; }
  #seasonBadge strong { font-size: .58rem; }
  .joystick { width: 106px; height: 106px; left: max(13px, env(safe-area-inset-left)); bottom: max(13px, env(safe-area-inset-bottom)); }
  .joystick-knob { width: 42px; height: 42px; margin: -21px; }
  .action-buttons { right: max(13px, env(safe-area-inset-right)); bottom: max(13px, env(safe-area-inset-bottom)); gap: 7px; }
  .game-button { width: 65px; height: 65px; font-size: .62rem; }
  .second-action { width: 74px; height: 74px; }
  .start-card { width: min(900px, 93vw); padding: 10px 18px; }
  .start-card h1 { margin: 3px 0 5px; font-size: clamp(2rem, 8vh, 3.15rem); }
  .start-copy { margin: 5px auto 7px; font-size: .72rem; }
  .quick-guide { margin: 6px 0 7px; }
  .quick-guide span { padding: 5px; font-size: .57rem; }
  .quick-guide b { font-size: .6rem; }
  .team-choices { gap: 5px; }
  .team-choice { min-height: 42px; padding: 4px 7px; }
  .team-choice strong { font-size: .6rem; }
  .team-choice small { font-size: .52rem; }
  .opening-choice { margin: 7px 0 5px; }
  .primary-action, .secondary-action { min-height: 38px; padding: 6px 13px; font-size: .7rem; }
  .results-card { padding: 11px 18px; }
  .results-card h2 { font-size: 2rem; }
  .table-wrap { max-height: 42vh; }
  .league-table th, .league-table td { padding: 4px 6px; }
}

@media (max-width: 760px) and (orientation: landscape) {
  #scoreboard { width: calc(100vw - 142px); }
  .team strong { display: none; }
  .quick-guide { grid-template-columns: repeat(2, 1fr); }
  .team-choices { grid-template-columns: repeat(4, minmax(0,1fr)); }
}