@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-top: #ffe8f5;--bg-bottom: #e8f4ff;--panel: rgba(255, 255, 255, .92);--panel-border: #ffc8dd;--accent: #7ed957;--accent-dark: #5cb83a;--gold: #ffb347;--energy: #6ec8ff;--danger: #ff8fa8;--text: #5c4a6e;--text-muted: #9a8aaa;--board-light: #fff8f0;--board-dark: #ffc8dd;--board-frame: #f4a4b8;--shadow: 0 8px 32px rgba(255, 150, 180, .25);--shadow-soft: 0 4px 16px rgba(150, 180, 220, .2)}body{font-family:Nunito,Segoe UI,sans-serif;background:linear-gradient(160deg,var(--bg-top) 0%,#fff5f8 40%,var(--bg-bottom) 100%);color:var(--text);min-height:100vh}.game-header{text-align:center;padding:.85rem 1rem .4rem}.game-header h1{font-family:Fredoka,sans-serif;font-size:1.75rem;font-weight:700;color:#e8789a;text-shadow:0 2px 0 #fff,0 3px 8px rgba(232,120,154,.3);letter-spacing:.02em}.subtitle{color:var(--text-muted);font-size:.92rem;margin-top:.2rem;font-weight:600}.game-layout{display:flex;gap:0;height:calc(100vh - 80px);padding:0 .75rem .75rem}.td-panel{flex:0 0 65%;display:flex;flex-direction:column;background:var(--panel);border-radius:24px 0 0 24px;overflow:hidden;border:3px solid var(--panel-border);border-right:none;box-shadow:var(--shadow)}.puzzle-panel{flex:0 0 35%;display:flex;flex-direction:column;align-items:center;background:var(--panel);border-radius:0 24px 24px 0;border:3px solid var(--panel-border);border-left:1px solid #ffe0ec;padding:1rem 1.25rem;gap:.85rem;overflow-y:auto;box-shadow:var(--shadow)}.td-hud{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;padding:.85rem 1.1rem;background:linear-gradient(90deg,#fff0f6,#f0f8ff);border-bottom:2px dashed #ffd6e8}.hud-item{display:flex;align-items:center;gap:.45rem;min-width:130px}.hud-label{font-size:.82rem;color:var(--text-muted);font-weight:700;white-space:nowrap}.hud-value{font-family:Fredoka,sans-serif;font-weight:600;font-size:1rem;color:var(--text)}.hud-value.gold{color:#e8a030}.bar-wrap{width:72px;height:12px;background:#fffc;border-radius:999px;overflow:hidden;border:2px solid #ffe0ec}.bar-fill{height:100%;border-radius:999px;transition:width .35s cubic-bezier(.34,1.4,.64,1)}.bar-fill.hp{background:linear-gradient(90deg,#ff8fa8,#ffb3c6);width:100%}.bar-fill.energy{background:linear-gradient(90deg,#6ec8ff,#a8e0ff);width:100%}.mute-btn{margin-left:auto;padding:.35rem .55rem;border:2px solid #ffe0ec;border-radius:10px;background:#fff;font-size:1.1rem;cursor:pointer;line-height:1;transition:transform .12s,background .12s}.mute-btn:hover{background:#fff5f8;transform:scale(1.08)}.hud-difficulty{min-width:auto}.difficulty-select{font-family:Nunito,sans-serif;font-weight:700;font-size:.82rem;color:var(--text);padding:.25rem .45rem;border:2px solid #ffe0ec;border-radius:8px;background:#fff;cursor:pointer}.difficulty-select:disabled{opacity:.6;cursor:not-allowed}.td-map-area{flex:1;min-height:0;display:flex;background:linear-gradient(180deg,#e8f8e8,#d4f0d4)}.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 10px;min-width:0;min-height:0}#td-canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:18px;box-shadow:0 8px 28px #64a07840,inset 0 0 0 3px #ffffffa6;cursor:pointer}.shop-bar{display:flex;flex-direction:row;align-items:center;gap:.75rem 1rem;padding:.65rem 1rem;background:linear-gradient(180deg,#fff8fc,#fff0f6);border-top:2px dashed #ffd6e8;flex-wrap:wrap}.shop-bar-head{flex:0 0 auto;min-width:140px}.shop-bar-head h2{font-family:Fredoka,sans-serif;font-size:.95rem;color:#e8789a;margin-bottom:.1rem}.shop-hint{font-size:.72rem;color:var(--text-muted);line-height:1.35;font-weight:600}.shop-items{display:flex;flex-direction:column;gap:.55rem}.shop-bar .shop-items{flex:1;flex-direction:row;gap:.5rem;justify-content:center}.shop-bar .shop-btn{flex:0 1 88px;flex-direction:column;align-items:center;padding:.4rem .35rem;gap:.2rem}.shop-bar .shop-btn .piece{width:28px;height:28px}.shop-bar .shop-btn .name{font-size:.75rem}.shop-bar .shop-btn .cost{font-size:.68rem}.shop-bar .shop-btn .desc{display:none}.shop-bar .wave-btn{flex:0 0 auto;padding:.55rem 1rem;white-space:nowrap}.upgrade-btn{flex:0 0 auto;padding:.55rem .85rem;background:linear-gradient(180deg,#ffe8a0,#ffd060);color:#7a5520;border:none;border-radius:12px;font-family:Fredoka,sans-serif;font-weight:600;font-size:.82rem;cursor:pointer;box-shadow:0 3px #d4a830;white-space:nowrap}.upgrade-btn:hover:not(:disabled){filter:brightness(1.05)}.upgrade-btn:disabled{opacity:.55;cursor:not-allowed}.upgrade-btn.hidden,.tower-info.hidden{display:none}.tower-info{font-family:Fredoka,sans-serif;font-size:.85rem;color:#e8789a;font-weight:600;white-space:nowrap}.shop-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .4rem;background:#fff;border:2.5px solid #ffe8f0;border-radius:16px;color:var(--text);cursor:pointer;text-align:center;transition:transform .15s,border-color .15s,box-shadow .15s;box-shadow:0 3px #ffd6e8}.shop-btn:hover{transform:translateY(-2px);border-color:#ffb6c8;box-shadow:0 5px #ffc8dd,0 8px 16px #ff96b433}.shop-btn:active{transform:translateY(1px);box-shadow:0 1px #ffd6e8}.shop-btn.selected{border-color:var(--accent);background:#f0fff0;box-shadow:0 3px #7ed957,0 6px 12px #7ed95740}.shop-btn .piece{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.12))}.shop-btn .name{font-family:Fredoka,sans-serif;font-weight:600;font-size:.9rem}.shop-btn .cost{font-size:.78rem;color:#e8a030;font-weight:800}.shop-btn .desc{font-size:.62rem;color:var(--text-muted);line-height:1.2}.wave-btn{padding:.7rem;background:linear-gradient(180deg,#8ee66a,#6ed44a);color:#fff;border:none;border-radius:14px;font-family:Fredoka,sans-serif;font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:0 4px #4cb82e,0 6px 16px #6ed44a59;transition:transform .12s,box-shadow .12s}.wave-btn:hover{transform:translateY(-1px)}.wave-btn:active{transform:translateY(2px);box-shadow:0 1px #4cb82e}.wave-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.puzzle-header{text-align:center}.puzzle-header h2{font-family:Fredoka,sans-serif;font-size:1.2rem;color:#7b9fd4}.puzzle-type{color:#e8789a;font-family:Fredoka,sans-serif;font-weight:500;font-size:.95rem;margin-top:.3rem}.puzzle-turn{display:inline-block;margin-top:.35rem;padding:.2rem .75rem;background:#fff8e8;border:2px solid #ffe8b0;border-radius:999px;color:#c9a050;font-size:.82rem;font-weight:700}.board-frame{position:relative;padding:28px;background:linear-gradient(145deg,#ffd6e8,#f4a4b8);border-radius:20px;box-shadow:0 8px 24px #f4a4b873,inset 0 2px #ffffff80}.board-coords{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.coord-file,.coord-rank{position:absolute;font-family:Fredoka,sans-serif;font-size:.7rem;font-weight:600;color:#ffffffe6;text-shadow:0 1px 2px rgba(180,80,110,.5)}.coord-file{bottom:8px;transform:translate(-50%)}.coord-rank{left:8px;transform:translateY(-50%)}.chess-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);width:min(100%,340px);aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 3px #ffffff80}.square{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .12s,box-shadow .12s}.square.light{background:var(--board-light)}.square.dark{background:var(--board-dark)}.square.selected{background:#b8e0ff!important;box-shadow:inset 0 0 0 3px #6ec8ff}.square.highlight{background:#7ed95759!important}.square.last-move{background:#ffeb968c!important}.chess-piece{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(80,60,90,.2));transition:transform .15s cubic-bezier(.34,1.5,.64,1);pointer-events:none}.square:hover .chess-piece{transform:scale(1.06)}.square.selected .chess-piece{transform:scale(1.1)}.move-dot{position:absolute;width:28%;height:28%;border-radius:50%;background:#7ed957bf;border:2px solid rgba(255,255,255,.8);box-shadow:0 2px 6px #7ed95766;pointer-events:none;animation:dotPop .25s cubic-bezier(.34,1.5,.64,1)}@keyframes dotPop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.promotion-picker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;background:#fffffff7;border:3px solid #6ec8ff;border-radius:16px;padding:.75rem 1rem;box-shadow:0 8px 28px #5064b440;animation:pop .25s cubic-bezier(.34,1.5,.64,1)}.promotion-picker.hidden{display:none}.promotion-label{margin:0 0 .5rem;font-family:Fredoka,sans-serif;font-weight:600;font-size:.9rem;color:var(--text-muted);text-align:center}.promotion-options{display:flex;gap:.45rem}.promotion-btn{width:52px;height:52px;padding:4px;border:2px solid #d0e4ff;border-radius:12px;background:#f4f8ff;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}.promotion-btn:hover{transform:scale(1.08);border-color:#6ec8ff;background:#e8f2ff}.promotion-btn img{width:100%;height:100%;object-fit:contain;pointer-events:none}.puzzle-lock{position:absolute;top:28px;right:28px;bottom:28px;left:28px;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;background:#ffffffd1;border-radius:12px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-align:center;padding:1rem;pointer-events:all;cursor:not-allowed}.puzzle-lock.hidden{display:none}.puzzle-lock-icon{font-size:2rem;line-height:1}.puzzle-lock p{margin:0;font-family:Fredoka,sans-serif;font-weight:600;font-size:.92rem;color:#7b9fd4;line-height:1.45}.puzzle-lock strong{color:#e8789a}.board-frame.puzzle-locked .chess-board{filter:saturate(.75)}.puzzle-feedback{padding:.65rem 1.4rem;border-radius:14px;font-family:Fredoka,sans-serif;font-weight:600;font-size:1.05rem;text-align:center;animation:pop .35s cubic-bezier(.34,1.5,.64,1)}.puzzle-feedback.success{background:linear-gradient(135deg,#e8ffe8,#d4ffd4);color:#4a9a4a;border:2px solid var(--accent);box-shadow:0 4px 12px #7ed9574d}.puzzle-feedback.error{background:linear-gradient(135deg,#fff0f3,#ffe0e8);color:#e06080;border:2px solid var(--danger);box-shadow:0 4px 12px #ff8fa840}.puzzle-feedback.hidden{display:none}.puzzle-info{font-size:.8rem;color:var(--text-muted);text-align:center;line-height:1.65;font-weight:600;background:#f8f8ff;padding:.65rem 1rem;border-radius:14px;border:2px dashed #d8e0ff}.puzzle-info strong{color:#5eb3ff}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#fff0f8d1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:110;padding:1rem}.tutorial-overlay.hidden{display:none}.tutorial-card{background:#fff;border:3px solid var(--panel-border);border-radius:24px;padding:1.75rem 2rem;max-width:480px;box-shadow:var(--shadow);animation:pop .4s cubic-bezier(.34,1.5,.64,1)}.tutorial-card h2{font-family:Fredoka,sans-serif;font-size:1.45rem;color:#e8789a;margin-bottom:1rem;text-align:center}.tutorial-steps{margin:0 0 1.25rem 1.1rem;color:var(--text);font-size:.92rem;line-height:1.55}.tutorial-steps li{margin-bottom:.55rem}.tutorial-btn{display:block;width:100%;padding:.75rem 1rem;background:linear-gradient(180deg,#8ee66a,#6ed44a);color:#fff;border:none;border-radius:14px;font-family:Fredoka,sans-serif;font-size:1.05rem;font-weight:600;cursor:pointer}.tutorial-btn:hover{filter:brightness(1.05)}.game-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#ffdceba6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100}.game-overlay.hidden{display:none}.overlay-card{background:#fff;border:3px solid var(--panel-border);border-radius:24px;padding:2rem 2.25rem;text-align:center;max-width:380px;box-shadow:var(--shadow);animation:pop .4s cubic-bezier(.34,1.5,.64,1)}.overlay-card h2{font-family:Fredoka,sans-serif;font-size:1.6rem;margin-bottom:.5rem;color:#e8789a}.overlay-card p{color:var(--text-muted);margin-bottom:1.35rem;font-weight:600}#restart-btn{padding:.75rem 1.75rem;background:linear-gradient(180deg,#8ee66a,#6ed44a);color:#fff;border:none;border-radius:14px;font-family:Fredoka,sans-serif;font-weight:600;font-size:1.05rem;cursor:pointer;box-shadow:0 4px #4cb82e}@keyframes pop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:900px){.game-layout{flex-direction:column;height:auto}.td-panel,.puzzle-panel{flex:none;border-radius:20px;border:3px solid var(--panel-border)}.td-map-area{min-height:380px}.shop-bar{flex-direction:column;align-items:stretch}.shop-bar .shop-items{flex-wrap:wrap}.shop-bar .wave-btn{width:100%}}
