:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  color: #e8e4d8;
  background: #111513;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .48; cursor: not-allowed; }
.hidden { display: none !important; }
.eyebrow { margin: 0; color: #c8a66c; font-size: 10px; letter-spacing: .2em; font-weight: 700; }
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, 480px); background: #141917; }
.auth-art { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #29332d 0, #171f1b 37%, #101412 80%); border-right: 1px solid #303a33; position: relative; overflow: hidden; }
.auth-art:before, .auth-art:after { content: ""; position: absolute; width: 65%; height: 65%; border: 1px solid #354239; transform: rotate(45deg); }
.auth-art:after { width: 48%; height: 48%; border-color: #574b38; }
.auth-art img { position: relative; z-index: 1; width: min(30vw, 270px); filter: drop-shadow(0 12px 35px #0009); }
.auth-panel { align-self: center; padding: 55px clamp(28px, 5vw, 78px); }
.auth-panel h1 { font-family: SimSun, serif; font-size: 44px; margin: 14px 0 6px; color: #f1ead9; }
.auth-subtitle { color: #aaa99d; margin-bottom: 48px; }
.auth-switch { display: flex; border-bottom: 1px solid #3a403b; margin-bottom: 28px; gap: 28px; }
.auth-switch button { border: 0; border-bottom: 2px solid transparent; color: #929a91; background: none; padding: 12px 0; }
.auth-switch button.selected { color: #e3c388; border-color: #c69a5a; }
label { display: block; color: #b8beb6; }
#auth-form label { margin-bottom: 20px; font-size: 12px; }
input, select, textarea { width: 100%; border: 1px solid #414b43; border-radius: 3px; padding: 12px 13px; color: #f0ebdf; background: #1b231e; outline: none; }
input:focus, select:focus, textarea:focus { border-color: #c59a60; }
#auth-form input { display: block; margin-top: 9px; }
button.primary, .item-buttons button, .zone-action button { border: 1px solid #b9925c; border-radius: 3px; color: #191b16; background: #caa669; padding: 10px 18px; font-weight: 700; }
button.primary:hover:not(:disabled), .item-buttons button:hover:not(:disabled), .zone-action button:hover:not(:disabled) { background: #e0ba7b; }
.full { width: 100%; margin-top: 8px; padding: 13px !important; }
.auth-foot { font-size: 11px; color: #747d74; margin-top: 28px; }
.form-error { min-height: 22px; color: #e39a8b; font-size: 12px; }
.app { min-height: 100vh; }
.topbar { height: 68px; display: flex; align-items: center; gap: 42px; padding: 0 34px; border-bottom: 1px solid #323c34; background: #181e1a; position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 200px; }
.brand img { width: 34px; height: 39px; }
.brand strong { display: block; font-family: SimSun, serif; font-size: 19px; }
.brand small { display: block; color: #ad956e; font-size: 8px; letter-spacing: .16em; margin-top: 3px; }
.topbar nav { display: flex; height: 100%; align-items: stretch; gap: 2px; flex: 1; }
.topbar nav button { border: 0; border-bottom: 2px solid transparent; background: none; color: #a7afa6; padding: 0 19px; white-space: nowrap; }
.topbar nav button.active { color: #e4c187; border-color: #c69a5a; background: #222b24; }
.topbar nav button:hover { color: #fff0ce; }
.account { display: flex; align-items: center; gap: 17px; color: #c8cec3; }
.account button { color: #a7afa6; background: none; border: 1px solid #475147; border-radius: 3px; padding: 6px 10px; }
.announcement { display: flex; align-items: center; gap: 20px; padding: 10px 35px; color: #c8c4b5; background: #292720; border-bottom: 1px solid #4a3f30; font-size: 12px; }
.announcement span { color: #d7ad71; white-space: nowrap; }
.announcement p { margin: 0; }
.layout { max-width: 1500px; margin: auto; display: grid; grid-template-columns: 285px minmax(0, 1fr); min-height: calc(100vh - 105px); }
.sidebar { padding: 30px 22px; border-right: 1px solid #303a33; background: #171e1a; }
.character { text-align: center; }
.character .eyebrow { text-align: left; }
.avatar { width: 104px; height: 104px; margin: 24px auto 13px; display: grid; place-items: center; border: 1px solid #65533a; background: #212921; transform: rotate(45deg) scale(.75); }
.avatar img { width: 66px; transform: rotate(-45deg) scale(1.3); }
.character h2 { font-size: 19px; margin: 2px 0 6px; overflow-wrap: anywhere; }
.level-line { margin: 0 0 28px; font-size: 12px; color: #a9aea4; }
.level-line strong { color: #e5bd7c; }
.xp-label { display: flex; justify-content: space-between; color: #aaa99c; font-size: 11px; }
.meter { height: 5px; background: #343c34; margin: 8px 0 22px; }
.meter div { height: 100%; background: #bc7656; transition: width .3s; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #39443b; border-bottom: 1px solid #39443b; padding: 18px 0; row-gap: 16px; }
.stat-grid div + div { border-left: 1px solid #39443b; }
.stat-grid small { display: block; color: #969f94; font-size: 11px; margin-bottom: 6px; }
.stat-grid strong { font-size: 17px; font-weight: 600; }
.attribute-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.attribute-button { border: 1px solid #4b584a; border-radius: 3px; color: #cdb682; background: #1b241e; padding: 7px 8px; font-size: 11px; text-align: left; }
.attribute-button:hover:not(:disabled) { background: #293529; border-color: #9d7c4e; }
.attribute-button span { color: #e9dfbf; float: right; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 33px 0 14px; }
.section-heading h2, .section-heading h3 { margin: 0; font-size: 17px; font-weight: 600; }
.section-heading h3 { font-size: 13px; }
.section-heading > span { color: #858f83; font-size: 11px; }
.gear-row { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; border-bottom: 1px solid #313a33; font-size: 12px; }
.gear-row > span { color: #8e998e; min-width: 40px; }
.gear-row strong { flex: 1; font-weight: 500; text-align: right; }
.mini-button { border: 0; background: none; color: #c3aa7d; font-size: 11px; }
.offline-note { margin-top: 34px; color: #8f9c8e; font-size: 11px; line-height: 1.7; }
.offline-note strong { color: #d9bc86; }
main { min-width: 0; padding: 35px clamp(24px, 4vw, 60px) 80px; }
.chapter-head { min-height: 170px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #3a4239; background: linear-gradient(90deg, transparent, #232b2414); }
.chapter-head h1, .page-head h1 { font-family: SimSun, serif; font-size: 34px; margin: 15px 0 12px; }
.chapter-head p:last-child, .page-head p:last-child { color: #a9afa5; line-height: 1.7; }
.chapter-actions { display: flex; align-items: flex-end; gap: 18px; }
.battle-indicator { color: #c3a979; font-size: 12px; white-space: nowrap; }
.battle-indicator small { display: block; color: #929b90; margin: 10px 0 0 19px; }
.pulse { display: inline-block; width: 8px; height: 8px; background: #80ad80; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 9px #80ad80; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.map-button { min-width: 94px; border: 1px solid #b9925c; border-radius: 3px; color: #f0d49d; background: #27251e; padding: 10px 14px; font-weight: 700; }
.map-button:hover { background: #3a3327; }
.map-button small { display: block; color: #a69d8b; font-size: 10px; font-weight: normal; margin-top: 4px; }
.environment-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-height: 43px; border-bottom: 1px solid #3a4239; color: #9da89b; font-size: 11px; }
.environment-map { color: #dfbd81; font-weight: 700; }
.environment-tag { color: #c5a36f; }
.zone-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zone { min-height: 96px; display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #39443b; border-radius: 4px; background: #1b241e; }
.zone.current { border-color: #997753; background: #27281f; }
.zone.locked { opacity: .58; }
.zone-symbol { color: #c69b67; font-size: 24px; flex: none; width: 27px; text-align: center; }
.zone-copy { min-width: 0; flex: 1; }
.zone-copy strong, .zone-copy small { display: block; }
.zone-copy strong { font-size: 14px; margin-bottom: 6px; }
.zone-copy small { color: #a1a99e; font-size: 11px; line-height: 1.5; }
.zone-action { font-size: 11px; color: #d0aa70; white-space: nowrap; }
.zone-action button { font-size: 11px; padding: 6px 10px; }
.combat-board { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: stretch; gap: 14px; padding: 26px 0 16px; border-bottom: 1px solid #3a4239; }
.combat-stage { grid-column: 1 / -1; position: relative; min-height: 420px; overflow: hidden; border: 1px solid #4d594b; background: #151e1a; isolation: isolate; }
.combat-stage::before { content: ""; position: absolute; inset: 39% 0 0; z-index: -1; background: linear-gradient(180deg, #18241f 0, #1d2820 48%, #111713 100%); }
.combat-stage::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 46px; height: 1px; background: #7b704f; box-shadow: 0 0 18px #d3aa5c66; opacity: .65; }
.stage-sky { position: absolute; inset: 0 0 39%; overflow: hidden; background: linear-gradient(150deg, #1d2a28 0, #18211f 45%, #2b2623 100%); z-index: -2; }
.stage-moon { position: absolute; top: 28px; right: 11%; width: 74px; height: 74px; border: 1px solid #e5c88a; border-radius: 50%; background: #c4a96c22; box-shadow: 0 0 28px #e3bf7666; }
.stage-cloud { position: absolute; height: 1px; width: 30%; background: #98a59b38; box-shadow: 0 -7px 0 #98a59b18, 0 7px 0 #98a59b18; }
.stage-cloud-one { left: 9%; top: 44%; }
.stage-cloud-two { right: 24%; top: 24%; width: 19%; opacity: .65; }
.stage-ash { position: absolute; width: 2px; height: 2px; background: #d8c49c; box-shadow: 14px 20px #d8c49c, 42px 4px #d8c49c88, 71px 36px #d8c49c, 112px 13px #d8c49c88, 160px 43px #d8c49c; opacity: .5; animation: ash-fall 7s linear infinite; }
.stage-ash-one { left: 16%; top: 4%; }
.stage-ash-two { right: 17%; top: 10%; animation-delay: -3s; opacity: .32; }
.stage-topline { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; padding: 13px 17px; border-bottom: 1px solid #3f4b40; color: #bda671; font-size: 11px; letter-spacing: .04em; }
.stage-topline span:last-child { color: #9bad98; }
.stage-battlefield { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); min-height: 355px; padding: 49px 32px 55px; }
.stage-lane { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 12px; }
.stage-actor { width: 166px; height: 214px; display: grid; place-items: center; }
.visual-actor { --actor-accent: #b78b58; --actor-secondary: #d9d0bf; --actor-aura: #76583d; position: relative; width: 160px; height: 210px; animation: actor-idle 3.6s ease-in-out infinite; }
.visual-aura { position: absolute; inset: 28px 13px 18px; border: 1px solid color-mix(in srgb, var(--actor-aura) 80%, transparent); border-radius: 50%; box-shadow: 0 0 20px color-mix(in srgb, var(--actor-aura) 45%, transparent), inset 0 0 26px color-mix(in srgb, var(--actor-aura) 20%, transparent); opacity: .75; animation: aura-breathe 2.8s ease-in-out infinite; }
.visual-shadow { position: absolute; left: 29px; right: 29px; bottom: 12px; height: 17px; border-radius: 50%; background: #050806aa; filter: blur(2px); }
.visual-figure { position: absolute; left: 50%; bottom: 26px; width: 98px; height: 152px; transform: translateX(-50%); }
.visual-head { position: absolute; left: 34px; top: 2px; width: 31px; height: 36px; border: 2px solid var(--actor-secondary); border-radius: 48% 48% 42% 42%; background: var(--actor-accent); box-shadow: 0 0 12px var(--actor-accent); }
.visual-body { position: absolute; left: 17px; top: 37px; width: 65px; height: 85px; border: 2px solid var(--actor-secondary); border-radius: 39% 39% 15% 15%; background: var(--actor-accent); box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--actor-secondary) 18%, transparent), 0 0 15px color-mix(in srgb, var(--actor-accent) 50%, transparent); }
.body-cloth { border-radius: 46% 46% 22% 22%; }
.body-light { transform: skew(-3deg); }
.body-heavy { border-width: 4px; border-radius: 30% 30% 10% 10%; }
.visual-body::after { content: ""; position: absolute; left: 50%; top: 8px; width: 2px; height: 63px; background: var(--actor-secondary); opacity: .52; }
.visual-weapon, .visual-offhand { position: absolute; z-index: 2; display: grid; place-items: center; color: var(--actor-secondary); text-shadow: 0 0 10px var(--actor-accent); }
.visual-weapon { right: -18px; top: 44px; font-size: 29px; transform: rotate(-18deg); }
.weapon-bow { font-size: 38px; transform: rotate(-8deg); }
.weapon-staff { font-size: 34px; transform: rotate(8deg); }
.visual-offhand { left: -21px; top: 57px; width: 31px; height: 41px; border: 2px solid var(--actor-secondary); border-radius: 50%; color: var(--actor-secondary); font-size: 18px; }
.offhand-quiver { border-radius: 8px 8px 15px 15px; }
.offhand-grimoire { border-radius: 3px; transform: rotate(-9deg); }
.visual-glyph { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); color: #fff2c9; font-size: 18px; text-shadow: 0 0 14px var(--actor-accent); opacity: .9; }
.monster-visual .visual-head { border-radius: 42% 42% 48% 48%; background: color-mix(in srgb, var(--actor-accent) 65%, #130e0c); }
.monster-visual .visual-body { background: color-mix(in srgb, var(--actor-accent) 70%, #171411); }
.monster-visual .visual-weapon, .monster-visual .visual-offhand { display: none; }
.silhouette-boss { transform: scale(1.13); }
.silhouette-boss .visual-aura { inset: 11px 1px 4px; border-width: 2px; box-shadow: 0 0 31px var(--actor-aura); }
.silhouette-undead .visual-head::before { content: ""; position: absolute; left: 3px; top: 12px; width: 5px; height: 5px; background: #f7d895; box-shadow: 15px 0 #f7d895; }
.silhouette-beast .visual-head { border-radius: 50% 50% 35% 35%; }
.silhouette-beast .visual-head::before, .silhouette-demon .visual-head::before { content: ""; position: absolute; left: -8px; top: -11px; width: 13px; height: 23px; border: 2px solid var(--actor-secondary); border-radius: 100% 0 100% 0; transform: rotate(-18deg); }
.silhouette-beast .visual-head::after, .silhouette-demon .visual-head::after { content: ""; position: absolute; right: -8px; top: -11px; width: 13px; height: 23px; border: 2px solid var(--actor-secondary); border-radius: 0 100% 0 100%; transform: rotate(18deg); }
.silhouette-insect .visual-body { border-radius: 48% 48% 30% 30%; box-shadow: inset 0 0 0 11px #05080655, 0 0 15px var(--actor-accent); }
.silhouette-construct .visual-body { border-radius: 8px; }
.silhouette-elemental .visual-body { clip-path: polygon(50% 0, 87% 15%, 100% 72%, 72% 100%, 25% 89%, 0 48%, 16% 12%); }
.silhouette-holy .visual-aura { border-style: dashed; }
.silhouette-abyss .visual-aura, .theme-void .visual-aura { border-color: #8f9cff; box-shadow: 0 0 27px #394477; }
.silhouette-empty { opacity: .45; }
.silhouette-empty .visual-glyph { top: 74px; }
.stage-nameplate { display: flex; max-width: 92%; flex-direction: column; align-items: center; text-align: center; margin-top: -2px; }
.stage-nameplate strong { max-width: 100%; overflow: hidden; color: #eee3c2; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.stage-nameplate small { max-width: 100%; overflow: hidden; color: #a6b09f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.visual-loadout { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; max-width: 100%; min-height: 26px; margin-top: 8px; }
.visual-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 128px; border: 1px solid #5d654f; background: #172119cc; padding: 3px 5px; color: #d2c598; }
.visual-chip b { color: var(--actor-accent, #d1a867); font-size: 13px; }
.visual-chip small { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.visual-chip.muted { color: #9ca699; border-color: #465045; }
.monster-skill-chip { border-color: #71534a; color: #d3aaa0; }
.stage-center { position: relative; z-index: 2; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #c8a56d; }
.stage-center strong { position: relative; z-index: 1; font-family: SimSun, serif; font-size: 17px; letter-spacing: .12em; text-shadow: 0 0 14px #c59c5b; }
.stage-center small { color: #9ca793; font-size: 10px; }
.stage-center-rune { position: absolute; width: 62px; height: 62px; border: 1px solid #b7945c88; transform: rotate(45deg); box-shadow: 0 0 15px #a8793e55; animation: rune-turn 12s linear infinite; }
.stage-effects { position: absolute; inset: 49px 32px 22px; z-index: 4; pointer-events: none; }
.battle-effect { position: absolute; display: flex; flex-direction: column; align-items: center; color: var(--effect-color); filter: drop-shadow(0 0 12px var(--effect-color)); animation: effect-pop 1.25s ease-out both; }
.battle-effect small { margin-top: 5px; color: #f4e9cb; font-size: 10px; white-space: nowrap; }
.effect-player { left: 33%; top: 38%; }
.effect-monster { right: 33%; top: 35%; }
.effect-core { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid var(--effect-color); border-radius: 50%; background: color-mix(in srgb, var(--effect-color) 19%, transparent); font-size: 27px; }
.effect-core::before, .effect-core::after { content: ""; position: absolute; width: 76px; height: 76px; border: 1px solid var(--effect-color); border-radius: 50%; opacity: .55; }
.effect-core::after { width: 94px; height: 34px; transform: rotate(44deg); border-radius: 50%; }
.effect-nova .effect-core { width: 80px; height: 80px; border-radius: 27%; transform: rotate(45deg); }
.effect-nova .effect-core::after { transform: rotate(-70deg); }
.effect-summon .effect-core { border-radius: 18% 50% 50% 50%; }
.battle-result-mark { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); font-family: SimSun, serif; font-size: 52px; opacity: .9; animation: result-stamp .8s ease-out both; }
.result-victory { color: #e4c17e; text-shadow: 0 0 20px #a8793e; }
.result-defeat { color: #d47b75; text-shadow: 0 0 20px #762c35; }
.stage-bottomline { position: absolute; left: 17px; right: 17px; bottom: 8px; display: grid; grid-template-columns: 1fr minmax(130px, 2fr) 1fr; align-items: center; gap: 12px; padding: 5px 0; background: #111713aa; color: #aab3a4; font-size: 10px; }
.stage-bottomline span:nth-child(2) { overflow: hidden; color: #d5bd8a; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.stage-bottomline span:last-child { text-align: right; }
.stage-player-cast .hero-visual { animation: hero-cast 1.1s ease-in-out both; }
.stage-monster-cast .monster-visual { animation: monster-cast 1.1s ease-in-out both; }
.outcome-victory .hero-visual { animation: hero-victory 1.25s ease-out both; }
.outcome-defeat .hero-visual { animation: hero-defeat 1.15s ease-out both; }
.outcome-victory .monster-visual { animation: monster-defeat 1.2s ease-out both; }
@keyframes actor-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes aura-breathe { 0%, 100% { opacity: .46; transform: scale(.95); } 50% { opacity: .9; transform: scale(1.04); } }
@keyframes rune-turn { to { transform: rotate(405deg); } }
@keyframes ash-fall { from { transform: translate3d(0, -20px, 0); } to { transform: translate3d(24px, 240px, 0); } }
@keyframes hero-cast { 0%, 100% { transform: translateX(0) translateY(0); } 38% { transform: translateX(12px) translateY(-13px) rotate(-3deg); } 68% { transform: translateX(4px) translateY(0); } }
@keyframes monster-cast { 0%, 100% { transform: translateX(0) translateY(0); } 38% { transform: translateX(-12px) translateY(-10px) rotate(3deg); } 68% { transform: translateX(-4px) translateY(0); } }
@keyframes hero-victory { 0% { transform: translateY(0); } 42% { transform: translateY(-18px); } 100% { transform: translateY(0); } }
@keyframes hero-defeat { 0%, 100% { transform: rotate(0); } 35%, 75% { transform: rotate(-7deg) translateX(-5px); } }
@keyframes monster-defeat { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(9px) rotate(7deg); } 100% { opacity: .55; transform: translateY(16px) rotate(9deg); } }
@keyframes effect-pop { 0% { opacity: 0; transform: scale(.35); } 28% { opacity: 1; transform: scale(1.14); } 100% { opacity: .82; transform: scale(1); } }
@keyframes result-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(-10deg); } 100% { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(0); } }
.combat-entity { min-width: 0; border: 1px solid #39443b; background: #1b241e; padding: 18px; }
.player-entity { border-color: #50684f; }
.monster-entity { border-color: #6b5145; }
.entity-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.entity-heading h2 { margin: 8px 0 0; font-size: 21px; overflow-wrap: anywhere; }
.entity-detail { display: block; color: #b78e63; font-size: 11px; margin-top: 7px; line-height: 1.5; }
.combat-result { color: #d7b479; font-size: 11px; white-space: nowrap; }
.combat-result.positive { color: #8ec196; }
.combat-result.negative { color: #dd8f80; }
.hp-label { display: flex; justify-content: space-between; gap: 10px; color: #a7b0a2; font-size: 11px; }
.hp-label strong { color: #e8e4d8; font-weight: 600; }
.hp-meter { height: 10px; background: #343c34; margin: 8px 0 10px; overflow: hidden; }
.hp-meter div { height: 100%; transition: width .35s; }
.player-hp div { background: #75a873; }
.monster-hp div { background: #b96d5e; }
.shield-line { color: #879488; font-size: 11px; }
.shield-line strong { color: #b8c88d; }
.combat-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #354036; border-bottom: 1px solid #354036; margin-top: 16px; }
.combat-stats span { padding: 10px 8px; min-width: 0; }
.combat-stats span + span { border-left: 1px solid #354036; }
.combat-stats small, .combat-stats strong { display: block; }
.combat-stats small { color: #869186; font-size: 10px; margin-bottom: 4px; }
.combat-stats strong { color: #d4c69e; font-size: 13px; overflow-wrap: anywhere; }
.combat-subheading { display: flex; justify-content: space-between; gap: 8px; color: #aab1a7; font-size: 11px; margin: 15px 0 8px; }
.combat-subheading span:last-child { color: #c49b68; }
.status-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 23px; }
.status-tag { display: inline-block; border: 1px solid #4b594c; color: #c3c9bc; background: #202a22; padding: 4px 6px; font-size: 10px; }
.status-tag.boss-tag { border-color: #9a674d; color: #e1ae7c; background: #30231e; }
.status-empty { color: #808c80; font-size: 11px; }
.combat-versus { align-self: center; justify-self: center; color: #ae8b5c; font-family: SimSun, serif; font-size: 13px; }
.combat-feed { border-bottom: 1px solid #3a4239; }
.combat-feed .section-heading { margin: 18px 0 10px; }
.damage-feed { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 16px; }
.damage-entry { border-left: 2px solid #759777; background: #1b241e; color: #b9c5b5; padding: 6px 8px; font-size: 11px; }
.damage-entry.incoming { border-left-color: #b46e5e; color: #d2a39a; }
.map-drawer { position: fixed; inset: 0; z-index: 15; }
.map-drawer-backdrop { position: absolute; inset: 0; background: #050806b8; }
.map-drawer-panel { position: absolute; top: 0; right: 0; width: min(720px, 92vw); height: 100%; overflow-y: auto; padding: 28px; border-left: 1px solid #5b513e; background: #171e1a; box-shadow: -15px 0 40px #0008; }
.map-drawer-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #3a4239; padding-bottom: 18px; margin-bottom: 16px; }
.map-drawer-header h2 { margin: 10px 0 0; font-family: SimSun, serif; font-size: 25px; }
.icon-button { width: 34px; height: 34px; border: 1px solid #5a5548; border-radius: 3px; color: #d5c39d; background: transparent; font-size: 21px; line-height: 1; }
.map-drawer-current { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0 18px; color: #9da89b; font-size: 11px; }
.map-drawer-current strong { color: #dbba7e; font-size: 13px; }
.difficulty-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 18px 0; border-bottom: 1px solid #3a4239; }
.difficulty-bar label { min-width: 140px; font-size: 11px; }
.difficulty-bar select, .difficulty-bar input { display: block; margin-top: 7px; padding: 8px 10px; }
.difficulty-bar button { padding: 8px 14px; }
.difficulty-bar span { color: #9ba497; font-size: 11px; padding-bottom: 9px; }
.log-heading { margin-top: 38px; }
.log-list { border-top: 1px solid #3b443b; }
.log-entry { display: flex; gap: 21px; padding: 13px 4px; border-bottom: 1px solid #2c352e; font-size: 12px; color: #c4c9bf; }
.log-entry time { color: #818c80; flex: none; }
.page-head { border-bottom: 1px solid #3a4239; padding: 15px 0 25px; }
.item-list { border-top: 1px solid #39443b; }
.item-row { position: relative; display: flex; align-items: center; gap: 17px; min-height: 90px; border-bottom: 1px solid #343e36; padding: 14px 4px; }
.item-icon { width: 47px; height: 47px; flex: none; border: 1px solid #727b6e; display: grid; place-items: center; color: #c8cfc2; font-size: 23px; background: #263029; }
.item-icon.uncommon { border-color: #5d9b79; color: #8fc4a1; }
.item-icon.rare { border-color: #b38e54; color: #d9ad66; }
.item-icon.epic { border-color: #b26e75; color: #df9ca2; }
.rarity-uncommon { color: #95c8a8; }
.rarity-rare { color: #e1bb7d; }
.rarity-epic { color: #e9a1a7; }
.item-copy { flex: 1; min-width: 0; }
.item-copy strong, .item-copy span { display: block; }
.item-copy strong { font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.item-copy strong small { font-weight: normal; color: #9ea99e; }
.item-copy span { color: #9da89c; font-size: 11px; }
.item-buttons { display: flex; gap: 8px; }
.item-buttons button { font-size: 11px; padding: 7px 11px; white-space: nowrap; }
.item-buttons button.secondary { color: #d2bb91; background: transparent; border-color: #74644b; }
.item-buttons button.secondary:hover { background: #373124; }
.item-tooltip { display: none; position: absolute; left: 8px; top: calc(100% - 4px); z-index: 30; width: min(390px, calc(100vw - 32px)); max-height: calc(100vh - 24px); overflow-y: auto; padding: 16px 17px; border: 1px solid #8b6c45; background: linear-gradient(145deg, #2b2119, #171514 72%); box-shadow: 0 14px 34px #000b; color: #d5d0c3; pointer-events: none; }
.tooltip-up .item-tooltip { top: auto; bottom: calc(100% - 4px); box-shadow: 0 -14px 34px #000b; }
.item-row:hover .item-tooltip, .gear-row:hover .item-tooltip { display: block; }
.tooltip-title, .tooltip-subtitle, .tooltip-power { display: block; }
.tooltip-title { font-size: 16px; line-height: 1.4; }
.tooltip-subtitle { margin-top: 4px; color: #bd9d72; font-size: 12px; }
.tooltip-power { margin-top: 8px; padding-bottom: 10px; border-bottom: 1px solid #65513b; color: #d7d0bf; font-size: 13px; }
.tooltip-section { margin-top: 11px; }
.tooltip-section em { display: block; margin-bottom: 6px; color: #a9a093; font-size: 11px; font-style: normal; }
.tooltip-stats { display: grid; gap: 4px; }
.tooltip-stats span { display: flex; justify-content: space-between; gap: 12px; color: #bfc7b8; font-size: 12px; }
.tooltip-stats b, .tooltip-section li b { color: #c9d4b9; font-weight: 500; }
.tooltip-section ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tooltip-section li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; color: #c7c6b8; font-size: 12px; line-height: 1.45; }
.tooltip-section li small { grid-column: 1 / -1; color: #9e9b91; font-size: 10px; }
.tooltip-note { display: block; color: #9e9b91; font-size: 11px; line-height: 1.5; }
.tooltip-section li.tooltip-effect { color: #e1ad70; }
.tooltip-section li.tooltip-effect b { color: #edc782; }
.tooltip-sockets { display: grid; gap: 4px; margin-top: 12px; color: #989f98; font-size: 11px; }
.tooltip-sockets span { display: block; }
.empty { padding: 26px 4px; color: #929f91; }
.skill-summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.skill-summary span { border: 1px solid #4b584a; border-radius: 4px; padding: 8px 12px; color: #d5bd8a; background: #1b241e; font-size: 12px; }
.skill-config { border-top: 1px solid #39443b; border-bottom: 1px solid #39443b; padding: 12px 0; }
.skill-config-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 34px; color: #aeb7aa; font-size: 11px; }
.skill-config-row + .skill-config-row { margin-top: 7px; }
.skill-config-row strong { color: #d9bd84; margin-right: 4px; }
.skill-config-row input { width: 80px; padding: 7px 8px; }
.mini-button.selected { color: #edcf91; }
.skill-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.skill-card { min-height: 110px; border: 1px solid #39443b; border-radius: 4px; background: #1b241e; padding: 13px; }
.skill-card strong, .skill-card span, .skill-card small { display: block; }
.skill-card strong { color: #e2bf7e; margin-bottom: 6px; }
.skill-card span { color: #9eaa9f; font-size: 11px; margin-bottom: 8px; }
.skill-card small { color: #b7beb2; line-height: 1.5; }
.skill-card button { margin-top: 10px; border: 1px solid #9d7c4e; border-radius: 3px; background: transparent; color: #d7b479; padding: 5px 10px; }
.skill-card-actions, .skill-inline-list { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-card-actions button, .skill-inline-list button { margin-top: 8px; }
.rune-button { border-color: #53634e !important; color: #a7c49d !important; font-size: 10px; }
.rune-button.selected { border-color: #b18a57 !important; color: #e2c488 !important; background: #302a1f !important; }
.activity-list { border-top: 1px solid #39443b; }
.system-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 25px; }
.system-card { display: flex; justify-content: space-between; gap: 15px; border: 1px solid #39443b; border-radius: 4px; background: #1b241e; padding: 15px; }
.system-card.disabled { opacity: .55; }
.activity-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.activity-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: min(100%, 620px); padding: 4px 0; color: #cbc9b8; font-size: 12px; }
.activity-detail { width: 100%; margin-bottom: 4px; }
.guild-members, .season-history { display: grid; gap: 6px; width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid #354036; }
.guild-member { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 5px 0; }
.guild-member strong, .guild-member small, .season-history-line { display: block; }
.guild-member small, .season-history-line { color: #98a494; font-size: 10px; }
.guild-member .mini-button { margin-left: 4px; }
.currency-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 18px 0 24px; }
.currency-chip { display: flex; justify-content: space-between; gap: 8px; border: 1px solid #39443b; background: #151c18; padding: 9px 10px; }
.currency-chip small { color: #9b9f91; }
.currency-chip strong { color: #e3d6a5; }
.system-card strong, .system-card span { display: block; }
.system-card strong { color: #e1bf82; margin-bottom: 6px; }
.system-card span { color: #a4aea2; font-size: 11px; }
.system-card b { flex: none; color: #88b18d; font-size: 11px; white-space: nowrap; }
.editor-tools { display: grid; grid-template-columns: minmax(160px, .8fr) minmax(180px, 1.2fr) minmax(180px, 1fr) auto; align-items: end; gap: 16px; margin: 25px 0 12px; }
.editor-tools label { flex: 1; font-size: 11px; }
.editor-tools select { margin-top: 8px; }
.editor-tools input { margin-top: 8px; }
.editor-page-controls { display: flex; align-items: center; gap: 8px; min-height: 42px; color: #9ca99a; font-size: 11px; white-space: nowrap; }
.editor-page-controls button, .editor-actions button { border: 1px solid #74644b; border-radius: 3px; color: #d2bb91; background: transparent; padding: 8px 11px; }
.editor-page-controls button:hover:not(:disabled), .editor-actions button:hover:not(:disabled) { background: #373124; }
.editor-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid #3a4239; }
.editor-actions label { width: 210px; font-size: 11px; }
.editor-actions select { margin-top: 8px; }
.editor-actions button:disabled, .editor-page-controls button:disabled { opacity: .45; cursor: not-allowed; }
.editor-draft-status { align-self: center; color: #c8a66c; font-size: 11px; padding: 8px 4px; }
.editor-preview { max-height: 360px; overflow: auto; margin: 16px 0; padding: 14px; white-space: pre-wrap; color: #d5c59d; background: #151c18; border: 1px solid #4b584a; font: 12px/1.55 Consolas, monospace; }
.editor-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.editor-form label { font-size: 11px; min-width: 0; }
.editor-form input, .editor-form select, .editor-form textarea { display: block; margin-top: 8px; }
.editor-form input[type="checkbox"] { width: 18px; height: 18px; margin: 10px 0 0; }
.editor-form select[multiple] { min-height: 100px; }
.editor-form .wide, .editor-submit { grid-column: 1 / -1; }
.editor-submit { display: flex; align-items: center; gap: 20px; }
.editor-submit span { color: #89968a; font-size: 11px; }
.toast { position: fixed; z-index: 20; bottom: 25px; right: 25px; max-width: min(360px, calc(100vw - 40px)); padding: 13px 18px; background: #354335; border: 1px solid #788c6d; border-radius: 3px; color: #f3eee2; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 950px) {
  .topbar { gap: 15px; padding: 0 20px; }
  .brand { min-width: auto; }
  .brand small { display: none; }
  .topbar nav button { padding: 0 11px; }
  .layout { grid-template-columns: 235px minmax(0, 1fr); }
  .sidebar { padding: 25px 15px; }
  .zone-list { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .auth-screen { display: block; }
  .auth-art { min-height: 180px; border-right: 0; border-bottom: 1px solid #303a33; }
  .auth-art img { width: 90px; }
  .auth-art:before { width: 140px; height: 140px; }
  .auth-art:after { width: 100px; height: 100px; }
  .auth-panel { max-width: 500px; margin: auto; padding: 32px 25px; }
  .auth-panel h1 { font-size: 36px; }
  .auth-subtitle { margin-bottom: 25px; }
  .topbar { height: auto; min-height: 63px; flex-wrap: wrap; padding: 8px 15px 0; }
  .brand { flex: 1; }
  .brand strong { font-size: 17px; }
  .account { font-size: 11px; gap: 8px; }
  .topbar nav { flex: 0 0 100%; height: 43px; overflow-x: auto; }
  .topbar nav button { padding: 0 14px; font-size: 12px; }
  .announcement { padding: 10px 16px; }
  .layout { display: block; }
  .sidebar { border-right: 0; border-bottom: 1px solid #39433b; padding: 18px 17px; }
  .character { display: grid; grid-template-columns: 70px minmax(0, 1fr); text-align: left; column-gap: 14px; }
  .character .eyebrow, .character .xp-label, .character .meter, .character .stat-grid { grid-column: 1 / -1; }
  .avatar { grid-row: 2 / 4; width: 55px; height: 55px; margin: 5px; }
  .avatar img { width: 39px; }
  .character h2 { align-self: end; }
  .level-line { margin: 0 0 14px; }
  .meter { margin-bottom: 13px; }
  .stat-grid { padding: 11px 0; }
  .equipment { margin-top: 6px; }
  .equipment .section-heading { margin: 14px 0 4px; }
  .gear-row { min-height: 34px; }
  .offline-note { margin-top: 12px; }
  main { padding: 20px 17px 65px; }
  .chapter-head { min-height: auto; padding: 10px 0 25px; align-items: flex-start; flex-direction: column; }
  .chapter-head h1, .page-head h1 { font-size: 28px; }
  .chapter-actions { width: 100%; justify-content: space-between; align-items: center; }
  .battle-indicator small { display: inline; margin-left: 7px; }
  .combat-board { grid-template-columns: 1fr; gap: 10px; }
  .combat-stage { min-height: 485px; }
  .stage-battlefield { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); min-height: 425px; padding: 52px 9px 66px; }
  .stage-actor { width: 130px; height: 195px; transform: scale(.82); transform-origin: bottom center; }
  .stage-lane { justify-content: center; }
  .stage-nameplate { max-width: 100%; }
  .visual-loadout { max-width: 145px; }
  .visual-chip { max-width: 92px; }
  .visual-chip small { font-size: 8px; }
  .stage-effects { inset: 52px 9px 28px; }
  .effect-player { left: 24%; top: 35%; }
  .effect-monster { right: 24%; top: 33%; }
  .stage-bottomline { left: 9px; right: 9px; grid-template-columns: 1fr 1.2fr 1fr; gap: 6px; font-size: 9px; }
  .stage-bottomline span:nth-child(2) { display: none; }
  .combat-versus { padding: 1px 0; }
  .zone { min-height: 82px; }
  .item-row { flex-wrap: wrap; }
  .item-buttons { width: 100%; padding-left: 64px; }
  .editor-tools { grid-template-columns: 1fr; }
  .editor-page-controls { min-height: auto; }
  .editor-actions { align-items: stretch; }
  .editor-actions label { width: 100%; }
  .editor-form { grid-template-columns: 1fr; }
  .skill-list, .system-list { grid-template-columns: 1fr; }
  .difficulty-bar { align-items: stretch; }
  .difficulty-bar label { flex: 1; }
  .map-drawer-panel { padding: 20px 17px; }
  .map-drawer-current { flex-direction: column; gap: 5px; }
}

/* Pixel-art combat assets sit above the stage atmosphere and below labels. */
.combat-stage {
  background-color: #121a20;
  background-image: var(--battle-bg), linear-gradient(180deg, #101a25aa, #101714cc);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  image-rendering: pixelated;
}
.stage-sky {
  background: linear-gradient(180deg, #13202a66 0, #1b252366 65%, #1b211dcc 100%);
}
.visual-actor {
  width: 160px;
  height: 210px;
}
.visual-figure {
  left: 50%;
  bottom: 24px;
  width: 96px;
  height: 128px;
  transform: translateX(-50%);
}
.visual-sprite {
  position: absolute;
  inset: 0;
  width: 96px;
  height: 128px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.visual-layer { z-index: 2; }
.visual-base { z-index: 1; }
.visual-layer.layer-boots { z-index: 2; }
.visual-layer.layer-armor { z-index: 3; }
.visual-layer.layer-belt { z-index: 4; }
.visual-layer.layer-helmet { z-index: 5; }
.visual-layer.layer-offhand { z-index: 6; }
.visual-layer.layer-weapon { z-index: 7; }
.visual-layer.layer-amulet,
.visual-layer.layer-ring-left,
.visual-layer.layer-ring-right,
.visual-layer.layer-bracelet-left,
.visual-layer.layer-bracelet-right { z-index: 8; }
.visual-fallback {
  position: absolute;
  left: 50%;
  top: 52px;
  z-index: 0;
  transform: translateX(-50%);
  color: var(--actor-secondary);
  font-size: 24px;
  opacity: .08;
}
.monster-visual .visual-figure {
  width: 128px;
  height: 128px;
}
.monster-visual .visual-sprite {
  width: 128px;
  height: 128px;
}
.silhouette-boss .visual-figure,
.silhouette-boss .visual-sprite {
  width: 148px;
  height: 148px;
}
.effect-sprite {
  width: 128px;
  height: 128px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px var(--effect-color));
}
.battle-effect .effect-core {
  position: absolute;
  top: 42px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: .08;
}
.battle-effect .effect-core::before,
.battle-effect .effect-core::after { display: none; }
.damage-float {
  position: absolute;
  top: 53%;
  color: #ffe08e;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 2px 2px 0 #241b16, 0 0 10px #f0a34b;
  animation: damage-float 1.35s ease-out both;
}
.damage-float.outgoing { left: 66%; }
.damage-float.incoming {
  left: 29%;
  color: #ff9a8a;
  text-shadow: 2px 2px 0 #251516, 0 0 10px #d5534d;
}
.damage-float-1 { animation-delay: .12s; transform: scale(.86); }
.damage-float-2 { animation-delay: .24s; transform: scale(.72); }
@keyframes damage-float {
  0% { opacity: 0; transform: translateY(16px) scale(.72); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-54px) scale(1.05); }
}

/* Classic battle direction: large readable sprites, heavy ink outlines, warm UI trim. */
.combat-stage {
  min-height: 448px;
  border: 3px solid #15161c;
  background-color: #354f6b;
  box-shadow: 0 8px 0 #0b0e14, 0 18px 32px #05070b88;
}
.combat-stage::before {
  inset: 44% 0 0;
  background: linear-gradient(180deg, #263a4dcc 0, #2c2930 38%, #15151c 100%);
}
.combat-stage::after {
  left: 5%;
  right: 5%;
  bottom: 49px;
  height: 3px;
  background: #9d6f4c;
  box-shadow: 0 3px 0 #10151d, 0 0 20px #d5a76466;
  opacity: .92;
}
.stage-sky {
  inset: 0 0 44%;
  background: linear-gradient(180deg, #567896 0, #3b5875 55%, #30465f 100%);
}
.stage-moon {
  top: 25px;
  right: 9%;
  width: 68px;
  height: 68px;
  border: 2px solid #dcb870;
  box-shadow: 0 0 25px #efc97955;
}
.stage-topline {
  padding: 11px 15px;
  border-bottom: 3px solid #15161c;
  background: #1a171d;
  color: #e0b66d;
  font-weight: 700;
}
.stage-topline span:last-child { color: #d5c19c; }
.stage-battlefield {
  min-height: 382px;
  padding: 52px 27px 62px;
}
.stage-actor {
  width: 196px;
  height: 238px;
}
.visual-actor {
  width: 190px;
  height: 234px;
}
.visual-figure {
  width: 122px;
  height: 164px;
  bottom: 24px;
}
.visual-sprite {
  width: 122px;
  height: 164px;
}
.monster-visual .visual-figure,
.monster-visual .visual-sprite {
  width: 150px;
  height: 150px;
}
.silhouette-boss .visual-figure,
.silhouette-boss .visual-sprite {
  width: 172px;
  height: 172px;
}
.visual-aura {
  inset: 20px 5px 10px;
  border-width: 2px;
  box-shadow: 0 0 23px color-mix(in srgb, var(--actor-aura) 48%, transparent), inset 0 0 30px color-mix(in srgb, var(--actor-aura) 22%, transparent);
}
.visual-shadow {
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 21px;
  border-radius: 50%;
  background: #05070bcc;
  filter: blur(2px);
}
.stage-nameplate {
  min-height: 31px;
  padding: 4px 11px 3px;
  border: 2px solid #15161c;
  background: #1a171dcc;
}
.stage-nameplate strong { color: #ffe4a3; }
.stage-nameplate small { color: #d4c4a2; }
.visual-loadout {
  gap: 4px;
  margin-top: 7px;
}
.visual-chip {
  border: 2px solid #17161c;
  background: #2c2227e8;
  padding: 3px 5px;
  box-shadow: 2px 2px 0 #0d1118;
}
.visual-chip b { color: #f1bd6d; }
.monster-skill-chip {
  border-color: #17161c;
  background: #40252be8;
  color: #ffc18d;
}
.stage-center strong {
  color: #ffe2a0;
  text-shadow: 2px 2px 0 #2b1d1e, 0 0 16px #d8a15e;
}
.stage-center-rune {
  width: 74px;
  height: 74px;
  border: 2px solid #d5a762aa;
  box-shadow: 0 0 20px #b9794e66;
}
.stage-effects { inset: 53px 22px 29px; }
.effect-sprite {
  width: 148px;
  height: 148px;
  filter: drop-shadow(3px 3px 0 #26171b) drop-shadow(0 0 12px var(--effect-color));
}
.battle-effect small {
  padding: 3px 6px;
  border: 2px solid #17161c;
  background: #241b20dd;
  color: #ffe5a5;
  font-weight: 700;
}
.stage-bottomline {
  left: 11px;
  right: 11px;
  bottom: 8px;
  padding: 7px 9px;
  border: 2px solid #15161c;
  background: #1a171de8;
  color: #e0c48e;
}
.damage-float {
  color: #fff0a9;
  font-size: 23px;
  text-shadow: 3px 3px 0 #281a1b, 0 0 12px #f0a34b;
}
.damage-float.incoming {
  color: #ffac9b;
  text-shadow: 3px 3px 0 #2c171b, 0 0 12px #d5534d;
}

@media (max-width: 680px) {
  .combat-stage { min-height: 500px; }
  .stage-battlefield { min-height: 426px; padding: 55px 7px 67px; }
  .stage-actor { width: 155px; height: 208px; }
  .visual-actor { width: 152px; height: 204px; }
  .visual-figure { width: 104px; height: 140px; }
  .visual-sprite { width: 104px; height: 140px; }
  .monster-visual .visual-figure,
  .monster-visual .visual-sprite { width: 120px; height: 120px; }
  .silhouette-boss .visual-figure,
  .silhouette-boss .visual-sprite { width: 136px; height: 136px; }
  .visual-chip { max-width: 95px; }
}

/* Inked pixel direction: let the scene art carry the color and keep UI trim quiet. */
.combat-stage {
  border-color: #171318;
  background-color: #332b2d;
  box-shadow: 0 0 0 2px #806044, 0 8px 0 #111015, 0 18px 32px #05070b88;
}
.combat-stage::before {
  background: linear-gradient(180deg, #24191c12 0%, #21171b20 52%, #1713189c 100%);
}
.stage-sky {
  background: linear-gradient(180deg, #24191b18 0%, #3322260a 64%, #171318a6 100%);
}
.stage-topline {
  border-bottom-color: #171318;
  background: #21191bcc;
  color: #ecc47d;
  text-shadow: 2px 2px 0 #1a1115;
}
.stage-actor {
  filter: drop-shadow(3px 4px 0 #171318);
}
.visual-aura {
  border-color: color-mix(in srgb, var(--actor-aura) 50%, #b99065);
  border-style: dashed;
  opacity: .34;
  box-shadow: 0 0 17px color-mix(in srgb, var(--actor-aura) 30%, transparent);
}
.visual-shadow {
  height: 15px;
  background: #07080bcc;
  filter: blur(1px);
}
.visual-sprite {
  filter: drop-shadow(2px 3px 0 #151217);
}
.hero-visual .visual-sprite {
  filter: drop-shadow(2px 3px 0 #151217) drop-shadow(0 0 5px #c7945d38);
}
.monster-visual .visual-sprite {
  filter: drop-shadow(3px 3px 0 #171116) drop-shadow(0 0 8px #9d42384d);
}
.stage-nameplate,
.stage-bottomline,
.battle-effect small {
  border-color: #171318;
  box-shadow: 2px 2px 0 #0f0d12;
}
.stage-nameplate {
  background: #211a1edc;
}
.stage-nameplate strong { color: #f3d08e; }
.stage-nameplate small { color: #d0b99a; }
.visual-chip {
  border-color: #171318;
  background: #241d20ed;
  color: #dfc99e;
}
.monster-skill-chip {
  background: #3a2528ed;
  color: #f0b18f;
}
.effect-sprite {
  filter: drop-shadow(3px 3px 0 #211417) drop-shadow(0 0 8px var(--effect-color));
}
.battle-effect small {
  background: #21191ee8;
  color: #f4d79c;
}
.stage-center-rune {
  border-color: #dbb87388;
  box-shadow: 0 0 13px #bb765933;
}
.damage-float {
  color: #fff0c1;
  text-shadow: 3px 3px 0 #28191a, 0 0 8px #ef9e50;
}
.damage-float.incoming {
  color: #ffb2a0;
  text-shadow: 3px 3px 0 #28171a, 0 0 8px #cf574c;
}
.silhouette-boss .visual-figure,
.silhouette-boss .visual-sprite {
  width: 208px;
  height: 208px;
}

@media (max-width: 680px) {
  .combat-stage {
    box-shadow: 0 0 0 1px #806044, 0 6px 0 #111015;
  }
  .visual-sprite {
    filter: drop-shadow(1px 2px 0 #151217);
  }
  .silhouette-boss .visual-figure,
  .silhouette-boss .visual-sprite {
    width: 158px;
    height: 158px;
  }
}