/* Asteria UI Theme Systems */

:root {
  --asteria-accent: #1f7dff;
  --asteria-accent-rgb: 31, 125, 255;
  --asteria-accent-soft: rgba(31,125,255,.22);
  --asteria-accent-faint: rgba(31,125,255,.10);
  --asteria-glow: rgba(31,125,255,.36);
  --asteria-glow-strong: rgba(31,125,255,.54);
  --panel-bg: rgba(4,14,16,.78);
  --panel-border: rgba(31,125,255,.46);
  --text-primary: #f7ead1;
  --text-secondary: #b8ad99;
  --asteria-overlay-opacity: .44;
  --asteria-background-visibility: .44;
  --asteria-glow-intensity: .36;
  --asteria-bg-opacity: .92;
  --asteria-bg-top-veil: .28;
  --asteria-bg-bottom-veil: .53;
  --asteria-panel-opacity: .78;
}

.hp,.hp-bar,[data-resource="hp"] { --asteria-accent:#8f1f2e; }
.sp,.sp-bar,[data-resource="sp"] { --asteria-accent:#2ecc71; }
.mp,.mp-bar,[data-resource="mp"] { --asteria-accent:#1757c2; }
.xp,.xp-bar,[data-resource="xp"] { --asteria-accent:#67d8ff; }

html { background:#020809; }

body {
  background:
    linear-gradient(rgba(1,7,8,var(--asteria-bg-top-veil)), rgba(1,7,8,var(--asteria-bg-bottom-veil))),
    url("../assets/themes/asteria-iron-d20-background.png") center center / cover fixed,
    radial-gradient(circle at 50% -10%,#183948 0,#081116 45%,#020304 100%) !important;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  color:var(--asteria-accent);
  background-color:currentColor;
  -webkit-mask:url("../assets/themes/asteria-spell-d20-overlay.svg") center top / cover no-repeat;
  mask:url("../assets/themes/asteria-spell-d20-overlay.svg") center top / cover no-repeat;
  opacity:var(--asteria-overlay-opacity);
  filter:drop-shadow(0 0 calc(5px + 14px * var(--asteria-glow-intensity)) var(--asteria-glow));
  transition:color .28s ease, opacity .28s ease, filter .28s ease, background-color .28s ease;
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 10%, rgba(var(--asteria-accent-rgb),.10), transparent 25%),
    radial-gradient(circle at 80% 75%, rgba(var(--asteria-accent-rgb),.07), transparent 28%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.38));
}

button,.toplink,.side-main,.clean-nav button.cat,.clean-card,.card,.panel,.settings-panel,.asteria-workspace-shell,.clean-compendium-shell,.clean-display,.clean-nav {
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}

button:hover,.toplink:hover,.side-main:hover,.clean-nav button.cat:hover {
  border-color:var(--asteria-accent) !important;
  box-shadow:0 0 calc(8px + 16px * var(--asteria-glow-intensity)) var(--asteria-glow) !important;
}

button.primary,.primary,#loginToggle,#createAccountTop,.account-top-btn {
  background:linear-gradient(180deg, color-mix(in srgb,var(--asteria-accent) 90%,white 12%), color-mix(in srgb,var(--asteria-accent) 66%,black 34%)) !important;
  border-color:color-mix(in srgb,var(--asteria-accent) 74%,white 26%) !important;
  color:#001014 !important;
}

.outline:hover,.clean-card:hover,.clean-nav button.cat.active,.side-main.active,.toplink.active {
  border-color:var(--asteria-accent) !important;
  box-shadow:0 0 calc(8px + 14px * var(--asteria-glow-intensity)) var(--asteria-glow) !important;
}

::selection { background:var(--asteria-accent-soft); color:var(--text-primary); }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:rgba(2,8,9,.84); }
::-webkit-scrollbar-thumb {
  background:color-mix(in srgb,var(--asteria-accent) 42%,#2b2417 58%);
  border:2px solid rgba(2,8,9,.84);
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb,var(--asteria-accent) 62%,#2b2417 38%); }

.topbar.core-v2-topbar,.topbar {
  background:rgba(0,0,0,.58) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}

.hamburger {
  display:grid !important;
  grid-template-rows:repeat(3,2px);
  align-content:center;
  justify-content:center;
  gap:5px;
}

.hamburger span { display:block; }

.card,.panel,.asteria-workspace-shell,.clean-compendium-shell,.clean-display,.clean-nav,.settings-panel,.login-panel {
  background:var(--panel-bg) !important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.card,.panel,.asteria-workspace-shell,.clean-compendium-shell,.clean-display,.clean-nav,.settings-panel {
  border-color:var(--panel-border) !important;
}

.theme-settings-section {
  border:1px solid rgba(188,138,57,.32);
  border-radius:14px;
  padding:14px;
  background:var(--panel-bg);
}
.theme-settings-section label { display:grid; gap:6px; margin:12px 0; }
.theme-settings-section select,.theme-settings-section input[type="color"],.theme-settings-section input[type="range"] { width:100%; }
.theme-settings-section input[type="color"] {
  height:48px;
  padding:3px;
  border-radius:10px;
  border:1px solid var(--panel-border);
  background:rgba(2,8,9,.92);
  cursor:pointer;
}
.theme-colour-row { display:grid; grid-template-columns:1fr 58px; align-items:end; gap:12px; }
.theme-preview-orb {
  width:52px;
  height:52px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--asteria-accent) 70%,white 30%);
  background:radial-gradient(circle at 35% 30%,white,transparent 16%), radial-gradient(circle,var(--asteria-accent),color-mix(in srgb,var(--asteria-accent) 44%,black 56%));
  box-shadow:0 0 calc(10px + 18px * var(--asteria-glow-intensity)) var(--asteria-glow);
}
.theme-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.theme-live-preview {
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--asteria-accent);
  background:linear-gradient(135deg,var(--asteria-accent-faint),rgba(2,8,9,.86));
  display:grid;
  grid-template-columns:1fr auto 26px;
  gap:10px;
  align-items:center;
  box-shadow:0 0 calc(8px + 12px * var(--asteria-glow-intensity)) var(--asteria-glow);
}
.theme-live-preview span { color:var(--text-primary); font-weight:800; }
.theme-live-preview i {
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--asteria-accent);
  box-shadow:0 0 14px var(--asteria-glow-strong);
}
.theme-settings-section input[type="range"] { accent-color:var(--asteria-accent); }

@media (max-width:900px) {
  body::before {
    -webkit-mask-size:100vw auto;
    mask-size:100vw auto;
  }
  .theme-colour-row { grid-template-columns:1fr; }
}


/* ==================================================
   Asteria UI Theme Systems — Background Fit Fix
   Prevents the D20 / spell-circle image from being cropped
   badly on narrow/mobile screens.
================================================== */

:root {
  --asteria-bg-size-desktop: cover;
  --asteria-overlay-size-desktop: cover;
  --asteria-bg-position: center top;
}

/* Desktop/tablet keeps cinematic cover behaviour */
body {
  background-position: var(--asteria-bg-position), var(--asteria-bg-position), center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}

/* Keep SVG overlay centered and scalable */
body::before {
  -webkit-mask-position:center top !important;
  mask-position:center top !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
}

/* Mobile / narrow screens:
   Use contain-like sizing so the image is not cut off.
*/
@media (max-width: 900px) {
  body {
    background-size:
      auto,
      100vw auto,
      cover !important;
    background-position:
      center top,
      center top,
      center center !important;
    background-repeat:
      no-repeat,
      no-repeat,
      no-repeat !important;
  }

  body::before {
    -webkit-mask-size:100vw auto !important;
    mask-size:100vw auto !important;
    -webkit-mask-position:center top !important;
    mask-position:center top !important;
  }
}

/* Very tall mobile screens:
   Add a dark continuation layer after the fitted image,
   so the bottom of the page does not look empty.
*/
@media (max-width: 900px) and (min-height: 760px) {
  body::after {
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.06) 0%,
        rgba(0,0,0,.18) 32%,
        rgba(0,0,0,.48) 72%,
        rgba(0,0,0,.66) 100%),
      radial-gradient(circle at 50% 18%, rgba(var(--asteria-accent-rgb), .10), transparent 34%) !important;
  }
}

/* Wide screens can keep the original full cinematic fill. */
@media (min-width: 901px) {
  body {
    background-size:
      auto,
      cover,
      cover !important;
  }

  body::before {
    -webkit-mask-size:cover !important;
    mask-size:cover !important;
  }
}