/* Game shell UI. Deliberately restrained -- the world is the thing you look at,
   so chrome stays dark, thin, and out of the way. */

:root {
  --ui-bg: rgba(10, 13, 12, 0.82);
  --ui-edge: rgba(190, 205, 190, 0.16);
  --ui-text: #e8ece6;
  --ui-dim: #97a394;
  --health: #c8433c;
  --food: #b0863a;
  --water: #3f86b8;
  --breath: #6fcbd4;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05070a;
  color: var(--ui-text);
  /* The game reads raw key codes; text selection would only get in the way. */
  user-select: none;
  -webkit-user-select: none;
}

#viewport {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: crosshair;
}

/* ---- Full-screen veils (boot, click-to-play) ---- */

.veil {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #16211c 0%, #05070a 70%);
  z-index: 20;
  transition: opacity 0.35s ease;
}

.veil[hidden] { display: none; }
.veil.fading { opacity: 0; pointer-events: none; }

/* Click-to-play sits over the live world rather than hiding it -- you see where
   you're about to spawn, and it reads far better than a dead loading screen. */
#lock-veil {
  background: linear-gradient(to bottom, rgba(5, 7, 10, 0.15), rgba(5, 7, 10, 0.5));
  backdrop-filter: blur(2px);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  /* Purely decorative: clicks must fall through to the game beneath it. */
  pointer-events: none;
  cursor: pointer;
}

.veil-inner { text-align: center; max-width: 34rem; padding: 2rem; }

.veil h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.veil-hint {
  margin: 0 0 2rem;
  color: var(--ui-dim);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.veil-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ui-dim);
  font-size: 0.85rem;
}

.veil-keys li { display: flex; align-items: center; gap: 0.35rem; }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.15em 0.45em;
  border: 1px solid var(--ui-edge);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ui-text);
  font: inherit;
  font-size: 0.8em;
  text-align: center;
}

/* ---- HUD ---- */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#hud[hidden] { display: none; }

/* Survival bars sit at the top of the screen, per the design. */
#bars {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.85rem;
}

.bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem 0.3rem 0.4rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-edge);
  border-radius: 999px;
}

.bar-glyph { font-size: 0.8rem; line-height: 1; filter: saturate(0.85); }

.bar-track {
  width: 8.5rem;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  /* Width is set every time the rounded value changes; the transition keeps
     that stepping from looking chunky. */
  transition: width 0.25s linear, background-color 0.3s ease;
}

.bar[data-stat="health"] .bar-fill { background: var(--health); }
.bar[data-stat="food"]   .bar-fill { background: var(--food); }
.bar[data-stat="water"]  .bar-fill { background: var(--water); }
.bar[data-stat="breath"] .bar-fill { background: var(--breath); }

.bar[hidden] { display: none; }

.bar.critical { animation: bar-pulse 1.1s ease-in-out infinite; }

@keyframes bar-pulse {
  0%, 100% { border-color: var(--ui-edge); }
  50%      { border-color: rgba(200, 67, 60, 0.9); }
}

/* ---- Interaction prompt ---- */

#prompt {
  position: absolute;
  left: 50%;
  /* Stacked clear of the radio, which is itself clear of the slot bar. */
  bottom: 14rem;
  transform: translateX(-50%);
  padding: 0.4rem 0.8rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-edge);
  border-radius: 6px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#prompt[hidden] { display: none; }

#prompt em { color: #d9a04f; font-style: normal; }

.prompt-keys {
  display: block;
  margin-top: 0.3rem;
  color: var(--ui-dim);
  font-size: 0.72rem;
}

.prompt-keys kbd { margin-right: 0.15rem; }

/* ---- Backpack summary ---- */

/* ---- Slot bar ----
   Oval slots along the bottom of the screen: a picture with its count under it.
   Empty slots are drawn too, because how much room is left is the thing you
   most need to see. */

#backpack {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-edge);
  border-radius: 999px;
  /* Above the radio subtitle, which shares the bottom of the screen. */
  z-index: 2;
}

.slot {
  position: relative;
  width: 3.4rem;
  height: 3.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border-radius: 50% / 44%;
  background: rgba(20, 22, 20, 0.55);
  border: 1px solid var(--ui-edge);
}

.slot.empty { background: rgba(20, 22, 20, 0.28); border-style: dashed; }

