/* Match presentation is deliberately separate from the menu and club studio. */
.playing #topbar,.playing #music-player{display:none}
.playing #vignette{opacity:0;pointer-events:none}
#match-ui{position:fixed;inset:0;z-index:3;pointer-events:none;--edge:max(16px,env(safe-area-inset-left));--bottom:max(18px,env(safe-area-inset-bottom))}
#scoreboard{position:absolute;top:max(16px,env(safe-area-inset-top));left:var(--edge);display:flex;align-items:center;height:38px;border-radius:5px;overflow:hidden;background:#10251ee8;box-shadow:0 2px 12px #0002;font:600 18px var(--display);font-variant-numeric:tabular-nums}
#scoreboard>span{height:100%;display:flex;align-items:center;justify-content:center;padding:0 12px;min-width:49px}
#home-short{border-bottom:3px solid var(--home-color)}#away-short{border-bottom:3px solid var(--away-color)}
#score{height:100%;display:flex;align-items:center;justify-content:center;min-width:65px;padding:0 10px;background:#edf3e5;color:#152b20;font-size:22px;white-space:nowrap}
#scoreboard #clock{width:65px;padding:0 10px;font-size:16px;color:#d6e5cb}
#pause-button{pointer-events:auto;position:absolute;right:max(16px,env(safe-area-inset-right));top:max(13px,env(safe-area-inset-top));width:44px;height:44px;background:#10251eb8;border:1px solid #e2efd52b;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:4px}
#pause-button span{width:3px;height:13px;background:#f0f6e8;border-radius:1px}
#match-notice{position:absolute;left:50%;top:max(66px,calc(env(safe-area-inset-top) + 52px));transform:translateX(-50%);max-width:calc(100vw - 32px);padding:9px 19px;background:#10251eeb;color:#f2f8e9;border-radius:4px;border-bottom:2px solid var(--lime);font:600 15px var(--display);letter-spacing:1.6px;white-space:nowrap;text-align:center;box-shadow:0 3px 20px #0002}
#controlled-player{position:absolute;left:var(--edge);bottom:var(--bottom);width:180px;padding:8px 10px;background:linear-gradient(90deg,#10251ec9,#10251e6b);border-radius:4px}
.player-caption{display:flex;align-items:center;gap:7px;margin-bottom:7px;line-height:1}
#player-name{font-size:11px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;flex:1}
#player-number{font:600 15px var(--display);color:var(--lime)}#attack-direction{color:#d4e2c5;font-size:13px}
.stamina{height:3px;background:#e5efd333;overflow:hidden;border-radius:2px}.stamina i{display:block;height:100%;width:100%;background:var(--lime);transform-origin:left;transition:transform .12s linear}.stamina.low i{background:#ffc478}
#shot-meter{position:absolute;left:50%;bottom:calc(var(--bottom) + 10px);transform:translateX(-50%);width:100px;height:5px;background:#10251ecc;border:1px solid #e8f0d888;border-radius:4px;overflow:hidden}#shot-meter i{display:block;width:100%;height:100%;transform-origin:left;background:var(--lime)}
#minimap{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:var(--bottom);width:150px;height:97px;opacity:.65;background:#14291e80;border:1px solid #c5d6b52b;border-radius:4px}
#touch-controls{display:none;position:absolute;inset:0;pointer-events:none}.touch #touch-controls{display:block}
#joystick{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:calc(var(--bottom) + 20px);width:102px;height:102px;border-radius:50%;border:1px solid #f3f9eb55;background:#10251e26;box-shadow:inset 0 0 0 8px #e7f2db10;pointer-events:auto;touch-action:none}
#joystick i{position:absolute;left:31px;top:31px;width:38px;height:38px;border-radius:50%;border:1px solid #eef6e27a;background:#e9f3d866;pointer-events:none}
#joystick.sprinting{border-color:#c9ff64aa;box-shadow:inset 0 0 0 8px #c9ff6418}
.touch-actions{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:calc(var(--bottom) + 14px);width:154px;height:116px;pointer-events:none}
.touch-actions button{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid #e3edd56b;background:#10251e88;color:#eff8e5;font-size:9px;font-weight:700;pointer-events:auto;touch-action:none;letter-spacing:.2px;backdrop-filter:blur(2px)}
.touch-actions [data-action=shoot]{right:0;top:10px;width:64px;height:64px;color:#182a13;background:#c9ff64b5;border-color:#d8ff9b9c;font-size:10px}
.touch-actions [data-action=pass]{right:64px;bottom:0;width:56px;height:56px}
.touch-actions [data-action=switch]{left:0;top:0;width:44px;height:44px;font-size:8px}
.touch-actions [data-action=more]{right:0;bottom:-8px;width:44px;height:36px;border-radius:18px;letter-spacing:2px;background:#10251e66}
.touch-actions .pressed,#touch-options .pressed{background:#eff6d5;color:#15291d;border-color:#fff}
#touch-options{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:calc(var(--bottom) + 151px);display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:246px;background:#10251eef;border:1px solid #e3edd533;padding:7px;border-radius:10px;pointer-events:auto}
#touch-options button{background:#e1f0d50b;border:1px solid #e1f0d526;color:#e9f5dc;min-height:43px;border-radius:5px;font-size:9px;font-weight:600;touch-action:none}
.touch #controlled-player{left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));width:142px;padding:6px 8px;background:#10251e70}.touch #player-name{font-size:9px}.touch #player-number{font-size:12px}.touch .player-caption{margin-bottom:5px}
.touch #shot-meter{bottom:calc(var(--bottom) + 53px);width:84px}.touch #minimap{bottom:calc(var(--bottom) + 152px);right:18px;width:110px;height:71px}
.touch:has(#touch-options:not(.hidden)) #minimap{display:none}
.touch-skills{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:calc(var(--bottom) + 260px);width:min(310px,calc(100vw - 36px));display:flex;flex-wrap:wrap;gap:5px;background:#10251ef2;padding:8px;border:1px solid #e3edd533;border-radius:8px;pointer-events:auto}
.touch-skills button{flex:1 1 28%;min-height:40px;background:#c9ff6414;color:#e2ffaf;border:1px solid #c9ff6440;border-radius:4px;font-size:9px;padding:5px}.touch-skills button:disabled{color:#8f9d84;background:transparent;border-color:#aabb8d20}
.pause-links{display:flex;gap:25px}.pause-links .text-button{font-size:12px}
.playing #toast{top:70px;bottom:auto;max-width:80vw;font-size:11px}.playing #toast.visible{transform:translate(-50%,0)}
@media(max-width:400px){#scoreboard{left:max(12px,env(safe-area-inset-left));height:34px;top:max(14px,env(safe-area-inset-top))}#scoreboard>span{min-width:43px;padding:0 8px}#score{min-width:59px;font-size:20px}#scoreboard #clock{width:58px;font-size:15px}#pause-button{right:12px;top:10px}#joystick{left:17px;width:94px;height:94px}#joystick i{left:27px;top:27px}.touch-actions{right:12px;width:146px}}
@media(orientation:landscape) and (max-height:550px){#scoreboard{top:max(10px,env(safe-area-inset-top));height:33px;font-size:16px}#score{font-size:20px}#pause-button{top:6px}.touch #controlled-player{bottom:10px;width:150px}#joystick{bottom:18px;width:94px;height:94px}#joystick i{left:27px;top:27px}.touch-actions{bottom:18px;height:105px}#touch-options{bottom:140px}.touch-skills{bottom:140px;right:275px;width:min(300px,calc(100vw - 410px))}#match-notice{top:53px;font-size:13px;padding:7px 14px}}
@media(prefers-reduced-motion:reduce){.stamina i{transition:none}}