:root {
    color-scheme: dark;
    --ash: #d8cbb5;
    --bone: #f0dfbf;
    --ember: #e66c29;
    --blood: #a82019;
    --cold: #74a9b7;
    --ink: #080706;
    --panel: rgba(13, 11, 9, .91);
    --line: rgba(201, 155, 99, .3);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ash); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }

.game-shell { position: fixed; inset: 0; overflow: hidden; background: #080706; isolation: isolate; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.world-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(circle at 50% 46%, transparent 32%, rgba(5,4,3,.18) 68%, rgba(2,2,2,.72) 100%); }
.world-vignette::after { content: ""; position: absolute; inset: 0; opacity: .14; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); mix-blend-mode: soft-light; }
.damage-flash { position: absolute; inset: 0; z-index: 9; opacity: 0; pointer-events: none; background: radial-gradient(circle, transparent 35%, rgba(154,23,14,.78)); transition: opacity .12s; }
.damage-flash.active { opacity: 1; }
.hidden { display: none !important; }

.top-hud { position: absolute; z-index: 10; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; height: 68px; display: grid; grid-template-columns: minmax(270px, 1fr) minmax(260px, .8fr) minmax(320px, 1fr); align-items: stretch; gap: 8px; pointer-events: none; }
.brand-lockup, .objective-block, .run-stats, .status-hud, .tactical-hud, .ability-belt { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(13,11,9,.97), rgba(22,17,13,.82)); box-shadow: 0 10px 35px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(8px); }
.brand-lockup { position: relative; padding: 13px 16px 10px 25px; display: grid; align-content: center; }
.brand-lockup i { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--ember), #772513); box-shadow: 0 0 16px rgba(230,108,41,.55); }
.brand-lockup span { color: var(--bone); font-weight: 950; font-size: 18px; letter-spacing: .18em; line-height: 1; }
.brand-lockup small { margin-top: 7px; color: #a89173; font-size: 9px; font-weight: 800; letter-spacing: .34em; }
.objective-block { padding: 11px 18px; display: grid; place-content: center; text-align: center; }
.objective-block small { color: #a89173; font-size: 9px; font-weight: 900; letter-spacing: .25em; }
.objective-block strong { margin-top: 5px; color: var(--bone); font-size: 12px; letter-spacing: .12em; }
.run-stats { display: grid; grid-template-columns: 1fr 1.35fr 54px; pointer-events: auto; }
.run-stats > span { display: grid; place-content: center; text-align: center; border-right: 1px solid var(--line); }
.run-stats small { color: #97836b; font-size: 8px; font-weight: 900; letter-spacing: .22em; }
.run-stats b { margin-top: 3px; color: var(--bone); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; }
.icon-button { border: 0; background: transparent; cursor: pointer; font-size: 20px; }
.icon-button:hover { background: rgba(230,108,41,.12); }

.status-hud { position: absolute; z-index: 10; left: 12px; bottom: 104px; width: min(360px, 35vw); min-height: 152px; padding: 12px; display: grid; grid-template-columns: 56px 1fr; gap: 8px 12px; pointer-events: none; }
.portrait { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid #8d633c; color: var(--bone); font-weight: 950; letter-spacing: .12em; background: radial-gradient(circle, rgba(230,108,41,.2), #0b0907 72%); box-shadow: inset 0 0 18px rgba(230,108,41,.15); }
.identity { display: grid; align-content: center; }
.identity small { color: #9c8268; font-size: 8px; font-weight: 900; letter-spacing: .2em; }
.identity strong { margin-top: 5px; color: var(--bone); font-size: 15px; letter-spacing: .12em; }
.meter { grid-column: 1 / -1; }
.meter label { display: flex; justify-content: space-between; color: #9e8b76; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.meter label b { color: var(--bone); font-family: ui-monospace, monospace; }
.meter > i, .floor-progress > i, .boss-hud > i, .dash-readout > i { height: 8px; margin-top: 4px; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.65); }
.meter > i em, .floor-progress > i em, .boss-hud > i em, .dash-readout > i em { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #711a15, #d64327); box-shadow: 0 0 10px rgba(213,58,36,.55); transition: width .18s; }
.meter.resolve > i em { background: linear-gradient(90deg, #3f6171, #86bac4); box-shadow: 0 0 10px rgba(116,169,183,.45); }
.equipment-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.equipment-row span { min-width: 0; padding: 6px 8px; border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.25); }
.equipment-row small { display: block; color: #816f5e; font-size: 7px; font-weight: 900; letter-spacing: .15em; }
.equipment-row b { display: block; margin-top: 3px; overflow: hidden; color: #d7c7ad; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }

.tactical-hud { position: absolute; z-index: 10; right: 12px; bottom: 104px; width: 250px; padding: 10px; pointer-events: none; }
.panel-heading { display: flex; justify-content: space-between; margin-bottom: 7px; color: #8f7963; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.panel-heading b { color: #d66b3f; }
#minimap { display: block; width: 100%; height: 112px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.06); }
.floor-progress { margin-top: 8px; color: #a69078; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.floor-progress > i em { background: linear-gradient(90deg, #76522f, #e29a4b); box-shadow: 0 0 8px rgba(226,154,75,.4); }

.boss-hud { position: absolute; z-index: 11; top: 90px; left: 50%; width: min(540px, 62vw); transform: translateX(-50%); text-align: center; pointer-events: none; }
.boss-hud small { color: #a25839; font-size: 8px; font-weight: 900; letter-spacing: .3em; }
.boss-hud strong { display: block; margin: 4px 0 7px; color: #ead7bd; font-size: 16px; letter-spacing: .14em; text-shadow: 0 0 14px #711a15; }
.boss-hud > i { height: 9px; margin: 0; }

.ability-belt { position: absolute; z-index: 12; left: 50%; bottom: 12px; height: 78px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; pointer-events: auto; }
.ability-belt button { position: relative; width: 94px; border: 1px solid rgba(197,145,91,.26); background: rgba(5,4,3,.72); cursor: pointer; overflow: hidden; }
.ability-belt button:hover { border-color: var(--ember); background: rgba(85,39,20,.6); }
.ability-belt button:disabled { opacity: .48; }
.ability-belt button kbd { position: absolute; top: 4px; left: 5px; color: #88735d; font-size: 8px; font-family: inherit; }
.ability-belt button i { display: block; color: #e39056; font-style: normal; font-size: 20px; }
.ability-belt button span { display: block; margin-top: 4px; color: #cdbda7; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ability-belt button > em { position: absolute; inset: 0; transform-origin: bottom; pointer-events: none; background: rgba(0,0,0,.72); }
.dash-readout { width: 82px; padding: 8px; display: grid; align-content: center; }
.dash-readout kbd { color: #9a826b; font-size: 7px; font-family: inherit; }
.dash-readout span { margin: 3px 0; color: #d5c4ad; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.dash-readout > i { height: 5px; margin: 0; }
.dash-readout > i em { background: #d88148; }

.event-feed { position: absolute; z-index: 15; right: 18px; top: 94px; width: min(360px, 30vw); text-align: right; pointer-events: none; }
.event-feed p { margin: 0 0 5px; padding: 6px 12px; color: #c9baa4; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-shadow: 0 2px 5px #000; animation: feed-in 2.4s both; }
.event-feed p.danger { color: #ef7752; }
.event-feed p.reward { color: #e8b76b; }
@keyframes feed-in { 0% { opacity: 0; transform: translateY(-8px); } 12%, 72% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(5px); } }

.pickup-banner { position: absolute; z-index: 25; right: 12px; bottom: 286px; width: min(300px, calc(100vw - 24px)); padding: 13px 17px; text-align: left; border: 1px solid #a86d37; border-left: 4px solid #dd7037; background: rgba(9,7,5,.94); box-shadow: 0 0 45px rgba(220,103,39,.16); animation: relic-in 1.6s both; pointer-events: none; }
.pickup-banner small { color: #987654; font-size: 8px; font-weight: 900; letter-spacing: .3em; }
.pickup-banner strong { display: block; margin-top: 5px; color: var(--bone); font-size: 18px; letter-spacing: .11em; }
.pickup-banner span { display: block; margin-top: 6px; color: #d4743d; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
@keyframes relic-in { 0% { opacity: 0; transform: translateX(24px); } 15%,75% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(10px); } }

.overlay { position: absolute; inset: 0; z-index: 40; }
.menu-overlay { overflow: hidden; background: #080706; }
.menu-art { position: absolute; inset: -4%; background: url('assets/dungeon-descent-ashen-depths-v1.webp') center/cover no-repeat; filter: saturate(.76) contrast(1.08) brightness(.7); transform: scale(1.03); }
.menu-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,4,3,.98) 0%, rgba(5,4,3,.92) 37%, rgba(5,4,3,.48) 65%, rgba(5,4,3,.25)), linear-gradient(0deg, rgba(5,4,3,.82), transparent 46%); }
.menu-content { position: relative; z-index: 2; width: min(680px, 53vw); height: 100%; padding: clamp(28px,5vh,70px) clamp(24px,4vw,70px); display: flex; flex-direction: column; justify-content: center; }
.eyebrow { margin: 0; color: #a07956; font-size: 9px; font-weight: 950; letter-spacing: .26em; }
h1 { margin: 10px 0 16px; line-height: .9; }
h1 span { display: block; color: #eee0ca; font-size: clamp(34px,5vw,72px); font-weight: 950; letter-spacing: .03em; text-shadow: 0 12px 30px #000; }
h1 strong { display: block; margin-top: 10px; color: #d76b36; font-size: clamp(17px,2.1vw,30px); font-weight: 950; letter-spacing: .23em; }
.menu-copy { max-width: 570px; margin: 0 0 22px; color: #b9aa96; font-size: 13px; line-height: 1.55; }
.class-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 7px; }
.class-heading span { color: #dacbb7; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.class-heading small { color: #796957; font-size: 8px; }
.class-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.class-card { min-width: 0; padding: 10px; display: grid; grid-template-columns: 38px 1fr; gap: 8px; text-align: left; border: 1px solid rgba(188,143,93,.18); background: rgba(14,11,8,.74); cursor: pointer; }
.class-card:hover, .class-card.active { border-color: #c26a35; background: rgba(79,37,20,.62); box-shadow: inset 0 0 22px rgba(211,95,42,.1); }
.class-card i { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #745134; color: #e0c9ad; font-size: 10px; font-style: normal; font-weight: 950; }
.class-card strong { display: block; overflow: hidden; color: #ddcbb5; font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
.class-card small { display: block; margin-top: 3px; color: #8c7964; font-size: 7px; }
.class-card em { grid-column: 2; color: #b45930; font-size: 7px; font-style: normal; font-weight: 900; letter-spacing: .12em; }
.menu-actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; margin-top: 14px; }
.primary-button, .secondary-button { min-height: 54px; padding: 11px 18px; display: grid; align-content: center; border: 1px solid #b65c2f; cursor: pointer; }
.primary-button { color: #1b0e08; background: linear-gradient(135deg, #ed944f, #b84325); box-shadow: 0 10px 28px rgba(170,57,24,.22); }
.secondary-button { color: #c3b099; background: rgba(12,10,8,.76); border-color: rgba(178,133,84,.28); }
.primary-button:hover { filter: brightness(1.09); }
.secondary-button:hover { border-color: #a85d34; }
.primary-button span, .secondary-button span { font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.primary-button small, .secondary-button small { margin-top: 4px; font-size: 7px; font-weight: 800; letter-spacing: .13em; opacity: .65; }
button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .42; }
.legacy-record { display: flex; gap: 18px; margin-top: 14px; }
.legacy-record span { min-width: 80px; }
.legacy-record small { display: block; color: #756553; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.legacy-record b { display: block; margin-top: 2px; color: #d7c4ab; font-family: ui-monospace, monospace; font-size: 18px; }
.control-copy { margin: 15px 0 0; color: #6f6152; font-size: 8px; letter-spacing: .08em; }
.control-copy b { color: #a78869; }

.dialog-overlay { display: grid; place-items: center; padding: 20px; background: rgba(4,3,2,.84); backdrop-filter: blur(12px); }
.dialog { width: min(520px, 94vw); padding: 30px; text-align: center; border: 1px solid #755036; background: linear-gradient(145deg, rgba(20,15,11,.98), rgba(8,7,6,.98)); box-shadow: 0 30px 90px #000; }
.dialog h2 { margin: 8px 0 10px; color: #e8d7bd; font-size: 30px; letter-spacing: .08em; }
.dialog > p:not(.eyebrow) { color: #9d8b74; font-size: 12px; }
.dialog button { width: 100%; margin-top: 8px; }
.reward-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 18px 0 8px; }
.reward-grid button { min-height: 118px; padding: 12px 8px; border: 1px solid rgba(193,139,83,.25); background: rgba(0,0,0,.28); cursor: pointer; }
.reward-grid button.active { border-color: #df7d3e; background: rgba(107,45,20,.42); }
.reward-grid i { display: block; color: #e48b4d; font-size: 24px; font-style: normal; }
.reward-grid strong { display: block; margin-top: 8px; color: #d8c7b0; font-size: 9px; }
.reward-grid small { display: block; margin-top: 5px; color: #8d7962; font-size: 7px; line-height: 1.3; }
.death-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 18px 0; }
.death-stats span { padding: 12px 6px; border: 1px solid rgba(255,255,255,.07); }
.death-stats small { display: block; color: #816e59; font-size: 7px; letter-spacing: .14em; }
.death-stats b { display: block; margin-top: 3px; color: #e5d2b9; font-size: 22px; }

.loading-overlay { z-index: 80; display: grid; place-content: end start; gap: 5px; padding: 0 0 max(34px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); background: #070605; transition: opacity .35s; }
.loading-overlay.done { opacity: 0; pointer-events: none; }
.loading-sigil { position: relative; width: 38px; height: 38px; margin-bottom: 8px; }
.loading-sigil i, .loading-sigil b, .loading-sigil em { position: absolute; inset: 0; border: 1px solid #a84b26; transform: rotate(45deg); animation: sigil 1.8s linear infinite; }
.loading-sigil b { inset: 7px; animation-direction: reverse; }
.loading-sigil em { inset: 14px; background: #d66a34; box-shadow: 0 0 18px #a3321c; }
@keyframes sigil { to { transform: rotate(405deg); } }
.loading-overlay > small { color: #805e45; font-size: 7px; font-weight: 900; letter-spacing: .2em; }
.loading-overlay > strong { color: #cbbba5; font-size: 10px; letter-spacing: .12em; }

.mobile-controls { display: none; }

@media (max-width: 760px), (pointer: coarse) {
    .world-vignette { background: radial-gradient(circle at 50% 42%, transparent 27%, rgba(4,3,2,.2) 67%, rgba(1,1,1,.72)); }
    .top-hud { top: max(6px, env(safe-area-inset-top)); left: 6px; right: 6px; height: 50px; grid-template-columns: 1.45fr .75fr; gap: 5px; }
    .brand-lockup { padding: 9px 8px 7px 14px; }
    .brand-lockup i { width: 4px; }
    .brand-lockup span { font-size: 11px; letter-spacing: .1em; }
    .brand-lockup small { margin-top: 4px; font-size: 6px; letter-spacing: .2em; }
    .objective-block { display: none; }
    .run-stats { grid-template-columns: .75fr 1fr 42px; }
    .run-stats small { font-size: 5px; }
    .run-stats b { font-size: 13px; }
    .icon-button { font-size: 15px; }
    .status-hud { left: 6px; top: calc(max(6px, env(safe-area-inset-top)) + 56px); bottom: auto; width: min(252px, 67vw); min-height: 0; padding: 7px; grid-template-columns: 36px 1fr; gap: 4px 7px; }
    .portrait { width: 36px; height: 36px; font-size: 9px; }
    .identity small { font-size: 5px; }
    .identity strong { margin-top: 2px; font-size: 9px; }
    .meter { grid-column: 1 / -1; }
    .meter label { font-size: 6px; }
    .meter > i { height: 5px; margin-top: 2px; }
    .equipment-row { display: none; }
    .tactical-hud { top: calc(max(6px, env(safe-area-inset-top)) + 56px); right: 6px; bottom: auto; width: 108px; padding: 5px; background: rgba(10,8,6,.82); }
    .panel-heading { margin-bottom: 3px; font-size: 5px; }
    .panel-heading b { display: none; }
    #minimap { height: 74px; }
    .floor-progress { margin-top: 4px; font-size: 5px; }
    .floor-progress > i { height: 4px; margin-top: 2px; }
    .boss-hud { top: calc(max(6px, env(safe-area-inset-top)) + 126px); width: calc(100vw - 24px); }
    .boss-hud small { font-size: 6px; }
    .boss-hud strong { margin: 2px 0 4px; font-size: 10px; }
    .ability-belt { left: 50%; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 102px); height: 58px; padding: 4px; gap: 3px; }
    .ability-belt button { width: 64px; }
    .ability-belt button kbd { font-size: 6px; }
    .ability-belt button i { font-size: 15px; }
    .ability-belt button span { margin-top: 1px; font-size: 6px; }
    .dash-readout { display: none; }
    .mobile-controls:not(.hidden) { position: absolute; z-index: 13; left: 0; right: 0; bottom: max(8px, env(safe-area-inset-bottom)); height: 98px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; pointer-events: none; }
    .move-pad { position: relative; width: 92px; height: 92px; border: 1px solid rgba(196,159,115,.32); border-radius: 50%; background: radial-gradient(circle, rgba(69,51,35,.36), rgba(8,7,6,.62)); box-shadow: inset 0 0 22px rgba(0,0,0,.55); pointer-events: auto; touch-action: none; }
    .move-pad::before, .move-pad::after { content: ""; position: absolute; background: rgba(213,184,147,.12); }
    .move-pad::before { left: 18px; right: 18px; top: 45px; height: 1px; }
    .move-pad::after { top: 18px; bottom: 18px; left: 45px; width: 1px; }
    .move-pad i { position: absolute; left: 28px; top: 28px; width: 36px; height: 36px; border: 1px solid #9d6842; border-radius: 50%; background: #23170f; box-shadow: 0 4px 12px #000; }
    .attack-button { width: 84px; height: 84px; border: 1px solid #cf5b2d; border-radius: 50%; color: #f0d4bb; background: radial-gradient(circle at 35% 30%, #9f3d20, #3b150e 72%); box-shadow: 0 0 22px rgba(199,69,30,.25), inset 0 0 20px rgba(0,0,0,.4); font-size: 9px; font-weight: 950; letter-spacing: .1em; pointer-events: auto; touch-action: none; }
    .attack-button.active { transform: scale(.94); filter: brightness(1.25); }
    .event-feed { top: calc(max(6px, env(safe-area-inset-top)) + 181px); right: 8px; width: calc(100vw - 16px); text-align: center; }
    .event-feed p { font-size: 7px; }
    .pickup-banner { right: 8px; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 166px); width: 226px; min-width: 0; padding: 9px 11px; }
    .pickup-banner strong { font-size: 13px; }
    .menu-art { inset: 0; background-position: 63% center; filter: saturate(.65) contrast(1.08) brightness(.48); }
    .menu-shade { background: linear-gradient(0deg, rgba(5,4,3,.99) 0%, rgba(5,4,3,.9) 52%, rgba(5,4,3,.34) 100%); }
    .menu-content { width: 100%; padding: calc(max(20px, env(safe-area-inset-top)) + 8px) 14px max(14px, env(safe-area-inset-bottom)); justify-content: flex-end; }
    .eyebrow { font-size: 6px; letter-spacing: .18em; }
    h1 { margin: 7px 0 8px; }
    h1 span { font-size: clamp(27px,9.2vw,38px); }
    h1 strong { margin-top: 5px; font-size: 13px; letter-spacing: .18em; }
    .menu-copy { max-width: 92%; margin-bottom: 11px; font-size: 10px; line-height: 1.36; }
    .class-heading { margin-bottom: 5px; }
    .class-heading span { font-size: 7px; }
    .class-heading small { display: none; }
    .class-grid { gap: 4px; }
    .class-card { padding: 7px 5px; display: block; text-align: center; }
    .class-card i { width: 32px; height: 32px; margin: 0 auto 5px; }
    .class-card strong { font-size: 7px; }
    .class-card small { display: none; }
    .class-card em { display: block; margin-top: 3px; font-size: 5px; }
    .menu-actions { gap: 5px; margin-top: 8px; }
    .primary-button, .secondary-button { min-height: 45px; padding: 8px; }
    .primary-button span, .secondary-button span { font-size: 8px; }
    .primary-button small, .secondary-button small { font-size: 5px; }
    .legacy-record { gap: 6px; margin-top: 8px; }
    .legacy-record span { min-width: 0; flex: 1; }
    .legacy-record small { font-size: 5px; }
    .legacy-record b { font-size: 13px; }
    .control-copy { display: none; }
    .dialog { padding: 22px 16px; }
    .dialog h2 { font-size: 22px; }
    .reward-grid { gap: 4px; }
    .reward-grid button { min-height: 102px; padding: 8px 4px; }
}

@media (max-height: 650px) and (pointer: coarse) {
    .status-hud { display: none !important; }
    .ability-belt { bottom: calc(max(5px, env(safe-area-inset-bottom)) + 82px); height: 50px; }
    .mobile-controls:not(.hidden) { height: 78px; }
    .move-pad { width: 74px; height: 74px; }
    .move-pad i { left: 22px; top: 22px; width: 30px; height: 30px; }
    .attack-button { width: 70px; height: 70px; }
    .menu-copy { display: none; }
}

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

/* Ashen Depths v7: story, quest, inventory and mobile interaction layer */
.quest-hud { position:absolute;z-index:14;left:18px;top:100px;width:min(360px,32vw);padding:11px 14px 12px 16px;border:1px solid rgba(190,139,85,.32);border-left:4px solid #d26a36;background:linear-gradient(100deg,rgba(13,10,8,.94),rgba(13,10,8,.7));box-shadow:0 14px 36px rgba(0,0,0,.3);pointer-events:none }
.quest-hud small,.quest-hud strong,.quest-hud span{display:block}.quest-hud small{color:#956e4d;font-size:7px;font-weight:950;letter-spacing:.18em}.quest-hud strong{margin-top:5px;color:#ead7bd;font-size:11px;letter-spacing:.07em}.quest-hud span{margin-top:4px;color:#b88759;font-size:8px;font-weight:800}
.quest-wayfinder{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(211,123,65,.25);color:#e08a50}.quest-wayfinder b{width:21px;height:21px;display:grid;place-items:center;border:1px solid rgba(226,125,66,.62);background:rgba(104,43,20,.42);font-size:13px;line-height:1}.quest-wayfinder em{overflow:hidden;color:#d5b18b;font-size:7px;font-style:normal;font-weight:950;letter-spacing:.1em;text-overflow:ellipsis;white-space:nowrap}
.interaction-prompt{position:absolute;z-index:22;left:50%;bottom:185px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #a2693e;background:rgba(8,6,5,.92);color:#ead6bc;box-shadow:0 8px 24px #000;pointer-events:none}.interaction-prompt kbd{width:24px;height:24px;display:grid;place-items:center;border:1px solid #cb7b46;color:#f1a467;font:900 10px inherit}.interaction-prompt span{font-size:8px;font-weight:950;letter-spacing:.14em}
.story-panel{position:absolute;z-index:46;left:50%;bottom:max(24px,env(safe-area-inset-bottom));width:min(760px,calc(100vw - 32px));min-height:154px;transform:translateX(-50%);display:grid;grid-template-columns:78px 1fr auto;gap:16px;padding:18px;border:1px solid #8b5c39;border-top:3px solid #cf713d;background:linear-gradient(135deg,rgba(22,16,12,.98),rgba(7,6,5,.98));box-shadow:0 26px 80px #000}.speaker-mark{width:70px;height:70px;display:grid;place-items:center;border:1px solid #8f603c;background:radial-gradient(circle,#3d2819,#0d0a08);color:#e6c5a0;font-size:17px;font-weight:950}.story-copy small{color:#9b714f;font-size:7px;font-weight:900;letter-spacing:.2em}.story-copy strong{display:block;margin-top:4px;color:#ead8c0;font-size:15px;letter-spacing:.1em}.story-copy p{margin:10px 0 0;color:#c1ad94;font-size:12px;line-height:1.55}.dialogue-actions{min-width:160px;display:grid;align-content:end;gap:6px}.dialogue-actions button{min-height:38px;padding:8px 12px;border:1px solid #855330;color:#d9c2a6;background:#17100c;font-size:8px;font-weight:900;letter-spacing:.1em;cursor:pointer}.dialogue-actions button:first-child{border-color:#c46c37;color:#160b06;background:#dc8148}
.inventory-overlay{position:absolute;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:rgba(3,3,2,.78);backdrop-filter:blur(8px)}.inventory-shell{width:min(820px,96vw);max-height:min(720px,92vh);overflow:hidden;border:1px solid #765037;background:linear-gradient(145deg,#17110d,#080706);box-shadow:0 30px 100px #000}.inventory-shell>header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 14px;border-bottom:1px solid rgba(184,132,80,.22)}.inventory-shell header small{color:#986d4a;font-size:7px;font-weight:900;letter-spacing:.2em}.inventory-shell h2{margin:4px 0 0;color:#ead7bd;font-size:21px;letter-spacing:.08em}.inventory-shell .icon-button{width:42px;height:42px;border:1px solid #745038;background:#100c09}.inventory-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(184,132,80,.2)}.inventory-tabs button{padding:12px;border:0;border-right:1px solid rgba(184,132,80,.16);color:#796653;background:rgba(0,0,0,.2);font-size:8px;font-weight:950;letter-spacing:.14em;cursor:pointer}.inventory-tabs button.active{color:#efb377;background:rgba(135,60,28,.25);box-shadow:inset 0 -2px #d16e38}.inventory-content{min-height:360px;max-height:58vh;overflow:auto;padding:16px}.item-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.item-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-content:start}.item-card,.gear-slot,.journal-card{padding:11px;border:1px solid rgba(181,132,85,.22);background:rgba(0,0,0,.24);color:#cdb99f;text-align:left;cursor:pointer}.item-card.active{border-color:#d27941;background:rgba(112,47,23,.32)}.item-card strong,.gear-slot strong,.journal-card strong{display:block;color:#e0cbb0;font-size:9px;letter-spacing:.07em}.item-card small,.gear-slot small,.journal-card small{display:block;margin-top:5px;color:#8f7861;font-size:7px;line-height:1.4}.item-card em{float:right;color:#e39558;font:900 9px inherit}.item-detail{min-height:250px;padding:16px;border:1px solid rgba(181,132,85,.25);background:rgba(7,5,4,.68)}.item-detail h3{margin:5px 0 8px;color:#f0d7b9;font-size:17px}.item-detail p{color:#a99277;font-size:11px;line-height:1.55}.item-detail .statline{padding:8px 0;border-top:1px solid rgba(255,255,255,.06);color:#d5864c;font-size:9px;font-weight:900}.item-detail button{width:100%;margin-top:9px;padding:11px;border:1px solid #bd6635;color:#1c0d07;background:#d98047;font-size:8px;font-weight:950;letter-spacing:.12em;cursor:pointer}.gear-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.gear-slot{min-height:100px;cursor:default}.journal-card{cursor:default}.journal-card b{color:#d77b43}.empty-pack{padding:50px 20px;color:#806d58;text-align:center;font-size:10px;letter-spacing:.12em}
.utility-button{border:1px solid rgba(188,137,87,.44);color:#ccb89e;background:rgba(12,9,7,.92);font-size:6px;font-weight:950;letter-spacing:.06em;pointer-events:auto;touch-action:manipulation}.mobile-actions{width:184px;display:grid;grid-template-columns:48px 84px 48px;grid-template-rows:42px 42px;gap:4px;align-items:center;justify-content:end;pointer-events:none}.mobile-actions .attack-button{grid-column:2;grid-row:1/3}.mobile-actions #quick-button{grid-column:1;grid-row:1}.mobile-actions #interact-button{grid-column:1;grid-row:2}.mobile-actions #pack-button{grid-column:3;grid-row:2}
@media (max-width:760px),(pointer:coarse){.mobile-controls:not(.hidden){padding:0 10px}.quest-hud{left:7px;top:calc(max(6px,env(safe-area-inset-top)) + 116px);width:min(262px,70vw);padding:7px 9px}.quest-hud small{font-size:5px}.quest-hud strong{margin-top:3px;font-size:8px}.quest-hud span{margin-top:2px;font-size:6px}.quest-wayfinder{gap:5px;margin-top:5px;padding-top:5px}.quest-wayfinder b{width:18px;height:18px;font-size:11px}.quest-wayfinder em{font-size:5px}.interaction-prompt{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 111px);padding:6px 9px}.interaction-prompt kbd{display:none}.story-panel{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 4px);width:calc(100vw - 12px);min-height:182px;grid-template-columns:42px 1fr;gap:9px;padding:12px}.speaker-mark{width:40px;height:40px;font-size:10px}.story-copy small{font-size:5px}.story-copy strong{font-size:11px}.story-copy p{margin-top:7px;font-size:10px;line-height:1.42}.dialogue-actions{grid-column:1/-1;min-width:0;grid-template-columns:repeat(2,1fr)}.dialogue-actions button{min-height:34px;font-size:6px}.inventory-overlay{padding:6px}.inventory-shell{width:100%;max-height:calc(100vh - 12px)}.inventory-shell>header{padding:12px}.inventory-shell h2{font-size:16px}.inventory-content{min-height:0;max-height:calc(100vh - 142px);padding:8px}.item-layout{grid-template-columns:1fr}.item-list{grid-template-columns:repeat(2,1fr)}.item-detail{min-height:150px;padding:11px}}
@media (max-width:760px),(pointer:coarse){.quest-hud{top:calc(max(6px,env(safe-area-inset-top)) + 150px)}}
.utility-button{height:38px}

/* Ashen Depths v8 world atlas */
.world-map-button{width:100%;height:28px;margin-top:7px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(214,115,58,.44);color:#dcb78f;background:linear-gradient(90deg,rgba(72,31,18,.72),rgba(16,12,9,.82));font-size:7px;font-weight:950;letter-spacing:.16em;pointer-events:auto;cursor:pointer}.world-map-button:hover{border-color:#e17a3d;background:rgba(105,44,22,.74)}.world-map-button kbd{padding:2px 5px;border:1px solid rgba(232,163,100,.45);color:#f0a366;background:#0b0806;font:900 7px inherit}
.world-map-overlay{position:absolute;inset:0;z-index:54;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 35%,rgba(49,29,18,.78),rgba(2,2,2,.94) 72%);backdrop-filter:blur(10px)}.world-map-shell{position:relative;width:min(1380px,97vw);height:min(820px,94vh);overflow:hidden;border:1px solid #8a5a36;background:linear-gradient(145deg,rgba(22,16,12,.99),rgba(5,5,4,.99));box-shadow:0 35px 120px #000,inset 0 0 90px rgba(128,55,24,.08)}.world-map-shell::before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:linear-gradient(rgba(223,163,103,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(223,163,103,.08) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(circle,#000,transparent 88%)}
.world-map-header{position:relative;z-index:1;min-height:92px;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(210,144,82,.25);background:linear-gradient(90deg,rgba(83,36,19,.38),transparent)}.world-map-header small{color:#a16e49;font-size:7px;font-weight:950;letter-spacing:.28em}.world-map-header h2{margin:4px 0 3px;color:#f0dbc0;font-size:25px;letter-spacing:.16em}.world-map-header p{margin:0;color:#d7743d;font-size:8px;font-weight:900;letter-spacing:.2em}.world-map-status{display:flex;align-items:center;gap:18px}.world-map-status span{color:#bc9a74;font:900 9px ui-monospace,monospace;letter-spacing:.12em}.world-map-status .icon-button{width:44px;height:44px;border:1px solid #775039;background:#100c09;color:#dbc3a4}
.world-map-content{position:relative;z-index:1;height:calc(100% - 92px);display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;padding:14px;overflow:hidden}.world-acts{min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.world-act{position:relative;min-width:0;padding:13px;overflow:hidden;border:1px solid rgba(180,127,78,.2);background:linear-gradient(180deg,rgba(33,23,17,.86),rgba(7,6,5,.84))}.world-act::after{content:"";position:absolute;left:23px;top:99px;bottom:80px;width:1px;background:linear-gradient(#d77a43,rgba(125,76,45,.18));box-shadow:0 0 12px rgba(218,105,51,.26)}.world-act.current{border-color:#b96838;box-shadow:inset 0 0 32px rgba(173,67,28,.11)}.world-act>header{min-height:77px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.06)}.world-act>header span{color:#bd6235;font:950 8px ui-monospace,monospace;letter-spacing:.2em}.world-act>header strong{display:block;margin-top:6px;color:#e3ccb0;font-size:13px;letter-spacing:.08em}.world-act>header small{display:block;margin-top:6px;color:#8e745b;font-size:7px;letter-spacing:.13em}.world-route{position:relative;z-index:1;display:grid;gap:8px;padding:13px 0}.world-region{min-height:59px;display:grid;grid-template-columns:32px 1fr;align-items:center;gap:8px;padding:7px;border:1px solid rgba(143,104,68,.18);background:rgba(7,6,5,.72)}.world-region>i{width:29px;height:29px;display:grid;place-items:center;border:1px solid #4f4134;border-radius:50%;color:#6e6052;background:#0a0807;font:900 7px ui-monospace,monospace}.world-region strong,.world-region small{display:block}.world-region strong{color:#8e8172;font-size:8px;letter-spacing:.06em}.world-region small{margin-top:4px;color:#5d544b;font-size:5px;line-height:1.35}.world-region.charted{border-color:rgba(209,126,67,.48);background:linear-gradient(90deg,rgba(99,39,19,.52),rgba(13,9,7,.75))}.world-region.charted>i{border-color:#d17743;color:#efb074;box-shadow:0 0 15px rgba(216,103,49,.25)}.world-region.charted strong{color:#e5c8a5}.world-region.charted small{color:#c17143}.world-region.frontier{border-color:#7d8263;box-shadow:inset 3px 0 #a9b06e}.world-region.frontier>i{border-color:#a3ad72;color:#d8dba3}.world-region.frontier strong{color:#d1c8a9}.world-region.frontier small{color:#9ca473}.world-act>footer{position:absolute;left:13px;right:13px;bottom:12px;min-height:54px;padding:9px;border:1px solid rgba(152,57,35,.3);background:linear-gradient(90deg,rgba(74,18,15,.52),rgba(8,6,5,.8))}.world-act>footer small,.world-act>footer strong,.world-act>footer span{display:block}.world-act>footer small{color:#925038;font-size:5px;letter-spacing:.17em}.world-act>footer strong{margin-top:4px;color:#d69a73;font-size:8px;letter-spacing:.08em}.world-act>footer span{margin-top:3px;color:#745b4a;font-size:5px}
.world-intel{min-width:0;overflow:auto;padding-right:3px}.world-intel section{margin-bottom:9px;padding:11px;border:1px solid rgba(177,125,76,.2);background:rgba(8,7,6,.7)}.world-intel h3{margin:0 0 9px;color:#b98257;font-size:7px;letter-spacing:.18em}.faction-readout{margin-top:9px}.faction-readout header{display:flex;justify-content:space-between}.faction-readout strong{color:#c9b69e;font-size:7px}.faction-readout b{color:#df9a62;font:900 7px ui-monospace,monospace}.faction-readout>i{display:block;height:5px;margin-top:4px;background:#16110e}.faction-readout>i em{display:block;height:100%}.faction-readout>small{display:block;margin-top:4px;color:#6f6254;font-size:5px}.companion-readout{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:7px;margin-top:6px;padding:7px;border:1px solid rgba(255,255,255,.05);opacity:.62}.companion-readout.active{border-color:#9a693e;background:rgba(78,43,24,.3);opacity:1}.companion-readout>i{width:27px;height:27px;display:grid;place-items:center;border:1px solid #67503b;color:#d9b789;font:900 7px inherit}.companion-readout strong,.companion-readout small,.companion-readout em{display:block}.companion-readout strong{color:#d8c2a5;font-size:7px}.companion-readout small{margin-top:2px;color:#816c56;font-size:5px}.companion-readout em{margin-top:3px;color:#a26d45;font-size:5px;font-style:normal}.companion-readout>b{color:#9c754f;font-size:5px}.specialist-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.specialist{padding:8px;border:1px solid rgba(255,255,255,.06)}.specialist b,.specialist small{display:block}.specialist b{color:#8f7b66;font-size:6px}.specialist small{margin-top:3px;color:#584e43;font-size:5px}.specialist.rescued{border-color:#70835d}.specialist.rescued b{color:#c5d19d}.specialist.rescued small{color:#8fa06f}
@media(max-width:900px){.world-map-overlay{padding:6px}.world-map-shell{width:100%;height:calc(100vh - 12px)}.world-map-header{min-height:70px;padding:10px 12px}.world-map-header h2{font-size:15px}.world-map-status span{display:none}.world-map-content{height:calc(100% - 70px);display:block;overflow:auto;padding:8px}.world-acts{grid-template-columns:1fr}.world-act{min-height:390px}.world-intel{overflow:visible;margin-top:8px}.world-map-button{height:23px;margin-top:4px;font-size:5px}.world-map-button kbd{display:none}}