.slot-icon {
  width: 1.7rem;
  height: 1.7rem;
  display: block;
}

.slot-count {
  font-size: 0.72rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #e8e4d8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* The number you press, sat in the corner of the oval. */
.slot-index {
  position: absolute;
  top: 0.12rem;
  left: 0.42rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  color: #cfc9b6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

.slot.empty .slot-index { color: var(--ui-dim); }

.slot.selected {
  border-color: #e0c15a;
  background: rgba(62, 54, 26, 0.75);
}

.inv-slot .slot-index {
  top: 0.2rem;
  left: 0.5rem;
  font-size: 0.85rem;
}

/* ---- Backpack screen ---- */

/* The list of things you can make, inside the backpack screen. */

.inv-make {
  margin: 0.9rem 0 0.5rem !important;
}

.inv-recipes {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 11rem;
  overflow-y: auto;
}

.inv-recipe {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.5rem;
  font: inherit;
  color: inherit;
  text-align: left;
  background: rgba(40, 44, 38, 0.9);
  border: 1px solid var(--ui-edge);
  border-radius: 5px;
  cursor: pointer;
}

.inv-recipe:hover { background: rgba(64, 74, 56, 0.95); border-color: #9ad3a4; }
.inv-recipe .slot-icon { width: 1.5rem; height: 1.5rem; flex: none; }
.inv-recipe-text { display: flex; flex-direction: column; gap: 0.1rem; }
.inv-recipe-text strong { font-size: 0.85rem; font-weight: 600; }

.inv-recipe-cost {
  font-size: 0.72rem;
  color: var(--ui-dim);
}

#inventory {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 9, 0.62);
  z-index: 20;
  /* The HUD is pointer-events:none; this screen must take clicks back. */
  pointer-events: auto;
  /* The canvas underneath asks for a crosshair; a panel wants a real pointer. */
  cursor: default;
}

#inventory[hidden] { display: none; }

.inv-panel {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.inv-side {
  min-width: 17rem;
  padding: 1rem 1.1rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-edge);
  border-radius: 10px;
}

.inv-side h3 {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-dim);
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
}

.inv-slot {
  position: relative;
  height: 3.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border-radius: 50% / 42%;
  background: rgba(24, 26, 23, 0.75);
  border: 1px solid var(--ui-edge);
  cursor: pointer;
}

.inv-slot:hover:not(.empty) { border-color: #9ad3a4; }
.inv-slot.selected { border-color: #e0c15a; background: rgba(60, 52, 24, 0.8); }
.inv-slot.empty { cursor: default; border-style: dashed; opacity: 0.5; }
.inv-slot .slot-icon { width: 1.9rem; height: 1.9rem; }

.inv-status {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--ui-dim);
}

.inv-status.warn { color: #f0b48a; }

.inv-hint {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--ui-dim);
}

.inv-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.inv-actions button {
  flex: 1;
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  color: inherit;
  background: rgba(40, 44, 38, 0.9);
  border: 1px solid var(--ui-edge);
  border-radius: 5px;
  cursor: pointer;
}

.inv-actions button:hover:not(:disabled) { background: rgba(58, 64, 52, 0.95); }
.inv-actions button:disabled { opacity: 0.45; cursor: default; }

/* ---- Arrival captions ----
   The story of how you got here, over the opening camera move. Same panel
   language as the radio, centred and larger, because it is the only thing on
   screen at the time. */

#captions {
  position: absolute;
  left: 50%;
  /* Low, so the shot itself is the thing you are looking at. */
  bottom: 7%;
  transform: translateX(-50%);
  max-width: min(40rem, 84vw);
  text-align: center;
  pointer-events: none;
}

#captions[hidden] { display: none; }

/* Everything else gets out of the way while the arrival plays. */
.during-shot > *:not(#captions) {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.caption-title {
  margin: 0 0 0.9rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e9e4d4;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}

.caption-line {
  margin: 0.35rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #cfc9b6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.caption-line.visible { opacity: 1; }

/* ---- Refusal notice ---- */

#notice {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%);
  padding: 0.45rem 0.9rem;
  background: var(--ui-bg);
  border: 1px solid rgba(200, 67, 60, 0.5);
  border-radius: 5px;
  color: #f0d8d6;
  font-size: 0.88rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#notice.visible { opacity: 1; }

/* ---- Underwater tint ----
   Sells being submerged, and makes the breath bar's context obvious. */

#underwater {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background:
    radial-gradient(ellipse at center, rgba(28, 92, 110, 0.28) 30%, rgba(9, 42, 58, 0.72) 100%);
}

#underwater.active { opacity: 1; }

/* ---- Crosshair ---- */

#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}

/* ---- Walkie-talkie subtitles ---- */

#radio {
  position: absolute;
  left: 50%;
  /* Clear of the slot bar, which owns the bottom of the screen. */
  bottom: 8.2rem;
  transform: translateX(-50%);
  max-width: min(46rem, 82vw);
  padding: 0.6rem 1rem 0.7rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-edge);
  border-left: 2px solid #7f9c6d;
  border-radius: 4px;
  text-align: left;
}

