/* MatchApp brand system — crisp from phones through 8K. */
.matchapp-wordmark{display:block!important;width:clamp(14rem,26vw,22rem)!important;max-width:100%!important;height:auto!important;aspect-ratio:600/104;object-fit:contain!important;border:0!important;border-radius:0!important;box-shadow:none!important;flex:none;transform-origin:left center;filter:drop-shadow(0 5px 15px rgba(0,0,0,.3)) drop-shadow(0 0 9px rgba(229,193,88,.08));animation:brandReveal .7s cubic-bezier(.2,.8,.2,1) both;transition:transform .25s ease,filter .25s ease!important}
.matchapp-brand-link:hover .matchapp-wordmark,.matchapp-brand-link:focus-visible .matchapp-wordmark{transform:translateY(-2px) scale(1.025);filter:drop-shadow(0 7px 18px rgba(0,0,0,.32)) drop-shadow(0 0 13px rgba(229,193,88,.14))}
@keyframes brandReveal{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.matchapp-wordmark{animation:none!important;transition:none!important}}
.reduce-motion .matchapp-wordmark{animation:none!important;transition:none!important}
.matchapp-brand-link{display:inline-flex;align-items:center;gap:.7rem;min-width:0;text-decoration:none;color:var(--theme-accent,#ead8ff)}
.matchapp-brand-bar{position:relative;z-index:2;max-width:80rem;margin:1rem auto;padding:.65rem 1.25rem;box-sizing:border-box}
body>header:has(>.matchapp-brand-link):not(.app-header){flex-wrap:wrap;gap:1rem}

/* The animated SVG is the canonical wordmark. If an older experience layer
   injected its previous text-built wordmark, keep that fallback out of view
   and restore the real SVG instead. This also removes several redundant CSS
   animations from the header. */
html .app-title-main .matchapp-wordmark-source{display:block!important}
html .app-title-main .matchapp-live-wordmark{display:none!important}

/* The logo asset is a square JPEG, but the actual mark is circular. Never show
   the square backing card: clip every shared brand-logo instance to the mark. */
.matchapp-brand-link picture{display:inline-grid;place-items:center;flex:none;background:transparent!important;border:0!important;border-radius:50%!important;box-shadow:none!important;overflow:visible!important}
.matchapp-brand-link>img:not(.matchapp-wordmark),.matchapp-brand-link picture>img,.brand-logo,.matchapp-circle-logo{flex-shrink:0;object-fit:cover!important;object-position:center!important;border:0!important;border-radius:50%!important;clip-path:circle(49% at 50% 50%)!important;background:transparent!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--theme-accent,#dcc0ff) 26%,transparent),0 6px 18px #0004!important}

.app-title-main:has(.matchapp-wordmark){display:block!important;background:none!important;animation:none!important;line-height:1!important;letter-spacing:normal!important;text-transform:none!important}
html .app-header{box-sizing:border-box;position:relative!important;z-index:20;width:calc(100% - 2rem);max-width:92rem;margin:1.25rem auto 1rem!important;padding:1rem 1.3rem!important;min-height:6.15rem;border:1px solid color-mix(in srgb,var(--theme-accent,#dcc0ff) 25%,transparent)!important;border-radius:2rem 1.3rem 2rem 1.3rem!important;background:linear-gradient(125deg,color-mix(in srgb,var(--theme-surface,#241636) 96%,transparent),color-mix(in srgb,var(--theme-panel,#302043) 90%,transparent))!important;box-shadow:0 12px 32px #0003,inset 0 1px 0 #ffffff15!important;backdrop-filter:none!important;overflow:visible!important;gap:1rem!important;animation:headerArrive .55s ease-out both}
html .app-header .header-brand-area{display:flex;align-items:center;gap:.75rem!important;min-width:0;flex-shrink:1}
html .app-header .brand-logo{width:3.25rem!important;height:3.25rem!important;transition:transform .25s}
html .app-header .header-brand-area:hover .brand-logo{transform:rotate(-4deg) scale(1.03)}
html .app-header nav{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-end!important;gap:.45rem!important;min-width:0}
html .app-header :is(button,select,.quota-badge,.nav-avatar-link,.icon-btn){box-sizing:border-box;min-height:44px!important;border-radius:999px!important;padding:.6rem .8rem!important;border-width:1px!important;font-size:.85rem!important;white-space:nowrap!important;transition:transform .18s,box-shadow .18s!important}
html .app-header :is(button,.nav-avatar-link,.icon-btn):hover{transform:translateY(-2px);box-shadow:0 5px 14px #0002}
html .app-header :is(button,select,a):focus-visible{outline:3px solid var(--theme-second,#87eee0)!important;outline-offset:4px}
html .app-header .sound-toggle-btn{width:44px!important;height:44px!important;min-width:44px!important;flex:none;padding:.55rem!important}
html .app-header #nav-reg-btn{flex:none!important;padding:.7rem 1rem!important;box-shadow:0 3px 12px color-mix(in srgb,var(--theme-accent,#dcc0ff) 16%,transparent)}
html .app-header .install-wrap:has(.install-btn[style*="display: none"]){display:none}
html .app-header .install-wrap:has(.has-app-update),html .app-header .install-wrap:has(.is-app-installed){display:block}
html .app-header .has-app-update{border-color:var(--theme-second,#87eee0)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-second,#87eee0) 14%,transparent)!important}
html .app-header .has-app-update::before{content:'↻';font-size:1.2em;margin-inline-end:.35em}
.app-release-notice[hidden]{display:none!important}.app-release-notice [aria-busy="true"]{cursor:progress}
.kids-brand-copy:has(.matchapp-wordmark){min-width:0}.kids-brand-copy .matchapp-wordmark{width:clamp(11.5rem,20vw,16.5rem)!important}.kids-header-inner{min-width:0}.kids-brand{min-width:0}
[data-theme="sunrise"] .matchapp-wordmark{filter:brightness(.56) saturate(1.22) drop-shadow(0 3px 10px #fff5)}
@keyframes headerArrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){html .app-header{flex-wrap:wrap!important;max-width:42rem}html .app-header .header-brand-area{width:auto!important;flex:1 1 100%}html .app-header nav{justify-content:center!important;flex:1 1 100%;padding-top:.6rem;border-top:1px solid color-mix(in srgb,var(--theme-accent,#dcc0ff) 16%,transparent)}html .app-header #lang-switcher-host{margin:0!important}html .app-header .quota-badge{order:5}html .app-header .install-wrap{order:4}html .app-header .nav-avatar-link{margin-inline-start:0}}
@media(max-width:480px){html .app-header{width:calc(100% - 1rem);margin:.65rem auto .9rem!important;padding:.82rem .86rem!important;border-radius:1.55rem 1rem 1.55rem 1rem!important;gap:.45rem!important;min-height:5.5rem}html .app-header .matchapp-wordmark{width:min(72vw,17.25rem)!important}html .app-header nav{gap:.4rem!important}html .app-header :is(button,select,.quota-badge,.nav-avatar-link,.icon-btn){font-size:.8rem!important;padding:.55rem .65rem!important}html .app-header #nav-reg-btn{padding:.65rem .75rem!important}.kids-brand-copy .matchapp-wordmark{width:11rem!important}.kids-header-inner{flex-wrap:wrap}.matchapp-brand-bar{padding-inline:.8rem}}
@media(min-width:1600px){.matchapp-wordmark{width:22.5rem!important}html .app-header .brand-logo{width:3.65rem!important;height:3.65rem!important}}
@media(min-width:2560px){html .app-header{max-width:110rem;padding:1.25rem 2rem!important}.matchapp-wordmark{width:24rem!important}html .app-header :is(button,select,.quota-badge,.nav-avatar-link,.icon-btn){font-size:1rem!important;min-height:3rem!important}}
@media(prefers-reduced-motion:reduce){html .app-header,html .app-header *{animation:none!important;transition:none!important}}
.reduce-motion .app-header,.reduce-motion .app-header *{animation:none!important;transition:none!important}
@media(max-width:480px){.home-h1,.home-sub{color:var(--theme-text,#faf5ff)!important;text-shadow:0 2px 6px var(--theme-bg,#100a23),0 0 18px var(--theme-bg,#100a23)}}