:root{color:#0f172a;--green:#0f5f33;--accent:#f5a623;--mint:#22a879;--line:#e5e7eb;--soft:#f8fafc;background:#f6f8f7;font-family:Inter,Arial,sans-serif}*{box-sizing:border-box}body{background:#f6f8f7;margin:0}button,input{font:inherit}button{cursor:pointer;border:0}.page{min-height:100svh;padding-bottom:130px}.nav{background:var(--green);color:#fff;z-index:50;align-items:center;gap:24px;height:72px;padding:0 clamp(12px,4vw,96px);display:flex;position:sticky;top:0;box-shadow:0 3px 12px #0002}.brand{align-items:center;gap:12px;font-size:20px;display:flex}.brand span{background:#0c7a3d;border-radius:12px;padding:10px}.nav a{opacity:.88;font-size:13px;font-weight:800}.nav img{object-fit:cover;border-radius:14px;width:38px;height:38px}.nav button{border-radius:12px;padding:10px 14px;font-weight:800}.nav .post{background:var(--accent);color:#111}.nav .spacer{flex:1}.gameico{color:#b08cff}.hero{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:42vh;display:flex}.hero svg{color:#6b46c1;width:48px;height:48px}.hero h1{margin:0;font-size:28px}.hero p{color:#475569;margin:0}.create,.primary{color:#fff;background:#21a67a;border-radius:14px;min-width:300px;padding:15px 34px;font-weight:900;box-shadow:0 12px 25px #21a67a30}.join{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.join input,.phone-row input,.otp,.send input{border:1px solid var(--line);background:#fff;border-radius:14px;outline:0;padding:13px 14px}.join button,.google{color:#0f5f33;background:#fff;border:1px solid #d9eee5;border-radius:14px;padding:13px 20px;font-weight:900}.login-card{background:#fff;border-radius:30px;grid-template-columns:1fr 1fr;max-width:1040px;margin:70px auto;display:grid;overflow:hidden;box-shadow:0 30px 80px #0f172a18}.login-art{color:#fff;background:linear-gradient(135deg,#0f5f33,#112b4a);flex-direction:column;justify-content:center;gap:16px;padding:56px;display:flex}.login-art svg{width:54px;height:54px}.login-art h1{margin:0;font-size:38px}.login-form{padding:48px}.login-form h2{margin:0;font-size:30px}.login-form p{color:#64748b}.google{color:#111;background:#fff;justify-content:center;align-items:center;gap:10px;width:100%;margin:16px 0;display:flex}.divider{text-align:center;color:#94a3b8;margin:18px 0;font-size:13px}.phone-row{border:1px solid var(--line);background:#fff;border-radius:14px;align-items:center;gap:8px;padding:0 12px;display:flex}.phone-row input{border:0;flex:1}.otp{width:100%;margin-top:10px}.primary{width:100%;margin-top:12px}.warn,.error{border-radius:14px;margin:12px 0;padding:12px;font-size:13px}.warn{color:#9a3412;background:#fff7ed}.error{color:#b91c1c;background:#fef2f2}.messenger{border:1px solid var(--line);background:#fff;border-radius:28px;grid-template-columns:320px 1fr 220px;max-width:1080px;margin:0 auto 80px;display:grid;overflow:hidden;box-shadow:0 15px 50px #0f172a12}.chat-list{border-right:1px solid var(--line);max-height:72vh;padding:18px;overflow:auto}.chat-list h2{margin:0 0 14px}.tab{background:#f1f5f9;border-radius:12px;width:100%;margin-bottom:12px;padding:10px}.thread{text-align:left;background:#fff;border-radius:16px;align-items:center;gap:12px;width:100%;padding:13px;display:flex}.thread.active,.thread:hover{background:#eef6ff}.thread span{color:#065f46;background:#bbf7d0;border-radius:14px;place-items:center;width:42px;height:42px;font-weight:900;display:grid}.thread small{color:#64748b;margin-top:3px;display:block}.game-panel{max-height:72vh;padding:20px;overflow:auto}.roombar{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-bottom:12px;display:flex}.roombar small{color:#64748b;display:block}.roombar button,.game-status button{color:#0f5f33;background:#effaf5;border-radius:10px;padding:9px 12px}.game-status{gap:10px;padding:14px 0;display:grid}.game-status span{color:#64748b}.boards{grid-template-columns:1fr 1fr;gap:18px;display:grid}.boards h3{text-align:center;margin:6px 0 12px}.board{grid-template-columns:22px repeat(10,28px);grid-auto-rows:28px;justify-content:center;align-items:center;gap:2px;display:grid}.board b{text-align:center;font-size:12px}.cell{background:#fff;border:1px solid #dbe4ef;border-radius:4px;place-items:center;width:28px;height:28px;font-size:13px;display:grid}.cell.ship{color:#fff;background:#101827}.cell.head{color:#fde68a;background:#111827}.cell.miss{color:#111;background:#e5e7eb}.cell.hit{color:#b91c1c;background:#fee2e2}.cell.sunk{color:#7f1d1d;background:#fecaca}.hint{color:#475569;margin-top:14px;font-size:13px}.side{border-left:1px solid var(--line);max-height:72vh;padding:18px;overflow:auto}.side h3{align-items:center;gap:8px;display:flex}.side p{background:#f8fafc;border-radius:10px;padding:8px;font-size:13px}.dock{border:1px solid var(--line);z-index:80;background:#fff;border-radius:24px;width:min(860px,100vw - 24px);position:fixed;bottom:18px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 18px 60px #0f172a22}.messages{max-height:170px;padding:12px 18px;overflow:auto}.messages p{background:#f1f5f9;border-radius:14px;max-width:80%;margin:6px 0;padding:9px 12px}.messages .me{background:#d1fae5;margin-left:auto}.send{border-top:1px solid var(--line);gap:10px;padding:12px;display:flex}.send input{background:#f8fafc;flex:1}.send button{color:#fff;background:#96d9c2;border-radius:16px;width:48px}.loading{text-align:center;padding:80px}.android-ready{display:none}@media (width<=900px){.nav{gap:10px;padding:0 12px}.nav a,.nav .post{display:none}.brand b{font-size:16px}.login-card{border-radius:24px;grid-template-columns:1fr;margin:16px}.login-art{display:none}.login-form{padding:28px}.messenger{border-radius:22px;grid-template-columns:1fr;margin:0 10px 150px}.chat-list,.side{display:none}.game-panel{max-height:none}.boards{grid-template-columns:1fr}.board{grid-template-columns:20px repeat(10,1fr);grid-auto-rows:30px}.cell{width:100%;height:30px}.hero{min-height:38vh;padding:40px 16px}.create{width:100%;min-width:0}.join input,.join button{width:100%}.dock{bottom:calc(8px + env(safe-area-inset-bottom));border-radius:20px}.messages{max-height:115px}}