#story{padding:32px clamp(16px,4vw,64px) 95px;min-height:calc(100dvh - 76px);background:radial-gradient(ellipse at 80% 0,#e8dfef,transparent 50%),#f5f5ed}.story-heading{text-align:center;margin:10px auto 30px}.story-heading h1{font-size:clamp(32px,4vw,54px);line-height:1.08;color:#4d6d61}.story-heading p{font-size:16px}.chapter-banner{display:flex;align-items:center;gap:25px;max-width:1050px;margin:auto;background:#e0eadd;border:1px solid #cbdac6;border-radius:30px;padding:25px 35px}.chapter-moon{font-size:90px;color:#bba8d0}.story-reward{margin-left:auto;text-align:center;min-width:120px}.story-reward svg{height:100px;width:100px}.story-reward small{display:block}.story-map{max-width:1120px;margin:30px auto;display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.story-node{text-align:left;background:#fffdf6;border:1px solid #dedfd1;border-radius:24px;padding:20px 16px;box-shadow:0 7px 0 #e3e7db}.story-node:nth-child(even){margin-top:25px}.story-node h3{font-size:19px}.story-node p{font-size:12px;min-height:60px}.story-node b{font-size:12px;color:#577e67}.story-node small{font-size:9px;letter-spacing:1px}.story-node-icon{display:grid;place-items:center;background:#e8e1ee;color:#8c789f;border-radius:50%;width:65px;height:65px;font-size:36px;margin-bottom:20px}.story-node.complete .story-node-icon{background:#fff0bb;color:#b18f43}.story-footnote{text-align:center;max-width:720px;margin:28px auto;font-size:13px}.chapter-complete{text-align:center;background:#fff3cc;padding:20px;border-radius:25px}.story-play-header{display:flex;justify-content:space-between;align-items:center;gap:10px;max-width:1080px;margin:0 auto 15px}.story-play-header h2{font-size:21px}.story-play-header small{font-size:10px;letter-spacing:1px}.story-stage{position:relative;max-width:1080px;margin:auto;border-radius:25px;overflow:hidden;box-shadow:0 12px 40px #48624a20;background:#b5d9cc}.story-stage canvas{width:100%;display:block;aspect-ratio:16/9;touch-action:none}.story-dialog{position:absolute;inset:0;background:#e9f2e4bb;backdrop-filter:blur(7px);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:25px;text-align:center}.story-dialog[hidden]{display:none}.story-dialog p{color:#486356;max-width:500px;font-size:17px;margin:10px 0 22px}.story-live{position:absolute;bottom:10px;left:20px;right:20px;text-align:center;color:#365340;font-size:13px;background:#fff9;border-radius:12px;pointer-events:none}.story-live:empty{display:none}.story-controls{max-width:1080px;display:flex;justify-content:space-between;align-items:center;margin:15px auto;gap:15px}.story-controls button{min-width:66px;min-height:55px;background:#dbe8d5;border:2px solid #c4d7bc;border-radius:18px;font-size:22px;touch-action:none;user-select:none}.story-controls>div{display:flex;gap:10px}.story-controls small{text-align:center;color:#7c897b}.story-controls #story-jump{padding:10px 22px;background:#eadff0;border-color:#d2c1dc;font-size:17px}@media(max-width:760px){.topbar nav button{padding:8px 10px}.story-map{grid-template-columns:repeat(2,1fr)}.story-node:nth-child(even){margin-top:0}.chapter-banner{padding:20px;gap:12px}.chapter-moon{display:none}.story-reward{min-width:80px}.story-reward svg{width:70px;height:70px}.chapter-banner h2{font-size:23px}.story-play-header h2{font-size:16px}.story-play-header button{font-size:11px;padding:9px}.story-controls small{display:none}.story-dialog p{font-size:13px;line-height:1.5;margin:5px 0 10px}.story-dialog h2{font-size:20px;margin:6px}.story-dialog{padding:14px}.story-dialog .eyebrow{font-size:8px}.story-dialog .primary{padding:10px}#story{padding:18px 12px 100px}.story-stage{border-radius:15px}.story-live{font-size:10px}}
body.story-playing{overflow:hidden;overscroll-behavior:none}body.story-playing #story{position:fixed;inset:0;z-index:150;padding:0;min-height:0;background:#20302a;touch-action:none;user-select:none;-webkit-user-select:none}body.story-playing .story-stage{position:absolute;inset:0;max-width:none;margin:0;border-radius:0;box-shadow:none;display:grid;place-items:center;background:transparent}body.story-playing .story-stage canvas{width:auto;aspect-ratio:auto;outline:none}
.story-play-header{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));margin:0;max-width:none;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.story-play-header>*{pointer-events:auto}.story-title{background:#fffc;border-radius:14px;padding:5px 14px;text-align:center;line-height:1.2}.story-title small{display:block;font-size:9px;letter-spacing:1px;color:#7c897b}.story-title b{font-size:15px;color:#4d6d61}.story-hud-button{background:#fffd;border:2px solid #dbe4d4;border-radius:14px;min-width:48px;min-height:42px;padding:6px 12px;font-size:15px;color:#4d6d61;font-weight:700}
body.story-playing .story-controls{position:absolute;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));margin:0;max-width:none;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}body.story-playing .story-controls button{pointer-events:auto;min-width:76px;min-height:76px;border-radius:50%;background:#ffffff70;border:3px solid #ffffffa0;color:#40594d;font-size:26px;backdrop-filter:blur(3px);-webkit-tap-highlight-color:transparent}body.story-playing .story-controls button:active{background:#ffffffc0}body.story-playing .story-controls>div{display:flex;gap:14px}body.story-playing .story-controls #story-jump{min-width:96px;min-height:96px;padding:0;font-size:32px;background:#f3e8f7a0;border-color:#ffffffb0}
@media(pointer:fine){body.story-playing .story-controls{display:none}}
.story-keys{display:block;margin-top:14px;color:#7c897b;font-size:12px}@media(pointer:coarse){.story-keys{display:none}}.story-dialog .secondary{margin-top:10px}
.story-rotate{position:absolute;inset:0;z-index:2;background:#24382fe8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}.story-rotate[hidden]{display:none}.story-rotate span{font-size:64px;animation:story-turn 1.6s ease-in-out infinite}.story-rotate p{color:#fff;font-size:18px;max-width:260px}@keyframes story-turn{50%{transform:rotate(90deg)}}
body.story-playing .story-live{bottom:auto;top:calc(max(10px,env(safe-area-inset-top)) + 54px);left:50%;right:auto;transform:translateX(-50%);padding:5px 14px;font-size:14px;white-space:nowrap}
@media(max-height:500px){.story-title small{display:none}.story-title b{font-size:13px}.story-hud-button{min-height:36px;min-width:42px;padding:4px 10px}body.story-playing .story-controls button{min-width:64px;min-height:64px;font-size:22px}body.story-playing .story-controls #story-jump{min-width:82px;min-height:82px}.story-dialog p{font-size:13px;margin:6px 0 12px}.story-dialog h2{font-size:20px;margin:4px}}
body.story-playing,body.story-playing #story *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body.story-playing .story-controls button{touch-action:none}
.chapter-grid{max-width:1050px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.chapter-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 22px 24px;background:var(--tint);border:1px solid #d6dccf;border-radius:30px;box-shadow:0 8px 0 #00000010;min-height:230px;transition:transform .15s}.chapter-card:not(:disabled):hover{transform:translateY(-3px)}.chapter-card:disabled{opacity:.6;filter:saturate(.5)}.chapter-card-emblem{font-size:58px;line-height:1;color:#8c789f}.chapter-card-number{font-size:12px;font-weight:800;letter-spacing:3px;color:#6f7f6c}.chapter-card h2{font-size:24px;line-height:1.15;color:#4d6d61;margin:0}.chapter-card small{font-size:13px;color:#577e67;font-weight:700}.chapter-card-progress{width:80%;height:8px;border-radius:5px;background:#ffffff90;overflow:hidden;margin-top:4px}.chapter-card-progress span{display:block;height:100%;background:#e3bf63;border-radius:5px}.chapter-card.complete .chapter-card-emblem{color:#b18f43}.story-chapters-back{display:block;margin:0 auto 18px}
@media(max-width:760px){.chapter-grid{grid-template-columns:1fr;gap:14px}.chapter-card{min-height:0;padding:20px 18px;flex-direction:row;flex-wrap:wrap;justify-content:center;text-align:left}.chapter-card-emblem{font-size:44px}.chapter-card>span:nth-child(2),.chapter-card h2{flex:1 1 60%}.chapter-card{display:grid;grid-template-columns:56px 1fr;column-gap:14px;row-gap:4px;text-align:left;justify-items:start}.chapter-card-emblem{grid-row:1/5;align-self:center}.chapter-card-progress{width:100%}}