:root{--ink: #2a1f4a;--paper: #fffaf0;--sky: #2f7bf5;--sun: #ffc21a;--berry: #ef3b3b;--leaf: #3cc34a;--grape: #9b4dff;--tangerine: #ff8a1f;--pig: #f6a8c4;--shade: rgba(42, 31, 74, .28);--display: "Fredoka", "Baloo 2", "Comic Sans MS", system-ui, sans-serif;--body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;overflow:hidden;background:#8fd0ff}body{font-family:var(--body);color:var(--ink);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--sun);outline-offset:3px}kbd{font-family:var(--display);font-weight:600;background:var(--paper);color:var(--ink);border-radius:6px;padding:1px 7px;box-shadow:0 2px 0 var(--shade);font-size:.85em}.app{position:fixed;inset:0}.app canvas{display:block;touch-action:none}.ui{position:absolute;inset:0;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}.ui>*{pointer-events:auto}.btn{--c: #ffffff;--edge: #d9d2c3;--t: var(--ink);font-family:var(--display);font-weight:600;font-size:1.15rem;background:var(--c);color:var(--t);border:0;border-radius:16px;padding:12px 22px;box-shadow:0 6px 0 var(--edge),0 10px 18px var(--shade);transition:transform .08s,box-shadow .08s;display:inline-flex;flex-direction:column;align-items:center;gap:2px}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--edge),0 12px 20px var(--shade)}.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--edge),0 3px 6px var(--shade)}.btn small{font-family:var(--body);font-size:.8rem;opacity:.85;font-weight:800}.btn.big{font-size:1.5rem;padding:14px 28px;width:100%}.btn.huge{font-size:clamp(1.4rem,5vw,2.4rem);padding:18px 34px;letter-spacing:.02em}.btn.small{font-size:.95rem;padding:8px 14px;border-radius:12px}.btn.green{--c: var(--leaf);--edge: #278a33;--t: #fff}.btn.blue{--c: var(--sky);--edge: #1b56b8;--t: #fff}.btn.red{--c: var(--berry);--edge: #a82424;--t: #fff}.btn.orange{--c: var(--tangerine);--edge: #c45f05;--t: #fff}.menu{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(4vh,16px) max(16px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));pointer-events:none}.menu>*{pointer-events:auto}.menu-card{text-align:center;width:min(460px,100%)}.title{font-family:var(--display);font-weight:700;font-size:clamp(4rem,16vw,7.5rem);line-height:.9;margin:0;letter-spacing:-.02em}.title span{display:inline-block;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);animation:hop 2.6s ease-in-out infinite}@keyframes hop{0%,70%,to{transform:translateY(0) rotate(0)}80%{transform:translateY(-14px) rotate(-4deg)}90%{transform:translateY(0) rotate(2deg)}}.subtitle{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,4.5vw,1.8rem);margin:10px 0 0;color:#fff;text-shadow:0 3px 0 var(--ink);letter-spacing:.04em}.menu-bottom{width:min(360px,100%);display:flex;flex-direction:column;align-items:stretch}.menu-buttons{display:flex;flex-direction:column;gap:16px;margin-top:20px;align-items:stretch}.menu-buttons .row{display:flex;gap:12px}.menu-buttons .row .btn{flex:1}.confirm{background:var(--paper);border-radius:14px;padding:12px 16px;margin:0;font-weight:800;box-shadow:0 6px 0 var(--shade)}.credit{margin:18px 0 0;text-align:center;font-size:.8rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);font-weight:800}.hud-top{position:absolute;top:max(12px,env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));display:flex;gap:12px;align-items:flex-start;pointer-events:none}.hud-top>*{pointer-events:auto}.coins{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:18px;padding:6px 16px 6px 8px;font-family:var(--display);font-weight:700;font-size:1.8rem;box-shadow:0 5px 0 var(--shade);transition:transform .12s;font-variant-numeric:tabular-nums}.coins.bump{transform:scale(1.12)}.coin-icon{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff2a8,#ffc21a 45%,#d38b00);box-shadow:inset 0 -3px #b87400,0 0 0 3px #fff2c2}.mission{flex:1;max-width:420px;background:#fffaf0f0;border-radius:18px;padding:10px 14px;box-shadow:0 5px 0 var(--shade);min-width:0}.mission-chapter{font-family:var(--display);font-weight:600;font-size:.8rem;color:var(--grape);text-transform:uppercase;letter-spacing:.06em}.mission-text{font-weight:800;font-size:.98rem;line-height:1.25}.bar{position:relative;margin-top:6px;height:20px;background:#eadff5;border-radius:10px;overflow:hidden}.bar>div{height:100%;background:linear-gradient(90deg,var(--sun),var(--tangerine));border-radius:10px;transition:width .3s}.bar span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:.8rem}.hud-buttons{margin-left:auto;display:flex;gap:10px}.boxie-btn{position:relative;border:0;background:var(--paper);border-radius:18px;padding:4px;box-shadow:0 5px 0 var(--shade)}.boxie-btn .swap{position:absolute;bottom:-6px;right:-6px;background:var(--grape);color:#fff;font-family:var(--display);font-weight:700;border-radius:8px;padding:0 6px;font-size:.8rem}.icon-btn{width:60px;height:60px;border:0;background:var(--paper);border-radius:18px;box-shadow:0 5px 0 var(--shade);display:grid;place-items:center}.pause-icon{width:20px;height:22px;border-left:7px solid var(--ink);border-right:7px solid var(--ink)}.portrait{display:block;object-fit:contain}.portrait.mystery{display:grid;place-items:center;font-family:var(--display);font-size:2rem;font-weight:700;color:#fff;background:#b9b0d6;border-radius:14px}.portrait.robot{display:grid;place-items:center}.robot-head{width:70%;height:58%;background:linear-gradient(#d4dbee,#9fa9c6);border-radius:22%;display:flex;align-items:center;justify-content:center;gap:18%;box-shadow:inset 0 -4px #7f88a6}.robot-head span{width:18%;aspect-ratio:1;border-radius:50%;background:#3df2ff;box-shadow:0 0 8px #00d0ff}.prompt{position:absolute;left:50%;bottom:120px;transform:translate(-50%);background:var(--ink);color:#fff;font-weight:800;padding:10px 18px;border-radius:16px;display:flex;gap:10px;align-items:center;box-shadow:0 5px #00000040;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;animation:pop .2s}@keyframes pop{0%{transform:translate(-50%) scale(.8);opacity:0}}.launch{position:absolute;inset:0;display:grid;place-items:center;background:#2a1f4a40}.launch .btn{animation:pulse .9s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.06)}}.controls-hint{position:absolute;left:max(12px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));background:#fffaf0f0;border-radius:16px;padding:10px 14px;font-weight:800;font-size:.9rem;display:grid;gap:6px;box-shadow:0 5px 0 var(--shade);pointer-events:none}.letterbox:before,.letterbox:after{content:"";position:absolute;left:0;right:0;height:9vh;background:#000}.letterbox:before{top:0}.letterbox:after{bottom:0}.letterbox{position:absolute;inset:0;pointer-events:none}.dialogue{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translate(-50%);width:min(680px,calc(100% - 24px));background:var(--paper);border-radius:22px;padding:14px 18px;display:flex;gap:14px;align-items:center;box-shadow:0 7px 0 var(--shade),0 14px 30px #0003;border:4px solid var(--ink);cursor:pointer;z-index:5;animation:rise .2s}@keyframes rise{0%{transform:translate(-50%,20px);opacity:0}}.dialogue .portrait{flex:none;filter:drop-shadow(0 3px 0 var(--shade))}.dialogue-body{flex:1;min-width:0}.speaker{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--grape)}.dialogue p{margin:2px 0 0;font-size:1.1rem;font-weight:800;line-height:1.35;min-height:2.7em}.next{text-align:right;font-family:var(--display);font-weight:600;color:var(--tangerine);height:1.2em}.toasts{position:absolute;top:96px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 32px)}.toast{background:var(--ink);color:#fff;font-weight:800;padding:10px 18px;border-radius:14px;box-shadow:0 4px #0003;animation:drop .25s;text-align:center;max-width:100%}.toast.good{background:var(--leaf)}.toast.oops{background:var(--tangerine)}@keyframes drop{0%{transform:translateY(-14px);opacity:0}}.overlay{position:absolute;inset:0;background:#2a1f4a8c;display:grid;place-items:center;padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));z-index:10}.panel{background:var(--paper);border-radius:24px;border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);width:min(560px,100%);max-height:calc(100% - 16px);overflow-y:auto;padding:18px 20px 22px}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.panel h2{font-family:var(--display);font-weight:700;font-size:1.8rem;margin:0;text-wrap:balance}.close{border:0;background:var(--berry);color:#fff;width:44px;height:44px;border-radius:14px;font-size:1.8rem;line-height:1;box-shadow:0 4px #a82424}.note{font-size:.9rem;opacity:.8;margin:16px 0 0;font-weight:600}.settings{display:grid;gap:14px}.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;flex-wrap:wrap}.setting input[type=range]{flex:1;max-width:260px;accent-color:var(--grape);height:28px}.seg{display:flex;background:#eadff5;border-radius:12px;padding:4px;gap:4px}.seg button{border:0;background:transparent;border-radius:9px;padding:6px 12px;font-weight:800}.seg button.on{background:var(--grape);color:#fff}.boxie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.boxie-card{border:3px solid transparent;background:#fff;border-radius:18px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;box-shadow:0 4px 0 var(--shade)}.boxie-card strong{font-family:var(--display);font-weight:600;font-size:1.05rem}.boxie-card span{font-size:.78rem;font-weight:700;line-height:1.2;opacity:.8}.boxie-card em{font-style:normal;font-size:.75rem;font-weight:800;background:var(--ink);color:#fff;border-radius:8px;padding:1px 8px}.boxie-card em.go{background:var(--leaf)}.boxie-card.locked .portrait{filter:grayscale(1) brightness(.35) contrast(.8);opacity:.7}.boxie-card.locked{background:#f1ecf8;cursor:default}.boxie-card.current{border-color:var(--grape)}.boxie-card.unlocked:not(.current):not(:disabled):hover{transform:translateY(-2px)}.map{display:grid;gap:10px}.world{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 4px 0 var(--shade)}.world.closed{background:#f1ecf8;opacity:.75}.world.here{outline:3px solid var(--grape)}.world-num{flex:none;width:40px;height:40px;border-radius:12px;background:var(--sky);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.3rem}.world.closed .world-num{background:#a79cc4}.world-info{flex:1;min-width:0;display:flex;flex-direction:column}.world-info strong{font-family:var(--display);font-weight:600;font-size:1.1rem}.world-info span{font-size:.85rem;font-weight:700;opacity:.8}.world em{font-style:normal;font-weight:800;font-size:.85rem;white-space:nowrap}.tbc{margin:16px 0 0;background:var(--sun);border-radius:14px;padding:12px 14px;font-weight:800}.fade{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .35s;pointer-events:none;z-index:20}.fade.on{opacity:1}.touch-zone{position:absolute;inset:0;z-index:0;touch-action:none}.hud-top,.prompt,.toasts,.controls-hint{z-index:2}.stick{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:#ffffff40;border:3px solid rgba(255,255,255,.6);pointer-events:none;z-index:1}.knob{position:absolute;left:30px;top:30px;width:54px;height:54px;border-radius:50%;background:#ffffffe6;box-shadow:0 3px 0 var(--shade)}.touch-buttons{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:auto auto;gap:12px;align-items:end;z-index:3}.tbtn{border:0;border-radius:50%;font-family:var(--display);font-weight:700;color:#fff;touch-action:none}.tbtn.jump{width:92px;height:92px;background:var(--sky);box-shadow:0 6px #1b56b8;font-size:1.15rem;grid-column:2;grid-row:2}.tbtn.action{width:72px;height:72px;background:var(--leaf);box-shadow:0 5px #278a33;grid-column:1;grid-row:2}.tbtn.swap{width:64px;height:64px;background:var(--grape);box-shadow:0 5px #6a2cc4;font-size:.9rem;grid-column:2;grid-row:1;justify-self:center}.tbtn:active{transform:translateY(4px);box-shadow:none}@media(max-width:640px){.coins{font-size:1.3rem;padding:4px 12px 4px 6px}.coin-icon{width:26px;height:26px}.mission{padding:8px 10px}.mission-text{font-size:.85rem}.mission-chapter{display:none}.icon-btn{width:48px;height:48px}.boxie-btn .portrait{width:40px!important;height:40px!important}.dialogue .portrait{width:56px!important;height:56px!important}.dialogue p{font-size:1rem}.prompt{bottom:140px}.toasts{top:120px}}@media(max-height:500px){.title{font-size:3.4rem}.menu-buttons{gap:10px;margin-top:8px}.credit{margin-top:8px}.btn.big{font-size:1.15rem;padding:10px 20px}}@media(prefers-reduced-motion:reduce){.title span,.launch .btn{animation:none}}.lost{position:fixed;inset:0;z-index:50;background:#2a1f4ad9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));text-align:center}.lost p{color:#fff;font-weight:800;font-size:1.2rem;max-width:340px;margin:0 0 6px}.lost .btn{width:min(320px,100%)}