/* Match setup lives on the menu, from account to queue. */
#match-panel{position:absolute;top:108px;bottom:auto;right:28px;width:370px;max-height:calc(100vh - 162px);padding:20px;display:grid;gap:18px;overflow:auto;scrollbar-width:thin;scrollbar-color:#8b9a70 #fff3d5}
#match-panel [hidden],.game-select [hidden]{display:none!important}
#match-panel .section-label{margin:0 0 10px;font:13px/1.2 var(--pixel);color:#3d6545}
#match-panel .section-label span{font:10px Arial,sans-serif;letter-spacing:.5px;color:#637753}
#match-panel .segmented{gap:10px;display:flex}
#match-panel .segmented button{min-height:56px;margin:0;padding:10px 8px;font:16px/1.1 var(--pixel)}
#match-panel .segmented small{font:11px Arial,sans-serif;margin-top:6px}
#match-panel .roles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#match-panel .role{display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:118px;padding:12px;gap:8px;text-align:left}
#match-panel .role-icon{position:static;display:block;width:25px;height:25px}
#match-panel .role strong{font:14px/1.2 var(--pixel);margin:0;white-space:nowrap}
#match-panel .role small{font:11px/1.5 Arial,sans-serif;letter-spacing:0}
#match-panel .role:disabled,#match-panel .segmented button:disabled{opacity:.7;cursor:default;transform:none}
#match-panel #mode-info{margin:13px 0 0;min-height:34px;font:12px/1.5 Arial,sans-serif;color:#51694a}
.online-identity{display:flex;gap:12px;align-items:center;padding:12px;background:#193f34;border:2px solid #102e24;box-shadow:inset 0 2px #47775a;min-width:0}
.online-identity-mark{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;background:#102d25;border:1px solid #628168}
.online-identity-mark img{display:block;width:44px;height:44px;object-fit:contain}
.online-identity-text{display:grid;gap:6px;min-width:0;flex:1}
.account-label{font:9px/1 var(--pixel);color:#c9e582}
#online-identity-name{font:13px/1.25 var(--pixel);font-weight:400;color:#fff4d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#online-identity-handle{font:10px/1.4 Arial,sans-serif;color:#c0d5b7}
#online-account-light{width:7px;height:7px;align-self:flex-start;flex-shrink:0;margin-top:3px;background:#8a967e;border:1px solid #10281e}
#online-account-light[data-state=connected]{background:#82ed8c;box-shadow:0 0 0 3px #82ed8c20}
#online-account-light[data-state=connecting]{background:#ffda5c}
.match-status{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;padding-left:10px;border-left:3px solid #8b9f6d}
#match-panel #online-availability{margin:0;font:11px/1.5 Arial,sans-serif;color:#526848}
#online-queue-status{display:grid;gap:5px}
#online-queue-title{font:12px/1.3 var(--pixel);font-weight:400;color:#2e583b}
#online-queue-detail{font:11px/1.4 Arial,sans-serif;color:#526848}
#online-retry{padding:7px 8px;border:2px solid #6a8559;background:#dae5c6;color:#375333;font:10px var(--pixel);flex-shrink:0}
#match-panel .online-error{margin:0;padding:8px 10px;background:#f5d4b7;border-left:3px solid #b05032;color:#7a341e;font:12px/1.5 Arial,sans-serif}
#match-panel .menu-play-actions{display:grid;gap:12px}
#match-panel #online-play{width:100%;min-height:59px;padding:13px 17px;font-size:18px}
#match-panel #online-play:after{content:'▶';font:18px Arial,sans-serif}
#match-panel #online-play[data-action=cancel]{background:#244f3c;color:#fff4d3;box-shadow:inset 0 2px #739478,0 4px #163425}
#match-panel #online-play[data-action=cancel]:after{content:'×';font:25px Arial,sans-serif}
#match-panel #online-play:disabled{opacity:1;cursor:not-allowed;background:#ded9b1;color:#7b7d58;border-color:#97a079;box-shadow:inset 0 2px #f9f2d3,0 4px #97a079;transform:none}
#match-panel .help-link{width:100%;min-height:38px;padding:8px;margin:0;font-size:13px;gap:12px}
#match-panel .help-link span{font-size:12px;width:17px;height:17px}
#match-panel .warmup-entry{margin:0;padding:13px 0 0;border-top:2px dashed #b0ba8c}
#match-panel .warmup-entry .secondary{font-size:12px;min-height:38px;padding:8px 10px}
#match-panel .paid-later{margin:0;align-items:center;font-size:10px}
.online-network-status{display:block;margin-top:5px;color:#a9e5ad;font-size:8px;letter-spacing:.7px;line-height:1.2;white-space:nowrap}
/* Give the cast the open middle of the screen now that Play sits on the right. */
#menu .brand{left:44%;width:430px}
#character-stage{left:44%;top:27%;width:min(670px,47vw);height:54%}
@media(min-width:1450px){#match-panel{top:50%;transform:translateY(-50%)}.hunt-board{left:32px;width:254px;top:29%}}
@media(max-width:1180px){#menu .brand{left:32%;width:360px}#character-stage{left:32%;width:55vw;top:30%;height:53%}#match-panel{right:20px;width:342px}.hunt-board{display:none}}
@media(max-width:1000px){#menu .brand{left:29%;width:310px}#character-stage{left:29%;width:52vw}#match-panel{right:16px;width:330px}.cast-label small{display:none}.cast-label{font-size:10px}}
@media(max-height:800px){
 #match-panel{top:86px;bottom:auto;transform:none;max-height:calc(100vh - 132px);padding:15px;gap:12px;width:342px}
 #match-panel .section-label{font-size:12px;margin-bottom:8px}
 #match-panel .segmented button{min-height:46px;padding:7px;font-size:14px}
 #match-panel .segmented small{font-size:10px;margin-top:4px}
 #match-panel .role{min-height:94px;gap:5px;padding:9px}
 #match-panel .role-icon{width:21px;height:21px}
 #match-panel .role strong{font-size:13px}
 #match-panel .role small{font-size:10px;line-height:1.35}
 #match-panel #mode-info{font-size:11px;min-height:30px;margin-top:9px;line-height:1.4}
 .online-identity{padding:9px;gap:10px}.online-identity-mark{width:40px;height:40px}.online-identity-mark img{width:38px;height:38px}.online-identity-text{gap:4px}
 #online-identity-name{font-size:12px}#online-identity-handle{font-size:10px}
 .match-status{min-height:28px}#match-panel #online-availability,#online-queue-detail{font-size:10px}#online-queue-title{font-size:11px}
 #match-panel #online-play{min-height:49px;font-size:16px;padding:10px 13px}
 #match-panel .menu-play-actions{gap:9px}#match-panel .help-link{min-height:32px;padding:6px;font-size:12px}
 #match-panel .warmup-entry{padding-top:10px}#match-panel .warmup-entry .secondary{min-height:33px;font-size:11px;padding:6px 9px}
 #match-panel .paid-later{font-size:9px}#match-panel .paid-later span{font-size:8px}
 #menu .brand{top:4px;width:330px}#character-stage{top:28%;height:53%}
}
@media(max-height:680px){#match-panel{top:77px;max-height:calc(100vh - 119px);gap:9px;padding:12px;width:326px}#match-panel .role{min-height:84px;gap:3px}#match-panel .role-icon{width:19px;height:19px}.online-identity{padding:7px}#match-panel #online-play{min-height:45px}.online-identity-text{gap:3px}#match-panel .warmup-entry{padding-top:8px}#match-panel #mode-info{min-height:29px}#menu .brand{width:295px}}
/* Compact landscape PCs keep the panel reachable without native dropdowns. */
@media(max-width:760px){#match-panel{right:10px;width:300px}#menu .brand{left:26%;width:250px}#character-stage{left:26%;width:49vw}.cast-label{font-size:8px;padding:5px}}
/* The quality popup is part of the game, including focus and selected states. */
.quality-setting{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:26px 0;font:11px var(--pixel)}
.game-select{position:relative;min-width:236px;max-width:65%;font-family:var(--pixel)}
#quality-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 12px;background:#2f6347;border:2px solid #76a67c;box-shadow:0 3px #102d23;color:#fff3d0;text-align:left;font:12px var(--pixel)}
#quality-trigger svg{width:13px;height:10px;fill:none;stroke:#d8edaf;stroke-width:2;flex-shrink:0;transition:transform .12s}
#quality-trigger[aria-expanded=true] svg{transform:rotate(180deg)}
#quality-options{position:absolute;z-index:4;bottom:calc(100% + 7px);right:0;width:100%;padding:5px;display:grid;gap:4px;background:#173f31;border:2px solid #aac88a;box-shadow:5px 5px #0a281ec9}
#quality-options button{position:relative;display:grid;gap:7px;padding:12px 25px 12px 9px;text-align:left;color:#e1efcd;background:#29513c;border:1px solid transparent;outline-offset:-2px}
#quality-options strong{font:11px var(--pixel);font-weight:400}#quality-options small{font:11px/1.4 Arial,sans-serif;color:#bfd3b0}
#quality-options button:hover,#quality-options button:focus{background:#386d48;border-color:#c5df97}
#quality-options button[aria-selected=true]{background:#f6d45f;color:#29442e;border-color:#e7b63e}
#quality-options button[aria-selected=true] small{color:#50603a}#quality-options button[aria-selected=true]:after{content:'✓';position:absolute;right:8px;top:12px;font:14px Arial,sans-serif}
@media(max-height:800px){.quality-setting{margin:19px 0}}@media(max-width:760px){.quality-setting{gap:12px;flex-wrap:wrap}.game-select{max-width:100%}}