/* Battle scene */
body.theme-ashen .battle-panel {
  background:
    linear-gradient(180deg, rgba(14, 17, 16, .70), rgba(8, 11, 10, .94) 77%),
    url("../../assets/art/battle-forest.svg") 50% 78px / 100% 255px no-repeat,
    linear-gradient(180deg, #171a18, #090b0a);
}

body.theme-ashen.ruins-active .battle-panel {
  border-color: rgba(77, 122, 113, .82);
  background:
    linear-gradient(180deg, rgba(8, 14, 14, .63), rgba(5, 9, 9, .94) 77%),
    url("../../assets/art/battle-ruins.svg") 50% 76px / 100% 260px no-repeat,
    linear-gradient(180deg, #111918, #070a0a);
  box-shadow:
    inset 0 0 55px rgba(62, 143, 129, .10),
    0 20px 55px rgba(0, 0, 0, .5);
}

body.theme-ashen .battle-stage {
  position: relative;
  padding: 9px;
  border: 1px solid rgba(76, 73, 62, .48);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(7, 10, 9, .25), rgba(5, 7, 7, .68));
  box-shadow: inset 0 -28px 45px rgba(0, 0, 0, .32);
}

body.theme-ashen .battle-stage::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 12px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .58), transparent 70%);
  pointer-events: none;
}

body.theme-ashen .combatant {
  min-height: 178px;
  border-color: rgba(73, 72, 63, .66);
  background:
    linear-gradient(180deg, rgba(28, 31, 28, .66), rgba(9, 12, 11, .78));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .025),
    inset 0 -18px 30px rgba(0, 0, 0, .18);
  backdrop-filter: blur(1.5px);
}

body.theme-ashen .combatant::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 51%, rgba(183, 154, 98, .07), transparent 42%);
}

body.theme-ashen .combatant-name {
  position: relative;
  z-index: 2;
  margin-bottom: 2px;
  color: #e5decd;
  font-size: 17px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .85);
}

body.theme-ashen .enemy-role {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin: 2px auto 0;
  padding: 2px 8px;
  border: 1px solid rgba(94, 91, 77, .55);
  border-radius: 999px;
  color: #a5aaa3;
  background: rgba(5, 8, 8, .57);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.theme-ashen .figure {
  position: relative;
  z-index: 1;
  height: 88px;
  margin: 0 0 6px;
  border: 0;
  color: transparent;
  font-size: 0;
  letter-spacing: 0;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .52));
}

body.theme-ashen .figure::before {
  content: none;
}

body.theme-ashen .figure::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 1px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  filter: blur(3px);
  z-index: -1;
}

body.theme-ashen .hero-figure {
  background-image: url("../../assets/art/hero-silhouette.svg");
}

body.theme-ashen .enemy-figure[data-art="wolf"] {
  background-image: url("../../assets/art/wolf-silhouette.svg");
}

body.theme-ashen .enemy-figure[data-art="boar"] {
  background-image: url("../../assets/art/boar-silhouette.svg");
}

body.theme-ashen .enemy-figure[data-art="bandit"] {
  background-image: url("../../assets/art/bandit-silhouette.svg");
}

body.theme-ashen .enemy-figure[data-art="construct"] {
  background-image: url("../../assets/art/construct-silhouette.svg");
}

body.theme-ashen .enemy-figure[data-art="carrier"] {
  background-image: url("../../assets/art/carrier-silhouette.svg");
}

body.theme-ashen .enemy-figure[data-art="boss"],
body.theme-ashen .enemy-figure[data-art="unknown"] {
  background-image: url("../../assets/art/boss-silhouette.svg");
}

body.theme-ashen .enemy-elite .figure {
  filter: drop-shadow(0 0 10px rgba(91, 164, 104, .30)) drop-shadow(0 8px 8px rgba(0, 0, 0, .55));
}

body.theme-ashen .enemy-rare .figure {
  filter: drop-shadow(0 0 13px rgba(83, 156, 195, .44)) drop-shadow(0 8px 8px rgba(0, 0, 0, .55));
}

body.theme-ashen .enemy-boss .figure {
  filter: drop-shadow(0 0 14px rgba(190, 89, 61, .46)) drop-shadow(0 9px 10px rgba(0, 0, 0, .62));
}

body.theme-ashen .enemy-normal,
body.theme-ashen .enemy-elite,
body.theme-ashen .enemy-rare,
body.theme-ashen .enemy-boss {
  border-left-width: 1px;
}

body.theme-ashen .enemy-elite {
  border-color: rgba(82, 126, 84, .75);
  background: linear-gradient(180deg, rgba(26, 40, 28, .64), rgba(8, 13, 9, .8));
}

body.theme-ashen .enemy-rare {
  border-color: rgba(65, 132, 168, .78);
  background: linear-gradient(180deg, rgba(19, 39, 51, .65), rgba(7, 12, 15, .82));
}

