@font-face {
  font-family: "Nunito";
  src: url("../assets/art/fonts/Nunito-VF.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  font-family: "Nunito", sans-serif;
  font-synthesis: none;
  font-optical-sizing: auto;
  color: #3a2b22;
  background: #fff4dc;
  font-weight: 700;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

body {
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

#app {
  position: fixed;
  /* Full bleed: backgrounds draw under the cutout and gesture bar. Safe-area insets are applied
     to the content layer only (--eg-inset-* are set on .eg-stage by app.js, in logical px). */
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  touch-action: manipulation;
  background: #fff4dc;
}

.eg-safe-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  visibility: hidden;
  pointer-events: none;
}

.eg-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  overflow: hidden;
  background: var(--eg-bg-bottom, #ffe2c2);
  contain: layout paint size;
}

.eg-screen,
.eg-game-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.eg-screen {
  color: var(--eg-text);
  isolation: isolate;
}

.eg-screen__content {
  position: absolute;
  inset: calc(128px + var(--eg-inset-top, 0px)) calc(56px + var(--eg-inset-right, 0px)) calc(128px + var(--eg-inset-bottom, 0px)) calc(56px + var(--eg-inset-left, 0px));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.eg-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, var(--eg-bg-top), var(--eg-bg-bottom));
  pointer-events: none;
}

.eg-background__canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}

.eg-transition {
  position: absolute;
  inset: 0;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms linear;
}

.eg-transition--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Screen transitions (app.js transitionTo). --eg-slide is 1 going forward, -1 going back. */
.eg-transition--block { pointer-events: auto; }
.eg-screen,
.eg-game-container { transition: opacity 280ms ease; }
.eg-screen__content,
.eg-game-container .game-hud { transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,.8,.2,1); }
.eg-leaving .eg-screen__content,
.eg-leaving .game-hud { opacity: 0; transform: translateX(calc(var(--eg-slide, 1) * -28px)); transition-duration: 150ms; }
.eg-entering { opacity: 0; transition: none; }
.eg-entering .eg-screen__content { transform: translateX(calc(var(--eg-slide, 1) * 28px)); transition: none; }
.eg-entering-content .eg-screen__content { opacity: 0; transform: translateX(calc(var(--eg-slide, 1) * 28px)); transition: none; }
.eg-stage--reduce .eg-screen__content,
.eg-stage--reduce .game-hud { transform: none !important; }
.eg-stage--reduce .eg-screen,
.eg-stage--reduce .eg-game-container { transition-duration: 200ms; }
.eg-ghost { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.eg-ghost__canvas { position: absolute; top: 0; left: 0; display: block; }

.eg-fatal-error {
  margin: 2rem;
  color: #7b1712;
  font-size: 1.25rem;
  user-select: text;
}

.eg-label {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: var(--eg-text);
  text-align: center;
  overflow-wrap: break-word;
}

.eg-label--title {
  font-size: 96px;
  font-weight: 900;
  line-height: 1.1;
}

.eg-label--body {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.3;
}

.eg-label--caption {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--eg-text-2);
}

.eg-label--button {
  font-size: 60px;
  font-weight: 800;
  line-height: 1;
}

.eg-label--sound-intro {
  width: 100%;
  max-width: none;
  font-size: 72px;
  font-weight: 900;
  line-height: 1.15;
}

.eg-label--level-number {
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
}

.eg-icon {
  display: block;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  background-color: var(--eg-icon-tint, currentColor);
  -webkit-mask: var(--eg-icon-image) center / contain no-repeat;
  mask: var(--eg-icon-image) center / contain no-repeat;
  pointer-events: none;
}

