.wos-ref-card{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:25;display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--ink);pointer-events:none}
.wos-ref-card[hidden]{display:none}
.wos-ref-card-face{display:block;width:30px;height:42px;border-radius:3px;transform:rotate(-8deg);box-shadow:0 3px 8px #0007}
.wos-ref-card[data-color="yellow"] .wos-ref-card-face{background:#f7d22e}
.wos-ref-card[data-color="red"] .wos-ref-card-face{background:#e0302f}
.wos-ref-card strong{display:block;font-size:12px;font-weight:800;letter-spacing:.12em}
.wos-ref-card span{display:block;margin-top:2px;font-size:16px;font-weight:800}
.wos-ref-card small{display:block;color:var(--muted);font-size:11px}
.wos-ref-card small:empty{display:none}
.wos-hint{position:absolute;left:50%;bottom:max(92px,calc(env(safe-area-inset-bottom) + 92px));transform:translateX(-50%);z-index:24;max-width:min(560px,calc(100vw - 32px));padding:9px 14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:4px;color:var(--ink);font-size:12px;font-weight:600;pointer-events:none}
.wos-hint[hidden]{display:none}
.control-diagram{display:grid;gap:14px}
.kbd-board{display:grid;gap:4px;justify-content:center}
.kbd-row{display:flex;justify-content:center;gap:4px}
.kbd-key{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:4px;background:#ffffff0d;color:var(--muted);font:700 12px/1 Manrope,system-ui,sans-serif}
.kbd-key.is-space{width:220px}
.kbd-key.is-bound{border-color:var(--lime);background:#d6ff681f;color:var(--ink)}
.diagram-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 16px;margin:0}
.diagram-legend div{display:flex;align-items:center;gap:8px;min-width:0}
.diagram-legend dt{flex:none}
.diagram-legend dd{margin:0;font-size:12px;overflow-wrap:anywhere}
.diagram-legend kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;border:1px solid var(--line);border-radius:4px;background:#ffffff14;font:700 11px/1 Manrope,system-ui,sans-serif}
.pad-drawing{display:block;width:min(420px,100%);height:auto;margin:0 auto}
.pad-body{fill:#ffffff12;stroke:var(--line);stroke-width:2}
.pad-control circle,.pad-control rect,.pad-stick circle{fill:#0b1412;stroke:var(--lime);stroke-width:1.5}
.pad-dpad path{fill:#0b1412;stroke:var(--line);stroke-width:1.5}
.pad-drawing text{fill:var(--ink);font:700 11px Manrope,system-ui,sans-serif;text-anchor:middle;dominant-baseline:central}
@media (max-width:640px){.kbd-key{width:28px;height:30px;font-size:11px}.kbd-key.is-space{width:180px}.wos-ref-card{top:64px}}
.pause-actions{gap:12px}
.pause-group{grid-column:1/-1;display:grid;gap:6px}
.pause-group .eyebrow{margin:0;color:var(--muted);font-size:10px}
.pause-group>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.pause-group .secondary{min-height:44px;font-size:12px;text-align:left}
.pause-group .leave-match{text-align:left}
#match-app.modal-open .match-notices{top:auto;bottom:max(12px,env(safe-area-inset-bottom));z-index:60}
/* A corner tag inside the card's top padding, so it clears the card label at any width. */
.mode-card .membership-badge{position:absolute;top:0;right:0;width:auto;padding:3px 7px;border:0;border-radius:0 3px 0 4px;background:var(--lime,#b8f34c);color:#0d1410;font-size:8px}
.auto-continue{color:var(--muted);font-size:12px;text-align:center}
.diagram-group{margin:0 0 8px;border:1px solid var(--line);border-radius:4px;padding:10px 12px}
.diagram-group summary{min-height:32px;cursor:pointer;font-weight:800;font-size:12px;letter-spacing:.06em}
.diagram-group[open] summary{margin-bottom:10px}
.touch-more{display:none}
@media (orientation:portrait) and (max-width:480px),(pointer:coarse) and (max-height:500px){.touch-technique{pointer-events:auto}.touch-more{display:block;pointer-events:auto;color:var(--lime)}#touch-technique:not(.expanded)>button:not(.touch-more,[data-touch="through"],[data-touch="loft"]),#touch-defence:not(.expanded)>button:not(.touch-more,[data-touch="shield"],[data-touch="contain"]){display:none}}
/* Sideways on a phone the pitch comes first: everything else shrinks towards the edges. */
@media (pointer:coarse) and (max-height:500px){
 .player-panel{left:12px!important;top:auto!important;bottom:150px!important;width:150px!important;padding:6px 10px!important;min-height:0!important}
 .player-panel .player-top{display:none}
 .player-name{font-size:12px!important}
 .radar-wrap{bottom:8px!important;padding:4px!important}
 .radar-wrap canvas{width:112px!important;height:70px!important}
 .phase-banner{transform:translate(-50%,-50%) scale(.55)!important}
 .broadcast-mark{display:none}
}
@media (min-width:900px) and (max-height:780px){.hero-copy h1{font-size:64px}.hub-content{padding-top:26px;gap:20px}.hero-copy p{margin-block:10px}}
.setup-bottom{position:sticky;bottom:0;z-index:5;padding-block:14px;background:#08120df2}
.rotate-gate{position:fixed;inset:0;z-index:80;display:grid;place-content:center;justify-items:center;gap:14px;padding:32px;background:#0a1511f7;color:var(--ink);text-align:center}
.rotate-gate[hidden]{display:none}
.rotate-gate h2{margin:0;font:800 38px/1 'Barlow Condensed',sans-serif}
.rotate-gate p{margin:0;max-width:280px;color:var(--muted);font-size:14px;line-height:1.5}
.rotate-gate .secondary{min-height:44px;padding:0 18px;margin-top:10px}
.rotate-phone{width:44px;height:78px;border:3px solid var(--lime);border-radius:9px;animation:rotate-phone 2.4s ease-in-out infinite}
@keyframes rotate-phone{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
@media (prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(90deg)}}
/* A sticky action bar also covers the dialog's bottom padding, so the list it scrolls over never shows beneath it. */
.control-settings>.dialog-actions,.controller-screen>.dialog-actions{box-shadow:0 34px 0 #12211a}
.competition-screen>.dialog-actions{box-shadow:0 34px 0 #101b18}