:root {
  --sky-top:#7ec8ff; --ink:#1a2a3a; --panel:rgba(255,255,255,.95);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --palette-h:144px; --tool-size:48px; --thumb-size:68px; --item-w:80px;
}
* {box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body {margin:0;padding:0;height:100%;width:100%;overflow:hidden;overscroll-behavior:none;
  background:var(--sky-top);font-family:"Nunito","Segoe UI",system-ui,sans-serif;
  color:var(--ink);touch-action:manipulation;user-select:none;-webkit-user-select:none;}
#app {position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;}
#world {position:absolute;inset:0 0 calc(var(--palette-h) + var(--safe-bottom));
  width:100%;height:calc(100% - var(--palette-h) - var(--safe-bottom));
  display:block;touch-action:none;-webkit-touch-callout:none;background:linear-gradient(#73c5ff,#f1faff);}
/* Two small horizontal floating clusters. No sidebar or toolbox. */
#moveControls,#topControls {position:absolute;top:calc(8px + var(--safe-top));
  display:flex;gap:6px;z-index:5;}
#moveControls {left:calc(8px + var(--safe-left));}
#topControls {right:calc(8px + var(--safe-right));}
.btn {min-width:var(--tool-size);min-height:var(--tool-size);border:0;border-radius:14px;
  background:var(--panel);color:var(--ink);font-size:22px;font-weight:800;
  box-shadow:0 3px 0 rgba(0,0,0,.14);cursor:pointer;padding:6px;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;touch-action:manipulation;}
.btn:active {transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.14);}
.btn:focus-visible,.pal-item:focus-visible {outline:3px solid #2374e1;outline-offset:2px;}
.btn.danger {background:#ffe0e0;color:#b01020;}
.btn:disabled {opacity:.4;}
.btn.tool-mode.active {background:#1a2a3a;color:#fff;}
#paletteWrap {position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--palette-h) + var(--safe-bottom));
  padding:6px calc(8px + var(--safe-right)) calc(6px + var(--safe-bottom)) calc(8px + var(--safe-left));
  background:linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.98));
  border-top:3px solid #fff;z-index:6;display:flex;flex-direction:column;gap:4px;}
#trayRow {display:flex;align-items:stretch;gap:6px;flex:1;min-height:0;}
#btnClear {align-self:center;flex:0 0 44px;min-width:44px;min-height:48px;}
#palette {flex:1;min-width:0;min-height:0;display:flex;gap:6px;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;
  overscroll-behavior-x:contain;padding:3px 3px 10px;scrollbar-width:auto;scrollbar-color:#a6b9ce #edf3fa;}
#palette::-webkit-scrollbar {height:10px;}
#palette::-webkit-scrollbar-thumb {background:#a6b9ce;border-radius:8px;}
.pal-item {flex:0 0 var(--item-w);width:var(--item-w);min-width:44px;min-height:44px;
  border-radius:14px;border:3px solid rgba(0,0,0,.08);background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;cursor:pointer;position:relative;box-shadow:0 3px 0 rgba(0,0,0,.1);padding:2px;touch-action:pan-x;}
.pal-item.selected {border-color:#2a6fd4;box-shadow:0 0 0 2px rgba(42,111,212,.28);}
.pal-item canvas {width:var(--thumb-size);height:var(--thumb-size);pointer-events:none;flex-shrink:0;}
.pal-item .n {font-size:16px;font-weight:900;line-height:1.1;pointer-events:none;}
#disclaimer {font-size:10px;font-weight:700;opacity:.55;text-align:center;
  line-height:1.2;flex:0 0 auto;pointer-events:none;}
#hint,#toast {position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;
  max-width:min(92vw,420px);text-align:center;line-height:1.2;border-radius:999px;}
#hint {bottom:calc(var(--palette-h) + var(--safe-bottom) + 12px);background:rgba(255,255,255,.92);
  color:#2a6fd4;padding:8px 14px;font-size:13px;font-weight:800;
  box-shadow:0 2px 10px rgba(0,0,0,.08);z-index:5;opacity:.95;transition:opacity .25s;}
#hint.hide {opacity:0;}
#toast {bottom:calc(var(--palette-h) + var(--safe-bottom) + 48px);background:rgba(20,30,40,.88);color:white;
  padding:10px 16px;font-size:15px;font-weight:700;opacity:0;transition:opacity .2s;z-index:20;}
#toast.show {opacity:1;}
#modal {position:absolute;inset:0;background:rgba(0,0,0,.45);display:none;
  align-items:center;justify-content:center;z-index:30;padding:20px;}
#modal.open {display:flex;}
#modal .card {background:#fff;border-radius:24px;padding:22px;max-width:340px;width:100%;
  text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25);}