.eg-icon[data-icon="note_circle"] { --eg-icon-image: url("../assets/art/icons/note_circle.svg"); }
.eg-icon[data-icon="note_square"] { --eg-icon-image: url("../assets/art/icons/note_square.svg"); }
.eg-icon[data-icon="note_triangle"] { --eg-icon-image: url("../assets/art/icons/note_triangle.svg"); }
.eg-icon[data-icon="note_diamond"] { --eg-icon-image: url("../assets/art/icons/note_diamond.svg"); }
.eg-icon[data-icon="note_hexagon"] { --eg-icon-image: url("../assets/art/icons/note_hexagon.svg"); }
.eg-icon[data-icon="note_star"] { --eg-icon-image: url("../assets/art/icons/note_star.svg"); }
.eg-icon[data-icon="note_heart"] { --eg-icon-image: url("../assets/art/icons/note_heart.svg"); }
.eg-icon[data-icon="note_moon"] { --eg-icon-image: url("../assets/art/icons/note_moon.svg"); }
.eg-icon[data-icon="ui_listen"] { --eg-icon-image: url("../assets/art/icons/ui_listen.svg"); }
.eg-icon[data-icon="ui_hint"] { --eg-icon-image: url("../assets/art/icons/ui_hint.svg"); }
.eg-icon[data-icon="ui_back"] { --eg-icon-image: url("../assets/art/icons/ui_back.svg"); }
.eg-icon[data-icon="ui_next"] { --eg-icon-image: url("../assets/art/icons/ui_next.svg"); }
.eg-icon[data-icon="ui_lock"] { --eg-icon-image: url("../assets/art/icons/ui_lock.svg"); }
.eg-icon[data-icon="ui_note"] { --eg-icon-image: url("../assets/art/icons/ui_note.svg"); }
.eg-icon[data-icon="ui_settings"] { --eg-icon-image: url("../assets/art/icons/ui_settings.svg"); }
.eg-icon[data-icon="ui_replay"] { --eg-icon-image: url("../assets/art/icons/ui_replay.svg"); }
.eg-icon[data-icon="ui_menu"] { --eg-icon-image: url("../assets/art/icons/ui_menu.svg"); }
.eg-icon[data-icon="ui_pause"] { --eg-icon-image: url("../assets/art/icons/ui_pause.svg"); }

.eg-button {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 600px;
  min-width: 0;
  height: 144px;
  min-height: 144px;
  padding: 0 48px;
  border: 0;
  border-radius: 72px;
  color: var(--eg-button-ink, var(--eg-text));
  background: var(--eg-button-bg, var(--eg-surface));
  box-shadow: 0 6px 16px var(--eg-button-shadow, var(--eg-shadow));
  font-family: "Nunito", sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 80ms ease-in-out, background-color 80ms ease-in-out, opacity 100ms linear;
}

