GameHud { font-family:Roboto; position:absolute; inset:0; width:100%; height:100%; display:flex; color:#f4f8fb; pointer-events:none; }
.card { background-color:rgba(10,14,22,.97); border:1px solid rgba(124,215,255,.32); box-shadow:0 18px 80px rgba(0,0,0,.7); }
.loading { position:absolute; left:50%; top:50%; transform:translate(-50% -50%); font-size:22px; }
.lobby { position:absolute; left:50%; top:50%; transform:translate(-50% -50%); width:720px; min-height:520px; padding:48px; display:flex; flex-direction:column; align-items:stretch; pointer-events:all; }
.eyebrow { width:100%; color:#57d8ff; font-size:12px; font-weight:800; letter-spacing:3px; white-space:nowrap; }
h1 { width:100%; margin:12px 0 4px 0; font-size:46px; font-weight:900; letter-spacing:1px; white-space:nowrap; }
.subtitle { width:100%; margin:0; color:#99a8b6; font-size:16px; white-space:nowrap; }
.roster { width:100%; min-height:112px; margin-top:30px; padding:18px 20px; display:flex; flex-direction:column; background-color:rgba(21,31,45,.9); border-left:3px solid #4ed6ff; }
.section-title,.label { color:#6f8497; font-size:11px; font-weight:800; letter-spacing:2px; white-space:nowrap; }
.member { width:100%; margin-top:10px; font-size:15px; color:#d9f6ff; white-space:nowrap; }
.actions { width:100%; margin-top:18px; display:flex; flex-direction:row; gap:10px; }
button { height:48px; padding:0 20px; display:flex; align-items:center; justify-content:center; background-color:#1b2734; border:1px solid #34485b; color:#eaf7ff; font-size:12px; font-weight:900; letter-spacing:1px; white-space:nowrap; cursor:pointer; pointer-events:all; }
button:hover { background-color:#293b4c; border-color:#65d7ff; }
button.primary,.launch { background-color:#087f9f; border-color:#58ddff; }
button.danger { color:#ff98a2; border-color:#743d46; }
.launch { width:100%; margin-top:12px; }
.status { width:100%; margin-top:18px; color:#5ee2ff; font-size:13px; white-space:nowrap; }
.controls { width:100%; margin-top:18px; color:#708292; font-size:12px; white-space:nowrap; }
.topbar { position:absolute; left:50%; top:24px; transform:translateX(-50%); display:flex; flex-direction:row; gap:8px; }
.topbar>div { width:150px; height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; background-color:rgba(9,14,23,.9); border-bottom:2px solid #45d6ff; }
.topbar strong { margin-top:3px; font-size:20px; white-space:nowrap; }
.combat-hud { position:absolute; left:28px; bottom:28px; display:flex; flex-direction:row; align-items:flex-end; gap:10px; }
.health { position:relative; width:300px; height:48px; background-color:rgba(9,14,23,.94); border:1px solid #35495b; overflow:hidden; }
.health .fill { position:absolute; left:0; top:0; bottom:0; background-color:#d83751; }
.health span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; white-space:nowrap; }
.weapon { width:220px; min-height:74px; padding:11px 14px; display:flex; flex-direction:column; background-color:rgba(9,14,23,.94); border-bottom:2px solid #45d6ff; }
.weapon b { width:100%; font-size:14px; white-space:nowrap; }
.weapon span { width:100%; margin-top:3px; color:#70e3ff; font-size:20px; white-space:nowrap; }
.weapon button { position:absolute; opacity:0; }
.ability { min-width:155px; height:48px; padding:7px 13px; display:flex; flex-direction:column; justify-content:center; background-color:rgba(9,14,23,.94); border-bottom:2px solid #c28bff; }
.ability b { color:#d7b5ff; font-size:10px; letter-spacing:1px; white-space:nowrap; }
.ability span { margin-top:3px; color:#edf7ff; font-size:11px; white-space:nowrap; }
.credits { min-width:88px; height:48px; padding:0 16px; display:flex; align-items:center; justify-content:center; background-color:rgba(9,14,23,.94); color:#ffd86d; font-size:20px; white-space:nowrap; }
.enemy-overlay { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.screen-enemy-vitals { position:absolute; width:220px; height:72px; margin-left:-110px; margin-top:-36px; display:flex; flex-direction:column; align-items:center; overflow:visible; }
.screen-enemy-name { color:#eef7ff; font-size:11px; font-weight:900; letter-spacing:2px; text-shadow:1px 2px 2px black; }
.screen-enemy-bar { position:relative; width:210px; height:20px; margin-top:4px; background-color:rgba(4,8,12,.9); border:2px solid rgba(235,244,250,.9); overflow:hidden; }
.screen-enemy-bar .fill { position:absolute; left:0; top:0; bottom:0; background-color:#e13654; transition:width .08s linear; }
.screen-enemy-bar span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:white; font-size:11px; font-weight:900; text-shadow:1px 1px 1px black; }
.hit-confirm { position:absolute; left:50%; top:50%; width:120px; height:80px; margin-left:-60px; margin-top:-40px; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.hit-confirm b { color:#fff0a4; font-size:30px; text-shadow:2px 2px 3px black; }
.hit-confirm span { margin-top:10px; color:#ffd45e; font-size:24px; font-weight:1000; text-shadow:2px 2px 3px black; }
.screen-enemy-vitals.boss { width:420px; margin-left:-210px; }
.screen-enemy-vitals.boss .screen-enemy-bar { width:410px; height:28px; border-color:#e8b950; }
.screen-enemy-vitals.boss .screen-enemy-name { color:#ffd36b; font-size:15px; }
.crosshair { position:absolute; left:50%; top:50%; transform:translate(-50% -50%); color:#8cecff; font-size:24px; font-weight:300; }
.result { position:absolute; left:50%; top:50%; transform:translate(-50% -50%); width:560px; padding:42px; display:flex; flex-direction:column; align-items:center; pointer-events:all; }
.result h1 { text-align:center; font-size:34px; }
.result p { width:100%; margin:8px 0 22px 0; text-align:center; color:#98a9b8; }
.result button { min-width:220px; }
.room-clear { position:absolute; left:50%; top:16%; transform:translateX(-50%); padding:13px 24px; background-color:rgba(7,27,31,.94); border:1px solid #43d7b4; color:#70f3d2; font-size:13px; font-weight:900; letter-spacing:2px; white-space:nowrap; }
.minimap { position:absolute; left:24px; top:24px; width:224px; height:244px; padding:10px; display:flex; flex-direction:column; background-color:rgba(7,12,20,.9); border:1px solid #344c60; }
.map-title { width:100%; height:22px; color:#70dff8; font-size:10px; font-weight:900; letter-spacing:2px; }
.map-canvas { position:relative; width:202px; height:202px; background-color:rgba(2,5,9,.8); overflow:hidden; }
.map-room { position:absolute; background-color:#253443; border:1px solid #63798a; z-index:2; }
.map-bridge { position:absolute; background-color:#586d7d; z-index:1; }
.map-room.active { background-color:#315f70; border-color:#70e6ff; }
.map-dot { position:absolute; width:7px; height:7px; margin-left:-3px; margin-top:-3px; border-radius:50%; z-index:5; }
.enemy-dot { background-color:#ff5268; }.player-dot { width:9px; height:9px; background-color:#55e9ff; border:1px solid white; }
.map-obstacle { position:absolute; min-width:2px; min-height:2px; background-color:#778795; border:1px solid #91a1ad; z-index:3; }
.map-obstacle.wall { background-color:#667987; border-color:#9aabb6; }
.chest-dot { width:9px; height:9px; background-color:#ffbd43; border-radius:1px; }.portal-dot { width:10px; height:10px; background-color:#8b7dff; border:2px solid #d0cbff; }
.score-panel { position:absolute; right:26px; top:24px; min-width:190px; padding:13px 18px; display:flex; flex-direction:column; align-items:flex-end; background-color:rgba(7,12,20,.9); border-right:3px solid #ffd46b; }
.score-panel span { color:#8494a2; font-size:10px; font-weight:900; letter-spacing:2px; }.score-panel strong { margin-top:2px; color:#ffe08b; font-size:28px; white-space:nowrap; }
.reward { position:absolute; left:50%; top:50%; transform:translate(-50% -50%); width:720px; padding:36px; display:flex; flex-direction:column; pointer-events:all; }
.reward h2 { width:100%; margin:8px 0 24px; font-size:30px; }.reward-options { width:100%; display:flex; flex-direction:row; gap:10px; }
.reward-options button { width:210px; height:110px; display:flex; flex-direction:column; align-items:flex-start; padding:18px; }
.reward-options b { font-size:14px; color:#7ee7ff; }.reward-options span { margin-top:8px; color:#9aabb8; font-size:11px; white-space:normal; }
.portal-hint { position:absolute; left:50%; bottom:110px; transform:translateX(-50%); padding:13px 24px; background-color:rgba(20,16,52,.94); border:1px solid #7775ff; color:#b9b8ff; font-size:13px; font-weight:900; letter-spacing:2px; }

.main-menu { position:absolute; inset:0; display:flex; background-color:#080d14; background-image:linear-gradient(90deg,rgba(5,10,16,.96) 0%,rgba(5,10,16,.86) 22%,rgba(5,10,16,.50) 56%,rgba(5,10,16,.32) 100%),url("/ui/menu-ancient-ruins-v1.png"); background-size:cover; background-position:center; pointer-events:all; }
.menu-nav { width:330px; padding:52px 30px 34px; display:flex; flex-direction:column; flex-shrink:0; background-color:rgba(8,15,23,.91); border-right:1px solid #263746; backdrop-filter:blur(5px); }
.menu-brand { height:130px; padding:0 12px; display:flex; flex-direction:column; }
.menu-brand span { color:#5ce0ff; font-size:17px; font-weight:900; letter-spacing:5px; }
.menu-brand strong { margin-top:6px; font-size:30px; letter-spacing:1px; }.menu-brand small { margin-top:10px; color:#617485; font-size:14px; letter-spacing:2px; }
.menu-nav>button { width:100%; height:54px; margin-bottom:6px; justify-content:flex-start; gap:16px; border:0; border-left:3px solid transparent; background-color:transparent; color:#8092a1; font-size:17px; }
.menu-nav>button span { font-size:15px; letter-spacing:2px; }.menu-nav>button:hover,.menu-nav>button.active { background-color:#152431; color:white; border-left-color:#51dbff; }.menu-nav>button.exit:hover { color:#ff7180; border-left-color:#ff5268; }
.nav-spacer { flex-grow:1; }.menu-content { flex-grow:1; padding:72px 82px 90px; overflow:hidden; background-color:rgba(3,8,13,.20); }.menu-page { width:100%; height:100%; display:flex; flex-direction:column; }
.page-kicker { color:#54dcff; font-size:14px; font-weight:900; letter-spacing:3px; }.menu-page h1 { margin:10px 0 34px; font-size:50px; }.play-cards { display:flex; gap:24px; }
.mode-card { width:400px; min-height:370px; padding:32px; display:flex; flex-direction:column; align-items:flex-start; background-color:#111c27; border:1px solid #2a3b49; }
button.mode-card { justify-content:flex-start; }.mode-card>b { font-size:24px; color:#eaf8ff; }.mode-card>span { margin:14px 0 24px; color:#8294a2; font-size:14px; white-space:normal; line-height:22px; }.mode-card>i { margin-top:auto; color:#58dfff; font-style:normal; font-weight:900; }
.mode-card.solo:hover { background-color:#123143; }.mode-card label,.lobby-search label { margin:12px 0 7px; color:#6f8291; font-size:10px; letter-spacing:2px; }.menu-field { width:100%; height:46px; padding:0 14px; background-color:#080f17; border:1px solid #304453; color:white; font-size:14px; }
.mode-card .primary { width:100%; margin-top:18px; }.active-lobby { margin-top:22px; min-height:92px; padding:18px 22px; display:flex; align-items:center; gap:18px; background-color:#10242e; border:1px solid #2d6576; }.active-lobby>div { display:flex; flex-direction:column; min-width:180px; }.active-lobby small{color:#57dfff}.active-lobby span{color:#8498a6}.roster-inline{flex-grow:1;display:flex;gap:8px}.roster-inline span{font-size:11px}
.page-head { display:flex; justify-content:space-between; align-items:flex-start; }.page-head h1{margin-bottom:20px}.lobby-search { width:420px; margin-bottom:20px; display:flex; flex-direction:column; }.lobby-head,.lobby-entry,.board-head,.board-row { display:flex; align-items:center; flex-direction:row; }
.lobby-head { padding:0 22px 12px; color:#74899a; font-size:13px; letter-spacing:2px; }.lobby-browser { flex-grow:1; overflow-y:scroll; background-color:#09111a; border:1px solid #253744; }
.lobby-entry { width:100%; min-height:76px; padding:0 22px; flex-shrink:0; justify-content:flex-start; border:0; border-bottom:1px solid #21313e; background-color:#101a24; text-align:left; }.lobby-entry>span{display:flex;flex-direction:column;align-items:flex-start}.lobby-entry small{color:#5d7282;margin-top:5px;font-size:12px}.lobby-entry strong{font-size:14px}.lobby-name-cell{width:auto;flex-grow:1;min-width:260px}.lobby-players-cell{width:150px;flex-shrink:0}.lobby-ping-cell{width:130px;flex-shrink:0}.lobby-access-cell{width:140px;flex-shrink:0}.empty-list{padding:52px;color:#627687;text-align:center;font-size:14px;letter-spacing:2px}.menu-status{height:34px;padding-top:12px;color:#59dcff;font-size:13px;letter-spacing:2px}
.settings-grid { width:720px; display:flex; flex-direction:column; gap:8px; }.setting-row { height:82px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; background-color:#111b25; border:1px solid #283946; }.setting-row>div:first-child{display:flex;flex-direction:column}.setting-row b{font-size:13px;letter-spacing:2px}.setting-row span{margin-top:6px;color:#60dfff;font-size:20px}.setting-row>div:last-child{display:flex;gap:8px}.setting-row button{width:52px;padding:0;font-size:22px}.settings-note{color:#718493}
.insight-counter{min-width:140px;padding:12px 18px;display:flex;flex-direction:column;align-items:flex-end;background-color:rgba(8,17,25,.9);border-right:3px solid #c28bff}.insight-counter span{font-size:10px;letter-spacing:2px;color:#8d9aa6}.insight-counter strong{font-size:25px;color:#d7b5ff}.hero-tabs{display:flex;gap:10px;margin-bottom:18px}.hero-tabs button{width:190px;height:74px;justify-content:flex-start;gap:10px}.hero-tabs button.active{background-color:#16303c;border-color:#5bdcff}.hero-tabs i{width:10px;height:40px}.hero-tabs span{font-size:11px}.hero-tabs small{font-size:9px;color:#728491}.hero-detail{display:flex;gap:18px;min-height:0;flex-grow:1}.hero-summary{width:330px;padding:22px;display:flex;flex-direction:column;background-color:rgba(11,20,29,.94);border:1px solid #2a3c49}.hero-summary h2{margin:12px 0 2px;font-size:25px}.hero-summary>b{color:#62ddff;font-size:11px;letter-spacing:2px}.hero-summary p{color:#8fa0ad;line-height:18px;font-size:12px;display:flex;flex-direction:column}.hero-summary p strong{margin-bottom:4px;color:#e7f7ff}.hero-summary button{margin-top:auto}.hero-silhouette{height:130px;display:flex;align-items:flex-end;justify-content:center;border-bottom:2px solid}.hero-silhouette>div{width:65px;height:112px;opacity:.75}.skill-tree{flex-grow:1;display:flex;flex-direction:column;gap:10px}.skill-node{min-height:108px;padding:18px;display:flex;align-items:center;background-color:rgba(13,23,33,.94);border:1px solid #304451}.skill-node>div{flex-grow:1;display:flex;flex-direction:column}.skill-node b{font-size:15px;color:#eaf7ff}.skill-node span{margin-top:7px;color:#8d9ca8;font-size:12px}.skill-node small{margin-top:8px;color:#62ddff;letter-spacing:1px}.skill-node button{width:100px}.skill-node.maxed{border-color:#6c5b87}.skill-node.maxed button{color:#bb9cde}
.category-tabs { display:flex; gap:10px; margin-bottom:20px; }.category-tabs button{font-size:14px}.category-tabs button.active{background-color:#087f9f;border-color:#58ddff}.board-head{padding:0 20px 12px;color:#74899a;font-size:13px;letter-spacing:2px}.board-rows{overflow-y:scroll;background-color:#09111a;border:1px solid #263744}.board-row{min-height:64px;padding:0 20px;flex-shrink:0;border-bottom:1px solid #1d2c37;font-size:15px}.board-row>b{color:#58dcff}.board-row strong{color:#ffe08b}.rank-cell{width:65px;flex-shrink:0}.player-cell{width:auto;min-width:220px;flex-grow:1}.score-cell{width:170px;flex-shrink:0}.kills-cell{width:130px;flex-shrink:0}.levels-cell{width:130px;flex-shrink:0}.time-cell{width:140px;flex-shrink:0}
.wiki-grid { display:flex; flex-direction:row; flex-wrap:wrap; gap:16px; overflow-y:scroll; }.wiki-grid>div{width:48%;min-height:160px;padding:24px;flex-shrink:0;background-color:#111b25;border:1px solid #293b48}.wiki-grid b{color:#61dfff;font-size:15px;letter-spacing:2px}.wiki-grid p{color:#91a1ad;line-height:24px;font-size:15px;white-space:normal}.menu-footer{position:absolute;left:330px;right:0;bottom:0;height:48px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background-color:#0b131c;border-top:1px solid #243441;color:#718595;font-size:12px;letter-spacing:2px}
.password-backdrop { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background-color:rgba(1,5,9,.78); z-index:50; pointer-events:all; }
.password-dialog { width:460px; padding:32px; display:flex; flex-direction:column; }.password-dialog h2{margin:10px 0 4px;font-size:27px;white-space:normal}.password-dialog p{margin:0 0 20px;color:#8193a1}.dialog-actions{margin-top:16px;display:flex;justify-content:flex-end;gap:10px}.password-error{margin-top:14px;color:#ff7080;font-size:12px;letter-spacing:2px}


.spectator-banner {
    position: absolute; bottom: 40px; left: 25%; width: 50%;
    padding: 16px; background-color: rgba(5, 14, 22, .9);
    border: 1px solid #34cbe1; color: white;
    flex-direction: column; align-items: center; gap: 8px;
    pointer-events: none;
    span { font-size: 14px; color: #a8cbd4; }
}
/* Dasher beta HUD: readable at the editor's reduced viewport as well as fullscreen. */
.run-heading { position:absolute; top:26px; left:50%; transform:translateX(-50%); width:310px; padding:12px 22px; flex-direction:column; align-items:center; background-color:rgba(6,13,19,.87); border-top:2px solid #cda85e; }
.run-heading>span { font-size:13px; color:#bdcbd1; letter-spacing:1px; }
.run-heading strong { font-size:24px; font-weight:700; margin:3px 0; }
.run-heading small { font-size:17px; color:#8b9da7; }
.runner-vitals,.ammo-hud,.dash-hud { position:absolute; bottom:32px; padding:18px 22px; background-color:rgba(6,13,19,.94); border:1px solid #34464e; flex-direction:column; }
.runner-vitals { left:28px; width:290px; border-top:3px solid #ef6071; }
.hud-caption { font-size:15px; font-weight:700; color:#c5d4da; letter-spacing:1px; justify-content:space-between; }
.hud-caption>span { color:#e5bf73; font-size:13px; }
.health-value,.ammo-value { align-items:baseline; gap:10px; margin:3px 0 10px; }
.health-value strong,.ammo-value strong { font-size:48px; font-weight:800; color:#ffffff; }
.health-value>span,.ammo-value>span { font-size:20px; color:#a7bac4; }
.hud-track { height:5px; width:100%; background-color:#263640; }
.hud-track>div { height:100%; background-color:#60d9df; }
.health-track { height:9px; }.health-track>div { background-color:#ef6071; }
.vitals-note { margin-top:10px; font-size:12px; color:#9db2be; letter-spacing:.5px; justify-content:space-between; }
.critical { border-color:#ff5268; background-color:rgba(48,10,20,.94); }.critical .health-value strong,.critical .vitals-note { color:#ff8392; }
.dash-hud { left:338px; width:255px; padding:17px 18px; }
.dash-row { align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; }
.dash-row>b { font-size:13px; padding:4px 6px; border:1px solid #82969e; border-radius:3px; }
.dash-row>strong { font-size:19px; }.dash-row>span { font-size:14px; color:#a3bbc4; }
.dash-hud.ready { border-top:3px solid #60d9df; }.ready .dash-row>span { color:#81f5e4; }
.ammo-hud { right:28px; width:250px; align-items:flex-end; border-top:3px solid #60d9df; }
.ammo-hud .vitals-note { width:100%; }.ammo-hud .hud-caption { font-size:17px; }
.low-ammo .ammo-value strong { color:#ffbd69; }
.squad-hud { position:absolute; left:28px; top:265px; width:218px; flex-direction:column; gap:7px; }
.squad-hud>.hud-caption { font-size:12px; color:#91a8b4; margin-bottom:2px; }
.squad-member { padding:10px 12px; background-color:rgba(6,13,19,.88); flex-direction:column; border-left:2px solid #60d9df; }
.squad-name { justify-content:space-between; align-items:center; margin-bottom:7px; gap:8px; }
.squad-name b { font-size:14px; max-width:120px; overflow:hidden; white-space:nowrap; }.squad-name span { font-size:11px; color:#a8c4ca; }
.squad-member.fallen { border-left-color:#7f8691; opacity:.65; }
.screen-enemy-vitals { width:120px; margin-left:-60px; height:40px; margin-top:-24px; }
.screen-enemy-name { font-size:12px; letter-spacing:.5px; }
.screen-enemy-bar { width:112px; height:7px; border:1px solid #24323c; }
.screen-enemy-bar span { display:none; }
.screen-enemy-vitals.boss { width:250px; margin-left:-125px; }
.screen-enemy-vitals.boss .screen-enemy-bar { width:240px; height:12px; }
.screen-enemy-vitals.boss .screen-enemy-name { font-size:16px; }
.score-panel { min-width:150px; }.score-panel span { font-size:13px; letter-spacing:1px; }.score-panel strong { font-size:30px; }
.portal-hint { bottom:210px; font-size:17px; letter-spacing:.5px; border-color:#c5a7ff; color:#e1d5ff; }
.room-clear { top:140px; font-size:16px; letter-spacing:.5px; }
.spectator-banner { bottom:32px; width:440px; left:50%; transform:translateX(-50%); font-size:20px; }
.result { border-top:3px solid #ef6071; }.result p { font-size:18px; }.result button { font-size:16px; }
.reward-options span { font-size:15px; }.reward-options b { font-size:17px; }
.menu-brand strong { font-size:48px; color:#f4dfad; letter-spacing:2px; }
.menu-brand span { font-size:12px; color:#b49c6c; letter-spacing:2px; }
.menu-content { padding:56px 44px 70px; }
.play-cards { gap:18px; }.mode-card { width:46%; min-height:350px; padding:26px; border-top:3px solid #b4955f; }
.mode-card.solo { border-top-color:#60d9df; background-color:rgba(14,37,46,.96); }
.mode-card>span { color:#bdcbd1; font-size:17px; line-height:25px; letter-spacing:0; }
.mode-card>i { font-size:19px; }.mode-card label { font-size:12px; letter-spacing:1px; }
.menu-nav>button span { letter-spacing:.5px; }.menu-field { font-size:17px; }
.active-lobby { flex-wrap:wrap; }.roster-inline span { font-size:15px; }.menu-footer { letter-spacing:.5px; }
/* Gameplay panels must never consume Attack1/Attack2. Only modal choices accept clicks. */
.phase-combat, .phase-combat *, .phase-roomclear, .phase-roomclear *, .phase-generating, .phase-generating * { pointer-events:none; }
.runner-vitals, .runner-vitals *, .ammo-hud, .ammo-hud *, .dash-hud, .dash-hud *, .squad-hud, .squad-hud *, .run-heading, .run-heading *, .minimap, .minimap *, .score-panel, .score-panel *, .crosshair, .portal-hint, .spectator-banner { pointer-events:none; }
.phase-reward .reward, .phase-reward .reward *, .phase-defeat .result, .phase-defeat .result * { pointer-events:all; }
/* Class selectors are intentional: Razor maps semantic text tags to engine labels. */
.coin-wallet { position:absolute; right:28px; top:28px; width:200px; padding:16px 20px; flex-direction:column; align-items:flex-end; background-color:rgba(12,17,22,.92); border-right:3px solid #d7b366; pointer-events:none; }
.coin-heading { font-size:13px; color:#d7b366; letter-spacing:2px; }
.coin-total { font-size:36px; font-weight:800; color:#ffe2a0; }
.coin-earned { font-size:14px; color:#e0c58e; margin-top:3px; }.coin-score { font-size:12px; color:#92a2ae; margin-top:10px; }
.journey { position:absolute; top:26px; left:50%; transform:translateX(-50%); width:340px; padding:14px 22px; flex-direction:column; background-color:rgba(8,16,22,.9); border-top:2px solid #d7b366; pointer-events:none; }
.journey-row { justify-content:space-between; align-items:center; }.journey-level { font-size:24px; font-weight:800; color:#f3dfb8; }.journey-room { font-size:17px; color:#d3e0e7; }
.journey-steps { gap:6px; margin-top:12px; margin-bottom:10px; }.journey-step { width:36px; height:4px; background-color:#36444c; }.journey-step.done { background-color:#6ebfc3; }.journey-step.current { background-color:#ffe1a1; height:6px; }
.journey-status { font-size:13px; color:#b0c5d0; letter-spacing:1px; }
.runner-vitals { width:280px; bottom:30px; padding:16px 20px; border:0; border-left:3px solid #e97775; background-color:rgba(8,16,22,.92); }
.hud-number { font-size:48px; font-weight:800; color:#ffffff; }.hud-unit { font-size:18px; color:#a9bec9; margin-left:8px; }
.health-value,.ammo-value { flex-direction:row; align-items:center; }
.meter-fill { height:100%; background-color:#72d8da; }.health-track .meter-fill { background-color:#e97775; }
.critical .hud-number { color:#ff8985; }.low-ammo .hud-number { color:#ffd190; }
.ammo-hud { width:220px; border:0; border-right:3px solid #72d8da; background-color:rgba(8,16,22,.92); }
.dash-hud { left:328px; width:230px; border:0; border-bottom:2px solid #5b7782; }.dash-hud.ready { border-top:0; border-bottom:2px solid #72d8da; }
.skill-tree { flex-direction:row; flex-wrap:wrap; overflow-y:scroll; gap:12px; }
.skill-node { width:47%; min-height:155px; flex-direction:column; align-items:stretch; padding:18px; border-top:2px solid #c4a767; }
.skill-node button { width:100%; margin-top:12px; font-size:15px; }.skill-node.maxed { border-top-color:#78cab1; }
.insight-counter { border-right-color:#d7b366; }.heroes-page .page-kicker { color:#d7b366; }
.economy-help { font-size:16px; color:#b8c8d1; margin-bottom:18px; max-width:950px; flex-shrink:0; }
.skill-requirement { font-size:11px; color:#d3b479; margin-top:5px; }
.result-coins { font-size:28px; color:#ffe0a0; margin:18px 0 8px; justify-content:center; }
.result-wallet { font-size:16px; color:#b7c9d3; margin-bottom:24px; text-align:center; }
/* Approved map and journey styles are frozen. Only wallet/results adjusted here. */
.coin-wallet { width:138px; padding:13px 18px; }
.coin-total { font-size:36px; font-weight:800; }
.coin-settlement { width:100%; flex-direction:column; padding:20px 28px; margin:12px 0 22px; background-color:rgba(22,27,29,.8); }
.settlement-row { justify-content:space-between; font-size:18px; color:#c1ccd0; margin-bottom:10px; }
.settlement-row.earned { color:#efd18b; }
.settlement-total { width:100%; justify-content:center; font-size:46px; color:#ffe3a7; font-weight:800; margin-top:12px; }
.settlement-caption { justify-content:center; font-size:13px; color:#b9a87f; letter-spacing:1px; margin-top:4px; }
.run-score-box { position:absolute; right:28px; top:28px; width:160px; padding:12px 18px; flex-direction:column; align-items:flex-end; background-color:rgba(8,16,22,.92); border-right:3px solid #73cdd6; pointer-events:none; }
.run-score-label { font-size:12px; color:#a9c9d3; letter-spacing:1px; }.run-score-number { font-size:28px; font-weight:800; color:#e9f8ff; }
.coin-wallet { top:112px; width:160px; }
.result button { margin-top:8px; }
.run-board-backdrop { position:absolute; inset:0; background-color:rgba(3,7,12,.94); align-items:center; justify-content:center; z-index:150; pointer-events:all; }
.run-board-dialog { width:650px; padding:30px; flex-direction:column; background-color:#101b24; border-top:3px solid #d8b775; pointer-events:all; }
.run-board-title { font-size:25px; color:#f4dfb5; font-weight:800; }.run-board-status { font-size:16px; color:#b6d1da; margin:14px 0; }
.run-board-row { width:100%; justify-content:space-between; padding:12px; font-size:18px; color:#c1d0d8; border-bottom:1px solid #2c3e48; }.run-board-row.self { background-color:#23444e; color:#ffe3a1; }
.run-board-dialog button { margin-top:12px; pointer-events:all; }
/* Minimal lower HUD, approved reference: no card backgrounds or frames. */
.minimal-vitals { position:absolute; left:38px; bottom:50px; width:150px; flex-direction:column; pointer-events:none; }
.minimal-health-line { align-items:baseline; gap:8px; }
.minimal-number { font-size:34px; font-weight:800; color:#f5f7f8; text-shadow:1px 2px 3px #000000; }
.minimal-unit { font-size:19px; color:#b4c1cc; text-shadow:1px 2px 3px #000000; }
.minimal-health-track { height:5px; margin-top:8px; width:150px; background-color:rgba(35,43,49,.65); }
.minimal-health-fill { height:100%; background-color:#ef7780; }.minimal-vitals.danger .minimal-number { color:#ff858e; }
.minimal-abilities { position:absolute; left:216px; bottom:40px; gap:22px; pointer-events:none; }
.minimal-ability { width:38px; flex-direction:column; align-items:center; }
.minimal-timer { height:18px; font-size:12px; color:#b9c2c7; text-shadow:1px 1px 2px #000000; white-space:nowrap; }
.minimal-icon { position:relative; width:28px; height:28px; flex-shrink:0; }
/* Draw locally: extra network clients need no external SVG resources. */
.dash-chevron { position:absolute; top:7px; width:14px; height:14px; border-top:2px solid #70e2ec; border-right:2px solid #70e2ec; transform:rotate(45deg); }
.dash-chevron.first { left:0px; }.dash-chevron.second { left:10px; }
.sun-ring { position:absolute; left:7px; top:7px; width:14px; height:14px; border:2px solid #f0cc70; border-radius:50%; }
.sun-core { position:absolute; left:12px; top:12px; width:4px; height:4px; border-radius:50%; background-color:#f0cc70; }
.sun-ray { position:absolute; left:13px; top:0px; width:2px; height:28px; border-top:4px solid #f0cc70; }
.cooling .dash-chevron { border-color:#889298; }
.cooling .sun-ring,.cooling .sun-ray { border-color:#889298; }
.cooling .sun-core { background-color:#889298; }
.minimal-key { font-size:12px; color:#b7c4ce; text-shadow:1px 1px 2px #000000; margin-top:5px; }
.minimal-ammo { position:absolute; right:38px; bottom:50px; flex-direction:column; align-items:flex-end; pointer-events:none; }
.minimal-ammo.emptying .minimal-number { color:#f0c883; }
.minimal-reload-track { width:80px; height:3px; margin-top:7px; background-color:rgba(35,43,49,.65); }.minimal-reload-fill { height:100%; background-color:#70e2ec; }
/* User requested translucent upper HUD; positions and map geometry stay fixed. */
.minimap { background-color:rgba(7,12,20,.32); border-color:rgba(100,134,156,.38); }
.map-canvas { background-color:rgba(2,5,9,.18); }
.journey { background-color:rgba(8,16,22,.18); }
.run-score-box,.coin-wallet { background-color:rgba(8,16,22,.18); }
.minimal-health-line { align-items:center; }
.minimal-number { font-family:Roboto; font-size:42px; font-weight:700; letter-spacing:0px; flex-shrink:0; text-shadow:1px 2px 3px rgba(0,0,0,.9); }
.minimal-unit { font-family:Roboto; font-size:21px; font-weight:500; letter-spacing:0px; flex-shrink:0; }
.run-board-row { gap:14px; }.run-board-row>div:nth-child(2) { flex-grow:1; white-space:normal; }

/* Native microphone geometry is available on every client without icon assets. */
.speaker-name { align-items:center; gap:6px; }
.voice-mic { position:relative; width:14px; height:18px; flex-shrink:0; }
.mic-capsule { position:absolute; left:5px; top:0px; width:5px; height:10px; border-radius:3px; background-color:#70e2ec; }
.mic-cradle { position:absolute; left:2px; top:5px; width:11px; height:9px; border-left:2px solid #70e2ec; border-right:2px solid #70e2ec; border-bottom:2px solid #70e2ec; border-radius:0px 0px 6px 6px; }
.mic-stem { position:absolute; left:6px; top:13px; width:2px; height:4px; background-color:#70e2ec; }

.pause-backdrop { position:absolute; inset:0; width:100%; height:100%; background-color:rgba(2,6,12,.8); align-items:center; justify-content:center; pointer-events:all; z-index:200; }
.pause-dialog { width:600px; max-height:90%; overflow:scroll; flex-direction:column; gap:16px; padding:30px; background-color:#101c25; border-top:2px solid #e4c77f; pointer-events:all; }
.pause-dialog h2 { font-size:26px; color:#edf3f5; margin:0; }
.pause-dialog h3 { font-size:17px; color:#70e2ec; margin:0; }
.pause-dialog p { font-size:15px; letter-spacing:0px; color:#b8c6cf; margin:0; }
.pause-dialog button { pointer-events:all; padding:12px 16px; font-size:14px; background-color:#263947; color:#eef4f5; cursor:pointer; }
.pause-dialog button:hover { background-color:#395368; }
.pause-dialog button.primary { background-color:#087f96; }.pause-dialog button.danger { background-color:#6d303c; }
.pause-actions { gap:12px; }.pause-actions button { flex-grow:1; }
.pause-voice { flex-direction:column; gap:14px; padding:18px 0; border-top:1px solid #344653; border-bottom:1px solid #344653; }
.voice-volume-row { align-items:center; gap:8px; }
.voice-volume-row b { flex-grow:1; font-size:16px; max-width:230px; overflow:hidden; }
.voice-volume-row label { width:54px; text-align:center; font-size:16px; color:#edf3f5; }
.voice-volume-row button { padding:8px 12px; }
.pause-dialog .pause-note { font-size:12px; color:#8e9fa9; }

/* Defeat B: scoped to the result screen; approved gameplay HUD stays intact. */
.result.result-summary { width:570px; max-height:94%; overflow:scroll; padding:26px 32px; background-color:rgba(9,18,25,.95); border:1px solid #334752; border-top:3px solid #ef6071; align-items:stretch; }
.result-summary .summary-brand { font-size:20px; letter-spacing:7px; color:#8296a5; text-align:center; margin-bottom:14px; }
.result-summary h1 { font-size:30px; letter-spacing:1px; margin:0 0 20px; }
.result-summary .summary-caption { font-size:12px; letter-spacing:1px; color:#9bafbc; text-align:center; }
.summary-score { flex-direction:column; align-items:center; gap:4px; margin-bottom:18px; }
.summary-stats { width:100%; gap:10px; padding:8px 0 18px; }
.summary-stat-cell { flex-grow:1; flex-basis:0; min-width:0; height:84px; padding:12px 6px; flex-direction:column; align-items:center; justify-content:center; gap:8px; background-color:rgba(30,47,59,.65); border:1px solid #3a505e; border-radius:4px; }

.result-summary .summary-stat { font-size:26px; letter-spacing:0px; font-weight:600; color:#f4f8fb; }
.summary-team { flex-direction:column; align-items:center; gap:6px; padding:14px 0; border-bottom:1px solid #40515c; }
.result-summary .summary-names { font-size:18px; letter-spacing:0px; color:#eef4f6; text-align:center; white-space:normal; word-break:break-all; }
.summary-coins { align-items:center; justify-content:space-between; padding:18px 0; gap:8px; }
.summary-coin-cell { flex-direction:column; align-items:center; gap:5px; flex-shrink:1; }
.result-summary .summary-money { font-size:24px; font-weight:600; letter-spacing:0px; color:#eef4f6; }
.result-summary .summary-operator { font-size:20px; color:#a3b5bf; padding-bottom:18px; }
.summary-actions { flex-direction:column; gap:9px; }
.result-summary .summary-actions button { width:100%; min-width:0; height:46px; margin:0; font-size:15px; letter-spacing:.6px; border-radius:3px; }
.result-summary .summary-actions .primary { background-color:#008ca9; border-color:#64dcea; font-size:18px; letter-spacing:0px; }

.run-board-dialog { width:820px; max-height:90%; padding:28px 32px; }
.ranking-subtitle { font-size:13px; color:#d8bd81; letter-spacing:1px; margin-top:6px; }
.ranking-status { font-size:17px; color:#b8dce4; letter-spacing:0px; margin:18px 0; }
.ranking-heading { width:100%; padding:10px 14px; gap:16px; background-color:#182a35; }
.ranking-heading label { font-size:12px; color:#a8bac6; letter-spacing:1px; }
.ranking-list { width:100%; flex-direction:column; max-height:410px; overflow-y:scroll; }
.run-board-row { align-items:center; gap:16px; padding:14px; min-height:60px; flex-shrink:0; }
.ranking-place { width:70px; flex-shrink:0; font-size:20px; letter-spacing:0px; color:#b9ccd6; }
.ranking-team { flex-grow:1; flex-basis:0; min-width:0; flex-direction:column; gap:4px; }
.ranking-names { font-size:18px; letter-spacing:0px; color:#f1f5f7; white-space:normal; word-break:break-all; }
.ranking-score { width:145px; flex-shrink:0; text-align:right; font-size:23px; font-weight:700; letter-spacing:0px; color:#f0d393; }
.ranking-you { font-size:11px; color:#72e3e8; letter-spacing:1px; }
.run-board-row.self { border-left:3px solid #70dce6; background-color:#193d48; }
.ranking-note { font-size:13px; letter-spacing:0px; color:#91a8b8; margin:14px 0 2px; white-space:normal; }
.board-head label { font-size:13px; letter-spacing:1px; color:#9bb0be; }
.board-row label { font-size:18px; letter-spacing:0px; color:#e4edf2; }
.board-row .score-cell { font-size:23px; color:#f0d393; }
.board-row .player-cell { white-space:normal; word-break:break-all; }

.reward-options { gap:12px; }
.reward .chest-choice { height:190px; width:31%; min-width:0; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:18px; white-space:normal; }
.chest-buff-title { font-size:19px; font-weight:700; color:#f4f8fb; letter-spacing:0px; white-space:normal; }
.chest-buff-description { font-size:15px; color:#b9d1dc; letter-spacing:0px; white-space:normal; }
.chest-buff-rank { font-size:12px; color:#e9c77d; letter-spacing:0px; }
.life-charges { font-size:12px; color:#e9c77d; letter-spacing:.5px; margin-top:4px; }

.reward.chest-reference { width:1040px; max-width:94%; padding:30px 34px; background-color:rgba(5,13,19,.78); border:0; align-items:center; }
.chest-reference .eyebrow { display:none; }
.chest-heading { font-size:44px; font-weight:800; letter-spacing:5px; color:#f3f7fa; text-align:center; }
.chest-level { font-size:19px; letter-spacing:3px; color:#efcc80; margin-top:8px; }
.chest-instruction { font-size:14px; letter-spacing:2px; color:#a4bac7; margin:16px 0 26px; }
.chest-reference .reward-options { gap:18px; width:100%; }
.chest-reference .chest-choice { flex-grow:1; flex-basis:0; width:auto; min-width:0; height:380px; padding:24px 20px; align-items:center; justify-content:flex-start; background-color:rgba(10,23,32,.91); border:1px solid #607985; border-radius:10px; }
.chest-reference .chest-choice:hover { background-color:rgba(17,47,59,.97); border:2px solid #6ae5ef; }
.buff-icon { position:relative; width:64px; height:64px; flex-shrink:0; margin:8px 0 25px; }
.buff-stroke { position:absolute; height:3px; border-radius:2px; transform-origin:0% 50%; background-color:#70e2ec; }
.buff-group-1 .buff-stroke { background-color:#efcc80; }
.chest-reference .chest-buff-title { font-size:24px; letter-spacing:1px; text-align:center; min-height:56px; flex-shrink:0; }
.chest-reference .chest-buff-description { font-size:18px; text-align:center; flex-grow:1; width:100%; }
.chest-reference .chest-buff-rank { font-size:12px; margin:10px 0 14px; }
.chest-select { width:100%; height:42px; border:1px solid #607985; border-radius:4px; align-items:center; justify-content:center; flex-shrink:0; }
.chest-select label { font-size:16px; letter-spacing:3px; color:#e6f1f6; }
.chest-choice:hover .chest-select { border-color:#70e2ec; background-color:#153b49; }

/* ESC reference B: independent sidebar, leaving the game visible. */
.pause-backdrop { justify-content:flex-start; align-items:stretch; background-color:rgba(2,6,12,.28); }
.pause-dialog { width:440px; max-width:42%; height:100%; max-height:100%; margin-left:24px; padding:42px 32px 30px; gap:0; background-color:rgba(7,16,25,.94); border-top:0px; border-left:1px solid #344653; border-right:1px solid #344653; overflow:scroll; flex-shrink:0; }
.esc-brand { flex-direction:column; gap:8px; margin-bottom:34px; flex-shrink:0; }
.esc-logo { font-size:38px; font-weight:700; letter-spacing:6px; color:#f3f7fa; }
.esc-caption { font-size:15px; letter-spacing:5px; color:#a4b4c2; }
.pause-actions { flex-direction:column; gap:12px; margin-bottom:28px; flex-shrink:0; }
.pause-dialog .esc-resume { background-color:transparent; padding:10px 0 14px; border-bottom:3px solid #63dbe5; justify-content:flex-start; }
.pause-dialog .esc-resume label { font-size:32px; letter-spacing:0px; font-weight:700; color:#f5f8fa; }
.pause-dialog .esc-settings { background-color:transparent; padding:10px 0; justify-content:flex-start; }
.pause-dialog .esc-settings label { font-size:22px; letter-spacing:0px; color:#dbe5ec; }
.pause-dialog .esc-resume:hover, .pause-dialog .esc-settings:hover { background-color:rgba(82,203,222,.1); }
.pause-voice { gap:0; padding:24px 0 0; border-bottom:0px; flex-shrink:0; }
.esc-voice-heading { justify-content:space-between; align-items:center; margin-bottom:12px; }
.esc-voice-heading label { font-size:14px; letter-spacing:2px; color:#a4b4c2; }
.esc-voice-heading .esc-talk { font-size:14px; letter-spacing:0px; }
.esc-member { flex-direction:column; padding:18px 0 12px; border-bottom:1px solid rgba(117,145,166,.22); flex-shrink:0; }
.esc-member-name { gap:16px; align-items:center; }
.esc-member-name label { font-size:19px; letter-spacing:0px; font-weight:600; color:#f1f5f8; overflow:hidden; white-space:nowrap; }
.esc-volume-line { align-items:center; gap:16px; padding-left:40px; }
.esc-percent { width:52px; flex-shrink:0; text-align:right; font-size:17px; letter-spacing:0px; color:#f1f5f8; }
.esc-slider { flex-grow:1; height:28px; min-width:0px; pointer-events:all; }
.esc-slider .inner { flex-grow:1; }
.esc-slider .track { height:5px; background-color:#344653; border-radius:3px; }
.esc-slider .track-active { background-color:#6bdbe3; border-radius:3px; }
.esc-slider .thumb { width:13px; height:13px; background-color:#eef7fa; border-radius:3px; }
.esc-volume-footer { padding-left:40px; justify-content:space-between; align-items:center; }
.esc-volume-footer label { font-size:12px; letter-spacing:0px; color:#8c9ead; }
.pause-dialog .esc-reset { background-color:transparent; padding:2px 0; }
.pause-dialog .esc-reset:hover label { color:#70e2ec; }
.esc-mic { position:relative; width:24px; height:30px; flex-shrink:0; color:#d9e5ec; }
.esc-mic-head { position:absolute; left:8px; top:1px; width:8px; height:16px; border-radius:5px; background-color:#d9e5ec; }
.esc-mic-cup { position:absolute; left:4px; top:10px; width:16px; height:13px; border:2px solid #d9e5ec; border-top:0px; border-radius:0px 0px 8px 8px; }
.esc-mic-stem { position:absolute; left:11px; top:23px; width:2px; height:6px; background-color:#d9e5ec; }
.esc-mic-slash { position:absolute; left:0px; top:14px; width:28px; height:2px; background-color:#81909e; transform:rotate(48deg); }
.speaking .esc-mic-head, .speaking .esc-mic-stem { background-color:#61e1eb; }
.speaking .esc-mic-cup { border-color:#61e1eb; }
.muted .esc-member-name { opacity:.45; }
.esc-empty { font-size:15px; letter-spacing:0px; color:#9caebb; padding:20px 0; }
.esc-footer { flex-direction:column; gap:16px; margin-top:28px; flex-shrink:0; }
.pause-dialog .danger { background-color:transparent; border:1px solid #cb656e; justify-content:center; padding:14px; }
.pause-dialog .danger label { font-size:18px; letter-spacing:0px; color:#e78287; }
.pause-dialog .danger:hover { background-color:rgba(170,55,68,.18); }
.pause-note { font-size:13px; letter-spacing:0px; color:#9bacb9; }
.esc-subpage { gap:20px; }
.esc-subpage button label { font-size:18px; letter-spacing:0px; }

.esc-subtitle { font-size:28px; font-weight:700; letter-spacing:0px; color:#f1f5f8; }
.esc-description { font-size:16px; letter-spacing:0px; color:#b8c6cf; }

/* Class-only overrides avoid engine button tag specificity leaking into ESC. */
.pause-dialog .esc-resume { height:64px; min-height:64px; border:0px; border-bottom:3px solid #63dbe5; border-radius:0px; padding:8px 0 12px; background-color:transparent; flex-grow:0; }
.pause-dialog .esc-settings { height:52px; min-height:52px; border:0px; padding:8px 0; background-color:transparent; flex-grow:0; }
.pause-dialog .esc-leave { height:52px; min-height:52px; width:100%; background-color:transparent; border:1px solid #cb656e; border-radius:3px; justify-content:center; }
.pause-dialog .esc-leave label { font-size:18px; font-weight:500; letter-spacing:0px; color:#e78287; }
.pause-dialog .esc-leave:hover { background-color:rgba(170,55,68,.18); border-color:#ed858c; }
.pause-dialog .esc-reset { height:22px; min-height:22px; border:0px; background-color:transparent; font-weight:400; }
.pause-dialog .esc-footer { margin-top:auto; padding-top:28px; }
.pause-dialog .pause-note { font-size:14px; font-weight:400; letter-spacing:0px; }
.pause-dialog .esc-empty { font-size:16px; font-weight:400; }
.pause-dialog .esc-talk { font-weight:400; }
/* Browser-like home menu */
.main-menu { flex-direction:column; background-color:#080f18; }
.browser-tabs { height:66px; flex-shrink:0; align-items:stretch; border-bottom:1px solid #344653; background-color:#0c1722; }
.browser-tab { height:66px; min-width:155px; border:0px; border-bottom:3px solid transparent; background-color:transparent; }
.browser-tab label { font-size:20px; font-weight:500; letter-spacing:0px; }
.browser-tab.selected-tab { border-bottom-color:#5fe0ec; background-color:#142b38; }
.browser-close { margin-left:auto; height:66px; width:66px; border:0px; background-color:transparent; }
.browser-close label { font-size:36px; }
.menu-content { padding:0px; width:100%; flex-grow:1; }
.menu-page { padding:40px; overflow:scroll; }
.menu-footer { display:none; }
.home-layout { width:100%; height:100%; }
.home-room { position:relative; flex-grow:1; height:100%; }
LobbyRoomPreview { position:absolute; width:100%; height:100%; }
.home-title { position:absolute; top:7%; width:100%; align-items:center; flex-direction:column; gap:10px; }
.home-logo { font-size:64px; letter-spacing:9px; font-weight:700; }
.home-subtitle { font-size:18px; letter-spacing:2px; color:#c5b58c; }
.home-slots { position:absolute; left:4%; right:4%; bottom:22%; height:66px; gap:12px; }
.home-slot { width:25%; justify-content:center; align-items:center; }
.home-nameplate { width:100%; padding:10px; background-color:rgba(8,18,27,.85); border-bottom:2px solid #60d6df; align-items:center; gap:10px; }
.home-nameplate label { font-size:17px; letter-spacing:0px; }
.steam-avatar { width:38px; height:38px; flex-shrink:0; }
.ready-state { color:#68dfaa; font-size:12px; }
.empty-slot { font-size:20px; color:#8dabb9; }
.host-action { position:absolute; top:44%; left:42%; height:60px; background-color:rgba(8,18,27,.65); border:0px; }
.host-action label { font-size:26px; letter-spacing:0px; }
.home-ready { position:absolute; bottom:8%; left:35%; width:30%; flex-direction:column; align-items:center; gap:12px; }
.home-ready label { font-size:20px; letter-spacing:0px; }
.home-ready .primary { width:220px; }
.countdown { font-size:20px; white-space:nowrap; }
.home-leave { position:absolute; bottom:24px; left:24px; background-color:transparent; border-color:#a45b66; }
.home-leave label { font-size:17px; letter-spacing:0px; }
.home-browser { width:360px; flex-shrink:0; background-color:rgba(8,17,26,.97); border-left:1px solid #344653; flex-direction:column; padding:26px 20px; gap:20px; }
.browser-heading { font-size:26px; letter-spacing:2px; }
.home-lobby-list { flex-direction:column; overflow:scroll; flex-grow:1; }
.home-lobby-row { align-items:center; padding:18px 0; gap:10px; border-bottom:1px solid #283d4b; flex-shrink:0; }
.home-lobby-info { flex-grow:1; flex-direction:column; gap:8px; }
.home-lobby-info label { font-size:16px; letter-spacing:0px; }
.home-lobby-row button label { font-size:16px; letter-spacing:0px; }
.password-dialog { gap:16px; }

/* Readable home typography, scoped away from the approved in-run HUD. */
.browser-tabs .browser-tab { min-width:160px; padding:0 24px; align-items:center; justify-content:center; }
.browser-tabs .browser-tab.selected-tab { background-color:#1c3544; border-bottom:3px solid #6fe5ef; }
.browser-tabs .browser-tab:hover { background-color:#1c3544; }
.home-title { top:5%; gap:12px; }
.home-logo { text-shadow:0px 3px 8px rgba(0,0,0,.95); }
.home-subtitle { background-color:rgba(5,12,19,.82); padding:8px 20px; border-radius:3px; max-width:80%; text-align:center; }
.home-nameplate { min-height:76px; padding:12px 16px; gap:14px; background-color:rgba(6,15,24,.95); }
.home-player-text { flex-direction:column; gap:5px; flex-grow:1; min-width:0px; }
.home-player-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.home-slot { min-width:0px; }
.home-slots { height:76px; }
.steam-avatar { width:44px; height:44px; }
.empty-slot { background-color:rgba(6,15,24,.75); padding:10px 18px; border-radius:3px; }
.host-action { left:50%; transform:translateX(-50%); padding:0 28px; height:62px; background-color:rgba(6,15,24,.94); border:1px solid #557784; border-radius:4px; }
.home-ready .primary { height:56px; width:240px; border-radius:4px; }
.home-ready { bottom:6%; }
.countdown { text-shadow:0px 2px 5px black; }
.home-browser { width:380px; padding:28px 24px; gap:24px; }
.home-browser .menu-field { height:50px; font-size:18px; color:#edf4f8; letter-spacing:0px; }
.home-browser .menu-field label { font-size:18px; color:#b8cbd7; letter-spacing:0px; font-weight:400; }
.home-lobby-info { min-width:0px; gap:10px; }
.home-lobby-info label { white-space:normal; }
.home-lobby-row { padding:20px 0; gap:16px; }
.home-lobby-row button { min-width:76px; padding:0 16px; flex-shrink:0; }
.main-menu .password-dialog label { font-size:19px; letter-spacing:0px; color:#edf4f8; }
.main-menu .menu-page { color:#e3edf4; }
.main-menu .menu-page .page-kicker { font-size:16px; color:#afc5d3; }
.menu-glyph { position:relative; width:24px; height:24px; min-width:24px; flex-shrink:0; pointer-events:none; }
.menu-glyph-stroke { position:absolute; height:2px; border-radius:1px; background-color:#dcebf2; transform-origin:0% 50%; pointer-events:none; }
.browser-tab.selected-tab .menu-glyph-stroke { background-color:#6fe5ef; }
.home-leave .menu-glyph-stroke { background-color:#efa6aa; }
.browser-tabs .browser-tab, .host-action, .home-ready .primary, .home-leave, .home-lobby-row button { gap:12px; align-items:center; }
.browser-tabs .browser-tab { min-width:0px; padding:0 24px; }
.browser-close:hover .menu-glyph-stroke { background-color:#efa6aa; }


.life-charge-badge { position:absolute; left:0px; top:-30px; align-items:center; gap:6px; height:24px; pointer-events:none; }
.life-charge-badge .menu-glyph-stroke { background-color:#e9c77d; }

/* Skill tree layout: flat rules, compatible with sbox UI parser. */
SkillTreePanel, .progress-tree {
    width: 100%; height: 100%; padding: 32px 38px; flex-direction: column; color: #edf4f8; font-family: Roboto; font-size: 18px; letter-spacing: 0px; background-color: #080f16;
     display:flex; flex-shrink:0; pointer-events:all; }
SkillTreePanel label { color: #edf4f8; font-size: 18px; letter-spacing: 0px; flex-shrink: 0; }
SkillTreePanel .tree-heading { justify-content: space-between; align-items: center; margin-bottom: 28px; flex-shrink: 0; }
SkillTreePanel .tree-title { flex-direction: column; gap: 8px; }
SkillTreePanel .tree-eyebrow { font-size: 13px; color: #8bb2c5; letter-spacing: 2px; }
SkillTreePanel .tree-main-title { font-size: 38px; font-weight: 700; }
SkillTreePanel .tree-subtitle { color: #a9bdcb; font-size: 17px; }
SkillTreePanel .tree-wallet { flex-direction: column; align-items: flex-end; gap: 8px; }
SkillTreePanel .tree-wallet label { font-size: 14px; color: #b2c5d0; }
SkillTreePanel .tree-wallet .wallet-value { font-size: 32px; color: #f0d17d; font-weight: 700; }
SkillTreePanel .tree-workspace { flex-grow: 1; min-height: 0; gap: 28px; overflow: scroll; }
SkillTreePanel .tree-branches { flex-grow: 1; gap: 18px; min-width: 660px; }
SkillTreePanel .tree-branch { flex-direction: column; flex-grow: 1; flex-basis: 0; align-items: center; }
SkillTreePanel .branch-name { font-size: 16px; letter-spacing: 2px; color: #80d5d9; margin-bottom: 20px; }
SkillTreePanel .branch-1 .branch-name { color: #ecd17e; }
SkillTreePanel .branch-2 .branch-name { color: #bfa1ed; }
SkillTreePanel .talent { width: 100%; min-height: 100px; padding: 14px; background-color: #14232e; border: 1px solid #37505e; border-radius: 8px; align-items: center; gap: 10px; flex-shrink: 0; cursor: pointer; }
SkillTreePanel .talent:hover { background-color: #213844; border-color: #9dd9e5; }
SkillTreePanel .talent.selected { border: 2px solid #70dfeb; background-color: #203842; }
SkillTreePanel .talent.locked { background-color: #101920; }
SkillTreePanel .talent.complete { border-color: #65c7a0; }
SkillTreePanel .talent-icon { width: 28px; height: 28px; flex-shrink: 0; }
SkillTreePanel .talent-text { flex-direction: column; gap: 7px; flex-grow: 1; }
SkillTreePanel .talent-tier { font-size: 11px; color: #9db6c4; }
SkillTreePanel .talent-name { font-size: 18px; font-weight: 600; }
SkillTreePanel .talent-rank { font-size: 13px; color: #bbd1dd; }
SkillTreePanel .rank-marks { gap: 5px; }
SkillTreePanel .rank-mark { width: 22px; height: 4px; background-color: #3a4c58; }
SkillTreePanel .rank-mark.filled { background-color: #74ddc6; }
SkillTreePanel .tree-link { width: 2px; height: 25px; background-color: #344653; flex-shrink: 0; }
SkillTreePanel .tree-link.unlocked { background-color: #70d7cd; }
SkillTreePanel .talent-details { width: 310px; flex-shrink: 0; padding: 24px; background-color: #101e28; border: 1px solid #334b58; border-radius: 8px; flex-direction: column; gap: 18px; align-self: flex-start; }
SkillTreePanel .detail-icon { width: 48px; height: 48px; padding: 12px; background-color: #29414b; border-radius: 8px; }
SkillTreePanel .detail-title { font-size: 28px; font-weight: 700; }
SkillTreePanel .detail-description { font-size: 18px; color: #c3d6e0; white-space: normal; }
SkillTreePanel .detail-rank { justify-content: space-between; padding-top: 16px; border-top: 1px solid #344b58; }
SkillTreePanel .detail-rank label { font-size: 15px; }
SkillTreePanel .detail-requirement { color: #e3cc8e; font-size: 15px; white-space: normal; }
SkillTreePanel .talent-buy { height: 50px; width: 100%; justify-content: center; align-items: center; background-color: #0787a0; border: 1px solid #78ddeb; border-radius: 4px; cursor: pointer; }
SkillTreePanel .talent-buy label { font-size: 15px; font-weight: 700; }
SkillTreePanel .talent-buy.unavailable { background-color: #26323d; border-color: #45545e; opacity: 0.6; }
SkillTreePanel .detail-note { font-size: 14px; color: #9bb2c0; white-space: normal; }

/* Skill tree typography and purchase controls. */
SkillTreePanel .talent-details { width:380px; gap:20px; padding:26px; }
SkillTreePanel .talent { justify-content:flex-start; padding:18px; white-space:normal; }
SkillTreePanel .talent-name { white-space:normal; }
SkillTreePanel .talent-text { min-width:0px; }
SkillTreePanel .talent-buy { height:56px; flex-shrink:0; padding:0px 12px; letter-spacing:0px; }
SkillTreePanel .talent-buy:hover { background-color:#099db4; }
SkillTreePanel .talent-buy.unavailable { opacity:1; background-color:#25343f; border-color:#4a606e; cursor:default; }
SkillTreePanel .detail-description, SkillTreePanel .detail-note, SkillTreePanel .detail-requirement { width:100%; white-space:normal; }

/* Settings A: sidebar / controls / contextual help. Flat engine-compatible rules. */
SettingsPanel { width:100%; height:100%; flex-direction:column; padding:36px 38px 24px; background-color:#080f16; pointer-events:all; flex-shrink:0; }
SettingsPanel .settings-a-body { flex-grow:1; min-height:0px; gap:28px; }
SettingsPanel .settings-a-nav { width:235px; flex-shrink:0; flex-direction:column; gap:10px; }
SettingsPanel .settings-a-caption { font-size:12px; color:#8caabb; letter-spacing:2px; margin-bottom:26px; margin-top:6px; }
SettingsPanel .settings-a-tab { height:64px; padding:0px 18px; justify-content:flex-start; gap:18px; background-color:transparent; border:0px; border-left:3px solid transparent; flex-shrink:0; }
SettingsPanel .settings-a-tab.active { background-color:#1b303b; border-left:3px solid #6ae0eb; }
SettingsPanel .settings-a-tab:hover { background-color:#203641; }
SettingsPanel .settings-a-options { flex-grow:1; flex-basis:0; min-width:430px; padding:26px; background-color:#101d27; border:1px solid #304652; border-radius:5px; flex-direction:column; overflow:scroll; }
SettingsPanel .settings-a-section { margin-bottom:20px; flex-shrink:0; }
SettingsPanel .settings-a-row { min-height:82px; width:100%; align-items:center; justify-content:space-between; padding:14px 8px; gap:16px; border-top:1px solid #2b414e; flex-shrink:0; }
SettingsPanel .settings-a-row.focused { background-color:#192e39; }
SettingsPanel .settings-a-name { width:42%; white-space:normal; }
SettingsPanel .settings-a-range { flex-grow:1; align-items:center; gap:14px; }
SettingsPanel SliderControl { flex-grow:1; height:32px; min-width:90px; }
SettingsPanel .settings-a-value { width:65px; text-align:right; flex-shrink:0; }
SettingsPanel .settings-a-open { min-width:175px; height:46px; gap:12px; padding:0px 12px; }
SettingsPanel .settings-a-toggle { height:44px; width:112px; gap:12px; border:1px solid #48606e; background-color:#22333e; }
SettingsPanel .settings-a-toggle.enabled { border-color:#67dce8; background-color:#12677b; }
SettingsPanel .settings-a-switch { width:15px; height:15px; border-radius:50%; background-color:#d8e9f0; }
SettingsPanel .settings-a-help { width:290px; padding:26px; flex-shrink:0; flex-direction:column; gap:24px; background-color:#101d27; border:1px solid #304652; border-radius:5px; }
SettingsPanel .settings-a-help-icon { width:48px; height:48px; padding:12px; background-color:#28424f; border-radius:5px; }
SettingsPanel .settings-a-help-text { white-space:normal; width:100%; }
SettingsPanel .settings-a-local-note { font-size:15px; color:#9cb4c3; letter-spacing:0px; font-weight:400; white-space:normal; margin-top:24px; flex-shrink:0; }
SettingsPanel .settings-a-footer { height:80px; margin-top:22px; border-top:1px solid #304652; align-items:center; gap:14px; flex-shrink:0; }
SettingsPanel .settings-a-status { flex-grow:1; font-size:16px; font-weight:400; letter-spacing:0px; color:#e7cf8a; }
SettingsPanel .settings-a-footer button { height:50px; min-width:150px; padding:0px 20px; }
SettingsPanel .settings-a-apply { background-color:#07869d; border-color:#73e0eb; }
SettingsPanel .settings-a-apply.inactive { background-color:#223640; border-color:#395663; }

.run-settings-full { width:100%; max-width:100%; height:100%; margin:0px; padding:0px; pointer-events:all; }
CrosshairView { position:relative; width:0px; height:0px; pointer-events:none; flex-shrink:0; }
.custom-crosshair { position:absolute; left:50%; top:50%; width:0px; height:0px; pointer-events:none; }
SettingsPanel .appearance-preview { position:relative; width:100%; height:180px; background-color:#344550; border:1px solid #536e7e; border-radius:4px; justify-content:center; align-items:center; flex-shrink:0; }
SettingsPanel .preview-center { position:absolute; left:50%; top:50%; width:0px; height:0px; }
.run-settings-full SettingsPanel .settings-a-footer button { min-width:110px; padding:0px 14px; }

/* Override the combat HUD's global non-interactive descendants inside modal settings. */
.pause-backdrop .run-settings-full, .pause-backdrop SettingsPanel, .pause-backdrop SettingsPanel * { pointer-events:all; }
.pause-backdrop SettingsPanel .menu-glyph, .pause-backdrop SettingsPanel .menu-glyph *, .pause-backdrop SettingsPanel CrosshairView, .pause-backdrop SettingsPanel CrosshairView * { pointer-events:none; }
.damage-popup-layer { position:absolute; left:50%; top:50%; width:0px; height:0px; pointer-events:none; }
.damage-popup { position:absolute; white-space:nowrap; pointer-events:none; text-shadow:1px 1px 2px #000000; }

/* Wide leaderboard: one result per row, shared column geometry. */
LeaderboardPanel { width:100%; height:100%; flex-direction:column; padding:36px 40px 24px; pointer-events:all; background-color:#080f16; }
LeaderboardPanel .lb-heading { justify-content:space-between; align-items:center; margin-bottom:26px; flex-shrink:0; }
LeaderboardPanel .lb-heading > div { flex-direction:column; gap:8px; }
LeaderboardPanel .lb-toolbar { justify-content:space-between; align-items:center; margin-bottom:24px; flex-shrink:0; }
LeaderboardPanel .lb-tabs { gap:10px; }
LeaderboardPanel .lb-tabs button { min-width:105px; height:50px; }
LeaderboardPanel .lb-tabs button.active { background-color:#17404b; border-color:#70d9e4; }
LeaderboardPanel .lb-muted { font-size:17px; font-weight:400; color:#a8c0ce; letter-spacing:0px; }
LeaderboardPanel .lb-columns { width:100%; flex-direction:row; align-items:center; padding:16px 20px; gap:20px; flex-shrink:0; }
LeaderboardPanel .lb-header { border-bottom:1px solid #3a5260; }
LeaderboardPanel .lb-header label { font-size:14px; color:#a5bdcc; font-weight:500; letter-spacing:1px; }
LeaderboardPanel .lb-rank { width:58px; flex-shrink:0; }
LeaderboardPanel .lb-team { flex-grow:1; flex-basis:0; min-width:160px; }
LeaderboardPanel .lb-score { width:190px; flex-shrink:0; text-align:right; }
LeaderboardPanel .lb-stat { width:115px; flex-shrink:0; text-align:right; font-size:20px; font-weight:500; color:#d7e5ee; letter-spacing:0px; }
LeaderboardPanel .lb-time { width:115px; flex-shrink:0; text-align:right; font-size:20px; font-weight:500; color:#d7e5ee; letter-spacing:0px; }
LeaderboardPanel .lb-list { flex-direction:column; flex-grow:1; min-height:0px; overflow:scroll; gap:8px; padding-top:8px; }
LeaderboardPanel .lb-entry { min-height:78px; border:1px solid #263c48; border-radius:4px; background-color:#101d27; }
LeaderboardPanel .lb-entry.own { border-left:3px solid #6ce0e9; background-color:#17303a; }
LeaderboardPanel .lb-names { flex-direction:column; gap:5px; overflow:hidden; }
LeaderboardPanel .lb-names label { white-space:normal; }
LeaderboardPanel .lb-you { font-size:12px; font-weight:600; letter-spacing:1px; color:#70e2dc; }
LeaderboardPanel .lb-empty { font-size:20px; color:#a8c0ce; letter-spacing:0px; padding:35px; }
LeaderboardPanel .lb-best { min-height:86px; flex-shrink:0; border:1px solid #40747e; border-left:3px solid #6ce0e9; background-color:#142b34; margin-top:22px; padding:18px 24px; align-items:center; gap:24px; }
LeaderboardPanel .lb-best-title { flex-direction:column; gap:8px; flex-shrink:0; }
LeaderboardPanel .lb-best-name { flex-grow:1; white-space:normal; }
LeaderboardPanel .lb-note { font-size:14px; color:#8ea9b9; letter-spacing:0px; margin-top:12px; flex-shrink:0; }

GameHud .session-loading { position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1000; background-color:rgba(4,10,16,.94); align-items:center; justify-content:center; pointer-events:all; }
GameHud .session-loading-card { width:520px; padding:36px; flex-direction:column; gap:18px; background-color:#101e28; border:1px solid #466675; border-top:3px solid #6ce0e9; }
GameHud .session-loading-card label { font-size:18px; letter-spacing:0px; color:#b6cbd7; white-space:normal; }
GameHud .session-loading-card .session-loading-title { font-size:26px; font-weight:600; color:#f5f8fa; }
GameHud .server-refresh { height:40px; flex-shrink:0; margin-bottom:12px; align-items:center; justify-content:center; }
GameHud .server-refresh label { color:#edf4f8; font-size:16px; letter-spacing:0px; }

.impact-marker { position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; z-index:20; }
.impact-arm { position:absolute; width:10px; height:3px; background-color:#f3f7fa; box-shadow:0 0 3px #10151d; }
.impact-arm.top-left { left:-17px; top:-12px; transform:rotate(45deg); }
.impact-arm.top-right { left:7px; top:-12px; transform:rotate(-45deg); }
.impact-arm.bottom-left { left:-17px; top:9px; transform:rotate(-45deg); }
.impact-arm.bottom-right { left:7px; top:9px; transform:rotate(45deg); }
.impact-marker.headshot .impact-arm { background-color:#ffbd57; height:4px; width:13px; }
.hurt-overlay { position:absolute; inset:0; pointer-events:none; z-index:15; }
.hurt-edge { position:absolute; pointer-events:none; }
.hurt-top { left:0; right:0; top:0; height:20%; background-image:linear-gradient(180deg,rgba(215,35,42,.8),rgba(215,35,42,0)); }
.hurt-bottom { left:0; right:0; bottom:0; height:20%; background-image:linear-gradient(0deg,rgba(215,35,42,.8),rgba(215,35,42,0)); }
.hurt-left { left:0; top:0; bottom:0; width:16%; background-image:linear-gradient(90deg,rgba(215,35,42,.8),rgba(215,35,42,0)); }
.hurt-right { right:0; top:0; bottom:0; width:16%; background-image:linear-gradient(270deg,rgba(215,35,42,.8),rgba(215,35,42,0)); }

SettingsPanel .feedback-preview-row { width:100%; gap:10px; flex-shrink:0; }
SettingsPanel .feedback-preview { position:relative; height:88px; flex-grow:1; background-color:#344550; border:1px solid #536e7e; border-radius:4px; flex-shrink:0; overflow:hidden; }
SettingsPanel .feedback-preview > label { position:absolute; top:6px; left:8px; font-size:11px; color:#dce8f0; z-index:21; }
SettingsPanel .hurt-preview { width:100%; flex-grow:0; height:90px; }

.news-page .update-card { width:100%; max-width:1040px; padding:30px 34px; flex-direction:column; flex-shrink:0; background-color:rgba(13,27,37,.96); border:1px solid #344c5a; border-top:3px solid #65d9e6; border-radius:5px; }
.news-page .update-date { font-size:13px; font-weight:600; letter-spacing:2px; color:#83d9e5; margin-bottom:12px; }
.news-page .update-title { font-size:32px; font-weight:700; color:#f3f7fa; margin-bottom:12px; }
.news-page .update-intro { font-size:18px; color:#b7cad6; margin-bottom:8px; }
.news-page .update-section { width:100%; flex-direction:column; flex-shrink:0; gap:9px; padding-top:22px; margin-top:16px; border-top:1px solid #2b414e; }
.news-page .update-heading { font-size:16px; font-weight:700; letter-spacing:1px; color:#f3f7fa; }
.news-page .update-text { font-size:18px; color:#c4d3de; }
.news-page .update-highlight { font-size:18px; font-weight:600; color:#f2c777; margin-top:5px; }

.news-page .news-title { width:100%; margin-bottom:26px; flex-shrink:0; }
.news-page .update-card { min-width:0; }
.news-page .update-section { min-width:0; }
.news-page .update-card .label { width:100%; white-space:normal; flex-shrink:0; }
.browser-tabs .browser-tab.selected-tab, .browser-tabs .browser-tab.selected-tab:hover { background-color:#1c3544; border-bottom:3px solid #6fe5ef; }