:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, sans-serif;
  color: #f4f1ea;
  background: #15131f;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
#gameShell {
  --screen-top: max(env(safe-area-inset-top, 0px), var(--telegram-top, 0px));
  --screen-right: max(env(safe-area-inset-right, 0px), var(--telegram-right, 0px));
  --screen-bottom: max(env(safe-area-inset-bottom, 0px), var(--telegram-bottom, 0px));
  --screen-left: max(env(safe-area-inset-left, 0px), var(--telegram-left, 0px));
  --safe-top: var(--screen-top);
  --safe-right: var(--screen-right);
  --safe-bottom: var(--screen-bottom);
  --safe-left: var(--screen-left);
  --toolbar-height: 56px;
  position: fixed;
  top: 0;
  left: 0;
  width: var(--shell-width, 100vw);
  height: var(--shell-height, 100dvh);
  overflow: hidden;
}
button, a, summary { -webkit-tap-highlight-color: transparent; }
button {
  font: inherit; color: inherit; background: #292631;
  border: 1px solid #ffffff28; border-radius: 12px;
  min-width: 44px; min-height: 44px; cursor: pointer; touch-action: none; user-select: none;
}
button:active, button.held { background: #f2bb43; color: #171315; transform: scale(.96); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #f2bb43; outline-offset: 3px; }
[hidden] { display: none !important; }
.toolbar {
  height: calc(var(--toolbar-height) + var(--safe-top));
  padding: var(--safe-top) max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.toolbar a { color: #d1cbdc; text-decoration: none; font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.toolbar strong { font-size: 14px; letter-spacing: .04em; }
.toolbar em { color: #f2bb43; font-style: normal; }
.toolbar button { width: 44px; font-size: 25px; flex-shrink: 0; }
#toolbarTools, #gamebarExtras { display: contents; }
.toolbar strong { flex: 1; min-width: 0; text-align: center; }
#saveAccount { font-size: 21px; position: relative; }
#saveAccount[data-state="synced"] { color: #95d7a8; }
#saveAccount[data-state="conflict"], #saveAccount[data-state="offline"], #saveAccount[data-state="error"] { color: #f2bb43; }
#saveAccount[data-attention="true"]::after { content: ''; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; background: #f2bb43; border-radius: 50%; }
.panel .save-summary { font-size: 12px; color: #c9b994; margin: 18px 0 0; }
.save-info { border: 1px solid #f2bb4330; border-radius: 14px; padding: 16px; background: #f2bb4306; text-align: left; }
.save-info h3 { margin: 0 0 8px; font-size: 16px; }
.save-info p { margin: 8px 0; font-size: 13px; overflow-wrap: anywhere; }
.save-info .small-help { font-size: 12px; }
.save-login { display: flex; align-items: center; justify-content: center; color: #f4d994; text-decoration: none; border: 1px solid #ffffff28; border-radius: 12px; }
.save-conflict { padding-top: 16px; margin-top: 16px; border-top: 1px solid #ffffff20; }
.save-conflict h4 { font-size: 14px; margin: 0; }
.save-conflict button { width: 100%; padding: 10px; margin-top: 8px; font-size: 12px; }
#helpPanel { z-index: 14; }
#saveToast { position: absolute; left: 50%; bottom: max(8px, var(--safe-bottom)); transform: translateX(-50%); z-index: 6; width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; border: 1px solid #f2bb4340; border-radius: 12px; background: #17131ff0; color: #f4e5ba; font-size: 12px; line-height: 1.4; text-align: center; pointer-events: none; }
#stage {
  position: relative; height: calc(100% - var(--toolbar-height) - var(--safe-top));
  display: flex; justify-content: center; align-items: center; background: #080709; isolation: isolate;
}
canvas {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: 100%;
  aspect-ratio: 4/3; object-fit: contain; image-rendering: pixelated; touch-action: none; outline: none;
}
.overlay {
  position: absolute; inset: 0; display: grid; place-items: center; background: #15131ff5; z-index: 10;
  padding: 20px max(20px, var(--safe-right)) max(20px, var(--safe-bottom)) max(20px, var(--safe-left)); overflow: auto;
}
.panel { max-width: 440px; width: 100%; text-align: center; margin: auto; }
.eyebrow { font-size: 10px !important; letter-spacing: .15em; color: #a29aaa; }
.panel h1 { font-size: clamp(44px,12vw,74px); font-weight: 950; font-style: italic; letter-spacing: -.055em; line-height: .87; margin: 26px 0; color: #f2bb43; text-shadow: 3px 3px 0 #803e22; }
.panel h1 span { color: #fff1c9; }
.panel p { font-size: 14px; line-height: 1.6; color: #bbb4c4; }
.primary { background: #f2bb43; color: #1d1610; border: 0; font-weight: 800; width: 100%; min-height: 52px; margin-top: 16px; }
.primary:disabled { opacity: .6; }
.secondary { width: 100%; min-height: 44px; padding: 10px 14px; margin-top: 10px; }
button:disabled { opacity: .55; cursor: default; }
#networkPanel, #netEnd, #netUnavailable { z-index: 12; background: #15131f; }
.net-share { display: flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 12px; text-decoration: none; text-align: center; line-height: 1.4; }
.net-share:active { background: #f2bb4324; }
.net-share[aria-disabled="true"] { opacity: .55; cursor: default; }
#netSolo { margin-top: 12px; background: #ffffff04; }
.net-unavailable-panel { max-width: 400px; }
#netUnavailableArt { display: block; width: min(100%, 320px); height: auto; aspect-ratio: 8/5; margin: 0 auto 24px; border-radius: 16px; image-rendering: pixelated; }
.net-unavailable-panel h2 { margin: 8px 0 12px; font-size: clamp(26px, 7vw, 34px); line-height: 1.15; }
#netUnavailableTitle:focus { outline: none; }
.net-unavailable-panel .eyebrow { margin-bottom: 8px; }
@media (min-width: 560px) {
.landscape .net-unavailable-panel { max-width: 720px; display: grid; grid-template-columns: minmax(180px, .9fr) minmax(240px, 1.1fr); column-gap: 28px; text-align: left; align-items: center; }
.landscape #netUnavailableArt { grid-column: 1; grid-row: 1 / 6; width: 100%; margin: 0; }
.landscape .net-unavailable-panel > :not(img) { grid-column: 2; }
}
.landscape .net-unavailable-panel h2 { font-size: 28px; }
.net-panel { text-align: left; max-width: 560px; }
#networkPanel { background: radial-gradient(ellipse at 85% 0, #42293e55, transparent 55%), #15131f; scroll-padding-block: 20px 170px; }
#gameShell.lobby-open > .toolbar { display: none; }
#gameShell.lobby-open #stage { height: 100%; }
#gameShell.lobby-open #networkPanel { padding-top: max(16px, var(--safe-top)); }
#networkPanel.is-lobby { display: flex; align-items: stretch; }
#networkPanel.is-lobby .net-panel { display: flex; flex-direction: column; margin-block: 0; }
#networkPanel.is-lobby #netLobby { display: flex; flex: 1; flex-direction: column; }
#networkPanel button, #networkPanel a { touch-action: manipulation; }
.net-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.net-heading > div { flex: 1; min-width: 0; }
.net-heading .net-brand { margin: 0 0 2px; color: #f4f1ea; font-size: 17px; line-height: 1.3; font-weight: 750; }
.net-heading h2 { margin: 0; color: #b7adbf; font-size: 12px; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
#netHeading:focus { outline: none; }
.net-sound, #networkPanel #netBack { flex: 0 0 44px; width: 44px; min-height: 44px; margin: 0; padding: 0; font-size: 0; background: none; border-color: transparent; color: #c7becf; }
.net-sound::before { content: '♫'; font-size: 22px; line-height: 1; }
#networkPanel #netBack::before { content: '←'; font-size: 24px; line-height: 1; }
.net-sound[aria-pressed="true"] { border-color: #f2bb4355; color: #f4d994; }
#netIntro { margin: 10px 0 20px; }
.net-panel label { display: block; margin: 12px 0 6px; font-size: 13px; color: #cfc7da; }
.net-panel input, .net-panel select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #ffffff35; border-radius: 10px; background: #211d29; color: #f4f1ea; font: inherit; font-size: 16px; }
.net-panel input:focus-visible, .net-panel select:focus-visible { outline: 2px solid #f2bb43; outline-offset: 2px; }
.net-panel .net-divider { text-align: center; margin: 20px 0 8px; }
.net-room-banner { margin: 24px 0 22px; }
.net-room-banner label { margin-top: 0; }
.net-room-banner select { max-width: 100%; touch-action: manipulation; }
.net-room-banner .small-help { margin: 6px 0 10px; font-size: 11px; line-height: 1.4; }
.net-room-banner h3 { font-size: 16px; line-height: 1.2; letter-spacing: -.02em; margin: 0; }
.net-room-banner .net-level { font-size: 12px; line-height: 1.4; margin: 5px 0 0; color: #b7adbf; }
.net-roster-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.net-roster-heading h3 { margin: 0; font-size: 16px; }
#netPlayerCount { border-radius: 99px; padding: 4px 10px; background: #ffffff0b; color: #c8bece; font-size: 12px; font-variant-numeric: tabular-nums; }
#netPlayers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 0; }
#netPlayers li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 176px; padding: 14px 10px; border: 1px solid #ffffff18; border-radius: 16px; background: #ffffff04; text-align: center; }
#netPlayers li.net-self { border-color: #f2bb4355; background: #f2bb4309; }
.net-avatar { position: relative; flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--avatar-color, #634831); color: #fff1d0; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.net-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.net-player-info { min-width: 0; width: 100%; }
.net-player-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 14px; line-height: 1.3; font-weight: 700; }
.net-player-meta { display: block; font-size: 11px; line-height: 1.4; color: #b1a6b8; margin-top: 3px; }
#netPlayers .net-player-state { display: inline-flex; justify-content: center; align-items: center; gap: 5px; max-width: 100%; min-height: 23px; padding: 3px 8px; border-radius: 99px; background: #ffffff08; font-size: 11px; line-height: 1.3; font-weight: 650; color: #c2b8cb; }
#netPlayers .net-player-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#netPlayers .net-ready { color: #a7e4b8; background: #95d7a810; }
#netPlayers .net-ready::before { content: '✓'; width: auto; height: auto; border-radius: 0; background: none; font-size: 12px; }
#netPlayers .net-offline { color: #e7b273; }
#netPlayers .net-empty { padding: 0; border-style: dashed; border-color: #f2bb4333; background: #f2bb4303; }
.net-invite-slot { display: flex; flex: 1; align-self: stretch; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px; color: #ebcf96; text-decoration: none; border-radius: 15px; }
.net-invite-slot:hover { background: #f2bb4308; }
.net-invite-slot:active { background: #f2bb4314; }
.net-invite-slot[aria-disabled="true"] { opacity: .55; cursor: default; }
.net-empty .net-avatar { background: #f2bb430a; border: 1px solid #f2bb4326; color: #e3bd72; font-size: 32px; font-weight: 400; }
.net-empty .net-player-name { font-weight: 650; font-size: 14px; }
.net-empty .net-player-meta { color: #b9a98c; }
.net-panel .net-event { margin: 7px 0; min-height: 17px; font-size: 11px; line-height: 1.5; text-align: center; color: #c7bdce; }
.net-invite-step { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0 0 10px; }
.net-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.net-invite-step .net-share { flex: 1.2; margin: 0; min-height: 44px; border: 1px solid #ffffff1b; background: #ffffff03; color: #dbceba; font-size: 12px; font-weight: 600; }
.net-link-details { flex: 1; min-width: 0; margin: 0; font-size: 12px; }
.net-link-details[open] { flex-basis: 100%; }
.net-link-details summary { padding: 8px; border-color: #ffffff1b; color: #b7adbf; min-height: 44px; font-size: 11px; text-align: center; }
.net-link-details[open] summary { justify-content: flex-start; border-color: transparent; padding-left: 0; }
.net-link-details p { margin: 8px 0; font-size: 12px; }
.net-link-details #netCopy { min-height: 44px; color: #c8bed0; background: #ffffff03; border-color: #ffffff1b; }
.net-lobby-footer { position: sticky; bottom: -20px; z-index: 1; margin-top: auto; padding: 12px 0 0; border-top: 1px solid #ffffff12; background: #15131f; }
#netReady { flex: 0 0 auto; width: 100%; max-width: 160px; min-width: 0; min-height: 44px; margin: 0; padding: 10px 16px; border-color: #ffffff35; background: #332d3d; font-size: 13px; font-weight: 750; }
.net-panel .net-lobby-status { min-width: 0; margin: 0 0 10px; color: #c8bdcf; font-size: 12px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
#netStart { margin: 0; min-height: 50px; font-size: 15px; }
.net-panel .net-room-note { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: #a496b0; }
.net-lobby-footer .net-room-note { text-align: center; }
#networkPanel #netStatus:empty { display: none; }
#netStatus { min-height: 24px; color: #f2bb43; }
#netReady[aria-pressed="true"] { border-color: #95d7a880; color: #b5efc6; background: #95d7a826; }
@media (max-width: 350px) {
  #networkPanel { padding-left: max(14px, var(--safe-left)); padding-right: max(14px, var(--safe-right)); }
  .net-heading { gap: 8px; }
  .net-heading .net-brand { font-size: 16px; }
  .net-room-banner { margin: 20px 0; }
  .net-room-banner h3 { font-size: 15px; }
  #netPlayers { gap: 8px; }
  #netPlayers li { gap: 8px; min-height: 164px; padding: 12px 8px; }
  #netPlayers .net-empty { padding: 0; }
  .net-avatar { width: 56px; height: 56px; }
  .net-player-name { font-size: 13px; }
  .net-player-meta { font-size: 10px; }
  .net-invite-step .net-share { font-size: 11px; padding: 8px; }
  .net-panel .net-lobby-status { font-size: 11px; }
  #netReady { padding: 8px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  #networkPanel .net-panel { max-width: 720px; }
  #networkPanel.is-lobby { display: block; padding-top: 14px; }
  #networkPanel.is-lobby .net-heading { margin-bottom: 12px; }
  #networkPanel.is-lobby #netLobby { display: grid; grid-template-columns: minmax(190px, .85fr) minmax(280px, 1.15fr); column-gap: 20px; align-items: start; }
  .net-room-banner { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  .net-roster-heading, #netPlayers, .net-panel .net-event { grid-column: 2; }
  .net-roster-heading { grid-row: 1; }
  #netPlayers { grid-row: 2 / 5; }
  #netPlayers li { min-height: 156px; padding: 10px; gap: 7px; }
  #netPlayers .net-empty { padding: 0; }
  .net-avatar { width: 56px; height: 56px; }
  .net-lobby-footer { grid-column: 1; grid-row: 3 / 5; position: static; margin-top: 20px; padding-bottom: 0; }
  .net-panel .net-event { grid-row: 5; }
  .net-panel .net-lobby-status { font-size: 11px; }
}
#status { font-size: 12px; }
.phone-hint { display: none; }
.touch-mode .phone-hint { display: block; font-size: 12px; }
progress { width: 100%; accent-color: #f2bb43; }
details { text-align: left; margin: 22px 0; font-size: 14px; }
summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #ffffff20; border-radius: 12px; }
#helpPanel .help-details { margin: 12px 0; }
#helpPanel .panel > .touch-settings { margin: 20px 0; }
.help-details > summary { justify-content: space-between; gap: 12px; padding: 10px 12px; color: #d1cbdc; line-height: 1.4; list-style: none; touch-action: manipulation; }
.help-details > summary::-webkit-details-marker { display: none; }
.help-details > summary::after { content: '+'; flex: 0 0 auto; color: #f2bb43; font-size: 20px; line-height: 1; }
.help-details[open] > summary::after { content: '−'; }
.help-details > summary:active { background: #ffffff0a; }
.help-details[open] > summary { border-color: #f2bb4360; }
.credits { font-size: 12px; color: #92879f; }
#contentCard label { display: block; font-size: 12px; margin: 12px 0 6px; }
#contentFile { display: block; max-width: 100%; width: 100%; min-height: 44px; color: #d1cbdc; font: inherit; font-size: 13px; }
#contentFile::file-selector-button { min-height: 44px; padding: 8px 12px; border: 1px solid #ffffff35; border-radius: 10px; background: #292631; color: #f4f1ea; font: inherit; cursor: pointer; }
#contentFile:focus-visible { outline: 3px solid #f2bb43; outline-offset: 3px; }
#contentCard .small-help { font-size: 12px; }
#gamebar {
  position: absolute; top: 10px; left: max(10px, var(--safe-left)); right: max(10px, var(--safe-right));
  display: flex; gap: 8px; z-index: 4; pointer-events: none;
}
#gamebar button { pointer-events: auto; background: #17131fba; padding: 0 14px; font-size: 12px; }
#help { margin-left: auto; }
#mouseCapture { position: absolute; top: 68px; left: 50%; transform: translateX(-50%); z-index: 5; width: min(480px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #ffffff28; border-radius: 14px; background: #17131fed; }
#mouseHint { font-size: 12px; line-height: 1.5; color: #d1cbdc; }
#captureMouse { padding: 8px 12px; flex-shrink: 0; font-size: 12px; color: #1d1610; background: #f2bb43; font-weight: 700; }
.mouse-captured #gamebar, .mouse-captured .toolbar { visibility: hidden; }
#touch { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#touchQuick { display: contents; }
.action-label { display: none; }
#look { position: absolute; right: 0; top: 60px; width: 65%; bottom: 0; pointer-events: auto; touch-action: none; }
#look span { position: absolute; top: 32%; right: 25%; font-size: 9px; letter-spacing: .14em; color: #ffffff35; pointer-events: none; }
#stick {
  position: absolute; left: max(22px, var(--safe-left)); bottom: max(34px, var(--safe-bottom));
  width: 120px; height: 120px; border: 2px solid #ffffff42; border-radius: 50%; background: #17131f55;
  pointer-events: auto; touch-action: none; user-select: none;
}
#knob { display: block; position: absolute; width: 48px; height: 48px; border: 1px solid #ffffff70; background: #ffffff40; border-radius: 50%; left: calc(50% - 24px); top: calc(50% - 24px); pointer-events: none; }
#stick small { position: absolute; bottom: -22px; left: 0; width: 100%; text-align: center; color: #ffffff70; font-size: 8px; letter-spacing: .12em; pointer-events: none; }
.actions { position: absolute; right: max(16px, var(--safe-right)); bottom: max(24px, var(--safe-bottom)); display: grid; grid-template-columns: 48px 62px; gap: 9px; pointer-events: none; }
.actions button { pointer-events: auto; height: 48px; font-size: 24px; background: #17131fa0; border-color: #ffffff50; }
.actions .fire { grid-column: 2; grid-row: 1/3; height: 105px; color: #f2bb43; border-color: #f2bb4370; font-size: 40px; }
#touchInventory {
  position: absolute; left: max(12px, var(--safe-left)); right: max(12px, var(--safe-right));
  bottom: max(202px, calc(182px + var(--safe-bottom))); pointer-events: none;
}
.inventory-label { display: block; margin: 0 0 6px; color: #ffffff8c; font-size: 9px; letter-spacing: .12em; }
.inventory-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.inventory-buttons button { min-width: 44px; min-height: 48px; padding: 4px 2px; pointer-events: auto; background: #17131fba; border-color: #ffffff42; font-size: 11px; line-height: 1.25; }
.inventory-buttons button.held, .inventory-buttons button:active { background: #f2bb43; color: #171315; }
.inventory-buttons button:disabled { opacity: .4; }
.landscape #touchInventory { top: 66px; bottom: auto; max-width: 360px; margin-inline: auto; }
.landscape .inventory-label { text-align: center; }
#gameShell:not(.landscape) {
  --gamebar-bottom: 114px;
  --controls-space: max(274px, calc(254px + var(--safe-bottom)));
}
#gameShell:not(.landscape) #gamebar {
  top: 8px;
  display: grid;
  grid-template-columns: .8fr .65fr 1.25fr 1.2fr;
  grid-template-rows: 44px 44px;
  gap: 6px;
}
#gameShell:not(.landscape) #gamebar button { min-width: 44px; padding: 0 5px; white-space: nowrap; }
#gameShell:not(.landscape) #gamebar [data-action="center"] { grid-column: 2 / 4; }
#gameShell:not(.landscape) #help { margin-left: 0; }
#gameShell:not(.landscape) #mouseCapture { top: var(--gamebar-bottom); }
#gameShell:not(.landscape) canvas {
  width: auto;
  height: calc(100% - var(--gamebar-bottom) - var(--safe-bottom));
  max-width: calc(100% - var(--safe-left) - var(--safe-right));
  margin-top: var(--gamebar-bottom);
  align-self: flex-start;
}
body.touch-mode #gameShell:not(.landscape) canvas {
  /* Keep the framebuffer 4:3 between the two button rows and the thumb controls. */
  height: max(1px, min(
    calc((var(--shell-width, 100vw) - var(--safe-left) - var(--safe-right)) * .75),
    calc(100% - var(--gamebar-bottom) - var(--controls-space))
  ));
  max-height: none;
}
#gameShell:not(.landscape) #look {
  top: var(--gamebar-bottom);
  bottom: var(--controls-space);
  width: 65%;
}
#gameShell:not(.landscape) #look span { top: auto; bottom: 14px; right: 20%; }
#gameShell.landscape { --toolbar-height: 44px; }
body.touch-mode .landscape canvas { height: 100%; width: auto; max-height: 100%; margin: 0; align-self: center; }
.landscape #stick { bottom: max(25px, var(--safe-bottom)); width: 108px; height: 108px; }
.landscape .actions { bottom: max(12px, var(--safe-bottom)); }
.landscape .overlay { padding-top: 16px; }
.landscape .panel h1 { font-size: 48px; margin: 12px 0; }
.landscape .panel > p { margin: 8px 0; }
.landscape .panel details { margin: 12px 0; }
/* During landscape touch play, secondary controls unfold only when needed. */
#gameShell.compact-controls > .toolbar { display: none; }
.compact-controls #stage { height: 100%; }
.compact-controls #gamebar { top: max(8px, var(--safe-top)); right: auto; gap: 6px; }
.compact-controls #gamebar > button { padding-inline: 12px; }
.compact-controls #gamebarExtras {
  display: none; position: absolute; top: 52px; left: 0; width: 250px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px;
  max-height: calc(var(--shell-height, 100dvh) - var(--safe-top) - var(--safe-bottom) - 76px);
  overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; touch-action: pan-y;
  border: 1px solid #ffffff30; border-radius: 14px; background: #17131ff5;
}
.compact-controls.tools-open #gamebarExtras { display: grid; }
.compact-controls #gamebarExtras button { margin: 0; min-width: 0; touch-action: manipulation; }
.compact-controls #gamebarExtras #help { grid-column: 1 / -1; }
.compact-controls #toolbarTools button { font-size: 22px; }
.compact-controls #moreControls[aria-expanded="true"],
.compact-controls #inventoryToggle[aria-expanded="true"] { border-color: #f2bb43; color: #f2bb43; }
.compact-controls #moreControls[data-attention="true"] { border-color: #f2bb43; }
.compact-controls #touchInventory {
  top: max(8px, var(--safe-top)); left: auto; right: max(10px, var(--safe-right));
  bottom: auto; max-width: none; margin: 0; z-index: 1;
}
.compact-controls .inventory-label { display: none; }
.compact-controls #inventoryToggle { pointer-events: auto; padding-inline: 12px; font-size: 12px; background: #17131fba; }
.compact-controls .inventory-buttons {
  display: none; position: absolute; top: 52px; right: 0; width: 250px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; pointer-events: auto;
  border: 1px solid #ffffff30; border-radius: 14px; background: #17131ff5;
}
.compact-controls.inventory-open .inventory-buttons { display: grid; }
.compact-controls #look { top: max(60px, calc(var(--safe-top) + 52px)); }
.compact-controls .overlay { padding-top: max(16px, var(--safe-top)); }
/* Portrait touch play has one toolbar and a dedicated two-thumb console. */
#gameShell.console-controls {
  --gamebar-bottom: 0px;
  --controls-space: calc(274px + var(--safe-bottom));
  --toolbar-height: 56px;
  --console-stick-size: 132px;
  --console-stick-fit: min(var(--console-stick-size), max(88px, calc(var(--shell-width, 100vw) - var(--safe-left) - var(--safe-right) - 172px)));
}
#gameShell.console-controls > .toolbar {
  gap: 6px;
  padding-inline: max(12px, var(--safe-left)) max(12px, var(--safe-right));
  border-bottom: 1px solid #ffffff0d;
}
#gameShell.console-controls .toolbar strong {
  font-size: 13px; letter-spacing: .025em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
#gameShell.console-controls #consoleMenu {
  width: auto; padding-inline: 10px; font-size: 12px; font-weight: 650;
  white-space: nowrap; background: #211d2a;
}
#gameShell.console-controls #nativeConfirm { width: 44px; font-size: 12px; font-weight: 700; }
#gameShell.console-controls #consoleMenu[aria-expanded="true"],
#gameShell.console-controls #consoleMenu[data-attention="true"],
#gameShell.console-controls #inventoryToggle[aria-expanded="true"] {
  border-color: #f2bb43; color: #f2bb43;
}
body.touch-mode #gameShell.console-controls canvas {
  /* Show the full native framebuffer, including its HUD, above the console. */
  height: max(1px, min(
    calc((var(--shell-width, 100vw) - var(--safe-left) - var(--safe-right)) * .75),
    calc(100% - var(--controls-space))
  ));
  width: auto; max-width: calc(100% - var(--safe-left) - var(--safe-right));
  max-height: none; margin: 0; align-self: flex-start;
}
#gameShell.console-controls #touch::before {
  content: ''; position: absolute; inset: auto 0 0;
  height: var(--controls-space); border-top: 1px solid #ffffff08;
  background: #0b090e; pointer-events: none;
}
#gameShell.console-controls #look {
  top: 0; bottom: calc(76px + var(--safe-bottom)); width: 65%;
}
#gameShell.console-controls #look span {
  top: auto; bottom: 200px; right: max(16px, var(--safe-right));
  color: #b8afc4; font-size: 9px; letter-spacing: .1em;
}
#gameShell.console-controls #stick {
  width: var(--console-stick-fit); height: var(--console-stick-fit); left: max(20px, var(--safe-left));
  bottom: calc(104px + var(--safe-bottom)); background: #17131f;
  border-color: #ffffff4a;
}
#gameShell.console-controls #knob { background: #b7afc44d; border-color: #cfc7db80; }
#gameShell.console-controls #stick small {
  bottom: -22px; color: #b8afc4; font-size: 9px; letter-spacing: .1em;
}
#gameShell.console-controls .actions {
  right: max(16px, var(--safe-right)); bottom: calc(76px + var(--safe-bottom));
  grid-template-columns: 56px 76px; grid-template-rows: repeat(3, 56px); gap: 8px;
}
#gameShell.console-controls .actions button {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 3px; height: 56px; padding: 4px; background: #211c2a;
  border-color: #ffffff35; font-size: 24px;
}
#gameShell.console-controls .action-icon { line-height: 1; pointer-events: none; }
#gameShell.console-controls .action-label {
  display: block; font-size: 10px; line-height: 1.15; font-weight: 550;
  white-space: normal; pointer-events: none;
}
#gameShell.console-controls .actions .fire {
  height: 120px; background: #f2bb4310; color: #f2bb43; border-color: #f2bb4380;
}
#gameShell.console-controls .fire .action-icon { font-size: 38px; }
#gameShell.console-controls .fire .action-label { font-size: 11px; font-weight: 750; }
#gameShell.console-controls #touchQuick {
  position: absolute; left: max(12px, var(--safe-left)); right: max(12px, var(--safe-right));
  bottom: calc(12px + var(--safe-bottom)); display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .85fr);
  gap: 8px; height: 48px; pointer-events: none; z-index: 2;
}
#gameShell.console-controls #touchQuick > button,
#gameShell.console-controls #inventoryToggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-width: 44px; height: 48px; padding: 0 8px;
  pointer-events: auto; font-size: 12px; white-space: nowrap;
  background: #211c2a; border-color: #ffffff30;
}
#gameShell.console-controls #quickMedkit { color: #b5efc6; }
#gameShell.console-controls #touchInventory {
  position: static; inset: auto; max-width: none; margin: 0; min-width: 0;
}
#gameShell.console-controls .inventory-label { display: none; }
#gameShell.console-controls .inventory-buttons {
  display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 10px);
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px;
  max-height: min(260px, calc(var(--shell-height, 100dvh) - var(--safe-top) - var(--safe-bottom) - 148px));
  overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; touch-action: pan-y;
  border: 1px solid #ffffff30; border-radius: 14px; background: #17131ff5;
  box-shadow: 0 8px 24px #0008;
}
#gameShell.console-controls.inventory-open .inventory-buttons { display: grid; }
#gameShell.console-controls .inventory-buttons button {
  min-height: 48px; padding: 8px; font-size: 12px; touch-action: manipulation;
}
#gameShell.console-controls #gamebar {
  top: 8px; display: block; z-index: 7;
  left: max(10px, var(--safe-left)); right: max(10px, var(--safe-right));
}
#gameShell.console-controls #gamebar > button { display: none; }
#gameShell.console-controls #gamebarExtras {
  display: none; position: absolute; top: 0; left: 0; right: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px;
  max-height: calc(var(--shell-height, 100dvh) - var(--toolbar-height) - var(--safe-top) - var(--safe-bottom) - 20px);
  overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; touch-action: pan-y;
  border: 1px solid #ffffff30; border-radius: 14px; background: #17131ff5;
  box-shadow: 0 12px 30px #0008;
}
#gameShell.console-controls.tools-open #gamebarExtras { display: grid; }
#gameShell.console-controls #gamebarExtras button {
  min-width: 0; min-height: 48px; padding: 8px; margin: 0; touch-action: manipulation;
  font-size: 12px; white-space: normal;
}
#gameShell.console-controls #gamebarExtras [data-action="center"] { grid-column: auto; }
#gameShell.console-controls #gamebarExtras #saveAccount { font-size: 12px; }
#gameShell.console-controls #saveToast { bottom: calc(284px + var(--safe-bottom)); }
#gameShell.console-controls button:active,
#gameShell.console-controls button.held { transform: none; }
#gameShell.console-controls .actions button:active,
#gameShell.console-controls .actions button.held,
#gameShell.console-controls #touchQuick > button:active,
#gameShell.console-controls #touchQuick > button.held {
  background: #f2bb43; color: #171315; border-color: #f2bb43;
}
.touch-settings { display: none; }
.touch-mode .touch-settings { display: block; }
.touch-mode .desktop-help { display: none; }
.touch-settings label { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 14px; text-align: left; }
.touch-settings output { color: #f2bb43; font-variant-numeric: tabular-nums; white-space: nowrap; }
#sensitivity { width: 100%; height: 44px; margin: 6px 0 0; accent-color: #f2bb43; touch-action: none; }
.touch-settings .small-help { font-size: 12px; }
@media (max-width: 350px) {
  #gameShell:not(.landscape) #stick { width: 104px; height: 104px; left: max(14px, var(--safe-left)); }
  #gameShell:not(.landscape) .actions { right: max(12px, var(--safe-right)); gap: 7px; grid-template-columns: 44px 56px; }
  #gameShell:not(.landscape) .toolbar strong { font-size: 12px; }
}
@media (max-width: 350px) {
  #gameShell.console-controls { --console-stick-size: 112px; }
  #gameShell.console-controls > .toolbar {
    padding-inline: max(8px, var(--safe-left)) max(8px, var(--safe-right));
  }
  #gameShell.console-controls .toolbar strong { font-size: 11px; }
  #gameShell.console-controls #consoleMenu { padding-inline: 8px; }
  #gameShell.console-controls #stick {
    width: var(--console-stick-fit); height: var(--console-stick-fit); left: max(14px, var(--safe-left));
  }
  #gameShell.console-controls .actions {
    right: max(12px, var(--safe-right)); grid-template-columns: 52px 64px; gap: 8px;
  }
  #gameShell.console-controls #touchQuick > button,
  #gameShell.console-controls #inventoryToggle { padding-inline: 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { button:active, button.held { transform: none; } }

#browserPanel { z-index: 18; background: #15131f; }
#browserPanel h2 { font-size: clamp(26px, 6vw, 34px); line-height: 1.15; margin: 16px 0; }
#browserPanel #browserStatus { min-height: 24px; font-size: 13px; color: #f4d994; overflow-wrap: anywhere; }
#browserPanel button { touch-action: manipulation; }
#browserHeading:focus { outline: none; }

/* The native runtime has stopped; keep exit feedback above every game overlay. */
#exitPanel{z-index:20;background:#15131f}
#exitHeading{font-size:26px;line-height:1.25;outline:none}
#exitStatus{line-height:1.55;overflow-wrap:anywhere}
#exitActions button{touch-action:manipulation;white-space:normal}
.gyro-settings{display:none;text-align:left;border:1px solid #ffffff25;border-radius:14px;padding:16px;margin:16px 0}
.touch-mode .gyro-settings{display:block}
.gyro-settings h3{font-size:16px;margin:0 0 8px}
.gyro-settings p{font-size:13px;margin:8px 0}
#gyroStatus{color:#e5cc99;min-height:42px}
#gyroToggle[aria-pressed="true"]{color:#b5efc6;border-color:#95d7a880}
.gyro-settings label{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-top:16px}
#gyroSensitivity{width:100%;height:44px;accent-color:#f2bb43;touch-action:none}
#gyroSensitivity:focus-visible{outline:3px solid #f2bb43;outline-offset:2px}
.gyro-settings button{touch-action:manipulation}