*{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{text-align:center;padding:60px 20px}.loading-screen h1{font-size:48px;margin-bottom:40px;color:var(--text-light)}.loading-screen .spinner{margin:0 auto}.lobby{text-align:center;max-width:450px;margin:0 auto}.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}@keyframes spin{to{transform:rotate(360deg)}}.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:2px;padding:12px;background:#8b5a2b4d;border-radius:12px;justify-content:center;max-width:500px;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,rgba(139,90,43,.4) 0px,rgba(139,90,43,.4) 1px,transparent 1px,transparent calc(100% / 15)),repeating-linear-gradient(90deg,rgba(139,90,43,.4) 0px,rgba(139,90,43,.4) 1px,transparent 1px,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}@media (max-width: 768px){.gomoku-board{max-width:90vw;padding:10px;gap:1px}.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;gap:1px}.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;gap:1px}.gomoku-cell{min-width:14px;min-height:14px}}@media (min-width: 1200px){.gomoku-board{max-width:550px;padding:16px;gap:3px}.gomoku-cell{min-width:24px;min-height:24px}}@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}}