.toast-container{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{background:#1e1e1e;color:#f3f4f6;padding:12px 16px;border-radius:8px;box-shadow:0 4px 12px #0000004d;border:1px solid #333;display:flex;align-items:center;gap:12px;min-width:280px;max-width:400px;pointer-events:auto;backdrop-filter:blur(10px);font-size:.95rem;font-weight:500;line-height:1.4;transition:all .3s ease}.toast-success{border-left:4px solid #22c55e}.toast-success:before{content:"✓";color:#22c55e;font-weight:700}.toast-error{border-left:4px solid #ef4444}.toast-error:before{content:"✕";color:#ef4444;font-weight:700}.toast-info{border-left:4px solid #3b82f6}.toast-info:before{content:"ℹ";color:#3b82f6;font-weight:700}.toast-content{flex:1}.toast-close{background:transparent;border:none;color:#9ca3af;cursor:pointer;font-size:1.25rem;padding:0 4px;line-height:1;transition:color .2s}.toast-close:hover{color:#fff}@keyframes slideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.slide-in{animation:slideIn .3s ease-out forwards}@media(max-width:600px){.toast-container{inset:auto 10px 20px;align-items:center}.toast{width:100%;min-width:unset}}.App{text-align:center}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s ease,color .3s ease;color-scheme:dark}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#444;border-radius:5px;border:2px solid #1a1a1a}::-webkit-scrollbar-thumb:hover{background:#555}body.light-theme ::-webkit-scrollbar-track{background:#f1f1f1}body.light-theme ::-webkit-scrollbar-thumb{background:#ccc;border:2px solid #f1f1f1}body.light-theme ::-webkit-scrollbar-thumb:hover{background:#bbb}.app-container{display:flex;flex-direction:column;min-height:100vh}body.light-theme{color-scheme:light}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}.game-container-responsive{display:flex;gap:2rem;justify-content:center;padding:2rem;position:relative;border-radius:12px}@media(max-width:900px){.game-container-responsive{flex-direction:column;align-items:center;padding:1rem;padding-bottom:120px;margin-top:60px}.online-game-wrapper{margin-top:2rem}.game-area{width:100%;display:flex;justify-content:center}aside.sidebar{min-width:100%!important;width:100%}}@media(max-width:600px){.game-container-responsive{padding:.5rem}.local-game-board-area{margin-top:4rem}}.container{max-width:1200px;margin:0 auto;padding:1rem}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.flex-col{display:flex;flex-direction:column}.grid-responsive{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}.card{border:1px solid #333;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px #0000001a}.text-primary{color:#3b82f6}.text-success{color:#22c55e}.text-danger{color:#ef4444}.text-warning{color:#eab308}.text-muted{color:#888}.text-bold{font-weight:700}.text-uppercase{text-transform:uppercase}.btn-primary{background-color:#2563eb;color:#fff}.badge{padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:700;text-transform:uppercase;display:inline-block}.badge-success{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.2)}.badge-danger{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.badge-warning{background:#eab3081a;color:#eab308;border:1px solid rgba(234,179,8,.2)}.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:#2563eb!important;color:#fff!important;box-shadow:none!important;transform:none!important;text-decoration:none!important;opacity:1!important}.square{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative}.square.light{background-color:#cbd5e1!important}.square.dark{background-color:#475569!important}.square.selected{background-color:#818cf8!important}.square.last-move{background-color:#fbbf2480!important}.square.in-check{background-color:#ef444480!important;box-shadow:inset 0 0 15px 5px #dc2626e6!important;border:3px solid #b91c1c!important}:root{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-card: #16213e;--text-primary: #e8e8e8;--text-secondary: #a0a0a0;--accent-primary: #00d9ff;--accent-secondary: #7b2cbf;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--square-light: #e8dcc4;--square-dark: #b58863;--square-selected: rgba(0, 217, 255, .5);--square-valid: rgba(16, 185, 129, .6);--square-size: 60px;--border-radius: 12px}body.light-theme{--bg-primary: #f8fafc;--bg-secondary: #f1f5f9;--bg-card: #ffffff;--text-primary: #0f172a;--text-secondary: #475569;--accent-primary: #2563eb;--accent-secondary: #4f46e5;--success: #16a34a;--square-light: #cbd5e1;--square-dark: #64748b;--square-selected: rgba(37, 99, 235, .5);--square-valid: rgba(22, 163, 74, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Segoe UI,system-ui,sans-serif;background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);color:var(--text-primary);min-height:100vh;overflow-x:hidden}#root{min-height:100vh;width:100%;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column}.header{text-align:center;padding:2rem;background:linear-gradient(180deg,rgba(26,26,46,.9) 0%,transparent 100%)}.header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.header p{color:var(--text-secondary);font-size:1.1rem}.main-container{flex:1;display:flex;justify-content:center;align-items:flex-start;gap:2rem;padding:2rem;max-width:1400px;margin:0 auto;width:100%;flex-wrap:wrap}.game-area{flex-shrink:0}.sidebar{width:300px;min-width:280px;max-width:100%;display:flex;flex-direction:column;gap:1.5rem}.board-container{position:relative;width:100%;max-width:800px;aspect-ratio:1.3;margin:0 auto;display:flex;justify-content:center;align-items:center;background:transparent;padding:0}.board{width:84.61538%;height:100%;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(10,1fr);background:linear-gradient(145deg,var(--bg-card),var(--bg-secondary));box-shadow:0 0 0 12px var(--bg-card),0 25px 50px -12px #00000080,0 0 0 13px #ffffff1a;border-radius:4px;position:relative;z-index:1;box-sizing:border-box}.citadels{position:absolute;top:0;left:0;right:0;width:84.61538%;margin:0 auto;height:100%;pointer-events:none;z-index:2}.square{width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all .15s ease}.square.light{background-color:var(--square-light)}.square.dark{background-color:var(--square-dark)}.square:hover{filter:brightness(1.1)}.square.selected{background-color:var(--square-selected)!important;box-shadow:inset 0 0 0 3px var(--accent-primary)}.square.valid-move{background-color:var(--square-valid)!important}.square.valid-move:after{content:"";position:absolute;width:30%;height:30%;background:#10b981cc;border-radius:50%;pointer-events:none}.square.citadel{position:absolute;pointer-events:auto}.move-indicator{width:30%;height:30%;background:#10b981cc;border-radius:50%}.piece{width:85%;height:85%;object-fit:contain;pointer-events:none;filter:drop-shadow(2px 2px 3px rgba(0,0,0,.4));transition:transform .1s ease}.square:hover .piece{transform:scale(1.05)}.game-info,.controls{background:var(--bg-card);border-radius:var(--border-radius);padding:1.5rem;box-shadow:0 4px 20px #0000004d}.game-info h3,.controls h3{font-size:1.1rem;margin-bottom:1rem;color:var(--accent-primary)}.status-box{background:var(--bg-secondary);border-radius:8px;padding:1rem}.current-turn{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.current-turn .emoji{font-size:1.5rem}.status-message{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem}.move-count{font-size:.85rem;color:var(--accent-secondary)}.btn{display:block;width:100%;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;margin-bottom:1rem}.btn-primary{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00d9ff4d}.btn-primary:active{transform:translateY(0)}.instructions{background:var(--bg-secondary);border-radius:8px;padding:1rem}.instructions h4{font-size:.95rem;margin-bottom:.75rem;color:var(--text-primary)}.instructions ul{list-style:none;font-size:.85rem;color:var(--text-secondary)}.instructions li{padding:.25rem 0 .25rem 1.25rem;position:relative}.instructions li:before{content:"•";position:absolute;left:0;color:var(--accent-primary)}.online-section{margin-top:1rem;padding:1rem;background:var(--bg-secondary);border-radius:8px}.online-section h4{font-size:.95rem;margin-bottom:.75rem;color:var(--accent-primary)}.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;margin-bottom:.75rem}.btn-success:hover{box-shadow:0 8px 25px #10b9814d;transform:translateY(-2px)}.btn-success:disabled{opacity:.6;cursor:not-allowed;transform:none}.join-room{display:flex;gap:.5rem;flex-wrap:wrap}.room-input{flex:1;min-width:120px;padding:.75rem;border:2px solid var(--bg-primary);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.room-input:focus{outline:none;border-color:var(--accent-primary)}.room-input::placeholder{color:var(--text-secondary);font-weight:400;text-transform:none;letter-spacing:normal}.btn-join{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:.75rem 1rem;white-space:nowrap;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s ease}.btn-join:hover:not(:disabled){box-shadow:0 8px 25px #f59e0b4d;transform:translateY(-2px)}.btn-join:disabled{opacity:.5;cursor:not-allowed}.room-info{padding:.75rem;background:var(--bg-primary);border-radius:8px}.room-code-display{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.room-code-display .label{color:var(--text-secondary);font-size:.85rem}.room-code-display .code{font-size:1.25rem;font-weight:700;color:var(--accent-primary);letter-spacing:.15em}.player-color{text-align:center;padding:.5rem;background:var(--bg-secondary);border-radius:4px;font-weight:600}@media(max-width:900px){.main-container{flex-direction:column;align-items:center;padding:1rem;gap:1rem}.sidebar{width:100%;max-width:550px}}@media(max-width:700px){.board-container{width:100%}}