/* ─────────────────────────────────────────────────────────────────────
   css/mobile.css — phone/tablet layout (2026-09-26).

   Every rule is scoped to html.is-mobile (set pre-paint by js/boot.js,
   the same flag as IS_MOBILE in scene/state.js), so desktop never sees any
   of this. Mobile is "being only" for now — no build UI (gated in app.js's
   _syncBuildEligibility) — so this only lays out the being HUD: title,
   clock/weather, chat pill, bottom-left menu (with Log in / Register), minimap, toasts.

   Three layers:
     1. every touch device (iPad included): notch/home-bar safe areas, no
        keyboard-key badges, no browser pinch/double-tap zoom on the HUD
     2. narrow portrait phones  (max-width: 600px)
     3. short landscape phones  (max-height: 500px)

   The minimap and its button row set position with inline styles
   (rendering/minimap.js), hence the !important on those two only.
   ───────────────────────────────────────────────────────────────────── */

html.is-mobile {
	--sa-top: env(safe-area-inset-top, 0px);
	--sa-right: env(safe-area-inset-right, 0px);
	--sa-bottom: env(safe-area-inset-bottom, 0px);
	--sa-left: env(safe-area-inset-left, 0px);
	/* Panning/scrolling inside modals still works; pinch-zoom and
	   double-tap-zoom of the whole page (which strands the HUD half
	   off-screen) don't. The canvas has its own touch-action:none. */
	touch-action: pan-x pan-y;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html.is-mobile button,
html.is-mobile a,
html.is-mobile input {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* ── 1. All touch devices ─────────────────────────────────────────── */

/* Keyboard-key badges ([TAB], [M], [G], [ENTER], [F]...) mean nothing
   without a keyboard. The buttons they sit in keep their labels. */
html.is-mobile .key {
	display: none !important;
}

/* Rotate: an icon instead of the word (the [TAB] badge is gone above).
   The .pressed flash — a white key badge on desktop — becomes a quick
   turn of the icon. */
html.is-mobile #minimap-rotate-btn .hud-label {
	display: none;
}
html.is-mobile #minimap-rotate-btn .hud-icon {
	display: block;
	transition: transform 0.2s ease-out;
}
html.is-mobile #minimap-rotate-btn.pressed .hud-icon {
	transform: rotate(45deg);
	color: #fff;
}

/* Safe areas — same offsets as main.css, plus the notch/home-bar inset. */
html.is-mobile #game-title {
	top: calc(24px + var(--sa-top));
	left: calc(16px + var(--sa-left));
}
html.is-mobile #island-indicator {
	top: calc(24px + var(--sa-top));
}
html.is-mobile #top-right-hud {
	top: calc(24px + var(--sa-top));
	right: calc(28px + var(--sa-right));
}
html.is-mobile #chat-pill {
	bottom: calc(24px + var(--sa-bottom));
}
html.is-mobile .bottom-toast {
	bottom: calc(88px + var(--sa-bottom) + var(--stack-index, 0) * 28px);
}
html.is-mobile #minimap-hud-row {
	right: calc(12px + var(--sa-right)) !important;
	bottom: calc(12px + var(--sa-bottom)) !important;
}
/* No corner minimap on touch devices: it sat right where the right thumb
   drags the camera. The Map button opens the full map instead (and
   minimap.js skips drawing it on mobile). */
html.is-mobile #minimap-canvas {
	display: none !important;
}

/* Start screen (ui/mobile_start.js) — above the loading overlay (99998)
   so it is the first thing a phone shows. Not in the ?intro=1 flow, and
   not when already launched from the home screen (see the JS).

   Two phases:
     loading — black (the ::before layer), title + tagline up top, Start
               and "The world is waking up..." in the thumb zone below.
               Start is live from the first frame (fullscreen gesture).
     html.start-world-ready — the black layer and the loading overlay under
               it fade out, leaving only soft top/bottom shading, so the
               live diorama shows behind the title before Start is tapped.
               The HUD stays hidden (html.has-session) until Start. */
