/* Owl — Mother Owl's own theme. Everything outside the stage: the ground is
 * the wide plate at night, the header carries the wordmark, the rail carries
 * the emblem. Same variable names as Dusk so app.css never changes. */

:root {
  --ground: #0d1220;
  --panel: #161c31;
  --panel-2: #1f2742;
  --ink: #fff3dc;
  --ink-dim: #a9a4b8;
  --rule: #3a2a4a;
  --rule-soft: #2a2140;
  --accent: #f0a63a;
  --accent-ink: #2a1630;
  --good: #81b64c;
  --warn: #ff8a4c;

  --display: 'Futura', 'Avenir Next', ui-sans-serif, system-ui, sans-serif;
  --ui: ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 14px;
  --rule-w: 1.5px;
  --shadow-hard: 0 14px 40px rgba(0,0,0,.55);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: dark; }   /* the night is the brand; no light room */

/* THE GROUND IS THE FOREST. One plate, fixed, dimmed and softened so the
   stage and the rail read on top of it. On a phone the stage covers most of
   it and what is left is the same navy. */
/* app.css paints body's own background AFTER negative-z children, so the
   body must be transparent for the plate to show; html keeps the navy. */
html { background: var(--ground); }
html body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: -4%; z-index: -1; pointer-events: none;
  background: url("/art/kawaii/wide-3.png") center 40% / cover no-repeat;
  filter: brightness(.42) saturate(.9) blur(5px);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 20%, rgba(13,18,32,.15), rgba(13,18,32,.75) 75%);
}

/* THE HEADER: the wordmark, not the name in type. The puzzle number keeps its
   place beside it. */
/* the splash carries the wordmark; the header carries the emblem and the
   night's number (selectors carry #top so they beat app.css, which loads last) */
#top #wordmark {
  font-size: 0; display: flex; align-items: center; gap: 10px;
}
#top #wordmark::before {
  content: ""; display: block; width: 54px; height: 54px;
  background: url("/art/kawaii/mark.png") center / contain no-repeat;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
#top #wordmark span { font-size: 24px; font-family: var(--display); font-weight: 800; color: var(--accent); text-shadow: 0 2px 4px rgba(0,0,0,.6); }
@media (max-width: 480px) { #top #wordmark::before { width: 44px; height: 44px; } #top #wordmark span { font-size: 20px; } }

.chip {
  background: rgba(22,28,49,.85); border-color: var(--rule); color: var(--ink);
  box-shadow: 0 4px 14px rgba(0,0,0,.35); backdrop-filter: blur(6px);
}

/* THE STAGE FRAME */
#stage {
  border-color: var(--rule);
  box-shadow: 0 0 0 1px rgba(255,243,220,.06), var(--shadow-hard);
}

/* THE RAIL: the emblem, then the cards, glassy over the forest. */
#rail::before {
  content: ""; display: block; height: 150px; margin: 4px 0 16px;
  background: url("/art/kawaii/mark.png") center / contain no-repeat;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.55));
}
.rail-card {
  background: rgba(22,28,49,.72); border-color: var(--rule);
  backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.rail-card .label { color: var(--ink-dim); }

/* buttons in the house style, brand accent */
.btn { box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.sheet-body { background: var(--panel); border: var(--rule-w) solid var(--rule); }
#toast { background: var(--panel); color: var(--ink); border: var(--rule-w) solid var(--rule); }