#radio[hidden] { display: none; }

.radio-speaker {
  margin-bottom: 0.2rem;
  color: #8fae7c;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.radio-text { font-size: 0.95rem; line-height: 1.45; }

/* ---- Main menu ---- */

#mainmenu {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: radial-gradient(ellipse at 50% 30%, #16211c 0%, #05070a 70%);
  z-index: 40;
  transition: opacity 0.3s ease;
}

#mainmenu.fading { opacity: 0; pointer-events: none; }

.menu-panel { width: min(34rem, 100%); }

.menu-panel h1 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
}

.menu-tagline {
  margin: 0 0 2.2rem;
  color: var(--ui-dim);
  font-size: 0.88rem;
  text-align: center;
}

.menu-section { margin-bottom: 2rem; }

.menu-section h2 {
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ui-edge);
  color: var(--ui-dim);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.menu-empty, .menu-note {
  margin: 0.6rem 0 0;
  color: var(--ui-dim);
  font-size: 0.8rem;
}

/* ---- World list ---- */

.world-list { display: flex; flex-direction: column; gap: 0.4rem; }

.world-row { display: flex; gap: 0.4rem; }

.world-play {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ui-edge);
  border-radius: 5px;
  color: var(--ui-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.world-play:hover { background: rgba(255, 255, 255, 0.12); border-color: #7f9c6d; }

.world-name { font-size: 0.95rem; }
.world-meta { color: var(--ui-dim); font-size: 0.72rem; }

.world-rename {
  width: 2.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ui-edge);
  border-radius: 5px;
  color: var(--ui-dim);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.world-rename:hover { background: rgba(255, 255, 255, 0.12); color: var(--ui-text); }

.world-delete {
  width: 2.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ui-edge);
  border-radius: 5px;
  color: var(--ui-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.world-delete:hover { background: rgba(200, 67, 60, 0.25); color: #f3d4d2; }

/* ---- Create world ---- */

.create-form { display: flex; flex-direction: column; gap: 0.7rem; }

.create-form label { display: flex; flex-direction: column; gap: 0.25rem; }

.create-form label span {
  color: var(--ui-dim);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.create-form label em {
  color: #6b7568;
  font-style: normal;
  font-size: 0.9em;
}

.create-form input {
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--ui-edge);
  border-radius: 5px;
  color: var(--ui-text);
  font: inherit;
  font-size: 0.9rem;
}

.create-form input:focus { outline: none; border-color: #7f9c6d; }

.menu-check {
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem !important;
  cursor: pointer;
}

.menu-check input { width: 1rem; height: 1rem; accent-color: #c8433c; }
.menu-check span { color: var(--ui-text) !important; font-size: 0.9rem !important; }
.menu-hard { margin-top: -0.3rem; color: #c98a86; }

.create-form button {
  margin-top: 0.3rem;
  padding: 0.65rem 1rem;
  background: #3f5c37;
  border: 1px solid #7f9c6d;
  border-radius: 5px;
  color: var(--ui-text);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.create-form button:hover { background: #4d7042; }

/* ---- Pause menu ---- */

#pause {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 7, 10, 0.72);
  backdrop-filter: blur(3px);
  z-index: 25;
  /* The HUD is pointer-events:none; the menu must take clicks back. */
  pointer-events: auto;
  /* The canvas underneath asks for a crosshair; a menu wants a real pointer. */
  cursor: default;
}

#pause button { cursor: pointer; }

#pause[hidden] { display: none; }

.pause-panel {
  min-width: 22rem;
  padding: 1.6rem 2rem 1.4rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-edge);
  border-radius: 8px;
  text-align: center;
}

.pause-panel h2 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.pause-world {
  margin: 0 0 1.3rem;
  color: var(--ui-dim);
  font-size: 0.82rem;
}

.pause-buttons { display: flex; flex-direction: column; gap: 0.45rem; }

.pause-buttons button {
  padding: 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ui-edge);
  border-radius: 5px;
  color: var(--ui-text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pause-buttons button:hover { background: rgba(255, 255, 255, 0.13); }

.pause-status {
  margin: 0.8rem 0 0;
  min-height: 1.1em;
  color: #8fae7c;
  font-size: 0.8rem;
}

.pause-keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 1rem;
  margin: 1.2rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--ui-edge);
  list-style: none;
  color: var(--ui-dim);
  font-size: 0.75rem;
  text-align: left;
}

.pause-keys li { display: flex; align-items: center; gap: 0.3rem; }

/* ---- Sleep fade ----
   Opacity is driven per-frame from the game loop, so no CSS transition here:
   the loop already eases it, and a transition would fight that. */

#sleepfade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #000;
  opacity: 0;
  z-index: 15;
}

/* ---- Recipe book ---- */

.recipe-book {
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ui-edge);
  text-align: left;
}

.recipe-book[hidden] { display: none; }

.recipe-section {
  margin: 1rem 0 0.5rem;
  color: var(--ui-dim);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.recipe-section:first-child { margin-top: 0; }

.recipe {
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.3rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.recipe-name { font-size: 0.88rem; }
.recipe-cost { color: #8fae7c; font-size: 0.78rem; }
.recipe-hint { color: var(--ui-dim); font-size: 0.74rem; font-style: italic; }

/* ---- Death screen ---- */

#death {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(48, 8, 8, 0.55) 0%, rgba(4, 2, 2, 0.9) 75%);
  backdrop-filter: blur(4px);
  z-index: 26;
  pointer-events: auto;
  cursor: default;
}

#death[hidden] { display: none; }

.death-panel {
  min-width: 20rem;
  max-width: 26rem;
  padding: 2rem 2.2rem 1.8rem;
  background: rgba(12, 8, 8, 0.86);
  border: 1px solid rgba(200, 67, 60, 0.35);
  border-radius: 8px;
  text-align: center;
}

.death-panel h2 {
  margin: 0 0 0.4rem;
  color: #d9534f;
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.death-sub {
  margin: 0 0 1.4rem;
  color: var(--ui-dim);
  font-size: 0.85rem;
}

.death-label {
  margin: 0 0 0.4rem;
  color: var(--ui-dim);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.death-loot {
  margin-bottom: 1.2rem;
  padding: 0.7rem 0.9rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--ui-edge);
  border-radius: 5px;
  text-align: left;
}

.death-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

.death-item span:last-child { color: var(--ui-dim); font-variant-numeric: tabular-nums; }
.death-empty { margin: 0; color: var(--ui-dim); font-size: 0.85rem; }

.death-home {
  margin: 0 0 1.4rem;
  color: var(--ui-dim);
  font-size: 0.8rem;
  line-height: 1.5;
}

.death-respawn {
  width: 100%;
  padding: 0.7rem 1rem;
  background: #7a2f2b;
  border: 1px solid #c8433c;
  border-radius: 5px;
  color: #f6e7e6;
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s ease;
}

.death-respawn:hover { background: #943a35; }

/* ---- Autosave flash ---- */

#autosave {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  padding: 0.3rem 0.6rem;
  background: var(--ui-bg);
  border: 1px solid var(--ui-edge);
  border-radius: 4px;
  color: var(--ui-dim);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#autosave.visible { opacity: 1; }

/* ---- Debug overlay ---- */

#debug {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0.6rem 0.9rem;
  max-height: 100vh;
  overflow: hidden;
  background: var(--ui-bg);
  border-right: 1px solid var(--ui-edge);
  border-bottom: 1px solid var(--ui-edge);
  color: #cfe3c8;
  font: 12px/1.45 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre;
  pointer-events: none;
  z-index: 30;
}

#debug[hidden] { display: none; }