/* The enhanced theme: everything ornamental.
 *
 * Scoped entirely to html[data-theme-mode="enhanced"], so turning the setting
 * off returns the plain interface in base.css with nothing left over. Motion
 * uses only transform and opacity, and stops completely for anyone who asks
 * their phone to reduce motion.
 */

html[data-theme-mode="enhanced"] {
  --radius: 16px;
  --display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --ring: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* --- screen transitions ------------------------------------------------- */
html[data-theme-mode="enhanced"] .screen.is-active {
  animation: screen-in .34s cubic-bezier(.2, .7, .3, 1);
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- chrome ------------------------------------------------------------- */
html[data-theme-mode="enhanced"] .app-head {
  padding-block: max(env(safe-area-inset-top), 12px) 12px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 94%, transparent),
      color-mix(in srgb, var(--bg) 70%, transparent));
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, var(--line));
}
html[data-theme-mode="enhanced"] .app-head h1 {
  font-size: 1.22rem; font-weight: 600; letter-spacing: .015em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

/* --- buttons ------------------------------------------------------------ */
html[data-theme-mode="enhanced"] .primary {
  position: relative; overflow: hidden; font-weight: 700;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--accent-2) 70%, var(--accent)), var(--accent));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 28%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* a slow sheen, so the main action feels alive without shouting */
html[data-theme-mode="enhanced"] .primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.45) 48%, transparent 58%);
  transform: translateX(-120%);
  animation: sheen 6.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 72% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }

html[data-theme-mode="enhanced"] .secondary {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--surface-2) 92%, transparent),
      color-mix(in srgb, var(--surface) 92%, transparent));
  /* No backdrop blur. At 92% solid there was almost nothing for it to show,
     and there are about a hundred of these on a spell list: a phone had to
     redo every one of them on each frame of a scroll, over an animated
     background, and that was the lag. */
}
html[data-theme-mode="enhanced"] button:active { transform: translateY(1px) scale(.995); }

/* --- section labels ----------------------------------------------------- */
html[data-theme-mode="enhanced"] .section-label {
  font-family: var(--display);
  font-size: .95rem; font-weight: 600; letter-spacing: .12em;
  color: color-mix(in srgb, var(--accent-2) 70%, var(--muted));
  display: flex; align-items: center; gap: 10px;
}
html[data-theme-mode="enhanced"] .section-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
}

/* --- choice cards ------------------------------------------------------- */
html[data-theme-mode="enhanced"] .choice {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 62%, transparent),
      color-mix(in srgb, var(--bg) 55%, transparent));
  backdrop-filter: blur(6px);
  transition: transform .16s, border-color .16s, box-shadow .16s;
  min-height: 64px;
}
html[data-theme-mode="enhanced"] .choice strong { font-size: 1.05rem; font-weight: 600; }
html[data-theme-mode="enhanced"] .choices.levels .choice { font-family: var(--display); font-size: 1.1rem; }
html[data-theme-mode="enhanced"] .choice[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 22%, var(--surface)),
      color-mix(in srgb, var(--accent) 8%, var(--surface)));
  box-shadow: var(--ring), 0 10px 26px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}

html[data-theme-mode="enhanced"] .toggle {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  backdrop-filter: blur(6px);
}
html[data-theme-mode="enhanced"] .toggle input:checked + span::after {
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* --- budget ------------------------------------------------------------- */
html[data-theme-mode="enhanced"] .budget-bar {
  padding: 12px var(--pad) 14px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 92%, transparent),
      color-mix(in srgb, var(--bg) 68%, transparent));
  backdrop-filter: blur(14px);
  border-bottom-color: color-mix(in srgb, var(--accent) 18%, var(--line));
}
html[data-theme-mode="enhanced"] .budget-bar .spent { font-size: 1.6rem; line-height: 1; }

html[data-theme-mode="enhanced"] .meter {
  height: 7px; background: color-mix(in srgb, var(--line) 70%, transparent);
}
html[data-theme-mode="enhanced"] .meter i {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: width .35s cubic-bezier(.2, .7, .3, 1);
}

/* --- level cards -------------------------------------------------------- */
html[data-theme-mode="enhanced"] .level {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 46%, transparent),
      color-mix(in srgb, var(--bg) 38%, transparent));
  /* No blur here: it frosted the scenery into a grey wash, and the whole
     point of the scene is to be visible behind the list. */
  box-shadow: var(--shadow);
}
/* The rows are where the reading happens, so they carry their own contrast
   instead of the whole card being opaque. */
