*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #1a1a1a;--bg-light: #2d2d2d;--text-light: #ffffff;--text-muted: #999999;--color-x: #ff6b6b;--color-o: #51cf66;--color-primary: #339af0;--color-secondary: #868e96;--color-danger: #f03e3e;--border-color: #404040;--transition: all .2s ease;--game-board-padding: 24px;--game-board-gap: 10px;--game-board-padding-mobile: 16px;--game-board-gap-mobile: 8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-dark);color:var(--text-light);line-height:1.6;min-height:100vh;display:flex;align-items:center;justify-content:center}#app{width:100%;max-width:600px;padding:20px;position:relative}#toast-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;gap:10px;max-width:400px;width:90%}.toast{padding:12px 20px;border-radius:8px;background:var(--bg-light);border-left:4px solid var(--color-primary);box-shadow:0 4px 12px #0000004d;opacity:0;transform:translateY(-20px);transition:var(--transition)}.toast.show{opacity:1;transform:translateY(0)}.toast-error{border-left-color:var(--color-danger)}.toast-success{border-left-color:var(--color-o)}.toast-info{border-left-color:var(--color-primary)}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;transition:var(--transition);width:100%;color:var(--text-light)}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.btn:active{transform:translateY(0)}.btn-primary{background:var(--color-primary)}.btn-primary:hover{background:#2b8ad6}.btn-secondary{background:var(--color-secondary)}.btn-secondary:hover{background:#6c757d}.btn-danger{background:var(--color-danger)}.btn-danger:hover{background:#d63939}.btn-small{padding:8px 16px;font-size:14px}.input{padding:12px;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-light);color:var(--text-light);font-size:16px;width:100%;transition:var(--transition)}.input:focus{outline:none;border-color:var(--color-primary)}.input::placeholder{color:var(--text-muted)}.loading-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}.splash-content{text-align:center;animation:fadeInUp .8s ease}.splash-icon{margin-bottom:32px;animation:scaleIn .6s ease;display:inline-block;background:#fff;border-radius:28px;padding:16px;box-shadow:0 8px 32px #667eea4d}.splash-logo{width:120px;height:120px;display:block;animation:float 3s ease-in-out infinite}.splash-title{font-size:56px;font-weight:800;margin-bottom:16px;letter-spacing:-2px;line-height:1.1}.splash-title-play{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block}.splash-title-lounge{color:var(--text-light);display:inline-block;margin-left:12px}.splash-tagline{font-size:16px;color:var(--text-muted);margin-bottom:48px;font-weight:500;letter-spacing:.5px}.loading-screen .spinner{margin:0 auto}@keyframes scaleIn{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fadeInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media (max-width: 600px){.splash-icon{border-radius:24px;padding:14px}.splash-logo{width:100px;height:100px}.splash-title{font-size:44px}.splash-tagline{font-size:14px;margin-bottom:40px}}@media (max-width: 400px){.splash-icon{border-radius:20px;padding:12px}.splash-logo{width:88px;height:88px}.splash-title{font-size:38px}.splash-title-lounge{margin-left:8px}.splash-tagline{font-size:13px}}.lobby{text-align:center;max-width:450px;margin:0 auto;padding-top:20px}.lobby-title{font-size:52px;margin-bottom:30px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;letter-spacing:-1px}.decorative-board{margin:0 auto 40px;display:flex;justify-content:center}.mini-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:180px;height:180px;padding:16px;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:20px;border:2px solid rgba(102,126,234,.3);box-shadow:0 8px 32px #667eea26}.mini-cell{background:#ffffff0d;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;border:1px solid rgba(255,255,255,.1);transition:all .3s ease}.mini-cell:nth-child(1),.mini-cell:nth-child(3),.mini-cell:nth-child(7),.mini-cell:nth-child(9){color:var(--color-x);opacity:.6}.mini-cell.glow{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:16px;font-weight:800;box-shadow:0 0 20px #667eea80;animation:pulseGlow 2s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #667eea80}50%{box-shadow:0 0 30px #667eeacc}}.game-type-selector{margin:0 auto 30px;max-width:400px}.game-type-label{font-size:14px;color:var(--text-muted);text-align:center;margin-bottom:12px;font-weight:500}.game-type-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.game-type-btn{padding:16px 12px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff0d;cursor:pointer;transition:all .3s ease;text-align:center}.game-type-btn:hover{background:#ffffff14;border-color:#667eea4d;transform:translateY(-2px)}.game-type-btn.active{background:linear-gradient(135deg,#667eea33,#764ba233);border-color:#667eea99;box-shadow:0 4px 16px #667eea4d}.game-type-title{font-size:16px;font-weight:700;color:var(--text-light);margin-bottom:4px}.game-type-desc{font-size:12px;color:var(--text-muted)}.menu{display:flex;flex-direction:column;gap:16px}.menu-card{padding:24px;border:none;border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:center;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:2px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.menu-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.menu-card:hover:before{left:100%}.menu-card:hover{transform:translateY(-4px);border-color:#667eea80;box-shadow:0 12px 40px #667eea40}.menu-card:active{transform:translateY(-2px)}.card-icon{font-size:48px;margin-bottom:12px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.card-title{font-size:22px;font-weight:700;color:var(--text-light);margin-bottom:6px}.card-subtitle{font-size:14px;color:var(--text-muted);font-weight:400}.private-room-section{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.private-room-btn{padding:20px;border:none;border-radius:12px;background:linear-gradient(135deg,#667eea26,#764ba226);border:2px solid rgba(102,126,234,.3);cursor:pointer;transition:all .3s ease;width:100%;margin-bottom:12px}.private-room-btn:hover{background:linear-gradient(135deg,#667eea40,#764ba240);border-color:#667eea80;transform:translateY(-2px);box-shadow:0 8px 20px #667eea33}.btn-label{font-size:18px;font-weight:700;color:var(--text-light);margin-bottom:4px}.btn-hint{font-size:13px;color:var(--text-muted)}.divider-text{text-align:center;color:var(--text-muted);font-size:14px;margin:8px 0;font-weight:500}.join-room-group{display:flex;gap:8px;margin-bottom:16px}.room-code-input{flex:1;padding:14px 16px;border:2px solid rgba(255,255,255,.1);border-radius:10px;background:#ffffff0d;color:var(--text-light);font-size:18px;text-align:center;text-transform:uppercase;letter-spacing:4px;font-weight:700;font-family:Courier New,monospace;transition:all .3s ease}.room-code-input:focus{outline:none;border-color:#667eea80;background:#ffffff14;box-shadow:0 0 0 4px #667eea1a}.room-code-input::placeholder{color:var(--text-muted);letter-spacing:2px}.btn-join{padding:14px 24px;border:none;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all .3s ease;white-space:nowrap}.btn-join:hover{transform:translateY(-2px);box-shadow:0 8px 20px #667eea66}.btn-text-link{background:none;border:none;color:var(--text-muted);font-size:14px;cursor:pointer;padding:8px;transition:color .2s ease}.btn-text-link:hover{color:var(--text-light)}.room-code-display{padding:28px;background:linear-gradient(135deg,#667eea26,#764ba226);border-radius:16px;border:2px solid rgba(102,126,234,.4);animation:slideIn .3s ease-out}.room-code-header{font-size:15px;color:var(--text-muted);margin-bottom:16px;font-weight:500}.room-code{font-size:42px;font-weight:800;letter-spacing:12px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:20px 0;font-family:Courier New,monospace;text-shadow:0 0 30px rgba(102,126,234,.3)}.room-code-hint{font-size:14px;color:var(--text-muted);margin-top:16px;margin-bottom:16px}.btn-cancel-small{padding:8px 20px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:var(--text-light);font-size:13px;cursor:pointer;transition:all .2s ease}.btn-cancel-small:hover{background:#ffffff0d;border-color:#ffffff4d}.searching{text-align:center;padding:40px 20px;animation:slideIn .3s ease-out}.searching-text{font-size:18px;color:var(--text-light);margin-top:20px;margin-bottom:24px;font-weight:500}.spinner{width:50px;height:50px;margin:0 auto 20px;border:4px solid rgba(255,255,255,.1);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite}.spinner-large{width:60px;height:60px;margin:0 auto;border:5px solid rgba(255,255,255,.1);border-top-color:#667eea;border-bottom-color:#764ba2;border-radius:50%;animation:spin 1.2s linear infinite}.version-display{position:fixed;bottom:12px;left:50%;transform:translate(-50%);font-size:11px;color:#ffffff4d;font-family:Courier New,monospace;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none}.game-container{max-width:500px;margin:0 auto;padding:20px}.board-card{background:var(--bg-light);border-radius:16px;overflow:hidden;border:3px solid var(--border-color);transition:all .4s ease;box-shadow:0 4px 20px #0003}.board-card.your-turn{border-color:var(--color-primary);box-shadow:0 0 30px #339af066,0 0 60px #339af033,0 4px 20px #0000004d;animation:boardPulse 2s ease-in-out infinite}.board-card.opponent-turn{border-color:var(--border-color);opacity:.85}.board-card.game-result.result-win{border-color:var(--color-o);box-shadow:0 0 40px #51cf6680,0 4px 20px #0000004d;animation:victoryGlow 1s ease-in-out}.board-card.game-result.result-loss{border-color:var(--color-x);box-shadow:0 0 40px #f03e3e80,0 4px 20px #0000004d}.board-card.game-result.result-draw{border-color:var(--color-secondary);box-shadow:0 0 30px #868e9666,0 4px 20px #0000004d}@keyframes boardPulse{0%,to{box-shadow:0 0 30px #339af066,0 0 60px #339af033,0 4px 20px #0000004d}50%{box-shadow:0 0 40px #339af099,0 0 80px #339af04d,0 4px 20px #0000004d}}@keyframes victoryGlow{0%,to{box-shadow:0 0 40px #51cf6680,0 4px 20px #0000004d}50%{box-shadow:0 0 60px #51cf66cc,0 0 100px #51cf6666,0 4px 20px #0000004d}}.board-header{background:#0003;padding:16px 20px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--border-color)}.btn-exit{position:absolute;left:16px;width:32px;height:32px;border:none;background:transparent;color:var(--text-muted);font-size:28px;line-height:1;cursor:pointer;transition:all .3s ease;border-radius:50%;display:flex;align-items:center;justify-content:center}.btn-exit:hover{background:#ffffff1a;color:var(--text-light)}.btn-exit.exit-confirm{color:var(--color-danger);animation:exitPulse .6s ease-in-out infinite}.btn-exit.exit-confirm:hover{background:#f03e3e1a;color:var(--color-danger)}@keyframes exitPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.btn-rematch-icon{position:absolute;right:16px;width:32px;height:32px;border:none;background:transparent;color:var(--text-muted);font-size:26px;line-height:1;cursor:pointer;transition:all .3s ease;border-radius:50%;display:flex;align-items:center;justify-content:center}.btn-rematch-icon:hover{background:#51cf6626;color:var(--color-o);transform:rotate(180deg)}.btn-rematch-icon:active{transform:rotate(180deg) scale(.9)}.btn-rematch-icon.waiting{color:var(--text-muted);opacity:.5;cursor:not-allowed;animation:rematchSpin 2s linear infinite}.btn-rematch-icon.waiting:hover{background:transparent;transform:none}@keyframes rematchSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-rematch-icon.highlight{color:var(--color-o);animation:rematchPulse 1s ease-in-out infinite}.btn-rematch-icon.highlight:hover{background:#51cf6633;color:var(--color-o)}@keyframes rematchPulse{0%,to{transform:scale(1);box-shadow:0 0 #51cf66b3}50%{transform:scale(1.15);box-shadow:0 0 0 8px #51cf6600}}.header-actions{position:absolute;right:16px;display:flex;align-items:center;gap:8px}.btn-restart-icon{width:32px;height:32px;border:none;background:transparent;color:#ff9800;font-size:26px;line-height:1;cursor:pointer;transition:all .3s ease;border-radius:50%;display:flex;align-items:center;justify-content:center}.btn-restart-icon:hover:not(:disabled){background:#ff980026;color:#ff9800;transform:rotate(-180deg)}.btn-restart-icon:active:not(:disabled){transform:rotate(-180deg) scale(.9)}.btn-restart-icon:disabled{opacity:.3;cursor:not-allowed;color:var(--text-muted)}.btn-restart-icon.waiting{color:#ff9800;opacity:.7;cursor:not-allowed;animation:restartSpin 1s linear infinite}.btn-restart-icon.waiting:hover{background:transparent;transform:none}@keyframes restartSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-restart-icon.highlight{color:#ff9800;animation:restartPulse 1s ease-in-out infinite}.btn-restart-icon.highlight:hover{background:#ff980033;color:#ff9800}@keyframes restartPulse{0%,to{transform:scale(1);box-shadow:0 0 #ff9800b3}50%{transform:scale(1.15);box-shadow:0 0 0 8px #ff980000}}.turn-indicator{font-size:18px;font-weight:600;color:var(--text-light);text-align:center;transition:all .3s ease}.turn-indicator.exit-warning{color:var(--color-danger);font-weight:700}.turn-indicator.your-turn{color:var(--color-primary);font-size:20px}.turn-indicator.opponent-turn{color:var(--text-muted)}.turn-indicator.game-result{font-size:22px}.turn-indicator.game-result.result-win{color:var(--color-o)}.turn-indicator.game-result.result-loss{color:var(--color-x)}.turn-indicator.game-result.result-draw{color:var(--color-secondary)}.result-title{font-size:22px;font-weight:700;animation:scaleIn .4s ease-out}.result-subtitle{font-size:12px;margin-top:4px;opacity:.8}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.btn-forfeit{background:transparent;border:1px solid var(--color-danger);color:var(--color-danger);padding:6px 12px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease}.btn-forfeit:hover{background:var(--color-danger);color:#fff;transform:none;box-shadow:none}.forfeit-text{font-weight:500}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--game-board-gap);padding:var(--game-board-padding);background:transparent}.cell{aspect-ratio:1;background:var(--bg-light);border:2px solid var(--border-color);border-radius:8px;font-size:48px;font-weight:700;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;color:var(--text-light)}.cell:hover:not(.occupied){background:#353535;border-color:var(--color-primary)}.cell:active:not(.occupied){transform:scale(.95)}.cell.occupied{cursor:not-allowed}.cell.cell-x{color:var(--color-x)}.cell.cell-o{color:var(--color-o)}.expansion-controls{background:#667eea1a;border:2px solid rgba(102,126,234,.3);border-radius:12px;padding:20px;margin:16px 24px;text-align:center;animation:slideIn .3s ease-out}.expansion-message{font-size:16px;color:var(--text-light);margin-bottom:16px;font-weight:600}.expansion-buttons{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;max-width:300px;margin:0 auto}.expansion-btn{padding:12px 16px;border:2px solid rgba(102,126,234,.4);border-radius:8px;background:#667eea26;color:var(--text-light);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.expansion-btn:hover{background:#667eea4d;border-color:#667eea99;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.expansion-btn:active{transform:translateY(0)}.expansion-btn[data-direction=top]{grid-column:2;grid-row:1}.expansion-btn[data-direction=left]{grid-column:1;grid-row:2}.expansion-btn[data-direction=right]{grid-column:3;grid-row:2}.expansion-btn[data-direction=bottom]{grid-column:2;grid-row:2}.turn-indicator.expansion-phase{color:#667eea;font-weight:700}.board-card.expansion-phase{border-color:#667eea99;box-shadow:0 0 30px #667eea80,0 4px 20px #0000004d}.rematch-timer{background:#667eea26;border:2px solid rgba(102,126,234,.3);padding:12px 16px;margin:16px 24px;border-radius:10px;text-align:center;animation:slideIn .3s ease-out}.rematch-timer span{color:var(--text-light);font-size:14px}#rematch-countdown{color:var(--color-primary);font-weight:700;font-size:16px}.confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999}.hidden{display:none!important}@media (max-width: 600px){.lobby-title{font-size:40px;margin-bottom:24px}.mini-board{width:150px;height:150px;padding:12px;gap:6px;margin-bottom:30px}.mini-cell{font-size:20px}.mini-cell.glow{font-size:14px}.menu-card{padding:20px}.card-icon{font-size:40px;margin-bottom:10px}.card-title{font-size:20px}.card-subtitle{font-size:13px}.room-code{font-size:32px;letter-spacing:8px}.room-code-input{font-size:16px;padding:12px 14px}.btn-join{padding:12px 20px;font-size:14px}.game-container{padding:10px}.board-card{border-radius:12px}.board-header{padding:12px 16px}.btn-exit{left:12px;width:28px;height:28px;font-size:24px}.btn-rematch-icon{right:12px;width:28px;height:28px;font-size:22px}.turn-indicator{font-size:16px}.turn-indicator.your-turn,.turn-indicator.game-result,.result-title{font-size:18px}.result-subtitle{font-size:11px}.btn-forfeit{font-size:12px;padding:5px 10px}.board{padding:var(--game-board-padding-mobile);gap:var(--game-board-gap-mobile)}.cell{font-size:36px}.cf-game-area{padding:var(--game-board-padding-mobile)}.cf-board{gap:var(--game-board-gap-mobile);padding:var(--game-board-padding-mobile)}.cf-cell{width:36px;height:36px}}.cf-game-area{padding:var(--game-board-padding);background:transparent}.cf-board{display:grid;grid-template-columns:repeat(7,auto);grid-template-rows:repeat(6,auto);gap:var(--game-board-gap);padding:16px;background:transparent;border-radius:12px;justify-content:center}.cf-cell{width:50px;height:50px;justify-self:center;align-self:center;background:var(--bg-light);border:2px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;transition:all .3s ease;position:relative;cursor:pointer}.cf-cell:not(.cf-occupied):hover{transform:scale(1.1);border-color:var(--color-primary);box-shadow:0 0 15px #339af066}.cf-cell:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:50%;background:#0003}.cf-cell.cf-red{background:radial-gradient(circle at 30% 30%,#ff8787,var(--color-x));border-color:var(--color-x);box-shadow:0 0 15px #ff6b6b80}.cf-cell.cf-red:before{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent)}.cf-cell.cf-yellow{background:radial-gradient(circle at 30% 30%,#ffd43b,#ffc43b);border-color:#ffc43b;box-shadow:0 0 15px #ffd43b80}.cf-cell.cf-yellow:before{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent)}.cf-cell.cf-column-highlight{background:#339af01a;border-color:var(--color-primary)}.cf-color-indicator{display:inline-block;width:21px;height:21px;border-radius:50%;margin-left:8px;vertical-align:-4px;border:1px solid rgba(255,255,255,.3);position:relative}.cf-color-indicator:before{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent)}.cf-red-indicator{background:radial-gradient(circle at 30% 30%,#ff8787,var(--color-x));box-shadow:0 0 8px #ff6b6b80}.cf-yellow-indicator{background:radial-gradient(circle at 30% 30%,#ffd43b,#ffc43b);box-shadow:0 0 8px #ffd43b80}.cf-board-card{max-width:600px}.game-type-buttons{grid-template-columns:repeat(2,1fr)}.gomoku-game-area{padding:var(--game-board-padding);background:transparent}.gomoku-board{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);gap:0;padding:12px;background:#8b5a2b4d;border-radius:12px;justify-content:center;max-width:560px;margin:0 auto;aspect-ratio:1;position:relative;box-shadow:0 4px 12px #0000004d}.gomoku-board:before{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;background-image:repeating-linear-gradient(0deg,transparent 0%,transparent calc(100% / 30 - .5px),rgba(139,90,43,.4) calc(100% / 30 - .5px),rgba(139,90,43,.4) calc(100% / 30 + .5px),transparent calc(100% / 30 + .5px),transparent calc(100% / 15)),repeating-linear-gradient(90deg,transparent 0%,transparent calc(100% / 30 - .5px),rgba(139,90,43,.4) calc(100% / 30 - .5px),rgba(139,90,43,.4) calc(100% / 30 + .5px),transparent calc(100% / 30 + .5px),transparent calc(100% / 15));pointer-events:none;border-radius:8px}.gomoku-cell{aspect-ratio:1;background:transparent;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;position:relative;min-width:20px;min-height:20px}.gomoku-cell:not(.gomoku-occupied):hover{background:#339af033;transform:scale(1.2)}.gomoku-cell-hover{background:#339af026;transform:scale(1.15)}.gomoku-cell.gomoku-occupied{cursor:default;pointer-events:none}.gomoku-cell.gomoku-occupied:hover{transform:none}.gomoku-cell.gomoku-black{background:radial-gradient(circle at 35% 35%,#4a4a4a,#0a0a0a);box-shadow:0 2px 6px #00000080,inset 0 1px 2px #fff3;border:1px solid #0a0a0a}.gomoku-cell.gomoku-black:before{content:"";position:absolute;top:15%;right:15%;bottom:15%;left:15%;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.3),transparent);pointer-events:none}.gomoku-cell.gomoku-white{background:radial-gradient(circle at 35% 35%,#fff,#e0e0e0);box-shadow:0 2px 6px #0000004d,inset 0 1px 2px #0000001a;border:1px solid #d0d0d0}.gomoku-cell.gomoku-white:before{content:"";position:absolute;top:15%;right:15%;bottom:15%;left:15%;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.6),transparent);pointer-events:none}.gomoku-cell.gomoku-stone-placed{animation:stonePlacement .3s ease-out}@keyframes stonePlacement{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.gomoku-cell.gomoku-last-move:after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:#ff0000b3;box-shadow:0 0 8px #f00c;animation:lastMovePulse 1.5s ease-in-out infinite}@keyframes lastMovePulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.gomoku-cell.gomoku-winning{animation:winningStone .6s ease-in-out;box-shadow:0 0 15px #51cf66cc,0 0 30px #51cf6666;z-index:10}@keyframes winningStone{0%,to{transform:scale(1)}25%{transform:scale(1.2)}50%{transform:scale(1.1)}75%{transform:scale(1.2)}}.gomoku-stone-indicator{display:inline-block;width:21px;height:21px;border-radius:50%;margin-left:8px;vertical-align:-4px;position:relative;box-shadow:0 2px 4px #0000004d}.gomoku-stone-indicator:before{content:"";position:absolute;top:15%;right:15%;bottom:15%;left:15%;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4),transparent);pointer-events:none}.gomoku-black-indicator{background:radial-gradient(circle at 35% 35%,#4a4a4a,#0a0a0a);border:1px solid #0a0a0a}.gomoku-white-indicator{background:radial-gradient(circle at 35% 35%,#fff,#e0e0e0);border:1px solid #d0d0d0}.gomoku-board-card{max-width:600px}.game-container:has(.gomoku-board-card){max-width:650px}@media (max-width: 768px){.gomoku-board{max-width:90vw;padding:10px}.gomoku-cell{min-width:18px;min-height:18px}}@media (max-width: 480px){.gomoku-game-area{padding:var(--game-board-padding-mobile)}.gomoku-board{max-width:95vw;padding:8px}.gomoku-cell{min-width:16px;min-height:16px}.gomoku-cell.gomoku-last-move:after{width:25%;height:25%}.gomoku-stone-indicator{width:18px;height:18px;margin-left:6px;vertical-align:-3px}}@media (max-width: 320px){.gomoku-board{padding:6px}.gomoku-cell{min-width:14px;min-height:14px}}@media (min-width: 1200px){.gomoku-board{max-width:600px;padding:16px}.gomoku-cell{min-width:26px;min-height:26px}}@media (max-height: 600px) and (orientation: landscape){.gomoku-board{max-width:70vh;max-height:70vh}}@media (pointer: coarse){.gomoku-cell{padding:2px}.gomoku-cell:not(.gomoku-occupied):hover{transform:none;background:transparent}.gomoku-cell:not(.gomoku-occupied):active{background:#339af04d;transform:scale(.9)}}.rps-game{padding:var(--game-board-padding);background:transparent}.rps-progress{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background:#667eea14;border-radius:10px;margin-bottom:8px;border:1px solid rgba(102,126,234,.2);font-size:14px;color:var(--text-light);font-weight:600}.progress-dots{font-size:18px;letter-spacing:2px;font-weight:400;margin-left:4px;color:var(--text-light)}.vs-text{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:1px}.round-indicator{text-align:center;font-size:13px;color:var(--text-muted);font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.round-result-compact{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;background:#00000026;border-radius:10px;margin-bottom:16px;border:1px solid rgba(255,255,255,.1);animation:slideIn .3s ease-out}.round-result-compact.hidden{display:none}.choice-emoji-small{font-size:28px;line-height:1;animation:choiceReveal .4s ease-out}@keyframes choiceReveal{0%{transform:scale(0) rotate(-180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.vs-small{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.round-result-text{font-size:14px;font-weight:700;padding:6px 12px;border-radius:6px;animation:resultSlideIn .3s ease-out .2s both}@keyframes resultSlideIn{0%{transform:translateY(-5px);opacity:0}to{transform:translateY(0);opacity:1}}.round-result-text.win{color:var(--color-o);background:#51cf6626;border:1px solid rgba(81,207,102,.3)}.round-result-text.lose{color:var(--color-x);background:#ff6b6b26;border:1px solid rgba(255,107,107,.3)}.round-result-text.draw{color:var(--color-secondary);background:#868e9626;border:1px solid rgba(134,142,150,.3)}.choice-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.choice-btn{padding:28px 16px;border:3px solid rgba(255,255,255,.15);border-radius:16px;background:linear-gradient(135deg,#ffffff14,#ffffff0a);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;overflow:hidden}.choice-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.choice-btn:hover:not(:disabled):before{left:100%}.choice-btn:hover:not(:disabled){transform:translateY(-4px);border-color:#667eea80;box-shadow:0 8px 24px #667eea4d;background:linear-gradient(135deg,#667eea26,#764ba226)}.choice-btn:active:not(:disabled){transform:translateY(-2px)}.choice-btn:disabled{cursor:not-allowed;opacity:.5}.choice-btn.chosen{border-color:#667eeacc;background:linear-gradient(135deg,#667eea40,#764ba240);box-shadow:0 0 30px #667eea80;animation:chosenPulse 1.5s ease-in-out infinite}@keyframes chosenPulse{0%,to{box-shadow:0 0 30px #667eea80}50%{box-shadow:0 0 40px #667eeab3,0 0 60px #667eea4d}}.choice-emoji-large{font-size:48px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));transition:all .3s ease}.choice-btn:hover:not(:disabled) .choice-emoji-large{transform:scale(1.1);filter:drop-shadow(0 6px 12px rgba(102,126,234,.4))}.choice-btn.chosen .choice-emoji-large{animation:emojiFloat 2s ease-in-out infinite}@keyframes emojiFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.choice-name{font-size:14px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:1px}.rps-status{text-align:center;font-size:16px;font-weight:600;color:var(--text-light);padding:12px;border-radius:8px;transition:all .3s ease}.rps-status.your-turn{color:var(--color-primary);background:#339af01a;border:2px solid rgba(51,154,240,.3)}.rps-status.waiting{color:var(--text-muted);background:#ffffff0d;border:2px solid rgba(255,255,255,.1);animation:waitingPulse 2s ease-in-out infinite}@keyframes waitingPulse{0%,to{opacity:1}50%{opacity:.6}}.board-card.waiting{border-color:var(--border-color);opacity:.9}@media (max-width: 768px){.rps-progress{padding:10px 14px;gap:10px;font-size:13px}.progress-dots{font-size:16px;letter-spacing:1px}.round-indicator{font-size:12px;margin-bottom:10px}.round-result-compact{padding:10px 14px;gap:8px}.choice-emoji-small{font-size:24px}.choice-btn{padding:24px 12px}.choice-emoji-large{font-size:42px}}@media (max-width: 480px){.rps-game{padding:var(--game-board-padding-mobile)}.rps-progress{padding:8px 12px;gap:8px;font-size:12px;flex-wrap:wrap}.progress-dots{font-size:15px;letter-spacing:1px}.vs-text{font-size:11px}.round-indicator{font-size:11px;margin-bottom:8px}.round-result-compact{padding:8px 12px;gap:6px;flex-wrap:wrap}.choice-emoji-small{font-size:20px}.vs-small{font-size:10px}.round-result-text{font-size:12px;padding:5px 10px}.choice-buttons{grid-template-columns:1fr;gap:12px}.choice-btn{padding:20px 16px;flex-direction:row;justify-content:center}.choice-emoji-large{font-size:36px}.choice-name{font-size:16px}.rps-status{font-size:14px;padding:10px}}@media (max-width: 320px){.progress-dots{font-size:14px}.choice-emoji-small{font-size:18px}.choice-emoji-large{font-size:32px}.choice-name{font-size:14px}}@media (min-width: 1200px){.rps-progress{padding:14px 18px;gap:14px;font-size:15px}.progress-dots{font-size:20px}.round-indicator{font-size:14px}.choice-emoji-small{font-size:32px}.choice-btn{padding:32px 20px}.choice-emoji-large{font-size:56px}}@media (pointer: coarse){.choice-btn:hover:not(:disabled){transform:none;border-color:#ffffff26;box-shadow:none;background:linear-gradient(135deg,#ffffff14,#ffffff0a)}.choice-btn:hover:not(:disabled):before{left:-100%}.choice-btn:hover:not(:disabled) .choice-emoji-large{transform:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.choice-btn:active:not(:disabled){transform:scale(.95);background:linear-gradient(135deg,#667eea33,#764ba233);border-color:#667eea80}}.pwa-update-toast{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:10000;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 24px;border-radius:12px;box-shadow:0 8px 32px #667eea80;display:flex;align-items:center;gap:16px;max-width:90%;animation:slideDown .3s ease}.update-content{display:flex;align-items:center;gap:12px;flex:1}.update-icon{font-size:24px}.update-text{font-size:15px;font-weight:600}.btn-update{background:#fff;color:#667eea;border:none;padding:8px 16px;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-update:hover{transform:scale(1.05);box-shadow:0 2px 8px #0003}.btn-update-later{background:transparent;color:#fff;border:1px solid white;padding:8px 16px;border-radius:6px;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s}.btn-update-later:hover{background:#ffffff1a}@keyframes slideDown{0%{transform:translate(-50%,-100px);opacity:0}to{transform:translate(-50%);opacity:1}}@keyframes slideUp{0%{transform:translate(-50%);opacity:1}to{transform:translate(-50%,-100px);opacity:0}}@media (max-width: 600px){.pwa-update-toast{padding:12px 16px;gap:12px;flex-wrap:wrap}.update-content{gap:8px}.update-icon{font-size:20px}.update-text{font-size:14px}.btn-update,.btn-update-later{padding:6px 12px;font-size:13px}}.install-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.install-modal.fade-out{animation:fadeOut .3s ease}.install-modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.install-modal-content{position:relative;background:linear-gradient(135deg,#1e1e1efa,#141414fa);border:2px solid rgba(102,126,234,.4);border-radius:20px;padding:32px 24px;max-width:360px;width:90%;text-align:center;animation:slideUp .3s ease;box-shadow:0 20px 60px #00000080}.install-modal-icon{font-size:64px;margin-bottom:16px}.install-modal-title{font-size:24px;font-weight:700;color:var(--text-light);margin-bottom:12px}.install-modal-subtitle{font-size:15px;color:var(--text-muted);margin-bottom:28px;line-height:1.5}.install-modal-buttons{display:flex;flex-direction:column;gap:12px}.btn-install-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 24px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-install-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px #667eea66}.btn-install-primary:active{transform:translateY(0)}.btn-install-secondary{background:#667eea26;color:var(--text-light);border:2px solid rgba(102,126,234,.3);padding:12px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.btn-install-secondary:hover{background:#667eea40;border-color:#667eea80}.btn-install-tertiary{background:transparent;color:var(--text-muted);border:none;padding:10px 24px;font-size:14px;font-weight:500;cursor:pointer;transition:color .2s}.btn-install-tertiary:hover{color:var(--text-light)}.ios-share-icon{display:inline-block;background:#667eea33;padding:2px 8px;border-radius:4px;font-weight:700;color:#667eea}@media (max-width: 600px){.install-modal-content{padding:28px 20px;max-width:340px}.install-modal-icon{font-size:56px}.install-modal-title{font-size:22px}.install-modal-subtitle{font-size:14px;margin-bottom:24px}.btn-install-primary{padding:12px 20px;font-size:15px}.btn-install-secondary{padding:10px 20px;font-size:14px}.btn-install-tertiary{font-size:13px}}.offline-banner{position:fixed;top:0;left:0;right:0;background:linear-gradient(135deg,#f03e3e,#c92a2a);color:#fff;padding:12px;text-align:center;z-index:9999;animation:slideDownBanner .3s ease;box-shadow:0 4px 12px #0000004d}.offline-content{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px}.offline-icon{font-size:18px}@keyframes slideDownBanner{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slideUpBanner{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.offline-mode{filter:grayscale(30%)}.offline-mode .btn-primary,.offline-mode .menu-card{pointer-events:none;opacity:.6}.share-buttons{display:flex;flex-direction:column;gap:12px;margin:20px 0}.btn-share{background:linear-gradient(135deg,#667eea,#764ba2);font-size:16px;padding:14px 24px;font-weight:700;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;color:#fff}.btn-share:hover{transform:translateY(-2px);box-shadow:0 8px 24px #667eea66}.btn-qr,.btn-copy{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);color:var(--text-light);font-size:14px;padding:12px 20px;border-radius:10px;cursor:pointer;transition:all .3s ease}.btn-qr:hover,.btn-copy:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 16px #ffffff1a}.manual-code-section{margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}.manual-code-label{font-size:13px;color:var(--text-muted);margin-bottom:12px;font-weight:500;text-align:center}.qr-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:fadeIn .2s ease}.qr-modal-content{background:var(--bg-light);border-radius:20px;padding:36px;max-width:420px;width:100%;position:relative;box-shadow:0 12px 48px #00000080;border:2px solid rgba(102,126,234,.3);animation:slideUp .3s ease}.qr-close-btn{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:#ffffff1a;border:none;color:var(--text-muted);font-size:28px;line-height:1;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.qr-close-btn:hover{background:#fff3;color:var(--text-light);transform:rotate(90deg)}.qr-modal-content h2{margin:0 0 28px;color:var(--text-light);text-align:center;font-size:26px;font-weight:700}.qr-container{display:flex;justify-content:center;align-items:center;min-height:320px;background:#fff;border-radius:16px;padding:24px;margin-bottom:24px;box-shadow:0 4px 20px #0000001a}.qr-image{width:100%;max-width:300px;height:auto;display:block;image-rendering:crisp-edges}.loading-spinner{color:var(--text-muted);font-size:14px;font-weight:500}.qr-container .error{color:var(--color-danger);text-align:center;font-size:14px;padding:20px}.qr-room-code{text-align:center;font-size:14px;color:var(--text-muted);margin-bottom:12px;font-weight:500}.qr-room-code strong{color:var(--text-light);font-size:20px;font-family:Courier New,monospace;letter-spacing:3px;display:block;margin-top:6px}.qr-instructions{text-align:center;font-size:13px;color:var(--text-muted);margin:0;line-height:1.5}@media (max-width: 600px){.qr-modal-content{padding:28px 24px;max-width:95%}.qr-modal-content h2{font-size:22px;margin-bottom:24px}.qr-container{min-height:280px;padding:20px}.qr-image{max-width:250px}.share-buttons{gap:10px;margin:16px 0}.btn-share{font-size:15px;padding:12px 20px}.btn-qr,.btn-copy{font-size:13px;padding:10px 16px}.manual-code-section{margin-top:20px;padding-top:16px}.manual-code-label{font-size:12px}.qr-room-code strong{font-size:18px;letter-spacing:2px}}@media (max-width: 400px){.qr-modal-content{padding:24px 20px}.qr-container{min-height:240px;padding:16px}.qr-image{max-width:220px}}.decorative-board{display:none!important}.lobby-title{font-size:42px;margin-bottom:36px}.game-carousel-container{margin:0 auto 40px;max-width:100%}.game-carousel-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px;height:280px}.game-carousel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;max-width:450px;height:100%;position:relative;flex:1}.carousel-nav-container{display:flex;flex-direction:column;gap:32px;height:100%;flex-shrink:0}.carousel-nav{width:48px;flex:1;border:none;border-radius:12px;background:linear-gradient(135deg,#667eea4d,#764ba24d);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;z-index:10;flex-shrink:0;box-shadow:0 4px 16px #667eea4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.carousel-nav:hover{background:linear-gradient(135deg,#667eea80,#764ba280);transform:scale(1.05);box-shadow:0 6px 20px #667eea80}.carousel-nav:active{transform:scale(.95);box-shadow:0 2px 8px #667eea66}.nav-icon{font-size:20px;color:var(--text-light);line-height:1;font-weight:700}.game-card{width:95%;max-width:450px;padding:16px 20px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff0d;cursor:pointer;transition:all .3s ease-out;text-align:center;position:absolute;top:50%;left:50%;transform-origin:center}.game-card.focused{transform:translate(-50%,-50%) scale(1);opacity:1;filter:blur(0px);background:linear-gradient(135deg,#667eea33,#764ba233);border:3px solid rgba(102,126,234,.8);box-shadow:0 8px 32px #667eea80;z-index:3;pointer-events:auto}.game-card.above{transform:translate(-50%,calc(-50% - 96px)) scale(.9);opacity:.6;filter:blur(0px);z-index:2;pointer-events:auto;background:#ffffff14;border:2px solid rgba(255,255,255,.15)}.game-card.below{transform:translate(-50%,calc(-50% + 96px)) scale(.9);opacity:.6;filter:blur(0px);z-index:2;pointer-events:auto;background:#ffffff14;border:2px solid rgba(255,255,255,.15)}.game-card.hidden{transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;z-index:1}.game-card.above:hover{opacity:.85;transform:translate(-50%,calc(-50% - 96px)) scale(.95);background:#667eea26;border-color:#667eea66;box-shadow:0 4px 16px #667eea4d}.game-card.below:hover{opacity:.85;transform:translate(-50%,calc(-50% + 96px)) scale(.95);background:#667eea26;border-color:#667eea66;box-shadow:0 4px 16px #667eea4d}.game-icon{font-size:36px;margin-bottom:8px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.game-name{font-size:14px;font-weight:700;color:var(--text-light);margin-bottom:4px}.game-desc{font-size:11px;color:var(--text-muted);font-weight:400}.main-actions{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}.btn-create-game{width:100%;padding:20px 24px;border:none;border-radius:16px;background:linear-gradient(135deg,#667eea,#764ba2);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;box-shadow:0 4px 20px #667eea66}.btn-create-game:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn-create-game:hover:before{left:100%}.btn-create-game:hover{transform:translateY(-4px);box-shadow:0 8px 32px #667eea99}.btn-create-game:active{transform:translateY(-2px)}.create-icon{font-size:40px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.create-content{flex:1;text-align:left}.create-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:4px}.create-subtitle{font-size:13px;color:#fffc;font-weight:400}.btn-random-compact{width:100%;padding:14px 20px;border:2px solid rgba(102,126,234,.4);border-radius:12px;background:#667eea1a;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:12px}.btn-random-compact:hover{background:#667eea33;border-color:#667eea99;transform:translateY(-2px)}.random-icon{font-size:24px;line-height:1}.random-text{font-size:16px;font-weight:600;color:var(--text-light)}.join-compact{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;margin-top:8px}.join-label{font-size:14px;color:var(--text-muted);font-weight:500;white-space:nowrap}.join-input-group{display:flex;gap:8px;flex:1}.join-input-compact{flex:1;padding:10px 12px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background:#ffffff0d;color:var(--text-light);font-size:15px;text-align:center;text-transform:uppercase;letter-spacing:3px;font-weight:700;font-family:Courier New,monospace;transition:all .3s ease}.join-input-compact:focus{outline:none;border-color:#667eea99;background:#ffffff14;box-shadow:0 0 0 3px #667eea1a}.join-input-compact::placeholder{color:var(--text-muted);letter-spacing:2px;opacity:.5}.btn-join-compact{padding:10px 20px;border:none;border-radius:8px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;white-space:nowrap}.btn-join-compact:hover{transform:translateY(-2px);box-shadow:0 4px 16px #667eea80}.btn-join-compact:active{transform:translateY(0)}@media (max-width: 600px){.lobby-title{font-size:36px;margin-bottom:28px}.game-carousel-wrapper{height:260px;gap:12px}.carousel-nav{width:44px;flex:1}.nav-icon{font-size:18px}.game-card{width:95%;padding:14px 18px}.game-card.above{transform:translate(-50%,calc(-50% - 88px)) scale(.9)}.game-card.below{transform:translate(-50%,calc(-50% + 88px)) scale(.9)}.game-card.above:hover{transform:translate(-50%,calc(-50% - 88px)) scale(.95)}.game-card.below:hover{transform:translate(-50%,calc(-50% + 88px)) scale(.95)}.game-icon{font-size:32px}.game-name{font-size:13px}.game-desc{font-size:10px}.btn-create-game{padding:18px 20px;gap:14px}.create-icon{font-size:36px}.create-title{font-size:18px}.create-subtitle{font-size:12px}.join-compact{padding:10px 14px;gap:10px}.join-label{font-size:13px}.join-input-compact{padding:9px 10px;font-size:14px;letter-spacing:2px}.btn-join-compact{padding:9px 16px;font-size:13px}.version-display{font-size:10px;bottom:10px}}@media (max-width: 400px){.lobby-title{font-size:32px;margin-bottom:24px}.game-carousel-wrapper{height:240px;gap:10px}.carousel-nav{width:40px;flex:1}.nav-icon{font-size:16px}.game-card{width:96%;padding:12px 16px}.game-card.above{transform:translate(-50%,calc(-50% - 80px)) scale(.9)}.game-card.below{transform:translate(-50%,calc(-50% + 80px)) scale(.9)}.game-card.above:hover{transform:translate(-50%,calc(-50% - 80px)) scale(.95)}.game-card.below:hover{transform:translate(-50%,calc(-50% + 80px)) scale(.95)}.game-icon{font-size:28px}.btn-create-game{padding:16px 18px}.join-compact{flex-direction:column;align-items:stretch;gap:8px}.join-label{text-align:center}.join-input-group{flex-direction:column}.btn-join-compact{width:100%}.version-display{font-size:9px;bottom:8px}}.room-code-display{padding:24px;background:linear-gradient(135deg,#667eea26,#764ba226);border-radius:16px;border:2px solid rgba(102,126,234,.4);animation:slideIn .3s ease-out}.expanding-board-container{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:600px;margin:0 auto}.expanding-board-middle{display:flex;align-items:center;gap:12px;width:100%}.expanding-board-middle .board{flex:1;width:auto;max-width:600px;min-width:280px}.expansion-frame-btn{background:linear-gradient(135deg,#667eea80,#764ba280);border:2px solid rgba(102,126,234,.8);border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 20px #667eea80;animation:frameGlow 2s ease-in-out infinite}.expansion-frame-btn:hover{background:linear-gradient(135deg,#667eeab3,#764ba2b3);box-shadow:0 0 30px #667eeacc;transform:scale(1.05)}.expansion-frame-btn:active{transform:scale(.98)}.expansion-frame-btn.hidden{display:none}.expansion-frame-top,.expansion-frame-bottom{width:100%;height:40px;max-width:600px}.expansion-frame-left,.expansion-frame-right{width:40px;height:100%;min-height:300px}.expansion-icon{font-size:24px;color:#fff;-webkit-user-select:none;user-select:none;text-shadow:0 0 10px rgba(255,255,255,.8)}@keyframes frameGlow{0%,to{box-shadow:0 0 20px #667eea80;border-color:#667eeacc}50%{box-shadow:0 0 35px #667eeae6;border-color:#667eea}}@media (max-width: 600px){.expanding-board-container,.expanding-board-middle{gap:10px}.expansion-frame-top,.expansion-frame-bottom{height:35px}.expansion-frame-left,.expansion-frame-right{width:35px;min-height:250px}.expansion-icon{font-size:20px}}@media (max-width: 400px){.expansion-frame-top,.expansion-frame-bottom{height:30px}.expansion-frame-left,.expansion-frame-right{width:30px;min-height:220px}.expansion-icon{font-size:18px}}.waiting-lobby{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--bg-dark);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-y:auto;z-index:1000;animation:fadeIn .3s ease-out}.waiting-lobby.fade-out{animation:fadeOut .3s ease-out}.lobby-header{width:100%;max-width:500px;display:flex;align-items:center;margin-bottom:28px}.btn-lobby-cancel{display:flex;align-items:center;gap:6px;background:transparent;border:none;color:var(--text-primary);font-size:15px;cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .2s ease}.btn-lobby-cancel:hover{background:#ffffff1a}.cancel-icon{font-size:20px}.lobby-card{width:100%;max-width:500px;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;margin-bottom:24px}.lobby-info-card{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea4d;display:flex;align-items:stretch;min-height:140px;padding:0}.lobby-icon-section{width:40%;display:flex;align-items:center;justify-content:center;padding:20px}.lobby-game-icon-large{font-size:64px}.lobby-divider{width:2px;background:linear-gradient(to bottom,transparent 10%,rgba(102,126,234,.5) 20%,rgba(102,126,234,.5) 80%,transparent 90%);margin:0}.lobby-content-section{width:60%;display:flex;flex-direction:column;padding:20px}.lobby-game-info{flex:1;display:flex;flex-direction:column;justify-content:center;padding-bottom:12px}.lobby-game-name{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:4px}.lobby-game-variant{font-size:14px;color:var(--text-secondary)}.lobby-room-info{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:12px;border-top:1px solid rgba(255,255,255,.15)}.lobby-room-label{font-size:11px;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}.lobby-room-code{font-size:32px;font-weight:800;color:var(--color-primary);letter-spacing:4px;font-family:Courier New,monospace;text-shadow:0 0 15px rgba(102,126,234,.5);cursor:pointer;transition:all .2s ease}.lobby-room-code:hover{color:#667eea;text-shadow:0 0 20px rgba(102,126,234,.8);transform:scale(1.05)}.lobby-action-card{padding:16px}.lobby-share-buttons-compact{display:flex;gap:8px;margin-bottom:16px}.lobby-share-btn-compact{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 8px;background:#ffffff14;border:2px solid rgba(255,255,255,.15);border-radius:12px;color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.lobby-share-btn-compact:hover{background:#667eea33;border-color:#667eea80;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.lobby-share-btn-compact .share-icon{font-size:24px}.share-text-compact{font-size:13px}.lobby-waiting-compact{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.lobby-waiting-spinner-compact{width:24px;height:24px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.lobby-waiting-text-compact{font-size:15px;color:var(--text-secondary);animation:pulse 2s ease-in-out infinite}.btn-lobby-cancel-bottom{padding:10px 28px;background:transparent;border:2px solid rgba(255,255,255,.2);border-radius:12px;color:var(--text-primary);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:20px}.btn-lobby-cancel-bottom:hover{background:#ffffff1a;border-color:#fff6}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 600px){.waiting-lobby,.lobby-card{padding:16px}.lobby-game-icon-large{font-size:48px}.lobby-game-name{font-size:20px}.lobby-room-code{font-size:28px;letter-spacing:3px}.lobby-share-btn-compact{padding:10px 6px;font-size:13px}.lobby-share-btn-compact .share-icon{font-size:20px}.share-text-compact{font-size:12px}}@media (max-width: 400px){.lobby-game-icon-large{font-size:40px}.lobby-game-name{font-size:18px}.lobby-room-code{font-size:24px;letter-spacing:2px}.lobby-share-btn-compact{padding:8px 4px}.share-text-compact{font-size:11px}}