:root{--bg-cream:#fffdf5;--panel-border:#d9c39e;--text-dark:#3b2d1f;--text-muted:#6e5a47;--accent-green:#4c9a45;--accent-green-dark:#377731;--accent-yellow:#f5b727;--shadow-soft:0 6px 18px #3b2d1f2e}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:manipulation;margin:0;padding:0}body,html{width:100%;height:100%;color:var(--text-dark);background-color:#2c4a27;font-family:Nunito,sans-serif;overflow:hidden}#app,#game-container{width:100vw;height:100vh;position:relative}#ui-layer{pointer-events:none;flex-direction:column;justify-content:space-between;padding:12px;display:flex;position:absolute;inset:0}.hud-panel{pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.hud-bar-main{pointer-events:auto;justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.hud-left-group,.hud-actions{align-items:center;gap:8px;display:flex}.stat-badge{border:2.5px solid var(--panel-border);box-shadow:var(--shadow-soft);background:#fffdf5f2;border-radius:999px;align-items:center;gap:6px;padding:6px 14px;transition:transform .2s cubic-bezier(.34,1.56,.64,1);display:flex}.stat-badge.score-bump{background:#fef9c3;border-color:#f59e0b;transform:scale(1.24)}.badge-icon{font-size:1.2rem}.badge-level-tag{color:var(--text-muted);text-transform:uppercase;font-size:.78rem;font-weight:800}.badge-value{color:var(--accent-green-dark);font-family:Fredoka,sans-serif;font-size:1.1rem;font-weight:700}.objective-pill{pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fffdf5;background:#1b2b18db;border:2px solid #facc15a6;border-radius:999px;align-items:center;gap:8px;max-width:min(560px,94vw);padding:6px 16px;font-size:.88rem;font-weight:700;display:inline-flex;box-shadow:0 4px 14px #00000038}.goal-dot{flex-shrink:0;font-size:1rem}.goal-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ui-btn{background:var(--accent-green);color:#fff;border:none;border-bottom:4px solid var(--accent-green-dark);cursor:pointer;pointer-events:auto;border-radius:14px;justify-content:center;align-items:center;gap:6px;padding:8px 14px;font-family:Fredoka,sans-serif;font-size:.92rem;transition:transform .1s,filter .15s;display:inline-flex}.ui-btn:hover{filter:brightness(1.06)}.ui-btn:active{border-bottom-width:2px;transform:translateY(2px)}.btn-icon-only{border-radius:12px;width:40px;height:40px;padding:0;font-size:1.15rem}.btn-small{padding:6px 12px;font-size:.82rem}.btn-large{width:100%;padding:13px 22px;font-size:1.12rem}.btn-gold{color:#fffdf5;background:#f59e0b;border-bottom-color:#b45309}.btn-secondary{border:2px solid var(--panel-border);color:var(--text-dark);background:#fffdf5;border-bottom:4px solid #bfa984}.pulse-btn{animation:1.2s ease-in-out infinite alternate gentlePulse}@keyframes gentlePulse{0%{transform:scale(1)}to{transform:scale(1.04)}}.inventory-bar{border:2.5px solid var(--panel-border);box-shadow:var(--shadow-soft);pointer-events:auto;background:#fffdf5f0;border-radius:999px;align-self:flex-start;align-items:center;gap:8px;padding:6px 14px;display:flex}.inv-title{font-size:1.1rem}.inventory-slots{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.inv-chip{cursor:pointer;background:#f2e6cf;border:2px solid #d4bd94;border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:800}.inv-empty{color:#9c8974;font-size:.8rem;font-style:italic}.interaction-prompt{color:#fffdf5;pointer-events:auto;cursor:pointer;z-index:25;background:#271d14;border:2px solid #facc15;border-radius:999px;align-items:center;gap:10px;padding:8px 18px;font-size:.92rem;font-weight:700;display:flex;position:absolute;bottom:98px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000059}.key-badge{background:var(--accent-yellow);color:#271d14;border-radius:999px;padding:2px 10px;font-family:Fredoka,sans-serif;font-size:.9rem;font-weight:700}.main-menu-overlay{pointer-events:auto;z-index:50;background:radial-gradient(circle,#233e1e59,#142212c7);justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;inset:0}.menu-card{background:var(--bg-cream);border:5px solid var(--panel-border);text-align:center;border-radius:28px;flex-direction:column;align-items:center;gap:14px;width:min(500px,92vw);padding:30px 24px;display:flex;box-shadow:0 20px 50px #00000073}.menu-pill{color:#166534;background:#dcfce7;border:2px solid #86efac;border-radius:999px;padding:4px 12px;font-size:.8rem;font-weight:800}.game-logo{color:var(--accent-green-dark);text-shadow:0 3px #d9c39e;font-family:Fredoka,sans-serif;font-size:clamp(2.1rem,5vw,3rem)}.game-tagline{color:var(--text-muted);font-size:.96rem;line-height:1.45}.menu-buttons{width:100%;margin-top:6px}.dialogue-modal{background:var(--bg-cream);border:4px solid var(--panel-border);pointer-events:auto;z-index:35;border-radius:22px;width:min(640px,94vw);padding:18px 20px;position:absolute;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 12px 32px #00000052}.dialogue-header{align-items:center;gap:8px;margin-bottom:6px;display:flex}.dialogue-speaker{color:var(--accent-green-dark);font-family:Fredoka,sans-serif;font-size:1.15rem;font-weight:700}.dialogue-role{color:var(--text-muted);background:#efe4ce;border-radius:8px;padding:2px 8px;font-size:.75rem;font-weight:800}.dialogue-text{margin-bottom:14px;font-size:.98rem;line-height:1.45}.dialogue-choices{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.modal-backdrop{pointer-events:auto;z-index:45;background:#18130e99;justify-content:center;align-items:center;padding:14px;display:flex;position:absolute;inset:0}.small-modal-card,.journal-card{background:var(--bg-cream);border:4px solid var(--panel-border);border-radius:24px;flex-direction:column;gap:12px;width:min(460px,94vw);max-height:88vh;padding:20px;display:flex;overflow-y:auto;box-shadow:0 18px 40px #0006}.journal-card{width:min(720px,95vw)}.journal-header{border-bottom:2px solid #e6d5b8;justify-content:space-between;align-items:center;padding-bottom:8px;display:flex}.journal-header h2,.small-modal-card h2{color:var(--accent-green-dark);font-family:Fredoka,sans-serif;font-size:1.3rem}.journal-subtitle{color:var(--text-muted);font-size:.82rem;font-weight:700}.journal-badges{flex-wrap:wrap;gap:6px;display:flex}.badge-pill{color:#92400e;background:#fef3c7;border:1.5px solid #f59e0b;border-radius:999px;padding:3px 10px;font-size:.76rem;font-weight:800}.journal-list{flex-direction:column;gap:8px;display:flex;overflow-y:auto}.quest-row{background:#f9f2e2;border:2px solid #e0cca4;border-radius:14px;flex-direction:column;gap:4px;padding:10px 14px;display:flex}.quest-row.completed{background:#ecfdf5;border-color:#6ee7b7}.quest-row.active,.quest-row.ready_to_turn_in{background:#fffbeb;border-color:#f59e0b}.quest-row-top,.quest-row-bottom{justify-content:space-between;align-items:center;gap:8px;display:flex}.quest-title{font-family:Fredoka,sans-serif;font-size:.98rem}.quest-status-tag{background:#e5d5b5;border-radius:999px;padding:2px 8px;font-size:.7rem;font-weight:800}.quest-desc{color:var(--text-muted);font-size:.82rem}.quest-obj{color:var(--accent-green-dark);font-size:.84rem;font-weight:800}.pause-menu-stack,.completion-actions,.settings-form{flex-direction:column;gap:10px;width:100%;display:flex}.celebration-card{text-align:center;align-items:center}.celebration-icon{font-size:2.6rem}.completion-quest-name{color:#b45309;font-family:Fredoka,sans-serif;font-size:1.1rem}.reward-summary-box{background:#fef9c3;border:2px solid #fde047;border-radius:14px;flex-direction:column;gap:4px;width:100%;padding:12px;display:flex}.reward-line{color:#854d0e;font-family:Fredoka,sans-serif;font-size:1rem}.impact-line{color:var(--accent-green-dark);font-size:.86rem;font-weight:700}.realworld-fact-box{color:#065f46;text-align:left;background:#ecfdf5;border:2px solid #6ee7b7;border-radius:14px;width:100%;padding:10px 12px;font-size:.82rem;font-weight:700;line-height:1.4}.flying-reward-coin{pointer-events:none;z-index:999;font-size:1.65rem;transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .65s;position:fixed}.saga-map-screen{pointer-events:auto;z-index:48;background:radial-gradient(circle at 50% 30%,#193a1eb8,#0e1f10eb);justify-content:center;align-items:center;padding:12px;display:flex;position:absolute;inset:0}.saga-map-board{background:linear-gradient(#86efac 0%,#bbf7d0 48%,#fef08a 100%);border:5px solid #d97706;border-radius:28px;flex-direction:column;width:min(840px,96vw);height:min(660px,90vh);display:flex;overflow:hidden;box-shadow:0 24px 60px #0000008c}.saga-map-header{background:var(--bg-cream);border-bottom:3px solid var(--panel-border);justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;display:flex}.saga-header-center{text-align:center}.saga-header-center h2{color:var(--accent-green-dark);font-family:Fredoka,sans-serif;font-size:1.25rem}.saga-header-center p{color:var(--text-muted);font-size:.78rem;font-weight:700}.saga-trail-viewport{flex-direction:column;flex:1;gap:22px;padding:24px 18px;display:flex;position:relative;overflow-y:auto}.saga-trail-viewport:before{content:"";opacity:.5;z-index:0;background:repeating-linear-gradient(#d97706 0 14px,#0000 14px 26px);width:6px;position:absolute;top:40px;bottom:40px;left:50%;transform:translate(-50%)}.map-node-row{z-index:1;width:100%;display:flex;position:relative}.map-node-row.left{justify-content:flex-start;padding-left:4%}.map-node-row.right{justify-content:flex-end;padding-right:4%}.map-node-bubble{background:var(--bg-cream);border:3.5px solid #d97706;border-radius:22px;align-items:center;gap:12px;width:min(420px,96%);padding:14px 16px;display:flex;box-shadow:0 8px 20px #3b2d1f33}.map-node-bubble.current{background:#fff;border-color:#16a34a}.map-node-bubble.coming-soon,.map-node-bubble.locked{opacity:.88;background:#f1f5f9;border-color:#94a3b8}.node-medallion{background:linear-gradient(#fde047,#f59e0b);border:3px solid #b45309;border-radius:50%;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;width:62px;height:62px;font-family:Fredoka,sans-serif;display:flex}.node-num{text-transform:uppercase;font-size:.65rem;font-weight:800}.node-icon{font-size:1.45rem}.node-content{flex-direction:column;flex:1;gap:3px;display:flex}.node-title{font-family:Fredoka,sans-serif;font-size:1.02rem}.node-sub{color:var(--accent-green-dark);font-size:.76rem;font-weight:800}.node-desc{color:var(--text-muted);font-size:.78rem;line-height:1.3}.node-footer{justify-content:space-between;align-items:center;margin-top:4px;display:flex}.setting-row{flex-direction:column;gap:6px;font-size:.9rem;font-weight:700;display:flex}.setting-row input[type=range]{accent-color:var(--accent-green);width:100%}.checkbox-row{flex-direction:row;justify-content:space-between;align-items:center}.toast-notification{color:#fef08a;box-shadow:var(--shadow-soft);z-index:40;text-align:center;background:#271d14;border-radius:999px;max-width:90vw;padding:8px 18px;font-family:Fredoka,sans-serif;font-size:.9rem;position:absolute;top:96px;left:50%;transform:translate(-50%)}.tutorial-overlay{pointer-events:auto;z-index:60;background:#121c1073;position:absolute;inset:0}.tutorial-pointer{flex-direction:column;align-items:center;transition:top .25s,left .25s;display:flex;position:absolute}.tutorial-arrow{color:#facc15;text-shadow:0 4px 12px #0000008c;font-size:2.5rem;animation:.75s ease-in-out infinite alternate arrowBounce}@keyframes arrowBounce{0%{transform:translateY(-6px)}to{transform:translateY(6px)}}.tutorial-card{background:var(--bg-cream);border:3.5px solid #f59e0b;border-radius:18px;flex-direction:column;gap:6px;width:min(310px,88vw);padding:14px 16px;display:flex;box-shadow:0 16px 36px #00000073}.tutorial-step-badge{color:#b45309;background:#fef3c7;border-radius:99px;align-self:flex-start;padding:2px 8px;font-size:.72rem;font-weight:800}.tutorial-actions{justify-content:space-between;margin-top:4px;display:flex}.tutorial-highlight{position:relative;z-index:65!important;box-shadow:0 0 0 4px #facc15,0 0 20px #facc15d9!important}.mobile-controls{pointer-events:none;z-index:30;display:none;position:absolute;inset:0}.layout-drag-toggle{color:#fef08a;pointer-events:auto;cursor:pointer;background:#271d14c7;border:1.5px solid #facc1580;border-radius:999px;padding:4px 12px;font-family:Nunito,sans-serif;font-size:.72rem;font-weight:800;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.layout-drag-toggle.editing{color:#271d14;background:#f59e0b;border-color:#fff}.joystick-zone{pointer-events:auto;touch-action:none;width:118px;height:118px;position:absolute;bottom:26px;left:22px}.joystick-base{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:radial-gradient(circle,#fffdf547 0%,#271d1473 100%);border:3px solid #fffdf5a6;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex;box-shadow:0 8px 22px #00000047}.joystick-stick{background:linear-gradient(#fde047 0%,#f59e0b 100%);border:3px solid #fffdf5;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;transition:transform 50ms linear;display:flex;box-shadow:0 4px 12px #00000059}.stick-arrows{color:#3b2d1f;font-size:1.2rem;line-height:1}.mobile-action-btn{color:#fff;pointer-events:auto;touch-action:none;background:linear-gradient(#4ade80 0%,#16a34a 100%);border:4px solid #fffdf5;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:1px;width:78px;height:78px;font-family:Fredoka,sans-serif;display:flex;position:absolute;bottom:38px;right:24px;box-shadow:0 8px 22px #00000059}.mobile-action-btn:active{transform:scale(.93)}.mobile-act-icon{font-size:1.35rem;line-height:1}.mobile-act-key{letter-spacing:.5px;font-size:.78rem;font-weight:700}.draggable-editing{outline-offset:4px;outline:3px dashed #facc15!important}.hidden{display:none!important}@media (width<=820px),(pointer:coarse){#ui-layer{padding:8px}.hud-bar-main{flex-wrap:wrap;justify-content:space-between;gap:6px}.hud-left-group,.hud-actions{gap:5px}.stat-badge{gap:4px;padding:4px 9px}.badge-icon{font-size:1rem}.badge-value{font-size:.92rem}.badge-level-tag{font-size:.68rem}.btn-text-desktop{display:none}.btn-hud,.btn-icon-only{border-radius:10px;flex-shrink:0;width:36px;height:36px;padding:0;font-size:1.05rem}.objective-pill{max-width:96vw;padding:4px 12px;font-size:.76rem}.mobile-controls{display:block}.inventory-bar{margin-bottom:148px;padding:4px 10px}.interaction-prompt{padding:6px 14px;font-size:.84rem;bottom:148px}}