:root{color-scheme:light;font-family:ui-rounded,SF Pro Rounded,Nunito,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#64b1a8;--ink: #114540;--cream: #eefaf4;--panel-shadow: 0 12px 22px rgba(16, 74, 66, .22)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#64b1a8}body{display:grid;place-items:center}#app{position:relative;width:min(100vw,430px);height:100dvh;min-height:720px;overflow:hidden;background:#8ed2c9;box-shadow:0 0 0 1px #0f453d14,0 24px 70px #0c383247}@media(max-width:520px){#app{width:100vw;min-height:100dvh;box-shadow:none}}#game-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}#ui-root,.hud{position:absolute;inset:0;pointer-events:none}.top-bar{position:absolute;inset:max(8px,env(safe-area-inset-top)) 10px auto;display:grid;grid-template-columns:64px minmax(0,1fr) 116px;align-items:center;gap:8px;color:var(--ink)}.player-id{position:absolute;right:2px;top:-5px;color:#0d3e37ad;font-size:9px;font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.45)}.level-title{justify-self:center;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-top:42px;color:#0f4a43;font-size:clamp(30px,8.4vw,42px);font-weight:1000;letter-spacing:0;line-height:1;text-shadow:0 2px 0 rgba(214,245,235,.62)}.top-btn,.speed-btn{pointer-events:auto;border:4px solid rgba(255,246,222,.95);cursor:pointer;box-shadow:var(--panel-shadow),inset 0 0 0 3px #555b6833}.top-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;width:52px;height:52px;margin-top:58px;border-radius:18px;background:linear-gradient(#6a80d5,#4c62bf)}.top-btn span{width:10px;height:28px;border-radius:5px;background:#ffe4b8;box-shadow:inset 0 -2px #864b262e}.speed-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:96px;height:48px;justify-self:end;margin-top:58px;border-radius:18px;background:linear-gradient(#b9bdc5,#858c98);color:#fff;font-size:27px;font-weight:1000;text-shadow:0 2px 0 #626772,0 0 2px #626772}.play-mark{position:relative;width:38px;height:28px}.play-mark:before,.play-mark:after{content:"";position:absolute;top:0;width:0;height:0;border-bottom:14px solid transparent;border-left:19px solid #ffe2b5;border-top:14px solid transparent;filter:drop-shadow(0 1px 0 rgba(93,54,24,.35))}.play-mark:before{left:0}.play-mark:after{left:16px}.status-chip{position:absolute;right:18px;top:142px;display:flex;align-items:center;gap:7px;min-width:58px;padding:7px 10px;border-radius:999px;background:#eefaf4e0;color:#114540;font-size:14px;font-weight:1000;box-shadow:0 7px 15px #124c4424}.status-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#ff495d,#ffd84f,#52d3ef)}#ui-root:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 58%,rgba(12,71,63,.18) 100%)}.coin-chip{position:absolute;right:18px;top:182px;display:flex;align-items:center;gap:7px;min-width:58px;padding:7px 10px;border-radius:999px;background:#eefaf4e0;color:#114540;font-size:14px;font-weight:1000;box-shadow:0 7px 15px #124c4424}.coin-dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a3,#f7b32d 62%,#c47d12);box-shadow:inset 0 -1px 1px #8c540a8c}.bottom-ui{position:absolute;inset:auto 0 0;display:grid;justify-items:center;gap:12px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.slot-row{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;width:min(355px,calc(100vw - 44px));pointer-events:none}.active-slot{position:relative;height:58px;border-radius:12px;background:#fffffff2;box-shadow:0 6px #d8cbb8,0 10px 12px #533d2a38,inset 0 0 0 2px #6856451f}.active-slot.is-filled{display:grid;place-items:center;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 88%,white),var(--card));box-shadow:0 6px 0 var(--card-dark),0 10px 14px #533d2a40,inset 0 4px 5px #ffffff52;animation:slot-pop .36s cubic-bezier(.2,1.45,.32,1)}.active-slot span{color:var(--card-text);font-size:31px;font-weight:1000;line-height:1;-webkit-text-stroke:4px #ffffff;paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.25)}.card-queue{display:grid;grid-template-columns:repeat(3,1fr);gap:13px 18px;width:min(274px,calc(100vw - 116px));max-height:158px;overflow:hidden;padding:2px 4px 20px;pointer-events:auto}.color-card{position:relative;width:72px;height:62px;border:0;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 82%,#ffffff),var(--card));cursor:pointer;box-shadow:0 8px 0 var(--card-dark),0 13px 16px #5d37163b,inset 0 5px 6px #ffffff47;transform:translateY(0);animation:card-in .42s cubic-bezier(.2,1.25,.28,1) both;animation-delay:var(--stagger)}.color-card:before{content:"";position:absolute;inset:5px 7px auto;height:14px;border-radius:50%;background:#ffffff2e}.color-card:nth-child(n+4){opacity:.78;transform:translateY(8px) scale(.94)}.color-card:nth-child(n+7){opacity:.52;transform:translateY(16px) scale(.9)}.color-card:active:not(.locked){transform:translateY(5px) scale(.97);box-shadow:0 4px 0 var(--card-dark),0 8px 11px #5d371633,inset 0 5px 6px #ffffff40}.color-card.locked{cursor:default;filter:grayscale(.4) brightness(.93)}.card-hole{width:72px;height:62px;pointer-events:none}.color-card span{position:relative;color:var(--card-text);font-size:32px;font-weight:1000;line-height:1;-webkit-text-stroke:5px #ffffff;paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.3)}.booster-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;width:min(430px,100vw);min-height:104px;padding:0 24px 12px;border-top:4px solid rgba(173,226,214,.82);background:linear-gradient(rgba(255,255,255,.1),transparent),repeating-linear-gradient(90deg,#ffffff1f 0 42px,#24539c1a 42px 84px),#4a78c2;pointer-events:auto}.booster{position:relative;align-self:start;justify-self:center;width:72px;height:72px;margin-top:-20px;border:3px solid #f8e1c3;border-radius:50%;background:#f7dcc1;box-shadow:0 10px #925e3738,0 15px 18px #27365847,inset 0 5px 7px #ffffffb3;color:#834e30}.booster b,.booster em{position:absolute;right:-5px;bottom:-6px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(#75e935,#35bb19);color:#fff;font-style:normal;font-size:23px;font-weight:1000;text-shadow:0 1px 0 rgba(0,0,0,.35);box-shadow:0 4px #23980f}.booster small{position:absolute;left:50%;bottom:4px;transform:translate(-50%);color:#fff;font-size:17px;font-weight:1000;-webkit-text-stroke:3px #8d5a3a;paint-order:stroke fill}.booster.add .paper{position:absolute;left:23px;top:19px;width:26px;height:31px;border-radius:5px;background:linear-gradient(#fff,#cfd4e6);box-shadow:-9px 8px #8b6a44;transform:rotate(-13deg)}.booster.shuffle span,.booster.magnet span,.booster.locked span{position:absolute;inset:21px 19px}.booster.shuffle span:before,.booster.shuffle span:after{content:"";position:absolute;width:35px;height:13px;border-radius:999px;border:6px solid #129ce0;border-left-color:transparent;transform:rotate(-34deg)}.booster.shuffle span:after{border-color:#d93dca;border-right-color:transparent;transform:translateY(17px) rotate(144deg)}.booster.magnet span{border:9px solid #32aee0;border-top:0;border-radius:0 0 22px 22px}.booster.magnet span:before{content:"";position:absolute;left:9px;top:-14px;width:16px;height:26px;border-radius:8px;background:linear-gradient(#f76bd4,#7e61f4)}.booster.locked span:before{content:"";position:absolute;left:14px;top:4px;width:24px;height:20px;border-radius:5px;background:#9c5b3d}.booster.locked span:after{content:"";position:absolute;left:18px;top:-8px;width:16px;height:18px;border:6px solid #9c5b3d;border-bottom:0;border-radius:14px 14px 0 0}.complete-panel{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:#0c3d3642;pointer-events:auto}.complete-card{width:min(320px,90vw);border-radius:24px;background:linear-gradient(#fff8e9,#f8dbb6);padding:28px;text-align:center;box-shadow:0 18px 45px #482b1057,inset 0 4px 8px #ffffffbf;color:#0f4a43;animation:slot-pop .42s cubic-bezier(.2,1.45,.32,1)}.complete-card h2{margin:0;font-size:34px;line-height:1.05}.stars{display:flex;justify-content:center;gap:6px;margin-bottom:8px;font-size:44px;line-height:1}.stars i{font-style:normal;color:#d9c9b2;text-shadow:0 2px 0 rgba(120,84,40,.18);transform:translateY(6px) scale(.85)}.stars i.lit{color:#ffc32b;text-shadow:0 2px 0 #d78e12,0 5px 9px rgba(160,96,12,.35);animation:star-pop .43s cubic-bezier(.2,1.5,.35,1) both}.stars i.lit:nth-child(2){animation-delay:.14s}.stars i.lit:nth-child(3){animation-delay:.28s}.coin-line{margin:2px 0 0;color:#b07514;font-size:20px;font-weight:1000}.booster.spent{filter:grayscale(.55) brightness(.92)}.booster.spent b,.booster.spent em{background:linear-gradient(#b9bdc5,#858c98);box-shadow:0 4px #6c7280}@keyframes star-pop{0%{transform:translateY(6px) scale(.2)}70%{transform:translateY(0) scale(1.25)}to{transform:translateY(0) scale(1)}}.complete-card p{margin:10px 0 22px;font-size:18px;font-weight:900}.complete-card button{min-width:150px;min-height:48px;border:0;border-radius:14px;background:linear-gradient(#68d8f6,#24a9d7);color:#fff;font-size:20px;font-weight:1000;box-shadow:0 7px #167ea7,0 12px 16px #20557138}.hidden{display:none!important}.shake{animation:shake .26s ease}.is-paused #game-canvas{filter:saturate(.7) brightness(.88)}@media(max-height:780px){.level-title{padding-top:30px;font-size:36px}.top-btn,.speed-btn{margin-top:48px}.slot-row{height:50px}.active-slot{height:52px}.card-queue{gap:11px 16px;max-height:136px}.color-card{width:68px;height:56px}.booster-bar{min-height:88px}}@keyframes card-in{0%{opacity:1;transform:translateY(28px) scale(.88)}}@keyframes slot-pop{0%{transform:translateY(30px) scale(.75)}70%{transform:translateY(-4px) scale(1.08)}to{transform:translateY(0) scale(1)}}@keyframes shake{20%{transform:translate(-8px)}45%{transform:translate(7px)}70%{transform:translate(-4px)}}.import-btn{position:absolute;left:12px;top:148px;display:grid;place-items:center;width:52px;height:52px;border:4px solid rgba(255,246,222,.95);border-radius:18px;background:linear-gradient(#5ecb8f,#2f9e66);box-shadow:var(--panel-shadow),inset 0 0 0 3px #555b6833;cursor:pointer;pointer-events:auto}.import-btn input{display:none}.import-btn .pic{position:relative;width:28px;height:22px;border-radius:5px;background:#fff;overflow:hidden}.import-btn .pic:before{content:"";position:absolute;left:4px;top:4px;width:6px;height:6px;border-radius:50%;background:#ffc32b}.import-btn .pic:after{content:"";position:absolute;left:2px;top:11px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid #2f9e66}.import-btn.busy{animation:import-spin .9s linear infinite;pointer-events:none;filter:saturate(.7)}@keyframes import-spin{50%{transform:scale(.92) rotate(6deg)}to{transform:scale(1) rotate(0)}}