#modal h2 {margin:0 0 8px;font-size:22px;}
#modal p {margin:0 0 18px;font-size:15px;opacity:.8;}
#modal .row {display:flex;gap:10px;justify-content:center;}
@media(min-width:700px) {
  :root {--palette-h:164px;--tool-size:52px;--thumb-size:88px;--item-w:100px;}
}
@media(max-height:480px) {
  :root {--palette-h:114px;--tool-size:44px;--thumb-size:52px;--item-w:64px;}
  #hint {font-size:12px;padding:6px 10px;}
}
@media(prefers-reduced-motion:reduce) {#hint,#toast {transition:none;}}

/* Ten complete options at rest: 5 columns × 2 rows on phones, 10 × 1 wider.
   The clear control lives outside the picker; all available width is numbers. */
:root {--palette-h:226px;--picker-cols:5;--picker-rows:2;--picker-gap:2px;--thumb-size:88px;}
#btnClear {position:absolute;right:0;top:calc(100% + 8px);min-width:var(--tool-size);min-height:var(--tool-size);}
#paletteWrap {padding-left:max(8px,var(--safe-left));padding-right:max(8px,var(--safe-right));}
#palette {display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--picker-rows),minmax(0,1fr));
  grid-auto-columns:calc((100% - (var(--picker-cols) - 1)*var(--picker-gap))/var(--picker-cols));
  gap:var(--picker-gap);padding:0 0 12px;scroll-snap-type:x mandatory;}
.pal-item {width:100%;min-width:44px;min-height:44px;border-width:2px;padding:2px;
  scroll-snap-align:start;box-shadow:none;overflow:hidden;}
.pal-item canvas {width:min(var(--thumb-size),calc(100% - 4px));height:auto;aspect-ratio:1;max-height:calc(100% - 20px);object-fit:contain;flex-shrink:1;}
.pal-item .n {font-size:14px;line-height:16px;flex-shrink:0;}
.pal-item.selected {box-shadow:inset 0 0 0 1px #2a6fd4;}
@media(min-width:600px) {
 :root {--picker-cols:10;--picker-rows:1;--picker-gap:4px;--palette-h:144px;}
}
@media(max-height:480px) {
 :root {--palette-h:162px;--thumb-size:48px;}
 .pal-item .n {font-size:12px;line-height:14px;}
}
@media(min-width:600px) and (max-height:480px) {
 :root {--palette-h:108px;--thumb-size:48px;}
}

@media(min-width:480px) {#btnClear {position:static;}}

/* Compact saved-build strip, not a scenery selector or sidebar. */
#mapBar {position:absolute;top:var(--safe-top);left:0;right:0;height:52px;
 display:flex;gap:6px;align-items:center;padding:4px max(8px,var(--safe-right)) 4px max(8px,var(--safe-left));z-index:8;background:rgba(255,255,255,.88);}
#btnNewMap {font-size:14px;white-space:nowrap;min-height:44px;flex:0 0 auto;box-shadow:none;border-radius:10px;}
#mapList {display:flex;gap:5px;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0;height:48px;align-items:center;
 touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none;}
