/* Implementation of the approved October screen boards. */
:root,:root[data-theme=light]{--bg:#f8f7fc;--panel:#fff;--surface:#fff;--surface-alt:#efedf6;--text:#171726;--muted:#75778b;--line:#e6e4ef;--accent:#7750ed;--accent-ink:#fff;--tint:#eee8ff;--sidebar:#f0ebff;--sidebar-text:#78758f;--ambient-a:#eee8ff80;--ambient-b:#f8f7fc00;--glass:#ffffffed;--app-header:62px;--app-nav:64px;--focus-ring:#b3a0f5}
:root[data-theme=dark]{--bg:#10141b;--panel:#191e28;--surface:#1b202a;--surface-alt:#272c38;--text:#f4f3fa;--muted:#a0a3b6;--line:#303644;--accent:#aa89ff;--accent-ink:#171121;--tint:#33284e;--sidebar:#191d28;--sidebar-text:#b0adc5;--ambient-a:#27203b45;--ambient-b:#10141b00;--glass:#141820ef;--focus-ring:#a98ae8}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.15px;-webkit-font-smoothing:antialiased}
body>header{height:var(--app-header);padding:0 26px;border-bottom:1px solid var(--line);background:var(--glass)}
.brand{font-size:21px;font-weight:800;letter-spacing:-.8px}.brand .brand-image{width:31px;height:31px;border-radius:10px}
#identity>a{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}#identity .avatar{width:32px;height:32px;border:2px solid var(--surface);border-radius:50%}
#shell>aside{width:170px;top:var(--app-header);padding:32px 10px;background:linear-gradient(160deg,var(--sidebar),var(--bg));border-right:1px solid var(--line)}
#shell>aside a{display:flex;align-items:center;gap:12px;min-height:48px;padding:11px 15px;border-radius:12px;margin-bottom:9px;font-size:14px;font-weight:550;color:var(--sidebar-text)}
#shell>aside a.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);font-weight:700}
#shell>aside .nav-icon{width:23px;height:23px;flex-shrink:0}#shell>aside .nav-icon svg{width:100%;height:100%}
#shell>aside .side-caption{display:none}#shell>aside .side-bottom{display:block;position:absolute;bottom:32px;left:25px;right:16px;font-size:12px;color:var(--muted);line-height:1.6}#shell>aside .side-bottom b{display:none}#shell>aside .side-bottom small{font-size:12px}
#shell>main{margin-left:170px;padding:26px 32px;max-width:1500px;min-width:0}
h1{font-size:27px;font-weight:750;letter-spacing:-.9px;line-height:1.2}h2{font-weight:700;letter-spacing:-.45px}p{line-height:1.55}
:where(:where(#main>:not(#live-home)):not(#hero-view)) :is(button,.btn){border-radius:11px;min-height:42px;font-size:13px;font-weight:600}
:where(:where(#main>:not(#live-home)):not(#hero-view)) :is(button.primary,.btn.primary){background:linear-gradient(120deg,#9568fc,#6b47ed);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 #ffffff38,0 3px 10px #7351df13}
:where(#main>:not(#live-home)) :is(input,textarea,select){font-family:inherit;background:var(--surface-alt);border-color:transparent;border-radius:11px;color:var(--text)}
:where(#main>:not(#live-home)) :is(input,textarea,select):focus{outline:2px solid var(--focus-ring);outline-offset:1px}
.card{border-radius:16px;border:1px solid var(--line);padding:22px;box-shadow:none}.empty{padding:45px 20px;text-align:center}.empty h2{font-size:22px}.empty p{font-size:14px}
.tabs{gap:7px;flex-wrap:wrap}.tabs a{font-size:12px;padding:8px 14px;min-height:36px;border-radius:10px;background:var(--surface-alt);border-color:transparent}.tabs a[aria-current=page]{background:linear-gradient(120deg,#986dff,#7049f0);color:#fff}
.section-heading,.section-head{margin-bottom:18px}.section-heading h1,.section-head h1{margin:0}.quiet-link{font-size:12px;color:var(--muted)}
/* Conversation list: the content, rather than nested cards, creates the rows. */
.dialog-page{max-width:840px;margin:auto}.dialog-page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dialog-page-head h1{margin:0}.dialog-new{width:38px;height:38px;display:grid;place-items:center;background:var(--tint);color:var(--accent);border-radius:12px;font-size:24px}
.dialog-search{width:100%;height:43px;margin:0 0 12px}.dialog-page .tabs{margin:0 0 12px;display:flex}
#dialog-list{padding:0;border:0;background:transparent;box-shadow:none}.dialog-entry{display:flex;align-items:center;gap:12px;min-width:0;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:0;background:transparent;padding:14px 4px;margin:0;box-shadow:none}
.dialog-entry:hover{background:var(--tint);border-radius:12px}.dialog-entry>.avatar{width:48px;height:48px;flex:0 0 48px;border-radius:50%;object-fit:cover}.dialog-entry>div{min-width:0;flex:1}.dialog-entry b{font-size:14px;color:var(--text)}.dialog-entry p{margin:4px 0 0;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog-entry time{font-size:11px;align-self:flex-start;margin-top:4px;color:var(--muted);white-space:nowrap}
/* Chats: compact public feed, distinct own bubbles in private conversations. */
body:has(.chat) #shell>main{padding:14px 22px;height:calc(100dvh - var(--app-header));max-width:none}
.chat-workspace{gap:0!important;border:1px solid var(--line)!important;border-radius:16px!important;overflow:hidden;background:var(--surface)!important;flex:1}
.chat-workspace .room-rail{width:255px;flex:0 0 255px;padding:15px 10px;background:var(--surface);border:0;border-right:1px solid var(--line);border-radius:0}
.chat-workspace .rail-title{display:block;font-size:19px;font-weight:750;margin:0 10px 18px}.room-link{padding:11px 8px;border-radius:10px}.room-link .room-icon{width:38px;height:38px;border-radius:50%;font-size:20px}.room-link b{font-size:13px}.room-link small{font-size:11px}
.room-rail .dialog-entry{padding:11px 6px;gap:9px}.room-rail .dialog-entry>.avatar{width:38px;height:38px;flex-basis:38px}.room-rail .dialog-entry time{display:none}.room-rail .dialog-entry b{font-size:12px}.room-rail .dialog-entry p{font-size:11px}.new-conversation{font-size:12px;margin:14px 8px;display:block;color:var(--accent)}
.chat-workspace>.chat{min-width:0;flex:1;background:transparent}.chat-workspace .messages{background:linear-gradient(145deg,color-mix(in srgb,var(--tint) 42%,var(--surface)),var(--bg));padding:20px;gap:15px}
.chat-workspace.public-conversation .messages{background:var(--surface);gap:5px}.chat-workspace.public-conversation .message-row{max-width:100%;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 40%,transparent)}
.chat-workspace.public-conversation .message-row .message{background:transparent;padding:0 3px;width:100%;max-width:100%;border-radius:0;flex:1}.chat-workspace .message-author strong{font-size:13px}.chat-workspace .message-body{font-size:14px;line-height:1.5}.chat-workspace .you{border:0;background:transparent;padding:0;color:var(--muted);font-size:10px}.chat-workspace .chat-demographics{font-size:10px;color:var(--muted)}
.chat-workspace.private-conversation .message-row{max-width:87%}.chat-workspace.private-conversation .message-row>a,.chat-workspace.private-conversation .message-author{display:none}.chat-workspace.private-conversation .message-row .message{max-width:100%;border-radius:14px 14px 14px 4px;padding:10px 13px 7px;background:var(--surface);box-shadow:0 1px 2px #11112205}
.chat-workspace.private-conversation .message-row.own .message{background:linear-gradient(130deg,#9569f3,#704ce0);color:#fff;border-radius:14px 14px 4px 14px}.chat-workspace.private-conversation .message-row.own .message-body{color:#fff}.chat-workspace.private-conversation .message-row.own time{color:#e5dafa}
.chat-workspace.private-conversation .message:has(>.message-body.media-only),.chat-workspace.private-conversation .message:has(>.message-body.emoji-only){background:transparent;box-shadow:none;padding:0}
.chat-workspace .day-divider{border:0;background:transparent;font-size:10px;color:var(--muted);padding:0;margin:7px auto}
.chat-workspace .compose{border:0;border-top:1px solid var(--line);border-radius:0;background:var(--surface);padding:12px;gap:8px}.chat-workspace .compose input{height:44px;border-radius:24px;padding:0 16px;background:var(--surface-alt)}.chat-workspace .compose button.primary{background:linear-gradient(130deg,#a079ff,#7047ef);color:#fff;border-radius:50%;height:44px;width:44px;font-size:22px}.chat-workspace .compose #emoji{width:36px;padding:0;font-size:23px;min-width:36px}
.chat-workspace.private-conversation .conversation-head{height:62px;min-height:62px;background:var(--surface);padding:10px 16px}.conversation-contact{display:flex;align-items:center;gap:10px}.conversation-contact>.avatar{width:38px;height:38px;border-radius:50%}.conversation-contact b{font-size:14px}.conversation-back{font-size:25px;padding:0 9px 0 0;color:var(--muted)}
.conversation-person{display:none;width:240px;flex:0 0 240px;border-left:1px solid var(--line);padding:30px 22px;background:var(--surface);text-align:center}.conversation-person>.avatar{width:110px;height:110px;border-radius:50%;margin:0 auto 14px;font-size:40px}.conversation-person h2{font-size:21px}.conversation-person p{font-size:13px;overflow-wrap:anywhere}.conversation-person .btn{display:block;margin-top:24px}
/* Large, borderless photographs in the people directory. */
.people-directory{max-width:1150px}.people-directory .people-shortcuts{margin-bottom:15px;gap:8px}.people-shortcuts a{background:var(--surface-alt);border:0;border-radius:10px;padding:9px 16px;font-size:12px}.people-search-row{margin-bottom:12px}.people-search-row input{border-radius:12px}.people-search-row button{background:var(--tint);color:var(--accent);border:0}
.people-directory .people-results{grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:12px}.people-directory .person-tile{height:275px;min-height:0;border-radius:15px;border:0;overflow:hidden;background:var(--surface-alt);padding:0;box-shadow:none}.people-directory .person-tile>.avatar{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;font-size:58px;display:grid;place-items:center}.people-directory .person-tile:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#090b13cb);pointer-events:none}.people-directory .person-caption{position:absolute;bottom:15px;left:13px;right:10px;z-index:1;padding:0;background:none}.people-directory .person-caption h2{font-size:17px;color:#fff;margin:0 0 4px;letter-spacing:-.4px;overflow-wrap:anywhere}.people-directory .person-caption>span{font-size:11px;color:#eee}.people-directory .people-online{top:12px;left:12px;z-index:2;background:#10161d6b;backdrop-filter:blur(6px);font-size:10px}
.people-directory .person-tile.no-photo:after{background:linear-gradient(transparent,#27253f9c)}.people-directory .people-options{box-shadow:0 12px 32px #15132c0a;border-radius:16px;padding:18px}.people-checks label{font-size:13px}
/* Service entries use the same illustrated horizontal cards as the board. */
.service-gallery{max-width:900px;margin:auto}.service-design-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.service-design-card{display:flex;align-items:center;gap:16px;min-height:116px;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(120deg,var(--surface),var(--surface-alt));overflow:hidden}.service-design-card>img{width:88px;height:88px;object-fit:cover;border-radius:13px;flex-shrink:0}.service-design-card>span{flex:1;min-width:0}.service-design-card strong{display:block;font-size:16px;margin-bottom:5px}.service-design-card small{display:block;font-size:12px;color:var(--muted);line-height:1.4}.service-design-card>i{font-style:normal;font-size:23px;color:var(--muted)}.service-coming{margin-top:20px;border-radius:16px;min-height:100px}.app-help{margin-top:20px;font-size:12px;color:var(--muted)}
.quiz-mode-tabs{gap:8px}.quiz-mode-tabs a{border-radius:12px;padding:9px 12px}.quiz-mode-tabs a>img{display:none}.quiz-mode-tabs small{display:none}.quiz-mode-tabs a[aria-current=page]{background:var(--tint);border-color:transparent;color:var(--accent)}
.discovery-card{max-width:450px;border-radius:19px;overflow:hidden;margin:auto;box-shadow:none}.discovery-caption h2{font-size:25px}.swipe-actions{max-width:450px;margin:18px auto}.swipe-actions button{border-radius:50%!important;width:62px;height:62px;font-size:30px!important}.swipe-actions #like{background:linear-gradient(120deg,#9872ff,#7448e9);color:#fff;border:0}.swipe-actions>span{font-size:11px;color:var(--muted)}
@media(min-width:1250px){.conversation-person:not([hidden]){display:block}}
@media(max-width:1000px) and (min-width:701px){#shell>aside{width:150px}#shell>main{margin-left:150px;padding:22px}.chat-workspace .room-rail{width:200px;flex-basis:200px}.service-design-list{grid-template-columns:1fr}}
@media(max-width:700px){
 :root{--app-header:54px;--app-nav:62px}body>header{padding:0 14px}.brand{font-size:18px;gap:7px}.brand .brand-image{width:27px;height:27px;border-radius:9px}#identity>a:has(.avatar){font-size:0;gap:0}#identity .avatar{width:29px;height:29px}
 #shell>aside{top:auto;width:100%;height:calc(var(--app-nav) + env(safe-area-inset-bottom));padding:5px 9px calc(5px + env(safe-area-inset-bottom));display:flex;gap:4px;background:var(--glass);border-right:0;border-top:1px solid var(--line);backdrop-filter:blur(20px)}
 #shell>aside a{flex:1;min-width:0;min-height:48px;margin:0;padding:3px 0;gap:3px;flex-direction:column;border-radius:0;font-size:9px;line-height:1.25}#shell>aside a.active{background:transparent;color:var(--accent)}#shell>aside a.active .nav-icon{filter:drop-shadow(0 2px 5px #8059ec38)}#shell>aside .nav-icon{width:23px;height:23px}#shell>aside .side-bottom{display:none}
 #shell>main{margin:0;padding:15px 14px calc(var(--app-nav) + env(safe-area-inset-bottom) + 22px)}h1{font-size:24px}.card{padding:18px;border-radius:15px}.section-heading{margin-bottom:15px}
 body:has(.chat) #shell>main{height:calc(100dvh - var(--app-header) - var(--app-nav) - env(safe-area-inset-bottom));padding:0;gap:0}.chat-workspace{border:0!important;border-radius:0!important}.chat-workspace .room-rail{display:none}
 body:has(.chat) #shell>main>.chat-tabs{padding:10px 12px;margin:0;gap:6px;background:var(--surface)}body:has(.chat) #shell>main>.chat-tabs a{min-height:32px;padding:7px 9px;flex:1;font-size:11px;border:0;background:var(--surface-alt);border-radius:9px}body:has(.chat) #shell>main>.chat-tabs a[aria-current=page]{background:linear-gradient(130deg,#976cff,#7350ef);color:#fff}
 .chat-workspace .messages{padding:14px 13px;gap:13px}.chat-workspace.public-conversation .messages{padding:8px 14px;gap:5px}.chat-workspace.public-conversation .message-row>a{flex-basis:35px}.chat-workspace.public-conversation .message-row>a>.game-avatar{width:35px;height:35px;min-width:35px}.chat-workspace .message-body{font-size:13px}.chat-workspace .compose{padding:9px 10px}.chat-workspace .compose input{font-size:16px;height:42px}.chat-workspace .compose button.primary{height:42px;width:42px;min-width:42px}.chat-workspace.private-conversation .conversation-head{height:56px;min-height:56px}
 .dialog-page-head{margin-bottom:13px}.dialog-entry{padding:13px 0}.dialog-entry>.avatar{width:46px;height:46px;flex-basis:46px}.dialog-entry p{font-size:12px}.dialog-entry b{font-size:13px}
 .people-directory .people-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.people-directory .person-tile{height:auto;aspect-ratio:3/4;border-radius:12px}.people-directory .person-caption{bottom:12px;left:10px}.people-directory .person-caption h2{font-size:14px}.people-directory .person-caption>span{font-size:10px}.people-directory .people-shortcuts{margin-bottom:11px}.people-shortcuts a{flex:1;text-align:center;padding:8px;font-size:12px}
 .service-design-list{grid-template-columns:1fr;gap:10px}.service-design-card{min-height:95px;padding:11px 13px;gap:13px;border-radius:13px}.service-design-card>img{width:67px;height:67px;border-radius:11px}.service-design-card strong{font-size:14px}.service-design-card small{font-size:11px}.service-coming{padding:15px!important}.service-coming h2{font-size:18px}.service-coming p{font-size:12px}
 .quiz-mode-tabs{display:flex;overflow-x:auto;gap:6px}.quiz-mode-tabs a{flex:1;min-width:0;padding:9px 6px;justify-content:center;text-align:center}.quiz-mode-tabs strong{font-size:11px}.quiz-hub .section-heading .quiet-link{font-size:10px}.discovery-card{max-width:100%}.discovery-card>img{min-height:0;max-height:calc(100dvh - 265px);object-fit:cover}.swipe-hint{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(max-width:700px){#identity a>span:not(.avatar){display:none}.dialog-page-head{height:0;margin:0;position:relative}.dialog-page-head h1{display:none}.dialog-new{position:absolute;right:0;top:0;width:42px;height:42px}.dialog-search{width:calc(100% - 51px)}}
/* Public rooms are the primary destination; character and personal profile are separate. */
.chat-workspace.public-conversation .message-row>a{flex:0 0 54px;align-self:flex-start}.chat-workspace.public-conversation .message-row>a>.game-avatar{width:54px;height:54px;min-width:54px;padding:3px}.message-profile-link{color:var(--text);text-decoration:none}.message-profile-link:hover{text-decoration:underline}
.chat-avatar-dialog{width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line);border-radius:24px;padding:22px;color:var(--text);background:var(--surface);box-shadow:0 24px 90px #0005}.chat-avatar-dialog::backdrop{background:#11122299;backdrop-filter:blur(5px)}.chat-avatar-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-avatar-dialog small{font-size:10px;letter-spacing:1.4px;color:var(--accent)}.chat-avatar-dialog h2{font-size:21px;margin:6px 0}.chat-avatar-dialog header button{padding:0;width:38px;height:38px;min-width:38px;font-size:26px;background:var(--surface-alt);color:var(--text);border:0;border-radius:50%}.chat-avatar-portrait{display:grid;place-items:center;margin:24px 0}.chat-avatar-portrait>.game-avatar{width:220px;height:220px;padding:6px}.chat-avatar-portrait .game-avatar-level{min-width:36px;height:36px;font-size:17px;bottom:5px;right:12px}.chat-avatar-dialog p{font-size:13px;color:var(--muted);text-align:center}.chat-avatar-dialog .chat-avatar-owner{color:var(--text);font-size:18px;font-weight:700;overflow-wrap:anywhere}.chat-avatar-actions{display:grid;gap:8px;margin-top:20px}.chat-avatar-actions .btn{text-align:center;border-radius:12px;padding:12px}.chat-avatar-actions .primary{background:var(--accent);color:var(--bg)}
@media(max-width:700px){body:has(.chat) #shell>main>.chat-tabs a{font-size:12px;min-height:38px}.chat-workspace.public-conversation .message-row>a{flex-basis:48px}.chat-workspace.public-conversation .message-row>a>.game-avatar{width:48px;height:48px;min-width:48px}.chat-avatar-dialog{padding:18px}.chat-avatar-portrait>.game-avatar{width:200px;height:200px}}