/* Singapore garden palette, with the scene rail and chat dock from the reference. */
.topbar{gap:10px;height:calc(82px + env(safe-area-inset-top));padding-left:15px;padding-right:15px;background:linear-gradient(135deg,#36303e,#433b4d);border-bottom:2px solid #b8a060}
.member-top-badge{min-width:0;display:flex;align-items:center;gap:10px;flex:1;background:none;color:var(--cream);text-align:left;padding:0}.member-top-badge strong{display:block;font-size:19px;letter-spacing:-.5px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-top-badge small{display:block;color:#e1cf9a;font-size:10px;margin-top:4px}.member-paw{display:grid;place-items:center;width:46px;height:46px;background:#f9e8bc;border:2px solid #d3b675;border-radius:50%;font-size:27px}.sg-badge{font-size:20px}.home-wallet{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;padding:12px;background:#483f52}.home-metric{min-width:0;text-align:left;border:1px solid #d2b67b;border-radius:19px;padding:13px 10px 11px;background:linear-gradient(#fff8e4,#eedeae);box-shadow:inset 0 0 0 3px #fffbeb;min-height:95px}.home-metric>span{display:block;font-size:10px;color:#816734;font-weight:800;white-space:nowrap}.home-metric strong{display:block;font-size:26px;margin-top:5px;letter-spacing:-.8px;color:#3b3443}.home-metric small{display:block;font-size:9px;color:#625670;margin-top:3px;line-height:1.4}.home-metric em{font-size:12px;font-style:normal;letter-spacing:0}.beginner-banner{display:flex;align-items:center;gap:8px;background:#f7e5b5;padding:12px 15px;border-top:1px solid #e5cf92;border-bottom:1px solid #dfc78e}.beginner-banner>span{font-size:23px}.beginner-banner button{background:none;text-align:left;color:#71562f;font-size:10px;line-height:1.6;flex:1}.beginner-banner button strong{color:#4a4155;margin-right:5px}.beginner-banner button>span{float:right;font-size:18px}
.hero-scene{height:max(510px,calc(100svh - 325px));background-position:center 52%}.hero-scene .scene-heading{position:absolute;padding:0;top:20px;left:18px;right:90px}.hero-scene .scene-heading h1{font-size:29px;line-height:1.15}.hero-scene .scene-heading p{font-size:10px}.hero-scene .scene-speech{position:absolute;width:auto;top:139px;left:17px;right:105px;bottom:auto;max-width:none;padding:11px 13px;font-size:11px;line-height:1.6;background:#fffbefd9;box-shadow:0 4px 16px #36303e23;border:2px solid #e4ca91;border-radius:19px}.hero-scene .scene-foot{left:16px;right:102px;bottom:232px;flex-wrap:wrap;gap:5px}.hero-scene .location-pill{font-size:8px;padding:5px 8px}.hero-scene .home-action-rail{position:absolute;top:19px;right:13px;left:auto;bottom:auto;display:flex;flex-direction:column;gap:8px;width:73px}.home-action-rail .scene-tool{width:73px;min-height:66px;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:6px 3px;border:2px solid #d4b878;background:linear-gradient(#fff7de,#e9d8a9);box-shadow:inset 0 0 0 2px #fffcf1,0 3px 8px #322c392a;border-radius:17px;color:#574f2d;font-size:10px;line-height:1.15}.home-action-rail .scene-tool .emoji{font-size:24px}.home-action-rail .scene-tool .icon{width:24px;height:24px;color:#9b7331}.social-dock{position:absolute;bottom:14px;left:14px;right:101px;border-radius:19px;background:#37313fec;color:var(--cream);border:1px solid #ba9f6780;padding:9px;box-shadow:0 5px 20px #302a3742;backdrop-filter:blur(7px);z-index:3;min-height:197px}.social-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px;border-radius:15px;background:#eae1c9;margin-bottom:13px}.social-tabs button{display:flex;gap:4px;align-items:center;justify-content:center;white-space:nowrap;border-radius:12px;padding:9px 4px;font-size:11px;background:transparent;color:#645872;min-height:38px}.social-tabs button.active{background:var(--forest);color:#ffe5a9;box-shadow:0 2px 5px #342d3b22}.social-tabs.compact{display:flex;overflow-x:auto;background:none;padding:0;gap:4px;margin-bottom:8px;scrollbar-width:none}.social-tabs.compact button{font-size:10px;padding:7px 8px;background:#fff3cb16;border:1px solid #d1b2718c;color:#f6e5b7;min-height:31px;flex-shrink:0}.social-tabs.compact button span{font-size:11px}.dock-preview{min-height:103px;max-height:117px;overflow:hidden}.dock-line{display:flex;gap:6px;align-items:baseline;background:none;width:100%;padding:4px 2px;text-align:left;color:#eee4ca;font-size:11px;line-height:1.5}.dock-line strong{color:#f3d583;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.dock-line>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dock-empty{font-size:11px;line-height:1.7;color:#e9dfbe;margin:14px 5px}.dock-empty button{background:none;color:#ffdf8e;text-decoration:underline;font-size:11px}.dock-compose{display:flex;justify-content:space-between;width:100%;background:#fff1c613;border:1px solid #d9ba7766;color:#ece0c2;padding:9px;border-radius:10px;font-size:9px;text-align:left;margin-top:5px}.dock-compose>span{color:var(--gold);font-size:14px}.social-avatar{height:43px;width:43px;flex-shrink:0;border:2px solid #d5b978}.member-top-badge .social-avatar{height:46px;width:46px}.social-screen{font-size:13px}.social-screen textarea,.social-screen input{font:inherit}.social-screen button{touch-action:manipulation}.social-connection{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--jade);line-height:1.6;margin:0 3px 13px;flex-wrap:wrap}.social-connection.has-error{color:#aa4e3d;background:#f7e2ce;border-radius:10px;padding:10px}.social-explainer{font-size:12px;color:#7b775e;line-height:1.7;margin:12px 0 18px}.social-empty{text-align:center;padding:22px 10px;color:#83785e}.social-empty>span{font-size:33px}.social-empty p{font-size:12px;line-height:1.7;max-width:280px;margin:10px auto}.social-welcome{text-align:center;margin:18px 0}.social-welcome .social-avatar{height:64px;width:64px;display:inline-block;background-size:220px 330px}.social-welcome h3{font-size:21px;margin:12px 0 8px;letter-spacing:-.4px}.social-welcome p{font-size:12px;line-height:1.7;color:var(--muted)}.social-form label,.add-friend-form>label{display:block;font-weight:800;font-size:12px;margin-bottom:8px}.social-form input[type=text],.social-form input[name=name],.add-friend-form input{width:100%;min-width:0;background:#fffdf4;border:1px solid #d3c29a;color:var(--ink);border-radius:12px;padding:12px;font-size:16px;min-height:44px}.social-form fieldset{display:flex;gap:10px;margin:18px 0 0;border:1px solid #e4d3ab;padding:12px;border-radius:15px}.social-form legend{font-size:12px;font-weight:800;color:var(--muted);padding:0 5px}.social-form .avatar-choice{display:flex;align-items:center;gap:7px;margin:0;font-size:12px}.avatar-choice .social-avatar{width:35px;height:35px}.avatar-choice input{accent-color:var(--jade)}.social-form-error{font-size:11px;color:#ad5140;line-height:1.7;margin:8px 0 0;min-height:0}.social-form-error:empty{display:none}.friend-code-card{background:linear-gradient(135deg,#ded3ec,#f5e9c7);border:1px solid #b9abcb;padding:18px;border-radius:18px;margin:12px 0 18px}.friend-code-card>.eyebrow{color:var(--jade);font-size:9px}.friend-code-card>strong{font-size:24px;letter-spacing:1px;display:block;margin:10px 0 15px}.friend-code-card>div{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.friend-code-card p{font-size:11px;color:#685c77;margin:12px 0 0;line-height:1.6}.add-friend-form>div{display:flex;gap:8px}.add-friend-form>div input{flex:1}.add-friend-form>div .button{flex-shrink:0}.social-section-title{display:flex;justify-content:space-between;align-items:center;margin:23px 0 11px;font-size:15px}.social-section-title>span{font-size:11px;background:#e0d7eb;color:var(--jade);border-radius:20px;padding:4px 8px}.social-person{display:flex;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid #e1d5b7;min-height:63px}.person-copy{min-width:0;flex:1}.person-copy strong{display:block;font-size:13px;overflow-wrap:anywhere}.person-copy small{display:block;font-size:9px;color:var(--muted);margin-top:5px;line-height:1.7}.person-actions{display:flex;align-items:center;gap:5px}.person-actions>.button{min-height:35px;font-size:10px;padding:7px 9px}.person-actions>.link-button{min-width:28px;padding:8px}.presence-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9d95a7;flex-shrink:0;vertical-align:1px}.presence-dot.online{background:#8f7ea4;box-shadow:0 0 0 2px #bca7d654}.unread-pill{border-radius:20px;min-width:17px;height:17px;padding:2px 5px;background:#f9d99a;color:#483f52;font-size:9px}.you-pill{font-size:10px;border-radius:20px;color:var(--jade);padding:6px 10px;background:#e2d9ec}.conversation-head{display:flex;align-items:center;gap:9px;padding:10px 0 13px;border-bottom:1px solid var(--line)}.conversation-head>div{flex:1;min-width:0}.conversation-head strong{display:block;font-size:14px;overflow-wrap:anywhere}.conversation-head small{display:block;font-size:10px;color:var(--muted);margin-top:5px;line-height:1.5}.chat-back{width:29px;height:35px;background:#e9e3cc;color:var(--jade);border-radius:9px;font-size:26px}.chat-log{height:min(42dvh,360px);min-height:190px;overflow-y:auto;overscroll-behavior:contain;padding:12px 4px;scrollbar-width:thin}.chat-message{width:fit-content;max-width:88%;margin:8px 0;padding:11px 12px 8px;border:1px solid #c9bbda;border-radius:15px 15px 15px 4px;background:#e4dbee;word-break:break-word}.chat-message.own{margin-left:auto;background:#f7e4b9;border-color:#e2c48a;border-radius:15px 15px 4px 15px}.chat-message p{font-size:13px;line-height:1.65;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.chat-message small{display:block;font-size:8px;color:#867950;text-align:right;margin-top:6px}.message-author{background:none;padding:0;color:var(--jade);font-size:10px;font-weight:800;margin-bottom:5px;text-align:left}.chat-date{text-align:center;font-size:9px;color:var(--muted);padding:9px}.chat-composer{display:flex;gap:7px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:12px}.chat-composer textarea{resize:none;flex:1;width:100%;min-width:0;border:1px solid #c8c9a7;border-radius:12px;background:#fffdf4;font-size:16px;padding:10px 11px;line-height:1.4;color:var(--ink);min-height:62px;max-height:110px}.chat-composer>button{align-self:stretch;min-width:59px}.chat-composer .social-form-error{width:100%}.load-older{display:block;background:#e8e6d0;border-radius:20px;padding:8px 13px;margin:0 auto 8px;color:var(--jade);font-size:10px}.load-older[hidden]{display:none}.invite-copy{width:100%;min-height:140px;resize:vertical;font:inherit;border:1px solid var(--line);background:#fffdf4;color:var(--ink);border-radius:13px;padding:15px}
dialog[data-social=true]{max-height:90dvh}dialog[data-social=true] .modal-body{padding:19px}dialog[data-social=true] .modal-head{margin-bottom:12px}dialog[data-social=true] .modal-head h2{font-size:22px}
@media(max-width:355px){.home-wallet{gap:5px;padding:10px}.home-metric{padding:12px 8px}.home-metric strong{font-size:23px}.home-metric>span{font-size:9px}.hero-scene{height:max(495px,calc(100svh - 325px))}.hero-scene .scene-heading h1{font-size:26px}.hero-scene .scene-speech{font-size:10px;top:126px}.social-dock{right:91px;left:10px}.hero-scene .home-action-rail{right:10px;width:68px}.home-action-rail .scene-tool{width:68px;min-height:64px}.social-tabs button{font-size:10px}.friend-code-card>strong{font-size:21px}.person-actions>.button{padding:7px;font-size:9px}.social-person{gap:7px}}
@media(prefers-reduced-motion:reduce){.chat-log{scroll-behavior:auto}}

.auth-options{display:flex;justify-content:space-between;gap:12px;margin-top:20px}.social-form input[type=email],.social-form input[type=password]{display:block;width:100%;padding:12px;border:1px solid #ccc;border-radius:10px;box-sizing:border-box;margin:8px 0 16px}