/* =====================================================================
   Frostbound Codex — a Frosthaven companion
   --------------------------------------------------------------------
   Visual concept: an aged vellum character sheet resting on a dark,
   frostbitten table. Display type is IM Fell English SC (a Renaissance
   woodcut serif), body is Crimson Pro. Frost-cyan primary accent,
   antique gold for treasure, oxblood for danger.

   The mobile layout fills the viewport with no body scroll: a topbar,
   a flex-grow parchment panel, and a footer with global actions. Notes
   live behind a slide-up drawer so they don't compete for vertical
   space with stats. Fonts are self-hosted under /fonts.
   ===================================================================== */

/* ----------------------------- FONTS -------------------------------- */

@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/crimson-pro.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-pro-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IM Fell English';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/im-fell-english.woff2') format('woff2');
}
@font-face {
  font-family: 'IM Fell English';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/im-fell-english-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IM Fell English SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/im-fell-english-sc.woff2') format('woff2');
}

/* ----------------------------- TOKENS ------------------------------- */

:root {
  /* atmosphere */
  --ink-black:    #050912;
  --midnight:     #0a1424;
  --midnight-2:   #0e1a2e;
  --slate-frost:  #15243d;
  --slate-edge:   #243a5c;

  /* parchment */
  --vellum:       #ecdfc2;
  --vellum-warm:  #e2d2af;
  --vellum-shade: #cdb98e;
  --vellum-deep:  #a98c5a;
  --vellum-edge:  #6b5532;

  /* ink */
  --ink:          #2a2014;
  --ink-soft:     #5a4630;
  --ink-faint:    #8a7553;

  /* accents */
  --frost:        #9fcfeb;
  --frost-bright: #d6ecf8;
  --frost-deep:   #4a7a98;
  --frost-shadow: #1f3a52;

  --gold:         #c9a45e;
  --gold-bright:  #e9cc8a;
  --gold-deep:    #7d5e2d;

  --blood:        #8e2a2a;
  --blood-bright: #c14545;

  /* type */
  --font-display: 'IM Fell English SC', 'Cormorant SC', 'Cinzel', Georgia, serif;
  --font-script:  'IM Fell English', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  --font-body:    'Crimson Pro', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;

  /* metrics */
  --tap: 42px;
  --tap-sm: 36px;
  --gutter: 12px;
  --radius: 4px;

  --inset-vellum:
    inset 0 0 0 1px var(--vellum-edge),
    inset 0 0 30px rgba(120, 92, 50, 0.18),
    inset 0 -2px 0 rgba(120, 92, 50, 0.18);
  --frost-glow:
    0 0 0 1px rgba(159, 207, 235, 0.35),
    0 6px 28px -4px rgba(31, 58, 82, 0.6);
}

/* ------------------------ RESET & BASE ------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--midnight);
  color: var(--frost-bright);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
html { height: 100dvh; }
body {
  height: 100dvh;
  /* Lock the body — only specific scroll containers may scroll. */
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(159, 207, 235, 0.07), transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 110%, rgba(74, 122, 152, 0.10), transparent 65%),
    radial-gradient(ellipse 120% 80% at 50% 50%, var(--midnight-2) 0%, var(--ink-black) 100%),
    var(--midnight);
}
/* Body has no padding; .app handles all safe-area insets so we don't
   double-pad. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.81 0 0 0 0 0.92 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
}

button, input, textarea, select {
  font: inherit; color: inherit; background: none; border: none; margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
button { cursor: pointer; }
a { color: var(--frost); text-decoration: none; }
a:hover { color: var(--frost-bright); }
::selection { background: rgba(159, 207, 235, 0.32); color: var(--frost-bright); }

/* ----------------------------- APP SHELL ---------------------------- */

.app {
  position: relative;
  z-index: 1;
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Generous top padding so the camera / Dynamic Island never overlaps
     the topbar, even when the OS reports a small safe-area inset. */
  padding:
    calc(env(safe-area-inset-top, 0px) + 14px)
    calc(env(safe-area-inset-right, 0px) + var(--gutter))
    calc(env(safe-area-inset-bottom, 0px) + 8px)
    calc(env(safe-area-inset-left, 0px) + var(--gutter));
}
/* #view is the render slot inside .app; views are written into it and
   it sits above snow within .app's stacking context. */
