/* Let the island show through the BR setup without fading its controls or type. */
#menu #lobbyModeName{
 font-family:'Big Black Bear',Impact,'Arial Black',Arial,sans-serif;
 font-style:normal;
 font-weight:400;
 font-synthesis:none;
 letter-spacing:.02em;
}
#menu[data-lobby-family="battle-royale"] .deploy-panel{
 background:linear-gradient(145deg,#142f4845,#0d243a38);
 border-color:#c4edff3d;
 box-shadow:0 8px 28px #06172620;
 backdrop-filter:blur(4px);
 -webkit-backdrop-filter:blur(4px);
}
#menu[data-lobby-family="battle-royale"] .lobby-playlist-button{background:#12364a26}
#menu[data-lobby-family="battle-royale"] #lobbyMapSlot select{background:#17384c38}
#menu[data-lobby-family="battle-royale"] .lobby-setup summary{background:#17384c20}
#menu[data-lobby-family="battle-royale"] .deploy-panel h2,
#menu[data-lobby-family="battle-royale"] .lobby-playlist-button,
#menu[data-lobby-family="battle-royale"] #lobbyMapSlot,
#menu[data-lobby-family="battle-royale"] .lobby-setup summary{text-shadow:0 1px 4px #061c3abb}
#menu[data-lobby-family="battle-royale"] #lobbyMapSlot option{background:#17384c;color:#f1faff;text-shadow:none}

/* Align the Battle Royale play card with the level disc across the lobby. */
@media(min-width:761px){
 #menu[data-lobby-mode="br"] .deploy-panel{
  position:fixed;
  right:clamp(22px,3vw,54px);
  bottom:clamp(145px,17vh,188px);
  width:clamp(325px,30vw,390px);
  padding:22px 24px;
 }
 #menu[data-lobby-mode="br"] .deploy-panel h2{font-size:clamp(26px,2.5vw,31px);margin-bottom:18px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button{min-height:60px;padding:12px 15px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button strong{font-size:14px}
 #menu[data-lobby-mode="br"] #deploy.match-play-button{min-height:65px}
}
@media(min-width:761px) and (max-height:590px) and (orientation:landscape){
 #menu[data-lobby-mode="br"] .deploy-panel{bottom:76px;width:clamp(270px,30vw,340px);padding:14px 16px}
 #menu[data-lobby-mode="br"] .deploy-panel h2{font-size:23px;margin-bottom:10px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button{min-height:44px;padding:8px 11px}
 #menu[data-lobby-mode="br"] #deploy.match-play-button{min-height:52px}
}
/* Playgrounds has a smaller, lower launch card than the standard BR lobby. */
@media(min-width:761px){
 #menu[data-lobby-variant="playgrounds"] .deploy-panel{bottom:clamp(78px,10vh,112px);width:clamp(285px,25vw,340px);padding:16px 18px}
 #menu[data-lobby-variant="playgrounds"] .deploy-panel h2{font-size:clamp(22px,2vw,26px);margin-bottom:12px}
 #menu[data-lobby-variant="playgrounds"] .lobby-playlist-button{min-height:49px;padding:9px 12px}
 #menu[data-lobby-variant="playgrounds"] .lobby-playlist-button strong{font-size:12px}
 #menu[data-lobby-variant="playgrounds"] #deploy.match-play-button{min-height:54px;font-size:24px}
}
@media(min-width:761px) and (max-height:590px) and (orientation:landscape){
 #menu[data-lobby-variant="playgrounds"] .deploy-panel{bottom:30px;width:clamp(255px,27vw,305px);padding:11px 14px}
 #menu[data-lobby-variant="playgrounds"] .deploy-panel h2{font-size:21px;margin-bottom:8px}
 #menu[data-lobby-variant="playgrounds"] .lobby-playlist-button{min-height:40px;padding:6px 10px}
 #menu[data-lobby-variant="playgrounds"] #deploy.match-play-button{min-height:44px;font-size:22px}
}

