.puzzle-shell{max-width:800px;margin:0 auto;color:#31585c}.puzzle-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.puzzle-header h2{margin:3px 0;font-size:clamp(20px,4.8vw,28px)}.puzzle-header small{font-size:10px;letter-spacing:.13em;color:#a48256}.puzzle-header p{margin:0;font-size:12px;color:#6f8d8c}.puzzle-header .ghost-btn{flex:none}
.puzzle-hud{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:12px}.puzzle-hud>div{padding:10px 4px;border:1px solid #d4e3de;border-radius:15px;background:#fffdf7;text-align:center;box-shadow:0 3px 0 #deebe6}.puzzle-hud span{display:block;font-size:9px;letter-spacing:.08em;color:#78928d}.puzzle-hud b{font-size:21px}.puzzle-level-title{display:flex;align-items:center;gap:10px;margin:16px 3px 10px}.puzzle-level-title span{padding:5px 10px;border-radius:20px;background:#dceee8;color:#3f8178;font-size:10px;font-weight:800}.puzzle-level-title h3{font-size:16px;margin:0}
.puzzle-board{position:relative;border:2px solid #a7c6bb;border-radius:25px;overflow:hidden;box-shadow:0 6px 0 #c4d9cf;background:#e5e9ce}.puzzle-board canvas{display:block;width:100%;height:auto;touch-action:none;user-select:none;cursor:grab}.puzzle-board canvas:active{cursor:grabbing}.puzzle-result{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:#174b5759;backdrop-filter:blur(4px)}.puzzle-result[hidden]{display:none}.puzzle-result>div{width:min(100%,350px);box-sizing:border-box;background:#fffdf5;border:2px solid #fff;border-radius:24px;padding:26px 20px;text-align:center;box-shadow:0 10px 45px #234d552e}.puzzle-result #puzzleMedal{display:block;font-size:44px;color:#d29456}.puzzle-result h3{margin:9px 0;font-size:25px}.puzzle-result p{font-size:13px;line-height:1.8;color:#708981}.puzzle-result button{width:100%;margin-top:10px;border:0;padding:13px;border-radius:13px;background:#499887;color:#fff;font-weight:800;cursor:pointer}.puzzle-result #puzzleRetry{background:#eaf2ec;color:#527b71}.puzzle-result button[hidden]{display:none}
.puzzle-status{margin:18px 0 10px;padding:14px 16px;border-radius:15px;background:#fffdf7}.puzzle-status strong{font-size:14px}.puzzle-status p{font-size:12px;line-height:1.7;margin:5px 0 0;color:#738c86}.puzzle-actions{display:flex;gap:8px}.puzzle-actions button{flex:1;min-height:44px;border:1px solid #c4dad1;border-radius:12px;background:#f9fcf6;color:#477c71;font-weight:800;font-size:12px;cursor:pointer}.puzzle-actions button[aria-pressed=true]{background:#dcf0e6;border-color:#70a891}.puzzle-hint-text{font-size:12px;line-height:1.8;color:#7b9289;margin:12px 3px 23px}.puzzle-stages-title{font-size:13px;margin:0 0 10px}.puzzle-stages{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.puzzle-stages button{border:1px solid #d3e3da;border-radius:12px;min-height:43px;background:#fffdf7;color:#658c7e;font-weight:800;cursor:pointer}.puzzle-stages .selected{background:#428d7a;color:#fff;border-color:#428d7a}.puzzle-stages button:disabled{cursor:default;opacity:.45}
@media(max-width:540px){.puzzle-header{gap:8px}.puzzle-header p{font-size:10px}.puzzle-hud b{font-size:18px}.puzzle-board{border-radius:19px}.puzzle-level-title h3{font-size:14px}.puzzle-status{padding:12px}.puzzle-result>div{padding:20px 16px}.puzzle-stages{gap:6px}}