/* Shared identity for the name explorer and two-person rooms. */
@font-face{font-family:NameDisplay;src:url('/fonts/font-6.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:NameDisplay;src:url('/fonts/font-7.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:NameDisplay;src:url('/fonts/font-8.ttf') format('truetype');font-weight:800;font-display:swap}
:root{--brand:#505acb;--brand-dark:#3d46aa;--brand-ink:#24243f;--brand-soft:#eef1ff;--brand-border:#dfe3f0;--brand-muted:#555d75}
::selection{background:#dce2ff;color:#24243f}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;letter-spacing:0;color:var(--brand-ink);flex-shrink:0}
.brand-symbol{width:40px;height:45px;object-fit:contain;display:block;flex-shrink:0}
.brand-words{display:flex;flex-direction:column;gap:2px;text-align:left;font-family:NameDisplay,Arial,sans-serif}
.brand-words>span{font-size:14px;font-weight:700;letter-spacing:.15px;line-height:1.05;color:var(--brand-ink)}
.brand-words strong{font-size:27px;line-height:1.05;font-weight:800;letter-spacing:-1px;color:var(--brand-ink)}
.brand-words small{font-size:14px;letter-spacing:-.4px;color:var(--brand);margin-left:2px;font-weight:700}
.nav{padding-top:22px;padding-bottom:22px;gap:28px;max-width:1360px}
.nav nav{gap:22px;font-size:14px}
.nav nav>a:first-child{color:var(--brand);font-weight:700}
.navsource{font-size:14px;white-space:nowrap;color:var(--brand-muted)}
.hero{padding-top:72px;padding-bottom:80px;gap:76px}
.herocopy .eyebrow{color:var(--brand);font-size:14px;letter-spacing:1.7px}
.herocopy h1{font-family:NameDisplay,Arial,sans-serif;font-weight:800;font-size:clamp(52px,5.5vw,78px);line-height:1.08;letter-spacing:-3.8px;margin:23px 0 22px}
.herocopy h1 em{font-style:normal;font-weight:800;color:var(--brand)}
.herocopy>p{font-size:15px;color:var(--brand-muted);line-height:1.85;margin:0 0 25px}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 28px}
.brand-primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--brand);border:1px solid var(--brand);color:white;border-radius:10px;padding:13px 18px;font-size:14px;font-weight:600;box-shadow:0 4px 10px #505acb15;transition:background .15s,transform .15s}
.brand-primary:hover{background:var(--brand-dark);transform:translateY(-1px)}
.brand-primary span{font-size:20px;line-height:1}
.brand-secondary{font-size:14px;font-weight:500;color:var(--brand-muted);padding:10px 0;display:inline-flex;gap:13px;align-items:center}
.brand-secondary:hover{color:var(--brand)}
.herosearch{max-width:460px;border-color:#d7ddec;border-radius:11px;box-shadow:none}
.searchbox>button{background:var(--brand);border-radius:7px}
.herovisual{background:#eef1ff;border:1px solid #dde3fa;transform:none;border-radius:25px;padding:30px 30px 27px;min-height:365px;box-shadow:0 15px 45px #343d7a06}
.visualheading{justify-content:space-between;font-size:14px;letter-spacing:1px;border-bottom:1px solid #d9e0f8;padding-bottom:15px;color:#65709d}
.little-dot{background:#8d99db}
.visualtitle{font:700 27px/1.4 NameDisplay,Arial,sans-serif;text-align:left;letter-spacing:-.7px;margin:24px 0 7px}
.visualtitle i{font-style:normal;color:var(--brand)}
.herochart{height:165px}
.floatingnote{transform:none;bottom:-48px;right:20px;border-color:#d8dff5;padding:12px 17px;border-radius:12px;box-shadow:0 6px 15px #24243f08}
.floatingnote>span{background:#eef1ff;border-radius:9px;color:var(--brand)}
.floatingnote strong{font-family:NameDisplay,Arial,sans-serif;font-weight:700;font-size:17px}
.floatingnote small{font-size:14px}
.databar{background:#f0f3fc;border-color:#e1e6f3}
.sectionheading h2{font-weight:700;font-size:37px;letter-spacing:-1.4px;line-height:1.25}
.sectionheading h2 em{font-style:normal;color:var(--brand);font-weight:700}
.sectionheading .eyebrow{color:var(--brand);font-size:14px;letter-spacing:1.5px}
.panel{border-radius:15px}
.segmented{background:#eef1f9;padding:4px;border-radius:9px}
.segmented button{font-size:14px;border-radius:6px}
.segmented button[aria-pressed=true]{color:var(--brand);font-weight:600}
.trendsection,.storiessection{background:#eef2fd;border-color:#e0e5f4}
.findername,.nicknametitle,.storycard h3,.regioncard strong,.mapdetails h3,.nameheading h2,.classintro h3,.ideapresets strong,.sourcecard h3,.insight h3{font-family:NameDisplay,Arial,sans-serif;font-weight:700;font-style:normal;letter-spacing:-1px}
.findername{font-size:29px}.nicknametitle{font-size:30px}.storycard h3{font-size:28px}
.findername em{font-style:normal}
.findergrid .findercard,.nicknamecard,.storycard{border-radius:13px}
.nicknamechips button{border-radius:7px}
.inspirationtabs button[aria-selected=true]{border-color:var(--brand);color:var(--brand)}
.solidbutton{background:var(--brand);color:white}
.rankfullname{font-size:15px;font-weight:600}
.rankingtable .ranknamebutton{padding-left:17px;gap:7px}
.nameheading h2{font-size:46px}.nameheading .origin{font-size:14px}
.footer{padding-top:30px;padding-bottom:30px}
.footer>span{font:500 14px 'DM Sans',Arial,sans-serif;color:var(--brand-muted)}
.footer .brand-symbol{width:34px;height:40px}.footer .brand-words strong{font-size:23px}
.brand-loader{display:block;width:28px;height:28px;border:3px solid #dce2ff;border-top-color:var(--brand);border-radius:50%;animation:brand-spin 1s linear infinite}
@keyframes brand-spin{to{transform:rotate(360deg)}}
/* Matching uses the same type, palette and logo while keeping vote colours semantic. */
.match-header{padding:22px 0;border-color:var(--brand-border)}
.match-brand{font-family:NameDisplay,Arial,sans-serif;font-weight:700}
.match-brand .brand-words>span{color:var(--brand-ink)}
.match-intro{padding-top:52px}.match-intro h1{font-size:64px;font-weight:800;letter-spacing:-3px;line-height:1.15}
.match-intro h1 em,.match-room-heading h1 em,.match-start-box h2 em,.match-results h2 em,.match-finalists h2 em{color:var(--brand);font-style:normal;font-weight:700}
.match-room-heading h1{font-size:47px;font-weight:700;letter-spacing:-1.8px;line-height:1.25}
.match-start-box,.match-room-side,.match-invite,.match-stats{border-radius:15px}
.match-start-box h2,.match-results h2,.match-finalists>h2{font-family:NameDisplay,Arial,sans-serif;font-weight:700;font-size:35px;letter-spacing:-1.2px}
.match-primary{background:var(--brand);border-radius:9px;color:white}.match-primary:hover{background:var(--brand-dark)}
.match-gender button[aria-pressed=true]{background:#eef1ff;border-color:#a5b0ec;color:var(--brand)}
.match-mini-card{background:#edf1ff;border-color:#d7dff6;border-radius:22px;transform:rotate(3deg)}
.match-mini-card strong{font-family:NameDisplay,Arial,sans-serif;font-weight:700;color:var(--brand-ink)}
.match-tabs>button[aria-current=page]{color:var(--brand);border-color:var(--brand);font-weight:600}
.match-name-card{border-radius:22px;background:#fff;border-color:#dfe3f0}
.match-name-card h2{font-family:NameDisplay,Arial,sans-serif;font-weight:700;font-style:normal;letter-spacing:-2px}
.match-room-side{background:#edf1fc;border-color:#dfe5f5}
.match-room-side h3,.match-stats-grid strong,.final-item-name h3,.match-result-list h3{font-family:NameDisplay,Arial,sans-serif;font-weight:700;font-style:normal}
.match-stats{background:#edf1ff;border-color:#dce2f7}
.match-stats-grid>div{border-color:#d7def5}
.match-stats dd{color:var(--brand)}
.match-pin[aria-pressed=true]{background:#eef1ff;color:var(--brand);border-color:#aab5ed}
.final-order-buttons button{color:var(--brand);background:#f3f5ff}
.final-list>li.final-drop-before{border-top-color:var(--brand)}
.final-comments article{background:#f3f5fc;border-color:#e4e8f6}
.match-stats>p,.match-stats-grid span,.match-return-panel>p,.match-return-panel>small,.match-finalists>.final-list-note{color:#64687c}
.final-comments time,.final-comments strong small,.final-comment-form>div>span{color:#6c7083}
.match-footer{font-size:14px}
@media(max-width:1100px){.nav{padding-left:28px;padding-right:28px;gap:24px}.nav nav{gap:16px;font-size:14px}.navsource{display:none}.hero{gap:40px}.herocopy h1{font-size:64px}.hero-actions{gap:15px}.brand-primary{padding:12px 15px;gap:15px}.brand-secondary{font-size:14px}}
@media(max-width:760px){.nav{padding:16px 22px;gap:16px;flex-wrap:wrap}.nav>.brand{margin-right:auto}.brand-symbol{width:35px;height:40px}.brand-words>span{font-size:14px}.brand-words strong{font-size:24px}.brand-words small{font-size:14px}.navsource{display:none}.nav nav{width:100%;order:3;margin:0;gap:22px;font-size:14px;overflow:auto;padding:10px 0 2px;scrollbar-width:none;white-space:nowrap}.hero{padding-top:38px;padding-bottom:53px;gap:36px}.herocopy h1{font-size:57px;letter-spacing:-2.8px;margin-top:19px;margin-bottom:20px}.herocopy .eyebrow{font-size:14px;letter-spacing:1.1px}.herocopy>p{font-size:14px;margin-bottom:23px}.hero-actions{gap:17px;margin-bottom:24px}.brand-primary{padding:12px 15px;font-size:14px;gap:16px}.brand-secondary{font-size:14px}.herovisual{padding:24px 22px;min-height:325px;border-radius:20px}.visualtitle{font-size:25px}.visualheading{font-size:14px}.herochart{height:145px}.floatingnote{bottom:-40px;right:15px;padding:10px 14px}.floatingnote small{font-size:14px}.sectionheading h2{font-size:29px;line-height:1.28;letter-spacing:-1px}.sectionheading .eyebrow{font-size:14px}.sectionheading>p{font-size:14px}.findername{font-size:27px}.nicknametitle{font-size:27px}.storycard h3{font-size:25px}.ideapresets strong{font-size:23px}.mapdetails h3{font-size:33px}.nameheading h2{font-size:35px}.footer>.brand{width:auto}.footer>span{font-size:14px}.match-app{padding-left:20px;padding-right:20px}.match-header{padding:17px 0}.back-atlas{font-size:14px}.match-intro{padding-top:36px}.match-intro h1{font-size:43px;letter-spacing:-2px;line-height:1.16}.match-intro>p{font-size:14px}.match-room-heading h1{font-size:34px;letter-spacing:-1.5px}.match-start-box{padding:24px 21px}.match-start-box h2,.match-results h2,.match-finalists>h2{font-size:29px}.match-tabs{gap:13px}.match-tabs>button{font-size:14px}.match-name-card h2{font-size:46px}.match-stats-grid strong{font-size:31px}.final-item-name h3{font-size:27px}.match-footer{font-size:14px}.match-return-panel>input{font-size:14px}}
@media(prefers-reduced-motion:reduce){.brand-loader{animation:none}.brand-primary{transition:none}.brand-primary:hover{transform:none}}

dialog::backdrop{background:#22274366}.brand:focus-visible,.brand-primary:focus-visible,.brand-secondary:focus-visible{outline:3px solid #505acb;outline-offset:4px}

.vote-yes,.match-stamp.yes{color:#237b63}.match-vote-actions .vote-yes>span{background:#e9f6f0;border-color:#badbcc}.vote-no,.match-stamp.no{color:#b24e5e}.match-vote-actions .vote-no>span{border-color:#e9c8cf}.match-stamp{background:#ffffffed}
