:root{color-scheme:light;--bg:#f4f2f7;--panel:#f0eef3;--line:rgba(40,30,70,0.09);--text:#2d1b15;--muted:#4b4751;--orange:#ff8855;--purple:#9076ff;--green:#71e3af;--cream:#3a301c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 4% 0,rgba(255,112,71,0.308),transparent 43%),radial-gradient(ellipse at 100% 20%,rgba(118,97,255,0.264),transparent 48%),var(--bg);min-height:100dvh;color:var(--text)}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:default}button:active{transform:scale(.98)}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:3px}a{color:inherit}button{transition:background .15s,transform .15s;border:0}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.04em}p{line-height:1.6}small{font-size:.75rem}.hidden{display:none!important}.header{height:86px;max-width:1160px;margin:auto;display:flex;align-items:center;gap:18px;padding:16px 30px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none}.brand img{width:40px;height:46px}.brand strong{font-size:1.3rem;letter-spacing:-.04em}.brand small{display:block;font-size:.5rem;letter-spacing:.13em;color:var(--muted);margin-top:2px}.demo-pill{display:flex;align-items:center;gap:6px;font-size:.64rem;letter-spacing:.02em;border:1px solid var(--line);padding:5px 8px;border-radius:20px;color:#58476a;margin-left:auto}.demo-pill i,.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green)}.header-profile{display:flex;align-items:center;gap:8px;background:transparent;font-weight:750}.header-profile img{width:34px;height:34px;border-radius:11px;background:#ece8ee}.header-profile small{color:var(--muted);display:block;font-size:.6rem;text-align:left}.page{max-width:1100px;margin:0 auto;padding:38px 30px 116px}.eyebrow{font-size:.64rem;font-weight:850;letter-spacing:.13em;color:var(--green);text-transform:uppercase}.muted{color:var(--muted)}.tiny{font-size:.68rem}.title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 26px}.title-row h1{font-size:2rem;margin:5px 0}.title-row p{color:var(--muted);font-size:.85rem;margin:0}.icon-button{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#ebe9ee;border:1px solid var(--line);font-size:1.2rem}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 20px;min-height:48px;border-radius:14px;font-weight:850;font-size:.85rem}.primary{background:linear-gradient(110deg,#ffbd59,#ff7852);color:#f2eef1;box-shadow:0 8px 25px rgba(255,136,85,0.138)}.secondary{background:#eae8ee;border:1px solid var(--line);color:#3a284d}.text-button{background:transparent;padding:8px 0;color:#280d78;font-size:.75rem;font-weight:750}.card{border:1px solid var(--line);border-radius:23px;background:linear-gradient(125deg,rgba(236,233,239,0.75),rgba(240,238,243,0.9));padding:22px}.card h2{font-size:1.1rem;margin:0}.section-title{display:flex;align-items:center;justify-content:space-between;margin:26px 0 14px}.section-title h2{font-size:1rem;margin:0}.section-title span{font-size:.68rem;color:var(--muted)}
.login-layout{min-height:calc(100dvh - 90px);max-width:1100px;margin:auto;padding:45px 30px 55px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:85px}.login-art h1{font-size:clamp(2.8rem,5vw,4.6rem);line-height:1.04;margin:18px 0;max-width:520px}.login-art h1 em{font-style:normal;color:var(--orange)}.login-art p{font-size:.92rem;color:var(--muted);max-width:350px}.mascots{position:relative;height:245px;max-width:410px;margin:24px 0 0}.mascots::before{content:"";position:absolute;inset:15% 0 0;background:radial-gradient(ellipse,rgba(255,136,85,0.371),transparent 66%);filter:blur(18px)}.mascots img{position:absolute;width:220px;height:240px;object-fit:contain;bottom:0;filter:drop-shadow(0 15px 26px rgba(60,40,90,0.112))}.mascots img:last-child{right:0;transform:rotate(5deg)}.login-card{padding:32px;border-radius:28px;background:linear-gradient(145deg,#eceaf0,#f0eef3);border:1px solid var(--line);box-shadow:0 25px 90px rgba(60,40,90,0.056)}.login-card h2{font-size:1.65rem;margin:9px 0}.login-card>p{font-size:.83rem;color:var(--muted);margin-bottom:24px}.providers{display:grid;gap:9px}.provider{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;height:49px;border-radius:13px;font-size:.82rem;font-weight:750;background:#2e2316;color:#efedf0;border:1px solid rgba(40,30,70,0.06)}.provider svg{width:19px;height:19px}.provider.apple,.provider.x{background:#f5f4f7;color:#242424;border-color:rgba(40,30,70,0.113)}.provider.facebook{background:#1877f2;color:#241a33}.provider:hover{filter:brightness(1.07)}.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#6f6878;font-size:.65rem}.divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}.guest-button{width:100%;background:transparent;border:1px solid rgba(200,183,221,0.414);border-radius:13px;padding:13px;font-weight:750;font-size:.8rem}.guest-note{text-align:center;color:#716180;font-size:.65rem;line-height:1.5;margin:9px 3px 0}.demo-disclaimer{margin:22px 0 0!important;text-align:center;font-size:.6rem!important;color:#6f6676!important;line-height:1.5}
.home-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}.hero-card{position:relative;overflow:hidden;padding:28px;min-height:278px;background:radial-gradient(ellipse at 80% 90%,rgba(122,83,211,0.354),transparent 60%),linear-gradient(125deg,#eeeaec,#efecf2)}.hero-card h1{font-size:2.65rem;line-height:1.08;max-width:290px;margin:15px 0}.hero-card h1 em{font-style:normal;color:var(--orange)}.hero-card p{max-width:245px;color:#654f5e;font-size:.8rem;position:relative;z-index:1}.hero-card .primary{position:relative;z-index:2;margin-top:8px}.hero-card .hero-mascot{position:absolute;right:-12px;bottom:-18px;width:225px;height:245px;object-fit:contain;opacity:.95}.hero-card .eyebrow{position:relative;z-index:1}.join-card{display:flex;flex-direction:column;justify-content:center}.join-card p{color:var(--muted);font-size:.78rem;margin:9px 0 18px}.join-code{display:flex;gap:8px}.join-code input{width:100%;min-width:0;font-weight:800;letter-spacing:.12em}.join-code button{padding-inline:17px}.input{background:#f4f3f6;border:1px solid rgba(209,183,241,0.319);color:var(--text);padding:13px 14px;border-radius:12px;outline:none;width:100%;min-height:47px}.input:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(113,227,175,0.138)}.friends-strip{display:flex;gap:18px;padding:18px 0 4px;overflow:auto}.friend-bubble{min-width:72px;text-align:center;background:none;padding:0}.avatar{position:relative;display:inline-block;width:46px;height:46px;border-radius:14px;background:#eae6eb;flex-shrink:0;vertical-align:middle}.avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar::after{content:"";position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border:2px solid #efecf2;border-radius:50%;background:var(--presence,#71e3af)}.avatar.offline::after{background:#8b8293}.avatar.playing::after{background:var(--orange)}.friend-bubble .avatar{width:57px;height:57px;border-radius:18px}.friend-bubble strong{display:block;font-size:.71rem;margin-top:8px}.friend-bubble small{display:block;font-size:.58rem;color:var(--muted);margin-top:4px}.room-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.room-card{display:flex;gap:12px;text-align:left;align-items:center;width:100%;color:inherit}.room-card .room-symbol{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:rgba(255,136,85,0.198);color:var(--orange);font-size:1.2rem}.room-card strong,.room-card small{display:block}.room-card strong{font-size:.85rem}.room-card small{font-size:.66rem;color:var(--muted);margin-top:5px}.room-card>span:last-child{margin-left:auto;color:#64507c}.guest-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(255,187,102,0.414);background:rgba(255,187,102,0.069);padding:13px 16px;border-radius:15px;margin-bottom:22px;font-size:.75rem}.guest-banner small{display:block;color:var(--muted);font-size:.65rem;margin-top:3px}.guest-banner button{white-space:nowrap;color:#a95e13;background:none;font-size:.72rem;font-weight:800}
.navigation{position:fixed;z-index:20;bottom:max(13px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:7px;padding:7px;width:438px;max-width:calc(100% - 24px);background:rgba(239,236,242,0.933);border:1px solid rgba(184,161,216,0.319);backdrop-filter:blur(20px);border-radius:21px;box-shadow:0 12px 50px rgba(60,40,90,0.112)}.navigation button{position:relative;display:flex;flex:1;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:9px 5px 8px;border-radius:14px;background:none;color:#6e607c;font-size:.61rem;font-weight:750}.navigation button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.navigation button.active{background:rgba(145,116,255,0.242);color:#260d79}.nav-badge{position:absolute;top:6px;right:28%;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.list-shell{max-width:760px;margin:auto}.search-box{position:relative;margin-bottom:18px}.search-box .input{padding-left:40px}.search-box>span{position:absolute;top:12px;left:15px;color:var(--muted)}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:8px}.tabs button{background:none;color:var(--muted);padding:11px 15px;font-size:.78rem;border-bottom:2px solid transparent}.tabs button.active{color:var(--cream);border-color:var(--orange)}.count{display:inline-grid;place-items:center;min-width:17px;height:17px;border-radius:5px;background:rgba(140,112,255,0.414);margin-left:5px;font-size:.57rem}.person-row{display:flex;align-items:center;gap:13px;padding:16px 0;border-bottom:1px solid var(--line)}.person-copy{flex:1;min-width:0}.person-copy strong{font-size:.85rem;display:block}.person-copy p{margin:4px 0 0;font-size:.68rem;color:var(--muted);line-height:1.3}.person-copy p.online{color:var(--green)}.person-copy p.playing{color:#a55012}.row-action{background:rgba(130,96,255,0.198);color:#260d79;border:1px solid rgba(166,137,255,0.302);border-radius:10px;font-size:.7rem;font-weight:750;padding:9px 12px}.row-action.warm{color:#9c5611;background:rgba(255,136,85,0.138);border-color:rgba(255,187,102,0.319)}.row-action.accept{background:rgba(113,227,175,0.216);color:var(--green)}.row-avatar-button{background:none;padding:0}.empty{padding:45px 15px;text-align:center;color:var(--muted);font-size:.8rem}.recent-card{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}.recent-card button{display:flex;align-items:center;gap:9px;padding:9px 13px;background:#edebf1;border:1px solid var(--line);border-radius:15px;font-size:.72rem}.recent-card .avatar{width:32px;height:32px;border-radius:10px}
.chat-layout{display:grid;grid-template-columns:300px minmax(0,1fr);height:min(610px,calc(100dvh - 240px));min-height:400px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#f0eef3}.thread-list{padding:12px;border-right:1px solid var(--line)}.thread{display:flex;width:100%;padding:15px 9px;gap:12px;align-items:center;background:none;border-radius:13px;text-align:left}.thread.active{background:rgba(140,112,255,0.181)}.thread .person-copy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.thread time{font-size:.59rem;color:#706678}.chat{display:flex;flex-direction:column;min-height:0;min-width:0;background:radial-gradient(ellipse at 100% 0,rgba(140,112,255,0.0776),transparent 65%)}.chat-header{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line)}.chat-header .avatar{height:36px;width:36px;border-radius:11px}.chat-header .person-copy strong{font-size:.8rem}.chat-header .back-chat{display:none}.chat-messages{display:flex;flex-direction:column;gap:11px;padding:22px 20px;flex:1;overflow:auto;min-height:0}.day-divider{text-align:center;color:#807687;font-size:.59rem;margin-bottom:8px}.bubble{align-self:flex-start;max-width:83%;padding:12px 14px;border-radius:15px 15px 15px 4px;background:#eae7ed;font-size:.78rem;line-height:1.5;overflow-wrap:anywhere}.bubble.mine{align-self:flex-end;background:#7150c6;border-radius:15px 15px 4px 15px}.bubble time{display:block;font-size:.52rem;opacity:.6;text-align:right;margin-top:5px}.chat-compose{display:flex;align-items:end;gap:9px;padding:13px 16px;border-top:1px solid var(--line)}.chat-compose :is(input,textarea){resize:none;min-height:44px;max-height:110px;border-radius:13px;padding:12px;background:#f3f2f6;color:#241a33;border:1px solid var(--line);flex:1;min-width:0;font-size:.79rem;outline:none}.chat-compose .send{height:44px;width:44px;background:var(--orange);color:#f3eff3;border-radius:13px;font-size:1.15rem;font-weight:900}.invite-bubble{padding:15px;border:1px solid rgba(255,187,102,0.414);background:linear-gradient(135deg,rgba(255,136,85,0.173),rgba(144,118,255,0.138));border-radius:16px;max-width:290px}.invite-bubble strong{display:block;font-size:.85rem;margin:8px 0}.invite-bubble p{font-size:.68rem;margin:0 0 12px;color:var(--muted)}.invite-bubble button{width:100%;min-height:39px;padding:9px;font-size:.74rem}
.profile-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:800px;margin:auto}.profile-identity{text-align:center;padding:32px 22px}.profile-identity .avatar{width:110px;height:110px;border-radius:30px;box-shadow:0 0 0 4px rgba(255,136,85,0.224),0 12px 40px rgba(60,40,90,0.0747)}.profile-identity .avatar::after{width:14px;height:14px;border-width:3px}.profile-identity h1{font-size:1.7rem;margin:20px 0 4px}.account-badge{display:inline-block;font-size:.65rem;color:#260d79;background:rgba(145,116,255,0.181);padding:6px 10px;border-radius:20px;margin:8px 0 20px}.id-copy{display:block;margin:0 auto;background:#f3f2f6;border:1px solid var(--line);border-radius:13px;padding:12px 22px;font-variant-numeric:tabular-nums;color:#3d294d;font-size:1.1rem;letter-spacing:.12em}.id-copy small{display:block;letter-spacing:.05em;color:var(--muted);font-size:.55rem;margin-bottom:7px}.profile-identity>.text-button{margin-top:14px}.settings-list h2{font-size:1rem;margin:0 0 12px}.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:1px solid var(--line);font-size:.77rem}.setting small{display:block;color:var(--muted);margin-top:4px;font-size:.62rem}.switch{height:23px;width:40px;border-radius:20px;background:#7adfb3;padding:3px}.switch::after{content:"";display:block;width:17px;height:17px;border-radius:50%;background:#eff4f2;margin-left:17px}.switch.off{background:#e5e1e7}.switch.off::after{margin-left:0;background:#5f5566}.logout{width:100%;margin-top:24px;background:rgba(255,120,141,0.104);color:#911022;border:1px solid rgba(255,120,141,0.276);border-radius:12px;padding:13px;font-size:.75rem}
dialog{color:var(--text);border:1px solid rgba(187,161,213,0.397);border-radius:25px;background:linear-gradient(145deg,#ece9ef,#f0eef3);padding:0;width:420px;max-width:calc(100% - 26px);max-height:calc(100dvh - 36px);box-shadow:0 30px 100px rgba(60,40,90,0.149)}dialog::backdrop{background:rgba(60,40,90,0.205);backdrop-filter:blur(7px)}.modal-content{padding:26px}.modal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}.modal-top h2{font-size:1.35rem;margin:0}.modal-content>p{font-size:.77rem;color:var(--muted)}.modal-content label{display:block;font-size:.74rem;font-weight:750;margin:18px 0 8px}.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0 22px}.avatar-choice{padding:0;border:2px solid transparent;border-radius:12px;background:#ebe7ec;overflow:hidden;aspect-ratio:1}.avatar-choice img{height:100%;width:100%;object-fit:cover}.avatar-choice.selected{border-color:var(--green);box-shadow:0 0 0 2px rgba(113,227,175,0.181)}.full{width:100%}.provider-mark{color:var(--green);font-size:.66rem;letter-spacing:.08em;font-weight:850}.modal-footer{border-top:1px solid var(--line);padding-top:17px;margin-top:8px}.modal-footer button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;font-size:.76rem;background:#ebe7ec;padding:13px 15px;border-radius:12px}.modal-footer small{display:block;font-size:.61rem;color:var(--muted);text-align:left;margin-top:4px}.invite-scroll{max-height:330px;overflow:auto}.invite-scroll .person-row:last-child{border:0}.avatar-detail{text-align:center}.avatar-detail .avatar{width:85px;height:85px;border-radius:25px}.avatar-detail h2{margin:15px 0 5px}.avatar-detail .id-label{font-size:.75rem;color:#5b476b;letter-spacing:.08em}.profile-actions{display:flex;gap:8px;margin:22px 0 8px}.profile-actions button{flex:1;font-size:.73rem}.profile-links{display:flex;justify-content:center;gap:18px;margin-top:18px}.profile-links button{font-size:.64rem;background:none;color:#6c537e}.toast{position:fixed;z-index:120;left:50%;bottom:110px;transform:translateX(-50%) translateY(10px);background:#392f1b;color:#efebef;box-shadow:0 8px 40px rgba(60,40,90,0.0933);padding:12px 19px;border-radius:13px;max-width:calc(100% - 30px);width:max-content;font-size:.78rem;font-weight:750;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.game-preview{position:fixed;inset:0;background:var(--bg);z-index:40;display:flex;flex-direction:column}.game-toolbar{min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 14px;border-bottom:1px solid var(--line);font-size:.62rem;color:var(--muted)}.game-toolbar button{background:#eae6ed;color:#441749;padding:8px 12px;border-radius:9px;font-size:.68rem;font-weight:750}.game-toolbar button:last-child{color:#9b5211}.game-preview iframe{width:100%;flex:1;min-height:0;border:0}
@media(min-width:900px){.chat-mobile-title{display:none}.login-card{max-width:420px}.hero-card .hero-mascot{width:245px;height:270px}.navigation{bottom:22px}}
@media(max-width:760px){.header{height:68px;padding:11px 20px;gap:10px}.brand img{width:33px;height:39px}.brand strong{font-size:1.12rem}.brand small{font-size:.43rem}.demo-pill{font-size:.57rem;padding:4px 7px}.header-profile>span{display:none}.header-profile{padding:0}.header-profile img{width:31px;height:31px}.page{padding:25px 20px 112px}.login-layout{min-height:0;display:flex;flex-direction:column;gap:20px;padding:27px 22px 35px}.login-art{text-align:center;width:100%;position:relative}.login-art .eyebrow{font-size:.56rem}.login-art h1{font-size:2.4rem;max-width:330px;margin:12px auto 0}.login-art p{font-size:.77rem;max-width:290px;margin:12px auto 0}.mascots{display:none}.login-card{width:100%;max-width:420px;padding:23px;border-radius:23px}.login-card h2{font-size:1.3rem;margin:7px 0}.login-card>p{font-size:.74rem;margin-bottom:19px}.login-card>.eyebrow{font-size:.55rem}.provider{height:46px;font-size:.78rem}.providers{gap:8px}.divider{margin:15px 0}.demo-disclaimer{margin-top:15px!important}.title-row{margin-bottom:21px}.title-row h1{font-size:1.65rem}.title-row p{font-size:.74rem}.home-grid{grid-template-columns:1fr;gap:12px}.hero-card{padding:22px;min-height:245px}.hero-card h1{font-size:2.1rem;max-width:230px}.hero-card p{max-width:190px;font-size:.73rem}.hero-card .hero-mascot{width:175px;height:210px;right:-12px}.hero-card .primary{padding:12px 17px;min-height:44px;font-size:.78rem}.join-card{padding:18px}.join-card h2{font-size:.95rem}.join-card p{font-size:.7rem;margin:7px 0 12px}.join-code .input{min-height:42px;padding:11px 13px;font-size:.8rem}.join-code .primary{min-height:42px;padding:10px 16px}.friends-strip{gap:13px}.friend-bubble{min-width:66px}.friend-bubble .avatar{width:50px;height:50px;border-radius:16px}.room-cards{grid-template-columns:1fr}.room-card{padding:16px}.navigation{bottom:max(9px,env(safe-area-inset-bottom));padding:5px;border-radius:20px}.navigation button{padding:8px 4px 7px}.person-row{gap:11px;padding:15px 0}.row-action{padding:9px 10px;font-size:.65rem}.chat-layout{display:block;height:calc(100dvh - 220px);min-height:340px;background:none;border:0;overflow:visible}.thread-list{padding:0;border:0}.thread{padding:16px 2px;border-bottom:1px solid var(--line);border-radius:0}.thread.active{background:none}.thread .avatar{width:47px;height:47px}.thread .person-copy p{max-width:240px}.chat-layout .chat{display:none}.chat-layout.open-thread .thread-list{display:none}.chat-layout.open-thread .chat{display:flex;position:fixed;z-index:35;inset:68px 0 0;background:#f2f0f5}.chat-header{padding:13px 16px}.chat-header .back-chat{display:block;background:none;color:#67507d;font-size:1.4rem;padding:0 7px 0 0}.chat-messages{padding:20px 18px}.chat-compose{padding-bottom:max(13px,env(safe-area-inset-bottom))}.profile-layout{grid-template-columns:1fr;gap:13px}.profile-identity{padding:25px}.profile-identity .avatar{width:92px;height:92px;border-radius:27px}.profile-identity h1{margin-top:16px}.profile-identity .account-badge{margin-bottom:16px}.settings-list{padding:20px}.modal-content{padding:23px}.avatar-grid{grid-template-columns:repeat(6,1fr);gap:5px}.game-toolbar>span{display:none}}
@media(max-width:360px){.page{padding-inline:15px}.login-layout{padding-inline:16px}.hero-card .hero-mascot{width:150px;opacity:.8}.hero-card h1{font-size:1.9rem}.avatar-grid{grid-template-columns:repeat(4,1fr)}.login-art h1{font-size:2.1rem}.person-copy strong{font-size:.78rem}.row-action{font-size:.59rem;padding:8px}.demo-pill{font-size:.52rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}button:active{transform:none}}

/* A short room action, sized alongside the join form. */
.hero-card.compact-create{min-height:0;padding:20px;display:flex;align-items:center}
.compact-create .create-room-copy{position:relative;z-index:1;width:calc(100% - 105px)}
.compact-create h2{font-size:1.5rem;line-height:1.15;margin:8px 0 5px;letter-spacing:-.04em}
.hero-card.compact-create p{font-size:.76rem;line-height:1.45;margin:0 0 12px;max-width:none}
.hero-card.compact-create .primary{min-height:40px;font-size:.76rem;padding:10px 15px;margin:0}
.hero-card.compact-create .hero-mascot{width:126px;height:148px;right:4px;bottom:6px}
@media(max-width:760px){.hero-card.compact-create{padding:17px 18px}.compact-create h2{font-size:1.32rem}.compact-create .eyebrow{font-size:.55rem}.hero-card.compact-create p{font-size:.69rem;margin-bottom:11px}.hero-card.compact-create .hero-mascot{width:108px;height:130px;right:3px;bottom:6px}.compact-create .create-room-copy{width:calc(100% - 88px)}}

/* Edge-to-edge web navigation, including the phone's home-indicator area. */
.navigation{left:0;right:0;bottom:0;transform:none;width:100%;max-width:none;gap:0;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border-radius:0;border:0;border-top:1px solid var(--line);background:rgba(240,237,243,0.961);box-shadow:0 -8px 28px rgba(60,40,90,0.0703)}
.navigation button{min-height:64px;border-radius:0;padding:10px 5px 9px}
.navigation button.active{background:rgba(145,116,255,0.155)}
.page{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
.room-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;background:var(--bg);text-align:center}
.room-loading-orb{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;background:rgba(255,136,85,0.173);color:var(--orange);font-size:1.6rem}
.room-loading strong{font-size:1rem}.room-loading small{color:var(--muted);font-size:.73rem}

/* Keep the social screens focused on their content, not repeated introductions. */
.page{padding-top:20px}
.page>.title-row{margin-bottom:12px;min-height:34px}
.page>.title-row .eyebrow,.page>.title-row p{display:none}
.page>.title-row h1{font-size:1.3rem;line-height:1.2;margin:0}
.page>.title-row .icon-button{width:34px;height:34px;border-radius:10px;font-size:1.05rem}
.home-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;min-height:30px}
.home-heading h1{font-size:1.25rem;line-height:1.2;margin:0}
.quick-play{display:grid;gap:10px}
.create-room-action{display:flex;align-items:center;gap:12px;width:100%;min-height:80px;padding:9px 16px 9px 8px;text-align:left;border:1px solid rgba(255,169,109,0.354);border-radius:17px;background:linear-gradient(110deg,#ede8ea,#edeaf0)}
.create-room-action>img{width:65px;height:65px;object-fit:contain;flex-shrink:0}
.create-room-action>span{flex:1;min-width:0}
.create-room-action strong{display:block;font-size:.98rem;letter-spacing:-.02em}
.create-room-action small{display:block;font-size:.66rem;color:#664954;margin-top:5px}
.create-room-action>b{display:grid;place-items:center;width:35px;height:35px;background:rgba(255,172,104,0.276);color:#9d5511;border-radius:11px;font-size:1rem}
.quick-join{display:flex;gap:8px;align-items:center}
.quick-join .input{flex:1;min-width:0;min-height:43px;height:43px;font-size:.77rem;padding:10px 13px}
.quick-join .secondary{min-height:43px;height:43px;padding:10px 17px;border-radius:12px;font-size:.75rem;white-space:nowrap}
.home-page .section-title{margin:19px 0 8px}.home-page .friends-strip{padding:5px 0 2px}.home-page .room-cards{gap:9px}
.add-friend-avatar{display:inline-grid;place-items:center;background:rgba(144,118,255,0.155);border:1px dashed rgba(167,139,227,0.302);font-size:1.3rem;color:#452783}
.search-box{margin-bottom:10px}.search-box .input{min-height:41px;height:41px;font-size:.77rem;padding-top:9px;padding-bottom:9px}.search-box>span{top:9px}
.tabs button{padding:9px 12px;font-size:.73rem}
@media(min-width:900px){.quick-play{grid-template-columns:1fr 1fr;align-items:center}.page{padding-top:26px}}

/* One persistent selection background slides under the four navigation items. */
.navigation{isolation:isolate;overflow:hidden}
.nav-indicator{position:absolute;z-index:0;left:0;top:0;bottom:0;width:25%;background:rgba(145,116,255,0.198);box-shadow:inset 0 2px 0 rgba(169,138,255,0.302);transform:translateX(calc(var(--active-tab,0)*100%));transition:transform .34s cubic-bezier(.22,.7,.25,1);pointer-events:none}
.navigation button{z-index:1;flex:1 1 0;min-width:0;transition:color .2s}
.navigation button svg{display:block;width:22px;height:22px;flex:0 0 22px;stroke-width:1.7}
.navigation button.active{background:transparent}
#app.tab-moving{position:relative;overflow:hidden}
.tab-outgoing{position:absolute!important;top:0;margin:0!important;pointer-events:none;user-select:none}

/* Profile setup follows the requested name/gender -> six matching avatars flow. */
.profile-step-tag{display:block;color:#63507a;font-size:.65rem;letter-spacing:.025em;margin:-4px 0 19px}
.gender-field{border:0;margin:19px 0 22px;padding:0;min-width:0}
.gender-field legend{font-size:.74rem;font-weight:750;margin-bottom:9px}
.gender-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.modal-content .gender-options label{margin:0;position:relative}
.gender-options input{position:absolute;inset:0;opacity:0;cursor:pointer}
.gender-options span{display:block;padding:13px;text-align:center;background:#f4f3f6;border:1px solid rgba(209,183,241,0.319);border-radius:12px;color:#635474;font-size:.78rem}
.gender-options input:checked+span{border-color:rgba(113,227,175,0.502);background:rgba(113,227,175,0.0863);color:#2a825a}
.gender-options input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.profile-next{margin-top:1px}
.selected-avatar-preview{display:flex;flex-direction:column;align-items:center;gap:9px;margin:0 0 19px}
.selected-avatar-preview img{width:91px;height:91px;object-fit:cover;border-radius:25px;background:#e9e3e8;box-shadow:0 0 0 3px rgba(255,173,109,0.181)}
.selected-avatar-preview strong{font-size:.83rem}
.modal-content .profile-step-avatars{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 19px}
.profile-step-avatars .avatar-choice{aspect-ratio:auto;height:83px;border-radius:14px}
.profile-step-avatars .avatar-choice img{object-fit:contain}
.profile-step-actions{display:grid;grid-template-columns:auto 1fr;gap:9px}
.profile-step-actions .secondary,.profile-step-actions .primary{padding:12px 15px;min-height:45px;font-size:.79rem}
@media(max-height:650px){.selected-avatar-preview img{width:70px;height:70px;border-radius:20px}.selected-avatar-preview{gap:6px;margin-bottom:12px}.profile-step-avatars .avatar-choice{height:66px}.modal-content .profile-step-avatars{margin-bottom:13px}}
/* Keep the explicitly requested navigation cue short when other motion is reduced. */
@media(prefers-reduced-motion:reduce){.navigation .nav-indicator{transition:transform .22s ease-out!important}}

/* A character cover and joined information sheet, inspired by the reference. */
.profile-page{max-width:1000px;display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
.profile-page>.guest-banner{grid-column:1/-1}
.profile-showcase{border:1px solid var(--line);border-radius:23px;overflow:hidden;background:#362f27}
.profile-cover{width:100%;aspect-ratio:1;position:relative;overflow:hidden;border-radius:inherit;background:radial-gradient(ellipse at 75% 5%,rgba(240,160,92,0.42),transparent 58%),linear-gradient(145deg,#ebe6ed,#edebf1 60%,#e8e2e2)}
.profile-cover-ambient{position:absolute;inset:-30%;width:160%;height:160%;object-fit:cover;opacity:.14;filter:blur(24px);transform:scale(1.2)}
.profile-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(241,238,243,0.4),transparent 55%);pointer-events:none}
.profile-cover-portrait{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 22px rgba(245,242,247,0.314))}
.profile-cover-controls{position:absolute;z-index:2;inset:13px 13px auto;display:flex;align-items:center;justify-content:space-between}
.cover-control{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(40,30,70,0.0918);border-radius:11px;background:rgba(240,238,244,0.4);backdrop-filter:blur(12px);font-size:1.6rem;line-height:1}
.edit-cover svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.profile-sheet{position:relative;z-index:3;background:#362f27;color:#edeaee;border-radius:0;margin-top:0;padding:19px 21px 16px}
.profile-name-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.profile-name-row h1{font-size:1.6rem;line-height:1.2;margin:0;color:#a24b2a}
.profile-gender{font-size:1rem;color:#6243a6;vertical-align:middle;margin-left:4px}
.profile-provider{font-size:.58rem;color:#82748c;border-radius:20px;background:rgba(141,105,183,0.112);padding:5px 8px}
.profile-id-line{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;background:none;padding:0;color:#7a727d;margin:11px 0 17px;font-size:.75rem;letter-spacing:.025em}
.profile-id-line svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.profile-social-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(168,151,162,0.0706);padding-top:13px}
.profile-social-row button{display:flex;align-items:center;gap:5px;font-size:.75rem;background:none;padding:0;color:#958c97}
.profile-social-row strong{font-size:.95rem;color:#ebe8ed;margin-right:3px}.profile-social-row button>span{font-size:1.3rem;margin-left:5px}
.profile-online{display:flex;align-items:center;gap:5px;color:#78707c;font-size:.66rem}
.profile-online i{height:6px;width:6px;border-radius:50%;background:#59bb89}
.profile-preferences{padding:20px}
.profile-preferences h2{font-size:.93rem;margin:0 0 3px}
.profile-preferences .setting{padding:14px 0;font-size:.74rem}
.profile-preferences .setting small{font-size:.61rem}
.profile-preferences .logout{margin-top:15px;min-height:40px;padding:10px}
.profile-edit-row{display:flex;justify-content:space-between;gap:14px;align-items:center;width:100%;padding:15px 0 0;background:none;color:#56446a;font-size:.73rem}
.privacy-check{color:var(--green)}
@media(max-width:760px){.profile-page{grid-template-columns:1fr;gap:13px;padding-top:14px}.profile-sheet{padding:17px 18px 14px}.profile-name-row h1{font-size:1.4rem}.profile-preferences{padding:18px}.profile-showcase{border-radius:21px}.profile-provider{font-size:.55rem}}
.friends-strip{scrollbar-width:none}.friends-strip::-webkit-scrollbar{display:none}

/* The square photo keeps all four rounded corners. The cream backing joins
   those bottom curves from outside the photo, with no overlapping sheet. */
.profile-cover-controls{justify-content:flex-end}
.profile-sheet.slim-profile-sheet{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;padding:4px 14px;margin-top:0;border-radius:0;background:#362f27}
.slim-profile-sheet .profile-name-row{flex:1;min-width:0;flex-wrap:nowrap;justify-content:flex-start;gap:7px}
.slim-profile-sheet .profile-name-row h1{font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;min-width:0}
.profile-gender{display:inline-grid;place-items:center;flex-shrink:0;width:20px;height:20px;margin:0;border-radius:6px}
.profile-gender.female{color:#b73370;background:rgba(228,101,160,0.147)}.profile-gender.male{color:#2f7bce;background:rgba(75,150,233,0.147)}
.profile-gender svg{height:17px;width:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slim-profile-sheet .profile-id-line{margin:0;min-height:24px;padding:2px 0;flex-shrink:0;font-size:.64rem;line-height:1.2;color:#81787f;gap:6px;white-space:nowrap}
.slim-profile-sheet .profile-id-line svg{width:13px;height:13px}
.friend-list-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.message-tools{display:flex;align-items:center;gap:8px}
.message-tools .icon-button{flex-shrink:0}
.message-tools .add-contact-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round}
.friends-heading{display:flex;align-items:center;gap:7px}
.friends-back{display:grid;place-items:center;background:none;color:#65507b;font-size:1.7rem;line-height:1;padding:0 7px 2px 0;min-width:25px;min-height:32px}
.rooms-placeholder{display:grid;place-items:center;min-height:calc(100dvh - 170px);padding:20px 20px 84px}
.rooms-placeholder p{font-size:1.12rem;font-weight:700;color:#5e4879;letter-spacing:-.02em;margin:0}
@media(max-width:360px){.profile-sheet.slim-profile-sheet{gap:8px;padding-inline:12px}.slim-profile-sheet .profile-name-row h1{font-size:1rem}.slim-profile-sheet .profile-id-line{font-size:.6rem}.profile-gender{width:20px;height:20px}.navigation button{font-size:.58rem}}

/* Public profiles reuse the same square portrait and joined identity band. */
.player-profile-dialog{width:280px}
.player-profile-dialog .modal-content{padding:12px}
.player-profile-dialog .modal-top{margin-bottom:8px}
.player-profile-dialog .modal-top h2{font-size:.88rem}
.player-profile-dialog .modal-top .icon-button{width:30px;height:30px;min-width:30px;font-size:1.2rem}
.player-profile-dialog .slim-profile-sheet{padding:4px 10px;gap:6px;min-height:28px}
.player-profile-dialog .profile-name-row{gap:4px}
.player-profile-dialog .profile-name-row h1{font-size:.88rem}
.player-profile-dialog .profile-gender{width:17px;height:17px}
.player-profile-dialog .profile-gender svg{width:14px;height:14px}
.player-profile-dialog .profile-id-line{font-size:.52rem;min-height:20px;gap:4px}
.player-profile-dialog .profile-id-line svg{width:11px;height:11px}
.visitor-status{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 2px 9px;font-size:.63rem}
.visitor-presence{display:inline-flex;align-items:center;gap:6px;color:#645374}
.visitor-presence i{width:6px;height:6px;border-radius:50%;background:#7d7586}
.visitor-presence.online i{background:var(--green)}
.visitor-presence.playing i{background:var(--orange)}
.visitor-friend-label{color:#543c7e}
.visitor-actions{display:flex;gap:8px}
.visitor-actions>button{flex:1;min-height:40px;padding:9px 8px;font-size:.66rem}
.visitor-actions>button:disabled{opacity:.6;cursor:default}
.visitor-note{font-size:.7rem;color:var(--muted);margin:0 2px 13px;line-height:1.5}
.visitor-profile .profile-links{margin-top:12px;gap:8px 12px;flex-wrap:wrap}
.visitor-profile .profile-links button{font-size:.58rem}
.profile-links .remove-friend-action{color:#833c33}
.profile-visitor-link{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:none;padding:14px 0;color:#4d3868;font-size:.73rem;border-bottom:1px solid var(--line)}
.profile-visitor-link>span{display:flex;align-items:center;gap:8px}
.profile-visitor-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.friends-idle{font-size:.73rem;line-height:1.5;color:var(--muted);padding:12px 0 4px}

/* A quiet visual placeholder: the voice-room emblem sits inside soft orbits. */
.rooms-placeholder{min-height:calc(100dvh - 68px);padding:24px 20px calc(88px + env(safe-area-inset-bottom));overflow:hidden}
.room-soon{text-align:center}
.room-soon-art{position:relative;display:grid;place-items:center;width:210px;height:210px;margin:0 auto 20px}
.room-soon-art::before{content:"";position:absolute;inset:5px;border-radius:50%;background:radial-gradient(circle at 30% 70%,rgba(244,157,97,0.414),transparent 65%),radial-gradient(circle at 70% 30%,rgba(166,138,255,0.42),transparent 65%);filter:blur(25px)}
.room-soon-art::after{content:"";position:absolute;inset:4px;border:1px solid rgba(196,164,239,0.121);border-radius:50%}
.soon-orbit{position:absolute;inset:23px;border-radius:50%;border:1px solid rgba(199,164,244,0.328);transform:rotate(-25deg)}
.soon-orbit::after{content:"";position:absolute;inset:13px;border-radius:50%;border:1px solid rgba(199,164,244,0.155)}
.soon-room-icon{position:relative;display:grid;place-items:center;width:100px;height:100px;border-radius:29px;color:#432854;border:1px solid rgba(197,164,238,0.42);background:linear-gradient(145deg,rgba(174,162,184,0.8),rgba(234,231,238,0.749));box-shadow:inset 0 1px 0 rgba(40,30,70,0.0776),0 15px 45px rgba(60,40,90,0.0703);transform:rotate(-7deg)}
.soon-room-icon svg{width:51px;height:51px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;transform:rotate(7deg)}
.soon-speck{position:absolute;z-index:1;border-radius:50%}
.speck-one{left:17px;top:130px;width:7px;height:7px;background:#edab81;box-shadow:0 0 16px rgba(239,149,102,0.329)}
.speck-two{right:25px;top:35px;width:8px;height:8px;background:#ad90db;box-shadow:0 0 16px rgba(173,144,219,0.314)}
.soon-spark{position:absolute;left:34px;top:30px;font-size:15px;color:#4d2f60}
.rooms-placeholder .room-soon p{margin:0;color:#422c4b;font-size:1.65rem;line-height:1.2;font-weight:750;letter-spacing:-.035em}
.soon-underline{display:block;width:38px;height:3px;border-radius:4px;margin:17px auto 0;background:linear-gradient(90deg,#e5aa7e,#ac8bdb);opacity:.65}

/* Short messages keep the timestamp beside the text rather than a tall footer. */
.chat-messages{gap:7px;padding:14px 16px}
.bubble{padding:7px 10px;font-size:.77rem;line-height:1.35;border-radius:13px 13px 13px 4px}
.bubble.mine{border-radius:13px 13px 4px 13px}
.bubble time{float:right;display:inline-block;font-size:.5rem;line-height:1;margin:6px 0 0 10px}
.bubble::after{content:"";display:block;clear:both}
.invite-bubble{padding:11px;border-radius:13px;max-width:270px}
.invite-bubble .eyebrow{font-size:.5rem;margin-bottom:6px}
.invite-bubble strong{font-size:.8rem}
.invite-bubble p{font-size:.64rem;margin:5px 0 9px}
.invite-bubble .primary{min-height:36px;padding:8px 12px;font-size:.7rem}
.profile-signature{margin:9px 3px 2px;font-size:.7rem;line-height:1.45;font-weight:400;color:#665474;overflow-wrap:anywhere;white-space:normal}
.visitor-profile .profile-signature{font-size:.66rem;margin:9px 2px 0}
.profile-overview{min-width:0}
.signature-input{display:block;resize:none;min-height:64px;font:inherit;font-size:.8rem;line-height:1.5}
.signature-counter{display:flex;justify-content:space-between;gap:12px;margin:7px 0 17px;color:var(--muted);font-size:.65rem}
.friend-remove-confirm{display:flex;gap:8px;margin-top:18px}
.friend-remove-confirm>button{flex:1;min-height:42px;font-size:.76rem;padding:10px 12px}
.self-notes-empty{margin:auto;text-align:center;color:var(--muted);font-size:.75rem;line-height:1.5;padding:20px}
.password-provider{background:#eceaef;color:#311848;border:1px solid rgba(185,154,217,0.397)}
.password-provider svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.credential-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;background:#f4f3f7;border:1px solid var(--line);border-radius:12px}
.credential-tabs button{padding:10px 8px;background:none;color:var(--muted);font-size:.77rem;border-radius:8px}
.credential-tabs button.selected{background:#e5e2e8;color:var(--text)}
.credential-demo{font-size:.68rem!important;line-height:1.5;margin:12px 0 0;color:var(--muted)}
.credential-submit{margin-top:19px}
.install-shortcut{margin-left:auto;background:rgba(154,120,200,0.207);border:1px solid rgba(186,160,212,0.397);border-radius:10px;color:#482a70;padding:8px 10px;font-size:.65rem;white-space:nowrap}
.profile-cover-portrait.is-photo{object-fit:cover;filter:none}
.profile-step-avatars .photo-choice img{object-fit:cover}
.profile-step-avatars .upload-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px dashed rgba(185,154,217,0.345);background:rgba(146,116,199,0.112);color:#472568}
.upload-photo>span{font-size:1.7rem;line-height:1}
.upload-photo>small{font-size:.6rem}
.photo-crop>p{margin:0 0 12px;color:var(--muted);font-size:.75rem}
.photo-crop canvas{display:block;width:100%;aspect-ratio:1;height:auto;border:1px solid rgba(204,178,230,0.314);border-radius:14px;touch-action:none;cursor:grab;background:#f5f3f7}
.photo-crop canvas:active{cursor:grabbing}
.photo-crop canvas:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.photo-crop input[type="range"]{width:100%;accent-color:#c9a5ed;margin:0 0 18px}
.photo-crop label{margin-top:13px}

/* The shell never scrolls. Only the selected page or conversation does. */
html{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;touch-action:pan-x pan-y}
body{position:fixed;inset:0;height:auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none}
body.keyboard-open{top:var(--viewport-top,0px);bottom:auto;height:var(--app-height,100dvh)}
.header{position:relative;z-index:25;flex:0 0 auto;width:100%;max-width:none;height:calc(86px + env(safe-area-inset-top));margin:0;padding:calc(16px + env(safe-area-inset-top)) max(30px,env(safe-area-inset-right)) 16px max(30px,env(safe-area-inset-left));background:#f3f1f5;border-bottom:1px solid var(--line)}
.header .brand{flex-shrink:0;margin-right:auto}.header .install-shortcut{margin-left:0}.header-profile{flex:0 0 auto;min-width:34px;margin-left:0}.header-profile img{display:block;flex:0 0 34px;width:34px;height:34px;aspect-ratio:1;object-fit:cover}.header-profile span{min-width:0}
#app{position:relative;flex:1 1 0;min-height:0;width:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#app.tab-moving{min-height:0!important}
.page{padding-bottom:24px}.rooms-placeholder{min-height:100%;padding-bottom:24px}
.navigation{position:fixed;left:0;right:0;bottom:0;top:auto;transform:none;width:100%;height:62px;max-width:none;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);align-items:stretch;backdrop-filter:none}
.navigation button{height:62px;min-height:62px;max-height:62px;flex:1 1 0;gap:4px;padding:7px 4px max(9px,min(18px,env(safe-area-inset-bottom)));line-height:1.15}
.navigation .nav-indicator{bottom:0}
body.has-navigation #app{margin-bottom:62px}
body.keyboard-open.has-navigation #app{margin-bottom:56px}
.keyboard-open .navigation{position:absolute}
.conversation-open .navigation{display:none}
.conversation-open:not(.keyboard-open) .chat-compose{padding-bottom:max(9px,env(safe-area-inset-bottom))}
.keyboard-open .navigation{height:56px;padding-bottom:0}.keyboard-open .navigation button{height:55px;min-height:55px;max-height:55px;padding-block:5px}.keyboard-open .nav-indicator{bottom:0}
#app.messages-mode{overflow:hidden}
.messages-page{display:flex;flex-direction:column;height:100%;min-height:0;padding-bottom:16px}
.messages-page>.title-row,.messages-page>.guest-banner{flex:0 0 auto}
.chat-layout{flex:1 1 0;min-height:0;height:auto;overflow:hidden}
.thread-list{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.thread{touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.thread .avatar{flex-shrink:0}.thread .person-copy{min-width:0}.thread-unread{display:block;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.chat-header,.chat-compose{flex:0 0 auto}
.chat-messages{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.bubble,.invite-bubble,.day-divider{flex:0 0 auto}
.chat-compose{padding:10px 12px;background:#f2f0f5}
.delete-chat-action{display:flex;align-items:center;gap:10px;width:100%;padding:14px;border-radius:12px;background:rgba(242,123,121,0.173);color:#7b1d0e;text-align:left;font-size:.9rem}
.chat-messages .bubble{max-width:75%;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-messages .bubble time{font-size:10px;white-space:nowrap}
dialog{max-height:calc(var(--app-height,100dvh) - 24px);overscroll-behavior:contain}
@media(max-width:760px){
 .header{height:calc(68px + env(safe-area-inset-top));padding:calc(11px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 11px max(20px,env(safe-area-inset-left));gap:10px}
 .header-profile{min-width:31px}.header-profile img{width:31px;height:31px;flex-basis:31px}
 input:not([type=range]):not([type=radio]):not([type=checkbox]),textarea,.input,.chat-compose :is(input,textarea),.signature-input{font-size:16px!important}
 .messages-page{padding-bottom:0}.chat-layout{position:relative;display:block;min-height:0;height:auto;overflow:hidden}
 .thread-list{height:100%}.chat-layout.open-thread .chat{position:absolute;inset:0;z-index:2;display:flex;min-height:0;height:100%;background:#f2f0f5}
 .messages-page.thread-view{padding:0}.messages-page.thread-view>.title-row,.messages-page.thread-view>.guest-banner{display:none}
 .messages-page.thread-view .chat-layout{border-radius:0}
 .chat-compose{padding:9px 12px}.chat-header{padding:10px 14px}
}

/* Avatar, gap and bubble share one 75% width budget on either side. */
.message-row{display:flex;align-self:flex-start;align-items:flex-end;gap:7px;width:fit-content;max-width:75%;min-width:0;flex:0 0 auto}
.message-row.mine{align-self:flex-end;flex-direction:row-reverse}
.message-avatar{display:block;flex:0 0 28px;width:28px;height:28px;padding:0;border:0;border-radius:9px;background:none}
.message-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.chat-messages .message-row .bubble{position:relative;min-width:0;max-width:none;flex:0 1 auto;border-radius:13px}
.message-row .bubble::before{content:"";position:absolute;left:-3px;bottom:10px;width:7px;height:7px;border-radius:1px;background:inherit;transform:rotate(45deg)}
.message-row.mine .bubble::before{left:auto;right:-3px}
.message-row .invite-bubble{min-width:0;max-width:none;flex:0 1 auto;overflow-wrap:anywhere}

/* A non-form plaintext editor avoids credit-card/password/address field hints. */
.chat-editor{flex:1;min-width:0;min-height:44px;max-height:110px;overflow-y:auto;overflow-wrap:anywhere;white-space:pre-wrap;border-radius:13px;padding:11px 12px;background:#f3f2f6;color:#241a33;border:1px solid var(--line);font:inherit;font-size:16px;line-height:1.35;outline:none;-webkit-user-select:text;user-select:text}
.chat-editor:empty::before{content:attr(data-placeholder);color:#7c7287;pointer-events:none}
.chat-editor:focus{border-color:rgba(183,158,212,0.302)}

.message-pending{opacity:.65}.message-retry{display:block;clear:both;margin:5px 0 0;padding:0;border:0;background:none;color:#75430d;font-size:10px;text-align:left}

/* Compact identity cards stay in the room; full profiles use the Profile tab. */
.player-profile-dialog{width:340px;max-width:calc(100vw - 28px);border-radius:18px}
.player-profile-dialog .modal-content{padding:13px}
.player-profile-dialog .modal-top{margin-bottom:7px}
.mini-player-identity{display:flex;align-items:center;gap:11px;min-width:0}
.mini-player-photo{flex:0 0 58px;width:58px;height:58px;border-radius:14px;object-fit:cover;border:1px solid rgba(216,192,238,0.42)}
.mini-player-copy{flex:1;min-width:0}.mini-player-name{display:flex;align-items:center;gap:6px;min-width:0}
.mini-player-name strong{font-size:.95rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mini-player-id{display:block;padding:3px 0;background:none;color:var(--muted);font-size:.62rem;letter-spacing:.025em}
.mini-player-copy .visitor-status{margin:3px 0 0;font-size:.61rem;gap:8px;justify-content:flex-start}
.mini-player-card>.visitor-actions{margin-top:11px;gap:7px}
.mini-player-card .visitor-actions>button{min-height:34px;padding:7px 9px;font-size:.68rem}
.mini-player-card .profile-links{margin-top:9px;gap:12px}

/* Keep the original square image scale, expose only its top 80%. */
.page.profile-page{display:block;max-width:none;padding:0 0 24px}
.profile-page .profile-showcase{border:1px solid rgba(40,30,70,0.586);border-radius:0 0 21px 21px}
.profile-page .profile-cover{aspect-ratio:5/4;border-radius:0 0 21px 21px}
.profile-page .profile-cover-portrait{top:0;bottom:auto;height:auto;aspect-ratio:1;object-fit:contain;object-position:center top}
.profile-page .profile-cover-portrait.is-photo{height:auto;aspect-ratio:1;object-fit:cover;object-position:center top}
.profile-page .profile-preferences{margin:14px 16px 0}
.profile-page>.guest-banner{margin:12px 16px 0}
.profile-signature-panel{display:flex;align-items:center;gap:9px;margin:12px 16px 0;padding:10px 12px;border:1px solid rgba(200,179,223,0.319);border-radius:13px;background:linear-gradient(115deg,rgba(177,144,218,0.104),rgba(231,193,161,0.069))}
.signature-quote{align-self:flex-start;font-family:Georgia,serif;font-size:32px;line-height:1;color:#7b5c4a;opacity:.7}
.profile-signature-panel>div{flex:1;min-width:0}.signature-caption{display:block;font-size:9px;letter-spacing:.06em;color:#766683}
.profile-signature-panel .profile-signature{margin:3px 0 0;font-size:12px;line-height:1.45;color:#43314e;overflow-wrap:anywhere}
.profile-signature-panel .signature-empty{color:#736480;font-style:italic}
.signature-edit{align-self:center;flex-shrink:0;padding:6px 0 6px 8px;background:none;color:#523574;font-size:10px}
.visited-profile-page .profile-links{margin-top:13px;gap:14px;flex-wrap:wrap}

/* Keep the approved photo geometry; connect the details in the game's palette. */
.page.profile-page{min-height:100%;padding-bottom:0;background:var(--bg)}
.profile-page .profile-showcase{background:#efecf2}
.profile-page .profile-sheet.slim-profile-sheet{min-height:40px;padding:7px 16px;background:linear-gradient(105deg,#eeeaef,#eeebf1 65%,#ebe8f0);color:var(--text);border-top:1px solid rgba(40,30,70,0.0635)}
.profile-page .slim-profile-sheet .profile-name-row h1{color:#ae5013;font-weight:750}
.profile-page .slim-profile-sheet .profile-id-line{color:#605172}
.profile-page .profile-gender.female{background:rgba(228,101,160,0.242);color:#982254}
.profile-page .profile-gender.male{background:rgba(75,150,233,0.242);color:#124d9e}
.profile-page .profile-signature-panel{margin:0;padding:15px 18px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:linear-gradient(110deg,rgba(255,136,85,0.0776),rgba(144,118,255,0.0776) 65%,#f2f0f5);gap:10px}
.profile-page .signature-quote{color:var(--orange);opacity:.65;font-size:31px}
.profile-page .signature-caption{font-size:9px;letter-spacing:.08em;color:#6e5885}
.profile-page .profile-signature{color:#38274a;font-size:13px;line-height:1.5}
.profile-page .signature-edit{color:#3f2473;font-size:11px}
.profile-page .profile-preferences{margin:0;padding:18px 18px 24px;border:0;border-radius:0;background:linear-gradient(180deg,#f0eef3,var(--bg));box-shadow:none}
.profile-page .profile-preferences h2{font-size:.85rem;color:#493361;margin:0 0 3px;letter-spacing:0}
.profile-page .profile-preferences .setting,.profile-page .profile-visitor-link{border-bottom:1px solid var(--line)}
.profile-page .profile-visitor-link,.profile-page .profile-edit-row{color:#4d3866}
.profile-page .profile-preferences .logout{border:1px solid rgba(255,136,85,0.371);background:rgba(255,136,85,0.0863);color:#a94013;border-radius:11px}
.profile-page>.guest-banner{margin:0;padding:12px 18px;border-radius:0;border-width:0 0 1px;background:#eeebf1}
.visited-profile-page .profile-preferences{border-top:1px solid var(--line)}

.nav-badge.has-requests,.request-badge{background:#ff526b;box-shadow:0 0 0 2px #efecf2}
.message-tools [data-friend-list-button]{position:relative}
.request-badge{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;pointer-events:none}
.tabs .count.has-requests{min-width:19px;height:19px;padding:0 5px;background:#eb405c;color:#242424;font-weight:800;box-shadow:0 0 0 1px rgba(255,141,165,0.371)}

/* Keep scrolling available while removing the visible scrollbar track. */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}

/* Compensate iOS visual-viewport panning on the two social shell panels only.
   Keeping the body untransformed preserves fixed dialogs/game overlays. */
body.apple-chat-keyboard{top:0;bottom:auto;height:var(--app-height,100dvh)}
.apple-chat-keyboard>.header,.apple-chat-keyboard>#app{transform:translate3d(0,var(--viewport-top,0px),0)}
.apple-chat-keyboard .chat-compose{padding-bottom:9px}

/* The name ribbon rounds over the photo; the outer light edge continues below. */
.page.profile-page{border:0;background:#eeecf1}
.profile-page .profile-showcase{border:0;border-radius:0;background:#ebe8ee}
.profile-page .profile-cover{border-radius:0}
.profile-page .profile-sheet.slim-profile-sheet{margin-top:-12px;min-height:32px;padding:3px 16px;border-radius:14px 14px 0 0;border-top:1px solid rgba(40,30,70,0.0918);background:linear-gradient(110deg,#e8e6eb,#ebe8ee 70%)}
.profile-page .profile-signature-panel{background:linear-gradient(180deg,#ebe8ee,#edebf0);border-bottom-color:rgba(40,30,70,0.0847)}
.profile-page .profile-preferences{background:linear-gradient(180deg,#edebf0,#eeecf2 60%,#f0eef3)}

.mini-player-avatar{display:block;flex:0 0 58px;width:58px;height:58px;padding:0;border:0;border-radius:14px;background:none}

.visited-profile-page .profile-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}
.visited-profile-page .profile-links button{display:flex;align-items:center;justify-content:center;min-height:42px;padding:10px 12px;border:1px solid rgba(186,161,212,0.42);border-radius:11px;background:rgba(160,132,197,0.104);color:#412d53;font-size:12px;font-weight:650;line-height:1.3}
.visited-profile-page .profile-links .remove-friend-action{grid-column:1/-1;border-color:rgba(244,150,168,0.42);background:rgba(234,117,147,0.155);color:#720d24}
.visited-profile-page .profile-links [data-action='block']{border-color:rgba(244,150,168,0.42);background:rgba(234,117,147,0.0949);color:#761e34}

.page.profile-page.visited-profile-page{display:block;min-height:100%;padding-bottom:80px}
.profile-page-footer{position:fixed;left:0;right:0;bottom:62px;z-index:15;margin:0;padding:12px 16px;background:rgba(240,238,243,0.961);border-top:1px solid var(--line)}
.profile-page-footer .visitor-actions>button{min-height:44px;font-size:13px;border-radius:12px}
.profile-page-footer [data-action='chat']{background:linear-gradient(110deg,#ffbd59,#ff8855);color:#f2eef1;border:0}
.profile-actions-menu{position:relative}
.profile-actions-menu summary{list-style:none;cursor:pointer;width:36px;height:36px}
.profile-actions-menu summary::-webkit-details-marker{display:none}
.profile-actions-menu summary svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.profile-actions-dropdown{position:absolute;top:calc(100% + 8px);right:0;display:flex;flex-direction:column;gap:3px;width:190px;max-width:calc(100vw - 40px);padding:6px;border:1px solid rgba(196,164,222,0.42);border-radius:12px;background:#edeaf0;box-shadow:0 10px 30px rgba(60,40,90,0.112)}
.profile-actions-dropdown button{width:100%;min-height:40px;padding:10px 11px;border:0;border-radius:8px;background:none;color:#3d2c48;text-align:left;font-size:12px;line-height:1.4}
.profile-actions-dropdown button:hover,.profile-actions-dropdown button:focus-visible{background:rgba(176,146,205,0.207)}
.profile-actions-dropdown .remove-friend-action,.profile-actions-dropdown [data-action='block']{color:#7c0e29}
.profile-page .profile-signature.signature-empty{color:#796c88;font-style:normal}
.profile-preferences .visitor-presence{font-size:12px}
.profile-relationship{color:#5d4677;font-size:12px;text-align:right}

.edit-name{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;padding:4px;border-radius:7px;border:1px solid rgba(210,185,235,0.311);background:rgba(182,155,213,0.0949);color:#4f336e}
.edit-name svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Account voice rooms: same theme, independent retained SFU session. */
.lounge-list h1{font-size:24px}.lounge-list h2{font-size:16px;margin:25px 0 12px}.lounge-list>.muted{font-size:13px;line-height:1.7}.lounge-room-card{width:100%;display:flex;align-items:center;gap:13px;padding:15px;margin:12px 0;background:#efedf2;border:1px solid rgba(83,75,88,0.145);border-radius:20px;text-align:left;color:#492008}.lounge-room-card.own{background:linear-gradient(120deg,#eae4e7,#e9e7ee)}.lounge-room-card>img{width:66px;height:66px;border-radius:16px;object-fit:cover}.lounge-room-card>span{min-width:0;flex:1}.lounge-room-card strong{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lounge-room-card small{display:block;font-size:12px;color:#5e4c6f;margin-top:6px}.lounge-room-card span>span{font-size:10px;color:#7a6888;display:block;margin-top:4px}.lounge-room-card>b{font-size:20px;color:#a05a22}.lounge-overlay{position:fixed;inset:0;z-index:100;background:#f3f1f6}.lounge-overlay iframe{width:100%;height:100%;display:block;border:0}.lounge-mini{position:fixed;right:10px;top:58%;z-index:110;display:flex;align-items:center;gap:1.6px;max-width:166.4px;padding:4px 4px 4px 4.8px;border:1px solid rgba(209,177,235,0.42);border-radius:13.6px;background:#ebe8ef;box-shadow:0 8px 25px rgba(60,40,90,0.0933)}.lounge-mini[hidden]{display:none}.lounge-mini-open{display:flex;align-items:center;gap:6.4px;padding:0 4px 0 0;background:none;border:0;color:#492008;max-width:124px;min-width:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.lounge-mini-open img{width:27.2px;height:27.2px;object-fit:cover;border-radius:8.8px;flex-shrink:0;-webkit-user-drag:none}.lounge-mini-open strong{font-size:8.8px;max-width:86.4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.lounge-mini-close{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;padding:0;border-radius:8.8px;color:#88492c;background:rgba(238,173,122,0.104);border:1px solid rgba(226,179,142,0.293)}.lounge-mini-close svg{width:13.6px;height:13.6px;fill:none;stroke:currentColor;stroke-width:1.7}.lounge-mini button:active{transform:none}
/* Portrait only: phones turned sideways see a "rotate back" screen. */
@media (orientation: landscape) and (max-height: 520px) and (hover: none) and (pointer: coarse) {
  html, body { overflow: hidden !important; }
  body::before {
    content: "📱\A\A Telefonunu dik tut\A\A TABU! dikey ekranda oynanır";
    white-space: pre-wrap; position: fixed; inset: 0; z-index: 2147483647;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: radial-gradient(circle at 50% 35%, #eae6f0, #f6f4f9 70%); color: #242424;
    font: 700 1.05rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em;
    pointer-events: all; touch-action: none;
  }
}
.profile-cover::after{display:none}
.account-card{margin-top:14px;padding:16px;display:flex;flex-direction:column;gap:12px}
.account-caption{font-size:.68rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.account-row{display:flex;align-items:center;gap:12px}
.account-row strong{display:block;font-size:.95rem}
.account-row small{display:block;color:var(--muted);font-size:.74rem;margin-top:2px}
.account-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:rgba(40,30,70,0.0459);color:var(--muted)}
.account-icon svg,.account-logout svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account-logout{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;border-radius:14px;background:rgba(255,107,107,0.173);border:1px solid rgba(255,138,138,0.42);color:#921010;font-weight:750;font-size:.86rem}
.logout-note{color:var(--muted);font-size:.86rem;line-height:1.6;margin:0 0 16px}
.logout-actions{display:flex;gap:10px}
.logout-actions>button{flex:1;min-height:46px;border-radius:14px;font-weight:750}
.secondary-button{background:rgba(40,30,70,0.0459);border:1px solid var(--line);color:var(--text)}
.logout-button{background:#e5484d;color:#242424;border:0}
.room-role{font-style:normal;font-weight:750;color:#b58124}
.lounge-room-card.followed{border-color:rgba(242,194,107,0.42)}
.profile-overview .profile-signature-panel{position:relative}
.profile-overview .profile-signature-panel::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,154,107,0.333) 20%,rgba(180,156,255,0.4) 50%,rgba(255,154,107,0.333) 80%,transparent);pointer-events:none}
.profile-page .profile-cover{aspect-ratio:100/84}
.lounge-tabs{display:flex;gap:6px;margin:18px 0 4px;padding:4px;border-radius:15px;background:rgba(40,30,70,0.0353);border:1px solid var(--line)}
.lounge-tabs button{flex:1;min-height:38px;border-radius:11px;background:none;color:var(--muted);font-size:.8rem;font-weight:750}
.lounge-tabs button.active{background:rgba(144,118,255,0.328);color:var(--text)}
.lounge-tabs button span{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:rgba(144,118,255,0.42);font-size:.66rem}
.room-live{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#45d49a;box-shadow:0 0 6px #45d49a;vertical-align:1px}
.lounge-room-card.offline img{filter:grayscale(.6);opacity:.75}
.hub-lead{margin:6px 0 0;color:var(--muted);font-size:.92rem;line-height:1.5}
.game-tile{width:100%;display:flex;align-items:stretch;gap:0;margin-top:18px;padding:0;border-radius:24px;border:1px solid rgba(40,30,70,0.0706);text-align:left;color:var(--text);overflow:hidden}
.tabu-tile{min-height:168px;background:linear-gradient(120deg,#ff8a55 0%,#e05f8a 52%,#7a5cf0 100%);box-shadow:0 18px 40px -22px #e05f8a;color:#242424;position:relative}
.game-art{position:relative;flex:0 0 44%;overflow:hidden}
.game-art img{position:absolute;bottom:-6px;height:118px;filter:drop-shadow(0 8px 12px rgba(60,40,90,0.0747))}
.game-art img:first-of-type{left:-6px}
.game-art img:last-of-type{left:58px;height:104px}
.game-card-back,.game-card-front{position:absolute;top:16px;width:64px;height:86px;border-radius:10px}
.game-card-back{left:34px;transform:rotate(-12deg);background:rgba(40,30,70,0.226);border:1px solid rgba(40,30,70,0.36)}
.game-card-front{left:58px;transform:rotate(8deg);background:#1f1f1f;box-shadow:0 8px 18px rgba(60,40,90,0.056);display:flex;flex-direction:column;align-items:center;padding-top:9px;gap:5px}
.game-card-front b{font-size:.62rem;font-weight:900;color:#ae1e33;letter-spacing:.04em}
.game-card-front i{display:block;width:40px;height:4px;border-radius:2px;background:#2b2530}
.game-copy{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:18px 18px 18px 6px}
.game-copy strong{font-size:1.7rem;font-weight:900;letter-spacing:-.03em;line-height:1}
.game-copy small{font-size:.78rem;line-height:1.45;opacity:.92}
.game-badge{align-self:flex-start;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(40,30,70,0.162);font-size:.66rem;font-weight:800}
.game-badge i{width:6px;height:6px;border-radius:50%;background:#7dffbf;box-shadow:0 0 6px #7dffbf}
.game-go{align-self:flex-start;margin-top:6px;padding:8px 14px;border-radius:999px;background:#1f1f1f;color:#9a3253;font-size:.8rem;font-weight:850}
.soon-tile{align-items:center;gap:13px;padding:16px 18px;background:rgba(40,30,70,0.0282);border-style:dashed;border-color:rgba(40,30,70,0.12);color:var(--muted)}
.soon-tile strong{display:block;color:var(--text);font-size:.92rem}
.soon-tile small{display:block;font-size:.76rem;margin-top:2px}
.soon-mark{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:13px;background:rgba(144,118,255,0.267);color:#290f88}
.game-heading{display:flex;align-items:center;gap:12px}
.game-heading small{display:block;font-size:.62rem;letter-spacing:.12em;color:var(--muted);font-weight:800}
.game-heading h1{margin:0}
.game-back{width:38px;height:38px;flex:0 0 38px;border-radius:12px;background:rgba(40,30,70,0.0459);border:1px solid var(--line);font-size:1.4rem;line-height:1}
.profile-name-row h1,.person-copy strong,.lounge-room-card strong{letter-spacing:normal;font-synthesis:none}
/* mini room pill: 10% larger, clearer rim, red round close */
.lounge-mini{max-width:183px;padding:4.4px 4.4px 4.4px 5.3px;gap:4px;border:1.5px solid rgba(214,189,240,0.667);border-radius:16px;box-shadow:0 10px 28px rgba(60,40,90,0.112),0 0 0 3px rgba(144,118,255,0.293)}
.lounge-mini-open{gap:7px;max-width:136px}
.lounge-mini-open img{width:30px;height:30px;border-radius:10px}
.lounge-mini-open strong{font-size:9.7px;max-width:95px}
.lounge-mini-close{width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:#e5484d;border:0;color:#242424;box-shadow:0 3px 8px -2px rgba(229,72,77,0.6)}
.lounge-mini-close svg{width:14px;height:14px;stroke-width:2.2}
.refresh-button{display:grid;place-items:center}
.refresh-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%}
.refresh-button.spinning svg{animation:refresh-spin .7s linear infinite}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
.section-title .refresh-button{width:34px;height:34px}
@media(prefers-reduced-motion:reduce){.refresh-button.spinning svg{animation-duration:1.4s}}
.games-hub .home-heading{display:block}
.games-hub .home-heading h1{margin:0}
.home-heading.game-heading{justify-content:flex-start;text-align:left}
/* mini room pill v3: another 10%, about a third of the screen wide */
.lounge-mini{width:clamp(150px,34vw,230px);max-width:none;padding:5px 5px 5px 6px;border-radius:18px}
.lounge-mini-open{flex:1;max-width:none;gap:8px}
.lounge-mini-open img{width:33px;height:33px;border-radius:11px}
.lounge-mini-open strong{font-size:12.5px;font-weight:800;max-width:none;flex:1;min-width:0}
.lounge-mini-close{width:30px;height:30px;flex:0 0 30px}
.lounge-mini-close svg{width:15px;height:15px}
.brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 6px 14px -6px rgba(236,95,143,0.533)}
.brand strong{letter-spacing:-.03em}
/* Hand-tuned fixes appended after the generated light stylesheet. */
.logout-button,.provider.facebook{color:#fff}
.account-logout{background:#e5484d14;border-color:#e5484d40;color:#c9302c}
.lounge-room-card.followed{border-color:#d9a13b55}
.room-role{color:#b97a12}
.profile-overview .profile-signature-panel::before{background:linear-gradient(90deg,transparent,#ff8a5566 20%,#8f74e077 50%,#ff8a5566 80%,transparent)}
.lounge-tabs{background:#ece8f2;border-color:#e0d9ea}
.lounge-tabs button.active{background:#fff;color:#2a2040;box-shadow:0 2px 8px -4px #5a4a8a55}
.tabu-tile,.tabu-tile .game-copy small,.tabu-tile .game-copy strong{color:#fff}
.tabu-tile .game-badge{color:#fff;background:#ffffff38}
.game-go{background:#fff;color:#c2416a}
.game-card-front{background:#fff}
.game-card-front b{color:#e0485f}
.game-card-front i{background:#ece4f2}
.soon-tile{background:#f6f3fa;border-color:#d9d0e6}
.soon-mark{background:#ece6fb;color:#6a52d8}
.bubble.mine{background:#e6defd;color:#241a33;border:1px solid #d6cbf6}
.bubble.mine *{color:inherit}
.bubble.mine time,.bubble.mine small{color:#6a5f80}
.lounge-mini{background:#ffffff;border:1.5px solid #b9a6e6;box-shadow:0 10px 26px -6px #3c2a6a55,0 0 0 3px #9076ff1f}
.lounge-mini-open{color:#241a33}
.lounge-mini-close{background:#e5484d;color:#fff}
body.back-nudge::after{content:"";position:fixed;left:0;top:0;width:2px;height:2px;background:rgba(0,0,0,.02);pointer-events:none;z-index:2147483647}

/* pop-ups: readable sizes, background stays sharp */
dialog::backdrop{background:rgba(20,12,35,.28)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.player-profile-dialog{width:360px!important;max-width:calc(100vw - 24px)!important;border-radius:24px!important}
.player-profile-dialog .modal-content{padding:16px!important}
.player-profile-dialog .modal-top h2{font-size:1.1rem!important}
.player-profile-dialog .modal-top .icon-button{width:36px!important;height:36px!important;min-width:36px!important;font-size:1.35rem!important}
.player-profile-dialog .mini-player-identity{gap:12px}
.player-profile-dialog .mini-player-photo{width:62px!important;height:62px!important;border-radius:16px!important}
.player-profile-dialog .mini-player-name strong{font-size:1.1rem!important}
.player-profile-dialog .mini-player-id{font-size:.78rem!important}
.player-profile-dialog .visitor-status{font-size:.78rem!important}
.player-profile-dialog .visitor-actions{gap:8px!important;margin-top:14px!important}
.player-profile-dialog .visitor-actions>button,.player-profile-dialog button.primary,.player-profile-dialog button.secondary{min-height:48px!important;font-size:.95rem!important;border-radius:14px!important}

/* pop-up sizes: balanced */
.player-profile-dialog{width:320px!important;border-radius:20px!important}
.player-profile-dialog .modal-content{padding:13px!important}
.player-profile-dialog .modal-top h2{font-size:.98rem!important}
.player-profile-dialog .modal-top .icon-button{width:31px!important;height:31px!important;min-width:31px!important;font-size:1.2rem!important}
.player-profile-dialog .mini-player-photo{width:52px!important;height:52px!important;border-radius:14px!important}
.player-profile-dialog .mini-player-name strong{font-size:.98rem!important}
.player-profile-dialog .mini-player-id,.player-profile-dialog .visitor-status{font-size:.68rem!important}
.player-profile-dialog .visitor-actions{gap:7px!important;margin-top:11px!important}
.player-profile-dialog .visitor-actions>button,.player-profile-dialog button.primary,.player-profile-dialog button.secondary{min-height:40px!important;font-size:.8rem!important;border-radius:12px!important}
.edge-back-flash{position:fixed;left:0;top:50%;z-index:2147483646;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(30,20,50,.55);color:#fff;pointer-events:none}.edge-back-flash svg{width:20px;height:20px}

/* home stays clean white: no orange/purple corner glows */
body{background:var(--bg)!important}

/* photos cannot be long-pressed, dragged, selected or saved */
img,svg image,.avatar-image,.mini-player-photo{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-user-drag:none!important}
dialog::backdrop{background:rgba(20,12,35,.12)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body dialog::backdrop,dialog::backdrop{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* A sideways video is the one exception to the portrait-only rule. */
html.video-fs-on body::before{display:none!important;content:none!important}
html.video-fs-on,html.video-fs-on body{background:#000!important}

/* Thin bar pinned to the top edge: Safari 26 extends its colour behind the status bar. */
.safari-tint{position:fixed;left:0;right:0;z-index:101;pointer-events:none}
.safari-tint-top{top:0;height:calc(env(safe-area-inset-top,0px) + 6px)}
.safari-tint-bottom{bottom:0;height:calc(env(safe-area-inset-bottom,0px) + 6px)}
.safari-tint[hidden]{display:none}

/* SON KART tile and home */
.sonkart-tile{min-height:168px;background:linear-gradient(120deg,#3b82f6 0%,#7f6bff 48%,#ff4f8b 100%);box-shadow:0 18px 40px -22px #7f6bff;position:relative}
.sonkart-tile,.sonkart-tile .game-copy small,.sonkart-tile .game-copy strong{color:#fff}
.sonkart-tile .game-badge{color:#fff;background:#ffffff38}
.sonkart-tile .game-go{color:#5b4bd6}
.sk-art{display:block}
.sk-c{position:absolute;top:30px;width:60px;height:88px;border-radius:11px;display:grid;place-items:center;font-weight:950;font-size:1.35rem;color:#fff;box-shadow:0 10px 18px -6px #0005,inset 0 0 0 3px #ffffffd9;text-shadow:0 2px 0 #0002}
.sk-c.c1{left:16px;transform:rotate(-14deg);background:linear-gradient(160deg,#5ee28d,#139447)}
.sk-c.c2{left:46px;top:24px;transform:rotate(-2deg);background:linear-gradient(160deg,#ffd666,#e59a00);color:#3a2600}
.sk-c.c3{left:76px;transform:rotate(12deg);background:conic-gradient(#ff4f8b 0 25%,#fbbf24 0 50%,#22c55e 0 75%,#3b82f6 0);text-shadow:0 2px 6px #000a}
.sk-mini{position:relative;flex:0 0 58px;height:52px}
.sk-mini i{position:absolute;top:6px;width:28px;height:40px;border-radius:6px;box-shadow:0 4px 8px -3px #0004,inset 0 0 0 2px #fff}
.sk-mini i:nth-child(1){left:4px;transform:rotate(-14deg);background:#22c55e}.sk-mini i:nth-child(2){left:15px;top:3px;background:#fbbf24}.sk-mini i:nth-child(3){left:26px;transform:rotate(14deg);background:#ff4f8b}
.create-room-action>.sk-mini{flex:0 0 58px;min-width:58px}