/* Voxel World — docs/voxel-world-spec.md §8. R-C15: the page never scrolls;
   the canvas is the page. */
:root {
  --bg: #16212b;
  --panel: #1e2c38;
  --ink: #eef4f8;
  --dim: #9fb3c2;
  --accent: #4aa3df;
  --barH: 48px;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--bg); color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
#app { height: 100%; display: flex; flex-direction: column; }

#hdr {
  display: flex; align-items: center; gap: 8px;
  padding: max(6px, env(safe-area-inset-top)) 8px 6px;
  min-height: var(--barH); background: var(--panel); flex: none;
}
#hdr .pill {
  min-width: 44px; min-height: 44px; border: 0; border-radius: 12px;
  background: #2a3b4a; color: var(--ink); font-size: 18px; cursor: pointer;
}
#hdr .pill:last-child { margin-left: 0; }
#hdrPause { margin-left: auto; }
#hudFound, #hudSeed { font-size: 14px; color: var(--dim); white-space: nowrap; }
#hudSeed { overflow: hidden; text-overflow: ellipsis; max-width: 38vw; }

.scr { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
.scr.on { display: block; }
#scr-play.on { display: flex; padding: 0; }

h1 { font-size: 28px; margin: 8px 0 4px; }
.sub { color: var(--dim); margin-bottom: 18px; }
.pickLabel { display: block; font-size: 14px; color: var(--dim); margin: 14px 0 6px; }
/* R29 */
.kindRow { display: flex; gap: 8px; }
.kindRow .big { flex: 1 1 0; margin: 0; font-size: 15px; }
.kindRow .big[aria-pressed="true"] { outline: 3px solid #fbbf24; outline-offset: 1px; }
#seedInput {
  width: 100%; max-width: 420px; min-height: 48px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid #33485c; background: #142029;
  color: var(--ink); font: inherit;
}
.big {
  display: block; width: 100%; max-width: 420px; min-height: 52px;
  margin: 10px 0; padding: 12px 16px; border: 0; border-radius: 14px;
  background: #2a3b4a; color: var(--ink); font: inherit; cursor: pointer;
}
.big.primary { background: var(--accent); color: #06121c; font-weight: 600; }
#statsLine { color: var(--dim); font-size: 13px; margin-top: 14px; max-width: 420px; }

#stageWrap { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#beaconLayer { position: absolute; inset: 0; pointer-events: none; }
.beacon { position: absolute; transform: translate(-50%, -50%); line-height: 1;
          text-shadow: 0 0 12px rgba(255, 238, 160, .9); }
#crosshair {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: rgba(255,255,255,.75); font-size: 22px; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
#compass {
  position: absolute; left: 50%; transform: translateX(-50%); top: 10px;
  display: flex; align-items: center; gap: 6px; pointer-events: none;
  background: rgba(12,20,28,.55); padding: 4px 10px; border-radius: 14px;
}
#compass .arrow { font-size: 18px; line-height: 1; display: inline-block; }
#compass .dist { font-size: 12px; color: rgba(255,255,255,.9); }

/* R27: the orbit view */
.stageBtn {
  position: absolute; top: 10px; right: max(16px, env(safe-area-inset-right));
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(12,20,28,.72); color: var(--ink); font-size: 22px; cursor: pointer;
}
#pin {
  display: none; position: absolute; transform: translate(-50%, -100%);
  font-size: 30px; line-height: 1; pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
#orbitBar {
  display: none; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom)); gap: 8px;
}
#orbitDetail { padding: 0 12px; font-size: 16px; white-space: nowrap; }
/* against space the usual dark button disappears */
#orbitBar .tool { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); }
#app.orbiting #orbitBar { display: flex; }
#app.orbiting #pin { display: block; }
#app.orbiting #buildBar, #app.orbiting #flyCol, #app.orbiting .jump,
#app.orbiting #crosshair, #app.orbiting #compass, #app.orbiting #orbitBtn,
#app.orbiting .stick { display: none; }

#glFail {
  display: none; position: absolute; left: 16px; right: 16px; top: 16px;
  padding: 14px; border-radius: 12px; background: #40222a; color: #ffd9de;
  font-size: 14px;
}
#glFail.on { display: block; }

/* R17: the stick is positioned by app.js under the thumb that touched the
   left of the screen, and hidden until one does. */
.stick {
  position: absolute; width: 108px; height: 108px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  display: none; align-items: center; justify-content: center;
  pointer-events: none; touch-action: none;
}
.stick.on { display: flex; }
.knob { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.55); }

/* R30 */
#flyCol {
  position: absolute; right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 84px);
  display: flex; flex-direction: column-reverse; gap: 8px;
}
/* A phone on its side is ~320px of stage: four 56px buttons (248px) stacked
   above the jump button went under the header. There the column stands beside
   the jump button instead, from the bottom: 16 + 248 fits in 320. */
@media (max-height: 480px) {
  #flyCol { bottom: max(16px, env(safe-area-inset-bottom)); right: calc(max(16px, env(safe-area-inset-right)) + 72px); }
}
.flyBtn {
  width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: rgba(12,20,28,.72); color: var(--ink); font-size: 22px; cursor: pointer;
  touch-action: none;
}
.flyBtn[aria-pressed="true"] { outline: 3px solid #fbbf24; outline-offset: 1px; }
.flyBtn.whenFlying { display: none; }
#app.flying .flyBtn.whenFlying { display: block; }
#app.flying .jump { display: none; }
.jump {
  position: absolute; right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px);
  width: 64px; height: 64px; border-radius: 50%; border: 0;
  background: rgba(12,20,28,.72); color: var(--ink); font-size: 26px; cursor: pointer;
}

