/* Coastal workshop: quiet HUD, clear materials, generous touch targets.
   main.css supplies platform protections and layouts; screens.css supplies
   secondary screens. No generated surface textures or backdrop filters. */
:root {
  --bg: #174f62; --bg-deep: #153e4e;
  --panel: #0b7f98; --panel-hi: #159bb0; --panel-line: #62b5c7;
  --text: #f6ffff; --text-dim: #c7e8ee; --text-faint: #a9d7e1;
  --ink: #234b58; --slot-fill: #68b1c2;
  --accent: #f6c65a; --accent-dark: #be9038; --accent-soft: #ffe2a0; --accent-deep: #785420;
  --danger: #ce635b; --danger-dark: #984039; --grass: #6fbd79; --grass-dark: #378454;
  --radius: 8px; --radius-sm: 5px; --frame: 2px;
  --edge-hi: #9dd4df; --edge-lo: #075568; --edge-out: #155569;
  --bevel: 1px; --bevel-thin: 1px;
  --shadow-soft: 0 5px 0 #123e5140; --shadow-hard: 0 3px 0 #07576b;
  --tex-panel: none; --tex-button: none; --tex-slot: none;
  --tex-accent: none; --tex-plank: none; --tex-frame: none;
}
.surface, .panel, button, .btn, .card, .hud-chip, .tab, .theme-card,
.shop-card, .vote-btn, .opt-btn, .roster-item, .reward-chip, .wallet-chip,
.result-row, .task-row, .block-swatch, .floor-btn {
  background-image: none; image-rendering: auto; border-radius: var(--radius-sm); text-shadow: none;
}
.raised, button, .btn, .card, .hud-chip, .tab, .theme-card, .shop-card,
.vote-btn, .opt-btn, .roster-item, .reward-chip, .wallet-chip { box-shadow: 0 2px 0 #07576b; }
.sunken, .block-swatch, .floor-btn, .result-row, .task-row, .time-bar, .task-bar, .loader-bar { box-shadow: none; }
button, .btn {
  --button-padding: 10px 16px;
  padding: var(--button-padding); min-height: 48px; border: 1px solid #78c0ce;
  background: #218fa5; color: var(--text); font-size: 15px; font-weight: 700;
  letter-spacing: 0; text-shadow: none; transition: background-color .12s, box-shadow .12s;
}
button:hover, .btn:hover { filter: none; }
button:active, .btn:active { padding: var(--button-padding); box-shadow: inset 0 2px 0 #07556860; filter: brightness(.95); }
button:disabled, .btn.disabled { filter: none; opacity: .42; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn-primary, .btn-primary:active { background: var(--accent); border-color: #ffe5a2; color: #554019; text-shadow: none; box-shadow: 0 3px 0 #b08032; }
.btn-ghost { background: #096b81; border-color: #4299ae; color: var(--text-dim); box-shadow: none; }
.btn-icon, .btn-icon:active { --button-padding: 0; padding: 0; width: 48px; min-height: 48px; flex-shrink: 0; }
.btn-icon svg { width: 24px; height: 24px; }
.btn-icon.is-active { background: var(--accent); color: #554019; }
.btn-icon.is-active svg { stroke: currentColor; }
.window { border: 2px solid var(--panel-line); border-image: none; border-radius: var(--radius); background: var(--panel); background-clip: border-box; image-rendering: auto; box-shadow: 0 5px 0 #123e5159; }
.window-title { align-self: stretch; margin: 0; padding: 0 0 10px; background: none; box-shadow: none; border-bottom: 1px solid #7ec1cf70; font-size: 22px; font-weight: 800; letter-spacing: -.02em; text-shadow: none; white-space: normal; text-align: left; }
.screen.centered { background: #204856a8; }
.screen.showcase-screen { background: linear-gradient(180deg, transparent 15%, #20485690 50%, #204856ec 100%); }
.loader-frame { border: 2px solid #d2eaf3; border-image: none; border-radius: 6px; padding: 3px; background: #4486a3; box-shadow: 0 3px 0 #2b678e66; }
.loader-bar { height: 12px; padding: 0; background: #26617e; border-radius: 2px; }
.loader-bar > i { background: #f8d56e; }
.loader-title { color: #214a68; text-shadow: none; letter-spacing: 0; font-size: 15px; }

/* One top row leaves more of the horizon visible. */
.overlay-screen, .overlay-screen.is-touch {
  --ctl: clamp(56px, 9vmin, 72px); --slot: clamp(48px, 5vmin + 1vw, 58px);
  --edge: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --floor: max(12px, env(safe-area-inset-bottom, 0px)); --bar: calc(var(--slot) + 12px);
}
.hud-top { flex-wrap: nowrap; gap: 7px; padding: max(10px, env(safe-area-inset-top, 0px)) var(--edge) 0; }
.hud-spacer { flex: 1 1 auto; height: auto; }
.hud-chip { height: 42px; padding: 0 12px; border: 1px solid #e5faff45; background: #1f5065a8; box-shadow: none; color: white; text-shadow: 0 1px 1px #214958; font-size: 13px; }
.hud-chip b, .hud-chip-island b, .hud-chip-island { color: white; text-shadow: 0 1px 1px #214958; }
.hud-chip-count { border: 0; background: #1f506578; }
.hud-chip-count b { color: var(--accent-soft); }
.hud-top .btn-icon { width: 48px; min-height: 48px; background: #1f506592; border-color: #e5faff80; box-shadow: 0 2px 0 #17445465; }
.hud-top .btn-icon svg { width: 24px; height: 24px; }
.save-chip { background: #1f506579; border: 0; }
.save-chip.is-failed { color: #ffceab; }

/* The belt scrolls on a small phone; its catalogue entry stays still. */
.build-dock { position: absolute; left: 50%; bottom: var(--floor); transform: translateX(-50%); display: flex; align-items: center; gap: 7px; width: max-content; max-width: calc(100% - 2 * var(--edge)); padding: 5px; border: 1px solid #d2ebeb70; border-radius: 7px; background: #204d5b91; box-shadow: 0 3px 0 #1a3b4847; z-index: 4; }
.build-dock .hotbar { position: static; transform: none; min-width: 0; max-width: none; width: auto; flex: 1 1 auto; display: flex; gap: 4px; padding: 0; overflow-x: auto; overflow-y: hidden; background: none; box-shadow: none; scrollbar-width: none; overscroll-behavior: contain; touch-action: none; }
.build-dock .hotbar::-webkit-scrollbar { display: none; }
.hot-slot, .hot-slot:active { --button-padding: 0; padding: 0; width: var(--slot); height: var(--slot); min-width: 48px; min-height: 48px; border: 1px solid #e1f2ef8c; border-radius: 4px; background: #b0d3d354; box-shadow: none; transition: background-color .1s; }
.hot-slot.is-active { transform: none; border-color: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); background: #b1d4bd8c; }
.hot-slot .block-icon { width: 80%; height: 80%; }
.hot-empty { font-size: 21px; font-weight: 400; color: #ecfff8a8; pointer-events: none; }
.hot-slot:not(.is-empty) .hot-empty { display: none; }
/* During mouse gameplay the belt is selected with keys or the wheel.
   Plus signs become useful only inside the clickable catalogue. */
.is-mouse:not(.has-sheet) .hot-empty { display: none; }
.is-mouse .dock-empty-hint { display: none; }
.hot-num { top: 3px; left: 4px; color: #f3ffffba; text-shadow: 0 1px 1px #31505d; }
.dock-catalog, .dock-catalog:active, .dock-catalog.is-active { --button-padding: 0 13px; flex: 0 0 auto; display: flex; gap: 8px; height: var(--slot); width: auto; min-width: 76px; min-height: 48px; padding: var(--button-padding); border: 1px solid #ffe5a2; background: var(--accent); color: #554019; box-shadow: 0 2px 0 #9b793c; }
.dock-catalog svg { width: 26px; height: 26px; margin: 0; }
.catalog-button-label { font-size: 13px; font-weight: 800; }
.catalog-key { font: 700 12px var(--font); border: 1px solid #92753980; padding: 1px 5px; border-radius: 3px; }
.dock-empty-hint { position: absolute; bottom: calc(100% + 10px); left: 6px; padding: 5px 10px; border-radius: 4px; background: #224d60d9; color: #fff7dc; font-size: 12px; white-space: nowrap; pointer-events: none; }
.dock-empty-hint::after { content: ''; position: absolute; left: 18px; bottom: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #224d60d9; }
.is-orbit .build-dock { display: none; }
.has-sheet .build-dock { z-index: 5; }
.hot-name, .hint-bar, .lock-prompt { border: 0; border-radius: 4px; background: #214b60cf; box-shadow: none; color: white; text-shadow: none; font-weight: 600; }
.hot-name { padding: 4px 10px; font-size: 13px; bottom: calc(var(--floor) + var(--bar) + 8px); }
.hint-bar { padding: 7px 12px; }
.lock-prompt { padding: 8px 14px; font-size: 13px; }
.key-legend { gap: 4px; }
.key-row { height: 28px; background: #234e6280; box-shadow: none; border-radius: 4px; }
.key-cap { background: #ebf7f1df; color: #375363; box-shadow: 0 2px 0 #35526270; border-radius: 3px; font-size: 12px; }
.key-label { font-size: 12px; text-shadow: 0 1px 1px #31505d; }
.key-lock, .side-lock, .menu-lock { box-shadow: none; border-radius: 3px; }
.touch-move { background: #264e642c; box-shadow: inset 0 0 0 2px #f1ffff80; opacity: .75; }
.touch-move .knob { background: #f1ffff9c; box-shadow: 0 2px 0 #35617057; }
.right-column { gap: 10px; bottom: calc(var(--floor) + var(--bar) + 18px); }
.btn-round, .btn-round:active, .btn-round.is-held { --button-padding: 0; padding: 0; border: 2px solid #e3ffff9c; border-radius: 50%; background: #295d7063; box-shadow: none; }
.btn-round.is-held { background: #b4dce387; }
.btn-side, .btn-side:active { --button-padding: 0; padding: 0; width: max(52px, calc(var(--ctl) * .9)); height: max(52px, calc(var(--ctl) * .9)); border: 1px solid #e3ffffb0; background: #285a6f82; box-shadow: 0 2px 0 #1b4b6266; }
.btn-tool, .btn-tool:active { --button-padding: 4px 5px; padding: var(--button-padding); flex-direction: column; gap: 1px; width: max(66px, var(--ctl)); }
.btn-tool svg { margin: 0; width: 26px; height: 26px; }
.tool-mode-label { font-size: 10px; line-height: 1.2; font-weight: 700; }
.btn-tool.is-active { border-color: #ffe5a2; background: #f6c65ae8; color: #554019; }
.orbit-exit { background: #285a6fc4; text-shadow: none; }

/* Categories and materials scroll independently. Selection and return
   remain visible in the footer, including on 360 × 640 phones. */
.catalog { padding: 72px var(--edge) calc(var(--floor) + var(--bar) + 16px); background: #173c4c69; }
.catalog-sheet { width: min(100%, 1040px); height: min(100%, 700px); max-height: 100%; padding: 12px; gap: 10px; overflow: hidden; transform: translateY(6px); }
.catalog-head, .catalog-sheet[data-tab="plot"] .catalog-head { display: flex; justify-content: space-between; grid-template-areas: none; gap: 10px; flex: 0 0 auto; min-height: 48px; }
.sheet-tabs { display: flex; gap: 4px; }
.catalog-actions { display: flex; gap: 6px; }
.sheet-tab, .sheet-tab:active { --button-padding: 0 14px; padding: var(--button-padding); min-height: 48px; gap: 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; box-shadow: none; color: #e3f5f8; text-shadow: none; font-size: 16px; }
.sheet-tab span { display: inline; }
.sheet-tab svg { width: 22px; height: 22px; }
.sheet-tab.is-active { background: #07596f; color: white; border-color: #83c8d6; text-shadow: none; }
.catalog-head .btn-close, .catalog-head .btn-orbit { width: 48px; min-height: 48px; background: #0b6f85; border-color: #6cbdcb; box-shadow: none; }
.catalog-toolbar { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.catalog-search { display: flex; align-items: center; gap: 8px; width: min(100%, 460px); min-width: 0; height: 48px; padding-left: 12px; border: 1px solid #84cad6; border-radius: 5px; background: #075c71; color: #c1e2e9; }
.catalog-search:focus-within { border-color: #fff5d4; box-shadow: 0 0 0 1px #fff5d4; }
.catalog-search-icon { display: flex; width: 20px; height: 20px; flex: 0 0 auto; }
.catalog-search-icon svg { width: 20px; height: 20px; }
.catalog-search-input { flex: 1 1 auto; min-width: 0; width: 100%; height: 46px; border: 0; outline: none; padding: 0; background: none; color: white; font: 400 16px var(--font); user-select: text; -webkit-user-select: text; touch-action: manipulation; }
.catalog-search-input:focus-visible { outline: none; }
.catalog-search-input::placeholder { color: #c4e0e8; opacity: 1; }
.catalog-search-input::-webkit-search-cancel-button { display: none; }
.btn-search-clear, .btn-search-clear:active { --button-padding: 0; padding: 0; min-width: 48px; min-height: 48px; border: 0; background: none; box-shadow: none; }
.btn-search-clear svg { width: 20px; height: 20px; }
.catalog-result-count { color: #d4edf1; font-size: 12px; font-variant-numeric: tabular-nums; }
.catalog-body { flex-direction: row; gap: 12px; min-height: 0; }
.catalog-rail { container-type: normal; width: 138px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 58px; align-content: start; gap: 5px; overflow: auto; overscroll-behavior: contain; touch-action: pan-y; }
.catalog-rail .rail-tab, .catalog-rail .rail-tab:active { --button-padding: 3px 2px; padding: var(--button-padding); flex: 0 0 auto; flex-direction: column; height: 58px; min-height: 48px; min-width: 48px; max-height: none; gap: 3px; border: 1px solid #64b0c2; background: #14708a; color: #effcfd; box-shadow: none; text-shadow: none; font-size: 10px; letter-spacing: 0; touch-action: pan-y; }
.catalog-rail .rail-tab.is-active { background: #03485e; border-color: #e9ffff; color: white; }
.catalog-rail { scrollbar-width: thin; scrollbar-color: #b0dce4 #0b6178; }
.catalog-rail .rail-tab .block-icon, .catalog-rail .rail-tab > svg { width: 28px; height: 28px; }
.catalog-rail .rail-name, .catalog-rail .rail-tab:not(.is-active) .rail-name { display: block; font-weight: 600; letter-spacing: -.02em; }
.catalog-grid, .plot-pane { background: #08758e; box-shadow: none; border: 1px solid #419cb2; border-radius: 5px; scrollbar-width: thin; scrollbar-color: #b0dce4 #0b6178; }
.catalog-grid::-webkit-scrollbar, .plot-pane::-webkit-scrollbar, .catalog-rail::-webkit-scrollbar { display: block; width: 5px; height: 5px; }
.catalog-grid::-webkit-scrollbar-thumb, .plot-pane::-webkit-scrollbar-thumb, .catalog-rail::-webkit-scrollbar-thumb { background: #b0dce4; border-radius: 3px; }
.catalog-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; padding: 9px; align-content: start; }
.block-swatch, .block-swatch:active, .floor-btn, .floor-btn:active { --button-padding: 3px; padding: 3px; min-width: 48px; min-height: 48px; background: var(--slot-fill); border: 1px solid #aad3de; box-shadow: none; border-radius: 4px; }
.block-swatch .block-icon { width: 82%; height: 82%; }
.block-swatch.is-active, .floor-btn.is-active { box-shadow: inset 0 0 0 2px white; border-color: white; background: #87c4ce; }
.block-swatch[data-slot]::after { bottom: 3px; right: 3px; background: #fff3cc; color: #625227; box-shadow: none; border-radius: 2px; }
.catalog-footer { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 12px; border-top: 1px solid #76bfcb85; padding-top: 9px; }
.catalog-footer .catalog-pick { display: flex; height: 48px; padding: 0; gap: 10px; background: none; box-shadow: none; flex: 1 1 auto; }
.pick-icon { width: 48px; height: 48px; background: #4b9fb3; border: 1px solid #add7df; border-radius: 4px; box-shadow: none; }
.catalog-pick.is-empty .pick-icon { box-shadow: none; }
.pick-name { font-size: 14px; text-shadow: none; font-weight: 700; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.pick-slot { color: #c7e8ee; font-size: 11px; text-shadow: none; font-weight: 400; text-transform: none; letter-spacing: 0; }
.btn-catalog-done, .btn-catalog-done:active { --button-padding: 0 16px; padding: var(--button-padding); background: #edf8f1; color: #22566a; border: 1px solid #fff; box-shadow: 0 2px 0 #075568; flex: 0 0 auto; font-size: 14px; }
.catalog-empty { grid-column: 1 / -1; padding: 30px 12px; text-align: center; color: #dbf0f4; font-size: 14px; }
.catalog-empty .catalog-reset { margin-top: 18px; }
.catalog-sheet[data-tab="plot"] .catalog-toolbar, .catalog-sheet[data-tab="plot"] .catalog-footer { display: none; }
.plot-pane { padding: 12px; }
.plot-pane .options-group { padding: 12px; background: #d6ecec; color: var(--ink); box-shadow: none; border-radius: 5px; }
.plot-pane .options-label { color: var(--ink); text-shadow: none; padding-bottom: 8px; font-size: 13px; letter-spacing: 0; text-transform: none; border-bottom: 0; }
.plot-pane .opt-btn, .plot-pane .opt-btn:active { --button-padding: 0 7px; padding: var(--button-padding); min-width: 48px; min-height: 48px; background: #b7d8df; border: 1px solid #93becb; color: #234b58; text-shadow: none; box-shadow: none; font-size: 12px; }
.plot-pane .opt-btn.is-active { background: #167e95; color: white; border-color: #105d72; box-shadow: inset 0 -2px 0 #07576b; }
.plot-pane .opt-btn-danger { background: #0a697f; color: white; }
.plot-pane .opt-btn-danger.is-armed { background: var(--danger); color: white; border-color: #f3ae9a; }
.plot-pane .floor-row { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }

.island-menu, .fly-offer { z-index: 6; background: #173c4c85; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.island-card, .fly-card { width: min(390px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 18px; gap: 8px; scrollbar-width: thin; scrollbar-color: #b0dce4 #0b6178; }
.island-card .btn { flex-shrink: 0; }
.island-card .window-title { padding-bottom: 12px; margin-bottom: 4px; flex-shrink: 0; }
.island-card .menu-item, .island-card .menu-item:active { --button-padding: 10px 13px; padding: var(--button-padding); justify-content: flex-start; min-height: 48px; border-color: #4ca2b7; background: #0b6e85; color: var(--text); box-shadow: none; font-size: 14px; }
.island-card .menu-resume, .island-card .menu-resume:active { background: #e4f3e7; color: #255a60; border-color: #f6fff2; }
.island-card .menu-contest, .island-card .menu-contest:active { justify-content: flex-start; background: #1990a6; border-color: #8dccd8; font-size: 14px; font-weight: 700; text-shadow: none; box-shadow: none; }
.island-card .menu-contest::after { display: none; animation: none; }
.island-card .menu-item.btn-ghost svg { display: block; }
.menu-item .menu-key { background: #04465d70; color: #d6eef3; border-radius: 3px; box-shadow: none; }
.menu-item .menu-lock { box-shadow: none; border-radius: 3px; }
.fly-title { text-shadow: none; font-size: 21px; }
.fly-icon { flex-shrink: 0; }
.fly-card .btn { flex-shrink: 0; }
.fly-text { font-size: 14px; }
.build-dock [hidden], .catalog [hidden] { display: none; }
.has-sheet .dock-empty-hint, .has-sheet .hint-bar, .has-sheet .hot-name, .has-sheet .key-legend { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover { filter: brightness(1.08); }
  .block-swatch:hover .block-icon { transform: translateY(-2px); }
}
@media (hover: none) { .block-swatch:hover .block-icon { transform: none; } }

@media (max-width: 800px) {
  .catalog-sheet { padding: 9px; gap: 8px; }
  .catalog-rail { width: 126px; grid-auto-rows: 58px; gap: 4px; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 5px; padding: 6px; }
  .catalog-body { gap: 8px; }
  .catalog-result-count { margin-left: auto; }
  .key-legend { bottom: calc(var(--floor) + var(--bar) + 8px); }
}
@media (max-width: 560px) {
  .overlay-screen, .overlay-screen.is-touch { --edge: max(8px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --floor: max(8px, env(safe-area-inset-bottom, 0px)); --slot: 48px; }
  .hud-top { padding-top: max(8px, env(safe-area-inset-top, 0px)); gap: 5px; }
  .hud-chip { padding: 0 9px; min-width: 0; max-width: 140px; font-size: 12px; }
  .hud-chip-island { max-width: none; }
  .hud-chip-count { display: none; }
  .hud-spacer { min-width: 0; }
  .hud-top .save-chip { position: absolute; left: var(--edge); top: calc(100% + 6px); display: inline-flex; height: 28px; max-width: calc(100% - 2 * var(--edge)); font-size: 12px; }
  .build-dock { gap: 5px; padding: 5px; width: calc(100% - 2 * var(--edge)); }
  .dock-catalog, .dock-catalog:active, .dock-catalog.is-active { --button-padding: 0 9px; min-width: 62px; gap: 2px; flex-direction: column; }
  .dock-catalog svg { width: 22px; height: 22px; }
  .catalog-button-label { font-size: 10px; }
  .catalog { padding-top: 66px; padding-bottom: calc(var(--floor) + var(--bar) + 10px); }
  .catalog-sheet { height: 100%; padding: 7px; gap: 7px; }
  .catalog-head { gap: 5px; }
  .catalog-actions { gap: 5px; }
  .sheet-tabs { gap: 3px; }
  .sheet-tab, .sheet-tab:active { --button-padding: 0 8px; font-size: 13px; gap: 5px; }
  .sheet-tab svg { width: 18px; height: 18px; }
  .catalog-head .btn-orbit { display: none; }
  .catalog-toolbar { gap: 5px; }
  .catalog-search { flex: 1; width: auto; padding-left: 9px; gap: 5px; }
  .catalog-result-count { font-size: 11px; max-width: 48px; text-align: center; }
  .catalog-rail { width: 110px; grid-auto-rows: 55px; gap: 4px; }
  .catalog-rail .rail-tab, .catalog-rail .rail-tab:active { height: 55px; gap: 3px; font-size: 9px; }
  .catalog-rail .rail-tab .block-icon, .catalog-rail .rail-tab > svg { width: 25px; height: 25px; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 3px; padding: 4px; }
  .catalog-body { gap: 6px; }
  .catalog-footer { gap: 8px; padding-top: 7px; }
  .catalog-footer .catalog-pick { height: 48px; gap: 7px; }
  .pick-icon { width: 42px; height: 42px; }
  .pick-name { font-size: 12px; }
  .pick-slot { font-size: 10px; }
  .btn-catalog-done, .btn-catalog-done:active { --button-padding: 0 10px; font-size: 12px; }
  .plot-pane { padding: 7px; }
  .plot-pane .options-group { padding: 10px; }
  .plot-pane .opt-btn { min-width: 48px; font-size: 11px; }
  .hint-bar { max-width: 72vw; font-size: 12px; }
  .lock-prompt { max-width: 90vw; white-space: normal; text-align: center; }
}
/* Short landscape combines search and tabs into one row. The belt remains
   accessible for assigning several materials without closing the window. */
@media (max-height: 559px) {
  .catalog { padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--floor) + var(--bar) + 10px); z-index: 4; }
  .catalog-sheet { padding: 8px; gap: 6px; height: 100%; }
  .catalog-head { min-height: 48px; }
  .catalog-sheet[data-tab="blocks"] { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) 56px; column-gap: 12px; }
  .catalog-head { grid-column: 1; grid-row: 1; }
  .catalog-toolbar { grid-column: 2; grid-row: 1; min-width: 0; }
  .catalog-search { flex: 1; width: auto; }
  .catalog-head .btn-orbit { display: none; }
  .catalog-body { grid-column: 1 / -1; grid-row: 2; min-height: 0; flex-direction: row; gap: 8px; }
  .catalog-footer { grid-column: 1 / -1; grid-row: 3; padding-top: 7px; }
  .catalog-rail { width: 124px; grid-auto-rows: 52px; }
  .catalog-rail .rail-tab, .catalog-rail .rail-tab:active { height: 52px; font-size: 9px; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); padding: 6px; gap: 5px; }
  .catalog-sheet[data-tab="plot"] .catalog-head { flex: 0 0 48px; }
  .sheet-tab, .sheet-tab:active { --button-padding: 0 9px; font-size: 13px; }
  .sheet-tab svg { width: 18px; height: 18px; }
  .catalog-result-count { display: none; }
  .plot-pane { padding: 8px; }
  .hint-bar { top: auto; bottom: calc(var(--floor) + var(--bar) + 44px); max-width: 340px; }
  .island-card { display: grid; grid-template-columns: 1fr 1fr; width: min(620px, 100%); padding: 12px; }
  .island-card .window-title { grid-column: 1 / -1; padding-bottom: 8px; font-size: 20px; }
  .fly-card { gap: 6px; padding: 12px; }
  .fly-icon { width: 36px; height: 36px; }
  .fly-title { font-size: 18px; }
  .fly-text { font-size: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .overlay-screen, .overlay-screen.is-touch { --edge: max(68px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --ctl: 52px; --slot: 48px; --floor: max(8px, env(safe-area-inset-bottom, 0px)); }
  .hud-top { padding-top: max(6px, env(safe-area-inset-top, 0px)); }
  .hud-top .hud-chip { height: 40px; }
  .right-column { flex-direction: row; align-items: flex-end; gap: 8px; bottom: calc(var(--floor) + var(--bar) + 10px); }
  .btn-tool, .btn-tool:active { width: 62px; }
  .vert-pad { flex-direction: row; }
  .catalog { padding-right: 12px; }
  .island-menu, .fly-offer { padding-left: 68px; }
}
@media (max-width: 560px) and (max-height: 559px) {
  .catalog-sheet[data-tab="blocks"] { display: flex; }
  .catalog-rail { width: 110px; }
  .catalog-toolbar { min-height: 48px; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .catalog-footer { flex: 0 0 56px; }
  .island-card { display: flex; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 650px) {
  .vert-pad { flex-direction: column; gap: 6px; }
}
@media (min-width: 1500px) and (min-height: 860px) {
  .overlay-screen, .overlay-screen.is-touch { --slot: 64px; --ctl: 78px; --edge: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --floor: max(18px, env(safe-area-inset-bottom, 0px)); }
  .catalog-sheet { width: min(76vw, 1240px); height: min(100%, 780px); padding: 16px; gap: 12px; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 10px; }
  .catalog-rail { width: 156px; grid-auto-rows: 64px; gap: 6px; }
  .catalog-rail .rail-tab, .catalog-rail .rail-tab:active { height: 64px; font-size: 11px; }
  .catalog-rail .rail-tab .block-icon { width: 32px; height: 32px; }
  .hud-chip { height: 48px; font-size: 15px; }
  .hud-top .btn-icon { width: 52px; min-height: 52px; }
}

/* A software keyboard can cover half the screen without a CSS viewport
   resize. Search keeps its close control, results and selection visible. */
.has-keyboard .catalog {
  top: var(--visual-top, 0px); bottom: auto; height: var(--visual-height);
  padding: 6px 8px; z-index: 6;
}
.has-keyboard .catalog-sheet[data-tab="blocks"] {
  display: grid; height: 100%; padding: 7px; gap: 7px;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 48px minmax(0, 1fr) 56px;
}
.has-keyboard .catalog-head { grid-column: 1; grid-row: 1; min-width: 0; }
.has-keyboard .sheet-tabs, .has-keyboard .btn-orbit, .has-keyboard .catalog-result-count { display: none; }
.has-keyboard .catalog-toolbar { grid-column: 2; grid-row: 1; min-width: 0; }
.has-keyboard .catalog-body { grid-column: 1 / -1; grid-row: 2; min-height: 0; flex-direction: row; }
.has-keyboard .catalog-footer { grid-column: 1 / -1; grid-row: 3; min-width: 0; }
.has-keyboard .catalog-search { width: 100%; }