*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background-color:#1a1a1a;color:#f5f5f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;width:100%}:root{--bg-dark: #1a1a1a;--bg-medium: #2a2a2a;--bg-light: #3a3a3a;--text-primary: #f5f5f0;--text-secondary: #a0a0a0;--accent: #c9a86c;--accent-light: #dbc49a;--valid: #5a9f5a;--invalid: #c45050;--board-color: #dcb35c;--board-dark: #b8943d;--line-color: #2a2a2a}*{box-sizing:border-box}.app{min-height:100vh;width:100%;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,var(--bg-dark) 0%,#0f0f0f 100%);padding:20px}.menu{text-align:center;max-width:400px;animation:fadeIn .5s ease}.menu-header{margin-bottom:40px}.logo{margin-bottom:20px;animation:float 6s ease-in-out infinite}.logo-svg{filter:drop-shadow(0 4px 20px rgba(201,168,108,.3))}.menu h1{font-size:3.5rem;color:var(--text-primary);margin:0 0 5px;font-weight:300;letter-spacing:.1em}.menu h2{font-size:1.5rem;color:var(--accent);margin:0 0 15px;font-weight:400;letter-spacing:.15em}.tagline{color:var(--text-secondary);font-style:italic;font-size:.95rem}.menu-buttons{display:flex;flex-direction:column;gap:15px}.menu-button{display:flex;align-items:center;gap:15px;width:100%;padding:15px 25px;background:var(--bg-medium);border:1px solid var(--bg-light);border-radius:12px;cursor:pointer;transition:all .3s ease;text-align:left}.menu-button:hover{background:var(--bg-light);border-color:var(--accent);transform:translate(5px)}.menu-button.primary{background:linear-gradient(135deg,var(--bg-medium),var(--bg-light));border-color:var(--accent)}.menu-button.subtle{background:transparent;border-color:var(--bg-light)}.button-icon{font-size:1.8rem;width:50px;text-align:center;color:var(--accent)}.button-text{display:flex;flex-direction:column;gap:3px}.button-text strong{font-size:1.1rem;color:var(--text-primary)}.button-text small{font-size:.85rem;color:var(--text-secondary)}.about{max-width:600px;color:var(--text-primary);animation:fadeIn .5s ease}.about h1{font-size:2.5rem;color:var(--accent);margin-bottom:30px;font-weight:300}.about section{margin-bottom:25px}.about h2{font-size:1.3rem;color:var(--accent-light);margin-bottom:10px;font-weight:500}.about p,.about li{color:var(--text-secondary);line-height:1.7}.about ul{padding-left:20px}.about li{margin-bottom:8px}.about .valid{color:var(--valid);font-weight:700}.about .invalid{color:var(--invalid);font-weight:700}.about blockquote{border-left:3px solid var(--accent);padding-left:20px;margin:20px 0;font-style:italic;color:var(--text-primary)}.about cite{display:block;margin-top:10px;font-size:.9rem;color:var(--text-secondary)}.back-button{margin-top:30px;padding:12px 30px;background:var(--bg-medium);border:1px solid var(--accent);color:var(--accent);border-radius:8px;cursor:pointer;transition:all .3s ease}.back-button:hover{background:var(--accent);color:var(--bg-dark)}.game{width:100%;max-width:1200px;animation:fadeIn .5s ease}.game-header{text-align:center;margin-bottom:20px}.game-header h1{font-size:2rem;color:var(--text-primary);margin:0;font-weight:300;letter-spacing:.1em}.game-header .subtitle{color:var(--text-secondary);font-size:.9rem;font-style:italic;margin:5px 0 0}.game-main{display:flex;gap:30px;justify-content:center;align-items:flex-start}.game-sidebar{width:200px;display:flex;flex-direction:column;gap:20px}.player-info{background:var(--bg-medium);border-radius:12px;padding:15px;border:2px solid transparent;transition:all .3s ease}.player-info.active{border-color:var(--accent);box-shadow:0 0 20px #c9a86c33}.player-info h3{margin:0 0 10px;color:var(--text-primary);font-weight:500}.stones-count,.moves-count{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}.stones-count .count,.moves-count .count{font-size:1.5rem;font-weight:700;color:var(--accent)}.stones-count .label,.moves-count .label{color:var(--text-secondary);font-size:.85rem}.placement-preview{background:var(--bg-medium);border-radius:12px;padding:15px;text-align:center}.preview-piece{margin-bottom:10px}.preview-info{display:flex;flex-direction:column;gap:5px}.stones-remaining{color:var(--accent);font-weight:500}.rotate-hint{color:var(--text-secondary);font-size:.8rem}.game-controls{display:flex;flex-direction:column;gap:10px}.game-controls button{padding:10px 15px;background:var(--bg-medium);border:1px solid var(--bg-light);color:var(--text-primary);border-radius:8px;cursor:pointer;transition:all .3s ease}.game-controls button:hover:not(:disabled){background:var(--bg-light);border-color:var(--accent)}.game-controls button:disabled{opacity:.5;cursor:not-allowed}.game-controls button.active{border-color:var(--accent)}.hint-box{background:var(--bg-medium);border-radius:12px;padding:15px;border-left:3px solid var(--accent)}.hint-box h4{margin:0 0 10px;color:var(--accent);font-size:.9rem}.hint-box p{margin:0;color:var(--text-secondary);font-style:italic;font-size:.9rem;line-height:1.5}.move-feed{background:var(--bg-medium);border-radius:12px;padding:15px}.move-feed h4{margin:0 0 10px;color:var(--text-primary);font-size:.9rem}.move-feed ul{list-style:none;padding:0;margin:0}.move-feed li{padding:5px 0;font-family:monospace;font-size:.9rem;border-bottom:1px solid var(--bg-light)}.move-feed li:last-child{border-bottom:none}.move-feed li.valid{color:var(--valid)}.move-feed li.invalid{color:var(--invalid)}.move-orientation{display:inline-block;width:1.2em;text-align:center;color:var(--accent);font-weight:500;margin-left:2px}.game-board-area{display:flex;flex-direction:column;align-items:center;position:relative;flex-shrink:0}.board-container{padding:20px;background:linear-gradient(145deg,var(--board-color),var(--board-dark));border-radius:8px;box-shadow:0 10px 40px #00000080,inset 0 1px #ffffff1a;position:relative}.board{display:flex;flex-direction:column}.board-row{display:flex}.board-cell{width:44px;height:44px;position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer}.board-cell.disabled{cursor:not-allowed}.board-cell.occupied{cursor:default}.intersection{position:absolute;width:100%;height:100%;pointer-events:none}.line{position:absolute;background:var(--line-color)}.line.horizontal{height:2px;width:100%;top:50%;transform:translateY(-50%)}.line.vertical{width:2px;height:100%;left:50%;transform:translate(-50%)}.line.horizontal.left-edge{width:50%;right:0;left:auto}.line.horizontal.right-edge{width:50%;left:0}.line.vertical.top-edge{height:50%;bottom:0;top:auto}.line.vertical.bottom-edge{height:50%;top:0}.star-point{position:absolute;width:8px;height:8px;background:var(--line-color);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1}.coord-label{position:absolute;font-size:.9rem;color:var(--line-color);font-weight:700;pointer-events:none;text-shadow:1px 1px 0 var(--board-color),-1px -1px 0 var(--board-color),1px -1px 0 var(--board-color),-1px 1px 0 var(--board-color)}.row-label{left:4px;top:50%;transform:translateY(-50%)}.col-label{bottom:0;left:50%;transform:translate(-50%)}.drag-hint{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);font-size:.85rem;color:var(--accent);white-space:nowrap;animation:fadeIn .3s ease;display:flex;align-items:center;gap:8px}.drag-arrow{font-size:1.1rem;animation:dragArrowPulse 1s ease-in-out infinite}.drag-arrow:first-child{animation-delay:0s}.drag-arrow:last-child{animation-delay:.5s}@keyframes dragArrowPulse{0%,to{opacity:.5;transform:translate(0)}50%{opacity:1;transform:translate(-3px)}}.drag-arrow:last-child{animation-name:dragArrowPulseRight}@keyframes dragArrowPulseRight{0%,to{opacity:.5;transform:translate(0)}50%{opacity:1;transform:translate(3px)}}.hover-preview{position:absolute;opacity:0;transition:opacity .2s ease;z-index:5}.board-cell:not(.occupied):not(.disabled):hover .hover-preview{opacity:.5}.failed-move-indicator{position:absolute;z-index:4;opacity:.4}.failed-move-indicator .yin-yang-piece{filter:grayscale(.7) brightness(.8)}.failed-move-indicator:after{content:"✕";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:20px;font-weight:700;color:var(--invalid);text-shadow:0 0 4px rgba(0,0,0,.8)}.orientation-indicator{color:var(--text-secondary);font-size:.9rem}.orientation-indicator strong{color:var(--accent)}.placement-confirm-ui{position:absolute;bottom:-90px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;padding:15px;background:var(--bg-medium);border-radius:12px;animation:fadeIn .2s ease;box-shadow:0 0 20px #ffe60066,0 0 40px #ffc80033;border:2px solid rgba(255,230,0,.5)}.pending-piece-display{display:flex;flex-direction:column;align-items:center;gap:5px}.orientation-label{font-size:.85rem;color:var(--accent);font-weight:500}.rotate-btn{width:50px;height:50px;border-radius:50%;background:var(--bg-light);border:2px solid var(--accent);color:var(--accent);font-size:1.8rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.rotate-btn:hover{background:var(--accent);color:var(--bg-dark);transform:scale(1.1)}.rotate-btn:active{transform:scale(.95)}.confirm-btn{width:60px;height:60px;border-radius:50%;background:var(--valid);border:none;color:#fff;font-size:2rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 4px 15px #5a9f5a66}.confirm-btn:hover{background:#4a8f4a;transform:scale(1.1)}.confirm-btn:active{transform:scale(.95)}.cancel-btn{width:40px;height:40px;border-radius:50%;background:transparent;border:2px solid var(--invalid);color:var(--invalid);font-size:1.2rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}.cancel-btn:hover{background:var(--invalid);color:#fff}.board-cell.pending{z-index:20}.yin-yang-piece.pending-piece{animation:pulse 1s ease-in-out infinite}.pending-piece-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.rotate-hint-arrow{position:absolute;font-size:1.4rem;color:#444;opacity:0;transition:opacity .2s ease;pointer-events:none}.rotate-hint-arrow.left{right:100%;margin-right:2px}.rotate-hint-arrow.right{left:100%;margin-left:2px}.pending-piece-wrapper:hover .rotate-hint-arrow,.board-cell.pending:hover .rotate-hint-arrow{opacity:1}.yin-yang-piece{position:relative;z-index:10;border-radius:50%}.yin-yang-piece.interactive:hover{filter:brightness(1.1)}.yin-yang-piece.placed{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}.yin-yang-piece.preview{filter:grayscale(.3)}.result-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;font-weight:700;pointer-events:none;animation:popIn .3s ease}.result-indicator.valid{color:var(--valid);text-shadow:0 0 10px var(--valid)}.result-indicator.invalid{color:var(--invalid);text-shadow:0 0 10px var(--invalid)}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;z-index:100;animation:fadeIn .3s ease}.modal{background:var(--bg-medium);border-radius:16px;padding:30px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;border:1px solid var(--bg-light);animation:slideUp .3s ease}.modal h2{margin:0 0 20px;color:var(--accent);font-size:1.8rem;font-weight:400;text-align:center}.final-stats{text-align:center;margin-bottom:25px;color:var(--text-secondary)}.final-stats p{margin:8px 0}.final-stats strong{color:var(--accent);font-size:1.2rem}.revealed-rules{background:var(--bg-dark);border-radius:12px;padding:20px;margin:20px 0}.revealed-rules h3{margin:0 0 15px;color:var(--text-primary);font-weight:500}.revealed-rules ul{list-style:none;padding:0;margin:0}.revealed-rules li{padding:10px 0;border-bottom:1px solid var(--bg-light)}.revealed-rules li:last-child{border-bottom:none}.revealed-rules strong{display:block;color:var(--accent);margin-bottom:5px}.revealed-rules p{margin:0;color:var(--text-secondary);font-size:.9rem}.modal-actions{display:flex;gap:15px;justify-content:center;margin-top:20px}.modal button{padding:12px 25px;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:1rem}.modal-actions button:first-child{background:var(--accent);border:none;color:var(--bg-dark);font-weight:600}.modal-actions button:first-child:hover{background:var(--accent-light)}.modal-actions button:last-child{background:transparent;border:1px solid var(--bg-light);color:var(--text-secondary)}.modal-actions button:last-child:hover{border-color:var(--text-secondary);color:var(--text-primary)}.modal>button:not(.modal-actions button){display:block;width:100%;margin-bottom:15px;background:var(--bg-dark);border:1px solid var(--accent);color:var(--accent)}.modal>button:not(.modal-actions button):hover{background:var(--accent);color:var(--bg-dark)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes popIn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}50%{transform:translate(-50%,-50%) scale(1.3)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0) rotate(var(--rotation, 0deg))}20%,60%{transform:translate(-5px) rotate(var(--rotation, 0deg))}40%,80%{transform:translate(5px) rotate(var(--rotation, 0deg))}}@keyframes blowOff{0%{transform:translate(0);opacity:1}60%{opacity:1}to{transform:translate(var(--blow-x, 0px),var(--blow-y, 60px));opacity:0}}@keyframes pulse{0%,to{filter:brightness(1) drop-shadow(0 0 15px rgba(255,230,0,.8))}50%{filter:brightness(1.15) drop-shadow(0 0 25px rgba(255,230,0,1))}}@media(max-width:900px){.game-main{flex-direction:column;align-items:center}.game-sidebar{width:100%;max-width:400px;flex-direction:row;flex-wrap:wrap;justify-content:center}.game-sidebar.left{order:2}.game-sidebar.right{order:3}.game-board-area{order:1}.player-info,.placement-preview,.game-controls,.hint-box,.move-feed{flex:1;min-width:150px;max-width:200px}}@media(max-width:500px){.board-cell{width:36px;height:36px}.board-container{padding:20px}.coord-label{font-size:.8rem;font-weight:800}.row-label{left:2px}.col-label{bottom:2px}.drag-hint{font-size:.75rem;bottom:-25px}.menu h1{font-size:2.5rem}.menu h2{font-size:1.2rem}}