.eg-button:active:not(:disabled) {
  transform: scale(0.96);
  background-color: var(--eg-button-pressed, color-mix(in srgb, var(--eg-button-bg, var(--eg-surface)) 92%, #000));
}

.eg-reduce-motion .eg-button:active:not(:disabled) {
  transform: none;
}

.eg-button:focus-visible,
.eg-range:focus-visible {
  outline: 6px solid color-mix(in srgb, var(--eg-accent) 65%, white);
  outline-offset: 8px;
}

.eg-button:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.eg-button--secondary {
  --eg-button-bg: var(--eg-surface);
  --eg-button-ink: var(--eg-text);
  --eg-button-shadow: var(--eg-shadow);
}

.eg-button--primary,
.eg-button--listen {
  --eg-button-bg: var(--eg-accent);
  --eg-button-ink: var(--eg-on-accent);
  --eg-button-shadow: var(--eg-shadow);
}

.eg-button--primary {
  font-weight: 800;
}

.eg-button--danger {
  --eg-button-bg: var(--eg-surface);
  --eg-button-ink: #B3261E;
  --eg-button-shadow: var(--eg-shadow);
}

.eg-button--pill {
  border-radius: 72px;
}

.eg-button--circle {
  width: 144px;
  min-width: 144px;
  height: 144px;
  min-height: 144px;
  padding: 0;
  border-radius: 50%;
  --eg-button-shadow: var(--eg-shadow);
}

.eg-button--listen {
  width: 216px;
  min-width: 216px;
  height: 216px;
  min-height: 216px;
  padding: 0;
  border-radius: 50%;
}

.eg-button--listen .eg-icon {
  width: 104px;
  height: 104px;
}

.eg-screen-content {
  gap: var(--eg-content-gap, 0);
  min-height: 0;
}

.eg-content-column {
  align-items: center;
  justify-content: flex-start;
}

.eg-content-column > .eg-button:not(.eg-world-card) {
  flex: 0 0 144px;
}

.eg-content-column--sound-check {
  justify-content: flex-start;
  gap: 64px;
}

.eg-content-column--sound-check > .eg-grow {
  flex: 1 1 0;
}

.eg-content-column--sound-check .eg-button--listen {
  flex-basis: 216px;
}

.eg-content-column--main {
  align-items: center;
  gap: 48px;
}

.eg-logo {
  display: block;
  width: min(820px, 100%);
  height: 204px;
  object-fit: contain;
}

.eg-grow {
  flex: 1 1 auto;
  min-height: 0;
}

.eg-fixed-space {
  flex: 0 0 auto;
}

.eg-topbar {
  display: grid;
  flex: 0 0 144px;
  grid-template-columns: 144px minmax(0, 1fr) 144px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 144px;
}

.eg-topbar__title {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  line-height: 1.05;
  white-space: nowrap;
}

.eg-topbar__spacer {
  display: block;
  width: 144px;
  height: 144px;
}

.eg-content-column--list {
  gap: 40px;
}

.eg-world-card {
  width: min(936px, 100%);
  min-height: 360px;
  height: 360px;
  flex: 0 0 360px;
  padding: 56px;
  border-radius: 48px;
  color: var(--eg-card-ink);
  background: var(--eg-card-fill);
  box-shadow: 0 6px 16px var(--eg-card-shadow);
  text-align: left;
}

.eg-world-card:active:not(:disabled) {
  background: color-mix(in srgb, var(--eg-card-fill) 92%, #000);
}

.eg-world-card:disabled {
  opacity: 1;
}

.eg-world-card__inner {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

.eg-world-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  min-height: 96px;
}

.eg-world-card__title {
  color: var(--eg-card-ink);
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
}

.eg-world-card__samples {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
}

.eg-sample-tile {
  display: grid;
  flex: 0 0 96px;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 18px;
}

.eg-sample-tile .eg-icon {
  width: 50px;
  height: 50px;
}

.eg-world-card__caption {
  color: var(--eg-card-caption);
  text-align: left;
  white-space: nowrap;
}

.eg-world-card__lock {
  width: 96px;
  height: 96px;
}

.eg-map-node--pop {
  animation: eg-level-pop 300ms cubic-bezier(.17,.89,.32,1.28) both;
}

@keyframes eg-level-pop {
  0% { transform: scale(0); }
  78% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.eg-content-column--settings {
  gap: 24px;
}

.eg-slider-row {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.eg-slider-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
}

.eg-slider-row__header .eg-label {
  text-align: left;
}

.eg-slider-readout {
  text-align: right;
}

.eg-range {
  display: block;
  width: 100%;
  height: 144px;
  margin: 0;
  padding: 0 16px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-x;
}

.eg-range::-webkit-slider-runnable-track {
  height: 24px;
  border-radius: 12px;
  background: var(--eg-surface-dim);
}

.eg-range::-moz-range-track {
  height: 24px;
  border: 0;
  border-radius: 12px;
  background: var(--eg-surface-dim);
}

.eg-range::-webkit-slider-thumb {
  width: 48px;
  height: 48px;
  margin-top: -12px;
  border: 0;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--eg-accent);
  box-shadow: 0 4px 12px var(--eg-shadow);
}

.eg-range::-moz-range-thumb {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--eg-accent);
  box-shadow: 0 4px 12px var(--eg-shadow);
}

.eg-toggle-row {
  display: flex;
  flex: 0 0 auto;
  min-height: 144px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.eg-toggle-row > .eg-label {
  text-align: left;
}

.eg-toggle {
  width: 240px;
  min-width: 240px;
  height: 144px;
  min-height: 144px;
  flex: 0 0 240px;
}

.eg-settings-status {
  min-height: 62px;
}

.eg-dialog-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
  background: color-mix(in srgb, var(--eg-scrim) 50%, transparent);
}

.eg-dialog {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
  width: 936px;
  max-width: 100%;
  padding: 64px;
  border-radius: 56px;
  color: var(--eg-text);
  background: var(--eg-surface);
  box-shadow: 0 6px 16px var(--eg-shadow);
}

.eg-dialog__message {
  color: var(--eg-text);
}

.eg-dialog__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.eg-dialog__button {
  width: 300px;
  min-width: 300px;
  height: 144px;
  min-height: 144px;
  padding: 0 20px;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}

/* Settings and Credits: a column that scrolls when the content is taller than the phone */
.eg-settings-scroll {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.eg-settings-scroll::-webkit-scrollbar { display: none; }
.eg-settings-scroll.eg-world-list { gap: 40px; padding: 16px 0 0; }
.eg-settings-scroll.eg-world-list > .eg-world-card { flex: 0 0 360px; width: min(936px, 100%); }
.eg-settings-scroll > .eg-button { flex: 0 0 144px; width: 760px; max-width: 100%; }
.eg-settings-scroll > .eg-settings-status { flex: 0 0 auto; min-height: 0; }
.eg-settings-scroll > .eg-settings-status:empty { display: none; }
.eg-toggle-row__label { flex: 1 1 auto; }
.eg-credits { align-items: stretch; gap: 48px; }
.eg-credits__section { display: flex; flex-direction: column; gap: 12px; }
.eg-credits__title { text-align: left; font-weight: 800; }
.eg-credits__line { text-align: left; overflow-wrap: anywhere; }

/* --- Note tiles outside the game canvas (menu board, floaters): same look as in-game tiles --- */
.eg-note-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--eg-tile-size, 168px);
  height: var(--eg-tile-size, 168px);
  padding: 0;
  border: 0;
  border-radius: calc(var(--eg-tile-size, 168px) * 0.18);
  background: var(--eg-tile-fill);
  box-shadow: 0 calc(var(--eg-tile-size, 168px) * 0.04) calc(var(--eg-tile-size, 168px) * 0.06) var(--eg-shadow);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 120ms ease;
}
.eg-note-tile .eg-note-tile__icon {
  width: calc(var(--eg-tile-size, 168px) * 0.52);
  height: calc(var(--eg-tile-size, 168px) * 0.52);
}
.eg-note-tile:focus-visible { outline: 6px solid color-mix(in srgb, var(--eg-accent) 65%, white); outline-offset: 6px; }
.eg-note-tile.is-playing { background: var(--eg-tile-active); animation: eg-tile-pulse 220ms ease-out; }
.eg-note-tile.is-playing::after {
  position: absolute;
  inset: 0;
  border: 6px solid var(--eg-tile-fill);
  border-radius: inherit;
  content: "";
  animation: eg-tile-ripple 380ms ease-out forwards;
  pointer-events: none;
}
@keyframes eg-tile-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes eg-tile-ripple { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.eg-reduce-motion .eg-note-tile.is-playing,
.eg-reduce-motion .eg-note-tile.is-playing::after { animation: none; }
.eg-reduce-motion .eg-note-tile.is-playing::after { opacity: 0; }

/* --- Main menu --- */
.eg-logo-button {
  display: block;
  flex: 0 0 auto;
  width: min(820px, 100%);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.eg-logo-button .eg-logo { width: 100%; }
.eg-logo-button.is-chiming .eg-logo { animation: eg-logo-chime 600ms ease-out; }
@keyframes eg-logo-chime { 0% { transform: scale(1); } 25% { transform: scale(1.04) rotate(-1deg); } 55% { transform: scale(0.99) rotate(0.6deg); } 100% { transform: scale(1); } }
.eg-reduce-motion .eg-logo-button.is-chiming .eg-logo { animation: none; }
.eg-content-column--main .eg-grow--menu-top { flex: 0.6 1 auto; }

.eg-menu-board {
  position: relative;
  flex: 0 0 auto;
  width: var(--eg-board-size);
  height: var(--eg-board-size);
  padding: var(--eg-board-pad);
  border-radius: 64px;
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.92), rgba(255, 243, 226, 0.88));
  box-shadow: 0 18px 44px rgba(138, 75, 31, 0.22), 0 3px 0 rgba(255, 255, 255, 0.9) inset, 0 -6px 0 rgba(214, 170, 128, 0.25) inset;
}
.eg-menu-board__grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--eg-board-gap);
}
.eg-menu-board__ribbon {
  position: absolute;
  inset: var(--eg-board-pad);
  width: calc(100% - var(--eg-board-pad) * 2);
  height: calc(100% - var(--eg-board-pad) * 2);
  overflow: visible;
  pointer-events: none;
  transition: opacity 600ms ease;
}
.eg-menu-board__ribbon.is-fading,
.eg-menu-board__ribbon.is-fading + .eg-menu-board__beads { opacity: 0; }
.eg-menu-board__beads {
  position: absolute;
  inset: var(--eg-board-pad);
  pointer-events: none;
  transition: opacity 600ms ease;
}
.eg-menu-bead {
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--eg-bead-size);
  height: var(--eg-bead-size);
  translate: -50% -50%;
  border: calc(var(--eg-bead-size) * 0.097) solid #FFFFFF;
  border-radius: 50%;
  background: var(--eg-bead-fill);
}
.eg-menu-bead .eg-icon { width: 52%; height: 52%; }
.eg-menu-bead.is-new { animation: eg-bead-pop 260ms cubic-bezier(.17,.89,.32,1.28) both; }
@keyframes eg-bead-pop { from { scale: 0.4; } to { scale: 1; } }
.eg-reduce-motion .eg-menu-bead.is-new { animation: none; }

