:root {
  color-scheme: dark;
  --bg: #0b0e13;
  --panel: #131820;
  --panel-2: #171d27;
  --panel-3: #1e2530;
  --outline: #2a3039;
  --text: #e9e7e2;
  --muted: #858a95;
  --gold: #e0b87d;
  --gold-deep: #9f7347;
  --green: #8fc8ab;
  --red: #d57e79;
  --purple: #b7a0e6;
  --radius: 20px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; background:linear-gradient(#080c12b8,#080b10dc),url('./assets/Back.png') center/cover fixed no-repeat,var(--bg); color: var(--text); font: 500 14px/1.55 'Manrope',system-ui,sans-serif; overflow-x: hidden; }
button,input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; filter: saturate(.35); }
button:focus-visible,input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button:not(:disabled):active { transform: scale(.985); }
.background-noise { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.light-blob { position:fixed; width:400px; height:400px; border-radius:50%; pointer-events:none; filter:blur(110px); opacity:.10; }
.blob-left { background:#bf8745; top:0; left:-230px; }.blob-right { background:#54698f; top:38%; right:-240px; }
#app { position:relative; z-index:1; }
.shell { min-height:100vh; max-width:1430px; margin:auto; display:grid; grid-template-columns:244px minmax(0,1fr) 275px; }
.sidebar { min-height:100vh; border-right:1px solid #343943; padding:31px 19px 26px; position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column; gap:28px; background:linear-gradient(135deg,rgba(17,20,26,.94),rgba(9,12,17,.88)); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:12px; padding:0 8px; min-width:0; }
.brand-mark { width:42px; height:42px; min-width:42px; border:1px solid #816744; background:linear-gradient(135deg,#2c2720,#11151e); border-radius:12px; display:grid; place-items:center; box-shadow:inset 0 0 22px #75543024; color:var(--gold); font-size:29px; line-height:1; font-weight:700; }
.brand-name { font:700 15px/1.25 'Unbounded',sans-serif; letter-spacing:-.055em; text-transform:uppercase; }.brand-caption { color:#ad8c60; font-size:9px; letter-spacing:.24em; margin-top:5px; font-weight:800; }
.nav-label,.eyebrow { font-size:10px; letter-spacing:.18em; font-weight:800; text-transform:uppercase; color:#a18b6f; }
.nav-label { margin:12px 12px 4px; color:#696f7a; }
.nav { display:flex; flex-direction:column; gap:7px; }
.nav-btn { width:100%; border:1px solid transparent; color:#959ba6; text-align:left; padding:12px 13px; background:transparent; border-radius:12px; display:flex; gap:12px; align-items:center; font-weight:700; font-size:12px; transition:background .16s,color .16s; }
.nav-btn .nav-icon { font-size:20px; width:23px; text-align:center; font-family:serif; }
.nav-btn.active { background:linear-gradient(95deg,#3b3024,#24252a); border-color:#56452f; color:#edcc98; }.nav-btn:hover:not(.active){ background:#ffffff0a;color:#f4f1eb; }
.sidebar-settings { margin-top:auto; padding-top:18px; border-top:1px solid #ffffff10; }
.side-bottom { margin-top:auto; background:linear-gradient(130deg,#2a2a28,#171b23); border:1px solid #40372b; padding:16px; border-radius:17px; }
.side-bottom .mini-label { color:#af936e; font-size:10px; letter-spacing:.12em; font-weight:800; text-transform:uppercase; }
.side-bottom strong { display:block; font-size:14px; margin:7px 0 3px; }.side-bottom p { color:#aaaab0; margin:0 0 12px; font-size:11px; line-height:1.65; }
.layout-main { padding:30px 36px 72px; min-width:0; }.right-rail { padding:30px 18px; border-left:1px solid #272930; }
.topbar { height:48px; display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:31px; }
.topbar-name { display:flex; align-items:center; gap:11px; }.topbar-name .top-icon { color:var(--gold); font-size:20px; }.topbar-name .small-title { color:#c9c3b7; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.wallet { display:flex; align-items:center; justify-content:flex-end; gap:10px; }.money { border:1px solid #393329; background:#242019; border-radius:10px; padding:7px 11px; color:#e8c28a; font-size:12px; font-weight:800; white-space:nowrap; }
.avatar { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:17px; color:#e7bb87; border:1px solid #58442c; background:#35291f; }
.heading-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:19px; gap:12px; }
h1,h2,h3,p { margin-top:0; }
h1 { font:700 clamp(25px,3.4vw,36px)/1.22 'Unbounded',sans-serif; letter-spacing:-.065em; margin:8px 0; }
h2 { font:700 18px/1.35 'Unbounded',sans-serif; letter-spacing:-.05em; margin:0; }
h3 { font:700 13px/1.45 'Unbounded',sans-serif; letter-spacing:-.045em; margin:0; }
.subtext { color:#8c929e; font-size:12px; max-width:560px; margin:0; line-height:1.7; }.subtext strong { color:#ccc4b7; }
.section-heading { font:700 16px/1.35 'Unbounded',sans-serif; letter-spacing:-.055em; }.section-wrap { margin:27px 0 14px; display:flex; align-items:center; justify-content:space-between; }
.panel { border:1px solid #30333b; border-radius:var(--radius); background:linear-gradient(145deg,#1a1f29,#141922); }
.intro-art { position:relative; overflow:hidden; min-height:263px; padding:30px; border:1px solid #55452f; border-radius:22px; background:radial-gradient(circle at 85% 42%,#7252335c,transparent 34%),linear-gradient(117deg,#2e261f,#181e27 65%,#11171e); display:flex; justify-content:space-between; align-items:center; isolation:isolate; }
.intro-art::after { content:''; position:absolute; inset:0; opacity:.3; background:repeating-linear-gradient(45deg,transparent 0px,transparent 41px,#d8bd8722 42px,transparent 43px); pointer-events:none; }
.intro-copy { position:relative; z-index:2; max-width:70%; }.intro-copy .eyebrow { color:#e6be86; }.intro-copy h1 { font-size:clamp(27px,3vw,38px); max-width:490px; }.intro-copy p { color:#c1b8ac; font-size:12px; max-width:360px; line-height:1.8; margin:10px 0 19px; }
.illustration { position:absolute; width:330px; height:100%; right:-12px; top:0; opacity:.65; color:#b28b5a; overflow:hidden; }
.illustration::before { content:''; position:absolute; width:218px; height:218px; border-radius:50%; background:radial-gradient(circle,#d59b5f66 0%,#a36c3666 32%,transparent 70%); right:4px; top:17px; }
.castle { position:absolute; bottom:0; right:0; width:320px; height:218px; filter:drop-shadow(0 0 27px #b38c5552); }
.castle path { fill:#4c4038; stroke:#b18a5a; stroke-width:1.3; }
.hero-mini { position:relative; display:flex; align-items:center; gap:17px; padding:18px 20px; border:1px solid #36343a; border-radius:17px; background:linear-gradient(110deg,#1e222d,#141922); margin-top:19px; }
.hero-mini .stat-lvl { color:var(--gold); font-size:10px; font-weight:800; margin-bottom:4px; letter-spacing:.10em; }.hero-mini h3 { font-size:14px; }.hero-mini .hero-details { flex:1; min-width:0; }.hero-mini .hero-details p { color:var(--muted); font-size:11px; margin:3px 0 8px; }
.portrait { position:relative; border-radius:17px; display:grid; place-items:center; flex-shrink:0; overflow:hidden; border:1px solid #87704b55; background:radial-gradient(circle at 50% 42%,#70563355,transparent 60%),linear-gradient(145deg,#3c3535,#202733); }
.portrait::before { content:''; position:absolute; width:75%;height:75%;border:1px solid #bda27b44; transform:rotate(45deg);border-radius:22px; }
.portrait span { font-size:calc(var(--portrait-size) * .49); text-shadow:0 0 30px #e4b98788; position:relative; z-index:1; color:var(--hero-color,var(--gold)); line-height:1; font-family:Georgia,serif; }
.portrait img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2; }
.portrait-small { --portrait-size:72px; width:72px;height:72px; }.portrait-large { --portrait-size:154px; width:154px;height:154px;border-radius:22px; }.portrait-tiny { --portrait-size:48px;width:48px;height:48px;border-radius:13px; }
.portrait.mage { background:radial-gradient(circle at 50% 40%,#71559755,transparent 70%),linear-gradient(145deg,#3a2c45,#1b2433); }.portrait.rogue { background:radial-gradient(circle at 50% 40%,#3f9f8966,transparent 70%),linear-gradient(145deg,#25443f,#1c252d); }.portrait.cleric { background:radial-gradient(circle at 50% 40%,#e8ae6b55,transparent 70%),linear-gradient(145deg,#604636,#242833); }
.meter { height:7px; background:#0d1117; border-radius:99px; overflow:hidden; border:1px solid #ffffff0b; }.meter>i { height:100%; display:block; background:linear-gradient(90deg,#a25c52,#d99083); border-radius:99px; transition:width .25s ease; }.meter.xp>i { background:linear-gradient(90deg,#926840,#e3b67f); }.meter.mana>i { background:linear-gradient(90deg,#6178bf,#a1b1e0); }
.meter-line { display:flex; justify-content:space-between; font-size:10px; font-weight:800; gap:10px; margin:2px 0 5px; }.meter-line span:first-child { color:#9e9faa; }.meter-line span:last-child { color:#e2dbd0; }.hero-bars { max-width:420px; }
.btn { border:1px solid #655039; background:linear-gradient(180deg,#d5ad78,#b88a51); color:#191714; padding:11px 17px; border-radius:11px; display:inline-flex; align-items:center; gap:9px; justify-content:center; font-size:12px; font-weight:800; line-height:1.4; white-space:nowrap; transition:filter .15s,transform .15s; }.btn:hover:not(:disabled) { filter:brightness(1.12); }.btn-secondary { background:#252b33;border-color:#404750;color:#d7d8dc; }.btn-subtle { background:transparent;border-color:#3b414b;color:#bfc3c9; }.btn-danger { background:#4e2b2c;border-color:#805455;color:#f2b5ae; }.btn-small { padding:8px 13px;font-size:11px; }.btn-block { width:100%; }.btn-ghost { border:none;background:transparent;color:var(--gold);font-size:11px;font-weight:800;padding:8px 0; }
.grid-two { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px; }.adventure-card { text-align:left; width:100%;padding:19px;min-height:168px;background:linear-gradient(145deg,#1d2530,#151a22);border:1px solid #343d46;border-radius:18px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden;color:var(--text); }
.adventure-card::after { content:'✦';color:#6f706d32;position:absolute;right:10px;bottom:2px;font-size:84px;line-height:1; }
.adventure-card .adventure-icon { color:#daa970;font-size:24px;margin-bottom:11px; }.adventure-card h3 {font-size:12px;}.adventure-card p {color:#9296a2;font-size:10px;line-height:1.65;max-width:210px;flex:1;margin:6px 0 12px;}.card-link {color:#e2bb88;font-size:11px;font-weight:800;}.adventure-card:hover { border-color:#846f54; }
.stat-three { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }.stat-box { border:1px solid #313742;border-radius:15px;background:#1a2029;padding:15px 11px; }.stat-box small { display:block;color:#89909e;font-size:10px;margin-bottom:7px; }.stat-box strong { font:700 23px/1.2 'Unbounded',sans-serif;letter-spacing:-.07em; }.stat-box .stat-hint {color:#858c99;font-size:9px;margin-top:4px; }
.rail-card { padding:18px; border-radius:18px;background:linear-gradient(150deg,#1a2029,#11151c);border:1px solid #31353e;margin-bottom:14px; }.rail-card .eyebrow { margin-bottom:14px;display:block; }.rail-card h3 {font-size:12px;margin:0 0 6px;}.rail-card p {color:#9295a0;font-size:11px;margin:0 0 14px;line-height:1.7;}.rail-avatar {width:53px;height:53px;border-radius:16px;background:#493a2b;display:grid;place-items:center;color:#f4c084;font-size:25px;margin-bottom:13px;}.rail-row {display:flex;justify-content:space-between;color:#9ea1ad;font-size:11px;padding:10px 0;border-top:1px solid #ffffff10;}.rail-row strong {color:#e7d1af;}.progress-track {height:6px;background:#34343a;border-radius:50px;overflow:hidden;}.progress-track span {display:block;height:100%;background:#d4a575;}
.bottom-nav {display:none;}
.settings-panel { padding:24px; }
.settings-title { display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.settings-symbol { width:47px; height:47px; display:grid; place-items:center; border:1px solid #6b5236; border-radius:13px; background:linear-gradient(145deg,#392d22,#171c24); color:#e4ba80; font:700 24px/1 Georgia,serif; }
.settings-title h2 { margin-top:4px; }
.volume-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 18px; align-items:center; padding:18px 0; border-top:1px solid #ffffff10; }
.volume-control span strong,.volume-control span small { display:block; }
.volume-control span strong { font-size:12px; color:#e8e2d8; }
.volume-control span small { margin-top:3px; color:#858b96; font-size:10px; }
.volume-control output { min-width:46px; color:#e5bb82; font-size:11px; font-weight:900; text-align:right; font-variant-numeric:tabular-nums; }
.volume-control input[type="range"] { grid-column:1/-1; width:100%; height:6px; margin:7px 0 0; accent-color:#c99a60; cursor:pointer; }
.settings-danger { margin-top:16px; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:25px; border-color:#58383a; background:linear-gradient(145deg,#241b20,#151922); }
.settings-danger h2 { margin:5px 0 7px; }
.settings-danger p { max-width:610px; margin:0; color:#96919a; font-size:11px; line-height:1.7; }
.settings-danger .btn { flex:0 0 auto; }
/* Character creation */
.onboard {max-width:1010px;margin:0 auto;padding:27px 31px 65px;}.onboard-head {display:flex;justify-content:space-between;align-items:center;margin-bottom:43px;}.onboard-head .eyebrow{font-size:10px;}.onboard-intro {text-align:center;margin:0 auto 28px;max-width:620px;}.onboard-intro h1 {font-size:clamp(28px,4vw,41px);margin:13px 0 10px;}.onboard-intro p {font-size:13px;color:#9fa2ad;line-height:1.7;}.onboard-intro .eyebrow {color:var(--gold);}.divider-gem {color:#a88b65;font-size:20px;margin-top:15px;}
.create-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}.class-card {position:relative;text-align:left;color:var(--text);padding:16px 14px 18px;border:1px solid #38404b;border-radius:17px;background:linear-gradient(153deg,#222a34,#151a22);min-height:220px;transition:border-color .15s,background .15s,transform .15s;overflow:hidden;}.class-card.active{border-color:#d4a46b;box-shadow:0 0 0 1px #b98f60 inset,0 10px 35px #9a6f2817;background:linear-gradient(153deg,#333029,#171d25);}.class-card:hover{transform:translateY(-2px);}.class-card::before{content:'';position:absolute;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#bf8b5a22,transparent 70%);right:-35px;top:-32px;}.class-symbol {height:78px;display:flex;align-items:center;justify-content:center;font:48px/1 Georgia,serif;text-shadow:0 0 35px #d6a87566;color:#f5c88c;}.class-card.mage .class-symbol {color:#c9b0ff;}.class-card.rogue .class-symbol {color:#8dd5b4;}.class-card.cleric .class-symbol{color:#f7daa3;}.class-card h3{font-size:13px;}.class-card p{font-size:10px;line-height:1.65;color:#a0a3ad;margin:7px 0 12px;min-height:42px;}.class-tags {display:flex;flex-wrap:wrap;gap:5px;}.class-tags em {color:#c5ad8e;background:#ffffff0a;font:700 9px/1.4 'Manrope',sans-serif;border-radius:6px;padding:4px 6px;}.class-check {position:absolute;top:9px;right:11px;color:#e3bd87;font-size:17px;}
.name-area {border:1px solid #3a3939;background:#171b22;border-radius:17px;padding:17px;margin-top:17px;display:flex;align-items:end;gap:14px;}.name-area label {flex:1;font-size:11px;color:#b6b7b9;font-weight:800;}.name-input{display:block;width:100%;padding:12px 13px;border-radius:10px;border:1px solid #3d4450;background:#10151b;color:#eee;font-size:13px;outline:none;margin-top:9px;}.name-input:focus{border-color:#bd9663;}.class-summary{margin-top:10px;text-align:center;color:#969ba3;font-size:11px;}
/* Dungeons and hero */
.dungeon-list {display:flex;flex-direction:column;gap:13px;}.dungeon-card {border-radius:18px;border:1px solid #39414b;background:linear-gradient(110deg,#22262e,#161b23);padding:18px;display:flex;gap:17px;align-items:center;}.dungeon-thumb {width:93px;height:102px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;font-size:40px;border:1px solid #9d765034;background:radial-gradient(circle,#9a5d385e,transparent 65%),linear-gradient(130deg,#4e3d3a,#1e2430);color:#e3c49b;}.dungeon-thumb.cave{background:radial-gradient(circle,#5b71985e,transparent 65%),linear-gradient(130deg,#303f54,#1e2430);color:#b3c7ed;}.dungeon-thumb.citadel{background:radial-gradient(circle,#9a47545e,transparent 65%),linear-gradient(130deg,#4e3035,#1e2430);color:#edacb0;}.dungeon-info {min-width:0;flex:1;}.dungeon-info h3 {font-size:13px;}.dungeon-info p{font-size:11px;color:#9299a4;line-height:1.6;margin:5px 0 8px;}.dungeon-meta {display:flex;gap:8px;flex-wrap:wrap;}.pill {font-size:10px;border:1px solid #45464b;border-radius:7px;color:#bdc0c6;padding:4px 7px;background:#ffffff08;}.pill.gold {color:#dec08d;border-color:#705940;background:#b8834220;}.dungeon-action{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0;}.dungeon-action small{color:#868a94;font-size:10px;}
.hero-overview {display:flex;gap:24px;align-items:center;padding:22px;margin-bottom:18px;}.hero-overview .portrait {--portrait-size:142px;width:142px;height:142px;}.hero-overview-content{min-width:0;flex:1;}.hero-overview-content h2 {font-size:20px;margin:5px 0;}.hero-overview-content p {font-size:11px;color:#91959e;margin:2px 0 14px;}
.talent-card {display:flex;align-items:center;gap:12px;border-radius:15px;background:#1c222c;border:1px solid #343d48;padding:14px;}.talent-card+.talent-card {margin-top:10px;}.talent-icon {font-size:20px;display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;background:#2a303b;border-radius:11px;color:#ddbc90;}.talent-card h3 {font-size:11px;}.talent-card p {font-size:10px;color:#9299a4;margin:4px 0 0;}.talent-card .btn {margin-left:auto;min-width:34px;}.talent-rank {font-size:10px;color:#c9af8a;white-space:nowrap;}
.shop-item {border:1px solid #353c45;background:#1c222a;border-radius:15px;padding:15px;display:flex;align-items:center;gap:13px;}.shop-item .shop-icon{font-size:23px;display:grid;place-items:center;width:43px;height:43px;border-radius:10px;background:#3c2c30;}.shop-item h3{font-size:12px;}.shop-item p{color:#959aa5;font-size:10px;margin:4px 0 0;}.shop-item .btn{margin-left:auto;}
.shop-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:28px 2px 14px; }
.shop-section-head h2 { margin-top:5px; }
.shop-section-head>small { color:#7f858f; font-size:9px; }
.shop-weapon-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.shop-weapon-card { min-width:0; overflow:hidden; border:1px solid #3d4149; border-radius:16px; background:linear-gradient(155deg,#22242b,#141920); }
.shop-weapon-card.equipped { border-color:#aa7d49; box-shadow:0 0 0 1px #8e6639 inset,0 12px 30px #0005; }
.shop-weapon-art { height:190px; padding:11px; display:grid; place-items:center; background:radial-gradient(circle at 50% 55%,#783d2c40,transparent 58%),linear-gradient(180deg,#20242c,#11161d); border-bottom:1px solid #ffffff0c; }
.shop-weapon-art img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 11px #000b); }
.shop-outfit-art { height:220px; }
.shop-boots-art { height:205px; }
.shop-legs-art { height:215px; }
.shop-helmet-art { height:205px; }
.shop-amulet-art { height:205px; }
.shop-bow-art { height:205px; }
.shop-outfit-card .shop-weapon-info h3 { min-height:38px; }
.shop-weapon-info { padding:12px; }
.shop-tier { display:inline-block; margin-bottom:7px; padding:3px 6px; border:1px solid #5a5f68; border-radius:5px; color:#b8bbc1; background:#ffffff08; font-size:7px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.shop-weapon-info h3 { min-height:38px; font-size:11px; }
.shop-weapon-stats { display:grid; gap:4px; margin:9px 0 11px; color:#a7a9af; font-size:9px; }
.shop-weapon-stats span { display:flex; justify-content:space-between; gap:6px; }
.shop-weapon-stats b { color:#e0b67d; }
/* Battle */
.battle-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:9px;}.battle-viewport{position:relative;min-height:305px;border:1px solid #594535;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 51% 61%,#74503463,transparent 38%),radial-gradient(ellipse at 50% -10%,#a67a3a39,transparent 55%),linear-gradient(180deg,#292a2b,#191d24 75%);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:23px 12px;}.battle-viewport::before{content:'';position:absolute;width:350px;height:130px;background:#d6b27d10;border-radius:50%;bottom:-85px;box-shadow:0 0 65px #ffba753d;}.battle-viewport::after{content:'✦      ✧       ✦        ✧       ✦';position:absolute;top:19px;color:#d8a77768;letter-spacing:13px;font-size:16px;pointer-events:none;}.enemy-portrait {--portrait-size:138px;width:138px;height:138px;border-radius:35px;transform:rotate(-4deg);border:1px solid #d3a57852;background:radial-gradient(circle,#7c4647,#211e2b 68%);box-shadow:0 0 75px #d6a16620,inset 0 0 45px #cf81621a;}.enemy-portrait::before{border-color:#e7c59a33;}.enemy-portrait span{font-size:75px;color:#eed0b1;}.enemy-portrait img{transform:rotate(4deg);}.battle-enemy{position:relative;text-align:center;z-index:1;}.battle-enemy h2 {font-size:17px;margin:12px 0 4px;}.battle-enemy p{margin:0 0 13px;color:#ccb8a7;font-size:10px;letter-spacing:.07em;text-transform:uppercase;}.enemy-hp {width:213px;margin:0 auto;}.enemy-portrait.hit {animation:hit .22s ease-in-out;}.enemy-portrait.heal{animation:healing .4s ease;}
.battle-status {display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:320px;margin:13px auto 0;font-size:11px;color:#c6ae88;}
.battle-player {display:flex;gap:14px;align-items:center;padding:16px;margin:14px 0;}.battle-player .portrait {--portrait-size:64px;width:64px;height:64px;}.battle-player .hero-bars{flex:1;}.battle-player h3{margin-bottom:7px;}.battle-log {height:96px;overflow-y:auto;background:#11161c;border:1px solid #343841;border-radius:13px;padding:12px 14px;scrollbar-width:thin;}.battle-log p {color:#a6acb7;font-size:11px;line-height:1.6;margin:0 0 5px;}.battle-log p:first-child {color:#ddc3a0;}.actions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;}.action-btn{border:1px solid #49413a;background:linear-gradient(125deg,#302920,#1d222b);border-radius:13px;color:#f0e7d9;padding:14px;text-align:left;display:flex;align-items:center;gap:12px;min-height:70px;}.action-btn:hover:not(:disabled){border-color:#bf9867;}.action-btn .skill-ico{font:26px/1 Georgia,serif;min-width:29px;text-align:center;color:#e5bd8c;}.action-btn strong{display:block;font-size:11px;}.action-btn small{display:block;color:#a0a0a5;font-size:10px;margin-top:2px;}
/* Modal and notifications */
.overlay{position:fixed;inset:0;background:#07090ddc;z-index:40;display:grid;place-items:center;padding:18px;backdrop-filter:blur(9px);}.modal{width:min(100%,420px);padding:27px;border-radius:22px;border:1px solid #755a3d;background:radial-gradient(circle at 50% 0%,#513c2c80,transparent 40%),linear-gradient(150deg,#24262b,#151a22);text-align:center;box-shadow:0 30px 120px #000a;}.modal .medallion{margin:auto auto 18px;width:81px;height:81px;display:grid;place-items:center;border:1px solid #8b6e4c;border-radius:23px;color:#f1c58d;font-size:37px;background:#56402e55;}.modal h2{font-size:20px;margin-bottom:9px;}.modal p{font-size:12px;color:#b7ad9f;line-height:1.7;}.reward-row{display:flex;justify-content:center;gap:12px;margin:18px 0;}.reward{border:1px solid #66543d;border-radius:9px;background:#ffffff0a;color:#eaca97;font-weight:800;padding:9px 13px;font-size:12px;}.modal-actions{display:grid;gap:9px;margin-top:22px;}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,30px);background:#30352e;color:#f5e4c5;border:1px solid #8a714d;border-radius:12px;padding:10px 16px;z-index:80;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 15px 60px #0008;font-size:11px;font-weight:800;max-width:calc(100vw - 32px);text-align:center;}.toast.visible{opacity:1;transform:translate(-50%,0);}
.empty-box{text-align:center;padding:37px 20px;border:1px dashed #4a4441;border-radius:15px;color:#a1a2ab;font-size:12px;}.empty-box .large-icon{font-size:30px;color:#bc966b;margin-bottom:10px;}.tagline{font-size:10px;color:#737b87;letter-spacing:.06em;}
@keyframes hit {0%{transform:translateX(0) rotate(-4deg);}30%{transform:translateX(9px) rotate(3deg);filter:brightness(1.55);}65%{transform:translateX(-5px) rotate(-4deg);}100%{transform:translateX(0) rotate(-4deg);}}
@keyframes healing {50%{filter:brightness(1.9) hue-rotate(40deg);}}
@media(max-width:1190px){.shell{grid-template-columns:210px minmax(0,1fr);}.right-rail{display:none;}.layout-main{padding:26px 28px 70px;}.sidebar{padding-left:14px;padding-right:14px;}}
@media(max-width:730px){
  .shell{display:block;}.sidebar,.right-rail{display:none;}.layout-main{padding:17px 17px calc(100px + env(safe-area-inset-bottom));max-width:620px;margin:0 auto;}.topbar{margin-bottom:22px;}.topbar-name .small-title{font-size:10px;}.wallet{gap:7px;}.money{padding:7px 8px;font-size:10px;}.avatar{width:32px;height:32px;}.intro-art{min-height:248px;padding:24px 22px;}.intro-copy{max-width:87%;}.intro-copy h1{font-size:28px;}.intro-copy p{max-width:255px;font-size:11px;}.illustration{opacity:.37;right:-95px;}.bottom-nav{display:flex;align-items:center;justify-content:space-around;position:fixed;bottom:0;left:0;width:100%;padding:10px 9px calc(9px + env(safe-area-inset-bottom));background:#11151bf5;border-top:1px solid #323239;backdrop-filter:blur(12px);z-index:20;box-shadow:0 -10px 25px #0003;}.bottom-item{border:0;background:none;color:#9096a0;font-size:9px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 8px;min-width:68px;font-weight:800;}.bottom-item span{font-size:22px;font-family:serif;line-height:1.2;}.bottom-item.active{color:#e5b97f;}.onboard{padding:20px 17px 42px;}.onboard-head{margin-bottom:33px;}.onboard-intro h1{font-size:28px;}.create-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.class-card{min-height:202px;padding:12px;}.class-symbol{height:63px;font-size:41px;}.class-card p{min-height:43px;}.name-area{flex-direction:column;align-items:stretch;}.name-area label{width:100%;}.name-area .btn{width:100%;}.hero-overview{gap:17px;padding:15px;}.hero-overview .portrait{--portrait-size:98px;width:98px;height:98px;}.dungeon-card{gap:12px;padding:13px;flex-wrap:wrap;}.dungeon-thumb{width:65px;height:78px;font-size:30px;}.dungeon-info{flex:1;}.dungeon-action{width:100%;flex-direction:row;align-items:center;justify-content:space-between;}.dungeon-action .btn{flex:1;}.section-wrap{margin-top:25px;}.battle-viewport{min-height:260px;}.enemy-portrait{--portrait-size:112px;width:112px;height:112px;}.enemy-portrait span{font-size:60px;}.battle-enemy h2{font-size:14px;}.hero-mini{padding:14px;gap:12px;}.hero-mini .portrait{--portrait-size:60px;width:60px;height:60px;}.hero-mini h3{font-size:11px;}.adventure-card{padding:15px;min-height:161px;}.adventure-card h3{font-size:11px;}.adventure-card p{font-size:10px;}.stat-box strong{font-size:18px;}
}
@media(max-width:730px){.settings-panel{padding:18px;}.settings-danger{padding:18px;align-items:stretch;flex-direction:column;}.settings-danger .btn{width:100%;}.bottom-item{font-size:10px;}}
@media(max-width:380px){.layout-main{padding-left:12px;padding-right:12px;}.intro-copy h1{font-size:25px;}.grid-two{gap:9px;}.adventure-card{padding:12px;}.hero-overview{gap:9px;}.hero-overview .portrait{--portrait-size:80px;width:80px;height:80px;}.actions-grid{gap:8px;}.action-btn{padding:10px;gap:6px;}.action-btn .skill-ico{font-size:21px;min-width:22px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;}}

/* Character artwork */
.class-symbol{position:relative;height:125px;overflow:hidden;border-radius:10px;background:linear-gradient(150deg,#2b303a,#171b22)}
.class-symbol img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2}
.class-symbol span{position:relative;z-index:1}
@media(max-width:620px){.class-symbol{height:110px}}

/* Обновлённое главное меню: только жирный текст, без иконок */
.nav-btn{font-weight:800;font-size:14px;letter-spacing:.01em;padding:14px 16px;}
.bottom-item{font-size:13px;font-weight:800;min-width:0;flex:1;padding:12px 6px;line-height:1.3;white-space:nowrap;}
.bottom-item.active{color:#f0c58d;}
/* Единая визуальная панель кошелька, данные всегда берутся из game.player.gold */
.money-panel{position:relative;width:151px;height:53px;display:flex;align-items:center;justify-content:center;isolation:isolate;background:linear-gradient(115deg,#463520,#171b23);border:1px solid #8c693c;border-radius:12px;overflow:hidden;box-shadow:inset 0 1px 8px #0008;}
.money-panel-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;}
.money-panel-art[hidden]{display:none;}
.money-panel-value{position:relative;z-index:1;display:block;margin-left:24px;max-width:105px;overflow:hidden;text-overflow:ellipsis;color:#ffdda2;font-weight:900;font-size:16px;font-variant-numeric:tabular-nums;text-shadow:0 2px 4px #000,0 0 12px #000;}
.shop-showcase{width:100%;position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #57432b;background:radial-gradient(ellipse at 50% 50%,#64432888,transparent 54%),linear-gradient(135deg,#252326,#131922);border-radius:20px;overflow:hidden;margin-bottom:20px;padding:12px 14px 72px;}
.shop-showcase-glow{position:absolute;bottom:40px;width:58%;height:55px;border-radius:100%;background:#ba8b473b;filter:blur(34px);}
.shop-merchant{z-index:1;display:block;max-width:100%;width:auto;max-height:330px;min-height:240px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 22px #0009);}
.shop-merchant[hidden]{display:none;}
.shop-showcase-caption{position:absolute;left:20px;bottom:19px;font-family:'Unbounded',sans-serif;font-size:16px;font-weight:800;color:#e5c092;}
.shop-showcase-wallet{position:absolute;right:18px;bottom:14px;z-index:2;}
.adventure-hunt{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;margin:0 0 22px;border:1px solid #645039;border-radius:15px;background:linear-gradient(115deg,#30271f,#1c222b);}
.adventure-hunt h3{font-size:14px;margin:0 0 4px;}
.adventure-hunt p{font-size:11px;color:#b1a597;margin:0;}
@media(max-width:730px){.money-panel{width:128px;height:45px;}.money-panel-value{font-size:14px;margin-left:18px;}.shop-showcase{min-height:310px;}.shop-merchant{max-height:295px;min-height:210px;}.shop-showcase-caption{font-size:13px;}.adventure-hunt{padding:14px;}}
@media(max-width:380px){.bottom-item{font-size:11px;padding:10px 2px;}.shop-showcase-wallet{right:10px;}}

/* Удалена боковая панель «Твой путь» и «Задание главы I». */
.shell { grid-template-columns:244px minmax(0, 1fr); }
.right-rail { display:none !important; }
@media (max-width:1190px) and (min-width:731px) {
  .shell { grid-template-columns:210px minmax(0, 1fr); }
}

/* Иллюстрация зелья здоровья внутри существующей карточки в лавке. */
.shop-item .shop-icon.potion-icon {
  width:68px;
  height:68px;
  flex:0 0 68px;
  padding:0;
  overflow:hidden;
  border:1px solid #75543c;
  border-radius:12px;
  background:#13151c;
}
.shop-potion-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
@media (max-width:730px) {
  .shop-item .shop-icon.potion-icon { width:58px; height:58px; flex-basis:58px; }
}

/* ===== Вкладка «Герой»: полноразмерный персонаж и характеристики ===== */
.hero-screen { width:100%; max-width:1160px; margin:0 auto; }
.hero-heading { justify-content:center; text-align:center; margin:5px 0 26px; }
.hero-heading h1 { font-size:clamp(26px,3vw,35px); margin:0 0 8px; }
.hero-heading .subtext { max-width:650px; margin:0 auto; }
.hero-stage { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(290px,.84fr); gap:18px; align-items:stretch; }
.hero-character-card {
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  border:1px solid #72583a; border-radius:22px;
  background:radial-gradient(ellipse at 50% 40%,#3e3b39 0%,#252a32 42%,#131920 85%);
  box-shadow:inset 0 1px 0 #ffffff12,0 18px 70px #0002;
}
.hero-figure-scene {
  position:relative; flex:0 0 510px; height:510px; min-height:400px; isolation:isolate;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 75%,#98754b23,transparent 40%),linear-gradient(145deg,#171f2922,#3430290a);
}
.hero-figure-scene::before {
  content:''; position:absolute; width:min(80%,390px); aspect-ratio:1; left:50%; top:12%;
  transform:translateX(-50%); border-radius:50%; border:1px solid #b48d5c30;
  box-shadow:0 0 0 20px #d1a76c08,0 0 0 52px #d1a76c05,0 0 100px #c9a47716;
  pointer-events:none;
}
.hero-figure-halo { position:absolute; width:68%; height:84%; left:16%; top:10%; border-radius:50%; background:radial-gradient(ellipse at center,#aa855331,transparent 62%); filter:blur(15px); }
.hero-figure-floor { position:absolute; bottom:14px; left:16%; right:16%; height:40px; border-radius:50%; background:#b38c5b3a; filter:blur(22px); }
.hero-fullbody-art {
  position:relative; z-index:2; display:block; width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
  padding:16px 20px 0; filter:drop-shadow(0 24px 23px #0009);
}
.hero-fullbody-art[hidden] { display:none; }
.hero-figure-fallback { position:relative; z-index:2; display:grid; place-items:center; font:140px/1 Georgia,serif; color:#ddba86; text-shadow:0 0 95px #ae7e4e; }
.hero-figure-fallback[hidden] { display:none; }
.hero-character-footer { position:relative; z-index:3; padding:23px 26px 26px; border-top:1px solid #61503775; background:linear-gradient(170deg,#242630,#161c24); }
.hero-identity-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; }
.hero-identity-row h2 { color:#f7efe2; font-size:clamp(18px,2.3vw,24px); }
.hero-identity-row p { margin:6px 0 0; font-size:12px; color:#b9a995; }
.hero-level-badge { white-space:nowrap; padding:8px 11px; border:1px solid #816440; border-radius:10px; background:#d1aa6b17; color:#f2cd92; font-size:12px; font-weight:800; }
.hero-xp-block .meter-line { margin-bottom:8px; font-size:11px; }
.hero-xp-block .meter { height:10px; background:#11151a; }
.hero-side-column { display:flex; flex-direction:column; gap:16px; min-width:0; }
.hero-stats-panel { padding:24px; border-color:#3d4149; }
.hero-stats-panel > .eyebrow { display:block; margin-bottom:10px; }
.hero-stats-panel h2 { font-size:17px; margin-bottom:20px; }
.hero-stat-list { display:grid; gap:11px; }
.hero-stat-item {
  display:flex; align-items:center; gap:16px; padding:15px;
  background:linear-gradient(120deg,#272d37,#1b212b); border:1px solid #383e48; border-radius:14px;
}
.hero-stat-icon { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:12px; font:24px/1 Georgia,serif; }
.hero-stat-icon.hp-icon { background:#6536335c; color:#e99a93; }
.hero-stat-icon.attack-icon { background:#5d452e66; color:#f0bf83; }
.hero-stat-icon.armor-icon { background:#39496166; color:#b2c3db; }
.hero-stat-content { flex:1; min-width:0; display:flex; flex-direction:column; }
.hero-stat-content > span { color:#a3a7b1; font-size:11px; font-weight:700; }
.hero-stat-content strong { margin:3px 0; color:#f3eadb; font:700 24px/1.25 'Unbounded',sans-serif; }
.hero-stat-content strong small { font:700 12px 'Manrope',sans-serif; color:#acacaf; }
.hero-stat-content > small { color:#777f8d; font-size:10px; }
.hero-hp-track { height:5px; margin-top:6px; background:#11151c; border-radius:99px; overflow:hidden; }
.hero-hp-track > i { display:block; height:100%; background:linear-gradient(90deg,#a24c50,#e59b92); border-radius:inherit; }
.hero-rest-panel { padding:24px; border-color:#6b5339; background:radial-gradient(ellipse at 85% 0%,#8c593b33,transparent 65%),linear-gradient(145deg,#24252a,#191d25); }
.hero-rest-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hero-rest-heading h2 { margin:7px 0 0; font-size:18px; }
.hero-rest-badge { white-space:nowrap; color:#ebca9b; padding:6px 8px; border:1px solid #796248; background:#8b673324; border-radius:8px; font-size:10px; font-weight:800; }
.hero-rest-panel > p { font-size:11px; line-height:1.7; color:#b5b0aa; margin:12px 0; }
.hero-rest-resources { display:grid; gap:6px; padding:11px 0 15px; border-top:1px solid #ffffff10; }
.hero-rest-resources > span { color:#9fa3ad; display:flex; justify-content:space-between; gap:14px; font-size:11px; }
.hero-rest-resources b { color:#e7dac7; }
.hero-rest-button { min-height:43px; }
.hero-rest-status { margin-top:10px; color:#b4a18a; font-size:10px; text-align:center; }
.hero-details-grid { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(290px,.84fr); align-items:start; gap:18px; margin-top:18px; }
.hero-details-panel { min-width:0; padding:22px; }
.hero-section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.hero-section-title h2 { font-size:15px; }
.hero-talent-info { min-width:0; flex:1; }
@media (max-width:1030px) {
  .hero-stage,.hero-details-grid { grid-template-columns:minmax(0,1fr); }
  .hero-figure-scene { height:490px; }
  .hero-side-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
  .hero-stat-item { padding:11px; gap:10px; }
  .hero-rest-panel,.hero-stats-panel { padding:18px; }
}
@media (max-width:730px) {
  .hero-heading { margin:6px 0 20px; }
  .hero-heading h1 { font-size:27px; }
  .hero-stage,.hero-details-grid { gap:13px; }
  .hero-figure-scene { height:clamp(370px,95vw,520px); min-height:350px; }
  .hero-fullbody-art { padding:12px 12px 0; }
  .hero-character-footer { padding:18px 17px 21px; }
  .hero-side-column { display:grid; grid-template-columns:1fr; gap:13px; }
  .hero-stats-panel,.hero-rest-panel,.hero-details-panel { padding:18px; }
  .hero-stats-panel h2 { margin-bottom:15px; }
  .hero-stat-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .hero-stat-item { padding:12px 8px; gap:8px; flex-direction:column; text-align:center; }
  .hero-stat-icon { width:37px; height:37px; flex:0 0 37px; font-size:20px; }
  .hero-stat-content strong { font-size:17px; }
  .hero-stat-content strong small { font-size:9px; }
  .hero-stat-content > small { font-size:9px; }
  .hero-hp-track { width:100%; }
}
@media (max-width:380px) {
  .hero-figure-scene { height:340px; min-height:340px; }
  .hero-character-footer { padding:15px 13px 19px; }
  .hero-level-badge { padding:6px 8px; font-size:10px; }
  .hero-identity-row h2 { font-size:18px; }
  .hero-stats-panel,.hero-rest-panel,.hero-details-panel { padding:13px; }
  .hero-stat-content strong { font-size:15px; }
}

/* Тёмное фэнтези: лист персонажа и места приключений. */
.layout-main { background:linear-gradient(180deg,#0d1118b8,#0b0f16d9); backdrop-filter:blur(5px); }
.topbar { justify-content:flex-end; margin-bottom:20px; }
.hero-stage { grid-template-columns:minmax(0,1.18fr) minmax(285px,.82fr); }
.hero-character-footer { text-align:center; }
.hero-identity-row { justify-content:center; margin-bottom:12px; }
.hero-identity-row p { margin-bottom:0; }
.hero-level-badge { display:table; margin:0 auto 17px; font-size:13px; padding:8px 16px; }
.hero-stats-panel { height:100%; display:flex; flex-direction:column; justify-content:center; }
.hero-upgrade-panel { margin-top:18px; }
.hero-upgrade-panel .hero-section-title { margin-bottom:16px; }
.hero-upgrade-panel .hero-section-title h2 { margin-top:6px; font-size:20px; }
.hero-talent-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.hero-talent-grid .talent-card { margin:0; min-width:0; }
.hero-utility-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hero-utility-grid.single { grid-template-columns:minmax(0,1fr); }

.dungeon-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.dungeon-card { min-width:0; padding:0; display:flex; flex-direction:column; align-items:stretch; overflow:hidden; background:linear-gradient(155deg,#1c222bde,#11161ee8); border-color:#46505d; }
.dungeon-place { position:relative; height:190px; overflow:hidden; display:grid; place-items:center; background-image:linear-gradient(180deg,#09101a22,#090d14ed),url('./assets/Back.png'); background-size:auto 285%; background-repeat:no-repeat; border-bottom:1px solid #6d5941; }
.dungeon-card:nth-child(1) .dungeon-place { background-position:8% 76%; }
.dungeon-card:nth-child(2) .dungeon-place { background-position:50% 56%; }
.dungeon-card:nth-child(3) .dungeon-place { background-position:83% 20%; }
.dungeon-place::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,#11161e 100%); }
.dungeon-place span { position:relative; z-index:1; display:grid; place-items:center; width:66px; height:66px; border:1px solid #d3b27a61; border-radius:50%; background:#0b1018a8; color:#efd09e; font-size:32px; box-shadow:0 12px 35px #0009,0 0 35px #c6934d29; }
.dungeon-card .dungeon-info { padding:17px 17px 10px; }
.dungeon-card .dungeon-info h3 { font-size:14px; }
.dungeon-card .dungeon-info p { min-height:53px; margin-top:8px; }
.dungeon-card .dungeon-action { width:100%; margin-top:auto; padding:0 17px 17px; align-items:stretch; }
.dungeon-card .dungeon-action small { min-height:16px; text-align:left; }
.dungeon-card .dungeon-action .btn { width:100%; }

@media (max-width:1030px) {
  .hero-stage { grid-template-columns:minmax(0,1fr) 270px; }
  .hero-side-column { display:block; }
  .hero-talent-grid { grid-template-columns:1fr; }
  .dungeon-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dungeon-place { height:160px; }
  .dungeon-card { scroll-snap-align:start; }
}
@media (max-width:730px) {
  body { background-attachment:scroll; }
  .layout-main { backdrop-filter:none; }
  .topbar { min-height:45px; height:auto; margin-bottom:16px; }
  .hero-stage { grid-template-columns:1fr; }
  .hero-figure-scene { flex-basis:clamp(370px,95vw,520px); }
  .hero-stat-list { grid-template-columns:1fr; }
  .hero-stat-item { flex-direction:row; text-align:left; padding:13px; }
  .hero-stat-icon { width:42px; height:42px; flex-basis:42px; }
  .hero-stat-content strong { font-size:19px; }
  .hero-upgrade-panel { margin-top:13px; }
  .hero-utility-grid { grid-template-columns:1fr; }
  .dungeon-list { overflow-x:auto; grid-template-columns:repeat(3,minmax(250px,1fr)); margin-right:-17px; padding:0 17px 9px 0; scroll-snap-type:x mandatory; }
  .dungeon-place { height:170px; }
}

/* Сундук и семидневные награды за вход. */
.daily-chest {
  position:relative; width:48px; height:43px; flex:0 0 48px; padding:0;
  border:1px solid #8b693d; border-radius:12px;
  background:linear-gradient(145deg,#312719,#151a22); box-shadow:inset 0 0 15px #b7843d1a,0 6px 18px #0004;
}
.daily-chest .chest-lid,.daily-chest-large .chest-lid {
  position:absolute; left:20%; top:19%; width:60%; height:25%; border:2px solid #382615;
  border-radius:8px 8px 2px 2px; background:linear-gradient(#d19a4d,#805021);
}
.daily-chest .chest-body,.daily-chest-large .chest-body {
  position:absolute; left:17%; top:42%; width:66%; height:38%; border:2px solid #352414;
  border-radius:2px 2px 7px 7px; background:linear-gradient(90deg,#7b481d,#c28a3e 48%,#78451d);
}
.daily-chest .chest-lock,.daily-chest-large .chest-lock {
  position:absolute; z-index:2; left:44%; top:40%; width:13%; height:27%; border:1px solid #5b3b18;
  border-radius:2px; background:#f0c56f; box-shadow:0 1px 5px #0008;
}
.daily-chest.ready { animation:chestPulse 1.7s ease-in-out infinite; border-color:#e4b766; }
.daily-chest > i { position:absolute; z-index:4; right:-5px; top:-7px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#b94e42; color:white; font:900 11px/1 'Manrope',sans-serif; box-shadow:0 3px 8px #0008; }
@keyframes chestPulse { 0%,100%{box-shadow:inset 0 0 15px #b7843d1a,0 6px 18px #0004} 50%{box-shadow:inset 0 0 18px #e2ad5045,0 0 23px #d59c444f} }

.daily-modal { position:relative; width:min(100%,790px); padding:30px; overflow:hidden; }
.daily-modal::before { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 12%,#d4a05220,transparent 31%); }
.daily-modal > * { position:relative; z-index:1; }
.daily-modal h2 { font-size:clamp(22px,3vw,30px); margin:8px 0 7px; }
.daily-modal > p { max-width:540px; margin:0 auto 22px; }
.daily-close { position:absolute; z-index:3; top:12px; right:13px; width:36px; height:36px; border:1px solid #54515a; border-radius:10px; background:#161b22c9; color:#c9c2b8; font-size:23px; line-height:1; }
.daily-chest-large { position:relative; width:92px; height:76px; margin:0 auto 10px; filter:drop-shadow(0 13px 18px #0009); }
.daily-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin:21px 0; }
.daily-day { min-width:0; padding:13px 7px 11px; border:1px solid #3d424c; border-radius:13px; background:linear-gradient(155deg,#242b35,#171c24); }
.daily-day-number { display:block; color:#9da2ac; font-size:9px; font-weight:800; text-transform:uppercase; }
.daily-day strong { display:block; margin:9px 0 5px; color:#e7bc76; font:700 14px/1.2 'Unbounded',sans-serif; white-space:nowrap; }
.daily-day small { display:block; color:#737985; font-size:8px; }
.daily-day.claimed { opacity:.56; border-color:#416252; background:#17231f; }
.daily-day.claimed strong { color:#83b496; }
.daily-day.current { transform:translateY(-4px); border-color:#d2a158; background:linear-gradient(155deg,#42331f,#24201c); box-shadow:0 10px 27px #b67d2c26,0 0 0 1px #b98b4b inset; }
.daily-day.current small { color:#ebc98f; }
.daily-claim { max-width:360px; margin:0 auto; min-height:46px; }

@media (max-width:730px) {
  .daily-modal { padding:24px 15px 18px; }
  .daily-chest-large { width:75px; height:63px; }
  .daily-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:16px 0; }
  .daily-day { padding:10px 6px; }
  .daily-day.current { transform:none; }
  .daily-modal > p { font-size:10px; margin-bottom:15px; }
}

/* Экипировка вокруг героя и хранилище в панели характеристик. */
.hero-stats-panel { justify-content:flex-start; overflow:hidden; }
.hero-equipment { position:absolute; z-index:4; inset:0; pointer-events:none; }
.hero-equip-slot {
  position:absolute; z-index:1; width:66px; min-height:70px; padding:7px 4px 6px; pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:1px solid #84663f; border-radius:13px; color:#f2d09a;
  background:linear-gradient(145deg,#2c2b2ccf,#141a22e8); box-shadow:0 8px 22px #0008,inset 0 0 18px #be8d4520;
}
.hero-equip-slot span { font-size:27px; line-height:1; filter:drop-shadow(0 3px 4px #000b); }
.equipment-item-art { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 3px 5px #000c); }
.hero-equip-slot small { width:100%; overflow:hidden; text-overflow:ellipsis; color:#c3b6a4; font-size:8px; font-weight:800; white-space:nowrap; }
.hero-equip-slot.empty { border-style:dashed; border-color:#4b515c; color:#7d838e; background:#151a21c9; }
.hero-equip-slot.empty span { filter:none; font-size:22px; }
.hero-equip-slot:hover { border-color:#e0b878; filter:brightness(1.12); }
.slot-blade { left:12px; top:10%; }
.slot-bow { left:12px; top:31%; }
.slot-hands { left:12px; top:52%; }
.slot-amulet { left:12px; top:73%; }
.slot-head { right:12px; top:10%; }
.slot-chest { right:12px; top:31%; }
.slot-legs { right:12px; top:52%; }
.slot-feet { right:12px; top:73%; }
.hero-storage-head { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-bottom:10px; padding-top:14px; border-top:1px solid #ffffff12; }
.hero-storage-head .eyebrow { font-size:8px; }
.hero-storage-head h3 { margin-top:3px; font-size:13px; }
.hero-storage-head > small { color:#8f959f; font-size:9px; }
.hero-storage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.storage-slot { min-width:0; height:61px; padding:5px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1px solid #373e48; border-radius:10px; background:#121820; color:#7d8490; }
.storage-slot span { font-size:22px; line-height:1; }
.storage-slot .equipment-item-art { width:30px; height:30px; }
.storage-slot small { width:100%; overflow:hidden; text-overflow:ellipsis; color:#aeb1b8; font-size:7px; white-space:nowrap; }
.storage-slot.filled { border-color:#8a693f; color:#f1cb91; background:linear-gradient(145deg,#332b21,#171c24); }
.storage-slot.filled:hover { border-color:#e2b877; filter:brightness(1.12); }
.storage-slot.empty { border-style:dashed; }
.potion-storage-slot { position:relative; cursor:pointer; }
.potion-storage-slot img { width:32px; height:32px; object-fit:cover; border-radius:6px; filter:drop-shadow(0 2px 5px #0009); }
.potion-storage-slot b { position:absolute; right:4px; top:4px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border-radius:9px; background:#b84d43; color:#fff; font-size:8px; box-shadow:0 2px 6px #0008; }
.potion-storage-slot small { position:absolute; left:3px; right:3px; bottom:3px; }

@media (max-width:1030px) and (min-width:731px) {
  .hero-equip-slot { width:56px; min-height:62px; }
  .hero-equip-slot span { font-size:23px; }
  .hero-equip-slot small { font-size:7px; }
  .hero-stats-panel { padding:15px; }
  .hero-stat-list { gap:8px; }
  .hero-stat-content strong { font-size:18px; }
  .storage-slot { height:51px; }
}
@media (max-width:730px) {
  .hero-equip-slot { width:53px; min-height:57px; padding:5px 3px; }
  .hero-equip-slot span { font-size:22px; }
  .hero-equip-slot small { font-size:6px; }
  .slot-blade,.slot-bow,.slot-hands,.slot-amulet { left:7px; }
  .slot-head,.slot-chest,.slot-legs,.slot-feet { right:7px; }
  .hero-storage-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .storage-slot { height:58px; }
}

/* Изображения характеристик и бонусы экипировки внутри чисел. */
.topbar.no-actions { height:0; min-height:0; margin-bottom:14px; }
.talent-icon { width:64px; height:78px; flex:0 0 64px; padding:0; overflow:hidden; border:1px solid #665039; background:#11161d; }
.talent-icon img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-stat-icon.mana-icon { background:#40365f66; color:#c7b3f1; }
.hero-stat-content strong .stat-bonus { display:inline-block; margin-left:5px; color:#63d58c; font:800 12px/1 'Manrope',sans-serif; font-style:normal; text-shadow:0 0 12px #3bc8783d; vertical-align:middle; }
@media (max-width:730px) {
  .talent-icon { width:58px; height:70px; flex-basis:58px; }
  .hero-stat-content strong .stat-bonus { font-size:11px; }
}

/* Новая боевая сцена: герой слева, противник справа. */
.battle-arena {
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr); gap:12px;
  padding:16px; overflow:hidden; border:1px solid #685038; border-radius:22px;
  background:linear-gradient(180deg,#0b1017a8,#0a0e15e8),url('./assets/Back.png') center 58%/cover no-repeat;
  box-shadow:inset 0 0 90px #0009,0 20px 70px #0003;
}
.battle-arena::before { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#384d5a1f,transparent 42%,transparent 58%,#6f332c20); }
.battle-combatant { position:relative; z-index:1; min-width:0; padding:16px; display:flex; flex-direction:column; border:1px solid #454b54; border-radius:18px; background:linear-gradient(160deg,#202630e8,#111720e8); box-shadow:0 15px 35px #0005; }
.battle-hero-side { border-color:#596877; }
.battle-enemy-side { border-color:#704a43; }
.battle-combatant-head { min-height:69px; display:flex; justify-content:space-between; gap:9px; align-items:flex-start; }
.battle-combatant-head h2 { margin:5px 0 2px; font-size:16px; }
.battle-combatant-head p { margin:0; color:#8e949f; font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.battle-turn-mark,.battle-danger { flex:0 0 auto; padding:5px 7px; border:1px solid #49665a; border-radius:7px; color:#84c9a3; background:#31513c32; font-size:8px; font-weight:900; }
.battle-danger { border-color:#754842; color:#e59b90; background:#6c302b38; }
.battle-health { margin:5px 0 10px; }
.battle-health .meter { height:9px; }
.enemy-health .meter>i { background:linear-gradient(90deg,#802f39,#df6d69); }
.battle-figure { position:relative; height:305px; min-height:0; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; border:1px solid #ffffff0d; border-radius:14px; background:radial-gradient(ellipse at 50% 72%,#b0874e35,transparent 42%),linear-gradient(180deg,#1b222a66,#0c1118bf); }
.battle-ground { position:absolute; z-index:0; left:13%; right:13%; bottom:6px; height:30px; border-radius:50%; background:#d1a06434; filter:blur(16px); }
.hero-battle-figure img { position:relative; z-index:1; display:block; width:100%; height:100%; padding:8px 3px 0; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 16px 18px #000c); }
.enemy-battle-figure .enemy-portrait { --portrait-size:280px; position:relative; z-index:1; width:min(96%,280px); height:286px; margin:auto auto 4px; transform:none; border-radius:24px; background:radial-gradient(circle at 50% 58%,#9d663f35,transparent 66%); }
.enemy-battle-figure .enemy-portrait span { font-size:112px; }
.enemy-battle-figure .enemy-portrait img { transform:none; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 15px 18px #000b); }
.battle-items { margin-top:11px; }
.battle-items-label { display:block; margin-bottom:6px; color:#8d929d; font-size:8px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.battle-item-row { display:flex; gap:6px; min-height:53px; overflow-x:auto; scrollbar-width:thin; }
.battle-item { flex:0 0 49px; min-width:0; height:51px; padding:5px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1px solid #66523a; border-radius:9px; background:#29251f; }
.battle-item b { font-size:20px; line-height:1; }
.battle-item .equipment-item-art { width:27px; height:27px; }
.battle-item small { width:100%; overflow:hidden; text-overflow:ellipsis; color:#b7afa4; font-size:6px; text-align:center; white-space:nowrap; }
.battle-item.enemy-item { border-color:#68433e; background:#2b1d1e; }
.battle-mana { margin-top:9px; }
.enemy-combat-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:9px; }
.enemy-combat-stats span { padding:7px; border:1px solid #3d4149; border-radius:8px; color:#9297a1; background:#11161d; font-size:8px; text-align:center; }
.enemy-combat-stats b { color:#e4c397; }
.battle-versus { position:relative; z-index:2; align-self:center; display:flex; flex-direction:column; align-items:center; gap:7px; color:#e8ba78; text-align:center; }
.battle-versus span { display:grid; place-items:center; width:50px; height:50px; border:1px solid #9c7444; border-radius:50%; background:#211c18; font:800 16px/1 'Unbounded',sans-serif; box-shadow:0 0 30px #ca8d3a36; }
.battle-versus small { color:#a7a09a; font-size:8px; white-space:nowrap; }
.battle-status { max-width:none; margin:10px 3px; }

@media (max-width:730px) {
  .battle-arena { grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr); gap:5px; padding:7px; border-radius:16px; }
  .battle-combatant { padding:9px 7px; border-radius:13px; }
  .battle-combatant-head { min-height:64px; display:block; }
  .battle-combatant-head h2 { font-size:11px; }
  .battle-combatant-head p { font-size:7px; }
  .battle-turn-mark,.battle-danger { display:inline-block; margin-top:5px; font-size:6px; }
  .battle-health .meter-line { font-size:7px; }
  .battle-figure { height:220px; border-radius:10px; }
  .enemy-battle-figure .enemy-portrait { --portrait-size:126px; width:90%; height:155px; margin-bottom:20px; border-radius:22px; }
  .enemy-battle-figure .enemy-portrait span { font-size:65px; }
  .battle-versus span { width:32px; height:32px; font-size:10px; }
  .battle-versus small { font-size:6px; }
  .battle-item { flex-basis:40px; height:44px; }
  .battle-item b { font-size:17px; }
  .battle-items-label { font-size:6px; }
  .enemy-combat-stats { grid-template-columns:1fr; }
  .enemy-combat-stats span { padding:5px 2px; font-size:7px; }
}

@media(max-width:980px){
  .shop-weapon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:730px){
  .shop-weapon-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop-weapon-art { height:155px; }
  .shop-outfit-art { height:170px; }
  .shop-boots-art { height:165px; }
  .shop-legs-art { height:170px; }
  .shop-helmet-art { height:165px; }
  .shop-amulet-art { height:165px; }
  .shop-bow-art { height:165px; }
  .shop-section-head { align-items:flex-start; flex-direction:column; gap:5px; }
}