body.theme-ashen .enemy-boss {
  border-color: rgba(157, 77, 55, .82);
  background: linear-gradient(180deg, rgba(54, 25, 19, .70), rgba(15, 8, 7, .84));
}

body.theme-ashen .versus {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: auto;
  border: 1px solid rgba(116, 95, 58, .6);
  border-radius: 50%;
  color: transparent;
  background: rgba(8, 10, 9, .78) url("../../assets/art/rune-mark.svg") center / 29px no-repeat;
  box-shadow: 0 0 18px rgba(98, 180, 163, .08);
  font-size: 0;
}

body.theme-ashen .combat-bar {
  position: relative;
  z-index: 2;
  height: 9px;
  padding: 1px;
  border: 1px solid #3c3730;
  background: #080a09;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .85);
}

body.theme-ashen .combat-bar .health,
body.theme-ashen .bar .health {
  background: linear-gradient(90deg, #6e2925, #a84437 68%, #c05c48);
  box-shadow: 0 0 8px rgba(174, 68, 54, .25);
}

body.theme-ashen .bar .xp {
  background: linear-gradient(90deg, #355d59, #5b9388);
  box-shadow: 0 0 8px rgba(82, 158, 143, .18);
}

body.theme-ashen .combat-hp {
  position: relative;
  z-index: 2;
  color: #b9b8ae;
  font-variant-numeric: tabular-nums;
}

body.theme-ashen .zone-progress {
  min-height: 25px;
  margin: -2px 0 8px;
  padding: 5px 10px;
  border-top: 1px solid rgba(78, 76, 65, .42);
  border-bottom: 1px solid rgba(78, 76, 65, .42);
  color: #9ea39d;
  background: rgba(5, 7, 7, .32);
  letter-spacing: .03em;
}

body.theme-ashen .auto-battle-button.active {
  border-color: rgba(75, 142, 103, .8);
  color: #a7d5b1;
  background: linear-gradient(180deg, #213b2b, #14251b);
  box-shadow: 0 0 14px rgba(64, 143, 91, .12);
}

body.theme-ashen .special-encounter-notice,
body.theme-ashen .ruins-run-notice,
body.theme-ashen .tutorial-notice,
body.theme-ashen .enemy-intent {
  border-color: rgba(151, 101, 56, .68);
  background: linear-gradient(180deg, rgba(52, 34, 18, .92), rgba(30, 20, 13, .94));
  color: #e5bd82;
  box-shadow: inset 0 0 17px rgba(184, 100, 45, .06);
}

body.theme-ashen .damage-float {
  color: #f1e4c5;
  text-shadow: 0 0 7px #000, 0 0 14px rgba(183, 154, 98, .34);
}

body.theme-ashen .damage-float.critical {
  color: #8ee3cf;
  text-shadow: 0 0 8px #000, 0 0 19px rgba(80, 194, 169, .65);
}

/* Attack meter */
body.theme-ashen .battle-meter-panel {
  position: relative;
  border-color: rgba(92, 83, 64, .68);
  background:
    linear-gradient(180deg, rgba(22, 25, 22, .95), rgba(9, 12, 11, .98));
  box-shadow: inset 0 0 22px rgba(183, 154, 98, .035);
}

body.theme-ashen .attack-meter-heading strong {
  color: #d6c7a8;
  font-family: Georgia, serif;
}

body.theme-ashen .attack-meter {
  height: 24px;
  padding: 3px;
  border: 1px solid #5a5141;
  background: #080a09;
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .88), 0 0 0 1px rgba(0, 0, 0, .5);
}

body.theme-ashen .attack-meter-zones {
  overflow: hidden;
  border-radius: 4px;
}

body.theme-ashen .attack-zone.weak {
  background: linear-gradient(180deg, #4a2924, #2e1c19);
}

body.theme-ashen .attack-zone.normal {
  background: linear-gradient(180deg, #75633d, #4b3f2a);
}

body.theme-ashen .attack-zone.strong {
  background: linear-gradient(180deg, #477b68, #2b4f44);
}

body.theme-ashen .attack-zone.critical {
  background: linear-gradient(180deg, #75c3ae, #397665);
  box-shadow: inset 0 0 12px rgba(158, 245, 222, .17);
}

body.theme-ashen .attack-meter-marker {
  width: 5px;
  top: -4px;
  bottom: -4px;
  border-radius: 3px;
  background: #f2ddaa;
  box-shadow: 0 0 4px #000, 0 0 12px rgba(233, 210, 151, .78);
}

body.theme-ashen .attack-meter-labels span {
  color: #7d837f;
}

body.theme-ashen .attack-meter-labels b {
  color: #b7b5aa;
}

body.theme-ashen .battle-action-dock {
  border-color: rgba(82, 78, 66, .8);
  background: rgba(7, 10, 9, .93);
  box-shadow: 0 -14px 32px rgba(0, 0, 0, .35), inset 0 1px rgba(183, 154, 98, .05);
  backdrop-filter: blur(12px);
}

/* Map */
body.theme-ashen .map-list {
  gap: 10px;
}

body.theme-ashen .map-card {
  position: relative;
  min-height: 76px;
  overflow: hidden;
  padding: 14px 16px 14px 72px;
  border-color: rgba(74, 72, 62, .72);
  color: #d2d0c6;
  background:
    linear-gradient(105deg, rgba(30, 32, 28, .94), rgba(13, 16, 15, .98));
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 8px 18px rgba(0, 0, 0, .18);
}

body.theme-ashen .map-card::before {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(112, 96, 71, .52);
  border-radius: 50%;
  color: #b9a36f;
  background: rgba(6, 9, 8, .7);
  font-family: Georgia, serif;
  font-size: 25px;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .76);
}

body.theme-ashen .map-card[data-zone="easy"]::before {
  content: "♠";
  transform: translateY(-50%) rotate(180deg);
}

body.theme-ashen .map-card[data-zone="medium"]::before {
  content: "♜";
}

body.theme-ashen .map-card[data-zone="hard"]::before {
  content: "◆";
  color: #8eb3a8;
}

body.theme-ashen .ruins-map-card::before {
  content: "⌾";
  color: var(--ash-rune);
  border-color: rgba(98, 180, 163, .52);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, .76), 0 0 14px rgba(98, 180, 163, .12);
}

body.theme-ashen .map-card::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -45px;
  width: 125px;
  height: 125px;
  border: 1px solid rgba(183, 154, 98, .06);
  border-radius: 50%;
  box-shadow: inset 0 0 0 13px rgba(183, 154, 98, .02), inset 0 0 0 28px rgba(183, 154, 98, .015);
}

body.theme-ashen .map-card.active {
  border-color: #8f744a;
  color: #f0e4c9;
  background: linear-gradient(105deg, rgba(57, 47, 30, .92), rgba(18, 21, 18, .98));
  box-shadow: inset 3px 0 #b4985e, 0 8px 22px rgba(0, 0, 0, .28);
}

body.theme-ashen .map-card strong {
  font-family: Georgia, serif;
  font-size: 17px;
  letter-spacing: .01em;
}

body.theme-ashen .map-card small {
  color: #8f9690;
}

body.theme-ashen .ruins-map-card {
  border-color: rgba(68, 109, 101, .75);
  background: linear-gradient(105deg, rgba(19, 42, 38, .72), rgba(9, 15, 14, .98));
}

body.theme-ashen .ruins-map-card strong {
  color: #a9cec4;
}

/* Ruins */
body.theme-ashen .ruins-screen-panel {
  border-color: rgba(74, 112, 105, .76);
  background:
    linear-gradient(180deg, rgba(12, 27, 25, .86), rgba(7, 12, 12, .97) 55%),
    url("../../assets/art/battle-ruins.svg") center top / 100% 260px no-repeat;
  box-shadow: inset 0 0 45px rgba(66, 151, 136, .08), 0 20px 50px rgba(0, 0, 0, .48);
}

body.theme-ashen .ruins-intro {
  padding: 11px 12px;
  border: 1px solid rgba(75, 111, 104, .46);
  border-radius: 8px;
  color: #aebbb6;
  background: rgba(5, 11, 10, .62);
}

body.theme-ashen .ruins-floor-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(67, 91, 85, .68);
  background:
    linear-gradient(105deg, rgba(19, 32, 29, .94), rgba(8, 13, 12, .97));
  box-shadow: inset 0 1px rgba(141, 225, 208, .025), 0 8px 20px rgba(0, 0, 0, .22);
}

body.theme-ashen .ruins-floor-card::before {
  content: "";
  position: absolute;
  right: -36px;
  top: -36px;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(98, 180, 163, .10);
  border-radius: 50%;
  box-shadow: inset 0 0 0 12px rgba(98, 180, 163, .025), inset 0 0 0 28px rgba(98, 180, 163, .018);
}

body.theme-ashen .ruins-floor-card.available {
  border-color: rgba(98, 180, 163, .65);
  box-shadow: inset 3px 0 rgba(98, 180, 163, .68), 0 8px 22px rgba(0, 0, 0, .26);
}

body.theme-ashen .ruins-floor-title {
  color: #d6e3de;
}

body.theme-ashen .ruins-floor-status {
  color: #77c7b7;
}

body.theme-ashen .ruins-event-card,
body.theme-ashen .ruins-result {
  border-color: rgba(85, 131, 122, .72);
  background: linear-gradient(180deg, #172521, #0a1110);
  box-shadow: inset 0 0 35px rgba(89, 181, 163, .07), 0 25px 80px #000;
}