*{box-sizing:border-box}html{background:#211a3e;color:#f6e7c4;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 20% 0,#514274,#2c2451 55%,#1c1935)}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,#board:focus-visible{outline:3px solid #f1c666;outline-offset:3px}a{color:inherit;text-decoration:none}.app{width:min(700px,calc(100% - 24px));margin:auto;padding:9px 0}header{height:49px;display:flex;align-items:center;justify-content:space-between;gap:8px}header>a{font-size:11px;color:#c9bfd8}header strong{text-align:center;font-size:21px;letter-spacing:3px}header small{display:block;font-size:6px;letter-spacing:2px;color:#a79cbe;margin-top:3px}button{min-width:44px;min-height:44px;border:1px solid #b28b5e;border-radius:10px;background:#f8e5bb;color:#514044;box-shadow:0 3px #88613f;padding:7px 11px;font-weight:800}#sound{font-size:10px}.top{display:flex;align-items:center;gap:10px;margin:7px 0}.levels{display:flex;gap:5px;flex:1}.levels button{flex:1;min-width:0;font-size:10px;line-height:1.1;padding:6px}.levels small{display:block;font-size:6px;margin-top:4px}.levels .active{background:#a54967;color:#fff0d1;border-color:#71334c;box-shadow:0 3px #71334c}.levels button[data-done]:after{content:' ✓'}.stats{display:flex;gap:8px;text-align:center;color:#aaa1bf;font-size:8px}.stats b{display:block;color:#f6deb0;font-size:17px}.case{position:relative;width:min(100%,500px);margin:auto;padding:13px;border-radius:24px;background:linear-gradient(145deg,#8d684e,#5b3e3d);box-shadow:inset 0 3px #bd9671,0 8px #342435,0 18px 28px #121024aa}.objective{height:31px;display:flex;justify-content:space-between;align-items:center;font-size:10px;padding:0 4px}.objective b{color:#f1ca79}#board{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:8px;border-radius:16px;background:#171735;box-shadow:inset 0 4px #0f0e25;outline:none}.cell{aspect-ratio:1;min-width:0;min-height:0;border:0;padding:7%;border-radius:9px;background:#302750;box-shadow:inset 0 1px #776891,0 2px #160f27;position:relative}.gem{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 2px #0b0c1d88);clip-path:polygon(50% 0,90% 25%,100% 68%,72% 100%,28% 100%,0 68%,10% 25%);box-shadow:inset 0 5px #ffffff77}.g0{background:linear-gradient(145deg,#ffb08f,#d34f59 55%,#7d2942)}.g1{background:linear-gradient(145deg,#aeeaff,#458bd1 55%,#284f9a)}.g2{background:linear-gradient(145deg,#fff19b,#e5ae3f 55%,#996225)}.g3{background:linear-gradient(145deg,#d8b3ff,#8d5bc3 55%,#533184)}.g4{background:linear-gradient(145deg,#bdf1c1,#50ae79 55%,#28694f)}.g5{background:linear-gradient(145deg,#ffd1e4,#d96b9e 55%,#8a365f)}.cell.selected{background:#665080;outline:3px solid #ffe795;outline-offset:-2px}.cell.clearing{animation:flash .18s alternate infinite}.cell.vine:after{content:'❧';position:absolute;inset:0;display:grid;place-items:center;color:#b4d48b;font-size:1.55em;text-shadow:0 1px #203d2c;pointer-events:none}.cell.vine .gem{opacity:.76}@keyframes flash{to{transform:scale(.72);filter:brightness(1.6)}}#overlay{position:absolute;inset:0;border-radius:24px;background:#f7e6c9f4;color:#493b55;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:18px;z-index:8}#overlay[hidden]{display:none}.crest{width:38px;height:38px;border:2px solid #9d4866;transform:rotate(45deg);display:grid;place-items:center;color:#d4a453}#crest{}#kicker{font-size:7px;letter-spacing:2px;color:#8b7180;margin-top:11px}h1{font-size:clamp(24px,5vw,34px);line-height:1.2;margin:7px 0}h1 em{font-style:normal;display:block;color:#a64665}#copy{font-size:11px;line-height:1.8;margin:3px 0 11px;color:#746671}#primary{background:#493d75;color:#fff0c6;border-color:#2d2855;box-shadow:0 4px #2d2855;min-width:180px}#overlay a{font-size:9px;margin-top:11px;color:#817080}.controls{display:flex;justify-content:center;align-items:center;gap:8px;margin:13px 0 0}.controls button{font-size:11px}.controls span{font-size:9px;color:#9e94b2}.controls button:disabled{opacity:.45}.notice,#notice{text-align:center;min-height:17px;margin:8px 0 4px;font-size:10px;color:#c4b8d0}footer{display:flex;justify-content:space-between;font-size:8px;color:#887fa0}.paused #board{filter:blur(3px) grayscale(.6);opacity:.45}[hidden]{display:none!important}
@media(max-width:500px){.app{width:calc(100% - 12px);padding:4px 0}header{height:44px}header strong{font-size:17px;letter-spacing:2px}header small{font-size:5px}.top{display:block;margin:4px 0}.levels{height:44px}.levels button{min-height:41px;padding:3px}.stats{position:absolute;top:54px;left:50%;transform:translateX(-50%);z-index:3}.stats span{min-width:58px;background:#2e2851e6;padding:2px;border-radius:8px}.stats b{font-size:14px}.case{width:min(100%,calc(100svh - 180px));padding:7px;border-radius:17px}.objective{height:27px;font-size:8px}#board{gap:3px;padding:5px;border-radius:11px}.cell{border-radius:6px}.controls{margin-top:9px;gap:5px}.controls span{display:none}.notice,#notice{margin:6px 0 2px}footer{justify-content:center}footer span:last-child{display:none}#overlay{border-radius:17px;padding:12px}}
@media(max-width:340px){header strong{font-size:15px}.controls button{padding:5px 9px}.case{width:min(100%,calc(100svh - 176px))}}
@media(max-height:500px) and (orientation:landscape){.app{width:calc(100% - 16px);height:100svh;display:grid;grid-template-columns:320px 1fr;grid-template-rows:50px 76px 1fr 22px;gap:5px 12px;padding:5px 0}header{grid-column:1;grid-row:1;height:auto}.top{grid-column:1;grid-row:2;display:block;margin:0}.levels{height:44px}.stats{margin-top:3px}.case{grid-column:2;grid-row:1/5;width:auto;height:calc(100svh - 17px);padding:7px;align-self:center}.objective{height:24px}#board{height:calc(100% - 24px);gap:3px;padding:5px}.controls{grid-column:1;grid-row:3;align-self:center;margin:0}.notice,#notice{grid-column:1;grid-row:4;margin:0}footer{display:none}#copy{font-size:10px;line-height:1.55}h1{font-size:24px}#overlay{padding:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-height:500px) and (orientation:landscape){.case{width:370px}}
.case{aspect-ratio:1}
@media(max-width:500px){.stats{position:static;transform:none;justify-content:center;height:28px}.case{width:min(100%,calc(100svh - 210px))}.controls{margin-top:6px}}