:root{--navy:#082c4a;--navy2:#0d4269;--gold:#f8b62d;--cream:#fff4cf;--green:#68b723;--blue:#2584d7;--orange:#ed8b1c;--purple:#8f55c8;--ink:#173047;--panel:#0a3657}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:linear-gradient(#082c4a,#061d32);font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;color:#fff}button{font:inherit}.app{min-height:100dvh;position:relative;overflow:hidden}.screen{display:none;min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% -10%,#1976aa 0,#0a3a5f 35%,#061f35 100%)}.screen.active{display:flex;flex-direction:column}.home{position:relative;justify-content:flex-start;align-items:center;padding:0;background:#3aa7df url('../images/home-storyboard.png') center top/cover no-repeat;overflow:hidden}.home:after{content:"";position:absolute;inset:auto 0 0;height:45%;pointer-events:none;background:linear-gradient(transparent,rgba(8,44,74,.12))}.home-controls{position:relative;z-index:2;width:min(86vw,370px);margin-top:44dvh;display:grid;gap:13px}.cartoon-menu-btn{position:relative;min-height:78px;border:3px solid rgba(255,244,207,.8);border-radius:24px;padding:10px 18px;display:grid;grid-template-columns:68px 1fr;align-items:center;color:#fff;text-align:left;box-shadow:inset 0 3px 0 #ffffff8f,inset 0 -4px 0 #00000025,0 5px 0 #07223a99,0 9px 18px #001b2d66;text-shadow:0 2px 2px #0008;overflow:hidden}.cartoon-menu-btn:before{content:"";position:absolute;inset:4px;border:1.5px solid #ffffff48;border-radius:18px;pointer-events:none}.cartoon-menu-btn:active{transform:translateY(3px);box-shadow:inset 0 3px 0 #ffffff8f,inset 0 -3px 0 #0003,0 2px 0 #07223a99,0 5px 10px #001b2d66}.cartoon-green{background:linear-gradient(#91d22e 0%,#68b918 50%,#4c9511 100%);border-color:#d9ef83}.cartoon-blue{background:linear-gradient(#39a6ed 0%,#1877c9 52%,#115ca7 100%);border-color:#8ed7ff}.cartoon-orange{background:linear-gradient(#ffad2c 0%,#f28b13 52%,#d86609 100%);border-color:#ffd082}.menu-icon{position:relative;z-index:1;width:55px;height:55px;display:grid;place-items:center;justify-self:center;filter:drop-shadow(0 3px 2px #0005)}.play-icon{width:0;height:0;border-top:23px solid transparent;border-bottom:23px solid transparent;border-left:35px solid #fff7df;margin-left:8px;filter:drop-shadow(0 2px 1px #6a5c3d) drop-shadow(0 3px 2px #0004)}.trophy-icon{font-size:44px;line-height:1}.info-icon{border-radius:50%;background:#fff1c9;color:#8a4a0b;border:3px solid #9b5c1c;font:bold 39px Georgia,serif;text-shadow:none;box-shadow:inset 0 2px #fff,0 2px 2px #0004}.menu-copy{display:flex;flex-direction:column;line-height:1.05}.menu-copy strong{font-size:clamp(24px,7vw,31px);font-weight:1000;letter-spacing:-.5px}.menu-copy small{font-size:clamp(14px,4vw,17px);font-weight:850;margin-top:5px}.home-audio-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}.audio-toggle{height:67px;border:2px solid #4786b2;border-radius:18px;background:linear-gradient(#124b78,#072e50);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:inset 0 2px #ffffff35,0 5px 0 #041e34aa,0 7px 12px #00162566;text-shadow:0 2px #0008}.audio-toggle:active{transform:translateY(2px)}.audio-icon{font-size:29px;line-height:1}.audio-toggle strong{display:block;font-size:17px}.audio-toggle small{display:block;color:#8ad632;font-size:15px;font-weight:1000;margin-top:1px}.audio-toggle.off small{color:#ff8d72}@media(max-height:700px){.home-controls{margin-top:40dvh;gap:9px}.cartoon-menu-btn{min-height:66px}.home-audio-row{gap:9px}.audio-toggle{height:58px}}@media(min-width:700px){.home{background-size:auto 100%;background-color:#49b7ed}.home-controls{margin-top:43dvh}}
.screen-head,.game-head{display:flex;align-items:center;gap:12px;max-width:900px;width:100%;margin:0 auto 16px}.screen-head h1{margin:0;font-size:28px}.screen-head small,.game-title small{color:#ffd364;font-weight:900;letter-spacing:1px}.round-btn{width:48px;height:48px;border-radius:50%;border:2px solid #f3c35f;background:#173e5c;color:#fff;font-size:24px;font-weight:900;box-shadow:0 4px 0 #0006}.world-grid{width:min(900px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.world-card{position:relative;border:3px solid #d8b767;border-radius:18px;padding:0;overflow:hidden;background:#163d59;color:#fff;min-width:0;box-shadow:0 6px 14px #0006}.world-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.world-card strong{display:block;padding:7px;font-size:14px}.world-card small{display:block;padding:0 7px 8px;color:#ffd65e}.world-card.selected{outline:4px solid #8ed338;transform:translateY(-2px)}.world-card.locked{filter:grayscale(.8);opacity:.65}.world-card.locked img{filter:blur(4px)}.level-picker{width:min(900px,100%);margin:18px auto 0;background:#082944;border:2px solid #4f86aa;border-radius:22px;padding:14px}.picker-title{display:flex;align-items:center;gap:10px;margin-bottom:12px}.picker-title>span:first-child{font-size:32px}.picker-title strong{font-size:24px}.picker-title small{display:block;color:#8ec4e7}.size-pill{margin-left:auto;background:#f3ad2c;color:#4e2a00;padding:7px 12px;border-radius:12px;font-weight:1000}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.level-card{border:2px solid #d7a943;border-radius:14px;overflow:hidden;background:#173e59;color:#fff;padding:0;position:relative}.level-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.level-card span{display:block;padding:6px 4px;font-weight:900;font-size:13px}.level-card.done:after{content:'✓';position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#66b826;border:2px solid #fff;font-weight:1000}.ranking-hero{width:min(720px,100%);margin:10px auto 14px;background:#fff0c5;color:#54330d;border-radius:20px;padding:16px;display:flex;align-items:center;gap:12px;font-size:30px}.ranking-hero strong{font-size:20px}.ranking-hero span{display:block;font-size:12px}.ranking-list{width:min(720px,100%);margin:0 auto;display:grid;gap:9px}.rank-row{display:grid;grid-template-columns:52px 1fr auto auto;gap:10px;align-items:center;background:#0b3859;border:1px solid #4c7b9a;border-radius:15px;padding:11px 13px}.rank-row.me{border:3px solid #ffc44e;background:#124d73}.rank-pos{font-size:24px;font-weight:1000;color:#ffc94c}.rank-name{font-weight:900}.rank-score{font-size:13px;color:#bde5ff;text-align:right}.game-screen{padding-bottom:max(12px,env(safe-area-inset-bottom))}.game-head{justify-content:space-between;margin-bottom:10px}.game-title{display:flex;flex-direction:column}.game-title strong{font-size:22px}.head-stats{display:flex;align-items:center;gap:10px;background:#062945;padding:7px 10px;border-radius:14px}.head-stats .size-pill{margin:0}.game-main{width:min(740px,100%);margin:0 auto;display:flex;flex-direction:column;gap:10px}.model-row{display:grid;grid-template-columns:1fr 132px;gap:12px;min-height:122px}.success-message{visibility:hidden;opacity:0;transform:scale(.9);background:linear-gradient(#fff8d9,#ffe7a2);color:#5b330b;border:3px solid #efb84b;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px 16px #0006;transition:.25s}.success-message.show{visibility:visible;opacity:1;transform:scale(1)}.success-message strong{font-size:30px;color:#c3472b}.model-card{border:3px solid #f0c36b;border-radius:16px;background:#102f45;padding:5px;color:#fff;overflow:hidden}.model-card small{display:block;font-size:9px;padding:3px}.model-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}.board-shell{background:#2b1b0c;border:5px solid #d4a243;border-radius:22px;padding:6px;box-shadow:0 10px 24px #0008}.board{display:grid;grid-template-columns:repeat(3,1fr);aspect-ratio:1/1;border-radius:13px;overflow:hidden;background:#0c1e2b}.tile{position:relative;border:1px solid #0008;background-size:300% 300%;cursor:pointer;transition:transform .16s,filter .16s}.tile.selected{z-index:2;transform:scale(.91);filter:brightness(1.2);outline:4px solid #ffe261;outline-offset:-4px}.tile.flash{animation:tileFlash .6s}.tile.fixed{cursor:default}.board.solved .tile{animation:pieceSettle .45s ease both}.game-help{text-align:center;background:#072b47;border-radius:14px;padding:10px}.game-help span{display:block;color:#b9d9ef;font-size:12px}.game-toolbar{width:min(740px,100%);margin:12px auto 0;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:9px}.tool-btn{border:0;border-radius:15px;padding:13px 8px;background:#1c6aa6;color:#fff;font-weight:1000;box-shadow:inset 0 2px #ffffff55,0 4px 0 #0006}.tool-btn.primary{background:linear-gradient(#86cc32,#4c9a13)}.tool-btn:disabled{opacity:.45}.fireworks{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden;display:none}.fireworks.on{display:block}.firework-burst{position:absolute;width:4px;height:4px}.spark{position:absolute;width:8px;height:20px;border-radius:8px;background:var(--c);transform-origin:4px 0;animation:spark 1.35s ease-out forwards}.confetti{position:absolute;width:10px;height:16px;background:var(--c);animation:confetti 2.6s linear forwards}.viewer{position:fixed;inset:0;z-index:50;display:none;touch-action:none}.viewer.open{display:block}.viewer-backdrop{position:absolute;inset:0;background:#031421ee}.viewer img{position:absolute;object-fit:contain;border-radius:18px;border:4px solid #f3cd78;box-shadow:0 20px 50px #000a;transform-origin:center center;touch-action:none}.viewer img.anim{transition:left .34s ease,top .34s ease,width .34s ease,height .34s ease,transform .34s ease}.viewer-help{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#061e31d9;border:1px solid #7ca3bd;border-radius:20px;padding:8px 14px;font-size:12px;white-space:nowrap}
@keyframes tileFlash{50%{filter:brightness(1.5)}}@keyframes pieceSettle{0%{transform:scale(.93)}60%{transform:scale(1.04)}100%{transform:scale(1)}}@keyframes spark{to{transform:rotate(var(--a)) translateY(var(--d));opacity:0}}@keyframes confetti{to{transform:translateY(110vh) rotate(620deg);opacity:.5}}
@media(max-width:640px){.world-grid{grid-template-columns:repeat(3,1fr)}.level-grid{grid-template-columns:repeat(5,1fr);gap:6px}.level-card span{font-size:10px}.model-row{grid-template-columns:1fr 108px}.game-toolbar{grid-template-columns:1fr 1fr}.game-toolbar .primary{grid-column:1/-1}.rank-row{grid-template-columns:42px 1fr auto}.rank-score:last-child{display:none}}
.home{background:linear-gradient(#0a5ba244,#052744dd),url('../images/home-hero.jpg') center/cover}.home-logo{font-size:clamp(56px,15vw,92px);font-weight:1000;color:#ffbd2d;text-shadow:0 6px 0 #743600,0 10px 18px #0009;-webkit-text-stroke:2px #fff0a1;text-align:center}.home-logo span{display:block;font-size:18px;letter-spacing:1px;color:#fff4c9;-webkit-text-stroke:0;text-shadow:0 2px 5px #000;background:#8b4a20;border-radius:14px;padding:5px 14px;margin:-4px auto 0;width:max-content}.home-copy{max-width:420px;text-align:center;background:#073d70df;border:2px solid #58a9e8;border-radius:22px;padding:14px;font-weight:900}.big-btn small{display:block;font-size:11px;margin-top:2px}.purple{background:linear-gradient(#9d64df,#6b39aa)}.world-grid{grid-template-columns:repeat(5,1fr)}.pair-wrap{display:grid;grid-template-columns:48px 1fr 48px;gap:10px;align-items:center}.level-grid{grid-template-columns:repeat(2,1fr);gap:16px}.level-card span{font-size:16px;padding:9px}.level-card img{aspect-ratio:1/1}.pair-arrow{height:64px;border-radius:50%;border:2px solid #efc362;background:#1e72b6;color:white;font-size:42px;font-weight:1000}.pair-arrow:disabled{opacity:.3}.pair-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}.pair-dots i{width:10px;height:10px;border-radius:50%;background:#66849a}.pair-dots i.on{background:#ffc234;transform:scale(1.3)}.sound-mini{border:0;background:#195d91;color:white;border-radius:50%;width:34px;height:34px}.fireworks{background:radial-gradient(circle at center,#15365b44,#020b17aa)}.firework-banner{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.4) rotate(-4deg);opacity:0;background:linear-gradient(#ff623c,#d32d25);border:5px solid #ffcb55;border-radius:26px;padding:18px 32px;color:#fff;font-size:clamp(32px,9vw,62px);font-weight:1000;text-shadow:0 4px #7d1b16;box-shadow:0 12px 35px #0009;animation:none;white-space:nowrap}.fireworks.on .firework-banner{animation:bannerPop 5.5s ease both}.firework-banner small{display:block;text-align:center;font-size:18px;color:#fff6b0}.cartoon-star{position:absolute;font-size:38px;animation:starPop 1.4s ease-out forwards;filter:drop-shadow(0 4px 2px #0006)}
@keyframes bannerPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}10%,78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-2deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}@keyframes starPop{0%{transform:scale(.2) rotate(0);opacity:0}25%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1.25) rotate(420deg);opacity:0}}
@media(max-width:640px){.world-grid{grid-template-columns:repeat(5,1fr);overflow-x:auto}.world-card{min-width:105px}.level-grid{grid-template-columns:repeat(2,1fr)}.pair-wrap{grid-template-columns:40px 1fr 40px}.level-card span{font-size:12px}}