#view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
.view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ----------------------------- TOPBAR ------------------------------- */

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  position: relative;
}
.topbar::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px; bottom: 0;
  height: 1px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(159, 207, 235, 0.55) 18%,
      rgba(159, 207, 235, 0.85) 50%,
      rgba(159, 207, 235, 0.55) 82%,
      transparent 100%);
}
.topbar__title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar__class {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  color: var(--frost-bright);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: 0.06em;
  color: var(--frost-bright);
  flex: 1;
}
.topbar__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.topbar__link {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--frost);
  padding: 0 6px;
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  border-bottom: 1px dashed rgba(159, 207, 235, 0.4);
}

/* sigil — frosted medallion that frames a class glyph */
.sigil {
  --sigil-size: 40px;
  width: var(--sigil-size);
  height: var(--sigil-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background:
    radial-gradient(circle at 30% 25%, rgba(214, 236, 248, 0.95), rgba(159, 207, 235, 0.55) 55%, rgba(31, 58, 82, 0.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(214, 236, 248, 0.4),
    inset 0 -3px 8px rgba(31, 58, 82, 0.6),
    0 1px 0 rgba(255,255,255,0.06),
    0 6px 18px -8px rgba(0,0,0,0.7);
  color: var(--ink-black);
}
.sigil svg { width: 62%; height: 62%; }
.sigil--lg { --sigil-size: 56px; }
.sigil--sm { --sigil-size: 28px; }

.iconbtn {
  width: var(--tap);
  height: var(--tap);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--slate-frost), var(--midnight-2));
  box-shadow:
    inset 0 0 0 1px var(--slate-edge),
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 0 rgba(0,0,0,0.4);
  color: var(--frost);
  font-size: 1.2rem;
  font-family: var(--font-body);
  transition: transform 0.08s ease, color 0.12s ease;
}
.iconbtn:not(:disabled):hover { color: var(--frost-bright); }
.iconbtn:not(:disabled):active { transform: translateY(1px); }
.iconbtn:disabled { opacity: 0.32; cursor: not-allowed; }

/* --------------------------- SELECT VIEW ---------------------------- */

.view--select { gap: 8px; }

.select-hero {
  flex: none;
  text-align: center;
  padding: 6px 0 4px;
}
.select-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 5vw, 1.8rem);
  letter-spacing: 0.08em;
  color: var(--frost-bright);
  text-shadow:
    0 0 1px rgba(255,255,255,0.5),
    0 0 24px rgba(159, 207, 235, 0.25);
  margin: 0 0 4px;
  line-height: 1.1;
}
.select-hero .rune {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--frost-deep);
}
.select-hero .rune::before,
.select-hero .rune::after {
  content: '';
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--frost-deep) 50%, transparent);
}
.select-hero .rune span {
  font-family: var(--font-display);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-size: 0.62rem;
  color: var(--frost);
}

.select-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}

.class-group { display: flex; flex-direction: column; gap: 8px; }
.class-group h2 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--frost-deep);
  margin: 4px 0 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.class-group h2::before,
.class-group h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 207, 235, 0.45), transparent);
}

.class-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.class-grid--unlocks { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 480px) {
  .class-grid { grid-template-columns: repeat(4, 1fr); }
  .class-grid--unlocks { grid-template-columns: repeat(5, 1fr); }
}

.class-tile {
  position: relative;
  background:
    linear-gradient(180deg, var(--slate-frost) 0%, var(--midnight-2) 100%);
  border: 1px solid var(--slate-edge);
  border-radius: 8px;
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--frost-bright);
  text-align: center;
  isolation: isolate;
  transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  animation: tile-in 0.5s both;
  animation-delay: calc(var(--i, 0) * 30ms);
  min-height: 88px;
}
.class-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 50% 0%, rgba(159, 207, 235, 0.18), transparent 55%);
  opacity: 0.6;
  transition: opacity 0.18s ease;
}
.class-tile:hover {
  border-color: rgba(159, 207, 235, 0.55);
  box-shadow: var(--frost-glow);
  transform: translateY(-1px);
}
.class-tile:hover::before { opacity: 1; }
.class-tile:active { transform: translateY(0); }

