:root{--ui-scale: 1;--font-family: "Cinzel";--panel-width: 30vw ;--panel-height: 45vh }.btn--settings{width:64px;height:64px;font-size:2rem}.icon{display:block;image-rendering:pixelated}.icon--settings{width:64px;height:64px}.icon--currency{width:32px;height:32px}.icon--enemy{width:128px;height:128px}html,body{margin:0;padding:0;background:#0f0f0f;color:#eee;font-family:var(--font-family);height:100%;font-size:calc(16px * var(--ui-scale))}.container{width:90vw;height:90vh;max-width:1600px;margin:auto;padding:1rem}h1{text-align:center;color:#90caf9}.panel{position:relative;border-style:solid;border-width:41px;border-image-source:url(../icons/GUI/panel_default.png);border-image-slice:41 fill;border-image-repeat:stretch;border-image-width:41px;background-color:#111;box-sizing:border-box;display:flex;flex-direction:column}.text-input{padding:4px 8px;background-color:#222;color:#eee;border:1px solid #555;border-radius:4px;margin-left:8px}.btn{padding:6px 12px;margin-top:4px;font-size:14px;border:none;border-radius:4px;background-color:#2196f3;color:#fff;cursor:pointer;transition:background-color .2s ease}.btn:disabled{background-color:#555;cursor:not-allowed}.btn:hover:not(:disabled){background-color:#1976d2}.btn--task{margin-top:.25rem}.btn--tab{padding:4px 8px;font-size:.9rem}.tab-menu .btn--tab{margin:0 4px}.character-panel{grid-column:1;grid-row:1}.inventory-panel{grid-column:1;grid-row:2}.events-panel{grid-column:2;grid-row:1}.navigation-panel{grid-column:2;grid-row:2}.logs-panel{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column}.panel-tabs .btn--tab{flex:1;padding:.75rem 1rem;font-size:1.1rem;text-align:center}.logs-panel .panel-tab{display:flex;flex-direction:column;flex:1;min-height:0}.character-header{display:flex;justify-content:center;align-items:center;gap:.5rem;position:relative}.input-mirror{position:absolute;top:-9999px;left:0;visibility:hidden;white-space:pre;font:inherit}#name-input{font:inherit;border:none;background:none;color:#fff;outline:none;min-width:80px}.character-grid{display:flex;width:100%;gap:0;align-items:flex-start}.char-info{flex:1;padding:16px;box-sizing:border-box}.char-equipment{flex:0;padding:16px;box-sizing:border-box;display:flex;justify-content:center;align-items:center}.divider-vertical{width:64px;background:url(../icons/GUI/divider_v.png) repeat-y center;background-size:contain;align-self:stretch}.divider-horizontal{height:64px;width:100%;background:url(../icons/GUI/divider_h.png) repeat-x center;background-size:auto 100%;margin:0}.divider-horizontal.tight{height:12px;background-size:contain}.stats-box{margin-top:.5rem}.stat-row,.task-row,.xp-row{margin:.25rem 0}.equipment-humanoid{display:flex;flex-direction:column;gap:6px}.row{display:flex;justify-content:center;gap:8px}.equipment-humanoid .row{display:flex;gap:8px;justify-content:center;width:100%}.equipment-humanoid .row.center{justify-content:center}.equipment-humanoid .spacer{height:12px}.slot{width:48px;height:48px;background-color:#222;border-radius:4px;background-size:cover;background-position:center}.slot.slot-head{background-image:url(../icons/equipment_bg/helmet_bg.png)}.slot.slot-neck{background-image:url(../icons/equipment_bg/neck_bg.png)}.slot.slot-back{background-image:url(../icons/equipment_bg/back_bg.png)}.slot.slot-shoulders{background-image:url(../icons/equipment_bg/shoulder_bg.png)}.slot.slot-chest{background-image:url(../icons/equipment_bg/chestplate_bg.png)}.slot.slot-wrists{background-image:url(../icons/equipment_bg/wrist_bg.png)}.slot.slot-hands{background-image:url(../icons/equipment_bg/hands_bg.png)}.slot.slot-waist{background-image:url(../icons/equipment_bg/waist_bg.png)}.slot.slot-legs{background-image:url(../icons/equipment_bg/leg_bg.png)}.slot.slot-feet{background-image:url(../icons/equipment_bg/feet_bg.png)}.slot.slot-finger1,.slot.slot-finger2{background-image:url(../icons/equipment_bg/ring_bg.png)}.slot.slot-trinket1,.slot.slot-trinket2{background-image:url(../icons/equipment_bg/trinket_bg.png)}.slot.slot-mainhand{background-image:url(../icons/equipment_bg/mainhand_bg.png)}.slot.slot-offhand{background-image:url(../icons/equipment_bg/offhand_bg.png)}.log-box{overflow-y:auto;padding:.5rem;font-size:.9rem;white-space:pre-line;flex:1;box-sizing:border-box;background-color:#111;border-style:solid;border-width:16px;border-image-source:url(../icons/GUI/panel_scroll.png);border-image-slice:16 fill;border-image-repeat:stretch;border-image-width:16px}.log-combat{color:#dc143c}.log-loot{color:#32cd32}.log-misc{color:#d3d3d3}.log-tabs .btn--tab{margin-right:4px;padding:4px 8px}.journal-tabs{display:flex;gap:.5rem;margin-bottom:.5rem}.journal-tabs .btn--tab{flex:1;padding:4px 8px}.journal-tab{display:none}.journal-tab.active{display:block}.log-filters label{margin-right:10px;font-size:.85rem}.inventory-slot{width:var(--slot-size, 64px);height:var(--slot-size, 64px);position:relative;background-color:#222;border:1px solid #444;border-radius:4px;background-size:cover;background-position:center}.inventory-slot .qty{position:absolute;bottom:2px;right:2px;font-size:.7rem}.inventory-footer{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.9rem}.currency-display{display:flex;gap:.5rem;align-items:center;font-size:1.2rem;line-height:1}.currency-display span{display:flex;align-items:center}.stat-card{background:#1a1a1a;border:2px solid #444;padding:.5rem;margin-bottom:.5rem;border-radius:5px;color:#ccc}.stat-title{font-weight:700;font-size:.9rem;margin-bottom:.2rem;text-align:center}.stat-value{font-size:1.2rem;color:#fff}.fill{height:100%;position:relative;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;transition:width .3s ease}.setting-row{margin:.5rem 0}.tooltip{position:absolute;display:none;pointer-events:none;z-index:100;padding:44px 27px 45px;color:#000;font-size:.8rem;background-color:#fff0;border-style:solid;border-width:16px;border-image-slice:16;border-image-repeat:stretch;border-image-outset:0;border-image-width:1;border-image:url(../icons/GUI/panel_tooltip.png) 44 27 45 27 fill / 44px 27px 45px 27px}.tooltip-name{font-weight:700;margin-bottom:2px}.hp-bar .fill{background-color:#dc143c}.mp-bar .fill{background-color:#1e90ff}.stat-bar-text{font-size:.75rem;text-align:center;color:#ccc}.xp-bar .fill{background-color:purple;position:relative}.stat-group{margin-top:1rem}.stats-columns{display:flex;gap:1rem}.stat-column{flex:1}.stat-group-title{font-weight:700;margin-bottom:.25rem;font-size:.9rem;color:#87cefa}.bar{width:100%;height:1.2rem;background-color:#333;border-radius:4px;overflow:hidden;position:relative;margin-top:4px}.bar-label{position:absolute;width:100%;text-align:center;color:#fff;font-size:.8rem;line-height:1.2rem;top:0;left:0;pointer-events:none}.events-panel #sfx-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.combat-sfx{position:absolute;left:50%;top:30%;width:64px;height:64px;transform:translate(-50%);animation:sfxFade .6s forwards}@keyframes sfxFade{0%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-20px)}}@media (max-width: 768px){:root{--panel-width: 45vw ;--panel-height: 30vh }.container{padding:.5rem}.game-layout{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,auto)}.character-panel{grid-column:1;grid-row:1}.events-panel{grid-column:2;grid-row:1}.inventory-panel{grid-column:1;grid-row:2}.navigation-panel{grid-column:2;grid-row:2}.logs-panel{grid-column:1 / span 2;grid-row:3}.character-grid{flex-direction:column;align-items:center}.divider-vertical{display:none}#inventory-display{grid-template-columns:repeat(8,var(--slot-size, 64px))}}@media (max-width: 480px){:root{--panel-width: 90vw;--panel-height: auto}.container{padding:.25rem}.game-layout{grid-template-columns:1fr;grid-template-rows:auto}.panel{margin-bottom:1rem}.character-panel{grid-row:1;grid-column:1}.inventory-panel{grid-row:2;grid-column:1}.events-panel{grid-row:3;grid-column:1}.navigation-panel{grid-row:4;grid-column:1}.logs-panel{grid-row:5;grid-column:1}#inventory-display{--slot-size: 48px;grid-template-columns:repeat(5,var(--slot-size))}.slot{width:var(--slot-size);height:var(--slot-size)}}.button--settings{width:64px;height:64px;font-size:2rem}.button--settings img{width:100%;height:100%;display:block;image-rendering:pixelated}.settings-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:none;z-index:1000}#close-settings-btn{position:absolute;top:.5rem;right:.5rem}button{padding:6px 12px;margin-top:4px;font-size:14px;border:none;border-radius:4px;background-color:#2196f3;color:#fff;cursor:pointer;transition:background-color .2s ease}button:disabled{background-color:#555;cursor:not-allowed}button:hover:not(:disabled){background-color:#1976d2}.panel{position:relative;border-style:solid;border-width:41px;border-image-source:url(../icons/GUI/panel_default.png);border-image-slice:41 fill;border-image-repeat:stretch;border-image-width:41px;background-color:#111;box-sizing:border-box;display:flex;flex-direction:column}.panel-inner{padding:0;flex:1;width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column}.panel h2{color:#f48fb1;border-bottom:1px solid #444;padding-bottom:.5rem;margin-bottom:1rem;text-align:center}input[type=text]{padding:4px 8px;background-color:#222;color:#eee;border:1px solid #555;border-radius:4px;margin-left:8px}.tab-menu{text-align:center;margin-top:1rem}.tab-menu button{margin:0 4px}.tab-content{height:100%}.game-layout{display:grid;gap:1rem;height:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:60% 40%;justify-content:center}#character-panel{grid-column:1;grid-row:1}#inventory-panel{grid-column:1;grid-row:2}#events-panel{grid-column:2;grid-row:1}#navigation-panel{grid-column:2;grid-row:2}#logs-panel{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column}.panel-tabs{display:flex;gap:1rem;margin-bottom:.5rem;width:100%}.panel-tabs button{flex:1;padding:.75rem 1rem;font-size:1.1rem;text-align:center}.panel-tab{display:none}.panel-tab.active{display:block}#inventory-display{font-size:.9rem;background-color:#222;border:1px solid #444;padding:.5rem;min-height:60px;display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(var(--slot-size, 64px),1fr));grid-auto-rows:var(--slot-size, 64px)}.inventory__slot{width:var(--slot-size, 64px);height:var(--slot-size, 64px);position:relative;background-color:#222;border:1px solid #444;border-radius:4px;background-size:cover;background-position:center}.inventory__slot .inventory__qty{position:absolute;bottom:2px;right:2px;font-size:.7rem}.inventory__footer{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.9rem}.inventory__currency{display:flex;gap:.5rem;align-items:center;font-size:1.2rem;line-height:1}.inventory__currency span{display:flex;align-items:center}.inventory__currency-icon{width:32px;height:32px;image-rendering:pixelated;display:block}.logs__box{overflow-y:auto;padding:.5rem;font-size:.9rem;white-space:pre-line;flex:1;box-sizing:border-box;background-color:#111;border-style:solid;border-width:16px;border-image-source:url(../icons/GUI/panel_scroll.png);border-image-slice:16 fill;border-image-repeat:stretch;border-image-width:16px}.logs__combat{color:#dc143c}.logs__loot{color:#32cd32}.logs__misc{color:#d3d3d3}.logs__tabs button{margin-right:4px;padding:4px 8px}.logs__journal-tabs{display:flex;gap:.5rem;margin-bottom:.5rem}.logs__journal-tabs button{flex:1;padding:4px 8px}.logs__journal-tab{display:none}.logs__journal-tab.active{display:block}.logs__filters label{margin-right:10px;font-size:.85rem}#logs-panel .panel-tab{display:flex;flex-direction:column;flex:1;min-height:0}