:root {
  color-scheme: dark;
  --ink: #100d13;
  --ink-2: #1a171d;
  --panel: rgba(36, 29, 38, 0.94);
  --panel-soft: rgba(21, 16, 23, 0.78);
  --line: #5c4b50;
  --bone: #e9dec8;
  --muted: #aa9b92;
  --blood: #d94336;
  --blood-dark: #7e1f22;
  --fire: #ff8a32;
  --gold: #f2c14e;
  --poison: #68c65c;
  --shield: #55bceb;
  --curse: #9a5ce5;
  --shadow: 0 18px 70px rgba(0,0,0,.55);
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #08070a; }
body { color: var(--bone); user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button:disabled { cursor: not-allowed; filter: grayscale(.65) brightness(.55); }

#app { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #2b1217, #08070a 62%); }
.game-shell { position: relative; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); overflow: hidden; background: var(--ink); border: 1px solid #3b2d32; box-shadow: 0 0 90px #000; isolation: isolate; }

.top-bar { position: absolute; z-index: 30; inset: 0 0 auto 0; height: 12%; min-height: 66px; padding: 1.1% 2%; display: grid; grid-template-columns: 1.1fr 2.4fr 1fr; align-items: center; gap: 1.4%; background: linear-gradient(180deg, rgba(10,8,11,.96), rgba(18,13,17,.78) 72%, transparent); }
.brand-mini { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { width: 42px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; transform: rotate(-5deg); font-size: 23px; font-weight: 950; color: #180b0d; background: var(--blood); border: 3px solid #7f302b; box-shadow: 0 0 20px rgba(217,67,54,.35); clip-path: polygon(8% 7%, 92% 0, 100% 86%, 18% 100%, 0 32%); }
.brand-mini div { min-width: 0; }
.brand-mini strong { display: block; white-space: nowrap; font-size: clamp(14px, 1.25vw, 22px); letter-spacing: .06em; }
.brand-mini small { display: block; color: var(--blood); font-weight: 800; letter-spacing: .25em; font-size: clamp(8px, .65vw, 11px); }
.run-stats { display: flex; justify-content: center; gap: 8px; }
.stat-chip { min-width: 82px; padding: 7px 11px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border: 1px solid rgba(233,222,200,.13); border-radius: 7px; background: rgba(22,17,23,.68); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.stat-chip span { color: var(--muted); font-size: clamp(8px, .66vw, 12px); white-space: nowrap; }
.stat-chip b { font-size: clamp(14px, 1.15vw, 20px); font-variant-numeric: tabular-nums; }
.stat-chip.gold b { color: var(--gold); }
.stat-chip.record b { color: var(--fire); }
.top-actions { display: flex; justify-content: flex-end; gap: 8px; }
.icon-button { width: clamp(36px, 3.1vw, 52px); aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(#2d252e, #19151b); font-weight: 900; cursor: pointer; box-shadow: 0 5px 12px rgba(0,0,0,.35); transition: .12s ease; }
.icon-button:hover { border-color: var(--gold); transform: translateY(-2px); }
.icon-button:active { transform: scale(.94); }

.battle-scene { position: absolute; inset: 0; overflow: hidden; }
.backdrop { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(10,7,10,.1), rgba(12,8,12,.05) 45%, rgba(10,7,10,.55)), url('./assets/dungeon-cellar.png'); background-size: cover; background-position: center; transform: scale(1.02); transition: transform 1s ease; }
.battle-scene.moving .backdrop { animation: dungeonMove .75s ease-in-out; }
@keyframes dungeonMove { 0% { transform: scale(1.02) translateX(0); } 48% { transform: scale(1.07) translateX(-2.5%); filter: blur(1px); } 100% { transform: scale(1.02) translateX(0); } }
.red-haze { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 60% 55%, transparent 25%, rgba(170,20,27,.28) 80%), linear-gradient(90deg, rgba(140,12,20,.15), transparent 35%, rgba(140,12,20,.15)); mix-blend-mode: screen; transition: opacity .35s; }
.battle-scene.fury-2 .red-haze { opacity: .2; }
.battle-scene.fury-3 .red-haze { opacity: .42; animation: hazePulse 1.4s infinite; }
.battle-scene.fury-4 .red-haze { opacity: .75; animation: hazePulse .65s infinite; }
@keyframes hazePulse { 50% { filter: brightness(1.45); } }
.torch-flicker { position: absolute; top: 25%; width: 10%; height: 30%; background: radial-gradient(circle, rgba(255,126,32,.2), transparent 65%); filter: blur(8px); animation: flicker .18s alternate infinite; }
.torch-flicker.left { left: 0; }.torch-flicker.right { right: 0; }
@keyframes flicker { to { opacity: .7; transform: scale(1.05); } }
.screen-flash { position: absolute; z-index: 50; inset: 0; pointer-events: none; opacity: 0; background: #fff; }
.screen-flash.active { animation: flash .18s ease-out; }
.screen-flash.red { background: #d94336; }
@keyframes flash { 0% { opacity: .52; } 100% { opacity: 0; } }

.enemy-panel { position: absolute; z-index: 10; top: 12.5%; left: 50%; width: min(40%, 560px); transform: translateX(-50%); text-align: center; transition: .25s; }
.enemy-heading { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-bottom: 5px; text-shadow: 0 2px 5px #000; }
.enemy-heading strong { font-size: clamp(15px, 1.4vw, 25px); }
.enemy-heading span { font-size: clamp(9px, .7vw, 12px); color: var(--muted); }
#enemyRank { padding: 2px 7px; color: #24150d; border-radius: 3px; background: var(--bone); font-weight: 900; }
.health-bar { position: relative; overflow: hidden; background: rgba(10,8,10,.92); border: 2px solid #5c4b50; box-shadow: inset 0 2px 6px #000, 0 3px 12px #000; }
.health-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, #77212a, var(--blood), #ed6452); transition: width .2s ease; }
.enemy-health { height: clamp(18px, 1.55vw, 27px); border-radius: 4px; }
.enemy-health span { position: relative; z-index: 2; display: block; font-size: clamp(9px, .7vw, 12px); line-height: 1.7; font-weight: 900; text-shadow: 0 1px 2px #000; }
.intent-badge { position: relative; width: 170px; height: 28px; margin: 7px auto 0; display: none; align-items: center; justify-content: center; gap: 7px; overflow: hidden; color: #fff; border: 1px solid #ff6657; border-radius: 4px; background: rgba(83,18,23,.9); box-shadow: 0 0 20px rgba(217,67,54,.32); font-size: 11px; }
.intent-badge.show { display: flex; animation: intentShake .25s infinite alternate; }
.intent-badge > span { position: relative; z-index: 2; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #2a0b0c; background: #ff6b59; font-weight: 1000; }
.intent-badge b { position: relative; z-index: 2; }
.intent-badge i { position: absolute; inset: auto auto 0 0; width: 0; height: 3px; background: #ffb03a; }
@keyframes intentShake { to { transform: translateX(1px); } }

.combat-lane { position: absolute; z-index: 5; inset: 18% 4% 21%; }
.actor { position: absolute; bottom: 5%; width: 25%; height: 76%; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 90%; will-change: transform, filter; }
.player-actor { left: 14%; }
.enemy-actor { right: 13%; }
.actor-shadow { position: absolute; z-index: 0; bottom: 1%; width: 70%; height: 10%; border-radius: 50%; background: rgba(0,0,0,.62); filter: blur(7px); }
.player-art, .enemy-art { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; filter: drop-shadow(0 8px 9px rgba(0,0,0,.72)); }
.player-art svg, .enemy-art svg { width: 100%; height: 100%; overflow: visible; }
.player-art .weapon { transform-origin: 220px 170px; }
.actor-label { position: absolute; z-index: 4; bottom: 1%; display: flex; align-items: center; gap: 8px; padding: 3px 9px; border: 1px solid rgba(233,222,200,.2); border-radius: 3px; background: rgba(16,13,19,.82); font-size: clamp(8px, .72vw, 12px); white-space: nowrap; }
.actor-label span { color: var(--muted); }
.modifier-badge { position: absolute; z-index: 7; right: 0; top: 15%; padding: 4px 8px; border: 1px solid var(--curse); border-radius: 3px; background: #351c46; color: #e7c9ff; font-weight: 900; font-size: 11px; }

.actor.attack { animation: actorAttack .34s ease-out; }
.actor.attack .weapon { animation: weaponSwing .34s ease-out; }
.actor.hit { animation: actorHit .28s ease-out; filter: brightness(2) sepia(1) saturate(4); }
.actor.guard { animation: actorGuard .28s ease; filter: drop-shadow(0 0 22px rgba(85,188,235,.95)); }
.actor.perfect { animation: perfectGuard .35s ease; filter: drop-shadow(0 0 30px #fff) drop-shadow(0 0 22px var(--shield)); }
.actor.skill { animation: skillMove .55s ease-out; }
.actor.running { animation: runBob .22s alternate infinite; }
.actor.dead { animation: actorDeath .7s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes actorAttack { 45% { transform: translateX(19%) scale(1.08) rotate(-2deg); } }
@keyframes weaponSwing { 45% { transform: rotate(55deg); } }
@keyframes actorHit { 35% { transform: translateX(-8%) skewX(-5deg); } }
@keyframes actorGuard { 50% { transform: translateX(3%) scale(.96); } }
@keyframes perfectGuard { 40% { transform: scale(1.12); } }
@keyframes skillMove { 45% { transform: translateX(30%) rotate(-4deg) scale(1.08); } }
@keyframes runBob { to { transform: translate(4%, -2%) rotate(1deg); } }
@keyframes actorDeath { to { transform: translateY(30%) rotate(20deg) scale(.65); opacity: 0; filter: saturate(0); } }
.enemy-actor.attack { animation-name: enemyAttack; }
@keyframes enemyAttack { 45% { transform: translateX(-20%) scale(1.1); } }
.enemy-actor.hit { animation-name: enemyHit; }
@keyframes enemyHit { 40% { transform: translateX(10%) skewX(5deg); } }

.clash-point { position: absolute; z-index: 9; left: 50%; top: 52%; width: 2px; height: 2px; pointer-events: none; }
.clash-point.slash::before { content: ""; position: absolute; width: 190px; height: 34px; left: -95px; top: -17px; border-radius: 50%; border-top: 12px solid #fff4c9; filter: drop-shadow(0 0 8px #ff8a32); transform: rotate(-25deg); animation: slashFx .28s ease-out forwards; }
.clash-point.skill-slash::before { content: ""; position: absolute; width: 300px; height: 220px; left: -150px; top: -110px; border: 22px solid transparent; border-left-color: var(--fire); border-right-color: var(--blood); border-radius: 50%; filter: drop-shadow(0 0 20px #ff6b25); animation: spinFx .5s ease-out forwards; }
@keyframes slashFx { from { opacity: 0; transform: rotate(-35deg) scale(.25); } 35% { opacity: 1; } to { opacity: 0; transform: rotate(-15deg) scale(1.5); } }
@keyframes spinFx { from { opacity: 0; transform: rotate(0) scale(.3); } 40% { opacity: 1; } to { opacity: 0; transform: rotate(270deg) scale(1.4); } }
.damage-layer { position: absolute; z-index: 20; inset: 0; pointer-events: none; }
.damage-number { position: absolute; font-weight: 1000; font-size: clamp(20px, 2vw, 38px); color: var(--bone); text-shadow: 0 3px 0 #1a0c0e, 0 0 10px #000; animation: damageFloat .75s ease-out forwards; }
.damage-number.crit { color: var(--gold); font-size: clamp(28px, 2.8vw, 52px); }
.damage-number.heal { color: var(--poison); }.damage-number.block { color: var(--shield); }
@keyframes damageFloat { 0% { opacity: 0; transform: translate(-50%, 15px) scale(.55); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -65px) scale(.9); } }
.battle-message { position: absolute; z-index: 17; left: 50%; bottom: 22%; transform: translateX(-50%); color: var(--bone); font-weight: 900; font-size: clamp(12px, 1vw, 17px); text-shadow: 0 3px 5px #000; opacity: .9; transition: .2s; }

.bottom-hud { position: absolute; z-index: 25; inset: auto 0 0; height: 22%; min-height: 105px; padding: 1.1% 2.2% 1.5%; display: grid; grid-template-columns: 1.05fr 1.1fr 1.4fr; gap: 3%; align-items: center; background: linear-gradient(0deg, rgba(9,7,10,.99), rgba(17,12,16,.93) 76%, transparent); }
.vitals-heading, .fury-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-size: clamp(10px, .75vw, 13px); color: var(--muted); }
.vitals-heading strong, .fury-heading strong { color: var(--bone); }
.player-health { height: 20px; border-radius: 4px; }
.player-health i { background: linear-gradient(90deg, #6c1f27, var(--blood)); }
.build-tags { margin-top: 8px; display: flex; gap: 5px; min-height: 20px; overflow: hidden; }
.build-tags span { padding: 2px 7px; border: 1px solid #5c4b50; border-radius: 10px; color: var(--muted); background: rgba(0,0,0,.25); font-size: clamp(8px, .62vw, 11px); white-space: nowrap; }
.fury-heading b { min-width: 30px; color: var(--blood); text-align: right; font-variant-numeric: tabular-nums; }
.fury-meter { position: relative; height: 22px; overflow: hidden; border: 2px solid #5d3b40; background: #140d11; clip-path: polygon(0 0, 98% 0, 100% 50%, 98% 100%, 0 100%); }
.fury-meter > i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #7e1f22, var(--blood) 55%, var(--fire)); box-shadow: 0 0 16px var(--blood); transition: width .3s ease; }
.fury-meter .notch { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.35); }.n1{left:25%}.n2{left:50%}.n3{left:75%}
.fury-meter-wrap small { display: block; margin-top: 6px; color: var(--muted); text-align: center; font-size: clamp(8px, .61vw, 10px); }
.combat-actions { height: 100%; display: grid; grid-template-columns: 1fr 1.22fr; gap: 10px; align-items: center; }
.action-button { position: relative; height: min(88px, 79%); min-height: 62px; overflow: hidden; border: 2px solid; border-radius: 8px; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.12); transition: transform .1s, filter .1s; }
.action-button:hover { filter: brightness(1.16); transform: translateY(-2px); }.action-button:active { transform: scale(.96); }.action-button:disabled { cursor: not-allowed; filter: grayscale(.7) brightness(.55); }
.action-button b { display: block; font-size: clamp(15px, 1.45vw, 25px); letter-spacing: .1em; }.action-button small { display: block; margin-top: 2px; font-size: clamp(8px, .62vw, 11px); color: rgba(255,255,255,.72); }
.action-button .key { position: absolute; top: 6px; left: 7px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.28); border-radius: 3px; color: rgba(255,255,255,.65); font-size: 9px; }
.guard-action { border-color: #408cad; background: linear-gradient(145deg, #215574, #162d41); }
.skill-action { border-color: #a84631; background: linear-gradient(145deg, #8c2f26, #39151a); }
.skill-action > i { position: absolute; inset: auto 0 0; height: 0; background: rgba(10,8,10,.72); transition: height .1s linear; }
.control-hint { position: absolute; z-index: 40; right: 1.8%; bottom: 1%; color: rgba(233,222,200,.36); font-size: 9px; pointer-events: none; }

.modal-root { position: fixed; z-index: 100; inset: 0; display: none; place-items: center; padding: 24px; background: rgba(8,6,9,.78); backdrop-filter: blur(7px); }
.modal-root.open { display: grid; }
.modal { width: min(920px, 94vw); max-height: 92vh; overflow: auto; padding: 28px; border: 2px solid #5c4b50; border-radius: 13px; background: linear-gradient(150deg, rgba(43,33,43,.98), rgba(19,15,21,.99)); box-shadow: 0 28px 100px #000, inset 0 1px rgba(255,255,255,.05); animation: modalIn .2s ease-out; }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 5px; color: var(--blood); font-weight: 900; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; }
.modal h1, .modal h2 { margin: 0; font-size: clamp(28px, 4vw, 58px); line-height: 1.05; letter-spacing: .04em; }
.modal h2 { font-size: clamp(24px, 2.7vw, 40px); }
.modal-sub { margin: 10px 0 0; color: var(--muted); line-height: 1.7; }
.close-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 7px; background: #19151b; cursor: pointer; }
.menu-hero { position: relative; overflow: hidden; min-height: 430px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; padding: 40px; background: radial-gradient(circle at 80% 25%, rgba(217,67,54,.26), transparent 35%), linear-gradient(120deg, rgba(16,13,19,.35), rgba(16,13,19,.94)), url('./assets/dungeon-cellar.png') center/cover; }
.menu-copy { position: relative; z-index: 2; max-width: 620px; }
.menu-copy h1 { font-size: clamp(42px, 6vw, 88px); text-shadow: 0 7px 0 #270c11, 0 14px 40px #000; }
.menu-copy h1 em { display: block; color: var(--blood); font-style: normal; }
.menu-copy .tagline { margin: 16px 0 24px; color: var(--bone); font-size: clamp(15px, 1.35vw, 21px); font-weight: 700; }
.menu-stats { display: flex; gap: 10px; margin: 20px 0; }
.menu-stats div { padding: 10px 15px; border: 1px solid rgba(233,222,200,.16); border-radius: 7px; background: rgba(12,9,12,.68); }
.menu-stats span { display:block; color: var(--muted); font-size: 11px; }.menu-stats b { font-size: 21px; color: var(--gold); }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.primary-button, .secondary-button, .danger-button, .ad-button { min-width: 180px; min-height: 54px; padding: 13px 22px; border-radius: 7px; border: 2px solid; cursor: pointer; font-weight: 900; letter-spacing: .05em; transition: .12s; }
.primary-button { color: #26120b; border-color: #ffb24d; background: linear-gradient(#ffad42, #e06a27); box-shadow: 0 8px 30px rgba(255,115,38,.25); }
.secondary-button { color: var(--bone); border-color: var(--line); background: linear-gradient(#332932, #1b171d); }
.danger-button { color: #fff; border-color: #f15b48; background: linear-gradient(#b93430, #5b171d); }
.ad-button { color: #231936; border-color: #c69af5; background: linear-gradient(#c896ff, #8a54c7); }
.primary-button:hover, .secondary-button:hover, .danger-button:hover, .ad-button:hover { transform: translateY(-2px); filter: brightness(1.1); }
.primary-button:active, .secondary-button:active, .danger-button:active, .ad-button:active { transform: scale(.97); }
.button-note { display: block; margin-top: 3px; font-size: 10px; opacity: .7; font-weight: 600; }

.choice-grid, .route-grid, .upgrade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.choice-card, .route-card, .upgrade-card { position: relative; min-height: 260px; padding: 20px; text-align: left; border: 2px solid #5c4b50; border-radius: 10px; background: linear-gradient(160deg, rgba(61,48,58,.96), rgba(22,18,24,.98)); cursor: pointer; transition: .16s ease; }
.choice-card:hover, .route-card:hover, .upgrade-card:hover { transform: translateY(-7px); border-color: var(--gold); box-shadow: 0 16px 35px rgba(0,0,0,.4); }
.choice-card .card-icon, .route-card .card-icon, .upgrade-card .card-icon { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 25px; border: 2px solid currentColor; border-radius: 50%; background: rgba(0,0,0,.25); font-size: 31px; }
.choice-card h3, .route-card h3, .upgrade-card h3 { margin: 0 0 9px; color: var(--bone); font-size: 21px; }.choice-card p, .route-card p, .upgrade-card p { margin: 0; min-height: 48px; color: var(--muted); line-height: 1.55; font-size: 13px; }
.card-tag { position: absolute; top: 16px; right: 16px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 10px; font-size: 10px; }
.choice-card[data-tag="暴击"] { color: var(--gold); }.choice-card[data-tag="流血"] { color: var(--blood); }.choice-card[data-tag="毒爆"] { color: var(--poison); }.choice-card[data-tag="反击"] { color: var(--shield); }.choice-card[data-tag="贪婪"] { color: var(--gold); }.choice-card[data-tag="生存"] { color: #b9d5de; }.choice-card[data-tag="狂暴"] { color: var(--fire); }
.modal-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.result-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }.result-summary div { padding: 16px; text-align:center; border: 1px solid rgba(233,222,200,.15); border-radius: 7px; background: rgba(0,0,0,.2); }.result-summary span { display:block; color:var(--muted); font-size:11px; }.result-summary b { display:block; margin-top:5px; color:var(--gold); font-size:24px; }
.leaderboard { display: grid; gap: 7px; }.rank-row { display:grid; grid-template-columns: 50px 1fr 130px; align-items:center; padding: 10px 14px; border:1px solid rgba(233,222,200,.12); border-radius:6px; background:rgba(0,0,0,.2); }.rank-row.you { border-color:var(--fire); background:rgba(217,67,54,.11); }.rank-row b { color:var(--gold); text-align:right; }
.ad-stage { text-align:center; padding: 25px; }.ad-stage .ad-orb { width:120px; height:120px; display:grid; place-items:center; margin:0 auto 22px; border-radius:50%; border:4px solid var(--curse); background:radial-gradient(circle, #5f3482, #24152e); font-size:42px; animation:adPulse 1s infinite; }.ad-progress { height:10px; overflow:hidden; border-radius:10px; background:#120d16; }.ad-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--curse),#d7a8ff); transition:width .1s linear; }@keyframes adPulse{50%{transform:scale(1.08);box-shadow:0 0 35px var(--curse)}}
.toast-root { position:fixed; z-index:200; left:50%; bottom:4%; transform:translateX(-50%); display:grid; gap:8px; pointer-events:none; }.toast { padding:11px 18px; border:1px solid var(--gold); border-radius:6px; color:var(--bone); background:rgba(22,16,21,.96); box-shadow:var(--shadow); animation:toastIn 2.3s forwards; }@keyframes toastIn{0%{opacity:0;transform:translateY(14px)}12%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px)}}

.battle-scene.shake { animation: screenShake .25s linear; }
@keyframes screenShake { 25%{transform:translate(5px,-2px)}50%{transform:translate(-4px,3px)}75%{transform:translate(3px,1px)} }

/* V2 gameplay additions */
.stat-chip.biome { min-width: 92px; }
.stat-chip.biome b { color: #d8b8ff; font-size: clamp(11px, .9vw, 16px); }
.room-progress { position:absolute; z-index:18; top:12.2%; left:2.4%; display:flex; gap:5px; padding:5px 7px; border:1px solid rgba(233,222,200,.12); border-radius:16px; background:rgba(10,8,11,.52); }
.room-progress i { width:10px; height:10px; border:1px solid #6b5b61; border-radius:50%; background:#171219; box-shadow:inset 0 1px 3px #000; }
.room-progress i.done { border-color:var(--fire); background:var(--blood); box-shadow:0 0 8px rgba(217,67,54,.8); }
.room-progress i.current { border-color:var(--gold); background:var(--gold); animation:progressPulse .7s infinite alternate; }
.room-progress i.boss { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); border-radius:0; }
@keyframes progressPulse { to { transform:scale(1.35); filter:brightness(1.4); } }
.chain-badge { position:absolute; z-index:18; left:3%; top:23%; display:none; align-items:baseline; gap:7px; padding:7px 12px; border-left:3px solid var(--gold); background:linear-gradient(90deg,rgba(16,13,19,.88),transparent); text-shadow:0 2px 5px #000; }
.chain-badge.show { display:flex; animation:chainIn .25s ease-out; }
.chain-badge span { color:var(--gold); font-size:10px; letter-spacing:.18em; }.chain-badge b { color:white; font-size:26px; }.chain-badge small { color:var(--muted); font-size:9px; }
@keyframes chainIn { from { opacity:0; transform:translateX(-14px); } }
.intent-badge.heavy { border-color:var(--fire); background:rgba(96,45,16,.94); box-shadow:0 0 24px rgba(255,138,50,.42); }
.intent-badge.channel { border-color:#c793ff; background:rgba(66,29,91,.94); box-shadow:0 0 24px rgba(154,92,229,.5); }
.intent-badge.channel > span { color:#24112f; background:#d4abff; }.intent-badge.heavy > span { background:var(--fire); }
.enemy-actor.phase-two { filter:drop-shadow(0 0 25px rgba(217,67,54,.85)); animation:bossRage .5s ease-out; }
@keyframes bossRage { 35% { transform:scale(1.16); filter:brightness(2) drop-shadow(0 0 35px #d94336); } }
.combat-actions { grid-template-columns:1fr .72fr 1.2fr; gap:8px; }
.potion-action { border-color:#7bb967; background:linear-gradient(145deg,#315b38,#172f20); }
.action-button.attention { animation:controlPulse .55s infinite alternate; }
@keyframes controlPulse { to { transform:translateY(-3px) scale(1.025); box-shadow:0 0 25px currentColor; filter:brightness(1.35); } }
.battle-scene.overdrive::after { content:"入魔"; position:absolute; z-index:15; left:50%; top:25%; transform:translate(-50%,-50%) rotate(-6deg); color:rgba(255,225,180,.2); font-size:clamp(70px,11vw,170px); font-weight:1000; text-shadow:0 0 35px #d94336; pointer-events:none; animation:overdriveMark .8s ease-out; }
@keyframes overdriveMark { from { opacity:0; transform:translate(-50%,-50%) scale(1.7) rotate(-10deg); } }
.battle-scene.biome-bone .backdrop { filter:grayscale(.7) sepia(.28) contrast(1.08); }
.battle-scene.biome-blood .backdrop { filter:hue-rotate(325deg) saturate(1.25) contrast(1.08); }
.battle-scene.biome-curse .backdrop { filter:hue-rotate(65deg) saturate(1.05) contrast(1.12); }
.player-actor.hero-warden .player-art { filter:hue-rotate(170deg) saturate(.75) drop-shadow(0 8px 9px rgba(0,0,0,.72)); }
.player-actor.hero-alchemist .player-art { filter:hue-rotate(68deg) saturate(1.15) drop-shadow(0 8px 9px rgba(0,0,0,.72)); }
.loadout-columns { display:grid; grid-template-columns:1fr 1fr; gap:22px; }.loadout-section h3 { margin:0 0 10px; color:var(--muted); font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.loadout-grid { display:grid; gap:9px; }.loadout-card { position:relative; min-height:92px; padding:13px 14px 13px 78px; text-align:left; border:2px solid #4c4047; border-radius:9px; background:linear-gradient(145deg,#322832,#1b171d); cursor:pointer; transition:.14s; }.loadout-card:hover { border-color:var(--gold); transform:translateY(-2px); }.loadout-card.selected { border-color:var(--fire); background:linear-gradient(145deg,#533128,#24181d); box-shadow:0 0 22px rgba(255,138,50,.16); }.loadout-card .loadout-icon { position:absolute; left:13px; top:14px; width:50px; height:50px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; color:var(--gold); font-size:25px; background:rgba(0,0,0,.25); }.loadout-card b { display:block; margin-bottom:3px; font-size:16px; }.loadout-card small { color:var(--muted); line-height:1.35; }
.event-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.event-choice { min-height:190px; padding:22px; text-align:left; border:2px solid #5c4b50; border-radius:10px; background:linear-gradient(145deg,#332833,#18141a); cursor:pointer; }.event-choice:hover { border-color:var(--gold); transform:translateY(-3px); }.event-choice b { display:block; margin-bottom:9px; color:var(--bone); font-size:20px; }.event-choice p { color:var(--muted); line-height:1.55; }.event-risk { color:var(--blood); font-weight:900; }.event-safe { color:var(--poison); font-weight:900; }
.tutorial-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0; }.tutorial-step { padding:18px; border:1px solid #5c4b50; border-radius:9px; background:rgba(0,0,0,.24); text-align:center; }.tutorial-step span { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 10px; border:2px solid var(--fire); border-radius:50%; color:var(--gold); font-size:23px; font-weight:950; }.tutorial-step b { display:block; margin-bottom:6px; }.tutorial-step small { color:var(--muted); line-height:1.5; }
.run-report { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }.report-build { padding:16px; border:1px solid rgba(233,222,200,.15); border-radius:8px; background:rgba(0,0,0,.2); }.report-build h3 { margin:0 0 10px; }.report-build .build-tags { flex-wrap:wrap; }

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

@media (max-aspect-ratio: 16/9) and (orientation: landscape) {
  .game-shell { width: 100vw; height: 56.25vw; }
}
@media (orientation: portrait) {
  body::before { content:"请旋转设备，以横屏进入地牢"; position:fixed; z-index:999; inset:0; display:grid; place-items:center; padding:30px; color:var(--bone); background:radial-gradient(circle,#32151b,#08070a 70%); font-size:20px; font-weight:900; text-align:center; }
}
@media (max-height: 560px) {
  .brand-mini small, .control-hint { display:none; }
  .stat-chip { padding:4px 6px; min-width:68px; }
  .menu-hero { min-height:360px; }
  .action-button b { font-size:14px; }
  .loadout-card { min-height:78px; padding-top:9px; padding-bottom:9px; }
  .modal-root { padding:8px; }
  .modal { padding:18px; max-height:96vh; }
}