.eg-menu-floaters { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.eg-menu-floater {
  position: absolute;
  pointer-events: auto;
  translate: -50% -50%;
  rotate: var(--eg-float-rotate, 0deg);
  animation: eg-float var(--eg-float-period, 5s) ease-in-out var(--eg-float-delay, 0s) infinite alternate;
}
.eg-menu-floater.is-playing { animation: eg-tile-pulse 220ms ease-out; }
@keyframes eg-float { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
.eg-reduce-motion .eg-menu-floater { animation: none; }
.eg-screen[data-screen="main-menu"] .eg-screen__content { z-index: 1; pointer-events: none; }
.eg-screen[data-screen="main-menu"] .eg-screen__content > :is(.eg-button, .eg-logo-button, .eg-menu-board) { pointer-events: auto; }

/* --- Level select (shared) --- */
.eg-content-column--levels { gap: 28px; }
.eg-level-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 0 8px;
}
.eg-level-summary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 88px;
  padding: 0 32px;
  border-radius: 44px;
  background: color-mix(in srgb, var(--eg-surface) 78%, transparent);
  box-shadow: 0 4px 14px var(--eg-shadow), 0 2px 0 rgba(255, 255, 255, 0.55) inset;
}
.eg-level-summary__text { font-size: 42px; color: var(--eg-text); white-space: nowrap; }

