:root{--bg: #f4f7fb;--bg-soft: #e9eff7;--panel: #ffffff;--line: #d8e2ef;--text: #1f2a37;--muted: #5f6f82;--accent: #f59e0b;--accent-2: #2563eb;--success: #0f9f62;--danger: #dc2626}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#f9fbff 0%,var(--bg) 100%);color:var(--text);font-family:Segoe UI,Tahoma,Arial,sans-serif}#root{min-height:100vh}input,button{font:inherit}.landing-container{min-height:100vh;padding:24px 16px;position:relative;overflow:hidden;background:radial-gradient(circle at 10% 15%,rgba(245,158,11,.2),transparent 28%),radial-gradient(circle at 90% 85%,rgba(37,99,235,.16),transparent 35%),var(--bg)}.landing-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(31,42,55,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,42,55,.05) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}.landing-glow{position:absolute;width:240px;height:240px;border-radius:50%;filter:blur(20px)}.landing-glow-left{top:-80px;left:-80px;background:#f59e0b3d}.landing-glow-right{right:-100px;bottom:-100px;background:#2563eb33}.landing-shell{position:relative;z-index:1;width:min(1120px,100%);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}.landing-copy,.landing-visual{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px}.landing-badge{display:inline-block;padding:6px 12px;border-radius:999px;font-size:12px;color:#8a5a00;background:#fff3d4;border:1px solid #f9d58b}.landing-title{margin:12px 0 0;font-size:clamp(2rem,5vw,3.2rem);line-height:1.05}.landing-text{margin:14px 0 0;color:var(--muted);line-height:1.6}.landing-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}.landing-btn{padding:12px 18px;border:0;border-radius:12px;font-weight:600;cursor:pointer}.landing-btn-primary{background:#f59e0b;color:#fff}.landing-btn-secondary{background:#e8f0ff;color:#1d4ed8;border:1px solid #bfdbfe}.landing-stats{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.landing-stat-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:10px}.landing-stat-value{font-weight:700}.landing-stat-label{display:block;margin-top:2px;color:var(--muted);font-size:12px}.landing-ribbon{width:fit-content;background:#e8f0ff;border:1px solid #bfdbfe;border-radius:999px;color:#1d4ed8;padding:6px 12px;font-size:13px}.landing-art-card{position:relative;margin-top:12px;border:1px solid var(--line);border-radius:16px;padding:14px;background:#fff}.landing-art-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.landing-art-kicker{font-size:12px;color:var(--muted)}.landing-art-title{margin:2px 0 0;font-size:1.1rem}.landing-live-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:#eefdf4;color:#0f9f62;border:1px solid #b9efcf;border-radius:999px;padding:5px 10px;font-size:12px}.landing-live-dot{width:8px;height:8px;border-radius:50%;background:#0f9f62}.landing-board{width:100%;height:auto;display:block}.landing-float-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px}.landing-float-top{right:8px;top:70px}.landing-float-bottom{left:8px;bottom:68px}.landing-float-label{display:block;color:var(--muted);font-size:11px}.landing-feature-row{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.landing-feature-card{border:1px solid var(--line);background:var(--bg-soft);border-radius:12px;padding:12px}.landing-feature-icon{display:inline-block;font-weight:700;color:#b45309;margin-bottom:6px}.landing-feature-card h3{margin:0;font-size:15px}.landing-feature-card p{margin:6px 0 0;color:var(--muted);font-size:14px}.landing-fade-up{animation:landingFadeUp .35s ease}.landing-float{animation:landingFloat 4.2s ease-in-out infinite}@keyframes landingFadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes landingFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@media(max-width:960px){.landing-shell{grid-template-columns:1fr}.landing-feature-row,.landing-stats{grid-template-columns:1fr 1fr}.landing-float-card{position:static;margin-top:8px}}@media(max-width:640px){.landing-title{font-size:1.8rem}.landing-actions{flex-direction:column}.landing-btn{width:100%}.landing-feature-row,.landing-stats{grid-template-columns:1fr}.landing-art-header{flex-direction:column}}.login-container{min-height:100vh;display:grid;place-items:center;padding:20px 12px}.login-card{width:min(100%,420px);padding:24px;border-radius:16px;background:var(--panel);border:1px solid var(--line);text-align:center}.login-title{margin:0 0 14px;font-size:1.8rem}.login-form{display:grid;gap:10px}.login-input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#fdfefe;color:var(--text)}.login-input:focus{outline:2px solid #bfdbfe;border-color:#60a5fa}.login-btn,.google-btn{width:100%;padding:12px;border-radius:10px;border:0;font-weight:600;cursor:pointer}.login-btn{margin-top:4px;background:#f59e0b;color:#fff}.google-btn{background:#e8f0ff;color:#1d4ed8;border:1px solid #bfdbfe}.register-text{margin-top:12px;color:var(--muted)}.register-link{color:#1d4ed8;cursor:pointer;text-decoration:underline}@media(max-width:480px){.login-card{padding:20px}}.register-container{min-height:100vh;display:grid;place-items:center;padding:20px 12px}.register-card{width:min(100%,440px);padding:24px;border-radius:16px;background:var(--panel);border:1px solid var(--line);text-align:center}.register-title{margin:0 0 14px;font-size:1.8rem}.register-form{display:grid;gap:10px}.register-input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#fdfefe;color:var(--text)}.register-input:focus{outline:2px solid #bfdbfe;border-color:#60a5fa}.register-btn,.google-register-btn{width:100%;padding:12px;border-radius:10px;font-weight:600;cursor:pointer}.register-btn{margin-top:4px;border:0;background:#2563eb;color:#fff}.google-register-btn{border:1px solid #bfdbfe;background:#e8f0ff;color:#1d4ed8}.divider{margin:14px 0;border-top:1px solid var(--line)}@media(max-width:480px){.register-card{padding:20px}}.gamehome-container{min-height:100vh;display:grid;place-items:center;padding:20px 12px}.gamehome-card{width:min(100%,560px);background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;text-align:center}.gamehome-title{margin:0 0 16px;font-size:clamp(1.8rem,4vw,2.4rem)}.gamehome-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gamehome-btn{padding:12px;border:0;border-radius:10px;color:#fff;font-weight:600;cursor:pointer}.create-btn{background:#0f9f62}.join-btn{background:#2563eb}@media(max-width:520px){.gamehome-buttons{grid-template-columns:1fr}}.grid-container{min-height:100vh;max-width:700px;margin:0 auto;padding:24px 12px;text-align:center}.grid-title{margin:0 0 14px;font-size:clamp(1.5rem,4vw,2rem)}.grid-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}.grid-input{width:100%;height:56px;border:1px solid var(--line);border-radius:10px;text-align:center;font-size:17px;color:var(--text)}.grid-input:focus{outline:2px solid #bfdbfe;border-color:#60a5fa}.grid-input.duplicate{border-color:#dc2626;background:#fff1f2}.grid-btn{width:100%;margin-top:10px;padding:12px;border:0;border-radius:10px;cursor:pointer;font-weight:600}.random-btn{background:#2563eb;color:#fff}.continue-btn{background:#f59e0b;color:#fff}@media(max-width:560px){.grid-input{height:48px;font-size:15px}}.create-room-container{min-height:100vh;display:grid;place-items:center;padding:20px 12px}.create-room-card{width:min(100%,420px);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center}.create-room-title{margin:0;color:var(--muted);font-size:1rem}.create-room-id{margin:0;font-size:clamp(1.8rem,6vw,2.6rem);letter-spacing:4px;color:#1d4ed8}.room-id-row{margin:10px 0 6px;display:flex;align-items:center;justify-content:center;gap:10px}.copy-room-btn{width:36px;height:36px;border:1px solid #bfdbfe;border-radius:8px;background:#e8f0ff;color:#1d4ed8;display:grid;place-items:center;cursor:pointer}.copy-room-btn:hover{background:#dbeafe}.copy-status{min-height:20px;margin:0 0 12px;color:var(--muted);font-size:14px}.create-room-btn{width:100%;padding:12px;border:0;border-radius:10px;background:#f59e0b;color:#fff;font-weight:600;cursor:pointer}.create-room-loading{text-align:center;margin-top:30vh;color:var(--muted)}.joinroom-container{min-height:100vh;display:grid;place-items:center;padding:20px 12px}.joinroom-card{width:min(100%,420px);padding:24px;border-radius:16px;border:1px solid var(--line);background:var(--panel);text-align:center}.joinroom-title{margin:0 0 14px;font-size:1.8rem}.joinroom-input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);color:var(--text);text-align:center}.joinroom-input:focus{outline:2px solid #bfdbfe;border-color:#60a5fa}.joinroom-btn{width:100%;margin-top:10px;padding:12px;border:0;border-radius:10px;background:#2563eb;color:#fff;font-weight:600;cursor:pointer}.lobby-container{min-height:100vh;max-width:960px;margin:0 auto;padding:20px 12px 28px}.lobby-title{text-align:center;margin:0;font-size:clamp(1.7rem,4vw,2.4rem)}.lobby-room{text-align:center;margin:8px 0 18px;color:var(--muted)}.lobby-section{margin-top:12px;padding:14px;border:1px solid var(--line);background:var(--panel);border-radius:12px}.lobby-section h4{margin:0 0 10px}.players-list{display:grid;gap:8px}.players-list div{padding:10px;border-radius:8px;background:var(--bg-soft);border:1px solid var(--line)}.preview-container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.preview-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:10px}.preview-title{margin-bottom:8px;font-weight:600}.preview-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.preview-cell{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;font-size:12px;background:var(--bg-soft)}.rules-list{margin:0;padding-left:18px;color:var(--muted)}.start-btn{width:100%;margin-top:12px;padding:12px;border:0;border-radius:10px;background:#f59e0b;color:#fff;font-weight:600;cursor:pointer}.waiting-text{text-align:center;color:var(--muted)}@media(max-width:720px){.preview-container{grid-template-columns:1fr}}.game-container{max-width:700px;margin:0 auto;min-height:100vh;padding:20px 12px 28px;text-align:center}.game-title{margin:0 0 14px;font-size:clamp(1.5rem,4vw,2rem)}.game-title.win{color:var(--success)}.game-title.lose{color:var(--danger)}.game-title.turn{color:#2563eb}.game-grid{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.game-cell{width:100%;aspect-ratio:1;border-radius:8px;border:1px solid var(--line);background:var(--bg-soft);color:var(--text);font-weight:700;font-size:clamp(13px,2.6vw,17px);cursor:pointer}.game-cell:hover:not(:disabled){background:#e0ebfb}.game-cell:disabled{cursor:not-allowed}.game-cell.chosen{background:#dbeafe;color:#1d4ed8}.game-cell.completed{background:#fef3c7;color:#92400e;border-color:#f9d58b}.result-container{min-height:100vh;display:grid;place-items:center;padding:20px 12px}.result-card{width:min(100%,420px);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center}.result-title{margin:0 0 10px}.result-status{font-size:1.3rem;font-weight:700}.win-text{color:var(--success)}.lose-text{color:var(--danger)}.draw-text{color:#b45309;font-size:1.3rem;font-weight:700}.result-winner-name{margin:8px 0 0;font-size:1.2rem;font-weight:700}.result-sub,.auto-text{color:var(--muted)}.copy-status{margin:8px 0 0;font-size:13px;color:var(--muted)}.play-again-btn{width:100%;margin-top:14px;padding:12px;border:0;border-radius:10px;background:#f59e0b;color:#fff;font-weight:600;cursor:pointer}.share-wrap{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg-soft)}.share-title{margin:0 0 10px;font-size:14px;color:var(--muted)}.share-link-row{display:flex;align-items:center;gap:8px}.share-link{flex:1;min-width:0;display:block;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:8px;text-align:left;color:#1d4ed8;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.share-link:hover{background:#f8fbff}.copy-link-btn{width:34px;height:34px;border:1px solid #bfdbfe;border-radius:8px;background:#e8f0ff;color:#1d4ed8;display:grid;place-items:center;cursor:pointer}.copy-link-btn:hover{background:#dbeafe}@media(max-width:480px){.share-link-row{flex-direction:column;align-items:stretch}.copy-link-btn{width:100%;height:36px}}.app-shell{min-height:100vh;background:transparent}