/* ===========================================================================
   Lava Tower theme  (<html data-theme="lava">)

   The page is the side of a stone tower: a grey brick wall, the menu bolted to the
   tower's weathered face, lava glowing at the base, cracks in the stone with light
   spilling out of them, and bits of masonry crumbling away along the edge.

   Static look  : this file (palette, brick tiles from lava-bricks.css, drips).
   Ambient layer: js/lavaTheme.js builds #lavaFx (cracks, embers, debris) while the theme
                  is on. It sits behind #app, ignores the pointer, and only ever animates
                  opacity / transform (plus a one-off crack "draw-in"), so it costs almost
                  nothing and never touches the content that re-renders.
   Motion       : the user explicitly asked for ambient lava motion, so these loops run
                  longer than the app's usual 0.25s UI rule. They are switched off for
                  prefers-reduced-motion and by Settings -> Appearance -> "Calm lava".
   =========================================================================== */

:root[data-theme="lava"] {
  color-scheme: dark;
  --bg: #1b1a1d;
  --panel: #232126;
  --panel-alt: #2c292e;
  --border: #5a4a44;
  --text: #f0e8e0;
  --text-dim: #b4a79c;
  --accent: #e0260e;
  --accent-dim: #4a120c;
  --accent-2: #ff6a3a;
  --gold: #ff4a22;        /* molten red takes over the gold trim */
  --gold-dim: #6a2012;
  --good: #7fcf6a;
  --warn: #ffb02e;
  --bad: #ff5a42;
  --lava-1: #ff2a00;
  --lava-2: #ff4a1a;
  --lava-3: #ff9a6a;
  --mortar: #0f0f12;
}

/* ---------------------------------------------------------------- the wall */

:root[data-theme="lava"] body {
  background-color: #17171a;
  background-image:
    radial-gradient(ellipse at 50% 120%, rgba(255, 36, 8, .30), transparent 55%),
    radial-gradient(ellipse at 50% -10%, rgba(0, 0, 0, .55), transparent 65%),
    var(--brick-wall);
  background-size: auto, auto, 600px 248px;
  background-attachment: fixed;
}
:root[data-theme="lava"] #app { position: relative; z-index: 1; }

:root[data-theme="lava"] .topbar {
  background: linear-gradient(180deg, #2a272c, #1c1a1e);
  border-bottom: 2px solid #7a3217;
  box-shadow: 0 3px 20px rgba(255, 36, 8, .28);
}
:root[data-theme="lava"] .brand-text { text-shadow: 0 0 12px rgba(255, 56, 20, .55); }
:root[data-theme="lava"] .brand-logo { filter: drop-shadow(0 0 7px rgba(255, 56, 20, .75)); }

/* the menu is the face of the tower */
:root[data-theme="lava"] .sidenav {
  background: transparent;
  border-right: 0;
}
@media (min-width: 781px) { :root[data-theme="lava"] .sidenav { z-index: 2; } }
:root[data-theme="lava"] .nav-item {
  color: #f6ece3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  border-radius: 4px;
  transition: background-color .15s ease, border-color .15s ease;
}
:root[data-theme="lava"] .nav-item:hover {
  background: rgba(255, 46, 14, .14);
  border-color: rgba(255, 84, 40, .55);
}
:root[data-theme="lava"] .nav-sep {
  color: var(--lava-2);
  border-bottom-color: rgba(255, 84, 40, .35);
  text-shadow: 0 0 8px rgba(255, 46, 14, .5);
}
:root[data-theme="lava"] .nav-icon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)); }

/* ---------------------------------------------------------------- slabs & controls */

