:root {
  color-scheme: light;
  --color-ink: #241714;
  --color-brown: #76533b;
  --color-paper: #ead8ad;
  --color-red: #a52d29;
  --color-gold: #c29b4a;
  --color-light: #fffdf5;
  --color-black: #000;

  --ink: var(--color-ink);
  --muted: color-mix(in srgb, var(--color-ink) 65%, var(--color-paper));
  --paper: color-mix(in srgb, var(--color-paper) 82%, var(--color-brown));
  --paper-light: var(--color-paper);
  --forest: color-mix(in srgb, var(--color-ink) 72%, var(--color-black));
  --forest-light: color-mix(in srgb, var(--color-red) 62%, var(--color-ink));
  --gold: var(--color-gold);
  --red: color-mix(in srgb, var(--color-red) 82%, var(--color-ink));
  --light: var(--color-light);
  --night: color-mix(in srgb, var(--color-ink) 66%, var(--color-black));
  --border: var(--color-brown);
  --border-dark: color-mix(in srgb, var(--color-brown) 64%, var(--color-black));
  --cream: color-mix(in srgb, var(--color-paper) 82%, var(--color-light));
  --red-bright: var(--color-red);
  --red-dark: color-mix(in srgb, var(--color-red) 62%, var(--color-black));
  --gold-bright: color-mix(in srgb, var(--color-gold) 72%, var(--color-light));
  --line: color-mix(in srgb, var(--border-dark) 28%, transparent);
  --shadow: 0 18px 50px color-mix(in srgb, var(--night) 32%, transparent);
  --panel-highlight: color-mix(in srgb, var(--light) 33%, transparent);
  --panel-texture: color-mix(in srgb, var(--border-dark) 1.8%, transparent);
  --field-background: color-mix(in srgb, var(--cream) 36%, transparent);
  --control-background: color-mix(in srgb, var(--cream) 24%, transparent);
  --control-background-subtle: color-mix(in srgb, var(--cream) 18%, transparent);
  --focus-inner: var(--light);
  --focus-outer: var(--ink);
  --accent-text: var(--red);
  --error: var(--accent-text);
  font-family: "Palatino Linotype", Palatino, Georgia, serif;
  font-synthesis: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: var(--cream);
    --muted: color-mix(in srgb, var(--cream) 68%, var(--color-ink));
    --paper: color-mix(in srgb, var(--color-ink) 78%, var(--color-black));
    --paper-light: color-mix(in srgb, var(--color-ink) 88%, var(--color-black));
    --forest: color-mix(in srgb, var(--color-ink) 30%, var(--color-black));
    --forest-light: var(--gold-bright);
    --night: color-mix(in srgb, var(--color-ink) 22%, var(--color-black));
    --border: color-mix(in srgb, var(--gold) 48%, var(--color-ink));
    --border-dark: color-mix(in srgb, var(--gold) 32%, var(--color-ink));
    --line: color-mix(in srgb, var(--cream) 18%, transparent);
    --shadow: 0 18px 50px color-mix(in srgb, var(--color-black) 62%, transparent);
    --panel-highlight: color-mix(in srgb, var(--gold) 6%, transparent);
    --panel-texture: color-mix(in srgb, var(--cream) 2%, transparent);
    --field-background: color-mix(in srgb, var(--cream) 5%, transparent);
    --control-background: color-mix(in srgb, var(--cream) 7%, transparent);
    --control-background-subtle: color-mix(in srgb, var(--cream) 4%, transparent);
    --focus-inner: var(--night);
    --focus-outer: var(--gold-bright);
    --accent-text: color-mix(in srgb, var(--red-bright) 55%, var(--cream));
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--forest);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--red) 32%, transparent), transparent 25rem),
    repeating-linear-gradient(118deg, transparent 0 18px, color-mix(in srgb, var(--light) 1.2%, transparent) 18px 19px),
    linear-gradient(180deg, var(--forest) 0 16rem, var(--paper) 16rem 100%);
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

dice-roller,
adventure-notes {
  display: block;
  min-width: 0;
}

.app-header,
main,
footer {
  width: min(100%, 68rem);
  margin-inline: auto;
}

.eyebrow,
legend,
.field-label,
.save-status {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.app-header {
  min-height: 7.8rem;
  display: flex;
  align-items: flex-start;
  color: var(--cream);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand-crest {
  width: 3.7rem;
  height: 4.2rem;
  flex: 0 0 auto;
  overflow: visible;

  & path:first-child {
    fill: color-mix(in srgb, var(--night) 44%, var(--color-black));
    stroke: var(--gold);
    stroke-width: 2;
  }

  & path:nth-child(2) {
    fill: none;
    stroke: color-mix(in srgb, var(--gold) 42%, transparent);
    stroke-width: 1;
  }

  & path:last-child {
    fill: var(--red);
    stroke: var(--gold-bright);
    stroke-width: 1.4;
    stroke-linejoin: round;
  }
}

h1 {
  margin-bottom: 0;
  color: var(--cream);
  font-size: clamp(2rem, 7vw, 4.1rem);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-shadow:
    0 2px 0 var(--color-black),
    0 0 24px color-mix(in srgb, var(--red) 55%, transparent);
  font-variant: small-caps;
}

main {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 1.25rem;
  align-items: start;
}

section {
  position: relative;
  border: 2px solid var(--border-dark);
  border-radius: 0.12rem;
  outline: 1px solid color-mix(in srgb, var(--gold) 65%, transparent);
  outline-offset: -0.42rem;
  background:
    radial-gradient(circle at 15% 20%, var(--panel-highlight), transparent 14rem),
    repeating-linear-gradient(4deg, transparent 0 8px, var(--panel-texture) 8px 9px),
    var(--paper-light);
  box-shadow: var(--shadow);
}

section::after {
  content: "◆";
  position: absolute;
  right: 0.38rem;
  bottom: 0.22rem;
  color: color-mix(in srgb, var(--border-dark) 55%, transparent);
  font-size: 0.65rem;
}

.dice-panel,
.notes-panel {
  padding: clamp(1.15rem, 4vw, 2rem);
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 3px double color-mix(in srgb, var(--border-dark) 50%, transparent);
}

.history-heading,
.notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.history button,
.notes-footer button {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  color: var(--accent-text);
  background: none;
  cursor: pointer;
  font-family: ui-sans-serif, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.45rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.015em;
  font-variant: small-caps;
}

legend,
.field-label {
  color: var(--muted);
}

button:focus-visible {
  outline: 3px solid var(--focus-inner);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-outer);
}

footer {
  padding: 1.6rem 0 0.4rem;
  text-align: center;
  color: var(--muted);
  font-family: ui-sans-serif, sans-serif;
  font-size: 0.75rem;

  & p { margin: 0; }
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--red) 30%, transparent), transparent 20rem),
      linear-gradient(180deg, var(--forest) 0 14rem, var(--paper) 14rem 100%);
  }

  main {
    grid-template-columns: 1fr;
  }

  .app-header {
    min-height: 7rem;
  }

  .brand-crest {
    width: 3rem;
    height: 3.5rem;
  }
}

@media (max-width: 390px) {
  .app-header {
    min-height: 6.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}