*{box-sizing:border-box}:root{--ink:#10243d;--sky:#1b4666;--paper:#fff9e9;--gold:#f4bb3b;--coral:#ef5f55;--mint:#27b881;--muted:#637083}[hidden]{display:none!important}html,body{margin:0;min-height:100%;overflow:hidden}body{font-family:ui-rounded,"Avenir Next",Nunito,system-ui,sans-serif;background:#0d233b;color:var(--ink);user-select:none;-webkit-tap-highlight-color:transparent}button,a{font:inherit}.game-shell{position:relative;width:100vw;height:100dvh;min-height:590px;overflow:hidden;background:radial-gradient(circle at 75% 18%,#397795 0,transparent 28%),linear-gradient(155deg,#183f60,#0d2039 64%,#081627)}.aurora{position:absolute;inset:-20%;background:radial-gradient(ellipse at 30% 30%,rgba(53,200,175,.18),transparent 33%),radial-gradient(ellipse at 70% 65%,rgba(138,105,232,.17),transparent 31%);animation:aurora 9s ease-in-out infinite alternate}.topbar{position:absolute;z-index:10;top:max(9px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid rgba(255,255,255,.15);border-radius:17px;background:rgba(6,22,38,.72);box-shadow:0 12px 30px rgba(0,0,0,.22);backdrop-filter:blur(13px);color:#fff}.back,.icon-btn{width:41px;height:41px;display:grid;place-items:center;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;font-size:28px;cursor:pointer}.icon-btn{font-size:15px}.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto}.brand small,.stat small{font-size:8px;letter-spacing:.15em;color:#83e2d1}.brand b{font-family:Georgia,serif;font-size:16px}.stat{display:flex;min-width:52px;flex-direction:column;align-items:center;padding:3px 7px;border-left:1px solid rgba(255,255,255,.12)}.stat b{font-size:14px}
.mission{position:absolute;z-index:5;top:69px;left:50%;transform:translateX(-50%);width:min(650px,calc(100% - 22px));display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);border-radius:17px;background:rgba(13,36,59,.82);color:#fff;backdrop-filter:blur(10px)}.chapter-badge{width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#f7c851,#d98b1f);box-shadow:inset 0 1px #fff6bd,0 5px 0 #764413;color:#4a2c0d;font-size:10px;font-weight:950}.mission small{font-size:8px;letter-spacing:.17em;color:#79dac8;font-weight:900}.mission h1{margin:1px 0;font-family:Georgia,serif;font-size:19px}.mission p{margin:0;color:#c1d5df;font-size:10px}.progress{grid-column:1/-1;height:4px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#31c99a,#f4c44e);transition:width .35s ease}
.board-card{position:absolute;z-index:3;top:153px;bottom:88px;left:50%;transform:translateX(-50%);width:min(650px,calc(100% - 22px));border:2px solid rgba(255,255,255,.2);border-radius:25px;background:linear-gradient(145deg,rgba(246,251,247,.97),rgba(221,238,231,.94));box-shadow:0 20px 55px rgba(0,0,0,.3);overflow:hidden}.board-card:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(29,84,85,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(29,84,85,.055) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}#tangramBoard{position:relative;width:100%;height:100%;display:block;touch-action:none}.target{fill:#5b6f78;stroke:#324a54;stroke-width:2;stroke-linejoin:round;transition:opacity .2s,filter .2s}.target.full{fill:#a9b9b5;stroke:#718983}.target.soft{fill:#889b98;stroke:#5b716e;stroke-dasharray:5 4}.target.faint{fill:#56706d;stroke:#7f9894;stroke-width:1;opacity:.52}.target.silhouette{fill:#324a50;stroke:#324a50;opacity:.78}.target.hinting{fill:#f4c44e!important;stroke:#fff2a7!important;opacity:1!important;filter:drop-shadow(0 0 8px #f4c44e)}.piece{cursor:grab;filter:url(#pieceShadow);transform-box:fill-box;transform-origin:center;transition:filter .15s}.piece:active{cursor:grabbing}.piece.selected polygon{stroke:#fff6af;stroke-width:5}.piece.placed{filter:drop-shadow(0 2px 2px rgba(0,0,0,.16))}.piece polygon{stroke:rgba(255,255,255,.88);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}.piece-label{font-size:8px;font-weight:900;fill:#173049;text-anchor:middle;pointer-events:none}.dock-line{stroke:#8ba99f;stroke-width:2;stroke-dasharray:5 6}.spark{fill:#f5bd35;animation:spark .55s ease-out forwards}.board-tip{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);white-space:nowrap;padding:5px 10px;border-radius:99px;background:rgba(19,48,61,.78);color:#e7fff8;font-size:9px;font-weight:800;pointer-events:none}
.controls{position:absolute;z-index:8;left:50%;bottom:max(9px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(650px,calc(100% - 22px));display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.controls button{min-height:66px;border:1px solid rgba(255,255,255,.17);border-bottom:4px solid rgba(0,0,0,.35);border-radius:15px;background:linear-gradient(#244d68,#17384f);color:#fff;cursor:pointer;touch-action:manipulation}.controls button:active{transform:translateY(2px);border-bottom-width:2px}.controls button:disabled{opacity:.38}.controls span,.controls b{display:block}.controls span{font-size:24px;line-height:1}.controls b{font-size:9px;margin-top:4px}.controls i{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#f5bd35;color:#3c2608;font-style:normal}.controls .hint{background:linear-gradient(#d8a72d,#a66b16)}
.toast{position:absolute;z-index:30;top:47%;left:50%;transform:translate(-50%,-50%) scale(.75);padding:11px 16px;border-radius:15px;background:#122f42;color:#fff;font-weight:900;box-shadow:0 15px 36px rgba(0,0,0,.3);opacity:0;pointer-events:none}.toast.show{animation:toast 1.1s ease both}.toast.good{background:#167654}.toast.bad{background:#ad3d3a}
.screen{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:max(70px,env(safe-area-inset-top)) 13px max(15px,env(safe-area-inset-bottom));overflow:auto;background:rgba(3,15,27,.72);backdrop-filter:blur(10px)}.panel{width:min(620px,100%);padding:25px;border:1px solid rgba(255,255,255,.55);border-radius:27px;background:linear-gradient(145deg,#fffdf2,#dcf2e9);box-shadow:0 24px 70px rgba(0,0,0,.42);text-align:center}.eyebrow{color:#1c7965;font-size:9px;letter-spacing:.17em;font-weight:950}.panel h2{margin:5px 0 9px;font-family:Georgia,serif;font-size:clamp(30px,8vw,50px);line-height:.98}.panel h2 em{color:#dd554c;font-style:normal}.panel p{max-width:500px;margin:0 auto 13px;color:var(--muted);font-size:13px;line-height:1.45}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.feature-grid span{padding:10px 5px;border:1px solid rgba(24,71,72,.13);border-radius:14px;background:rgba(255,255,255,.56)}.feature-grid i,.feature-grid b,.feature-grid small{display:block}.feature-grid i{font-size:25px;font-style:normal}.feature-grid b{font-size:11px}.feature-grid small{font-size:9px;color:var(--muted)}.chapter-map{display:flex;justify-content:center;gap:6px;margin:13px 0}.chapter-dot{width:46px;height:31px;border:0;border-radius:9px;background:#bac8c2;color:#60716b;font-size:10px;font-weight:900}.chapter-dot.open{background:#1b806a;color:#fff}.chapter-dot.current{outline:3px solid #f2ba38}.primary{width:100%;min-height:50px;border:0;border-bottom:4px solid #0d4e3f;border-radius:15px;background:linear-gradient(#2fba91,#16765c);color:#fff;font-weight:950;letter-spacing:.04em;cursor:pointer}.primary:active{transform:translateY(2px);border-bottom-width:2px}.primary span{float:right;margin-right:15px}.save-note{display:block;margin-top:9px;color:var(--muted)}.level-panel,.small-panel{max-width:430px}.intro-shape{font-size:70px;filter:drop-shadow(0 7px 3px rgba(22,58,53,.16))}.level-panel h2,.small-panel h2{font-size:34px}.secondary{width:100%;padding:11px;border:0;background:transparent;color:#166d5a;font-weight:900;cursor:pointer}.result-icon{display:block;font-size:54px}.result-stars{font-size:40px;letter-spacing:3px;color:#c9b895}.result-stars[data-stars="1"]{background:linear-gradient(90deg,#f4b62c 0 32%,#c9b895 32%);background-clip:text;color:transparent}.result-stars[data-stars="2"]{background:linear-gradient(90deg,#f4b62c 0 65%,#c9b895 65%);background-clip:text;color:transparent}.result-stars[data-stars="3"]{color:#f4b62c}.result-stats{display:flex;justify-content:center;gap:8px;margin:9px 0}.result-stats span{min-width:105px;padding:7px;border:1px solid rgba(29,89,74,.14);border-radius:11px;background:#fff}.result-stats small,.result-stats b{display:block}.result-stats small{font-size:9px;color:var(--muted)}
@keyframes aurora{to{transform:translate3d(3%,-2%,0) scale(1.05)}}@keyframes spark{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.1)}}@keyframes toast{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}15%,75%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:0;transform:translate(-50%,-65%) scale(.95)}}
@media(max-width:560px){.brand{display:none}.topbar{gap:4px}.stat{min-width:45px;padding:3px 3px}.mission{top:64px}.board-card{top:145px}.controls{gap:4px}.controls button{min-height:62px}.controls span{font-size:21px}.panel{padding:18px 14px}.feature-grid{grid-template-columns:1fr}.feature-grid span{display:grid;grid-template-columns:34px 1fr;column-gap:5px;text-align:left;padding:6px 9px}.feature-grid i{grid-row:1/3}.panel h2{font-size:36px}}
@media(max-height:700px){.topbar{top:4px}.mission{top:57px;padding:5px 10px}.chapter-badge{width:42px;height:42px}.mission{grid-template-columns:44px 1fr}.mission p{display:none}.board-card{top:118px;bottom:75px}.controls{bottom:4px}.controls button{min-height:58px}.board-tip{display:none}.hero-panel p{margin-bottom:7px}.feature-grid span{padding:5px}.chapter-map{margin:7px 0}.panel{padding:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}