/* ── Design tokens ─────────────────────────────────────────────────────────
   One place to tune the whole UI. Overlays/panels/buttons below consume these
   via the shared .overlay / .panel / .btn classes, so surfaces stay consistent
   and a look change is a one-line edit here. */
:root {
  color-scheme: dark; /* our UI is dark; stops the browser from auto-inverting colors */

  --panel-bg: rgba(15, 20, 32, .72);
  --panel-border: 1px solid rgba(255, 255, 255, .12);
  --panel-radius: 16px;
  --panel-shadow: 0 24px 60px rgba(0, 0, 0, .5);

  --overlay-dim: radial-gradient(ellipse at center, rgba(20, 30, 48, .55), rgba(10, 14, 24, .85));
  --overlay-blur: blur(3px);

  --accent: #4caf50;
  --accent-bright: #8be07a;
  --accent-bright-rgb: 139, 224, 122; /* #8be07a as rgb, for rgba() alpha variants */
  --accent-ink: #0c1a0c;    /* text on an accent-filled button */
  --accent-tint: #eafbe4;   /* light-green text on active/selected items */
  --text: #e6edf6;
  --text-dim: #c7d0de;
  --fire: #ff9a2b;          /* furnace burn gauge / flame */
}

/* ── Overlay + panel primitives ────────────────────────────────────────────
   .overlay = the full-screen dim+blur scrim that centres a panel. Each modal
   keeps its own id only for z-index and show/hide. .panel = the card. */
.overlay {
  position: fixed; inset: 0;
  align-items: center; justify-content: center;
  background: var(--overlay-dim);
  -webkit-backdrop-filter: var(--overlay-blur); backdrop-filter: var(--overlay-blur);
}
.panel {
  position: relative;
  background: var(--panel-bg);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #0b1018;
  font-family: "Segoe UI", Roboto, system-ui, sans-serif;
  color: #fff;
  /* No text selection / iOS long-press magnifier-callout on the game UI. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

#game { display: block; width: 100dvw; height: 100dvh; touch-action: none; }

/* Underwater tint — a translucent blue wash over the whole view while submerged */
#underwater {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background:
    radial-gradient(ellipse at center, rgba(30,90,150,0.18), rgba(12,45,95,0.42)),
    rgba(28,86,150,0.32);
}
#underwater.active { opacity: 1; }

/* Hurt vignette — a red edge-flash pulsed on the whole view when a hostile mob hits you */
#hurt {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(150,0,0,0) 42%, rgba(150,0,0,0.6) 100%);
}
#hurt.flash { animation: hurt-flash .45s ease-out; }
@keyframes hurt-flash { from { opacity: .9; } to { opacity: 0; } }

/* Crosshair */
#crosshair {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
  mix-blend-mode: difference;
}
#crosshair.active { opacity: .85; }
#crosshair span {
  position: absolute;
  background: #fff;
}
#crosshair span:nth-child(1) { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
#crosshair span:nth-child(2) { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }

/* HUD / hotbar */
#hud {
  position: fixed;
  left: 0; right: 0; bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
#hud.active { opacity: 1; }