.class-tile__sigil { --sigil-size: 38px; }
.class-tile__name {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--frost-bright);
  line-height: 1.15;
}

@keyframes tile-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* snowfall (decorative). Mounted inside .app so it sits behind .view
   but above the body bg — letting the translucent parchment panel show
   snow drifting through it. */
.snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.snowflake {
  position: absolute;
  top: -16px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(214, 236, 248, 0.7);
  filter: blur(0.4px);
  animation: snow-fall linear infinite;
}
@keyframes snow-fall {
  0%   { transform: translate3d(0, -10px, 0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { transform: translate3d(var(--drift, 12px), 110vh, 0); opacity: 0; }
}

/* ----------------------------- SHEET -------------------------------- */

.view--sheet { gap: 8px; }

.sheet-panel {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  /* Translucent vellum — snow drifts behind the page through the panel. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 248, 225, 0.55), transparent 60%),
    radial-gradient(110% 90% at 50% 100%, rgba(120, 90, 50, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(236, 223, 194, 0.86) 0%, rgba(226, 210, 175, 0.86) 100%);
  color: var(--ink);
  border-radius: 6px;
  padding: 10px 14px 12px;
  box-shadow:
    var(--inset-vellum),
    0 18px 50px -22px rgba(0,0,0,0.85),
    0 4px 14px -8px rgba(0,0,0,0.6);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sheet-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23p)' opacity='0.45'/></svg>"),
    radial-gradient(circle at 18% 28%, rgba(120, 90, 40, 0.18) 0%, transparent 12%),
    radial-gradient(circle at 78% 70%, rgba(120, 90, 40, 0.16) 0%, transparent 14%);
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.sheet-panel::after {
  content: '';
  position: absolute;
  top: 6px; right: 8px;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(80,55,18,0.32)' stroke-width='1' stroke-linecap='round'><path d='M12 2v20M2 12h20M5 5l14 14M19 5L5 19'/></svg>");
  background-size: contain;
  pointer-events: none;
}

.sheet-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sheet-section + .sheet-section {
  padding-top: 8px;
  border-top: 1px solid rgba(120, 92, 50, 0.28);
}
/* The resources section claims any leftover vertical space inside the
   parchment so the grid can lay out without forcing the panel to grow. */
.sheet-section--grow {
  flex: 1 1 auto;
  min-height: 0;
}
.sheet-section--grow .resources {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Subtle inner shadow at the edges hints at scrollable content. */
  mask-image: linear-gradient(180deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
}
.sheet-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

/* Name */
.name-input {
  font-family: var(--font-script);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--ink);
  width: 100%;
  padding: 0 0 4px;
  border: 0;
  background: transparent;
  border-bottom: 1px dashed rgba(80, 55, 18, 0.45);
  caret-color: var(--blood);
}
.name-input::placeholder { color: var(--ink-faint); font-style: italic; }
.name-input:focus { outline: none; border-bottom-color: var(--blood); }

/* Level row */
.level-track {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
}
.level-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  background: transparent;
}
.level-cell__box {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 36px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,250,235,0.55), rgba(180,150,100,0.18));
  box-shadow:
    inset 0 0 0 1.2px rgba(70, 50, 22, 0.55),
    inset 0 -1.5px 0 rgba(70, 50, 22, 0.2);
  transition: transform 0.12s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.level-cell__xp {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.level-cell:hover .level-cell__box {
  background: linear-gradient(180deg, rgba(255,250,235,0.85), rgba(180,150,100,0.32));
}
/* Active level — looks "pressed in". Flat linear-gradient (renders
   reliably on iOS Safari, where some radial-gradient + CSS-var combos
   paint flat), a strong top inset shadow + 1px Y-shift to read as
   depressed, and a soft frost glow around the well to draw the eye. */
.level-cell--active .level-cell__box {
  background-color: #5a8eaf;
  background-image: linear-gradient(180deg, #3d6e92 0%, #6fa6c4 100%);
  color: #f5fbff;
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1.5px rgba(15, 30, 50, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1.5px rgba(159, 207, 235, 0.32),
    0 0 10px -2px rgba(159, 207, 235, 0.55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.level-cell--active .level-cell__xp { color: var(--ink); font-weight: 600; }

/* Locked levels — earned XP is below the threshold. Dim the box and
   strike a faint hatched ink mark across so the lock is unmistakable. */
.level-cell--locked .level-cell__box {
  color: var(--ink-faint);
  background:
    repeating-linear-gradient(135deg, rgba(80, 55, 18, 0.18) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, rgba(255,250,235,0.35), rgba(180,150,100,0.1));
  box-shadow:
    inset 0 0 0 1.2px rgba(70, 50, 22, 0.32),
    inset 0 -1.5px 0 rgba(70, 50, 22, 0.12);
}
.level-cell--locked .level-cell__xp {
  color: var(--ink-faint);
}
.level-cell:disabled { cursor: not-allowed; }

/* Stat row (XP, Gold) — collapsed to a single horizontal line:
   icon · LABEL · value · 4 step buttons.
   The head (icon + label + value) gets a fixed width so the stepper
   that follows occupies the SAME remaining width in both rows — the
   four step buttons are then identical in size between Experience and
   Gold even though their labels are different lengths. */
.sheet-section.stat-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.stat-row__head {
  flex: none;
  width: 152px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
}
.stat-row__icon {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-deep);
}
.stat-row__icon svg { width: 100%; height: 100%; }
.stat-row__label {
  font-family: var(--font-display);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-row__value {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: 0.04em;
  line-height: 1;
  min-width: 1.6ch;
  text-align: right;
}
.stat-row--xp .stat-row__icon   { color: var(--frost-deep); }
.stat-row--xp .stat-row__value  { color: var(--frost-shadow); }
.stat-row--gold .stat-row__icon { color: var(--gold-deep); }
.stat-row--gold .stat-row__value{ color: var(--gold-deep); }

.stat-row .stepper {
  flex: 1 1 0;
  min-width: 0;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.stepper__btn {
  height: 38px;
  min-width: 0;
  padding: 0 4px;
  border-radius: 5px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,250,235,0.7), rgba(180,150,100,0.2));
  box-shadow:
    inset 0 0 0 1.2px rgba(70, 50, 22, 0.55),
    inset 0 -1.5px 0 rgba(70, 50, 22, 0.2);
  transition: transform 0.08s ease, background 0.12s ease;
}
.stepper__btn:hover {
  background: linear-gradient(180deg, rgba(255,250,235,0.95), rgba(180,150,100,0.32));
}
.stepper__btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 1.2px rgba(70, 50, 22, 0.55),
    inset 0 2px 4px rgba(70, 50, 22, 0.25);
}
.stepper__btn--neg { color: var(--blood); }
.stat-row--gold .stepper__btn { box-shadow: inset 0 0 0 1.2px var(--gold-deep), inset 0 -1.5px 0 rgba(70, 50, 22, 0.2); }
.stat-row--xp   .stepper__btn { box-shadow: inset 0 0 0 1.2px var(--frost-deep), inset 0 -1.5px 0 rgba(40, 60, 80, 0.25); }

/* Resources — "Apothecary Pills", single-column horizontal pills.
   Each pill is one wide row: icon · name · value · circular − +.
   Single column gives every name its full width so nothing is ever
   truncated, and the row stays comfortable for thumb-tapping. */
.resources {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-content: start;
  /* Reserve room beneath so the floating ^ button never sits over
     the last visible pill. */
  padding-bottom: 50px;
}
.resource {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 3px 8px 3px 6px;
  height: 42px;
  background: linear-gradient(180deg, rgba(255,250,235,0.62), rgba(180,150,100,0.18));
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 1px rgba(70, 50, 22, 0.45),
    0 1px 0 rgba(255,255,255,0.18);
}
.resource__icon {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex: none;
}
.resource__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.6;
}
.resource__name {
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.1;
}
.resource__value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0.02em;
  min-width: 1.6ch;
  text-align: right;
}
.resource__btns {
  display: flex;
  gap: 6px;
}
.resource__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  background: radial-gradient(circle at 35% 30%, rgba(255,250,235,0.85), rgba(180,150,100,0.32) 80%);
  box-shadow:
    inset 0 0 0 1.2px rgba(70, 50, 22, 0.6),
    inset 0 -2px 3px rgba(70, 50, 22, 0.22),
    0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.08s ease, background 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.resource__btn:hover {
  background: radial-gradient(circle at 35% 30%, rgba(255,250,235,1), rgba(180,150,100,0.42) 80%);
}
.resource__btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 1.2px rgba(70, 50, 22, 0.6),
    inset 0 2px 4px rgba(70, 50, 22, 0.28);
}
.resource__btn--neg { color: var(--blood); }

/* ----------------------------- FOOTER ------------------------------- */

/* The actions toggle is now a small floating round button (FAB) that
   hovers above the parchment so the resources list can claim the full
   panel height. Frosted-glass treatment lets the parchment ghost
   through, anchoring it visually to the sheet rather than the frame. */
.foot {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 0;
  pointer-events: none; /* let the button accept events directly */
}
.actions-toggle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  color: var(--ink-soft);
  /* Translucent vellum that blends into the parchment; the dark
     parchment grain shows through so the button reads as part of the
     sheet, not an alert sitting on top of it. */
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 248, 225, 0.45), rgba(180, 150, 100, 0.32) 70%, rgba(120, 90, 40, 0.28));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 0 1px rgba(70, 50, 22, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 6px -2px rgba(0, 0, 0, 0.28);
  transition: color 0.15s ease, transform 0.12s ease, box-shadow 0.2s ease, background 0.18s ease;
  animation: tab-nudge 5s ease-in-out infinite;
  position: relative;
}
.actions-toggle:hover {
  color: var(--ink);
  transform: translateY(-1px);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 248, 225, 0.65), rgba(180, 150, 100, 0.42) 70%, rgba(120, 90, 40, 0.36));
  box-shadow:
    inset 0 0 0 1px rgba(70, 50, 22, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 10px -2px rgba(0, 0, 0, 0.32);
}
.actions-toggle:active { transform: translateY(0); }
.actions-toggle svg { width: 16px; height: 10px; }