.eg-map-node.is-current::after {
  position: absolute;
  inset: -12px;
  border: 8px solid var(--eg-accent);
  border-radius: 44px;
  content: "";
  pointer-events: none;
  animation: eg-current-ring 1.8s ease-out infinite;
}
@keyframes eg-current-ring { 0% { opacity: 0.75; transform: scale(0.96); } 100% { opacity: 0; transform: scale(1.14); } }
.eg-reduce-motion .eg-map-node.is-current::after { animation: none; opacity: 0.6; }

/* --- Level select map --- */
.eg-level-map {
  position: relative;
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  margin: 8px 0 0;
}
.eg-level-map__trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.eg-level-map__trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.eg-trail-rim { stroke: rgba(255, 255, 255, 0.72); stroke-width: 58px; }
.eg-trail-dots { stroke: color-mix(in srgb, var(--eg-text-2) 45%, transparent); stroke-width: 14px; stroke-dasharray: 0.1 34; }
.eg-trail-done { stroke: var(--eg-accent); stroke-width: 22px; opacity: 0.85; }
.eg-trail-done--fresh { transition: stroke-dashoffset 600ms ease-out 200ms; }
.eg-screen[data-world="3"] .eg-trail-rim,
.eg-screen[data-world="8"] .eg-trail-rim { stroke: rgba(230, 233, 255, 0.28); }
.eg-screen[data-world="3"] .eg-trail-dots,
.eg-screen[data-world="8"] .eg-trail-dots { stroke: rgba(230, 233, 255, 0.55); }

.eg-map-node {
  position: absolute;
  width: 168px;
  min-width: 168px;
  height: 168px;
  min-height: 168px;
  padding: 0;
  translate: -50% -50%;
  overflow: visible;
  border-radius: 34px;
  background: var(--eg-node-fill);
  color: var(--eg-node-ink);
  box-shadow: 0 8px 14px var(--eg-shadow), 0 -7px 0 rgba(0, 0, 0, 0.1) inset;
}
.eg-map-node .eg-map-node__face { display: grid; place-items: center; width: 100%; height: 100%; pointer-events: none; }
.eg-map-node__number { color: var(--eg-node-ink); font-size: 76px; }
.eg-map-node.is-locked { box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.08) inset; }
.eg-map-node.is-locked .eg-icon { width: 64px; height: 64px; }
.eg-map-node:disabled { opacity: 1; }
.eg-map-node.is-solved { box-shadow: 0 8px 14px var(--eg-shadow), 0 -7px 0 rgba(0, 0, 0, 0.1) inset, 0 0 0 8px rgba(255, 255, 255, 0.85); }
.eg-map-node.is-current { animation: eg-node-bob 2.4s ease-in-out infinite; }
@keyframes eg-node-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.eg-reduce-motion .eg-map-node.is-current { animation: none; }
.eg-map-node__flag {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  padding: 14px 30px;
  border-radius: 36px;
  font-size: 42px;
  line-height: 1.1;
  color: var(--eg-text);
  white-space: nowrap;
  background: var(--eg-surface);
  box-shadow: 0 6px 16px var(--eg-shadow);
  pointer-events: none;
}
.eg-map-node.flag-right .eg-map-node__flag { left: calc(100% + 30px); }
.eg-map-node.flag-left .eg-map-node__flag { right: calc(100% + 30px); }

