/*
 * Game interface skin: lobby, invite card, room lobby and settings.
 *
 * Loaded after style.css and multiplayer.css. The screens here are laid out like a mobile
 * shooter's lobby instead of a web page: the arena fills the screen, the player card sits top
 * left, one large START button leads, and tools are icon buttons in the top right corner.
 *
 * Every size is a multiple of --s, so one layout serves a phone held sideways (--s:1) and a
 * desktop window (larger --s). Text never goes below 11px.
 */
:root{--ui-font:"Avenir Next Condensed","Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;--action:#ffc531;--action-ink:#1b1503;--plate:#0a1418e0;--plate-soft:#0a1418b8;--line:#ffffff26}

/* ---------- Lobby frame ---------- */
.lobby{--s:1;position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top top" "left main" "bottom bottom";gap:calc(8px*var(--s)) calc(14px*var(--s));padding:calc(10px*var(--s)) max(calc(14px*var(--s)),env(safe-area-inset-right)) 0 max(calc(14px*var(--s)),env(safe-area-inset-left));background:linear-gradient(90deg,#061217e6 0%,#0a191f99 30%,transparent 58%),linear-gradient(180deg,#061217b3 0,transparent 24%);font-family:var(--ui-font);color:var(--paper);overflow:hidden;-webkit-user-select:none;user-select:none}
@media(min-height:541px){.lobby{--s:1.3}}
@media(min-height:800px) and (min-width:1200px){.lobby{--s:1.6}}
.lobby svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.lobby button,.lobby a{font-family:var(--ui-font);text-decoration:none}.lobby small,.lobby p,.lobby h2,.lobby h3{font-family:var(--ui-font)}.player-card,.icon-button,.friends-button{color:var(--paper)}

.lobby-top{grid-area:top;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:calc(12px*var(--s))}
.lobby-brand{margin:calc(4px*var(--s)) 0 0;font:italic 800 calc(22px*var(--s))/1 var(--ui-font);letter-spacing:calc(3px*var(--s));white-space:nowrap;text-shadow:0 2px 10px #000a}
.lobby-brand em{font-style:inherit;color:var(--orange)}
.lobby-brand br,.lobby-brand sup{display:none}

/* Player card, top left */
.player-card{justify-self:start;display:flex;align-items:center;gap:calc(9px*var(--s));min-width:calc(176px*var(--s));padding:calc(5px*var(--s)) calc(12px*var(--s)) calc(5px*var(--s)) calc(5px*var(--s));background:var(--plate);border:1px solid var(--line);border-left:calc(3px*var(--s)) solid var(--cyan);text-align:left;cursor:pointer}
.player-card:hover{border-color:#ffffff55;border-left-color:var(--cyan)}
.avatar{display:grid;place-items:center;flex:none;width:calc(36px*var(--s));height:calc(36px*var(--s));background:linear-gradient(160deg,#1f4a52,#10272e);color:var(--cyan);font-size:calc(22px*var(--s))}
.card-text{display:grid;gap:calc(3px*var(--s));min-width:0;flex:1}
.card-text b{font-size:calc(14px*var(--s));letter-spacing:calc(1.2px*var(--s));line-height:1}
.card-text small{font-size:max(11px,calc(11px*var(--s)));color:var(--muted);letter-spacing:.4px;line-height:1}
.card-xp{display:block;height:calc(4px*var(--s));background:#ffffff1f}
.card-xp i{display:block;height:100%;width:0;background:var(--action)}

/* Icon buttons, top right */
.lobby-icons{justify-self:end;display:flex;gap:calc(6px*var(--s))}
.icon-button{display:grid;justify-items:center;align-content:center;gap:calc(3px*var(--s));min-width:calc(54px*var(--s));height:calc(46px*var(--s));padding:0 calc(6px*var(--s));background:var(--plate);border:1px solid var(--line);cursor:pointer;white-space:nowrap}
.icon-button svg{font-size:calc(19px*var(--s))}
.icon-button span{font-size:max(11px,calc(10px*var(--s)));letter-spacing:.5px;line-height:1;color:#d5e3e2}
.icon-button:hover{border-color:var(--action);color:var(--action)}
.lobby .account-nav{margin:0;padding:0 calc(6px*var(--s));font:inherit;letter-spacing:0;color:inherit}

/* Left column: START, mode, friends */
.lobby-left{grid-area:left;align-self:start;display:grid;gap:calc(7px*var(--s));width:calc(232px*var(--s))}
.start-button{display:grid;align-content:center;gap:calc(2px*var(--s));width:100%;min-height:calc(58px*var(--s));padding:calc(6px*var(--s)) calc(16px*var(--s));background:linear-gradient(180deg,#ffd45c,var(--action));color:var(--action-ink);border:0;text-align:left;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - calc(16px*var(--s))) 100%,0 100%);font-family:var(--ui-font)}
.start-button b{font:italic 800 calc(27px*var(--s))/1 var(--ui-font);letter-spacing:calc(2px*var(--s))}
.start-button small{font-size:max(11px,calc(11px*var(--s)));font-weight:700;letter-spacing:.6px;line-height:1.1;opacity:.82}
.start-button:hover{filter:brightness(1.08)}
.start-button:active{transform:translateY(1px)}
.start-button:disabled{background:#56646a;color:#c6d0d1;cursor:default;filter:none}

.mode-card{display:grid;gap:calc(5px*var(--s));padding:calc(8px*var(--s)) calc(10px*var(--s));background:var(--plate);border:1px solid var(--line)}
.mode-head{display:grid;gap:calc(2px*var(--s));padding-bottom:calc(5px*var(--s));border-bottom:1px solid var(--line)}
.mode-head .tag{font-size:max(11px,calc(10px*var(--s)));letter-spacing:1.4px;color:var(--cyan)}
.mode-head b{font-size:calc(17px*var(--s));letter-spacing:calc(1px*var(--s));line-height:1.05}
.mode-head small{font-size:max(11px,calc(11px*var(--s)));color:var(--muted);line-height:1.2}
.lobby label{display:flex;align-items:center;justify-content:space-between;gap:calc(8px*var(--s));margin:0;font-size:max(11px,calc(11px*var(--s)));font-weight:700;letter-spacing:1px;color:#c9d8d8;white-space:nowrap}
.lobby select,.lobby .touch-select-button{min-width:calc(112px*var(--s));max-width:calc(140px*var(--s));padding:calc(5px*var(--s)) calc(8px*var(--s));background:#16282e;border:1px solid #ffffff3d;color:var(--paper);font:700 calc(12px*var(--s))/1.2 var(--ui-font);letter-spacing:.4px;text-align:left}
.lobby .touch-select-button{min-height:calc(26px*var(--s))}
.mode-card p{margin:0;font-size:max(11px,calc(11px*var(--s)));line-height:1.3;color:var(--muted);white-space:normal}

.friends-button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:calc(9px*var(--s));row-gap:calc(1px*var(--s));min-height:calc(44px*var(--s));padding:calc(6px*var(--s)) calc(12px*var(--s));background:var(--plate);border:1px solid #84efdb77;cursor:pointer}
.friends-button svg{grid-row:1/3;font-size:calc(24px*var(--s));color:var(--cyan)}
.friends-button b{font-size:calc(14px*var(--s));letter-spacing:calc(1px*var(--s));line-height:1.1;white-space:nowrap}
.friends-button span{font-size:max(11px,calc(10px*var(--s)));letter-spacing:.6px;color:var(--muted);line-height:1.1}
.friends-button span.online{color:var(--cyan)}
.friends-button:hover{border-color:var(--cyan);background:#0f2329}

/* Bottom bar */
.lobby-bottom{grid-area:bottom;display:flex;align-items:center;gap:calc(14px*var(--s));min-height:calc(42px*var(--s));margin:0 calc(-14px*var(--s));padding:calc(5px*var(--s)) max(calc(14px*var(--s)),env(safe-area-inset-right)) max(calc(5px*var(--s)),env(safe-area-inset-bottom)) max(calc(14px*var(--s)),env(safe-area-inset-left));background:linear-gradient(0deg,#050e12f2,#050e12c2);border-top:1px solid var(--line)}
.bar-title{font-size:calc(13px*var(--s));font-weight:800;letter-spacing:calc(1.6px*var(--s));color:var(--action)}
.bar-stat{margin-left:auto;font-size:max(11px,calc(11px*var(--s)));letter-spacing:1px;color:var(--muted);white-space:nowrap}
.bar-stat b{font-size:calc(15px*var(--s));color:var(--paper);margin-left:calc(4px*var(--s))}
.lobby .build{font:max(11px,calc(10px*var(--s))) var(--ui-font);letter-spacing:1px;color:#8fa3a5;white-space:nowrap}
.bar-note{font-size:max(11px,calc(11px*var(--s)));color:var(--muted);margin-left:auto;text-align:right;line-height:1.25}

/* Phone held sideways: the lobby is compact so nothing overlaps */
@media(max-height:540px){
 .lobby-brand{font-size:17px;letter-spacing:2px;margin-top:6px}
 .icon-button{min-width:46px;height:40px;padding:0 5px}.icon-button svg{font-size:17px}
 .player-card{min-width:150px}.avatar{width:30px;height:30px;font-size:19px}
 .lobby-left{width:216px;gap:6px}.start-button{min-height:50px}.start-button b{font-size:24px}
 .mode-card{gap:4px;padding:6px 9px}.mode-head small{display:none}.mode-head b{font-size:15px}
 .friends-button{min-height:40px;padding:4px 10px}
 .lobby-bottom{gap:9px;min-height:38px}.lobby-bottom select,.lobby-bottom .touch-select-button{min-width:92px;max-width:112px}.lobby label{gap:6px}
}
@media(max-height:350px){.mode-card p,.mode-head .tag{display:none}.start-button{min-height:44px}}

/* ---------- Shared buttons ---------- */
.primary{background:var(--action);color:var(--action-ink);border-color:var(--action)}
.primary:hover{background:#ffd45c}
.primary>span{display:none}
.lobby .primary,.lobby .secondary{display:block;width:100%;margin:0;min-height:calc(34px*var(--s));padding:calc(6px*var(--s)) calc(12px*var(--s));font:800 calc(13px*var(--s))/1.1 var(--ui-font);letter-spacing:calc(1.2px*var(--s));text-align:center;border:1px solid var(--action);cursor:pointer}
.lobby .secondary{background:#16282e;color:var(--paper);border-color:#ffffff4d}
.lobby .secondary:hover{border-color:var(--paper)}
.lobby .primary:disabled,.lobby .secondary:disabled{background:#3b484d;border-color:#3b484d;color:#aab6b8;cursor:default}
.lobby .text-button{background:none;border:0;padding:calc(6px*var(--s)) 0;color:#c9d8d8;font:700 max(11px,calc(11px*var(--s))) var(--ui-font);letter-spacing:1px;cursor:pointer;width:auto}

/* ---------- Online lobby ---------- */
.room-lobby{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "bottom"}
.lobby-main{grid-area:main;min-height:0;display:grid;align-content:start;gap:calc(8px*var(--s))}
.lobby-title{text-align:center;min-width:0}
.lobby-title h2{margin:calc(3px*var(--s)) 0 calc(2px*var(--s));font:italic 800 calc(22px*var(--s))/1 var(--ui-font);letter-spacing:calc(2.5px*var(--s));white-space:nowrap;text-shadow:0 2px 10px #000a}
#connection{margin:0;font-size:max(11px,calc(11px*var(--s)));color:var(--cyan);letter-spacing:.4px;text-shadow:0 1px 6px #000}
#nameSlot{justify-self:start;min-width:0}
.name-card{cursor:text}
.lobby .name-card input{width:calc(140px*var(--s));padding:calc(2px*var(--s)) 0;background:none;border:0;border-bottom:1px solid #ffffff55;color:var(--paper);font:800 calc(15px*var(--s))/1.2 var(--ui-font);letter-spacing:.6px;-webkit-user-select:text;user-select:text}
.lobby .name-card input::placeholder{color:#93a6a8;font-weight:700}
.lobby .name-card input:focus{outline:none;border-bottom-color:var(--action)}
#roomIntro{margin:0;font-size:max(11px,calc(12px*var(--s)));color:#d5e3e2;text-shadow:0 1px 6px #000}
#roomError{margin:0;padding:calc(5px*var(--s)) calc(10px*var(--s));justify-self:start;background:#3a1512e6;border-left:3px solid #ff7a59;font-size:max(11px,calc(12px*var(--s)));color:#ffd9cf}
#roomError:empty{display:none}

.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(10px*var(--s));max-width:calc(880px*var(--s))}
.tile{display:grid;grid-template-rows:auto auto 1fr auto auto;gap:calc(5px*var(--s));padding:calc(10px*var(--s)) calc(12px*var(--s));background:var(--plate);border:1px solid var(--line);border-top:calc(3px*var(--s)) solid var(--action)}
.tile-icon{font-size:calc(24px*var(--s));color:var(--action)}
.tile h3{margin:0;font:800 calc(15px*var(--s))/1.1 var(--ui-font);letter-spacing:calc(1.2px*var(--s))}
.tile p{margin:0;font-size:max(11px,calc(11.5px*var(--s)));line-height:1.3;color:var(--muted);white-space:normal}
.tile label{margin:0}
.lobby .tile input{width:100%;padding:calc(6px*var(--s)) calc(8px*var(--s));background:#16282e;border:1px solid #ffffff3d;color:var(--paper);font:800 calc(14px*var(--s)) var(--ui-font);letter-spacing:2px;text-transform:uppercase;-webkit-user-select:text;user-select:text}
.lobby .tile input::placeholder{color:#8fa3a5;letter-spacing:1px}
.lobby .tile select,.lobby .tile .touch-select-button{min-width:calc(104px*var(--s))}

/* Invite card: the only thing an invited friend sees */
.invite-card{justify-self:center;align-self:center;display:grid;gap:calc(7px*var(--s));width:min(calc(380px*var(--s)),100%);padding:calc(12px*var(--s)) calc(16px*var(--s));background:var(--plate);border:1px solid var(--line);border-top:calc(3px*var(--s)) solid var(--action)}
.invite-card .tag{font-size:max(11px,calc(11px*var(--s)));letter-spacing:2px;color:var(--cyan)}
.invite-card h3{margin:0;font:italic 800 calc(20px*var(--s))/1.05 var(--ui-font);letter-spacing:calc(1px*var(--s))}
.invite-card p{margin:0;font-size:max(11px,calc(12px*var(--s)));line-height:1.35;color:#c9d8d8}
.invite-card .name-card{width:100%;border-left-width:1px;border-left-color:var(--line)}
.invite-card .name-card input{width:100%}
.invite-card .text-button{justify-self:center}

/* Room lobby: START on the left, squad slots in the middle */
#roomLobby{display:grid;grid-template-columns:calc(216px*var(--s)) minmax(0,1fr);gap:calc(14px*var(--s));align-items:start;min-height:0}
#roomLobby .lobby-left{width:auto;grid-area:auto}
#beginMatch{font:italic 800 calc(21px*var(--s))/1 var(--ui-font);letter-spacing:calc(1.5px*var(--s))}
#hostHint,#careerReward,#matchResult{margin:0;padding:calc(6px*var(--s)) calc(10px*var(--s));background:var(--plate-soft);font-size:max(11px,calc(12px*var(--s)));line-height:1.3;color:#d5e3e2;white-space:normal}
#matchResult{border-left:3px solid var(--action);font-weight:800;font-size:calc(14px*var(--s));color:var(--paper)}
#careerReward:empty,#hostHint:empty{display:none}
.squad{display:grid;gap:calc(8px*var(--s));min-width:0}
#roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(8px*var(--s));margin:0}
.lobby .roster-row,.roster-empty{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;border-bottom:1px solid var(--line);font-family:var(--ui-font);align-content:center;gap:calc(4px*var(--s));min-height:calc(104px*var(--s));padding:calc(8px*var(--s)) calc(6px*var(--s));background:var(--plate);border:1px solid var(--line);font-size:max(11px,calc(12px*var(--s)));text-align:center;min-width:0}
.lobby .roster-row.me{border-color:var(--action)}
.slot-face{display:grid;place-items:center;width:calc(38px*var(--s));height:calc(38px*var(--s));background:linear-gradient(160deg,#1f4a52,#10272e);color:var(--cyan);font:800 calc(19px*var(--s)) var(--ui-font);font-style:normal}
.roster-row.me .slot-face{color:var(--action)}
.lobby .roster-row span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;letter-spacing:.4px}
.lobby .roster-row span:last-of-type{font-weight:700;color:var(--muted);letter-spacing:1px}.lobby .roster-row span:first-of-type{font-weight:800;color:var(--paper);letter-spacing:.4px;font-size:calc(14px*var(--s))}.slot-tags{font:800 max(11px,calc(10px*var(--s))) var(--ui-font);letter-spacing:1.4px;color:var(--action)}
.lobby .roster-row .report-button{padding:0;font-size:11px;color:#93a6a8}
.roster-empty{border-style:dashed;border-color:#ffffff44;background:#0a141899;color:#c9d8d8;font:800 calc(13px*var(--s)) var(--ui-font);letter-spacing:1.4px;cursor:pointer}
button.roster-empty:hover{border-color:var(--action);color:var(--action)}
div.roster-empty{cursor:default;color:#93a6a8;font-size:max(11px,calc(11px*var(--s)))}
.invite-bar{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);align-items:center;gap:calc(6px*var(--s)) calc(10px*var(--s));padding:calc(7px*var(--s)) calc(10px*var(--s));background:var(--plate);border:1px solid var(--line)}
.code-block{display:grid;gap:calc(2px*var(--s))}
.code-block small{font-size:max(11px,calc(10px*var(--s)));letter-spacing:1.4px;color:var(--cyan)}
.code-block b{font:800 calc(18px*var(--s))/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:calc(2px*var(--s));-webkit-user-select:all;user-select:all}
.lobby .invite-bar .primary,.lobby .invite-bar .secondary{width:auto;white-space:nowrap}
.invite-bar p{margin:0;font-size:max(11px,calc(11px*var(--s)));line-height:1.3;color:var(--muted);white-space:normal}
@media(max-height:540px){
 .lobby-title h2{font-size:17px;letter-spacing:2px;margin-top:5px}
 .tile{padding:8px 10px;gap:4px}.tile-icon{font-size:20px}
 #roomLobby{grid-template-columns:200px minmax(0,1fr);gap:10px}
 .lobby .roster-row,.roster-empty{min-height:92px}
 .invite-bar{grid-template-columns:auto auto auto}.invite-bar p{grid-column:1/-1}
 .lobby .name-card input{width:128px}
}

/* ---------- Settings: full screen, sections listed on the right ---------- */
#settings.overlay{padding:0;background:#050e12f5;backdrop-filter:none}
#settings .settings-panel{--s:1;position:fixed;inset:0;width:auto;max-width:none;max-height:none;margin:0;padding:calc(10px*var(--s)) max(calc(16px*var(--s)),env(safe-area-inset-right)) max(calc(10px*var(--s)),env(safe-area-inset-bottom)) max(calc(16px*var(--s)),env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr) calc(168px*var(--s));grid-template-rows:auto minmax(0,1fr);align-items:start;align-content:start;gap:calc(8px*var(--s)) calc(16px*var(--s));background:none;border:0;box-shadow:none;overflow:hidden;font-family:var(--ui-font)}
@media(min-height:541px){#settings .settings-panel{--s:1.3}}
@media(min-height:800px) and (min-width:1200px){#settings .settings-panel{--s:1.6}}
.settings-head{grid-column:1/-1;display:flex;align-items:center;gap:calc(14px*var(--s));padding-bottom:calc(8px*var(--s));border-bottom:1px solid var(--line)}
#settings .settings-head h2{margin:0;font:italic 800 calc(22px*var(--s))/1 var(--ui-font);letter-spacing:calc(2.5px*var(--s))}
.settings-back{display:flex;align-items:center;gap:calc(6px*var(--s));min-height:calc(36px*var(--s));padding:0 calc(14px*var(--s)) 0 calc(10px*var(--s));background:var(--action);color:var(--action-ink);border:0;font:800 calc(13px*var(--s)) var(--ui-font);letter-spacing:1.2px;cursor:pointer}
.settings-back svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.settings-pages{min-height:0;overflow-y:auto;padding-right:calc(4px*var(--s))}
#settings .setting{display:flex;align-items:center;justify-content:space-between;gap:calc(16px*var(--s));min-height:calc(46px*var(--s));margin:0;padding:calc(6px*var(--s)) calc(12px*var(--s));background:#ffffff0a;border-bottom:1px solid #050e12;font:700 calc(14px*var(--s)) var(--ui-font);letter-spacing:.5px;color:var(--paper)}
.setting-control{display:flex;align-items:center;gap:calc(10px*var(--s))}
#settings .setting input[type=range]{width:calc(190px*var(--s));accent-color:var(--action)}
.range-value{min-width:calc(46px*var(--s));text-align:right;font:800 calc(14px*var(--s)) var(--ui-font);color:var(--action)}
.segmented{display:inline-flex}
.segmented button,.value-button{min-width:calc(72px*var(--s));min-height:calc(32px*var(--s));padding:0 calc(12px*var(--s));background:#16282e;border:1px solid #ffffff3d;color:#c9d8d8;font:800 calc(12px*var(--s)) var(--ui-font);letter-spacing:1.2px;cursor:pointer}
.segmented button+button{border-left:0}
.segmented button[aria-checked=true]{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.value-button{border-color:var(--action);color:var(--paper);min-width:calc(150px*var(--s))}
.value-button[aria-pressed=true]{background:var(--action);color:var(--action-ink)}
.segmented-source{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
#settings .setting-note{margin:0;padding:calc(8px*var(--s)) calc(12px*var(--s));font:max(11px,calc(12px*var(--s)))/1.4 var(--ui-font);color:var(--muted)}
#settings #gyroStatus{color:var(--cyan)}
.settings-tabs{display:grid;align-content:start;gap:calc(4px*var(--s));min-height:0;overflow-y:auto}
.settings-tabs button{min-height:calc(38px*var(--s));padding:0 calc(12px*var(--s));background:#ffffff0d;border:0;border-right:calc(3px*var(--s)) solid transparent;color:#c9d8d8;font:800 calc(13px*var(--s)) var(--ui-font);letter-spacing:1.4px;text-align:left;cursor:pointer}
.settings-tabs button[aria-selected=true]{background:#ffc53126;border-right-color:var(--action);color:var(--action)}
.touch-row{display:none!important}
@media(pointer:coarse){#settings .setting.touch-row{display:flex!important}#settings p.touch-row{display:block!important}}
@media(max-height:540px){#settings .setting{min-height:42px}.settings-tabs button{min-height:36px}}

/* Invited friends see one card; the loadout bar waits until they are in the room */
.room-lobby.invited .lobby-bottom{display:none}
.room-lobby.invited{grid-template-rows:auto minmax(0,1fr)}

/* ---------- Panels (pause, results, how to play, progress, match menu) ---------- */
.overlay .panel{font-family:var(--ui-font);border-top-color:var(--action)}
.overlay .panel h2{font-family:var(--ui-font);font-style:italic;font-weight:800;letter-spacing:1.5px}
.overlay .panel .eyebrow{color:var(--action)}

/* ---------- Match screen on touch: round see-through buttons ---------- */
#touch,#roomTouch{--k:1.25}
@media(max-height:540px){#touch,#roomTouch{--k:1}}
.touch-actions{position:static;display:block;pointer-events:none}
#touch button,#roomTouch button{position:absolute;display:grid;place-items:center;width:calc(46px*var(--k));height:calc(46px*var(--k));min-height:0;padding:0;border-radius:50%;border:1.5px solid #ffffffb0;background:#0a14187a;color:#fff;font:800 calc(13px*var(--k)) var(--ui-font);pointer-events:auto;touch-action:none;opacity:var(--touch-opacity,1);transform-origin:center}
#touch button svg,#roomTouch button svg{width:56%;height:56%;margin:0;pointer-events:none}
#touch button.active,#touch button[aria-pressed=true],#roomTouch button[aria-pressed=true]{background:#ffc531e0;border-color:#ffc531;color:#1b1503}
#touch.dead button,#touch.dead #stick,#roomTouch.dead button,#roomTouch.dead #roomStick{opacity:.18}
#touch [data-action=fire],#roomTouch [data-action=fire]{right:calc(16px*var(--k));bottom:calc(70px*var(--k));width:calc(68px*var(--k));height:calc(68px*var(--k));border-width:2px;border-color:#fff;background:#ffffff26}
#touch [data-action=aim],#roomTouch [data-hold=aim]{right:calc(26px*var(--k));bottom:calc(148px*var(--k))}
#touch [data-action=scope],#roomTouch [data-action=scope]{right:calc(26px*var(--k));bottom:calc(202px*var(--k))}
#touch [data-action=jump],#roomTouch [data-action=jump]{right:calc(94px*var(--k));bottom:calc(64px*var(--k))}
#touch [data-action=dash],#roomTouch [data-action=blink]{right:calc(94px*var(--k));bottom:calc(120px*var(--k))}
#touch [data-action=reload],#roomTouch [data-action=reload]{right:calc(150px*var(--k));bottom:calc(64px*var(--k))}
#touch [data-action=grenade],#roomTouch [data-action=grenade]{right:calc(150px*var(--k));bottom:calc(120px*var(--k))}
#touch [data-action=sprint],#roomTouch [data-toggle=sprint]{left:calc(126px*var(--k));bottom:calc(120px*var(--k))}
#touch [data-action=slide],#roomTouch [data-action=slide]{left:calc(126px*var(--k));bottom:calc(64px*var(--k))}
#touch [data-action=leanLeft],#roomTouch [data-hold=leanLeft]{left:calc(16px*var(--k));bottom:calc(176px*var(--k))}
#touch [data-action=leanRight],#roomTouch [data-hold=leanRight]{left:calc(70px*var(--k));bottom:calc(176px*var(--k))}
#stick,#roomStick{left:max(calc(16px*var(--k)),env(safe-area-inset-left));bottom:calc(66px*var(--k));width:calc(98px*var(--k));height:calc(98px*var(--k));border:1.5px solid #ffffff8c;border-radius:50%;background:#0a141866}
#stick i{left:calc(31px*var(--k));top:calc(31px*var(--k));width:calc(36px*var(--k));height:calc(36px*var(--k));background:#ffffff99}
#roomThumb{width:calc(36px*var(--k));height:calc(36px*var(--k));background:#ffffff99;border:0}
#touchMenu,.pause-button{border-radius:50%;border:1.5px solid #ffffffb0;background:#0a14187a;color:#fff}

/* Weapon slots, bottom centre */
.weapon-slots{position:fixed;left:50%;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 20px);transform:translateX(-50%);z-index:4;display:none;gap:4px;touch-action:none;-webkit-user-select:none;user-select:none}
@media(pointer:coarse){.weapon-slots{display:flex}}
#touch[hidden]+.weapon-slots,#roomTouch[hidden]+.weapon-slots{display:none}
.weapon-slots button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;width:min(116px,19vw);height:34px;padding:0 8px;background:#0a141880;border:1px solid #ffffff4d;border-radius:3px;color:#cfdad9;font:800 12px var(--ui-font);letter-spacing:.6px;text-align:left;touch-action:none}
.weapon-slots button b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weapon-slots button span{font:800 13px var(--ui-font);color:#cfdad9;white-space:nowrap}
.weapon-slots button.active{background:#0a1418d1;border-color:#fff;color:#fff}
.weapon-slots button.active span{color:var(--action)}

/* Health bar under the weapon slots; the ammo plate is replaced by the slots */
@media(pointer:coarse){
 #hud .hud-bottom,.touch-room #multiHud .hud-bottom{left:50%;right:auto;bottom:max(6px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(220px,37vw);display:block}
 #hud .hud-bottom .ammo,#multiHud .hud-bottom .ammo{display:none}
 #hud .vitals,#multiHud .vitals{display:flex;align-items:center;gap:6px;padding:0;background:none;border:0}
 #hud .vitals small,#hud .vitals span,#multiHud .vitals small{display:none}
 #hud .vitals strong,#multiHud .vitals strong,.touch-room .vitals strong{min-width:24px;font:800 13px var(--ui-font);letter-spacing:0;text-align:right}
 #hud .health-track,#multiHud .health-track{flex:1;width:auto;height:8px;margin:0;background:#00000080;border:1px solid #ffffff73}
 #abilityinfo{bottom:66px;font:700 11px var(--ui-font);letter-spacing:1px}
 .touch-room #multiHud .hud-status{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:max-content;max-width:none}
 #multiHud .hud-bottom>div.hud-status{max-width:none}
}

/* The older room-menu rules are id based; the lobby frame has to win over them */
#roomMenu.lobby{overflow:hidden;align-items:stretch;padding:calc(10px*var(--s)) max(calc(14px*var(--s)),env(safe-area-inset-right)) 0 max(calc(14px*var(--s)),env(safe-area-inset-left))}
/* On a phone the title sits in the space between the player card and the icon buttons */
@media(max-height:540px){.lobby-top{grid-template-columns:auto minmax(0,1fr) auto}.lobby-brand,.lobby-title{justify-self:center}}
@media(max-width:600px){.lobby-brand{font-size:15px;letter-spacing:1.5px}.lobby-title h2{font-size:15px;letter-spacing:1.5px}}

/* Smallest phones (about 568x320): keep every lobby screen inside the window */
@media(max-height:350px){
 .tile p,.tile-icon{display:none}
 .tile{grid-template-rows:auto;align-content:start;gap:6px}
 .invite-card{gap:5px;padding:8px 14px}.invite-card .tag{display:none}.invite-card h3{font-size:17px}
 .lobby .roster-row,.roster-empty{min-height:78px}
}
@media(max-width:620px){.bar-note,.lobby .build{display:none}}
.slot-tags,.roster-empty{white-space:nowrap}
@media(max-height:350px){
 #roomLobby{grid-template-columns:176px minmax(0,1fr);gap:8px}
 #beginMatch{font-size:18px}
 .slot-face{width:28px;height:28px;font-size:15px}
 .roster-empty{font-size:11px;letter-spacing:.8px}
 .invite-bar p{display:none}
}
@media(max-width:620px){.invite-bar{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}.lobby .invite-bar .primary,.lobby .invite-bar .secondary{padding-left:6px;padding-right:6px;font-size:11px;letter-spacing:.6px}}
@media(max-width:620px){.invite-bar{grid-template-columns:auto minmax(0,1.6fr) minmax(0,1fr)}.slot-tags{letter-spacing:.3px}}

/* Crouch and prone sit under the right-hand cluster, like the genre's crouch and prone buttons */
#touch [data-action=crouch],#roomTouch [data-action=crouch]{right:calc(94px*var(--k));bottom:calc(10px*var(--k))}
#touch [data-action=prone],#roomTouch [data-action=prone]{right:calc(16px*var(--k));bottom:calc(10px*var(--k))}
.weapon-slots button{width:min(116px,16vw)}

/* Left fire button: above the stick's side, for four-finger play */
#touch [data-action=fireLeft],#roomTouch [data-action=fireLeft]{left:calc(136px*var(--k));bottom:calc(176px*var(--k));border-width:2px;border-color:#fff;background:#ffffff26}

/* Fire mode, left of the weapon boxes */
.fire-mode{position:fixed;left:50%;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 20px);transform:translateX(calc(-50% - min(116px,16vw) - 3px - 32px));z-index:4;display:none;width:60px;height:34px;padding:0;background:#0a141880;border:1px solid #ffffff4d;border-radius:3px;color:#cfdad9;font:800 11px var(--ui-font);letter-spacing:1px;touch-action:none}
@media(pointer:coarse){.fire-mode{display:block}}
#touch[hidden]~.fire-mode,#roomTouch[hidden]~.fire-mode{display:none}

/* Compass under the clock */
.compass{position:relative;width:200px;height:16px;margin:4px auto 0;overflow:hidden;font-family:var(--ui-font)}
.compass::before{content:"";position:absolute;left:50%;top:0;width:8px;height:5px;background:var(--action);transform:translateX(-50%);clip-path:polygon(50% 100%,0 0,100% 0);z-index:1}
.compass-strip{position:absolute;left:0;top:0;height:100%;width:1px;will-change:transform}
.compass-point,.compass-tick{position:absolute;top:3px;transform:translateX(-50%);color:#dfe8e6;font:800 11px var(--ui-font);letter-spacing:.5px;line-height:14px}
.compass-tick{top:8px;width:1px;height:6px;background:#dfe8e680}
.compass-marks i{position:absolute;top:10px;width:8px;height:6px;margin-left:-4px;background:#ff5a4a;clip-path:polygon(50% 0,100% 100%,0 100%)}
@media(pointer:coarse){.compass{width:140px;height:14px;margin-top:2px}.compass-point{font-size:11px;line-height:14px}}

/* Panels: the remaining screens in the game style */
.overlay .panel .secondary{background:#16282e;border:1px solid #ffffff4d;color:var(--paper);font-family:var(--ui-font);font-weight:800;letter-spacing:1.2px}
.overlay .panel .primary{font-family:var(--ui-font);font-weight:800;letter-spacing:1.2px;justify-content:center;text-align:center}
.overlay .panel .text-button{font-family:var(--ui-font);font-weight:700;letter-spacing:1px;text-decoration:none;color:#c9d8d8}
.overlay .panel .text-button:hover{color:var(--action)}
#results .panel h2,#pause .panel h2{font-size:30px}
#resultTitle:not(:empty){color:var(--action)}
@media(max-width:620px){.compass{width:104px}}

@media(pointer:coarse){#fps{display:none}}

/* ---------- Minimap (top right under the score), quick chat ---------- */
.minimap{position:fixed;right:36px;top:118px;width:150px;height:150px;border:1.5px solid #ffffff8c;border-radius:4px;background:#0a1418;z-index:5;pointer-events:auto;touch-action:none;display:none}
#hud:not([hidden]) .minimap,body:has(#multiHud:not([hidden])) .minimap{display:block}
body:has(#multiHud) .minimap{top:150px}
#feed{right:200px}
@media(pointer:coarse){
 .minimap{right:12px;top:60px;width:88px;height:88px}
 body:has(#multiHud) .minimap{top:102px}
 #feed{top:56px;left:50%;right:auto;transform:translateX(-50%);text-align:center;width:max-content;max-width:40vw}
 #touch [data-action=scope],#roomTouch [data-action=scope]{right:calc(100px*var(--k));bottom:calc(176px*var(--k))}
}
@media(max-height:350px){.minimap{width:72px;height:72px}body:has(#multiHud) .minimap{top:96px}}
.chat-button{position:fixed;left:12px;top:58px;width:40px;height:40px;display:none;place-items:center;padding:0;border-radius:50%;border:1.5px solid #ffffffb0;background:#0a14187a;color:#fff;z-index:5;pointer-events:auto;touch-action:none}
.chat-button svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(pointer:coarse){body:has(#multiHud:not([hidden])) .chat-button{display:grid}}
@media(max-height:350px){.chat-button{top:58px;width:34px;height:34px}}
.quick-chat-menu{position:fixed;z-index:45;display:grid;gap:3px;padding:4px;background:#10222af2;border-left:2px solid var(--action);font-family:var(--ui-font)}
.quick-chat-menu button{min-width:130px;min-height:34px;padding:0 10px;background:#183039;border:1px solid #809d9d66;color:var(--paper);font:800 13px var(--ui-font);letter-spacing:.5px;text-align:left}
#chatFeed{position:absolute;left:50%;top:92px;transform:translateX(-50%);width:max-content;max-width:60vw;text-align:center;font:700 12px var(--ui-font);letter-spacing:.4px;color:#dfe8e6;text-shadow:0 1px 4px #000}
.chat-row{margin:2px 0;padding:2px 8px;background:#0a141899}.chat-row b{color:var(--action);margin-right:4px}
@media(pointer:coarse){#chatFeed{top:60px;font-size:11px}}
.chat-hint{position:absolute;left:36px;top:230px;padding:8px 12px;background:#0a1418d9;border-left:2px solid var(--action);font:700 13px/1.6 var(--ui-font);color:var(--paper);letter-spacing:.4px}
/* Shorter phones: the online map shrinks above the aim button; on the smallest it gives way to the scoreboard */
@media(pointer:coarse) and (max-height:379px){body:has(#multiHud) .minimap{top:90px;width:68px;height:68px}}
@media(pointer:coarse) and (max-height:350px){.minimap{top:57px;width:66px;height:66px}body:has(#multiHud) .minimap{display:none}}

/* ---------- Teams and bots in the lobby and scoreboard ---------- */
.lobby .roster-row.team-0{border-top:3px solid var(--cyan)}.lobby .roster-row.team-1{border-top:3px solid var(--orange)}
.lobby .roster-row.bot .slot-face{color:#9fb1b3;background:linear-gradient(160deg,#2b3a40,#16232a)}
#roster.many{grid-template-columns:repeat(4,minmax(0,1fr))}
.lobby #roster.many .roster-row{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;justify-items:start;align-content:center;column-gap:calc(6px*var(--s));row-gap:0;min-height:calc(46px*var(--s));padding:calc(4px*var(--s)) calc(6px*var(--s));text-align:left}
.lobby #roster.many .roster-empty{min-height:calc(46px*var(--s))}
#roster.many .slot-face{grid-row:1/3;width:calc(26px*var(--s));height:calc(26px*var(--s));font-size:calc(14px*var(--s))}
.lobby #roster.many .roster-row span:first-of-type{font-size:calc(12px*var(--s))}
.lobby #roster.many .roster-row .slot-tags{white-space:normal;line-height:1.1;font-size:max(11px,calc(9px*var(--s)))}
.lobby #roster.many .roster-row span:last-of-type{display:none}
.lobby #roster.many .roster-row .report-button{display:none}
.lobby #roster.many .roster-row.me span:last-of-type{display:none}
@media(max-height:540px){.lobby #roster.many .roster-row,.lobby #roster.many .roster-empty{min-height:40px}.lobby #roster.many~.invite-bar p{display:none}}
#switchTeam{margin-top:6px}
#liveScore .teams-line{font:800 12px var(--ui-font);letter-spacing:1px;color:var(--paper);padding-bottom:2px;margin-bottom:2px;border-bottom:1px solid #ffffff33}
#liveScore .team-0 span{color:var(--cyan)}#liveScore .team-1 span{color:var(--orange)}

.lobby #roster.many .roster-row span:first-of-type{font-size:max(11px,calc(11px*var(--s)))}
.lobby #roster.many .roster-row .slot-tags{letter-spacing:.6px}
/* The kill feed stays clear of the minimap under the scoreboard */
@media(pointer:coarse){.touch-room #killFeed{margin-right:96px}}
@media(pointer:coarse) and (max-height:379px){.touch-room #killFeed{margin-right:76px}}
@media(pointer:coarse) and (max-height:350px){.touch-room #killFeed{margin-right:0}}

/* ---------- Armor and items ---------- */
.armor-track{width:180px;height:4px;margin-top:3px;background:#112930}.armor-track i{display:block;height:100%;width:0;background:#9fb7c0}
.helmet-label{display:block;font:800 10px var(--ui-font);letter-spacing:1px;color:#9fb7c0}.helmet-label:empty{display:none}
@media(pointer:coarse){
 #hud .vitals,#multiHud .vitals{flex-wrap:wrap}
 #hud .armor-track,#multiHud .armor-track{flex:1 0 100%;width:auto;height:4px;margin:2px 0 0 30px;background:#00000080;border:1px solid #ffffff40}
 #hud .vitals .helmet-label,#multiHud .vitals .helmet-label{display:none}
 #touch [data-action=heal],#roomTouch [data-action=heal]{right:calc(150px*var(--k));bottom:calc(176px*var(--k))}
 #touch [data-action=boost],#roomTouch [data-action=boost]{right:calc(206px*var(--k));bottom:calc(120px*var(--k))}
 #touch [data-count]::after,#roomTouch [data-count]::after{content:attr(data-count);position:absolute;right:-2px;top:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--action);color:#1b1503;font:800 11px/16px var(--ui-font);text-align:center}
 #touch [data-count="0"]::after,#roomTouch [data-count="0"]::after{background:#ffffff40;color:#dfe8e6}
}
/* Armor as a thin line above the health bar, without moving the health row */
@media(pointer:coarse){
 #hud .vitals,#multiHud .vitals{flex-wrap:nowrap;position:relative;margin-top:6px}
 #hud .armor-track,#multiHud .armor-track{position:absolute;left:30px;right:0;top:-6px;flex:none;width:auto;height:3px;margin:0;background:#00000080;border:1px solid #ffffff40}
}
@media(pointer:coarse) and (max-height:540px){.howto-panel .tips{line-height:1.34}}

/* ---------- Throwables, stun flash ---------- */
.stun-overlay{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6;transition:opacity .08s linear}
@media(pointer:coarse){#touch [data-action=throwKind],#roomTouch [data-action=throwKind]{right:calc(206px*var(--k));bottom:calc(176px*var(--k));font-size:max(11px,calc(10px*var(--k)));letter-spacing:.3px}}
.scope-menu button:disabled{opacity:.45}

/* ---------- Friends ---------- */
.friends-panel{width:min(720px,96vw)}
.friend-search{display:flex;gap:8px;margin:4px 0 10px}.friend-search input{flex:1;padding:8px 10px;background:#16282e;border:1px solid #ffffff3d;color:var(--paper);font:700 14px var(--ui-font)}.friend-search .secondary{width:auto;margin:0;padding:8px 16px}
.friends-panel h3{margin:12px 0 6px;font:800 12px var(--ui-font);letter-spacing:1.5px;color:var(--action)}.friends-panel h3 small{margin-left:6px;color:var(--muted);font-size:11px}
.friend-list{display:grid;gap:4px}
.friend-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:8px;padding:5px 8px;background:#ffffff0a;font-family:var(--ui-font)}
.friend-row .slot-face{width:28px;height:28px;font-size:14px}.friend-row.online .slot-face{color:var(--action)}
.friend-row span{font-weight:800;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-row small{font-size:11px;letter-spacing:1px;color:var(--muted)}.friend-row.online small{color:var(--cyan)}
.friend-row .primary,.friend-row .secondary{width:auto;margin:0;min-height:30px;padding:4px 10px;font-size:11px;letter-spacing:1px}
.friend-empty{margin:0;font-size:12px;color:var(--muted)}
#friendsStatus{min-height:1.2em;margin:0 0 4px;font-size:12px;color:var(--cyan)}#friendsStatus:empty{display:none}
#friendsSignIn .primary{display:block;text-align:center;text-decoration:none;margin-top:8px}
.invite-toast{position:fixed;left:50%;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 60px);transform:translateX(-50%);z-index:46;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#10222af2;border-left:3px solid var(--action);font-family:var(--ui-font)}
.invite-toast b{font-size:13px;letter-spacing:.4px}.invite-toast .primary{width:auto;margin:0;min-height:32px;padding:4px 14px;font-size:12px}.invite-toast .text-button{padding:4px}
@media(pointer:coarse) and (max-height:540px){.friends-panel{max-height:calc(100vh - 16px);overflow:auto}.friend-row span{font-size:12px}.friends-panel h3{margin:8px 0 4px}}
/* Narrow phones: the corner tools are icons only, so the title keeps its space */
@media(max-width:620px){.icon-button{min-width:42px;padding:0 4px}.icon-button span{display:none}.lobby .account-nav{padding:0 4px}}

/* ---------- Career ---------- */
.career-panel{width:min(760px,96vw)}
.rank-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:10px 14px;background:#ffffff0a;border-left:3px solid var(--action)}
.rank-card b{grid-row:1/3;font:italic 800 26px var(--ui-font);letter-spacing:2px}
.rank-card span{font:800 13px var(--ui-font);letter-spacing:1px}.rank-card .xp-track{margin:4px 0 2px}.rank-card small{font-size:11px;color:var(--muted)}
.career-totals{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:8px}
.career-totals div{display:grid;justify-items:center;padding:6px 2px;background:#ffffff0a}.career-totals b{font:800 18px var(--ui-font)}.career-totals small{font-size:11px;letter-spacing:1px;color:var(--muted)}
.career-panel h3{margin:12px 0 6px;font:800 12px var(--ui-font);letter-spacing:1.5px;color:var(--action)}.career-panel h3 small{margin-left:6px;color:var(--muted);font-size:11px;letter-spacing:.5px}
.mission-list,.history-list{display:grid;gap:4px}
.mission-row,.history-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;background:#ffffff0a;font-family:var(--ui-font);font-size:13px;font-weight:700}
.mission-row b,.history-row b{font-weight:800;color:var(--action);white-space:nowrap}.mission-row.done{border-left:3px solid var(--cyan)}.mission-row.done b{color:var(--cyan)}
.history-row.won{border-left:3px solid var(--action)}.history-row.me{background:#ffc53126}
.outfit-list{display:flex;flex-wrap:wrap;gap:6px}
.outfit{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#16282e;border:1px solid #ffffff3d;color:var(--paper);font:800 12px var(--ui-font);letter-spacing:1px}
.outfit::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--swatch);border:1px solid #ffffff66}
.outfit.chosen{border-color:var(--action);background:#ffc53126}.outfit.locked{opacity:.45}
#cardRank{display:block;font:800 11px var(--ui-font);letter-spacing:1.2px;margin-top:2px}
#careerStatus{min-height:1.2em;margin:0 0 4px;font-size:12px;color:#ffd9cf}#careerStatus:empty{display:none}
#careerSignIn .primary{display:block;text-align:center;text-decoration:none;margin-top:8px}
@media(pointer:coarse) and (max-height:540px){.career-panel{max-height:calc(100vh - 16px);overflow:auto}.career-totals{grid-template-columns:repeat(3,minmax(0,1fr))}.rank-card b{font-size:20px}}

#viewToggle{margin-top:6px}
/* Shorter phones: the match menu drops its intro paragraph so every control stays on screen */
@media(pointer:coarse) and (max-height:379px){.capture-panel>p#captureText{display:none}}

/* Last Stand: red edge while outside the circle; eliminated players are dimmed on the score list */
.zone-warn{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;box-shadow:inset 0 0 0 3px #ff5a4a,inset 0 0 110px 20px #ff3b2a66}
.zone-warn.on{opacity:1}
#liveScore .out{opacity:.5}
#liveScore .out span{text-decoration:line-through}
.death-card.spectate{top:21%;min-width:0;padding:6px 18px 8px}
.death-card.spectate small{font-size:10px;letter-spacing:2px}
.death-card.spectate strong{font-size:18px;margin:2px 0 0;letter-spacing:0}
.death-card.spectate>span{min-height:0;font-size:11px}
.death-card.spectate em{margin-top:3px;font-size:12px}
.touch-room #multiDeath.spectate{top:82px}

/* Voice chat: the hold-to-talk button beside quick chat, and who is talking */
.voice-button{position:fixed;left:60px;top:58px;width:40px;height:40px;display:none;place-items:center;padding:0;border-radius:50%;border:1.5px solid #ffffffb0;background:#0a14187a;color:#fff;z-index:5;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.voice-button svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.voice-button.on{background:var(--action);border-color:var(--action);color:#10222a}
@media(pointer:coarse){body:has(#multiHud:not([hidden])) .voice-button:not([hidden]){display:grid}}
@media(max-height:350px){.voice-button{left:52px;width:34px;height:34px}}
.voice-feed{margin-top:4px;text-align:right;font:800 11px var(--ui-font);letter-spacing:.6px;color:#10222a}
.voice-row{display:inline-block;margin:2px 0 0 4px;padding:2px 8px;background:var(--action)}
.voice-panel .friend-list{margin:10px 0}
.voice-panel #voiceStatus{min-height:18px}
@media(pointer:coarse){.voice-feed{position:fixed;left:106px;top:60px;margin:0;width:100px;max-height:40px;overflow:hidden;text-align:left}.voice-row{display:block;margin:0 0 2px;max-width:100%;width:max-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.voice-row.self{display:none}}
@media(pointer:coarse) and (max-height:350px){.voice-feed{left:92px}}
/* Smallest phones: the match menu drops the icon legend so the bottom links always fit, gyro hint included */
@media(pointer:coarse) and (max-height:350px){.capture-panel .touch-legend{display:none}}

/* Lobby microphone switch and the Last Stand "watch next" button */
.icon-button[hidden]{display:none}
.icon-button.on{background:var(--action);border-color:var(--action);color:#10222a}
.icon-button.on span{color:#10222a}
.spectate-next{position:fixed;left:50%;top:162px;transform:translateX(-50%);display:none;min-height:32px;padding:0 16px;border:1.5px solid #ffffffb0;background:#0a1418c0;color:#fff;font:800 12px var(--ui-font);letter-spacing:1px;z-index:5;pointer-events:auto;touch-action:none}
@media(pointer:coarse){body:has(#multiHud:not([hidden])) .spectate-next:not([hidden]){display:block}}

/* ============ v0.36: solid icons with names, item tiles beside the weapon boxes, lists with pictures ============ */
:root{--slot:min(116px,16vw)}
.weapon-slots button{width:var(--slot)}
/* A third weapon (the Sniper) shares the same row width, so the tiles beside it never move */
.weapon-slots:has(button:nth-child(3)) button{width:calc((var(--slot)*2 - 4px)/3);padding:0 5px;gap:3px}
#touch button,#roomTouch button{align-content:center;gap:0}
#touch button svg,#roomTouch button svg{width:60%;height:60%}
#touch button small,#roomTouch button small{display:none;margin-top:1px;font:800 calc(8px*var(--k))/1 var(--ui-font);letter-spacing:.2px;text-transform:uppercase;pointer-events:none}
#touch.named button small,#roomTouch.named button small{display:block}
#touch.named button svg,#roomTouch.named button svg{width:50%;height:50%}
#touch [data-action=scope] span,#roomTouch [data-action=scope] span{font:800 calc(15px*var(--k))/1 var(--ui-font);pointer-events:none}
/* Crouch moves a little to the right to leave the bottom row to the throw tile */
#touch [data-action=crouch],#roomTouch [data-action=crouch]{right:calc(72px*var(--k))}
/* Item tiles: square plates, level with the weapon boxes */
#touch [data-action=heal],#roomTouch [data-action=heal],#touch [data-action=grenade],#roomTouch [data-action=grenade]{right:auto;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 18px);width:40px;height:38px;border-radius:4px;border:1px solid #ffffff66;background:#0a1418c4}
#touch [data-action=medPick],#roomTouch [data-action=medPick],#touch [data-action=throwKind],#roomTouch [data-action=throwKind]{right:auto;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 18px);width:24px;height:38px;border-radius:4px;border:1px solid #ffffff40;background:#0a141899;color:#dfe8e6}
#touch [data-action=heal],#roomTouch [data-action=heal]{left:calc(50% - var(--slot) - 109px)}
#touch [data-action=medPick],#roomTouch [data-action=medPick]{left:calc(50% - var(--slot) - 136px)}
#touch [data-action=grenade],#roomTouch [data-action=grenade]{left:calc(50% + var(--slot) + 6px)}
#touch [data-action=throwKind],#roomTouch [data-action=throwKind]{left:calc(50% + var(--slot) + 49px)}
#touch [data-action=heal] svg,#roomTouch [data-action=heal] svg,#touch [data-action=grenade] svg,#roomTouch [data-action=grenade] svg{width:66%;height:66%}
#touch [data-action=medPick] svg,#roomTouch [data-action=medPick] svg,#touch [data-action=throwKind] svg,#roomTouch [data-action=throwKind] svg{width:74%;height:74%}
#touch [data-action=heal][data-count="0"] svg,#roomTouch [data-action=heal][data-count="0"] svg{opacity:.4}
#touch [data-wait]::before,#roomTouch [data-wait]::before{content:attr(data-wait);position:absolute;inset:0;display:grid;place-items:center;border-radius:3px;background:#0a1418d9;color:#fff;font:800 13px var(--ui-font)}
.tray-menu{position:fixed;z-index:45;display:grid;gap:3px;padding:4px;background:#0b171cf5;border:1px solid #ffffff2e;border-bottom:2px solid var(--action);font-family:var(--ui-font)}
.tray-menu button{display:grid;grid-template-columns:24px minmax(0,1fr) auto 22px;align-items:center;gap:8px;min-width:176px;min-height:38px;padding:0 8px 0 6px;background:#16282f;border:1px solid #809d9d55;color:var(--paper);font:800 12px var(--ui-font);letter-spacing:.6px;text-align:left}
.tray-menu svg{width:24px;height:24px}
.tray-menu i{font:700 10px var(--ui-font);font-style:normal;letter-spacing:.4px;color:#9fb7c0}
.tray-menu span{grid-column:4;text-align:right;color:var(--action);font-size:13px}
.tray-menu button[aria-selected=true]{border-color:var(--action);background:#2b3222}
.tray-menu button:disabled{opacity:.45}
/* Button editor panel */
.layout-bar{top:6px;display:grid;grid-template-columns:auto auto auto;align-items:center;gap:6px 14px;padding:8px 12px;background:#0b171cf5;border:1px solid #ffffff2e;border-top:2px solid var(--action);font:700 12px var(--ui-font);color:#dfe8e6}
.layout-bar .lb-col{display:grid;gap:6px}
.layout-bar .lb-row{display:grid;grid-template-columns:76px auto;align-items:center;gap:8px;white-space:nowrap}
.layout-bar input[type=range]{width:112px;accent-color:var(--action)}
.layout-bar .lb-nudge{display:flex;gap:4px}
.layout-bar .lb-nudge button{width:32px;height:28px;padding:0;display:grid;place-items:center}
.layout-bar .lb-nudge svg{width:16px;height:16px}
.layout-bar button{width:auto;min-height:28px;margin:0;padding:6px 10px;font:800 11px var(--ui-font);letter-spacing:.8px}
.layout-bar button:disabled{opacity:.4}
.layout-bar .lb-actions{grid-template-columns:1fr 1fr}
.layout-bar #layoutDone{grid-column:1/-1}
.layout-bar .lb-hint{grid-column:1/-1;order:9;flex-basis:auto;text-align:center;font:600 11px var(--ui-font);color:#c9d8d8}
@media(max-height:350px){.layout-bar .lb-hint{display:none}}
.layout-editing [data-layout]{outline-color:#ffc53199}
.layout-editing .layout-selected{outline:2px solid var(--action)}
/* Larger round buttons now that four of them became tiles; the column above FIRE stays free for the map */
#touch button,#roomTouch button{width:calc(50px*var(--k));height:calc(50px*var(--k))}
#touch [data-action=aim],#roomTouch [data-hold=aim]{right:calc(94px*var(--k));bottom:calc(120px*var(--k))}
#touch [data-action=dash],#roomTouch [data-action=blink]{right:calc(150px*var(--k));bottom:calc(120px*var(--k))}
#touch [data-action=scope],#roomTouch [data-action=scope]{right:calc(94px*var(--k));bottom:calc(176px*var(--k))}
#touch [data-action=fire],#roomTouch [data-action=fire]{width:calc(70px*var(--k));height:calc(70px*var(--k))}
#touch [data-action=heal],#roomTouch [data-action=heal],#touch [data-action=grenade],#roomTouch [data-action=grenade]{width:40px;height:38px}
#touch [data-action=medPick],#roomTouch [data-action=medPick],#touch [data-action=throwKind],#roomTouch [data-action=throwKind]{width:24px;height:38px}
/* The throw tile shows when the next grenade is ready, so the text chip is not needed on phones */
@media(pointer:coarse){#abilityinfo,#multiGrenade{display:none}}
/* Picture sizes in fixed units (a percentage collapses inside the buttons' grid) */
#touch button svg,#roomTouch button svg{width:calc(28px*var(--k));height:calc(28px*var(--k))}
#touch.named button svg,#roomTouch.named button svg{width:calc(25px*var(--k));height:calc(25px*var(--k))}
#touch [data-action=fire] svg,#roomTouch [data-action=fire] svg,#touch.named [data-action=fire] svg,#roomTouch.named [data-action=fire] svg{width:calc(36px*var(--k));height:calc(36px*var(--k))}
#touch [data-action=heal] svg,#roomTouch [data-action=heal] svg,#touch [data-action=grenade] svg,#roomTouch [data-action=grenade] svg,#touch.named [data-action=heal] svg,#roomTouch.named [data-action=heal] svg,#touch.named [data-action=grenade] svg,#roomTouch.named [data-action=grenade] svg{width:28px;height:28px}
#touch [data-action=medPick] svg,#roomTouch [data-action=medPick] svg,#touch [data-action=throwKind] svg,#roomTouch [data-action=throwKind] svg,#touch.named [data-action=medPick] svg,#roomTouch.named [data-action=medPick] svg,#touch.named [data-action=throwKind] svg,#roomTouch.named [data-action=throwKind] svg{width:18px;height:18px}
#touch button small,#roomTouch button small{font-size:calc(7.5px*var(--k));letter-spacing:0}
/* Tiles are full thumb size; their list openers are narrower but as tall */
#touch [data-action=heal],#roomTouch [data-action=heal],#touch [data-action=grenade],#roomTouch [data-action=grenade]{width:40px;height:40px;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 17px)}
#touch [data-action=medPick],#roomTouch [data-action=medPick],#touch [data-action=throwKind],#roomTouch [data-action=throwKind]{width:32px;height:40px;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 17px)}
#touch [data-action=medPick],#roomTouch [data-action=medPick]{left:calc(50% - var(--slot) - 144px)}
#touch [data-action=crouch],#roomTouch [data-action=crouch]{right:calc(66px*var(--k))}
#touch [data-action=prone],#roomTouch [data-action=prone]{right:calc(12px*var(--k))}
@media(max-width:600px){:root{--slot:14.5vw}}
/* Names keep the 10 px reading floor; they are drawn slightly narrow so six letters fit inside a round button */
#touch button small,#roomTouch button small{font-size:calc(10px*var(--k));letter-spacing:0;transform:scaleX(.8);margin-top:0}
#touch.named button svg,#roomTouch.named button svg{width:calc(23px*var(--k));height:calc(23px*var(--k))}
#touch.named [data-action=fire] svg,#roomTouch.named [data-action=fire] svg{width:calc(34px*var(--k));height:calc(34px*var(--k))}
#touch [data-action=scope] span,#roomTouch [data-action=scope] span{font-size:calc(16px*var(--k))}
#touch [data-action=scope],#roomTouch [data-action=scope]{right:calc(100px*var(--k))}
.fire-mode{transform:translateX(calc(-50% - var(--slot) - 3px - 32px))}
@media(max-width:620px){
 .layout-bar{gap:5px 8px;padding:6px 8px}
 .layout-bar .lb-row{grid-template-columns:auto auto;gap:6px}
 .layout-bar input[type=range]{width:74px}
 .layout-bar .lb-nudge{gap:3px}
 .layout-bar .lb-nudge button{width:28px}
 .layout-bar button{padding:6px 7px;letter-spacing:.4px}
 .weapon-slots button{padding:0 5px;gap:4px}
 .weapon-slots button span{font-size:12px;letter-spacing:0}
}

/* Install guide */
.install-overlay{z-index:60}
.install-panel{width:min(560px,calc(100vw - 24px))}
.install-steps{margin:10px 0 12px;padding:0;list-style:none;counter-reset:step;display:grid;gap:7px}
.install-steps li{counter-increment:step;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:10px;font:600 14px/1.45 var(--ui-font);color:#e3ecea}
.install-steps li::before{content:counter(step);display:grid;place-items:center;width:26px;height:26px;background:var(--action);color:#1b1503;font:800 14px var(--ui-font)}
.install-steps li>*{grid-column:2}
.install-steps li{display:block;position:relative;padding-left:38px;min-height:26px}
.install-steps li::before{position:absolute;left:0;top:0}
.install-steps b{color:#fff}
.install-steps svg{display:inline-block;width:20px;height:20px;margin:0 2px;vertical-align:-5px;fill:none;stroke:var(--action);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.install-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.install-actions button{margin:0}
#installStatus{min-height:18px;margin:8px 0 0;font-size:13px;color:var(--cyan);overflow-wrap:anywhere}
#installStatus:empty{display:none}