@keyframes tab-nudge {
  0%, 70%, 100% { transform: translateY(0); }
  82% { transform: translateY(-2px); }
  92% { transform: translateY(0); }
}

/* ------------------------ ACTIONS DRAWER ---------------------------- */

.actions-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  transition: background-color 0.24s ease;
  background: rgba(5, 9, 18, 0);
}
.actions-drawer.is-open {
  pointer-events: auto;
  background: rgba(5, 9, 18, 0.55);
}
.actions-drawer__sheet {
  width: 100%;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 248, 225, 0.55), transparent 60%),
    linear-gradient(180deg, rgba(236, 223, 194, 0.96) 0%, rgba(226, 210, 175, 0.96) 100%);
  color: var(--ink);
  border-radius: 16px 16px 0 0;
  box-shadow:
    var(--inset-vellum),
    0 -16px 50px -10px rgba(0,0,0,0.7);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.32, 1);
  display: flex;
  flex-direction: column;
  padding: 8px 0 max(env(safe-area-inset-bottom), 12px);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.actions-drawer.is-open .actions-drawer__sheet { transform: translateY(0); }

.actions-drawer__handle {
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: rgba(80, 55, 18, 0.4);
  margin: 4px auto 6px;
}
.actions-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 18px 8px;
  border-bottom: 1px solid rgba(80, 55, 18, 0.22);
}
.actions-drawer__title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.actions-drawer__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--ink-soft);
  background: rgba(80, 55, 18, 0.08);
  border: 0;
}