html.is-mobile:not(.intro-flow) #mobile-start {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: calc(20dvh + var(--sa-top)) 24px calc(12dvh + var(--sa-bottom));
	text-align: center;
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 44%,
		rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.6) 100%);
	font-family: var(--ui-font);
	transition: opacity 0.5s;
}
html.is-mobile #mobile-start::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #000;
	transition: opacity 1.6s ease;
}
html.is-mobile.start-world-ready #mobile-start::before {
	opacity: 0;
}
/* The loading overlay ("Building terrain..." + spinner) sits right under
   the Start screen: invisible while Start is up — else it ghosts through
   the fading black — and after the world is ready (the reveal hides it a
   frame later). Tapping Start before the world is ready brings it back as
   the plain loading screen. */
html.start-open #loading-overlay,
html.start-world-ready #loading-overlay {
	opacity: 0;
}
/* World labels that show before the reveal (html.has-session doesn't
   cover them) would peek through the see-through phase: the island name
   and "Tap here to board..." prompts. Hidden while Start is up. */
html.start-open #island-indicator,
html.start-open .bottom-toast,
html.start-open #chat-bubble-layer {
	visibility: hidden;
}
@media (display-mode: fullscreen), (display-mode: standalone) {
	html.is-mobile #mobile-start {
		display: none;
	}
}
html.is-mobile #mobile-start.hidden {
	opacity: 0;
	pointer-events: none;
}
/* Landscape phones: less vertical room — pull both groups inward. */
@media (max-height: 500px) {
	html.is-mobile:not(.intro-flow) #mobile-start {
		padding-top: calc(10dvh + var(--sa-top));
		padding-bottom: calc(8dvh + var(--sa-bottom));
	}
	/* No room for the footnote beside the bars; it is back in portrait. */
	#mobile-start-small {
		display: none;
	}
}

#mobile-start-title {
	font-size: 30px;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #f0ebe0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
#mobile-start-tagline {
	max-width: 280px;
	margin: 14px auto 0;
	font: 200 15px/1.5 var(--ui-font);
	letter-spacing: 0.5px;
	color: #f2eee7;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 12px rgba(0, 0, 0, 0.45);
}
#mobile-start-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
html.is-mobile #mobile-start-btn {
	min-width: 180px;
	padding: 16px 48px;
	font: 500 16px var(--ui-font);
	letter-spacing: 1px;
	color: #1c1a16;
	background: rgba(244, 234, 216, 0.94);
	border: none;
	border-radius: 999px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
	cursor: pointer;
}
/* The loading bars on the Start screen: a little smaller than desktop
   so the three columns fit a 320px phone. */
#mobile-start .load-bars {
	font-size: 10px;
}
/* Every step done: the bars fade away, leaving Enter (2026-10-08). The
   space is kept so Enter doesn't jump. A ceiling release never gets
   .lb-finished — its stuck bar stays visible. */
#mobile-start .load-bars {
	transition: opacity 0.5s ease 0.15s;
}
#mobile-start .load-bars.lb-finished {
	opacity: 0;
}
/* Fixed width so the window doesn't jump as values change. */
#mobile-start .lb-list {
	width: calc(9.5em + 104px + 4em + 20px);
}
#mobile-start .lb-row {
	grid-template-columns: 9.5em 104px 4em;
}
html.is-mobile #mobile-start-btn:disabled {
	opacity: 0.45;
	cursor: default;
}
/* The device note + Home Screen tip (2026-10-08): moved out of the way —
   small and faint at the very bottom edge, below Enter. */
#mobile-start-small {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(14px + var(--sa-bottom));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	opacity: 0.6;
}
/* The honest "this asks a lot of your device" note. */
#mobile-start-note {
	max-width: 290px;
	font-size: 10.5px;
	line-height: 1.45;
	text-align: center;
	color: #c8c0b2;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 10px rgba(0, 0, 0, 0.45);
}
#mobile-start-browser {
	display: none;
}
#mobile-start.suggest-chrome #mobile-start-browser {
	display: inline;
}
#mobile-start-note b {
	font-weight: 500;
	color: #f0ebe0;
}

