/* Extracted from style.css: tokens, panel size presets, and authored-space variables. */

/* ============================================================
   Canonical preset panel sizes — display normalization pass
   Keep legacy tokens temporarily during remap.
   ============================================================ */
/* cards */
.panel-size-card-sm { width: 340px; min-height: 280px; }
.panel-size-card-md { width: 400px; height: 500px; }
.panel-size-card-lg { width: 480px; height: 520px; }

/* lists */
.panel-size-list-md { width: 650px; height: 550px; }
.panel-size-list-lg { width: 880px; height: 680px; }
.panel-size-list-xl { width: 920px; height: 720px; }

/* modals */
.panel-size-modal-sm { width: 320px; min-height: 220px; }
.panel-size-modal-md { width: 400px; min-height: 260px; }
.panel-size-modal-lg { width: 420px; min-height: 360px; }

/* canvas */
.panel-size-canvas-sm { width: 760px; height: 430px; }
.panel-size-canvas-md { width: 760px; height: 560px; }
.panel-size-canvas-lg { width: 1000px; height: 680px; }

/* setup */
.panel-size-setup-md { width: 980px; height: 620px; }
.panel-size-setup-lg { width: 1020px; height: 840px; }
.panel-size-setup-xl { width: 1120px; height: 680px; }
.panel-size-setup-xxl { width: 1160px; height: 740px; }

/* editors */
.panel-size-editor-lg { width: 980px; height: 700px; }
.panel-size-editor-xl { width: 1040px; height: 820px; }
.panel-size-editor-xxl { width: 1520px; height: 900px; }
.panel-size-editor-xxxl { width: 1560px; height: 1020px; }

/* gameplay */
.panel-size-gameplay-wide { width: 1440px; height: 880px; }
.panel-size-gameplay-xl { width: 1520px; height: 900px; }

/* rpg */
.panel-size-rpg-side-sm { width: 460px; height: 560px; }
.panel-size-rpg-side { width: 720px; height: 620px; }
.panel-size-rpg-main { width: 1120px; height: 840px; }

/* additional normalized presets for race/special gameplay canvases */
.panel-size-canvas-racewide { width: 1220px; height: 500px; }
.panel-size-canvas-tall { width: 460px; height: 2034px; }
.panel-size-gameplay-racewide { width: 1840px; height: 462px; }

/* choose name / blocking overlays */
.panel-overlay-fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#choose-name-backdrop.panel-overlay-fullscreen {
  z-index: 2147483600;
  pointer-events: auto;
}

#choose-name-panel {
  pointer-events: auto;
}

:root {
  --app-authored-width: 1920px;
  --app-authored-height: 1080px;
  --sidebar-width: 250px;
  --world-width: 1670px;
  --world-height: 1080px;
  --garden-stage-width: 1670px;
  --garden-stage-height: 1080px;
  --garden-sky-height: 426px;
  --garden-authored-left: 0px;
  --garden-authored-top: 0px;
  --garden-sky-render-height: 498px;
  --garden-clouds-a-top: 18px;
  --garden-clouds-a-height: 164px;
  --garden-clouds-b-top: 54px;
  --garden-clouds-b-height: 206px;
  --garden-clouds-overscan: 240px;
  --garden-clouds-span-width: 2150px;
  --garden-clouds-texture-width: 768px;
  --garden-clouds-texture-height: 164px;
  --garden-celestial-size: 140px;
  --garden-cloud-shadow-tile-width: 560px;
  --garden-cloud-shadow-tile-height: 380px;
  --darkgarden-stage-width: 1181px;
  --darkgarden-stage-height: 672px;
  --herogarden-stage-width: 1181px;
  --herogarden-stage-height: 672px;
}

/* ============================================================
   PANEL SIZE TOKENS — display refactor normalization pass
   Centralize repeated large panel sizes so index.html stops
   carrying the same giant hardcoded dimensions everywhere.
   ============================================================ */



.panel-size-toolbar {
  width: max-content;
  max-width: calc(var(--app-authored-width) - 24px);
  min-height: 140px;
}

/* First standardization pass for oversized legacy panels.
   Keep authored fixed sizes, but pull the worst offenders back inside a more
   realistic centered 1920x1080 core. */
.panel-size-editor-xxl,
.panel-size-gameplay-wide,
.panel-size-setup-lg,
.panel-size-setup-xxl,
.panel-size-gameplay-racewide {
  max-width: calc(var(--app-authored-width) - 80px);
  max-height: calc(var(--app-authored-height) - 80px);
}
.panel-size-rpg-main,
.panel-size-editor-lg,
.panel-size-setup-xl,
.panel-size-canvas-lg,
.panel-size-canvas-racewide,
.panel-size-list-lg,
.panel-size-list-xl,
.panel-size-canvas-md {
  max-width: calc(var(--app-authored-width) - 120px);
  max-height: calc(var(--app-authored-height) - 120px);
}
.panel-size-canvas-sm,
.panel-size-canvas-racewide,
.panel-size-gameplay-racewide,
.panel-size-rpg-main,
.panel-size-editor-lg,
.panel-size-setup-xl,
.panel-size-canvas-lg,
.panel-size-setup-xxl,
.panel-size-list-lg,
.panel-size-list-xl,
.panel-size-canvas-md {
  box-sizing: border-box;
}