.action-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--ink);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.action-item:hover {
  background: rgba(80, 55, 18, 0.06);
}
.action-item:active {
  background: rgba(80, 55, 18, 0.12);
}
.action-item + .action-item {
  border-top: 1px solid rgba(80, 55, 18, 0.18);
}
.action-item__icon {
  width: 26px;
  height: 26px;
  color: var(--frost-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.action-item__icon svg { width: 100%; height: 100%; }
.action-item__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.action-item__title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.action-item__hint {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.action-item__chev {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink-faint);
  line-height: 1;
}
.action-item--danger .action-item__title { color: var(--blood); }
.action-item--danger .action-item__icon  { color: var(--blood); }

/* ----------------------------- DRAWER ------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  transition: background-color 0.24s ease;
  background: rgba(5, 9, 18, 0);
}
.drawer.is-open {
  pointer-events: auto;
  background: rgba(5, 9, 18, 0.55);
}
.drawer__sheet {
  width: 100%;
  max-height: 86vh;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 248, 225, 0.55), transparent 60%),
    linear-gradient(180deg, rgba(236, 223, 194, 0.92) 0%, rgba(226, 210, 175, 0.92) 100%);
  color: var(--ink);
  border-radius: 14px 14px 0 0;
  box-shadow:
    var(--inset-vellum),
    0 -16px 50px -10px rgba(0,0,0,0.7);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.32, 1);
  display: flex;
  flex-direction: column;
  padding: 10px 14px max(env(safe-area-inset-bottom), 12px);
  gap: 10px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.drawer.is-open .drawer__sheet { transform: translateY(0); }
.drawer__handle {
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: rgba(80, 55, 18, 0.4);
  margin: 0 auto;
}
.drawer__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.drawer__close {
  width: var(--tap-sm);
  height: var(--tap-sm);
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--ink-soft);
  background: rgba(80, 55, 18, 0.08);
}

.comments-area {
  width: 100%;
  flex: 1 1 auto;
  min-height: 220px;
  resize: none;
  font-family: var(--font-script);
  font-size: 1.02rem;
  color: var(--ink);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      rgba(80, 55, 18, 0.18) 27px,
      rgba(80, 55, 18, 0.18) 28px
    );
  background-position: 0 8px;
  border: 0;
  padding: 8px 0 0;
  outline: 0;
  line-height: 28px;
}
.comments-area::placeholder { color: var(--ink-faint); font-style: italic; }

/* --------------------------- RETIRED LIST --------------------------- */

.view--retired { gap: 8px; }
.retired-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}
.empty {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--frost-deep);
  text-align: center;
  padding: 36px 0;
}

