:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#17142f;--page-deep:#0f0d22;--surface:#26214bd6;--surface-strong:#2b2654;--text:#fbfaff;--text-muted:#c9c5e3;--line:#ffffff1f;--accent:#ffcf5a;--accent-ink:#292038;--color-coral:#ff6f7d;--color-sky:#48bff2;--color-sun:#ffcf5a;--color-mint:#52d5a6;--color-violet:#9b7df5;--space-1:.5rem;--space-2:.75rem;--space-3:1rem;--space-4:1.5rem;--space-5:2rem;--radius-sm:.9rem;--radius-md:1.5rem;--radius-lg:2.25rem;--shadow:0 24px 80px #0705176b;--transition:.18s ease;background:var(--page);color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,ui-rounded,SF Pro Rounded,Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body,#app{min-width:320px;min-height:100%;margin:0}body{background:radial-gradient(circle at 18% 12%, #9b7df533, transparent 30%), radial-gradient(circle at 85% 80%, #48bff226, transparent 34%), linear-gradient(150deg, var(--page), var(--page-deep));min-height:100dvh;overflow-x:hidden}button{font:inherit}.shell{width:min(100%,76rem);min-height:100dvh;padding:max(var(--space-4), env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));margin:0 auto}.home-screen{align-content:center;place-items:center;gap:var(--space-4);display:grid}.hero-card,.play-card,.result-card{border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(155deg,#302a5cf0,#1f1b3ff0)}.hero-card{border-radius:var(--radius-lg);text-align:center;width:min(100%,34rem);padding:clamp(2rem,7vw,4.5rem);position:relative}.home-toolbar{top:var(--space-3);right:var(--space-3);position:absolute}.brand-mark{margin-bottom:var(--space-4);justify-content:center;gap:.45rem;display:flex}.brand-mark span{border-radius:50%;width:.8rem;height:.8rem;box-shadow:0 0 22px}.brand-mark span:first-child{color:var(--color-coral);background:currentColor}.brand-mark span:nth-child(2){color:var(--color-sun);background:currentColor}.brand-mark span:nth-child(3){color:var(--color-mint);background:currentColor}.eyebrow,.level-label,.controls>p{color:var(--color-sun);letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:.76rem;font-weight:800}h1,h2,p{margin-top:0}h1{margin-bottom:var(--space-3);letter-spacing:-.055em;font-size:clamp(2.8rem,10vw,5.2rem);line-height:.95}h2{margin-bottom:var(--space-3);font-size:clamp(2rem,8vw,3.5rem);line-height:1}.hero-copy{max-width:25rem;margin-right:auto;margin-bottom:var(--space-5);color:var(--text-muted);margin-left:auto;font-size:1.06rem;line-height:1.65}.mini-board{margin-bottom:var(--space-5);grid-template-columns:repeat(3,2.5rem);justify-content:center;gap:.4rem;display:grid}.mini-cell{aspect-ratio:1;border:2px solid #ffffff3d;border-radius:.7rem}.mini-cell--coral{background:var(--color-coral)}.mini-cell--sky{background:var(--color-sky)}.mini-cell--sun{background:var(--color-sun)}.mini-cell--mint{background:var(--color-mint)}.mini-cell--violet{background:var(--color-violet)}.primary-button,.secondary-button,.text-button,.icon-button,.level-button,.color-button{cursor:pointer;min-height:3rem;transition:transform var(--transition), filter var(--transition), opacity var(--transition);border:0}.icon-button{border:1px solid var(--line);width:3rem;color:var(--text);background:#ffffff14;border-radius:50%;place-items:center;padding:0;font-size:1.1rem;display:grid}.primary-button{justify-content:center;align-items:center;gap:var(--space-2);min-width:12rem;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:.9rem 1.4rem;font-weight:850;display:inline-flex;box-shadow:0 10px 32px #ffcf5a38}.secondary-button,.text-button{color:var(--text);background:#ffffff14}.secondary-button{border:1px solid var(--line);border-radius:999px;padding:.8rem 1.25rem;font-weight:750}.text-button{border-radius:999px;min-height:2.75rem;padding:.65rem 1rem}button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-2px)}button:active:not(:disabled){transform:translateY(0)}button:focus-visible{outline:3px solid var(--color-sky);outline-offset:3px}.factory-note{color:#ffffff75;letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.76rem}.progress-copy{margin-bottom:var(--space-3);color:var(--text-muted);letter-spacing:.04em;font-size:.86rem;font-weight:750}.home-actions{gap:var(--space-2);justify-items:center;display:grid}.level-screen{flex-direction:column;justify-content:center;display:flex}.screen-header{width:min(100%,62rem);margin:0 auto var(--space-3);justify-content:space-between;align-items:center;display:flex}.level-panel,.settings-card{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(155deg,#302a5cf0,#1f1b3ff0)}.level-panel{width:min(100%,62rem);margin:0 auto;padding:clamp(1.5rem,4vw,3rem)}.level-panel h1,.settings-card h1{margin-bottom:var(--space-2);font-size:clamp(2.3rem,6vw,4.5rem)}.level-intro{margin-bottom:var(--space-4);color:var(--text-muted);line-height:1.5}.level-grid{gap:var(--space-2);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.level-button{min-height:6.3rem;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);text-align:left;background:#fff1;display:grid}.level-button.is-complete{background:linear-gradient(150deg,#52d5a62b,#ffffff0f);border-color:#52d5a68c}.level-button:disabled{cursor:not-allowed;opacity:.38}.level-number{align-self:start;font-size:1.55rem;font-weight:900}.level-status{color:var(--text-muted);align-self:end;font-size:.72rem;font-weight:750}.settings-screen{place-items:center;display:grid}.settings-card{width:min(100%,38rem);padding:clamp(1.5rem,6vw,3.5rem)}.setting-row{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--line);display:flex}.setting-row label,.setting-row>div>label{font-weight:800}.setting-row p{max-width:24rem;color:var(--text-muted);margin:.3rem 0 0;font-size:.86rem;line-height:1.5}.setting-row select{border:1px solid var(--line);border-radius:var(--radius-sm);min-height:3rem;color:var(--text);background:var(--surface-strong);font:inherit;padding:.6rem 2.4rem .6rem .85rem;font-weight:750}.switch{align-items:center;gap:var(--space-2);cursor:pointer;grid-template-columns:3.25rem auto;display:grid;position:relative}.switch input{z-index:1;cursor:pointer;opacity:0;width:100%;height:100%;position:absolute;inset:0}.switch span{width:3.25rem;height:1.8rem;transition:background var(--transition);background:#ffffff29;border-radius:999px;position:relative}.switch span:after{background:var(--text);content:"";width:1.3rem;height:1.3rem;transition:transform var(--transition);border-radius:50%;position:absolute;top:.25rem;left:.25rem}.switch input:checked+span{background:var(--color-mint)}.switch input:checked+span:after{transform:translate(1.45rem)}.switch input:focus-visible+span{outline:3px solid var(--color-sky);outline-offset:3px}.switch b{min-width:2rem;color:var(--text-muted);font-size:.8rem}.settings-card>.primary-button{width:100%;margin-top:var(--space-3)}.game-screen{flex-direction:column;justify-content:center;display:flex}.game-header{align-items:center;gap:var(--space-3);width:min(100%,49rem);margin:0 auto var(--space-3);grid-template-columns:1fr auto 1fr;display:grid}.game-header .text-button{justify-self:start}.move-pill{justify-self:end;align-items:center;gap:var(--space-2);border:1px solid var(--line);min-height:2.75rem;color:var(--text-muted);background:#ffffff0f;border-radius:999px;padding:.5rem .75rem .5rem 1rem;font-size:.82rem;font-weight:700;display:flex}.move-pill strong{width:2rem;height:2rem;color:var(--accent-ink);background:var(--color-sun);border-radius:50%;place-items:center;font-size:1rem;display:grid}.play-card{gap:var(--space-4);width:min(100%,49rem);padding:var(--space-4);border-radius:var(--radius-lg);grid-template-columns:minmax(0,1fr) 12rem;margin:0 auto;display:grid}.board-frame{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius-md);background:radial-gradient(circle at 50% 45%,#9b7df51f,#0000 60%),#0c0a21ad;min-width:0;overflow:hidden}#phaser-board,#phaser-board canvas{display:block;width:100%!important;height:100%!important}.controls{justify-content:center;gap:var(--space-3);flex-direction:column;display:flex}.palette{gap:var(--space-2);display:grid}.color-button{align-items:center;gap:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);min-height:3.4rem;color:var(--text);text-align:left;text-transform:capitalize;background:#ffffff0f;grid-template-columns:2rem 1fr;padding:.55rem .85rem;font-weight:750;display:grid}.color-symbol{width:2rem;height:2rem;color:var(--accent-ink);background:var(--swatch);border-radius:.7rem;place-items:center;display:grid}.color-button:disabled{cursor:default;opacity:.42}.result-backdrop{z-index:10;padding:var(--space-3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a081bdb;place-items:center;animation:.22s both fade-in;display:grid;position:fixed;inset:0}.result-card{border-radius:var(--radius-lg);text-align:center;background:linear-gradient(155deg,#373064,#242044);width:min(100%,28rem);padding:clamp(2rem,7vw,3.5rem);animation:.32s cubic-bezier(.2,.8,.2,1) both rise-in}.result-card>p:not(.eyebrow){color:var(--text-muted);font-size:1.08rem}.result-orbit{width:5rem;height:5rem;margin:0 auto var(--space-4);color:var(--accent-ink);background:var(--color-sun);border-radius:50%;place-items:center;font-size:2rem;display:grid;box-shadow:0 0 48px #ffcf5a5c}.result-actions{gap:var(--space-2);margin-top:var(--space-5);display:grid}@keyframes fade-in{0%{opacity:0}}@keyframes rise-in{0%{opacity:0;transform:translateY(16px)scale(.97)}}@media (width<=700px){.level-screen{justify-content:flex-start}.level-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.level-button{min-height:5.3rem;padding:.7rem}.level-status{font-size:.64rem}.setting-row{flex-direction:column;align-items:flex-start}.game-screen{justify-content:flex-start}.game-header{grid-template-columns:1fr 1fr}.level-label{display:none}.play-card{gap:var(--space-3);padding:var(--space-3);grid-template-columns:1fr}.controls{gap:var(--space-2)}.palette{grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}.color-button{justify-content:center;min-width:0;min-height:3.2rem;padding:.45rem;display:flex}.color-button>span:last-child{clip:rect(0, 0, 0, 0);width:1px;height:1px;position:absolute;overflow:hidden}}@media (width<=420px){.hero-card{padding-left:1.5rem;padding-right:1.5rem}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (height<=760px) and (orientation:landscape){.game-screen{padding-top:var(--space-2);padding-bottom:var(--space-2)}.play-card{grid-template-columns:minmax(0,1fr) 12rem;max-height:calc(100dvh - 5.5rem)}.board-frame{justify-self:center;width:min(100%,100dvh - 8rem)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
