@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #ffffff;--surface: #f5f0ff;--text: #3b3552;--text-muted: #9890ab;--accent: #ff6b8a;--success: #5cd68a;--warning: #ffcf4a;--square-light: #fff4d6;--square-dark: #d4b896;--square-selected: #a0d8f8;--fog: rgba(220, 210, 240, .88);--legal-move: rgba(100, 80, 160, .25)}body{font-family:Nunito,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;justify-content:center}#root{width:100%}.app{display:flex;flex-direction:column;align-items:center;padding:1rem;min-height:100vh}.header{text-align:center;margin-bottom:1rem}.pawnhaze-logo{width:clamp(220px,60vw,380px);height:auto;display:block;margin:0 auto}.pawnhaze-logo text{font-family:Nunito,sans-serif;font-weight:800;font-size:42px;fill:var(--text);stroke:var(--text);stroke-width:1.5px;paint-order:stroke fill}.logo-letter{opacity:0;animation:logoLetterIn .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes logoLetterIn{0%{opacity:0;transform:translateY(-20px) scale(.5)}60%{opacity:1;transform:translateY(4px) scale(1.05)}80%{transform:translateY(-2px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.subtitle{color:var(--text-muted);font-size:.85rem;margin-top:.25rem}.main{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:500px}.no-puzzle{text-align:center;padding:2rem;color:var(--text-secondary, #888);font-size:1.1rem}.board-container{width:100%;max-width:480px}.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1;border:3px solid #d8d0e8;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px #8c78b426}.square{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;aspect-ratio:1}.square-light{background:var(--square-light)}.square-dark{background:var(--square-dark)}.square-selected{background:var(--square-selected)!important;box-shadow:inset 0 0 0 3px #7bbfea}.square-legal-move{cursor:pointer}.square-wrong:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent);z-index:1;animation:wrong-flash .5s ease-in-out forwards;pointer-events:none}@keyframes wrong-flash{0%{opacity:.7}to{opacity:0}}.piece{width:85%;height:85%;z-index:2;pointer-events:none;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(80,60,120,.2))}.fog-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--fog);z-index:3;display:flex;align-items:center;justify-content:center}.fog-overlay:after{content:"?";color:#64508c40;font-size:1.2rem;font-weight:700}.legal-move-dot{width:25%;height:25%;border-radius:50%;background:var(--legal-move);z-index:2}.board-labels{margin-top:.25rem}.file-labels{display:grid;grid-template-columns:repeat(8,1fr);text-align:center;color:var(--text-muted);font-size:.75rem}.game-info{width:100%;max-width:480px;text-align:center}.puzzle-header{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.75rem}.mate-badge{background:var(--accent);color:#fff;padding:.2rem .6rem;border-radius:20px;font-size:.8rem;font-weight:600;box-shadow:0 2px 6px #ff6b8a40}.turn-badge{color:var(--text-muted);font-size:.85rem}.attempts{display:flex;align-items:center;justify-content:center;gap:.35rem;margin-bottom:.75rem}.attempt-dot{width:12.5%;aspect-ratio:1;border-radius:4px;border:2px solid #d8d0e8;transition:background .3s}.attempt-dot.remaining{background:#d8d0e8}.attempt-dot.used{background:var(--accent)}.attempt-dot.solved{background:var(--success)}@keyframes attempt-shake{0%,to{transform:translate(0)}15%{transform:translate(-3px) rotate(-2deg)}30%{transform:translate(3px) rotate(2deg)}45%{transform:translate(-2px) rotate(-1deg)}60%{transform:translate(2px) rotate(1deg)}75%{transform:translate(-1px)}}.attempt-dot.shake,.piece-shake{animation:attempt-shake .5s ease-in-out}.attempts-text{margin-left:.5rem;color:var(--text-muted);font-size:.85rem}.actions{display:flex;gap:.75rem;justify-content:center}.btn{padding:.6rem 1.2rem;border:none;border-radius:16px;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .2s,transform .1s;box-shadow:0 2px 8px #8c78b41f}.btn:hover{opacity:.9;transform:translateY(-1px)}.btn:active{transform:scale(.97) translateY(0);box-shadow:0 1px 3px #8c78b41a}.btn-share{background:var(--accent);color:#fff}.btn-close{background:#fff;color:var(--text-muted);border:1px solid #d8d0e8}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#64508c66;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .1s ease-out}.modal{background:var(--surface);border:1px solid #e0d8f0;border-radius:24px;padding:1.5rem;box-shadow:0 8px 32px #8c78b433;max-width:360px;width:90%;text-align:center}.modal h3{margin-bottom:1rem;font-size:1.2rem}.share-preview{background:var(--bg);padding:1rem;border-radius:16px;font-family:inherit;box-shadow:inset 0 2px 6px #8c78b414;font-size:.85rem;white-space:pre-wrap;text-align:left;margin-bottom:1rem;color:var(--text)}.modal-actions{display:flex;gap:.75rem;justify-content:center}.difficulty-badge{font-size:.85rem;font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:.2rem}.difficulty-pawns{display:inline-flex;align-items:center;gap:1px}.btn-next{background:var(--success);color:#fff}.move-nav{display:flex;align-items:center;gap:.25rem}.btn-nav{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid #d8d0e8;border-radius:10px;background:#fff;color:var(--text-muted);cursor:pointer;transition:opacity .2s,transform .1s,color .2s;padding:0}.btn-nav:hover:not(:disabled){color:var(--text);transform:translateY(-1px)}.btn-nav:active:not(:disabled){transform:scale(.95)}.btn-nav:disabled{opacity:.3;cursor:default}.move-counter{font-size:.8rem;font-weight:600;color:var(--text-muted);min-width:2.5rem;text-align:center}.level-progress{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;padding:.75rem;background:var(--bg);border-radius:12px}.level-row{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;border-radius:8px;font-size:.85rem}.level-row.level-current{background:#a0d8f833;font-weight:700}.level-row.level-won .level-status-icon{color:var(--success);font-weight:700}.level-row.level-lost .level-status-icon{color:var(--accent);font-weight:700}.level-row.level-locked{opacity:.4}.level-pawns{min-width:3rem;display:inline-flex;align-items:center;gap:1px}.pawn-icon{display:inline-block;vertical-align:middle}.pawn-icons{display:inline-flex;align-items:center;gap:1px}.level-label{flex:1;text-align:left}.level-status-icon{min-width:1.5rem;text-align:center}.help-btn{position:fixed;top:1rem;right:1rem;background:none;border:none;cursor:pointer;padding:.25rem;z-index:50;opacity:.5;transition:opacity .2s}.help-btn:hover{opacity:1}.modal-instructions{background:var(--surface);border:1px solid #e0d8f0;border-radius:24px;padding:1.5rem;box-shadow:0 8px 32px #8c78b433;max-width:420px;width:92%;max-height:85vh;overflow-y:auto;text-align:center;position:relative}.modal-instructions-close{position:absolute;top:.75rem;right:.75rem;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1.5rem;line-height:1;padding:.25rem;transition:color .2s}.modal-instructions-close:hover{color:var(--text)}.modal-instructions h2{font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:1rem}.modal-instructions h3{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:.75rem}.instruction-page{min-height:280px;display:flex;flex-direction:column;align-items:center;gap:.75rem}.instruction-page p{font-size:.9rem;line-height:1.6;color:var(--text);text-align:center}.instruction-page .highlight{font-weight:700;color:var(--accent)}.page-dots{display:flex;gap:.5rem;justify-content:center;margin:1rem 0 .75rem}.page-dot{width:8px;height:8px;border-radius:50%;background:#d8d0e8;transition:background .3s,transform .3s}.page-dot.active{background:var(--accent);transform:scale(1.3)}.instruction-nav{display:flex;justify-content:center}.btn-lets-play{background:var(--success);color:#fff}.fog-demo{width:180px;height:180px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);border:2px solid #d8d0e8;border-radius:12px;overflow:hidden;margin:.5rem auto}.fog-demo-square{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1}.fog-demo-square.demo-light{background:var(--square-light)}.fog-demo-square.demo-dark{background:var(--square-dark)}.fog-demo-fog{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--fog);z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease}.fog-demo-fog:after{content:"?";color:#64508c40;font-size:.9rem;font-weight:700}.fog-demo-fog.fog-clear{opacity:0}.fog-demo-piece{width:75%;height:75%;z-index:2;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(80,60,120,.2));animation:piece-appear .3s ease-out}@keyframes piece-appear{0%{transform:scale(.5);opacity:.5}to{transform:scale(1);opacity:1}}.move-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:12px;font-size:.85rem;font-weight:600;width:100%;max-width:260px}.move-indicator.move-correct{background:#5cd68a26;border:1px solid rgba(92,214,138,.3);color:#3aaf66}.move-indicator.move-wrong{background:#ff6b8a26;border:1px solid rgba(255,107,138,.3);color:var(--accent)}.move-indicator-icon{font-size:1.1rem}@media(prefers-reduced-motion:reduce){.fog-demo-fog{transition:none}.fog-demo-piece{animation:none}}@media(max-width:500px){.app{padding:.5rem}.piece{width:90%;height:90%}.help-btn{top:.5rem;right:.5rem}.modal-instructions{width:95%;padding:1rem;max-height:90vh}.fog-demo{width:150px;height:150px}.instruction-page{min-height:240px}}@media(min-width:768px){.board-container{max-width:480px}}