/* Optional full-scene interface theme. Classic remains the default. */
body[data-theme="liquid"] {
  --glass-bg: rgba(11, 10, 9, 0.46);
  --glass-bg-s: rgba(29, 22, 16, 0.48);
  --glass-bg-h: rgba(54, 39, 25, 0.52);
  --glass-border: rgba(227, 184, 111, 0.24);
  --glass-border-b: rgba(244, 204, 137, 0.48);
  --glass-hl: rgba(255, 241, 213, 0.13);
  --panel-vignette: rgba(0, 0, 0, 0.18);
}

body[data-theme="liquid"] .bg-s {
  background-color: #070605;
  background-image:
    linear-gradient(180deg, rgba(4, 4, 4, 0.42), rgba(4, 4, 4, 0.58)),
    var(--game-scene-image, linear-gradient(180deg, #15110d, #060606));
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  transition: background-image 220ms ease;
}

body[data-theme="liquid"] .bg-s::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--game-scene-image, linear-gradient(180deg, #15110d, #060606));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: saturate(0.92) contrast(1.03) brightness(0.86);
  transition: background-image 220ms ease, filter 220ms ease;
}

body[data-theme="liquid"] .bg-s::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 72% 58% at 50% 42%, transparent 30%, rgba(0, 0, 0, 0.14) 100%),
    linear-gradient(180deg, rgba(238, 192, 112, 0.025), transparent 24%, rgba(0, 0, 0, 0.08));
}

body[data-theme="liquid"] .blob {
  display: none;
}

body[data-theme="liquid"] :is(#topbar, #leftnav, #main, #log, #chat, #hotbar) {
  background:
    linear-gradient(145deg, rgba(255, 237, 203, 0.09), transparent 26%),
    linear-gradient(180deg, rgba(23, 18, 14, 0.5), rgba(5, 5, 5, 0.42));
  border-color: rgba(231, 185, 111, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 216, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 18px 44px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px) saturate(122%);
  -webkit-backdrop-filter: blur(18px) saturate(122%);
}

body[data-theme="liquid"] .glass::before {
  border-color: rgba(244, 205, 139, 0.12);
}

body[data-theme="liquid"] .glass::after {
  opacity: 0.48;
}

body[data-theme="liquid"] #main {
  background:
    linear-gradient(145deg, rgba(255, 237, 203, 0.065), transparent 25%),
    linear-gradient(180deg, rgba(17, 13, 10, 0.26), rgba(3, 3, 3, 0.2));
  backdrop-filter: blur(8px) saturate(112%);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
}

body[data-theme="liquid"] #main:has(> .scr.active[data-s="location"]) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-theme="liquid"] #main .scr,
body[data-theme="liquid"] #main .scr.active,
body[data-theme="liquid"] :is(.uni, .map-screen, .quest-screen, .craft-screen, .skills-screen, .guild-screen, .auction-screen, .ps-screen) {
  background-color: transparent;
  background-image: none;
}

body[data-theme="liquid"] .lbg {
  opacity: 0 !important;
}

body[data-theme="liquid"] .lov {
  background:
    linear-gradient(180deg, rgba(4, 4, 4, 0.1), transparent 28%, transparent 58%, rgba(4, 4, 4, 0.44)),
    radial-gradient(ellipse 74% 62% at 50% 48%, transparent 48%, rgba(0, 0, 0, 0.2));
}

body[data-theme="liquid"] :is(.log-body, .chbd, .inv-work, .presence-list, .skills-body, .recipe-list, .craft-detail, .ps-grid) {
  background:
    linear-gradient(180deg, rgba(255, 235, 196, 0.028), transparent 22%),
    rgba(2, 2, 2, 0.12);
}