/* Only where the Fullscreen API is missing (iPhone Safari). */
#mobile-start-tip {
	display: none;
	max-width: 260px;
	font-size: 10.5px;
	line-height: 1.5;
	color: #c8c0b2;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
#mobile-start.no-fullscreen #mobile-start-tip {
	display: block;
}
#mobile-start-tip b {
	font-weight: 500;
	color: #f0ebe0;
}

/* Map overlay (rendering/minimap.js): the map fills the screen; the island
   list/search becomes a full-screen sheet opened by the 🔍 at the top-left
   (#map-overlay.list-open) and closed by its own ×. Inline styles in JS,
   hence the !important. */
html.is-mobile #map-island-list {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none !important;
	padding-top: var(--sa-top);
	padding-bottom: var(--sa-bottom);
	border-right: none !important;
}
html.is-mobile #map-overlay.list-open #map-island-list {
	display: flex !important;
}
html.is-mobile #map-search-btn,
html.is-mobile #map-list-close {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: none;
	color: #e8e2d8;
	cursor: pointer;
}
html.is-mobile #map-search-btn {
	position: absolute;
	top: calc(12px + var(--sa-top));
	left: calc(10px + var(--sa-left));
	z-index: 1;
}
html.is-mobile #map-search-btn svg,
html.is-mobile #map-list-close svg {
	width: 24px;
	height: 24px;
}
html.is-mobile #map-list-close {
	margin: 6px 6px 0 0;
}
html.is-mobile #map-list-head > div {
	padding-top: 20px !important;
}
html.is-mobile #map-travel-home-btn {
	top: calc(16px + var(--sa-top)) !important;
	right: calc(16px + var(--sa-right)) !important;
}
/* Bigger rows and a 16px search field (smaller makes iOS zoom the page
   on focus). */
html.is-mobile #map-island-list input[type="search"] {
	font-size: 16px;
}
html.is-mobile #map-island-list {
	font-size: 15px !important;
}
html.is-mobile #map-island-list button {
	min-height: 40px;
}

/* Zoom-out map on touch (rendering/systems/map_view_list.js + _controls.js,
   2026-10-08): the borrowed island list is a full-screen sheet opened by the
   search button top-left (#map-zoom-list.list-open), closed by its own ×.
   While closed, the full-screen column must not swallow the map's drags. */
html.is-mobile #map-zoom-list:not(.list-open) {
	pointer-events: none !important;
}
html.is-mobile #map-zoom-list.list-open #map-island-list {
	display: flex !important;
}
html.is-mobile #map-zoom-search {
	top: calc(12px + var(--sa-top));
	left: calc(10px + var(--sa-left));
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: none;
	color: #e8e2d8;
	cursor: pointer;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}
html.is-mobile #map-zoom-search svg {
	width: 24px;
	height: 24px;
}
/* Close sits TOP right on touch, not bottom right like desktop: at the
   bottom it slid under the browser's toolbar / home bar in portrait and
   after rotating (2026-10-08). Travel Home goes under it. */
html.is-mobile #map-zoom-close {
	top: calc(12px + var(--sa-top)) !important;
	right: calc(10px + var(--sa-right)) !important;
	bottom: auto !important;
	min-height: 44px;
	padding: 0 8px !important;
	font-size: 15px !important;
}
html.is-mobile #map-zoom-home {
	top: calc(64px + var(--sa-top)) !important;
	right: calc(16px + var(--sa-right)) !important;
}

/* Island profile page (#island-modal): always the whole screen on mobile.
   Desktop starts it 260px in so the Map's island list stays visible next
   to it; on mobile that list is its own sheet, so nothing sits beside it. */
