
:root{--ink:#0a0b16;--paper:#f6f1dd;--violet:#ad76ff;--lime:#e8ff6b;--pink:#ff6caa;--cyan:#6de8ef;--gold:#ffbd78;--muted:#adb0ca;--glass:#1a1b31;--line:#383653;--soft:rgba(255,255,255,.06)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:var(--ink);color:var(--paper)}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}button:disabled{opacity:.4;cursor:default}.app{position:relative;isolation:isolate;height:100dvh;min-height:320px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 20% 18%,#2b2052 0,transparent 32%),radial-gradient(circle at 90% 84%,#2b263e 0,transparent 38%),#0d0f1c}.app:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(90deg,transparent,#000 45%,transparent)}.top{height:69px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px clamp(12px,2vw,27px);border-bottom:1px solid #ffffff20;background:#101121d9}.brand{display:flex;align-items:center;gap:11px;min-width:0;cursor:pointer}.sigil{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:16px;background:var(--lime);color:var(--ink);font-weight:1000;font-size:28px;transform:rotate(-9deg);box-shadow:4px 4px 0 var(--pink);animation:wobble 4s ease-in-out infinite}@keyframes wobble{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-2deg)}}.brand-title{font-weight:1000;text-transform:uppercase;letter-spacing:-.04em;line-height:.92;font-size:clamp(17px,2.35vw,25px);white-space:nowrap}.brand-title em{display:block;font-style:normal;color:var(--lime)}.brand-caption{font-size:10px;color:#a5a4bb;letter-spacing:.2em;text-transform:uppercase;margin-top:6px}.top-right{display:flex;align-items:center;gap:8px}.pill{border:1px solid #ffffff24;border-radius:999px;background:#1d1e32;padding:9px 13px;color:var(--paper);font-size:12px;font-weight:750;white-space:nowrap}.pill b{color:var(--lime)}.iconbtn{width:41px;height:41px;background:#24243c;color:var(--paper);border:1px solid #fff2;border-radius:14px;font-size:21px;display:grid;place-items:center}.main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(235px,275px);gap:clamp(10px,2vw,22px);width:min(1190px,100%);margin:auto;padding:clamp(10px,1.6vh,16px) clamp(12px,2vw,24px);overflow:hidden}.play{display:flex;flex-direction:column;min-height:0;gap:8px}.case-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:43px}.case-head>div{min-width:0}.chapter{font-size:10px;font-weight:850;letter-spacing:.17em;color:var(--cyan);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.case-title{font-weight:900;font-size:clamp(16px,2.4vw,23px);letter-spacing:-.035em;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.case-right{background:var(--lime);color:#242333;padding:7px 11px;border-radius:5px 15px 5px 15px;transform:rotate(3deg);font-weight:950;font-size:13px;white-space:nowrap}.meter{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.meter span{font-size:11px;font-weight:800;color:#bfc1d4;background:#ffffff0e;border:1px solid #fff1;padding:5px 9px;border-radius:10px;white-space:nowrap}.meter b{color:white}.workbench{flex:1;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#181728,#121526);border:1px solid #ffffff24;border-radius:24px;box-shadow:inset 0 0 75px #0005,0 13px 24px #0004}.workbench:before{content:"";pointer-events:none;position:absolute;inset:10px;border:1px solid #ffffff12;border-radius:18px}.board-wrap{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(1.3vh,11px);padding:8px}.board-status{color:#a9b5cd;font-weight:850;letter-spacing:.13em;font-size:10px;flex:none;text-transform:uppercase;display:flex;align-items:center;gap:9px}.led{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink)}.led.ok{background:var(--lime);box-shadow:0 0 10px var(--lime)}.board{--size:5;position:relative;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr));gap:clamp(2px,.6vmin,6px);width:min(100%,calc(100dvh - 332px),510px);max-height:100%;aspect-ratio:1;touch-action:manipulation;user-select:none}.tile{min-width:0;min-height:0;position:relative;display:grid;place-items:center;border-radius:20%;background:radial-gradient(circle at 32% 20%,#3e3d55,#232438 62%,#191a2d);border:1px solid #6b69803d;box-shadow:inset 0 -5px 9px #0505106e,0 2px 1px #050615;transition:background .17s ease,transform .14s ease;padding:0;overflow:hidden}.tile:active:not(:disabled){transform:scale(.93)}.tile.fixed{background:linear-gradient(145deg,#2e2e40,#202235);cursor:default}.tile:void{display:none}.tile.empty{background:#101222;border:1px dashed #ffffff0c;box-shadow:none;cursor:default}.tile.empty:before{content:'×';font-size:16px;color:#ffffff17}.tile svg{position:absolute;inset:5%;width:90%;height:90%;overflow:visible}.tile .plate{position:absolute;inset:13%;border-radius:50%;border:2px solid #9a93a12b}.tile .pipe-base{stroke:#0d0d22;stroke-width:26;stroke-linecap:round;fill:none}.tile .pipe{stroke:#777b9b;stroke-width:13;stroke-linecap:round;fill:none;transition:stroke .2s}.tile.power-c .pipe{stroke:var(--cyan);filter:drop-shadow(0 0 6px #6de8efaa)}.tile.power-p .pipe{stroke:var(--pink);filter:drop-shadow(0 0 6px #ff6caacc)}.tile.crossed{background:#492038;animation:danger .7s infinite alternate}@keyframes danger{to{background:#75223b}}.tile.crossed .pipe{stroke:var(--gold)}.tile.source{background:linear-gradient(135deg,#133e47,#18293b);border-color:#68eef4aa}.tile.source.pink{background:linear-gradient(135deg,#4b1a39,#312038);border-color:#ff72b1aa}.tile.goal{background:#333248;border-color:#6de8efa6}.tile.goal.pink{border-color:#ff6caa9c}.tile.goal .node{color:#6de8ef;border-color:#6de8ef}.tile.goal.pink .node{color:#ff6caa;border-color:#ff6caa}.tile.goal.power-c{background:#16434e}.tile.goal.power-p{background:#63284b}.tile .node{position:absolute;width:52%;height:52%;border-radius:15px;display:grid;place-items:center;font-size:clamp(13px,2vw,24px);font-weight:1000;z-index:3;filter:drop-shadow(1px 2px 1px #0008);pointer-events:none}.tile.source .node{background:var(--cyan);color:#071e25;transform:rotate(-7deg)}.tile.source.pink .node{background:var(--pink);color:#341027}.tile.goal .node{border:2px solid #9c9cad;color:#dee2f0;background:#22253a}.tile.goal.power-c .node{background:var(--cyan);color:#071e25}.tile.goal.power-p .node{background:var(--pink);color:#341027}.tile.valve{border-color:#efd568a0;background:radial-gradient(circle at 40% 18%,#514537,#232438 65%,#17192b)}.tile .valve-arrow{position:absolute;z-index:5;color:var(--lime);font-size:clamp(12px,2vw,19px);line-height:1;filter:drop-shadow(0 1px 2px #000);pointer-events:none}.tile.valve .plate{border-color:#e2e47755}.tile .bolt{position:absolute;bottom:9%;right:9%;border:1px solid #afadca66;border-radius:50%;width:8%;height:8%;background:#18192b}.tile.hint{outline:3px solid var(--lime);outline-offset:-3px;animation:hint .8s infinite alternate}@keyframes hint{to{filter:brightness(1.8)}}.tile.wire.locked:after{content:'▣';position:absolute;right:7%;top:4%;font-size:9px;color:var(--lime)}.board-note{font-size:10px;text-align:center;color:#868ba7;letter-spacing:.03em;flex:none}.dock{height:55px;flex:none;display:flex;gap:8px;align-items:stretch}.btn{border:1px solid #ffffff27;border-radius:13px;color:var(--paper);background:#272840;padding:8px 14px;font-size:12px;font-weight:800;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s,background .15s}.btn:active{transform:translateY(2px)}.btn.mainbtn{flex:1;background:var(--lime);color:#191927;border-color:var(--lime);box-shadow:0 4px 0 #a2b73e}.btn.pink{background:var(--pink);color:#261526;border-color:var(--pink)}.btn.secondary{flex:1}.btn:hover{filter:brightness(1.08)}.side{background:#f5f0dc;color:#171626;border-radius:23px;padding:20px 17px;box-shadow:7px 8px 0 #a87cff50;position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden}.side:before{content:"";height:9px;background:repeating-linear-gradient(90deg,var(--pink) 0 21px,var(--violet) 21px 42px,var(--lime) 42px 63px);position:absolute;top:0;left:0;right:0}.side-tag{font-size:10px;letter-spacing:.15em;font-weight:1000;color:#77748b;margin:4px 0 10px}.stamp{font-size:clamp(26px,2.8vw,36px);font-weight:1000;line-height:.94;letter-spacing:-.065em;text-transform:uppercase;color:#171626;margin:4px 0 10px}.stamp em{font-style:normal;color:#ff3d87}.side-art{flex:0 0 auto;height:clamp(115px,22vh,186px);position:relative;background:#29223d;border-radius:15px;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:5px 0 11px}.scene-svg{width:100%;height:100%}.side-art .tagfloat{position:absolute;top:11px;left:11px;color:#20202a;background:var(--lime);font-size:10px;font-weight:1000;padding:5px 9px;transform:rotate(-6deg)}.caption{font-size:12px;line-height:1.5;color:#39364b;font-weight:720;min-height:46px;margin:0 0 8px}.rule{background:#e8e1d1;border:1px dashed #aca4a3;border-radius:10px;padding:10px 10px;margin-top:auto}.rule h4{font-size:10px;color:#646070;margin:0 0 6px;letter-spacing:.1em;text-transform:uppercase}.rule p{font-size:11px;line-height:1.36;font-weight:650;margin:0;color:#393546}.side-bottom{font-size:10px;color:#878291;margin-top:11px;display:flex;justify-content:space-between;font-weight:850}.side-bottom b{color:#2e283b}.foot{height:26px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(12px,2vw,27px);font-size:10px;letter-spacing:.05em;color:#787a97;border-top:1px solid #ffffff12}.foot b{color:var(--lime)}.overlay{position:absolute;inset:0;z-index:15;display:none;align-items:center;justify-content:center;padding:14px;background:#070814bf;backdrop-filter:blur(7px)}.overlay.show{display:flex}.modal{width:min(450px,100%);max-height:min(87dvh,750px);display:flex;flex-direction:column;background:#f9f2dc;border-radius:25px;color:#201e2b;box-shadow:12px 13px 0 #ff6caa70;overflow:hidden;padding:clamp(16px,3vh,26px)}.modal>h2{font-size:clamp(24px,4vw,38px);text-transform:uppercase;letter-spacing:-.07em;line-height:1;margin:4px 0 8px}.modal .eyebrow{font-size:11px;letter-spacing:.16em;color:#9d418d;font-weight:1000}.modal p{font-size:13px;color:#45404d;line-height:1.45}.modal .stars{font-size:46px;color:#d95f9d;letter-spacing:6px;margin:10px 0}.modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.modal .btn{flex:1;background:#262438;color:white;font-size:13px}.modal .btn.mainbtn{background:var(--lime);color:#262438}.level-list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;overflow-y:auto;padding:8px 2px;max-height:48vh}.level-button{min-width:0;height:35px;border:1px solid #d6cbcb;border-radius:8px;background:#eee7d7;font-weight:900;font-size:11px;color:#272337}.level-button.current{background:var(--pink);border-color:var(--pink)}.level-button.done{background:#cfed80}.level-button:disabled{color:#c7bec0;background:#ebe5df}.toast{position:absolute;z-index:12;left:50%;bottom:90px;transform:translate(-50%,8px);background:#e9ff8c;color:#1c1d24;font-weight:850;font-size:13px;padding:10px 16px;border-radius:12px;max-width:min(90%,390px);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.mini-note{display:none}.footer-tip{display:none}
@media(min-width:1200px){.main{gap:24px}}@media(max-height:690px) and (min-width:640px){.top{height:52px}.sigil{width:35px;height:35px;flex-basis:35px;font-size:23px;border-radius:11px}.brand-caption{display:none}.main{padding-top:6px;padding-bottom:6px}.case-head{min-height:33px}.side{padding-top:14px;padding-bottom:12px}.side-art{height:clamp(92px,19vh,134px)}.side-tag{margin-bottom:3px}.stamp{font-size:28px}.rule{padding:7px}.board{width:min(100%,calc(100dvh - 272px),510px)}.dock{height:45px}.foot{height:17px}}
@media(max-width:760px){.top{height:54px;padding:5px 10px}.sigil{height:36px;width:36px;flex-basis:36px;border-radius:11px;font-size:24px;box-shadow:3px 3px 0 var(--pink)}.brand{gap:9px}.brand-title{font-size:16px}.brand-caption{display:none}.top .pill:nth-child(2){display:none}.pill{font-size:10px;padding:7px 8px}.top-right{gap:5px}.iconbtn{height:35px;width:35px;border-radius:10px;font-size:17px}.main{display:flex;flex-direction:column;gap:0;padding:5px 7px 5px;min-height:0}.play{gap:4px;flex:1}.case-head{min-height:38px;padding:0 4px}.case-title{font-size:16px}.chapter{font-size:9px}.case-right{font-size:11px;padding:5px 7px}.meter{gap:4px}.meter span{font-size:10px;padding:3px 7px}.workbench{border-radius:17px}.workbench:before{inset:6px;border-radius:12px}.board-wrap{gap:5px;padding:5px}.board{width:min(100%,calc(100dvh - 217px),500px);gap:3px}.board-status{font-size:9px}.board-note{font-size:9px}.tile .node{font-size:clamp(14px,4.5vw,23px);border-radius:11px}.dock{height:51px;gap:5px}.btn{font-size:11px;padding:5px 7px;border-radius:11px}.side{display:none}.foot{height:20px;padding:0 9px;font-size:9px}.foot span:first-child{display:none}.footer-tip{display:inline}}
@media(max-height:670px) and (max-width:760px){.top{height:45px}.sigil{height:31px;width:31px;flex-basis:31px;font-size:21px}.brand-title{font-size:14px}.case-head{min-height:33px}.board{width:min(100%,calc(100dvh - 188px),500px)}.board-status{font-size:8px}.dock{height:43px}.foot{height:16px}.meter span{font-size:9px;padding:3px 6px}.btn{font-size:10px}}
@media(max-height:560px) and (max-width:760px){.top{height:40px}.case-head{min-height:28px}.board{width:min(100%,calc(100dvh - 164px),500px)}.meter span{padding:2px 5px}.board-note{display:none}.dock{height:38px}.foot{display:none}}
@media(max-width:380px){.brand-title{font-size:14px}.pill{padding:6px 7px}.case-right{font-size:10px}.btn{font-size:10px}.case-title{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}


/* SDK advertising: optional, rewarded only by explicit action. The button replaces the note,
   preserving the original four-button control bar and touch targets in narrow iframes. */
[hidden]{display:none!important}
.board-note{min-height:18px;display:flex;align-items:center;justify-content:center;overflow:visible}
.repair-ad{border:1px solid #93f2c0;background:#213c39;color:#dcffbd;border-radius:9px;padding:4px 12px;font-size:11px;line-height:1.2;font-weight:850;white-space:nowrap;min-height:24px;max-width:100%;text-overflow:ellipsis;overflow:hidden}
.repair-ad:hover{background:#335851}
.repair-ad:focus-visible{outline:3px solid var(--lime)}
.board-note.reward-visible #boardNote{display:none}
.board-note.reward-visible{min-height:26px}
@media(max-height:560px) and (max-width:760px){.board-note.reward-visible{display:flex;min-height:23px}.repair-ad{font-size:10px;min-height:22px;padding:3px 8px}}

@media(max-width:380px){.foot .footer-tip{display:none}.foot{justify-content:flex-end}}
