:root {
  color-scheme: dark;
  font-family: Arial, "Microsoft JhengHei", sans-serif;
  background: #080706;
  color: #f5e8c7;
}

* { box-sizing: border-box; }
/* 根节点控制浏览器边界手势；保留弹窗的纵向滚动和页面缩放。 */
html, body { overscroll-behavior: none; touch-action: pan-y pinch-zoom; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #292019 0%, #100e0c 45%, #060606 80%); }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid #ffe398; outline-offset: -3px; }
[hidden] { display: none !important; }

/* 以 540 × 960 的竖屏比例排版；所有尺寸跟随画面宽度。 */
.battle {
  width: min(100vw, 56.25svh, 540px);
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  background: #17110b;
  box-shadow: 0 0 0 1px #554634, 0 20px 100px #000;
  user-select: none;
  -webkit-user-select: none;
}

.battle > :not(dialog) { touch-action: none; }
.game-dialog { overscroll-behavior: contain; }

.battle-hud { height: 8.15cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 2.1cqw; position: relative; z-index: 2; background: linear-gradient(#342f23, #17130e 48%, #252015); border-bottom: 1px solid #8b7751; box-shadow: 0 2px 5px #000; }
.loot { display: flex; gap: 5cqw; }
.loot-item { display: flex; gap: 1.7cqw; align-items: center; }
.loot-item b { font-family: Georgia, serif; font-size: 3.7cqw; color: #fff3ca; text-shadow: 1px 2px #000; font-weight: 500; }
.chest-icon { width: 4.8cqw; height: 3.9cqw; border: 1px solid #dfc278; background: linear-gradient(#d5aa50 0 25%, #5b3419 26% 52%, #c09643 53% 62%, #754b20 63%); border-radius: 1cqw 1cqw .3cqw .3cqw; box-shadow: inset 0 0 0 1px #37291a, 0 1px 3px #000; position: relative; transform: rotate(-8deg); }
.chest-icon::after { content: ""; position: absolute; left: 40%; top: 35%; width: 22%; height: 43%; background: #e8c878; border: 1px solid #563f20; }
.coin-icon { display: grid; place-items: center; width: 4.1cqw; height: 4.1cqw; border-radius: 50%; border: 2px ridge #efcf6d; background: #b18430; color: #ffe99b; font: bold 3.2cqw Georgia, serif; box-shadow: inset 0 0 0 1px #65451e, 1px 1px 3px #000; }
.menu-button { width: 15.5cqw; height: 5.8cqw; border: 1px solid #95825b; border-radius: .6cqw; background: linear-gradient(#5f5642, #29251d 48%, #17140f 50%, #423827); color: #f4e8c9; font: bold 3cqw Georgia, serif; text-shadow: 0 1px #000; box-shadow: inset 0 0 0 1px #16120d; }

.battle-scene { height: 62.96cqw; position: relative; overflow: hidden; background: #141713; }
.dungeon { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 37%, #32403488, transparent 44%), linear-gradient(90deg, #111512, #29312a 18%, #101a17 43%, #101a17 57%, #29312a 82%, #111512); }
.dungeon::before, .dungeon::after { content: ""; position: absolute; width: 26%; height: 90%; top: -6%; background: repeating-linear-gradient(0deg, #0009 0 2px, transparent 2px 11cqw), repeating-linear-gradient(90deg, #32382b 0 12cqw, #171e1799 12cqw 12.6cqw, #292f24 12.6cqw 24cqw); border: 2cqw ridge #3a3b2c; box-shadow: 0 0 12cqw #000; }
.dungeon::before { left: -9%; transform: skewY(15deg); }
.dungeon::after { right: -9%; transform: skewY(-15deg); }
.dungeon-arch { position: absolute; width: 49%; height: 89%; left: 25.5%; top: -10%; border: 5cqw solid #353b2c; border-bottom: 0; border-radius: 45% 45% 0 0; background: radial-gradient(ellipse at 50% 100%, #3e57443b, #030c0bbb 65%); box-shadow: 0 0 0 1cqw #0d130f, 0 0 0 1.5cqw #4b4937, inset 0 0 6cqw #000; }
.dungeon-floor { position: absolute; bottom: -35%; width: 150%; left: -25%; height: 70%; background: repeating-linear-gradient(0deg, #111b18 0 2px, transparent 2px 12cqw), repeating-linear-gradient(90deg, #28372e 0 15cqw, #141f18 15cqw 15.5cqw, #313e30 15.5cqw 30cqw); transform: perspective(35cqw) rotateX(43deg); box-shadow: 0 -5cqw 10cqw #142219; }
.dungeon-fog { position: absolute; inset: 0; background: linear-gradient(transparent 55%, #101f1a66 78%, #060c09 100%); }
.torch { position: absolute; top: 22%; width: 1.8cqw; height: 9cqw; background: linear-gradient(90deg, #171c16, #817959, #171c16); z-index: 1; transform: rotate(-8deg); }
.torch-left { left: 19%; }
.torch-right { right: 19%; transform: rotate(8deg); }
.torch::after { content: ""; position: absolute; width: 3.8cqw; height: 5.5cqw; left: -1cqw; top: -3.4cqw; background: radial-gradient(ellipse at 50% 80%, #fff6c6, #edbe59 38%, #a8641a99 67%, transparent 72%); border-radius: 70% 30% 60% 40%; box-shadow: 0 0 5cqw 1cqw #e8a33177, 0 0 14cqw 5cqw #ac842226; animation: flicker 2s ease-in-out infinite alternate; }
.wave-title { position: absolute; top: 3cqw; left: 0; right: 0; text-align: center; font: 3.7cqw Georgia, serif; color: #dfca9a; text-shadow: 0 2px 3px #000, 0 0 8px #000; letter-spacing: .25cqw; }
.wave-title b { font-size: 5cqw; margin-left: .8cqw; }
.wave-title em { font-style: normal; font-size: 3.3cqw; margin-left: .8cqw; color: #a99a7d; }
.enemies { position: absolute; inset: 14% 1% 7%; display: flex; align-items: end; }
.enemy { width: 50%; height: 100%; position: relative; transition: opacity calc(400ms / var(--battle-animation-speed, 1)); }
.enemy-art { position: absolute; width: 111%; height: 87%; left: -5.5%; bottom: 3%; object-fit: contain; filter: drop-shadow(0 3cqw 1.8cqw #0009); animation: enemy-breathe 4s ease-in-out infinite; }
.enemy-dark .enemy-art { width: 124%; left: -16%; height: 80%; animation-delay: -2s; }
.enemy-shadow { position: absolute; bottom: 0; left: 15%; width: 70%; height: 7%; border-radius: 50%; background: #000a; filter: blur(1cqw); }
.enemy-cooldown { position: absolute; top: 1%; left: 40%; z-index: 1; font: italic bold 5.6cqw Georgia, serif; color: #fae868; text-shadow: 2px 2px #000, -1px -1px #4a3116; }
.enemy-cooldown small { font-size: 3.6cqw; color: #fff5c3; }
.enemy-cooldown b { color: #ffca3b; }
.enemy-health { position: absolute; width: 61%; height: 1.6cqw; bottom: 1%; left: 19.5%; background: #120d09; border: 1px solid #bc9f64; box-shadow: 0 1px 3px #000; overflow: hidden; }
.enemy-health span { display: block; height: 100%; width: 100%; background: linear-gradient(#ffd556, #d8390b 45%, #8f2008); transition: width calc(400ms / var(--battle-animation-speed, 1)); }
.enemy-dark .enemy-health span { background: linear-gradient(#e4a5ff, #a42de4 45%, #54256e); }
.enemy-damage { position: absolute; top: 44%; left: 0; right: 0; text-align: center; z-index: 2; font: italic bold 5cqw Georgia, serif; color: #ffffbf; text-shadow: 2px 2px #3c1608, -1px -1px #3c1608; }
.enemy.hit .enemy-art { animation: enemy-hit calc(350ms / var(--battle-animation-speed, 1)); }
.enemy.defeated { opacity: 0; pointer-events: none; }
.turn-message { position: absolute; top: 25%; left: 4%; width: 92%; z-index: 4; text-align: center; font: bold 4.3cqw Georgia, "Microsoft JhengHei", serif; color: #fff0b6; text-shadow: 0 2px 4px #000; pointer-events: none; }

.team { height: 16.67cqw; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; z-index: 3; background: #0f0e0b; box-shadow: 0 -1px #7b6744; }
.team-member { position: relative; width: 100%; aspect-ratio: 1; border: 0; padding: 0; background: #14110c; color: #fff; overflow: hidden; }
.portrait, .attribute-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.portrait { padding: 2.5%; }
.attribute-frame { z-index: 1; }
.team-member.ready::after { content: ""; position: absolute; inset: 1px; z-index: 2; border: 1px solid #fff0a599; box-shadow: inset 0 0 1.8cqw #ffcc6877; animation: skill-glow 2s ease-in-out infinite alternate; pointer-events: none; }
.team-member small { position: absolute; right: 1.2cqw; bottom: 1cqw; z-index: 3; font: bold 2.6cqw Georgia, serif; text-shadow: 1px 1px 2px #000, -1px -1px #000; }
.team-member .team-label { left: 1cqw; right: auto; font-size: 2.1cqw; color: #f9e3a9; }
.team-member.on-cooldown .portrait { filter: brightness(.7); }

.player-health { height: 6.66cqw; position: relative; display: flex; align-items: center; background: linear-gradient(#100d0d, #392027 45%, #1a1213); border-top: 1px solid #a69070; border-bottom: 1px solid #98784c; z-index: 3; }
.health-heart { position: absolute; left: .8cqw; z-index: 2; color: #ffadd4; font-size: 6.2cqw; line-height: 1; text-shadow: 1px 1px #693453, -1px -1px #ffe7f5; }
.health-track { position: absolute; left: 6.8cqw; right: 1.1cqw; height: 3.4cqw; background: #100c0d; border: 1px solid #bd8d98; transform: skewX(-14deg); overflow: hidden; }
.health-fill { height: 100%; width: 100%; background: linear-gradient(#ffe1f0, #df73b1 25%, #c65799 50%, #ed96c9 70%, #a4467b); box-shadow: 0 0 1.5cqw #e87aad; transition: width calc(400ms / var(--battle-animation-speed, 1)) linear; }
.player-health b { position: absolute; right: 2cqw; z-index: 2; color: #fff5fb; font: italic bold 3.8cqw Georgia, serif; letter-spacing: .15cqw; text-shadow: 1px 2px #351322, -1px -1px #351322; }
.healing-number { position: absolute; top: -5.4cqw; right: 3cqw; color: #9bff67; font: italic bold 5cqw Georgia, serif; text-shadow: 1px 1px #143509; }

/* 底图顶部有 28px 的装饰空白；裁掉它，让原图方格对齐 6×5 的棋盘。 */
.board-shell { height: 83.34cqw; position: relative; background: #39271a url("/Xiaomai/showcase/3e827dee/Assets/%E6%88%98%E6%96%97%E8%B5%84%E6%BA%90/gameplay_background__t512_rgb4.png?__showcase_v=5") center -5.47cqw / 100% auto no-repeat; }
.rune-board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); touch-action: none; overflow: hidden; }
.rune { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: transparent; aspect-ratio: 1; cursor: grab; }
.rune img { width: 96%; height: 96%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 .7cqw .6cqw #0006); }
.rune.selected { background: #ffd26c22; box-shadow: inset 0 0 0 1.5px #fff1a8, inset 0 0 4cqw #fcce7866; }
.rune.selected img { opacity: .28; }
.rune.matched img { animation: rune-clear calc(260ms / var(--battle-animation-speed, 1)) forwards; }
.rune.falling img { animation: rune-fall var(--fall-duration, calc(360ms / var(--battle-animation-speed, 1))) cubic-bezier(.4, 0, .75, .8) both; }
.held-rune { position: absolute; width: 16cqw; height: 16cqw; z-index: 10; pointer-events: none; opacity: .94; transform: translate(-50%, -54%) scale(1.09); filter: drop-shadow(0 0 8px #ffffbbaa); }
.move-timer { position: absolute; left: 0; right: 0; top: 0; height: 1cqw; background: #040603aa; z-index: 5; pointer-events: none; }
.move-timer span { display: block; height: 100%; background: linear-gradient(90deg, #9eeb35, #e6fa96); box-shadow: 0 0 1.3cqw #d8ff52; }
.combo-display { position: absolute; right: 2.8cqw; bottom: 5cqw; z-index: 5; pointer-events: none; filter: drop-shadow(1px 2px 2px #251709); transform: rotate(-6deg); }
.combo-line { display: flex; height: 8.5cqw; align-items: end; }
.combo-line img { height: 100%; width: auto; margin-left: -.5cqw; object-fit: contain; }
.combo-line .combo-digit { height: 12cqw; margin-right: .8cqw; }
.combo-bonus { text-align: right; margin-right: 1cqw; color: #fff1b2; font: italic bold 5cqw Georgia, serif; text-shadow: 1px 1px #44270c; }

.game-dialog { width: min(86vw, 440px); padding: 24px; border: 2px solid #9e865c; border-radius: 3px; color: #eddfc1; background: linear-gradient(135deg, #332b21, #171510 70%); box-shadow: inset 0 0 0 3px #211b13, 0 15px 70px #000; }
.game-dialog::backdrop { background: #000b; }
.game-dialog h1 { font: 22px Georgia, "Microsoft JhengHei", serif; color: #ffe4a9; margin: 0; text-align: center; }
.game-dialog h2 { font-size: 18px; color: #ffe4a9; margin: 20px 0 12px; }
.game-dialog p { font-size: 14px; line-height: 1.8; }
.dialog-tip { color: #bdb094; }
.dialog-rule { height: 1px; background: linear-gradient(90deg, transparent, #b49a62, transparent); margin: 18px 0; }
.dialog-button { display: block; width: 100%; padding: 11px; margin-top: 12px; border: 1px solid #736546; border-radius: 2px; background: linear-gradient(#423a2c, #242019); color: #e8d9b6; }
.dialog-button.primary { border-color: #b39456; background: linear-gradient(#837047, #463922); color: #fff2cc; }
.dialog-button:disabled { opacity: .45; cursor: default; }
.skill-heading { display: flex; gap: 14px; align-items: center; }
.skill-heading img { width: 68px; height: 68px; border: 1px solid #9b8154; }
.skill-heading h1 { text-align: left; font-size: 18px; margin-top: 6px; }
.skill-heading small, .skill-cooldown { color: #baa776; }

@keyframes enemy-breathe { 50% { transform: translateY(-.7cqw); } }
@keyframes flicker { to { opacity: .7; transform: scale(.9, 1.1); } }
@keyframes skill-glow { to { opacity: .4; } }
@keyframes enemy-hit { 25% { transform: translateX(-1.2cqw); filter: brightness(2); } 65% { transform: translateX(1.2cqw); } }
@keyframes rune-clear { 45% { filter: brightness(2.8); transform: scale(1.1); } 100% { opacity: 0; transform: scale(.2); } }
@keyframes rune-fall { from { transform: translateY(var(--fall-distance)); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* 属性攻击数字跟随头像保留，整轮天降结束后才乘 Combo。 */
.sprite-number { display: inline-flex; justify-content: center; align-items: center; gap: 0; height: var(--digit-height, 5.4cqw); white-space: nowrap; filter: drop-shadow(0 .35cqw .2cqw #000c); }
.sprite-number img { display: block; height: 100%; width: auto; min-width: 0; object-fit: contain; pointer-events: none; }
.member-attack { position: absolute; left: 0; right: 0; bottom: 1.5cqw; z-index: 5; --digit-height: min(3.5cqw, calc(19cqw / var(--digits, 4))); background: linear-gradient(transparent, #000c 35%, #000b 80%, transparent); padding: .4cqw .2cqw; height: 4.4cqw; }
.team-member.charged .portrait { filter: brightness(.8); }
.team-member.charged::before, .team-member.attacking::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border: .45cqw solid var(--attribute-color); box-shadow: inset 0 0 3cqw var(--attribute-color); background: linear-gradient(transparent 40%, color-mix(in srgb, var(--attribute-color) 30%, transparent)); }
.team-member.attacking::before { animation: attack-charge calc(350ms / var(--battle-animation-speed, 1)) ease-in-out infinite alternate; }
.team-member.spent .member-attack { opacity: .28; }
.team-member.charged .team-label, .team-member.attacking .team-label, .team-member.spent .team-label { opacity: 0; }
.healing-number.sprite-number { --digit-height: 4.5cqw; top: 0; right: 2cqw; z-index: 6; background: #20111dcc; padding: .6cqw; height: 5.8cqw; }
.healing-number:empty { display: none; }

/* 整个战斗画面共用一个无交互效果层，弧线可以跨越棋盘、血条和队伍。 */
.battle-effects { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
.battle-effects > span { position: absolute; pointer-events: none; }
.attribute-aura { width: 3.8cqw; height: 3.8cqw; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #fff 0 12%, var(--attribute-color) 30%, transparent 70%); box-shadow: 0 0 1.1cqw .5cqw var(--attribute-color), 0 0 4cqw var(--attribute-color); mix-blend-mode: screen; }
.attribute-aura::after { content: ""; position: absolute; inset: -40%; border-radius: 50%; border: .2cqw solid var(--attribute-color); opacity: .4; }
.aura-trail { width: calc(2.7cqw * var(--trail-scale)); height: calc(2.7cqw * var(--trail-scale)); filter: opacity(var(--trail-opacity)); box-shadow: 0 0 1.5cqw var(--attribute-color); }
.aura-trail::after { display: none; }
.attack-aura { width: 5cqw; height: 5cqw; }
.attack-aura.aura-trail { width: calc(3.4cqw * var(--trail-scale)); height: calc(3.4cqw * var(--trail-scale)); }
.energy-ring { width: 8cqw; height: 8cqw; border: .4cqw solid var(--attribute-color); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 2cqw var(--attribute-color), inset 0 0 2cqw var(--attribute-color); background: radial-gradient(circle, #fff8, transparent 65%); }
.impact-ring { width: 11cqw; height: 11cqw; border-width: .7cqw; }
.energy-spark { width: .75cqw; height: 1.8cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 1cqw .3cqw var(--attribute-color); }
.hit-number { --digit-height: 6cqw; transform: translate(-50%, -50%); z-index: 3; }
.attribute-relation { transform: translate(-50%, -50%); font: bold 2.5cqw "Microsoft JhengHei", sans-serif; color: var(--attribute-color); text-shadow: 0 .2cqw .5cqw #000, .2cqw .2cqw #000; white-space: nowrap; }
.incoming-damage { --digit-height: 5.4cqw; transform: translate(-50%, -50%); z-index: 3; }
.settlement-display { position: absolute; left: 0; right: 0; top: 61cqw; z-index: 16; pointer-events: none; text-align: center; padding: 1.4cqw; font: italic bold 4.5cqw Georgia, serif; color: #fff5c5; text-shadow: 0 .3cqw .3cqw #331300; background: linear-gradient(90deg, transparent, #1b0c08dd 25%, #1b0c08dd 75%, transparent); }
.combo-settled { filter: drop-shadow(0 0 1.5cqw #ffdc78); }
.combo-line { animation: combo-pop calc(200ms / var(--battle-animation-speed, 1)) ease-out; }
.enemy { cursor: crosshair; }
.enemy:focus-visible { outline: 1px solid #fff0b3; outline-offset: -1cqw; }
.enemy-attribute { position: absolute; top: 3%; left: 22%; z-index: 2; width: 4.8cqw; height: 4.8cqw; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: bold 2.8cqw "Microsoft JhengHei", sans-serif; background: #100b0ddd; box-shadow: 0 0 1cqw currentColor; }
.enemy-attribute.fire { color: #ff9b71; }
.enemy-attribute.dark { color: #e298ff; }
.target-reticle { display: none; position: absolute; top: 43%; left: 30%; width: 40%; aspect-ratio: 1; z-index: 2; border: .3cqw solid #ffe8a5; border-radius: 50%; box-shadow: 0 0 1cqw #ffdc6888; }
.target-reticle::before, .target-reticle::after { content: ""; position: absolute; background: #ffe8a5; }
.target-reticle::before { left: -20%; right: -20%; top: 49%; height: .3cqw; }
.target-reticle::after { top: -20%; bottom: -20%; left: 49%; width: .3cqw; }
.enemy.targeted .target-reticle { display: block; animation: target-pulse 1.3s ease-in-out infinite; }
/* 伤害字图在效果层播放；这里为读屏保留每次命中的完整描述。 */
.enemy-damage { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes attack-charge { to { filter: brightness(1.7); } }
@keyframes combo-pop { from { transform: scale(.78); } to { transform: scale(1); } }
@keyframes target-pulse { 50% { opacity: .5; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  .rune.matched img { opacity: 0; }
  .battle-effects .attribute-aura, .battle-effects .energy-ring, .battle-effects .energy-spark { display: none; }
}

/* 一至三只敌人共享相同命中与锁定逻辑，人数只改变站位。 */
.enemies { inset: 23% 1% 8%; justify-content: center; }
.enemies[data-count="1"] .enemy { width: 70%; }
.enemies[data-count="2"] .enemy { width: 50%; }
.enemies[data-count="3"] .enemy { width: 33.333%; }
.enemies .enemy-art { width: 118%; left: -9%; height: 88%; bottom: 7%; }
.enemies[data-count="1"] .enemy-art { width: 100%; left: 0; height: 98%; }
.enemies[data-count="3"] .enemy-art { width: 145%; left: -22.5%; height: 88%; }
.enemies .enemy-attribute { color: var(--attribute-color); top: 0; left: 17%; }
.enemies .enemy-health { bottom: 5%; width: 80%; left: 10%; }
.enemies .enemy-health span { background: linear-gradient(#fff7, var(--attribute-color) 40%, color-mix(in srgb, var(--attribute-color) 45%, #130d09)); }
.enemy-name { position: absolute; bottom: -3%; left: 1%; right: 1%; z-index: 2; font-size: 2.1cqw; text-align: center; color: #e8dcc0; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.enemies[data-count="3"] .enemy-name { font-size: 1.85cqw; }
.enemies[data-count="3"] .enemy-cooldown { left: 45%; font-size: 4.6cqw; }
.enemies[data-count="3"] .enemy-cooldown small { font-size: 2.6cqw; }
.enemy.boss .enemy-name { color: #ffd18a; font-weight: bold; }
.enemy.boss .enemy-art { filter: drop-shadow(0 0 2.4cqw color-mix(in srgb, var(--attribute-color) 65%, transparent)); }
.enemy.boss .enemy-health { height: 2cqw; border-color: #ffce7d; box-shadow: 0 0 1.5cqw #ffbe5377; }
.enemy.boss::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 5%; height: 70%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--attribute-color) 18%, transparent), transparent 70%); animation: skill-glow 2s infinite alternate; }
.boss-wave .dungeon { filter: sepia(.22) brightness(.8); }
.stage-status { position: absolute; top: 1.3cqw; left: 0; right: 0; text-align: center; font-size: 2.3cqw; letter-spacing: .3cqw; color: #b5a98b; }
.wave-title { top: 5cqw; }
.stage-progress { position: absolute; top: 12cqw; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 1.8cqw; height: 2.5cqw; }
.stage-progress span { width: 1.3cqw; height: 1.3cqw; border: 1px solid #70654c; border-radius: 50%; background: #15130d; }
.stage-progress span.complete { background: #c8a25d; border-color: #e3c880; }
.stage-progress span.current { background: #fff0b5; box-shadow: 0 0 1cqw #ffdb75; border-color: #ffdb75; }
.stage-progress .boss-step { width: auto; height: auto; border: 0; border-radius: 0; font-size: 2.1cqw; line-height: 1; background: transparent; color: #776248; }
.stage-progress .boss-step.current, .stage-progress .boss-step.complete { color: #ffd175; background: transparent; box-shadow: none; }
.encounter-banner { position: absolute; inset: 28% 0 auto; z-index: 7; padding: 5cqw 1cqw; text-align: center; pointer-events: none; background: linear-gradient(90deg, transparent, #080707ed 20%, #080707ed 80%, transparent); }
.encounter-banner b { display: block; font: bold 6cqw Georgia, serif; letter-spacing: .6cqw; color: #ffedb7; text-shadow: 0 0 2cqw #a46732; animation: encounter-reveal calc(400ms / var(--battle-animation-speed, 1)) ease-out; }
.encounter-banner small { display: block; margin-top: 1.4cqw; font-size: 2.8cqw; color: #c9b58d; }
.boss-wave .encounter-banner b { color: #ffb885; text-shadow: 0 0 2cqw #d34216; }
.loot-popup { text-align: center; white-space: pre-line; font: bold 2.9cqw Georgia, "Microsoft JhengHei", serif; color: #ffdf87; text-shadow: 0 1px 3px #000; z-index: 4; }
.stage-dialog, .result-dialog { text-align: center; max-height: 92svh; overflow-y: auto; }
.dialog-eyebrow { display: block; margin-bottom: 9px; color: #bba277; font: 11px Georgia, serif; letter-spacing: 3px; }
.stage-emblem { margin: 0 auto 16px; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid #9c7a47; transform: rotate(45deg); background: radial-gradient(#8e673233, #251c12); color: #e7bf77; font-size: 31px; box-shadow: 0 0 25px #af7e2222; }
.stage-dialog h1 { font-size: 28px; letter-spacing: 5px; }
.stage-dialog .stage-subtitle { color: #c7b58e; font-size: 12px; letter-spacing: 1px; }
.stage-dialog p { text-align: left; }
.stage-dialog .stage-subtitle { text-align: center; }
.stage-runes { display: flex; justify-content: center; gap: 6px; margin: 22px 0 12px; }
.stage-runes img { width: 12%; height: auto; object-fit: contain; }
.result-dialog.victory { border-color: #caa66c; background: radial-gradient(ellipse at 50% 0, #84643533, transparent 65%), #1e1a14; }
.result-dialog.victory h1 { color: #ffdc88; }
.result-dialog .result-description { font-size: 12px; color: #bdaf97; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #a0854922; border: 1px solid #a0854922; margin: 18px 0; }
.result-stats div { padding: 11px 8px; background: #211c15; }
.result-stats dt { font-size: 11px; color: #a99b81; }
.result-stats dd { margin: 5px 0 0; color: #f5ddaa; font: bold 20px Georgia, serif; }
.result-drops { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-height: 130px; overflow-y: auto; margin-bottom: 16px; }
.result-drops:empty { display: none; }
.result-card { width: 60px; color: #cdbb95; }
.result-card img { display: block; width: 60px; height: 60px; border: 1px solid var(--attribute-color); }
.result-card small { display: block; font-size: 9px; margin-top: 4px; }
@keyframes encounter-reveal { from { opacity: 0; transform: scale(1.12); letter-spacing: 1.7cqw; } to { opacity: 1; transform: scale(1); letter-spacing: .6cqw; } }
.team-member.on-cooldown .team-label { bottom: 4.2cqw; }