@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#e7ebe0;background:#101d19;font-synthesis:none;--muted:#8b9a8d;--lime:#d5e9a1;--line:#304039}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 55% 20%,#24362b66,transparent 70%)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button:disabled{opacity:.4;cursor:default}header{height:91px;border-bottom:1px solid var(--line);padding:0 5%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;color:#eef4de;text-decoration:none;font:700 21px 'Outfit',sans-serif;letter-spacing:3px;gap:12px}.brand-icon{color:var(--lime);font-size:36px}.edition{border-left:1px solid #526049;margin-left:12px;padding-left:23px;font:500 9px 'DM Sans',sans-serif;letter-spacing:2px;max-width:140px;line-height:1.7}.header-right{display:flex;align-items:center;gap:20px}.status{font-size:11px;color:var(--muted);display:flex;gap:7px;align-items:center}.status i,.live-dot{display:inline-block;width:5px;height:5px;background:#c6db9e;border-radius:50%}.subtle,.icon-button{background:transparent;border:1px solid #405044;border-radius:7px;padding:10px 15px;font-size:11px}.subtle span{margin-left:16px}.icon-button{border:0;font-size:23px;padding:5px}main{max-width:1600px;margin:auto;padding:44px 5% 20px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:2.7px;color:#aabc9b;margin-bottom:10px}h1{font:500 39px 'Outfit',sans-serif;letter-spacing:-1px;margin:0}.chapter{display:flex;align-items:center;gap:15px}.chapter>span{font:300 44px 'Outfit';color:#68765d}.chapter>div{font-size:9px;letter-spacing:1.6px}.chapter small{display:block;color:var(--muted);font-size:11px;letter-spacing:0;margin-top:6px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:25px}.game-shell{background:#1c2b23;border:1px solid #435244;border-radius:13px;overflow:hidden;align-self:start;box-shadow:0 20px 70px #0004}.location-bar{height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:12px}.location-bar>div{display:flex;align-items:center;gap:12px}.location-mark{font-size:25px;color:var(--lime)}#areaTag{font-size:10px;color:#97a292;border-left:1px solid #495447;padding-left:12px}.weather{color:#d6dfa9;font-size:20px;display:flex;align-items:center;gap:7px}.weather span{font-size:10px;color:#a5b29b}.viewport{position:relative;aspect-ratio:1120/736;overflow:hidden;background:#89a666}#game,#battleArt{width:100%;height:100%;display:block;outline-offset:-4px}.world-note{position:absolute;top:19px;left:19px;background:#193b32c9;color:#eaf0d3;backdrop-filter:blur(6px);font-size:8px;letter-spacing:1.5px;border:1px solid #ffffff30;border-radius:5px;padding:10px 12px;display:flex;align-items:center;gap:8px;pointer-events:none}.canvas-bottom{position:absolute;bottom:15px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none}.canvas-bottom>span{background:#193b32d9;padding:10px 13px;border-radius:5px;font-size:10px;color:#f0f0d6}.canvas-bottom button{background:#f1f0dbe8;color:#314335;padding:9px 13px;border-radius:5px;font-size:12px;pointer-events:auto}.canvas-bottom button span{font-size:10px;margin-left:5px}.control-bar{height:55px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;color:#a6b09c;font-size:9px}.control-bar>div{display:flex;gap:18px}.control-bar span{display:flex;align-items:center;gap:4px}kbd{display:inline-block;padding:3px 5px;border:1px solid #5a6554;border-bottom-width:2px;border-radius:4px;font:9px 'DM Sans';color:#d6dfc8}.autosave-label{color:#bbcda1;font-size:9px}aside{display:flex;flex-direction:column;gap:25px}.section-label{font-size:9px;letter-spacing:1.7px;display:flex;justify-content:space-between;color:#9fad99}.journal{border:1px solid #45513b;border-radius:10px;padding:22px;background:linear-gradient(130deg,#29392b,#1b2b22)}.quest-icon{font-size:34px;color:#dbdf9f;margin:20px 0 6px}h2{font:500 21px 'Outfit';margin:0 0 9px}.journal p{font-size:11px;color:#adb7a2;line-height:1.7;margin:0}.objectives{margin:20px 0}.objective{display:flex;align-items:center;gap:10px;margin:13px 0;font-size:10px;color:#a5b09b}.objective.active{color:#e6edcc}.objective i{font-style:normal;width:15px;height:15px;border:1px solid #758062;border-radius:50%;font-size:9px;text-align:center;line-height:13px}.objective.done i{background:var(--lime);color:#23321e;border-color:var(--lime)}.reward{padding-top:15px;border-top:1px solid #405039;display:flex;flex-direction:column;gap:9px}.reward>span{font-size:8px;color:#93a084;letter-spacing:1.7px}.reward strong{font-size:11px;font-weight:500;color:#dedfb5}.party-section,.bag-summary{padding:0 5px}.companion{display:flex;align-items:center;gap:12px;margin-top:19px}.companion canvas{width:48px;height:48px;background:#ffffff06;border:1px solid #ffffff12;border-radius:9px}.companion-info{flex:1}.companion-info>div{font-size:12px;display:flex;justify-content:space-between;align-items:center}.companion-info small{color:#96a787;font-size:9px}.health{height:5px;background:#12251e;border-radius:4px;overflow:hidden;margin-top:9px}.health i{display:block;height:100%;background:#bdd994;transition:width .4s}.companion .health{height:3px}.empty-party{font-size:11px;color:#9ca891;line-height:1.7;border:1px dashed #45513c;border-radius:8px;padding:16px;margin-top:18px}.wide-button{display:flex;width:100%;justify-content:space-between;background:transparent;border:1px solid #41503b;padding:11px 13px;font-size:10px;border-radius:5px;margin-top:17px;color:#ccd6bb}.wide-button:hover,.subtle:hover{background:#ffffff0a}.bag-summary{border-top:1px solid #34452f;padding-top:22px}.bag-summary>div:not(.section-label){display:flex;justify-content:space-between;font-size:11px;margin-top:17px;color:#aeb9a0}.bag-summary strong{font-weight:500;color:#e0e5ca}footer{display:flex;justify-content:space-between;margin-top:25px;font-size:9px;color:#73816f}footer>span:last-child{font-size:8px;letter-spacing:2px}.interact-hint{position:absolute;left:50%;top:65%;transform:translateX(-50%);background:#f3f0d9;color:#283d2b;padding:8px 12px;border-radius:5px;box-shadow:0 3px 15px #0003;font-size:12px}.interact-hint kbd{color:#293e2b}.overlay{position:absolute;inset:0;background:#10251ad9;backdrop-filter:blur(9px);z-index:10;padding:26px;overflow:auto;display:flex;align-items:center;justify-content:center}.modal{width:100%;max-width:640px}.modal .eyebrow{color:#c1dba7}.modal h2{font-size:32px}.modal>p{font-size:12px;line-height:1.7;color:#becbb3}.modal-title{display:flex;justify-content:space-between;align-items:start;gap:20px}.close{background:#ffffff12;border:1px solid #ffffff30;border-radius:50%;width:30px;height:30px;flex-shrink:0}.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:22px 0}.starter-card{background:#edf0d807;border:1px solid #84957060;border-radius:10px;padding:10px;text-align:center;transition:background .2s,transform .2s}.starter-card:hover{background:#cbd99725;transform:translateY(-4px)}.starter-card canvas{width:100%;aspect-ratio:1}.starter-card strong{display:block;font:500 20px 'Outfit'}.starter-card span{display:block;font-size:10px;color:#c3cfb7;padding:7px 0}.starter-card small{color:#94aa88;font-size:9px}.primary{background:var(--lime);color:#243521;padding:12px 17px;border-radius:6px;font-size:12px;font-weight:700}.secondary{background:#e4edcf10;color:#e2ebd2;border:1px solid #84957060;padding:12px 17px;border-radius:6px;font-size:12px}.modal-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.save-description{background:#ffffff08;border:1px solid #ffffff20;border-radius:7px;padding:16px;font-size:12px;line-height:1.8;margin:15px 0}.danger{color:#f0b4a0}.dialogue{position:absolute;bottom:20px;left:20px;right:20px;z-index:8;background:#f8f3df;color:#263b2c;border:3px solid #6a7951;border-radius:10px;padding:19px 22px;box-shadow:0 5px 0 #24382755;display:flex;gap:20px;align-items:end}#speaker{font-size:10px;letter-spacing:1.6px;font-weight:700;text-transform:uppercase}.dialogue p{font-size:14px;line-height:1.6;margin:9px 0 0}.dialogue button{background:transparent;flex-shrink:0;font-size:10px;color:#4b6240;padding:5px}.dialogue kbd{color:#4b6240}.battle{position:absolute;inset:0;z-index:9;background:#aec68c}.stat{position:absolute;width:32%;background:#f7f2dfeF;border:1px solid #698159;border-radius:9px;padding:15px;color:#2d472f;box-shadow:0 5px 0 #304d3330}.stat>div:first-child{display:flex;justify-content:space-between;font-size:15px}.stat>div:first-child span{font-size:11px}.stat small{display:block;font-size:10px;margin-top:7px;text-align:right}.enemy-stat{top:10%;left:6%}.ally-stat{bottom:29%;right:5%}.battle-console{position:absolute;bottom:0;left:0;right:0;min-height:24%;background:#182e24f5;border-top:2px solid #9aac7c;padding:18px 22px;display:grid;grid-template-columns:1fr 1.2fr;gap:20px;align-items:center}.battle-console p{font-size:14px;line-height:1.6;margin:0}#battleActions{display:grid;grid-template-columns:1fr 1fr;gap:7px}#battleActions button{padding:10px 8px;border:1px solid #768b5b;border-radius:5px;background:#2c4430;font-size:11px;text-align:left}#battleActions button:hover{background:#486140}#battleActions small{display:block;font-size:8px;color:#c7dba9;margin-top:3px}.map-regions{display:grid;gap:12px;margin-top:20px}.map-region{padding:18px;border-radius:8px;border:1px solid #687f4f;background:#b1cd7310;display:flex;justify-content:space-between;gap:15px}.map-region strong{font:500 19px 'Outfit'}.map-region small{display:block;font-size:11px;color:#bdcbaf;margin-top:5px}.map-region>span{color:#dbeaa2;font-size:10px}.party-row{display:flex;gap:12px;align-items:center;margin:12px 0;background:#ffffff07;padding:10px;border-radius:8px}.party-row canvas{width:60px;height:60px}.party-row>div{flex:1}.party-row small{display:block;color:#b2c69c;margin-top:5px;font-size:10px}.party-row button{padding:8px;font-size:10px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:40;padding:13px 20px;background:#e2ecc6;color:#2b402b;border:1px solid #6e824e;border-radius:7px;box-shadow:0 10px 40px #0005;font-size:12px;max-width:90vw}.touch-controls{display:none;padding:12px;justify-content:space-between;background:#1c2b23;align-items:center}.touch-controls button{background:#344833;padding:13px 18px;border-radius:7px;touch-action:none;font-size:14px}.dpad{display:grid;grid-template-columns:repeat(3,45px);gap:4px}.dpad button{padding:10px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}[hidden]{display:none!important}@media(min-width:1700px){main{padding-top:55px}.page-heading{margin-bottom:35px}}@media(max-width:1100px){main{padding:28px 3%}.game-layout{grid-template-columns:minmax(0,1fr) 225px;gap:18px}header{padding:0 3%}.journal{padding:17px}.control-bar{padding:0 12px}.control-bar>div{gap:10px}.autosave-label{display:none}.edition{display:none}h1{font-size:32px}}@media(max-width:800px){.game-layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:20px}.bag-summary{grid-column:2;grid-row:1;padding:0;border:0}.journal{grid-row:1/3}.party-section{grid-column:2}.touch-controls{display:flex}.status{display:none}.chapter{display:none}header{height:72px}.header-right{gap:9px}.brand{font-size:17px;letter-spacing:2px}.subtle{padding:9px}.page-heading{margin-bottom:20px}.weather span,#areaTag{display:none}.viewport{aspect-ratio:1.3}.world-note{font-size:7px;top:10px;left:10px;padding:8px}.canvas-bottom{left:10px;right:10px;bottom:10px}.canvas-bottom>span{font-size:9px;max-width:76%}.overlay{padding:20px}.modal h2{font-size:26px}.starter-grid{gap:8px;margin:12px 0}.starter-card{padding:7px}.starter-card strong{font-size:16px}.starter-card small{display:none}.dialogue{padding:12px;bottom:10px;left:10px;right:10px;gap:7px;display:block}.dialogue p{font-size:12px}.dialogue button{float:right}.battle-console{padding:12px;gap:8px;grid-template-columns:1fr;min-height:30%}.battle-console p{font-size:12px}.stat{width:40%;padding:10px}.stat>div:first-child{font-size:12px}.ally-stat{bottom:36%}.enemy-stat{left:4%}.control-bar{height:44px}.party-row{gap:5px}.party-row canvas{width:40px;height:40px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Keep tall menus scrollable on small screens. */
.overlay{align-items:flex-start}.modal{margin:auto 0}