:root{color-scheme:dark;--cream:#fff8e8;--gold:#ffcf75;--aqua:#b3f3da;--deep:#102e36}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#173a40}body{font-family:ui-rounded,"Avenir Next",system-ui,-apple-system,sans-serif;color:var(--cream);overscroll-behavior:none}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}button:focus-visible,input:focus-visible{outline:3px solid #ffe7a3;outline-offset:2px}[hidden]{display:none!important}
.app{position:fixed;inset:0;overflow:hidden;background:#36846c}.board{position:absolute;inset:34px 0 0;overflow:hidden}.board canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none}
.hud{position:absolute;z-index:5;top:0;left:max(5px,env(safe-area-inset-left));right:max(5px,env(safe-area-inset-right));height:32px;display:flex;gap:4px;align-items:center;pointer-events:none}.badge{background:#0c2e37e6;border:1px solid #689e927a;border-radius:7px;display:flex;align-items:center;gap:5px;padding:3px 7px;white-space:nowrap;height:29px}.badge span{font-size:10px;color:#cce7d9;font-weight:800}.badge b{font-size:14px;color:#ffda88}.badge.life b{color:#ff9397}.badge.world{margin-left:auto;max-width:32%;overflow:hidden;text-overflow:ellipsis}.badge.world b{color:#a8f1d3;overflow:hidden;text-overflow:ellipsis}.hud .small-btn{pointer-events:auto}.small-btn{width:30px;height:29px;border:1px solid #7aa79c8a;border-radius:8px;background:#10323cdb;color:#fff0d5;font-weight:850;font-size:15px;display:grid;place-items:center}.timebar{position:absolute;z-index:5;left:0;right:0;top:32px;height:3px;background:#173338}.timebar>div{height:100%;width:100%;background:linear-gradient(90deg,#f8a568,#ffe399,#7dd9a2)}
.controls{position:absolute;z-index:9;bottom:max(7px,env(safe-area-inset-bottom));display:flex;gap:7px;pointer-events:none}.controls.left{left:max(8px,env(safe-area-inset-left))}.controls.right{right:max(8px,env(safe-area-inset-right));flex-direction:column}.arrow{pointer-events:auto;border:1px solid #d9f6e8a6;border-bottom:3px solid #143b41;border-radius:13px;display:grid;place-items:center;min-width:clamp(51px,7.4vw,74px);height:clamp(49px,14dvh,67px);background:#0b3947c9;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);color:#fff2cf;font-size:clamp(24px,4vw,32px);font-weight:900;box-shadow:0 2px 8px #0b252b4d;touch-action:none}.arrow.active,.arrow:active{background:#318674db;transform:translateY(2px);border-bottom-width:1px}
#status{position:absolute;z-index:5;top:34px;left:50%;transform:translateX(-50%);padding:3px 11px;border-radius:0 0 10px 10px;background:#133840be;font-size:11px;line-height:1.2;font-weight:850;color:#ffe3a8;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;pointer-events:none}.toast{position:absolute;z-index:12;top:52px;left:50%;transform:translateX(-50%);padding:7px 18px;background:#12373bec;border:1px solid #ffe0a6b0;border-radius:100px;color:#ffe9a8;font-weight:950;font-size:13px;white-space:nowrap;pointer-events:none}.toast[hidden]{display:none}
.overlay{position:fixed;z-index:30;inset:0;display:flex;justify-content:center;align-items:center;padding:max(5px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#071f29b8;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.panel{width:min(95%,590px);max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain;padding:10px 15px 12px;border-radius:17px;border:2px solid #e8c88ca8;background:linear-gradient(160deg,#315e58 0%,#163b44 58%,#112b38 100%);box-shadow:0 9px 34px #081b21ab;text-align:center}.panel.large{width:min(97%,700px)}.panel h1{font-size:clamp(28px,6.6dvh,39px);letter-spacing:1.4px;line-height:1;margin:2px 0;color:#ffe3a0;text-shadow:0 3px #825c3c}.panel h2{font-size:clamp(19px,4.7dvh,26px);color:#ffe2a0;margin:2px 0 5px;line-height:1.1}.panel p{margin:3px auto 9px;font-size:clamp(11px,2.6dvh,14px);line-height:1.4;color:#deefe2;max-width:540px}.panel .hero{font-size:clamp(35px,9dvh,63px);line-height:1.05;display:block;filter:drop-shadow(0 3px 3px #12272f)}.panel .eyebrow{color:#a7ead2;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1.9px}.row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.action{border:1px solid #a6d6c2a3;border-radius:10px;min-height:36px;min-width:115px;padding:7px 12px;background:#275e60;color:#eff7e7;font-weight:900;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:5px}.action.major{border-color:#f9dc99;background:linear-gradient(#ffe4a4,#f3b971);color:#59402c;box-shadow:0 2px #aa704d}.action:disabled{opacity:.38;cursor:default}.action:active:not(:disabled){transform:translateY(1px)}.action.ghost{background:#113741b8}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:9px 0}.tile{border:1px solid #88a99b89;border-radius:10px;background:#10333dd6;color:#fff4dc;min-width:0;min-height:77px;padding:7px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.tile strong{font-size:12px}.tile small{font-size:10px;color:#c2dfcf}.tile .ico{font-size:26px}.tile.selected{outline:2px solid #ffdb95;border-color:#ffda85;background:#3d6c5e}.tile.locked{opacity:.56}.tile.afford{border-color:#dfc879}.tile:disabled{cursor:default}.tile.done{background:#285d55}.stats{font-size:11px;color:#bfe7d4;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0}.worldgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;text-align:left}.worldcard{border:1px solid #82a99b;border-radius:10px;background:#102f39de;padding:9px;display:flex;align-items:center;gap:9px;color:inherit;min-width:0;text-align:left}.worldcard:disabled{opacity:.5}.worldcard .globe{font-size:27px}.worldcard b{font-size:13px}.worldcard small{font-size:10px;color:#b7d8c9}.levels{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin:8px 0 5px}.levelchip{width:39px;height:32px;border:1px solid #7a9e95;border-radius:7px;background:#163c48;color:#e5f5e9;font-weight:900}.levelchip:disabled{opacity:.4}.levelchip.reached{background:#346b5b;color:#ffe0a4;border-color:#f5cd7a}.achievement{display:flex;align-items:center;gap:10px;padding:5px 7px;border-radius:8px;text-align:left;background:#143743d2;border:1px solid #53766e;margin:4px 0}.achievement span{font-size:22px}.achievement b{font-size:12px}.achievement small{font-size:10px;color:#b4d5c8;display:block}.achievement.done{border-color:#d5be78;background:#2b564f}.form-row{margin:7px auto;display:grid;grid-template-columns:100px 1fr 34px;gap:8px;align-items:center;max-width:460px;text-align:left;font-size:13px;font-weight:800}.form-row output{text-align:right;color:#ffdfa6}.form-row input{width:100%;accent-color:#f4c980;min-height:26px}.hint{font-size:10px;color:#b9d6c8;margin-top:5px}.section-title{font-size:13px;font-weight:950;color:#fce4a7;margin:5px 0}.rotate{position:fixed;inset:0;z-index:90;background:radial-gradient(circle at 50% 30%,#3d786d,#10252e 78%);display:none;align-items:center;justify-content:center;text-align:center;padding:24px}.rotate h2{color:#ffe4a6}.rotate .phone{font-size:75px;display:block;animation:turnPhone 2.8s ease-in-out infinite}.rotate p{max-width:400px;line-height:1.5;color:#dfede4}
@keyframes rooCelebrate{0%,100%{transform:translateY(0) rotate(-3deg)}45%{transform:translateY(-7px) rotate(4deg)}}.panel.celebrate .hero{display:inline-block;animation:rooCelebrate .65s ease-in-out infinite}
@keyframes turnPhone{0%,15%,100%{transform:rotate(0)}55%,80%{transform:rotate(80deg)}}
@media(orientation:portrait) and (pointer:coarse){.rotate{display:flex}}
@media(max-height:350px) and (orientation:landscape){.board{top:31px}.hud{height:29px}.badge{height:27px;padding:2px 5px}.badge b{font-size:12px}.badge span{font-size:9px}.timebar{top:29px;height:2px}.controls{bottom:max(3px,env(safe-area-inset-bottom))}.arrow{height:46px;min-width:49px;font-size:24px}.controls.right{gap:3px}.panel{padding:7px 11px}.panel .hero{font-size:33px}.panel h1{font-size:27px}.panel p{margin:2px auto 5px}.tile{min-height:63px;padding:3px}.tile .ico{font-size:20px}.grid{margin:5px 0}.action{min-height:30px;padding:5px 10px}.worldcard{padding:5px}.form-row{margin:3px auto}}
@media(max-width:690px) and (orientation:landscape){.badge.world{display:none}.hud{gap:2px}.badge{padding:2px 5px}.panel{width:96%}.grid{gap:4px}.tile strong{font-size:11px}.levels{margin:4px 0}.controls.left{gap:4px}}
@media(prefers-reduced-motion:reduce){.rotate .phone{animation:none}}

/* Roo Rush 6.0 – scripted, skippable story animations */
.story-layer{position:fixed;inset:0;z-index:60;background:#102c38;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:max(1px,env(safe-area-inset-top)) max(3px,env(safe-area-inset-right)) max(1px,env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left))}
.story-layer canvas{width:100%;height:100%;min-height:0;object-fit:fill;display:block}
.story-caption{position:absolute;bottom:max(6px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(90%,630px);text-align:center;padding:7px 12px 8px;background:#102b39e8;border:1px solid #ffe2a17f;border-radius:14px;box-shadow:0 3px 13px #091b2980;pointer-events:auto}
.story-caption strong{font-size:clamp(12px,2.6vw,17px);color:#ffdda1}.story-caption p{font-size:clamp(11px,2.1vw,14px);margin:2px 0 7px;color:#f2f6e8}.story-actions{display:flex;gap:9px;align-items:center;justify-content:center}.story-actions button{border-radius:9px;min-width:110px;min-height:34px;padding:4px 14px;border:1px solid #c0dfd1;background:#28595d;color:#fff1d9;font-weight:800;font-size:12px}.story-actions button:last-child{background:#ffdd99;color:#563c2f;border-color:#ffeab6}
@media(max-height:360px){.story-caption{padding:4px 8px}.story-caption p{margin:0 0 2px}.story-actions button{min-height:28px}.story-actions{gap:6px}}

/* V7 cinematic voice/text controls: compact and thumb-friendly in landscape */
.story-actions{flex-wrap:wrap;gap:5px}
.story-actions button{font-size:clamp(10px,1.7vw,12px);min-width:0;min-height:35px;padding:5px 10px}
.story-caption:has(#storyText[hidden]){background:#102b39ae;border-color:#ffe2a153}
.story-caption #storyText[hidden]{display:none!important}
.story-caption{max-height:62%;overflow-y:auto}
.narrator-setting{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin:5px auto 8px;font-size:12px}
.narrator-setting select{background:#183b46;color:#fff1d6;border:1px solid #92b9aa;border-radius:7px;min-height:31px;padding:4px 7px;max-width:100%}
.narrator-setting .caption-setting{display:flex;align-items:center;gap:5px;white-space:nowrap}
.narrator-setting input{accent-color:#f4c980;width:17px;height:17px}
.narrator-setting .hint{width:100%;margin:0}
@media(max-height:360px){.story-actions button{min-height:32px;padding:4px 7px}.story-caption{padding:4px 5px}}

/* V7.1: spoken cutscene should never auto-advance, and narration cannot be skipped accidentally. */
.story-actions button:disabled{opacity:.6;cursor:default;filter:saturate(.55)}
.story-actions button:focus-visible{outline:3px solid #ffeb9d;outline-offset:2px}