/*
 * 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}}