/* ---------- Base palette ---------- */
:root {
  --bg-1: #faf5ec;
  --bg-2: #f1e6cf;
  --panel: #ffffff;
  --soft: #fbf7ee;
  --border: rgba(74, 56, 32, 0.12);
  --text: #2a2418;
  --dim: #7a6c55;
  --accent: #b06d2e;
  --accent-fg: #ffffff;
  --good: #2d7a3e;
  --bad: #b3402a;
  --shadow: 0 2px 8px rgba(74, 56, 32, 0.06);

  /* Maze theme variables (overridden per theme below) */
  --maze-bg: #ffffff;
  --maze-wall: #1a1a1a;
  --maze-start: #2d7a3e;
  --maze-end: #b3402a;
  --maze-solution: rgba(176, 109, 46, 0.55);
  --maze-checkpoint: #d99012;
}

/* ---------- Themes (only colors / filters — no layout) ---------- */
.app[data-theme="classic"]   { --maze-bg: #ffffff; --maze-wall: #1a1a1a; --maze-start: #2d7a3e; --maze-end: #b3402a; --maze-solution: rgba(176, 109, 46, 0.55); --maze-checkpoint: #d99012; }
.app[data-theme="dungeon"]   { --maze-bg: #1e1a17; --maze-wall: #d9b48a; --maze-start: #f3c969; --maze-end: #e35d49; --maze-solution: rgba(243, 201, 105, 0.45); --maze-checkpoint: #9f7ce0; }
.app[data-theme="forest"]    { --maze-bg: #f0f6ec; --maze-wall: #2a5a36; --maze-start: #f0a830; --maze-end: #c33b3b; --maze-solution: rgba(42, 90, 54, 0.35); --maze-checkpoint: #6a3aa8; }
.app[data-theme="space"]     { --maze-bg: #0b0e22; --maze-wall: #7be0ff; --maze-start: #b6ff6c; --maze-end: #ff5ec4; --maze-solution: rgba(123, 224, 255, 0.45); --maze-checkpoint: #ffd154; }
.app[data-theme="handdrawn"] { --maze-bg: #fdfaf0; --maze-wall: #2a2418; --maze-start: #2d7a3e; --maze-end: #b3402a; --maze-solution: rgba(176, 109, 46, 0.5); --maze-checkpoint: #d99012; }

/* ---------- Layout ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

.app {
  display: grid;
  grid-template-columns: 320px 1fr;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  gap: 16px;
  padding: 16px;
}

.panel-left {
  grid-row: 1 / 3;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 18px;
  overflow-y: auto;
  max-height: calc(100vh - 32px);
}

.panel-main {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
}

.bottom-bar {
  grid-column: 2;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Welcome state hides the play-time chrome */
.app[data-state="welcome"] .bottom-bar { display: none; }
.app[data-state="welcome"] .print-header,
.app[data-state="welcome"] .maze-frame,
.app[data-state="welcome"] .print-footer { display: none; }

/* Play state hides the welcome card */
.app[data-state="play"] .welcome-card { display: none; }

/* Maze-type-conditional controls */
.theta-only { display: none; }
.app[data-type="theta"] .theta-only { display: block; }
.app[data-type="theta"] .rect-hex-only { display: none; }

/* Checkbox row + small inline pill hint + slider help text */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  padding: 6px 0 10px;
}
.checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
}
.pill-hint {
  display: inline-block;
  font-size: 11px;
  color: var(--dim);
  background: var(--soft);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 4px;
  font-weight: 500;
}
.slider-help {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--dim);
  font-style: italic;
  line-height: 1.4;
}

/* ---------- Controls ---------- */
.control-group { margin-bottom: 18px; }
.group-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: 8px;
  font-weight: 600;
}

.age-row, .tab-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tab-row { grid-template-columns: repeat(3, 1fr); }
.age-row-6 { grid-template-columns: repeat(6, 1fr); }
/* On phones, six chips don't fit in one row; wrap to 3-per-row. */
@media screen and (max-width: 480px) {
  .age-row-6 { grid-template-columns: repeat(3, 1fr); }
}

.age-btn, .tab-btn {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 4px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
}
.age-btn:hover, .tab-btn:hover { background: #fff; border-color: var(--accent); }
.age-btn.active, .tab-btn.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.tab-btn[title*="Stub"] { opacity: 0.55; }

.age-hint, .algo-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.4;
  font-style: italic;
}

.select {
  width: 100%;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  min-height: 44px;
}
.select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.slider-row {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
.slider-label {
  font-size: 12px; color: var(--dim);
  display: flex; justify-content: space-between;
}
.slider-label span { color: var(--text); font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }

.seed-row { display: flex; gap: 6px; }
.seed-input {
  flex: 1;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--text);
  min-height: 44px;
}
.icon-btn {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 14px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
  min-width: 44px;
}
.icon-btn:hover { background: #fff; border-color: var(--accent); }

/* ---------- Bottom bar buttons ---------- */
.bar-btn {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 44px;
}
.bar-btn:hover { background: #fff; border-color: var(--accent); }
.bar-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.bar-btn.primary:hover { background: #9b5e25; }
.bar-btn.active { background: var(--text); color: #fff; border-color: var(--text); }

.toast {
  margin-left: auto;
  font-size: 13px;
  color: var(--good);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.toast.show { opacity: 1; }

/* ---------- Welcome card ---------- */
.welcome-card {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 8px;
}
.welcome-inner {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.welcome-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.welcome-banner {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(74, 56, 32, 0.12);
}
.welcome-tagline {
  margin: 0;
  font-size: 14px;
  color: var(--dim);
  text-align: center;
}
.welcome-group { display: flex; flex-direction: column; gap: 6px; }
.welcome-age .age-btn { padding: 14px 4px; font-size: 15px; }
.welcome-age-hint { margin: 4px 0 0; min-height: 1.4em; }
.welcome-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.welcome-col { display: flex; flex-direction: column; gap: 6px; }
.welcome-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin-top: 8px;
}
.big-cta {
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
}
.link-cta {
  background: transparent;
  border-color: transparent;
  color: var(--dim);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--border);
  padding: 6px 8px;
  min-height: 32px;
}
.link-cta:hover {
  background: transparent;
  color: var(--accent);
  border-color: transparent;
  text-decoration-color: var(--accent);
}

/* Hide welcome card age/algorithm/theme on desktop; they're in the left panel.
   Show them only on mobile where the left panel isn't accessible. */
@media screen and (min-width: 901px) {
  .welcome-group, .welcome-row { display: none !important; }
}

/* ---------- Print + screen header ---------- */
.print-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
  color: var(--dim);
  flex-wrap: wrap;
}
.print-name { font-weight: 600; color: var(--text); }
.print-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.print-date { color: var(--dim); }
/* Title block: text logo on top, algorithm name as a small subtitle below.
   Keeps inline next to the date on wide screens; stacks on narrow widths. */
.print-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1;
}
.print-logo {
  display: block;
  height: 32px;
  width: auto;
}
.print-algo {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

.print-footer {
  text-align: center;
  font-size: 11px;
  color: var(--dim);
  padding-top: 8px;
}

/* ---------- Maze frame ---------- */
.maze-frame {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--maze-bg);
  border-radius: 12px;
  padding: 16px;
  min-height: 0;
  overflow: hidden;
  transition: background 0.25s ease;
}
.maze-frame svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

/* ---------- Mobile adjust drawer (≤900px play state) ---------- */
.adjust-drawer {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--soft);
  overflow: hidden;
}
.adjust-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.adjust-summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adjust-caret {
  font-size: 18px;
  color: var(--dim);
  transition: transform 0.2s ease;
}
.adjust-toggle[aria-expanded="true"] .adjust-caret { transform: rotate(180deg); }
.adjust-body {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.adjust-body .control-group:last-child { margin-bottom: 0; }

/* ---------- Print stylesheet ----------
   PRODUCT INVARIANT: the maze MUST fit on one printed page in either
   orientation. To guarantee that, we make .panel-main exactly one page tall
   (100vh in print = the printable area: paper minus @page margins) and lay
   it out as a flex column with the maze-frame as the flexing child. The SVG
   inside uses preserveAspectRatio="xMidYMid meet" so it scales down to the
   container, never overflowing. We pair that with page-break-inside: avoid
   on every container in the chain so no browser can ever split the maze
   across pages.

   We deliberately do NOT set @page { size: ... } so the browser respects
   whatever orientation the user picks in the print dialog — the flex layout
   adapts automatically to portrait or landscape.                            */
@media print {
  @page { margin: 12mm; }
  html, body {
    height: 100%;
    background: #fff !important;
    background-image: none !important;
  }
  .no-print { display: none !important; }

  .app {
    display: block;
    padding: 0;
    gap: 0;
    /* Fill the page so .panel-main's 100vh resolves against a real height. */
    height: 100vh;
    height: 100dvh;
    /* No theme: force the classic, ink-friendly palette on paper regardless
       of what the user has selected on screen. */
    --maze-bg: #ffffff;
    --maze-wall: #000000;
    --maze-start: #1a7a2d;
    --maze-end: #b3402a;
    --maze-solution: rgba(180, 100, 40, 0.55);
  }

  .panel-main {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: #fff;
    /* The KEY rule: exactly one page tall, flex column so the maze-frame
       below grows into all remaining space after the header. Use `gap`
       instead of child margins so total height equals exactly the sum of
       children — no surprise margin-collapsing or overflow. */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6mm;
    position: relative;
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-after: avoid;
    break-after: avoid;
  }

  .print-header {
    flex: 0 0 auto;
    border-bottom: 1px solid #333;
    margin-bottom: 0;
    font-size: 12pt;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Hide the title block (logo + algo) from the print header; we'll move it to the footer */
  .print-title-block {
    display: none;
  }

  /* Print logo: absolutely positioned at the bottom center */
  .print-logo {
    height: 48px;
    width: auto;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    display: block;
    position: absolute;
    bottom: 12mm;
    left: 50%;
    transform: translateX(-50%);
  }

  .maze-frame {
    /* Flex into the remaining vertical space and clip anything that tries
       to exceed it. min-height: 0 is required so this child can actually
       shrink (default flex item min-height is auto, which can overflow). */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #fff !important;
    padding: 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .maze-frame svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    /* SVG preserveAspectRatio="xMidYMid meet" is set in the renderer; that
       attribute does the actual fitting work. These width/height: 100% just
       give it a defined box to fit inside. */
  }

  .print-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Hide the text content (🐜 burnmark.games); the logo will be displayed here */
  .print-footer span {
    display: none;
  }
}

/* ---------- Tablet + mobile (≤900px) ----------
   Scoped to `screen` so these don't bleed into the print stylesheet — A4
   portrait at 96dpi is ~794px wide, which would otherwise match these rules
   during print and override the carefully-tuned print layout. */
@media screen and (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 12px;
    padding: 12px;
  }
  /* Welcome state: hide the desktop left panel entirely; welcome card covers it */
  .app[data-state="welcome"] .panel-left { display: none; }
  /* Play state: left panel relocates to the in-drawer mount, so hide its
     desktop position. The drawer becomes visible. */
  .app[data-state="play"] .panel-left { display: none; }
  .app[data-state="play"] .adjust-drawer { display: block; }

  .panel-main { padding: 16px; gap: 12px; }
  .bottom-bar {
    grid-column: 1;
    position: sticky;
    bottom: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .bar-btn { flex: 1 1 auto; padding: 10px 12px; font-size: 13px; }
  .toast { flex-basis: 100%; text-align: center; margin: 0; }

  .welcome-card { padding: 16px 0; }
  .welcome-row { grid-template-columns: 1fr; }

  /* Print header on narrow widths: stack so nothing overflows */
  .print-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 13px;
  }
  .print-name { flex: 0 0 auto; width: 100%; }
  .print-meta {
    flex: 0 0 auto;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
}

/* ---------- Phone only (≤480px) ---------- */
@media screen and (max-width: 480px) {
  .app { padding: 8px; gap: 8px; }
  .panel-main { padding: 12px; border-radius: 14px; }
  .welcome-brand h2 { font-size: 22px; }
  .welcome-icon { font-size: 40px; }
  .welcome-age .age-btn { padding: 12px 2px; font-size: 14px; }
  .bar-btn { font-size: 12px; padding: 10px 8px; }
}

/* iOS safe-area awareness for the sticky bottom bar (cheap insurance) */
@supports (padding: env(safe-area-inset-bottom)) {
  @media screen and (max-width: 900px) {
    .bottom-bar {
      padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
  }
}