:root{--space:#0a0f2c;--space-2:#151b4a;--space-3:#222a66;--ink:#fff7e6;--ink-soft:#c9cff8;--gold:#ffd23f;--gold-dark:#c98a00;--red:#ff5a4e;--green:#2f9e44;--blue:#3a7bd5;--pink:#ff7eb6;--card:#fff7e6;--card-ink:#1d1a3a;--accent:#ffd23f;--stars:none;--radius:14px;--font:ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:hidden}body{min-height:100dvh;color:var(--ink);background-color:var(--space);background-image:radial-gradient(ellipse 80% 50% at 80% 0%, #c084fc38, transparent 70%), radial-gradient(ellipse 70% 50% at 0% 100%, #4fc3f729, transparent 70%), var(--stars);image-rendering:auto;font-family:var(--font);-webkit-tap-highlight-color:transparent;background-size:auto,auto,512px 512px;margin:0;font-size:19px;font-weight:700;line-height:1.5;overflow-x:hidden}#app{flex-direction:column;min-height:100dvh;display:flex}canvas.pix,.pix{image-rendering:pixelated;image-rendering:crisp-edges;display:block}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:4px solid var(--gold);outline-offset:3px;border-radius:8px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[hidden]{display:none!important}.px{justify-content:inherit;vertical-align:middle;flex-wrap:wrap;gap:.18em .45em;line-height:1;display:inline-flex}.px-word{height:1em;display:block;overflow:visible}.px-main{fill:currentColor}.px-shadow{fill:var(--px-shadow,#0000008c)}.topbar{z-index:20;padding:6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));padding-top:max(6px, env(safe-area-inset-top));-webkit-backdrop-filter:blur(8px);background:#0a0f2ce0;border-bottom:3px solid #ffffff14;justify-content:space-between;align-items:center;gap:8px;display:flex;position:sticky;top:0}.home-link{min-width:0;min-height:44px;color:var(--gold);--px-shadow:#7a4b00;border-radius:12px;align-items:center;gap:8px;padding:2px 10px 2px 2px;text-decoration:none;display:flex}.home-link:hover{background:#ffffff0f}.home-piggy{flex:none;width:48px;height:48px}.home-title{font-size:16px}.top-actions{flex:none;align-items:center;gap:6px;display:flex}.icon-btn{width:44px;height:44px;color:var(--ink);background:#ffffff14;border:0;border-radius:12px;place-items:center;display:grid}.icon-btn:hover{background:#ffffff29}.icon-btn .icon{width:24px;height:auto}.icon-btn.gear{width:36px;height:36px;color:var(--ink-soft);opacity:.7;background:0 0}.icon-btn.gear .icon{width:18px}.settings{position:relative}.settings-panel{background:var(--space-2);border:2px solid var(--space-3);border-radius:12px;width:200px;padding:12px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 10px 30px #00000080}.settings-title{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;font-size:14px}.text-btn{background:0 0;border:2px solid #ffffff40;border-radius:10px;min-height:44px;padding:8px 14px;font-size:16px}.text-btn:hover{background:#ffffff14}.text-btn.danger{color:#ffb3ad;border-color:#ff5a4e99}.screen-host{width:100%;max-width:760px;padding:16px 16px max(48px, env(safe-area-inset-bottom));flex:1;margin:0 auto}body[data-screen=game] .screen-host{max-width:none;padding:0}body[data-screen=game]{overflow:hidden}.screen{animation:.45s cubic-bezier(.2,.9,.3,1.2) screen-in}@keyframes screen-in{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:none}}h1,h2{margin:0;font-weight:900}h1:focus{outline:none}.actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 14px;margin-top:26px;display:flex}.brick-btn{--btn:var(--red);background:var(--btn);color:#fff;letter-spacing:.01em;text-shadow:0 2px #0000004d;min-height:56px;box-shadow:inset 0 -6px 0 #00000038, inset 0 3px 0 #ffffff40, 0 6px 0 color-mix(in srgb, var(--btn) 55%, #000);border:0;border-radius:10px;justify-content:center;align-items:center;gap:10px;margin-top:8px;padding:12px 24px;font-size:20px;font-weight:900;transition:transform 80ms,box-shadow 80ms,filter .15s;display:inline-flex;position:relative}.brick-btn:before{content:"";background:linear-gradient(90deg, transparent 4px, #ffffff59 4px 8px, transparent 8px) 0 0 / 30px 3px repeat-x, linear-gradient(90deg, transparent 4px, var(--btn) 4px 22px, transparent 22px) 0 0 / 30px 100% repeat-x;pointer-events:none;border-radius:3px 3px 0 0;height:9px;position:absolute;top:-8px;left:12px;right:12px}.brick-btn .icon{width:15px;height:auto}.brick-btn:hover{filter:brightness(1.08)}.brick-btn:active:not(:disabled){box-shadow:inset 0 -4px 0 #00000038, inset 0 3px 0 #ffffff40, 0 1px 0 color-mix(in srgb, var(--btn) 55%, #000);transform:translateY(5px)}.brick-btn:disabled{filter:grayscale(.6)brightness(.8);cursor:default}.brick-btn.big{min-height:68px;padding:16px 34px;font-size:24px}.brick-btn.big .icon{width:20px}.back-btn{min-height:44px;color:var(--ink-soft);background:#ffffff14;border:0;border-radius:10px;align-items:center;gap:8px;padding:6px 14px 6px 10px;font-size:16px;display:inline-flex}.back-btn .icon{width:15px}.back-btn:hover{color:var(--ink);background:#ffffff26}.scene{background:radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 60%), var(--stars), linear-gradient(#0d1440, #1a1350);background-size:auto,512px 512px,auto;border:4px solid #ffffff1f;border-radius:18px;height:clamp(250px,62vw,380px);margin:16px 0;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #00000080,0 10px 30px #00000059}.scene-planet{aspect-ratio:1;width:min(62%,256px);animation:6s ease-in-out infinite float;position:absolute;top:8%;left:58%;transform:translate(-50%)}.scene-planet canvas{width:100%;height:100%;image-rendering:pixelated}.ground{background: linear-gradient(90deg, transparent 5px, color-mix(in srgb, var(--accent) 70%, #fff) 5px 15px, transparent 15px) 0 0 / 20px 5px repeat-x,  linear-gradient(90deg, #0000004d 2px, transparent 2px) 0 5px / 40px 13px repeat-x, linear-gradient(90deg, #0000004d 2px, transparent 2px) 20px 18px / 40px 12px repeat-x, linear-gradient(#00000040, #00000040) 0 17px / 100% 2px no-repeat, linear-gradient(transparent 5px, color-mix(in srgb, var(--accent) 80%, #000) 5px);height:30px;position:absolute;bottom:0;left:0;right:0}.scene-crew{align-items:flex-end;gap:2px;display:flex;position:absolute;bottom:26px;left:4%}.scene-hero canvas{width:clamp(88px,24vw,128px);height:auto}.scene-piggy canvas{width:clamp(80px,22vw,128px);height:auto}.scene-villain{animation:2.4s ease-in-out infinite hover-bob;position:absolute;top:6%;right:3%}.scene-villain>canvas{z-index:2;width:clamp(96px,26vw,144px);height:auto;position:relative}.coin-trail{width:0;height:0;position:absolute;top:40%;right:70%}.coin-trail canvas{width:28px;height:28px;right:calc(var(--i) * 22px);top:calc(sin(var(--i) * 51.5662deg) * 18px);animation:1.6s ease-in-out infinite hover-bob;animation-delay:calc(var(--i) * -.2s);position:absolute}.landing-scene .scene-villain{animation:7s ease-in-out infinite fly-off}.landing-scene .scene-crew{left:4%}.landing-scene.happy .scene-crew{left:50%;transform:translate(-50%)}@keyframes float{50%{transform:translate(-50%)translateY(-8px)}}@keyframes hover-bob{50%{transform:translateY(-10px)}}@keyframes fly-off{0%,to{transform:translate(0)rotate(-3deg)}50%{transform:translate(-14px,12px)rotate(4deg)}}.landing-title{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;margin-top:8px;display:flex}.title-top{color:var(--ink);justify-content:center;font-size:clamp(18px,5.2vw,30px)}.title-name{color:var(--gold);--px-shadow:#a33a1f;justify-content:center;font-size:clamp(36px,12vw,72px);animation:2.8s ease-in-out infinite title-bounce}@keyframes title-bounce{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-6px)rotate(1deg)}}.intro{text-align:center;font-size:21px}.intro p{max-width:34ch;margin:6px auto}.yay{text-align:center}.yay-title{color:var(--gold);--px-shadow:#a33a1f;margin-top:12px;font-size:clamp(32px,10vw,60px)}.yay-title .px,.unlocked-banner .px,.message-card h2 .px{justify-content:center}.yay-sub{min-height:1.5em;font-size:22px}.big-piggy-wrap{place-items:center;margin:8px auto;display:grid}.big-piggy{width:min(256px,64vw);height:auto}.big-piggy-wrap.wiggle{animation:.18s linear infinite wiggle}.big-piggy-wrap.crack{animation:.5s ease-out crack}.big-piggy-wrap.burst{animation:.7s cubic-bezier(.2,1.8,.4,1) burst}@keyframes wiggle{25%{transform:rotate(-5deg)translate(-3px)}75%{transform:rotate(5deg)translate(3px)}}@keyframes crack{0%{filter:brightness(2);transform:scale(1.1)}20%{transform:translate(-10px)scale(1.05)}40%{transform:translate(10px)}60%{transform:translate(-6px)}to{filter:none;transform:none}}@keyframes burst{0%{filter:brightness(3);transform:scale(.7)}60%{transform:scale(1.15)}to{filter:none;transform:none}}.unlocked-banner{background:var(--red);color:#fff;--px-shadow:#00000059;border-radius:12px;margin:8px auto 0;padding:12px 18px;font-size:clamp(20px,6vw,32px);display:inline-block;transform:rotate(-2deg);box-shadow:0 6px #8f241c}.yay-crew{justify-content:center;align-items:flex-end;gap:8px;margin:20px 0 0;display:flex}.yay-crew canvas{width:auto;height:clamp(80px,22vw,128px)}.yay-crew canvas:first-child{animation:.8s ease-in-out infinite hover-bob}.message-card{background:var(--card);max-width:560px;color:var(--card-ink);text-align:left;border-radius:20px;margin:24px auto 0;padding:28px 22px 24px;font-size:20px;position:relative;box-shadow:0 8px #c9b98f,0 20px 50px #00000073}.message-card:before{content:"";background:linear-gradient(90deg, transparent 6px, var(--card) 6px 26px, transparent 26px) 0 0 / 40px 100% repeat-x;height:10px;position:absolute;top:-10px;left:22px;right:22px}.message-card h2{color:var(--red);--px-shadow:#ffd23f;margin-bottom:14px;font-size:clamp(22px,7vw,34px)}.message-card p{margin:10px 0}.signature{color:#b4329c;transform-origin:0;font-size:22px;transform:rotate(-2deg);margin-top:18px!important}.rematch{flex-basis:100%;margin:0;font-size:20px}.pop{animation:.45s cubic-bezier(.2,1.8,.4,1) pop}.rise{animation:.6s cubic-bezier(.2,.9,.3,1.1) rise}@keyframes pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}.unlocked-banner.pop{animation:.5s cubic-bezier(.2,1.8,.4,1) pop-tilt}@keyframes pop-tilt{0%{opacity:0;transform:scale(.4)rotate(-12deg)}to{opacity:1;transform:rotate(-2deg)}}@keyframes rise{0%{opacity:0;transform:translateY(30px)}}.shake{animation:.45s shake}@keyframes shake{20%{transform:translate(-10px)}40%{transform:translate(9px)}60%{transform:translate(-6px)}80%{transform:translate(4px)}}.game{width:100%;animation:none;position:relative}.game-host{width:100%;height:calc(100dvh - var(--topbar-h,80px));background:#0b0b22;position:relative;overflow:hidden}body[data-screen=game] .topbar{padding-top:max(2px, env(safe-area-inset-top));padding-bottom:2px}body[data-screen=game] .home-piggy{width:32px;height:32px}body[data-screen=game] .icon-btn{width:38px;height:38px}.game-loading{pointer-events:none;place-items:center;margin:0;display:grid;position:absolute;inset:0}.confetti{pointer-events:none;z-index:60;width:100vw;height:100vh;position:fixed;inset:0}.flying-coin{z-index:70;pointer-events:none;filter:drop-shadow(0 0 10px #ffd23fcc);width:64px;height:64px;position:fixed;top:0;left:0}.toast{left:50%;bottom:max(20px, env(safe-area-inset-bottom));z-index:80;background:var(--card);max-width:calc(100vw - 32px);color:var(--card-ink);text-align:center;opacity:0;pointer-events:none;border-radius:12px;padding:12px 18px;font-size:17px;transition:transform .3s cubic-bezier(.2,1.4,.4,1),opacity .3s;position:fixed;transform:translate(-50%,150%);box-shadow:0 8px 24px #0006}.toast.show{opacity:1;transform:translate(-50%)}.modal-back{z-index:90;background:#050819bf;place-items:center;padding:16px;animation:.2s fade-in;display:grid;position:fixed;inset:0}.modal{background:var(--space-2);border:4px solid var(--space-3);text-align:center;border-radius:18px;width:min(420px,100%);padding:24px 20px;animation:.3s cubic-bezier(.2,1.6,.4,1) pop}.modal h2{font-size:26px}.modal-actions{flex-direction:column;align-items:stretch;gap:14px;margin-top:18px;display:flex}@keyframes fade-in{0%{opacity:0}}.best-line{text-align:center;color:var(--gold);margin:18px 0 0;font-size:18px}.montage{text-align:center;margin:20px auto 0}.montage-stage{cursor:pointer;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 50% 45%,#ffd23f2e,#0000 65%),#ffffff0a;border-radius:20px;width:100%;height:clamp(300px,min(72dvh,118vw),620px);position:relative;overflow:hidden}.montage.done .montage-stage{cursor:default;background:0 0;height:auto;overflow:visible}.montage-stage{container-type:size}.montage.done .montage-stage{container-type:normal}.polaroid{--ar:.701;padding:calc(var(--fw) * .04) calc(var(--fw) * .04) calc(var(--fw) * .16);background:#fffdf6;border-radius:4px;flex-direction:column;margin:0;display:flex;box-shadow:0 14px 34px #00000080}.polaroid.landscape{--ar:1.124}.polaroid-img{background:#2a2346;flex:1;min-height:0;position:relative;overflow:hidden}.polaroid-img img{object-fit:cover;object-position:center 30%;transform-origin:50% 30%;width:100%;height:100%;display:block;position:absolute;inset:0}.polaroid figcaption{font-family:"Marker Felt", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive, var(--font);color:#3a3355;text-align:center;line-height:1.2}.polaroid.slide{--fw:min(92cqw, 88cqh * var(--ar));width:var(--fw);aspect-ratio:var(--ar);transform:translate(-50%, -50%) rotate(var(--tilt));animation:.8s cubic-bezier(.2,1.1,.3,1) both polaroid-in;position:absolute;top:50%;left:50%}.polaroid.slide .polaroid-img img{transform:var(--kb-from);animation:3.6s linear forwards ken-burns}.polaroid.slide figcaption{height:calc(var(--fw) * .16);place-items:center;padding:0 4%;font-size:clamp(15px,3.8vmin,26px);display:grid;position:absolute;bottom:0;left:0;right:0}.polaroid.slide.leaving{animation:.65s ease-in forwards polaroid-out}@keyframes polaroid-in{0%{opacity:0;transform:translate(calc(-50% + var(--enter-x)), 30%) rotate(var(--enter-r)) scale(.7)}}@keyframes polaroid-out{to{opacity:0;transform:translate(calc(-50% - var(--enter-x)), -90%) rotate(calc(var(--enter-r) * -1)) scale(.8)}}@keyframes ken-burns{0%{transform:var(--kb-from)}to{transform:var(--kb-to)}}.montage-dots{justify-content:center;gap:6px;margin-top:12px;display:flex}.montage-dots i{background:#fff3;border-radius:3px;width:10px;height:10px;transition:background .3s}.montage-dots i.on{background:var(--gold)}.montage-tip{color:var(--ink-soft);margin:8px 0 0;font-size:15px}.collage{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:18px 14px;padding:10px 4px;display:grid}.polaroid.mini{--fw:100%;transform:rotate(var(--tilt));padding:6px 6px 22px;animation:.6s cubic-bezier(.2,1.6,.4,1) both collage-in;position:relative}.polaroid.mini .polaroid-img{aspect-ratio:3/4;flex:none}.polaroid.mini.landscape .polaroid-img{aspect-ratio:4/3}.polaroid.mini figcaption{font-size:13px;position:absolute;bottom:2px;left:0;right:0}@media (width>=640px){.collage{grid-template-columns:repeat(4,minmax(0,1fr))}.polaroid.mini{padding:8px 8px 30px}}@keyframes collage-in{0%{opacity:0;transform:rotate(calc(var(--tilt) * 4)) scale(.4)}}@media (width>=640px){body{font-size:20px}.screen-host{padding-top:24px}.message-card{padding:34px 36px 30px}}@media (width<=380px){.brick-btn.big{padding:14px 26px;font-size:22px}}@media (orientation:landscape) and (height<=500px){.landing{grid-template-columns:1fr 1fr;grid-template-areas:"title title""scene intro""scene actions""scene best";align-items:center;column-gap:20px;display:grid}.landing .landing-title{grid-area:title;gap:8px;margin-top:0}.landing .title-top{font-size:18px}.landing .title-name{font-size:34px}.landing .scene{grid-area:scene;height:230px;margin:10px 0 0}.landing .scene-hero canvas{width:80px}.landing .scene-piggy canvas{width:76px}.landing .scene-villain>canvas{width:90px}.landing .intro{grid-area:intro;align-self:end;font-size:17px}.landing .actions{grid-area:actions;margin-top:12px}.landing .best-line{grid-area:best;align-self:start;margin-top:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}