:root {
  color: #ebe9f3;
  font-family: Inter, system-ui, sans-serif;
  background: #090a11;
  font-synthesis: none;
  --panel: rgba(15, 16, 27, .91);
  --edge: rgba(179, 171, 207, .25);
  --gold: #dfb65e;
  --gold-soft: #f2d596;
  --red: #b43b48;
  --blue: #4b80c9;
  --green: #79a743;
}

* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { user-select: none; }
button, select { font: inherit; }
button { color: inherit; }
canvas { display: block; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 9px; color: var(--gold); font: 600 11px/1.2 Cinzel, serif; letter-spacing: .26em; text-transform: uppercase; }

.cinematic-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #080910 url('/assets/stormfall-key-art.png') center/cover no-repeat; }
.title-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,11,.82), rgba(5,5,11,.2) 52%, rgba(5,5,11,.4)), radial-gradient(circle at 50% 50%, transparent 20%, rgba(2,2,6,.55) 100%); }
.title-copy { position: relative; width: min(620px, 86vw); margin-right: 38vw; text-align: center; text-shadow: 0 3px 18px #000; }
.title-copy h1 { margin: 0; font: 700 clamp(46px, 7vw, 92px)/.92 Cinzel, serif; letter-spacing: .07em; }
html[lang="ru"] .title-copy h1 { font-size: clamp(38px, 5.8vw, 76px); letter-spacing: .035em; }
.title-rule { display: flex; align-items: center; gap: 13px; width: 70%; margin: 18px auto 9px; color: var(--gold); }
.title-rule span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold)); }
.title-rule span:last-child { transform: rotate(180deg); }
.title-rule i { font-style: normal; font-size: 10px; }
.subtitle { margin: 0; color: var(--gold-soft); font: 600 16px Cinzel, serif; letter-spacing: .5em; }
.mission { max-width: 460px; margin: 30px auto 34px; color: #c9c7d2; font: 15px/1.7 Cinzel, serif; }
.language-selector { display:flex; align-items:center; justify-content:center; gap:10px; color:#aaa7b1; font-size:11px; }
.language-selector select { min-width:112px; padding:6px 28px 6px 9px; border:1px solid #5a5368; background:#11121c; color:#eeeaf3; cursor:pointer; }
.title-language-selector { width:max-content; margin:-17px auto 18px; padding:6px 10px; border:1px solid #ffffff18; background:#08091099; text-shadow:none; }
.primary-button { min-width: 230px; padding: 14px 24px; cursor: pointer; border: 1px solid #d5b260; background: linear-gradient(180deg, #89652d, #493616); color: #fff7dd; box-shadow: inset 0 0 0 2px rgba(12,9,4,.6), 0 5px 26px rgba(0,0,0,.5); font: 600 13px Cinzel, serif; letter-spacing: .12em; }
.primary-button:hover:not(:disabled) { filter: brightness(1.25); transform: translateY(-1px); }
.primary-button:disabled { opacity: .4; cursor: not-allowed; }
.start-hint { margin-top: 18px; color: #858492; font-size: 11px; letter-spacing: .08em; }
.account-screen { z-index: 160; }
.account-switch { width:100%; margin-top:16px; padding:5px; border:0; background:none; color:#d8c593; cursor:pointer; font:11px Inter,sans-serif; }
.signup-card { width:min(560px,92vw)!important; max-height:94dvh; overflow-y:auto; }
.signup-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.signup-fields label { display:grid; gap:6px; color:#c5c1ce; font-size:10px; text-transform:uppercase; }
.robe-picker { margin:18px 0 8px; padding:0; border:0; }
.robe-picker legend { margin-bottom:10px; color:#c5c1ce; font-size:11px; }
.robe-colors { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.robe-choice { position:relative; display:grid; gap:5px; text-align:center; cursor:pointer; color:#ada7b8; font-size:9px; }
.robe-choice input { position:absolute; width:1px!important; height:1px; opacity:0; }
.robe-swatch { position:relative; display:grid; place-items:center; height:54px; border:1px solid #51495d; background:#10111c; color:var(--robe-color); border-radius:5px; }
.robe-choice input:checked + .robe-swatch { border:2px solid var(--robe-color); background:#272333; box-shadow:0 0 12px color-mix(in srgb,var(--robe-color) 25%,transparent); }
.robe-choice input:focus-visible + .robe-swatch { outline:2px solid #fff; outline-offset:2px; }
.robe-shape { display:block; width:29px; height:36px; background:currentColor; clip-path:polygon(50% 0,75% 28%,64% 30%,64% 53%,91% 100%,9% 100%,36% 53%,36% 30%,25% 28%); }.robe-swatch b { position:absolute; right:5px; top:4px; font-size:9px; }
.robe-color-0 { --robe-color:#e5484d; }.robe-color-1 { --robe-color:#f58b36; }.robe-color-2 { --robe-color:#f0cc48; }.robe-color-3 { --robe-color:#55ba69; }.robe-color-4 { --robe-color:#43c9ce; }.robe-color-5 { --robe-color:#548fee; }.robe-color-6 { --robe-color:#a879e5; }.robe-color-7 { --robe-color:#e884ba; }
.account-card .team-rule { font-size:10px!important; margin:9px 0 5px; }.account-card .spawn-preview { color:#eed19a!important; font-size:11px; margin:5px 0; }
@media (max-height:650px) and (min-width:650px){.signup-card{padding:16px 24px!important;max-height:96dvh}.signup-card h1{font-size:26px!important}.signup-card .robe-colors{grid-template-columns:repeat(8,1fr);gap:5px}.signup-card .robe-swatch{height:40px}.signup-card .robe-shape{font-size:28px}.signup-card .robe-choice{font-size:8px}.signup-card .robe-picker{margin:9px 0 5px}.signup-card .account-switch{margin-top:6px}.signup-card .account-language-selector{margin:6px 0}.signup-card .account-status{min-height:12px;margin:3px 0}}
.account-card { position:relative; width:min(430px,90vw); margin-right:35vw; padding:34px; border:1px solid #665d76; background:linear-gradient(145deg,#151622f2,#090a12f5); box-shadow:0 24px 90px #000, inset 0 0 0 1px #ffffff0d; }
.account-card h1 { margin:0 0 8px; color:#f3eddf; font:700 clamp(29px,4vw,45px) Cinzel,serif; }
.account-card > p:not(.eyebrow) { color:#9996a5; font-size:12px; line-height:1.55; }
.account-card > label:not(.language-selector) { display:grid; gap:6px; margin:14px 0; color:#c5c1ce; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.account-card input { width:100%; padding:11px 12px; border:1px solid #4c4858; outline:0; background:#0b0c14; color:#f0edf4; user-select:text; }
.account-card input:focus { border-color:#c69e51; box-shadow:0 0 0 2px #c69e5122; }
.account-language-selector { justify-content:flex-start; margin:14px 0; }
.account-status { min-height:18px; margin:8px 0; color:#e17a82!important; }
.account-actions { display:flex; gap:9px; align-items:stretch; }
.account-actions .primary-button { min-width:0; flex:1; padding:11px; }
.account-actions button:not(.primary-button) { padding:9px 13px; cursor:pointer; border:1px solid #6e6250; background:#1b1920; color:#d9c99e; font:600 10px Cinzel,serif; }

#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud.panel-active { z-index: 60; }
.glass-card, .weather-pill { border: 1px solid var(--edge); background: linear-gradient(135deg, rgba(17,18,31,.86), rgba(20,20,31,.6)); box-shadow: 0 6px 24px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(9px); }
.top-left-cluster { position: absolute; top: 24px; left: 24px; display: flex; align-items: flex-start; gap: 14px; }
.minimap-shell { position: relative; width: 188px; height: 188px; padding: 7px; border: 1px solid rgba(197,188,224,.4); border-radius: 50%; background: rgba(8,9,16,.72); box-shadow: 0 7px 26px #0009, inset 0 0 0 5px #11131d; overflow: hidden; }
#minimap { width: 100%; height: 100%; border-radius: 50%; }
.map-compass { position: absolute; color: #b6b1c6; font: 600 9px Cinzel, serif; text-shadow: 0 1px 3px #000; }
.map-compass.north { top: 3px; left: 50%; transform: translateX(-50%); color: var(--gold); }
.map-compass.south { bottom: 3px; left: 50%; transform: translateX(-50%); }
.map-compass.east { right: 4px; top: 50%; }.map-compass.west { left: 4px; top: 50%; }
.map-caption { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; padding: 3px 9px; background: #0a0b12bb; color: #bfbcca; font: 600 8px Cinzel, serif; letter-spacing: .16em; }
.quest-card { width: 250px; padding: 14px 16px; }
.quest-card strong { font: 600 13px Cinzel, serif; }
.quest-progress { height: 2px; margin-top: 12px; background: #363543; }.quest-progress span { display: block; width: 8%; height: 100%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.top-right-cluster { position: absolute; top: 25px; right: 26px; display: flex; align-items: center; gap: 14px; }
.resource-line { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #8e7139; background: #0b0c14b5; }.resource-icon { color: var(--gold); }
.weather-pill { display: grid; grid-template-columns: 25px auto; column-gap: 7px; padding: 9px 13px; }.weather-pill > span { grid-row: 1/3; align-self: center; color: #8fa3d0; font-size: 20px; }.weather-pill b { font: 600 10px Cinzel, serif; }.weather-pill small { color: #8a8997; font-size: 9px; }

.target-frame { position: absolute; top: 22px; left: 50%; width: 300px; transform: translateX(-50%); padding: 9px 11px; background: linear-gradient(90deg, transparent, #10111edb 15%, #10111edb 85%, transparent); text-align: center; }
.target-heading { display: flex; justify-content: center; gap: 12px; font: 600 12px Cinzel, serif; }.target-heading small { color: var(--gold); }.target-frame .bar { height: 8px; margin-top: 6px; }.target-status { height: 14px; margin-top: 4px; color: #a9c8ef; font-size: 9px; }

#crosshair { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%,-50%); opacity: .7; }
#crosshair i { position: absolute; display: block; background: #e8e4d5; box-shadow: 0 0 2px #000; }
#crosshair i:nth-child(1) { width: 6px; height: 1px; left: 0; top: 12px; }#crosshair i:nth-child(2) { width: 6px; height: 1px; right: 0; top: 12px; }#crosshair i:nth-child(3) { width: 1px; height: 6px; top: 0; left: 12px; }#crosshair i:nth-child(4) { width: 1px; height: 6px; bottom: 0; left: 12px; }
.interaction { position: absolute; top: calc(50% + 35px); left: 50%; transform: translateX(-50%); padding: 7px 11px; background: #0b0c14d9; border: 1px solid var(--edge); font-size: 11px; }
kbd { min-width: 22px; display: inline-block; padding: 2px 5px; border: 1px solid #716d7e; border-radius: 2px; background: #21212c; color: #e8e6ec; font: 600 10px Inter; text-align: center; box-shadow: inset 0 -2px #111; }
#toast-stack { position: absolute; right: 30px; top: 100px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.toast { padding: 8px 12px; border-left: 2px solid var(--gold); background: #11131de6; color: #ddd9e5; font-size: 11px; animation: toastIn .2s ease, toastOut .4s ease 2.8s forwards; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px) } } @keyframes toastOut { to { opacity:0; transform:translateX(20px) } }
#damage-layer { position: absolute; inset: 0; overflow: hidden; }.damage-number { position: absolute; color: #fff0c9; font: 700 18px Cinzel, serif; text-shadow: 0 2px 5px #000, 0 0 10px #f66; animation: damageFly .9s ease forwards; } .damage-number.heal { color: #9ee58c; text-shadow: 0 2px 5px #000; } @keyframes damageFly { to { opacity: 0; transform: translateY(-45px) scale(1.2); } }

.chat-panel { position:absolute; z-index:20; left:26px; bottom:116px; width:330px; height:205px; display:flex; flex-direction:column; border:1px solid #514c60; background:#090a12d9; box-shadow:0 8px 28px #0008; backdrop-filter:blur(8px); pointer-events:auto; }
#hud.panel-active .chat-panel { display:none; }
.chat-panel header { display:flex; align-items:center; justify-content:space-between; padding:7px 9px; border-bottom:1px solid #363340; color:var(--gold-soft); font:600 9px Cinzel,serif; }
.chat-panel header span { color:#878391; font:9px Inter,sans-serif; }.chat-panel header i { color:#8acb99; font-style:normal; }
.chat-messages { flex:1; overflow:auto; padding:7px 9px; user-select:text; scrollbar-width:thin; }
.chat-message { margin:0 0 5px; color:#d1ced8; font-size:10px; line-height:1.35; overflow-wrap:anywhere; }.chat-message b { color:#dfbd70; margin-right:4px; }.chat-message.self b { color:#8fc4e9; }
.chat-panel form { display:flex; border-top:1px solid #363340; }.chat-panel input { min-width:0; flex:1; padding:8px; border:0; outline:0; background:#0c0d16; color:#eeeaf4; user-select:text; }.chat-panel form button { padding:7px 10px; cursor:pointer; border:0; border-left:1px solid #4a4555; background:#211c15; color:#e3c779; font-size:9px; }
.account-line { display:flex; align-items:center; gap:6px; padding:8px; border:1px solid #302e3a; color:#96929e; font-size:10px; }.account-line b{color:#dfc478}.account-line button{margin-left:auto;cursor:pointer;border:1px solid #524c59;background:#171721;color:#c7c2cc;font-size:9px}

.bottom-hud { position: absolute; left: 26px; right: 26px; bottom: 22px; display: flex; align-items: flex-end; justify-content: center; gap: 24px; }
.player-frame { position: absolute; left: 0; bottom: 0; display: grid; grid-template-columns: 66px 225px; gap: 9px; width: 330px; padding: 8px; background: linear-gradient(90deg, #0c0d16e8, #131420c9 80%, transparent); }
.portrait { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border: 2px solid #8d7544; border-radius: 50%; background: radial-gradient(circle at 55% 30%, #5b5369, #171520 60%); color: #d6c17f; font-size: 25px; }.portrait i { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #a07734; color: #fff; font: 700 10px Inter; }
.bars { display: flex; flex-direction: column; gap: 4px; }.bar-row { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 4px; color: #868491; font: 600 8px Inter; }.bar { position: relative; height: 13px; border: 1px solid #272733; background: #090a0f; overflow: hidden; }.bar i { display:block; width:100%; height:100%; transition: width .2s; }.bar b { position:absolute; inset:0; display:grid; place-items:center; color:#f6f3f3; font:600 8px Inter; text-shadow:0 1px 2px #000; }.hp i { background:linear-gradient(90deg,#6e1728,#bd3a4e); }.mp i { background:linear-gradient(90deg,#264676,#4b83c9); }.stamina i { background:linear-gradient(90deg,#527325,#82ab42); }.enemy-bar i { background:linear-gradient(90deg,#691923,#c13b45); }
.xp-wrap { grid-column: 1/3; display: flex; align-items: center; gap: 7px; color:#9c99a7; font-size:8px; }.xp-track { flex:1; height:3px; background:#292735; }.xp-track i { display:block; height:100%; background:#8b6db1; }
.hotbar { display: flex; gap: 5px; padding: 7px; border: 1px solid #3f3b4c; background: #0c0d15d9; box-shadow: 0 7px 22px #0007; pointer-events: auto; }
.slot { position: relative; width: 50px; height: 50px; cursor: pointer; border: 1px solid #504b5c; background: linear-gradient(145deg,#252532,#12131d); }
.slot:hover { border-color: var(--gold); }.slot.dragover { box-shadow: inset 0 0 0 2px var(--gold); }.slot .key { position:absolute; left:3px; top:2px; z-index:2; color:#cbc8d1; font:700 9px Inter; }.slot .slot-icon { position:absolute; inset:0; display:grid; place-items:center; font-size:25px; text-shadow:0 2px 5px #000; }.slot .cooldown { position:absolute; inset:0; display:grid; place-items:center; background:#080910ba; color:#fff; font:700 14px Inter; }.slot .count { position:absolute; right:3px; bottom:2px; font:700 9px Inter; text-shadow:0 1px 2px #000; }
.quick-buttons { position:absolute; right:0; bottom:0; display:flex; gap:6px; pointer-events:auto; }.quick-buttons button { display:flex; align-items:center; gap:5px; padding:6px 8px; border:1px solid var(--edge); background:#0e0f18d9; font-size:9px; cursor:pointer; }

.panel-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(4,5,10,.6); backdrop-filter: blur(3px); pointer-events:none; }
.panel-window { position:relative; width:min(920px,88vw); max-height:82vh; overflow:auto; padding:30px; border:1px solid #615a72; background: linear-gradient(135deg,rgba(24,23,35,.98),rgba(10,11,18,.98)); box-shadow:0 25px 100px #000, inset 0 0 0 2px #0a0b11; pointer-events:auto; }
.panel-window::before { content:""; position:absolute; inset:7px; pointer-events:none; border:1px solid #ffffff0b; }
.panel-window h2 { margin:0 0 10px; font:600 28px Cinzel,serif; letter-spacing:.04em; }.panel-window h3 { font:600 15px Cinzel,serif; color:var(--gold-soft); }.panel-intro { color:#9996a5; font-size:12px; }
.panel-close { position:absolute; z-index:2; right:17px; top:15px; border:0; background:none; color:#9692a1; font-size:26px; cursor:pointer; }
.spell-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:22px; }.spell-card { display:grid; grid-template-columns:52px 1fr auto; gap:12px; padding:14px; border:1px solid #3b3947; background:#11121c; cursor:grab; }.spell-card.locked { opacity:.4; cursor:default; }.item-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid #574f68; background:radial-gradient(circle,#343344,#15151d); font-size:27px; }.spell-card h3,.inventory-item h3 { margin:0 0 5px; color:#eeeaf3; font:600 12px Cinzel,serif; }.spell-card p,.inventory-item p { margin:0; color:#92909d; font-size:10px; line-height:1.45; }.spell-meta { color:var(--gold); font-size:9px; text-align:right; white-space:nowrap; }.spell-meta span { display:block; margin-bottom:4px; }
.equipment-strip { display:flex; gap:8px; margin:18px 0; }.equipment-strip div { min-width:175px; padding:10px 12px; border-left:2px solid #6f5a32; background:#11121b; }.equipment-strip span { display:block; color:#7f7c89; font-size:9px; text-transform:uppercase; }.equipment-strip b { font:600 11px Cinzel,serif; }
.inventory-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; min-height:200px; }.inventory-item { position:relative; min-height:125px; padding:13px; cursor:pointer; border:1px solid #373642; background:#11121b; }.inventory-item:hover { border-color:#8d7140; }.inventory-item .item-icon { margin-bottom:10px; }.inventory-item .qty { position:absolute; right:8px; top:8px; padding:2px 6px; border-radius:10px; background:#090a10; font-size:9px; }
.map-window { width:min(1000px,92vw); }.map-header { display:flex; justify-content:space-between; align-items:end; }.map-legend { display:flex; gap:15px; color:#9e9ba7; font-size:9px; }.map-legend span { display:flex; align-items:center; gap:5px; }.map-legend i { width:7px; height:7px; border-radius:50%; background:#fff; }.legend-player { background:#f4dc83!important; }.legend-enemy { background:#c94a51!important; }.legend-shop { background:#55c0a4!important; }.legend-boss { background:#f0783c!important; }.map-window canvas { width:100%; max-height:62vh; margin-top:14px; border:1px solid #484451; background:#181a22; }
.shop-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }.shop-item { padding:17px; border:1px solid #3d3a46; background:#11121b; text-align:center; }.shop-item .item-icon { margin:0 auto 10px; }.shop-item h3 { font:600 12px Cinzel,serif; }.shop-item p { min-height:32px; color:#8f8c98; font-size:10px; }.shop-item button { padding:8px 13px; cursor:pointer; border:1px solid #80693c; background:#2e2617; color:#ebd49a; font:600 10px Cinzel; }
.level-window { width:min(650px,88vw); text-align:center; }.stat-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0; }.stat-choice { padding:15px; border:1px solid #413e49; background:#101119; }.stat-choice h3 { margin:0 0 8px; }.stat-choice .stat-number { display:block; margin:8px; color:var(--gold-soft); font:700 25px Cinzel; }.stat-choice button { width:30px;height:30px; border:1px solid #625979;background:#252333;cursor:pointer; }.stat-choice small { display:block; margin-top:9px; color:#817f8b; }
.pause-window { width:min(880px,92vw); }.pause-columns { display:grid; grid-template-columns:.8fr 1.2fr; gap:35px; margin:20px 0 26px; }.pause-columns label { display:flex; justify-content:space-between; margin:10px 0; padding-bottom:9px; border-bottom:1px solid #2e2d37; color:#aaa7b1; font-size:11px; }.pause-columns select { color:#ddd; border:1px solid #45424e; background:#151620; }.settings-heading { display:flex; align-items:center; justify-content:space-between; }.settings-heading h3 { margin:0; }.settings-heading button,#reset-hotkeys { cursor:pointer; border:1px solid #514b5d; background:#191a25; color:#bcb8c5; font-size:9px; padding:5px 9px; }.settings-note { color:#777481; font-size:9px; line-height:1.5; }.hotkey-editor { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; max-height:350px; overflow:auto; padding-right:5px; }.hotkey-editor div { display:flex; align-items:center; justify-content:space-between; min-height:28px; border-bottom:1px solid #2b2a34; color:#aaa7b1; font-size:9px; }.hotkey-editor button { min-width:64px; padding:4px 6px; cursor:pointer; border:1px solid #4d4858; background:#161721; color:#e6c97f; font:600 9px Inter; }.hotkey-editor button.listening { border-color:#d9b55d; color:#fff; box-shadow:0 0 9px #d9b55d44; }
.dev-console { position:fixed; z-index:130; left:4vw; right:4vw; bottom:3vh; height:min(310px,40vh); display:flex; flex-direction:column; border:1px solid #716987; background:rgba(5,7,12,.96); box-shadow:0 14px 70px #000; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }.console-title { padding:7px 11px; border-bottom:1px solid #3d3949; color:#e0c275; letter-spacing:.08em; }.console-title span { float:right; color:#767280; letter-spacing:0; }.console-output { flex:1; overflow:auto; padding:10px 13px; color:#aaa7b4; user-select:text; }.console-output .success { color:#87d19a; }.console-output .error { color:#e0787f; }.console-entry { display:flex; gap:8px; align-items:center; padding:8px 12px; border-top:1px solid #35323f; color:#d9b85e; }.console-entry input { width:100%; border:0; outline:0; background:transparent; color:#f0edf4; font:inherit; }
.death-copy { padding:40px; text-align:center; background:#080910cc; }.death-copy h2 { margin:0; color:#c1bdc8; font:700 45px Cinzel; letter-spacing:.1em; }.death-copy p:not(.eyebrow) { margin:16px 0 28px; color:#8b8892; }.victory-copy h2 { color:#e4cd88; }

.mobile-controls, .orientation-message { display:none; }

@media (pointer:coarse), (hover:none) {
  html, body, #game { touch-action:none; overscroll-behavior:none; }
  .top-left-cluster, .top-right-cluster, .quick-buttons, .player-frame { display:none; }
  #hud.panel-active .mobile-controls { display:none; }
  #target-frame { top:64px; }
  #toast-stack { top:68px; right:12px; max-width:52vw; }
  .bottom-hud { left:50%; right:auto; bottom:8px; transform:translateX(-50%); }
  .hotbar { transform:scale(.78); transform-origin:center bottom; }
  .mobile-controls { position:fixed; inset:0; z-index:45; display:block; pointer-events:none; }
  .mobile-controls button { pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none; border:1px solid #aaa3bf66; background:linear-gradient(145deg,#242535dd,#0d0e18dd); color:#f2eef8; box-shadow:0 5px 20px #0009, inset 0 0 0 1px #ffffff0b; }
  .mobile-controls button:active, .mobile-controls button.active { border-color:var(--gold); background:linear-gradient(145deg,#806331ee,#30230fee); transform:scale(.96); }
  .mobile-corner-button { position:absolute; top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 12px; border-radius:7px; }
  .mobile-corner-button span { color:var(--gold-soft); font-size:18px; }
  .mobile-chat-toggle { position:absolute; left:max(0px,env(safe-area-inset-left)); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; min-width:44px; min-height:58px; padding:7px 5px; border-radius:0 8px 8px 0; }
  .mobile-chat-toggle span { font-size:18px; }.mobile-chat-toggle b { font:600 7px Cinzel,serif; }
  .chat-panel { display:none; position:fixed; z-index:44; inset:0 auto 0 0; width:min(48vw,390px); height:auto; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); border-width:0 1px 0 0; }
  .chat-panel.mobile-open { display:flex; }
  body.mobile-chat-open .mobile-chat-toggle { left:min(48vw,390px); }
  body.mobile-chat-open .mobile-dpad { opacity:.18; }
  .mobile-corner-button b, .mobile-panel-buttons b { font:600 9px Cinzel,serif; }
  .mobile-panel-buttons { position:absolute; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:flex; gap:7px; }
  .mobile-panel-buttons button { display:flex; align-items:center; gap:5px; min-height:44px; padding:7px 10px; border-radius:7px; }
  .mobile-panel-buttons span { color:var(--gold-soft); font-size:16px; }
  .mobile-dpad { position:absolute; left:max(14px,env(safe-area-inset-left)); bottom:max(14px,env(safe-area-inset-bottom)); display:grid; grid-template:repeat(3,52px)/repeat(3,52px); gap:3px; pointer-events:none; }
  .mobile-dpad button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:2px; border-radius:9px; }
  .mobile-dpad button kbd { min-width:18px; padding:1px 3px; font-size:8px; }
  .mobile-dpad button span { font:600 7px Inter,sans-serif; }
  .mobile-move-forward { grid-area:1/2; }
  .mobile-move-right { grid-area:2/3; }
  .mobile-move-back { grid-area:3/2; }
  .mobile-move-left { grid-area:2/1; }
  .mobile-attack-button { position:absolute; right:max(20px,env(safe-area-inset-right)); bottom:max(28px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; justify-content:center; width:86px; height:86px; border-radius:50%; }
  .mobile-attack-button span { color:#f0c677; font-size:27px; }
  .mobile-attack-button b { font:700 10px Cinzel,serif; letter-spacing:.08em; }
}

@media (pointer:coarse) and (orientation:landscape), (hover:none) and (orientation:landscape) {
  .account-card { width:min(390px,58vw); margin-right:37vw; padding:20px 24px; }
  .account-card h1 { font-size:29px; }.account-card > label:not(.language-selector){margin:8px 0}.account-card input{padding:8px}.account-language-selector{margin:8px 0}.account-status{margin:3px 0}.account-actions .primary-button{padding:8px}
  .title-copy { width:min(720px,88vw); margin-right:34vw; }
  html[lang="ru"] .title-copy h1, .title-copy h1 { font-size:clamp(34px,6.8vw,58px); }
  .title-copy .eyebrow { margin-bottom:5px; }
  .title-rule { margin:10px auto 6px; }
  .subtitle { font-size:12px; }
  .mission { max-width:540px; margin:12px auto 16px; font:12px/1.4 Cinzel,serif; }
  .title-language-selector { margin:-5px auto 10px; padding:4px 8px; }
  .primary-button { min-width:210px; padding:10px 20px; }
  .start-hint { margin-top:9px; font-size:9px; }
}

@media (pointer:coarse) and (orientation:portrait), (hover:none) and (orientation:portrait) {
  .orientation-message { position:fixed; inset:0; z-index:250; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at center,#24263a,#080910 72%); text-align:center; }
  .orientation-message > div { max-width:360px; }
  .orientation-message .rotate-icon { display:block; color:var(--gold); font-size:72px; line-height:1; animation:rotateHint 1.8s ease-in-out infinite; }
  .orientation-message h2 { margin:15px 0 8px; color:var(--gold-soft); font:600 25px Cinzel,serif; }
  .orientation-message p { margin:0; color:#aaa7b3; font-size:13px; }
  .orientation-message button { margin-top:22px; min-width:270px; font-size:10px; }
}

@keyframes rotateHint { 50% { transform:rotate(90deg); } }

@media(max-width:950px){.quest-card,.weather-pill{display:none}.player-frame{transform:scale(.82);transform-origin:left bottom}.slot{width:42px;height:42px}.hotbar{gap:2px}.quick-buttons span{display:none}.title-copy{margin-right:0}.account-card{margin-right:0}.inventory-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.top-left-cluster{left:10px;top:10px}.minimap-shell{width:130px;height:130px}.bottom-hud{left:8px;right:8px;bottom:8px}.player-frame{display:none}.quick-buttons{display:none}.hotbar{overflow:hidden}.slot{width:36px;height:40px}.slot .slot-icon{font-size:19px}.spell-grid,.shop-list,.stat-choices{grid-template-columns:1fr}.pause-columns{grid-template-columns:1fr}.panel-window{padding:22px}.target-frame{width:240px}}
.player-status { position:absolute; bottom:calc(100% + 7px); left:0; right:0; color:#ffcda3; font-size:11px; font-weight:700; text-align:center; text-shadow:0 1px 4px #000; }

.character-summary{display:flex;align-items:center;flex-wrap:wrap;gap:12px 26px;padding:14px 0;color:var(--gold-soft)}
.character-summary strong{font-size:22px}.character-summary span{color:#cbc5d7}
.character-attributes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 24px}
.character-attributes article{background:#14151f;border:1px solid #454054;padding:16px}
.character-attributes h3{display:flex;justify-content:space-between;gap:8px;margin:0 0 12px}.character-attributes h3 b{font:700 24px Inter,sans-serif;color:#f1d495}
.character-attributes p{font-size:12px;line-height:1.6;color:#b2adbd}.character-attributes strong{font-size:13px;color:#dfd5ed}
.character-values{margin:0}.character-row{display:grid;grid-template-columns:minmax(130px,1fr) 1.5fr;gap:18px;padding:12px 0;border-bottom:1px solid #ffffff12;font-size:12px;line-height:1.5}
.character-row dt{color:#aaa5b5}.character-row dd{margin:0;color:#e4dceb;text-align:right}.character-window .panel-intro{line-height:1.7}
.shop-gold{color:var(--gold-soft);font-size:14px}.shop-sales{display:grid;gap:10px}.sale-row{display:flex;gap:14px;align-items:center;border:1px solid #423d4f;background:#11121b;padding:14px}.sale-copy{flex:1;min-width:0}.sale-copy h3{margin:0 0 7px}.sale-copy p{font-size:12px;color:#beb5cd;margin:0}.sale-copy small{display:block;font-size:11px;color:#d1b480;margin-top:7px}.sale-actions{display:flex;flex-direction:column;gap:7px}.sale-actions button{padding:9px;border:1px solid #80693c;background:#2e2617;color:#ebd49a;cursor:pointer;font-size:10px;white-space:nowrap}.sale-actions button:disabled{opacity:.5;cursor:wait}.stamina i.exhausted{filter:grayscale(.7);opacity:.6}
@media(max-width:680px){.character-attributes{grid-template-columns:1fr}.character-row{grid-template-columns:1fr;gap:4px}.character-row dd{text-align:left}.sale-row{flex-wrap:wrap}.sale-actions{flex-direction:row;flex-wrap:wrap;width:100%}}
@media(pointer:coarse),(hover:none){.mobile-jump-button{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(130px,calc(env(safe-area-inset-bottom) + 105px));width:64px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px}.mobile-jump-button span{font-size:24px;color:#f0c677}.mobile-jump-button b{font-size:9px}.mobile-panel-buttons{max-width:70vw;flex-wrap:wrap;justify-content:flex-end}.mobile-panel-buttons button{padding:6px}.mobile-panel-buttons b{font-size:8px}}

.hotkey-editor .jump-binding{grid-column:1 / -1;border-color:#80693c;color:#ebd49a;font-size:11px;min-height:36px}.hotkey-editor .jump-binding button{font-size:11px}