body[data-theme="liquid"] :is(
  .npc-box,
  .qty-box,
  .char-box,
  .reg-box,
  .ctx,
  .tt,
  .chat-channel-menu,
  .chst,
  .settings-section,
  .settings-oauth-card,
  .loc-char-panel,
  .presence-panel,
  .party-panel,
  .quest-tracker,
  .drop-panel,
  .cpanel
) {
  background:
    linear-gradient(145deg, rgba(255, 239, 207, 0.07), transparent 28%),
    linear-gradient(180deg, rgba(21, 17, 14, 0.64), rgba(5, 5, 5, 0.56));
  border-color: rgba(234, 188, 113, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 218, 0.11),
    0 18px 46px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
}

body[data-theme="liquid"] :is(
  .quest-list,
  .quest-detail,
  .quest-step,
  .sphere-craft,
  .enchant-picker,
  .enchant-param,
  .wh-card,
  .wh-grid,
  .guild-card,
  .guild-row,
  .auction-card,
  .auction-panel,
  .ps-card,
  .shop-row,
  .shop-card,
  .recipe,
  .skill-card,
  .tree-card
) {
  background:
    linear-gradient(180deg, rgba(255, 235, 196, 0.045), rgba(0, 0, 0, 0.08)),
    rgba(8, 7, 6, 0.24);
  border-color: rgba(222, 171, 93, 0.22);
}

body[data-theme="liquid"] :is(.quest-list, .quest-detail) {
  background:
    linear-gradient(145deg, rgba(255, 239, 207, 0.045), transparent 30%),
    rgba(5, 5, 4, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 242, 215, 0.08), 0 14px 34px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(11px) saturate(112%);
  -webkit-backdrop-filter: blur(11px) saturate(112%);
}

body[data-theme="liquid"] :is(.quest-step, .quest-row, .newcomer-instructions) {
  background:
    linear-gradient(180deg, rgba(255, 235, 196, 0.035), rgba(0, 0, 0, 0.06)),
    rgba(7, 6, 5, 0.2);
  backdrop-filter: blur(7px) saturate(108%);
  -webkit-backdrop-filter: blur(7px) saturate(108%);
}

body[data-theme="liquid"] :is(.top-clock, .cur, .combat-vitals, .auto-checks, .auto-pots, .auto-timer) {
  background:
    linear-gradient(180deg, rgba(255, 237, 201, 0.07), rgba(0, 0, 0, 0.16)),
    rgba(8, 7, 6, 0.42);
  border-color: rgba(224, 175, 101, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 239, 207, 0.09), 0 10px 26px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
}

body[data-theme="liquid"] :is(.nb, .dbtn, .ab, .qt, .clock-icon-btn, .chat-tab, .log-tab, .inv-tab, .loc-nav-btn) {
  background:
    linear-gradient(180deg, rgba(255, 234, 191, 0.065), rgba(0, 0, 0, 0.14)),
    rgba(10, 8, 7, 0.38);
}

body[data-theme="liquid"] :is(.nb, .dbtn, .ab, .qt, .clock-icon-btn, .chat-tab, .log-tab, .inv-tab, .loc-nav-btn):hover,
body[data-theme="liquid"] :is(.nb, .ab, .chat-tab, .log-tab, .inv-tab).active {
  background:
    linear-gradient(180deg, rgba(238, 193, 117, 0.16), rgba(0, 0, 0, 0.1)),
    rgba(32, 23, 16, 0.48);
}

body[data-theme="liquid"] .loc-nav {
  background: linear-gradient(180deg, rgba(7, 7, 7, 0.22), rgba(4, 4, 4, 0.5));
  backdrop-filter: blur(14px) saturate(116%);
  -webkit-backdrop-filter: blur(14px) saturate(116%);
}

body[data-theme="liquid"] .npc-dlg,
body[data-theme="liquid"] .qty-dlg,
body[data-theme="liquid"] .char-modal,
body[data-theme="liquid"] .reg-modal {
  background: rgba(2, 2, 2, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-swatch.liquid {
  background:
    linear-gradient(145deg, rgba(255, 244, 220, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(32, 26, 21, 0.58), rgba(6, 7, 8, 0.5)),
    url('/assets/backgrounds/locations/border_fields.webp') center/cover no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="liquid"] .bg-s {
    transition: none;
  }
}