/* Survival vitals: hearts (health) above the hotbar, air bubbles above hearts. */
#vitals { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.vit-hearts, .vit-hunger, .vit-bubbles { display: flex; gap: 2px; }
/* A pip = a dark bg icon with a coloured fg clipped over it (full/half/empty). */
.vit-pip { position: relative; width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.vit-pip > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* bg, full-size */
.vit-pip-clip { position: absolute; inset: 0; overflow: hidden; }
.vit-pip-clip svg { position: absolute; top: 0; left: 0; width: 18px; height: 18px; display: block; } /* fg, fixed */
.vit-heart-bg { fill: #40161a; } .vit-heart-fg { fill: #ff4444; }
.vit-food-bg { fill: #2e1e10; } .vit-food-fg { fill: #c9803e; }
.vit-bubble {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.4);
}
.vit-bubble.full {
  background: radial-gradient(circle at 35% 30%, #cdeeff, #4aa3e0); border-color: rgba(255,255,255,.4);
}
/* On touch, the hotbar is tappable (above the look pad) to select slots. */
body.is-touch #hud { z-index: 6; }
body.is-touch #hotbar { pointer-events: auto; touch-action: none; }

#hotbar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,.35);
  border: 2px solid rgba(0,0,0,.5);
  border-radius: 6px;
}

/* Death screen (survival): a red scrim over the world. */
#death { display: none; z-index: 24; background: radial-gradient(ellipse at center, rgba(96,22,22,.55), rgba(18,6,6,.9)); }
#death.active { display: flex; }
.death-panel { text-align: center; padding: 34px 48px; }
.death-title { font-size: 34px; letter-spacing: 2px; color: #ff6b6b; margin: 0 0 20px; }
.slot {
  position: relative;
  width: 52px; height: 52px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.4);
  transform: scale(1.06);
}
.slot canvas { width: 38px; height: 38px; image-rendering: pixelated; border-radius: 2px; }
.slot .num {
  position: absolute;
  top: 1px; left: 4px;
  font-size: 11px;
  opacity: .6;
  text-shadow: 1px 1px 0 #000;
}
.slot .label {
  position: absolute;
  bottom: -20px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #000;
  opacity: 0;
  transition: opacity .2s;
}
.slot.selected .label { opacity: 1; }
/* survival stack count (bottom-right) and empty (depleted) state */
.slot .count {
  position: absolute;
  bottom: 1px; right: 3px;
  font-size: 12px; font-weight: 700;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000;
}
.slot.empty canvas { opacity: .28; }
.slot.empty .count { opacity: .6; }

/* Inventory */
#inventory { display: none; z-index: 12; }
#inventory.active { display: flex; }

/* Profile creator: name on top; a category rail, 3D preview, and the active category's
   controls below — all rendered from the avatar-config registry. */
#profile { display: none; z-index: 16; }
#profile.active { display: flex; }
.profile-panel { width: 680px; max-width: 94vw; padding: 22px 26px 24px; }
.pf-name-row { margin-top: 4px; text-align: left; }
.pf-name-row input {
  width: 100%; padding: 10px 12px; font-size: 15px; color: #eaf1f8;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
}
.pf-name-row input:focus { outline: none; border-color: rgba(var(--accent-bright-rgb), .6); }
.profile-body { display: flex; gap: 18px; margin-top: 10px; text-align: left; align-items: flex-start; }
/* Category rail (left). */
.pf-rail { flex: 0 0 108px; display: flex; flex-direction: column; gap: 4px; }
.pf-rail-btn {
  padding: 9px 12px; text-align: left; font-size: 14px; font-weight: 600; color: var(--text-dim);
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
}
.pf-rail-btn:hover { background: rgba(255,255,255,.06); }
.pf-rail-btn.active { background: rgba(var(--accent-bright-rgb), .16); color: var(--accent-tint); }
/* Preview column (middle): the 3D canvas + action buttons. */
.pf-preview-col { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.profile-preview {
  width: 220px; height: 300px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  background: radial-gradient(ellipse at 50% 38%, rgba(64,78,104,.4), rgba(6,9,16,.55));
  cursor: grab; touch-action: none; /* drag to rotate; don't scroll the page on touch */
}
.profile-preview.grabbing { cursor: grabbing; }
.pf-actions { display: flex; gap: 8px; }
.pf-actions .btn { margin-top: 0; font-size: 12px; padding: 7px 12px; }
/* Controls for the active category (right). */
.pf-controls { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pf-controls .set-row label { font-size: 13px; }
.pf-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-seg.pf-grid { display: grid; }          /* even columns → uniform width, rows fill */
.pf-seg.pf-center { justify-content: center; } /* fallback for counts that can't fill */
.pf-seg-btn {
  flex: 0 1 auto; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text-dim);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; cursor: pointer;
}
.pf-seg-btn:hover { background: rgba(255,255,255,.1); }
.pf-seg-btn.active { background: rgba(var(--accent-bright-rgb), .18); border-color: rgba(var(--accent-bright-rgb), .5); color: var(--accent-tint); }
/* Colour control: a labelled row with the swatch on the right. */
.pf-color-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14px; color: var(--text); padding: 7px 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
}
.pf-color-row input[type="color"] {
  width: 46px; height: 28px; padding: 0; border: none; border-radius: 5px; background: none; cursor: pointer;
}
/* One consistent focus treatment — no stray click-ring, a clear keyboard ring. */
.pf-rail-btn:focus, .pf-seg-btn:focus { outline: none; }
.pf-rail-btn:focus-visible, .pf-seg-btn:focus-visible {
  outline: 2px solid rgba(var(--accent-bright-rgb), .6); outline-offset: 1px;
}
body.is-touch .profile-body { flex-direction: column; align-items: stretch; }
body.is-touch .pf-rail { flex-direction: row; flex-wrap: wrap; flex-basis: auto; }
body.is-touch .pf-preview-col { align-self: center; }

/* Unified game/settings modal — tabs down the left, one page on the right. */
#gameMenu { display: none; z-index: 22; }
#gameMenu.active { display: flex; }
.gm-panel {
  display: flex; gap: 0;
  width: 720px; max-width: 94vw; height: 520px; max-height: 90vh;
  overflow: hidden;
}
.gm-tabs {
  display: flex; flex-direction: column; gap: 4px; padding: 22px 14px;
  background: rgba(0,0,0,.22); border-right: 1px solid rgba(255,255,255,.08); flex: 0 0 170px;
}
.gm-tab {
  padding: 12px 16px; text-align: left; font-size: 15px; font-weight: 600;
  color: #c7d0de; background: transparent; border: none; border-radius: 8px; cursor: pointer;
}
.gm-tab:hover { background: rgba(255,255,255,.06); }
.gm-tab.active { background: rgba(140,224,122,.16); color: #eafbe4; }
.gm-tab[hidden] { display: none; }
.gm-content { flex: 1; padding: 32px 34px 26px; overflow-y: auto; text-align: left; }
.gm-page { display: flex; flex-direction: column; gap: 16px; max-width: 420px; }
.gm-page[hidden] { display: none; }
.gm-opts { display: flex; flex-direction: column; gap: 8px; }
/* Settings controls (used inside the Video/Controls pages). */
.set-row { display: flex; flex-direction: column; gap: 6px; }
.set-row label { font-size: 14px; color: #e6edf6; }
.set-val { float: right; opacity: .7; font-variant-numeric: tabular-nums; }
.set-hint { font-size: 11.5px; opacity: .5; margin: 2px 0 0; }
.set-row input[type="range"] { width: 100%; accent-color: #4caf50; }
.set-toggle { flex-direction: row; align-items: center; justify-content: space-between; }
.set-toggle input { width: 18px; height: 18px; accent-color: #4caf50; }
/* Key bindings table (Controls page) — a table now so it can become editable later. */
.kb-title { margin-top: 8px; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; opacity: .5; }
.keybinds { width: 100%; border-collapse: collapse; }
.keybinds td { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
.kb-action { font-size: 13.5px; color: #dbe3ee; }
.kb-keys { text-align: right; }
.keybinds kbd {
  display: inline-block; margin-left: 3px; padding: 2px 7px; font: inherit; font-size: 11.5px;
  color: #e8eef7; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  border-bottom-width: 2px; border-radius: 5px;
}
body.is-touch .gm-panel { width: 92vw; height: auto; max-height: 88dvh; }
body.is-touch .gm-tabs { flex-basis: 108px; padding: 12px 8px; }
.inv-panel {
  width: min(880px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 20px;
}
/* Header stays put, the item grid scrolls, the hotbar footer is always visible —
   so the slot you're assigning to is on screen while you browse items. */
.inv-head { flex: 0 0 auto; padding-right: 44px; } /* clear the absolute ✕ */
.inv-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.inv-foot {
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 12px;
}
.inv-foot .inv-sub { margin: 10px 0 8px; }
/* Two columns side by side (Your items + palette | Crafting) — only in creative,
   where the palette fills a column. Survival is lighter, so a single column.
   Also stacks to one column when narrow. */
.inv-cols { display: flex; gap: 22px; align-items: flex-start; }
.inv-col { flex: 1; min-width: 0; }
body:not(.creative) .inv-cols { display: block; }
@media (max-width: 560px) { .inv-cols { display: block; } }
/* Always-visible close in the panel's top-right corner (panel no longer scrolls;
   its body does), so you never have to scroll to close it. */
.inv-x {
  position: absolute;
  top: 14px; right: 16px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  cursor: pointer;
  z-index: 3;
}
.inv-x:hover { background: rgba(255,255,255,.16); }
.inv-panel h2 { font-size: 22px; letter-spacing: 2px; }
.inv-hint { margin: 6px 0 16px; font-size: 12px; line-height: 1.5; opacity: .6; }
.inv-hint b { color: #b6f0a8; }
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  gap: 8px;
  justify-content: center;
}
.inv-item {
  width: 64px; height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.inv-item:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.inv-item canvas { width: 34px; height: 34px; image-rendering: pixelated; border-radius: 2px; }
.inv-name {
  font-size: 9px; opacity: .65; line-height: 1;
  max-width: 60px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-sub { margin: 22px 0 8px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .55; }
.inv-faint { text-transform: none; letter-spacing: 0; opacity: .7; font-size: 11px; }
/* item count badge on inventory cells */
.inv-item .inv-count {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 11px; font-weight: 700;
  text-shadow: 1px 1px 0 #000, -1px 0 0 #000;
}
.inv-item { position: relative; }
/* crafting recipe rows */
.inv-recipes { display: flex; flex-direction: column; gap: 6px; }
.inv-recipe {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  opacity: .45;
}
.inv-recipe.craftable { opacity: 1; cursor: pointer; border-color: rgba(182,240,168,.4); }
.inv-recipe.craftable:hover { background: rgba(182,240,168,.14); }
.inv-recipe canvas { width: 30px; height: 30px; image-rendering: pixelated; }
.inv-recipe .r-out { font-size: 13px; font-weight: 600; min-width: 130px; }
.inv-recipe .r-in { font-size: 11px; opacity: .75; }
.inv-hotbar { display: flex; gap: 4px; justify-content: center; }
.inv-hotbar .slot { cursor: pointer; }
.inv-hotbar .slot .label { display: none; }

/* Worlds panel — same overlay/panel look as the inventory. */
/* (#worlds / .worlds-panel removed — dead since the world list moved into #menu's
   screens; the .world-* rows below are still live inside that screen.) */
.world-list { flex: 1 1 auto; overflow-y: auto; min-height: 48px; margin-bottom: 14px; }
.world-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-bottom: 8px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.world-row:hover { background: rgba(140,224,122,.18); border-color: rgba(140,224,122,.6); }
.world-row.current { border-color: rgba(182,240,168,.5); background: rgba(182,240,168,.12); }
.world-info { flex: 1; min-width: 0; }
.world-name { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.world-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 6px; color: #cdeec0;
  background: rgba(182,240,168,.18); border: 1px solid rgba(182,240,168,.35);
}
.world-meta { font-size: 12px; opacity: .55; margin-top: 2px; }
.world-load, .world-del { flex: 0 0 auto; padding: 8px 14px; font-size: 13px; }
.world-del { color: #f0b0a8; border-color: rgba(240,140,120,.35); }
/* Create is collapsed to a single button by default (keeps the list roomy on
   short screens); tapping it reveals the name/seed inputs. */
.world-create { flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
#worldNewToggle { width: 100%; }
.world-create-form { display: none; }
.world-create.open #worldNewToggle { display: none; }
.world-create.open .world-create-form { display: block; }
.world-create-row { display: flex; gap: 8px; }
.world-create-row button { flex: 1; }
.w-input {
  width: 100%; margin-bottom: 8px; padding: 10px 12px;
  font-size: 14px; color: #fff; font-family: inherit;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  outline: none;
  user-select: text; -webkit-user-select: text; /* body disables selection */
}
.w-input:focus { border-color: rgba(182,240,168,.5); }

/* Debug */
#debug {
  position: fixed;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: max(8px, env(safe-area-inset-left, 0px));
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  white-space: pre;
  opacity: 0;
}
#debug.active { opacity: .85; }

/* Profiler overlay (top-right, toggle with P) */
#profiler {
  position: fixed;
  top: max(8px, env(safe-area-inset-top, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  white-space: pre;
  opacity: 0;
  z-index: 6;
}
#profiler.active { opacity: .9; }

/* Touch controls */
#touch { position: fixed; inset: 0; z-index: 4; display: none; }
#touch.active { display: block; }
#touch > * { pointer-events: auto; touch-action: none; }
#lookpad { position: absolute; inset: 0; }
#joystick {
  position: absolute;
  left: max(24px, env(safe-area-inset-left, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  width: 124px; height: 124px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.18);
}
#joyKnob {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.28); border: 2px solid rgba(255,255,255,.4);
}
/* Small utility cluster, top-right, out of the look area. */
#touchTop {
  position: absolute; display: flex; gap: 10px;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
}
/* Jump (+ fly-down) on the right edge, vertically centred so the lower-right
   corner stays free for the look thumb. */
#touchRight {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; align-items: center; gap: 12px;
}
#touchRight .tcol { display: flex; flex-direction: column; gap: 12px; }
.tbtn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,0,0,.38); border: 2px solid rgba(255,255,255,.22);
  color: #fff; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  -webkit-user-select: none; user-select: none;
}
.tbtn:active { background: rgba(255,255,255,.22); transform: scale(.94); }
.tbtn.active { background: rgba(182,240,168,.28); border-color: rgba(182,240,168,.6); }
#touchTop .tbtn { width: 48px; height: 48px; font-size: 19px; }
#invClose { display: block; margin: 20px auto 0; }

/* Touch-friendly inventory (esp. short landscape phones): use the screen, scroll
   with momentum, and give recipes/close a bigger tap target. */
body.is-touch .inv-panel {
  width: 86vw; max-height: 92dvh;
  padding: 12px 16px 14px;
}
body.is-touch .inv-body { -webkit-overflow-scrolling: touch; }
body.is-touch .inv-panel h2 { font-size: 18px; }
body.is-touch .inv-hint { margin: 4px 0 10px; }
body.is-touch .inv-sub { margin: 14px 0 6px; }
body.is-touch .inv-recipe { padding: 11px 12px; }
body.is-touch .inv-item { width: 60px; height: 60px; }
body.is-touch #invClose { padding: 14px 32px; font-size: 16px; }

/* Menu */
#menu { display: flex; z-index: 10; transition: opacity .25s; }
#menu.hidden { opacity: 0; pointer-events: none; }

/* Light "enter play" prompt over the rendered world (vs the heavy pause menu). */
#playPrompt {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9;
  background: rgba(8, 12, 20, .5);
  backdrop-filter: blur(2px);
}
#playPrompt.active { display: flex; }
.play-prompt-inner {
  padding: 12px 26px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .5px;
  color: #eaf1f8;
  background: rgba(12, 18, 28, .62);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
}

/* #menu is now only the pre-game picker (the in-game menu is #gameMenu). */
#menuModeSelect { display: block; }
/* The pre-game menu is a stack of screens; one shows at a time. [hidden] on the
   others; :not([hidden]) so an ID/class display rule can't override the hidden attr. */
.menu-screen:not([hidden]) {
  display: flex; flex-direction: column; gap: 10px; margin: 24px auto 0;
  width: 300px; max-width: 82vw;
}
/* Rows and form fields read left-aligned; buttons stay centered (panel default). */
.menu-screen .world-info, .menu-screen .ws-field { text-align: left; }
.menu-screen[disabled] { opacity: .4; cursor: not-allowed; }
.world-list { max-height: 46vh; }
/* A world row in the select screen: name/meta on the left, Play + Edit on the right. */
.world-play, .world-edit { flex: 0 0 auto; font-size: 13px; border-radius: 8px; }
.world-play {
  height: 38px; padding: 0 18px; font-weight: 700; color: #0c1a0c;
  background: linear-gradient(180deg, #8be07a, #4caf50); border: none; cursor: pointer;
}
.world-play:hover { filter: brightness(1.06); }
/* ⚙ icon button: a fixed square so the glyph sits dead-centre (its font metrics
   otherwise ride high) and matches the Play button's height. */
/* Styled on its own (not .secondary) so no generic button rule can override its
   padding/size. Fixed square + centred inline SVG. */
.world-edit {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 38px; height: 38px; padding: 0;
  color: #cdd6e6; cursor: pointer;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 9px;
  transition: background .15s, border-color .15s;
}
.world-edit:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.world-edit svg { display: block; } /* symmetric viewBox → centres exactly */
.ws-field { display: flex; flex-direction: column; gap: 4px; }
.ws-field label { font-size: 12px; letter-spacing: .5px; opacity: .6; text-transform: uppercase; }
.ws-field input {
  padding: 10px 12px; font-size: 15px; color: #eaf1f8;
  background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
}
.ws-field input:focus { outline: none; border-color: rgba(139,224,122,.6); }
.ws-readonly { padding: 8px 0 2px; font-size: 15px; opacity: .7; }
.ws-note { font-size: 11.5px; line-height: 1.5; opacity: .55; margin: -2px 0 2px; }
.ws-note code { background: rgba(255,255,255,.1); padding: 1px 5px; border-radius: 4px; font-size: 11px; }
/* ── Buttons ─────────────────────────────────────────────────────────────────
   .btn base (small) + size/variant modifiers, all single-class — so the old
   `button.secondary` (0,1,1) vs `.mode-btn` (0,1,0) specificity trap is gone. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 9px 22px; font-size: 13px; font-weight: 600;
  border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .2s;
}
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-lg { padding: 14px 40px; font-size: 18px; font-weight: 700; letter-spacing: 1px; border-radius: 10px; }
.btn-primary {
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  box-shadow: 0 8px 24px rgba(76,175,80,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(76,175,80,.5); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  margin-top: 10px; color: #d8def0;
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
}
.btn-secondary:hover { background: rgba(255,255,255,.16); }
.btn-danger { color: #f0b0a8; border-color: rgba(240,140,120,.35); }
.mode-back { margin-top: 6px; align-self: center; }
.mp-connect { display: flex; gap: 8px; }
#mpAddress {
  flex: 1;
  padding: 11px 12px;
  font-size: 15px;
  color: #eaf1f8;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  min-width: 0;
}
#mpAddress:focus { outline: none; border-color: rgba(139,224,122,.6); }
.mp-hint { font-size: 12px; opacity: .6; margin: 2px 0 0; min-height: 1em; }
.mp-hint.warn { color: #f2b56b; opacity: .95; }

/* Picker-only extras on top of the shared .panel card. */
.menu-panel {
  text-align: center;
  padding: 40px 56px;
}
/* Touch: the desktop key hints don't apply and make the panel too tall to fit a
   landscape phone — hide them. */
body.is-touch .controls { display: none; }
/* Short (landscape phone) viewports: tighten the menu so it fits. */
@media (max-height: 520px) {
  .menu-panel { padding: 22px 40px; }
  .menu-panel h1 { font-size: 38px; letter-spacing: 5px; }
  .subtitle { font-size: 12px; }
}
/* Narrow (portrait phone) viewports: shrink the title so "NOVA" isn't clipped. */
@media (max-width: 430px) {
  .menu-panel { padding: 26px 20px; }
  .menu-panel h1 { font-size: 28px; letter-spacing: 2px; }
  .subtitle { font-size: 11px; letter-spacing: 2px; }
}
.menu-panel h1 {
  font-size: 56px;
  letter-spacing: 8px;
  font-weight: 800;
  background: linear-gradient(180deg, #b6f0a8, #4caf50 60%, #2e7d32);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 16px rgba(76,175,80,.25);
}
.subtitle {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: .6;
}
/* (The Resume button reuses id="playBtn" but is styled entirely by .btn classes — no
   #playBtn ID rule, so a picker viewport media query can't leak into the modal.) */

.controls {
  list-style: none;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.9;
  opacity: .8;
}
.controls b { color: #b6f0a8; }

/* Menu options / settings (the touch-reachable equivalents of the shortcuts) */
.menu-opts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.menu-opts .btn-secondary { margin-top: 0; }
.menu-adv { margin-top: 12px; font-size: 12px; }
.menu-adv summary { cursor: pointer; opacity: .55; letter-spacing: 1px; margin-bottom: 8px; }
.btn-secondary.on { background: rgba(182,240,168,.22); border-color: rgba(182,240,168,.6); color: #eafbe4; }

/* Transient toast (e.g. "Saved") */
#toast {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 7px 16px;
  background: rgba(15, 20, 32, .8);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: .5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  z-index: 15;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.saveinfo {
  margin-top: 16px;
  font-size: 12px;
  opacity: .55;
}
.buildinfo {
  margin-top: 14px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  opacity: .4;
}
/* (button.secondary retired — replaced by .btn / .btn-secondary above.) */

/* "Rotate to landscape" — only while playing on a touch device in portrait. */
#rotate {
  position: fixed; inset: 0; z-index: 30;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 24px;
  background: rgba(10, 14, 24, .94);
}
@media (orientation: portrait) and (pointer: coarse) {
  body.playing #rotate { display: flex; }
}
.rotate-icon { font-size: 64px; animation: rotateHint 1.8s ease-in-out infinite; }
@keyframes rotateHint { 0%, 38% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
#rotate p { font-size: 18px; letter-spacing: 1px; opacity: .85; }

#loading {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: #0b1018;
  font-size: 20px;
  letter-spacing: 2px;
  z-index: 20;
}
#loading.active { display: flex; }

/* ---- Chest (block-entity UI): a grid of storage slots ---- */
#chest { display: none; z-index: 12; }
#chest.active { display: flex; }
#hopper { display: none; z-index: 12; }
#hopper.active { display: flex; }
/* Studio — the authoring hub (its own top-level surface, not part of Settings). */
#studio { display: none; z-index: 20; }
#studio.active { display: flex; }
.studio-panel { width: min(560px, 94vw); padding: 20px 22px; }
/* The intro line sits at the ✕'s height, so clear it (the <h2> already does via .inv-head). */
.studio-panel > .set-hint, .sl-panel > .set-hint { padding-right: 44px; }
.studio-tools { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 16px; }
.studio-tool { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 12px 14px; border-radius: var(--panel-radius); border: var(--panel-border);
  background: rgba(255, 255, 255, .04); color: inherit; width: 100%; cursor: pointer; }
button.studio-tool:hover { border-color: rgba(var(--accent-bright-rgb), .5); background: rgba(var(--accent-bright-rgb), .1); }
.studio-tool.is-soon { opacity: .45; cursor: default; }
.studio-tool-title { font-weight: 600; font-size: 15px; }
.studio-tool-desc { font-size: 12px; opacity: .7; }

/* Sound Lab / Music — tools inside Studio; sit above it. */
#soundlab, #musiclab { display: none; z-index: 26; }
#soundlab.active, #musiclab.active { display: flex; }
.ml-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.ml-row .btn { text-align: center; min-width: 0; } /* uniform, column-aligned playback buttons */
.ml-action { flex: 0 0 auto; padding: 5px 11px; font-size: 12px; font-weight: 600; }
/* Music tool — library rail + tabbed editor (like the Sound Lab) */
.sl-panel.ml-panel { width: min(680px, 94vw); } /* beat .sl-panel's width, which is defined later */
.ml-rule { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 12px 0; } /* separates the tool's logical zones */
.ml-body { display: flex; gap: 14px; align-items: flex-start; }
.ml-rail { flex: 0 0 148px; display: flex; flex-direction: column; gap: 5px; }
.ml-moodlist { display: flex; flex-direction: column; gap: 3px; }
.ml-moodlist .btn { text-align: left; width: 100%; margin-top: 0; } /* kill .btn-secondary's 10px top margin so Auto sits flush with the editor */
.ml-divider { height: 1px; background: rgba(255, 255, 255, .12); margin: 5px 2px; }
.ml-new { text-align: center; margin-top: 3px; }
.ml-edit { flex: 1; min-width: 0; align-self: flex-start; border: var(--panel-border); border-radius: var(--panel-radius); padding: 9px 12px 12px; background: rgba(255, 255, 255, .03); }
.ml-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ml-edit-title { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-edit-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.ml-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 10px; }
.ml-tab { background: transparent; border: none; padding: 6px 10px; font: 600 12px/1 system-ui, sans-serif; color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; }
.ml-tab:hover { color: var(--accent-tint); }
.ml-tab.active { color: var(--accent-tint); border-bottom-color: rgba(var(--accent-bright-rgb), .6); }
.ml-tabbody { display: flex; flex-direction: column; gap: 10px; }
.ml-voices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 520px) { /* stack the rail above the editor on narrow screens */
  .ml-body { flex-direction: column; }
  .ml-rail { flex: none; }
  .ml-moodlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .ml-moodlist .btn { text-align: center; }
}
.sl-panel { width: min(600px, 94vw); max-height: 88vh; overflow-y: auto; padding: 20px 22px; }
.sl-body { display: flex; gap: 14px; margin-top: 8px; }
.sl-materials { display: flex; flex-direction: column; gap: 4px; flex: 0 0 132px; }
.sl-mat { text-align: left; }
.sl-mat.selected { background: rgba(var(--accent-bright-rgb), .16); border-color: rgba(var(--accent-bright-rgb), .5); color: var(--accent-tint); }
.sl-editor { flex: 1; min-width: 0; }
.sl-select { width: 100%; }
.sl-preview { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.sl-footer { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
/* Mood editor fields (Identity tab) */
.me-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.me-label { font: 600 11px/1 system-ui, sans-serif; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); opacity: .8; }
.me-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.me-feel { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ml-text { width: 100%; padding: 7px 10px; border-radius: 8px; border: var(--panel-border); background: rgba(0, 0, 0, .25); color: var(--text); font: inherit; }
.ml-text:focus { outline: none; border-color: rgba(var(--accent-bright-rgb), .6); }
.me-scale { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.me-deg { min-width: 0; padding: 6px 0; font-size: 12px; }
.me-deg.on { background: rgba(var(--accent-bright-rgb), .16); border-color: rgba(var(--accent-bright-rgb), .5); color: var(--accent-tint); }
.me-deg.root { opacity: .7; cursor: default; }
/* Grouped voice controls (Instruments tab): small cluster subheaders */
.ml-group { margin: 8px 2px 2px; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); opacity: .75; }
.ml-group:first-child { margin-top: 2px; }
.chest-grid {
  display: grid;
  grid-template-columns: repeat(9, 52px); /* 9 across = 3 rows of 27 */
  gap: 6px;
  justify-content: center;
  padding: 14px 2px 4px;
}
.chest-grid .fn-slot { width: 52px; height: 52px; }
.chest-grid .fn-slot canvas { width: 34px; height: 34px; }

/* ---- Furnace (block-entity UI): two input slots, burn + cook progress, an output ---- */
#furnace { display: none; z-index: 12; }
#furnace.active { display: flex; }
.container-panel { /* shared by every container panel (furnace, chest) */
  width: min(720px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 22px 26px 20px;
}
/* The loadable-item grid scrolls once it passes ~3 rows, so the panel can't grow tall. */
#fnItems { max-height: 224px; overflow-y: auto; padding: 2px; }
.fn-machine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 8px 4px;
}
.fn-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fn-slot {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  cursor: pointer;
}
.fn-slot:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .38); }
.fn-slot.empty { cursor: default; }
.fn-slot.empty:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.fn-slot canvas { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 2px; }
.fn-slot .count {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font: 600 12px/1 system-ui, sans-serif;
  color: var(--text);
  text-shadow: 0 1px 2px #000;
}
.fn-out { border-color: rgba(var(--accent-bright-rgb), .5); }

/* Burn gauge (vertical, fills downward as fuel is spent) + cook gauge (horizontal). */
.fn-burn, .fn-cook {
  background: rgba(255, 255, 255, .08);
  border-radius: 4px;
  overflow: hidden;
}
.fn-burn { width: 12px; height: 26px; display: flex; align-items: flex-end; }
.fn-burn > i { display: block; width: 100%; height: 0; background: var(--fire); }
.fn-cook { width: 96px; height: 12px; }
.fn-cook > i { display: block; width: 0; height: 100%; background: var(--accent-bright); }

.fn-title { margin: 14px 2px 6px; font: 600 13px/1 system-ui, sans-serif; color: var(--text-dim); }