/* --- UI chrome polish (no changes to tiles, path or melody dots) --- */

/* Keycap pills and pebble buttons: top sheen, darker bottom lip, press collapses the lip. */
.eg-button--pill,
.eg-button--circle,
.eg-button--listen {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 55%);
  box-shadow: 0 10px 22px var(--eg-button-shadow, var(--eg-shadow)), inset 0 -8px 0 rgba(0, 0, 0, 0.1), inset 0 3px 0 rgba(255, 255, 255, 0.5);
}
.eg-button--primary.eg-button--pill {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--eg-accent) 38%, transparent), 0 0 0 10px color-mix(in srgb, var(--eg-accent) 14%, transparent), inset 0 -9px 0 rgba(0, 0, 0, 0.16), inset 0 3px 0 rgba(255, 255, 255, 0.35);
}
.eg-button--pill:active:not(:disabled),
.eg-button--circle:active:not(:disabled) {
  transform: translateY(4px) scale(0.98);
  box-shadow: 0 4px 10px var(--eg-button-shadow, var(--eg-shadow)), inset 0 -3px 0 rgba(0, 0, 0, 0.1), inset 0 3px 0 rgba(255, 255, 255, 0.4);
}
.eg-screen[data-world="3"] .eg-button--secondary,
.eg-screen[data-world="8"] .eg-button--secondary { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%); }

/* --- Flat brand backdrop (menus outside a world) --- */
.eg-background--brand {
  background: linear-gradient(170deg, #FFF7E6 0%, #FFEDD4 48%, #FFE0C2 100%);
}
.eg-brand-field,
.eg-brand-glyph {
  position: absolute;
  translate: -50% -50%;
  rotate: var(--eg-brand-rotate, 0deg);
  animation: eg-brand-drift var(--eg-brand-period, 30s) ease-in-out var(--eg-brand-delay, 0s) infinite alternate;
  will-change: transform;
}
.eg-brand-field { background: var(--eg-brand-color); }
.eg-brand-field--circle { border-radius: 50%; }
.eg-brand-field--square { border-radius: 22%; }
.eg-brand-glyph .eg-icon { width: 100%; height: 100%; }
@keyframes eg-brand-drift {
  from { transform: translate(-14px, 10px) rotate(-3deg); }
  to { transform: translate(14px, -12px) rotate(3deg); }
}
.eg-background--brand.is-still .eg-brand-field,
.eg-background--brand.is-still .eg-brand-glyph { animation: none; }

/* Titles over painted skies: a soft halo keeps them crisp. */
.eg-topbar__title { text-shadow: 0 2px 0 rgba(255, 255, 255, 0.55), 0 0 24px rgba(255, 255, 255, 0.7); }
.eg-screen[data-world="3"] .eg-topbar__title,
.eg-screen[data-world="8"] .eg-topbar__title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }

