body{color:#1f2937;background:#f5f6f8;justify-content:center;min-height:100vh;margin:0;padding:32px 16px 48px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;display:flex}:root{--cell-size:104px;--cell-gap:12px}.app-shell{flex-direction:column;gap:24px;width:min(100%,700px);display:flex}.hero{text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:28px 30px;box-shadow:0 20px 60px #0f172a14}.title{letter-spacing:-.04em;color:#111827;margin:0;font-size:clamp(2rem,4vw,3rem)}.subtitle{color:#4b5563;max-width:620px;margin:16px auto 0;font-size:1rem;line-height:1.7}.mode-buttons{flex-wrap:wrap;justify-content:center;gap:14px;margin-top:22px;display:flex}.mode-button,.action-button,.reset-button{cursor:pointer;border:none;border-radius:999px;padding:12px 24px;font-size:.98rem;font-weight:700;transition:transform .18s,box-shadow .18s,background-color .18s}.mode-button,.action-button{color:#fff;background:#111827;box-shadow:0 10px 24px #0f172a1f}.mode-button.secondary,.reset-button.secondary{color:#111827;background:#fff;border:1px solid #d1d5db}.mode-button:hover,.action-button:hover,.reset-button:hover{transform:translateY(-1px);box-shadow:0 14px 28px #0f172a29}.status-card,.status-banner,.game-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;width:100%;padding:22px;box-shadow:0 20px 50px #0f172a14}.status-card{flex-direction:column;align-items:center;gap:16px;display:flex}.status-title{letter-spacing:-.02em;color:#111827;margin:0;font-size:1.25rem}.status-message{color:#475569;margin:0;font-size:.98rem}.name-input{color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:12px;width:min(100%,360px);padding:11px 14px;font-size:.98rem}.invite-panel,.online-users{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;gap:10px;width:100%;padding:14px;display:grid}.online-user-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.online-user-row .mode-button{padding:8px 16px;font-size:.9rem}.mode-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.status-banner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.board-shell{background:#fff;border:1px solid #e5e7eb;border-radius:22px;gap:18px;padding:22px;display:grid}.board{grid-template-columns:repeat(3, var(--cell-size));gap:var(--cell-gap);justify-items:center;width:fit-content;margin:0 auto;display:grid}.board-container{width:fit-content;margin:0 auto;position:relative}.box{display:contents}.board-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.status-turn{color:#111827;font-size:.98rem;font-weight:700}.block{width:var(--cell-size);height:var(--cell-size);color:#111827;letter-spacing:.04em;cursor:pointer;background:#f8fafc;border:1px solid #d1d5db;border-radius:18px;justify-content:center;align-items:center;font-size:1.9rem;font-weight:800;transition:transform .15s,background .18s,box-shadow .18s;display:flex;position:relative}.block:hover{background:#eef2ff;transform:translateY(-1px)}.block.winning-x{color:#1e40af;background:#dbeafe;box-shadow:0 0 0 4px #3b82f61f}.block.winning-o{color:#b91c1c;background:#fdf2f2;box-shadow:0 0 0 4px #ef44441f}.win-line-svg line{animation:.5s ease-in-out forwards drawLine}@keyframes drawLine{to{stroke-dashoffset:0}}.reset-button{color:#fff;background:#111827;width:auto;min-width:140px}@media (max-width:520px){:root{--cell-size:84px;--cell-gap:10px}.app-shell{gap:18px}.hero{padding:22px}.block{font-size:1.6rem}.board-footer{flex-direction:column;align-items:stretch}.reset-button{width:100%}}