/* Path: static/mobile.css
   Purpose: the page on phones and tablets. While touch is in charge (html.bk-touch-ui, set by
   touch.js) the view fills the screen inside the safe area, the keyboard strip and the page below
   give way to the touch controls, and every panel fits a small screen with thumb-sized buttons.
   html.bk-page lets the page below be read normally; html.bk-portrait asks a phone to turn sideways. */

/* ---- the start screen, before touch.js has decided anything ---- */
.start { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; }
.start-go { min-height: 48px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
  .start-go { padding: 14px 28px; font-size: 15px; }
}
@media (max-height: 420px) {
  .start-card { gap: 8px; }
  .start-card h1 { font-size: 34px; }
  .start-card p { font-size: 12px; }
  .start-go { margin-top: 2px; }
}

/* ---- the view fills the screen ---- */
html.bk-touch-ui:not(.bk-page), html.bk-touch-ui:not(.bk-page) body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.bk-touch-ui:not(.bk-page) body { position: fixed; inset: 0; width: 100%; -webkit-text-size-adjust: 100%; user-select: none; -webkit-user-select: none; }
html.bk-touch-ui:not(.bk-page) #game { max-width: none; padding: 0; }
html.bk-touch-ui:not(.bk-page) .stage-wrap { position: fixed; inset: 0; }
html.bk-touch-ui:not(.bk-page) .stage-wrap .stage { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
html.bk-touch-ui:not(.bk-page) .bar,
html.bk-touch-ui:not(.bk-page) .panels,
html.bk-touch-ui .keys-bar,
html.bk-touch-ui .bk-gear,
html.bk-touch-ui .look { display: none; }

/* The room name, small and centered at the top, between the buttons and the HUD corner. */
html.bk-touch-ui:not(.bk-page) .hud { position: fixed; top: max(6px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 46; padding: 0; pointer-events: none;
  max-width: 34vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; text-align: center; }
html.bk-touch-ui:not(.bk-page) .rname { font-size: 15px; text-shadow: 0 1px 3px #000; }
html.bk-touch-ui:not(.bk-page) .rcode { display: block; margin: 0; font-size: 10px; }
html.bk-touch-ui .compass { top: calc(max(6px, env(safe-area-inset-top)) + 40px); }
html.bk-touch-ui .version { top: auto; bottom: max(2px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
html.bk-touch-ui .update-reload { min-width: 44px; min-height: 44px; }

/* The HUD corner, compact: two short rows instead of a tall column. */
html.bk-touch-ui .hud-corner { top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: 3px 10px; padding: 5px 8px; font-size: 10px; max-width: min(300px, 32vw); }
html.bk-touch-ui .hud-corner .meter { gap: 4px; }
html.bk-touch-ui .hud-corner .meter i { width: 40px; height: 5px; }
html.bk-touch-ui .hud-corner .fx { font-size: 10px; }
html.bk-touch-ui .hud-corner .copyright { flex-basis: 100%; text-align: right; font-size: 10px; }
html.bk-touch-ui .hud-corner .fx span { padding: 1px 5px; }
/* Name and code are read here and worked from the menu (Your name, Copy return code): too small to tap. */
html.bk-touch-ui .hud-corner .code-tag, html.bk-touch-ui .hud-corner .linkish { font-size: 10px; pointer-events: none; }
@media (max-width: 700px) {
  html.bk-touch-ui .hud-corner .meter > span { display: none; }
}

/* Toasts and the hint sit above the middle, clear of both thumbs. */
html.bk-touch-ui .toast { bottom: auto; top: calc(max(6px, env(safe-area-inset-top)) + 100px); max-width: min(440px, 34vw); font-size: 13px; padding: 6px 10px; z-index: 46; }
html.bk-touch-ui .hint { max-width: 44vw; white-space: normal; text-align: center; font-size: 11px; }

/* ---- panels: thumb-sized, inside the screen, scrolling inside themselves ---- */
html.bk-touch-ui .ghost, html.bk-touch-ui .act, html.bk-touch-ui .tabs button { min-height: 44px; touch-action: manipulation; }
html.bk-touch-ui .field { height: 44px; font-size: 16px; }
/* Paint by thumb: bigger swatches, and the garment map beside the grid kept small. */
html.bk-touch-ui .paint-swatch { width: 40px; height: 40px; touch-action: manipulation; }
html.bk-touch-ui .paint-map { flex-basis: 96px; }
html.bk-touch-ui .body-pick .ghost { flex: 1 1 0; }
/* A phone on its side: the grid fits the height left under the store's header. */
@media (max-height: 500px) {
  html.bk-touch-ui .paint-grid { max-width: max(150px, calc(100dvh - 150px)); }
}
html.bk-touch-ui .inv-panel, html.bk-touch-ui .sketch-panel, html.bk-touch-ui .writer, html.bk-touch-ui .fridge:not(.shop), html.bk-touch-ui .bk-settings, html.bk-touch-ui .gate form, html.bk-touch-ui .codecard {
  max-height: calc(100% - 16px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
html.bk-touch-ui .inv-panel { width: min(560px, calc(100% - 24px)); padding: 10px 12px; }
html.bk-touch-ui .inv-panel header { margin-bottom: 8px; }
html.bk-touch-ui .inv-close, html.bk-touch-ui .inv-panel footer, html.bk-touch-ui .inv-grid li .key, html.bk-touch-ui .sketch-panel header span { display: none; }
html.bk-touch-ui .inv-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; margin-bottom: 8px; }
html.bk-touch-ui .inv-grid li { min-height: 64px; padding: 8px 4px 6px; gap: 4px; touch-action: manipulation; cursor: pointer; }
html.bk-touch-ui .inv-grid li svg { width: 56px; height: 20px; }
.bk-invbar { display: none; }
html.bk-touch-ui .bk-invbar { display: flex; flex-wrap: wrap; gap: 6px; }
html.bk-touch-ui .bk-invbar .ghost { flex: 1 1 auto; }
.bk-close { display: none; }
html.bk-touch-ui .bk-close { display: inline-block; }
html.bk-touch-ui .sketch-panel { padding: 10px; gap: 8px; width: min(760px, calc(100% - 16px)); grid-template-columns: 1fr auto; align-items: start; }
html.bk-touch-ui .sketch-panel header { grid-column: 1 / -1; align-items: center; }
html.bk-touch-ui .sketch-panel canvas { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); width: auto; height: calc(100dvh - 110px); justify-self: center; }
html.bk-touch-ui .sketch-tools { flex-direction: column; }
html.bk-touch-ui .terminal { inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
html.bk-touch-ui .terminal iframe { touch-action: none; }
/* The phone keyboard covers the bottom half: the writer sits at the top. */
html.bk-touch-ui .writer { top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); padding: 10px; gap: 8px; }
html.bk-touch-ui #pad { max-height: 46vh; max-height: 46dvh; width: auto; justify-self: center; }
html.bk-touch-ui .fridge:not(.shop) { padding: 14px; gap: 8px; }
/* The store keeps its centring transform: top to bottom inside the safe area, its list scrolling inside. */
html.bk-touch-ui .shop { top: max(6px, env(safe-area-inset-top)); bottom: max(6px, env(safe-area-inset-bottom)); transform: translateX(-50%); height: auto;
  width: min(660px, calc(100% - 20px)); padding: 10px 12px; gap: 8px; }
html.bk-touch-ui .shop .inv-tabs { margin-bottom: 0; }
html.bk-touch-ui .store-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
html.bk-touch-ui .store-tabs button { flex: none; height: 44px; }
html.bk-touch-ui .shop-code .field { height: 44px; }
html.bk-touch-ui .store-main { touch-action: pan-y; }
html.bk-touch-ui .shop-gate .linkish { min-height: 44px; }
/* Short screens: the two tabs share a row with the wallet and Close, and the list gets the rest. */
@media (max-height: 500px) {
  html.bk-touch-ui .shop-head h2, html.bk-touch-ui .shop > .shop-note { display: none; }
  html.bk-touch-ui .shop { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  html.bk-touch-ui .shop > * { grid-column: 1 / -1; }
  html.bk-touch-ui .shop > .inv-tabs { grid-column: 1; }
  html.bk-touch-ui .shop > .shop-head { grid-column: 2; justify-content: flex-end; }
  html.bk-touch-ui .store-preview { height: 150px; }
}
/* Centred by game.css (both axes); only wider here, so two columns of choices fit. */
html.bk-touch-ui #choices { width: min(520px, calc(100% - 32px)); }
html.bk-touch-ui #choicesList { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* With a panel up the room name steps aside; it sits outside the view and would print over the panel. */
html.bk-panel .hud, html.bk-panel .track, html.bk-panel .objective, html.bk-panel .hint, html.bk-panel .chat-log:not(.open) { visibility: hidden; }
html.bk-touch-ui .inv-grid li .inv-acts button, html.bk-touch-ui .inv-pockets li button { min-width: 44px; }
/* The corner would sit over the panel; the shop keeps it, since the return code to paste is shown there. */
html.bk-panel:not(:has(#shop:not([hidden]))) .hud-corner { visibility: hidden; }
html.bk-touch-ui .gate { padding: 8px; }
html.bk-touch-ui .gate form, html.bk-touch-ui .codecard { padding: 14px; gap: 8px; }

/* ---- the menu sheet ---- */
.bk-sheet { position: absolute; left: 50%; top: 50%; z-index: 50; transform: translate(-50%, -50%); display: grid; gap: 12px; width: min(460px, calc(100% - 24px)); max-height: calc(100% - 16px);
  overflow-y: auto; padding: 16px; background: rgba(7,11,20,.94); border: 1px solid rgba(77,182,247,.35); color: #cfe6ff; font-size: 12px; }
.bk-sheet-title { margin: 0; font: 400 20px 'Special Elite', 'Courier New', monospace; color: #eaf4ff; }
.bk-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.bk-sheet .ghost { min-height: 44px; }
/* Sideways, the menu is wide and short so every button and the way back fit without scrolling. */
@media (orientation: landscape) {
  .bk-sheet { width: min(760px, calc(100% - 24px)); gap: 8px; padding: 12px 16px; }
  .bk-sheet-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
}
.bk-resume { min-height: 48px; }

/* ---- reading the page below the game ---- */
.bk-back { display: none; }
html.bk-page .bk-back { display: block; position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; min-height: 48px; }
html.bk-page .keys-bar { display: none; }

/* ---- turn sideways ---- */
.bk-rotate { display: none; }
html.bk-portrait .bk-rotate { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center;
  background: rgba(5,8,15,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #eaf4ff; font: 400 20px/1.4 'Special Elite', 'Courier New', monospace; }
html.bk-portrait .bk-rotate p { margin: 0; max-width: 16em; }
html.bk-portrait .bk-rotate svg { color: #4DB6F7; }
html.bk-portrait .bk-rotate-phone { transform-origin: 60px 72px; animation: bk-turn 2.4s ease-in-out infinite; }
@keyframes bk-turn { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
html.bk-portrait .stage > canvas:first-child { filter: blur(10px) brightness(.5) saturate(.6); }
html.bk-portrait .hud, html.bk-portrait .hud-corner, html.bk-portrait .hint, html.bk-portrait .cross { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { html.bk-portrait .bk-rotate-phone { animation: none; } }

/* Phones skip the film grain: a full-screen blended layer that animates costs fill rate a phone lacks. */
@media (pointer: coarse) { .grain { display: none; } }

/* ---- how to get full screen on an iPhone, said once ---- */
.bk-home-tip { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 70;
  width: min(420px, calc(100% - 32px)); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px;
  background: rgba(8,12,22,.94); color: #e8f3ff; font: 13px/1.4 'JetBrains Mono', monospace; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.bk-home-tip p { margin: 0; flex: 1; }
.bk-home-tip .act { min-height: 44px; flex: none; }

/* The objective and the quest tracker sit under the top row of buttons, clear of the stick below. */
html.bk-touch-ui .track { top: calc(max(8px, env(safe-area-inset-top)) + 52px); left: max(10px, env(safe-area-inset-left)); max-width: min(300px, 38vw); }
/* Between the side button columns where there is room; on a narrow phone at least wide enough for a short line, at a smaller size. */
html.bk-touch-ui .objective:not(.fresh) { top: calc(max(8px, env(safe-area-inset-top)) + 52px); max-width: max(240px, calc(100% - 2 * min(300px, 38vw) - 40px)); }
@media (max-width: 700px) { html.bk-touch-ui .objective:not(.fresh) { font-size: 11px; padding: 4px 8px; } }
html.bk-touch-ui .quest-log .ql-close { min-height: 44px; }
html.bk-touch-ui .quest-log kbd { display: none; }
/* The room chips (radio, bin) sit under the tracker, above where the stick rests. */
html.bk-touch-ui .bk-chips { bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 150px); left: max(10px, env(safe-area-inset-left)); }
html.bk-touch-ui .bk-chip { min-height: 44px; padding: 6px 12px; }
html.bk-touch-ui .bk-chip kbd { display: none; }

/* Panels from social.js and photo mode: thumb-sized, inside the safe area. */
html.bk-touch-ui .bk-modal-back { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
html.bk-touch-ui .bk-panel { touch-action: pan-y; }
html.bk-touch-ui .bk-panel a { display: inline-flex; align-items: center; min-height: 44px; }
html.bk-touch-ui .bk-photobar { bottom: max(8px, env(safe-area-inset-bottom)); }
html.bk-touch-ui .bk-photobar button { min-height: 44px; padding: 6px 12px; }
/* The keypad pad in a list (game.js dialPad): a row of digit keys across the whole list. */
html.bk-touch-ui #choicesList .dial-pad { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }

/* The ending on a short screen: smaller, and scrolling rather than cut off top and bottom. */
@media (max-height: 500px) {
  .ending { display: block; overflow-y: auto; padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .end-card { margin: 0 auto; gap: 6px; }
  .end-card h2 { font-size: 30px; }
  .end-stats div { padding: 4px; }
  .end-stats b { font-size: 17px; }
  .end-board { max-height: 34vh; }
  .end-actions .act, .end-actions .ghost { min-height: 44px; }
}
/* Settings (ui.js): rows and the graphics menu big enough for a thumb. */
html.bk-touch-ui .bk-settings .bk-check { min-height: 44px; }
html.bk-touch-ui .bk-settings .bk-select, html.bk-touch-ui .bk-settings .bk-btn { min-height: 44px; }
html.bk-touch-ui .bk-settings input[type="range"] { height: 44px; }
/* Key names mean nothing on a touch screen; the words beside them still say what a tap does. */
html.bk-touch-ui :is(.reader-close, .inspect-help) kbd { display: none; }
/* The debug HUD's buttons at thumb size, and the console at the top, clear of the phone keyboard. */
html.bk-touch-ui .dbg-btn { min-height: 44px; padding: 0 12px; }
html.bk-touch-ui .dbg-con { top: max(8px, env(safe-area-inset-top)); bottom: auto; height: min(300px, 55%); width: min(760px, calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
html.bk-touch-ui .dbg-input { font-size: 16px; min-height: 36px; }