*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a12;--bg2:#12121e;--surface:#1a1a2e;--border:#2a2a44;--text:#e8e8f0;--text-dim:#889;--fire:#ff4500;--fire2:#ff6b35;--water:#09f;--water2:#00bfff;--nature:#2c4;--nature2:#32cd32;--glass:#ffffff0a;--glass-border:#ffffff14;--bg-glass:#0a0a12b8;--radius:12px;--header-bg:var(--surface);--status-info-bg:#1e3a5f;--status-info-color:#60a5fa;--status-error-bg:#5f1e1e;--status-error-color:#f87171;--status-success-bg:#1e5f1e;--status-success-color:#4ade80;--slider-track:#333;--slider-thumb:var(--water);--eval-marker:#fff;--move-hover:#2a2a44;--move-current:#1e3a5f;--btn-primary:var(--water);--btn-primary-hover:var(--water2)}[data-theme=light]{--bg:#f8f9fa;--bg2:#e9ecef;--surface:#fff;--border:#dee2e6;--text:#1a1a2e;--text-dim:#6c757d;--fire:#dc2626;--fire2:#ef4444;--water:#2563eb;--water2:#3b82f6;--nature:#16a34a;--nature2:#22c55e;--glass:#0000000a;--glass-border:#00000014;--header-bg:var(--surface);--bg-glass:#f8f9fac7;--status-info-bg:#dbeafe;--status-info-color:#1e40af;--status-error-bg:#fee2e2;--status-error-color:#dc2626;--status-success-bg:#dcfce7;--status-success-color:#16a34a;--slider-track:#ccc;--slider-thumb:var(--water);--eval-marker:#000;--move-hover:#e9ecef;--move-current:#dbeafe;--btn-primary:var(--water);--btn-primary-hover:var(--water2)}body{background:var(--bg);color:var(--text);background-image:radial-gradient(at 20%,#22cc440a 0%,#0000 50%),radial-gradient(at 80%,#0099ff0a 0%,#0000 50%),radial-gradient(at 50% 90%,#ff45000a 0%,#0000 50%);min-height:100vh;font-family:Outfit,sans-serif;overflow-x:hidden}#app{max-width:1200px;margin:0 auto;padding:0 1rem 1rem}header{z-index:100;text-align:center;background:var(--bg-glass,#0a0a12b8);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);margin:0 -1rem 1rem;padding:.9rem 0 .7rem;position:sticky;top:0}header h1{letter-spacing:-1px;background:linear-gradient(135deg, var(--fire), var(--nature), var(--water));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2.4rem;font-weight:800}.subtitle{color:var(--text-dim);margin-top:.3rem;font-size:.95rem;font-weight:300}#main{justify-content:center;align-items:flex-start;gap:1.5rem;max-width:1400px;margin:0 auto;display:flex}.sidebar{flex-direction:column;flex-shrink:0;gap:1rem;width:220px;display:flex}.faction-panel{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:1rem;transition:all .3s}.faction-panel h2{margin-bottom:.3rem;font-size:1.1rem;font-weight:600}.faction-panel.nature h2{color:var(--nature)}.faction-panel.water h2{color:var(--water)}.faction-panel.fire h2{color:var(--fire)}.rps-hint{color:var(--text-dim);font-size:.85rem}.faction-panel.eliminated{opacity:.3;filter:grayscale()}.faction-header{justify-content:space-between;align-items:baseline;margin-bottom:.5rem;display:flex}.captured-pieces{border-top:1px solid var(--glass-border);flex-wrap:wrap;gap:4px;min-height:24px;padding-top:.5rem;display:flex}.captured-piece{opacity:.7;font-size:1.2rem;transition:transform .3s}.captured-piece:hover{opacity:1;transform:scale(1.2)}.rps-diagram{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:.8rem}.rps-cycle{flex-wrap:wrap;justify-content:center;align-items:center;gap:.25rem;font-size:1.1rem;display:flex}.rps-arrow{color:var(--text-dim);font-size:.9rem}#board-container{flex-direction:column;flex:1;align-items:center;max-width:800px;display:flex}#turn-bar{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;width:100%;margin-bottom:.8rem;padding:.55rem 1.4rem;font-size:.95rem;display:flex;box-shadow:0 2px 10px #0000002e}#turn-bar>span:first-child{color:var(--text-dim)}#turn-indicator{font-weight:700}#status{color:var(--text);font-weight:600}#board-svg{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;max-width:650px;height:auto}#board-svg .hex-cell{pointer-events:auto}.controls{flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1rem;display:flex}.controls button{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-height:44px;color:var(--text);cursor:pointer;padding:.6rem 1.1rem;font-family:inherit;font-size:.92rem;font-weight:600;transition:all .2s}.controls button:hover{background:var(--glass);border-color:var(--text-dim);transform:translateY(-1px)}.controls button.active{border-color:var(--nature);color:var(--nature);background:#22cc4426}.btn-group{background:var(--bg2);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;padding:.35rem;display:flex}.btn-group+.btn-group{margin-left:.2rem}.btn-group-label{text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);-webkit-user-select:none;user-select:none;white-space:nowrap;align-self:center;padding:0 .3rem 0 .5rem;font-size:.62rem;font-weight:700}.controls button.btn-primary{background:linear-gradient(135deg, var(--nature), var(--water));color:#fff;border-color:#0000;font-weight:700}.controls button.btn-primary:hover{background:linear-gradient(135deg, var(--nature2), var(--water2));border-color:#0000;transform:translateY(-1px);box-shadow:0 4px 14px #22cc4459}.controls button.btn-primary.active{background:linear-gradient(135deg, var(--nature), var(--water));color:#fff;border-color:#0000}.controls button.btn-ghost{border:1px solid var(--border);background:0 0;min-width:44px;min-height:44px;padding:.55rem .75rem;font-size:1.1rem;line-height:1}.controls button.btn-ghost:hover{background:var(--glass);border-color:var(--text-dim)}@media (max-width:800px){.btn-group-label{text-align:center;width:100%;padding:.2rem .4rem}.controls{gap:.5rem}}#panel-general .setting-select{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);min-width:160px;color:var(--text);cursor:pointer;padding:.5rem .75rem;font-family:inherit;font-size:.9rem;font-weight:500;transition:border-color .2s}#panel-general .setting-select:hover{border-color:var(--water)}#panel-general .setting-select:focus-visible{outline:2px solid var(--water);outline-offset:2px}#panel-general #depth-slider{accent-color:var(--water)}#panel-general #depth-label{color:var(--water);text-align:right;min-width:64px;font-weight:600}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.btn-group:focus-within{outline:2px solid var(--water);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.rps-toggle-container{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:.8rem;padding:0 1rem;display:flex}.toggle-label{color:var(--text-dim);font-size:.85rem;font-weight:600}.switch{width:42px;height:22px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:var(--border);transition:all .3s;position:absolute;inset:0}.slider:before{content:"";background-color:var(--text-dim);width:16px;height:16px;transition:all .3s;position:absolute;bottom:3px;left:3px}input:checked+.slider{background-color:#0099ff4d}input:checked+.slider:before{background-color:var(--water);transform:translate(20px)}.slider.round{border-radius:22px}.slider.round:before{border-radius:50%}.rps-inactive{opacity:.2;filter:blur(1px)grayscale();pointer-events:none;transition:all .4s}.rps-hint.hidden{visibility:hidden;opacity:0}.history-panel{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);flex-direction:column;flex:1;min-height:200px;max-height:400px;padding:1rem;display:flex}.history-panel h3{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:.8rem;font-size:.9rem}#move-log{flex-direction:column;flex:1;gap:.5rem;padding-right:.5rem;font-size:.85rem;display:flex;overflow-y:auto}#move-log::-webkit-scrollbar{width:4px}#move-log::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.move-entry{background:#ffffff08;border-left:3px solid #0000;border-radius:6px;padding:.4rem .6rem;animation:.3s slide-in}.move-entry.fire{border-left-color:var(--fire)}.move-entry.water{border-left-color:var(--water)}.move-entry.nature{border-left-color:var(--nature)}.move-piece{margin-right:.3rem;font-weight:600}.move-coords{color:var(--text-dim);font-family:monospace}.move-type-combat{color:#f55;font-weight:800}@keyframes slide-in{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.hex-polygon{fill:var(--surface);stroke:var(--border);stroke-width:1.5px;cursor:pointer;transition:fill .15s,stroke .15s,filter .15s}.hex-polygon:hover{stroke:var(--text-dim);stroke-width:2px}.hex-label{fill:var(--text-dim);opacity:.6;pointer-events:none;font-family:monospace;font-size:10px}.zone-triangle{fill:#1e1e32;stroke:#3a3a55}.zone-start_fire{fill:#2a1008;stroke:#5a2510}.zone-start_water{fill:#081a2e;stroke:#10355a}.zone-start_nature{fill:#0a2210;stroke:#155a20}.zone-start_fire:hover{fill:#3a1510}.zone-start_water:hover{fill:#102a40}.zone-start_nature:hover{fill:#123218}.zone-triangle:hover{fill:#282848}.highlight-move{filter:url(#glow);animation:1.2s ease-in-out infinite pulse-move;fill:#64c8ff33!important;stroke:#64c8ff99!important;stroke-width:2.5px!important}.highlight-attack{filter:url(#glow);animation:.8s ease-in-out infinite pulse-attack;fill:#ff505040!important;stroke:#ff5050b3!important;stroke-width:2.5px!important}.highlight-attack-advantage{filter:url(#glow);animation:.8s ease-in-out infinite pulse-attack;fill:#22cc444d!important;stroke:#2c4c!important;stroke-width:2.5px!important}.highlight-attack-disadvantage{filter:url(#glow);animation:.6s ease-in-out infinite pulse-danger;fill:#ff141459!important;stroke:#ff1414e6!important;stroke-width:2.5px!important}.highlight-check{filter:url(#glow);animation:.6s ease-in-out infinite pulse-danger;fill:#ff00004d!important;stroke:#ff0000e6!important;stroke-width:3px!important}.selected{filter:url(#glow);fill:#ffff6426!important;stroke:#ffff64b3!important;stroke-width:3px!important}@keyframes pulse-move{0%,to{fill-opacity:.2}50%{fill-opacity:.35}}@keyframes pulse-attack{0%,to{fill-opacity:.25}50%{fill-opacity:.45}}@keyframes pulse-danger{0%,to{fill-opacity:.3;stroke-width:2.5px}50%{fill-opacity:.5;stroke-width:3.5px}}.piece{pointer-events:none}.piece-bg{fill:var(--bg);stroke-width:2px;opacity:.92}.piece-fire .piece-bg{stroke:var(--fire);fill:#1a0800}.piece-water .piece-bg{stroke:var(--water);fill:#001a2e}.piece-nature .piece-bg{stroke:var(--nature);fill:#002a08}.piece-symbol{fill:#fff;font-weight:600}#combat-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;opacity:0;pointer-events:none;background:#00000080;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}#combat-overlay.visible{opacity:1;pointer-events:none}#combat-overlay.visible .combat-box{pointer-events:auto}.combat-box{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:20px;max-width:420px;padding:2.5rem;animation:.4s combat-appear}.combat-fighters{justify-content:center;align-items:center;gap:1.5rem;margin-bottom:1.5rem;display:flex}.fighter{flex-direction:column;align-items:center;gap:.4rem;display:flex}.fighter-symbol{font-size:3rem}.fighter-name{font-size:.95rem;font-weight:600}.combat-vs{color:var(--text-dim);font-size:2rem;font-weight:800}.combat-result{border-radius:var(--radius);margin-bottom:.5rem;padding:.8rem;font-size:1.15rem;font-weight:600}.combat-result.advantage{color:var(--nature);background:#22cc4426}.combat-result.disadvantage{color:var(--fire);background:#ff450026}.combat-elimination{color:#f55;margin-top:.8rem;font-size:1.3rem;font-weight:800}.combat-checkmate{color:#f44;margin-top:.8rem;font-size:1.3rem;font-weight:800}.combat-stalemate{color:#a8f;margin-top:.8rem;font-size:1.2rem;font-weight:800}.combat-check{color:#fa0;margin-top:.5rem;font-size:1.1rem;font-weight:600}.combat-winner{background:linear-gradient(135deg, var(--fire), var(--nature), var(--water));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-top:.8rem;font-size:1.5rem;font-weight:800}.combat-stop-btn{border:1px solid var(--fire);color:var(--fire);border-radius:var(--radius);cursor:pointer;background:#ff45001a;margin-top:1.5rem;padding:.8rem 1.5rem;font-family:inherit;font-weight:600;transition:all .2s}.combat-stop-btn:hover{background:var(--fire);color:#fff;transform:translateY(-2px)}@keyframes combat-appear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}#promotion-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;opacity:0;pointer-events:none;background:#00000080;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}#promotion-overlay.visible{opacity:1;pointer-events:auto}.promotion-box{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:20px;max-width:380px;padding:2rem;animation:.4s combat-appear}.promotion-title{color:var(--text);margin-bottom:1.2rem;font-size:1.2rem;font-weight:600}.promotion-choices{justify-content:center;gap:.8rem;display:flex}.promotion-choice{border:2px solid var(--border);background:var(--bg2);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;width:64px;height:64px;font-family:inherit;transition:all .2s;display:flex}.promotion-choice:hover{border-color:var(--text-dim);transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.promotion-choice .choice-symbol{font-size:2rem;line-height:1}.promotion-choice .choice-name{color:var(--text-dim);margin-top:.2rem;font-size:.65rem}.promotion-choice .choice-key{color:var(--text-dim);opacity:.6;margin-top:.15rem;font-family:monospace;font-size:.55rem;font-weight:600}.promotion-options{border-top:1px solid var(--border);margin-top:1.5rem;padding-top:1rem}.auto-queen-label{color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.auto-queen-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--water);cursor:pointer}.auto-queen-label:hover{color:var(--text)}#eval-bar-container{width:100%;max-width:650px;margin-bottom:.5rem}#eval-bar{background:var(--border);border-radius:4px;height:8px;transition:all .3s;display:flex;overflow:hidden}.eval-segment{min-width:2%;height:100%;transition:width .5s}.eval-segment.fire{background:var(--fire)}.eval-segment.nature{background:var(--nature)}.eval-segment.water{background:var(--water)}#eval-labels{justify-content:space-between;margin-top:.3rem;padding:0 .2rem;display:flex}.eval-label{opacity:.7;font-size:.85rem;transition:opacity .3s}@media (max-width:800px){.replay-controls{flex-wrap:wrap;gap:.5rem}.replay-btn-group{gap:.2rem;display:flex}.replay-btn-group button{min-width:36px;padding:.4rem .6rem;font-size:1rem}#replay-speed{width:60px!important}#replay-move-info{font-size:.85rem}}.replay-controls{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-wrap:wrap;align-items:center;gap:1rem;padding:.5rem 1rem;display:flex}.replay-btn-group{gap:.3rem;display:flex}.replay-btn-group button{background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:8px;min-width:44px;padding:.5rem .8rem;font-size:1.1rem;transition:all .2s}.replay-btn-group button:hover:not(:disabled){background:var(--glass);border-color:var(--text-dim);transform:translateY(-1px)}.replay-btn-group button:disabled{opacity:.4;cursor:not-allowed}.replay-btn-group button#replay-play{background:var(--nature);border-color:var(--nature);color:#fff}.replay-btn-group button#replay-play:hover:not(:disabled){background:var(--nature2);border-color:var(--nature2)}.replay-btn-group button#replay-pause{background:var(--fire);border-color:var(--fire);color:#fff}.replay-info{color:var(--text-dim);align-items:center;gap:1rem;font-size:.9rem;display:flex}#replay-move-info{color:var(--text);min-width:80px;font-weight:600}#replay-speed{accent-color:var(--water)}.move-entry.current-move{font-weight:600;background:#ffff6426!important;border-left-color:gold!important}@media (max-width:800px){#app{padding:.5rem}#main{flex-direction:column;align-items:center;gap:.8rem}.sidebar{flex-flow:wrap;justify-content:center;gap:.5rem;width:auto}.sidebar .faction-panel{min-width:140px;padding:.5rem}.sidebar .faction-panel h2{font-size:.9rem}.sidebar .rps-diagram{display:none}header h1{font-size:1.6rem}.subtitle{font-size:.8rem}#board-container,#board-svg{max-width:100%}.controls{gap:.4rem;padding:0 .5rem}.controls button{padding:.5rem .8rem;font-size:.8rem}.rps-toggle-container{padding:0 .6rem}#turn-bar{padding:.5rem 1rem;font-size:.9rem}.history-panel{min-height:100px;max-height:200px}.faction-header{flex-direction:column;align-items:flex-start}.rps-hint{font-size:.75rem}.combat-box{max-width:90vw;padding:1.5rem}.fighter-symbol{font-size:2rem}.combat-vs{font-size:1.5rem}.combat-result{font-size:1rem}.promotion-box{max-width:90vw;padding:1.5rem}.promotion-choice{width:52px;height:52px}.promotion-choice .choice-symbol{font-size:1.5rem}#eval-bar-container{max-width:100%}#eval-bar{height:6px}.eval-label{font-size:.75rem}}.piece-context-menu{z-index:2000;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:220px;max-width:280px;padding:.5rem 0;animation:.15s context-menu-appear;position:fixed;box-shadow:0 8px 32px #0006}@keyframes context-menu-appear{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-header{color:var(--text);border-bottom:1px solid var(--border);padding:.5rem 1rem;font-size:.9rem;font-weight:600}.context-menu-divider{background:var(--border);height:1px;margin:.3rem 0}.context-menu-item{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;gap:.6rem;padding:.6rem 1rem;font-family:inherit;font-size:.9rem;transition:background .15s;display:flex}.context-menu-item:hover{background:var(--glass)}.context-menu-item.context-menu-danger{color:var(--fire)}.context-menu-item.context-menu-danger:hover{background:#ff45001a}.context-menu-icon{flex-shrink:0;font-size:1.1rem}#puzzle-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;opacity:0;pointer-events:none;background:#0009;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}#puzzle-overlay.visible{opacity:1;pointer-events:auto}.puzzle-box{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:20px;width:90vw;max-width:500px;max-height:90vh;padding:2rem;animation:.4s combat-appear;overflow-y:auto}.puzzle-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.puzzle-title{background:linear-gradient(135deg, var(--fire), var(--nature), var(--water));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.4rem;font-weight:700}.puzzle-close-btn{border:1px solid var(--border);background:var(--bg2);width:36px;height:36px;color:var(--text-dim);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex}.puzzle-close-btn:hover{background:var(--fire);border-color:var(--fire);color:#fff;transform:rotate(90deg)}.puzzle-info{flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:1.5rem;font-size:.85rem;display:flex}.puzzle-info-item{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);color:var(--text-dim);align-items:center;gap:.4rem;padding:.4rem .8rem;display:flex}.puzzle-info-item strong{color:var(--text)}.puzzle-difficulty{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;padding:.3rem .8rem;font-size:.75rem;font-weight:600;display:inline-block}.puzzle-difficulty.easy{color:var(--nature);border:1px solid var(--nature);background:#22cc4426}.puzzle-difficulty.medium{color:var(--water);border:1px solid var(--water);background:#0099ff26}.puzzle-difficulty.hard{color:var(--fire);border:1px solid var(--fire);background:#ff450026}.puzzle-board-container{margin:1.5rem 0;position:relative}.puzzle-board-container svg{max-width:100%;height:auto}.puzzle-solution-list{text-align:left;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);max-height:300px;margin:1.5rem 0;padding:1rem;overflow-y:auto}.puzzle-solution-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.8rem;font-size:.9rem;font-weight:600}.puzzle-move{background:var(--surface);border:1px solid var(--border);border-radius:8px;align-items:center;gap:.6rem;margin:.3rem 0;padding:.5rem .8rem;transition:all .2s;display:flex}.puzzle-move.current{border-color:var(--water);background:#0099ff1a}.puzzle-move.correct{border-color:var(--nature);background:#22cc441a}.puzzle-move.wrong{border-color:var(--fire);background:#ff45001a}.puzzle-move-number{width:28px;color:var(--text-dim);text-align:right;font-family:monospace;font-size:.8rem;font-weight:600}.puzzle-move-san{color:var(--text);flex:1;font-family:monospace;font-size:.85rem}.puzzle-move-status{border-radius:10px;padding:.15rem .5rem;font-size:.7rem;font-weight:600}.puzzle-move-status.pending{color:var(--text-dim);background:0 0}.puzzle-move-status.current{color:var(--water);background:#0099ff26}.puzzle-move-status.correct{color:var(--nature);background:#22cc4426}.puzzle-move-status.wrong{color:var(--fire);background:#ff450026}.puzzle-actions{flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1.5rem;display:flex}.puzzle-btn{border-radius:var(--radius);cursor:pointer;border:none;padding:.7rem 1.3rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:all .2s}.puzzle-btn.primary{background:linear-gradient(135deg, var(--water), var(--nature));color:#fff}.puzzle-btn.primary:hover{transform:translateY(-2px);box-shadow:0 4px 16px #09f6}.puzzle-btn.secondary{background:var(--bg2);color:var(--text);border:1px solid var(--border)}.puzzle-btn.secondary:hover{background:var(--glass);border-color:var(--text-dim)}.puzzle-btn.danger{background:var(--fire);color:#fff}.puzzle-btn.danger:hover{background:#ff6b35;transform:translateY(-2px)}.puzzle-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.puzzle-progress{background:var(--border);border-radius:2px;height:4px;margin:1rem 0;overflow:hidden}.puzzle-progress-bar{background:linear-gradient(90deg, var(--fire), var(--nature), var(--water));border-radius:2px;height:100%;transition:width .3s}.puzzle-timer{color:var(--water);margin:.5rem 0;font-family:monospace;font-size:1.1rem;font-weight:600}.puzzle-result{text-align:center;border-radius:var(--radius);margin:1rem 0;padding:1.5rem}.puzzle-result.success{border:1px solid var(--nature);background:#22cc4426}.puzzle-result.failed{border:1px solid var(--fire);background:#ff450026}.puzzle-result-title{margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.puzzle-result.success .puzzle-result-title{color:var(--nature)}.puzzle-result.failed .puzzle-result-title{color:var(--fire)}.puzzle-result-stats{color:var(--text-dim);flex-wrap:wrap;justify-content:center;gap:1.5rem;font-size:.9rem;display:flex}.puzzle-result-stats strong{color:var(--text)}.puzzle-hint-toast{background:var(--surface);border:1px solid var(--water);border-radius:var(--radius);color:var(--water);z-index:1100;opacity:0;padding:1rem 1.5rem;font-weight:600;transition:all .3s;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 8px 32px #0099ff4d}.puzzle-hint-toast.visible{opacity:1;transform:translate(-50%)translateY(0)}@media (max-width:600px){.puzzle-box{max-width:95vw;padding:1.5rem}.puzzle-title{font-size:1.2rem}.puzzle-info{gap:.5rem}.puzzle-info-item{padding:.3rem .6rem;font-size:.75rem}.puzzle-actions{flex-direction:column}.puzzle-btn{width:100%}.puzzle-move{flex-wrap:wrap}.puzzle-move-number{width:auto;margin-right:.5rem}}#settings-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;opacity:0;pointer-events:none;background:#0009;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}#settings-overlay.visible{opacity:1;pointer-events:auto}.settings-box{background:var(--surface);border:1px solid var(--border);border-radius:20px;flex-direction:column;width:90vw;max-width:520px;max-height:85vh;padding:0;animation:.4s combat-appear;display:flex;overflow:hidden}.settings-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.settings-header h2{font-size:1.3rem;font-weight:700}.settings-close-btn{border:1px solid var(--border);background:var(--bg2);width:36px;height:36px;color:var(--text-dim);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;transition:all .2s;display:flex}.settings-close-btn:hover{background:var(--fire);border-color:var(--fire);color:#fff;transform:rotate(90deg)}.settings-tabs{border-bottom:1px solid var(--border);background:var(--bg2);display:flex}.settings-tab{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;flex:1;padding:1rem;font-size:.9rem;font-weight:600;transition:all .2s}.settings-tab:hover{color:var(--text);background:var(--surface)}.settings-tab.active{color:var(--water);border-bottom-color:var(--water);background:var(--surface)}.settings-content{flex:1;padding:1.5rem 2rem;overflow-y:auto}.settings-panel{display:none}.settings-panel.active{animation:.2s fadeIn;display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.setting-group{margin-bottom:1.5rem}.setting-group h3{color:var(--text);margin-bottom:.5rem;font-size:1rem;font-weight:700}.setting-desc{color:var(--text-dim);margin-bottom:1rem;font-size:.85rem;line-height:1.5}.setting-desc code{background:var(--bg);border-radius:4px;padding:.15rem .4rem;font-family:monospace;font-size:.8rem}.setting-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.setting-row label{min-width:160px;font-size:.9rem;font-weight:500}.setting-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--water);cursor:pointer}.slider-with-value{flex:1;align-items:center;gap:.75rem;max-width:280px;display:flex}.slider-with-value input[type=range]{accent-color:var(--water);flex:1}.slider-with-value span{text-align:right;min-width:40px;color:var(--water);font-size:.9rem;font-weight:600}.personality-checkboxes{flex-wrap:wrap;gap:.75rem;margin-top:.5rem;display:flex}.checkbox-label{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.85rem;transition:all .2s;display:flex}.checkbox-label:hover{border-color:var(--water);background:var(--surface)}.checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--water)}.btn-primary{background:linear-gradient(135deg, var(--water), var(--water2));border-radius:var(--radius);color:#fff;cursor:pointer;border:none;width:100%;margin-top:.5rem;padding:.875rem 1.5rem;font-size:1rem;font-weight:700;transition:all .2s}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px #09f6}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.progress-container{width:100%;margin-top:.5rem}.progress-bar{background:var(--bg);border-radius:4px;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--water), var(--nature));border-radius:4px;width:0%;height:100%;transition:width .3s}#ab-progress-text{color:var(--text-dim);text-align:center;margin-top:.5rem;font-size:.85rem;display:block}.result-text{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);width:100%;color:var(--text);white-space:pre-wrap;min-height:60px;padding:1rem;font-family:monospace;font-size:.85rem}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin:1rem 0;display:grid}.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:1rem;transition:all .2s}.stat-card:hover{border-color:var(--water);transform:translateY(-2px);box-shadow:0 4px 12px #0099ff26}.stat-value{color:var(--water);margin-bottom:.25rem;font-family:monospace;font-size:1.5rem;font-weight:700;display:block}.stat-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem}.buttons-row{flex-wrap:wrap;gap:.75rem;margin-top:.5rem;display:flex}.btn-secondary{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);min-width:140px;color:var(--text);cursor:pointer;flex:1;padding:.75rem 1rem;font-size:.85rem;font-weight:600;transition:all .2s}.btn-secondary:hover{background:var(--surface);border-color:var(--water);color:var(--water)}.btn-danger{background:var(--bg2);border-radius:var(--radius);color:#dc2626;cursor:pointer;border:1px solid #dc2626;flex:1;min-width:140px;padding:.75rem 1rem;font-size:.85rem;font-weight:600;transition:all .2s}.btn-danger:hover{color:#fff;background:#dc2626;border-color:#dc2626}.toggle-btn{border:1px solid var(--border);background:var(--bg2);width:36px;height:36px;color:var(--text);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex}.toggle-btn:hover{background:var(--btn-primary);border-color:var(--btn-primary);color:#fff;transform:scale(1.1)}.toggle-btn.active{background:var(--btn-primary);border-color:var(--btn-primary);color:#fff}@media (max-width:600px){.settings-box{max-width:95vw;max-height:90vh;padding:0}.settings-header,.settings-content{padding:1.25rem 1.5rem}.setting-row{flex-direction:column;align-items:flex-start}.setting-row label{min-width:auto}.slider-with-value{width:100%;max-width:none}.personality-checkboxes{gap:.5rem}.checkbox-label{flex:1;justify-content:center;min-width:140px}.puzzle-box{max-width:95vw;padding:1.5rem}.puzzle-title{font-size:1.2rem}.puzzle-info{gap:.5rem}.puzzle-info-item{padding:.3rem .6rem;font-size:.75rem}.puzzle-actions{flex-direction:column}.puzzle-btn{width:100%}.puzzle-move{flex-wrap:wrap}.puzzle-move-number{width:auto;margin-right:.5rem}}