:root{--violet:#6b2fd6;--violet-deep:#1d1240;--gold:#ffc21a;--mint:#3dffb5;--cyan:#5ff7ff;--pink:#ff5fa2;--relic:#c77dff;--cream:#fff4e0;--glass:#1d12409e;--font:"Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif}*{box-sizing:border-box}html,body{background:#0d0b1a;height:100%;margin:0;overflow:hidden}body{font-family:var(--font);color:#fff;-webkit-user-select:none;user-select:none}#app,canvas{width:100vw;height:100vh;display:block}canvas{outline:none}.hidden{display:none!important}.ui-layer{pointer-events:none;z-index:5;transition:opacity .3s;position:fixed;inset:0}.ui-layer.hidden{opacity:0;display:block!important}.hud-tl,.hud-tr,.ability-bar,.hud-bl{transition:opacity .4s}.ui-layer.cine .hud-tl,.ui-layer.cine .hud-tr,.ui-layer.cine .ability-bar,.ui-layer.cine .hud-bl,.ui-layer.cine .prompt{opacity:0}.hud-tl,.hud-tr{flex-direction:column;gap:8px;display:flex;position:absolute;top:18px}.hud-tl{left:20px}.hud-tr{align-items:flex-end;right:20px}.row{align-items:center;gap:10px;display:flex}.pill{background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.04em;text-shadow:0 2px #00000059;font-variant-numeric:tabular-nums;border:1.5px solid #ffffff29;border-radius:999px;align-items:center;gap:10px;padding:7px 16px 7px 10px;font-size:22px;font-weight:700;display:inline-flex;box-shadow:0 6px 18px #00000038}.pill.mini{gap:7px;padding:4px 12px 4px 7px;font-size:15px}.pill.time{gap:8px;padding:7px 16px 7px 12px}.clock{width:20px;height:20px;color:var(--gold)}.core-icon{background:radial-gradient(circle at 35% 35%, #fff6b0, var(--gold) 45%, #ff9d00);border:3px solid var(--mint);width:26px;height:26px;box-shadow:0 0 12px var(--mint);border-radius:6px;transform:rotate(45deg)}.relic-icon{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);width:18px;height:20px;box-shadow:0 0 10px var(--relic);background:linear-gradient(160deg,#e9a46a,#8b4a1c);position:relative}.relic-icon:after{content:"";background:var(--relic);box-shadow:0 0 6px var(--relic);border-radius:50%;position:absolute;inset:6px 5px}.bump{animation:.4s cubic-bezier(.2,1.8,.4,1) bump}@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}to{transform:scale(1)}}.fly-core{background:radial-gradient(circle at 35% 35%, #fff6b0, var(--gold) 45%, #ff9d00);border:3px solid var(--mint);width:22px;height:22px;box-shadow:0 0 16px var(--mint);border-radius:5px;margin:-11px 0 0 -11px;transition:transform .55s cubic-bezier(.5,-.3,.7,1),opacity .55s ease-in;position:absolute;transform:rotate(45deg)}.plus-one{color:var(--gold);text-shadow:0 2px 0 var(--violet-deep), 0 0 12px #ffc21ab3;font-size:26px;font-weight:700;animation:.9s ease-out forwards plusUp;position:absolute;transform:translate(-50%,-50%)}@keyframes plusUp{0%{opacity:0;transform:translate(-50%,-20%)scale(.6)}20%{opacity:1;transform:translate(-50%,-60%)scale(1.15)}to{opacity:0;transform:translate(-50%,-180%)scale(1)}}.hearts{gap:5px;display:flex}.heart{background:radial-gradient(circle at 35% 35%, #c9fffb, var(--cyan) 50%, #1aa7c0);width:18px;height:18px;box-shadow:0 0 8px var(--cyan);border:2.5px solid #fff;border-radius:50%;transition:transform .2s,filter .2s}.heart.off{filter:grayscale()brightness(.45);box-shadow:none;border-color:#777;transform:scale(.75)}.cps{gap:6px;display:flex}.cp{background:var(--glass);color:#ffffff59;border-radius:8px;width:26px;height:26px;padding:3px}.cp svg{width:100%;height:100%}.cp.on{color:var(--mint);box-shadow:0 0 10px #3dffb580}.cp.pop{animation:.5s cubic-bezier(.2,1.8,.4,1) bump}.missions{opacity:.62;flex-direction:column;align-items:flex-end;gap:3px;max-width:300px;margin-top:4px;transition:opacity .4s;display:flex}.missions.active{opacity:1}.missions .m{letter-spacing:.04em;text-align:right;text-shadow:0 1px 4px #000000b3;font-size:13px;font-weight:600}.missions .m.main{color:var(--gold);font-size:15px;font-weight:700}.missions .m .mk{color:var(--cyan);margin-right:6px}.missions .m.done{opacity:.55;text-decoration:line-through;-webkit-text-decoration-color:var(--mint);text-decoration-color:var(--mint)}.missions .m.done .mk{color:var(--mint)}.missions .sub{color:#fff;opacity:.85;font-size:12px;font-weight:600}.missions b{color:var(--cyan)}.ability-bar{gap:12px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.ab{width:56px;height:56px;position:relative}.ab .ring{background:conic-gradient(var(--cyan) var(--p,360deg), #ffffff1f 0);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 23px,#000 24px);mask:radial-gradient(circle,#0000 23px,#000 24px)}.ab .ic{background:var(--glass);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #ffffff26;border-radius:50%;place-items:center;display:grid;position:absolute;inset:5px}.ab .ic svg{width:28px;height:28px}.ab .k{letter-spacing:.08em;white-space:nowrap;opacity:.8;text-shadow:0 1px 3px #000;font-size:10px;font-weight:700;position:absolute;bottom:-15px;left:50%;transform:translate(-50%)}.ab.cooling .ic{filter:grayscale(.8)brightness(.6)}.ab.cooling .ring{background:conic-gradient(#ffb02e var(--p,360deg), #ffffff1f 0)}.ab.pop{animation:.7s cubic-bezier(.2,1.8,.4,1) abPop}@keyframes abPop{0%{transform:scale(0)rotate(-90deg)}to{transform:scale(1)}}.ab.ready-flash .ic{animation:.35s ease-out readyFlash}@keyframes readyFlash{0%{box-shadow:0 0 #5ff7ffe6}to{box-shadow:0 0 0 14px #5ff7ff00}}.hud-bl{opacity:.85;text-shadow:0 1px 3px #0009;flex-wrap:wrap;gap:6px 14px;max-width:420px;font-size:13px;font-weight:600;transition:opacity 1.2s;display:flex;position:absolute;bottom:18px;left:20px}.hud-bl.faded{opacity:0}.key{min-width:20px;color:var(--violet-deep);text-align:center;background:#ffffffeb;border-bottom:3px solid #b9b0d6;border-radius:6px;margin-right:5px;padding:1px 6px;font-size:.9em;font-weight:700;display:inline-block}.toast-wrap{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:86px;left:0;right:0}.toast{background:linear-gradient(90deg, var(--violet), #b03ad8);border:2px solid var(--gold);letter-spacing:.05em;animation:.35s cubic-bezier(.2,1.6,.4,1) toastIn,.4s ease-in forwards toastOut;animation-delay:0s, var(--life,2.2s);border-radius:999px;padding:8px 22px;font-size:19px;font-weight:700;box-shadow:0 8px 26px #0000004d}.toast.mission{border-color:var(--mint);background:linear-gradient(90deg,#0f6b5a,#18a558);font-size:16px}.toast.signal{border-color:var(--cyan);color:var(--cyan);letter-spacing:.12em;background:#06131ad9;font-family:monospace;font-size:15px}@keyframes toastIn{0%{opacity:0;transform:translateY(-20px)scale(.6)}to{opacity:1;transform:none}}@keyframes toastOut{to{opacity:0;transform:translateY(-14px)}}.prompt{border:2px solid var(--cyan);letter-spacing:.06em;opacity:0;background:#1d1240d9;border-radius:14px;padding:8px 18px;font-size:18px;font-weight:700;transition:opacity .15s,transform .15s;position:absolute;bottom:24%;left:50%;transform:translate(-50%)}.prompt.show{opacity:1;transform:translate(-50%)translateY(-6px)}.fade{opacity:0;background:#1d1240;transition:opacity .25s;position:absolute;inset:0}.fade.on{opacity:1}.flash{opacity:0;mix-blend-mode:screen;position:absolute;inset:0}.flash.go{animation:.45s ease-out flash}@keyframes flash{0%{opacity:var(--s,.5)}to{opacity:0}}.vignette{transition:box-shadow .15s;position:absolute;inset:0;box-shadow:inset 0 0 160px #ff285000}.vignette.hurt{box-shadow:inset 0 0 160px #ff28508c}.banner{text-align:center;flex-direction:column;align-items:center;display:none;position:absolute;top:30%;left:0;right:0}.banner.show{animation:.5s ease-in forwards bannerOut;animation-delay:var(--life,2.6s);display:flex}.banner .kente-sweep{background:linear-gradient(90deg,#0000,#1d1240d1 18% 82%,#0000);height:120px;animation:.45s cubic-bezier(.2,1,.3,1) sweep;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.banner .kente-sweep:before,.banner .kente-sweep:after{content:"";background:repeating-linear-gradient(90deg,#f6b40e 0 18px,#138a43 18px 36px,#d7261e 36px 54px,#111 54px 62px);height:6px;position:absolute;left:10%;right:10%}.banner .kente-sweep:before{top:0}.banner .kente-sweep:after{bottom:0}.banner .b-icon{width:64px;height:64px;filter:drop-shadow(0 0 14px var(--cyan));margin-bottom:4px;animation:.6s cubic-bezier(.2,1.8,.4,1) abPop;position:relative}.banner .b-icon svg{width:100%;height:100%}.banner .b-title{letter-spacing:.08em;color:var(--gold);text-shadow:0 4px 0 var(--violet-deep), 0 0 24px #ffc21a80;font-size:44px;font-weight:700;animation:.5s cubic-bezier(.2,1.6,.4,1) titleIn;position:relative}.banner .b-sub{letter-spacing:.12em;color:var(--cyan);margin-top:2px;font-size:19px;font-weight:600;animation:.5s cubic-bezier(.2,1.6,.4,1) .12s both titleIn;position:relative}.banner.checkpoint .b-title{color:var(--mint);font-size:34px}.banner.secret .b-title{color:var(--relic)}@keyframes sweep{0%{transform:translateY(-50%)scaleX(0)}to{transform:translateY(-50%)scaleX(1)}}@keyframes titleIn{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}@keyframes bannerOut{to{opacity:0;transform:translateY(-16px)}}.relic-card{opacity:0;visibility:hidden;pointer-events:auto;background:#0d0b1a8c;place-items:center;transition:opacity .3s,visibility .3s;display:grid;position:absolute;inset:0}.relic-card.show{opacity:1;visibility:visible}.rc-inner{text-align:center;border:2px solid var(--relic);background:linear-gradient(170deg,#3b2a5af5,#1d1240f5);border-radius:22px;width:min(460px,86vw);padding:26px 30px 22px;transition:transform .4s cubic-bezier(.2,1.6,.4,1);transform:scale(.8);box-shadow:0 0 40px #c77dff73,0 20px 50px #00000080}.relic-card.show .rc-inner{transform:none}.rc-tag{letter-spacing:.3em;color:var(--relic);font-size:14px;font-weight:700}.rc-icon{width:96px;height:96px;filter:drop-shadow(0 0 16px var(--relic));margin:14px auto 6px;animation:2.4s ease-in-out infinite float}.rc-icon svg{width:100%;height:100%}.rc-name{color:var(--gold);letter-spacing:.05em;font-size:26px;font-weight:700}.rc-desc{opacity:.9;margin-top:10px;font-size:17px;font-style:italic;line-height:1.45}.rc-next{letter-spacing:.2em;opacity:.6;margin-top:18px;font-size:12px}@keyframes float{50%{transform:translateY(-6px)}}.letterbox>div{background:#07050f;height:0;transition:height .5s cubic-bezier(.3,1,.3,1);position:absolute;left:0;right:0}.letterbox>div:first-child{top:0}.letterbox>div:nth-child(2){bottom:0}.letterbox.on>div{height:11vh}.letterbox .skip{letter-spacing:.2em;opacity:0;font-size:12px;transition:opacity .4s;position:absolute;bottom:3vh;right:24px}.letterbox.on.skippable .skip{opacity:.6}.dialogue{z-index:8;border:2px solid var(--gold);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:auto;cursor:pointer;background:#1d1240e6;border-radius:20px;width:min(640px,90vw);padding:16px 22px 18px;transition:opacity .2s,transform .25s cubic-bezier(.2,1.4,.4,1),visibility .2s;position:fixed;bottom:7vh;left:50%;transform:translate(-50%,30px);box-shadow:0 16px 40px #0006}.dialogue.show{opacity:1;visibility:visible;transform:translate(-50%)}.dialogue[data-speaker=self]{border-color:var(--cyan)}.dialogue[data-speaker=signal]{border-color:var(--cyan);background:#06131aeb}.dialogue[data-speaker=signal] .dlg-text{color:var(--cyan);letter-spacing:.06em;font-family:monospace}.dlg-name{background:var(--gold);color:var(--violet-deep);letter-spacing:.1em;border-radius:999px;padding:2px 12px;font-size:13px;font-weight:700;position:absolute;top:-14px;left:20px}.dialogue[data-speaker=self] .dlg-name,.dialogue[data-speaker=signal] .dlg-name{background:var(--cyan)}.dlg-text{min-height:28px;font-size:20px;line-height:1.4}.dlg-next{opacity:.6;font-size:12px;animation:1s ease-in-out infinite float;position:absolute;bottom:8px;right:16px}.screen{z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto;opacity:0;visibility:hidden;background:radial-gradient(#6b2fd680,#0d0b1adb);flex-direction:column;justify-content:center;align-items:center;transition:opacity .35s,visibility .35s;display:flex;position:fixed;inset:0}.screen.show{opacity:1;visibility:visible}.screen.title{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(#0d0b1a1a,#0d0b1a40 40%,#1d1240d1)}.title-main,.panel{flex-direction:column;align-items:center;display:none}.title-main.active,.panel.active{animation:.35s cubic-bezier(.2,1.4,.4,1) titleIn;display:flex}.panel{background:#1d1240e0;border:2px solid #ffffff26;border-radius:24px;max-width:640px;padding:26px 34px}.panel h2,.panel-box h2{letter-spacing:.12em;color:var(--gold);margin:0 0 16px}.logo{letter-spacing:.06em;background:linear-gradient(180deg, #fff6c8, var(--gold) 55%, #ff8a00);color:#0000;filter:drop-shadow(0 6px 0 var(--violet-deep)) drop-shadow(0 10px 30px #0006);-webkit-background-clip:text;background-clip:text;font-size:clamp(56px,10vw,124px);font-weight:700;line-height:.9}.title .logo{animation:1s cubic-bezier(.2,1.4,.4,1) logoIn}@keyframes logoIn{0%{opacity:0;transform:scale(.6)translateY(-30px)}}.small-logo{font-size:clamp(40px,6vw,70px)}.subtitle{letter-spacing:.3em;color:var(--cyan);text-shadow:0 0 18px #5ff7ff99;margin-top:10px;font-size:clamp(20px,3vw,32px);font-weight:700}.kente-bar{background:repeating-linear-gradient(90deg,#f6b40e 0 18px,#138a43 18px 36px,#d7261e 36px 54px,#111 54px 62px);border-radius:6px;width:min(420px,70vw);height:12px;margin:22px 0 26px}.menu{flex-direction:column;align-items:stretch;gap:12px;min-width:280px;display:flex}.menu.row{flex-direction:row;justify-content:center}.btn{font-family:var(--font);letter-spacing:.08em;cursor:pointer;color:var(--violet-deep);background:linear-gradient(180deg, #fff6c8, var(--gold));border:none;border-bottom:5px solid #c47f00;border-radius:999px;padding:13px 32px;font-size:22px;font-weight:700;transition:transform .1s,filter .1s;box-shadow:0 10px 24px #0000004d}.btn:hover{filter:brightness(1.06);transform:translateY(-2px)scale(1.03)}.btn:active{border-bottom-width:2px;transform:translateY(2px)}.btn.alt{background:linear-gradient(#fff,#d9d2f0);border-bottom-color:#8c80b8}.btn:disabled{opacity:.4;pointer-events:none}.save-summary{letter-spacing:.08em;opacity:.8;min-height:18px;margin-top:14px;font-size:14px}.worlds{flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px;margin-top:22px;display:flex}.world{letter-spacing:.14em;background:#ffffff14;border:1px solid #ffffff24;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700}.world span{margin-right:6px}.world.open{border-color:var(--gold);color:var(--gold);background:#ffc21a33}.world.locked{opacity:.5}.slider{letter-spacing:.08em;grid-template-columns:170px 220px 40px;align-items:center;gap:12px;margin:8px 0;font-weight:700;display:grid}.slider input{accent-color:var(--gold)}.confirm{background:#0d0b1a99;place-items:center;display:none;position:absolute;inset:0}.confirm.show{display:grid}.panel-box{border:2px solid var(--gold);text-align:center;background:#1d1240f2;border-radius:24px;padding:26px 34px}.stats{letter-spacing:.06em;flex-direction:column;gap:8px;min-width:360px;margin-bottom:26px;font-size:24px;font-weight:700;display:flex}.stats>div{opacity:0;animation:titleIn .4s var(--d,0s) cubic-bezier(.2, 1.6, .4, 1) forwards;background:#ffffff0f;border-radius:12px;justify-content:space-between;gap:30px;padding:6px 18px;display:flex}.stats .label{color:var(--gold)}.record{color:var(--mint);margin-left:8px;font-size:16px;font-style:normal;animation:1s infinite pulse;display:inline-block}.small{opacity:.8;text-align:center;max-width:560px;margin-top:18px;font-size:15px;line-height:1.6}.title-controls{grid-template-columns:auto auto;gap:8px 22px;margin:4px 0 8px;font-size:16px;display:grid}.title-controls div:nth-child(odd){text-align:right}.pulse{animation:1.4s ease-in-out infinite pulse}@keyframes pulse{50%{transform:scale(1.05)}}.rank{color:var(--mint);letter-spacing:.1em;margin-top:-12px;margin-bottom:18px;font-size:22px}
