:root {
  color-scheme: dark;
  --bg: #100e0d; --panel: #1b1714; --panel-2: #251e19; --line: #49392d;
  --ink: #f3eadb; --muted: #c1b4a2; --gold: #e0ba6d; --red: #c84735;
  --green: #5eaa78; --blue: #5289c7; --nav-h: 72px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--ink); -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--bg); }
body { min-width: 320px; font-size: 14px; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button, select { min-height: 42px; touch-action: manipulation; }
button { position: relative; overflow: hidden; border: 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
button { transition: transform .1s ease, filter .1s ease, box-shadow .14s ease, opacity .12s ease; }
button:not(:disabled):active, button:not(:disabled).pressed { transform: translateY(2px) scale(.955); filter: brightness(1.35) saturate(1.2); box-shadow: inset 0 3px 8px #000c, 0 0 0 2px #f1c96d99; }
button:not(:disabled).pressed::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #fff3; animation: button-flash .2s ease-out; }
button.busy { cursor: progress; opacity: .82; }
button.busy::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .65s linear infinite; }
@keyframes button-flash { from { opacity: .8; } to { opacity: 0; } }
@keyframes button-spin { to { rotate: 1turn; } }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #f2c66d; outline-offset: 2px; }
.ambient { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% -20%, #60322055, transparent 45%), linear-gradient(#171310, #0e0c0b); }
.eyebrow { margin: 0 0 4px; color: var(--gold); font-size: 12px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.fine-print, small { color: var(--muted); font-size: 12px; line-height: 1.45; }
[hidden] { display: none !important; }

.auth-view { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(100%, 390px); padding: 28px 22px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, #251d18ee, #151210f5); box-shadow: 0 24px 70px #000a; }
.auth-card .seal { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 18px; border: 2px solid #a94b34; color: #d76249; font: 700 32px serif; transform: rotate(-4deg); }
.auth-card h1 { margin: 0; font: 700 38px/1.1 serif; letter-spacing: .12em; }
.auth-copy { color: var(--muted); line-height: 1.7; }
.auth-card form { display: grid; gap: 14px; margin-top: 22px; }
.auth-card label { display: grid; gap: 7px; color: #c8bba8; font-size: 13px; }
.auth-card input { width: 100%; min-height: 50px; border: 1px solid #514235; border-radius: 12px; padding: 0 14px; background: #0e0c0b; outline: none; }
.auth-card input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #d6ad5c20; }
.primary, .danger, .toggle-button, .text-button { border-radius: 10px; padding: 0 14px; font-weight: 700; }
.primary { background: linear-gradient(#d4ad64, #a77835); color: #21160a; box-shadow: inset 0 1px #f8dc9b; }
.primary.large { min-height: 52px; }
.danger { background: linear-gradient(#c9513d, #7d2b25); color: #fff0e8; }
.danger:disabled, button:disabled { cursor: default; opacity: .78; filter: saturate(.72); }
.primary:disabled { border: 1px solid #8c7959; background: #615746; color: #fff0cf; box-shadow: none; }
.danger:disabled { border: 1px solid #87564e; background: #563734; color: #f4d6cf; }
.toggle-button, .text-button { background: #30261f; color: #d6c7b1; border: 1px solid #514034; }
.text-button { min-height: 36px; padding-inline: 10px; font-size: 12px; }

.app { position: relative; width: min(100%, 520px); min-height: 100dvh; margin: auto; background: #100e0df5; box-shadow: 0 0 70px #000a; }
.topbar { position: sticky; top: 0; z-index: 30; display: grid; gap: 7px; min-height: 66px; padding: max(10px, env(safe-area-inset-top)) 14px 9px; border-bottom: 1px solid #372c24; background: #15110ff2; backdrop-filter: blur(12px); }
.topbar-main { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.topbar h1 { margin: 0; font: 700 18px serif; }
.top-resources { display: flex; gap: 6px; align-items: center; }
.top-resources span { padding: 6px 8px; border-radius: 999px; background: #2a211b; color: #ded0ba; font-size: 12px; white-space: nowrap; }
.player-xp { min-width: 0; }
.player-xp > div:first-child { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; color: #dbc9ae; font-size: 12px; line-height: 1.25; }
.player-xp > div:first-child b { color: #f0c875; font-weight: 700; }
.xp-meter { height: 7px; overflow: hidden; border: 1px solid #503d29; border-radius: 999px; background: #090807; box-shadow: inset 0 1px 3px #000; }
.xp-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9b642a, #f0c66e); box-shadow: 0 0 8px #e3ad4e88; transition: width .25s ease; }
.page-stack { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); }
.page { display: none; padding: 10px 10px 24px; }
.page.active { display: block; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 8px 2px 14px; }
.page-heading h2, h3 { margin: 0; font-family: serif; }
.page-heading small { max-width: 190px; text-align: right; font-size: 12px; line-height: 1.5; }

.offline-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 10px 11px; border: 1px solid #405642; border-radius: 13px; background: linear-gradient(110deg, #17251b, #1d1a16); }
.offline-card > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 6px; }
.offline-card small { grid-column: 2; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #6ed887; box-shadow: 0 0 9px #5cda7d; }
.offline-card button { min-width: 72px; }
.battle-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(#211a16, #151210); box-shadow: 0 12px 30px #0007; }
.battle-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 4px; }
.encounter { padding: 4px 9px; border-radius: 999px; color: #d5c9b8; background: #393029; font-size: 11px; font-weight: 800; }
.encounter.elite { color: #e3c0ff; background: #55316b; }
.encounter.boss { color: #ffe4ad; background: #762c24; box-shadow: 0 0 12px #d34b3866; }
.duel-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 5px 10px 3px; }
.unit-bar { min-width: 0; }
.unit-bar > div:first-child { display: flex; justify-content: space-between; gap: 5px; margin-bottom: 4px; font-size: 11px; }
.unit-bar b, .unit-bar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.enemy-bar { text-align: right; }
.enemy-defense-text { display: block; margin-top: 3px; overflow: hidden; color: #cbb9a3; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.meter { position: relative; height: 7px; overflow: hidden; border-radius: 99px; background: #090808; box-shadow: inset 0 0 0 1px #ffffff12; }
.meter + .meter { margin-top: 3px; }
.meter i { display: block; width: 100%; height: 100%; transform-origin: left; transition: width .22s ease; background: linear-gradient(90deg, #812b28, #d75d43); }
.meter.mana i { background: linear-gradient(90deg, #24497d, #509bd4); }
.meter.enemy i { transform-origin: right; background: linear-gradient(90deg, #dd6d3c, #8b2728); }
.meter.boss { height: 6px; }
.meter.boss i { background: linear-gradient(90deg, #9c6832, #edbc62); }

.battle-stage { position: relative; min-height: 238px; overflow: hidden; background: radial-gradient(ellipse at 55% 88%, #6e3c2440, transparent 52%), linear-gradient(#18171a, #302117 70%, #19130f); isolation: isolate; }
.battle-stage::before { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(118deg, transparent 0 34px, #d3a56812 35px 36px); }
.battle-stage::after { content: ""; position: absolute; left: 5%; right: 5%; bottom: 19px; height: 22px; border-radius: 50%; background: #0008; filter: blur(7px); }
.battle-2d { position: absolute; inset: 0; z-index: 2; }
.actor { position: absolute; bottom: 27px; width: 96px; height: 152px; transition: transform .16s ease, filter .16s ease; z-index: 3; }
.actor.hero { left: 11%; transform: rotateY(-7deg); }
.actor.enemy { right: 10%; }
.actor-shadow { position: absolute; left: 5%; right: 5%; bottom: 0; height: 17px; border-radius: 50%; background: #0009; filter: blur(4px); }
.actor-body { position: absolute; left: 19px; bottom: 11px; width: 60px; height: 118px; border-radius: 28px 28px 18px 18px; border: 3px solid #332722; background: linear-gradient(100deg, #a66e3e, #452d24 42%, #17151a 44%, #725044); box-shadow: inset 10px 0 #e6b98118, 0 8px 12px #0008; }
.actor.hero .actor-body::before { content: ""; position: absolute; left: 10px; top: -23px; width: 38px; height: 40px; border-radius: 50% 50% 44% 44%; border: 3px solid #32231c; background: linear-gradient(90deg, #b88867 48%, #6d4c3a 49%); }
.actor.hero .actor-body::after { content: ""; position: absolute; left: 7px; top: 32px; width: 47px; height: 40px; border-radius: 7px 14px 8px 12px; border: 2px solid #e0b35f55; background: linear-gradient(100deg, #ad7a3d, #432d24); }
.actor.hero .face { position: absolute; z-index: 2; left: 34px; top: -8px; width: 7px; height: 4px; border-radius: 50%; background: #1b1110; box-shadow: 10px 1px #1b1110; }
.actor.hero .weapon { display: none; }
.actor.hero.mage .actor-body { background: linear-gradient(100deg, #67529a, #241f46 48%, #9c673b); }
.actor.hero.mage .weapon { width: 8px; background: linear-gradient(#86b4e8, #49374d); }
.actor.hero.hunter .actor-body { background: linear-gradient(100deg, #6f7244, #282f23 48%, #845538); }
.actor.hero.hunter .weapon { width: 48px; height: 86px; border: 5px solid #96714c; border-left: 0; background: transparent; border-radius: 0 70% 70% 0; }
.actor.enemy .actor-body { width: 67px; transform: scaleX(-1); transform-origin: center; background: linear-gradient(105deg, #352b2c, #765143 55%, #241b1c); }
.actor.enemy .actor-body::before { content: ""; position: absolute; left: 12px; top: -27px; width: 43px; height: 44px; border-radius: 50% 50% 38% 38%; background: #554035; border: 3px solid #231b1a; }
.actor.enemy .eye { position: absolute; z-index: 2; left: 22px; top: -8px; width: 8px; height: 4px; border-radius: 50%; background: #e54f34; box-shadow: 16px 0 #e54f34, 0 0 7px #e54f34; }
.actor.enemy .horn { position: absolute; left: 13px; top: -39px; width: 9px; height: 25px; transform: rotate(-25deg); background: #c0a686; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.actor.enemy.elite { filter: drop-shadow(0 0 11px #a84dde); transform: scale(1.08); }
.actor.enemy.boss { filter: drop-shadow(0 0 13px #d14b32); transform: scale(1.23); right: 12%; }
.actor.hit { animation: hit .25s ease; }
.actor.hero.attack { animation: hero-lunge .3s cubic-bezier(.2,.8,.3,1); }
.actor.enemy.attack { animation: enemy-lunge .3s cubic-bezier(.2,.8,.3,1); }
.actor.dead { filter: grayscale(1); transform: rotate(-68deg) translate(-25px, 25px); }
.actor em { display: none; position: absolute; left: -4px; top: 22px; padding: 3px 6px; border-radius: 99px; background: #568be0bb; font-size: 10px; font-style: normal; }
.actor.guarded em { display: block; }
@keyframes hit { 50% { filter: brightness(2.4) sepia(1); transform: translateX(7px); } }
@keyframes hero-lunge { 50% { transform: translateX(25px) rotateY(-7deg) scale(1.04); filter: brightness(1.25); } }
@keyframes enemy-lunge { 50% { transform: translateX(-18px) scale(1.04); filter: brightness(1.25); } }
.damage-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.damage-number { position: absolute; z-index: 2; white-space: nowrap; font-weight: 950; font-size: 20px; color: #fff1d2; text-shadow: 0 2px 3px #000, 0 0 9px #e15b35, 1px 0 #000; animation: float-up 1.1s ease-out forwards; }
.damage-number.enemy-target { right: 14%; top: 33%; }
.damage-number.hero-target { left: 14%; top: 35%; color: #ff7d68; }
.damage-number.critical { color: #ffd14f; font-size: 27px; text-shadow: 0 2px #5c210c, 0 0 13px #ff6d28; animation-name: crit-pop; }
.damage-number.recover { color: #72e39b; }
.damage-number.mana-recover { color: #70b7ff; }
.damage-number.shield-gain { color: #8fc8ff; text-shadow: 0 2px 3px #000, 0 0 9px #3f8ed8, 1px 0 #000; }
@keyframes float-up { to { opacity: 0; transform: translateY(-55px) scale(.9); } }
@keyframes crit-pop { 30% { transform: scale(1.3) rotate(-3deg); } to { opacity: 0; transform: translateY(-62px) scale(.85); } }
.death-overlay { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; text-align: center; background: #160708b8; backdrop-filter: grayscale(.7); }
.death-overlay b { color: #e5634d; font: 800 34px serif; letter-spacing: .18em; }
.death-overlay span { color: #dfc7b7; margin-top: 4px; }

.combat-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #45352a; }
.combat-summary span { display: grid; gap: 1px; padding: 6px 3px; text-align: center; background: #191512; color: var(--muted); font-size: 11px; }
.combat-summary b { order: -1; color: #f2d79f; font-size: 13px; }
.combat-summary strong { color: #dfd1bc; font-size: 11px; }
.combat-summary small { font-size: 10px; line-height: 1.3; }
.boss-progress { padding: 9px 10px 10px; }
.boss-progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.boss-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.boss-actions button { min-height: 42px; }
.boss-actions .summon-item { grid-column: 1 / -1; border-color: #7c4ea1; background: linear-gradient(100deg, #392044, #25172d); color: #e2b7ff; }
.boss-actions .summon-item:disabled { border-color: #493d4d; background: #211c22; color: #756a79; }

.thumb-dock { position: relative; z-index: 11; margin-top: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 15px; background: #1c1714; }
.skill-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.skill-control { position: relative; display: grid; grid-template-rows: 58px 36px; min-width: 0; overflow: hidden; border: 1px solid #574334; border-radius: 12px; background: #2a201a; }
.skill-button { position: relative; min-width: 0; padding: 5px 2px; background: radial-gradient(circle at 50% 40%, #7f4631, #32221c 68%); font-weight: 800; font-size: 12px; }
.skill-button.guard { background: radial-gradient(circle at 50% 40%, #466a83, #252f3a 68%); }
.skill-button .skill-cd { position: absolute; inset: 0; display: none; place-items: center; background: #080707b5; font-size: 22px; }
.skill-button.cooling .skill-cd { display: grid; }
.skill-button small { display: block; color: #dfcdb5; font-size: 10px; }
.skill-button .branch-badge { display: block; overflow: hidden; margin-top: 1px; color: #f1cc7b; font-size: 9px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.learn-skills-hint { grid-column: 1 / -1; min-height: 66px; display: grid; place-content: center; gap: 3px; border: 1px dashed #80633c; border-radius: 11px; background: #251e17; color: var(--gold); }
.learn-skills-hint small { display: block; }
.skill-mode { min-height: 36px; border-top: 1px solid #574334; background: #161311; color: #e2c98f; font-size: 11px; }
.skill-mode.manual { color: #8fc6ed; }
.potion-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.potion-control { display: grid; grid-template-columns: 1fr 70px; gap: 5px; }
.potion-button { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; border-radius: 10px; overflow: hidden; }
.potion-button.health { background: linear-gradient(100deg, #6f2325, #2b1717); }
.potion-button.mana { background: linear-gradient(100deg, #244e78, #171e2b); }
.potion-button i { position: absolute; inset: 0; width: 0; background: #05050599; }
.potion-control select, .market-filters select { min-width: 0; border: 1px solid #4e3d31; border-radius: 9px; padding: 0 6px; background: #15120f; font-size: 11px; }
.combat-log { margin-top: 8px; border: 1px solid #392f28; border-radius: 12px; background: #161311; }
.combat-log summary { padding: 10px 12px; color: var(--muted); font-size: 12px; }
.combat-log ol { max-height: 160px; overflow-y: auto; margin: 0; padding: 0 12px 12px 34px; font-size: 11px; color: #c6b7a4; }
.combat-log li + li { margin-top: 5px; }

.map-list { display: grid; gap: 11px; }
.hidden-raid-panel { margin-bottom: 12px; padding: 13px; border: 1px solid #744c83; border-radius: 15px; background: radial-gradient(circle at 85% 0, #5f257833, transparent 44%), linear-gradient(120deg, #241728, #171215 70%); box-shadow: inset 3px 0 #9e5db7; }
.hidden-raid-panel h3, .hidden-raid-panel p { margin: 0; }
.hidden-raid-heading { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.hidden-raid-heading small { display: block; color: #c7a4d3; font-size: 11px; }
.hidden-raid-heading h3 { margin-top: 2px; color: #efcdf9; font-size: 18px; }
.hidden-raid-heading > span { padding: 5px 8px; border-radius: 999px; background: #442550; color: #e2b5f1; font-size: 11px; white-space: nowrap; }
.summon-inventory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 11px 0; }
.summon-inventory span { padding: 7px 5px; border: 1px solid #49374e; border-radius: 9px; background: #1b151d; text-align: center; }
.summon-inventory b, .summon-inventory small { display: block; }
.summon-inventory b { color: #f0d5f6; font-size: 13px; }
.summon-inventory small { margin-top: 2px; color: #a895ad; font-size: 10px; }
.raid-rule-copy { color: #b9a9be; font-size: 11px; line-height: 1.55; }
.raid-entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.raid-entry-actions .join-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.raid-entry-actions input { min-width: 0; height: 42px; padding: 0 10px; border: 1px solid #5d4863; border-radius: 9px; background: #100d12; color: #f1e8f3; text-transform: uppercase; }
.raid-party-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 7px; color: #c7b4cc; font-size: 11px; }
.raid-code { padding: 5px 8px; border: 1px dashed #a56abb; border-radius: 7px; color: #f0c8ff; font: 800 15px monospace; letter-spacing: .12em; }
.raid-members { display: grid; gap: 6px; }
.raid-member { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; background: #1b151e; }
.raid-member > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #4d2e58; color: #f2d1fb; font-style: normal; font-weight: 800; }
.raid-member b, .raid-member small { display: block; }
.raid-member small { color: #9d8da2; font-size: 10px; }
.raid-member > span:last-child { color: #d18fea; font-size: 11px; }
.raid-member.waiting > span:last-child { color: #857888; }
.raid-party-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.raid-party-actions .raid-start { grid-column: 1 / -1; }
.raid-result { margin-top: 10px; padding: 10px; border-radius: 10px; background: #171119; }
.raid-result.win { border: 1px solid #8f6f37; }
.raid-result.lose { border: 1px solid #833e3e; }
.raid-result h4 { margin: 0 0 5px; color: #f0d4f7; }
.raid-result p { color: #b6a6bb; font-size: 11px; line-height: 1.5; }
.map-chapter { overflow: hidden; border: 1px solid #4d3b2e; border-radius: 15px; background: #171310; }
.map-chapter.active { border-color: #9d7640; box-shadow: inset 3px 0 #d0a253; }
.map-chapter.locked { border-color: #3b312a; }
.map-chapter > summary { min-height: 72px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; background: linear-gradient(105deg, #2d2219, #191512); }
.map-chapter > summary::-webkit-details-marker { display: none; }
.map-chapter > summary::after { content: "›"; grid-column: 3; grid-row: 1; margin-left: 6px; color: var(--gold); font-size: 22px; transition: .18s; }
.map-chapter[open] > summary::after { rotate: 90deg; }
.map-chapter > summary > span { padding: 4px 6px; border-radius: 6px; background: #3b2c20; color: #e6c27a; font-size: 11px; font-weight: 800; white-space: nowrap; }
.map-chapter > summary > div { min-width: 0; }
.map-chapter > summary h3 { color: #f2dfbd; font-size: 17px; }
.map-chapter > summary small { display: block; margin-top: 3px; overflow: hidden; color: #cfc0ad; font-size: 12px; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; }
.map-chapter > summary > b { grid-column: 3; grid-row: 2; color: #e5c47f; font-size: 11px; white-space: nowrap; }
.chapter-map-list { display: grid; gap: 8px; padding: 8px; border-top: 1px solid #3f332a; }
.map-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px; border: 1px solid #44362c; border-radius: 13px; background: linear-gradient(105deg, #211a16, #171310); }
.map-card.locked { opacity: .74; }
.map-card.selected { border-color: #b08045; box-shadow: inset 3px 0 #d0a253; }
.map-index { width: 46px; min-height: 54px; display: grid; place-items: center; align-content: center; gap: 1px; border-radius: 9px; background: #32261e; color: var(--gold); font: 700 19px serif; }
.map-index small { color: #c9b99f; font: 800 10px sans-serif; }
.map-card-main { min-width: 0; }
.map-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-title-row > div { min-width: 0; }
.map-title-row small { display: block; color: #e1b966; font-size: 11px; font-weight: 800; }
.map-title-row button { min-width: 62px; flex: 0 0 auto; }
.map-card h3 { margin-top: 1px; font-size: 16px; }
.map-card p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.map-story-summary { color: #d6c7b3 !important; }
.story-beats { margin: 7px 0 0; padding: 8px 9px 8px 26px; border-left: 2px solid #8b6637; border-radius: 0 8px 8px 0; background: #120f0d; color: #d2c3af; font-size: 12px; line-height: 1.55; }
.story-beats li + li { margin-top: 4px; }
.story-locked { padding: 7px 9px; border: 1px dashed #5a493b; border-radius: 7px; color: #b7aa99 !important; }
.map-enemies { font-size: 12px !important; }
.map-card .map-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.map-meta span { padding: 3px 6px; border-radius: 5px; background: #2c241e; color: #d4c5b1; font-size: 11px; }

.stats-panel, .stackables { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.primary-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.primary-stat { padding: 10px 6px; border-radius: 9px; text-align: center; background: #2b221c; }
.primary-stat b { display: block; font-size: 20px; color: var(--gold); }
.primary-stat span { color: var(--muted); font-size: 12px; }
.derived-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 12px; }
.derived-stats > div, .derived-stats > button { min-width: 0; display: flex; justify-content: space-between; gap: 6px; border: 0; border-bottom: 1px dashed #46382e; border-radius: 0; padding: 0 0 5px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; text-align: left; }
.derived-stats b { color: #e7d8c2; }
.stat-tip-trigger span { display: inline-flex; align-items: center; gap: 4px; }.stat-tip-trigger i { width: 13px; height: 13px; display: inline-grid; place-items: center; border: 1px solid #796047; border-radius: 50%; color: #d2a85b; font: 800 8px serif; }.stat-tip-trigger:active { color: #f0d49c; border-bottom-color: #b2824d; }
.power-chip, .rank-chip { padding: 7px 9px; border-radius: 9px; background: #35291f; color: var(--gold); font-size: 11px; }
.page[data-page="character"] > h3 { margin: 16px 2px 8px; font-size: 14px; }
.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.equipment-slot { min-width: 0; min-height: 84px; display: grid; place-content: center; gap: 4px; padding: 7px; border: 1px solid #4b3b30; border-radius: 11px; text-align: center; background: #1b1714; }
.equipment-slot span { color: var(--muted); font-size: 11px; }
.equipment-slot b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.equipment-slot i { width: 28px; height: 28px; margin: auto; display: grid; place-items: center; border-radius: 7px; background: #30261f; color: var(--gold); font-style: normal; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin: 16px 2px 8px; }
.inventory-list, .market-list, .own-listings, .arena-opponents { display: grid; gap: 7px; }
.item-row, .market-row, .opponent-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 9px; align-items: center; min-width: 0; padding: 9px; border: 1px solid #44362c; border-radius: 11px; background: #1a1613; }
.item-row.selected { border-color: #d1a34e; background: #282016; box-shadow: inset 3px 0 #d9ad5d; }
.item-select { position: relative; display: grid; place-items: center; cursor: pointer; }
.item-select input { position: absolute; z-index: 2; right: -3px; top: -5px; width: 18px; height: 18px; accent-color: #d8ae5b; }
.item-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 9px; background: #29211b; font: 700 14px serif; }
.item-row h4, .market-row h4, .opponent-row h4 { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.item-row p, .market-row p, .opponent-row p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.item-row button, .market-row button, .opponent-row button { min-height: 38px; padding-inline: 10px; }
.item-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: 114px; }
.item-actions button { min-width: 0; min-height: 36px; padding-inline: 5px; font-size: 11px; }
.item-actions .text-button { grid-column: 1 / -1; }
.item-actions .sell-one.confirm { color: #fff4c4; background: linear-gradient(#df783b, #9b3428); box-shadow: 0 0 0 2px #f4bd5c77, 0 0 14px #da5b35aa; animation: confirm-sale .75s ease-in-out infinite alternate; }
@keyframes confirm-sale { to { filter: brightness(1.25); } }
.equipment-quality-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 18px; margin-right: 5px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 999px; vertical-align: 1px; color: #ffdf8a; background: #4b3516e8; box-shadow: 0 0 10px #e3b44a66; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.quality-badge-primal-unique { color: #fff2d4; border-color: #ff9a7c; background: linear-gradient(110deg,#8f211d,#e65835); box-shadow: 0 0 7px #ff704f, 0 0 16px #f4412d99; animation: primal-badge-glow 1.4s ease-in-out infinite alternate; }
.item-row.quality-ancient-unique { border-color: #b89447; background: radial-gradient(circle at 7% 50%, #d4a83a24, transparent 31%), #1d1812; box-shadow: inset 0 0 20px #c69a3320, 0 0 9px #d2a64c2e; }
.item-row.quality-primal-unique { border-color: #d65c48; background: radial-gradient(circle at 7% 50%, #ff5d4336, transparent 33%), linear-gradient(105deg,#2b1714,#1a1412 58%); box-shadow: inset 0 0 22px #e84a3029, 0 0 12px #e54d393f; }
.item-affix-list { min-width: 0; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.item-affix-list > span { max-width: 100%; padding: 2px 5px; border-radius: 5px; background: #30261f; color: #d8cab6; font-size: 10px; line-height: 1.35; }
.quality-ancient-unique .item-affix-list > span { background: #3a2e19; color: #ead39a; }
.quality-primal-unique .item-affix-list > span { background: #3b211c; color: #ffc3ae; }
@keyframes primal-badge-glow { to { filter: brightness(1.18); box-shadow: 0 0 10px #ff8c6e, 0 0 23px #f4412dcc; } }
.stackables { margin-top: 12px; }
.stackables h3 { margin-bottom: 8px; font-size: 14px; }
#stackable-list { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-chip { padding: 5px 7px; border-radius: 7px; background: #30261f; color: #cfbea6; font-size: 10px; }

.arena-reward { min-height: 72px; margin-bottom: 10px; padding: 12px; border: 1px solid #5b472e; border-radius: 13px; background: linear-gradient(110deg, #312419, #181411); }
.arena-reward > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.arena-reward h3 { font-size: 14px; }
.arena-reward p { margin: 4px 0 0; color: #cec0ad; font-size: 12px; line-height: 1.45; }
.arena-result { margin-top: 10px; padding: 14px; scroll-margin-top: 66px; border: 1px solid #4d3d31; border-radius: 13px; background: #1c1714; }
.arena-result.win { border-color: #557c54; }
.arena-result.lose { border-color: #7d3e38; }
.arena-result h3 { margin-bottom: 6px; }
.arena-timeline { max-height: 130px; overflow-y: auto; margin-top: 8px; font-size: 11px; line-height: 1.45; color: var(--muted); }

.market-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.market-filters select { width: 100%; }
.own-listings { margin-bottom: 10px; }
.market-price { color: var(--gold); font-weight: 800; }

.bottom-nav { position: fixed; z-index: 40; left: 50%; bottom: 0; width: min(100%, 520px); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 5px env(safe-area-inset-bottom); border-top: 1px solid #4c3c30; background: #15110ff7; backdrop-filter: blur(14px); }
.bottom-nav button { min-width: 0; min-height: 54px; display: grid; place-content: center; gap: 2px; background: transparent; color: #aa9d8b; font-size: 11px; }
.bottom-nav button span { font: 700 19px serif; }
.bottom-nav button.active { color: var(--gold); }

.class-dialog { width: min(92vw, 440px); max-height: 88dvh; overflow-y: auto; padding: 20px; border: 1px solid #674c35; border-radius: 20px; background: #181411; color: var(--ink); box-shadow: 0 30px 90px #000; }
.class-dialog::backdrop { background: #080707dc; backdrop-filter: blur(6px); }
.class-dialog h2 { margin: 0; font: 700 25px serif; }
.class-dialog form > p:not(.eyebrow) { color: var(--muted); font-size: 12px; }
.class-options { display: grid; gap: 8px; margin-top: 14px; }
.class-option { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 78px; padding: 10px; border: 1px solid #4f3e31; border-radius: 13px; text-align: left; background: #241d18; }
.class-option .portrait { width: 48px; height: 56px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(#61402e, #261c19); font: 700 24px serif; color: var(--gold); }
.class-option b { display: block; font-size: 15px; }
.class-option small { display: block; margin-top: 3px; }
.class-option i { color: var(--gold); font-style: normal; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); max-width: min(86vw, 380px); transform: translate(-50%, 20px); padding: 9px 13px; border: 1px solid #6c523d; border-radius: 10px; background: #2b211b; box-shadow: 0 8px 30px #000a; opacity: 0; pointer-events: none; transition: .2s; font-size: 12px; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Authoritative three-enemy formation rendered in the single pure-2D battle layer. */
.enemy-party { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.enemy-party .actor.enemy { right: 7%; bottom: 24px; }
.enemy-party .actor.enemy-0 { z-index: 5; }
.enemy-party .actor.enemy-1 { right: 29%; bottom: 56px; z-index: 2; scale: .72; filter: brightness(.78); }
.enemy-party .actor.enemy-2 { right: 0; bottom: 69px; z-index: 1; scale: .66; filter: brightness(.7); }
.enemy-party .actor.enemy-1.elite, .enemy-party .actor.enemy-2.elite { filter: brightness(.8) drop-shadow(0 0 8px #a84dde); }
.actor.enemy.attack { animation: enemy-lunge .28s ease; }
@keyframes enemy-lunge { 45% { translate: -14px 0; filter: brightness(1.7); } }
.skill-callout { position: absolute; z-index: 12; left: 50%; top: -29px; width: max-content; max-width: 130px; transform: translate(calc(-50% + var(--callout-shift-x, 0px)), 7px) scale(.8); opacity: 0; overflow-wrap: anywhere; padding: 4px 7px; border: 1px solid #e3c88c; border-radius: 7px; background: #17100eea; color: #ffe6a8; font: 800 12px/1.25 serif; text-align: center; text-shadow: 0 1px #000; transition: .15s; }
.skill-callout.show { opacity: 1; transform: translate(calc(-50% + var(--callout-shift-x, 0px)), 0) scale(1); animation: skill-shout .9s ease forwards; }
@keyframes skill-shout { 70% { opacity: 1; } to { opacity: 0; translate: 0 -10px; } }
.monster-class-badge, .class-mark { display: inline-grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 900; }
.monster-class-badge { position: absolute; z-index: 8; top: 3px; right: 2px; width: 24px; height: 24px; border: 2px solid #e6d3ad; background: #2a211b; font-size: 11px; box-shadow: 0 2px 8px #000; }
.class-mark { width: 18px; height: 18px; font-size: 9px; vertical-align: middle; }
.monster-class-badge.warrior, .class-mark.warrior { color: #ff9c7f; background: #562820; }
.monster-class-badge.mage, .class-mark.mage { color: #9ec8ff; background: #263b63; }
.monster-class-badge.hunter, .class-mark.hunter { color: #b8e48e; background: #304b2b; }
.tier-mark { position: absolute; z-index: 8; left: 2px; top: 4px; padding: 3px 6px; border-radius: 6px; font-size: 9px; letter-spacing: .08em; }
.tier-mark.elite { color: #f0d1ff; background: #6c3485; box-shadow: 0 0 10px #ad5de0; }
.tier-mark.boss { color: #ffedbd; background: #8d2d21; box-shadow: 0 0 13px #ef5e3e; }
.arrival-banner { position: absolute; z-index: 15; left: 50%; top: 30%; min-width: 190px; transform: translateX(-50%); padding: 9px 18px; border: 1px solid #e8b75d; text-align: center; background: #1b0d0ce8; box-shadow: 0 0 35px #e73e2c99; animation: arrival 1.8s ease both; }
.arrival-banner small, .arrival-banner b { display: block; }
.arrival-banner small { color: #f2a858; letter-spacing: .3em; }
.arrival-banner b { margin-top: 3px; color: #ffe7b6; font: 800 18px serif; }
.arrival-banner.elite { border-color: #b66ce2; box-shadow: 0 0 28px #9b48cb88; }
@keyframes arrival { from { opacity: 0; scale: 1.5; } 18%, 72% { opacity: 1; scale: 1; } to { opacity: 0; scale: .9; } }
.battle-stage.boss-entrance { animation: boss-shake .55s ease 2; box-shadow: inset 0 0 50px #d63d2b66; }
.battle-stage.elite-entrance { box-shadow: inset 0 0 40px #9149bc55; }
@keyframes boss-shake { 30% { translate: -3px 1px; } 65% { translate: 3px -1px; } }
.encounter.elite, .encounter.boss { border: 1px solid currentColor; font-size: 12px; letter-spacing: .04em; }
.encounter.boss { animation: boss-pulse 1.2s ease infinite alternate; }
@keyframes boss-pulse { to { box-shadow: 0 0 18px #ef5539aa; } }
.damage-number.enemy-target.target-0 { right: 14%; top: 33%; }
.damage-number.enemy-target.target-1 { right: 39%; top: 22%; }
.damage-number.enemy-target.target-2 { right: 3%; top: 18%; }

.skill-button > i { color: #ffe1a1; font-size: 9px; font-style: normal; }
.skill-mode { display: flex; justify-content: center; align-items: center; gap: 5px; border-top-width: 2px; font-size: 11px; }
.skill-mode .mode-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.skill-mode.auto { border-color: #b48a3e; background: #3a2c17; color: #ffd16d; }
.skill-mode.auto .mode-dot { background: #ffd16d; }
.skill-mode.manual { border-color: #4f9bd2; background: #172c3b; color: #8fd4ff; }
.skill-mode.manual .mode-dot { background: #64bdff; }
.boss-mode { min-height: 48px; display: grid; place-content: center; gap: 2px; border-width: 2px; }
.boss-mode small { font-size: 10px; letter-spacing: .1em; }
.boss-mode b { font-size: 12px; }
.boss-mode.auto { border-color: #c3933e; background: #3b2b16; color: #ffd16d; box-shadow: inset 3px 0 #eabf5b; }
.boss-mode.manual { border-color: #4c91c2; background: #172b39; color: #91d2ff; box-shadow: inset 3px 0 #66b9ee; }

.unlock-rule { margin-top: 6px !important; padding: 5px 7px; border-radius: 6px; background: #321c1b; color: #ee9a84 !important; font-weight: 700; }
.unlock-rule.ready { background: #193124; color: #86d99d !important; }

/* Body-position equipment paper doll and compact character accordions. */
.equipment-grid.paperdoll { position: relative; min-height: 350px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, 64px); grid-template-areas: ". head ." "shoulders chest pouch" "weapon belt token" "gloves pants ." ". boots ."; gap: 6px; padding: 6px; border: 1px solid #40332a; border-radius: 15px; background: radial-gradient(ellipse at 50% 45%, #4d34233d, transparent 48%), #15120f; }
.paperdoll-body { position: absolute; z-index: 0; left: 50%; top: 42px; width: 84px; height: 240px; translate: -50% 0; border-radius: 42px 42px 30px 30px; opacity: .22; background: linear-gradient(#d2a875, #684b35 45%, #2e2623); clip-path: polygon(28% 0,72% 0,82% 12%,72% 20%,87% 36%,72% 48%,68% 67%,82% 100%,57% 100%,50% 71%,43% 100%,18% 100%,32% 67%,28% 48%,13% 36%,28% 20%,18% 12%); }
.equipment-slot { position: relative; z-index: 1; min-height: 0; width: 100%; display: grid; place-content: center; gap: 2px; padding: 5px; border-width: 1px; }
.equipment-slot.selected { border-color: #f2c76e; background: #392b1d; box-shadow: 0 0 0 2px #f2c76e35, 0 0 18px #b67a3266; }
.equipment-slot i { width: 24px; height: 24px; }
.equipment-slot b { font-size: 9px; }
.equipment-slot .equipment-quality-badge { position: absolute; z-index: 2; top: 3px; right: 3px; min-height: 14px; margin: 0; padding: 1px 4px; font-size: 7px; }
.equipment-item-level { position: absolute; z-index: 2; left: 4px; bottom: 3px; padding: 1px 4px; border-radius: 5px; background: #0d0b09c9; color: #d7c9b6; font-size: 7px; line-height: 1.25; }
.equipment-slot.quality-ancient-unique { border-color: #c5a04f; background: radial-gradient(circle at 50% 38%,#cfa43d3d,transparent 55%),#211b13; box-shadow: inset 0 0 15px #dcad3f38, 0 0 9px #d3a84f55; }
.equipment-slot.quality-primal-unique { border-color: #e0644f; background: radial-gradient(circle at 50% 38%,#ff62484f,transparent 55%),#2b1714; box-shadow: inset 0 0 17px #f34d363f, 0 0 11px #f05b496b; }
.equipment-slot.selected.quality-ancient-unique, .equipment-slot.selected.quality-primal-unique { outline: 2px solid #fff0b0; outline-offset: 1px; }
.slot-head { grid-area: head; }.slot-chest { grid-area: chest; }.slot-weapon { grid-area: weapon; }.slot-gloves { grid-area: gloves; }.slot-boots { grid-area: boots; }.slot-belt { grid-area: belt; }.slot-pants { grid-area: pants; }.slot-shoulders { grid-area: shoulders; }.slot-pouch { grid-area: pouch; }.slot-token { grid-area: token; }
.selected-equipment { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding: 11px; border: 1px solid #604932; border-radius: 12px; background: #211a15; }
.selected-equipment > div { min-width: 0; }
.selected-equipment h3 { font-size: 13px; }
.selected-equipment p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.selected-equipment button { flex: 0 0 auto; min-height: 40px; padding-inline: 9px; font-size: 11px; }
.selected-item-summary { flex: 1 1 auto; padding-left: 8px; border-left: 3px solid #5b4937; }
.selected-item-summary.quality-ancient-unique { border-left-color: #dfbd66; text-shadow: 0 0 12px #d2a64c33; }
.selected-item-summary.quality-primal-unique { border-left-color: #ff765f; text-shadow: 0 0 14px #ed513e44; }
.selected-item-summary h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 4px; }
.selected-item-summary .equipment-quality-badge { flex: 0 0 auto; }
.character-section { margin-top: 10px; border: 1px solid #40342c; border-radius: 13px; background: #171310; }
.character-section > summary { min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 11px; cursor: pointer; list-style: none; }
.character-section > summary::-webkit-details-marker { display: none; }
.character-section > summary::before { content: "›"; color: var(--gold); font-size: 18px; transition: .2s; }
.character-section[open] > summary::before { rotate: 90deg; }
.character-section > summary > b { flex: 1; font-size: 13px; }
.character-section > summary > small { max-width: 165px; text-align: right; font-size: 11px; line-height: 1.4; }
.character-section .inventory-list, .character-section .skill-upgrades, .character-section .stackable-groups { padding: 0 8px 8px; }
.inventory-tools { display: grid; gap: 8px; padding: 0 8px 9px; }
.inventory-filter-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px; }
.inventory-filter-row select { min-width: 0; border: 1px solid #584536; border-radius: 9px; padding: 0 8px; background: #15120f; }
.inventory-filter-row button { min-height: 40px; padding-inline: 8px; font-size: 10px; }
.auto-sell-panel { display: grid; gap: 8px; padding: 10px; border: 1px solid #5b452f; border-radius: 11px; background: linear-gradient(110deg,#2b2118,#171310); }
.auto-sell-switch { display: flex; gap: 9px; align-items: center; cursor: pointer; }
.auto-sell-switch input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #d6ad5c; }
.auto-sell-switch span { display: grid; gap: 2px; }.auto-sell-switch b { font-size: 13px; }.auto-sell-switch small { line-height: 1.45; font-size: 11px; }
.auto-sell-qualities { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.auto-sell-qualities label { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; border: 1px solid #4b3b30; border-radius: 8px; background: #181411; font-size: 10px; cursor: pointer; }
.auto-sell-qualities input { width: 16px; height: 16px; accent-color: #d6ad5c; }
.auto-sell-qualities span b { margin-left: 2px; color: #f0d49b; font-size: 9px; }
.stash-breakdown { display: block; padding: 6px 7px; border-radius: 7px; background: #15120f; color: #bcae9b; line-height: 1.45; }
.auto-sell-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6px; }.auto-sell-actions button { min-height: 40px; padding-inline: 7px; font-size: 10px; }
.clear-slot-filter { min-height: 28px; margin-left: 6px; padding: 2px 6px; border-radius: 6px; background: #3b2d21; color: var(--gold); font-size: 9px; }
.skill-upgrades { display: grid; gap: 7px; }
.skill-upgrades article { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px; border-radius: 9px; background: #211a16; }
.skill-upgrades h4 { margin: 0; font-size: 12px; }.skill-upgrades h4 span { color: var(--gold); font-size: 9px; }
.skill-upgrades p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.skill-upgrades button { min-height: 38px; padding-inline: 8px; font-size: 11px; }
.skill-upgrades article.locked { opacity: .58; }
.stackable-groups { display: grid; gap: 8px; }
.stackable-groups section { padding: 9px; border-radius: 10px; background: #211a16; }
.stackable-groups header { margin-bottom: 7px; }.stackable-groups header b, .stackable-groups header small { display: block; }.stackable-groups header small { margin-top: 2px; line-height: 1.35; }
.stackable-groups section > div { display: flex; flex-wrap: wrap; gap: 5px; }
.stack-chip { display: grid; gap: 2px; }.stack-chip b { font-size: 9px; }.stack-chip small { font-size: 8px; }

.skill-tree-entry { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border: 1px solid #74562f; border-radius: 13px; background: radial-gradient(circle at 10% 50%, #88622d42, transparent 42%), #1c1712; }
.skill-tree-entry h3 { margin: 2px 0; font-size: 15px; }.skill-tree-entry p { margin: 0; color: var(--muted); font-size: 10px; }.skill-tree-entry button { flex: 0 0 auto; }
.selected-equipment-actions { display: grid; flex: 0 0 min(46%, 170px); gap: 5px; }.selected-equipment-actions button { width: 100%; }

.feature-dialog { width: min(100%, 520px); height: 100dvh; max-width: none; max-height: none; margin: 0 auto; padding: 0; border: 0; background: #110e0d; color: var(--ink); }
.feature-dialog::backdrop { background: #050404df; backdrop-filter: blur(6px); }
.feature-shell { position: relative; height: 100%; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: radial-gradient(circle at 50% 0, #59331f4a, transparent 36%), #110e0d; }
.feature-header { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 74px; padding: max(10px, env(safe-area-inset-top)) 12px 9px; border-bottom: 1px solid #4d3a2c; background: #181310f5; box-shadow: 0 8px 22px #0008; }
.feature-header h2 { margin: 0; font: 800 19px serif; }.feature-header > div:last-child { display: flex; align-items: center; gap: 6px; }
#skill-tree-reset { min-width: 50px; padding-inline: 7px; white-space: nowrap; }
.close-feature { width: 42px; height: 42px; padding: 0; border: 1px solid #584536; border-radius: 50%; background: #2b221c; color: #d7c8b4; font-size: 25px; }

.skill-tree-canvas { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 14px calc(min(38dvh, 260px) + 24px); scroll-padding-bottom: calc(min(38dvh, 260px) + 24px); }
.skill-tier { position: relative; min-height: 178px; display: grid; justify-items: center; align-content: start; }
.tier-label { margin-bottom: 8px; color: #a99883; font-size: 9px; letter-spacing: .08em; }
.main-skill-node { z-index: 2; width: 92px; height: 92px; display: grid; place-content: center; gap: 3px; padding: 8px; border: 3px solid #534a41; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #4e4034, #171310 70%); color: #a79c8c; box-shadow: 0 6px 18px #000b; text-align: center; }
.main-skill-node span { font: 800 13px serif; }.main-skill-node b { color: #c5b49f; font-size: 10px; }
.main-skill-node.learned, .main-skill-node.maxed { border-color: #d1a650; color: #ffe0a1; box-shadow: 0 0 0 3px #d1a65025, 0 0 22px #d1a65045; }
.main-skill-node.available { border-color: #c9c4b9; color: #f4eee5; animation: node-ready 1.2s ease-in-out infinite alternate; }
.main-skill-node.focused, .branch-node.focused { outline: 2px solid #fff1b7; outline-offset: 4px; }
@keyframes node-ready { to { box-shadow: 0 0 20px #f4e7c358; } }
.branch-rail { z-index: 2; width: min(100%, 330px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.branch-node { min-width: 0; min-height: 52px; display: grid; justify-items: center; align-content: start; gap: 7px; overflow: visible; padding: 0 2px; background: transparent; color: #9a8c79; font-size: 9px; }
.branch-node i { width: 35px; height: 35px; display: grid; place-items: center; border: 2px solid #554b42; background: #1d1916; color: #a39684; font: 800 9px sans-serif; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.branch-node span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.branch-node.available i { border-color: #a9a49c; color: #e4ded4; }.branch-node.selected { color: #f4d184; }.branch-node.selected i { border-color: #e0b24f; background: #6b4a1d; color: #fff0bc; box-shadow: 0 0 16px #d49d35aa; }
.branch-node.exclusive { opacity: .48; }.branch-node.locked { opacity: .3; }
.tree-connector { position: absolute; z-index: 0; left: 50%; top: 79px; width: 2px; height: 120px; translate: -50% 0; background: #3b3631; }.tree-connector.learned { background: linear-gradient(#d5a84c, #5d492d); box-shadow: 0 0 7px #d5a84c77; }
.skill-node-detail { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; min-height: 176px; max-height: min(38dvh, 260px); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #785c36; background: #1d1713f7; box-shadow: 0 -10px 28px #000b; backdrop-filter: blur(12px); }
.skill-node-detail > div { min-width: 0; max-height: calc(min(38dvh, 260px) - 28px); overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; }.skill-node-detail h3 { margin: 2px 0 5px; color: #f2d08b; font-size: 15px; }.skill-node-detail p { margin: 4px 0; color: #d2c2ae; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }.skill-node-detail .switch-warning { color: #e6aa79; }.skill-node-detail button { max-width: 122px; min-height: 48px; padding-inline: 9px; font-size: 11px; }
.skill-loadout { position: sticky; z-index: 3; top: -20px; margin: -4px -2px 14px; padding: 10px; border: 1px solid #806039; border-radius: 12px; background: #211813f4; box-shadow: 0 7px 20px #000a; backdrop-filter: blur(10px); }
.skill-loadout header, .v2-skill-category > header, .passive-section > header { display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.skill-loadout h3, .v2-skill-category h3, .passive-section h3 { margin: 2px 0 0; color: #efd195; font-size: 14px; }
.skill-loadout header p, .v2-skill-category header small, .passive-section header small { max-width: 62%; margin: 0; color: #a99a87; font-size: 9px; line-height: 1.35; text-align: right; }
.skill-loadout > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.skill-loadout > div button { min-width: 0; min-height: 52px; display: grid; grid-template-columns: 18px 1fr; gap: 1px 4px; align-items: center; padding: 5px; border: 1px solid #65503a; border-radius: 8px; background: #17120f; color: #e6c987; text-align: left; }
.skill-loadout button i { grid-row: 1 / 3; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #6d4a20; font-size: 8px; }.skill-loadout button span, .skill-loadout button small { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.skill-loadout button span { font-size: 9px; }.skill-loadout button small { color: #9f917f; font-size: 7px; }
.v2-skill-category, .passive-section { margin-top: 14px; padding: 10px; border: 1px solid #49392e; border-radius: 13px; background: #171310; }
.v2-skill-category > div { display: grid; gap: 10px; margin-top: 9px; }
.v2-skill-card { min-width: 0; display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 8px; padding: 9px 7px; border: 1px solid #3e352e; border-radius: 11px; background: #120f0d; }
.v2-skill-card.equipped { border-color: #9d7440; box-shadow: inset 3px 0 #d1a650; }
.v2-skill-main { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 4px; }.v2-skill-main > small { min-height: 13px; color: #b9a58b; font-size: 8px; }.v2-skill-main > em { max-width: 92px; overflow-wrap: anywhere; color: #b98955; font-size: 8px; font-style: normal; text-align: center; }
.v2-skill-card .main-skill-node { width: 76px; height: 76px; border-width: 2px; }.v2-skill-card .main-skill-node span { font-size: 11px; }
.v2-branch-grid { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.branch-path { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 5px 3px; border: 1px solid #302a25; border-radius: 9px; background: #181411; }.branch-path > span { color: #6e5a40; font-size: 9px; }.branch-path > div { width: 100%; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.v2-skill-card .branch-node { width: 100%; min-height: 48px; gap: 3px; padding: 0; }.v2-skill-card .branch-node i { width: 26px; height: 26px; font-size: 8px; }.v2-skill-card .branch-node span { font-size: 8px; }
.passive-section > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }.passive-section article { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 8px; border: 1px solid #45382e; border-radius: 9px; background: #120f0d; }.passive-section article.locked { opacity: .48; }.passive-section article.selected { border-color: #d1a650; background: #2c2114; }.passive-section article b, .passive-section article small { display: block; }.passive-section article b { color: #e5c684; font-size: 10px; }.passive-section article small { margin-top: 3px; color: #b5a693; font-size: 8px; line-height: 1.4; overflow-wrap: anywhere; }.passive-section article button { min-width: 35px; min-height: 34px; padding: 4px; font-size: 9px; }
.key-passives > div { grid-template-columns: 1fr; }.key-passives article button { min-width: 70px; }
.skill-node-detail .detail-actions { display: grid; gap: 5px; overflow: visible; }.skill-node-detail .detail-actions button { width: 116px; }

.reforge-dialog { height: min(94dvh, 850px); margin-top: auto; border-radius: 20px 20px 0 0; }
.reforge-dialog .feature-shell { border-radius: inherit; }.reforge-content { min-width: 0; overflow-y: auto; padding: 12px 10px 130px; }
.feature-notice { margin: 0 0 10px; padding: 9px 10px; border: 1px solid #7a5632; border-radius: 9px; background: #302317; color: #e5c180; font-size: 10px; line-height: 1.45; }.feature-notice.locked { border-color: #743d36; background: #301918; color: #e59a87; }
.reforge-affixes, .reforge-results { display: grid; gap: 7px; }.reforge-affixes > header, .reforge-results > header { display: flex; justify-content: space-between; align-items: end; gap: 8px; margin: 3px 2px; }.reforge-affixes > header small, .reforge-results > header small { max-width: 190px; text-align: right; }
.reforge-affix { width: 100%; min-height: 54px; display: grid; grid-template-columns: 28px 1fr; gap: 7px; align-items: center; padding: 7px 9px; border: 1px solid #443930; border-radius: 10px; background: #191613; color: #b7aa99; text-align: left; }
.reforge-affix > span { display: grid; place-items: center; color: #796c5c; }.reforge-affix b, .reforge-affix small { display: block; }.reforge-affix b { font-size: 11px; }.reforge-affix small { margin-top: 3px; font-size: 8px; }
.reforge-affix.selectable { border-color: #75634e; color: #e8dcc8; }.reforge-affix.selected { border-color: #e0ad4d; background: #332516; color: #ffe1a1; box-shadow: inset 3px 0 #e0ad4d, 0 0 13px #c58a3245; }.reforge-affix.locked { opacity: .55; }
.wish-picker { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5px 9px; align-items: center; margin-top: 12px; padding: 10px; border: 1px solid #544331; border-radius: 11px; background: #211a15; }.wish-picker select { min-width: 0; border: 1px solid #654f39; border-radius: 8px; padding-inline: 8px; background: #110f0d; }.wish-picker small { grid-column: 1 / -1; }
.reforge-results { margin-top: 13px; }.reforge-results > button { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #5c4938; border-radius: 11px; background: #211a15; text-align: left; }.reforge-results > button:first-of-type { border-color: #776550; }.reforge-results > button:nth-of-type(n+2) { border-color: #b17c3d; background: linear-gradient(100deg, #332316, #1b1713); }.reforge-results b, .reforge-results span > small { display: block; }.reforge-results b { margin-top: 3px; color: #f0d39b; font-size: 11px; }
.affix-delta { flex: 0 0 auto; padding: 3px 6px; border-radius: 6px; }.affix-delta.up { color: #89dda4; background: #193726; }.affix-delta.down { color: #ef8b7e; background: #3b1d1c; }.affix-delta.change { color: #d7b878; background: #382b1c; }
.reforge-footer { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; min-height: 82px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #674d31; background: #1b1511f8; box-shadow: 0 -9px 25px #000c; }.reforge-footer div { min-width: 0; }.reforge-footer span, .reforge-footer small { display: block; font-size: 9px; }.reforge-footer small { margin-top: 4px; }.reforge-footer button { min-width: 135px; min-height: 50px; padding-inline: 9px; font-size: 11px; }

.stat-detail-dialog { width: min(100%, 520px); max-width: none; max-height: 82dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: transparent; color: var(--ink); }
.stat-detail-dialog::backdrop { background: #050404c9; backdrop-filter: blur(5px); }
.stat-detail-sheet { overflow: hidden; border: 1px solid #735537; border-bottom: 0; border-radius: inherit; background: radial-gradient(circle at 20% 0, #7044234f, transparent 42%), #181310; box-shadow: 0 -20px 60px #000d; }
.stat-detail-sheet > header { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px 10px; border-bottom: 1px solid #4d3a2c; }.stat-detail-sheet h2 { margin: 0; font: 800 20px serif; }.stat-detail-sheet > header button { width: 40px; height: 40px; padding: 0; border: 1px solid #584536; border-radius: 50%; background: #2b221c; color: #d7c8b4; font-size: 24px; }
#stat-detail-content { max-height: 64dvh; overflow-y: auto; padding: 13px 14px calc(18px + env(safe-area-inset-bottom)); }
.stat-detail-value { display: flex; align-items: baseline; gap: 9px; padding: 12px; border: 1px solid #765632; border-radius: 12px; background: #2a2017; }.stat-detail-value small { color: var(--muted); }.stat-detail-value strong { color: #f2c66f; font: 900 27px serif; }.stat-detail-value span { margin-left: auto; color: #c8b59b; font-size: 10px; }
.stat-detail-section { margin-top: 13px; }.stat-detail-section h3 { margin: 0 0 7px; color: #e8d3b2; font-size: 12px; }.stat-detail-section p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.stat-detail-section code { display: block; padding: 9px 10px; border-radius: 8px; background: #100e0c; color: #e6bd75; font-size: 11px; }
.stat-source-list { display: grid; gap: 5px; }.stat-source-list div { display: flex; justify-content: space-between; padding: 7px 9px; border-bottom: 1px dashed #4b3b30; color: var(--muted); font-size: 10px; }.stat-source-list b { color: #ead8bc; }

/* Arena identity and visible authoritative playback. */
.attempt-chip { padding: 7px 10px; border: 1px solid #5b4932; border-radius: 9px; background: #302419; color: #f0c875; font-size: 11px; font-weight: 800; }
.page[data-page="arena"] .eyebrow { font-size: 13px; }
.attempt-chip.empty { color: #dc8270; border-color: #783b35; }
.arena-identity { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 14px; align-items: center; margin-bottom: 10px; padding: 13px 15px; border: 1px solid #826131; border-radius: 14px; background: radial-gradient(circle at 15% 50%, #8b5b2b45, transparent 32%), linear-gradient(110deg,#312215,#171310); }
.arena-identity > small { grid-column: 1; color: #e0bc77; }.arena-identity > b { grid-column: 1; grid-row: 2; color: #ffe2a0; font: 900 29px serif; }
.arena-identity > div { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 6px; justify-content: end; color: #dacbb7; text-align: right; font-size: 12px; }
.arena-attempt-purchase { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 10px; padding: 10px 12px; border: 1px solid #6a5736; border-radius: 12px; background: linear-gradient(105deg, #282016, #171310); }
.arena-attempt-purchase h3 { font-size: 14px; }.arena-attempt-purchase p { margin: 4px 0 0; color: #cfc0ad; font-size: 12px; line-height: 1.45; }
.arena-attempt-purchase button { min-width: 96px; min-height: 38px; padding-inline: 10px; }
.opponent-row h4 { font-size: 14px; }
.opponent-row p { color: #cfc1ae; font-size: 12px; }
.opponent-source { padding: 2px 5px; border-radius: 4px; font-size: 11px; }
.opponent-source.player { color: #94e1a9; background: #244632; }.opponent-source.npc { color: #c5b5a2; background: #38302a; }
.arena-battle-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.arena-battle-heading small { color: var(--gold); }.arena-battle-heading > span { color: var(--muted); font-size: 10px; }
.arena-stage { position: relative; min-height: 210px; overflow: hidden; margin-top: 8px; border: 1px solid #4d382b; border-radius: 12px; background: radial-gradient(ellipse at 50% 90%, #79412f38, transparent 55%), linear-gradient(#18171a,#2d2018); }
.arena-stage .actor { bottom: 25px; scale: .78; }
.arena-stage .actor.hero { left: 7%; }.arena-stage .actor.enemy { right: 7%; }
.arena-stage .damage-number.enemy-target { right: 15%; top: 32%; }.arena-stage .damage-number.hero-target { left: 15%; top: 32%; }

@media (max-height: 860px) {
  .battle-stage { min-height: 212px; }
}

@media (max-width: 370px), (max-height: 680px) {
  :root { --nav-h: 62px; }
  .topbar { min-height: 56px; padding-top: max(7px, env(safe-area-inset-top)); }
  .topbar .eyebrow { display: none; }
  .page { padding: 7px 7px 16px; }
  .offline-card { padding-block: 3px; }
  .offline-card button { min-height: 34px; }
  .battle-toolbar { padding: 3px 8px 1px; }
  .battle-toolbar button { min-height: 32px; }
  .duel-bars { padding-block: 2px; }
  .battle-stage { min-height: 126px; }
  .actor { bottom: 12px; transform-origin: bottom; scale: .66; }
  .actor.hero { left: 8%; }
  .actor.enemy { right: 7%; }
  .enemy-party .actor.enemy { bottom: 12px; }
  .enemy-party .actor.enemy-1 { right: 28%; bottom: 32px; scale: .54; }
  .enemy-party .actor.enemy-2 { right: -2%; bottom: 38px; scale: .5; }
  .combat-summary span { padding-block: 3px; }
  .boss-progress { padding: 4px 8px; }
  .boss-actions { gap: 6px; margin-top: 5px; }
  .boss-actions button { min-height: 38px; }
  .thumb-dock { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 4px); z-index: 25; margin-top: 5px; padding: 5px; box-shadow: 0 -5px 18px #000b; }
  .skill-control { grid-template-rows: 42px 28px; }
  .skill-mode { min-height: 28px; }
  .potion-row { margin-top: 4px; }
  .potion-button, .potion-control select { min-height: 36px; }
  .combat-log { margin-top: 6px; }
  .equipment-slot { min-height: 74px; }
  .equipment-grid.paperdoll { min-height: 294px; grid-template-rows: repeat(4, 67px); }
  .equipment-grid.paperdoll .equipment-slot { min-height: 0; }
  .inventory-filter-row { grid-template-columns: 1fr 1fr; }.inventory-filter-row select { grid-column: 1 / -1; }
  .arena-stage { min-height: 185px; }
  .skill-tree-canvas { padding-bottom: calc(min(34dvh, 215px) + 24px); scroll-padding-bottom: calc(min(34dvh, 215px) + 24px); }
  .skill-node-detail { min-height: 164px; max-height: min(34dvh, 215px); padding-inline: 9px; }
  .skill-node-detail > div { max-height: calc(min(34dvh, 215px) - 24px); }
  .skill-node-detail p { font-size: 11px; }
  .skill-node-detail button { max-width: 108px; }
}

@media (min-width: 521px) {
  body { background: #090807; }
}

@media (max-width: 370px) {
  .skill-tree-canvas { padding-inline: 8px; }
  .v2-skill-card { grid-template-columns: 82px minmax(0, 1fr); gap: 5px; padding-inline: 5px; }
  .v2-skill-card .main-skill-node { width: 68px; height: 68px; }
  .passive-section > div { grid-template-columns: 1fr; }
  .skill-loadout > div { gap: 3px; }.skill-loadout > div button { grid-template-columns: 1fr; justify-items: center; padding-inline: 2px; text-align: center; }.skill-loadout button i { grid-row: auto; }.skill-loadout button small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Pure 2D cel-shaded dark Three Kingdoms visual system. */
:root {
  --bg: #0f1418;
  --panel: #171d22;
  --panel-2: #222a30;
  --panel-3: #2d353a;
  --line: #080b0e;
  --line-soft: #4a555c;
  --ink: #f0e8d8;
  --muted: #b8b0a3;
  --gold: #c99a47;
  --red: #8f3031;
  --red-bright: #d05a4d;
  --green: #4f8f68;
  --blue: #5b91a4;
  --soul: #76b4c3;
  --ochre: #a77b38;
  --bronze: #8c6a3f;
  --cel-shadow: #080b0e;
  --cel-edge: #59646b;
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
}

html, body { background: #0a0e11; }
body { color: var(--ink); letter-spacing: .01em; }
.ambient {
  opacity: 1;
  background:
    linear-gradient(135deg, transparent 0 72%, #182229 72% 74%, transparent 74%),
    radial-gradient(circle at 50% -10%, #31434b 0 1%, #1a252b 22%, transparent 52%),
    #0a0e11;
}
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 31px, #94a3a81c 31px 32px);
}
h1, h2, h3, .page-heading h2, .page-heading h3 { font-family: "STKaiti", "KaiTi", serif; letter-spacing: .04em; }
.eyebrow { color: #d7a94f; font-weight: 900; letter-spacing: .13em; }
.fine-print, small { color: var(--muted); }

button, select, input { border-radius: 8px; }
button { transition: translate .1s ease, filter .1s ease, box-shadow .1s ease; }
button:not(:disabled):active, button:not(:disabled).pressed {
  transform: none;
  translate: 0 3px;
  filter: brightness(1.16) saturate(1.05);
  box-shadow: inset 0 0 0 2px #f3d68a, 0 1px 0 #050708;
}
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--soul); outline-offset: 2px; }
.primary, .danger, .toggle-button, .text-button, .summon-item {
  border: 2px solid var(--cel-shadow);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #ffffff24, 0 3px 0 var(--cel-shadow);
}
.primary { background: #b98535; color: #15100a; box-shadow: inset 0 0 0 1px #e2bd6a, 0 3px 0 #5a3d18; }
.danger { background: #8f3031; color: #fff0e8; box-shadow: inset 0 0 0 1px #c75b4f, 0 3px 0 #46191a; }
.toggle-button, .text-button { background: #293137; color: #e0d7c6; border-color: #090c0f; }
.primary:disabled, .danger:disabled, button:disabled { opacity: .58; filter: grayscale(.15); }
input, select, .raid-entry-actions input, .wish-picker select {
  border: 2px solid #080b0e;
  background: #11171b;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px #4f5a60, inset 0 3px #07090b;
}

.app {
  background: #10161af7;
  border-inline: 2px solid #07090b;
  box-shadow: 0 0 0 1px #3c464d, 0 0 70px #000d;
}
.auth-card,
.battle-card,
.stats-panel,
.hidden-raid-panel,
.map-chapter,
.map-card,
.selected-equipment,
.skill-tree-entry,
.character-section,
.arena-identity,
.arena-attempt-purchase,
.arena-reward,
.arena-result,
.item-row,
.market-row,
.opponent-row,
.auto-sell-panel,
.stackable-groups section,
.skill-upgrades article,
.skill-loadout,
.v2-skill-category,
.passive-section,
.feature-notice,
.reforge-affix,
.reforge-results > button,
.stat-detail-value {
  border: 2px solid var(--cel-shadow);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-soft), 0 4px 0 #07090b;
}

.auth-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #171d22;
  box-shadow: inset 0 0 0 1px #566169, 8px 9px 0 #07090b, 0 28px 70px #000b;
}
.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 88px;
  background: #26343b;
  clip-path: polygon(0 0, 100% 0, 100% 54%, 68% 75%, 38% 48%, 0 82%);
  opacity: .7;
}
.auth-card > * { position: relative; }
.auth-card .seal { border: 3px solid #411718; background: var(--red); color: #f0d5a0; box-shadow: 5px 5px 0 #080b0e; }
.auth-card input { border: 2px solid #07090b; border-radius: 8px; background: #0e1418; box-shadow: inset 0 0 0 1px #4b565d, inset 0 4px #07090b; }

.topbar {
  border-bottom: 3px solid #07090b;
  background: #151c21f5;
  box-shadow: inset 0 -1px #4a555c, 0 5px 0 #090c0e;
  backdrop-filter: none;
}
.topbar h1 { color: #f3e8d4; text-shadow: 2px 2px #07090b; }
.top-resources span, .power-chip, .rank-chip, .attempt-chip {
  border: 2px solid #07090b;
  border-radius: 7px;
  background: #293137;
  color: #edcf8b;
  box-shadow: inset 0 0 0 1px #59636a, 0 2px 0 #07090b;
}
.xp-meter, .meter { border: 2px solid #07090b; border-radius: 5px; background: #0a0d0f; box-shadow: inset 0 0 0 1px #3f474c; }
.xp-meter { height: 9px; }
.xp-meter i { border-radius: 1px; background: #b98234; box-shadow: inset 0 -3px #70461f; }
.meter { height: 9px; }
.meter i { border-radius: 1px; background: #b43c39; box-shadow: inset 0 -3px #6e2224; }
.meter.mana i { background: #568ca1; box-shadow: inset 0 -3px #315b70; }
.meter.enemy i { background: #b43c39; box-shadow: inset 0 -3px #6e2224; }
.meter.boss i { background: #b98535; box-shadow: inset 0 -2px #76501f; }

.page { padding-inline: 11px; }
.page-heading { margin: 4px -2px 12px; padding: 12px 12px 10px; border-left: 6px solid var(--red); background: #1a2227; box-shadow: inset 0 -2px #07090b; }
.page-heading h2 { color: #f0e2c9; text-shadow: 2px 2px #07090b; }
.offline-card { border: 2px solid #07090b; border-radius: 9px; background: #26352f; box-shadow: inset 0 0 0 1px #597062, 0 3px 0 #07090b; }
.status-dot { background: #70b888; box-shadow: 0 0 0 2px #16301f; }

.battle-card { border-radius: 12px; background: #171d22; }
.battle-toolbar { min-height: 39px; padding: 7px 9px 6px; border-bottom: 2px solid #080b0e; background: #222a30; }
.render-mark { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 2px solid #080b0e; border-radius: 7px; background: #313a40; color: #b8d5d9; box-shadow: inset 0 0 0 1px #5d6a70; font-size: 10px; font-weight: 900; }
.render-mark i { width: 8px; height: 8px; border-radius: 2px; background: var(--soul); box-shadow: 2px 2px 0 #17303a; }
.encounter { border: 2px solid #080b0e; border-radius: 7px; background: #313a40; color: #e2dacb; box-shadow: inset 0 0 0 1px #5c676d; }
.encounter.elite { background: #59405f; color: #f1d8f4; }
.encounter.boss { background: #7c2b2d; color: #ffe2ac; box-shadow: inset 0 0 0 1px #ba554c, 0 2px 0 #3b1214; }
.duel-bars { background: #151b20; border-bottom: 2px solid #080b0e; }
.unit-bar > div:first-child { color: #dfd6c6; }
.enemy-defense-text { color: #aeb8b9; }

.battle-stage {
  min-height: 244px;
  border-block: 2px solid #07090b;
  background:
    linear-gradient(180deg, #152129 0 43%, transparent 43%),
    linear-gradient(164deg, transparent 0 57%, #293239 57% 64%, #14191d 64% 100%);
  isolation: isolate;
}
.battle-stage::before {
  inset: auto -4% 31% -4%;
  height: 48%;
  opacity: 1;
  background:
    linear-gradient(78deg, transparent 0 9%, #0b0f12 9% 12%, transparent 12% 24%, #0b0f12 24% 27%, transparent 27% 74%, #0b0f12 74% 78%, transparent 78%),
    linear-gradient(160deg, transparent 0 54%, #344249 54% 64%, transparent 64%),
    linear-gradient(200deg, transparent 0 48%, #222e34 48% 61%, transparent 61%);
  clip-path: polygon(0 45%, 12% 15%, 24% 48%, 38% 6%, 53% 52%, 70% 18%, 83% 46%, 100% 10%, 100% 100%, 0 100%);
}
.battle-stage::after { left: 3%; right: 3%; bottom: 16px; height: 18px; border: 0; background: #050708a8; filter: none; }
.battle-stage.has-art, .arena-stage.has-art {
  background-image: linear-gradient(180deg, #09111842, #0a0d10a8), var(--battle-art);
  background-size: cover;
  background-position: center 62%;
}
.battle-stage.has-art::before {
  inset: 0;
  height: auto;
  opacity: 1;
  clip-path: none;
  background: linear-gradient(90deg, #080b0e30, transparent 28% 72%, #080b0e40), linear-gradient(0deg, #080b0e80, transparent 42%);
}
.battle-stage.has-art .battle-2d::before { opacity: .24; background: radial-gradient(circle at 70% 24%, #73aebb45 0 3%, transparent 4%); }
.battle-2d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background:
    linear-gradient(90deg, transparent 0 11%, #59282a 11% 13%, transparent 13% 80%, #11181d 80% 83%, transparent 83%),
    radial-gradient(circle at 72% 22%, #73aebb55 0 3%, transparent 4%);
}

.actor { width: 104px; height: 138px; filter: drop-shadow(3px 4px 0 #07090b); }
.actor.hero { left: 8%; transform: none; }
.actor.enemy { right: 8%; }
.actor-sprite { display: none; }
.actor.has-sprite { width: 112px; height: 168px; bottom: 15px; }
.actor.has-sprite .actor-sprite {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  display: block;
  width: 185%;
  height: 100%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(3px 4px 0 #07090b);
}
.actor.enemy.has-sprite .actor-sprite { width: 154%; }
.actor.enemy.boss.has-sprite { width: 126px; height: 184px; bottom: 10px; }
.actor.enemy.boss.has-sprite .actor-sprite { width: 168%; }
.actor.player-opponent.has-sprite .actor-sprite { transform: translateX(-50%) scaleX(-1); }
.actor.has-sprite .actor-body { visibility: hidden; }
.actor-shadow { left: 8%; right: 8%; bottom: 1px; height: 12px; background: #050708b8; filter: none; }
.actor-body {
  left: 18px;
  bottom: 8px;
  width: 68px;
  height: 82px;
  border: 3px solid #07090b;
  border-radius: 16px 16px 24px 24px;
  background: #303a40;
  box-shadow: inset -14px 0 #1b2429, inset 0 -20px #20292e, inset 0 0 0 2px #59636a;
}
.actor.hero .actor-body::before,
.actor.enemy .actor-body::before {
  left: 4px;
  top: -43px;
  width: 54px;
  height: 50px;
  border: 3px solid #07090b;
  border-radius: 46% 48% 42% 44%;
  background: #b98262;
  box-shadow: inset -14px -5px #855640, inset 0 5px #d0a080;
}
.actor.hero .actor-body::after {
  left: 4px;
  top: 17px;
  width: 54px;
  height: 38px;
  border: 3px solid #07090b;
  border-radius: 7px 7px 12px 12px;
  background: #3a454a;
  box-shadow: inset -13px 0 #20292e, inset 0 -10px #242d32, 0 -5px #74292b;
}
.actor.hero .face { left: 18px; top: -19px; width: 8px; height: 5px; background: #101215; box-shadow: 21px 0 #101215; transform: rotate(-7deg); }
.actor.hero .weapon {
  display: block;
  left: 52px;
  top: 39px;
  width: 52px;
  height: 9px;
  border: 2px solid #07090b;
  border-radius: 2px 70% 70% 2px;
  background: #c5c8c3;
  box-shadow: inset 0 -3px #6d7679;
  transform: rotate(-31deg);
  transform-origin: left center;
}
.actor.hero.mage .actor-body { background: #34314b; box-shadow: inset -14px 0 #211f35, inset 0 -20px #25223a, inset 0 0 0 2px #5d5675; }
.actor.hero.mage .actor-body::after { background: #46415e; box-shadow: inset -13px 0 #28253c, inset 0 -10px #302c46, 0 -5px #31576b; }
.actor.hero.mage .weapon { left: 56px; top: 20px; width: 9px; height: 78px; border-radius: 5px; background: #725738; transform: rotate(-13deg); }
.actor.hero.hunter .actor-body { background: #344039; box-shadow: inset -14px 0 #202b25, inset 0 -20px #26312b, inset 0 0 0 2px #5a695f; }
.actor.hero.hunter .actor-body::after { background: #465347; box-shadow: inset -13px 0 #29342c, inset 0 -10px #303c33, 0 -5px #6e532a; }
.actor.hero.hunter .weapon { left: 50px; top: 23px; width: 47px; height: 63px; border: 5px solid #8c6a3f; border-left: 0; border-radius: 0 70% 70% 0; background: transparent; transform: rotate(-10deg); }
.actor.enemy .actor-body { width: 68px; transform: none; background: #3b3f3d; box-shadow: inset 14px 0 #252b29, inset 0 -20px #282d2a, inset 0 0 0 2px #606864; }
.actor.enemy .actor-body::before { background: #8c735f; box-shadow: inset 14px -5px #645041, inset 0 5px #ab9279; }
.actor.enemy .eye { left: 15px; top: -19px; width: 8px; height: 5px; background: var(--soul); box-shadow: 22px 0 var(--soul), 0 0 0 1px #10232a; }
.actor.enemy .horn { left: 9px; top: -48px; width: 12px; height: 24px; border: 2px solid #07090b; background: var(--ochre); }
.actor.enemy.elite { filter: drop-shadow(3px 4px 0 #07090b) drop-shadow(0 0 7px #87539a); }
.actor.enemy.boss { right: 9%; filter: drop-shadow(3px 4px 0 #07090b) drop-shadow(0 0 7px #a33b39); }
.actor em { border: 2px solid #07090b; border-radius: 6px; background: #4f8295; box-shadow: 2px 2px 0 #07090b; }
@keyframes hit { 50% { filter: brightness(1.8) saturate(.4) drop-shadow(4px 4px 0 #07090b); transform: translateX(7px); } }
@keyframes hero-lunge { 50% { transform: translateX(25px) scale(1.04); filter: brightness(1.2) drop-shadow(3px 4px 0 #07090b); } }
@keyframes enemy-lunge { 50% { transform: translateX(-18px) scale(1.04); filter: brightness(1.2) drop-shadow(3px 4px 0 #07090b); } }
.monster-class-badge, .tier-mark, .class-mark { border: 2px solid #07090b; box-shadow: 2px 2px 0 #07090b; }
.skill-callout { border: 2px solid #07090b; border-radius: 6px; background: #ece0c6; color: #171c20; box-shadow: 3px 3px 0 #07090b; }
.damage-number { color: #fff2cf; text-shadow: 2px 2px 0 #07090b, -1px -1px 0 #07090b; }
.damage-number.critical { color: #ffd05a; text-shadow: 3px 3px 0 #5a1d15, -1px -1px 0 #07090b; }
.death-overlay { background: #2b1114e8; backdrop-filter: none; }

.combat-summary { gap: 2px; background: #07090b; border-bottom: 2px solid #07090b; }
.combat-summary span { background: #1c2328; }
.combat-summary b { color: #e3bd6e; }
.boss-progress { background: #171d22; }
.boss-actions .summon-item { background: #4a3152; color: #ead3ee; box-shadow: inset 0 0 0 1px #795b80, 0 3px 0 #211624; }

.thumb-dock { border: 2px solid #07090b; border-radius: 10px; background: #171d22; box-shadow: inset 0 0 0 1px #515c62, 0 4px 0 #07090b; }
.skill-control { border: 2px solid #07090b; border-radius: 9px; background: #252d32; box-shadow: inset 0 0 0 1px #566169; }
.skill-button { background: #7a3030; box-shadow: inset -10px -12px #4d2022, inset 0 0 0 2px #a84a43; text-shadow: 1px 1px #07090b; }
.skill-button.guard { background: #3f6f82; box-shadow: inset -10px -12px #274654, inset 0 0 0 2px #6796a5; }
.skill-button .skill-cd { background: #080b0edb; }
.skill-mode { border-top: 2px solid #07090b; background: #171d22; }
.potion-button { border: 2px solid #07090b; box-shadow: inset 0 0 0 1px #ffffff25, 0 3px 0 #07090b; }
.potion-button.health { background: #7f292d; }
.potion-button.mana { background: #345f75; }
.combat-log { border: 2px solid #07090b; border-radius: 9px; background: #171d22; box-shadow: inset 0 0 0 1px #444f55; }

.hidden-raid-panel { border-color: #080b0e; background: #241d29; box-shadow: inset 0 0 0 1px #70567b, inset 6px 0 #765085, 0 4px 0 #07090b; }
.summon-inventory span, .raid-member, .raid-result { border: 2px solid #080b0e; border-radius: 8px; background: #1b2025; box-shadow: inset 0 0 0 1px #4e575c; }
.map-chapter { border-radius: 10px; background: #171d22; }
.map-chapter.active { border-color: #080b0e; box-shadow: inset 0 0 0 1px #6c5631, inset 6px 0 #b58235, 0 4px 0 #07090b; }
.map-chapter > summary { background: #242c31; border-bottom: 0; }
.map-chapter > summary > span, .map-index { border: 2px solid #080b0e; border-radius: 7px; background: #31383c; box-shadow: inset 0 0 0 1px #60696e, 0 2px 0 #080b0e; }
.chapter-map-list { border-top: 2px solid #080b0e; background: #12181c; }
.map-card { border-radius: 9px; background: #1b2227; }
.map-card.selected { border-color: #080b0e; box-shadow: inset 0 0 0 1px #705a36, inset 6px 0 #b58235, 0 4px 0 #07090b; }
.map-art { display: block; height: 104px; margin: 0 0 10px; border: 2px solid #080b0e; border-radius: 8px; background-image: linear-gradient(90deg, #080b0e25, transparent 45%, #080b0e50), var(--map-art); background-size: cover; background-position: center 24%; box-shadow: inset 0 0 0 1px #4c575d, 0 3px 0 #07090b; }
.story-beats { border-left: 5px solid var(--ochre); background: #11171b; }
.map-meta span, .stack-chip { border: 1px solid #080b0e; background: #293137; box-shadow: inset 0 0 0 1px #49545a; }

.stats-panel { border-radius: 10px; }
.primary-stat { border: 2px solid #080b0e; border-radius: 8px; background: #293137; box-shadow: inset 0 0 0 1px #58636a, 0 2px 0 #07090b; }
.primary-stat b { color: #ddb55f; text-shadow: 2px 2px #07090b; }
.derived-stats > div, .derived-stats > button { border-bottom: 2px solid #313a40; }
.equipment-grid.paperdoll { min-height: 344px; grid-template-columns: minmax(74px, 1fr) minmax(126px, 1.55fr) minmax(74px, 1fr); grid-template-rows: repeat(5, 62px); grid-template-areas: "head hero shoulders" "chest hero gloves" "weapon hero pants" "belt hero boots" "pouch hero token"; gap: 6px; border: 2px solid #080b0e; border-radius: 12px; background: radial-gradient(ellipse at 50% 50%, #2d3940 0 18%, transparent 50%), #12181c; box-shadow: inset 0 0 0 1px #3f4a50; }
.paperdoll-body { width: 112px; height: 222px; top: 38px; border: 3px solid #07090b; border-radius: 48% 48% 30% 30%; opacity: .72; background: #394349; box-shadow: inset -24px 0 #20292e, inset 0 -50px #252e33, 0 5px 0 #07090b; clip-path: polygon(29% 0, 71% 0, 82% 9%, 78% 24%, 96% 37%, 78% 53%, 71% 71%, 86% 100%, 57% 100%, 50% 75%, 43% 100%, 14% 100%, 29% 71%, 22% 53%, 4% 37%, 22% 24%, 18% 9%); }
.paperdoll-body.art { position: relative; z-index: 0; left: auto; top: auto; grid-area: hero; align-self: stretch; width: 100%; height: 100%; translate: none; overflow: hidden; border: 0; border-radius: 9px; opacity: 1; background: linear-gradient(#1a242a, #10161a); box-shadow: inset 0 0 0 2px #07090b, inset 0 0 0 3px #46535a; clip-path: none; pointer-events: none; }
.paperdoll-body.art img { width: 210%; height: 100%; transform: translateX(-26%); object-fit: contain; object-position: center bottom; filter: drop-shadow(4px 5px 0 #07090b); }
.paperdoll-body.art.warrior img { width: 280%; transform: translateX(-32%); }
.slot-head { grid-area: head; }.slot-shoulders { grid-area: shoulders; }.slot-chest { grid-area: chest; }.slot-gloves { grid-area: gloves; }.slot-weapon { grid-area: weapon; }.slot-pants { grid-area: pants; }.slot-belt { grid-area: belt; }.slot-boots { grid-area: boots; }.slot-pouch { grid-area: pouch; }.slot-token { grid-area: token; }
.equipment-slot { border: 2px solid #080b0e; border-radius: 8px; background: #20282d; box-shadow: inset 0 0 0 1px #4d585e, 0 3px 0 #07090b; }
.equipment-slot.selected { outline: 3px solid #d3a64d; outline-offset: 1px; }
.equipment-slot i, .item-icon { border: 2px solid #080b0e; border-radius: 7px; background: #313a40; box-shadow: inset 0 0 0 1px #606a70, 0 2px 0 #07090b; }
.item-row, .market-row, .opponent-row { border-radius: 8px; background: #1b2227; }
.item-row.selected { background: #30291d; box-shadow: inset 0 0 0 1px #755d34, inset 6px 0 #c1913c, 0 4px 0 #07090b; }
.character-section { border-radius: 9px; background: #171d22; }
.character-section > summary { background: #242c31; border-bottom-color: #080b0e; }
.skill-tree-entry { background: #232a2e; box-shadow: inset 0 0 0 1px #6e5732, inset 6px 0 #b58235, 0 4px 0 #07090b; }
.auto-sell-panel { background: #1a2125; }

.bottom-nav { border-top: 3px solid #07090b; background: #151c21fa; box-shadow: inset 0 1px #4b565d, 0 -5px 0 #080b0e; backdrop-filter: none; }
.bottom-nav button { color: #8f9a9e; }
.bottom-nav button span { width: 31px; height: 31px; display: grid; place-items: center; margin: auto; border: 2px solid transparent; border-radius: 7px; font-family: "STKaiti", "KaiTi", serif; }
.bottom-nav button.active { color: #f0d18d; }
.bottom-nav button.active span { border-color: #07090b; background: #7e3031; box-shadow: inset 0 0 0 1px #b65248, 0 3px 0 #07090b; }

.class-dialog form, .feature-dialog, .stat-detail-sheet { background: #11171b; }
.class-dialog form, .feature-shell, .stat-detail-sheet { border: 2px solid #07090b; box-shadow: inset 0 0 0 1px #515c62, 0 -5px 0 #07090b; }
.class-option { border: 2px solid #07090b; border-radius: 9px; background: #20282d; box-shadow: inset 0 0 0 1px #4f5a60, 0 3px 0 #07090b; }
.class-option { grid-template-columns: 60px 1fr auto; }
.class-option .portrait { width: 58px; height: 64px; overflow: hidden; border: 2px solid #07090b; border-radius: 8px; background: #3b454a; box-shadow: inset -12px -12px #252e33, inset 0 0 0 1px #647077; }
.class-option .portrait img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(2px 2px 0 #07090b); }
.feature-header { border-bottom: 3px solid #07090b; background: #1c2429; box-shadow: inset 0 -1px #4d585e; }
.close-feature, .stat-detail-sheet > header button { border: 2px solid #07090b; border-radius: 8px; background: #30383d; box-shadow: inset 0 0 0 1px #5b666c, 0 3px 0 #07090b; }
.main-skill-node { border: 3px solid #07090b; background: #343d42; box-shadow: inset -14px -14px #20282d, inset 0 0 0 2px #606a70, 0 5px 0 #07090b; }
.main-skill-node.learned, .main-skill-node.maxed { border-color: #07090b; background: #73532a; box-shadow: inset -14px -14px #49351e, inset 0 0 0 2px #bd9250, 0 5px 0 #07090b; }
.branch-node i { border: 3px solid #07090b; background: #31393e; color: #b7c1c4; box-shadow: inset -6px -6px #1e2529, 0 3px 0 #07090b; }
.branch-node.selected i { border-color: #07090b; background: #8a6430; color: #fff0bc; box-shadow: inset -6px -6px #563d20, inset 0 0 0 2px #d0a75a, 0 3px 0 #07090b; }
.tree-connector, .tree-connector.learned { width: 4px; background: #07090b; box-shadow: inset 1px 0 #707b80; }
.skill-node-detail, .reforge-footer { border-top: 3px solid #07090b; background: #171d22fa; box-shadow: inset 0 1px #505b61, 0 -5px 0 #07090b; backdrop-filter: none; }
.skill-loadout, .v2-skill-category, .passive-section { border-radius: 9px; background: #171d22; }
.v2-skill-card, .branch-path, .passive-section article { border: 2px solid #07090b; border-radius: 8px; background: #11171b; box-shadow: inset 0 0 0 1px #3e484e; }
.v2-skill-card.equipped, .passive-section article.selected { border-color: #07090b; box-shadow: inset 0 0 0 1px #7a6035, inset 5px 0 #c0913d, 0 3px 0 #07090b; }
.reforge-dialog { border-radius: 14px 14px 0 0; }
.reforge-affix, .reforge-results > button { border-radius: 8px; background: #1a2125; }
.reforge-affix.selected { background: #33291d; box-shadow: inset 0 0 0 1px #806539, inset 6px 0 #c0913d, 0 4px 0 #07090b; }
.affix-delta { border: 2px solid #07090b; border-radius: 6px; }
.stat-detail-sheet { border-radius: 14px 14px 0 0; }
.stat-detail-value { background: #252d31; }

.arena-identity { background: #222a2f; box-shadow: inset 0 0 0 1px #765b31, inset 6px 0 #b58235, 0 4px 0 #07090b; }
.arena-attempt-purchase { background: #1b2227; }
.arena-stage { border: 3px solid #07090b; border-radius: 9px; background: linear-gradient(#18242b 0 48%, #293237 48% 62%, #151b1f 62%); box-shadow: inset 0 0 0 1px #526067; }
.opponent-source { border: 1px solid #07090b; border-radius: 5px; }
.opponent-portrait { width: 42px; height: 48px; padding: 0; overflow: hidden; }
.opponent-portrait img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(2px 2px 0 #07090b); }
.market-filters { padding: 8px; border: 2px solid #07090b; border-radius: 9px; background: #1a2126; box-shadow: inset 0 0 0 1px #4a555b, 0 3px 0 #07090b; }

@media (max-width: 370px), (max-height: 680px) {
  .battle-stage { min-height: 154px; }
  .actor { scale: .66; }
  .thumb-dock { background: #171d22f7; box-shadow: inset 0 0 0 1px #515c62, 0 -5px 0 #07090b; }
}

@media (min-width: 521px) {
  body { background: #070a0c; }
}