/* One flat, bright PLAY treatment across match launch and mode confirmation. */
#menu #deploy.match-play-button,#playlistPlay{
 display:flex;align-items:center;justify-content:center;
 min-height:56px;width:100%;padding:13px 18px;
 border:1px solid #f2ff60;border-radius:0;
 background:#edff00;color:#102943;
 font-family:'Arial Black',Impact,'Helvetica Neue',Arial,sans-serif;
 font-size:30px;font-style:italic;font-weight:1000;line-height:1.05;
 letter-spacing:.025em;text-align:center;text-transform:uppercase;
 -webkit-text-stroke:.55px currentColor;text-shadow:none;
 box-shadow:5px 6px 0 #0b35894d;
 touch-action:manipulation;
 transition:background .15s,box-shadow .15s,transform .15s;
}
/* The old arrow occupied the last span; its light 24px style must not reach PLAY. */
#menu #deploy.match-play-button>span{font:inherit;letter-spacing:inherit;line-height:inherit}
#menu #deploy.match-play-button:hover:not(:disabled),#playlistPlay:hover:not(:disabled){background:#f4ff50;filter:none;transform:translateY(-1px)}
#menu #deploy.match-play-button:active:not(:disabled),#playlistPlay:active:not(:disabled){background:#dff000;transform:translateY(2px);box-shadow:2px 3px 0 #0b35894d}
#menu #deploy.match-play-button:focus-visible,#playlistPlay:focus-visible{outline:3px solid #fff;outline-offset:5px}
#menu #deploy.match-play-button:disabled,#playlistPlay:disabled{opacity:.55;cursor:wait;transform:none}