.retired {
  position: relative;
  background: linear-gradient(180deg, var(--vellum-warm), var(--vellum-shade));
  color: var(--ink);
  padding: 14px 14px 12px;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px var(--vellum-edge),
    0 8px 24px -16px rgba(0,0,0,0.7);
}
.retired__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
  padding-right: 80px;
}
.retired__sigil { --sigil-size: 38px; flex: none; }
.retired__title { flex: 1; min-width: 0; }
.retired__name {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.15;
}
.retired__sub {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  margin-top: 2px;
}
.retired__resources {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.4;
}
.retired__comments {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.5;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px dashed rgba(80, 55, 18, 0.4);
}
.retired__stamp {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: rgba(140, 40, 40, 0.85);
  border: 1.5px solid rgba(140, 40, 40, 0.55);
  padding: 3px 8px;
  border-radius: 3px;
  transform: rotate(-6deg);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  font-weight: 500;
}

/* ----------------------------- UTILITIES ---------------------------- */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}

/* tighter spacing for very small phones (without sacrificing tap targets) */
@media (max-height: 740px) {
  .sheet-panel { padding: 8px 12px 10px; gap: 6px; }
  .sheet-section + .sheet-section { padding-top: 6px; }
  .name-input { font-size: 1.2rem; }
  .level-cell__box { font-size: 0.85rem; max-height: 32px; }
  .level-cell__xp { font-size: 0.72rem; }
  .stepper__btn { font-size: 0.78rem; height: 36px; }
  .stat-row__value { font-size: 1.3rem; }
  .resource { height: 38px; gap: 8px; padding: 2px 6px 2px 4px; }
  .resource__btn { width: 32px; height: 32px; font-size: 1.05rem; }
  .resource__value { font-size: 1.25rem; }
  .resource__name { font-size: 0.88rem; }
  .resource__icon { width: 22px; height: 22px; }
}
@media (max-width: 360px) {
  :root { --gutter: 10px; }
  .level-cell__box { font-size: 0.8rem; }
  .level-cell__xp { font-size: 0.68rem; }
  .resource__name { font-size: 0.84rem; }
  .resource__btn { width: 30px; height: 30px; }
  .resource__icon { width: 20px; height: 20px; }
  .stepper__btn { font-size: 0.72rem; padding: 0 2px; }
  .stat-row__head { width: 134px; gap: 6px; }
}