html.is-mobile #island-modal {
	position: fixed;
	left: 0;
	border-left: none;
	justify-content: center;
}
html.is-mobile #island-box {
	--gutter: calc(24px + var(--sa-left));
	max-width: none;
	border-left: none;
	border-right: none;
}
html.is-mobile #island-header {
	padding-top: calc(10px + var(--sa-top));
}
html.is-mobile #island-scroll {
	padding-bottom: calc(24px + var(--sa-bottom));
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
/* Favorite / Mute / Travel: their own wrapping line under the name (main.css). */
html.is-mobile #island-actions {
	gap: 8px;
}
html.is-mobile .island-pill {
	padding: 9px 0;
}
/* Profile page on a phone: same type, a size smaller, 24px gutters. */
html.is-mobile #island-profile-row {
	--name-size: 36px;
	padding-top: 16px;
	column-gap: 16px;
}
html.is-mobile #island-actions {
	padding-left: calc(var(--avatar-size) + 16px);
}
html.is-mobile #island-tabs {
	margin-top: 20px;
}
html.is-mobile #island-status-row,
html.is-mobile #island-status-input {
	font-size: 24px;
}
html.is-mobile #island-banner-grid {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
html.is-mobile #island-board-grid {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* Movement is always Directional on mobile (scene/state.js) — no picker. */
html.is-mobile #movement-setting {
	display: none;
}

/* Bottom-left menu → one ☰ button at the top-left (ui/mobile_menu.js),
   leaving the bottom-left to the joystick. Tapping it drops the usual
   buttons down in a dark-glass panel (same look as the Settings window). */
html.is-mobile #bottom-bar {
	top: calc(52px + var(--sa-top));
	bottom: auto;
	left: calc(10px + var(--sa-left));
	align-items: flex-start;
	gap: 0;
}
html.is-mobile #menu-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: none;
	color: #e8e2d8;
	cursor: pointer;
}
html.is-mobile #menu-btn svg {
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
html.is-mobile #bottom-bar > button:not(#menu-btn),
html.is-mobile #intro-row {
	display: none;
}
/* Introduction sits in the menu like the other rows; the tutorial is
   desktop-only, so "/ Tutorial" stays hidden here. */
html.is-mobile #bottom-bar.open > #intro-row:not(.hidden) {
	display: contents;
}
html.is-mobile #intro-row .intro-sep,
html.is-mobile #tutorial-cta {
	display: none;
}
html.is-mobile #bottom-bar.open {
	opacity: 1;
	padding-bottom: 6px;
	background: rgba(20, 20, 22, 0.72);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
html.is-mobile #bottom-bar.open > button:not(#menu-btn):not(.hidden),
html.is-mobile #bottom-bar.open > #intro-row > #intro-cta {
	display: flex;
	min-height: 44px;
	padding: 0 18px 0 12px;
	font-size: 15px;
}
html.is-mobile #bottom-bar.open > button .account-icon,
html.is-mobile #bottom-bar.open > button .settings-icon,
html.is-mobile #bottom-bar.open > #intro-row .settings-icon {
	font-size: 20px;
	width: 22px;
	display: flex;
	justify-content: center;
}
html.is-mobile #bottom-bar.open .account-name {
	max-width: 60vw;
}

/* Bigger tap targets for the small text buttons (Apple/Google both ask
   for ~44px); padding grows the hit area without moving the text much. */
html.is-mobile #minimap-hud-row > button {
	min-height: 36px;
	padding-top: 6px;
	padding-bottom: 6px;
}

/* ── 2. Portrait phones ───────────────────────────────────────────── */
@media (max-width: 600px) {
	/* The centred island name ran into the clock on the right: move it
	   under APHERIOS, left-aligned, clipped short of the clock column. */
	html.is-mobile #island-indicator {
		top: calc(46px + var(--sa-top));
		left: calc(16px + var(--sa-left));
		transform: none;
		max-width: calc(100vw - 190px);
		overflow: hidden;
		text-overflow: ellipsis;
	}
	html.is-mobile #top-right-hud {
		right: calc(16px + var(--sa-right));
	}

	/* Bottom, stacked from the bottom edge up:
	     chat pill — full width, where the thumbs already are
	     Rotate/Map (right) — one row above it (the menu is top-left)
	     toasts — above all of it */
	html.is-mobile #chat-pill {
		left: calc(12px + var(--sa-left));
		right: calc(12px + var(--sa-right));
		bottom: calc(12px + var(--sa-bottom));
		transform: none;
		min-width: 0;
	}
	html.is-mobile #chat-pill #chat-input {
		min-width: 0;
		flex: 1;
	}
	/* Menu sits under the island name, which moves under APHERIOS here. */
	html.is-mobile #bottom-bar {
		top: calc(70px + var(--sa-top));
	}
	html.is-mobile #minimap-hud-row {
		bottom: calc(64px + var(--sa-bottom)) !important;
	}
	html.is-mobile .bottom-toast {
		bottom: calc(224px + var(--sa-bottom) + var(--stack-index, 0) * 28px);
		max-width: calc(100vw - 32px);
	}
}

