:root{--bg:#070b1d;--panel:#10162f;--panel2:#151d3d;--gold:#f6c85f;--cream:#fff6d8;--coral:#ff786a;--blue:#7786c8;--muted:#9da8c8;--green:#79d6a4;--line:rgba(246,200,95,.25);font-family:"Trebuchet MS","Avenir Next",system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{min-width:320px;min-height:100%;margin:0}body{background:radial-gradient(circle at 72% 0,rgba(85,112,212,.22),transparent 32rem),radial-gradient(circle at 10% 70%,rgba(255,120,106,.08),transparent 28rem),linear-gradient(145deg,#070b1d,#080f28 55%,#050817);color:var(--cream);overflow-x:hidden}button{font:inherit;color:inherit}button:focus-visible,.cell:focus-visible{outline:3px solid #80d9e8;outline-offset:3px}.stars,.stars:before{position:fixed;inset:0;pointer-events:none}.stars{opacity:.65;background-image:radial-gradient(circle at 7% 13%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 18% 34%,var(--gold) 0 1.5px,transparent 2px),radial-gradient(circle at 32% 9%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 48% 18%,var(--blue) 0 1px,transparent 2px),radial-gradient(circle at 81% 27%,var(--gold) 0 1px,transparent 1.5px),radial-gradient(circle at 94% 11%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 89% 61%,var(--blue) 0 1px,transparent 1.5px)}.stars:before{content:"";opacity:.28;background-size:170px 170px;background-image:radial-gradient(#fff .7px,transparent 1px)}.app{position:relative;z-index:1;width:min(1440px,100%);min-height:100dvh;margin:auto;padding:20px clamp(14px,3vw,42px) 118px}header{min-height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:9px 12px 9px 10px;border:1px solid rgba(119,134,200,.2);border-radius:26px;background:linear-gradient(rgba(20,29,61,.92),rgba(9,13,32,.84));box-shadow:0 12px 38px #0005;backdrop-filter:blur(18px)}.brand{width:max-content;display:flex;align-items:center;gap:12px;padding:0;border:0;background:none;text-align:left;cursor:pointer}.brand>i{width:52px;height:52px;display:grid;place-items:center;border:1px solid #f6c85f77;border-radius:50%;background:radial-gradient(circle,#f6c85f25,#10162f 65%);box-shadow:inset 0 0 0 5px #090d20;color:var(--gold);font-size:27px;font-style:normal}.brand span{display:grid}.brand b{font-size:clamp(17px,2vw,25px);letter-spacing:-.03em}.brand small,.dock small,.menu small{color:var(--muted);font-size:11px}.progress{width:min(280px,30vw);display:grid;justify-items:center;gap:9px}.progress>span{width:100%;height:7px;border-radius:9px;background:#050917;overflow:hidden}.progress i{display:block;width:0;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--gold),var(--coral));box-shadow:0 0 12px #f6c85f88;transition:width .3s}.resources{display:flex;justify-content:flex-end;align-items:center;gap:8px}.coin,.resources button{height:46px;border:1px solid rgba(119,134,200,.25);background:#070b1dc0}.coin{min-width:92px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;border-radius:50px;color:var(--gold)}.resources button{width:46px;border-radius:50%;cursor:pointer;font-weight:bold}.resources button.on{color:var(--gold);border-color:#f6c85f88}main{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) 278px;align-items:center;gap:clamp(20px,3vw,42px);margin:24px auto 0}.board-card,aside{border:1px solid var(--line);background:linear-gradient(155deg,#121a37f5,#080d21fa);box-shadow:0 24px 70px #0007,inset 0 1px #ffffff0a}.board-card{padding:clamp(15px,2.3vw,28px);border-radius:32px}.board-title{display:flex;align-items:flex-end;justify-content:space-between;gap:15px}.board-title small,aside>small,.home-card>small,.modal>div>small,.result>small{color:var(--gold);font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:11px}.board-title h1{margin:4px 0 0;font-size:clamp(22px,3vw,34px);letter-spacing:-.04em}.board-title>div:last-child{display:grid;gap:3px;text-align:right}.board-title strong{color:var(--coral);letter-spacing:2px}.board-title b{color:var(--muted);font-variant-numeric:tabular-nums}.message{min-height:39px;display:flex;align-items:center;justify-content:center;margin:16px 0;padding:8px 14px;border:1px solid rgba(119,134,200,.2);border-radius:13px;background:#070b1d99;color:#bdc6df;text-align:center;font-size:13px}.message.good{color:#b9f0cf;border-color:#79d6a477;background:#2b714f2b}.message.bad{color:#ffc2bd;border-color:#ff786a88;background:#a03e412b}.grid{--n:5;width:min(58vh,100%,610px);aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);margin:auto;border:4px solid #435387;border-radius:20px;overflow:hidden;background:#253054;box-shadow:0 18px 40px #0006;touch-action:manipulation}.cell{--c:#7786c8;position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-right:1px solid #070b1d99;border-bottom:1px solid #070b1d99;background:linear-gradient(#090d2038,#090d2038),color-mix(in srgb,var(--c) 42%,var(--panel));cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:filter .14s,transform .14s}.cell:hover{z-index:2;filter:brightness(1.2)}.cell:active{transform:scale(.94)}.cell.t{border-top:3px solid #596ba5}.cell.r{border-right:3px solid #596ba5}.cell.b{border-bottom:3px solid #596ba5}.cell.l{border-left:3px solid #596ba5}.cell:before{content:attr(data-s);position:absolute;top:6px;left:7px;color:color-mix(in srgb,var(--c) 72%,white);font-size:clamp(8px,1.2vw,13px);opacity:.5}.cell span{z-index:1;pointer-events:none;line-height:1}.cell.x span{color:#e3e8f877;font-size:clamp(20px,5vw,38px);transform:rotate(-8deg)}.cell.signal{background:radial-gradient(circle,#f6c85f4d,transparent 50%),color-mix(in srgb,var(--c) 36%,var(--panel))}.cell.signal span{color:var(--cream);font-size:clamp(24px,5vw,46px);text-shadow:0 0 10px #f6c85fdd,0 0 24px #f6c85f88;animation:pop .25s cubic-bezier(.2,.8,.3,1.4)}.cell.fixed span:after{content:"";position:absolute;inset:12%;border:1px solid #f6c85f88;border-radius:50%}.cell.invalid{z-index:3;background:#d5555588;animation:shake .4s}.cell.hinted{z-index:3;box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 22px #f6c85f55;animation:pulse 1.2s infinite}.legend{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;margin-top:15px;color:var(--muted);font-size:12px}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:24px;height:24px;display:grid;place-items:center;border:1px solid #7786c855;border-radius:7px;background:#070b1dbb;color:var(--cream);font-style:normal;font-size:10px;font-weight:bold}.legend i.gold{color:var(--gold);font-size:14px}aside{position:relative;padding:76px 25px 25px;border-radius:28px;text-align:center}.mission-star{position:absolute;top:-36px;left:50%;width:84px;height:84px;display:grid;place-items:center;transform:translateX(-50%);border:1px solid #f6c85f88;border-radius:50%;background:radial-gradient(circle,#f6c85f33,transparent 55%),var(--panel);box-shadow:0 12px 30px #0007,inset 0 0 0 6px var(--bg);color:var(--gold);font-size:31px}.mission-star:after{content:"";position:absolute;width:110%;height:38%;border:1px solid #7786c877;border-radius:50%;transform:rotate(25deg)}aside h2{margin:5px 0 12px;font-size:27px;letter-spacing:-.04em}aside p{color:#b7c0dc;font-size:14px}aside ul{display:grid;gap:8px;margin:0;padding:0;list-style:none;text-align:left}aside li{display:flex;gap:10px;padding:9px 11px;border:1px solid #7786c827;border-radius:11px;background:#070b1d88;font-size:13px;font-weight:bold}aside li i{width:22px;color:var(--gold);text-align:center;font-style:normal}.note{margin-top:14px;padding:11px;border-radius:12px;background:#7786c81a;color:#abb5d4;text-align:left;font-size:12px;line-height:1.45}.found{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:15px;border-top:1px solid #7786c82e;color:var(--muted);font-size:12px}.found b{color:#ffe8a2;font-size:16px}.dock{position:fixed;z-index:12;left:50%;bottom:max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,minmax(130px,190px));gap:10px;width:max-content;max-width:calc(100% - 24px);padding:9px;transform:translateX(-50%);border:1px solid #7786c844;border-radius:25px;background:#060a1ae8;box-shadow:0 18px 46px #0009;backdrop-filter:blur(18px)}.dock button{min-height:66px;display:grid;grid-template-columns:34px auto;grid-template-rows:auto auto;align-items:center;justify-content:center;column-gap:8px;padding:8px 18px;border:1px solid transparent;border-radius:18px;cursor:pointer;box-shadow:inset 0 1px #ffffff33,0 7px 15px #0004;transition:.13s}.dock button:hover{filter:brightness(1.1);transform:translateY(-2px)}.dock button:disabled{opacity:.4;transform:none}.dock i{grid-row:1/span 2;font-style:normal;font-size:28px}.dock b{align-self:end;font-size:17px}.dock small{align-self:start}.dock .blue{background:linear-gradient(#4356a5,#2a376e);border-color:#6d7ed0}.dock .yellow{color:#302108;background:linear-gradient(#ffd365,#e6a42c);border-color:#ffe39c}.dock .yellow small{color:#6b4815}.dock .coral,.hero{background:linear-gradient(#ff8b72,#db554d);border-color:#ffae99}.overlay{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;overflow-y:auto;background:#040713d8;backdrop-filter:blur(18px);transition:.2s}.overlay.show{opacity:1;visibility:visible}.home-card,.modal,.result{position:relative;width:min(620px,100%);max-height:calc(100dvh - 30px);overflow-y:auto;padding:30px clamp(20px,5vw,50px);border:1px solid #f6c85f47;border-radius:36px;background:radial-gradient(circle at 50% 5%,#7786c82b,transparent 34%),linear-gradient(155deg,#121a37fa,#070b1dfc);box-shadow:0 35px 100px #0009;text-align:center}.planet{position:relative;width:150px;height:110px;margin:0 auto 12px}.planet b{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:68px;text-shadow:0 0 20px #f6c85fcc}.planet i,.planet span{position:absolute;inset:22px 3px;border:1px solid #7786c8bb;border-radius:50%;transform:rotate(22deg)}.planet span{transform:rotate(-34deg)}.home-card h2{margin:5px 0 12px;font-size:clamp(46px,10vw,72px);line-height:.86;letter-spacing:-.07em}.home-card>p{color:#b7c0dc}.hero{min-height:62px;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border:1px solid #ffae99;border-radius:18px;color:#fff;cursor:pointer;font-weight:900;box-shadow:inset 0 1px #fff3,0 12px 25px #c7423f3b}.hero:hover{filter:brightness(1.08);transform:translateY(-2px)}.hero>b{font-size:12px;opacity:.8}.menu{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.menu button{min-height:78px;display:grid;grid-template-columns:36px 1fr;align-items:center;padding:12px 14px;border:1px solid #7786c833;border-radius:16px;background:#070b1d99;text-align:left;cursor:pointer}.menu button:hover{border-color:#f6c85f77;background:#151d3ddd}.menu>button>i{color:var(--gold);font-style:normal;font-size:22px;text-align:center}.menu span{display:grid}.home-card>em{display:block;margin-top:18px;color:#7786a8;font-size:11px;font-style:normal}.modal{width:min(580px,100%);text-align:left}.close{position:absolute;z-index:2;top:14px;right:14px;width:38px;height:38px;border:1px solid #7786c844;border-radius:50%;background:#070b1dbb;color:var(--muted);font-size:24px;cursor:pointer}.modal h2,.result h2{margin:5px 0 10px;font-size:clamp(30px,7vw,44px);letter-spacing:-.05em}.modal p,.result p{color:#b6c0dc;line-height:1.6}.level-list{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:22px}.level-list button{aspect-ratio:1;border:1px solid #7786c844;border-radius:13px;background:#070b1daa;cursor:pointer;font-weight:bold}.level-list button.done{color:var(--green)}.level-list button.current{color:var(--gold);border-color:var(--gold)}.level-list button:disabled{opacity:.3;cursor:not-allowed}.collection{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}.collect{display:grid;justify-items:center;gap:7px;padding:14px 7px;border:1px solid #7786c833;border-radius:15px;background:#070b1d88;color:var(--muted);font-size:10px}.collect i{color:#4f5b82;font-size:34px;font-style:normal}.collect.open{color:var(--cream);border-color:#f6c85f66}.collect.open i{color:var(--gold);text-shadow:0 0 18px #f6c85f88}.steps{display:grid;gap:11px;margin-top:20px}.step{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:12px;border:1px solid #7786c82e;border-radius:14px;background:#070b1d88}.step>i{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:#f6c85f1f;color:var(--gold);font-size:22px;font-style:normal}.step p{margin:3px 0 0;font-size:12px}.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid #7786c829}.setting p{margin:3px 0 0;font-size:12px}.toggle{width:62px;height:34px;padding:4px;border:1px solid #7786c84d;border-radius:30px;background:#080d21;cursor:pointer}.toggle:after{content:"";display:block;width:24px;height:24px;border-radius:50%;background:var(--muted);transition:.18s}.toggle.on:after{transform:translateX(27px);background:var(--gold)}.result{width:min(480px,100%)}.reward-star{height:100px;display:grid;place-items:center;color:var(--gold);font-size:82px;text-shadow:0 0 28px #f6c85faa;animation:reward .55s cubic-bezier(.2,.8,.25,1.4)}.reward{display:flex;justify-content:space-between;align-items:center;margin:23px 0;padding:15px 18px;border:1px solid #f6c85f47;border-radius:15px;background:#f6c85f14;color:var(--muted)}.reward b{color:var(--gold);font-size:20px}.result-actions{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}.result-actions>button:first-child{min-height:62px;border:1px solid #7786c844;border-radius:18px;background:#070b1d99;cursor:pointer}.result-actions .hero{justify-content:center}@keyframes pop{from{opacity:0;transform:scale(.3) rotate(-25deg)}}@keyframes shake{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}@keyframes pulse{50%{filter:brightness(1.35)}}@keyframes reward{from{opacity:0;transform:scale(.3) rotate(-35deg)}}@media(max-width:900px){.app{padding-bottom:110px}header{grid-template-columns:1fr auto}.progress{display:none}main{grid-template-columns:1fr;max-width:680px}aside{display:grid;grid-template-columns:1fr 1fr;gap:9px 17px;padding:20px;text-align:left}.mission-star{display:none}aside>small,aside h2,aside>p,.found{grid-column:1/-1}aside h2{margin-bottom:0}.note{margin:0}}@media(max-width:620px){.app{padding:9px 9px 98px}header{min-height:58px;padding:6px;border-radius:20px}.brand>i{width:43px;height:43px;font-size:21px}.brand b{font-size:15px}.brand small,#soundBtn{display:none}.coin{min-width:68px;height:41px;padding:0 9px}.resources button{width:41px;height:41px}main{margin-top:10px;gap:11px}.board-card{padding:12px;border-radius:22px}.board-title h1{font-size:20px}.board-title>div:last-child{font-size:12px}.message{min-height:34px;margin:9px 0;padding:6px;font-size:11px}.grid{width:100%;border-width:3px;border-radius:14px}.cell.t,.cell.r,.cell.b,.cell.l{border-width:2px}.legend{margin-top:9px;gap:8px 13px;font-size:10px}.legend span:last-child{display:none}aside{grid-template-columns:1fr;padding:13px;border-radius:19px}aside>p,aside ul,.note,aside>small{display:none}aside h2,.found{grid-column:auto}.found{margin:0;padding-top:9px}.dock{width:calc(100% - 16px);grid-template-columns:repeat(3,1fr);bottom:max(7px,env(safe-area-inset-bottom));padding:6px;border-radius:20px}.dock button{min-width:0;min-height:59px;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:0;padding:5px;border-radius:15px}.dock i{grid-row:auto;font-size:20px}.dock b{font-size:13px}.dock small{display:none}.overlay{padding:9px}.home-card,.modal,.result{padding:25px 16px 20px;border-radius:25px}.planet{width:115px;height:75px}.planet b{font-size:48px}.planet i,.planet span{inset:15px 3px}.home-card h2{font-size:47px}.home-card>p{font-size:14px}.hero{min-height:56px}.menu button{min-height:68px;grid-template-columns:29px 1fr;padding:9px}.menu b{font-size:12px}.menu small{font-size:9px}.level-list{grid-template-columns:repeat(4,1fr)}.collection{grid-template-columns:repeat(3,1fr)}.result-actions{grid-template-columns:1fr}.result-actions>button:first-child{order:2;min-height:52px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}body.reduce *,body.reduce *:before,body.reduce *:after{animation-duration:.001ms!important;transition-duration:.001ms!important}

/* First-time animated tutorial */
.overlay.tutorial-mode{z-index:60}
.tutorial{display:grid;gap:8px;justify-items:stretch}
.tutorial h2{margin:4px 0 6px}
.tut-visual{min-height:148px;display:grid;place-items:center;margin:8px 0 4px;padding:16px;border:1px solid #7786c82e;border-radius:20px;background:radial-gradient(circle at 50% 30%,#f6c85f18,transparent 55%),#070b1d88;overflow:hidden}
.tut-orbit{position:relative;width:110px;height:90px}
.tut-orbit b{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);font-size:52px;text-shadow:0 0 22px #f6c85fcc;animation:tutGlow 2.2s ease-in-out infinite}
.tut-orbit i,.tut-orbit span{position:absolute;inset:18px -2px;border:1px solid #7786c8bb;border-radius:50%;animation:tutSpin 8s linear infinite}
.tut-orbit span{animation-duration:11s;animation-direction:reverse;border-color:#f6c85f66}
.tut-board{width:min(180px,100%);aspect-ratio:1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.tut-board>i{display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--c,#5466b5) 40%,#10162f);color:transparent;font-style:normal;font-size:18px;opacity:0;transform:scale(.7);animation:tutPop .45s cubic-bezier(.2,.8,.3,1.35) forwards}
.tut-board>i:nth-child(1){--c:#5466b5;animation-delay:.05s}.tut-board>i:nth-child(2){--c:#5466b5;animation-delay:.1s}.tut-board>i:nth-child(3){--c:#5466b5;animation-delay:.15s}.tut-board>i:nth-child(4){--c:#5466b5;animation-delay:.2s}
.tut-board>i:nth-child(5){--c:#5466b5;animation-delay:.12s}.tut-board>i:nth-child(6){--c:#5466b5;animation-delay:.18s}.tut-board>i:nth-child(7){--c:#4f8f91;animation-delay:.24s}.tut-board>i:nth-child(8){--c:#4f8f91;animation-delay:.3s}
.tut-board>i:nth-child(9){--c:#5466b5;animation-delay:.2s}.tut-board>i:nth-child(10){--c:#4f8f91;animation-delay:.26s}.tut-board>i:nth-child(11){--c:#4f8f91;animation-delay:.32s}.tut-board>i:nth-child(12){--c:#4f8f91;animation-delay:.38s}
.tut-board>i:nth-child(13){--c:#9b7545;animation-delay:.28s}.tut-board>i:nth-child(14){--c:#9b7545;animation-delay:.34s}.tut-board>i:nth-child(15){--c:#9b7545;animation-delay:.4s}.tut-board>i:nth-child(16){--c:#9b7545;animation-delay:.46s}
.tut-board>i.on{color:var(--cream);text-shadow:0 0 10px #f6c85fcc}
.tut-board>i.bad{color:#ff9b93;background:#a03e4133}
.tut-board>i.delayed{animation-delay:.75s}
.tut-space>i.bad{animation-name:tutShake;animation-duration:.55s;animation-iteration-count:2;animation-fill-mode:forwards}
.tut-cycle{display:flex;align-items:center;gap:14px}
.tut-cycle>span{width:54px;height:54px;display:grid;place-items:center;border:1px solid #7786c855;border-radius:14px;background:#10162f;font-size:26px;opacity:.35;transform:scale(.92)}
.tut-cycle>span.empty{animation:tutFocus 2.4s ease-in-out infinite}
.tut-cycle>span.x{animation:tutFocus 2.4s ease-in-out .8s infinite;color:#e3e8f8}
.tut-cycle>span.sig{animation:tutFocus 2.4s ease-in-out 1.6s infinite;color:var(--gold);text-shadow:0 0 12px #f6c85faa}
.tut-tools{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.tut-tools>span{padding:12px 18px;border:1px solid #f6c85f55;border-radius:14px;background:#f6c85f14;color:var(--gold);font-weight:700;animation:tutFloat 2s ease-in-out infinite}
.tut-tools>span:last-child{animation-delay:.35s;border-color:#ff786a66;background:#ff786a14;color:#ffc2bd}
.tut-rewind{display:grid;gap:12px;justify-items:center;width:min(260px,100%)}
.tut-hearts{display:flex;gap:8px;font-size:28px;color:var(--coral);letter-spacing:2px}
.tut-hearts>b{font-weight:900;animation:tutHeartHold 3.2s ease-in-out infinite}
.tut-hearts>b.fade{animation-name:tutHeartFade}
.tut-rewind-row{display:flex;align-items:center;gap:10px}
.tut-rewind-row>span{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 10px;border:1px solid #7786c855;border-radius:12px;background:#10162f;font-size:20px;font-weight:700}
.tut-rewind-row .wrong{color:#ff9b93;border-color:#ff786a66;background:#a03e4133;animation:tutWrongOut 3.2s ease-in-out infinite}
.tut-rewind-row .btn{color:var(--gold);border-color:#f6c85f66;background:#f6c85f14;font-size:13px;animation:tutRewindPulse 3.2s ease-in-out infinite}
.tut-rewind-row .ok{color:var(--coral);opacity:0;animation:tutHeartBack 3.2s ease-in-out infinite}
.tut-rewind-cap{margin:0;color:var(--muted);font-size:12px;animation:tutCapFlash 3.2s ease-in-out infinite}
.tut-dots{display:flex;justify-content:center;gap:8px;margin:10px 0 4px}
.tut-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#7786c855;cursor:pointer;transition:transform .2s,background .2s}
.tut-dot.active{background:var(--gold);transform:scale(1.35);box-shadow:0 0 10px #f6c85f88}
.tut-actions{display:grid;grid-template-columns:1fr 1.7fr;gap:10px;margin-top:8px}
.tut-actions .ghost{min-height:56px;border:1px solid #7786c844;border-radius:18px;background:#070b1d99;cursor:pointer;color:var(--muted)}
.tut-actions .hero{justify-content:center;min-height:56px}
.tutorial[data-step] h2,.tutorial[data-step] p,.tutorial[data-step] .tut-visual{animation:tutSlide .42s cubic-bezier(.2,.8,.2,1)}
@keyframes tutGlow{50%{transform:scale(1.08);filter:brightness(1.2)}}
@keyframes tutSpin{to{transform:rotate(385deg)}}
@keyframes tutPop{to{opacity:1;transform:scale(1)}}
@keyframes tutShake{25%,75%{transform:translateX(-3px) scale(1)}50%{transform:translateX(3px) scale(1)}to{opacity:1;transform:scale(1)}}
@keyframes tutFocus{0%,100%{opacity:.35;transform:scale(.92)}20%,40%{opacity:1;transform:scale(1.06)}}
@keyframes tutFloat{50%{transform:translateY(-5px)}}
@keyframes tutSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tutHeartHold{0%,100%{opacity:1}12%,55%{opacity:1}}
@keyframes tutHeartFade{0%,12%{opacity:1;transform:scale(1);color:var(--coral)}22%,55%{opacity:.25;transform:scale(.85);color:#7786a8;filter:grayscale(.6)}70%,100%{opacity:1;transform:scale(1);color:var(--coral)}}
@keyframes tutWrongOut{0%,12%{opacity:1;transform:scale(1)}22%,55%{opacity:.2;transform:scale(.8) rotate(-12deg)}70%,100%{opacity:0;transform:scale(.6)}}
@keyframes tutRewindPulse{0%,18%{transform:scale(1);box-shadow:none}28%,48%{transform:scale(1.06);box-shadow:0 0 14px #f6c85f66}60%,100%{transform:scale(1);box-shadow:none}}
@keyframes tutHeartBack{0%,48%{opacity:0;transform:scale(.5)}60%,100%{opacity:1;transform:scale(1)}}
@keyframes tutCapFlash{0%,48%{opacity:.35}60%,100%{opacity:1;color:var(--green)}}
@media(max-width:620px){.tut-visual{min-height:128px;padding:12px}.tut-actions{grid-template-columns:1fr}.tut-actions .ghost{order:2;min-height:48px}}

/* Win celebration / Tetris clear */
.fx-canvas{position:fixed;inset:0;z-index:70;pointer-events:none;width:100%;height:100%}
.board-clear{animation:boardPulse .55s ease-out}
.grid.winning{box-shadow:0 0 0 3px #f6c85f,0 0 40px #f6c85faa,0 18px 40px #0006}
.grid.win-boom{animation:gridBoom .55s cubic-bezier(.2,.8,.25,1.35)}
.cell.win-row{animation:tetrisFlash .42s ease-out var(--win-delay,0ms) both}
.cell.win-flash{filter:brightness(1.45);box-shadow:inset 0 0 0 2px #f6c85f}
.cell.win-blast{z-index:4;animation:signalBlast .7s cubic-bezier(.15,.9,.3,1.35) both}
.cell.win-blast span{animation:signalPop .7s cubic-bezier(.15,.9,.3,1.35) both;color:#fff6d8;text-shadow:0 0 18px #f6c85f,0 0 36px #ff786a}
.message.good:has(+ .grid.winning),
.board-card.board-clear .message.good{animation:clearBanner .5s ease-out;border-color:#f6c85fcc;background:#f6c85f2a;color:#ffe8a2;font-weight:900;letter-spacing:.08em}
.result.celebrate-card{overflow:hidden}
.result-burst{position:absolute;inset:-20%;pointer-events:none;background:
  radial-gradient(circle at 50% 20%,#f6c85f33,transparent 42%),
  radial-gradient(circle at 20% 80%,#ff786a22,transparent 40%),
  radial-gradient(circle at 80% 70%,#80d9e822,transparent 38%);
  opacity:0}
.win-show .result-burst{animation:burstFade 1.2s ease-out forwards}
.clear-banner{
  display:none;margin:0 auto 8px;width:max-content;padding:6px 16px;border:1px solid #f6c85f88;border-radius:999px;
  background:linear-gradient(90deg,#f6c85f33,#ff786a33);color:var(--gold);font-weight:900;letter-spacing:.28em;font-size:12px
}
.win-show .clear-banner{display:block;animation:clearSlide .55s cubic-bezier(.2,.8,.25,1.2)}
.win-show .reward-star{animation:rewardSpin .85s cubic-bezier(.2,.8,.25,1.4)}
.win-show .celebrate-card{animation:cardPop .5s cubic-bezier(.2,.85,.25,1.25)}
.win-show #resultTitle{animation:titlePunch .55s .08s both cubic-bezier(.2,.85,.25,1.3)}
.reward-pop{animation:rewardCount .6s .2s both cubic-bezier(.2,.85,.25,1.4);display:inline-block}
@keyframes boardPulse{0%{transform:scale(1)}40%{transform:scale(1.015);filter:brightness(1.15)}100%{transform:none}}
@keyframes gridBoom{0%{transform:scale(1)}35%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes tetrisFlash{
  0%{filter:brightness(1);transform:scale(1)}
  35%{filter:brightness(2.1);background:linear-gradient(#fff6d8cc,#f6c85fcc);transform:scale(1.04)}
  100%{filter:brightness(1.25);box-shadow:inset 0 0 18px #f6c85f66}
}
@keyframes signalBlast{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1.08)}}
@keyframes signalPop{0%{transform:scale(.4) rotate(-20deg);opacity:.4}50%{transform:scale(1.45) rotate(8deg)}100%{transform:scale(1.15)}}
@keyframes clearBanner{from{transform:scale(.92);letter-spacing:0}to{transform:none;letter-spacing:.08em}}
@keyframes burstFade{from{opacity:0;transform:scale(.8)}30%{opacity:1}to{opacity:.85;transform:scale(1.05)}}
@keyframes clearSlide{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
@keyframes rewardSpin{from{opacity:0;transform:scale(.2) rotate(-40deg)}60%{transform:scale(1.2) rotate(12deg)}to{opacity:1;transform:none}}
@keyframes cardPop{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
@keyframes titlePunch{from{opacity:0;transform:scale(.8);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes rewardCount{from{transform:scale(.5);opacity:0}60%{transform:scale(1.25)}to{transform:scale(1);opacity:1}}

#lives.heart-hit{animation:heartHit .45s ease-out;color:#ff9b93}
@keyframes heartHit{0%,100%{transform:none}25%{transform:scale(1.25)}50%{transform:translateX(-3px) scale(1.1)}75%{transform:translateX(3px) scale(1.1)}}

.dock .yellow.spent,.dock button.spent{opacity:.45;filter:grayscale(.35)}

/* Sanctuary Rescue Mode */
.mode-sanctuary .board-card{border-color:rgba(121,214,164,.35)}
.mode-sanctuary .mission-star{color:#b9f0cf;border-color:#79d6a488}
.companion-chip{display:flex;align-items:center;gap:6px;height:46px;padding:0 12px;border:1px solid #79d6a455;border-radius:50px;background:#070b1dc0;color:#b9f0cf;font-size:12px}
.companion-chip[hidden]{display:none!important}
.companion-chip i{font-style:normal;font-size:16px}
.menu{grid-template-columns:1fr 1fr}
@media(max-width:620px){.companion-chip b{display:none}}
.sanctuary-card{position:relative;width:min(680px,100%);max-height:calc(100dvh - 30px);overflow-y:auto;padding:28px clamp(16px,4vw,40px);border:1px solid #79d6a447;border-radius:32px;background:radial-gradient(circle at 50% 0,#79d6a422,transparent 40%),linear-gradient(160deg,#121a37fa,#07140ffc);box-shadow:0 35px 100px #0009;text-align:center}
.sanctuary-card>small{color:#79d6a4;font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:11px}
.sanctuary-card h2{margin:6px 0 10px;font-size:clamp(28px,7vw,42px);letter-spacing:-.04em}
.sanctuary-card>p{color:#b6c0dc;line-height:1.55}
.sanctuary-stage{position:relative;height:180px;margin:16px 0;border:1px solid #7786c833;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#1a2240,#0c1a14)}
.sanctuary-stage .hab{position:absolute;inset:0;pointer-events:none;opacity:.25;transition:opacity .5s}
.sanctuary-stage .ground{background:radial-gradient(ellipse at 50% 120%,#3d6b4f88,transparent 55%)}
.sanctuary-stage .trees{background:radial-gradient(circle at 18% 70%,#2f5a4088 0 18px,transparent 19px),radial-gradient(circle at 82% 65%,#2f5a4088 0 22px,transparent 23px)}
.sanctuary-stage .glow{background:radial-gradient(circle at 50% 40%,#f6c85f33,transparent 45%)}
.sanctuary-stage .water{background:radial-gradient(ellipse at 70% 90%,#4f8f9188,transparent 40%)}
.sanctuary-stage .nest{background:radial-gradient(circle at 30% 80%,#9b754566 0 14px,transparent 15px)}
.sanctuary-stage[data-stage="0"] .ground{opacity:.45}
.sanctuary-stage[data-stage="1"] .ground,.sanctuary-stage[data-stage="1"] .trees{opacity:.55}
.sanctuary-stage[data-stage="2"] .ground,.sanctuary-stage[data-stage="2"] .trees,.sanctuary-stage[data-stage="2"] .glow{opacity:.65}
.sanctuary-stage[data-stage="3"] .hab{opacity:.7}
.sanctuary-stage[data-stage="4"] .hab,.sanctuary-stage[data-stage="5"] .hab{opacity:.85}
.sanctuary-critters{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:8px;padding:16px;z-index:2}
.hub-critter{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#070b1daa;border:1px solid #f6c85f55;font-size:22px;animation:hubPop .45s both;animation-delay:calc(var(--i)*60ms)}
@keyframes hubPop{from{opacity:0;transform:translateY(10px) scale(.6)}to{opacity:1;transform:none}}
.egg-teaser{position:absolute;z-index:3;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:#f6c85f22;border:1px solid #f6c85f55;color:#ffe8a2;font-size:11px;white-space:nowrap}
.sanctuary-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 22px;margin:8px 0 14px;color:var(--muted);font-size:12px}
.sanctuary-meta b{color:var(--cream)}
.companion-pick{text-align:left;margin:10px 0}
.companion-pick>small{color:#79d6a4;font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:10px}
.companion-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.companion-btn{display:grid;gap:2px;padding:10px;border:1px solid #7786c833;border-radius:14px;background:#070b1d99;text-align:left;cursor:pointer}
.companion-btn i{font-style:normal;font-size:22px}
.companion-btn b{font-size:12px}
.companion-btn small{color:var(--muted);font-size:10px;line-height:1.3}
.companion-btn.on{border-color:#79d6a4;background:#79d6a418;box-shadow:0 0 0 1px #79d6a455}
.mission-preview{margin:14px 0;padding:14px;border:1px solid #7786c82e;border-radius:16px;background:#070b1d88;text-align:left}
.mission-preview small{color:#f6c85f;font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.mission-preview h3{margin:4px 0 6px;font-size:20px}
.mission-preview p{margin:0;color:#b6c0dc;font-size:13px;line-height:1.5}
.sanctuary-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin-top:8px}
.sanctuary-actions .ghost{min-height:56px;border:1px solid #7786c844;border-radius:18px;background:#070b1d99;cursor:pointer;color:var(--muted)}
.sanctuary-actions .hero{justify-content:center;min-height:56px}
.family-block{margin-top:18px;text-align:left}
.family-block h3{margin:0 0 4px;font-size:18px}
.family-block>p{margin:0 0 8px;color:var(--muted);font-size:12px}
.family-block .collect small{display:block;color:var(--muted);font-size:9px}
.rescue-layer{position:fixed;inset:0;z-index:80;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;background:#04071399;transition:.25s}
.rescue-layer.show{opacity:1;visibility:visible}
.rescue-burst{display:grid;justify-items:center;gap:8px;animation:rescuePop .9s cubic-bezier(.2,.85,.25,1.3)}
.rescue-burst span{font-size:72px;filter:drop-shadow(0 0 24px #f6c85faa);animation:rescueFloat 1s ease-in-out}
.rescue-burst b{color:var(--gold);letter-spacing:.2em;font-size:14px}
@keyframes rescuePop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes rescueFloat{50%{transform:translateY(-18px)}}
.grid.sprite-glow{box-shadow:0 0 0 3px #c9a0ff88,0 0 28px #c9a0ff55,0 18px 40px #0006}
.cell.signal span{font-size:clamp(18px,4.2vw,38px)}
.mode-sanctuary .cell.signal span{font-size:clamp(16px,3.8vw,34px)}
@media(max-width:620px){
  .sanctuary-card{padding:22px 14px;border-radius:24px}
  .sanctuary-stage{height:150px}
  .sanctuary-actions{grid-template-columns:1fr}
  .sanctuary-actions .ghost{order:2;min-height:48px}
  .companion-row{grid-template-columns:1fr 1fr}
}
#sanctuaryBtn{grid-column:1/-1;background:linear-gradient(135deg,#0d1f18,#151d3ddd);border-color:#79d6a455}
#sanctuaryBtn:hover{border-color:#79d6a4;background:#173328}
#eclipseBtn{background:linear-gradient(135deg,#0c1018,#1a1528dd);border-color:#80d9e855}
#eclipseBtn:hover{border-color:#80d9e8;background:#152030}

/* Eclipse Rush — fog hides marks/stars only; tile colors stay readable */
.mode-eclipse .board-card{border-color:rgba(128,217,232,.32);background:linear-gradient(155deg,#0e1428f5,#060a16fa)}
.mode-eclipse .mission-star{color:#80d9e8;border-color:#80d9e888;background:radial-gradient(circle,#80d9e833,transparent 55%),var(--panel)}
.mode-eclipse .grid{border-color:#3a4a6a;box-shadow:0 18px 40px #0008,inset 0 0 28px #80d9e810}
#timer.urgent{color:var(--coral);text-shadow:0 0 10px #ff786a66;animation:tutFloat 1.2s ease-in-out infinite}
.mode-eclipse .cell.fog>span,
.mode-eclipse .cell.fog.signal>span,
.mode-eclipse .cell.fog.x>span{position:relative;z-index:2}
.mode-eclipse .cell.fog-deep>span,
.mode-eclipse .cell.fog-deep.signal>span,
.mode-eclipse .cell.fog-deep.x>span{
  opacity:0!important;
  color:transparent!important;
  text-shadow:none!important;
  filter:blur(2px);
  animation:none!important;
}
.mode-eclipse .cell.fog-breathe>span,
.mode-eclipse .cell.fog-breathe.signal>span,
.mode-eclipse .cell.fog-breathe.x>span{
  animation:fogMarkBreathe 14s ease-in-out var(--fog-phase,0s) infinite!important;
}
.mode-eclipse .cell.fog-arrive>span{
  animation:fogMarkArrive 2.4s ease-in-out!important;
}
body.reduce .mode-eclipse .cell.fog-deep>span,
body.reduce .mode-eclipse .cell.fog-deep.signal>span,
body.reduce .mode-eclipse .cell.fog-deep.x>span{opacity:.12!important;color:inherit!important;filter:none}
body.reduce .mode-eclipse .cell.fog-breathe>span,
body.reduce .mode-eclipse .cell.fog-breathe.signal>span,
body.reduce .mode-eclipse .cell.fog-breathe.x>span{opacity:.4!important;animation:none!important}
@keyframes fogMarkBreathe{
  0%,8%{opacity:0;color:transparent;text-shadow:none;filter:blur(4px);transform:scale(.72);letter-spacing:.15em}
  38%{opacity:0;color:transparent;text-shadow:none;filter:blur(3px);transform:scale(.8)}
  48%,52%{opacity:1;color:inherit;filter:blur(0);transform:scale(1.06);letter-spacing:0}
  62%{opacity:.15;color:transparent;text-shadow:none;filter:blur(2px);transform:scale(.88)}
  78%,100%{opacity:0;color:transparent;text-shadow:none;filter:blur(4px);transform:scale(.72);letter-spacing:.15em}
}
@keyframes fogMarkArrive{
  0%{opacity:1;filter:blur(0);transform:scale(1)}
  100%{opacity:0;color:transparent;text-shadow:none;filter:blur(4px);transform:scale(.75)}
}