:root{--bg-top: #fdf1dc;--bg-bottom: #f6d6c4;--ink: #3b3150;--ink-soft: #6d6280;--accent: #f08a4b;--accent-2: #f2b84b;--card: rgba(255, 255, 255, .78);--wood-1: #c99a6b;--wood-2: #a87848;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;overscroll-behavior:none}body{background:radial-gradient(900px 500px at 15% -10%,rgba(255,255,255,.7),transparent 60%),radial-gradient(700px 500px at 100% 100%,rgba(240,138,75,.18),transparent 60%),linear-gradient(180deg,var(--bg-top),var(--bg-bottom));background-attachment:fixed}#app{min-height:100vh;display:flex;justify-content:center}.screen{width:100%;max-width:560px;padding:14px 18px 28px;display:flex;flex-direction:column;gap:14px;position:relative;animation:screen-in .35s ease both}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.btn{font:inherit;font-weight:700;color:var(--ink);cursor:pointer;border:0;border-radius:14px;padding:10px 18px;background:#fff;box-shadow:0 2px #3b315026,0 6px 14px #3b31501f;transition:transform .12s ease,box-shadow .12s ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(1px);box-shadow:0 1px #3b315033}.btn.primary{color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 3px #c9662d,0 8px 18px #f08a4b66}.btn.ghost{background:transparent;box-shadow:none;padding-left:0;color:var(--ink-soft)}.btn.ghost:hover{color:var(--ink)}.gallery-head{display:flex;justify-content:space-between;align-items:center;padding-top:6px}.gallery-head h1{margin:0;font-size:1.7rem;letter-spacing:-.02em;background:linear-gradient(90deg,#e2573b,#f08a4b 50%,#e9a933);-webkit-background-clip:text;background-clip:text;color:transparent}.coins{font-weight:800;background:var(--card);padding:6px 14px;border-radius:99px;box-shadow:0 4px 12px #3b31501a}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.card-level{position:relative;border:0;border-radius:22px;background:var(--card);padding:10px;cursor:pointer;font:inherit;color:inherit;text-align:left;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px #ffffffe6 inset,0 10px 24px #3b315024;transition:transform .18s ease,box-shadow .18s ease;animation:pop-in .45s cubic-bezier(.2,.9,.3,1.2) both}.card-level:nth-child(2){animation-delay:.06s}.card-level:nth-child(3){animation-delay:.12s}.card-level:nth-child(4){animation-delay:.18s}@keyframes pop-in{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}.card-level:hover:not(:disabled){transform:translateY(-4px) rotate(-.4deg);box-shadow:0 2px #ffffffe6 inset,0 16px 30px #3b315033}.card-level canvas{width:100%;aspect-ratio:1;border-radius:14px;image-rendering:pixelated;display:block;box-shadow:0 0 0 3px #fff,0 4px 10px #3b315026}.card-level .caption{margin-top:10px;font-weight:800}.card-level.locked{opacity:.55;cursor:not-allowed;filter:saturate(.6)}.card-level.done:after{content:"✓";position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(180deg,#7ccb7f,#43a047);box-shadow:0 3px 8px #43a04780}.game-header{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px}.game-title{font-weight:800;text-align:right;font-size:1.1rem}.progress{grid-column:1 / -1;height:10px;background:#3b31501f;border-radius:99px;overflow:hidden;box-shadow:inset 0 1px 3px #3b315033}.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));border-radius:99px;transition:width .2s ease;box-shadow:0 0 10px #f08a4bb3}.stage{width:100%;padding:12px;border-radius:26px;background:linear-gradient(145deg,var(--wood-1),var(--wood-2));box-shadow:0 2px #ffffff59 inset,0 -3px #00000026 inset,0 18px 34px #50321e59}.board{width:100%;aspect-ratio:1;border-radius:14px;background:#fff;display:block;cursor:crosshair;box-shadow:0 0 0 2px #0000002e,inset 0 0 22px #50321e33}.status{min-height:1.4em;text-align:center;font-size:.95rem;color:var(--ink-soft);font-weight:600}.palette{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:6px 0}.swatch{--c: #888;--fill: 100%;position:relative;width:54px;height:54px;border-radius:50%;border:0;padding:0;cursor:pointer;background:radial-gradient(circle at 32% 28%,#ffffffa6,#fff0 45%),var(--c);box-shadow:0 -3px #0000002e inset,0 6px 12px #3b315040;transition:transform .15s cubic-bezier(.2,.9,.3,1.4)}.swatch:hover{transform:translateY(-2px)}.swatch.active{transform:translateY(-5px) scale(1.12);box-shadow:0 -3px #0000002e inset,0 0 0 3px #fff,0 0 0 5px var(--ink),0 12px 18px #3b31504d}.swatch .num{color:#fff;font-weight:800;font-size:1.05rem;text-shadow:0 1px 3px rgba(0,0,0,.55)}.swatch .ring{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;background:conic-gradient(var(--accent) var(--fill),rgba(59,49,80,.14) 0);-webkit-mask:radial-gradient(circle,transparent 30px,#000 31px);mask:radial-gradient(circle,transparent 30px,#000 31px);pointer-events:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#fdf1dcc7;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:grid;place-items:center;animation:fade .35s ease both;z-index:5}@keyframes fade{0%{opacity:0}to{opacity:1}}.card{background:#fff;border-radius:26px;padding:28px 34px;text-align:center;box-shadow:0 24px 50px #3b31504d;animation:pop-in .5s cubic-bezier(.2,.9,.3,1.3) both}.card h2{margin:0 0 4px;font-size:1.6rem}.card p{margin:0;font-weight:800;color:var(--accent);font-size:1.15rem}.row{display:flex;gap:12px;justify-content:center;margin-top:18px}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}