*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#102334;color:#f4f1df;font-family:system-ui,sans-serif}canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:26px 32px;background:linear-gradient(#071722b0,transparent);pointer-events:none}.brand{display:flex;gap:14px;align-items:center;letter-spacing:4px;font-weight:700}.sigil{font-size:36px;color:#d9bf78}small{display:block;font-size:10px;letter-spacing:2px;color:#ccd8cc;font-weight:500;margin-top:5px}.performance{display:flex;align-items:center;gap:20px;font-size:13px;pointer-events:auto}button,select{color:#f4f1df;background:#112b3de8;border:1px solid #6b8491;padding:9px 14px;border-radius:6px;cursor:pointer}button:hover{background:#28465b}.place{position:absolute;top:120px;left:32px;max-width:370px;pointer-events:none;text-shadow:0 2px 8px #071820}h1{font-family:Georgia,serif;font-weight:400;font-size:34px;margin:12px 0}.place p{font-size:13px;color:#e3e7d8}.badge{display:inline-flex;gap:9px;align-items:center;font-size:11px;background:#0b263aa0;border:1px solid #98b6b844;padding:10px 13px;border-radius:5px}.badge i{background:#87c991;width:6px;height:6px;border-radius:50%}footer{position:absolute;bottom:0;left:0;right:0;padding:25px 32px;display:flex;align-items:flex-end;justify-content:space-between;background:linear-gradient(transparent,#081c2dca);pointer-events:none}.companion{display:flex;gap:16px;align-items:center}.companion>span{font-size:42px;color:#e9b669}.companion strong{display:block;margin-top:5px;font-family:Georgia,serif;font-size:23px;font-weight:400}.companion p{font-size:11px;color:#c3d0d1;margin:5px 0}.controls{font-size:12px;line-height:2;color:#d9e4e4;text-align:right}kbd{font:10px system-ui;background:#14384a9c;padding:4px 7px;border:1px solid #6f89937a;border-radius:3px}#settings{position:absolute;right:32px;top:85px;width:280px;background:#102b3ded;padding:22px;border:1px solid #607887;border-radius:10px}#settings h2{margin:0 0 20px;font:24px Georgia}#settings label{display:flex;justify-content:space-between;align-items:center}#settings p{font-size:12px;line-height:1.6;color:#b9cacf}#prompt{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);background:#112b3ddc;border-radius:7px;padding:10px 18px;font-size:13px}#prompt:empty{display:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#102334}.loading-card{text-align:center}.loading-card>span{font-size:55px;color:#d8b77a}.loading-card h2{font:36px Georgia}.loading-card p{color:#bacdcb;font-size:13px}#notice{position:absolute;top:85px;left:50%;transform:translateX(-50%);max-width:600px;background:#193a4cee;padding:15px;border:1px solid #d9bf78;border-radius:8px;font-size:13px}@media(max-width:700px){header,footer{padding:18px}.brand{font-size:14px;letter-spacing:2px}.brand small{font-size:8px}.place{left:18px;top:95px}h1{font-size:26px}.place p{display:none}.controls{font-size:10px}.companion strong{font-size:18px}.companion>span{display:none}.performance{gap:8px}#settings{right:18px}}

.touch{display:none;position:absolute;bottom:115px;left:18px;right:18px;justify-content:space-between;align-items:end;pointer-events:none}.touch>div{pointer-events:auto;text-align:center}.touch button{min-width:48px;min-height:48px;margin:3px;touch-action:none;background:#13374bb8}@media(pointer:coarse){.touch{display:flex}.controls{display:none}.place{pointer-events:none}#prompt{bottom:235px}}

#party{position:absolute;right:20px;top:105px;width:230px;padding:12px;background:#0c2331ed;border:1px solid #607887;border-radius:10px;max-height:calc(100% - 220px);overflow:auto}.party-heading{font-size:12px;letter-spacing:2px;padding:2px 5px 12px}.party-heading small{letter-spacing:0;font-size:11px}.party-card{display:flex;gap:10px;width:100%;text-align:left;margin-bottom:9px;padding:12px 9px;border-color:#426073;background:#102e40}.party-card.active{border-color:#e2c583;background:#214658;box-shadow:inset 3px 0 #e2c583}.party-card:disabled{opacity:.55;cursor:wait}.party-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:44px;background:#5b341d;border-radius:7px;color:#ffce84;font-size:27px}.verdant .party-icon{background:#234d39;color:#a7e3a1}.party-detail{display:block;flex:1;min-width:0}.party-title{display:block;font-size:12px;font-weight:650}.party-meta,.hp-text,.xp-text,.party-state{display:block;font-size:10px;margin-top:4px;color:#c9d9dc}.party-state{color:#e4c987;margin-top:7px}.stat-bar{display:block;margin-top:7px;height:7px;background:#061521;border-radius:4px;overflow:hidden}.health-fill,.xp-fill{display:block;height:100%;width:0;background:#68c88b}.experience{height:4px;margin-top:6px}.xp-fill{background:#66b7ec}.party-help{font-size:10px;line-height:1.6;color:#a9c0cc;margin:8px 4px 0}#settings{z-index:3}.controls{padding-right:245px}@media(max-width:700px){#party{right:8px;top:82px;width:175px;padding:7px;max-height:calc(100% - 310px)}.party-card{padding:8px 6px;gap:6px}.party-title{font-size:10px}.party-icon{width:25px;font-size:22px}.party-help{display:none}.place{max-width:calc(100% - 200px)}.party-heading{font-size:10px}.party-heading small{font-size:9px}}




footer{justify-content:flex-end}

header{justify-content:flex-end}

#battle{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);width:min(510px,calc(100% - 32px));padding:18px;border:1px solid #678ea7;border-radius:10px;background:#0c2639f2}#battle[hidden],#target-reticle[hidden],#battle-result[hidden]{display:none}#battle-menu{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0}#battle-menu button.focused{outline:3px solid #80d0ff}#battle-menu button:disabled{opacity:.45}#battle-log{min-height:36px;font-size:13px}#ally-hp,#enemy-hp{font-size:12px}#target-reticle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;text-align:center}#target-reticle i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;width:36px;height:36px;border:2px solid white;border-radius:50%;margin:auto}#target-reticle.locked i{border-color:#80edaa}#target-reticle span{position:absolute;top:28px;left:50%;transform:translateX(-50%);width:max-content;display:block;margin-top:0;background:#102b3de8;padding:7px;font-size:12px}#battle-result{position:absolute;top:100px;left:50%;transform:translateX(-50%);color:#e5f5ff;font-size:28px;text-shadow:0 2px 8px #061521;pointer-events:none;animation:result-in .25s ease-out}@keyframes result-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}@media(pointer:coarse){#battle{bottom:230px}} 

#region-map{position:absolute;z-index:5;top:70px;left:20px;width:min(580px,calc(100vw - 40px));max-height:calc(100dvh - 90px);overflow:auto;padding:18px;box-sizing:border-box;background:#0c2639f5;border:1px solid #678ea7;border-radius:12px;box-shadow:0 15px 65px #0008}#region-map[hidden]{display:none}.map-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}#map-canvas{display:block;width:100%;height:auto;border-radius:8px}#region-map p{font-size:12px;color:#c3d5d6;margin-bottom:0}