/* Keep arena guidance separate from the desktop vertical menu rail and mobile horizontal buttons.
   Modal menus own the screen while open; arena progress resumes when they close. */
.match-briefing { position:fixed; z-index:25; top:18%; left:50%; transform:translateX(-50%); width:min(560px,90vw); text-align:center; pointer-events:none; color:#f4eee0; text-shadow:0 2px 4px #08141b,0 0 10px #08141b; }
.match-briefing[hidden], .arena-guide[hidden] { display:none; }
.match-briefing strong { display:block; color:#89e5db; font:400 clamp(28px,5vw,48px)/1.05 'Tideglass Bangers',Impact,sans-serif; -webkit-text-stroke:3px #14212b; paint-order:stroke fill; }
.match-briefing p { font:700 14px/1.4 sans-serif; margin:8px 0 0; }
.arena-guide { position:fixed; z-index:22; top:150px; left:92px; width:min(285px,calc(100vw - 108px)); color:#f4eee0; background:rgba(10,25,32,.94); border:1px solid #6c8278; border-radius:12px; box-shadow:0 4px 18px #08141b55; overflow:hidden; }
.arena-guide__toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; text-align:left; color:#ffe6a2; border:0; background:transparent; font:400 22px/1.1 'Tideglass Bangers',Impact,sans-serif; cursor:pointer; min-height:44px; }
.arena-guide__toggle::after { content:'+'; font:700 18px sans-serif; }
.arena-guide__toggle[aria-expanded=true]::after { content:'−'; }
.arena-guide__toggle:focus-visible { outline:2px solid #89e5db; outline-offset:-3px; }
#arena-guide-body { padding:0 12px 12px; max-height:45dvh; overflow:auto; overscroll-behavior:contain; }
#arena-guide-body[hidden] { display:none; }
.arena-guide__summary { font:700 14px/1.35 sans-serif; margin:0 0 8px; }
.arena-guide__detail { font:400 12px/1.4 sans-serif; color:#d4e1e0; margin:10px 0 0; }
.arena-guide ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.arena-guide li { display:flex; align-items:flex-start; gap:7px; font:500 12px/1.3 sans-serif; }
.arena-guide__tick { color:#d4e1e0; width:14px; flex:none; }
.arena-guide li.is-done { color:#89e5db; }
.arena-guide li.is-done .arena-guide__tick { color:#89e5db; }
body.window-open .arena-guide, body.match-finishing :is(.match-briefing,.arena-guide), body:not(.match-playing) .arena-guide { display:none; }
@media(pointer:coarse) { .arena-guide { top:calc(var(--edge-top,8px) + 160px); left:var(--edge-left,8px); width:min(250px,67vw); } .arena-guide__toggle { font-size:20px; padding:8px 10px; } #arena-guide-body { padding:0 10px 10px; max-height:30dvh; } .match-briefing { top:22%; } }
@media(pointer:coarse) and (max-height:500px) { .arena-guide { top:calc(var(--edge-top,8px) + 132px); width:230px; display:flex; flex-direction:column; max-height:calc(100dvh - var(--edge-top,8px) - var(--edge-bottom,10px) - 244px); } .arena-guide__toggle { flex:none; } #arena-guide-body { min-height:0; max-height:24dvh; } .match-briefing { top:10%; width:50vw; } .match-briefing strong { font-size:30px; } }
