:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --navy: #08131d;
  --panel: rgba(9, 23, 33, .88);
  --white: #f6f8fb;
  --muted: #a8b5c2;
  --blue: #2998ff;
  --red: #fa515a;
  --lime: #d8ff64;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--navy); }
body { -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; }
button { font: inherit; border: 0; color: inherit; cursor: pointer; touch-action: none; }
#game-root { position: fixed; inset: 0; overflow: hidden; background: linear-gradient(145deg, #122735, #08131d); }
#game-root canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; outline: none; }
.hidden { display: none !important; }
.loading-screen { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; background: #08131d; transition: opacity .35s ease; }
.brand-mark { width: 50px; height: 50px; display: grid; place-items: center; border: 2px solid var(--lime); border-radius: 15px 4px 15px 4px; color: white; font-weight: 1000; font-size: 23px; letter-spacing: -3px; font-style: italic; transform: skew(-6deg); }
.brand-mark span { color: var(--lime); }
.loading-screen h1 { margin: 3px 0 0; font-size: 24px; letter-spacing: .2em; }
.loading-screen p { margin: 0; color: var(--muted); font-size: 12px; }
.loading-track { width: 150px; height: 3px; margin-top: 14px; background: #263846; overflow: hidden; border-radius: 9px; }
.loading-track span { display: block; height: 100%; width: 45%; background: var(--lime); animation: load 1.1s infinite ease-in-out alternate; }
@keyframes load { from { transform: translateX(-20%); } to { transform: translateX(145%); } }
.hud { position: absolute; z-index: 5; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 0; min-width: min(460px, 72vw); filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.team-score { min-width: 140px; flex: 1; display: flex; align-items: center; gap: 9px; padding: 10px 13px; font-size: 10px; letter-spacing: .08em; font-weight: 850; background: rgba(7,18,27,.91); backdrop-filter: blur(10px); }
.team-score strong { font-size: 26px; letter-spacing: -.04em; line-height: 1; }
.team-blue { border-radius: 10px 0 0 10px; border-top: 2px solid var(--blue); justify-content: flex-start; }
.team-red { border-radius: 0 10px 10px 0; border-top: 2px solid var(--red); justify-content: flex-end; }
.team-blue strong { margin-left: auto; }
.team-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); }
.team-red .team-dot { background: var(--red); box-shadow: 0 0 12px var(--red); }
.match-clock { min-width: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 10px; background: rgba(20,37,49,.96); border-inline: 1px solid rgba(255,255,255,.09); }
.match-clock small { font-size: 7px; letter-spacing: .16em; color: var(--muted); }
.match-clock strong { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.match-clock span { font-size: 8px; color: var(--lime); font-weight: 800; letter-spacing: .12em; }
.event-toast { position: absolute; z-index: 8; left: 50%; top: 28%; transform: translate(-50%, -50%) scale(.8); background: var(--lime); color: #111c25; padding: 12px 30px; font-size: clamp(22px, 4vw, 38px); font-weight: 1000; letter-spacing: .15em; border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.25); animation: toast .9s ease forwards; pointer-events: none; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%,-20%) scale(.7) rotate(-2deg); } 18% { opacity: 1; transform: translate(-50%,0) scale(1.04); } 70% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; transform: translate(-50%,-10%) scale(.98); } }
.hint { position: absolute; z-index: 4; top: 77px; left: 50%; transform: translateX(-50%); color: white; background: rgba(7,18,27,.72); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 7px 14px; font-size: 11px; white-space: nowrap; }
.controls { position: absolute; z-index: 10; inset: auto 0 0; height: 37%; min-height: 150px; pointer-events: none; background: linear-gradient(0deg, rgba(4,11,17,.72), rgba(4,11,17,0)); }
.joystick-area { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: clamp(118px, 17vh, 158px); display: flex; flex-direction: column; align-items: center; gap: 5px; }
.joystick-base { width: clamp(110px, 16vh, 144px); height: clamp(110px, 16vh, 144px); border-radius: 50%; background: rgba(15,31,43,.45); border: 1px solid rgba(255,255,255,.23); box-shadow: inset 0 0 0 8px rgba(255,255,255,.035), 0 8px 24px rgba(0,0,0,.18); position: relative; display: grid; place-items: center; pointer-events: auto; touch-action: none; }
.joystick-ring { position: absolute; inset: 22%; border: 1px dashed rgba(255,255,255,.16); border-radius: 50%; }
.joystick-knob { width: 40%; height: 40%; border-radius: 50%; background: linear-gradient(145deg, #ecf5ff, #9fb7c9); border: 4px solid rgba(255,255,255,.65); box-shadow: 0 7px 16px rgba(0,0,0,.35), inset 0 -4px 8px rgba(16,45,65,.18); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.control-caption { color: rgba(255,255,255,.78); font-size: 8px; font-weight: 850; letter-spacing: .2em; text-shadow: 0 2px 6px #000; }
.action-buttons { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, minmax(60px, 76px)); align-items: end; gap: 9px; pointer-events: auto; }
.action-btn { min-height: 65px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 50%; aspect-ratio: 1; font-size: 8px; font-weight: 950; letter-spacing: .05em; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 8px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16); transition: transform .08s ease, filter .08s ease; }
.action-btn:active, .action-btn.pressed { transform: scale(.94); filter: brightness(1.2); }
.btn-icon { font-size: 23px; line-height: 1; }
.sprint-btn { background: linear-gradient(145deg, #28668d, #12364f); }
.pass-btn { background: linear-gradient(145deg, #d6e6eb, #819aa6); color: #102b3d; }
.shoot-btn { background: linear-gradient(145deg, #e7ff83, #98d525); color: #17240b; border-color: rgba(242,255,196,.9); }
.pause-btn { position: absolute; z-index: 12; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 38px; height: 38px; border-radius: 50%; background: rgba(6,17,25,.82); border: 1px solid rgba(255,255,255,.23); font-size: 15px; font-weight: 900; backdrop-filter: blur(8px); }
.start-screen, .modal-screen { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: linear-gradient(90deg, rgba(4,12,20,.8), rgba(4,12,20,.42), rgba(4,12,20,.75)); backdrop-filter: blur(3px); }
.start-panel, .modal-panel { width: min(440px, 95vw); padding: clamp(18px, 4vh, 32px); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: linear-gradient(150deg, rgba(14,33,46,.96), rgba(7,18,27,.96)); box-shadow: 0 26px 80px rgba(0,0,0,.35); text-align: center; }
.start-panel .brand-mark { margin: 0 auto 12px; }
.eyebrow { font-size: 9px; font-weight: 900; letter-spacing: .25em; color: var(--lime); margin: 0 0 9px; }
.start-panel h1 { font-size: clamp(32px, 7vw, 48px); font-weight: 1000; letter-spacing: -.06em; margin: 0; font-style: italic; }
.start-panel h1 em { color: var(--lime); font-style: normal; }
.subtitle { color: var(--muted); font-size: 12px; margin: 3px 0 20px; }
.matchup { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 8vw, 46px); margin: 18px auto 8px; }
.team-crest { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 14px 4px 14px 4px; font-size: 24px; font-style: italic; font-weight: 1000; color: white; box-shadow: inset 0 -7px 0 rgba(0,0,0,.16), 0 7px 20px rgba(0,0,0,.2); }
.blue-crest { background: linear-gradient(145deg, #52baff, #0861c7); }
.red-crest { background: linear-gradient(145deg, #ff8284, #bc1f37); }
.versus { display: flex; flex-direction: column; gap: 3px; }
.versus strong { font-size: 20px; font-style: italic; }
.versus span { background: rgba(255,255,255,.08); color: var(--muted); border-radius: 4px; padding: 3px 7px; font-size: 10px; font-weight: 800; }
.team-labels { display: flex; justify-content: center; gap: clamp(30px, 8vw, 62px); margin-bottom: 21px; font-size: 9px; letter-spacing: .1em; font-weight: 900; }
.team-labels span:first-child { color: #6dc4ff; }
.team-labels span:last-child { color: #ff8189; }
.primary-btn { width: 100%; min-height: 46px; display: flex; justify-content: center; align-items: center; gap: 16px; background: var(--lime); color: #15230b; border-radius: 7px; font-size: 11px; font-weight: 1000; letter-spacing: .1em; box-shadow: 0 7px 20px rgba(175,236,61,.13); }
.primary-btn span { font-size: 17px; }
.start-note { color: #93a5b4; font-size: 9px; line-height: 1.5; margin: 12px 0 0; }
.modal-panel h2 { font-size: 28px; margin: 0 0 10px; }
.modal-panel > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.6; }
.secondary-btn { width: 100%; margin-top: 9px; min-height: 43px; border-radius: 7px; border: 1px solid rgba(255,255,255,.19); background: rgba(255,255,255,.06); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.fulltime-score { display: flex; justify-content: center; gap: 20px; align-items: center; margin: 24px 0; font-size: 34px; }
.fulltime-score strong:first-child { color: #6dc4ff; }
.fulltime-score strong:last-child { color: #ff8189; }
.version-tag { position: absolute; z-index: 3; bottom: 8px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.55); font-size: 7px; letter-spacing: .18em; font-weight: 900; pointer-events: none; white-space: nowrap; }
.version-tag span { color: var(--lime); margin: 0 4px; }
.portrait-tip { display: none; }
@media (orientation: portrait) {
  .portrait-tip { position: absolute; z-index: 50; inset: 0; background: #08131d; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; padding: 26px; }
  .portrait-tip div { font-size: 44px; color: var(--lime); }
  .portrait-tip strong { font-size: 20px; }
  .portrait-tip span { color: var(--muted); font-size: 12px; max-width: 250px; line-height: 1.6; }
}
@media (max-height: 450px) and (orientation: landscape) {
  .hud { top: 6px; min-width: 330px; }
  .team-score { min-width: 107px; padding: 6px 9px; font-size: 8px; }
  .team-score strong { font-size: 21px; }
  .match-clock { min-width: 69px; }
  .match-clock strong { font-size: 19px; }
  .hint { top: 53px; font-size: 9px; padding: 5px 10px; }
  .controls { height: 40%; min-height: 118px; }
  .joystick-area { bottom: 6px; left: 13px; width: 100px; }
  .joystick-base { width: 90px; height: 90px; }
  .action-buttons { right: 13px; bottom: 10px; grid-template-columns: repeat(3, 59px); gap: 6px; }
  .action-btn { min-height: 55px; font-size: 7px; }
  .btn-icon { font-size: 18px; }
  .start-panel, .modal-panel { padding: 14px 22px; }
  .start-panel .brand-mark { display: none; }
  .start-panel h1 { font-size: 30px; }
  .subtitle { margin-bottom: 10px; }
  .matchup { margin: 8px auto 5px; }
  .team-crest { width: 40px; height: 40px; }
  .team-labels { margin-bottom: 10px; }
  .start-note { margin-top: 7px; }
  .pause-btn { top: 7px; right: 7px; }
}