:root{--bg:#f6f7f2;--surface:#fff;--surface-soft:#eef4ef;--text:#1d2823;--muted:#68736d;--line:#d9e0d9;--green:#27875f;--green-bg:#dff7e9;--green-line:#46a875;--blue:#2f6eb8;--red:#c8453d;--red-bg:#d9dde2;--red-line:#3f4242;--gold:#b9892f;--shadow:0 18px 45px #212f2821;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,Microsoft YaHei,PingFang SC,Hiragino Sans GB,system-ui,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{min-width:320px;margin:0}button{font:inherit}.game-shell{min-height:100svh;padding:24px}.topbar{justify-content:space-between;align-items:end;gap:16px;max-width:1220px;margin:0 auto 18px;display:flex}.eyebrow{color:var(--green);margin:0 0 6px;font-size:14px;font-weight:700}h1,h2,h3,p{margin:0}h1{letter-spacing:0;font-size:40px;line-height:1.1}h2{font-size:20px;line-height:1.2}h3{font-size:15px}.top-actions{align-items:center;gap:12px;display:flex}.view-tabs{gap:8px;display:flex}.view-tabs button,#restartButton,.result-actions button{border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;border-radius:8px;min-width:42px;min-height:42px;box-shadow:0 4px 14px #212f280f}.view-tabs button{padding:0 14px}.view-tabs button.active{background:var(--green);color:#fff;border-color:var(--green)}.game-layout{grid-template-columns:240px minmax(420px,1fr) 280px;align-items:start;gap:18px;max-width:1220px;margin:0 auto;display:grid}.panel,.board-wrap{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px}.panel{padding:18px}.status-panel{gap:16px;display:grid}.level-card{background:var(--surface-soft);border-radius:8px;padding:16px}#levelBadge{color:var(--green);margin-bottom:10px;font-size:13px;font-weight:700;display:inline-flex}#levelIntro,#goalChecklist p{color:var(--muted);font-size:14px;line-height:1.55}.stats-grid{grid-template-columns:1fr;gap:10px;display:grid}.stats-grid div{border:1px solid var(--line);background:#fbfcfa;border-radius:8px;min-height:76px;padding:12px}.stats-grid span{color:var(--muted);font-size:13px;display:block}.stats-grid strong{margin-top:8px;font-size:26px;line-height:1;display:block}#scoreValue.score-pulse{color:var(--gold);animation:cubic-bezier(.18,.86,.28,1.18) scorePulse}.goal-box,.goal-checklist{gap:8px;display:grid}.goal-check{border:1px solid var(--line);background:#fbfcfa;border-radius:8px;grid-template-columns:24px 1fr;align-items:start;gap:8px;padding:8px;display:grid}.goal-check span{border:2px solid var(--line);color:#fff;border-radius:6px;place-items:center;width:24px;height:24px;font-size:16px;font-weight:900;line-height:1;display:grid}.goal-check.done{background:#dff7e99e;border-color:#46a87573}.goal-check.done span{border-color:var(--green-line);background:var(--green)}.goal-check.done p{color:var(--text);font-weight:700}.board-wrap{gap:12px;padding:16px;display:grid}.board-toolbar{justify-content:space-between;align-items:center;gap:12px;min-height:52px;display:flex}#resultText{color:var(--text);font-size:15px;font-weight:700;display:block}#cleanComboText{color:var(--gold);margin-top:3px;font-size:13px;display:block}#restartButton{white-space:nowrap;padding:0 14px}.board{aspect-ratio:1;grid-template-columns:repeat(var(--board-size,8), minmax(0, 1fr));touch-action:none;background:linear-gradient(135deg,#27875f1f,#2f6eb81a),#eef4ef;border-radius:8px;gap:8px;width:min(100%,640px);margin:0 auto;padding:10px;display:grid}.tile{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#fff;border:2px solid #0000;border-radius:8px;place-items:center;min-width:0;min-height:0;padding:4px;transition:transform .12s,border-color .12s,box-shadow .12s;display:grid;position:relative;box-shadow:0 5px 12px #212f281f}.tile:hover{transform:translateY(-2px)}.tile.drop-animating:hover,.tile.tile-empty:hover{transform:none}.tile.tile-empty{cursor:default;background:#ffffff5c;border-color:#68736d24;box-shadow:inset 0 0 0 2px #68736d14}.tile.drop-new{box-shadow:0 16px 24px #212f282e}.board.shuffling-out .tile{opacity:.55;transition:transform var(--shuffle-ms,.42s) cubic-bezier(.32, 0, .2, 1), opacity .18s ease;transform:translateY(-8px)rotate(3deg)scale(.94)}.board.shuffling-in .tile{animation:shuffleIn var(--shuffle-ms,.42s) cubic-bezier(.18, .86, .28, 1.18) both}.tile.selected{border-color:var(--gold);box-shadow:0 0 0 4px #b9892f33}.tile.drag-origin{opacity:.16;box-shadow:inset 0 0 0 2px #68736d2e}.tile.drag-origin svg{opacity:0}.tile.swap-moving{z-index:3;transition:transform .15s}.tile.negative{background:var(--red-bg);border-color:#c8453d47}.tile.positive{background:var(--green-bg);border-color:#27875f47}.tile.negative:hover,.tile.negative.selected{border-color:var(--red-line)}.tile.positive:hover,.tile.positive.selected{border-color:var(--green-line)}.board.selecting-negative .tile.positive{opacity:.42}.board.selecting-negative .tile.negative{border-color:var(--gold);box-shadow:0 0 0 4px #b9892f38}.tile svg{pointer-events:none;width:100%;height:100%}.drag-ghost{z-index:1000;border:2px solid var(--gold);pointer-events:none;will-change:transform;border-radius:8px;place-items:center;width:min(74px,13vw);height:min(74px,13vw);padding:4px;display:grid;position:fixed;top:0;left:0;box-shadow:0 18px 36px #212f2847}.drag-ghost.returning{transition-property:transform}.drag-ghost.positive{background:var(--green-bg)}.drag-ghost.negative{background:var(--red-bg)}.drag-ghost svg{width:100%;height:100%}.score-particle{z-index:1200;pointer-events:none;opacity:.95;will-change:transform, opacity;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:fixed;top:0;left:0}.score-particle.positive{background:#46a875;box-shadow:0 0 0 3px #46a8752e,0 0 14px #46a875ad}.score-particle.negative{background:#d99b2b;box-shadow:0 0 0 3px #d99b2b33,0 0 14px #d99b2bb8}.score-particle.combo{background:#f4c84a;width:22px;height:22px;margin:-11px 0 0 -11px;box-shadow:0 0 0 4px #f4c84a38,0 0 18px #f4c84acc}.score-float{z-index:1201;color:var(--gold);text-shadow:0 2px 8px #b9892f47;pointer-events:none;font-size:18px;font-weight:800;line-height:1;animation:.38s ease-out forwards scoreFloat;position:fixed;top:0;left:0}.match-score{z-index:1190;color:var(--green-line);text-shadow:0 2px #fff,0 8px 18px #212f2838;pointer-events:none;font-size:30px;font-weight:900;line-height:1;animation:cubic-bezier(.18,.86,.28,1.18) forwards matchScorePop;position:fixed;top:0;left:0}.match-score.negative{color:var(--gold)}.match-score.combo{color:#f4c84a;font-size:36px}.powerups{gap:10px;margin-top:14px;display:grid}.tools-panel{align-content:start;gap:14px;display:grid}.powerup{border:1px solid var(--line);width:100%;min-height:78px;color:var(--text);text-align:left;cursor:pointer;background:#fbfcfa;border-radius:8px;grid-template-columns:54px 1fr 28px;align-items:center;gap:10px;padding:10px;display:grid}.powerup:disabled{opacity:.48;cursor:not-allowed}.powerup.active{border-color:var(--gold);background:#fff9ea;box-shadow:0 0 0 4px #b9892f2e}.powerup svg{width:54px;height:54px}.powerup strong,.powerup small{display:block}.powerup small{color:var(--muted);margin-top:4px;font-size:12px;line-height:1.35}.powerup em{background:var(--green);color:#fff;border-radius:50%;place-items:center;width:28px;height:28px;font-style:normal;font-weight:700;display:grid}.guide-view{max-width:1220px;margin:0 auto}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;display:grid}.guide-grid-rules{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.guide-panel{align-content:start;gap:14px;display:grid}.guide-lead{color:var(--muted);font-size:14px;line-height:1.55}.icon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.guide-item{border:1px solid var(--line);background:#fbfcfa;border-radius:8px;grid-template-columns:58px 1fr;align-items:center;gap:10px;min-height:96px;padding:10px;display:grid}.guide-item.positive{background:var(--green-bg);border-color:var(--green-line)}.guide-item.negative{background:var(--red-bg);border-color:var(--red-line)}.powerup-guide .guide-item{background:#eaf3ff;border-color:#93b7e6}.guide-item svg{width:58px;height:58px}.guide-item h3{margin-bottom:5px}.guide-item p,.rules-list p{color:var(--muted);font-size:13px;line-height:1.45}.rules-list{gap:10px;display:grid}.rules-list strong{color:var(--text)}.result-modal{z-index:20;background:#1d282370;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.result-modal[hidden]{display:none}.result-dialog{border:1px solid var(--line);background:var(--surface);width:min(100%,420px);box-shadow:var(--shadow);border-radius:8px;gap:14px;padding:24px;display:grid}#resultKicker{color:var(--green);font-size:14px;font-weight:800}#resultSummary{color:var(--muted);line-height:1.55}.result-actions{justify-content:end;gap:10px;display:flex}.result-actions button{padding:0 14px}.result-actions button:last-child{background:var(--green);border-color:var(--green);color:#fff}@keyframes scorePulse{0%{transform:scale(1)}45%{transform:scale(1.24)}to{transform:scale(1)}}@keyframes scoreFloat{0%{opacity:0;transform:translate3d(var(--score-x,0), var(--score-y,0), 0) translate(-50%, -20%) scale(.8)}20%{opacity:1}to{opacity:0;transform:translate3d(var(--score-x,0), var(--score-y,0), 0) translate(-50%, -150%) scale(1)}}@keyframes matchScorePop{0%{opacity:0;transform:translate3d(var(--match-x), var(--match-y), 0) translate(-50%, -40%) scale(.68)}18%{opacity:1;transform:translate3d(var(--match-x), var(--match-y), 0) translate(-50%, -80%) scale(1.16)}to{opacity:0;transform:translate3d(var(--match-x), var(--match-y), 0) translate(-50%, -150%) scale(1)}}@keyframes shuffleIn{0%{opacity:0;transform:translateY(22px)rotate(-4deg)scale(.82)}70%{opacity:1;transform:translateY(-3px)rotate(1deg)scale(1.04)}to{opacity:1;transform:translateY(0)rotate(0)scale(1)}}@media (width<=1080px){.game-layout{grid-template-columns:170px minmax(300px,1fr) 230px;gap:12px}.guide-grid{grid-template-columns:1fr}.status-panel{order:1}.board-wrap{order:2}}@media (width<=820px){.game-layout{grid-template-columns:1fr}.status-panel,.tools-panel{order:2;grid-column:auto}.board-wrap{order:1}}@media (width<=640px){.game-shell{padding:14px}.topbar{flex-direction:column;align-items:start}.top-actions{flex-direction:column;align-items:stretch;width:100%}.view-tabs,.result-actions{width:100%}.view-tabs button{flex:1 1 0}.result-actions{flex-direction:column;align-items:stretch}h1{font-size:32px}.board-toolbar{flex-direction:column;align-items:stretch}.board{gap:5px;padding:6px}.tile{padding:2px}.icon-grid{grid-template-columns:1fr}}
