*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0f1a;--bg2:#13162a;--surface:#1a1e35;--surface2:#222744;--border:#2e3460;--accent:#4f6ef7;--accent-glow:#4f6ef740;--red:#e63946;--red-glow:#e6394650;--yellow:#f9c22e;--yellow-glow:#f9c22e50;--text:#e8eaf6;--text-muted:#7b82b0;--board-bg:#1a3a8f;--board-shadow:#0a1f5c;--cell-empty:#0d0f1a;--radius:12px;--font:"Outfit", sans-serif}html{-webkit-text-size-adjust:100%}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);overscroll-behavior:none;overflow-x:hidden}.btn,.text-btn,.copy-btn,.lang-btn,.col-target,.cell{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.game-top,.board-container{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body:before{content:"";background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);opacity:.18;pointer-events:none;z-index:0;background-size:40px 40px;position:fixed;inset:0}#app{z-index:1;min-height:100svh;padding:16px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));flex-direction:column;align-items:center;display:flex;position:relative}.header{justify-content:space-between;align-items:center;width:100%;max-width:520px;padding:8px 0 24px;display:flex}.logo{letter-spacing:-.5px;background:linear-gradient(135deg, var(--accent), #a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:900}.lang-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);font-family:var(--font);cursor:pointer;letter-spacing:.5px;border-radius:22px;min-width:44px;min-height:44px;padding:6px 14px;font-size:.8rem;font-weight:600;transition:all .2s}@media (hover:hover){.lang-btn:hover{border-color:var(--accent);color:var(--text)}}.lang-btn:active{border-color:var(--accent);color:var(--text)}.card{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:20px;width:100%;max-width:420px;padding:32px}.card h1{letter-spacing:-1px;background:linear-gradient(135deg,#fff 30%,#a0a8e0);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:8px;font-size:clamp(2rem,8vw,3rem);font-weight:900}.card .tagline{color:var(--text-muted);margin-bottom:32px;font-size:.95rem}.btn{border-radius:var(--radius);width:100%;min-height:48px;font-family:var(--font);cursor:pointer;letter-spacing:.3px;border:none;padding:14px 20px;font-size:1rem;font-weight:700;transition:all .2s}.btn-primary{background:linear-gradient(135deg, var(--accent), #7c3aed);color:#fff;box-shadow:0 4px 20px var(--accent-glow)}@media (hover:hover){.btn-primary:hover{box-shadow:0 8px 28px var(--accent-glow);transform:translateY(-2px)}}.btn-primary:active{box-shadow:0 2px 10px var(--accent-glow);transform:scale(.97)}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}@media (hover:hover){.btn-secondary:hover{border-color:var(--accent);background:var(--surface)}}.btn-secondary:active{border-color:var(--accent);transform:scale(.97)}.btn-small{white-space:nowrap;flex:none;width:auto;min-height:48px;padding:8px 18px;font-size:.85rem}.btn-red{background:linear-gradient(135deg, var(--red), #c1121f);color:#fff;box-shadow:0 4px 20px var(--red-glow)}@media (hover:hover){.btn-red:hover{box-shadow:0 8px 28px var(--red-glow);transform:translateY(-2px)}}.btn-red:active{transform:scale(.97)}.text-btn{width:auto;min-height:44px;color:var(--text-muted);font-family:var(--font);cursor:pointer;background:0 0;border:none;padding:0 12px;font-size:.85rem;font-weight:700;transition:color .2s}@media (hover:hover){.text-btn:hover{color:var(--text)}}.text-btn:active{color:var(--text)}.divider{color:var(--text-muted);align-items:center;gap:12px;margin:20px 0;font-size:.8rem;display:flex}.divider:before,.divider:after{content:"";background:var(--border);flex:1;height:1px}.input-row{align-items:stretch;gap:8px;display:flex}.input{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);min-width:0;color:var(--text);font-family:var(--font);letter-spacing:4px;text-transform:uppercase;outline:none;flex:1 1 0;padding:12px 16px;font-size:1.1rem;font-weight:700;transition:border-color .2s}.input::placeholder{letter-spacing:2px;color:var(--text-muted);font-weight:400}.input:focus{border-color:var(--accent)}.error-msg{color:var(--red);min-height:20px;margin-top:12px;font-size:.85rem}.waiting-card{text-align:center}.waiting-card h2{margin-bottom:28px;font-size:1.3rem;font-weight:700}.code-display{letter-spacing:12px;color:var(--accent);text-shadow:0 0 30px var(--accent-glow);font-variant-numeric:tabular-nums;margin:12px 0 24px;font-size:clamp(2.5rem,12vw,4rem);font-weight:900}.share-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-size:.8rem;font-weight:600}.share-link-row{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);align-items:center;margin-bottom:20px;display:flex;overflow:hidden}.share-link-text{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;text-align:left;flex:1;padding:10px 14px;font-size:.8rem;overflow:hidden}.copy-btn{background:var(--surface2);border:none;border-left:1px solid var(--border);color:var(--text);font-family:var(--font);cursor:pointer;white-space:nowrap;min-height:46px;padding:10px 16px;font-size:.8rem;font-weight:700;transition:background .2s,color .2s}@media (hover:hover){.copy-btn:hover{background:var(--accent);color:#fff}}.copy-btn:active{background:var(--accent);color:#fff}.copy-btn.copied{color:#fff;background:#16a34a}.share-link-text{-webkit-user-select:text;user-select:text}#share-btn{margin-bottom:16px}.waiting-actions{justify-content:center;display:flex}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:20px;height:20px;margin-bottom:16px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.game-wrap{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;width:100%;min-height:0;display:flex}.game-top{justify-items:center;gap:10px;width:100%;max-width:640px;display:grid}.game-meta{justify-content:space-between;align-items:center;gap:8px;width:100%;max-width:420px;display:flex}.meta-btn{min-height:40px;color:var(--text-muted);font-family:var(--font);letter-spacing:.5px;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:700;transition:color .2s}.room-btn{letter-spacing:2px;border:1px dashed var(--border)}.room-btn.copied{color:#16a34a;border-color:#16a34a}@media (hover:hover){.meta-btn:hover{color:var(--text)}}.meta-btn:active{color:var(--text)}.score-row{background:var(--surface);border:1px solid var(--border);border-radius:999px;align-items:center;gap:7px;min-height:32px;padding:5px 12px;font-size:.85rem;font-weight:700;display:inline-flex}.chip-dot{border-radius:50%;flex-shrink:0;width:11px;height:11px}.chip-dot.red{background:var(--red);box-shadow:0 0 8px var(--red-glow)}.chip-dot.yellow{background:var(--yellow);box-shadow:0 0 8px var(--yellow-glow)}.chip-dot.is-you{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.score-value{color:var(--text);font-variant-numeric:tabular-nums}.score-sep{color:var(--text-muted)}.score-draws{color:var(--text-muted);font-size:.75rem;font-weight:600}.status-bar{background:var(--surface);border:1px solid var(--border);border-radius:40px;justify-content:center;align-items:center;gap:12px;min-height:44px;padding:10px 20px;font-size:1rem;font-weight:700;transition:all .3s;display:flex}.status-bar.nope{border-color:var(--red);animation:.35s nope}@keyframes nope{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.turn-dot{border-radius:50%;flex-shrink:0;width:14px;height:14px;transition:background .3s}.turn-dot.red{background:var(--red);box-shadow:0 0 10px var(--red-glow)}.turn-dot.yellow{background:var(--yellow);box-shadow:0 0 10px var(--yellow-glow)}.board-container{width:min(520px, 100%, calc((100svh - var(--chrome,260px)) * 7 / 6));flex:0 auto;min-height:0;position:relative}.column-targets{z-index:10;touch-action:pan-y;grid-template-columns:repeat(7,1fr);gap:6px;padding:6px;display:grid;position:absolute;inset:0}.col-target{cursor:pointer;border-radius:8px;transition:background .15s}@media (hover:hover){.col-target:hover{background:#ffffff0f}.col-target.disabled:hover{background:0 0}}.col-target.is-active{background:#ffffff1a}.col-target.disabled{cursor:not-allowed}.col-target.disabled.is-active{background:0 0}.board{background:var(--board-bg);box-shadow:0 8px 32px #00000080, inset 0 2px 4px #ffffff14, 0 0 0 2px var(--board-shadow);aspect-ratio:7/6;border-radius:16px;grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(7,1fr);gap:6px;width:100%;padding:6px;display:grid}.cell{background:var(--cell-empty);border-radius:50%;transition:background .1s;position:relative;overflow:hidden;box-shadow:inset 0 3px 8px #0009}.cell.red{background:var(--red);box-shadow:inset 0 -3px 6px #0000004d, 0 0 12px var(--red-glow)}.cell.yellow{background:var(--yellow);box-shadow:inset 0 -3px 6px #0000004d, 0 0 12px var(--yellow-glow)}.cell.preview:after{content:"";opacity:.35;pointer-events:none;border-radius:50%;position:absolute;inset:8%}.cell.preview-red:after{background:var(--red);box-shadow:0 0 12px var(--red-glow)}.cell.preview-yellow:after{background:var(--yellow);box-shadow:0 0 12px var(--yellow-glow)}.cell.win{animation:.8s ease-in-out infinite alternate pulse-win}@keyframes pulse-win{0%{filter:brightness()}to{filter:brightness(1.5) drop-shadow(0 0 8px var(--win-color))}}.cell.red.win{--win-color:var(--red)}.cell.yellow.win{--win-color:var(--yellow)}.cell.drop{animation:.35s cubic-bezier(.25,.46,.45,.94) forwards drop-in}@keyframes drop-in{0%{opacity:.6;transform:scaleY(.4)scaleX(1.1)}to{opacity:1;transform:scale(1)}}.game-over-panel{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:20px;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:420px;padding:20px 28px;animation:.3s ease-out slide-up;display:flex}.game-over-actions{gap:10px;width:100%;display:flex}.game-over-actions .btn{flex:1}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.game-over-title{font-size:1.5rem;font-weight:900}.rematch-sub{color:var(--text-muted);font-size:.85rem}.disconnect-notice{color:var(--yellow);text-align:center;padding:8px;font-size:.85rem;animation:.4s fade-in}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.toast{left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;border:1px solid var(--border);background:var(--surface);color:var(--yellow);border-radius:999px;padding:10px 14px;font-size:.85rem;font-weight:700;animation:.2s fade-in;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #00000059}.modal-backdrop{z-index:40;padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:#0000009e;place-items:center;display:grid;position:fixed;inset:0}.confirm-modal{background:var(--surface);border:1px solid var(--border);text-align:center;border-radius:16px;width:100%;max-width:360px;padding:22px;box-shadow:0 18px 44px #00000073}.confirm-modal p{color:var(--text);margin-bottom:18px;font-weight:700}.confirm-actions{gap:10px;display:flex}.confirm-actions .btn{flex:1}@media (width<=480px){.card{padding:24px 18px}.code-display{letter-spacing:8px}.status-bar{font-size:.9rem}.game-over-actions,.confirm-actions{flex-direction:column}.header{padding:4px 0 12px}.game-wrap{gap:10px}.game-top{gap:6px}.game-meta{gap:4px}.meta-btn{padding:4px 8px;font-size:.75rem}.score-row{gap:6px;min-height:30px;padding:4px 10px;font-size:.8rem}.chip-dot{width:10px;height:10px}.status-bar{min-height:40px;padding:8px 16px}.game-over-panel{gap:10px;padding:16px 18px}.game-over-title{font-size:1.25rem}}@media (orientation:landscape) and (height<=500px){#app{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom))}.header{display:none}.game-wrap{flex-direction:row;justify-content:center;align-items:center;gap:16px;position:relative}.game-top{flex:1 1 0;grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:6px;width:auto;min-width:0;max-width:300px}.game-meta{flex-wrap:wrap;justify-content:flex-start;gap:6px;max-width:none}.meta-btn{min-height:34px;font-size:.75rem}.score-row{gap:6px;min-height:32px;padding:4px 10px;font-size:.8rem}.chip-dot{width:10px;height:10px}.status-bar{min-height:36px;padding:6px 14px;font-size:.85rem}.board-container{flex:none;width:min(520px,116.667svh - 46.6667px)}#disconnect-area{display:none}#game-over-area{z-index:20;pointer-events:none;place-items:center;width:min(520px,116.667svh - 46.6667px);display:grid;position:absolute;inset:0 0 0 auto}.game-over-panel{pointer-events:auto;background:var(--surface);max-width:340px;box-shadow:0 18px 44px #0009}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.cell.win{outline:3px solid var(--text);outline-offset:-3px}.spinner{border-top-color:var(--accent);opacity:.6}}