*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}#root{min-height:100vh}.connecting-screen{color:#fff;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:100vh;font-family:sans-serif;display:flex}.connecting-spinner{border:4px solid #fff3;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.lobby{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);justify-content:center;align-items:center;min-height:100vh;display:flex}.lobby-card{text-align:center;background:#fff;border-radius:20px;min-width:340px;padding:48px 40px;box-shadow:0 20px 60px #0000004d}.lobby-title{color:#2c3e50;margin:0 0 4px;font-size:48px}.lobby-subtitle{color:#7f8c8d;margin:0 0 32px;font-size:16px}.lobby-buttons,.lobby-form{flex-direction:column;gap:12px;display:flex}.lobby-input{text-align:center;border:2px solid #e0e0e0;border-radius:10px;outline:none;padding:14px 16px;font-size:16px;transition:border-color .2s}.lobby-input:focus{border-color:#3498db}.lobby-input-code{letter-spacing:8px;font-size:24px;font-weight:700}.lobby-btn{cursor:pointer;border:none;border-radius:10px;padding:14px 24px;font-size:16px;font-weight:600;transition:all .2s}.lobby-btn:disabled{opacity:.4;cursor:not-allowed}.lobby-btn-create{color:#fff;background:#27ae60}.lobby-btn-create:hover:not(:disabled){background:#1e8449;transform:translateY(-1px)}.lobby-btn-join{color:#fff;background:#2980b9}.lobby-btn-join:hover:not(:disabled){background:#1f618d;transform:translateY(-1px)}.lobby-btn-back{color:#7f8c8d;cursor:pointer;background:0 0;border:none;padding:8px;font-size:14px}.lobby-btn-back:hover{color:#2c3e50}.invite-msg{color:#27ae60;margin:0 0 4px;font-size:15px}.chat-wrapper{z-index:100;flex-direction:column;align-items:flex-end;display:flex;position:fixed;bottom:20px;right:20px}.chat-toggle{color:#fff;cursor:pointer;background:#2c3e50;border:none;border-radius:20px;padding:10px 20px;font-size:14px;font-weight:600;transition:background .2s;position:relative;box-shadow:0 4px 12px #0000004d}.chat-toggle:hover{background:#34495e}.chat-badge{color:#fff;background:#e74c3c;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:11px;font-weight:700;display:flex;position:absolute;top:-6px;right:-6px}.chat-panel{background:#fff;border-radius:12px;flex-direction:column;width:300px;height:360px;margin-bottom:8px;display:flex;overflow:hidden;box-shadow:0 8px 30px #0000004d}.chat-messages{flex-direction:column;flex:1;gap:6px;padding:12px;display:flex;overflow-y:auto}.chat-empty{color:#bdc3c7;text-align:center;margin-top:40px;font-size:13px}.chat-msg{flex-direction:column;gap:2px;max-width:85%;display:flex}.chat-msg-mine{align-self:flex-end}.chat-msg-system{align-self:center;max-width:100%}.chat-msg-system .chat-text{color:#95a5a6;text-align:center;font-size:12px;font-style:italic}.chat-author{text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700}.chat-text{color:#2c3e50;word-break:break-word;background:#f0f0f0;border-radius:10px;padding:6px 10px;font-size:14px}.chat-msg-mine .chat-text{background:#e8f6f0}.chat-input-row{border-top:1px solid #eee;gap:6px;padding:8px;display:flex}.chat-input{border:1px solid #ddd;border-radius:8px;outline:none;flex:1;padding:8px 10px;font-size:14px}.chat-input:focus{border-color:#3498db}.chat-send{color:#fff;cursor:pointer;background:#27ae60;border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600}.chat-send:disabled{opacity:.4;cursor:not-allowed}@media (width<=768px){.chat-wrapper{bottom:10px;right:10px}.chat-panel{width:260px;height:300px}}.share-invite{background:#f8f9fa;border-radius:10px;flex-direction:column;gap:10px;padding:14px;display:flex}.share-title{color:#7f8c8d;text-transform:uppercase;letter-spacing:1px;margin:0;font-size:13px}.share-link-row{gap:6px;display:flex}.share-link-input{color:#2c3e50;background:#fff;border:1px solid #ddd;border-radius:6px;outline:none;flex:1;min-width:0;padding:8px 10px;font-size:12px}.share-link-input:focus{border-color:#3498db}.share-copy-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#2c3e50;border:none;border-radius:6px;padding:8px 14px;font-size:12px;font-weight:600;transition:background .2s}.share-copy-btn:hover{background:#34495e}.share-buttons{gap:6px;display:flex}.share-btn{cursor:pointer;color:#fff;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;padding:9px 8px;font-size:12px;font-weight:600;transition:all .2s;display:flex}.share-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.share-btn:active{transform:translateY(0)}.share-whatsapp{background:#25d366}.share-sms{background:#3498db}.share-native{background:#8e44ad}@media (width<=900px){.share-invite{flex-flow:wrap;order:6;align-items:center;gap:8px;width:100%;padding:10px 12px}.share-title{display:none}.share-link-row{flex:1;min-width:140px}.share-buttons{flex-shrink:0}}.theme-toggle{background:#f0f0f0;border-radius:10px;gap:4px;padding:3px;display:flex}.theme-btn{cursor:pointer;color:#666;background:0 0;border:none;border-radius:8px;align-items:center;gap:4px;padding:6px 10px;font-size:12px;font-weight:500;transition:all .2s;display:flex}.theme-btn:hover{background:#0000000d}.theme-btn-active{color:#2c3e50;font-weight:700;box-shadow:0 1px 4px #0000001a;background:#fff!important}.theme-icon{font-size:14px}.theme-label{font-size:11px}@media (width<=900px){.theme-toggle{order:0}}.game-room{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);min-height:100vh;display:flex}.game-sidebar{background:#fff;flex-direction:column;flex-shrink:0;gap:20px;width:280px;padding:24px;display:flex;overflow-y:auto;box-shadow:4px 0 20px #0003}.room-info{align-items:center;gap:8px;display:flex}.room-label{color:#7f8c8d;text-transform:uppercase;letter-spacing:1px;font-size:12px}.room-code{color:#2c3e50;letter-spacing:3px;background:#f0f0f0;border-radius:6px;padding:4px 12px;font-size:20px;font-weight:700}.players-list h3{color:#7f8c8d;text-transform:uppercase;letter-spacing:1px;margin:0 0 12px;font-size:14px}.player-item{border-radius:8px;align-items:center;gap:10px;padding:8px 12px;transition:background .2s;display:flex}.player-item.active{background:#f0f7ff;animation:1.5s ease-in-out infinite alternate glow-bg}@keyframes glow-bg{0%{background:#f0f7ff}to{background:#dbeafe}}.player-dot{border-radius:50%;flex-shrink:0;width:12px;height:12px}.player-name{color:#2c3e50;font-size:15px;font-weight:500}.waiting-text{color:#bdc3c7;margin:8px 0 0;font-size:13px;font-style:italic}.start-btn{color:#fff;cursor:pointer;background:#27ae60;border:none;border-radius:10px;padding:14px;font-size:16px;font-weight:600;transition:all .2s}.start-btn:hover{background:#1e8449;transform:translateY(-1px)}.dice-section{justify-content:center;padding:12px 0;display:flex}.status-bar{text-align:center;color:#2c3e50;background:#f5f5f5;border-radius:10px;padding:12px;font-size:15px;font-weight:500;transition:all .3s}.status-bar.status-my-turn{color:#27ae60;background:#e8f8f0;font-weight:700;animation:2s ease-in-out infinite turn-pulse}.status-bar.status-finished{color:#856404;background:linear-gradient(135deg,#fff3cd,#fce4b0);font-size:18px;font-weight:700}.trophy{margin-right:4px;font-size:20px}@keyframes turn-pulse{0%,to{box-shadow:0 0 #27ae604d}50%{box-shadow:0 0 0 8px #27ae6000}}.game-message{text-align:center;color:#7f8c8d;margin:0;font-size:14px;animation:.3s ease-out msg-in}@keyframes msg-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.game-board-area{flex:1;justify-content:center;align-items:center;min-width:0;padding:20px;display:flex}@media (width<=900px){.game-room{flex-direction:column}.game-sidebar{flex-flow:wrap;align-items:center;gap:12px;width:100%;padding:12px 16px;box-shadow:0 4px 20px #0003}.room-info{order:1}.players-list{flex-wrap:wrap;order:2;align-items:center;gap:8px;display:flex}.players-list h3{margin:0;font-size:12px}.player-item{padding:4px 8px}.dice-section{order:3;padding:0}.status-bar{flex:1;order:4;min-width:120px;padding:8px 12px;font-size:13px}.start-btn{order:5;padding:10px 20px;font-size:14px}.game-message{order:6;width:100%;font-size:13px}.game-board-area{flex:1;min-height:0;padding:10px}}@media (width<=480px){.game-sidebar{gap:8px;padding:8px 12px}.room-code{letter-spacing:2px;padding:2px 8px;font-size:16px}.player-name{font-size:13px}.game-board-area{padding:4px}}