/* ── 3. Landscape phones ──────────────────────────────────────────── */
@media (max-height: 500px) {
	html.is-mobile #chat-pill {
		bottom: calc(12px + var(--sa-bottom));
	}
	html.is-mobile .bottom-toast {
		bottom: calc(68px + var(--sa-bottom) + var(--stack-index, 0) * 28px);
	}
}

/* ── In-game keyboard (ui/touch_keyboard.js) ──────────────────────────
   Replaces the phone's keyboard for chat (which covers 60-100% of the
   screen). Always laid out, slid below the screen while closed, so its
   height (--tkb-h, set by the JS) is known before it opens; the chat pill
   and toasts ride on top of it while html.tkb-open. */
#touch-keyboard {
	display: none;
}
html.is-mobile #touch-keyboard {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10040;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 8px calc(5px + var(--sa-right)) calc(8px + var(--sa-bottom)) calc(5px + var(--sa-left));
	background: rgba(20, 22, 28, 0.78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-family: var(--ui-font);
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	touch-action: none;
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.18s ease-out, visibility 0s linear 0.18s;
}
html.tkb-open #touch-keyboard {
	transform: none;
	visibility: visible;
	transition: transform 0.18s ease-out;
}
#touch-keyboard[data-shape="landscape"] {
	gap: 5px;
	padding-top: 6px;
	padding-bottom: calc(6px + var(--sa-bottom));
}
.tkb-row {
	display: flex;
	gap: 5px;
}
.tkb-row.tkb-indent {
	padding: 0 5%;
}
.tkb-key {
	flex: 1 1 0;
	min-width: 0;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.14);
	color: #f0ebe0;
	font-size: 18px;
	line-height: 1;
}
#touch-keyboard[data-shape="landscape"] .tkb-key {
	height: 30px;
	font-size: 16px;
}
.tkb-key.down {
	background: rgba(255, 255, 255, 0.34);
}
.tkb-act {
	background: rgba(255, 255, 255, 0.07);
	font-size: 14px;
	letter-spacing: 0.5px;
}
.tkb-send,
.tkb-shift.on {
	background: rgba(244, 234, 216, 0.92);
	color: #1c1a16;
	font-weight: 500;
}
.tkb-send.down {
	background: #fff;
}
/* Action-key icons (ui/touch_keyboard_icons.js) — drawn in currentColor. */
.tkb-key svg {
	width: 20px;
	height: 20px;
	pointer-events: none;
}
#touch-keyboard[data-shape="landscape"] .tkb-key svg {
	width: 18px;
	height: 18px;
}

/* Hold-for-accents popup. */
#tkb-accents {
	position: fixed;
	z-index: 10050;
	display: flex;
	gap: 2px;
	padding: 4px;
	border-radius: 10px;
	background: rgba(40, 42, 48, 0.96);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}
.tkb-acc {
	min-width: 32px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	color: #f0ebe0;
	font: 400 20px var(--ui-font);
}
.tkb-acc.sel {
	background: rgba(244, 234, 216, 0.92);
	color: #1c1a16;
}

/* ── The chat cursor (ui/touch_keyboard_caret.js) ─────────────────────
   #chat-input is readOnly on mobile, so no browser draws a caret of its
   own there: ours is the only one, and the native one is switched off in
   case Android would draw one anyway. It shows exactly while #chat-input
   itself has focus (the JS toggles .on — the gesture button shares the pill
   and must not leave it behind) and is positioned by the JS. touch-action
   on the pill keeps a drag that repositions the cursor from being read as a
   scroll and cancelled halfway. */
