/* Redefined presentation layer. The original canvas and gameplay contracts
   stay in styles.css; this file owns the new menu and HUD design. */
:root {
  color-scheme: dark;
  --ink: #f4edf3;
  --muted: #b7a9be;
  --red: #e37c8b;
  --red-dark: #911b27;
  --amber: #f0c88a;
  --violet: #a47cba;
  --panel: #16101e;
  --line: #46334f;
  --ui-body: "Segoe UI", Arial, sans-serif;
  --ui-mono: "Courier New", monospace;
}

button:focus-visible, [role="button"]:focus-visible, input:focus-visible,
select:focus-visible, a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
button, [role="button"], input, select { touch-action: manipulation; }
[hidden] { display: none !important; }
button:disabled { cursor: not-allowed; opacity: .5; }
.game-shell { background: #100c16; }
.game-frame { border-color: #493053; box-shadow: 0 0 0 4px #100c16, 0 24px 80px #0008; }
.screen-glass { opacity: .13; }
.overline { color: var(--muted); font-size: 10px; letter-spacing: .16em; line-height: 1.5; }

/* Title: a deliberate entry point, with secondary actions below the routes. */
#title-screen {
  padding: clamp(22px, 4vw, 64px);
  overflow: auto;
  background: linear-gradient(110deg, #100c16 30%, #201428);
}
#title-screen::after { opacity: .035; }
/* Programmatic return target, not an interactive control. */
#game-title[tabindex="-1"]:focus { outline: none; }
#title-screen .title-layout {
  width: min(100%, 1180px);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  margin: auto;
}
.title-edition { display: flex; align-items: center; gap: 9px; margin: 0 0 24px; }
.title-edition > span:last-child { margin-left: auto; font-size: 9px; color: #967da3; }
.signal-lamp { width: 6px; height: 6px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 14px #f0c88a55; }
#title-screen .title-copy h1 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(42px, 6.6vw, 96px);
  line-height: .91;
  letter-spacing: -.025em;
  margin: 0 0 14px;
  text-shadow: none;
}
#title-screen .title-copy h1 > span { display: block; color: var(--muted); font: 10px/1.5 var(--ui-mono); letter-spacing: .28em; margin-bottom: 12px; }
#title-screen .title-copy h1 em { color: var(--red); font-style: normal; }
.title-game-name { color: var(--amber); font-size: 11px; letter-spacing: .4em; margin: 14px 0; }
#title-screen .lede { max-width: 490px; font: 13px/1.65 var(--ui-body); color: var(--muted); margin: 0 0 10px; }
#title-screen .route-notice { font: 11px/1.5 var(--ui-body); color: #a994b5; margin: 0 0 18px; }
#title-screen .title-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.primary-button, .text-button, .menu-button, .menu-overlay__close {
  border-radius: 4px;
  box-shadow: none;
  min-height: 37px;
  padding: 10px 14px;
  font: 600 10px/1.4 var(--ui-mono);
  letter-spacing: .06em;
  transition: background .15s, border-color .15s;
}
.primary-button { color: #fff4f4; background: #911b27; border: 1px solid #b33b4a; }
.primary-button:hover, .primary-button:focus-visible { color: #fff; background: #ad2d3d; }
.text-button, .menu-button, .menu-overlay__close { color: var(--ink); background: #24192e; border: 1px solid #4c3658; }
.text-button:hover, .menu-button:hover { background: #372341; border-color: #a47cba; }
.primary-button::after { display: none; }
#title-screen .route-choice { display: grid; text-align: left; justify-content: stretch; gap: 5px; padding: 12px 15px; min-height: 64px; }
.route-choice > span { display: flex; justify-content: space-between; align-items: center; }
.route-choice small { font: 11px/1.45 var(--ui-body); letter-spacing: 0; font-weight: 400; color: #c5b4cf; }
#title-screen .route-choice--primary { grid-column: 1 / -1; }
.route-choice--primary small { color: #f4c4ca; }.route-choice b { color: var(--amber); font-size: 20px; }
.title-transmission { align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); padding-left: 28px; }
.transmission-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.transmission-head span:last-child { color: var(--amber); font-size: 24px; line-height: .6; }
.route-schematic { position: relative; margin: 23px 0; background: #170f1f; border: 1px solid #45304d; overflow: hidden; }
.route-schematic svg { width: 100%; display: block; max-height: 230px; opacity: .8; }
.schematic-label { display: block; border-top: 1px solid var(--line); padding: 10px; font-size: 8px; letter-spacing: .13em; color: var(--amber); }
.title-transmission h2 { font: 400 clamp(23px, 2.5vw, 37px)/1.1 Georgia, serif; letter-spacing: -.03em; margin: 0 0 15px; }
.title-transmission p { color: var(--muted); font: 12px/1.7 var(--ui-body); margin: 0 0 20px; }
.transmission-foot { display: grid; gap: 10px; color: #a47cba; font-size: 8px; letter-spacing: .07em; border-top: 1px solid var(--line); padding-top: 15px; }

/* A common surface for configuration, files, kit, pause, and results. */
.menu-overlay, .pause-screen, .end-screen, .room-lobby { background: #100c16eF; backdrop-filter: blur(8px); }
.menu-overlay__panel, .save-station__panel, .inventory-screen__panel,
.room-lobby__card, .pause-card, .end-card {
  background: linear-gradient(135deg, #211729, #15101c);
  border: 1px solid #60436f;
  border-radius: 8px;
  box-shadow: 0 24px 65px #0008;
}
.menu-overlay__panel { width: min(960px, 96%); padding: 24px; gap: 20px; }
.menu-overlay__header { padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.menu-overlay__header h2 { font: 600 clamp(25px, 3vw, 40px)/1.1 var(--ui-body); letter-spacing: -.04em; }
.menu-overlay__body { scrollbar-width: thin; scrollbar-color: #72477e #17101e; padding: 2px 4px; }
.settings-tabs { gap: 6px; border: 0; padding: 0; }
.settings-tab { border-radius: 4px; padding: 10px 16px; color: var(--muted); background: #17101e; border: 1px solid #493252; font-size: 10px; min-height: 38px; }
.settings-tab[aria-selected="true"] { color: var(--amber); background: #3b2547; border-color: #9d71b3; }
.settings-row { padding: 14px 9px; border-bottom: 1px solid #382740; }
.settings-row label b { color: var(--ink); font-size: 11px; }
.settings-row label small { font: 12px/1.5 var(--ui-body); color: var(--muted); margin-top: 4px; }
.settings-row input[type="checkbox"] { accent-color: #a47cba; width: 20px; height: 20px; cursor: pointer; }
.settings-row input[type="range"] { accent-color: #a47cba; }
.settings-foot { border-top: 1px solid var(--line); padding-top: 12px; color: var(--muted); font-size: 10px; }
.controls-tips { background: #17101e; padding: 16px; border-radius: 4px; }
.controls-tips li { font: 12px/1.8 var(--ui-body); color: var(--muted); }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.guide-grid article { padding: 20px; background: #17101e; border: 1px solid #483153; border-radius: 5px; color: var(--muted); font: 11px/1.6 var(--ui-body); }
.guide-grid article > span { color: var(--amber); font: 9px var(--ui-mono); letter-spacing: .1em; }
.guide-grid h3 { font: 600 20px/1.2 var(--ui-body); color: var(--ink); margin: 14px 0 8px; }
.guide-grid p { font-size: 13px; margin: 0 0 18px; }
.guide-grid kbd, .hud-tools kbd { font: 10px var(--ui-mono); color: var(--amber); padding: 3px 5px; border: 1px solid #60466c; border-radius: 3px; }
.guide-foot { font: 12px/1.6 var(--ui-body); color: var(--muted); margin: 18px 0 0; }
.room-lobby__card { padding: clamp(18px, 3vw, 34px); gap: 16px; width: min(90%, 850px); }
.room-lobby__header { align-items: center; }.room-lobby__header > div { margin-right: auto; }
.room-lobby__header h2 { font: 600 clamp(26px, 4vw, 46px)/1 var(--ui-body); }
#lobby-room-code { color: var(--amber); user-select: text; }
.room-lobby__route { background: #130e1a; border-color: #72477e; padding: 12px 16px; }
.room-lobby__route small, #lobby-settings-note { font: 11px/1.5 var(--ui-body); color: var(--muted); }
.room-lobby__settings { background: #17101e; padding: 16px; border-color: #483153; border-radius: 4px; }
.button-select button { min-height: 38px; padding: 8px 11px; font-size: 10px; border-radius: 3px; }
.difficulty-note { color: var(--amber); font: 12px/1.5 var(--ui-body); margin: 6px 0; }
.room-lobby__roster { border-color: var(--line); }.room-lobby__actions { flex-wrap: wrap; gap: 8px; }
.pause-card, .end-card { text-align: left; justify-items: stretch; padding: 32px; width: min(92%, 580px); gap: 13px; }
.pause-card h2, .end-card h2 { font: 600 clamp(29px, 4.5vw, 52px)/1.05 var(--ui-body); letter-spacing: -.045em; }
.pause-context, #end-copy { font: 13px/1.6 var(--ui-body); color: var(--muted); margin: 4px 0; }
.pause-route-stats { padding: 12px 0; border-block: 1px solid var(--line); font: 10px/1.5 var(--ui-mono); color: var(--amber); margin: 0 0 6px; }
.run-report { width: 100%; padding: 15px; background: #120d18; border: 1px solid #47314f; border-radius: 4px; }
.run-report strong { color: var(--amber); }
.inventory-screen__panel, .save-station__panel { padding: 24px; }
.inventory-screen__head, .save-station__head { padding-bottom: 15px; border-color: var(--line); }
.inventory-screen__head strong, .save-station__head strong { font: 600 27px var(--ui-body); letter-spacing: -.03em; }
.inventory-screen__hint, .inventory-screen__capacity { color: var(--muted); font: 11px/1.6 var(--ui-body); }
.inventory-slot { min-height: 68px; background: #120d18; border-color: #50345b; border-radius: 4px; cursor: pointer; }
.inventory-slot.is-move-source { border-color: var(--amber); box-shadow: inset 0 0 0 2px var(--amber); }
.save-station__status, .save-station__feedback { font: 12px/1.6 var(--ui-body); color: var(--muted); }
.save-station input, .join-room-dialog input { border-radius: 4px; padding: 12px; background: #110b17; border: 1px solid #634270; color: var(--ink); }
.join-room-dialog { background: #201527; border-color: #72477e; border-radius: 8px; }
.hunter-detail, .hunter-spec { border-color: var(--line); }.hunter-detail__dossier { font-family: var(--ui-body); line-height: 1.7; }

/* Keep the center of the facility clear. Controls stay at the edges. */
body:not(.is-mobile-player) .hud { inset: 0; display: block; padding: 0; }
body:not(.is-mobile-player) .hud::before { display: none; }
body:not(.is-mobile-player) .hud__objective { position: absolute; left: 18px; top: 18px; max-width: 290px; padding: 12px 15px; background: #120c19dc; border-left: 2px solid #a47cba; border-radius: 3px; }
.hud__objective strong { font-size: 12px; line-height: 1.5; letter-spacing: .03em; }
.hud .overline { font-size: 9px; margin: 0 0 4px; }
body:not(.is-mobile-player) .hud__radar { position: absolute; left: 20px; bottom: 112px; justify-items: start; text-align: left; background: #120c19b8; padding: 7px 10px; border-radius: 3px; }
body:not(.is-mobile-player) .hud__radar > .overline, body:not(.is-mobile-player) #room-status { display: none; }
.hud__radar strong { font-size: 11px; }
body:not(.is-mobile-player) .hud .hud__loadout { position: absolute; left: 18px; bottom: 16px; align-items: start; gap: 9px; max-width: min(600px, 75%); padding: 10px 12px; background: #120c19e0; border: 1px solid #4b3155; border-radius: 5px; }
.hud__meters { justify-content: start; gap: 7px 13px; }
.hud__meter { align-items: start; }.hud__meter .hud__caption { text-align: left; max-width: 155px; font-size: 9px; line-height: 1.4; }
.hud .hud__meter .battery { width: 94px; height: 5px; border: 0; border-radius: 2px; background: #3d2a48; }
.focused-hud .hud__meter:not(.meter-relevant) { display: none; }
.hotbar-slot { border-radius: 4px; background: #21152b; border-color: #634271; }
.hotbar-slot.is-selected { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.hotbar-hint { display: none; }
.held-item-label { color: var(--muted); font: 9px/1.4 var(--ui-mono); }
body:not(.is-mobile-player) .hud__radar { bottom: 139px; }
.hud-tools { position: absolute; top: 16px; right: 104px; display: flex; gap: 6px; pointer-events: auto; }
.hud-tools[hidden] { display: none; }.hud-tools button { background: #17101feF; border: 1px solid #684779; padding: 9px; border-radius: 4px; font: 10px var(--ui-mono); cursor: pointer; min-height: 35px; }
.hud-tools kbd { font-size: 8px; margin-left: 5px; padding: 2px 3px; }
#pause-button { top: 16px; right: 16px; bottom: auto; padding: 9px 12px; min-height: 35px; border: 1px solid #684779; border-radius: 4px; background: #17101feF; }
.survival-cue { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #4b3155; }
.survival-cue[hidden] { display: none; }.survival-cue > span { font: 600 11px var(--ui-body); color: var(--amber); }.survival-cue small { font: 11px/1.45 var(--ui-body); color: var(--muted); max-width: 240px; }
.survival-cue[data-tone="danger"] > span { color: #ff94a4; }.survival-cue[data-tone="danger"] { border-color: #b0445a; }
.map-panel { top: 65px; right: 16px; left: auto; border: 1px solid #62416e; background: #130c1bd9; border-radius: 4px; padding: 8px; }
.temperature-gauge { right: 16px; left: auto; top: auto; bottom: 20px; transform: none; }
.interaction-prompt { bottom: 24px; max-width: min(450px, 45%); border: 1px solid #8e689f; background: #17101feb; border-radius: 4px; padding: 10px 14px; font: 12px/1.5 var(--ui-body); }
.toast { top: 18px; bottom: auto; max-width: 42%; border-radius: 4px; font: 12px/1.5 var(--ui-body); }
.fps-counter { opacity: .65; }

@media (max-height: 740px) and (min-width: 761px) {
  #title-screen { padding: 24px 40px; }
  #title-screen .title-copy h1 { font-size: clamp(40px, 5.5vw, 72px); }
  .title-edition { margin-bottom: 10px; }.title-game-name { margin: 10px 0; }
  #title-screen .route-choice { min-height: 54px; padding: 8px 12px; }
  #title-screen .title-actions > .text-button:not(.route-choice) { min-height: 30px; padding: 6px; }
  .title-transmission { padding-left: 24px; }.route-schematic { margin: 16px 0; }
  .route-schematic svg { max-height: 185px; }.transmission-foot { gap: 7px; }
  .title-transmission h2 { font-size: 27px; }.title-transmission p { margin-bottom: 14px; }
}
@media (max-width: 760px), (max-height: 450px) {
  #title-screen, .menu-overlay, .room-lobby, .pause-screen, .end-screen { position: fixed; inset: 0; overflow: auto; padding: max(16px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom)); }
  #title-screen .title-layout { grid-template-columns: 1fr; padding: 12px 0; width: min(100%, 560px); }
  .title-transmission { display: none; }
  #title-screen .title-copy h1 { font-size: clamp(44px, 12vw, 76px); line-height: .93; }
  #title-screen .title-copy h1 span { font-size: 10px; }
  #title-screen .title-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #title-screen .title-actions > button { min-height: 44px; }
  #title-screen .route-choice { min-height: 68px; }
  #title-screen .lede { font-size: 13px; }.title-edition { margin-bottom: 20px; }
  .menu-overlay__panel, .is-mobile-player .menu-overlay__panel { width: 100%; height: min(800px, 95dvh); max-height: 95dvh; padding: 16px; gap: 13px; }
  .menu-overlay__header h2 { font-size: 25px; }.menu-overlay__header { gap: 10px; }
  .settings-tab { padding: 10px; flex: 1; font-size: 9px; }.settings-tabs { display: flex; overflow: auto; }
  .settings-row { padding: 12px 3px; }.settings-row label small { font-size: 11px; }
  .settings-foot { gap: 8px; flex-wrap: wrap; }.settings-foot button { font-size: 9px; }
  .guide-grid { grid-template-columns: 1fr; gap: 12px; }.guide-grid article { padding: 16px; }
  .room-lobby__card { width: 100%; max-height: none; padding: 18px; gap: 14px; margin: auto; }
  .room-lobby__header { flex-wrap: wrap; gap: 12px; }.room-lobby__capacity { font-size: 10px; }
  .button-select { flex-wrap: wrap; }.button-select button { min-height: 40px; font-size: 9px; }
  .pause-card, .end-card { width: 100%; margin: auto; padding: 23px; }
  .inventory-screen__panel, .save-station__panel { width: 100%; max-height: 94dvh; padding: 16px; }
  .inventory-slot { min-height: 58px; }.save-station__account { grid-template-columns: 1fr; }
  .hud-tools { top: 7px; right: 80px; }.hud-tools button { font-size: 9px; padding: 8px; }.hud-tools kbd { display: none; }
  #pause-button { top: 7px; right: 7px; font-size: 9px; }
  .survival-cue small { display: none; }.survival-cue { margin-top: 4px; padding-top: 4px; }
  .interaction-prompt { bottom: 28%; max-width: 65%; font-size: 11px; }
}
@media (pointer: coarse) {
  .is-mobile-player .hud { display: flex; gap: 8px; padding: 8px; justify-content: space-between; }
  .is-mobile-player .hud__objective { max-width: 35%; }.is-mobile-player .hud__radar { display: none; }
  .is-mobile-player .hud .hud__loadout { align-items: end; max-width: 60%; padding-top: 45px; }
  .is-mobile-player .hud__meters { flex-wrap: wrap; justify-content: end; }
  .is-mobile-player .hud__meter { flex: 0 1 auto; }.is-mobile-player .hud__meter .hud__caption { font-size: 8px; }
  .is-mobile-player .hud .hud__meter .battery { width: 65px; }
  .is-mobile-player .map-panel { top: 145px; width: 80px; right: 8px; }
  .is-mobile-player .map-panel canvas { width: 62px; height: 62px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation: none !important; transition: none !important; }
.menu-overlay { transition: opacity .16s ease; }
.is-mobile-player .inventory-screen { place-items: center; }
.route-admin-nav { display: flex; gap: 5px; flex-wrap: wrap; margin: 12px 0; }
.route-admin-nav button { flex: 1; background: #21162c; border: 1px solid #62476e; color: var(--ink); padding: 8px; cursor: pointer; }
.developer-toggle { top: 16px; right: 265px; min-height: 44px; border: 1px solid #684779; border-radius: 4px; background: #17101f; padding: 8px; }
.is-mobile-player .developer-toggle { top: 7px; right: 195px; }
#developer-panel-close { min-width: 44px; }
.route-admin-nav button[aria-pressed="true"] { background: #58324f; border-color: var(--amber); color: var(--amber); }
.developer-panel .developer-panel__dashboard { grid-template-columns: minmax(0, 1fr); }
.developer-panel__category[hidden] { display: none; }
.inventory-screen { grid-template-rows: minmax(0, 1fr); }
.inventory-screen .inventory-screen__panel { width: min(720px, 100%); max-width: 100%; min-width: 0; min-height: 0; max-height: 100%; overflow-x: hidden; padding: 24px; }
.inventory-screen__head { gap: 20px; min-width: 0; position: sticky; top: -1px; z-index: 2; background: #1b1323; }
.inventory-screen__head strong { font-size: 26px; }
.inventory-screen__hint { white-space: normal; overflow-wrap: anywhere; font: 12px/1.5 var(--ui-body); }
.inventory-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 0; }
.inventory-slot { min-width: 0; min-height: 0; aspect-ratio: 1; padding: 12px 5px 8px; align-content: center; gap: 5px; }
.inventory-slot__name { max-width: 100%; font: 11px/1.2 var(--ui-body); text-align: center; overflow-wrap: anywhere; }
.inventory-slot__glyph svg { width: 32px; height: 32px; color: var(--amber); }
.hotbar-slot__glyph svg, .hotbar-coins svg { width: 23px; height: 23px; color: var(--amber); }
#inventory-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 4px; }
dialog.office-solo-warning, #join-room-dialog { width: min(520px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 28px; border: 1px solid #775087; border-radius: 10px; background: linear-gradient(135deg,#251a30,#130e19); color: var(--ink); box-shadow: 0 28px 90px #000b; font: 14px/1.6 var(--ui-body); }
dialog::backdrop { background: #08050cb8; backdrop-filter: blur(5px); }
dialog form { margin: 0; } dialog h2 { font: 600 30px/1.1 var(--ui-body); letter-spacing: -.03em; }
dialog form > div { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
dialog button { min-height: 44px; padding: 10px 18px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink); background: #281c31; font: 12px var(--ui-mono); }
#abandon-confirm { background: #762534; border-color: #b35565; }
.developer-panel { z-index: 90; background: #130e1af5; padding: 24px; font: 13px/1.5 var(--ui-body); }
.developer-panel header { position: sticky; top: -24px; z-index: 2; background: #130e1a; padding: 14px 0; font-size: 17px; }
.developer-panel__category { padding: 18px; border-radius: 7px; background: #21162c; gap: 12px; }
.developer-panel__category > strong { color: var(--amber); font: 11px var(--ui-mono); }
.developer-panel button, .developer-panel select { min-height: 44px; font-size: 11px; border-radius: 4px; }
@media (max-width: 520px) {
  .inventory-screen .inventory-screen__panel { padding: 14px; }
  .inventory-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
  .inventory-slot__glyph svg { width: 26px; height: 26px; }
  .inventory-slot__name { font-size: 10px; }
  .developer-panel__dashboard { grid-template-columns: 1fr; }
}
@media (max-height: 500px) {
  .inventory-screen .inventory-screen__panel { width: min(660px, 100%); padding: 12px 18px; gap: 8px; }
  .inventory-slot { aspect-ratio: auto; min-height: 64px; }
  .inventory-screen__hint { font-size: 11px; }
}
.full-map-overlay { z-index: 85; }
body:has(#full-map-overlay:not([hidden])) :is(.interaction-prompt, .toast) { visibility: hidden; }
body:has(:is(#inventory-screen, #developer-panel):not([hidden])) .interaction-prompt { visibility: hidden; }

/* Phone controls retain finger-sized targets in portrait and landscape. */
.is-mobile-player .mobile-controls { --touch-size: 44px; }
.is-mobile-player input, .is-mobile-player select { font-size: 16px; }
.is-mobile-player .hotbar-slot { width: 44px; height: 44px; flex-shrink: 0; }
.is-mobile-player .hud__hotbar { flex-wrap: wrap; }
.is-mobile-player .hud-tools button, .is-mobile-player #pause-button { min-height: 44px; font-size: 11px; }
.is-mobile-player .mobile-controls button { font-size: 10px; }
.is-mobile-player .hud strong { font-size: 12px; }
.is-mobile-player .hud .overline { font-size: 10px; }
.is-mobile-player .temperature-gauge { top: 115px; bottom: auto; right: 8px; }
.is-mobile-player .temperature-gauge__track { height: 64px; }
.is-mobile-player .temperature-gauge__label { font-size: 9px; }
.is-mobile-player .toast { top: auto; bottom: calc(214px + env(safe-area-inset-bottom)); max-width: 88%; width: max-content; padding: 6px 10px; background: #100b16eF; font-size: 11px; }
.is-mobile-player .held-item-label { white-space: normal; font-size: 10px; }
@media (max-width: 520px) {
  .is-mobile-player .action-pad { grid-template-columns: repeat(3, var(--touch-size)); grid-template-rows: repeat(3, var(--touch-size)); }
  .is-mobile-player .interaction-prompt { bottom: calc(156px + env(safe-area-inset-bottom)); }
  .is-mobile-player .hud .hud__loadout { max-width: none; width: 100%; align-items: start; padding-top: 0; }
  .is-mobile-player .hud { display: flex; flex-direction: column; padding-top: 56px; }
  .is-mobile-player .hud__objective { max-width: none; }
  .is-mobile-player .hud__meters { justify-content: start; }
  .is-mobile-player .map-panel { display: none; }
  .is-mobile-player .temperature-gauge { top: 225px; }
}
@media (max-height: 500px) {
  .is-mobile-player .hud .hud__loadout { padding-top: 44px; }
  .is-mobile-player .map-panel { display: none; }
  .is-mobile-player .survival-cue { display: none; }
  .is-mobile-player .hud__meter .hud__caption { display: none; }
  .is-mobile-player .toast { bottom: max(16px, env(safe-area-inset-bottom)); max-width: 40%; }
}