:root {
  --v2-gold: #e9b92a;
  --v2-cream: #f5f1df;
  --v2-black: #030605;
  --v2-panel: rgba(5, 10, 8, 0.94);
  --v2-safe-left: env(safe-area-inset-left, 0px);
  --v2-safe-right: env(safe-area-inset-right, 0px);
  --v2-safe-top: env(safe-area-inset-top, 0px);
  --v2-safe-bottom: env(safe-area-inset-bottom, 0px);
}

#v2-gameplay-root {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: var(--v2-black);
  color: var(--v2-cream);
  font-family: "Courier New", monospace;
  touch-action: none;
  user-select: none;
}

#v2-gameplay-root[hidden], #gameplay-controller-root[hidden] { display: none !important; }

.v2-gameplay {
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  padding: var(--v2-safe-top) var(--v2-safe-right) var(--v2-safe-bottom) var(--v2-safe-left);
  display: grid;
  grid-template-rows: clamp(58px, 14dvh, 98px) minmax(0, 1fr) auto;
  background: #020403;
}

.v2-scoreboard {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(115px, 1.25fr) minmax(95px, .75fr) minmax(58px, .45fr) minmax(100px, .8fr) minmax(115px, 1.25fr);
  align-items: stretch;
  border: 2px solid #62501c;
  background: linear-gradient(#080c0a, #020403);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.v2-scoreboard > div { min-width: 0; display: flex; align-items: center; justify-content: center; gap: .55rem; border-right: 1px solid rgba(233,185,42,.22); }
.v2-scoreboard > div:last-child { border-right: 0; }
.v2-scoreboard__team strong, .v2-scoreboard__clock strong { font-size: clamp(1.45rem, 4vw, 3.2rem); color: var(--v2-cream); text-shadow: 2px 2px #000; }
.v2-scoreboard__team--home strong { color: var(--v2-gold); }
.v2-scoreboard__team--away { padding-right: 60px; }
.v2-scoreboard__name { font-weight: 900; font-size: clamp(.72rem, 1.7vw, 1.2rem); letter-spacing: .08em; }
.v2-scoreboard__clock, .v2-scoreboard__play-clock, .v2-scoreboard__situation { flex-direction: column; gap: 0 !important; }
.v2-scoreboard__clock span, .v2-scoreboard__play-clock span { font-size: clamp(.48rem, 1vw, .75rem); color: var(--v2-gold); }
.v2-scoreboard__play-clock strong, .v2-scoreboard__situation strong { font-size: clamp(.72rem, 1.7vw, 1.15rem); }

.v2-field-frame { position: relative; min-height: 0; overflow: hidden; background: #124b22; }
.v2-field { display: block; width: 100%; height: 100%; }
.v2-field:focus { outline: none; }
.v2-keyboard-help { padding: 8px 12px; text-align: center; color: #bbbcae; background: #030605; font: 700 12px/1.4 "Courier New", monospace; }
.v2-rotate-message { position: fixed; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: #020403; color: var(--v2-gold); text-align: center; font: 900 1.3rem "Courier New", monospace; }
.v2-rotate-message[hidden] { display: none; }
.v2-rotate-message span { max-width: 280px; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--v2-cream); }
.v2-field-status, .v2-result-banner { position: absolute; left: 50%; bottom: max(10px, var(--v2-safe-bottom)); transform: translateX(-50%); border: 2px solid var(--v2-gold); background: rgba(3,6,5,.88); color: var(--v2-gold); padding: .45rem 1rem; font-weight: 900; font-size: clamp(.65rem, 1.6vw, 1rem); white-space: nowrap; pointer-events: none; }
.v2-result-banner { bottom: 50%; transform: translate(-50%, 50%); padding: .8rem 1.4rem; color: var(--v2-cream); font-size: clamp(1rem, 3vw, 2rem); }

#gameplay-controller-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}
.v2-controller { position: absolute; inset: 0; pointer-events: none; }
.v2-stick { position: fixed; left: max(calc(var(--v2-safe-left) + 14px), 2.2vw); bottom: max(calc(var(--v2-safe-bottom) + 14px), 3dvh); width: clamp(104px, 22dvh, 142px); aspect-ratio: 1; border: 2px solid rgba(233,185,42,.74); border-radius: 50%; background: radial-gradient(circle, rgba(233,185,42,.15), rgba(2,6,5,.78) 66%); box-shadow: inset 0 0 22px rgba(0,0,0,.72), 0 0 14px rgba(233,185,42,.13); pointer-events: auto; touch-action: none; }
.v2-stick[data-disabled="true"] { opacity: .28; pointer-events: none; }
.v2-stick__ring { position: absolute; inset: 21%; border: 1px solid rgba(245,241,223,.26); border-radius: 50%; }
.v2-stick__puck { position: absolute; left: 35%; top: 35%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #f5dc73, #ab7913); box-shadow: 0 2px 8px #000; transform: translate(0,0); will-change: transform; }

.v2-actions { position: fixed; right: max(calc(var(--v2-safe-right) + 14px), 2.2vw); bottom: max(calc(var(--v2-safe-bottom) + 12px), 2.5dvh); width: clamp(152px, 34dvh, 216px); height: clamp(128px, 29dvh, 184px); pointer-events: none; }
.v2-action, .v2-pause-button { position: absolute; display: grid; place-items: center; border-radius: 50%; border: 3px solid currentColor; background: rgba(7,11,10,.86); color: var(--v2-cream); box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), 0 3px 10px #000; pointer-events: auto; touch-action: none; font-family: "Courier New", monospace; }
.v2-action { width: clamp(58px, 13dvh, 76px); aspect-ratio: 1; }
.v2-action[hidden] { display: none !important; }
.v2-action b { font-size: clamp(1.3rem, 4dvh, 2.1rem); }
.v2-action span { position: absolute; top: calc(100% + 2px); font-size: clamp(.48rem, 1.25dvh, .68rem); font-weight: 900; color: var(--v2-cream); white-space: nowrap; text-shadow: 1px 1px 2px #000; }
.v2-action--y { color: #e1ae22; top: 0; left: 50%; transform: translateX(-50%); }
.v2-action--b { color: #e05443; bottom: 0; left: 0; }
.v2-action--a { color: #53c96a; bottom: 0; right: 0; }
.v2-action[data-pressed="true"] { filter: brightness(1.45); transform: translateY(2px); }
.v2-action--y[data-pressed="true"] { transform: translate(-50%, 2px); }
.v2-action:disabled { opacity: .32; pointer-events: none; filter: grayscale(.55); }
.v2-pause-button { position: fixed; top: max(calc(var(--v2-safe-top) + 8px), 1.5dvh); right: max(calc(var(--v2-safe-right) + 8px), 1.3vw); width: clamp(42px, 9dvh, 54px); aspect-ratio: 1; color: var(--v2-gold); font-weight: 900; z-index: 2; }

#gameplay-modal-root { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.v2-pause { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.78); pointer-events: auto; }
.v2-pause[hidden] { display: none; }
.v2-pause__panel { width: min(330px, calc(100vw - 36px)); padding: 1.6rem; border: 3px solid var(--v2-gold); background: #050908; text-align: center; color: var(--v2-cream); box-shadow: 0 0 30px #000; }
.v2-pause__panel p { color: var(--v2-gold); letter-spacing: .2em; }
.v2-pause__panel button { width: 100%; margin-top: .7rem; padding: .8rem; border: 2px solid #7f681f; background: #0a0f0d; color: var(--v2-cream); font: 900 .95rem "Courier New", monospace; }

.v2-touch-diagnostic { position: fixed; inset: 0; z-index: 99; pointer-events: none; }
.v2-touch-diagnostic i { position: fixed; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #ff3cad; border-radius: 50%; background: rgba(255,60,173,.25); }
.v2-touch-diagnostic pre { position: fixed; left: max(6px, var(--v2-safe-left)); top: max(6px, var(--v2-safe-top)); margin: 0; max-width: 54vw; padding: 6px; background: rgba(0,0,0,.86); color: #8ff; font: 9px/1.25 monospace; white-space: pre-wrap; }

@media (orientation: portrait) and (max-width: 820px) {
  .v2-gameplay { display: none; }
  #gameplay-controller-root { display: none !important; }
}

@media (min-width: 1100px) and (pointer: fine) {
  .v2-stick, .v2-actions { display: none; }
  .v2-controller[data-controller-context="PRE_SNAP"] .v2-actions,
  .v2-controller[data-controller-context="RESULT"] .v2-actions { display: block; width: 80px; height: 90px; }
  .v2-controller[data-controller-context="PRE_SNAP"] .v2-action--b,
  .v2-controller[data-controller-context="PRE_SNAP"] .v2-action--y { display: none; }
}

@media (max-width: 1099px), (pointer: coarse) {
  .v2-keyboard-help { display: none; }
  .v2-scoreboard { grid-template-columns: minmax(90px, 1fr) minmax(70px, .7fr) minmax(40px, .4fr) minmax(70px, .7fr) minmax(130px, 1.3fr); }
  .v2-action span { font-size: 12px; }
}

@media (max-height: 390px) {
  .v2-gameplay { grid-template-rows: 58px minmax(0,1fr) auto; }
  .v2-scoreboard__name { font-size: .66rem; }
  .v2-stick { width: clamp(98px, 27dvh, 112px); bottom: max(calc(var(--v2-safe-bottom) + 8px), 2dvh); }
  .v2-actions { width: 154px; height: 124px; bottom: max(calc(var(--v2-safe-bottom) + 6px), 1.5dvh); }
  .v2-action { width: 56px; }
}