:root {
  color-scheme: dark;
  --ink: #080b0c;
  --bone: #e7dcc2;
  --muted: #9e9b8d;
  --gold: #c49a51;
  --gold-bright: #e0b768;
  --blood: #8d2b27;
  --green: #71904d;
  --blue: #4a8295;
  --panel: rgba(12, 17, 18, 0.91);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050708; }
body { font-family: Inter, system-ui, sans-serif; color: var(--bone); user-select: none; }
button { font: inherit; }

#game-shell, #canvas-wrap, #canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#canvas-wrap canvas { display: block; cursor: crosshair; }
.vignette, .grain { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vignette { box-shadow: inset 0 0 13vw 4vw rgba(0,0,0,.76); }
.grain { opacity: .09; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' 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"); }
.hidden { display: none !important; }

.screen { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; }
.screen--active { display: flex; }

#main-menu {
  flex-direction: column;
  justify-content: flex-end;
  padding: 8vh 8vw;
  background: radial-gradient(ellipse at 50% 28%, rgba(86,67,38,.1), transparent 34%), linear-gradient(90deg, rgba(2,4,5,.96), rgba(3,5,6,.46) 54%, rgba(2,4,5,.87));
}
#main-menu::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.84), transparent 55%), repeating-linear-gradient(90deg, transparent 0 13.9%, rgba(198,158,81,.028) 14% 14.1%); pointer-events: none; }
.title-lockup { position: relative; text-align: center; margin-bottom: 5vh; text-shadow: 0 5px 28px #000; }
.eyebrow { margin: 0 0 10px; color: var(--gold); letter-spacing: .34em; text-transform: uppercase; font: 600 11px Cinzel, serif; }
.eyebrow.dark { color: #67471e; }
h1, h2, h3 { font-family: Cinzel, Georgia, serif; margin: 0; }
h1 { font-size: clamp(42px, 6.6vw, 95px); letter-spacing: .06em; line-height: .9; color: #e9dec2; }
h1 span { display: inline-block; font-size: .24em; vertical-align: middle; color: var(--gold); letter-spacing: .13em; }
.subtitle { color: #aaa797; font-family: Cinzel, serif; letter-spacing: .12em; font-size: clamp(11px, 1.2vw, 15px); }
.menu-runes { position: absolute; top: 7vh; color: rgba(196,154,81,.35); font-size: 24px; letter-spacing: 1em; transform: translateX(.5em); }
.menu-actions { position: relative; display: grid; width: min(360px, 82vw); gap: 9px; }
.stone-button { min-height: 47px; padding: 0 24px; color: #cbc4af; border: 1px solid rgba(196,154,81,.26); background: linear-gradient(180deg, rgba(47,52,50,.8), rgba(19,23,23,.92)); cursor: pointer; text-transform: uppercase; letter-spacing: .15em; font: 600 11px Cinzel, serif; transition: border-color .2s, color .2s, transform .2s, background .2s; }
.stone-button:hover:not(:disabled) { color: #fff3d2; border-color: var(--gold); transform: translateY(-1px); background: linear-gradient(180deg, rgba(70,65,50,.88), rgba(24,27,25,.96)); }
.stone-button--primary { color: #120f09; border-color: #e0b768; background: linear-gradient(180deg, #dab264, #98713a); text-shadow: 0 1px rgba(255,255,255,.18); }
.stone-button--primary:hover:not(:disabled) { color: #080604; background: linear-gradient(180deg, #f1ce7e, #b88a47); }
.stone-button--quiet { background: rgba(7,9,9,.5); }
.stone-button:disabled { opacity: .35; cursor: default; }
.menu-foot { position: absolute; bottom: 18px; margin: 0; color: #5f625e; font-size: 10px; letter-spacing: .08em; }

.parchment-screen { background: rgba(3,5,6,.88); backdrop-filter: blur(8px); }
.parchment-card { position: relative; width: min(680px, 92vw); padding: 44px 52px; color: #29271f; background: linear-gradient(135deg, #d8c9a4, #c0ae82); border: 2px solid #604b2c; box-shadow: 0 25px 90px #000; }
.parchment-card::after { content:''; position:absolute; inset: 9px; border: 1px solid rgba(71,53,28,.27); pointer-events:none; }
.parchment-card h2 { font-size: 35px; color: #2c261a; }
.parchment-card p { line-height: 1.7; font-size: 13px; }
.controls-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 25px 0; background: rgba(65,49,28,.25); }
.controls-grid div { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; background: rgba(225,211,177,.88); font-size: 12px; }
kbd { display: inline-flex; min-width: 28px; min-height: 24px; padding: 4px 7px; align-items: center; justify-content: center; color: #ded7c5; background: #1a1e1d; border: 1px solid #626359; border-bottom-width: 3px; border-radius: 3px; font: 700 10px Inter, sans-serif; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
.controls-grid kbd { color: #29261f; background: transparent; border-color: #6d5a36; box-shadow: none; }
.dark-button { color: #d8cda9; border-color: #4d3b24; background: #33291d; }
.close-button { position: absolute; top: 14px; right: 16px; z-index: 2; width: 34px; height: 34px; padding: 0; color: #9d937a; background: transparent; border: 1px solid rgba(157,147,122,.3); cursor: pointer; font-size: 22px; line-height: 1; }
.close-button:hover { color: #fff; border-color: var(--gold); }

#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; display: none; }
#hud.active { display: block; }
.panel-glass { background: linear-gradient(110deg, rgba(10,14,15,.88), rgba(17,22,21,.55)); border: 1px solid rgba(173,155,116,.22); box-shadow: 0 6px 28px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.035); }
.player-status { position: absolute; top: 28px; left: 30px; display: flex; align-items: center; width: 330px; padding: 9px 14px 9px 10px; clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); }
.level-seal { flex: 0 0 48px; height: 48px; margin-right: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(211,177,104,.7); transform: rotate(45deg); background: #121817; }
.level-seal > * { transform: rotate(-45deg); }
.level-seal span { font: 500 7px Cinzel; color: var(--gold); margin-bottom: -2px; }
.level-seal strong { font: 700 20px Cinzel; }
.status-bars { flex: 1; display: grid; gap: 5px; }
.bar-row { display: flex; align-items: center; }
.bar { position: relative; width: 100%; height: 11px; overflow: hidden; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.1); transform: skewX(-10deg); }
.bar i { display: block; height: 100%; width: 100%; transition: width .25s; box-shadow: inset 0 1px rgba(255,255,255,.2); }
.bar b { position: absolute; inset: -1px 4px; text-align: right; transform: skewX(10deg); color: rgba(255,255,255,.68); font-size: 8px; font-weight: 600; }
.health { height: 14px; }.health i { background: linear-gradient(90deg, #7d1e22, #b43c36); }
.stamina i { background: linear-gradient(90deg, #48652f, #7c9d4c); }
.xp-row { gap: 7px; }.xp-row span { flex: 0 0 59px; font-size: 7px; color: #8e9188; }.xp { height: 5px; }.xp i { background: #b58a44; }

.objective-card { position: absolute; top: 28px; right: 30px; width: 275px; padding: 13px 17px 14px; text-align: right; border-right: 2px solid var(--gold); }
.objective-card p { margin: 0 0 5px; color: #8d9088; text-transform: uppercase; letter-spacing: .19em; font-size: 8px; }
.objective-card strong { font: 600 12px Cinzel; letter-spacing: .04em; }
.objective-card.pulse { animation: objectivePulse .7s ease; }
@keyframes objectivePulse { 40% { color: #fff; border-color: #ffe09a; transform: scale(1.025); } }

.quick-slots { position: absolute; left: 30px; bottom: 30px; display: flex; height: 61px; }
.quick-slot { position: relative; min-width: 74px; padding: 7px 10px 5px 45px; border-right: 1px solid rgba(255,255,255,.1); }
.quick-slot:last-child { border: 0; }
.quick-slot b { display: block; font: 600 19px Cinzel; }.quick-slot small { color: #7d817b; font-size: 7px; letter-spacing: .13em; }
.slot-icon { position: absolute; left: 10px; top: 13px; display: flex; align-items: center; justify-content: center; width: 28px; height: 34px; font-size: 17px; filter: drop-shadow(0 2px 5px #000); }
.potion-icon { color: #bc4135; border: 2px solid #777; border-radius: 4px 4px 45% 45%; }.key-icon { color: #c8a254; font-size: 28px; }.coin-icon { color: #d5aa53; font-size: 27px; }

.boss-wrap { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); width: min(650px, 48vw); text-align: center; }
.boss-wrap p { margin: 0 0 7px; font: 600 13px Cinzel; letter-spacing: .22em; text-shadow: 0 2px 7px #000; }
.boss-bar { height: 13px; padding: 2px; background: rgba(5,5,5,.85); border: 1px solid rgba(199,167,103,.65); box-shadow: 0 3px 15px #000; }
.boss-bar i { display: block; height: 100%; background: linear-gradient(90deg, #541529, #a82b3c, #5e172b); transition: width .25s; }
.boss-wrap small { display: inline-block; margin-top: 6px; color: #9c877c; letter-spacing: .16em; font: 500 8px Cinzel; }

.interaction { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; background: rgba(7,9,9,.82); border: 1px solid rgba(206,178,112,.38); font: 600 10px Cinzel; letter-spacing: .1em; text-shadow: 0 2px 4px #000; }
.crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgba(236,225,198,.65); font-size: 23px; text-shadow: 0 0 5px #000; }
.combat-hint { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); color: #c3b99f; font: 500 10px Cinzel; letter-spacing: .12em; text-shadow: 0 2px 5px #000; }

#notification-stack { position: absolute; right: 30px; top: 105px; width: 285px; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.notification { max-width: 100%; padding: 10px 13px; color: #dcd3be; background: rgba(10,14,14,.86); border-left: 2px solid #b99150; font-size: 11px; box-shadow: 0 5px 18px rgba(0,0,0,.45); animation: noteIn .35s ease, noteOut .4s ease 3.2s forwards; }
.notification b { color: #e8bb65; font-family: Cinzel; }
@keyframes noteIn { from { opacity:0; transform: translateX(20px); } }
@keyframes noteOut { to { opacity:0; transform: translateX(12px); } }

.area-title { position: absolute; left: 50%; top: 23%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; text-shadow: 0 4px 12px #000; animation: areaTitle 4.2s ease forwards; }
.area-title small { color: #9b8b70; letter-spacing: .35em; text-transform: uppercase; font: 500 8px Cinzel; }.area-title strong { padding: 8px 32px; border-bottom: 1px solid rgba(209,178,111,.46); font: 600 22px Cinzel; letter-spacing: .18em; }
@keyframes areaTitle { 0%,100% { opacity:0; } 15%,65% { opacity:1; } 0% { transform:translate(-50%,-35%); } 100% { transform:translate(-50%,-65%); } }

#minimap { position: absolute; right: 30px; bottom: 26px; width: 168px; height: 120px; opacity: .74; border: 1px solid rgba(196,166,101,.25); background: rgba(6,9,9,.7); }

.tutorial-card { position: absolute; z-index: 16; left: 50%; top: 76%; transform: translate(-50%,-50%); width: min(450px, 86vw); padding: 15px 45px 16px 20px; background: linear-gradient(100deg, rgba(21,27,26,.96), rgba(13,17,17,.92)); border: 1px solid rgba(198,164,91,.4); box-shadow: 0 10px 45px #000; }
.tutorial-card small { color: var(--gold); font: 500 8px Cinzel; letter-spacing: .2em; }.tutorial-card strong { display: block; margin: 5px 0; font: 600 14px Cinzel; }.tutorial-card p { margin: 0; color: #a9aa9f; font-size: 11px; line-height: 1.5; }.tutorial-card p kbd { min-height: 19px; padding: 2px 5px; font-size: 8px; }
.tutorial-card button { position: absolute; right: 10px; top: 9px; color: #92968e; border: 0; background: transparent; cursor: pointer; font-size: 18px; }

.overlay-screen { background: rgba(3,5,5,.76); backdrop-filter: blur(9px); }
.inventory-panel { position: relative; width: min(1160px, 94vw); height: min(730px, 91vh); padding: 24px; background: radial-gradient(circle at 16% 45%, rgba(109,84,45,.11), transparent 28%), linear-gradient(135deg, rgba(20,25,24,.99), rgba(9,13,13,.99)); border: 1px solid #665a43; box-shadow: 0 30px 100px #000; }
.inventory-panel::after, .map-panel::after { content:''; position:absolute; inset:7px; border:1px solid rgba(178,150,93,.15); pointer-events:none; }
.inventory-panel header { position: relative; height: 82px; display: flex; align-items: center; padding: 5px 18px 18px; border-bottom: 1px solid rgba(190,165,112,.2); }
.inventory-panel header h2 { font-size: 30px; }.inventory-panel header .eyebrow { margin-bottom: 3px; }
.currency { margin-left: auto; margin-right: 60px; display: flex; gap: 25px; color: #80837c; font-size: 9px; letter-spacing: .13em; }.currency b { color: var(--gold-bright); font: 600 15px Cinzel; margin-left: 5px; }
.inventory-layout { display: grid; grid-template-columns: 36% 64%; height: calc(100% - 82px); }
.equipment-pane { padding: 22px 25px 10px 16px; border-right: 1px solid rgba(190,165,112,.16); }
.paperdoll { position: relative; height: 375px; border: 1px solid rgba(255,255,255,.045); background: radial-gradient(ellipse, rgba(202,167,92,.1), transparent 65%); }
.knight-silhouette { position: absolute; left: 50%; top: 50%; width: 150px; height: 290px; transform: translate(-50%,-46%); opacity: .45; filter: drop-shadow(0 8px 20px #000); }
.helm-shape { position:absolute; left:48px; top:5px; width:58px; height:66px; background:linear-gradient(90deg,#626962,#adb0a0,#4a504c); clip-path:polygon(15% 0,85% 0,100% 38%,82% 100%,18% 100%,0 38%); }
.body-shape { position:absolute; left:23px; top:65px; width:106px; height:218px; background:linear-gradient(90deg,#333a38,#777d73,#2f3533); clip-path:polygon(24% 0,76% 0,100% 24%,79% 52%,88% 100%,12% 100%,21% 52%,0 24%); }
.equip-slot { position:absolute; z-index:1; width:115px; min-height:58px; padding:10px; background:rgba(8,11,11,.76); border:1px solid rgba(189,160,99,.25); }
.equip-slot small { display:block; color:#777c75; font-size:7px; letter-spacing:.14em; }.equip-slot b { font:500 10px Cinzel; color:#d2c6ac; line-height:1.3; }
.weapon-slot { left:12px; top:35px; }.shield-slot { right:12px; top:98px; }.armor-slot { left:18px; bottom:25px; }
.stats-list { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:15px; background:rgba(255,255,255,.07); }.stats-list div { display:flex; justify-content:space-between; padding:10px 12px; background:#111716; font-size:10px; color:#898e87; }.stats-list b { color:#ddd3bd; }
.bag-pane { padding: 21px 15px 10px 25px; overflow: hidden; }
.inventory-tabs { display:flex; border-bottom:1px solid rgba(190,165,112,.17); margin-bottom:18px; }.inventory-tabs button { padding:8px 15px 12px; color:#6f746f; border:0; border-bottom:2px solid transparent; background:transparent; text-transform:uppercase; font:600 8px Cinzel; letter-spacing:.15em; cursor:pointer; }.inventory-tabs button.active { color:#d1b273; border-color:#b48a45; }
.inventory-grid { height: 320px; display:grid; grid-template-columns:repeat(6, minmax(66px,1fr)); align-content:start; gap:8px; overflow-y:auto; padding-right:5px; }
.item-cell { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; color:#9c8e70; border:1px solid rgba(150,151,137,.18); background:linear-gradient(135deg,rgba(44,48,45,.55),rgba(13,17,16,.8)); cursor:pointer; font:500 28px Cinzel; }.item-cell:hover,.item-cell.selected { border-color:#c09b52; background:linear-gradient(135deg,rgba(84,73,50,.6),rgba(20,23,20,.9)); }.item-cell.equipped::after { content:'E'; position:absolute; right:4px; top:3px; color:#e1ba67; font:700 8px Inter; }.item-cell .quantity { position:absolute; right:5px; bottom:4px; padding:1px 4px; color:#fff; background:rgba(0,0,0,.62); font:600 9px Inter; }.item-cell .rarity { position:absolute; left:0; bottom:0; width:100%; height:2px; background:#777; }.item-cell .rarity.uncommon { background:#73945a; }.item-cell .rarity.rare { background:#668bb2; }.item-cell .rarity.legendary { background:#d09041; box-shadow:0 0 7px #c07333; }
.item-details { min-height:125px; margin-top:19px; padding:17px; display:grid; grid-template-columns:74px 1fr auto; gap:16px; align-items:center; border-top:1px solid rgba(190,165,112,.18); background:rgba(5,8,8,.35); }.item-art { width:65px; height:65px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(190,165,112,.22); background:rgba(111,86,45,.08); color:#b99655; font:30px Cinzel; }.item-details small { color:#8a8d83; letter-spacing:.13em; font-size:7px; }.item-details h3 { margin:3px 0; font-size:15px; }.item-details p { margin:0; color:#858a83; font-size:10px; line-height:1.45; }.item-details .stone-button { min-width:105px; }

.pause-panel { width:min(390px,88vw); padding:42px; display:grid; gap:9px; text-align:center; background:linear-gradient(145deg,rgba(22,27,26,.98),rgba(8,11,11,.98)); border:1px solid #655940; box-shadow:0 25px 90px #000; }.pause-panel h2 { margin-bottom:18px; font-size:40px; }.pause-panel .eyebrow { margin:0; }
.map-panel { position:relative; width:min(850px,92vw); padding:35px 50px 28px; text-align:center; color:#29271f; background:#c5b389; border:2px solid #5f482a; box-shadow:0 25px 90px #000; }.map-panel h2 { font-size:29px; }.map-panel canvas { display:block; width:100%; height:min(58vh,520px); margin:15px auto 8px; background:rgba(71,52,29,.1); border:1px solid rgba(74,54,29,.35); }.map-panel > p:last-child { margin:0; font-size:10px; letter-spacing:.08em; }.map-panel > p span { color:#862f25; }

.end-screen { background:radial-gradient(circle at center,rgba(42,28,26,.45),rgba(1,2,2,.97)); }.victory-screen { background:radial-gradient(circle at center,rgba(129,93,41,.24),rgba(2,4,4,.96)); }.end-card { width:min(650px,90vw); padding:54px 62px; text-align:center; background:rgba(9,12,12,.86); border:1px solid rgba(190,157,88,.5); box-shadow:0 30px 100px #000; }.end-card h2 { margin:8px 0 16px; color:#d9ceb4; font-size:clamp(36px,5vw,61px); letter-spacing:.08em; }.end-card > p:not(.eyebrow) { margin:0 auto 28px; max-width:490px; color:#93978f; line-height:1.65; font:12px Cinzel; }.end-card .stone-button { width:260px; margin:5px; }.victory-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:27px 0; background:rgba(194,164,102,.18); }.victory-stats div { padding:14px 5px; background:#101514; }.victory-stats b { display:block; color:#ddb462; font:600 23px Cinzel; }.victory-stats span { color:#737770; font-size:7px; letter-spacing:.14em; }

#fade { position:absolute; inset:0; z-index:100; pointer-events:none; opacity:0; background:#000; transition:opacity .65s; } #fade.active { opacity:1; }

@media (max-width: 760px) {
  .player-status { top:15px; left:12px; width:275px; }.objective-card { top:82px; right:12px; width:235px; }.quick-slots { left:12px; bottom:14px; }.quick-slot { min-width:60px; padding-left:38px; }.slot-icon { left:7px; } #minimap { right:12px; bottom:13px; width:126px; height:90px; }.boss-wrap { top:145px; width:85vw; }.inventory-panel { height:96vh; padding:12px; }.inventory-panel header { height:70px; }.inventory-layout { grid-template-columns:1fr; overflow:auto; }.equipment-pane { display:none; }.bag-pane { padding:15px; }.inventory-grid { grid-template-columns:repeat(4,1fr); height:280px; }.item-details { grid-template-columns:55px 1fr; }.item-details button { grid-column:1/3; }.currency { display:none; }.parchment-card { padding:40px 27px 28px; }.controls-grid { grid-template-columns:1fr; max-height:45vh; overflow:auto; }
}