:root{--cm-bg:#24102e;--cm-panel:#391848;--cm-line:#80447e;--cm-text:#fff5fb;--cm-muted:#d7afd1;--cm-pink:#ff72ad;--cm-yellow:#ffd166}.candy-page{min-height:calc(100vh - 67px);padding:30px 16px 50px;background:radial-gradient(circle at 18% 0,#7a2868 0,transparent 43%),linear-gradient(135deg,#24102e,#151c42 72%,#113c58);color:var(--cm-text);font-family:system-ui,sans-serif}.candy-page *{box-sizing:border-box}.candy-wrap{width:min(920px,100%);margin:auto}.candy-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.candy-eyebrow{color:#ffe08a;font-size:10px;font-weight:900;letter-spacing:.2em}.candy-header h1{margin:5px 0;color:#fff;font-size:clamp(30px,7vw,48px);letter-spacing:.06em}.candy-header p{margin:0;color:var(--cm-muted);font-size:13px}.candy-back{margin-top:7px;color:#ffe9f8;font-size:12px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap}.candy-layout{display:grid;grid-template-columns:minmax(300px,650px) 220px;gap:18px;align-items:start}.candy-play,.candy-panel{border:1px solid var(--cm-line);border-radius:8px;background:#35163fe8;box-shadow:0 18px 55px #12001466}.candy-play{padding:clamp(12px,3vw,24px)}.candy-score-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:13px}.candy-score-row div{padding:8px;border-radius:8px;background:#24102f;text-align:center}.candy-score-row span{display:block;color:var(--cm-muted);font-size:10px}.candy-score-row strong{display:block;margin-top:2px;color:#ffe08a;font-size:22px}.candy-intro{margin-bottom:13px;padding:11px 13px;border:1px solid #9d4e89;border-radius:8px;background:#421c4b;color:#f7dff1;font-size:12px}.candy-intro strong{color:#ffe08a}.candy-intro ol{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 0;padding:0;list-style-position:inside}.candy-intro p{margin:8px 0 0;color:var(--cm-muted);font-size:11px}.candy-board-wrap{position:relative;width:min(100%,540px);margin:auto;padding:9px;border:1px solid #a25691;border-radius:8px;background:#1a1230;box-shadow:inset 0 0 24px #0008}.candy-board{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;aspect-ratio:1;background:#271947;touch-action:manipulation}.candy-cell{position:relative;display:grid;place-items:center;min-width:0;border:1px solid #4e326a;border-radius:8px;background:#2e1c4d;cursor:pointer;transition:transform .14s,background .18s,box-shadow .18s}.candy-cell:hover{transform:translateY(-2px)}.candy-cell:focus-visible{outline:3px solid #fff;outline-offset:2px}.candy-cell.selected{background:#67365f;box-shadow:0 0 0 3px #fff3,0 0 18px #ffb3db}.candy-piece{width:78%;height:78%;border:2px solid #ffffff33;border-radius:38% 62% 55% 45%;box-shadow:inset -5px -6px 6px #0004,inset 5px 4px 4px #fff9,0 3px 5px #0006;animation:candy-pop .18s cubic-bezier(.2,1.4,.4,1)}.candy-piece::after{content:"";display:block;width:30%;height:22%;margin:14% 0 0 19%;border-radius:50%;background:#fff9;transform:rotate(-28deg)}.candy-piece.moving{animation:candy-swap .24s ease}.candy-piece.new{outline:3px solid #fff;outline-offset:-3px;animation:candy-drop .32s ease-out}.candy-piece.match{outline:3px solid var(--cm-yellow);outline-offset:-3px;animation:candy-match .28s ease-in-out infinite alternate;box-shadow:0 0 18px var(--cm-yellow),inset -4px -5px 5px #0004}.candy-red{background:linear-gradient(145deg,#ff8bb4,#d82267)}.candy-blue{background:linear-gradient(145deg,#79d5ff,#2876d5)}.candy-green{background:linear-gradient(145deg,#9af2ad,#20a15b)}.candy-yellow{background:linear-gradient(145deg,#ffe88a,#e4a51d)}.candy-purple{background:linear-gradient(145deg,#df9fff,#893dc6)}.candy-orange{background:linear-gradient(145deg,#ffc07d,#e35c1e)}@keyframes candy-pop{from{transform:scale(.35);opacity:.3}to{transform:scale(1);opacity:1}}@keyframes candy-drop{from{transform:translateY(-80%) scale(.7);filter:brightness(1.7)}to{transform:translateY(0) scale(1);filter:brightness(1)}}@keyframes candy-swap{50%{transform:scale(1.15)}}@keyframes candy-match{to{transform:scale(1.18) rotate(8deg);filter:brightness(1.35)}}.candy-overlay{position:absolute;inset:9px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;background:#24102fe8;text-align:center}.candy-overlay[hidden]{display:none}.candy-overlay h2{margin:0;color:#fff;font-size:clamp(25px,7vw,39px)}.candy-overlay p{max-width:300px;margin:0;color:#f0d5ea;font-size:12px;line-height:1.8}.candy-button{min-height:39px;border:1px solid #a15b94;border-radius:8px;padding:8px 11px;background:#51265a;color:var(--cm-text);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.candy-button:hover,.candy-button:focus-visible{border-color:#ffe08a;outline:2px solid #ffe08a55;outline-offset:2px}.candy-primary{border-color:#ffe08a;background:#ffe08a;color:#3b183b}.candy-button:disabled{cursor:not-allowed;opacity:.45}.candy-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 17px;margin:10px 0 0;color:var(--cm-muted);font-size:10px}.candy-legend span{display:inline-flex;align-items:center;gap:5px}.candy-legend i{width:12px;height:12px;display:inline-block;border-radius:4px}.legend-new{background:#ffb4d6;outline:2px solid #fff;outline-offset:-2px}.legend-match{background:#ffe08a;box-shadow:0 0 8px #ffe08a}.legend-selected{background:#67365f;outline:2px solid #fff6;outline-offset:-2px}.candy-message{min-height:1.5em;margin:12px 0 0;color:#f1d8ec;font-size:11px;text-align:center}.candy-side{display:flex;flex-direction:column;gap:10px}.candy-panel{padding:13px}.candy-actions{display:grid;gap:8px}.candy-sound h2,.candy-help h2{margin:0 0 9px;color:var(--cm-muted);font-size:11px;letter-spacing:.13em}.candy-sound>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}.candy-sound .candy-button{padding:6px 3px}.candy-sound label{display:grid;gap:4px;margin-top:10px;color:var(--cm-muted);font-size:11px}.candy-sound input{width:100%;accent-color:#ffe08a}.candy-help ol{margin:0;padding-left:19px;color:#f0d8eb;font-size:11px;line-height:1.7}.candy-help p{margin:8px 0 0;color:var(--cm-muted);font-size:10px;line-height:1.65}.candy-help b{color:#fff}.candy-note{margin:14px 0 0;color:#b38fac;font-size:10px;text-align:center}@media(max-width:760px){.candy-page{padding:21px 10px 38px}.candy-header{margin-bottom:14px}.candy-layout{display:block}.candy-side{display:grid;grid-template-columns:1fr 1fr;margin-top:10px}.candy-sound,.candy-help{grid-column:1/-1}.candy-intro ol{grid-template-columns:1fr}.candy-board{gap:4px}}@media(max-width:420px){.candy-board-wrap{padding:6px}.candy-overlay{inset:6px}.candy-score-row strong{font-size:18px}}
.candy-page section{margin-bottom:10px}
.candy-target label{display:block;color:var(--cm-muted);font-size:11px}.candy-target>div{display:flex;align-items:center;gap:6px;margin-top:6px}.candy-target input{width:100%;min-height:38px;border:1px solid var(--cm-line);border-radius:8px;padding:6px 8px;background:#24102f;color:var(--cm-text);font:inherit;font-weight:800}.candy-target span{color:var(--cm-muted);font-size:12px;white-space:nowrap}.candy-target p{margin:6px 0 0;color:var(--cm-muted);font-size:10px}