html.is-mobile #chat-pill {
	touch-action: none;
}
html.is-mobile #chat-input {
	caret-color: transparent;
	/* No native selection UI either: it would fight the one cursor, and
	   long-press on iOS would pop a Copy/Look-up callout over it. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
#chat-caret {
	display: none;
	position: absolute;
	top: 50%;
	width: 1.5px;
	height: 18px;
	margin-top: -9px;
	border-radius: 1px;
	background: #f0ebe0;
	pointer-events: none;
	animation: tkb-caret 1.06s linear infinite;
}
html.is-mobile #chat-caret.on {
	display: block;
}
@keyframes tkb-caret {
	0%, 49.9% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* While typing: the pill rides on the keyboard, toasts above the pill,
   and the bottom-row buttons (under the keyboard anyway) step aside.
   position: fixed on purpose — the keyboard is fixed to the SCREEN, while
   the pill normally sits in #game-viewport (100dvh). On real phones those
   two bottoms can differ (fullscreen from the Enter tap, the browser bar
   sliding), and then the pill ended up under the keyboard. Anchored to the
   same box as the keyboard, they cannot drift apart. */
html.tkb-open #chat-pill {
	position: fixed;
	bottom: calc(var(--tkb-h, 0px) + 8px) !important;
	opacity: 1;
}
html.tkb-open .bottom-toast {
	position: fixed;
	bottom: calc(var(--tkb-h, 0px) + 64px + var(--stack-index, 0) * 28px) !important;
}
html.tkb-open #minimap-hud-row {
	visibility: hidden;
}

/* Page windows (.page-* in main.css, e.g. About): the profile page's phone
   sizes — 24px gutters (clear of a landscape notch), smaller big type. */
html.is-mobile .page-box {
	--gutter: calc(24px + var(--sa-left));
}
html.is-mobile .page-header {
	padding-top: calc(10px + var(--sa-top));
}
html.is-mobile .page-scroll {
	padding-bottom: calc(48px + var(--sa-bottom));
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
html.is-mobile .page-title {
	padding-top: 40px;
	font-size: 36px;
}
/* Tidy page window (.page-box.is-compact): keep it tight on phones too. */
html.is-mobile .page-box.is-compact .page-title {
	padding-top: 12px;
	font-size: 28px;
}
html.is-mobile .page-box.is-compact .page-tabs {
	gap: 20px;
	margin-top: 16px;
}
/* Ferry timetable header (lighthouse click): the island page header's phone sizes. */
html.is-mobile .ft-head {
	--name-size: 36px;
	padding-top: 40px;
	column-gap: 16px;
}
html.is-mobile .page-subtitle {
	font-size: 18px;
}
/* Avatar page title: the profile page's phone sizes (36px name, half
   for the subtitle, name top 60px below the page top as there). */
html.is-mobile #avatar-page-name {
	padding-top: 6px;
	font-size: 36px;
}
html.is-mobile #avatar-page-subtitle {
	font-size: 18px;
}
html.is-mobile .page-tabs {
	gap: 24px;
	margin-top: 40px;
}
/* Settings shortcut rows: no key column on touch (the badges are hidden). */
html.is-mobile #settings-modal #camera-hint,
html.is-mobile #settings-modal #rotate-btn,
html.is-mobile #settings-modal #chat-key-btn,
html.is-mobile #settings-modal #gesture-key-btn,
html.is-mobile #settings-modal #fullscreen-btn,
html.is-mobile #settings-modal #ui-toggle-btn {
	grid-template-columns: auto;
}
html.is-mobile #recovery-modal .recovery-words {
	font-size: 32px;
}
/* Weather page on a phone: tighter columns, smaller "now". */
html.is-mobile .wf-day,
html.is-mobile .wf-hour {
	grid-template-columns: 1fr 2em 5.5em auto;
	gap: 10px;
}
html.is-mobile .wf-cur-temp {
	font-size: 48px;
}
html.is-mobile .wf-cur-icon {
	font-size: 40px;
}
/* The Times on a phone: the nameplate a size smaller. */
html.is-mobile #newspaper-title {
	font-size: 42px;
}