/* The first game-mode screen keeps its existing card layout, with heavier type. */
.mode-card-action{background:#edff00;color:#102943;font-family:'Arial Black',Impact,'Helvetica Neue',Arial,sans-serif;font-weight:1000;-webkit-text-stroke:.55px currentColor}
@media(max-width:760px){#menu #deploy.match-play-button,#playlistPlay{min-height:50px;padding:12px 16px;font-size:28px}}
@media(max-height:600px) and (orientation:landscape){#menu #deploy.match-play-button,#playlistPlay{min-height:44px;padding:9px 14px;font-size:26px}}

/* SURGE keeps the same translucent style, but uses a compact launch card. */
@media(min-width:761px){
 #menu[data-lobby-variant="surge"] .deploy-panel{width:clamp(265px,24vw,308px);padding:15px 17px}
 #menu[data-lobby-variant="surge"] .deploy-panel h2{font-size:clamp(20px,1.85vw,24px);margin-bottom:10px}
 #menu[data-lobby-variant="surge"] .lobby-playlist-button{min-height:46px;padding:8px 11px}
 #menu[data-lobby-variant="surge"] .lobby-playlist-button small{font-size:7px;margin-bottom:3px}
 #menu[data-lobby-variant="surge"] .lobby-playlist-button strong{font-size:11px}
 #menu[data-lobby-variant="surge"] #deploy.match-play-button{min-height:49px;margin-top:10px;padding:10px 12px;font-size:24px}
}
@media(max-width:760px){
 #menu[data-lobby-variant="surge"] .deploy-panel{width:min(230px,100%);padding:10px 12px}
 #menu[data-lobby-variant="surge"] .deploy-panel h2{font-size:18px;margin-bottom:7px}
 #menu[data-lobby-variant="surge"] .lobby-playlist-button{min-height:40px;padding:7px 9px}
 #menu[data-lobby-variant="surge"] .lobby-playlist-button small{font-size:7px;margin-bottom:2px}
 #menu[data-lobby-variant="surge"] .lobby-playlist-button strong{font-size:10px}
 #menu[data-lobby-variant="surge"] #deploy.match-play-button{min-height:44px;margin-top:8px;padding:9px 11px;font-size:22px}
}
@media(min-width:761px) and (max-height:590px) and (orientation:landscape){
 #menu[data-lobby-variant="surge"] .deploy-panel{width:clamp(235px,25vw,285px);padding:11px 13px}
 #menu[data-lobby-variant="surge"] .deploy-panel h2{font-size:19px;margin-bottom:8px}
 #menu[data-lobby-variant="surge"] #deploy.match-play-button{min-height:44px;padding:9px 11px;font-size:22px}
}
/* Make the standard Battle Royale heading the centered hero of the play card.
   Other variants (including the intentionally compact SURGE card) stay as-is. */
#menu[data-lobby-variant="standard"] .deploy-panel h2{text-align:center;font-size:clamp(30px,3vw,41px);margin-bottom:16px;letter-spacing:0}
@media(max-width:760px){
 #menu[data-lobby-variant="standard"] .deploy-panel h2{font-size:clamp(24px,5.5vw,33px);margin-bottom:12px}
}
/* Keep launch-card dimensions, title alignment and controls identical across
   Battle Royale, One Shot, Solid Gold, Playgrounds, Surge and other playlists. */
@media(min-width:761px){
 #menu[data-lobby-mode="br"] .deploy-panel{position:fixed;right:clamp(22px,3vw,54px);bottom:clamp(145px,17vh,188px);width:clamp(325px,30vw,390px);padding:22px 24px}
 #menu[data-lobby-mode="br"] .deploy-panel h2{text-align:center;font-size:clamp(30px,3vw,41px);margin-bottom:16px;letter-spacing:0}
 #menu[data-lobby-mode="br"] .lobby-playlist-button{min-height:60px;padding:12px 15px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button small{font-size:8px;margin-bottom:4px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button strong{font-size:14px}
 #menu[data-lobby-mode="br"] #deploy.match-play-button{min-height:65px;margin-top:14px;padding:13px 18px;font-size:30px}
}
@media(min-width:761px) and (max-height:590px) and (orientation:landscape){
 #menu[data-lobby-mode="br"] .deploy-panel{bottom:76px;width:clamp(270px,30vw,340px);padding:14px 16px}
 #menu[data-lobby-mode="br"] .deploy-panel h2{font-size:23px;margin-bottom:10px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button{min-height:44px;padding:8px 11px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button strong{font-size:12px}
 #menu[data-lobby-mode="br"] #deploy.match-play-button{min-height:52px;margin-top:10px;padding:9px 14px;font-size:26px}
}
@media(max-width:760px){
 #menu[data-lobby-mode="br"] .deploy-panel{width:min(270px,100%);padding:13px 15px;bottom:0}
 #menu[data-lobby-mode="br"] .deploy-panel h2{text-align:center;font-size:clamp(24px,5.5vw,33px);margin-bottom:12px;letter-spacing:0}
 #menu[data-lobby-mode="br"] .lobby-playlist-button{min-height:48px;padding:10px 12px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button small{font-size:8px;margin-bottom:4px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button strong{font-size:12px}
 #menu[data-lobby-mode="br"] #deploy.match-play-button{min-height:50px;margin-top:8px;padding:12px 16px;font-size:28px}
}
@media(max-width:760px) and (max-height:600px) and (orientation:landscape){
 #menu[data-lobby-mode="br"] .deploy-panel{padding:13px;bottom:0}
 #menu[data-lobby-mode="br"] .deploy-panel h2{font-size:clamp(21px,4.5vw,27px);margin-bottom:9px}
 #menu[data-lobby-mode="br"] .lobby-playlist-button{min-height:42px;padding:7px 10px}
 #menu[data-lobby-mode="br"] #deploy.match-play-button{min-height:44px;padding:9px 14px;font-size:26px}
}
@media(prefers-reduced-motion:reduce){#menu #deploy.match-play-button,#playlistPlay{transition:none;transform:none!important}}