@font-face{font-family:'Big Black Bear';src:url('./fonts/BigBlackBear-BRL5.ttf.otf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
#modeSelection{position:fixed;inset:0;z-index:104;isolation:isolate;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;padding:max(26px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#35c5e3 0%,#1777bb 48%,#2449a0 100%);color:#fff;opacity:1;transition:opacity .28s ease;touch-action:manipulation}
#modeSelection:before,#modeSelection:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
#modeSelection:before{background:conic-gradient(from 15deg at 50% 50%,transparent 0 30deg,#73eaff26 30deg 36deg,transparent 36deg 93deg,#0a299d3d 93deg 105deg,transparent 105deg 181deg,#4ccaff45 181deg 189deg,transparent 189deg 249deg,#132e9555 249deg 264deg,transparent 264deg 325deg,#5ae4ff30 325deg 331deg,transparent 331deg)}
#modeSelection:after{background:radial-gradient(ellipse at 22% 45%,#a341dc50,transparent 48%);opacity:.4;transition:opacity .4s}
#modeSelection[data-highlight="horde"]:after{opacity:1}
#modeSelection.is-leaving{opacity:0;pointer-events:none}
.mode-selection-header{display:flex;align-items:center;justify-content:center;position:relative;min-height:42px}
.mode-selection-brand{font:900 italic 28px/1 'Arial Black',Arial,sans-serif;letter-spacing:2px;text-shadow:0 3px 0 #123b67}
#modeBack{position:absolute;left:0;display:flex;align-items:center;gap:8px;border:1px solid #b4f5ff66;border-radius:5px;background:#092e6555;padding:12px 15px;font-size:10px;font-weight:900;letter-spacing:1px;min-height:44px}
.mode-cards{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0;width:100%;height:100%;margin:0 auto}
.mode-card{--mode-glow:#7eeaff;position:relative;display:block;flex:1 1 0;min-height:0;width:min(84vw,760px);height:100%;max-height:min(280px,46vw);padding:0;isolation:isolate;border:4px solid #69d7f588;border-radius:4px;background:#073867;box-shadow:0 0 0 2px #1f74ae,0 16px 45px #0b28684d;transition:transform .22s cubic-bezier(.2,.75,.3,1),border-color .22s,box-shadow .22s;overflow:visible;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mode-card.horde-card{--mode-glow:#dd9dff}
.mode-card:before{content:'';position:absolute;inset:-12px;border:2px solid var(--mode-glow);opacity:0;pointer-events:none;transition:opacity .2s}
.mode-card img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}
.mode-card:after{content:'';position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#061a4a70);z-index:0;pointer-events:none}
.mode-card-title{position:absolute;top:43%;left:50%;z-index:1;display:block;width:94%;padding:0;margin:0;transform:translate(-50%,-50%);text-align:center;color:#fff;font:400 clamp(34px,8.8vw,86px)/.86 'Big Black Bear',Impact,'Arial Black',sans-serif;letter-spacing:.3px;text-shadow:0 4px 0 #071a3c,0 7px 14px #020b24d9,0 0 28px #020b24b3;white-space:normal;pointer-events:none}
.mode-card-action{position:absolute;bottom:8%;left:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:36%;min-height:45px;padding:9px 14px;color:#062135;background:#efff2f;font:1000 italic 26px/1 Impact,'Arial Black',Arial,sans-serif;letter-spacing:1px;transform:translateX(-50%) skew(-9deg);box-shadow:6px 7px 0 #073b7c66;pointer-events:none}
.mode-card-action>span{transform:skew(9deg)}
.mode-card-caption{position:absolute;left:8px;right:8px;bottom:1.2%;z-index:1;text-align:center;color:#fff;font-size:9px;font-weight:900;letter-spacing:1px;text-shadow:0 2px 6px #071836;pointer-events:none}
.mode-card.is-selected{transform:translateY(-6px) scale(1.025);border-color:#f5fdff;box-shadow:0 0 0 3px #8be5ff,0 20px 65px #07296d80,0 0 45px #7ae3ff55}
.mode-card.is-selected:before{opacity:.6}
.mode-card:focus-visible,#modeBack:focus-visible{outline:3px solid #fff;outline-offset:14px}
.mode-card:active{transform:translateY(-2px) scale(1.01)}
.mode-selection-footer{text-align:center;min-height:52px}
.mode-selection-footer h2{font:1000 22px/1.1 'Arial Black',Arial,sans-serif;margin:0 0 9px;letter-spacing:1px;text-shadow:0 3px 0 #1d4d82}
.mode-selection-footer p{margin:0;font-size:9px;font-weight:800;letter-spacing:1.2px;color:#ddf8ff}
#modeSelectionStatus{position:absolute;bottom:92px;left:12px;right:12px;text-align:center;font-size:12px;color:#fff4aa}
.lobby-mode-back{display:flex;align-items:center;gap:7px;flex-shrink:0;min-height:40px;padding:8px 12px;border:1px solid #b6e9f34d;border-radius:6px;background:#112f4966;font-size:10px;font-weight:900;letter-spacing:.7px}
.lobby-mode-back>span:first-child{font-size:20px;line-height:1}
#menu[data-lobby-family="horde"]{--lobby-accent:#dca7ff;background:linear-gradient(0deg,#190f2ad9,transparent 65%),linear-gradient(180deg,#21113da6,transparent 28%)}
#menu[data-lobby-family="horde"] .lobby-tab.active{background:#d5a5ff;color:#241638}
#menu[data-lobby-family="horde"] .deploy-panel{border-color:#b578d95e;background:linear-gradient(155deg,#302044eb,#171b30f2)}
#menu[data-lobby-family="horde"] .panel-kicker>span:first-child,#menu[data-lobby-family="horde"] .lobby-eyebrow{color:#e2b5ff}
#menu[data-lobby-family="horde"] #deploy{background:linear-gradient(125deg,#e6bdff,#bd86f5);color:#271639;box-shadow:0 0 30px #a565dc28}
#menu[data-lobby-family="horde"] .lobby-live>i{background:#d9a0ff;box-shadow:0 0 12px #b888ee}
#menu[data-lobby-family="horde"] .mode-switch,#menu[data-lobby-family="horde"] .lobby-tab[data-action="loadout"],#menu[data-lobby-family="battle-royale"] .mode-switch [data-mode="zombies"]{display:none}
#menu[data-lobby-family="battle-royale"] .mode-switch [data-mode="br"]{order:-1}
.lobby-mode-features{display:flex;gap:5px;flex-wrap:wrap;margin:-5px 0 16px}
.lobby-mode-features>span{padding:5px 6px;border:1px solid #a5dbed33;border-radius:4px;font-size:7px;font-weight:900;letter-spacing:.4px;color:#c9e7ed;background:#0a25354d}
#menu[data-lobby-family="horde"] .lobby-mode-features>span{color:#e8c6ff;border-color:#c991e340;background:#321a4d55}
@media(max-width:760px){#modeSelection{padding:22px 16px;gap:14px}.mode-cards{gap:13px}.mode-card{width:min(88vw,650px);max-height:min(29dvh,47vw);border-width:3px}.mode-card:before{inset:-8px}.mode-card-title{font-size:clamp(34px,9.5vw,62px)}.mode-card-action{min-height:37px;font-size:21px;padding:7px;width:39%;bottom:8%}.mode-card-caption{font-size:7px;letter-spacing:.3px}.mode-selection-brand{font-size:23px}.mode-selection-footer h2{font-size:18px}.mode-selection-footer p{font-size:8px}#modeBack{padding:8px 10px;font-size:8px}.lobby-mode-back{padding:7px 10px;min-height:34px}.lobby-mode-features{margin:0 0 10px}.lobby-mode-features>span{font-size:6px;padding:4px}}
@media(max-width:600px) and (orientation:portrait){.lobby-mode-back>span:last-child{display:none}#menu .lobby-mode-features{display:none}.lobby-mode-back{width:34px;justify-content:center;padding:4px}#modeBack{top:44px;min-height:32px;font-size:7px}.mode-selection-brand{font-size:25px}.mode-selection-footer h2{font-size:17px}.mode-card-action{min-height:35px;font-size:19px;width:40%}.mode-card-caption{font-size:6px;bottom:1.5%}}
@media(max-height:590px) and (orientation:landscape){#modeSelection{padding:10px 18px;gap:6px}.mode-selection-header{min-height:24px}.mode-selection-brand{font-size:20px}.mode-selection-footer{min-height:32px}.mode-selection-footer h2{font-size:15px;margin-bottom:3px}.mode-selection-footer p{font-size:7px}.mode-card{width:min(72vw,510px);max-height:none;border-width:3px}.mode-card-title{font-size:clamp(23px,6dvh,42px);top:41%}.mode-card-action{min-height:27px;font-size:18px;padding:5px;width:30%;bottom:10%}.mode-card-caption{font-size:6px;bottom:1%}.mode-cards{gap:10px}#modeBack{min-height:28px;padding:7px 10px;font-size:7px}#menu .lobby-mode-features{display:none}}
@media(hover:hover){.mode-card:hover .mode-card-action{background:#fff96a}}
@media(prefers-reduced-motion:reduce){#modeSelection,#modeSelection:after,.mode-card,.mode-card:before{transition:none}.mode-card.is-selected,.mode-card:active{transform:none}}