/* R17e: a drawer on the left edge. Closed it is one 56px button (and undo
   while there is something to undo); open it adds a column above it. The
   column is 7 x 44 + 6 x 6 + the label = about 360px, so on a short screen
   (a phone on its side) the palette wraps into a second column instead. */
#buildBar {
  position: absolute; left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
#drawer {
  display: none; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 8px; border-radius: 14px; background: rgba(12,20,28,.55);
}
#buildBar.open #drawer { display: flex; }
#dockRow { display: flex; gap: 8px; align-items: center; }
.dockBtn {
  position: relative; width: 56px; height: 56px; border-radius: 14px; border: 0;
  background: rgba(12,20,28,.72); cursor: pointer; padding: 0;
}
#buildBar.open .dockBtn { outline: 3px solid #fbbf24; outline-offset: 1px; }
#dockSwatch {
  position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border-radius: 9px;
  border: 2px solid rgba(255,255,255,.4);
}
#dockTool {
  position: absolute; right: 2px; bottom: 0; font-size: 20px; line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#palette { display: flex; flex-direction: column; flex-wrap: wrap; gap: 6px;
            max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); }
.swatch {
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  border: 2px solid rgba(255,255,255,.25);
}
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.5); }
#matName {
  font-size: 12px; color: rgba(255,255,255,.85); text-transform: capitalize;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#toolRow { display: flex; gap: 8px; }
.tool {
  min-width: 48px; min-height: 48px; border: 0; border-radius: 12px;
  background: rgba(12,20,28,.72); color: var(--ink); font-size: 20px; cursor: pointer;
}
.tool:disabled { opacity: .4; }
/* R17d: the tool a tap uses */
.tool.on { outline: 3px solid #fbbf24; outline-offset: 1px; }

.ovl {
  display: none; position: absolute; inset: 0; align-items: flex-start;
  justify-content: center; overflow-y: auto;
  background: rgba(8,14,20,.72); padding: 16px;
}
.ovl.on { display: flex; }
.ovlCard {
  background: var(--panel); border-radius: 16px; padding: 20px;
  max-width: 420px; width: 100%; text-align: center; margin: auto;
}
#ovlTitle { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
#ovlSub { color: var(--dim); margin-bottom: 14px; }
.ovlCard .big { margin-left: auto; margin-right: auto; }

#shareCode {
  width: 100%; margin: 6px 0; padding: 8px; border-radius: 10px;
  border: 1px solid #33485c; background: #142029; color: var(--ink);
  font: 12px/1.35 ui-monospace, Menlo, monospace; resize: none;
}
#shareNote { color: var(--dim); font-size: 12px; min-height: 1em; }

#journalTitle { font-size: 19px; font-weight: 600; margin-bottom: 2px; }
#journalCount { color: var(--dim); font-size: 13px; margin-bottom: 12px; }
#journalList { text-align: left; margin-bottom: 12px; }
.jrow {
  padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.05);
  margin-bottom: 6px; color: var(--dim); font-size: 15px;
}
.jrow.got { color: var(--ink); background: rgba(74,163,223,.16); }

.card { background: var(--panel); border-radius: 14px; padding: 14px 16px; margin: 0 0 12px; max-width: 560px; }
.card h2 { font-size: 16px; margin: 0 0 6px; }

/* R17e: toasts at the top, under the header and the compass, where no control is */
.toast-host { position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
              top: calc(env(safe-area-inset-top) + 104px); text-align: center; }
.toast {
  background: rgba(12,20,28,.92); color: var(--ink); padding: 10px 14px;
  border-radius: 12px; margin-top: 6px; font-size: 14px; white-space: nowrap;
}
#footer { flex: none; padding: 2px 8px max(2px, env(safe-area-inset-bottom)); text-align: center; }

/* At 320px the palette (5 x 44 + gaps = 244) plus the jump button needs the
   build bar narrower than the screen, and the jump button smaller. Measured
   with clientWidth: innerWidth includes the scrollbar and hid exactly this
   class of overflow for three releases in another product. */
/* SIX 44px PILLS AND A COUNTER DO NOT FIT IN 320px. Five pills at the 44px floor are 220px
   before any gaps, and the floor is not negotiable -- so what goes is the text,
   not the target. The planet's name is on the front screen and in the journal;
   the counter keeps its number and loses its emoji, because the 🧭 button is
   right next to it saying the same thing.

   The arithmetic, because eyeballing it is how this shipped wrong: the shared
   shell injects a sixth pill (#hdrShelf, "all games") that this game does not
   declare, so the row is 6 x 44 = 264px of buttons before a single gap. At
   gap 6 and padding 6 that is 312, plus the counter: 334 in a 320px header.
   At gap 4 and padding 4 it is 296 plus the counter, which fits with two
   pixels to spare.

   Measured with clientWidth: innerWidth includes the scrollbar and hid exactly
   this class of overflow for three releases in another product. */
@media (max-width: 420px) {
  #hdr { gap: 4px; padding-left: 4px; padding-right: 4px; }
  #hudFound { font-size: 13px; }
  #hudSeed { display: none; }
}
@media (max-width: 420px) {
  .jump { width: 56px; height: 56px; font-size: 22px; }
}