/* Generated forest / gold artwork. Layout and every label remain live HTML. */
#game{--forest-ink:#101a16;--forest-panel:#121e18;--forest-gold:#b69555;--forest-line:#806936;--forest-frame:url('assets/ui-panel-gold.png');--forest-button:url('assets/ui-button-burgundy.png')}
#game #menu{background:#0d1719 url('assets/ui-menu-forest.png') center/cover no-repeat;backdrop-filter:none;padding:16px 22px 10px}
#game #menu:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#06110a40 0%,transparent 74%);pointer-events:none}
#game #menu .menu-panel{position:relative;display:flex;flex-direction:column;align-items:center;width:620px;max-width:100%;padding:0;background:none;border:0;border-image:none;box-shadow:none;text-shadow:0 1px 3px #000;max-height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#806936 #111b14}
#game #menu .eyebrow,#game #menu .ornament{display:none}
#game #menu h1{font-size:53px;letter-spacing:9px;margin:0;color:#f0d79e;line-height:1.05;text-shadow:0 2px 7px #000}
#game #menu h1 span{font-size:15px;letter-spacing:9px;margin:4px 0 0}
#game #menu .intro{font-size:12px;line-height:1.4;color:#ded5b7;margin:9px 0 16px}
#game #menu .choose-label{width:450px;max-width:100%;font:8px 'Allods Romul',Georgia,serif;letter-spacing:3px;color:#e2c690;margin:0 0 10px;display:flex;align-items:center;gap:12px;white-space:nowrap}
#game #menu .choose-label:before,#game #menu .choose-label:after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#a28447)}
#game #menu .choose-label:after{transform:rotate(180deg)}
#game #menu #classes{width:456px;max-width:100%;gap:12px;margin:0 0 11px;flex-shrink:0}
#game #menu .class-card{min-height:182px;height:182px;min-width:0;padding:1px 3px 6px;background:#08150edb;border:8px solid transparent;border-image:var(--forest-frame) 12% / 8px / 0 stretch;filter:brightness(.8);box-shadow:none;text-shadow:0 1px 2px #000;transition:filter .15s,background-color .15s}
#game #menu .class-card:hover,#game #menu .class-card.selected{background-color:#182617e8;filter:brightness(1.12);border-color:transparent;outline:1px solid #e0be6b;outline-offset:-3px;box-shadow:0 0 16px #c6a14920}
#game .class-portrait{position:relative;width:90px;height:135px;margin:0 auto;pointer-events:none}
#game .class-portrait img{position:absolute;inset:0;width:90px;height:135px;image-rendering:pixelated;object-fit:contain}
#game #menu .class-card strong{font-size:13px;margin:1px 0 3px;color:#f2dcad}
#game #menu .class-card small{font:8px/1.3 system-ui,sans-serif;color:#cec6ac;white-space:nowrap}
#game #menu .difficulty-setting{margin:0;gap:7px;flex-shrink:0}
#game #menu .difficulty-setting>span{font-size:7px;letter-spacing:1.5px;color:#d0bc8f;margin-right:5px}
#game .text-button,#game .legacy-row button{background:transparent var(--forest-button) center/100% 215% no-repeat;border:0;box-shadow:none;color:#ffe4ab;min-height:28px;padding:6px 12px;text-shadow:0 1px 2px #000}
#game .text-button:hover:not(:disabled){filter:brightness(1.2);color:#fff0bf}
#game #menu .difficulty-setting .text-button{font-size:10px;min-height:25px;min-width:63px;padding:4px 12px}
#game #menu .difficulty-setting .selected{color:#fff0bd;outline:1px solid #f3ce76;outline-offset:-2px;filter:brightness(1.25)}
#game #menu .asset-note{font:8px/1.4 system-ui,sans-serif;color:#c2c4ae;letter-spacing:0;margin:7px 0 10px;min-height:12px;max-width:460px}
#game .primary{border:0;border-image:none;background:transparent var(--forest-button) center/100% 215% no-repeat;box-shadow:none;color:#ffe4ab;text-shadow:0 2px 2px #160703;min-height:44px;padding:12px 24px;letter-spacing:2px}
#game .primary:hover{filter:brightness(1.2)}
#game #menu #start{width:360px;max-width:100%;height:46px;min-height:46px;font-size:17px;margin:0 0 10px;flex-shrink:0}
#game #menu .menu-bottom,#game #menu .session-actions{display:flex;justify-content:center;gap:10px;flex-shrink:0;margin:0 0 6px}
#game #menu .menu-bottom .text-button,#game #menu .session-actions .text-button{width:150px;min-width:0;min-height:24px;padding:5px 8px;font-size:9px;margin:0}
#game #menu #sound-button{position:fixed;top:12px;right:14px;font-size:9px;min-height:25px;padding:5px 10px}
#game #menu .fan-notice{font:8px/1.45 system-ui,sans-serif;color:#c1c4ae;letter-spacing:0;max-width:540px;border:0;border-top:1px solid #8b713d80;background:#08140e85;box-shadow:none;padding:7px 13px 0;margin:10px 0 0}
/* Keep original in-game artwork beneath the new menu/button treatment. */
#game .dialog,#game .upgrade-card,#game .shop-item,#game .inventory-tooltip,#game .boss-status{background-color:#202b23;border:8px solid transparent;border-image:url('assets/ui-shopframe.png') 13 / 8px / 0 stretch;box-shadow:0 6px 25px #0009}
#game .upgrade-card,#game .shop-item{background:#17271f}
#game .upgrade-card:hover{background-color:#233420;border-image:url('assets/ui-shopframe.png') 13 / 8px / 0 stretch}
#game .inventory-tooltip{background-color:#101d17fa}
#game .paperdoll{background:url('assets/ui-humanbackr.png') center/160px 242px no-repeat;border:0;box-shadow:none}
#game .bag-grid{background:url('assets/ui-invframe.png') left top/288px 54px repeat-y;border:0;padding:0 7px}
#game .item-cell{background:url('assets/ui-backinv.png') center/100% 100% no-repeat;border-color:#626542;box-shadow:none}
#game .item-cell.magic{border-color:#759ad2}#game .item-cell.rare{border-color:#d7b64d}#game .item-cell.unique{border-color:#a6733c}
/* Preserve the original battlefield dimensions and live minimap/character layers. */
#game #vanilla-sidebar{background:#171311 url('assets/ui-extra1024r.png') center/160px 46px repeat-y;border-left:1px solid #786236;box-shadow:-3px 0 10px #0006}
#game #minimap-frame{background:url('assets/ui-crystalr.png') center/160px 158px no-repeat;border:0;border-image:none}
#game #minimap{left:15px;top:17px}
#game #action-bar{height:80px;background:url('assets/ui-commandempr.png') center/160px 80px no-repeat;border:0}
#game #action-bar #inventory-button{left:9px;right:9px;top:6px;width:140px;height:32px;background:transparent var(--forest-button) center/100% 215% no-repeat;border:0;text-align:left;padding:4px 10px;display:flex;align-items:center;gap:9px}
#game #inventory-button img{width:22px;height:22px}
#game #action-bar #inventory-button:after{content:'Inventory  [I]';font:9px 'Allods Romul',Georgia,serif;letter-spacing:.3px;color:#e1c68b}
#game #hud-vitals{height:80px;padding:7px 8px;background:#111e17;border-bottom:1px solid #756136}
#game #hud-vitals .health-panel{width:142px}
#game #hud-vitals .health-heading,#game #hud-vitals .mana-heading{font-size:7px;color:#dbcc9d}
#game #hud-vitals .health-track{height:8px;margin:5px 0;box-shadow:0 0 0 1px #695332;background:#2c1212}
#game #hud-vitals #hp-fill{background:linear-gradient(#b65c47,#853a32)}
#game #hud-vitals .mana-track{height:6px;border-color:#4b6078}
#game #hud-vitals #dash-label{font-size:6px;color:#b7bca6;margin-top:6px}
#game #vanilla-sidebar header{height:40px;padding:5px 0;background:#0d1913;border-bottom:1px solid #756136}
#game #hud-character{background:url('assets/ui-humanbackr.png') center/160px 242px no-repeat;border:0;box-shadow:none}
#game #hud-character:after{content:none}
#game #hud-character img{left:0;top:1px}
#game #hud #skills,#game.portrait #hud #skills{background:#101a13;border:5px solid transparent;border-image:url('assets/ui-shopframe.png') 13 / 5px / 0 stretch;gap:12px;padding:11px 10px 5px}
#game #skills .skill-slot{background:url('assets/ui-spellback.png') center/100% 100% no-repeat;border:0;border-image:none;padding:4px;display:flex;align-items:center;justify-content:center}
#game #skills .skill-slot img{width:36px;height:36px}
#game #skills .skill-slot.empty{opacity:1}
#game .gear-granted{outline-color:#94c4db}
#game #pause-button{background:transparent var(--forest-button) center/100% 215% no-repeat;border:0}
#game #hud .boss-status{background-color:#101d16f5;letter-spacing:1px}
#game #hud .xp-track{background:#17251c;box-shadow:0 -1px #66552d}
#game .dialog .fan-notice{background:#0b160f;border:0;border-top:1px solid #756136;padding-top:10px;font-size:8px}
#game.portrait #menu .menu-panel{width:540px;max-width:100%;padding:16px 0}
#game.portrait #menu #classes{gap:8px;width:456px}
#game.portrait #hud #skills{gap:7px;padding-left:4px;padding-right:4px}
#game.portrait #skills .skill-slot{width:40px;height:42px}
@media(prefers-reduced-motion:reduce){#game #menu .class-card{transition:none}}

/* One material for every action button, including compact HUD controls. */
#game .text-button,#game .primary,#game .icon-button,#game .legacy-row button{color:#ffe4ab;text-shadow:0 1px 2px #160703}
#game :is(.text-button,.primary,.icon-button):hover:not(:disabled),#game .legacy-row button:hover:not(:disabled){filter:brightness(1.2)}
#game #menu .difficulty-setting .selected:hover{filter:brightness(1.4)}
#game :is(.text-button,.primary,.icon-button):active:not(:disabled),#game .legacy-row button:active:not(:disabled){filter:brightness(.9)}
#game button:focus-visible{outline:2px solid #ffe1a1;outline-offset:2px}
#game button:disabled{filter:saturate(.5);opacity:.45}

/* Compact full-width mobile battlefield: spells, backpack, pause only. */
#game.mobile #vanilla-sidebar,#game.mobile #hud header,#game.mobile #hud>.level-label,#game.mobile #hud>.hint,#game.mobile #pickup-buffs,#game.mobile .boss-status,#game.mobile #announcement{display:none!important}
#game.mobile #hud>.xp-track{display:block;left:0;right:0;bottom:calc(80px + var(--safe-bottom,0px));height:5px;pointer-events:none}
#game.mobile #hud footer{left:0;right:0;height:calc(80px + var(--safe-bottom,0px))}
#game.mobile #hud #skills{left:0;right:0;height:calc(80px + var(--safe-bottom,0px));width:100%;justify-content:center;gap:14px;padding:18px calc(8px + var(--safe-right,0px)) calc(6px + var(--safe-bottom,0px)) calc(8px + var(--safe-left,0px));background:#0b1712e8;border:0;border-top:1px solid #806936}
#game.mobile #skills .skill-slot{width:56px;height:56px;padding:5px}
#game.mobile #skills .skill-slot img{width:44px;height:44px}
#game.mobile .spell-group:before{font-size:8px;top:-12px}
#game.mobile #hud>#inventory-button,#game.mobile #hud>#pause-button{position:absolute;top:calc(12px + var(--safe-top,0px));bottom:auto;left:auto;right:calc(90px + var(--safe-right,0px));width:68px;height:60px;padding:12px;pointer-events:auto;background:transparent var(--forest-button) center/100% 215% no-repeat;border:0}
#game.mobile #hud>#inventory-button img{width:32px;height:32px}
#game.mobile #hud>#pause-button{right:calc(12px + var(--safe-right,0px));font-size:23px}
#game.mobile .hint{display:none}
#game.mobile #menu #sound-button{top:calc(8px + var(--safe-top,0px));right:calc(10px + var(--safe-right,0px))}
#game.mobile .inventory-heading button{min-height:38px;padding:8px 12px}
#game.mobile .dialog-actions button{min-height:44px}

#game.mobile .dialog{max-width:calc(100% - var(--safe-left,0px) - var(--safe-right,0px) - 16px);max-height:calc(100% - var(--safe-top,0px) - var(--safe-bottom,0px) - 16px)}
#game.mobile button:not(.item-cell):not(.doll-region){touch-action:manipulation}

/* Right-thumb movement control floats above the spell row. */
#game #mobile-joystick{display:none}
#game.mobile #mobile-joystick{display:block;position:absolute;right:calc(14px + var(--safe-right,0px));bottom:calc(98px + var(--safe-bottom,0px));width:var(--stick-size,176px);height:var(--stick-size,176px);border-radius:50%;border:2px solid #c1a46a88;background:radial-gradient(circle,#24382b66 0%,#0a171480 65%,#b99a5433 67%,#09130f66 70%);box-shadow:inset 0 0 0 7px #050d0b40,0 2px 10px #0005;opacity:.5;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:auto;z-index:1}
#game.mobile #mobile-joystick.active{opacity:.9;border-color:#e7cc8bbb}
#game .joystick-knob{position:absolute;left:50%;top:50%;width:36%;height:36%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #d2b475aa;background:radial-gradient(circle at 35% 30%,#82977e99,#203a2be6 65%,#0a1912ee);box-shadow:0 2px 8px #0008;pointer-events:none}

/* Control preferences live behind a left-hand gear, separate from run progress. */
#game #hud>#controls-button{position:absolute;left:8px;top:40px;width:28px;height:28px;padding:3px;font:20px/1 system-ui,sans-serif;pointer-events:auto;background:transparent var(--forest-button) center/100% 215% no-repeat;border:0}
#game.mobile #hud>#controls-button{left:calc(12px + var(--safe-left,0px));top:calc(12px + var(--safe-top,0px));width:68px;height:60px;padding:10px;font-size:27px}
#game .controls-dialog{width:500px;max-width:94%;max-height:94%;overflow:auto}
#game .control-modes{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;border:0;margin:18px 0 12px;padding:0}
#game .control-modes legend{font:11px 'Allods Romul',Georgia,serif;color:#ddc799;margin:0 auto 10px}
#game .control-modes button{min-width:170px;min-height:40px}
#game .control-modes .selected{outline:1px solid #f3ce76;outline-offset:-3px;filter:brightness(1.2)}
#game .controls-dialog #control-description{font:11px/1.6 system-ui,sans-serif;color:#c6cebb;min-height:36px}
#game .zoom-control{display:block;text-align:left;font:12px 'Allods Romul',Georgia,serif;color:#e7d1a4;margin:24px 12px 10px}
#game .zoom-control output{float:right;color:#ffe0a0;font-variant-numeric:tabular-nums}
#game #screen-zoom{display:block;width:100%;margin:14px 0 0;min-height:36px;accent-color:#c4a264;cursor:pointer}
#game .controls-dialog .settings-note{font:9px/1.5 system-ui,sans-serif;color:#9eae96}
#game.mobile .control-modes button{min-height:52px;font-size:13px}
#game.mobile .controls-dialog #control-description{font-size:14px}
#game.mobile .zoom-control{font-size:15px}
#game.mobile .controls-dialog .settings-note{font-size:12px}