.lobby{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg)}.lobby-container{max-width:600px;width:100%}.lobby-header{text-align:center;margin-bottom:var(--spacing-xl)}.lobby-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-primary);margin-bottom:var(--spacing-sm)}.lobby-subtitle{font-size:var(--font-size-lg);color:var(--color-text-light)}.lobby-card{animation:fadeIn var(--transition-slow)}.section-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-lg);text-align:center}.time-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.time-control-btn{background:var(--color-card-bg);border:3px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);text-align:center;transition:all var(--transition-normal)}.time-control-btn:hover:not(:disabled){border-color:var(--color-primary);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.time-control-btn.active{border-color:var(--color-primary);background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}.time-control-icon{font-size:48px;margin-bottom:var(--spacing-sm)}.time-control-label{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-xs)}.time-control-desc{font-size:var(--font-size-sm);opacity:.8}.lobby-actions{text-align:center}.btn-large{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-lg);width:100%;max-width:300px}.searching-indicator{text-align:center;padding:var(--spacing-lg)}.spinner{width:48px;height:48px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto var(--spacing-md)}@keyframes spin{to{transform:rotate(360deg)}}.searching-indicator p{font-size:var(--font-size-lg);color:var(--color-text-light);animation:pulse 2s infinite}.lobby-info h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-md);color:var(--color-primary)}.info-list{list-style:none;padding:0}.info-list li{padding:var(--spacing-sm) 0;font-size:var(--font-size-base);line-height:1.6}.piece-costs{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}.piece-cost{background:var(--color-bg);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium)}.ad-banner{text-align:center}.ad-placeholder{background:var(--color-bg);border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xl);color:var(--color-text-light);font-size:var(--font-size-sm)}@media (max-width: 600px){.time-controls{grid-template-columns:1fr}.lobby-title{font-size:var(--font-size-xl)}.piece-costs{justify-content:center}}.spawn-menu{background:var(--color-card-bg);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);margin-top:var(--spacing-lg)}.spawn-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.spawn-menu-header h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-primary)}.btn-sm{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm)}.spawn-pieces{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--spacing-sm)}.spawn-piece-btn{background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);transition:all var(--transition-normal)}.spawn-piece-btn:hover:not(:disabled){border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.spawn-piece-btn.selected{border-color:var(--color-secondary);background:linear-gradient(135deg,#2ecc711a,#27ae601a);box-shadow:0 0 0 3px #2ecc714d}.spawn-piece-btn.disabled{opacity:.4;cursor:not-allowed}.piece-symbol{font-size:36px;line-height:1}.piece-info{text-align:center;width:100%}.piece-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-transform:capitalize;margin-bottom:var(--spacing-xs)}.piece-cost{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold)}.piece-cost .affordable{color:var(--color-secondary)}.piece-cost .expensive{color:var(--color-danger)}.spawn-instruction{margin-top:var(--spacing-md);padding:var(--spacing-md);background:linear-gradient(135deg,#2ecc711a,#27ae601a);border-radius:var(--radius-md);text-align:center;font-size:var(--font-size-sm);color:var(--color-secondary);font-weight:var(--font-weight-medium);animation:pulse 2s infinite}@media (max-width: 768px){.spawn-pieces{grid-template-columns:repeat(3,1fr)}.piece-symbol{font-size:28px}}.game-board-container{max-width:800px;margin:0 auto;padding:var(--spacing-lg)}.player-info{display:flex;align-items:center;gap:var(--spacing-md);background:var(--color-card-bg);padding:var(--spacing-md);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-md)}.player-info.current{margin-top:var(--spacing-md);margin-bottom:0}.player-color-indicator{width:40px;height:40px;border-radius:50%;border:3px solid var(--color-border);flex-shrink:0}.player-details{flex:1}.player-name{font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);margin-bottom:var(--spacing-xs)}.timer{font-size:var(--font-size-base);color:var(--color-text-light);font-family:monospace}.timer.active{color:var(--color-primary);font-weight:var(--font-weight-bold);animation:pulse 1s infinite}.mana-bar{flex-shrink:0}.mana-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xs);text-align:center}.mana-orbs{display:flex;gap:4px}.mana-orb{width:16px;height:16px;border-radius:50%;transition:all var(--transition-normal)}.mana-orb.filled{background:linear-gradient(135deg,#3498db,#2980b9);box-shadow:0 2px 4px #3498db66}.mana-orb.empty{background:var(--color-mana-empty);border:2px solid var(--color-border)}.board-wrapper{display:flex;justify-content:center;margin:var(--spacing-lg) 0}.chess-board{display:inline-block;border:4px solid var(--color-bg-dark);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background:var(--color-bg-dark)}.board-row{display:flex}.square{width:70px;height:70px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.square.light{background-color:var(--color-light-square)}.square.dark{background-color:var(--color-dark-square)}.square:hover{filter:brightness(1.1)}.square.selected{background-color:var(--color-selected)!important;box-shadow:inset 0 0 0 3px #3498db99}.square.valid-move{background-color:var(--color-highlight)!important}.square.valid-spawn{background-color:#2ecc714d!important;box-shadow:inset 0 0 0 3px var(--color-secondary)}.piece{font-size:48px;line-height:1;transition:transform var(--transition-fast);cursor:grab}.piece:active{cursor:grabbing;transform:scale(1.1)}.move-indicator{position:absolute;width:20px;height:20px;background:#0000004d;border-radius:50%;pointer-events:none}.spawn-indicator{position:absolute;width:30px;height:30px;border:3px solid var(--color-secondary);border-radius:50%;pointer-events:none;animation:pulse 1.5s infinite}.turn-indicator{text-align:center;padding:var(--spacing-md);margin:var(--spacing-lg) 0;border-radius:var(--radius-lg);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);transition:all var(--transition-normal)}.turn-indicator.your-turn{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff;box-shadow:var(--shadow-md)}.turn-indicator.opponent-turn{background:var(--color-bg);color:var(--color-text-light);border:2px solid var(--color-border)}.resign-btn{display:block;margin:var(--spacing-lg) auto 0;max-width:200px}@media (max-width: 768px){.square{width:45px;height:45px}.piece{font-size:32px}.player-info{flex-direction:column;text-align:center}.mana-orbs{justify-content:center}}.game-over-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn var(--transition-normal)}.game-over-modal{max-width:500px;width:90%;animation:fadeIn var(--transition-slow)}.result-header{text-align:center;padding:var(--spacing-xl);border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin:calc(var(--spacing-lg) * -1) calc(var(--spacing-lg) * -1) var(--spacing-lg)}.result-header.victory{background:linear-gradient(135deg,#2ecc71,#27ae60);color:#fff}.result-header.defeat{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff}.result-header.draw{background:linear-gradient(135deg,#95a5a6,#7f8c8d);color:#fff}.result-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm)}.result-reason{font-size:var(--font-size-lg);opacity:.9}.game-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.stat{background:var(--color-bg);padding:var(--spacing-md);border-radius:var(--radius-md);text-align:center}.stat-label{font-size:var(--font-size-sm);color:var(--color-text-light);margin-bottom:var(--spacing-xs)}.stat-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);text-transform:capitalize}.video-ad-container{margin-bottom:var(--spacing-xl)}.video-ad-container .ad-placeholder{background:var(--color-bg-dark);color:#fff;padding:var(--spacing-xl);border-radius:var(--radius-md);text-align:center;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center}.video-ad-container .ad-placeholder p{margin:var(--spacing-sm) 0}.ad-note{font-size:var(--font-size-sm);opacity:.7}.game-over-modal .btn-large{width:100%}@media (max-width: 600px){.result-title{font-size:var(--font-size-xl)}.game-stats{grid-template-columns:1fr}}.footer{background-color:var(--color-bg-dark);color:#fff;padding:var(--spacing-lg) 0;margin-top:auto;width:100%}.footer-content{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);text-align:center}.footer-links{display:flex;gap:var(--spacing-md);align-items:center}.footer-links a{color:#fff;text-decoration:none;font-size:var(--font-size-sm);transition:color var(--transition-fast)}.footer-links a:hover{color:var(--color-primary)}.footer-separator{color:var(--color-text-light);opacity:.5}.footer-contact,.footer-copyright{font-size:var(--font-size-sm);color:#ffffffb3}.footer-contact a{color:var(--color-primary);text-decoration:none}.footer-contact a:hover{text-decoration:underline}@media (min-width: 768px){.footer-content{flex-direction:row;justify-content:space-between}}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;display:flex;flex-direction:column}:root{--color-bg: #f5f7fa;--color-bg-dark: #2c3e50;--color-primary: #3498db;--color-primary-hover: #2980b9;--color-secondary: #2ecc71;--color-danger: #e74c3c;--color-warning: #f39c12;--color-light-square: #f0d9b5;--color-dark-square: #b58863;--color-highlight: #baca44;--color-selected: #7fb3d5;--color-white-piece: #ffffff;--color-black-piece: #2c3e50;--color-text: #2c3e50;--color-text-light: #7f8c8d;--color-border: #dfe6e9;--color-card-bg: #ffffff;--color-shadow: rgba(0, 0, 0, .1);--color-mana-filled: #3498db;--color-mana-empty: #ecf0f1;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .15);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 700}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh;display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all var(--transition-normal)}button:disabled{opacity:.6;cursor:not-allowed}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.card{background:var(--color-card-bg);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md)}.btn{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);transition:all var(--transition-normal)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-secondary{background:var(--color-secondary);color:#fff}.btn-secondary:hover:not(:disabled){background:#27ae60;transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#c0392b;transform:translateY(-2px);box-shadow:var(--shadow-lg)}.text-center{text-align:center}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fade-in{animation:fadeIn var(--transition-normal)}.pulse{animation:pulse 2s infinite}