.online-landing{min-height:100vh;margin:0;background:radial-gradient(ellipse at 80% 23%,#123e7b 0,transparent 48%),#071329;color:#f4f8ff;font-family:Arial,sans-serif}.welcome{max-width:1180px;margin:auto;padding:36px 40px}.wordmark{font-weight:950;font-size:24px;letter-spacing:1px;color:#ffcf37;text-decoration:none}.wordmark span{color:#fff}.welcome-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;margin:28px 0}.welcome-copy h1{font-size:clamp(42px,5.5vw,76px);line-height:1.05;letter-spacing:-2px;margin:18px 0 24px}.welcome-copy h1 span{color:#ffcf37}.welcome-copy p{font-size:19px;line-height:1.6;color:#bcc9e2}.welcome-bear{width:100%;max-height:480px;object-fit:contain}.welcome-facts{display:flex;gap:15px;flex-wrap:wrap;font-size:12px;color:#bfd0ee}.welcome-facts span:before{content:'✓ ';color:#64e5ad}.host-panel{display:grid;grid-template-columns:1.2fr 1fr;gap:35px;border:1px solid #294775;padding:30px;background:#0c1b34;border-radius:24px}.host-panel h2{font-size:28px;margin:12px 0 20px}.mode-switch{display:flex;gap:12px}.mode-switch button{flex:1;border:1px solid #405572;border-radius:12px;padding:16px 12px;background:#10233f;color:#fff;font-weight:700;font-size:16px;text-align:left;cursor:pointer}.mode-switch button[aria-pressed=true]{border-color:#f6cc3e;background:#28324a;box-shadow:0 0 0 1px #f6cc3e}.mode-switch small{display:block;font-weight:400;color:#c6d2e7;margin-top:8px;font-size:12px}.host-panel p{font-size:14px;line-height:1.6;color:#becbe0}.host-panel label{display:block;font-size:12px;letter-spacing:1.5px;font-weight:700;margin:6px 0 10px}.host-panel input{box-sizing:border-box;background:#061126;border:1px solid #405572;color:#fff;border-radius:10px;padding:15px;width:100%;font-size:16px}.host-panel .cta{width:100%;font-size:16px}.host-panel [hidden]{display:none!important}.guest-note{margin:35px 0;max-width:660px}.guest-note h2{font-size:22px}.guest-note p{color:#bbcbe3;line-height:1.6}.welcome-footer{padding:20px 0;border-top:1px solid #2c3c56;font-size:11px;letter-spacing:1.5px;color:#9db1d2;display:flex;justify-content:space-between;gap:15px}.welcome-footer span{letter-spacing:0}.online-error{max-width:650px;margin:10vh auto;padding:35px}.invite-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.invite-url{display:block;width:100%;box-sizing:border-box;border:1px solid #344f75;border-radius:10px;background:#071329;color:#c8d9f2;padding:10px;font-size:12px}.online-game .joinpanel .qr{width:clamp(120px,18vh,185px);height:clamp(120px,18vh,185px)}.online-game .joinpanel .roomcode{font-size:clamp(26px,4vh,40px)}.online-game .joinpanel p{font-size:14px}.online-game .joinpanel .url{display:none}.online-game .game-mode-row{display:none}.game-mode-row .options{flex-wrap:wrap}.phone.online-game .panel h1{font-size:32px}
@media(max-width:760px){.welcome{padding:25px 22px}.welcome-grid{grid-template-columns:1fr;gap:10px;margin:30px 0}.welcome-copy h1{font-size:48px}.welcome-bear{max-height:240px;grid-row:1}.welcome-copy .eyebrow{font-size:11px}.welcome-copy p{font-size:17px}.host-panel{grid-template-columns:1fr;padding:22px;gap:20px}.welcome-footer{display:block;line-height:1.7}.welcome-footer span{display:block;margin-top:8px}.mode-switch button{font-size:14px}}
.host-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.host-options select{width:100%;padding:12px;border-radius:8px;background:#111827;color:white;border:1px solid #607086;font-size:15px}.share-panel{margin-top:20px}.share-panel button{margin:8px 5px 8px 0}.welcome-footer a{color:inherit}.host-panel input:focus,.host-options select:focus{outline:3px solid #ffb14a;outline-offset:2px}
.online-game .joinpanel .qr{width:clamp(165px,24vh,235px);height:clamp(165px,24vh,235px)}.phone.online-game .share-panel{margin:16px 0}.phone.online-game .center>.bear{height:110px;margin:12px auto}.phone.online-game .center>h1{font-size:32px}.share-panel h2{margin-top:0}.host-options small{display:block;margin-top:7px;color:#ffc477}.host-options small[hidden]{display:none}
.phone.online-game .share-panel{padding:18px}.phone.online-game .share-panel h2{font-size:21px;margin-bottom:8px}.phone.online-game .share-panel p{font-size:13px;line-height:1.5;margin:8px 0}.phone.online-game .share-panel .cta{display:inline-block;width:auto;padding:12px;font-size:14px;min-height:44px}.phone.online-game .center>.bear{height:80px}.phone.online-game .center>h1{font-size:29px;margin:10px 0}.phone.online-game .center>p{margin:10px 0}.phone.online-game .share-panel .invite-url{font-size:11px;padding:9px}