html[data-theme-mode="enhanced"] .spell .nm { text-shadow: 0 1px 3px rgba(0,0,0,.9); }
html[data-theme-mode="enhanced"] .level-head { backdrop-filter: blur(3px); }
html[data-theme-mode="enhanced"] .level-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
html[data-theme-mode="enhanced"] .level-head h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: .02em; }
html[data-theme-mode="enhanced"] .level-head .pts {
  font-family: var(--display); font-size: 1.05rem;
  padding: 2px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* --- spell rows --------------------------------------------------------- */
html[data-theme-mode="enhanced"] .spell { transition: background .2s; }
html[data-theme-mode="enhanced"] .spell.owned {
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 16%, transparent),
      color-mix(in srgb, var(--accent) 4%, transparent) 60%);
}
html[data-theme-mode="enhanced"] .spell.owned::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
}
html[data-theme-mode="enhanced"] .badge {
  font-size: .68rem; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
html[data-theme-mode="enhanced"] .badge + .badge::before { content: none; }
html[data-theme-mode="enhanced"] .badge.freq {
  color: color-mix(in srgb, var(--accent-2) 80%, var(--text));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Type leads the summary line, so it is the one badge that carries any
   weight of its own - the school and the range are qualifiers on it. */
html[data-theme-mode="enhanced"] .badge.type {
  color: var(--text);
  border-color: color-mix(in srgb, var(--line) 120%, transparent);
  background: color-mix(in srgb, var(--surface-2) 100%, transparent);
}
html[data-theme-mode="enhanced"] .badge.arch {
  color: var(--accent-ink); font-weight: 700;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: transparent;
}
/* The unfolded detail reads as a page of the book tucked under the row:
   ruled off at the top, set in from the edge, on slightly darker ground. */
html[data-theme-mode="enhanced"] .sd-inner > :first-child {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
html[data-theme-mode="enhanced"] .sd-incant {
  font-family: var(--display);
  color: color-mix(in srgb, var(--accent-2) 55%, var(--text));
}
html[data-theme-mode="enhanced"] .cost-chip {
  font-family: var(--display); font-size: .95rem; font-weight: 700; color: var(--text);
  padding: 4px 9px; border-radius: 9px;
  background: color-mix(in srgb, var(--surface-2) 75%, transparent);
  border: 1px solid var(--line);
  text-align: center;
}
html[data-theme-mode="enhanced"] .cost-chip small {
  display: block; font-family: system-ui, sans-serif; font-weight: 400;
  font-size: .62rem; letter-spacing: .03em;
}
html[data-theme-mode="enhanced"] .qty button { min-height: 40px; min-width: 40px; border-radius: 11px; }
html[data-theme-mode="enhanced"] .qty .n { font-family: var(--display); font-size: 1.1rem; min-width: 26px; }
html[data-theme-mode="enhanced"] .qty .n.bump { animation: bump .3s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); color: var(--accent-2); }
  100% { transform: scale(1); }
}

/* --- the finished sheet ------------------------------------------------- */
html[data-theme-mode="enhanced"] .sheet {
  padding: 22px 20px 20px;
  background: linear-gradient(180deg, #0f1319, #0c1015);
  box-shadow: var(--shadow);
}
html[data-theme-mode="enhanced"] .sheet::before {
  content: ""; position: absolute; inset: 7px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  pointer-events: none;
}
html[data-theme-mode="enhanced"] #screen-list[data-sheet="light"] .sheet {
  background:
    radial-gradient(120% 60% at 20% 0%, #fffdf6, transparent 60%),
    linear-gradient(180deg, #f8f4e9, #efe8d6);
  border-color: #d6ccb4;
}
html[data-theme-mode="enhanced"] #screen-list[data-sheet="light"] .sheet::before { border-color: #cbbf9f; }
html[data-theme-mode="enhanced"] .sheet h2 { font-size: 1.4rem; font-weight: 600; }
html[data-theme-mode="enhanced"] .sheet .lvl {
  font-weight: 600; font-size: 1.02rem; border-bottom: none;
  display: flex; align-items: baseline; gap: 8px;
}
html[data-theme-mode="enhanced"] .sheet .lvl::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35;
}

/* --- saved list cards --------------------------------------------------- */
html[data-theme-mode="enhanced"] .saved li {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
html[data-theme-mode="enhanced"] .saved .who strong { font-size: 1.05rem; font-weight: 600; }

html[data-theme-mode="enhanced"] .toast {
  background: linear-gradient(180deg, #33261a, #251b12);
  border-color: #6a4f2c; border-radius: 12px;
  transition: transform .26s cubic-bezier(.2, .9, .3, 1.2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}

/* --- atmosphere over the whole app -------------------------------------- */
/* Same fixed height as the scene behind them (see .mood in scene.css), so
   the vignette does not slide about as a phone's address bar comes and goes. */
.mood-grain, .mood-vignette {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none;
}
html[data-theme-mode="simple"] .mood-grain,
html[data-theme-mode="simple"] .mood-vignette { display: none; }

/* Fine grain stops the large gradients from banding on cheap panels. */
.mood-grain {
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mood-vignette {
  background: radial-gradient(130% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme-mode="enhanced"] .screen.is-active,
  html[data-theme-mode="enhanced"] .primary::after,
  html[data-theme-mode="enhanced"] .qty .n.bump { animation: none !important; }
}

/* --- the home page as a spell tome -------------------------------------- */
/* The home screen is the book you keep your lists in: dark leather, brass
   warmth, and a scroll laid on it. Green belongs to the class scenes, not
   here. */
html[data-theme-mode="enhanced"] #screen-home {
  --accent: #c8a45c;
  --accent-2: #e8d3a0;
  --accent-ink: #1b1305;
}
html[data-theme-mode="enhanced"] #screen-home .pad {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(80, 40, 24, .30), transparent 60%),
    linear-gradient(180deg, rgba(26, 16, 12, .55), rgba(16, 10, 8, .65));
  border-radius: 18px;
  border: 1px solid rgba(150, 110, 60, .28);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), var(--shadow);
  margin: var(--pad) auto;
  padding: 18px;
  max-width: 560px;
}

/* --- the scroll --------------------------------------------------------- */
html[data-theme-mode="enhanced"] .scroll { position: relative; margin-top: 4px; }
html[data-theme-mode="enhanced"] .scroll-roll {
  display: block; height: 18px; border-radius: 9px;
  background:
    linear-gradient(180deg, #c9a161 0%, #8a6533 45%, #5e4322 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,236,190,.5);
}
html[data-theme-mode="enhanced"] .scroll-roll.top { margin-bottom: -6px; }
html[data-theme-mode="enhanced"] .scroll-roll.bottom { margin-top: -6px; }

html[data-theme-mode="enhanced"] .scroll-body {
  position: relative;
  padding: 18px 16px;
  background-image:
    radial-gradient(120% 80% at 50% 0%, rgba(255,252,240,.55), transparent 60%),
    url("../art/parchment.webp");
  background-size: auto, 220px 220px;
  background-repeat: no-repeat, repeat;
  box-shadow: inset 0 0 40px rgba(120, 88, 40, .35),
              0 10px 26px rgba(0,0,0,.5);
  /* The parchment itself carries the reading, so ink is dark here. */
  color: #2a2013;
  border-radius: 3px;
  /* Unfurls when there is something to hold. */
  transition: padding .5s cubic-bezier(.3, .8, .3, 1);
}
html[data-theme-mode="enhanced"] .scroll.unfurled .scroll-body { padding-bottom: 26px; }

/* Anything on the parchment reads as ink, not as interface. */
html[data-theme-mode="enhanced"] .scroll-body .section-label { color: #6b4f27; }
html[data-theme-mode="enhanced"] .scroll-body .section-label::after {
  background: linear-gradient(90deg, rgba(107,79,39,.55), transparent);
}
html[data-theme-mode="enhanced"] .scroll-body .muted { color: #6d5a3c; }
html[data-theme-mode="enhanced"] .scroll-body .saved li {
  background: rgba(255, 250, 235, .35);
  border-color: rgba(120, 90, 45, .35);
  color: #2a2013;
  backdrop-filter: none;
  box-shadow: none;
}
html[data-theme-mode="enhanced"] .scroll-body .saved .who small { color: #6d5a3c; }
html[data-theme-mode="enhanced"] .scroll-body .secondary {
  background: rgba(60, 42, 20, .10);
  border-color: rgba(110, 82, 40, .5);
  color: #3a2c15;
}

/* The saved heading catches a slow pulse of blue, like the tome answering. */
html[data-theme-mode="enhanced"] .saved-label span {
  position: relative;
  animation: saved-glow 9s ease-in-out infinite;
}
@keyframes saved-glow {
  0%, 62%, 100% { color: #6b4f27; text-shadow: none; }
  72% { color: #3f6f9c; text-shadow: 0 0 10px rgba(120, 190, 255, .85), 0 0 22px rgba(90, 160, 255, .45); }
  82% { color: #4d7fae; text-shadow: 0 0 6px rgba(120, 190, 255, .5); }
}

/* The new-list button is lettering on the scroll, not a green slab. */
html[data-theme-mode="enhanced"] .scroll-btn {
  background: none;
  background-color: transparent;
  box-shadow: none;
  color: #33240f;
  font-family: var(--display);
  font-size: 1.28rem;
  letter-spacing: .02em;
  border: 1px solid rgba(120, 90, 45, .5);
  border-radius: 8px;
}
html[data-theme-mode="enhanced"] .scroll-btn::after { content: none; }
html[data-theme-mode="enhanced"] .scroll-btn:active { background-color: rgba(120, 90, 45, .14); }
/* "Nothing saved yet" was dark ink on a dark panel before the parchment
   went in behind it. */
html[data-theme-mode="enhanced"] .scroll-body #saved-empty { color: #6d5a3c; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme-mode="enhanced"] .saved-label span { animation: none; }
}