/*
  Obsidian Desk visual layer for Ev's DM Dashboard.
  Static CSS only: no build step, no behavior changes.
*/

:root {
  --dm-hostile: #ff6381;
  --dm-hostile-soft: rgba(255, 99, 129, 0.13);
  --dm-friendly: #54ee91;
  --dm-friendly-soft: rgba(84, 238, 145, 0.12);
  --dm-active-turn: #8d7bff;
  --dm-next-turn: #49a0ff;
  --dm-hp-good: #54ee91;
  --dm-hp-warning: #ffe36d;
  --dm-hp-danger: #ff6381;
  --dm-temp-hp: #49a0ff;
  --dm-ritual: #ffd166;
  --dm-concentration: #b76cff;
  --dm-school-evocation: #ff7a5c;
  --dm-school-abjuration: #55d6ff;
  --dm-school-conjuration: #ffa95c;
  --dm-school-divination: #9e8cff;
  --dm-school-enchantment: #ff78c7;
  --dm-school-illusion: #c084fc;
  --dm-school-necromancy: #a8b0c3;
  --dm-school-transmutation: #54ee91;
  --dm-row-alt: rgba(255, 255, 255, 0.035);
  --dm-field-bg: var(--control-bg);
}

body.light-mode,
:root[data-dm-theme="light"] {
  --dm-hostile: #db3f5f;
  --dm-hostile-soft: rgba(219, 63, 95, 0.12);
  --dm-friendly: #199a64;
  --dm-friendly-soft: rgba(25, 154, 100, 0.11);
  --dm-hp-good: #199a64;
  --dm-hp-warning: #b68a00;
  --dm-hp-danger: #db3f5f;
  --dm-temp-hp: #1d7df2;
  --dm-ritual: #b27900;
  --dm-concentration: #7a5cf2;
  --dm-row-alt: rgba(18, 25, 43, 0.035);
}

html {
  background: var(--bg);
}

body {
  font-family: var(--od-font-family, "Manrope", Inter, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: 0;
}

body.light-mode,
body.dark-mode {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent-3) 24%, transparent), transparent 32%),
    radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 34%),
    radial-gradient(circle at 52% 88%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
    linear-gradient(145deg, var(--bg), var(--bg-strong));
  color: var(--text);
}

body.light-mode {
  color-scheme: light;
  --bg-primary: var(--surface);
  --bg-secondary: var(--surface-2);
  --bg-page: var(--bg);
  --text-primary: var(--text);
  --text-secondary: var(--text-soft);
  --text-tertiary: var(--text-faint);
  --border-tertiary: var(--border);
  --border-secondary: var(--border-strong);
  --heading-accent: var(--accent);
}

body.dark-mode {
  color-scheme: dark;
  --bg-primary: var(--surface);
  --bg-secondary: var(--surface-2);
  --bg-page: var(--bg);
  --text-primary: var(--text);
  --text-secondary: var(--text-soft);
  --text-tertiary: var(--text-faint);
  --border-tertiary: var(--border);
  --border-secondary: var(--border-strong);
  --heading-accent: var(--accent);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.46;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 76%);
}

#root {
  min-height: 100vh;
  isolation: isolate;
}

input,
button,
select,
textarea {
  font-family: inherit;
}

input,
select,
textarea {
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--glass-border)) !important;
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

button {
  transition:
    background var(--od-transition-fast),
    border-color var(--od-transition-fast),
    color var(--od-transition-fast),
    box-shadow var(--od-transition-fast),
    transform var(--od-transition-fast),
    opacity var(--od-transition-fast);
}

button:active {
  transform: var(--od-press-transform);
}

code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  color: var(--accent-2);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-faint) 58%, transparent);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

.sticky-nav {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-soft), inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: blur(var(--od-blur-surface));
}

.scene {
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent-3) 24%, transparent), transparent 32%),
    radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 34%),
    radial-gradient(circle at 52% 88%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 42%),
    linear-gradient(145deg, var(--bg), var(--bg-strong)) !important;
}

.phone-shell {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong) !important;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.44),
    0 0 0 10px rgba(4, 6, 12, 0.72),
    0 0 0 11px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 var(--glass-highlight) !important;
  backdrop-filter: blur(var(--od-blur-panel));
}

.phone-content {
  background:
    radial-gradient(circle at 72% 8%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 34%),
    radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 38%),
    linear-gradient(145deg, var(--bg), var(--bg-strong)) !important;
}

.tweaks {
  background: var(--glass-bg-strong) !important;
  color: var(--text) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow) !important;
  font-family: var(--od-font-family) !important;
}

.tweaks button {
  background: var(--control-bg) !important;
  color: var(--text-soft) !important;
  border: 1px solid var(--glass-border) !important;
}

.tweaks button.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #fff !important;
}

@media (max-width: 500px), (max-height: 700px) {
  body {
    background:
      radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--accent-3) 18%, transparent), transparent 34%),
      radial-gradient(circle at 90% 16%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 34%),
      linear-gradient(145deg, var(--bg), var(--bg-strong)) !important;
  }

  .phone-shell {
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
  }
}