.ego-hud{position:absolute;inset:0;pointer-events:none;color:#f7ebce}
.online-entry{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:43px;margin-top:9px;padding:10px 12px;border:1px solid #658ab0;border-radius:6px;background:#193854;color:#f6ead5;font:700 12px Arial,sans-serif;gap:12px}
.online-entry:hover{background:#254970}.online-entry span{color:#f6cc44;font-size:11px;white-space:nowrap}
.join-form{margin-top:23px;padding-top:20px;border-top:1px solid #365675}.join-form label{display:block;font-size:12px;font-weight:bold;margin-bottom:9px}
.join-row{display:flex;gap:9px}.join-row input{width:0;min-width:0;flex:1;border:1px solid #658ab0;border-radius:6px;background:#091f37;color:#fff0d6;padding:12px;font:700 19px monospace;letter-spacing:3px;text-transform:uppercase}.join-row input::placeholder{color:#8ca6bf}.join-row button{height:auto;min-height:46px}
.join-row input:focus-visible{outline:3px solid #f6cc44;outline-offset:3px}.invite-code{display:block;margin:10px 0 18px;padding:17px 10px;background:#091f37;border:1px dashed #658ab0;border-radius:6px;color:#f6cc44;font:700 35px monospace;letter-spacing:6px;text-align:center;user-select:all}
.online-panel .online-status{min-height:44px;margin-top:18px;font-size:12px;color:#d8e5f1}
#online-panel{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);max-height:calc(100dvh - 135px);overflow-y:auto;width:min(375px,calc(100vw - 30px))}
@media(max-height:540px) and (orientation:landscape){#online-panel{width:min(540px,calc(100vw - 42px));padding:17px 22px}#online-panel h2{font-size:25px;margin:10px 0}#online-panel h2 br{display:none}.join-form{margin-top:12px;padding-top:12px}.online-panel .online-status{margin:10px 0;min-height:0}}
.ball-direction{position:absolute;transform:translate(-50%,-50%);text-align:center;background:#0a203bbd;border-radius:5px;padding:4px 7px}
.ball-direction i{display:block;font:normal 27px Arial;color:#ffdd70;line-height:1}.ball-direction span{display:block;font-size:9px;white-space:nowrap;margin-top:4px}
.contact-hint{position:absolute;bottom:76px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;white-space:nowrap;background:#0a203bdf;border:1px solid #607f9d;padding:10px 15px;border-radius:6px;font-size:12px}


.take-over{bottom:127px}
@media(max-width:720px){.contact-hint{bottom:210px;padding:9px 11px;gap:7px}.take-over{bottom:255px}}
@media(max-height:540px) and (orientation:landscape){.contact-hint{bottom:55px;padding:7px 12px}.take-over{bottom:98px}}
.touch-actions{grid-template-columns:72px 72px;grid-template-rows:72px;gap:9px}
.touch-actions button{width:72px;height:72px;font-size:13px}
.touch-actions button[aria-pressed="true"]{background:#f6cc44;border-color:#fff0a5;box-shadow:0 0 0 3px #f6cc4440}
[data-touch="true"] #sound{display:inline-flex;align-items:center}
@media(max-height:540px) and (orientation:landscape){
  .topbar{height:70px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}.scoreboard{top:10px;height:43px;padding:0 17px;gap:10px}.scoreboard strong{font-size:27px}.match-format{top:49px;font-size:7px}.icon-button{height:33px;font-size:10px}
  .rally-label{top:80px;right:max(16px,env(safe-area-inset-right));font-size:8px;padding:6px 8px}.callout{top:80px;padding:8px 14px}.callout strong{font-size:15px}.callout span{font-size:9px}
  .touch-controls{bottom:max(43px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}#stick{width:96px;height:96px}#stick-knob{left:24px;top:24px}.touch-actions{grid-template-columns:64px 64px;grid-template-rows:64px;gap:8px}.touch-actions button{width:64px;height:64px;font-size:12px}.contact-hint{bottom:51px}.take-over{bottom:96px}
  [data-touch="true"] .contact-hint{max-width:calc(100vw - 310px);white-space:normal;text-align:center;flex-direction:column;gap:3px;padding:7px 9px}
}
/* Broadcast replay replaces the minimap; the match HUD returns afterwards. */
.line-review{--review-accent:#ffffff;position:absolute;z-index:2;inset:0;pointer-events:none;color:#ffffff;background:linear-gradient(0deg,#071a30ed,transparent 39%),radial-gradient(ellipse at 50% 44%,transparent 38%,#071a3038 100%)}
.line-review[data-result="in"]{--review-accent:#ffffff}
[data-time-of-day="superdark"] .line-review{--review-accent:#91acbc;color:#a7bac5;background:linear-gradient(0deg,#020408ed,transparent 39%)}
[data-time-of-day="superdark"] .review-result{background:#050b12f2;border-color:#33434c;border-left-color:var(--review-accent)}
[data-time-of-day="superdark"] #close-review{background:#08111a;color:#a7bac5;border-color:#465b68}
[data-time-of-day="superdark"] #close-review span{color:#a7bac5}
[data-time-of-day="superdark"] .review-progress{background:#13212a}
.review-result{position:absolute;bottom:91px;left:32px;display:flex;align-items:stretch;max-width:calc(100% - 64px);border:1px solid #70869a75;border-left:4px solid var(--review-accent);background:#0a2039f2;box-shadow:0 10px 35px #03111f45}

[data-verdict="true"] 
#review-distance{display:block;font-size:23px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums}

.review-footer{position:absolute;bottom:27px;left:32px;right:30px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#close-review{pointer-events:auto;min-height:44px;border:1px solid #7691a6;border-radius:4px;padding:0 15px;background:#102747;color:#ffffff;font-size:12px;font-weight:700}
#close-review span{margin-left:20px;color:#ffffff}#close-review:hover{background:#244768}
.review-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#365064}
.review-progress i{display:block;height:100%;background:var(--review-accent);transform-origin:left}
[data-review="true"] .take-over{display:none}
[data-review="true"] .topbar,[data-review="true"] .scoreboard,[data-review="true"] .match-format{z-index:3}
#pause-panel{z-index:4}
@media(max-height:540px) and (orientation:landscape){
  .review-result{left:18px;bottom:66px;max-width:calc(100% - 36px)}
  [data-verdict="true"] 
  #review-distance{font-size:16px}
  .review-footer{left:18px;right:16px;bottom:max(9px,env(safe-area-inset-bottom))}
  #close-review{font-size:10px;padding:0 12px}
}
@media(prefers-reduced-motion:reduce){.review-result{animation:none!important}}
.serve-meter{--serve-grey:#58677b;--serve-red:#d92d42;--serve-green:#3de476;--serve-gold:#ffd23f;position:absolute;left:50%;bottom:132px;width:min(320px,70vw);transform:translateX(-50%);display:grid;gap:6px;justify-items:center;font-size:11px;font-weight:700;letter-spacing:.04em}
.serve-track{position:relative;width:100%;height:20px;border-radius:8px;background:var(--serve-grey);border:2px solid #122b46;box-shadow:0 0 0 1px #ffffffb3;overflow:hidden}
.serve-track i{position:absolute;top:0;bottom:0}
.serve-red{background:var(--serve-red)}.serve-red.start{left:0;width:var(--redStart,10%)}.serve-red.end{left:var(--redEnd,90%);right:0}
.serve-good{left:var(--goodStart,36%);width:var(--goodWidth,28%);background:var(--serve-green);box-shadow:inset 2px 0 #122b46,inset -2px 0 #122b46}
.serve-sweet{left:var(--goldStart,45%);width:var(--goldWidth,10%);background:var(--serve-gold);box-shadow:inset 2px 0 #122b46,inset -2px 0 #122b46}
.serve-needle{left:0;width:4px;transform:translateX(-50%);background:#fff;box-shadow:0 0 0 2px #122b46;border-radius:2px;will-change:left}
.serve-meter[data-grade] .serve-needle{background:#122b46;box-shadow:0 0 0 2px #fff}
.serve-meter[data-grade="perfect"] .serve-track{border-color:var(--serve-gold);box-shadow:none}
.serve-meter[data-grade="net"] .serve-track,.serve-meter[data-grade="long"] .serve-track,.serve-meter[data-grade="wide"] .serve-track{border-color:var(--serve-red);box-shadow:none}
.serve-meter[data-grade="net"] span,.serve-meter[data-grade="long"] span,.serve-meter[data-grade="wide"] span{background:var(--serve-red);color:#fff}
.serve-meter span{background:#0a203bdf;padding:3px 9px;border-radius:5px}
.serve-meter[data-grade="perfect"] span{background:var(--serve-gold);color:#122b46}
.serve-meter[data-grade="good"] span{background:var(--serve-green);color:#122b46}
.serve-meter[data-grade="early"] span,.serve-meter[data-grade="late"] span,.serve-meter[data-grade="miss"] span{background:var(--serve-grey);color:#fff}
@media(max-width:720px){.serve-meter{bottom:262px}}
@media(max-height:540px) and (orientation:landscape){.serve-meter{bottom:98px;width:min(260px,40vw)}}
@media(prefers-reduced-motion:reduce){.serve-meter[data-grade="perfect"] .serve-track{box-shadow:none}}

/* Keep pause available while the rare broadcast cutaway hides match overlays. */
#app[data-torro-ritual="true"] .scoreboard,
#app[data-torro-ritual="true"] #callout,
#app[data-torro-ritual="true"] #touch-controls,
#app[data-torro-ritual="true"] #ego-hud,
#app[data-torro-ritual="true"] #rally-label,
#app[data-torro-ritual="true"] #take-over{visibility:hidden;pointer-events:none}