/* World cards: scenery thumbnail behind a soft veil, keycap edge. */
.eg-world-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--eg-card-fill);
  background-repeat: no-repeat;
  background-size: 100% auto, 100% auto;
  background-position: center 0%, center 86%;
  box-shadow: 0 12px 28px var(--eg-card-shadow), inset 0 -8px 0 rgba(0, 0, 0, 0.08), inset 0 3px 0 rgba(255, 255, 255, 0.5);
}
.eg-world-card__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--eg-card-fill) 92%, transparent) 0%, color-mix(in srgb, var(--eg-card-fill) 70%, transparent) 46%, color-mix(in srgb, var(--eg-card-fill) 0%, transparent) 100%);
  pointer-events: none;
}
.eg-world-card.is-locked .eg-world-card__veil { background: color-mix(in srgb, #D8D4CE 86%, transparent); }
.eg-world-card .eg-world-card__inner { position: relative; }
.eg-world-card:active:not(:disabled) { background-color: var(--eg-card-fill); transform: translateY(4px) scale(0.99); }
.eg-world-card .eg-world-card__samples { padding: 14px; border-radius: 28px; background: color-mix(in srgb, var(--eg-card-fill) 55%, transparent); }
.eg-world-card .eg-sample-tile { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.18); }

/* Settings rows sit on a soft card so they read over the painting. */
.eg-content-column--settings .eg-settings-scroll { padding: 8px 4px 24px; }
.eg-slider-row,
.eg-toggle-row { padding: 12px 36px; border-radius: 48px; background: color-mix(in srgb, var(--eg-surface) 62%, transparent); }
.eg-credits__section { padding: 32px 40px; border-radius: 48px; background: color-mix(in srgb, var(--eg-surface) 70%, transparent); }

.eg-dialog { box-shadow: 0 30px 80px var(--eg-shadow), 0 0 0 12px color-mix(in srgb, var(--eg-surface) 45%, transparent), inset 0 3px 0 rgba(255, 255, 255, 0.7); }

/* In-game chrome (game.css owns layout; these only restyle surfaces). */
.eg-game-container .game-icon-button::before {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 58%);
  box-shadow: var(--game-shadow), inset 0 -6px 0 rgba(0, 0, 0, 0.08), inset 0 2px 0 rgba(255, 255, 255, 0.9);
}
.eg-game-container .game-screen[data-world="3"] .game-icon-button::before,
.eg-game-container .game-screen[data-world="8"] .game-icon-button::before {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 58%);
  box-shadow: var(--game-shadow), inset 0 -6px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.18);
}
.eg-game-container .game-listen::before {
  background-image: radial-gradient(ellipse 60% 40% at 50% 22%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 70%);
  box-shadow: var(--game-shadow), 0 0 0 12px color-mix(in srgb, var(--game-accent) 20%, transparent), inset 0 -8px 0 rgba(0, 0, 0, 0.14);
}
.eg-game-container .game-level-id {
  padding: 0 24px;
  border-radius: 32px;
  background: color-mix(in srgb, var(--game-surface) 62%, transparent);
  line-height: 1.25;
}
.eg-game-container .game-level-name { text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5), 0 0 22px rgba(255, 255, 255, 0.75); }
.eg-game-container .game-screen[data-world="3"] .game-level-name,
.eg-game-container .game-screen[data-world="8"] .game-level-name { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.eg-game-container .game-tip { text-shadow: 0 0 18px color-mix(in srgb, var(--game-surface) 90%, transparent); }
.eg-game-container .game-pill {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%);
  box-shadow: var(--game-shadow), inset 0 -8px 0 rgba(0, 0, 0, 0.12), inset 0 3px 0 rgba(255, 255, 255, 0.45);
}
.eg-game-container .game-pill:active { transform: translateY(4px) scale(0.98); filter: brightness(0.96); }
/* Result / pause card: framed, with a strip of the eight note colours on top. */
.eg-game-container .game-dialog {
  padding-top: 92px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22), 0 0 0 14px color-mix(in srgb, var(--game-surface) 42%, transparent), inset 0 3px 0 rgba(255, 255, 255, 0.75);
}
.eg-game-container .game-screen[data-world="3"] .game-dialog,
.eg-game-container .game-screen[data-world="8"] .game-dialog { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 14px rgba(143, 180, 255, 0.16), inset 0 2px 0 rgba(255, 255, 255, 0.14); }
.eg-game-container .game-dialog::before {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 360px;
  height: 28px;
  translate: -50% 0;
  content: "";
  border-radius: 14px;
  background: linear-gradient(90deg, #E5534B 0 12.5%, #F08A3C 0 25%, #E8C547 0 37.5%, #5BBF6A 0 50%, #3DB5B0 0 62.5%, #4A8FE0 0 75%, #7B6CE0 0 87.5%, #D965B5 0);
  -webkit-mask: radial-gradient(circle 12px at 22.5px 14px, #000 96%, transparent) 0 0 / 45px 28px repeat-x;
  mask: radial-gradient(circle 12px at 22.5px 14px, #000 96%, transparent) 0 0 / 45px 28px repeat-x;
  opacity: 0.9;
  pointer-events: none;
}