:root[data-theme="lava"] .card {
  background: linear-gradient(160deg, rgba(38, 35, 40, .94), rgba(24, 22, 26, .95));
  border: 1px solid #5c4840;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .55), inset 0 0 34px rgba(255, 36, 8, .05);
}
:root[data-theme="lava"] .card::before,
:root[data-theme="lava"] .card::after { border-color: var(--lava-2); opacity: .95; }
:root[data-theme="lava"] h1.view-title { text-shadow: 0 0 16px rgba(255, 46, 14, .55), 0 2px 3px rgba(0, 0, 0, .8); }
:root[data-theme="lava"] input,
:root[data-theme="lava"] select,
:root[data-theme="lava"] textarea { background: #151417; border-color: #5c4840; color: var(--text); }
:root[data-theme="lava"] input:focus,
:root[data-theme="lava"] select:focus,
:root[data-theme="lava"] textarea:focus { outline: 2px solid var(--lava-2); box-shadow: 0 0 12px rgba(255, 56, 20, .45); }

:root[data-theme="lava"] button.btn {
  background: linear-gradient(180deg, #f0301a, #b01c08);
  border-color: #6a1206;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 0 rgba(255, 150, 110, .55), 0 0 10px rgba(255, 36, 8, .25);
}
:root[data-theme="lava"] button.btn:hover { border-color: var(--lava-3); box-shadow: inset 0 1px 0 rgba(255, 160, 120, .7), 0 0 18px rgba(255, 50, 16, .55); }
:root[data-theme="lava"] button.btn.secondary { background: #2c292e; color: var(--text); border-color: #5c4840; box-shadow: none; text-shadow: none; }
:root[data-theme="lava"] button.btn.secondary:hover { border-color: var(--lava-2); box-shadow: 0 0 12px rgba(255, 50, 16, .3); }
:root[data-theme="lava"] .pill-btn { background: #2c292e; border-color: #5c4840; }
:root[data-theme="lava"] .pill-btn.active { background: linear-gradient(180deg, #f0301a, #b01c08); border-color: var(--lava-3); color: #fff; }
:root[data-theme="lava"] table.data-table th { color: var(--lava-2); }
:root[data-theme="lava"] .dnd-segment button.on { background: linear-gradient(180deg, #ff4a1c, #c01c08); color: #fff; }
:root[data-theme="lava"] .dnd-list-item.active { border-color: var(--lava-2); background: rgba(255, 46, 14, .13); }
:root[data-theme="lava"] .dnd-hp-fill.good { background: linear-gradient(90deg, #5fb84a, #8adf6e); }

/* the selected nav item is molten */
:root[data-theme="lava"] .nav-item.active {
  background: linear-gradient(180deg, #ff4a1c 0%, #e0260e 55%, #8a1406 100%);
  border-color: var(--lava-3);
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 46, 14, .65), inset 0 1px 0 rgba(255, 170, 130, .7), inset 0 -6px 12px rgba(120, 20, 0, .45);
}

/* ---------------------------------------------------------------- lava drips from selected buttons */

:root[data-theme="lava"] :is(.nav-item.active, .pill-btn.active, .dnd-segment button.on, .dnd-list-item.active, button.btn:not(:disabled):hover) {
  position: relative;
  overflow: visible;
}
:root[data-theme="lava"] :is(.nav-item.active, .pill-btn.active, .dnd-segment button.on, .dnd-list-item.active, button.btn:not(:disabled):hover)::before,
:root[data-theme="lava"] :is(.nav-item.active, .pill-btn.active, .dnd-segment button.on, .dnd-list-item.active, button.btn:not(:disabled):hover)::after {
  content: "";
  position: absolute;
  top: calc(100% - 4px);
  width: 6px;
  height: 20px;
  border-radius: 1px 1px 6px 6px;
  background: linear-gradient(180deg, #e0260e 0%, #ff4a1a 55%, #ff9a6a 100%);
  box-shadow: 0 0 8px rgba(255, 50, 16, .85);
  transform-origin: 50% 0;
  transform: scaleY(0);
  pointer-events: none;
  z-index: 3;
  will-change: transform, opacity;
}
:root[data-theme="lava"] :is(.nav-item.active, .pill-btn.active, .dnd-segment button.on, .dnd-list-item.active, button.btn:not(:disabled):hover)::before {
  left: 16%;
  animation: lava-drip 3.6s ease-in infinite;
}
:root[data-theme="lava"] :is(.nav-item.active, .pill-btn.active, .dnd-segment button.on, .dnd-list-item.active, button.btn:not(:disabled):hover)::after {
  left: 63%;
  width: 5px;
  animation: lava-drip 4.7s 1.4s ease-in infinite;
}
@keyframes lava-drip {
  0%   { transform: translateY(0) scaleY(0); opacity: 0; }
  6%   { opacity: 1; }
  36%  { transform: translateY(0) scaleY(1); opacity: 1; }
  50%  { transform: translateY(2px) scaleY(1.15); opacity: 1; }
  100% { transform: translateY(54px) scaleY(.5); opacity: 0; }
}

/* ---------------------------------------------------------------- ambient layer (built by lavaTheme.js) */

#lavaFx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: layout paint; }
#lavaFx * { pointer-events: none; }

/* the tower: a taller, lighter slab with a ragged, crumbling right edge */
.lava-tower-wrap { position: absolute; left: 0; top: var(--topbar-h); bottom: 0; width: calc(var(--sidenav-w) + 14px); filter: drop-shadow(5px 0 9px rgba(0, 0, 0, .7)); }
.lava-tower { position: absolute; inset: 0; overflow: hidden; background-color: #2b2a2f; clip-path: var(--tower-clip, none); }
.lava-tower-bricks { position: absolute; inset: 0; background: var(--brick-slab); background-size: 480px 192px; }
.lava-tower-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 16%, transparent 70%, rgba(0, 0, 0, .55)), linear-gradient(0deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12)); }
.lava-tower .lava-layer { position: absolute; inset: 0; overflow: hidden; }
.lava-tower::after {
  content: ""; position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 56, 20, .7), rgba(255, 36, 8, .25) 45%, transparent 72%);
  animation: lava-flicker 3.4s ease-in-out infinite alternate;
  will-change: opacity;
}
@keyframes lava-flicker { 0% { opacity: .6; } 35% { opacity: .95; } 60% { opacity: .72; } 100% { opacity: 1; } }

/* cracks: three stacked strokes -- a wide soft glow, the orange body, and a hot white-yellow core */
.lava-wall { position: absolute; left: -600px; top: -248px; width: calc(100% + 1200px); height: calc(100% + 496px); background: var(--brick-wall); background-size: 600px 248px; will-change: transform; }
.lava-layer { position: absolute; inset: 0; overflow: hidden; }
.lava-tiles { position: relative; will-change: transform; }
.lava-cracks { display: block; }
/* a soft band of light and shadow that slides across the wall: it makes the wall look curved and turning */
.lava-spin-shade { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; will-change: transform; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 22%, rgba(255, 70, 40, .07) 50%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .55) 100%); background-size: 50% 100%; }
/* the heat of the fire lights the foot of the wall more strongly the deeper you are */
.lava-heat { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: radial-gradient(ellipse at 50% 110%, rgba(255, 46, 14, .55), rgba(255, 30, 6, .18) 45%, transparent 75%); opacity: .25; will-change: opacity; }
.lava-crack { will-change: opacity; animation: crack-pulse 4.8s calc(var(--d, 0s) + 2.4s) ease-in-out infinite alternate; }
.lava-crack path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: crack-draw 2.4s var(--d, 0s) cubic-bezier(.3, .6, .3, 1) forwards; }
.lava-crack .glow { stroke: rgba(255, 46, 14, .38); stroke-width: 6px; filter: blur(3px); }
.lava-crack .body { stroke: #ff3a14; stroke-width: 1.9px; }
.lava-crack .core { stroke: #ffc8a8; stroke-width: .8px; }
@keyframes crack-draw { to { stroke-dashoffset: 0; } }
@keyframes crack-pulse { 0% { opacity: .62; } 100% { opacity: 1; } }

/* heat at the foot of the tower */
.lava-pool { position: absolute; left: -200px; right: -200px; bottom: 0; height: 110px; transform-origin: 50% 100%; will-change: transform, opacity; }
.lava-pool::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(255, 34, 8, .75), rgba(255, 28, 6, .28) 45%, transparent);
}
.lava-pool::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background:
    radial-gradient(circle at 25px 100%, #ff5a20 0 14px, transparent 15px) 0 0 / 100px 26px repeat-x,
    radial-gradient(circle at 75px 100%, #ff3a14 0 11px, transparent 12px) 0 0 / 100px 26px repeat-x;
  opacity: .9;
  animation: lava-slosh 9s linear infinite;
  will-change: transform;
}
@keyframes lava-slosh { to { transform: translateX(-100px); } }

/* embers drifting up, and chunks of masonry falling off the tower's edge */
.lava-ember { position: absolute; bottom: -8px; border-radius: 50%; background: radial-gradient(circle, #ffc4a8, #ff4a1a 55%, transparent 72%); opacity: 0; animation: ember-rise var(--dur, 9s) var(--delay, 0s) linear infinite; will-change: transform, opacity; }
@keyframes ember-rise {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  10%  { opacity: .95; }
  100% { transform: translate3d(var(--dx, 30px), -105vh, 0) scale(.3); opacity: 0; }
}
.lava-debris { position: absolute; top: var(--topbar-h); bottom: 0; left: calc(var(--sidenav-w) - 6px); width: 30px; }
.lava-chunk {
  position: absolute; left: 0; top: var(--y, 20%);
  width: var(--w, 6px); height: var(--h, 5px);
  background: linear-gradient(135deg, #6b6a70, #34333a);
  border-radius: 1px;
  opacity: 0;
  animation: chunk-fall var(--dur, 3.2s) var(--delay, 0s) cubic-bezier(.45, 0, .95, .6) infinite;
  will-change: transform, opacity;
}
.lava-chunk.hot { background: linear-gradient(135deg, #ff9a3a, #b53a10); box-shadow: 0 0 5px rgba(255, 56, 20, .8); }
@keyframes chunk-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
  7%   { opacity: 1; }
  80%  { opacity: .9; }
  100% { transform: translate3d(var(--dx, 12px), var(--dy, 150px), 0) rotate(var(--rot, 240deg)); opacity: 0; }
}
.lava-dust { position: absolute; left: 0; top: var(--y, 20%); width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(190, 180, 170, .5), transparent 70%); opacity: 0; animation: dust-puff var(--dur, 5s) var(--delay, 0s) ease-out infinite; will-change: transform, opacity; }
@keyframes dust-puff { 0% { transform: translate3d(0, 0, 0) scale(.4); opacity: 0; } 12% { opacity: .8; } 100% { transform: translate3d(10px, 24px, 0) scale(2.4); opacity: 0; } }

/* ---------------------------------------------------------------- phones: the menu is a drawer */

@media (max-width: 780px) {
  :root[data-theme="lava"] .sidenav {
    background-color: #2b2a2f;
    background-image: linear-gradient(0deg, rgba(255, 36, 8, .3), transparent 40%), var(--brick-slab);
    background-size: auto, 480px 192px;
    border-right: 2px solid #7a3217;
  }
  .lava-tower-wrap, .lava-debris { display: none; }
}

/* ---------------------------------------------------------------- calm / reduced motion */

html[data-lava-fx="calm"] .lava-ember,
html[data-lava-fx="calm"] .lava-chunk,
html[data-lava-fx="calm"] .lava-dust { display: none; }
html[data-lava-fx="calm"] .lava-pool::after,
html[data-lava-fx="calm"] .lava-tower::after,
html[data-lava-fx="calm"] .lava-crack,
html[data-lava-fx="calm"] .lava-crack path { animation: none; }
html[data-lava-fx="calm"] .lava-crack path { stroke-dashoffset: 0; }
html[data-lava-fx="calm"][data-theme="lava"] :is(.nav-item.active, .pill-btn.active, .dnd-segment button.on, .dnd-list-item.active)::before,
html[data-lava-fx="calm"][data-theme="lava"] :is(.nav-item.active, .pill-btn.active, .dnd-segment button.on, .dnd-list-item.active)::after { animation: none; transform: scaleY(.55); opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .lava-ember, .lava-chunk, .lava-dust { display: none; }
  .lava-pool::after, .lava-tower::after, .lava-crack, .lava-crack path { animation: none; }
  .lava-crack path { stroke-dashoffset: 0; }
  :root[data-theme="lava"] :is(.nav-item.active, .pill-btn.active, .dnd-segment button.on, .dnd-list-item.active, button.btn:not(:disabled):hover)::before,
  :root[data-theme="lava"] :is(.nav-item.active, .pill-btn.active, .dnd-segment button.on, .dnd-list-item.active, button.btn:not(:disabled):hover)::after { animation: none; transform: scaleY(.55); opacity: .9; }
}

/* ---------------------------------------------------------------- the theme toggle in the top bar */

.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  width: 40px; height: 40px; min-width: 40px; padding: 6px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}
.theme-toggle svg { width: 100%; height: 100%; display: block; }
.theme-toggle:hover { border-color: var(--gold); }
.theme-toggle[aria-pressed="true"] { border-color: var(--lava-2, #ff4a1a); color: #ff4a1a; box-shadow: 0 0 12px rgba(255, 56, 20, .55); }

/* the WebGL cylinder replaces the flat wall layers */
#lavaTower { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
html.lava-gl .lava-wall, html.lava-gl .lava-wall-cracks, html.lava-gl .lava-spin-shade { display: none; }

#lavaDebris { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }