*{box-sizing:border-box}
:root{--ink:#e8e1cf;--muted:#aab6a5;--gold:#d7b778;--panel:#1b2924;--panel2:#263a30}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111b18;color:var(--ink);font-family:Georgia,"Times New Roman",serif}
button{font:inherit;cursor:pointer;color:inherit;border:0}
#app{height:100dvh;max-width:1500px;margin:auto;display:flex;flex-direction:column;background:#17231f}
.topbar{height:58px;flex:none;background:#1e3028;border-bottom:1px solid #a88c5c;display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:4}
.title{display:flex;align-items:center;gap:10px}.sigil{width:34px;height:34px;border:1px solid #c5a66d;border-radius:50%;display:grid;place-items:center;color:#e5c98d;font-size:22px;background:#2c4033}
.title strong{display:block;letter-spacing:2px;font-size:13px;color:#f0d9a5}.title small{display:block;color:#aeb9a9;font:9px system-ui;letter-spacing:1.5px;margin-top:2px}
.top-actions{display:flex;align-items:center;gap:7px}.day-pill,.top-btn{border:1px solid #66775e;background:#293d32;border-radius:8px;padding:8px 11px;font:11px system-ui;color:#f4eddc}.day-pill{color:#e6cc92}.top-btn:active{background:#526a4e;transform:translateY(1px)}
#stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#71865c}
#world{display:block;width:100%;height:100%;touch-action:none}
.hud-left{position:absolute;top:13px;left:13px;display:flex;gap:7px;pointer-events:none;flex-wrap:wrap}
.pill{display:flex;align-items:center;gap:7px;background:#17231fdf;border:1px solid #8c9875;border-radius:20px;padding:7px 11px;font:11px system-ui;color:#f7f0df;box-shadow:0 3px 10px #0003}
.gold-dot,.leaf-dot{width:7px;height:7px;border-radius:50%;background:#e0bd75}.leaf-dot{background:#9ebc79}
.quest-card{position:absolute;right:13px;top:13px;width:min(255px,42%);background:#17231fe8;border:1px solid #9c895f;border-radius:10px;padding:10px 12px;pointer-events:none;box-shadow:0 3px 12px #0003}
.quest-card small{display:block;font:9px system-ui;letter-spacing:1.5px;color:#d8bb7e;margin-bottom:5px}.quest-card strong{display:block;font:12px/1.4 system-ui;color:#f4ecd9;font-weight:600}.quest-progress{height:3px;background:#465448;border-radius:5px;margin-top:8px;overflow:hidden}.quest-progress span{display:block;height:100%;width:0;background:#d8b876;transition:width .25s}
.hint{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);background:#17231fe8;border:1px solid #b59a67;border-radius:8px;padding:8px 13px;font:12px system-ui;text-align:center;max-width:88%;pointer-events:none;white-space:nowrap;color:#f4ecd9}
.toast{position:absolute;left:50%;top:70px;transform:translateX(-50%);background:#263a30f2;border:1px solid #d1b477;border-radius:20px;padding:8px 15px;font:12px system-ui;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;z-index:8;box-shadow:0 5px 20px #0005}.toast.show{opacity:1}
.modal{position:absolute;z-index:7;left:50%;bottom:25px;transform:translateX(-50%);width:min(600px,calc(100% - 26px));max-height:76%;overflow:auto;background:#1b2a24f5;border:1px solid #c4a56d;border-radius:13px;padding:16px 18px;box-shadow:0 15px 45px #0009}
.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #61715c;padding-bottom:10px}.modal-head small{font:9px system-ui;letter-spacing:1.5px;color:#d6b777}.modal-head h2{font-size:20px;font-weight:normal;margin:3px 0 0;color:#f2dba5}.close-btn{font:26px/1 system-ui;background:transparent;color:#e3d6b8;padding:0 3px}
.modal p{font:14px/1.6 system-ui;color:#e8e2d5;margin:12px 0}.choices{display:flex;gap:8px;flex-wrap:wrap}.choices button{background:#536a4b;border:1px solid #8c9b70;border-radius:7px;padding:9px 12px;font:12px system-ui;color:#fff4db}.choices button:hover{background:#6b8059}
.journal{top:50%;bottom:auto;transform:translate(-50%,-50%);max-height:84%}.journal section{border-bottom:1px solid #46584b;padding:8px 0}.journal h3{font:10px system-ui;letter-spacing:1.4px;color:#d6b777;margin:7px 0}.journal p,.journal li{font:13px/1.55 system-ui;color:#e7e0d0}.journal ul{margin:5px 0;padding-left:20px}
.map-modal{top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(500px,calc(100% - 26px));max-height:85%}.map-modal canvas{display:block;width:100%;height:auto;border:1px solid #7d8b6d;border-radius:7px;margin-top:13px;background:#83946a}.map-legend{font-size:11px!important;color:#c9c1aa!important}
.hidden{display:none!important}
.mobile-ui{display:none;position:absolute;left:14px;right:14px;bottom:16px;align-items:flex-end;justify-content:space-between;pointer-events:none}
.dpad,.mobile-actions{pointer-events:auto}.dpad button{width:42px;height:39px;margin:2px;background:#17231fdc;border:1px solid #d3bd8a;border-radius:9px;font:15px system-ui;touch-action:none;user-select:none}.dpad>button{display:block;margin:0 auto 2px}.dpad div{display:flex}
.mobile-actions{display:flex;align-items:flex-end;gap:9px}.round-btn{border-radius:50%;width:61px;height:61px;border:2px solid #e0c68e;font:10px system-ui;font-weight:bold;letter-spacing:.7px;box-shadow:0 4px 12px #0005;touch-action:none}.primary{background:#c49b58;color:#1b261e;width:74px;height:74px}.secondary{background:#24362cdd;color:#f4e7c8}
footer{height:27px;flex:none;background:#1e3028;color:#aab5a7;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font:10px system-ui}
@media(max-width:700px){.topbar{height:52px;padding:0 9px}.title strong{font-size:10px;letter-spacing:1.2px}.title small{font-size:8px}.sigil{width:29px;height:29px;font-size:19px}.top-actions{gap:4px}.day-pill,.top-btn{font-size:9px;padding:7px 7px}.quest-card{width:min(190px,48%);padding:8px 9px}.quest-card strong{font-size:10px}.quest-card small{font-size:8px}.mobile-ui{display:flex}.hint{bottom:104px;font-size:10px;max-width:95%}.modal{bottom:104px;padding:13px 14px}.journal,.map-modal{top:50%;bottom:auto}.modal p{font-size:13px}.choices button{padding:8px 10px}footer{height:23px;font-size:8px}footer span:last-child{display:none}}
@media(hover:none),(pointer:coarse){.mobile-ui{display:flex}}
@media(max-height:500px) and (orientation:landscape){.mobile-ui{bottom:8px}.dpad button{width:34px;height:32px}.round-btn{width:52px;height:52px}.primary{width:62px;height:62px}.hint{bottom:82px}.modal{bottom:84px;max-height:70%}}
