:root{--bg:#eef4ff;--card:#fff;--text:#1f2a44;--sub:#637192}
*{box-sizing:border-box}
body{margin:0;font-family:"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
.app{max-width:1180px;margin:0 auto;padding:16px}.card{background:var(--card);border-radius:16px;box-shadow:0 10px 24px rgba(43,76,160,.12)}
.hero{padding:16px;margin-bottom:14px}.hero h1{margin:0 0 6px}.hero p{margin:0;color:var(--sub)}
.layout{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
.right-col{display:flex;flex-direction:column}
.board-wrap{padding:14px;position:relative}.exit{position:absolute;right:18px;top:8px;color:#d9534f;font-weight:700}
.board{position:relative;width:100%;max-width:430px;height:430px;background:#f8fbff;border:2px solid #8ea6da;border-right:6px dashed #d9534f;margin-top:14px}
.piece{position:absolute;border-radius:10px;border:2px solid rgba(80,60,35,.25);cursor:pointer;transition:transform .12s ease;display:flex;align-items:center;justify-content:center}
.piece.selected{outline:4px solid #4d71ff;transform:scale(1.02)}
.hint-arrow{font-size:2rem;line-height:1;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.8),0 0 2px rgba(0,0,0,1);pointer-events:none;position:relative;z-index:2}
.sol-panel{padding:14px}
.sol-panel h2{margin:0 0 8px;font-size:16px}
.sol-header{text-align:center;margin-bottom:4px}
.sol-step-label{color:var(--sub);font-size:13px}
.sol-board{position:relative;background:#f8fbff;border:2px solid #8ea6da;border-right:4px dashed #d9534f;margin:0 auto 8px}
.sol-piece{position:absolute;border-radius:5px;border:1.5px solid rgba(80,60,35,.25);display:flex;align-items:center;justify-content:center}
.sol-piece.sol-active{z-index:10;animation:sol-glow .6s ease-in-out infinite}
@keyframes sol-glow{0%,100%{box-shadow:0 0 0 3px rgba(230,126,34,1),0 0 14px rgba(230,126,34,.6)}50%{box-shadow:0 0 0 8px rgba(230,126,34,0),0 0 22px rgba(230,126,34,.1)}}
.sol-arrow{font-size:.8rem;color:#fff;text-shadow:0 0 4px rgba(0,0,0,.9);pointer-events:none;line-height:1}
.sol-controls{display:flex;gap:4px;justify-content:center}
.sol-btn{border:0;padding:6px 0;font-size:1.05rem;border-radius:8px;background:#eaf0ff;color:var(--text);width:42px;cursor:pointer;font-weight:600}
.sol-btn:disabled{opacity:.35;cursor:not-allowed}
.divider{height:1px;background:#e2e8f0;margin:14px 0}
.panel .status{min-height:42px;color:var(--sub);font-weight:700}
.timer-wrap{display:flex;align-items:center;gap:10px;margin:6px 0 4px}
.timer-label{color:var(--sub);font-size:13px}
.timer{font-size:2rem;font-weight:700;color:#4d71ff;font-variant-numeric:tabular-nums;letter-spacing:2px}
.timer.warning{color:#e67e22}
.timer.danger{color:#d9534f;animation:timer-pulse 1s ease-in-out infinite}
@keyframes timer-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.hint-text{min-height:22px;margin:2px 0 6px;color:#e67e22;font-weight:700;font-size:14px}
.piece.hint{animation:hint-glow .65s ease-in-out infinite;z-index:10}
@keyframes hint-glow{0%,100%{box-shadow:0 0 0 4px rgba(230,126,34,1),0 0 18px rgba(230,126,34,.7)}50%{box-shadow:0 0 0 10px rgba(230,126,34,0),0 0 28px rgba(230,126,34,.1)}}
.actions{display:grid;gap:8px;margin:10px 0}
button{border:0;border-radius:10px;padding:8px 12px;background:#4d71ff;color:#fff;font-weight:700;cursor:pointer}
button.ghost{background:#eaf0ff;color:var(--text)}
@media (max-width:980px){.layout{grid-template-columns:1fr}}