/* V3.3.3 additions only. The approved four appearance contracts are untouched. */
.identity-screen{position:absolute;inset:0;z-index:95;display:flex;flex-direction:column;overflow:auto;background:var(--surface);color:var(--ink);font-family:var(--sans,inherit);padding:24px 20px calc(24px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.identity-screen[hidden],.community-game[hidden]{display:none!important}
.identity-top{display:flex;align-items:center;gap:12px;margin-bottom:24px}.identity-top h2{flex:1;margin:0;font:700 24px/1.15 var(--display,var(--sans))}.identity-top .icon-button{width:44px;height:44px;flex:none}
.identity-screen h1{font:700 34px/1.08 var(--display,var(--sans));letter-spacing:-.035em;margin:10px 0 16px}.identity-screen p{font:400 14px/1.55 var(--sans,inherit);color:var(--muted);margin:8px 0 18px}.identity-screen .button{min-height:48px;padding:12px 16px;margin:7px 0;gap:9px}.identity-screen .button.full{width:100%}
.identity-screen.startup{justify-content:center;align-items:center;text-align:center}.identity-screen.startup h1{font-size:27px}.identity-screen.startup .button{margin-top:24px}
.identity-eyebrow{font:600 10px var(--mono,monospace);letter-spacing:.15em;color:var(--muted);text-transform:uppercase;margin-bottom:12px}
.signin-art{align-self:center;width:128px;margin:14px 0 26px}.signin-options{display:grid;gap:9px;margin-top:16px}.provider-button{border:1px solid var(--line);min-height:50px;border-radius:12px;padding:12px;background:var(--raised);color:var(--ink);font:600 14px var(--sans,inherit);display:flex;justify-content:center;align-items:center;gap:12px}.provider-button:disabled{opacity:.55;cursor:not-allowed}.provider-letter{font:700 18px system-ui,sans-serif}.signin-foot{margin-top:auto;padding-top:24px}.signin-foot p{font-size:12px}.identity-status{display:block;font:500 12px var(--sans);color:var(--muted);line-height:1.5;margin:8px 0 12px;overflow-wrap:anywhere}.identity-status.error{color:var(--danger)}
/* Theme-aware mock Mega XO loading game.
 * It reuses the real .mark-layer X/O geometry and theme mark colors/effects. */
.theme-loader{position:relative;width:112px;aspect-ratio:1;margin:14px auto 22px;display:grid;place-items:center}
.xo-loader-board{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);overflow:hidden;background:var(--raised);border:1px solid var(--border-strong);border-radius:12px}
.xo-loader-cell{position:relative;min-width:0;min-height:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.xo-loader-cell:nth-child(3n){border-right:0}.xo-loader-cell:nth-child(n+7){border-bottom:0}
.xo-loader-mark{opacity:0;transform:scale(.72);transform-origin:center}
.xo-step-1 .xo-loader-mark{animation:xo-mark-1 2.65s ease-out infinite}
.xo-step-2 .xo-loader-mark{animation:xo-mark-2 2.65s ease-out infinite}
.xo-step-3 .xo-loader-mark{animation:xo-mark-3 2.65s ease-out infinite}
.xo-step-4 .xo-loader-mark{animation:xo-mark-4 2.65s ease-out infinite}
.xo-step-5 .xo-loader-mark{animation:xo-mark-5 2.65s ease-out infinite}
@keyframes xo-mark-1{0%,7%{opacity:0;transform:scale(.72)}11%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.9)}}
@keyframes xo-mark-2{0%,20%{opacity:0;transform:scale(.72)}24%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.9)}}
@keyframes xo-mark-3{0%,34%{opacity:0;transform:scale(.72)}38%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.9)}}
@keyframes xo-mark-4{0%,48%{opacity:0;transform:scale(.72)}52%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.9)}}
@keyframes xo-mark-5{0%,61%{opacity:0;transform:scale(.72)}65%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.9)}}
.xo-loader-strike{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.xo-loader-strike path{fill:none;stroke:var(--x);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:108;stroke-dashoffset:108;opacity:0;animation:xo-loader-strike 2.65s ease-out infinite}
@keyframes xo-loader-strike{0%,70%{stroke-dashoffset:108;opacity:0}73%{opacity:1}84%,91%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
.theme-loader.small{width:42px;margin:0;flex:none}.theme-loader.small .xo-loader-board{border-radius:5px}.theme-loader.small .xo-loader-strike path{stroke-width:2.4}.theme-loader.small .mark-layer svg{stroke-width:4.7}
.theme-loader-label{font:600 11px var(--mono);letter-spacing:.12em;color:var(--muted);text-align:center;margin:0 0 12px}
:root[data-theme='midnight'] .xo-loader-board{box-shadow:0 0 18px rgba(185,240,60,.08),inset 0 1px 0 rgba(255,255,255,.035)}
:root[data-theme='midnight'] .xo-loader-strike path{filter:drop-shadow(0 0 3px rgba(111,157,255,.32))}
:root[data-theme='paperclub'] .identity-screen{background-image:var(--paper-grain),var(--paper-ruled)}
:root[data-theme='paperclub'] .xo-loader-board{border:1.5px solid var(--ink);border-radius:255px 10px 225px 8px/10px 225px 8px 255px;box-shadow:3px 4px 0 rgba(39,34,27,.16);transform:rotate(-1deg)}
:root[data-theme='paperclub'] .xo-loader-cell{border-color:var(--line)}
:root[data-theme='paperclub'] .xo-loader-strike path{filter:url(#wobble)}
:root[data-theme='paperclub'] .identity-screen h1{font-size:40px}:root[data-theme='paperclub'] .identity-screen p{font-size:17px}:root[data-theme='paperclub'] .identity-top h2{font-size:30px}:root[data-theme='paperclub'] .provider-button,:root[data-theme='paperclub'] .profile-card{border-radius:255px 12px 225px 9px/12px 225px 9px 255px;box-shadow:2px 3px 0 #27221b20}
:root[data-theme='afterhours'] .identity-screen{background-image:linear-gradient(#2cf2ff05 1px,transparent 1px),linear-gradient(90deg,#ff4fb605 1px,transparent 1px);background-size:24px 24px}
:root[data-theme='afterhours'] .identity-screen h1{font-size:25px;text-transform:uppercase;line-height:1.3;letter-spacing:.015em}:root[data-theme='afterhours'] .identity-top h2{font-size:19px;text-transform:uppercase}
:root[data-theme='afterhours'] .xo-loader-board{border-radius:2px;border-color:#6549b7;box-shadow:0 0 14px rgba(44,242,255,.12),3px 3px 0 #2a1566}
:root[data-theme='afterhours'] .xo-loader-cell{border-color:#46308c}
:root[data-theme='afterhours'] .xo-loader-strike path{filter:drop-shadow(0 0 5px rgba(44,242,255,.72))}
:root[data-theme='afterhours'] .provider-button,:root[data-theme='afterhours'] .profile-card,:root[data-theme='afterhours'] .friend-person{border-radius:3px}
:root[data-motion='reduced'] .xo-loader-mark,
:root[data-motion='reduced'] .xo-loader-strike path{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){.xo-loader-mark,.xo-loader-strike path{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}
.profile-card{border:1px solid var(--line);border-radius:16px;background:var(--raised);padding:18px;margin:12px 0}.profile-heading{display:flex;gap:14px;align-items:center;min-width:0}.profile-heading h3{margin:0;font-size:20px;overflow-wrap:anywhere}.profile-heading small{display:block;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.profile-avatar{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;flex:none;background:var(--soft);color:var(--ink);border:1px solid var(--line)}.profile-avatar svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.profile-avatar.small{width:42px;height:42px;border-radius:12px}.profile-avatar.small svg{width:24px;height:24px}
.tag-row{display:flex;gap:8px;align-items:center;margin:16px 0 4px}.tag-row code{flex:1;min-width:0;overflow-wrap:anywhere;font:600 12px var(--mono);letter-spacing:.04em}.tag-row button{width:40px;height:40px;flex:none}.profile-fields{display:grid;gap:18px}.profile-fields label{display:grid;gap:7px;font-size:13px}.profile-fields input,.profile-fields select{width:100%;min-width:0;min-height:46px;font:inherit;color:var(--ink);background:var(--raised);border:1px solid var(--line);padding:12px;border-radius:10px}.profile-fields small{font-size:11px;color:var(--muted)}
.avatar-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.avatar-choice{padding:0;border:0;background:none}.avatar-choice .profile-avatar{width:100%;height:auto;aspect-ratio:1;min-width:0}.avatar-choice[aria-pressed=true] .profile-avatar{outline:2px solid var(--accent-edge);outline-offset:1px}.identity-section{font-size:14px;margin:24px 0 12px}.profile-modes{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 12px}.profile-modes .tab{min-height:36px;font-size:12px}
.friend-person{width:100%;border:1px solid var(--line);background:var(--raised);color:var(--ink);border-radius:14px;display:flex;align-items:center;gap:11px;padding:12px;margin:9px 0;text-align:left;min-height:72px}.friend-person .person-copy{flex:1;min-width:0}.friend-person strong{display:block;font-size:14px;overflow-wrap:anywhere}.friend-person small{display:block;font-size:11px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}.presence{display:inline-flex;align-items:center;gap:5px;font-size:11px!important;line-height:1.5}.presence::before{content:'';width:6px;height:6px;background:var(--muted);border-radius:50%;display:inline-block;flex:none}.presence[data-online=true]::before{background:var(--accent);box-shadow:0 0 0 1px var(--accent-edge)}.friend-person .icon{flex:none;width:18px}.friend-request{border:1px solid var(--line);border-radius:14px;background:var(--raised);padding:12px;margin-top:10px}.friend-request .friend-person{border:0;margin:0;padding:0;min-height:52px}.friend-request .request-actions{display:flex;gap:8px;margin-top:10px}.friend-request .request-actions .button{flex:1;min-height:40px;font-size:11px}
.community-search{display:flex;gap:8px;margin:14px 0}.community-search input{flex:1;min-width:0;border:1px solid var(--line);background:var(--raised);color:var(--ink);border-radius:12px;min-height:44px;padding:10px 12px;font:inherit}.community-search .button{min-height:44px}.community-profile-cta{width:100%;text-align:left;border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--raised);color:var(--ink);display:flex;align-items:center;gap:10px;margin:12px 0}.community-profile-cta>span{flex:1}.community-profile-cta strong{display:block;font-size:13px}.community-profile-cta small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.community-queue{justify-content:center;align-items:center;text-align:center}.community-queue .queue-time{font:600 18px var(--mono);margin:10px 0;color:var(--ink)}.community-queue .button.full{max-width:320px}.community-terms{width:100%;border:1px solid var(--line);background:var(--raised);border-radius:14px;padding:16px;margin:12px 0;text-align:left}.community-terms .split{display:flex;justify-content:space-between;gap:12px;margin:9px 0;font-size:13px}.community-terms p{font-size:12px;margin:8px 0}
.lobby-wait{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--soft);margin:16px 0}.lobby-wait .theme-loader{width:34px;margin:0;gap:2px;flex:none}.lobby-wait .theme-loader span{border-radius:2px}.lobby-wait b{font-size:13px}.lobby-wait small{display:block;font-size:11px;color:var(--muted);line-height:1.5}.party-network-status{font-size:11px;color:var(--muted);margin:8px 14px}.party-network-status[hidden]{display:none}:root[data-theme='paperclub'] .identity-status,:root[data-theme='paperclub'] .friend-person small{font-size:13px}:root[data-theme='paperclub'] .profile-heading h3{font-family:var(--display);font-size:27px}
@media(max-width:350px){.identity-screen{padding:18px 14px}.identity-screen h1{font-size:29px}.identity-top h2{font-size:22px}.avatar-choices{grid-template-columns:repeat(3,1fr)}.avatar-choice .profile-avatar{max-width:56px}.identity-screen.startup .theme-loader{width:84px}.tag-row{flex-wrap:wrap}.tag-row code{flex-basis:100%}}

/* Existing match finder remains a bottom sheet, with themed waiting feedback. */
#sheet[data-kind="queue"] .queue-time,#sheet[data-kind="waiting"] .queue-time{text-align:center;font:600 18px var(--mono);margin:8px 0 18px}
#sheet[data-kind="queue"] #sheetBody>p,#sheet[data-kind="waiting"] #sheetBody>p{text-align:center;line-height:1.5;color:var(--muted)}
#sheet[data-kind="queue"] .theme-loader,#sheet[data-kind="waiting"] .theme-loader{margin-top:22px;margin-bottom:24px}


/* V3.3.4 ranked challenge + notification surfaces. These use the existing
 * theme tokens so each pack keeps its own material/shape language. */
.notification-button{position:relative}
.notification-badge{position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);border:2px solid var(--surface);font:700 9px/1 var(--mono);font-variant-numeric:tabular-nums;z-index:2}
.notification-options{padding-left:12px;border-left:2px solid var(--soft);margin-left:3px}
.notification-child{padding-left:4px}.notification-child input:disabled{opacity:.38}.notification-child:has(input:disabled) label{opacity:.62}
.challenge-opponent{display:flex;align-items:center;gap:11px;padding:12px 0}.challenge-opponent .rank-badge{width:42px;height:42px}.challenge-opponent>div{min-width:0;flex:1}.challenge-opponent b{display:block;font-size:14px;overflow-wrap:anywhere}.challenge-opponent small{display:block;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}
.challenge-terms h3{margin-bottom:12px}.challenge-wait .community-terms,.challenge-invite .community-terms{margin-top:6px}
.notification-center{display:grid;gap:18px;padding:2px 0 4px}.notification-group h3{font-size:13px;margin:0 0 7px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.notification-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--line);background:var(--raised);border-radius:14px;padding:11px 10px;margin:8px 0}
.notification-item .notification-symbol{width:38px;height:38px;border-radius:11px;background:var(--soft);display:grid;place-items:center;color:var(--ink)}.notification-item .notification-symbol .icon{width:18px;height:18px}
.notification-item>div{min-width:0}.notification-item b{display:block;font-size:13px;overflow-wrap:anywhere}.notification-item small{display:block;color:var(--muted);font-size:10px;line-height:1.45;margin-top:2px}.notification-item .button{min-width:70px;min-height:38px;padding:8px 10px;font-size:10px}
.notification-empty{text-align:center;padding:26px 14px;border:1px dashed var(--line);border-radius:14px;background:var(--soft)}.notification-empty>.icon{width:28px;height:28px;margin:0 auto 10px;color:var(--muted)}.notification-empty h3{margin:0 0 5px}.notification-empty p{font-size:12px;color:var(--muted);margin:0 0 8px}
.notification-preferences-link{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:13px;padding:12px}.notification-preferences-link>span{flex:1;min-width:0}.notification-preferences-link b{display:block;font-size:12px}.notification-preferences-link small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.notification-preferences-link>.icon{width:18px;height:18px}
:root[data-theme='midnight'] .notification-badge{box-shadow:0 0 10px rgba(185,240,60,.28)}
:root[data-theme='paperclub'] .notification-badge{border-radius:50% 45% 55% 45%;border-color:var(--surface);transform:rotate(3deg)}
:root[data-theme='paperclub'] :is(.notification-item,.notification-empty,.notification-preferences-link){border-radius:255px 12px 225px 9px/12px 225px 9px 255px;box-shadow:2px 3px 0 rgba(39,34,27,.16)}
:root[data-theme='paperclub'] .notification-symbol{border-radius:50% 45% 52% 46%}
:root[data-theme='paperclub'] .notification-group h3{font-family:var(--display);font-size:18px;letter-spacing:0;text-transform:none;color:var(--ink)}
:root[data-theme='afterhours'] :is(.notification-badge,.notification-item,.notification-empty,.notification-preferences-link,.notification-symbol){border-radius:2px}
:root[data-theme='afterhours'] .notification-badge{box-shadow:0 0 10px rgba(255,216,61,.4)}
:root[data-theme='afterhours'] .notification-item{box-shadow:2px 2px 0 #2a1566}.notification-settings .setting-row:last-child{border-bottom:0}
@media(max-width:350px){.notification-item{grid-template-columns:34px minmax(0,1fr)}.notification-item .notification-symbol{width:34px;height:34px}.notification-item .button{grid-column:2;width:100%}.notification-options{padding-left:7px}}


/* V3.3.4 community typography is tuned independently for each appearance. */
/* Vector Light */
:root[data-theme='vector'] .identity-eyebrow{font-size:10.5px}
:root[data-theme='vector'] .signin-foot p,
:root[data-theme='vector'] .identity-status{font-size:12.5px}
:root[data-theme='vector'] .notification-item small,
:root[data-theme='vector'] .notification-preferences-link small{font-size:10.5px}
:root[data-theme='vector'] .notification-item .button{font-size:10.5px}

/* Midnight Club */
:root[data-theme='midnight'] .identity-eyebrow{font-size:11px}
:root[data-theme='midnight'] .identity-screen p{font-size:14.5px}
:root[data-theme='midnight'] .signin-foot p,
:root[data-theme='midnight'] .identity-status{font-size:12.5px}
:root[data-theme='midnight'] .friend-person small,
:root[data-theme='midnight'] .community-profile-cta small{font-size:11.5px}
:root[data-theme='midnight'] .notification-item small,
:root[data-theme='midnight'] .notification-preferences-link small{font-size:11px}
:root[data-theme='midnight'] .notification-item .button{font-size:11px}

/* Paper Club */
:root[data-theme='paperclub'] .identity-eyebrow{font-size:14px;letter-spacing:.08em}
:root[data-theme='paperclub'] .provider-button{font-size:16px}
:root[data-theme='paperclub'] .signin-foot p,
:root[data-theme='paperclub'] .identity-status{font-size:14px}
:root[data-theme='paperclub'] .community-profile-cta strong{font-size:15px}
:root[data-theme='paperclub'] .community-profile-cta small{font-size:13px}
:root[data-theme='paperclub'] .notification-item b{font-size:15px}
:root[data-theme='paperclub'] .notification-item small,
:root[data-theme='paperclub'] .notification-preferences-link small{font-size:12px}
:root[data-theme='paperclub'] .notification-item .button{font-size:13px}

/* After Hours */
:root[data-theme='afterhours'] .identity-screen h1{font-size:27px}
:root[data-theme='afterhours'] .identity-top h2{font-size:20px}
:root[data-theme='afterhours'] .identity-eyebrow{font-size:11px;letter-spacing:.11em}
:root[data-theme='afterhours'] .identity-screen p{font-size:14.5px;line-height:1.6}
:root[data-theme='afterhours'] .provider-button{font-size:14.5px}
:root[data-theme='afterhours'] .signin-foot p,
:root[data-theme='afterhours'] .identity-status{font-size:12.5px}
:root[data-theme='afterhours'] .profile-heading small,
:root[data-theme='afterhours'] .friend-person small,
:root[data-theme='afterhours'] .community-profile-cta small{font-size:11.5px}
:root[data-theme='afterhours'] .notification-group h3{font-size:14px}
:root[data-theme='afterhours'] .notification-item b{font-size:13.5px}
:root[data-theme='afterhours'] .notification-item small,
:root[data-theme='afterhours'] .notification-preferences-link small{font-size:11px}
:root[data-theme='afterhours'] .notification-item .button{font-size:11px}
:root[data-theme='afterhours'] .notification-badge{font-size:10px}