/* Profile, shared player identity and private presentation use separate scopes. */
.profile-v2 { gap: var(--page-gap); }
.profile-v2 > .flash { margin: 0; }
.profile-v2 > *, .profile-v2 form, .profile-v2 section, .profile-v2 article { min-width: 0; }
.profile-v2 h1, .profile-v2 h2, .profile-v2 h3 { margin: 0; }
.profile-v2 h1 { font: 500 clamp(32px, 4vw, 48px)/1.08 var(--serif); letter-spacing: -.035em; }
.profile-v2 h2 { font: 500 29px/1.16 var(--serif); letter-spacing: -.025em; }
.profile-v2 p { line-height: 1.6; }
.profile-v2 .eyebrow { font-size: 9px; letter-spacing: .13em; }
.profile-tabs { display: flex; gap: 7px; }
.profile-tabs a { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 7px; font-size: 13px; font-weight: 700; color: #65766b; }
.profile-tabs a[aria-current] { color: #fcf7e9; background: #214c40; }
.profile-tabs small { padding: 2px 5px; border-radius: 5px; background: #788d6e25; font-size: 10px; }
.profile-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0; }
.profile-heading .eyebrow { margin-bottom: 13px; }
.profile-heading p { max-width: 570px; margin: 12px 0 0; color: #617365; font-size: 14px; }
.text-link { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 0; border: 0; color: #386650; background: transparent; font-size: 12px; font-weight: 750; text-align: left; cursor: pointer; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.profile-v2 .profile-hero-v2 { grid-template-columns: 1.12fr 1fr; align-items: stretch; gap: 0; padding: 0; border-radius: 18px; }
.experience-card { padding: 30px; }
.experience-title { display: flex; align-items: center; gap: 16px; margin: 18px 0 12px; }
.experience-title small { display: block; margin-bottom: 4px; color: #667864; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.level-seal { display: grid; flex-shrink: 0; width: 58px; height: 64px; place-items: center; border: 1px solid #c7bb8b; border-radius: 13px 13px 22px 22px; color: #67522c; background: linear-gradient(135deg, #f7eed2, #e8dbad); box-shadow: inset 0 0 0 4px #fdf8e680; font: 32px var(--serif); }
.profile-hero-v2 .experience-card > p { color: #5c6d5f; font-size: 12px; line-height: 1.6; }
.xp-track { height: 7px; overflow: hidden; margin-top: 22px; border-radius: 10px; background: #e0e4d5; }
.xp-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #476e52, #8ea76e); }
.xp-caption { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; color: #617461; font-size: 10px; }
.xp-caption strong { color: #264a38; white-space: nowrap; }
.next-unlock { display: flex; align-items: center; gap: 12px; margin-top: 23px; padding-top: 17px; border-top: 1px solid #d9dece; }
.next-unlock > span { color: #aa8036; font-size: 30px; }
.next-unlock p small, .next-unlock p strong { display: block; }
.next-unlock small { color: #7b8066; font-size: 8px; letter-spacing: .08em; }
.next-unlock strong { margin-top: 4px; color: #3e5941; font-size: 12px; }
.profile-columns { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
.profile-columns.equal-columns { grid-template-columns: 1fr 1fr; }
.profile-v2 .profile-panel { padding: 26px; border-radius: 16px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-heading .eyebrow { margin-bottom: 10px; }
.section-heading > small { color: #76816c; font-size: 10px; }
.stat-total { color: #687860; font-size: 10px; white-space: nowrap; }
.stat-total b { display: block; text-align: right; color: #31523c; font: 37px var(--serif); }
.stat-modes > div + div { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.stat-modes h3 { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.stat-modes h3 small { padding: 3px 6px; border-radius: 4px; color: #6a795f; background: #ebedde; font-size: 9px; font-weight: 500; }
.stat-modes dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 0; }
.stat-modes dl > div { display: flex; flex-direction: column-reverse; }
.stat-modes dt { color: #697865; font-size: 10px; }
.stat-modes dd { margin: 0 0 3px; font: 31px var(--serif); }
.profile-v2 .quiet-copy { margin: 20px 0 0; color: #6f7968; font-size: 11px; line-height: 1.6; }
.rating-panel { background: linear-gradient(145deg, #eef0e4, #f8f4e8); }
.rating-symbol { display: block; margin: 20px 0 10px; color: #8e9c7e; font-size: 47px; }
.rating-panel p { color: #63725e; font-size: 12px; }
.rating-panel > small { color: #78806b; font-size: 10px; }
.soft-badge { display: inline-block; width: fit-content; padding: 6px 9px; border: 1px solid #d7d9bf; border-radius: 6px; color: #6a6a49; background: #f0efd9; font-size: 10px; font-weight: 650; }
.rating-panel .soft-badge { margin-top: 13px; }
.collection-count { font: 37px var(--serif); white-space: nowrap; color: #47614b; }
.collection-count small { color: #8b947c; font: 14px var(--sans); }
.medal-shelf { display: flex; min-height: 180px; align-items: flex-start; justify-content: space-around; gap: 14px; padding: 20px 0; }
.medal-shelf > div { display: flex; flex: 1; flex-direction: column; align-items: center; text-align: center; }
.medal-shelf strong { max-width: 145px; margin-top: 15px; font-size: 11px; line-height: 1.45; }
.medal-shelf p { margin: 9px 0 0; color: #77846a; font-size: 12px; }
.achievement-medal { display: grid; width: 62px; height: 67px; flex-shrink: 0; place-items: center; border: 1px solid #bd9d56; border-radius: 19px 19px 25px 25px; color: #6e4f1b; background: radial-gradient(circle at 30% 20%, #fff4cc, #e7c878 72%, #c5a24d); box-shadow: inset 0 0 0 4px #f5e4b4, 0 5px 12px #73542118; font: 26px var(--serif); }
.achievement-medal.is-locked { color: #8a9380; border-color: #d5d9cb; background: #e9ecdf; box-shadow: inset 0 0 0 4px #f3f4ec; }
.personal-record-section { overflow: hidden; }
.personal-record-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.personal-record-card { display: flex; min-height: 235px; flex-direction: column; padding: 18px; border: 1px solid #d8dccd; border-radius: 13px; background: linear-gradient(145deg, #fffdf5, #f6f4e8); }
.personal-record-card.is-empty { color: #71806d; background: #eff1e7; }
.personal-record-heading { display: flex; align-items: center; gap: 11px; }
.personal-record-heading > span { display: grid; width: 38px; height: 42px; flex: 0 0 38px; place-items: center; border: 1px solid #c8ad71; border-radius: 10px 10px 14px 14px; color: #725a27; background: #f1dfae; font: 20px var(--serif); }
.personal-record-card.is-empty .personal-record-heading > span { color: #879080; border-color: #d1d6c9; background: #e3e7dc; }
.personal-record-heading small { display: block; margin-bottom: 4px; color: #74806b; font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.personal-record-heading h3 { font: 500 17px/1.2 var(--serif); }
.personal-record-value { margin: 22px 0 8px; color: #294d39; line-height: 1; }
.personal-record-value strong { font: 43px/1 var(--serif); }
.personal-record-value span { color: #687860; font-size: 10px; }
.personal-record-context, .personal-record-improvement { margin: 4px 0 0; color: #6b7966; font-size: 9px; line-height: 1.5; }
.personal-record-improvement { color: #8a6b35; }
.personal-record-link { display: inline-flex; min-height: 35px; align-items: flex-end; width: fit-content; margin-top: auto; padding-top: 14px; color: #386650; font-size: 10px; font-weight: 750; }
.personal-record-card.is-empty > p { margin: 20px 0 8px; font-size: 11px; line-height: 1.55; }
.personal-record-waiting { margin-top: auto; color: #879181; font-size: 9px; line-height: 1.5; }
.panel-link { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 15px; padding-top: 13px; border-top: 1px solid var(--line); color: #315d46; font-size: 12px; font-weight: 750; }
.panel-link span { font-size: 22px; }
.style-teaser > p { color: #6a7a66; font-size: 12px; }
.profile-v2 .history-list > a { grid-template-columns: max-content minmax(0, 1fr) 16px; gap: 14px; padding-block: 14px; }
.profile-v2 .history-list > a:hover { background: #e9eddf50; }
.profile-v2 .history-list p { min-width: 0; }
.profile-v2 .history-list strong { overflow-wrap: anywhere; }
.profile-v2 .history-result { min-width: 90px; width: max-content; padding: 8px 9px; font-size: 9px; white-space: nowrap; }
.profile-footnote { margin: 7px 0 0; text-align: center; font: italic 17px var(--serif); color: #89947c; }
/* Each identity resets its variables, so one player's style cannot affect another. */
.identity-style { --avatar: #315b4a; --avatar-ink: #fffaf0; --frame: none; --frame-radius: 50%; --banner: radial-gradient(ellipse at 85% 0, #6b896340, transparent 65%), radial-gradient(circle at -10% 90%, #66806640 0 22%, transparent 22.4%), #153e32; }
.identity-style.accent_sage { --avatar: #87a789; --avatar-ink: #183e2c; }
.identity-style.accent_coral { --avatar: #d47760; --avatar-ink: #301b19; }
.identity-style.accent_lilac { --avatar: #b5a3cc; --avatar-ink: #392d4d; }
.identity-style.accent_gold { --avatar: #ddbb6b; --avatar-ink: #493616; }
.identity-style.frame_line { --frame: 0 0 0 2px #e9dfbd, 0 0 0 3px #8f9f7e; }
.identity-style.frame_first_rounds { --frame: 0 0 0 2px #fbf0cf, 0 0 0 4px #657d66, 0 0 0 6px #e5d6a8; }
.identity-style.frame_twenty { --frame: 0 0 0 3px #d1d9d8, 3px 3px 0 4px #718e87; --frame-radius: 29%; }
.identity-style.frame_regular { --frame: 0 0 0 3px #ead39a, 0 0 0 5px #92763e, 0 0 12px 7px #ecc57838; }
.identity-style.frame_veteran { --frame: 0 0 0 3px #f4dfa1, 0 0 0 5px #a38544, -7px 0 0 5px #c5a95f, 7px 0 0 5px #c5a95f; }
.identity-style.banner_dusk { --banner: radial-gradient(ellipse at 10% 0, #95728266, transparent 70%), linear-gradient(120deg, #403447, #203945); }
.identity-style.banner_regular { --banner: repeating-radial-gradient(ellipse at 110% 0, transparent 0 30px, #e0c77e30 32px 33px, transparent 35px 60px), linear-gradient(110deg, #4d4930, #8d6538); }
.identity-style.banner_geometric { --banner: repeating-linear-gradient(45deg, transparent 0 38px, #a7bf8d25 39px 78px), repeating-linear-gradient(-45deg, transparent 0 38px, #a7bf8d25 39px 78px), #234c3a; }
.identity-style.banner_veteran { --banner: radial-gradient(circle at 20% 25%, #d5bc7b 0 1px, transparent 2px), radial-gradient(circle at 80% 35%, #d5bc7b 0 1px, transparent 2px), radial-gradient(circle at 50% 70%, #d5bc7b 0 1px, transparent 2px), linear-gradient(125deg, #192e2a, #172027); }
.identity-avatar, .identity-style .player-avatar { display: grid; flex-shrink: 0; place-items: center; color: var(--avatar-ink); border-radius: var(--frame-radius); background: var(--avatar); box-shadow: var(--frame); }
.identity-avatar { width: 64px; height: 64px; font: italic 32px var(--serif); }
/* The header reuses the player's saved identity, without private table styles. */
.nav-account { display: inline-flex; min-width: 0; min-height: 52px; align-items: center; gap: 14px; padding: 9px 15px 9px 12px; border: 1px solid #ffffff24; border-radius: 13px; color: #fff7df; background: var(--banner); box-shadow: inset 0 0 0 1px #ffffff06, 0 4px 12px #173f3510; transition: border-color .18s ease, box-shadow .18s ease; }
.nav-account:hover { border-color: #abbd91; box-shadow: inset 0 0 0 1px #ffffff0a, 0 6px 18px #173f3520; }
.nav-account .nav-account-avatar { width: 30px; height: 30px; font-size: 20px; }
.nav-account-avatar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nav-account-copy { display: grid; min-width: 0; gap: 3px; }
.nav-account-copy small { color: #d1dcc6; font-size: 8px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.nav-account-copy strong { max-width: 170px; overflow: hidden; font-size: 12px; line-height: 1.3; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-arrow { margin-left: 5px; color: #e4d2a4; font-size: 18px; }
.nav-account.nav-account-compact { width: 38px; min-height: 38px; justify-content: center; padding: 0; border-radius: 10px; }
.nav-account-compact .nav-account-avatar { width: 24px; height: 24px; font-size: 17px; }
.site-nav :is(a, button):focus-visible, .nav-account:focus-visible { outline: 3px solid #b87d36; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .nav-account { transition: none; } }
.identity-card { display: flex; min-height: 245px; flex-direction: column; justify-content: space-between; gap: 27px; overflow: hidden; padding: 25px; border: 1px solid #ffffff18; border-radius: 15px; color: #fff7df; background: var(--banner); box-shadow: inset 0 0 0 6px #ffffff04; }
.profile-hero-v2 > .identity-card { margin: 12px; border-radius: 12px; }
.identity-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #e2e7ccbb; font-size: 8px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
.identity-card-top > span:last-child { color: #e9d197; font-size: 21px; }
.identity-main { display: flex; align-items: center; gap: 24px; padding: 18px 0; }
.identity-main > div { min-width: 0; }
.identity-main strong { display: block; overflow-wrap: anywhere; font: 500 clamp(27px, 3vw, 38px)/1.13 var(--serif); letter-spacing: -.03em; }
.identity-main div > span { display: block; margin-top: 8px; color: #e2e7c9; font-size: 11px; }
.identity-card-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; border-top: 1px solid #d4dfb62b; font-size: 10px; color: #e7ebd4; }
.identity-medals { display: flex; gap: 7px; }
.identity-medals > span { display: grid; width: 25px; height: 27px; place-items: center; color: #e9d7a2; border: 1px solid #d4bb7466; border-radius: 7px 7px 10px 10px; background: #dfbf6914; font-size: 12px; }
.identity-medals small { font: italic 12px var(--serif); color: #c3cdb3; }
.showcase-settings { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; }
.showcase-settings .eyebrow { margin-bottom: 10px; }
.showcase-settings p { margin-bottom: 0; color: #677561; font-size: 12px; }
.share-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid #d7dec8; border-radius: 10px; background: #edf0e2; cursor: pointer; }
.share-toggle input, .featured-choice input { flex-shrink: 0; width: 19px; height: 19px; accent-color: #3b6749; }
.share-toggle strong { display: block; font-size: 12px; line-height: 1.5; }
.share-toggle small { display: block; margin-top: 6px; color: #63735b; font-size: 11px; line-height: 1.6; }
.collection-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0; }
.collection-toolbar > span { color: #76816d; font-size: 11px; }
.collection-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.collection-filters button { min-height: 40px; padding: 8px 12px; border: 1px solid #d9ddcd; border-radius: 7px; background: transparent; font-size: 11px; cursor: pointer; }
.collection-filters [aria-pressed="true"] { border-color: #3e624c; color: #fffbe9; background: #3e624c; }
.achievement-category { margin: 29px 0; }
.achievement-category > h2 { margin-bottom: 15px; font-size: 23px; }
.achievement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.achievement-card { display: flex; flex-direction: column; padding: 23px; border: 1px solid #d4d9c7; border-radius: 14px; background: #fffdf5; }
.achievement-card.is-locked { background: #f0f0e5; }
.achievement-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 23px; }
.achievement-state { color: #69815a; font-size: 9px; }
.achievement-card h3 { font: 500 22px/1.2 var(--serif); }
.achievement-card > p { flex: 1; margin: 10px 0 20px; color: #63725d; font-size: 12px; }
.earned-date { color: #7e8469; font-size: 9px; }
.featured-choice { display: flex; min-height: 44px; align-items: center; gap: 9px; margin-top: 13px; border-top: 1px solid #e0e3d4; font-size: 11px; cursor: pointer; }
.achievement-card:has(input:checked) { border-color: #7a9762; box-shadow: 0 0 0 2px #91a87033; }
.achievement-card .featured-error { flex: initial; margin: 6px 0 0; color: #8b503a; font-size: 11px; }
.achievement-progress { display: flex; align-items: center; gap: 12px; color: #708064; font-size: 10px; }
.achievement-progress progress { width: 100%; min-width: 0; height: 6px; accent-color: #77915d; border: 0; border-radius: 8px; background: #dce1d0; }
progress::-webkit-progress-bar { background: #dce1d0; border-radius: 8px; }
progress::-webkit-progress-value { border-radius: 8px; background: #77915d; }
progress::-moz-progress-bar { background: #77915d; border-radius: 8px; }
.achievement-progress span { flex-shrink: 0; }
.profile-save-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.profile-save-row > p { max-width: 500px; color: #6a7963; font-size: 12px; }
.profile-save-row .button { flex-shrink: 0; font-size: 12px; }
.style-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.style-preview-grid section > .eyebrow { margin: 0 0 12px; color: #617458; }
.style-preview-grid .identity-card, .style-preview-grid .table-preview { height: 260px; }
.preview-notice { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 13px 0 28px; color: #677a5f; font-size: 11px; }
.group-preview-link { margin-top: 6px; font-size: 11px; }
.style-preview-dialog { width: min(500px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 20px; border: 1px solid #d7dcc8; border-radius: 16px; color: var(--ink); background: var(--cream); box-shadow: 0 24px 100px #0c26164d; }
.style-preview-dialog::backdrop { background: #0f2c255e; backdrop-filter: blur(3px); }
.style-preview-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.style-preview-dialog h2 { margin: 0; font: 25px var(--serif); }
.style-preview-dialog header button { width: 44px; height: 44px; border: 1px solid #d8ddcd; border-radius: 50%; background: #e9eddf; font-size: 24px; cursor: pointer; }
.style-preview-dialog > p { margin: 18px 0 0; color: #64745d; font-size: 12px; line-height: 1.6; }
.style-preview-dialog .table-preview { min-height: 225px; }
body:has(.style-preview-dialog[open]) { overflow: hidden; }
.style-section { margin-top: 36px; }
.style-section .section-heading p { color: #63765d; font-size: 12px; }
.style-group { min-width: 0; margin: 22px 0; padding: 0; border: 0; }
.style-group legend { margin-bottom: 12px; padding: 0; font-size: 13px; font-weight: 750; }
.style-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.style-option-wrap { display: flex; min-width: 0; flex-direction: column; }
.style-option { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 213px; overflow: hidden; border: 1px solid #d8ddcb; border-radius: 12px; background: #fffdf4; cursor: pointer; }
.style-option:has(input:checked) { border-color: #5f804f; box-shadow: 0 0 0 2px #78955a3b; }
.style-option:has(input:focus-visible) { outline: 3px solid #d68d64; outline-offset: 4px; }
.style-option.is-locked { cursor: default; background: #f0f1e7; }
.style-option input { position: absolute; z-index: 1; top: 12px; right: 12px; width: 18px; height: 18px; margin: 0; accent-color: #3f6448; }
.style-option-copy { display: block; flex: 1; padding: 14px 14px 8px; }
.style-option-copy strong, .style-option-copy small { display: block; }
.style-option-copy strong { font-size: 12px; }
.style-option-copy small { margin-top: 6px; color: #6a775e; font-size: 10px; line-height: 1.5; }
.style-availability { padding: 4px 14px 13px; color: #5f794c; font-size: 9px; font-weight: 700; }
.is-locked .style-availability { color: #8c744a; }
.locked-preview { min-height: 40px; margin-top: 4px; border: 0; color: #727557; background: transparent; font-size: 11px; cursor: pointer; }
.style-swatch { display: grid; height: 90px; flex-shrink: 0; place-items: center; background: #e6e9d9; }
.style-swatch .identity-avatar { width: 42px; height: 42px; font-size: 24px; }
.swatch-banner { background: var(--banner); }
.swatch-table { background: var(--felt); }
.swatch-rack { background: repeating-linear-gradient(3deg, transparent 0 7px, #ffffff0d 8px 9px), linear-gradient(135deg, var(--wood-top), var(--wood-bottom)); }
.swatch-stone { display: grid; width: 52px; height: 68px; align-content: center; text-align: center; border: 1px solid #a7a990; border-radius: 7px; color: var(--stone-coral); background: linear-gradient(135deg, var(--stone-top), var(--stone-bottom)); font: var(--stone-weight) 29px var(--stone-font); box-shadow: 0 3px 0 #57614b44; }
.swatch-stone small { margin-top: 4px; font: 8px var(--sans); letter-spacing: 1px; }
.swatch-title > span { font: italic 35px var(--serif); color: #5b7454; }
.swatch-finish { background: #23483a; color: #d9c98e; font-size: 35px; }
.finish_quiet_spark .finish-preview, .preview-spark .preview-caption { animation: style-spark 2.4s ease-in-out infinite; }
.finish_none .winner-spark { animation: none; }
@keyframes style-spark { 50% { text-shadow: 0 0 18px #ffd99c, 0 0 6px #fff1c9; } }
/* Private materials. The same variables paint the actual game and all previews. */
.game-page, .personal-style { --felt: radial-gradient(ellipse at 50% 20%, #2c6659, #1d5046 48%, #17453d); --wood-top: #a47c5a; --wood-bottom: #725743; --stone-top: #fffdf4; --stone-mid: #f5eedc; --stone-bottom: #ded2b7; --stone-edge: #d6cbb3; --stone-font: var(--serif); --stone-weight: 650; --stone-coral: #bb4939; --stone-blue: #286ba3; --stone-gold: #986800; --stone-ink: #263b38; }
.table_moonlight { --felt: radial-gradient(ellipse at 50% 20%, #3b6175, #294856 52%, #17323b); }
.table_sandstone { --felt: radial-gradient(ellipse at 50% 20%, #d6cba8, #b6b290 52%, #939a78); }
.table_veteran { --felt: radial-gradient(ellipse at 50% 20%, #3c4832, #1e3429 52%, #11251f); }
.rack_birch { --wood-top: #e7cf9b; --wood-bottom: #b5a072; }
.rack_ebony { --wood-top: #575951; --wood-bottom: #272f2b; }
.rack_warm_wood { --wood-top: #b87e57; --wood-bottom: #76482f; }
.tiles_porcelain { --stone-top: #fff; --stone-mid: #f0f5f9; --stone-bottom: #c9dbe6; --stone-edge: #b4c6d2; --stone-font: var(--sans); --stone-weight: 600; }
.tiles_slate { --stone-top: #475b60; --stone-mid: #30454b; --stone-bottom: #1c3138; --stone-edge: #667a80; --stone-coral: #ffa68d; --stone-blue: #9cdbff; --stone-gold: #ffe396; --stone-ink: #f3f2e8; --stone-font: var(--sans); --stone-weight: 650; }
.tiles_contrast { --stone-top: #fff; --stone-mid: #fff; --stone-bottom: #fff; --stone-edge: #253b32; --stone-font: var(--sans); --stone-weight: 800; --stone-coral: #ad342b; --stone-blue: #185893; --stone-gold: #805600; --stone-ink: #14251c; }
.palette_accessible { --stone-coral: #82469e; --stone-blue: #006393; --stone-gold: #ac4e00; --stone-ink: #172c2b; }
.tiles_slate.palette_accessible { --stone-coral: #e0baff; --stone-blue: #9cdbff; --stone-gold: #ffd094; --stone-ink: #f3f2e8; }
.game-page .table-surface, .game-page .focus-felt { background: var(--felt) !important; }
.game-page .rack { border-bottom-color: var(--wood-bottom) !important; background: linear-gradient(to bottom, transparent 82%, var(--wood-top) 82%, var(--wood-bottom) 100%) !important; }
.table-preview { position: relative; display: flex; min-height: 188px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 28px 20px 22px; border-radius: 13px; background: var(--felt); box-shadow: inset 0 5px 24px #092f291c; }
.preview-caption { color: #e2edd2bc; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.preview-rack { position: relative; z-index: 1; display: flex; justify-content: center; gap: 3px; width: 100%; margin-top: 25px; }
.preview-rack .preview-stone { width: min(16%, 51px); height: auto; aspect-ratio: 72/100; margin: 0; pointer-events: none; }
.preview-wood { width: 96%; height: 18px; margin-top: -3px; border-bottom: 7px solid var(--wood-bottom); border-radius: 3px 3px 8px 8px; background: repeating-linear-gradient(2deg, transparent 0 5px, #ffffff0c 6px 7px), var(--wood-top); }
:is(.game-page, .personal-style) .tile stop:first-child { stop-color: var(--stone-top); }
:is(.game-page, .personal-style) .tile stop:nth-child(2) { stop-color: var(--stone-mid); }
:is(.game-page, .personal-style) .tile stop:last-child { stop-color: var(--stone-bottom); }
:is(.game-page, .personal-style) .tile-edge { stroke: var(--stone-edge); }
:is(.game-page, .personal-style) .tile-number { font-family: var(--stone-font); font-weight: var(--stone-weight); }
:is(.game-page, .personal-style) .tile-coral :is(.tile-number, .tile-symbol), :is(.game-page, .personal-style) .tile-joker .tile-number { fill: var(--stone-coral); }
:is(.game-page, .personal-style) .tile-blue :is(.tile-number, .tile-symbol) { fill: var(--stone-blue); }
:is(.game-page, .personal-style) .tile-gold :is(.tile-number, .tile-symbol) { fill: var(--stone-gold); }
:is(.game-page, .personal-style) .tile-ink :is(.tile-number, .tile-symbol), :is(.game-page, .personal-style) .tile-joker .tile-symbol { fill: var(--stone-ink); }
.tiles_contrast .tile-shine { display: none; }
.tiles_contrast .tile-edge { stroke-width: 1.2px; }
.game-page .overview-tiles i { background: linear-gradient(135deg, var(--stone-top), var(--stone-bottom)); font-family: var(--stone-font); }
.game-page .preview-coral, .game-page .preview-joker { color: var(--stone-coral); }
.game-page .preview-blue { color: var(--stone-blue); }
.game-page .preview-gold { color: var(--stone-gold); }
.game-page .preview-ink { color: var(--stone-ink); }
.table_sandstone :is(.table-heading, .table-heading h2, .table-heading > span, .meld-label, .meld-label button, .meld-label small, .new-meld-zone, .empty-table, .empty-table p, .preview-caption) { color: #253e2b; }
.table_sandstone .meld-add { color: #2f4d31; border-color: #3d5c4a70; }
.table_sandstone .table-surface.has-selection .meld-add { color: #183826; border-color: #335d40; background: #ffffff33; }
.table_sandstone .new-meld-zone { border-color: #3d5c4a70; }
.table_sandstone :is(.table-caption, .table-caption span, .table-caption small, .table-overview-button) { color: #263d2c; }
.table_sandstone .table-overview-button { border-color: #46604770; background: #ffffff30; }
.game-page .table-surface, .game-page .focus-felt { --scroll-edge: #21574b; }
.table_moonlight :is(.table-surface, .focus-felt) { --scroll-edge: #294856; }
.table_sandstone :is(.table-surface, .focus-felt) { --scroll-edge: #b6b290; }
.table_veteran :is(.table-surface, .focus-felt) { --scroll-edge: #1e3429; }
/* Cards stay inside the game dialog; player buttons never navigate away. */
button.player-chip { border: 0; padding: 4px 0; border-radius: 4px; background: transparent; text-align: left; cursor: pointer; opacity: 1; }
button.player-chip:not(.is-active) strong { color: #617268; }
button.player-chip .player-avatar { color: var(--avatar-ink); background: var(--avatar); box-shadow: var(--frame); }
.lobby-person { display: flex; width: 100%; min-height: 48px; align-items: center; gap: 16px; padding: 5px; border: 0; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; }
.lobby-person > span:nth-child(2) { flex: 1; }
.lobby-person small { display: block; margin-top: 5px; color: #71806c; font-size: 11px; }
.game-sheet.is-player-card { width: min(460px, calc(100% - 24px)); }
.is-player-card .sheet-body { padding: 18px; }
.is-player-card .sheet-footer { display: none; }
.is-player-card .identity-card { min-height: 230px; padding: 22px; }
.is-player-card .identity-main strong { font-size: 32px; }
.player-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 16px; }
.player-card-stats b { display: block; margin-bottom: 6px; font: 27px var(--serif); }
.player-card-stats b small { color: #7e8a72; font-size: 15px; }
.player-card-stats span { display: block; color: #64765c; font-size: 10px; line-height: 1.4; }
.player-card-note { margin: 16px 0 0; color: #6e7c64; font-size: 11px; line-height: 1.6; }
.player-card-achievements { margin-top: 25px; padding-top: 19px; border-top: 1px solid #d8ddca; }
.player-card-achievements h3 { margin: 0 0 10px; font: 22px var(--serif); }
.player-card-achievements > div { display: flex; align-items: center; gap: 15px; padding: 10px 0; }
.player-card-achievements .achievement-medal { width: 43px; height: 47px; border-radius: 12px 12px 17px 17px; font-size: 20px; }
.player-card-achievements p { margin: 0; }
.player-card-achievements strong { display: block; font-size: 12px; }
.player-card-achievements small { display: block; margin-top: 5px; color: #6c7b62; font-size: 11px; line-height: 1.5; }
:is(.profile-v2, .game-sheet, .player-strip, .lobby-players) :is(a, button, input):focus-visible { outline: 3px solid #b87d36; outline-offset: 3px; }
@media (max-width: 850px) {
  .profile-columns { grid-template-columns: 1.2fr 1fr; gap: 16px; }
  .profile-v2 .profile-hero-v2 { grid-template-columns: 1fr 1fr; }
  .experience-card { padding: 24px 20px; }
  .identity-main { gap: 18px; }
  .identity-avatar { width: 54px; height: 54px; font-size: 27px; }
  .identity-card { padding: 22px; }
  .identity-level-label { display: none; }
  .achievement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personal-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .showcase-settings { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
  .profile-tabs { justify-content: space-between; gap: 2px; }
  .profile-nav .nav-actions { gap: 14px; }
  .profile-nav .nav-logout { font-size: 11px; }
  .nav-account { min-height: 46px; gap: 10px; padding: 7px 10px; border-radius: 11px; }
  .nav-account .nav-account-avatar { width: 28px; height: 28px; font-size: 18px; }
  .nav-account-copy small, .nav-account-arrow { display: none; }
  .nav-account-copy strong { max-width: 96px; font-size: 11px; }
  .nav-account-compact .nav-account-avatar { width: 22px; height: 22px; font-size: 16px; }
  .profile-tabs a { padding-inline: 13px; font-size: 12px; }
  .profile-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .profile-heading h1 { font-size: 34px; }
  .profile-heading > .text-link { min-height: 36px; }
  .profile-v2 .profile-hero-v2 { grid-template-columns: 1fr; gap: 0; }
  .profile-hero-v2 > .identity-card { min-height: 220px; margin: 8px; }
  .identity-main { padding-block: 10px; }
  .identity-main strong { font-size: 34px; }
  .identity-level-label { display: inline; }
  .identity-card-bottom { font-size: 9px; }
  .experience-card { padding: 24px 23px; }
  .experience-card h2 { font-size: 27px; }
  .profile-columns, .profile-columns.equal-columns, .style-preview-grid { grid-template-columns: 1fr; gap: 18px; }
  .profile-v2 .profile-panel { padding: 22px; }
  .profile-v2 .profile-panel h2 { font-size: 27px; }
  .rating-symbol { float: right; margin: 10px 0 0 16px; }
  .rating-panel .eyebrow { display: flex; margin-bottom: 13px; }
  .section-heading { gap: 10px; }
  .section-heading .eyebrow { font-size: 8px; }
  .profile-v2 .history-list > a { gap: 10px; padding-inline: 0; }
  .profile-v2 .history-result { min-width: 84px; padding-inline: 7px; font-size: 8px; }
  .profile-v2 .history-list strong { font-size: 11px; }
  .profile-v2 .profile-history { padding-inline: 18px; }
  .profile-history .section-heading { align-items: flex-start; flex-direction: column; }
  .medal-shelf { min-height: 160px; gap: 9px; }
  .achievement-grid { gap: 12px; }
  .personal-record-grid { grid-template-columns: 1fr; }
  .personal-record-card { min-height: 210px; }
  .achievement-category.has-single-card .achievement-grid { grid-template-columns: 1fr; }
  .achievement-card { padding: 16px; }
  .achievement-card-top { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 16px; }
  .achievement-card h3 { font-size: 21px; }
  .achievement-card > p { font-size: 11px; }
  .featured-choice { align-items: flex-start; padding-top: 12px; font-size: 10px; line-height: 1.5; }
  .featured-choice input { margin: 0; }
  .earned-date { line-height: 1.6; }
  .profile-save-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .profile-save-row .button { width: 100%; min-height: 48px; }
  .style-preview-grid .identity-card { height: auto; min-height: 225px; }
  .style-preview-grid .table-preview { height: 200px; }
  .style-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .style-option-copy { padding-inline: 12px; }
  .style-availability { padding-inline: 12px; }
  .preview-notice { align-items: flex-start; font-size: 11px; line-height: 1.5; }
  .preview-notice .text-link { max-width: 90px; flex-shrink: 0; font-size: 10px; }
  .is-player-card .sheet-body { padding: 13px; }
  .game-sheet.is-player-card { width: 100%; }
  .is-player-card .identity-card { padding: 20px; }
}
@media (max-width: 380px) {
  .profile-nav .nav-account-copy { display: none; }
}
@media (max-width: 360px) {
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement-card-top { flex-direction: row; align-items: center; }
  .identity-main { gap: 16px; }
  .identity-main strong { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .finish_quiet_spark .finish-preview, .preview-spark .preview-caption { animation: none; }
}
.settings-intro { margin: 28px 0; }
.settings-intro h1 { margin: 8px 0; font-family: Georgia, serif; font-size: clamp(32px, 5vw, 46px); }
.settings-intro p, .settings-panel > p { color: #60716a; line-height: 1.65; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.settings-panel { min-width: 0; padding: 26px; }
.settings-panel h2 { margin: 8px 0 16px; font-size: 24px; }
.settings-panel details { margin-top: 20px; padding-top: 16px; border-top: 1px solid #dedfd5; }
.settings-panel summary { cursor: pointer; font-weight: 650; padding-block: 6px; }
.settings-panel .account-form { margin-top: 16px; padding: 0; }
.settings-address { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.settings-badge { display: inline-block; padding: 5px 10px; border-radius: 30px; background: #f6e9cd; color: #77551f; font-size: 12px; font-weight: 650; }
.settings-badge.is-verified { background: #e3eee6; color: #225b45; }
.settings-note { color: #65736b; font-size: 13px; line-height: 1.6; }
.settings-verification { border: 1px solid #dfca94; background: #fff4d9; border-radius: 16px; padding: 20px 24px; margin-bottom: 24px; }
.settings-verification p { margin-bottom: 0; line-height: 1.6; }
.settings-qr { margin: 22px 0; }
.settings-qr img { display: block; max-width: 100%; height: auto; background: white; border-radius: 12px; }
.settings-qr code { display: block; overflow-wrap: anywhere; padding-block: 12px; }
.settings-check { display: flex !important; align-items: flex-start; gap: 12px; }
.settings-check input { width: 20px !important; height: 20px; flex: 0 0 20px; accent-color: #235449; }
.security-card { display: block; width: min(100%, 600px); margin-inline: auto; padding: 30px; }
.security-card h1 { font: 36px Georgia, serif; }
.security-card p { line-height: 1.7; }
.security-card .account-form { padding: 16px 0; }
.security-back { display: inline-block; margin-top: 24px; text-decoration: underline; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px; list-style: none; background: #f0f2ea; border-radius: 14px; }
.recovery-codes code { font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } .settings-panel { padding: 22px 18px; } .security-card { padding: 24px 18px; } .security-card h1 { font-size: 30px; } .profile-tabs { overflow-x: auto; } .profile-tabs a { white-space: nowrap; } }