.map-chip {flex:0 0 auto;min-height:44px;min-width:64px;border:2px solid transparent;border-radius:10px;background:white;font-family:inherit;font-size:14px;font-weight:800;padding:6px 10px;cursor:pointer;}
.map-chip.current {border-color:#2a6fd4;background:#e4f1ff;color:#174b9a;}
#moveControls,#topControls {top:calc(60px + var(--safe-top));}
#world {top:calc(52px + var(--safe-top));height:calc(100% - var(--palette-h) - var(--safe-bottom) - 52px - var(--safe-top));}

#mapList::-webkit-scrollbar {display:none;}

@media(max-height:480px) {#moveControls,#topControls {top:calc(52px + var(--safe-top));}}

.map-chip {display:flex;align-items:center;gap:6px;min-width:112px;height:44px;padding:2px 6px;}
.map-preview {display:block;width:60px;height:36px;flex:0 0 60px;border-radius:5px;background:linear-gradient(#73c5ff,#f1faff);pointer-events:none;}
.map-chip span {white-space:nowrap;pointer-events:none;}

.sponge-icon {display:block;flex:0 0 32px;pointer-events:none;}

/* No floating words on the map: status stays in the existing tray footer. */
#hint {width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;}
#toast,#toast.show {position:static;transform:none;max-width:none;border-radius:0;background:none;color:inherit;padding:0;font-size:inherit;line-height:inherit;opacity:1;transition:none;}
#disclaimer {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#variantDialog {display:none;position:absolute;inset:0;z-index:40;background:rgba(14,30,45,.45);padding:max(8px,var(--safe-top)) max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,var(--safe-left));align-items:center;justify-content:center;}
#variantDialog.open {display:flex;}
.variant-card {background:white;border-radius:18px;padding:12px;max-height:100%;overflow:auto;max-width:560px;width:100%;}
.variant-card h2 {font-size:20px;margin:0 0 6px;}
.variant-card p {font-size:12px;margin:0 0 8px;}
#variantOptions {display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px;margin-bottom:8px;}
.variant-option {min-height:70px;border:2px solid #b5cce1;border-radius:10px;background:#f4faff;padding:4px;display:flex;align-items:center;flex-direction:column;cursor:pointer;font:inherit;font-size:13px;touch-action:manipulation;}
.variant-option[aria-pressed="true"] {border-color:#2a6fd4;background:#deecff;}
.variant-option canvas {width:80px;height:48px;pointer-events:none;}

.range-row {display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.range-row label {font-size:13px;font-weight:800;}
#pickerRange {min-height:44px;min-width:120px;max-width:100%;flex:1;font:inherit;font-size:14px;border:2px solid #b5cce1;border-radius:8px;background:white;color:#142a3d;}
#pickerJump {min-height:44px;font-size:15px;}

#palette {position:relative;}
#mapActions {display:none;position:absolute;inset:0;z-index:40;background:rgba(14,30,45,.45);padding:16px;align-items:center;justify-content:center;}
#mapActions.open {display:flex;}
.map-actions-card {max-width:360px;max-height:100%;overflow:auto;background:white;border-radius:16px;padding:16px;}
.map-actions-card h2 {margin:0 0 8px;font-size:19px;}
.map-actions-card p {font-size:13px;}
.map-actions-card .btn {font-size:15px;min-height:44px;margin:4px;}

@media(min-width:600px) {.picker-loopback {display:none;}}

.count-panel {border:1px solid #b5cce1;border-radius:10px;padding:8px;margin:0 0 10px;}
.count-panel legend {font-weight:800;font-size:14px;}
.count-panel label {display:inline-flex;align-items:center;gap:5px;font-size:13px;margin:3px;flex-wrap:wrap;}
.count-panel input,.count-panel select {min-height:44px;max-width:100%;min-width:80px;border:2px solid #b5cce1;border-radius:8px;font:inherit;font-size:15px;padding:4px;}
.count-panel input {width:110px;}
.count-panel .btn {font-size:13px;min-height:44px;}
.count-pages {display:flex;flex-wrap:wrap;align-items:center;gap:4px;}
#countError {color:#a81020;font-weight:800;}

.count-panel input,.count-panel select {font-size:16px;}
#variantOptions[hidden] {display:none;}

/* New world is a second compact button directly below New map, not a sidebar. */
#mapCreate {position:relative;flex:0 0 90px;height:44px;}
#btnNewMap,#btnNewWorld {width:90px;min-height:44px;font-size:13px;white-space:nowrap;box-shadow:none;border-radius:10px;}
#btnNewWorld {position:absolute;top:56px;left:0;}
#moveControls {left:calc(104px + var(--safe-left));}
@media(max-height:480px) {#btnNewWorld {top:48px;}}
#newWorldDialog {display:none;position:absolute;inset:0;z-index:45;background:rgba(14,30,45,.45);padding:max(8px,var(--safe-top)) max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,var(--safe-left));align-items:center;justify-content:center;}
#newWorldDialog.open {display:flex;}
.world-gallery-card {width:100%;max-width:760px;max-height:100%;overflow:auto;background:white;border-radius:18px;padding:16px;overscroll-behavior:contain;}
.world-gallery-card h2 {font-size:22px;margin:0 0 6px;}
.world-gallery-card p {font-size:13px;margin:0 0 12px;}
#worldGallery {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0;}
#worldGallery[hidden],#newWorldForm[hidden] {display:none;}
.world-choice {display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;min-height:140px;padding:8px;border:3px solid #b5cce1;border-radius:14px;background:#f4faff;font:inherit;font-size:18px;font-weight:900;cursor:pointer;touch-action:manipulation;}
.world-choice canvas {display:block;width:100%;height:auto;aspect-ratio:5/3;border-radius:8px;pointer-events:none;}
.world-choice span,.world-choice small {text-align:center;pointer-events:none;}
.world-choice small {font-size:12px;font-weight:600;}
.world-choice:focus-visible {outline:3px solid #2374e1;outline-offset:2px;}
#newWorldForm {display:flex;flex-wrap:wrap;gap:10px;margin:12px 0;}
#newWorldForm p {flex-basis:100%;}
#newWorldForm label {display:flex;flex-wrap:wrap;align-items:center;gap:6px;max-width:100%;font-weight:700;}
#newWorldForm input {min-height:44px;max-width:100%;width:160px;font:inherit;border:2px solid #b5cce1;border-radius:8px;padding:4px;}
.world-gallery-card .btn {font-size:15px;min-height:44px;}
@media(max-width:599px) {#worldGallery {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.world-choice {font-size:16px;}}
@media(max-width:359px) {#worldGallery {grid-template-columns:1fr;}}
#worldStepError {color:#a81020;}

/* Stagger the right cluster on narrow phones: the new left button never overlaps tools. */
@media(max-width:399px) {#topControls {top:calc(112px + var(--safe-top));}}

.world-gallery-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:sticky;top:0;background:white;z-index:1;padding:8px 0;}
.world-gallery-heading .btn {flex-shrink:0;}

/* A real round Earth button, centered below New map; no rectangular label. */
#btnNewWorld {width:52px;height:52px;min-width:52px;min-height:52px;left:19px;border-radius:50%;padding:0;background:#167fe0;overflow:hidden;}
.world-planet {display:block;width:100%;height:100%;pointer-events:none;}
#btnDeleteMode[hidden],#btnClear[hidden] {display:none;}
.pal-item:disabled {cursor:default;opacity:.8;}

/* Compact44px range navigation, outside all ten number-card hit areas. */
#pickerJumps {position:absolute;right:max(8px,var(--safe-right));top:-52px;display:flex;gap:4px;z-index:7;}
.picker-next {width:44px;height:44px;min-width:44px;min-height:44px;padding:2px;display:flex;flex-direction:column;gap:0;border-radius:12px;color:#174b9a;border:2px solid #b5cce1;}
.picker-next>span:first-child {font-size:22px;line-height:20px;pointer-events:none;}
#pickerNextLabel,#pickerPrevLabel {font-size:11px;line-height:12px;pointer-events:none;}
#btnNextRange[hidden],#btnPrevRange[hidden] {display:none;}
@media(max-width:399px) and (max-height:379px) {#pickerJumps {left:max(8px,var(--safe-left));right:auto;}}

/* Local original music, outside the ten numbered-card targets. */
#musicControls {position:absolute;top:-52px;left:max(8px,var(--safe-left));display:flex;gap:4px;z-index:9;}
.music-btn {width:44px;height:44px;min-width:44px;min-height:44px;padding:5px;color:#174b9a;}
#btnMusic .music-waves {display:none;}
#btnMusic[data-playing="true"] .music-waves {display:block;}
#btnMusic[data-playing="true"] .music-slash {display:none;}
#musicVolumePanel {position:absolute;bottom:52px;left:0;width:180px;padding:8px;background:#fff;border:2px solid #b5cce1;border-radius:12px;box-shadow:0 2px 4px #0002;}
#musicVolumePanel[hidden] {display:none;}
#musicVolumePanel label {font-size:13px;font-weight:800;}
#musicVolume {display:block;width:160px;height:44px;min-height:44px;touch-action:pan-x;accent-color:#2374e1;}
.music-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
@media(max-width:399px) and (max-height:379px) {#musicControls {left:50%;transform:translateX(-50%);}}

@media(max-height:379px) {#musicVolumePanel {top:52px;bottom:auto;}}
@media(max-width:399px) and (max-height:379px) {#musicVolumePanel {left:50%;transform:translateX(-50%);}}

/* Saved builds live in a dismissible, always TWO-row horizontal gallery. */
#existingBuildsDialog {display:none;position:absolute;inset:0;z-index:35;background:#0e1e2d73;padding:max(8px,var(--safe-top)) max(8px,var(--safe-right)) max(8px,var(--safe-bottom)) max(8px,var(--safe-left));align-items:center;justify-content:center;}
#existingBuildsDialog.open {display:flex;}
.existing-builds-card {width:100%;max-width:920px;height:min(440px,calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)));max-height:100%;padding:12px;background:white;border-radius:18px;display:flex;flex-direction:column;gap:12px;min-height:0;}
.existing-builds-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 44px;}
.existing-builds-heading h2 {font-size:20px;margin:0;}
#btnExistingBuilds {font-size:14px;min-height:44px;}
#existingBuildsDialog #mapList {display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:calc((100% - 8px)/2);gap:8px;flex:1;min-height:0;height:auto;padding:0 0 8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;touch-action:pan-x;}
#existingBuildsDialog .map-chip {min-width:0;min-height:44px;padding:6px;display:flex;flex-direction:column;align-items:stretch;gap:4px;scroll-snap-align:start;overflow:hidden;}
#existingBuildsDialog .map-preview {width:100%;height:0;min-height:0;flex:1;object-fit:contain;}
#existingBuildsDialog .map-chip span {font-size:13px;line-height:18px;flex:0 0 18px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#existingBuildsDialog .map-chip.current {border:3px solid #1678db;background:#e3f3ff;}
@media(min-width:600px) {#existingBuildsDialog #mapList {grid-auto-columns:calc((100% - 24px)/4);}}