:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#655d83;background:#eae7f3;font-synthesis:none;--lavender:#d9d6ef;--purple:#8c79b5;--ink:#655d83;--white:#fffefd}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 15% 20%,#f6f3fb 0,transparent 45%),radial-gradient(ellipse at 90% 85%,#dcd8ef 0,transparent 50%),#eae7f3}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #8673b2;outline-offset:4px}button{color:inherit}button:disabled{cursor:default;opacity:.45}button:not(:disabled):active{transform:translateY(2px)}.desktop-brand{position:fixed;left:40px;top:34px;display:flex;align-items:center;gap:13px;font-size:22px;font-weight:800;letter-spacing:2px;color:#87799e}.desktop-brand small{display:block;font-size:11px;font-weight:400;letter-spacing:2px;margin-top:6px;color:#a499b5}.brand-beads{display:grid;grid-template-columns:17px 17px;gap:4px;transform:rotate(-8deg)}.brand-beads i{width:17px;height:17px;border-radius:5px;background:#55c7de;box-shadow:inset 1px 2px 2px #ffffff80,0 2px 0 #00000010}.brand-beads i:nth-child(2){background:#f9c165}.brand-beads i:nth-child(3){background:#ee99ad}.brand-beads i:nth-child(4){background:#afc98b}.game{position:relative;isolation:isolate;display:flex;flex-direction:column;width:460px;height:min(920px,100svh - 32px);min-height:690px;padding:20px 25px 12px;border:1px solid #ffffffa0;border-radius:28px;background:var(--lavender);box-shadow:0 20px 70px #6e608b17,0 2px 6px #6e608b10;overflow:hidden}.topbar{display:flex;justify-content:space-between;align-items:flex-start;flex-shrink:0}.square-button{width:41px;height:41px;border:2px solid #c5bddc;border-radius:12px;background:linear-gradient(#fff,#f0ecfa);box-shadow:0 3px 0 #bbb2d4;color:#9685b4;display:grid;place-items:center;font-size:25px;font-weight:800}.square-button svg{width:29px;height:29px;fill:#a091bd;margin-left:4px}.square-button .cutout{fill:#fcfaff}.level-heading{border:0;background:none;padding:0;text-align:center}.level-heading>span{font-size:23px;font-weight:800;color:#74648f;letter-spacing:4px;display:block}.level-heading small{display:block;color:#9b8eaf;font-size:12px;margin-top:3px;letter-spacing:2px}.level-heading small span{font-size:14px}.status-row{display:flex;align-items:center;justify-content:center;gap:18px;position:relative;height:48px;flex-shrink:0}.timer{height:29px;padding:1px 14px 1px 3px;display:flex;align-items:center;gap:8px;border:2px solid #c0b7d3;border-radius:20px;background:#fdfcff;color:#8b809b;font-size:15px;font-weight:750;font-variant-numeric:tabular-nums;box-shadow:0 2px 0 #c4bbd9}.clock-face{display:grid;place-items:center;position:relative;width:33px;height:33px;border:3px solid #e5b03b;background:#ffdd6a;border-radius:50%;font-size:26px;line-height:1;color:#8f6caa;box-shadow:inset 1px 1px 0 #fff4a9,0 2px 0 #c49a46;margin-left:-6px}.timer.urgent{color:#cd637c;border-color:#d98c9d;animation:timer-pulse 1s infinite}.progress-info{display:flex;align-items:center;gap:6px;font-size:11px;color:#988aaa;position:absolute;right:3px}.progress-track{height:6px;width:44px;border-radius:5px;background:#c9c1de;overflow:hidden}.progress-track i{display:block;width:0;height:100%;border-radius:5px;background:#a693c5;transition:width .4s}.board-area{flex:1;position:relative;min-height:240px;margin:0 -14px;overflow:hidden;touch-action:none}#board{width:100%;height:100%;display:block;touch-action:none;outline-offset:-4px}.zoom-controls{position:absolute;bottom:10px;left:2px;display:flex;align-items:center;flex-direction:column;gap:6px;opacity:.65}.zoom-controls button{border:0;border-radius:5px;background:#bfb5d5;color:#fff;width:22px;height:22px;padding:0;font-size:23px;line-height:20px}.zoom-controls input{writing-mode:vertical-lr;direction:rtl;width:17px;height:88px;accent-color:#a798c2;cursor:pointer}.instruction{flex-shrink:0;text-align:center;font-size:11px;color:#9586a9;margin:4px 0 12px;min-height:16px;letter-spacing:1px}.tray-section{margin:0 4px;position:relative;padding-bottom:12px;flex-shrink:0}.tray-caption{display:flex;justify-content:space-between;align-items:center;margin:0 5px 6px;color:#9b8eaf;font-size:10px;letter-spacing:1px}.tray-caption b{font-weight:600}.tray{border-radius:16px;background:linear-gradient(130deg,#ffffff,#f1eff7);border:3px solid #eae6f2;box-shadow:0 3px 0 #b5aacb,0 0 0 1px #c6bdd9,inset 0 0 5px #b9abc143;padding:9px 9px 24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:7px 5px;min-height:105px}.tray-slot{aspect-ratio:1;border-radius:6px;background:#eae9e8;box-shadow:inset 1px 2px 3px #6c6a6d1a,0 1px 0 #fff;border:0;padding:1px;display:grid;place-items:center;min-width:0}.tray-slot.filled{background:transparent;box-shadow:none}.mini-bead{display:block;width:100%;height:100%;border-radius:6px;background:var(--bead);border:1.5px solid color-mix(in srgb,var(--bead) 76%,#40505e);box-shadow:inset 2px 2px 3px #ffffff7a,inset -2px -2px 2px #00000010,0 2px 1px #00000013;position:relative}.mini-bead:after{content:"";position:absolute;left:19%;top:10%;width:53%;height:30%;background:#ffffff30;border-radius:4px}.tray.warning{border-color:#efc0be}.tray.full{border-color:#e997a6}.expand-button{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#fbfaff;border:2px solid #c3b9d6;border-radius:12px;box-shadow:0 2px 0 #b8adcb;font-size:11px;padding:4px 12px;color:#9b8eae;font-weight:700}.expand-button span{display:inline-block;border:1px solid #bcafcd;border-radius:4px;line-height:12px;margin-right:3px}.expand-button:not(:disabled):active{transform:translate(-50%,2px)}.tools{display:flex;justify-content:space-around;flex-shrink:0;margin-top:13px;padding:0 22px}.tool-button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:#8c7ba6;padding:0 8px;min-width:70px}.tool-icon{display:grid;place-items:center;width:51px;height:49px;border-radius:18px;position:relative;font-size:39px;line-height:1;border:2px solid #aa97c5;box-shadow:inset 0 2px 1px #ffffffa0,0 3px 0 #aa97c5;text-shadow:0 2px 0 #7b689e33}.tool-icon b{position:absolute;right:-7px;top:-6px;font-size:10px;line-height:18px;width:20px;height:20px;border-radius:50%;background:#aed585;color:#fff;border:1.5px solid #f8fff3;box-shadow:0 1px 0 #91b66a;text-shadow:none}.undo-icon{background:#c7b9e4;color:#fff9ec}.hint-icon{background:#efd5a3;color:#af8651}.hint-icon svg{width:30px;height:31px;stroke:#b08344;stroke-width:2;fill:#fff0a4;stroke-linecap:round}.time-icon{background:#e8a7b5;color:#fff4db}.game-footer{text-align:center;color:#aa9fba;font-size:9px;letter-spacing:3px;margin-top:16px;flex-shrink:0}.game-footer span{margin:0 3px}.combo{position:absolute;top:6%;left:0;right:0;text-align:center;font-weight:800;color:#fff;font-size:22px;text-shadow:0 2px 0 #aa8ac4,1px 0 #aa8ac4,-1px 0 #aa8ac4;pointer-events:none;opacity:0}.combo.show{animation:combo-pop 1.4s both}#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:20;background:#625376ed;border:1px solid #ffffff30;color:white;padding:11px 20px;border-radius:16px;font-size:13px;max-width:90vw;text-align:center;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:2px solid #fff;border-radius:25px;padding:26px;width:min(370px,calc(100vw - 32px));max-height:85svh;background:#f8f5fe;color:var(--ink);box-shadow:0 18px 70px #46355433}dialog::backdrop{background:#5d507a60;backdrop-filter:blur(5px)}.modal-title{font-size:24px;text-align:center;margin:0 0 8px;color:#7b659d;letter-spacing:2px}.modal-subtitle{text-align:center;font-size:12px;line-height:1.8;color:#a294b2;margin:0 0 22px}.modal-button{display:block;width:100%;padding:11px 15px;border:1px solid #bba8d2;border-radius:13px;background:linear-gradient(#bda7d7,#a78ec7);box-shadow:0 3px 0 #9a7dbb;color:#fff;font-weight:650;margin-top:12px;font-size:14px}.modal-button.secondary{color:#9a87af;border-color:#dacfe7;background:#f1ebf8;box-shadow:0 2px 0 #d7cce2}.modal-button.danger{color:#b07d87;background:#f9e9ed;border-color:#e5c1ca;box-shadow:0 2px 0 #e5c1ca}.help-steps{list-style:none;padding:0;margin:20px 0;counter-reset:step}.help-steps li{counter-increment:step;position:relative;padding:0 0 16px 36px;font-size:12px;line-height:1.8;color:#8d7c9f}.help-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:25px;height:25px;display:grid;place-items:center;border-radius:9px;color:#a286bc;background:#e9e0f4;font-weight:800}.help-steps strong{display:block;color:#7d698e;font-size:13px}.settings-line{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:18px 0}.toggle{border:0;border-radius:20px;padding:4px;width:46px;background:#b29ccb}.toggle:before{content:"";display:block;width:19px;height:19px;background:white;border-radius:50%;margin-left:19px;transition:.2s}.toggle.off{background:#d5cddd}.toggle.off:before{margin-left:0}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.level-card{border:1px solid #e1d7ed;background:#fff;border-radius:14px;padding:8px 4px 10px;color:#9b87ae;position:relative}.level-card.active{border:2px solid #b6a0ce;background:#f0e9f8}.level-card canvas{display:block;width:72px;height:70px;margin:auto}.level-card span{display:block;font-size:11px;margin-top:4px}.level-card small{font-size:10px;color:#b7a9c3}.level-card .completed{position:absolute;right:4px;top:4px;font-size:11px;color:#86a66d}.preview-art{display:block;width:170px;height:170px;margin:6px auto 14px}.result-stats{display:flex;justify-content:space-evenly;text-align:center;padding:12px 0 18px;font-size:11px;color:#a595b3}.result-stats b{display:block;color:#8a72a4;font-size:24px;margin-bottom:5px}.result-stars{text-align:center;color:#e8ba5f;font-size:31px;letter-spacing:8px;margin:4px 0 10px;text-shadow:0 2px 0 #c99c4b}.help-note{font-size:10px;color:#aa9bb8;line-height:1.7;text-align:center}.confetti{position:fixed;width:8px;height:13px;z-index:10;pointer-events:none;animation:confetti-fall 2s ease-in forwards}@keyframes combo-pop{0%{opacity:0;transform:scale(.7) translateY(10px)}18%,65%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:translateY(-20px)}}@keyframes timer-pulse{50%{box-shadow:0 0 0 4px #d6829b22}}@keyframes confetti-fall{0%{transform:translateY(-15vh) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(650deg);opacity:0}}@media(max-width:900px){.desktop-brand{display:none}}@media(max-width:520px){body{background:var(--lavender);align-items:flex-start}.game{width:100%;height:100svh;min-height:650px;border:0;border-radius:0;box-shadow:none;padding:calc(12px + env(safe-area-inset-top)) 22px calc(10px + env(safe-area-inset-bottom))}.topbar{align-items:center}.level-heading>span{font-size:21px}.tools{margin-top:10px}.game-footer{margin-top:12px}}@media(max-height:750px){.game{padding-top:10px}.topbar .square-button{width:34px;height:34px;border-radius:10px}.status-row{height:39px}.level-heading>span{font-size:19px}.level-heading small{font-size:10px}.instruction{margin:2px 0 7px;font-size:10px}.tray{gap:5px;min-height:88px;padding:7px 7px 21px}.tray-caption{margin-bottom:4px}.tool-icon{height:42px;width:45px;font-size:34px;border-radius:15px}.tool-button{gap:5px;font-size:11px}.game-footer{margin-top:9px}.tools{margin-top:8px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.tray-slot.selected,.tray-slot.hinted{outline:2px solid #e6bd58;outline-offset:2px;box-shadow:0 0 7px #f6d16a88}.tray-slot.can-store{border:1px dashed #b6a0ce;background:#eee7f4}.tray-slot.can-store:hover{background:#e0d4ed}.instruction{min-height:30px;display:flex;align-items:center;justify-content:center;line-height:1.5}
/* Mobile browsers otherwise tint the entire focusable canvas on each tap. */
html,body,.game,#board{-webkit-tap-highlight-color:transparent}
.game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#board:focus:not(:focus-visible){outline:none}