*{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}#root{min-height:100vh}.lobby{flex-direction:column;align-items:center;max-width:500px;margin:0 auto;padding:40px 20px;display:flex}.lobby h1{color:#2d8c3c;margin:0;font-size:2.5rem}.subtitle{color:#666;margin:8px 0 40px}.lobby-actions{flex-direction:column;align-items:center;gap:20px;width:100%;display:flex}.mode-selector{flex-direction:column;align-items:center;gap:10px;margin-bottom:10px;display:flex}.mode-label{color:#666;font-size:.9rem}.mode-buttons{gap:8px;display:flex}.mode-btn{color:#666;cursor:pointer;background:#fff;border:2px solid #ddd;border-radius:8px;padding:10px 20px;font-size:.95rem;transition:all .2s}.mode-btn:hover{color:#2d8c3c;border-color:#2d8c3c}.mode-btn.active{color:#fff;background:#2d8c3c;border-color:#2d8c3c}.btn{cursor:pointer;border:none;border-radius:8px;padding:12px 32px;font-size:1rem;font-weight:700;transition:all .2s}.btn.primary{color:#fff;background:#2d8c3c}.btn.primary:hover{background:#238232}.btn.secondary{color:#fff;background:#666}.btn.secondary:hover:not(:disabled){background:#555}.btn:disabled{opacity:.5;cursor:not-allowed}.divider{color:#999;font-size:.9rem}.join-form{gap:10px;display:flex}.join-form input{text-align:center;text-transform:uppercase;letter-spacing:2px;border:2px solid #ddd;border-radius:8px;width:120px;padding:12px 16px;font-size:1.2rem}.join-form input:focus{border-color:#2d8c3c;outline:none}.rules{text-align:center;background:#f5f5f5;border-radius:8px;margin-top:50px;padding:20px}.rules h3{color:#333;margin:0 0 10px}.rules p{color:#666;margin:0;line-height:1.6}.game-board{perspective:1000px;background:#1a5f2a;border-radius:8px;flex-direction:column;padding:8px;display:flex;box-shadow:0 4px 12px #0000004d}.board-row{display:flex}.cell{cursor:default;background:#2d8c3c;border:1px solid #1a5f2a;justify-content:center;align-items:center;width:50px;height:50px;display:flex;position:relative}.cell.valid-move{cursor:pointer}.cell.valid-move:hover{background:#3da050}.cell.last-move{box-shadow:inset 0 0 0 2px gold}.piece{width:40px;height:40px;transform-style:preserve-3d;border-radius:50%}.piece.black{background:radial-gradient(circle at 30% 30%,#555,#111);box-shadow:0 2px 4px #0006}.piece.white{background:radial-gradient(circle at 30% 30%,#fff,#ccc);box-shadow:0 2px 4px #0000004d}.piece.flipping{animation:.5s ease-in-out flip}@keyframes flip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(180deg)}}.hint{background:#ffffff4d;border-radius:50%;width:16px;height:16px}.game-info{background:#fff;border-radius:8px;min-width:250px;padding:20px;box-shadow:0 2px 8px #0000001a}.room-info{border-bottom:1px solid #eee;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;padding-bottom:15px;display:flex}.room-info .label{color:#666}.room-info .room-id{color:#2d8c3c;cursor:pointer;background:#f0f9f1;border-radius:4px;padding:4px 8px;font-family:monospace;font-size:1.2rem;font-weight:700}.room-info .room-id:hover{background:#e0f2e2}.game-mode-badge{color:#555;background:#e8e8e8;border-radius:4px;margin-left:auto;padding:4px 8px;font-size:.8rem}.waiting{color:#666;align-items:center;gap:12px;padding:20px 0;display:flex}.spinner{border:2px solid #ddd;border-top-color:#2d8c3c;border-radius:50%;width:20px;height:20px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.scores{justify-content:space-around;margin-bottom:20px;display:flex}.score{border-radius:8px;flex-direction:column;align-items:center;gap:8px;padding:10px 20px;display:flex}.score.mine{background:#f0f9f1}.score .piece{border-radius:50%;width:30px;height:30px}.score .piece.black{background:radial-gradient(circle at 30% 30%,#555,#111)}.score .piece.white{background:radial-gradient(circle at 30% 30%,#fff,#ccc);border:1px solid #ddd}.score span{font-size:1.5rem;font-weight:700}.score .you{color:#2d8c3c;font-size:.75rem;font-weight:400}.turn-indicator{text-align:center;color:#666;background:#f5f5f5;border-radius:8px;padding:12px}.turn-indicator.my-turn{color:#fff;background:#2d8c3c;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.game-over{text-align:center}.game-over .result{margin-bottom:15px;font-size:1.5rem;font-weight:700}.game-over .btn{cursor:pointer;color:#fff;background:#2d8c3c;border:none;border-radius:8px;padding:10px 24px;font-size:.9rem}.game-over .btn:hover{background:#238232}.room-actions{text-align:center;border-top:1px solid #eee;margin-top:20px;padding-top:15px}.room-actions .btn{cursor:pointer;border:none;border-radius:8px;padding:10px 24px;font-size:.9rem;transition:background .2s}.room-actions .btn.danger{color:#fff;background:#e74c3c}.room-actions .btn.danger:hover{background:#c0392b}.room-actions .btn.secondary{color:#fff;background:#95a5a6}.room-actions .btn.secondary:hover{background:#7f8c8d}.app{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex}.game-container{align-items:flex-start;gap:30px;padding:20px;display:flex}@media (width<=768px){.game-container{flex-direction:column;align-items:center}}.error-toast{color:#fff;z-index:1000;background:#e74c3c;border-radius:8px;padding:12px 24px;animation:.3s slideIn;position:fixed;top:20px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0003}@keyframes slideIn{0%{opacity:0;transform:translate(-50%)translateY(-20px)}to{opacity:1;transform:translate(-50%)translateY(0)}}