:root {
  color-scheme: dark;
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  --bg: #080a10;
  --surface: #11141d;
  --line: rgba(193, 204, 236, .11);
  --text: #f4f6fd;
  --muted: #8c93a5;
  --blue: #4473ff;
  --pink: #ee729a;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased; }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: wait; opacity: .48; }
button:focus-visible, a:focus-visible, select:focus-visible, .arena-mount:focus-visible { outline: 2px solid #91abff; outline-offset: 4px; }
button, a, select { touch-action: manipulation; }
button { transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
button:active:not(:disabled) { transform: translateY(1px); }
button svg, .camera-label { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
[hidden] { display: none !important; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.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; }
.app-shell { display: flex; flex-direction: column; min-height: 100svh; height: 100dvh; max-width: 2200px; margin: auto; padding: 0 24px; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 82px; flex: 0 0 auto; }
.brand { display: flex; align-items: center; gap: 13px; color: var(--text); font-size: 12px; font-weight: 500; letter-spacing: 1.9px; text-decoration: none; white-space: nowrap; }
.brand strong { font-weight: 780; }
.brand-mark { display: flex; gap: 3px; align-items: end; transform: skew(-14deg); height: 21px; }
.brand-mark span { display: block; background: #dce4ff; width: 5px; height: 14px; }
.brand-mark span:nth-child(2) { height: 21px; background: var(--blue); }
.brand-mark span:nth-child(3) { height: 17px; }
.version-tag { font-size: 11px; letter-spacing: .6px; font-weight: 650; color: #8ca2df; border: 1px solid #243256; padding: 5px 7px; border-radius: 4px; }
.arena-comparison, .camera-selector { display: inline-flex; align-items: center; background: #11141d; border: 1px solid var(--line); border-radius: 9px; padding: 4px; gap: 3px; }
.arena-comparison { position: absolute; left: 50%; transform: translateX(-50%); }
.segment { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; color: #969daf; border-radius: 6px; min-height: 32px; padding: 0 17px; white-space: nowrap; }
.segment:hover { background: #202635; color: #e8eeff; }
.segment.is-active, .segment[aria-pressed="true"] { background: #263452; color: #f0f4ff; box-shadow: inset 0 0 0 1px rgba(129, 158, 244, .14), 0 2px 5px #0003; }
.tiny-dot { display: inline-block; width: 5px; height: 5px; border-radius: 100%; background: var(--blue); flex: 0 0 auto; }
.prototype-note { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #8d94a6; }
.status-dot { width: 5px; height: 5px; background: #5d6578; border-radius: 50%; }
.arena-stage { position: relative; min-height: 420px; flex: 1 1 auto; overflow: hidden; isolation: isolate; border: 1px solid rgba(126, 148, 198, .16); border-radius: 15px; background: radial-gradient(ellipse at 50% 38%, #1a283d, #0b101c 70%); }
.arena-mount { position: absolute; inset: 0; overflow: hidden; }
.arena-mount canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.stage-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 8, 17, .4), transparent 22%, transparent 72%, rgba(4, 8, 17, .46)); z-index: 1; }
.broadcast-label { position: absolute; display: flex; align-items: center; gap: 8px; top: 30px; left: 27px; z-index: 3; font-size: 12px; letter-spacing: .5px; font-weight: 650; color: #d0d5e3; text-shadow: 0 1px 8px #000; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.scoreboard { position: absolute; z-index: 4; left: 50%; top: 19px; transform: translateX(-50%); display: flex; align-items: center; height: 54px; padding: 0 15px; background: rgba(9, 13, 23, .9); border: 1px solid rgba(167, 184, 223, .15); box-shadow: 0 8px 32px #0003; backdrop-filter: blur(16px); border-radius: 8px; }
.scoreboard::before { content: ""; position: absolute; bottom: -1px; left: 16px; right: 16px; height: 2px; background: linear-gradient(90deg, #4473ff, #4473ff 28%, transparent 28%, transparent 72%, #ee729a 72%, #ee729a); opacity: .85; }
.score-team { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 1px; font-weight: 750; }
.score-team img { width: 30px; height: 30px; object-fit: contain; }
.score-numbers { display: flex; align-items: center; gap: 12px; margin: 0 22px; font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; }
.score-divider { font-size: 16px; font-weight: 450; color: #768097; transform: translateY(-2px); }
.match-clock { color: #b5bdd0; margin-left: 18px; padding-left: 16px; border-left: 1px solid #ffffff17; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .4px; }
.performance { position: absolute; top: 27px; right: 25px; z-index: 3; display: flex; align-items: center; gap: 5px; color: #a3aec5; font-size: 11px; letter-spacing: .3px; font-variant-numeric: tabular-nums; background: rgba(7, 12, 22, .55); padding: 6px 9px; border: 1px solid #b9c8eb13; border-radius: 5px; }
.performance #fps-value { color: #e1e9f8; font-weight: 600; }
.performance-dot { width: 4px; height: 4px; background: #80b7a3; border-radius: 50%; margin-right: 2px; }
.home-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; padding: 30px 5%; pointer-events: none; background: linear-gradient(90deg, rgba(5, 9, 18, .85), rgba(5, 9, 18, .61) 31%, rgba(5, 9, 18, .18) 59%, transparent 81%); }
.intro-content { max-width: 600px; padding-top: 20px; pointer-events: auto; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: #a7b4d4; font-size: 11px; font-weight: 650; letter-spacing: 1.2px; line-height: 1.6; }
.eyebrow > span { width: 23px; height: 2px; background: var(--blue); }
h1 { display: flex; align-items: center; gap: 18px; margin: 22px 0 15px; font-size: clamp(44px, 4.8vw, 78px); font-weight: 830; line-height: 1; letter-spacing: -3.2px; }
h1 .versus { font-size: .53em; font-weight: 300; color: #6a7897; letter-spacing: 0; }
.intro-description { font-size: clamp(17px, 1.4vw, 21px); font-weight: 400; line-height: 1.6; letter-spacing: -.2px; color: #acb7ce; margin: 0; }
.intro-actions { display: flex; gap: 11px; align-items: center; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; height: 48px; border-radius: 7px; padding: 0 19px; font-size: 13px; font-weight: 650; white-space: nowrap; }
.button-primary { background: #3d65ed; color: #fff; box-shadow: inset 0 1px 0 #ffffff2a, 0 4px 12px #0006; }
.button-primary:hover { background: #517aff; box-shadow: inset 0 1px 0 #ffffff2a, 0 5px 14px #0007; }
.button-secondary { color: #d4def1; background: #182031a1; border: 1px solid #92a9d72a; backdrop-filter: blur(10px); font-weight: 550; gap: 10px; }
.button-secondary:hover { background: #27334c; }
.button-secondary svg { width: 15px; height: 15px; }
.intro-note { display: flex; align-items: center; gap: 9px; margin: 19px 0 0; color: #9eabc4; font-size: 12px; letter-spacing: .1px; }
.intro-note span { color: #6d7e9c; }
.intro-edition { position: absolute; display: flex; gap: 16px; align-items: center; left: 5%; right: 5%; bottom: 30px; font-size: 11px; color: #8d9bb6; letter-spacing: .8px; flex-wrap: wrap; font-weight: 550; }
.edition-line { display: block; width: 62px; height: 1px; background: #46587766; }
.loading-panel { position: absolute; top: 89px; left: 50%; transform: translateX(-50%); z-index: 12; display: flex; align-items: center; gap: 10px; padding: 12px 17px; border-radius: 8px; background: #0c1223eb; border: 1px solid #5269923d; font-size: 12px; color: #b7c5e0; max-width: calc(100% - 32px); backdrop-filter: blur(16px); }
.loading-spinner { border: 2px solid #34435e; border-top-color: #7796ff; width: 15px; height: 15px; border-radius: 50%; animation: spin 1s linear infinite; flex: 0 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-panel progress { display: block; height: 2px; width: 100%; margin-top: 6px; border: 0; background: #29354e; accent-color: var(--blue); }
.loading-panel progress::-webkit-progress-bar { background: #29354e; }
.loading-panel progress::-webkit-progress-value { background: var(--blue); }
.loading-panel progress::-moz-progress-bar { background: var(--blue); }
.error-panel { position: absolute; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 30px; width: min(420px, calc(100% - 32px)); text-align: center; border: 1px solid #76565e; border-radius: 13px; background: #101521f5; box-shadow: 0 16px 32px #0009; backdrop-filter: blur(25px); }
.error-icon { display: grid; place-items: center; margin: 0 auto 18px; height: 34px; width: 34px; border: 1px solid #d9849e; color: #f5b4c8; border-radius: 50%; font-size: 19px; }
.error-panel h2 { font-size: 19px; letter-spacing: -.4px; }
.error-panel p { color: #b9c1d5; font-size: 13px; line-height: 1.6; margin-bottom: 22px; }
.match-hud { position: absolute; z-index: 3; left: 26px; bottom: 25px; pointer-events: none; }
.control-indicator { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .4px; font-weight: 650; color: #e0e8f7; text-shadow: 0 1px 8px #000; }
.player-marker { width: 7px; height: 7px; border-radius: 50%; background: #668bff; box-shadow: 0 0 0 3px #5476dc21; }
.match-event { font-size: 12px; color: #a8b5cd; margin: 8px 0 0; text-shadow: 0 1px 8px #000; max-width: 520px; }
.renderer-badge { position: absolute; display: flex; align-items: center; gap: 7px; z-index: 3; right: 26px; bottom: 27px; font-size: 12px; letter-spacing: .2px; color: #9eaac1; padding: 7px 9px; background: #090e1d91; border-radius: 4px; pointer-events: none; }
body:not(.is-playing) .match-hud { opacity: 0; }
.control-deck { padding: 14px 0 17px; flex: 0 0 auto; }
.toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 18px; }
.match-actions, .view-actions, .camera-group { display: flex; align-items: center; gap: 9px; }
.tool-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 40px; border-radius: 7px; font-size: 12px; padding: 0 12px; color: #c0c7d7; white-space: nowrap; }
.tool-button:hover { background: #1b2130; color: #fff; }
.tool-button.muted { color: #8f98ad; }
.tool-button svg { height: 17px; width: 17px; }
.tool-button.sound-toggle.is-off { color: #8f98ad; }
.tool-button.sound-toggle.is-off svg path { stroke-dasharray: 2 3; }
.icon-button { width: 38px; padding: 0; }
.camera-group { gap: 12px; }
.camera-label { color: #6e788e; height: 16px; width: 16px; }
.camera-selector { padding: 3px; border-color: #a6b6df0d; border-radius: 7px; background: #11141b; }
.camera-selector .segment { padding: 0 18px; min-height: 30px; font-size: 12px; border-radius: 4px; }
.camera-selector .segment.is-active, .camera-selector .segment[aria-pressed="true"] { background: #272e3f; box-shadow: inset 0 1px 0 #ffffff10; }
.quality-control { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #97a1b6; }
.quality-control select { background: #111620; border: 1px solid #98acc41c; color: #c6d0e6; border-radius: 5px; padding: 7px 6px; font-size: 12px; cursor: pointer; }
.toolbar-divider { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
/* M13 — controles do teclado: teclas desenhadas que acendem quando apertadas; grandes no começo da partida,
   compactas depois (data-state). Só aparecem quando você joga (no modo assistir ninguém controla). */
.controls-hud { --cap: 30px; display: none; justify-content: center; align-items: flex-end; gap: 30px; margin-top: 14px; }
body.is-playing[data-mode="play"] .controls-hud { display: flex; }
.ctrl-cluster { display: flex; align-items: flex-end; gap: 16px; }
.ctrl-move { flex-direction: column; align-items: center; gap: 7px; }
.keys-arrows { display: grid; grid-template-columns: repeat(3, var(--cap)); grid-template-rows: repeat(2, var(--cap)); gap: 3px; }
.keys-arrows [data-action="MOVE_UP"] { grid-area: 1 / 2; }
.keys-arrows [data-action="MOVE_LEFT"] { grid-area: 2 / 1; }
.keys-arrows [data-action="MOVE_DOWN"] { grid-area: 2 / 2; }
.keys-arrows [data-action="MOVE_RIGHT"] { grid-area: 2 / 3; }
.keys-wasd { display: grid; grid-template-columns: repeat(3, auto); column-gap: 5px; row-gap: 3px; }
.k-w { grid-area: 1 / 2; } .k-a { grid-area: 2 / 1; } .k-s { grid-area: 2 / 2; } .k-d { grid-area: 2 / 3; }
.ctrl-key { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.k-w { flex-direction: column-reverse; }
.cap { display: inline-flex; justify-content: center; align-items: center; min-width: var(--cap); height: var(--cap); padding: 0 6px; font-family: inherit; font-size: 12px; font-weight: 650; line-height: 1; color: #c9d3ea; background: linear-gradient(#181e2b, #10141d); border: 1px solid #a3b3da26; border-bottom-width: 3px; border-bottom-color: #05070d; border-radius: 6px; box-shadow: 0 1px 0 #ffffff08 inset; transition: transform .07s ease, background .07s ease, border-color .07s ease, color .07s ease, box-shadow .07s ease; }
.cap-wide { min-width: 60px; font-size: 11px; letter-spacing: .5px; }
.cap-arrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cap-arrow[data-action="MOVE_LEFT"] svg { transform: rotate(-90deg); } .cap-arrow[data-action="MOVE_RIGHT"] svg { transform: rotate(90deg); } .cap-arrow[data-action="MOVE_DOWN"] svg { transform: rotate(180deg); }
.controls-hud[data-state="compact"] .cap-arrow svg { width: 11px; height: 11px; }
.ctrl-name { font-size: 11px; font-weight: 650; letter-spacing: .9px; text-transform: uppercase; color: #8a95ab; white-space: nowrap; transition: color .07s ease; }
.cap.is-pressed, .ctrl-key.is-pressed .cap { color: #fff; background: #263452; border-color: #6f8ff5; border-bottom-width: 1px; transform: translateY(2px); box-shadow: 0 0 0 1px #4473ff66; }
.ctrl-key.is-pressed .ctrl-name { color: #dce4ff; }
.charge-meter { position: absolute; left: 4px; right: 4px; top: calc(var(--cap) + 1px); height: 2px; border-radius: 2px; background: #ffffff12; overflow: hidden; opacity: 0; transition: opacity .1s ease; }
.charge-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4473ff, #ee729a); }
.ctrl-key.is-charging .charge-meter { opacity: 1; }
.ctrl-toggle { align-self: center; font-size: 11px; color: #8f98ad; padding: 7px 10px; border-radius: 6px; white-space: nowrap; }
.ctrl-toggle:hover { color: #fff; background: #1b2130; }
.controls-hud[data-state="compact"] { --cap: 22px; gap: 18px; align-items: center; margin-top: 10px; }
.controls-hud[data-state="compact"] .ctrl-cluster, .controls-hud[data-state="compact"] .ctrl-move { flex-direction: row; align-items: center; gap: 12px; }
.controls-hud[data-state="compact"] .keys-arrows { grid-template-columns: repeat(4, var(--cap)); grid-template-rows: var(--cap); }
.controls-hud[data-state="compact"] .keys-arrows .cap { grid-area: auto; }
.controls-hud[data-state="compact"] .keys-wasd { display: flex; gap: 12px; }
.controls-hud[data-state="compact"] .ctrl-key { flex-direction: row; gap: 6px; }
.controls-hud[data-state="compact"] .cap { font-size: 11px; border-bottom-width: 2px; }
.controls-hud[data-state="compact"] .cap-wide { min-width: 44px; }
.controls-hud[data-state="compact"] .ctrl-name { letter-spacing: .7px; }
.controls-hud[data-state="compact"] .charge-meter { top: auto; bottom: -4px; left: 2px; right: auto; width: 18px; }
kbd { display: inline-flex; justify-content: center; align-items: center; font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.5; min-width: 22px; min-height: 22px; padding: 0 5px; color: #9aa7bf; border: 1px solid #a3b3da1a; border-bottom-color: #a3b3da2b; background: #121620; border-radius: 4px; }
.help-dialog { width: min(430px, calc(100vw - 32px)); color: var(--text); background: #121824; border: 1px solid #8eadd52b; border-radius: 14px; padding: 27px; box-shadow: 0 16px 32px #0009; }
.help-dialog::backdrop { background: #020713b3; backdrop-filter: blur(6px); }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; }
.dialog-heading .eyebrow { color: #8ea8f2; font-size: 11px; }
.dialog-heading h2 { font-size: 26px; letter-spacing: -.7px; margin: 8px 0 0; }
.help-dialog p { color: #a5b1c8; font-size: 12px; line-height: 1.7; margin-top: 20px; }
.control-list { margin: 23px 0; }
.control-list > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #a8c0df12; }
.control-list dt { font-size: 12px; color: #d3dced; }
.control-list dd { margin: 0; font-size: 12px; color: #8d9cb8; }
.control-list kbd { padding: 2px 7px; font-size: 11px; }
.help-dialog .dialog-footnote { font-size: 12px; color: #97a6c2; margin-bottom: 0; }
.touch-controls { display: none; position: absolute; z-index: 7; bottom: 24px; left: 18px; right: 18px; align-items: end; justify-content: space-between; pointer-events: none; user-select: none; }
.touch-movement { display: flex; align-items: end; gap: 8px; }
.touch-dpad { display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, 42px); gap: 3px; }
.touch-button { display: flex; align-items: center; justify-content: center; background: #0b1634a8; border: 1px solid #b4ccff38; border-radius: 10px; color: #dce7ff; pointer-events: auto; touch-action: none; padding: 0; backdrop-filter: blur(5px); }
.touch-button:active, .touch-button.is-active { background: #446ff2ac; border-color: #b4ccff96; }
.touch-button svg { height: 22px; width: 22px; }
.touch-up { grid-area: 1 / 2; }
.touch-left { grid-area: 2 / 1; }
.touch-left svg { transform: rotate(-90deg); }
.touch-right { grid-area: 2 / 3; }
.touch-right svg { transform: rotate(90deg); }
.touch-down { grid-area: 3 / 2; }
.touch-down svg { transform: rotate(180deg); }
.dpad-center { grid-area: 2 / 2; align-self: center; justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: #7899df55; }
.touch-sprint { width: 39px; height: 39px; border-radius: 50%; margin-bottom: 6px; }
.touch-actions { display: grid; grid-template-columns: 47px 62px; align-items: center; justify-items: center; gap: 8px; }
.touch-small { display: flex; flex-direction: column; gap: 2px; width: 46px; height: 46px; border-radius: 50%; font-size: 11px; color: #c8d6f2; }
.touch-small svg { width: 15px; height: 15px; }
.touch-pass { width: 48px; height: 48px; border-radius: 50%; font-size: 12px; }
.touch-shoot { width: 61px; height: 61px; border-radius: 50%; background: #3557bdc4; border-color: #89a9ff80; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.noscript-note { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; padding: 30px; border-radius: 12px; background: #151d2e; color: #fff; border: 1px solid #8393b7; text-align: center; }
.arena-stage:fullscreen { border-radius: 0; border: 0; min-height: 100vh; }
body:fullscreen .app-shell { max-width: none; }
@media (min-width: 1600px) { .app-shell { padding: 0 32px; } .app-header { min-height: 88px; } .intro-content { padding-left: 12px; } }
@media (max-width: 1100px) {
  .app-shell { padding: 0 16px; }
  .app-header { min-height: 73px; gap: 14px; }
  .brand { font-size: 11px; gap: 9px; letter-spacing: 1px; }
  .version-tag { font-size: 11px; padding: 3px 5px; }
  .prototype-note { display: none; }
  .arena-comparison { position: static; transform: none; }
  .broadcast-label { left: 19px; font-size: 12px; letter-spacing: .5px; }
  .performance { right: 18px; }
  .scoreboard { height: 48px; padding: 0 12px; }
  .score-team { gap: 8px; font-size: 11px; }
  .score-team img { width: 27px; height: 27px; }
  .score-numbers { margin: 0 14px; font-size: 22px; gap: 9px; }
  .match-clock { margin-left: 12px; padding-left: 12px; font-size: 11px; }
  .home-overlay { padding-left: 5%; }
  h1 { font-size: 56px; }
  .toolbar { gap: 8px; }
  .match-actions, .view-actions { gap: 3px; }
  .tool-button { padding: 0 9px; font-size: 12px; }
  .camera-selector .segment { padding: 0 14px; }
  .camera-label { display: none; }
  .quality-control > span { display: none; }
  .controls-hud { gap: 20px; }
}
@media (max-width: 720px) {
  .app-shell { padding: 0 10px; height: auto; min-height: 100dvh; }
  .app-header { min-height: 102px; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px; }
  .brand { width: 100%; justify-content: center; font-size: 11px; }
  .brand-mark { height: 18px; transform: skew(-14deg) scale(.85); }
  .brand .version-tag { margin-left: 1px; }
  .arena-comparison { padding: 3px; }
  .segment { min-height: 32px; padding: 0 18px; font-size: 12px; }
  .arena-stage { min-height: 470px; height: calc(100dvh - 230px); flex: 1 0 auto; border-radius: 10px; }
  .scoreboard { top: 15px; height: 43px; padding: 0 10px; }
  .score-team { font-size: 11px; gap: 6px; letter-spacing: .4px; }
  .score-team img { width: 24px; height: 24px; }
  .score-numbers { font-size: 21px; gap: 8px; margin: 0 13px; }
  .match-clock { margin-left: 10px; padding-left: 10px; font-size: 11px; }
  .broadcast-label { top: 73px; left: 15px; font-size: 12px; letter-spacing: .4px; }
  .performance { top: 65px; right: 13px; font-size: 11px; padding: 5px 6px; }
  .home-overlay { align-items: center; padding: 20px 7%; background: linear-gradient(90deg, #050912c9, #05091255 100%); }
  .intro-content { width: 100%; padding-top: 35px; }
  .eyebrow { font-size: 11px; letter-spacing: .8px; gap: 8px; }
  .eyebrow > span { width: 16px; }
  h1 { font-size: clamp(39px, 9.5vw, 62px); letter-spacing: -2px; gap: 13px; margin: 20px 0 13px; }
  .intro-description { font-size: 17px; }
  .intro-actions { margin-top: 24px; gap: 9px; flex-wrap: wrap; }
  .button { font-size: 12px; height: 44px; padding: 0 14px; gap: 9px; }
  .button svg { width: 16px; height: 16px; }
  .intro-note { font-size: 11px; gap: 6px; flex-wrap: wrap; }
  .intro-edition { bottom: 16px; left: 7%; right: 7%; font-size: 11px; gap: 6px 9px; letter-spacing: .4px; }
  .edition-line { width: 22px; }
  .renderer-badge { right: 13px; bottom: 12px; font-size: 12px; background: none; padding: 0; }
  .home-overlay:not([hidden]) ~ .renderer-badge { display: none; }
  .match-hud { left: 14px; bottom: 35px; }
  .control-indicator { font-size: 12px; }
  .match-event { font-size: 12px; max-width: 290px; }
  .loading-panel { top: 96px; font-size: 12px; padding: 9px 12px; }
  .control-deck { padding: 10px 0 14px; }
  /* Phones: one group per row so nothing wraps inside a button or runs off the edge. */
  .toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: center; }
  .match-actions { grid-row: 1; }
  .view-actions { grid-row: 2; gap: 2px; flex-wrap: wrap; justify-content: center; }
  .camera-group { grid-row: 3; }
  .tool-button { min-height: 40px; padding: 0 7px; font-size: 12px; gap: 5px; }
  .tool-button svg { width: 15px; height: 15px; }
  .icon-button { width: 31px; }
  .quality-control select { font-size: 12px; padding: 6px 3px; }
  .toolbar-divider { margin: 0 3px; }
  .camera-selector .segment { min-height: 36px; padding: 0 14px; }
  .controls-hud { --cap: 26px; flex-wrap: wrap; gap: 12px 18px; margin-top: 12px; }
}
@media (pointer: coarse) {
  body.is-playing[data-mode="play"] .touch-controls { display: flex; }
  .controls-hud, body.is-playing[data-mode="play"] .controls-hud { display: none; }
  body.is-playing .match-hud { bottom: auto; top: 95px; }
  body.is-playing .match-event { max-width: 300px; }
}
@media (max-width: 920px) and (orientation: landscape) and (max-height: 550px) {
  .app-shell { height: 100dvh; min-height: 100dvh; padding: 0 9px; }
  .app-header { min-height: 45px; justify-content: space-between; flex-wrap: nowrap; gap: 8px; }
  .brand { width: auto; font-size: 11px; letter-spacing: .6px; }
  .brand-mark { transform: skew(-14deg) scale(.72); margin-right: -3px; }
  .version-tag { font-size: 11px; padding: 2px 4px; }
  .arena-comparison { padding: 2px; }
  .segment { min-height: 28px; font-size: 11px; padding: 0 12px; }
  .arena-stage { min-height: 230px; height: auto; flex: 1; border-radius: 7px; }
  .scoreboard { top: 10px; height: 38px; }
  .score-team img { width: 22px; height: 22px; }
  .score-numbers { font-size: 20px; }
  .broadcast-label { top: 22px; }
  .performance { top: 17px; }
  .home-overlay { padding: 12px 5%; }
  .intro-content { padding-top: 23px; }
  h1 { font-size: 43px; margin: 12px 0 7px; }
  .intro-description { font-size: 12px; line-height: 1.5; }
  .intro-description br { display: none; }
  .intro-actions { margin-top: 14px; }
  .button { height: 38px; font-size: 12px; }
  .intro-note { margin-top: 10px; }
  .intro-edition { display: none; }
  .loading-panel { top: 57px; padding: 7px 11px; font-size: 11px; }
  .control-deck { padding: 5px 0; }
  .toolbar { display: flex; gap: 8px; min-height: 32px; }
  .tool-button { min-height: 32px; }
  .camera-selector .segment { padding: 0 15px; min-height: 25px; }
  .controls-hud, body.is-playing[data-mode="play"] .controls-hud { display: none; }
  .touch-controls { bottom: 12px; left: 15px; right: 15px; }
  .touch-dpad { grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); gap: 2px; }
  .touch-button svg { width: 18px; height: 18px; }
  .touch-actions { grid-template-columns: 40px 52px; gap: 6px; }
  .touch-small { width: 36px; height: 36px; }
  .touch-small svg { width: 13px; height: 13px; }
  .touch-shoot { width: 51px; height: 51px; }
  .touch-pass { width: 39px; height: 39px; }
  body.is-playing .match-hud { top: 61px; }
  .renderer-badge { bottom: 12px; right: 50%; transform: translateX(50%); }
}
/* MVP12 (3ª rodada) — CELULAR. `html.phone` vem do mobile-ui.js (toque e lado menor da tela até 600 px). Jogando, o palco
   ocupa a tela inteira; a barra da partida vira um painel lateral atrás de "Menu"; joystick analógico à esquerda e ações
   em arco à direita, todos com 44 px ou mais; nada do HUD por cima de outra coisa. */
.phone-bar, .rotate-hint, .touch-stick, .deck-scrim, .touch-list { display: none; }
/* área segura: o que o navegador informa ou, no app, as margens reais do recorte da câmera (MainActivity → --native-inset-*) */
html.phone, html.native-app { --safe-t: max(env(safe-area-inset-top, 0px), var(--native-inset-top, 0px)); --safe-r: max(env(safe-area-inset-right, 0px), var(--native-inset-right, 0px)); --safe-b: max(env(safe-area-inset-bottom, 0px), var(--native-inset-bottom, 0px)); --safe-l: max(env(safe-area-inset-left, 0px), var(--native-inset-left, 0px)); }
/* aparelho de toque: interface de jogo não seleciona texto nem abre o menu do toque longo */
html.phone, html.native-app { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.phone input, html.phone textarea, html.native-app input, html.native-app textarea { -webkit-user-select: text; user-select: text; }
html.phone body.is-playing { overflow: hidden; overscroll-behavior: none; }
html.phone body.is-playing .app-shell { padding: 0; height: 100dvh; min-height: 0; }
html.phone body.is-playing .app-header { display: none; }
html.phone body.is-playing .arena-stage { position: fixed; inset: 0; min-height: 0; height: auto; border: 0; border-radius: 0; }
html.phone body.is-playing .performance, html.phone body.is-playing .renderer-badge, html.phone body.is-playing .controls-hud { display: none; }
/* barra da partida → painel lateral */
html.phone body.is-playing .control-deck { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); z-index: 40; padding: calc(16px + var(--safe-t)) calc(14px + var(--safe-r)) calc(16px + var(--safe-b)) 16px; background: #0c111cf2; backdrop-filter: blur(18px); border-left: 1px solid var(--line); box-shadow: -12px 0 32px #0008; overflow-y: auto; transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
html.phone.deck-open body.is-playing .control-deck { transform: none; visibility: visible; transition: transform .22s ease; }
html.phone.deck-open .deck-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 39; background: #02061099; }
html.phone body.is-playing .toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: stretch; align-items: stretch; }
html.phone body.is-playing .match-actions, html.phone body.is-playing .view-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; grid-row: auto; }
html.phone body.is-playing .camera-group { display: block; grid-row: auto; }
html.phone body.is-playing .camera-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
html.phone body.is-playing .camera-selector .segment { min-height: 44px; padding: 0 4px; font-size: 13px; }
html.phone body.is-playing .tool-button { min-height: 48px; width: auto; padding: 0 14px; justify-content: flex-start; font-size: 13px; color: #d4dbea; background: #161d2b; border: 1px solid var(--line); }
html.phone body.is-playing .icon-button::after { content: attr(title); }
html.phone body.is-playing a.tool-button { text-decoration: none; }
html.phone body.is-playing .toolbar-divider { display: none; }
html.phone body.is-playing .quality-control { grid-column: 1 / -1; justify-content: space-between; min-height: 48px; padding: 0 6px 0 14px; font-size: 13px; color: #d4dbea; background: #161d2b; border: 1px solid var(--line); border-radius: 7px; }
html.phone body.is-playing .quality-control > span { display: inline; }
html.phone body.is-playing .quality-control select { min-height: 38px; font-size: 13px; padding: 0 8px; }
/* pausa e menu sempre à mão */
html.phone body.is-playing .phone-bar { display: flex; position: absolute; z-index: 8; top: calc(8px + var(--safe-t)); right: calc(10px + var(--safe-r)); gap: 8px; }
.phone-button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 12px; color: #dce7ff; background: #0b1634c4; border: 1px solid #b4ccff38; backdrop-filter: blur(6px); }
.phone-button svg { width: 21px; height: 21px; }
.phone-button.is-paused { background: #3d65ed; border-color: #8aa6ff; color: #fff; }
/* HUD sem sobreposição: placar no centro, fase e evento empilhados à esquerda */
html.phone body.is-playing .scoreboard { top: calc(8px + var(--safe-t)); height: 42px; padding: 0 10px; }
html.phone body.is-playing .score-numbers { margin: 0 12px; font-size: 21px; }
html.phone body.is-playing .broadcast-label { top: calc(12px + var(--safe-t)); left: calc(12px + var(--safe-l)); font-size: 12px; letter-spacing: .4px; }
html.phone body.is-playing .match-hud { top: calc(40px + var(--safe-t)); bottom: auto; left: calc(12px + var(--safe-l)); max-width: 30vw; }
html.phone body.is-playing .match-event { max-width: 30vw; font-size: 12px; margin-top: 6px; }
html.phone.portrait body.is-playing .scoreboard { top: calc(62px + var(--safe-t)); }
html.phone.portrait body.is-playing .match-hud { top: calc(116px + var(--safe-t)); max-width: 72vw; }
html.phone.portrait body.is-playing .match-event { max-width: 72vw; }
/* joystick e ações */
html.phone body.is-playing[data-mode="play"] .touch-controls { display: block; inset: 0; }
html.phone .touch-dpad { display: none; }
html.phone .touch-movement { display: block; position: static; }
html.phone .touch-stick { display: block; position: absolute; left: 0; bottom: 0; width: 46%; height: 64%; pointer-events: auto; touch-action: none; }
.stick-base { position: absolute; left: calc(88px + var(--safe-l, 0px)); top: calc(100% - 92px - var(--safe-b, 0px)); width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; background: radial-gradient(circle, #0b163440 42%, #0b1634b0); border: 1px solid #b4ccff40; pointer-events: none; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #446ff2d0; border: 1px solid #b4ccffa0; box-shadow: 0 4px 14px #0008; transition: transform .1s ease-out; }
.touch-stick.is-active .stick-knob { transition: none; }
.touch-stick.is-active .stick-base { background: radial-gradient(circle, #0b163466 42%, #13265ccc); border-color: #b4ccff80; }
html.phone .touch-actions { display: block; position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: 214px; height: 190px; pointer-events: none; }
html.phone .touch-actions .touch-button { position: absolute; }
html.phone .touch-actions .touch-shoot { right: 0; bottom: 0; width: 82px; height: 82px; font-size: 13px; }
html.phone .touch-actions .touch-pass { right: 94px; bottom: 6px; width: 62px; height: 62px; font-size: 13px; }
html.phone .touch-actions [data-control="dribble"] { right: 12px; bottom: 96px; width: 56px; height: 56px; font-size: 11px; }
html.phone .touch-actions [data-control="switch"] { right: 84px; bottom: 80px; width: 56px; height: 56px; font-size: 11px; }
html.phone .touch-sprint { position: absolute; right: calc(190px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); width: 56px; height: 56px; margin: 0; }
/* Carta secreta e Pênalti do presidente no alto à direita, fora do caminho dos polegares */
html.phone body.is-playing .kings-actions { top: calc(62px + var(--safe-t)); right: calc(10px + var(--safe-r)); bottom: auto; left: auto; flex-direction: column; align-items: stretch; gap: 8px; }
html.phone .kings-actions button { min-height: 44px; font-size: 12px; padding: 0 12px; }
html.phone .kings-menu { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(330px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; z-index: 45; }
html.phone .kings-menu button { min-height: 44px; }
html.phone .moment-review { bottom: calc(10px + var(--safe-b)); width: min(560px, calc(100% - 24px)); }
html.phone .moment-review button { min-height: 44px; }
/* jogando em retrato: gire o celular (a partida pausa sozinha) */
html.phone .rotate-hint:not([hidden]) { display: grid; place-content: center; justify-items: center; gap: 10px; position: absolute; inset: 0; z-index: 30; padding: 24px; text-align: center; background: #060a14f4; }
.rotate-hint svg { width: 64px; height: 64px; fill: none; stroke: #9fb4ff; stroke-width: 1.6; stroke-linecap: round; animation: rotate-phone 2s ease-in-out infinite; }
.rotate-hint strong { font-size: 21px; font-weight: 750; letter-spacing: -.3px; }
.rotate-hint span { font-size: 13px; color: #a8b5cd; }
@keyframes rotate-phone { 0%, 20% { transform: rotate(0); } 50%, 75% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
/* ajuda: no celular, os controles de toque no lugar das teclas */
html.phone .help-dialog .control-list:not(.touch-list) { display: none; }
html.phone .help-dialog .touch-list { display: block; }
/* antes da partida: sem a barra da partida (não há partida), sem rolagem, alvos de 44 px */
html.phone body:not(.is-playing) .control-deck { display: none; }
html.phone body:not(.is-playing) .app-shell { height: 100dvh; min-height: 0; }
html.phone body:not(.is-playing) .arena-stage { height: auto; min-height: 0; flex: 1 1 auto; }
html.phone .arena-comparison .segment { min-height: 44px; }
html.phone .brand { min-height: 44px; }
html.phone .intro-actions .button { height: 48px; }
html.phone .team-select .ts-back { min-height: 44px; }
/* jogando em retrato o aviso cobre tudo: as ações Kings (fora do palco) somem junto */
html.phone.portrait body.is-playing[data-mode="play"] .kings-actions { display: none; }
/* MVP12 — técnico, carta, presidente, aviso do rodízio, mensagens e botões Kings: broadcast-ui.css */
@media (prefers-reduced-motion: reduce) { button, .cap, .ctrl-name { transition: none; } .loading-spinner { animation-duration: 2s; } .rotate-hint svg { animation: none; transform: rotate(-90deg); } }