.player-space { max-width: 1160px; margin: auto; padding: 38px 28px 18px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.page-heading .eyebrow { margin: 0; color: #c3c6c7; letter-spacing: .12em; font-family: var(--font-display); font-size: 10px; }
.page-heading > p:last-child { margin: 0; color: #a8adae; font-size: 12px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button[aria-busy="true"] { cursor: wait; }
.primary-button, .quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 17px; border-radius: 10px; font-size: 13px; font-weight: 600; transition: background .16s, transform .16s; }
.primary-button { border: 1px solid #c8242a; background: var(--brand-red); color: #fff; box-shadow: 0 3px 0 #a11f25; }
.primary-button:hover { background: #ca252c; transform: translateY(-1px); }
.quiet-button { color: var(--ink); border: 1px solid #d3cdc4; background: #fffaf2; box-shadow: none; }
.quiet-button:hover { background: #eae4d9; }
#notice { margin: 0 0 18px; padding: 12px 16px; border: 1px solid #485647; border-radius: 10px; background: #243127; color: #d9ecd9; font-size: 13px; white-space: pre-line; }
#notice:empty { display: none; }
#notice.is-error { border-color: #7b4346; color: #ffd1d3; background: #392125; }
.identity-card { position: relative; overflow: hidden; border: 1px solid #fff8ee; border-radius: 24px; background: var(--brand-cream); color: var(--ink); box-shadow: 0 10px 28px #0003; }
.identity-main { display: flex; align-items: center; gap: 26px; padding: 32px; }
.portrait-wrap { flex: 0 0 144px; position: relative; }
.profile-portrait { width: 144px; height: 144px; overflow: hidden; border: 5px solid #fffaf2; border-radius: 30px; background: #efe0d1; box-shadow: 0 4px 0 #e0d5c4; transform: rotate(-3deg); }
.profile-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; transform: rotate(3deg) scale(1.06); }
#avatar-fallback { display: grid; place-items: center; height: 100%; font: 80px var(--font-display); color: #ba3339; }
.portrait-star { position: absolute; right: -8px; bottom: -8px; display: grid; place-items: center; width: 40px; height: 40px; border: 4px solid var(--brand-cream); border-radius: 50%; background: var(--brand-gold); font-size: 26px; color: #775222; }
.identity-copy { min-width: 0; flex: 1; }
.member-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; color: #42614f; background: #e0e9df; font-size: 10px; font-weight: 600; }
.member-chip.is-guest { background: #e9e0d1; color: #74624b; }
h1 { margin: 10px 0 4px; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.25; font-weight: 700; letter-spacing: -.04em; overflow-wrap: anywhere; }
.identity-note { margin: 0; color: #787063; font-size: 11px; line-height: 1.8; }
#avatar-label { color: #9a8b78; }
.hero-play { align-self: center; white-space: nowrap; padding: 12px 20px; }
.rename-panel { margin-top: 4px; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:focus-visible { outline: 3px solid #bb3038; outline-offset: 4px; border-radius: 6px; }
.rename-panel > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #746859; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.connect-shortcut { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: transparent; border: none; color: #b02e35; font-size: 13px; font-weight: 600; }
.connect-shortcut:hover { color: #8c1f26; text-decoration: underline; text-underline-offset: 4px; }
#guest-upgrade p { margin: 0; color: #776b5e; font-size: 11px; }
#rename { padding: 10px 0 4px; }
#rename label { display: block; margin-bottom: 6px; font-size: 12px; }
#rename > div { display: flex; gap: 8px; flex-wrap: wrap; }
#rename input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #c9c1b5; border-radius: 9px; background: #fffcf7; color: var(--ink); font-size: 16px; }
#rename input:focus { outline: 2px solid #e42a3133; border-color: var(--brand-red); }
.identity-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 32px; border-top: 1px solid #dfd9ce; background: #eee8de; }
.player-stats { display: flex; gap: 35px; margin: 0; }
.player-stats > div { display: flex; align-items: center; gap: 12px; }
.player-stats > div + div { padding-left: 35px; border-left: 1px solid #d9d0c2; }
.player-stats dt { color: #796e5f; font-size: 11px; }
.player-stats dt .gc-icon { margin-right: 5px; }
.player-stats dd { margin: 0; font: 700 28px/1 var(--font-display); letter-spacing: -.04em; }
.identity-footer-note { display: flex; align-items: center; gap: 8px; margin: 0; color: #8c7b64; font-size: 10px; }
.identity-footer-note span { color: #aa833c; font-size: 20px; }
.profile-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 26px; }
.history-panel { overflow: hidden; color: var(--ink); border: 1px solid #fff9ee; border-radius: 20px; background: var(--brand-cream); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 26px 26px 20px; }
.section-kicker { margin: 0 0 7px; font: 600 9px var(--font-display); letter-spacing: .17em; color: #9a8a78; }
.section-heading h2 { margin: 0; font-size: 24px; line-height: 1.45; letter-spacing: -.03em; }
.section-heading p:not(.section-kicker) { margin: 4px 0 0; color: #898074; font-size: 11px; }
.section-symbol { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ded5c7; border-radius: 50%; font-size: 19px; color: #8d7a5c; }
.history-list { padding: 0 14px; }
.history-entry { border-top: 1px solid #e5ded3; border-radius: 0; }
.history-entry > summary { display: flex; align-items: center; gap: 14px; min-height: 98px; padding: 14px 12px; border-radius: 10px; }
.history-entry > summary:hover { background: #eae3d759; }
.history-cover { flex: 0 0 80px; width: 80px; height: 64px; border-radius: 12px; }
.history-cover, .next-game-cover, .empty-cover { display: grid; place-items: center; overflow: hidden; background: #e1d7c9; color: #8f7e67; }
.history-cover img, .next-game-cover img, .empty-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.history-cover > .gc-icon { font-size: 26px; }
.history-copy { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.history-copy strong { font: 600 15px/1.4 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.history-meta { color: #766c60; font-size: 11px; line-height: 1.6; }
.history-metric { display: flex; flex-direction: column; gap: 5px; text-align: right; max-width: 145px; }
.history-metric > strong { font: 700 23px/1.2 var(--font-display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.history-metric > strong small { margin-left: 5px; font: 400 10px var(--font-body); color: #8e8071; letter-spacing: 0; }
.result-label { display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: 11px; line-height: 1.6; font-weight: 400; }
.result-label.saved { color: #587060; }
.result-label.saved::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #729981; }
.result-label.pending { color: #92702c; }
.result-label.muted { color: #7e6e5c; }
.history-entry > summary > .gc-icon-chevron-down { flex: 0 0 12px; font-size: 10px; color: #ad9f8b; transition: transform .16s; }
.history-entry[open] > summary > .gc-icon-chevron-down { transform: rotate(180deg); }
.history-details { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 0 12px 14px 106px; color: #8b7e6c; font-size: 11px; }
.history-details .quiet-button { min-height: 44px; font-size: 11px; padding: 7px 12px; }
.unavailable-note { color: #9a6a63; }
.history-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 16px 26px; border-top: 1px solid #e5ded3; }
.history-footer p { margin: 0; color: #9a8b77; font-size: 10px; }
.history-footer:has(#more[hidden]):has(#history-count:empty) { display: none; }
.history-empty { text-align: center; padding: 28px 18px 40px; }
.empty-cover-stack { display: flex; align-items: center; justify-content: center; min-height: 100px; margin: 0 0 23px; }
.empty-cover { width: 84px; height: 84px; border: 4px solid #fff9ee; border-radius: 18px; box-shadow: 0 6px 15px #0002; }
.empty-cover:first-child { transform: rotate(-10deg) translateX(8px); }
.empty-cover:nth-child(2) { position: relative; z-index: 1; transform: translateY(-5px); }
.empty-cover:nth-child(3) { transform: rotate(10deg) translateX(-8px); }
.empty-cover-stack > .gc-icon { font-size: 60px; color: #ad9980; }
.history-empty h3 { margin: 0 0 6px; font-size: 22px; }
.history-empty p { color: #8a7a65; font-size: 12px; margin: 0 0 20px; }
.profile-sidebar { display: flex; flex-direction: column; gap: 20px; }
.next-games { padding: 0 20px 16px; border: 1px solid #414447; border-radius: 20px; background: #1c2024; }
.next-games .section-heading { padding: 22px 0 20px; align-items: flex-start; }
.next-games .section-heading h2 { font-size: 21px; }
.next-games .section-kicker { color: #a39c8e; }
.next-games .section-heading > .gc-icon { color: #cfc6b6; font-size: 20px; margin-top: 22px; }
.next-game-list { display: flex; flex-direction: column; gap: 14px; }
.next-game { min-width: 0; }
.next-game.featured { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.next-game-cover { border-radius: 12px; }
.next-game.featured .next-game-cover { grid-column: 1/-1; aspect-ratio: 16/10; }
.next-game.featured .next-game-cover > .gc-icon { font-size: 55px; }
.next-game-copy { align-self: center; min-width: 0; }
.next-game-copy small { font-size: 9px; color: #aaa397; }
.next-game-copy h3 { margin: 4px 0 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.next-game.featured .primary-button { align-self: center; padding: 9px 12px; min-height: 44px; font-size: 11px; gap: 8px; }
.next-game.compact { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid #373a3d; }
.next-game.compact .next-game-cover { flex: 0 0 58px; width: 58px; height: 54px; border-radius: 10px; }
.next-game.compact .next-game-copy { flex: 1; }
.next-game.compact .next-game-copy h3 { font-size: 13px; }
.game-play-icon { width: 44px; height: 44px; border: 1px solid #494c4e; border-radius: 50%; background: transparent; color: var(--brand-cream); font-size: 19px; }
.game-play-icon:hover { background: #373a3d; }
.all-games { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; color: #beb5a6; font-size: 11px; }
.all-games:hover { color: var(--brand-cream); }
.sidebar-note { padding: 10px 0; color: #cbbba4; font-size: 12px; line-height: 1.8; }
.sidebar-note a { text-decoration: underline; }
.account-settings { border: 1px solid #393d40; border-radius: 16px; background: #191d21; }
.account-settings > summary { display: flex; align-items: center; gap: 12px; padding: 20px 18px; }
.account-settings > summary > .gc-icon-person-gear { font-size: 20px; color: #bbae9a; }
.account-settings > summary > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.account-settings > summary strong { font-size: 12px; font-weight: 500; }
.account-settings > summary small { color: #a39c92; font-size: 9px; }
.account-settings > summary > .gc-icon-chevron-down { font-size: 10px; color: #8e9294; }
.account-settings[open] > summary > .gc-icon-chevron-down { transform: rotate(180deg); }
.settings-content { padding: 0 18px 18px; font-size: 11px; color: #b3aa9d; line-height: 1.8; }
#provider-info { padding-top: 16px; border-top: 1px solid #363a3e; }
#connect-google { margin-bottom: 18px; }
#connect-google h3 { color: #eee7dc; font-size: 13px; margin-bottom: 6px; }
#link-copy { margin-bottom: 12px; }
#link-google { min-width: 0; overflow: hidden; }
#google-status { margin: 10px 0 0; color: #d4b984; }
.guest-note { padding: 12px; border: 1px solid #4b4235; border-radius: 9px; color: #b7a483; background: #27231e; font-size: 10px; }
.settings-action { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 0; border: none; background: transparent; color: #d1c7b8; font-size: 12px; }
.settings-action:hover { color: #fff; }
.danger-settings { margin-top: 10px; padding-top: 10px; border-top: 1px solid #363a3e; }
.danger-settings > summary { min-height: 44px; display: flex; align-items: center; color: #908b83; font-size: 10px; }
.danger-settings p { font-size: 10px; color: #b99d98; }
.danger-settings button { min-height: 44px; padding: 8px 12px; color: #e5a4a7; border: 1px solid #724649; border-radius: 9px; background: transparent; font-size: 11px; }
.danger-settings button:hover { background: #40262b; }
.load-error { padding: 24px; text-align: center; border-radius: 16px; color: #a38570; }
.load-error > .gc-icon { font-size: 30px; }
.load-error p { font-size: 12px; margin: 10px 0 16px; }
#profile-failure { background: var(--brand-cream); }
#history-error { margin: 0 14px 12px; background: #ebe4d9; }
.profile-skeleton { display: flex; align-items: center; gap: 28px; height: 258px; padding: 32px; border-radius: 24px; background: var(--brand-cream); }
.profile-skeleton > span { display: block; width: 144px; height: 144px; border-radius: 30px; }
.profile-skeleton > div { width: 50%; }
.profile-skeleton b { display: block; width: 75%; height: 22px; border-radius: 8px; margin: 16px 0; }
.profile-skeleton b:last-child { width: 45%; height: 14px; }
.history-skeleton { padding: 0 26px 20px; }
.history-skeleton span { display: block; height: 72px; border-radius: 12px; margin: 14px 0; }
.profile-skeleton span, .profile-skeleton b, .history-skeleton span { background: linear-gradient(100deg,#e5ddd0 30%,#f0e8dc 50%,#e5ddd0 70%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 1000px) {
  .identity-main { gap: 22px; padding: 28px; }
  .profile-layout { gap: 20px; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
  .history-entry > summary { gap: 10px; }
  .history-cover { flex-basis: 64px; width: 64px; height: 64px; }
  .history-metric > strong { font-size: 21px; }
  .history-details { padding-left: 86px; }
  .next-game.featured { grid-template-columns: minmax(0, 1fr); }
  .next-game.featured .primary-button { justify-self: start; }
  .identity-footer-note { display: none; }
}
@media (max-width: 860px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .identity-main { gap: 20px; }
  .portrait-wrap { flex-basis: 108px; }
  .profile-portrait { width: 108px; height: 108px; border-radius: 25px; }
  .portrait-star { width: 34px; height: 34px; font-size: 22px; }
  h1 { font-size: 32px; }
  .next-game-list { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 22px; }
  .next-game.featured { grid-row: span 2; }
  .next-game.compact { padding-top: 0; border: none; align-self: center; }
  .next-game.featured .next-game-cover { aspect-ratio: 16/9; }
  .all-games { margin-top: 12px; }
}
@media (max-width: 560px) {
  .player-space { padding: 26px 18px 8px; }
  .page-heading { margin-bottom: 18px; }
  .page-heading > p:last-child { display: none; }
  .site-header { padding: 14px 18px; }
  .back-link { font-size: 11px; min-height: 44px; }
  .back-link > .gc-icon-grid { display: none; }
  .identity-card { border-radius: 20px; }
  .identity-main { flex-wrap: wrap; align-items: flex-start; padding: 24px 20px; gap: 18px; }
  .portrait-wrap { flex-basis: 96px; }
  .profile-portrait { width: 96px; height: 96px; border-width: 4px; border-radius: 24px; }
  #avatar-fallback { font-size: 56px; }
  .identity-copy { flex-basis: calc(100% - 114px); }
  h1 { font-size: 28px; margin-top: 8px; }
  .identity-note { font-size: 10px; }
  #avatar-label { display: block; }
  .hero-play { width: 100%; margin-top: 4px; }
  .identity-footer { padding: 18px 20px; }
  .player-stats { width: 100%; justify-content: space-between; gap: 10px; }
  .player-stats > div { flex: 1; flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .player-stats > div + div { padding-left: 22px; }
  .player-stats dd { font-size: 26px; }
  .player-stats dt { font-size: 10px; }
  .profile-layout { margin-top: 20px; gap: 18px; }
  .section-heading { padding: 22px 20px 17px; }
  .section-heading h2 { font-size: 23px; }
  .history-list { padding: 0 9px; }
  .history-entry > summary { gap: 10px; padding: 13px 9px; min-height: 90px; }
  .history-cover { flex-basis: 58px; width: 58px; height: 58px; border-radius: 10px; }
  .history-copy strong { font-size: 13px; }
  .history-meta { font-size: 11px; }
  .history-metric { max-width: 100px; }
  .history-metric > strong { font-size: 20px; }
  .history-metric > strong small { margin-left: 3px; font-size: 9px; }
  .result-label { font-size: 11px; }
  .history-entry > summary > .gc-icon-chevron-down { flex-basis: 8px; font-size: 8px; }
  .history-details { padding: 0 9px 14px 77px; font-size: 10px; }
  .history-footer { padding: 16px 18px; }
  .history-footer .quiet-button { padding: 10px 12px; font-size: 11px; gap: 6px; }
  .history-footer p { font-size: 9px; }
  .next-game-list { display: flex; gap: 15px; }
  .next-game.featured { grid-template-columns: minmax(0, 1fr) auto; }
  .next-game.featured .next-game-cover { aspect-ratio: 16/9; }
  .next-game.featured .primary-button { justify-self: stretch; }
  .next-game.compact { width: 100%; padding-top: 15px; border-top: 1px solid #373a3d; }
  .account-settings > summary { padding: 19px; }
  .profile-skeleton { gap: 18px; height: 310px; padding: 20px; }
  .profile-skeleton > span { width: 96px; height: 96px; }
  .page-footer { padding: 24px 18px; font-size: 10px; }
}
@media (max-width: 360px) {
  .player-space { padding-left: 14px; padding-right: 14px; }
  .identity-main { padding: 22px 16px; gap: 14px; }
  .portrait-wrap { flex-basis: 80px; }
  .profile-portrait { width: 80px; height: 80px; border-radius: 20px; }
  .identity-copy { flex-basis: calc(100% - 94px); }
  h1 { font-size: 25px; }
  .member-chip { font-size: 9px; }
  .history-cover { flex-basis: 48px; width: 48px; height: 52px; }
  .history-entry > summary { gap: 8px; padding-left: 7px; padding-right: 7px; }
  .history-metric { max-width: 83px; }
  .history-metric > strong { font-size: 18px; }
  .history-details { padding-left: 63px; }
  .back-link { font-size: 10px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .profile-skeleton span, .profile-skeleton b, .history-skeleton span { animation: none; } }
/* Player progress: the games stay the main attraction; owned rewards add a personal touch. */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.member-header-actions { display:flex;align-items:center;gap:22px; }
.gold-pill { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:7px 11px;border:1px solid #d8cab0;border-radius:99px;background:#fff8e7;color:#72501b;font:700 15px var(--font-display); }
.gold-pill img { display:block;object-fit:contain; }
.portrait-wrap { width:144px; }
.equipped-frame { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none; }
.portrait-wrap.is-framed { height:144px; }
.portrait-wrap.is-framed .profile-portrait { width:78.125%;height:78.125%;margin:10.9375%;border:0;border-radius:18%;transform:none;box-shadow:none; }
.portrait-wrap.is-framed .profile-portrait img { transform:none; }
.portrait-wrap.is-framed .portrait-star { display:none; }
.rename-price { margin:0 0 10px;color:#827052;font-size:12px;line-height:1.7; }
.reward-space { margin-top:26px;scroll-margin-top:24px; }
.rewards-error { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border:1px solid #614941;border-radius:16px;background:#251e1c;color:#e2c3b6; }
.rewards-error p { margin:0;font-size:13px; }
.achievement-highlights { display:flex;align-items:center;gap:22px;min-height:138px;padding:22px 26px;border:1px solid #3c3c39;border-radius:20px;background:linear-gradient(120deg,#1d2125,#222019); }
.achievement-highlights > div:first-child { flex:1;min-width:0; }
.achievement-highlights h2 { margin:0;font-size:22px;line-height:1.5; }
.achievement-highlights p:last-child { margin:6px 0 0;color:#b2aaa0;font-size:12px;line-height:1.7; }
.achievement-highlights .section-kicker { color:#c1a56f; }
.pinned-badges { display:flex;align-items:center;gap:10px;flex-shrink:0; }
.pinned-badge { display:flex;flex-direction:column;align-items:center;gap:5px;width:76px; }
.pinned-badge img { width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 7px #0003); }
.pinned-badge span { max-width:100%;text-align:center;font-size:10px;line-height:1.45;color:#d5cbbb;overflow-wrap:anywhere; }
.pinned-placeholder { display:grid;place-items:center;width:60px;height:60px;border:1px dashed #615a4c;border-radius:16px;color:#9d8b6b;font-size:24px; }
.dark-quiet-button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 13px;color:#e6dccb;border:1px solid #555047;border-radius:10px;background:transparent;font-size:12px;font-weight:500; }
.dark-quiet-button:hover { background:#38342a; }
.reward-dashboard { display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:24px;scroll-margin-top:24px; }
.missions-panel { overflow:hidden;border:1px solid #fff5e5;border-radius:20px;background:#f4f0e8;color:var(--ink); }
.missions-panel .section-heading { padding-bottom:18px; }
.mission-cards { display:flex;flex-direction:column;gap:10px;padding:0 22px; }
.mission-card { display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #ded5c5;border-radius:14px;background:#fffbf2; }
.mission-card.is-done { background:#eeeee3;border-color:#d8decf; }
.mission-art { display:grid;place-items:center;overflow:hidden;flex:0 0 66px;width:66px;height:66px;border-radius:12px;background:#eadcc1;color:#9f762e; }
.mission-art img { display:block;width:100%;height:100%;object-fit:cover; }
.mission-art > .gc-icon { width:28px;height:28px; }
.mission-card .mission-art.symbol { background:#eadcc1;color:#9f762e; }
.mission-copy { min-width:0;flex:1; }
.mission-copy h3 { margin:0 0 3px;font-size:15px;line-height:1.5; }
.mission-copy p { margin:0;color:#7c7060;font-size:12px;line-height:1.65; }
.mission-reward { display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:7px;background:#f7e5bb;color:#80601f;font:700 12px var(--font-display);white-space:nowrap; }
.mission-reward img { width:19px;height:19px; }
.mission-action { display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:0 0 auto; }
.mission-action .quiet-button { padding:7px 12px;font-size:12px; }
.mission-state { font-size:11px;color:#6b8057;text-align:right;max-width:95px;line-height:1.5; }
.mission-progress { display:flex;align-items:center;gap:8px;margin-top:7px; }
.mission-progress progress { appearance:none;-webkit-appearance:none;width:100%;height:5px;border:0;border-radius:6px;background:#e8e0d1;overflow:hidden; }
.mission-progress progress::-webkit-progress-bar { background:#e8e0d1;border-radius:6px; }
.mission-progress progress::-webkit-progress-value { background:#c79040;border-radius:6px; }
.mission-progress progress::-moz-progress-bar { background:#c79040;border-radius:6px; }
.mission-progress span { color:#8c7756;font:500 10px var(--font-display);white-space:nowrap; }
.weekly-mission { display:flex;align-items:center;gap:14px;margin:14px 22px 0;padding:16px;border:1px solid #dfd3bd;border-radius:14px;background:#eae2d3; }
.weekly-mission .mission-copy h3 { font-size:14px; }
.weekly-days { display:flex;gap:5px;flex-shrink:0; }
.weekly-days span { display:grid;place-items:center;width:24px;height:24px;border:1px solid #cfc1a7;border-radius:50%;color:#998462;font-size:11px; }
.weekly-days span.is-done { border-color:#547252;background:#547252;color:#fffaf2; }
.mission-footnote { margin:0;padding:16px 24px 20px;color:#897d6b;font-size:11px;line-height:1.7; }
.reward-sidebar { display:flex;flex-direction:column;gap:16px; }
.wallet-card { padding:23px;border:1px solid #625138;border-radius:20px;background:radial-gradient(circle at 90% 0,#77502466,transparent 60%),#282219;scroll-margin-top:24px; }
.wallet-heading { display:flex;align-items:center;gap:13px; }
.wallet-heading img { filter:drop-shadow(0 3px 5px #0002); }
.wallet-heading .section-kicker { margin:0 0 3px;color:#c8b18b; }
.wallet-heading h2 { margin:0;color:#f5e5c9;font-size:20px; }
.wallet-balance { display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:17px 0;color:#ecce94; }
.wallet-balance strong { font:700 48px/1.1 var(--font-display);letter-spacing:-.045em; }
.wallet-balance > span { font-size:12px;color:#baaa8e; }
.wallet-state { margin-bottom:14px;padding:11px 12px;background:#1c19144d;border:1px solid #594b35;border-radius:10px;color:#e0c28f;font-size:12px;line-height:1.8; }
.wallet-state p { margin:0; }
.wallet-shop-link { display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:11px 14px;border-radius:10px;background:#e5c38c;color:#49351c;font-size:13px;font-weight:600; }
.wallet-shop-link:hover { background:#f4d9aa; }
.wallet-history-panel { margin-top:15px; }
.wallet-history-panel > summary { display:flex;align-items:center;justify-content:space-between;min-height:44px;color:#c2b092;font-size:12px; }
.wallet-history-panel[open] > summary { margin-bottom:5px; }
.wallet-ledger-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #514631; }
.wallet-ledger-row > div { min-width:0; }
.wallet-ledger-row strong { display:block;font-size:12px;font-weight:500;color:#e2d2b6; }
.wallet-ledger-row small { display:block;margin-top:4px;font-size:11px;color:#ab9570; }
.wallet-ledger-row > span { white-space:nowrap;color:#eacb90;font:600 14px var(--font-display); }
.wallet-ledger-row > span.is-debit { color:#d2aaa0; }
.next-badge { display:flex;align-items:center;gap:14px;padding:17px 19px;border:1px solid #494a40;border-radius:16px;background:#1c2120; }
.next-badge .badge-art { flex:0 0 64px;width:64px;height:64px; }
.next-badge > div { min-width:0; }
.next-badge h3 { margin:3px 0;font-size:14px;line-height:1.5; }
.next-badge p { margin:0;color:#abb2a8;font-size:11px;line-height:1.6; }
.next-badge .section-kicker { color:#c0b78e; }
.next-badge .mission-progress progress { background:#394239; }
.reward-collection { margin-top:16px;border:1px solid #3e403e;border-radius:20px;background:#1a1e21;scroll-margin-top:24px; }
.reward-collection > summary { display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:94px;padding:21px 25px; }
.reward-collection > summary > span:first-child { display:flex;flex-direction:column;gap:7px;min-width:0; }
.reward-collection > summary small { font:600 9px var(--font-display);letter-spacing:.14em;color:#b29b70; }
.reward-collection > summary strong { font-size:19px;font-weight:600; }
#badge-count { margin-left:6px;font:500 12px var(--font-display);color:#aca89e; }
.collection-toggle { display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid #535148;border-radius:50%;font:400 24px var(--font-display);color:#cfc5b4; }
.reward-collection[open] .collection-toggle { transform:rotate(45deg); }
.collection-body { padding:0 25px 25px; }
.collection-intro { margin:0 0 20px;color:#b7b0a5;font-size:12px;line-height:1.8; }
.badge-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.badge-card { position:relative;display:flex;align-items:center;flex-direction:column;text-align:center;padding:19px 16px;border:1px solid #49463e;border-radius:15px;background:#242722; }
.badge-card.is-locked { border-color:#353b3b;background:#202528; }
.badge-art { display:block;width:88px;height:88px;max-width:100%;object-fit:contain; }
.badge-card.is-locked .badge-art { filter:grayscale(.55);opacity:.75; }
.badge-card h3 { margin:10px 0 4px;font-size:15px;line-height:1.5; }
.badge-card p { margin:0;color:#b4b0a6;font-size:12px;line-height:1.7; }
.badge-scope { display:inline-block;margin-top:10px;padding:4px 7px;border-radius:6px;background:#15191b;color:#a59980;font-size:10px; }
.badge-card .mission-progress { width:100%;margin:14px 0 4px; }
.badge-review { display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 8px;border:1px solid #75603d;border-radius:7px;color:#e1c28b;background:#3a3020;font-size:11px;line-height:1.5; }
.badge-card .dark-quiet-button { margin-top:12px;width:100%; }
.badge-card .dark-quiet-button.is-selected { border-color:#b2935e;color:#f3d7a1;background:#3b3529; }
.shop-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px; }
.shop-item { padding:19px;border:1px solid #474742;border-radius:15px;background:#252925; }
.cosmetic-preview { position:relative;width:134px;max-width:100%;aspect-ratio:1;height:auto;margin:0 auto 15px; }
.cosmetic-preview .preview-portrait { position:absolute;left:var(--portrait-x,10.9375%);top:var(--portrait-y,10.9375%);width:var(--portrait-width,78.125%);height:var(--portrait-height,78.125%);object-fit:cover;border-radius:var(--portrait-radius,18%); }
.cosmetic-preview .preview-frame { position:absolute;inset:0;width:100%;height:100%;object-fit:contain; }
.shop-item h3 { margin:0 0 5px;font-size:16px;line-height:1.5; }
.shop-item p { min-height:38px;margin:0 0 13px;color:#b9b1a4;font-size:12px;line-height:1.6; }
.shop-item .shop-bottom { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.shop-price { display:flex;align-items:center;gap:5px;color:#f1ce91;font:600 15px var(--font-display);white-space:nowrap; }
.shop-price img { width:23px;height:23px; }
.shop-item.is-owned .shop-price { white-space:normal;min-width:0;line-height:1.5; }
.shop-price img { flex-shrink:0; }
.shop-item .dark-quiet-button { font-size:12px; }
.reward-confirm { position:fixed;inset:0;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;margin:auto;padding:30px;color:var(--ink);border:1px solid #e7decc;border-radius:22px;background:#f5f0e6;box-shadow:0 20px 80px #0006; }
.reward-confirm::backdrop { background:#070b10bd;backdrop-filter:blur(4px); }
.quote-close { position:absolute;top:11px;right:12px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#7c7367;font-size:25px; }
.quote-close:hover { background:#e8dfd0; }
.reward-confirm > .section-kicker { margin-top:5px; }
.reward-confirm h2 { margin:9px 0;font-size:26px;line-height:1.45; }
#quote-description { color:#887b66;font-size:13px;line-height:1.7; }
.quote-art .cosmetic-preview { width:150px;height:150px; }
.quote-totals { margin:21px 0;padding:16px;border:1px solid #e3d9c8;border-radius:12px;background:#fffaf1; }
.quote-totals > div { display:flex;justify-content:space-between;align-items:center;gap:15px; }
.quote-totals > div + div { margin-top:10px; }
.quote-totals dt { color:#8b7a60;font-size:12px;font-weight:400; }
.quote-totals dd { margin:0;font:600 17px var(--font-display); }
.quote-actions { display:flex;gap:10px; }
.quote-actions > button { flex:1; }
.quote-expiry { margin:0 0 15px;color:#8a7658;font-size:11px;line-height:1.7;text-align:center; }
.quote-footnote { margin:16px 0 0;color:#98876b;font-size:11px;line-height:1.6;text-align:center; }
#quote-error { padding:10px 12px;border-radius:8px;background:#f5dcd5;color:#a3372d;font-size:12px;line-height:1.7; }
@media(max-width:1000px) { .achievement-highlights { flex-wrap:wrap; }.achievement-highlights .dark-quiet-button { margin-left:auto; }.reward-dashboard { grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:20px; }.mission-cards { padding:0 17px; }.mission-card { gap:10px;padding:12px; }.mission-art { width:56px;height:56px;flex-basis:56px; }.mission-copy h3 { font-size:14px; }.wallet-card { padding:19px; } }
@media(max-width:860px) { .reward-dashboard { grid-template-columns:minmax(0,1fr); }.reward-sidebar { display:grid;grid-template-columns:1fr 1fr;align-items:start; }.portrait-wrap { width:108px; }.portrait-wrap.is-framed { height:108px; }.shop-grid,.badge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.wallet-balance strong { font-size:40px; } }
@media(max-width:560px) { .member-header-actions { gap:10px; }.member-header-actions .back-link { gap:5px; }.member-header-actions .back-link > span:first-of-type { display:none; }.gold-pill { gap:4px;padding:6px 9px;font-size:14px; }.portrait-wrap { width:96px; }.portrait-wrap.is-framed { height:96px; }.reward-space { margin-top:20px; }.achievement-highlights { padding:20px;gap:17px;border-radius:17px; }.achievement-highlights > div:first-child { flex-basis:100%; }.achievement-highlights h2 { font-size:21px; }.pinned-badge { width:60px; }.pinned-badge img { width:53px;height:53px; }.pinned-placeholder { width:50px;height:50px; }.achievement-highlights .dark-quiet-button { font-size:11px;padding:8px 10px; }.reward-dashboard { margin-top:18px;gap:18px; }.missions-panel { border-radius:17px; }.mission-cards { padding:0 14px; }.mission-card { gap:10px;flex-wrap:wrap; }.mission-art { flex-basis:52px;width:52px;height:52px; }.mission-card > .mission-copy { flex-basis:calc(100% - 62px); }.mission-copy h3 { font-size:14px; }.mission-copy p { font-size:12px; }.mission-card > .mission-action { flex-direction:row;justify-content:space-between;width:100%;padding-top:8px;margin-top:1px;border-top:1px solid #e4dac7; }.mission-card > .mission-action .mission-state { max-width:none; }.weekly-mission { margin:12px 14px 0;gap:12px;padding:14px; }.mission-footnote { padding:15px 18px 18px; }.reward-sidebar { display:flex; }.wallet-card { width:100%;padding:22px;border-radius:17px; }.wallet-heading img { width:44px;height:44px; }.wallet-balance strong { font-size:42px; }.next-badge { width:100%; }.reward-collection { border-radius:17px; }.reward-collection > summary { min-height:86px;padding:18px 20px; }.reward-collection > summary strong { font-size:18px; }.collection-body { padding:0 17px 20px; }.badge-grid { gap:10px; }.badge-card { padding:15px 10px; }.badge-art { width:73px;height:73px; }.badge-card h3 { font-size:14px; }.badge-card p { font-size:11px; }.shop-grid { gap:11px; }.shop-item { padding:15px 11px; }.cosmetic-preview { width:112px;height:112px; }.shop-item h3 { font-size:14px; }.shop-item p { font-size:11px; }.shop-item .shop-bottom { flex-wrap:wrap;gap:10px; }.shop-item .dark-quiet-button { width:100%; }.shop-price { font-size:14px; }.reward-confirm { padding:26px 22px; }.reward-confirm h2 { font-size:23px; }.quote-art .cosmetic-preview { width:132px;height:132px; } }
@media(max-width:360px) { .portrait-wrap { width:80px; }.portrait-wrap.is-framed { height:80px; }.pinned-badges { gap:5px; }.pinned-badge { width:49px; }.pinned-badge img { width:46px;height:46px; }.pinned-placeholder { width:44px;height:44px; }.achievement-highlights { gap:12px;padding:18px 16px; }.achievement-highlights .dark-quiet-button { max-width:112px;font-size:11px; }.cosmetic-preview { width:99px;height:99px; }.badge-card h3 { font-size:13px; }.shop-item { padding:13px 9px; }.reward-collection > summary strong { font-size:17px; } }
.history-sharing { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 26px 16px; }
.history-sharing p { max-width:245px;margin:0;color:#8b7b65;font-size:11px;line-height:1.7; }
.history-sharing .quiet-button { font-size:11px;padding:8px 12px;white-space:nowrap; }
.share-preview { max-width:440px;padding-top:30px; }
.share-disclosure { margin:0 0 16px;color:#857762;font-size:12px;line-height:1.8; }
.share-card-image { display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:12px;background:#e5dac8; }
.share-actions { display:flex;gap:9px;margin-top:17px; }
.share-actions > button { flex:1;padding:10px 12px;font-size:12px; }
.share-url-label { display:block;margin:17px 0 7px;color:#8b7e6a;font-size:11px; }
#share-url { width:100%;min-height:44px;padding:10px 12px;border:1px solid #d4c6ae;border-radius:9px;background:#fffaf1;color:#736344;font:400 12px var(--font-display); }
.share-downloads { display:flex;justify-content:space-between;gap:10px;margin-top:10px; }
.share-downloads a { display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:11px;color:#8d7042; }
#share-status { color:#4e7759;font-size:12px;line-height:1.7;margin:10px 0 0; }
.shared-card-row { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #373b3c; }
.shared-card-row > div { min-width:0; }
.shared-card-row a { display:block;color:#ded2bb;font-size:12px;line-height:1.7; }
.shared-card-row small { color:#a29176;font-size:11px; }
.shared-card-row .settings-action { width:auto;white-space:nowrap;font-size:11px;color:#c09581; }
@media(max-width:560px) { .history-sharing { align-items:flex-start;flex-direction:column;margin:0 20px 14px;gap:8px; }.history-sharing p { max-width:none; }.history-sharing .quiet-button { align-self:flex-start; }.share-preview { padding:26px 20px; }.share-actions > button { font-size:12px;padding:10px; }.share-downloads a { font-size:11px; } }
.weekly-mission-panel { margin:14px 22px 0;border:1px solid #dfd3bd;border-radius:12px;background:#eae2d3; }
.weekly-mission-panel > summary { display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 15px;color:#8b7654;font-size:12px; }
.weekly-mission-panel > summary > span { flex:1;min-width:0; }
.weekly-mission-panel > summary > strong { color:#6f6d4e;font:600 11px var(--font-display); }
.weekly-mission-panel .weekly-mission { margin:0;border:none;background:transparent; }
.weekly-mission-panel[open] > summary > .gc-icon { transform:rotate(180deg); }
@media(max-width:560px) { .weekly-mission-panel { margin:12px 14px 0; }.weekly-mission-panel > summary { padding:11px 13px; } }
/* Weekly progress keeps its own layout instead of inheriting the daily action row. */
@media (max-width: 560px) {
  .pinned-badges { flex:1;justify-content:space-evenly;min-width:0; }
  .achievement-highlights .dark-quiet-button { flex-basis:100%;width:100%;max-width:none;margin-left:0; }
  .weekly-mission {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"copy copy" "days reward";
    align-items:center;
    gap:14px 12px;
  }
  .weekly-mission > .mission-copy { grid-area:copy;min-width:0; }
  .weekly-mission > .weekly-days { grid-area:days; }
  .weekly-mission > .mission-action { grid-area:reward;justify-self:end;max-width:100%; }
  .weekly-mission .mission-progress { margin-top:12px; }
  .weekly-mission .mission-copy h3 { font-size:16px; }
  .weekly-days span { width:30px;height:30px;font-size:12px; }
  .wallet-balance strong { max-width:100%;font-size:clamp(28px,10vw,42px);overflow-wrap:anywhere; }
  .cosmetic-preview { height:auto; }
  .reward-collection > summary strong { line-height:1.5; }
}
@media (max-width: 360px) {
  .quote-actions, .share-actions { flex-direction:column; }
}
@media(max-width:560px) { .member-header-actions .back-link { min-width:44px;justify-content:center; } }
@media(max-width:360px) { .site-header { gap:10px; }.brand { gap:8px; }.brand-mark { width:34px;height:34px; }.brand-mark img { width:32px;height:32px; }.brand-name strong { font-size:14px; }.brand-name small { font-size:7px; }.gold-pill { font-size:12px; } }

/* Player-selected portraits: the same collection is used by every game. */
.avatar-change-button { display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:6px;padding:0 11px;border:1px solid #d5c7b1;border-radius:10px;color:#6c5540;background:#f4e7d2;font:600 12px var(--font-body);cursor:pointer; }
.avatar-change-button:hover { border-color:#bb3038;color:#a52630;background:#f8ddce; }
.avatar-change-button:focus-visible { outline:3px solid #bb3038;outline-offset:3px; }
.avatar-change-button + .rename-panel { margin-top:0; }
.avatar-picker { width:min(820px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #dfd2bd;border-radius:24px;color:var(--ink);background:var(--brand-cream);box-shadow:0 24px 80px #0008;overflow:hidden; }
.avatar-picker[open] { display:flex;flex-direction:column; }
.avatar-picker::backdrop { background:#090c10cf;backdrop-filter:blur(5px); }
.avatar-picker-heading { display:flex;justify-content:space-between;gap:20px;padding:25px 26px 17px; }
.avatar-picker-heading h2 { margin:0;font-size:26px;line-height:1.35;letter-spacing:-.03em; }
.avatar-picker-heading p:not(.section-kicker) { margin:7px 0 0;font-size:13px;color:#85715b; }
.avatar-picker-heading > button { flex:0 0 44px;width:44px;height:44px;padding:0;display:grid;place-items:center; }
.avatar-picker-tools { padding:0 26px; }
.avatar-search { display:flex;align-items:center;gap:10px;border:1px solid #d8ccba;border-radius:12px;padding:0 13px;color:#98846b;background:#fffaf2; }
.avatar-search input { width:100%;min-width:0;min-height:44px;border:0;outline:none;padding:10px 0;background:transparent;color:var(--ink);font:400 16px var(--font-body); }
.avatar-search:focus-within { border-color:#bb3038;outline:2px solid #bb303822; }
.avatar-filters { display:flex;gap:7px;flex-wrap:wrap;padding:13px 0 0; }
.avatar-filters button { min-height:44px;padding:6px 13px;border:1px solid #d8ccba;border-radius:24px;background:transparent;color:#7e6a52;font:500 12px var(--font-body);cursor:pointer; }
.avatar-filters button[aria-pressed="true"] { border-color:var(--ink);background:var(--ink);color:var(--brand-cream); }
.avatar-picker-count { margin:10px 0;font-size:11px;color:#91806b;min-height:18px; }
.avatar-picker-body { min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:0 26px 20px; }
.avatar-picker-body::-webkit-scrollbar { display:none; }
#avatar-picker-status { margin:6px 0 14px;color:#866d55;font-size:13px; }
.avatar-grid { display:flex;flex-direction:column;gap:24px; }
.avatar-collection-grid { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px; }
.avatar-choice { min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:7px;border:2px solid transparent;border-radius:16px;background:#eae1d3;color:var(--ink);text-align:left;cursor:pointer; }
.avatar-choice:hover:not(:disabled) { background:#e9d6bf;border-color:#c6a881; }
.avatar-choice.is-selected { border-color:#b92832;background:#f3ddcb;box-shadow:0 0 0 2px #b9283215; }
.avatar-choice:focus-visible { outline:3px solid #bb3038;outline-offset:2px; }
.avatar-choice:disabled { cursor:default; }
.avatar-choice.is-current { border-color:#c8b598;background:#eee7dc; }
.avatar-choice-art { position:relative;aspect-ratio:1;display:block;overflow:hidden;border-radius:11px;background:#ddd0bd; }
.avatar-choice-art > img { display:block;width:100%;height:100%;object-fit:cover; }
.avatar-choice-name { min-height:34px;font-size:11px;font-weight:600;line-height:1.5;overflow-wrap:anywhere; }
.avatar-choice-price { display:flex;align-items:center;gap:4px;font-size:11px;color:#8b6b3c; }
.avatar-choice-price img { width:18px;height:18px; }
.avatar-choice-price.is-free { color:#497055;font-weight:600; }
.avatar-choice-check { position:absolute;right:5px;bottom:5px;display:none;place-items:center;width:25px;height:25px;border-radius:50%;color:#fff;background:#b92832;box-shadow:0 1px 5px #0003; }
.avatar-choice.is-selected .avatar-choice-check,.avatar-choice.is-current .avatar-choice-check { display:grid; }
.avatar-choice.is-current .avatar-choice-check { background:#8e795d; }
.avatar-choice-check .gc-icon { width:19px;height:19px; }
.avatar-picker-footer { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 26px;border-top:1px solid #ddd0bd;background:#fff8ed; }
.avatar-selection { display:flex;align-items:center;gap:10px;flex:1;min-width:0; }
.avatar-selection > img { flex:0 0 48px;width:48px;height:48px;object-fit:cover;border-radius:12px; }
.avatar-selection > div { min-width:0; }
.avatar-selection strong { display:block;font-size:13px;line-height:1.5;overflow-wrap:anywhere; }
.avatar-selection span { display:block;font-size:11px;color:#887158; }
.avatar-picker-footer > button { flex:0 0 auto; }
@media(max-width:560px) {
 .avatar-picker { width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:20px; }
 .avatar-picker-heading { padding:20px 17px 14px;gap:10px; }
 .avatar-picker-heading h2 { font-size:23px; }
 .avatar-picker-heading p:not(.section-kicker) { font-size:12px;max-width:240px; }
 .avatar-picker-tools { padding:0 17px; }
 .avatar-filters { gap:5px; }.avatar-filters button { padding:6px 11px;font-size:11px; }
 .avatar-picker-body { padding:0 15px 16px; }
 .avatar-collection-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
 .avatar-choice { padding:5px;gap:6px;border-radius:13px; }
 .avatar-choice-art { border-radius:9px; }.avatar-choice-name { font-size:10px;min-height:32px; }
 .avatar-picker-footer { padding:13px 17px;gap:11px;flex-wrap:wrap; }
 .avatar-selection { flex-basis:100%; }.avatar-picker-footer > button { width:100%; }
}

.avatar-collection-filter { display:flex;align-items:center;gap:12px;margin:12px 0;font-size:12px;color:#7e6a52; }
.avatar-collection-filter select { flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid #d8ccba;border-radius:12px;background:#fffaf2;color:var(--ink);font:500 14px var(--font-body); }
.avatar-collection-heading { display:flex;align-items:center;gap:11px;margin:8px 0 13px; }
.avatar-collection-heading > img { width:42px;height:42px;object-fit:cover;border-radius:10px; }
.avatar-collection-heading h3 { margin:0;font-size:16px;line-height:1.4; }
.avatar-collection-heading span { display:block;margin-top:3px;font-size:11px;color:#8a765c; }
.avatar-choice.is-premium { background:linear-gradient(145deg,#eddbb5,#c3a473); }
.avatar-tier { position:absolute;top:6px;left:6px;padding:3px 5px;border-radius:5px;background:#211b16da;color:#f4d596;font-size:8px;font-weight:700;letter-spacing:.07em; }
.avatar-tier.special { background:#fff3e5e8;color:#825a3f; }
@media(max-width:560px) { .avatar-collection-filter { gap:8px; }.avatar-tier { top:4px;left:4px;font-size:7px;padding:3px; }.avatar-collection-heading h3 { font-size:14px; } }

.guest-benefits{margin:28px 0;padding:30px;border-radius:24px;background:#fff5df;color:#242a2c;border:1px solid #eddbb8}.guest-benefits h2{font-size:1.7rem;margin:10px 0}.guest-benefits>p:not(.section-kicker){line-height:1.8;color:#84735d}.guest-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0}.guest-benefit-grid article{display:grid;gap:10px;padding:18px;background:#fffaf0;border-radius:17px}.guest-benefit-grid .gc-icon{width:40px;height:40px;color:#bd8430}.guest-benefit-grid strong{font-size:.95rem}.guest-benefit-grid span{font-size:.8rem;color:#84735d}.guest-benefits>small{display:block;margin-top:15px;color:#84735d}.is-guest .profile-layout{grid-template-columns:1fr}.is-guest .identity-footer-note{display:none}.guest-benefits .primary-button{max-width:340px}@media(max-width:600px){.guest-benefits{padding:23px 20px}.guest-benefits h2{font-size:1.45rem}.guest-benefit-grid{grid-template-columns:1fr;gap:10px}.guest-benefit-grid article{grid-template-columns:44px 1fr;padding:14px;column-gap:15px;row-gap:4px}.guest-benefit-grid img,.guest-benefit-grid .gc-icon{grid-row:1/3}.guest-benefits .primary-button{max-width:none}.guest-benefits>p{font-size:.88rem}}

#profile.is-guest .portrait-star{display:none}

/* Profile information architecture: one task per section, with stable deep links. */
.profile-workspace { display:grid;grid-template-columns:166px minmax(0,1fr);gap:28px;align-items:start;margin-top:26px;scroll-margin-top:18px; }
.profile-section-nav { display:flex;flex-direction:column;gap:6px;position:sticky;top:20px;padding:8px;border:1px solid #343a3e;border-radius:18px;background:#1a1e22; }
.profile-section-nav a { display:flex;align-items:center;gap:12px;min-height:52px;padding:12px;color:#b7b7b0;border-radius:11px;font-size:13px;font-weight:500; }
.profile-section-nav .gc-icon { flex:0 0 21px;width:21px;height:21px;color:#9b9c92; }
.profile-section-nav a:hover { background:#292d30;color:#fff5e5; }
.profile-section-nav a[aria-current="page"] { color:#fff4df;background:#3a3025;box-shadow:inset 3px 0 #eec581;font-weight:600; }
.profile-section-nav a[aria-current="page"] .gc-icon { color:#eec581; }
.profile-section-content { min-width:0; }
.profile-section { min-width:0;scroll-margin-top:18px; }
.profile-section-heading { display:flex;align-items:center;justify-content:space-between;gap:15px;margin:3px 0 14px; }
.profile-section-heading h2 { margin:0;color:#f4eadb;font-size:25px;line-height:1.45;letter-spacing:-.025em; }
.profile-section-heading h2:focus { outline:none; }
.profile-section-intro { margin:0 0 22px;color:#ada99f;font-size:13px;line-height:1.75;max-width:590px; }
.profile-section .weekly-events { margin:0 0 24px; }
.profile-section .weekly-events-head { margin-bottom:16px; }
.profile-section .weekly-events-head h2 { font-size:21px; }
.profile-section .ranking-rewards-panel { margin-top:22px; }
.ranking-rewards-panel #rankingCampaign { margin:0 16px 18px; }
.profile-section .reward-space { margin:0 0 18px; }
.profile-section .mission-footnote { font-size:12px; }
#profile:not(.has-rewards) .requires-rewards { display:none; }
#profile.has-rewards .collection-loading-note { display:none; }
.collection-loading-note { padding:25px;border:1px solid #424642;border-radius:18px;color:#bcb09c;font-size:14px;background:#1c2023; }
.collection-loading-note p { margin:0 0 16px; }
.identity-main { gap:23px;padding:25px 28px; }
.portrait-wrap { flex-basis:108px;width:108px; }
.profile-portrait { width:108px;height:108px;border-width:4px;border-radius:25px; }
.portrait-wrap.is-framed { height:108px; }
.portrait-star { width:33px;height:33px;font-size:21px; }
.identity-copy h1 { font-size:32px;line-height:1.35;margin-bottom:7px; }
.identity-copy .connect-shortcut { min-height:34px;font-size:12px; }
.identity-note { margin:0 0 4px; }
.identity-footer { padding:15px 28px; }
.player-stats { gap:26px; }
.player-stats dd { font-size:25px; }
#profile.is-guest .identity-footer { display:none; }
.overview-layout { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start; }
.overview-layout .next-games { padding:0 22px 20px; }
.overview-layout .section-heading { padding:21px 0 17px; }
.overview-layout .section-heading h2 { font-size:21px; }
.overview-layout .section-kicker { font-size:8px;letter-spacing:.12em; }
.overview-layout .next-game.featured { grid-template-columns:minmax(0,1fr) auto; }
.overview-layout .next-game.featured .next-game-cover { aspect-ratio:16/8; }
.overview-layout .next-game.featured .primary-button { justify-self:end; }
.overview-layout .next-game-list { display:flex;flex-direction:column;gap:14px; }
.overview-layout .next-game.compact { width:100%;padding-top:14px;border-top:1px solid #373a3d; }
.overview-next-step { position:relative;overflow:hidden;padding:24px;border:1px solid #504435;border-radius:20px;background:radial-gradient(ellipse at 90% 0,#bc88421c,transparent 75%),#25221c; }
.overview-next-step .section-kicker { margin-bottom:21px;color:#c8aa78; }
.overview-step-art { display:grid;place-items:center;width:48px;height:48px;margin-bottom:20px;border:1px solid #746044;border-radius:14px;color:#e8c486;background:#3a3023; }
.overview-step-art .gc-icon { width:26px;height:26px; }
.overview-next-step h3 { margin:0 0 9px;font-size:22px;line-height:1.5; }
.overview-next-step p:not(.section-kicker) { margin:0 0 21px;color:#bcae97;font-size:13px;line-height:1.8; }
.overview-next-step .dark-quiet-button { width:100%;border-color:#a88b59;background:#e5c38c;color:#3d2d1b;font-weight:600; }
.overview-history-link { display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:12px;color:#c1b59f;font-size:12px; }
#profile.is-guest .overview-layout { grid-template-columns:1fr; }
.profile-section .guest-benefits { margin:0 0 22px;padding:24px;border-radius:20px; }
.profile-section .guest-benefits h2 { font-size:25px; }
.profile-section .guest-benefit-grid { gap:12px;margin:20px 0; }
.profile-section .guest-benefit-grid article { padding:15px; }
.profile-section .guest-benefits>small { line-height:1.75; }
.profile-section .guest-benefits .primary-button { width:100%;max-width:320px; }
#section-missions .missions-panel .section-heading { padding:24px 24px 18px; }
#section-missions .missions-panel .section-heading h2 { font-size:24px; }
.collection-overview { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start; }
.collection-personal { display:flex;flex-direction:column;gap:16px;min-width:0; }
.avatar-shortcut { padding:23px;border:1px solid #3c4243;border-radius:20px;background:#1c2124; }
.avatar-shortcut h3 { margin:0 0 8px;font-size:20px; }
.avatar-shortcut p:not(.section-kicker) { margin:0 0 18px;color:#aaa899;font-size:12px;line-height:1.75; }
.avatar-shortcut .avatar-change-button { width:100%;justify-content:center;min-height:44px;border:1px solid #766750;background:#322b21;color:#eed8b2; }
#section-collection .achievement-highlights { margin-top:20px;flex-wrap:wrap;padding:22px;gap:18px; }
#section-collection .achievement-highlights > div:first-child { flex-basis:220px; }
#section-collection .achievement-highlights #open-badges { margin-left:auto; }
#section-collection .badge-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
#section-collection .shop-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sharing-management { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px;align-items:start; }
.profile-section .history-panel { width:100%; }
.profile-section .history-panel .section-heading { padding:23px 24px 18px; }
.profile-section .history-sharing { padding:0 24px 18px; }
.profile-editing { margin-bottom:20px;padding:24px;border:1px solid #e2d5c0;border-radius:20px;background:#f4f0e8;color:#25272a; }
.profile-editing h3 { margin:0 0 8px;font-size:21px; }
.profile-editing>div>p:last-child { margin-bottom:20px;color:#8b7c67;font-size:12px;line-height:1.75; }
.profile-editing .rename-panel { margin-top:0;width:100%; }
.profile-editing .rename-panel summary { min-height:44px; }
.profile-editing .rename-panel input { min-width:0; }
.profile-section #account-settings .settings-content { font-size:13px;padding:0 24px 24px; }
.profile-section #account-settings > summary { padding:23px 24px; }
.profile-section #account-settings > summary strong { font-size:15px; }
.profile-section #account-settings > summary small { font-size:12px; }
.profile-section #account-settings .guest-note { font-size:12px; }
@media(max-width:1050px) {
 .profile-workspace { grid-template-columns:145px minmax(0,1fr);gap:20px; }
 .profile-section-nav a { padding:11px 9px;gap:10px; }
 .overview-layout { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px; }
 .overview-next-step { padding:22px; }
 .overview-next-step h3 { font-size:20px; }
 .collection-overview { grid-template-columns:1fr; }
 .collection-personal { display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start; }
 #section-collection .next-badge { flex-direction:column;align-items:flex-start; }
}
@media(max-width:760px) {
 .profile-workspace { display:block;margin-top:20px; }
 .profile-section-nav { position:sticky;top:0;z-index:10;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:7px;margin-bottom:22px;border-radius:14px;box-shadow:0 7px 15px #0003; }
 .profile-section-nav a { flex-direction:column;gap:6px;min-height:60px;padding:8px 2px;font-size:11px; }
 .profile-section-nav a[aria-current="page"] { box-shadow:inset 0 -3px #eec581; }
 .profile-section-nav .gc-icon { flex-basis:21px; }
 #profile.is-guest .profile-section-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .profile-section { scroll-margin-top:88px; }
 .profile-section [id] { scroll-margin-top:88px; }
 .profile-section-heading h2 { font-size:23px; }
 .overview-layout { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px; }
 .identity-main { padding:23px 24px;gap:20px; }
 .identity-footer { padding:14px 24px; }
 .identity-copy { flex:1; }
 .identity-copy h1 { font-size:29px; }
 .hero-play { margin-left:0; }
 .portrait-wrap { width:96px;flex-basis:96px; }
 .profile-portrait { width:96px;height:96px; }
 .portrait-wrap.is-framed { height:96px; }
}
@media(max-width:560px) {
 .player-space { padding-top:20px; }
 .page-heading { margin-bottom:15px; }
 .identity-main { padding:22px 19px;gap:17px; }
 .identity-copy { flex-basis:calc(100% - 113px); }
 .identity-copy h1 { font-size:26px; }
 .identity-copy .connect-shortcut { font-size:11px; }
 .hero-play { margin-top:2px; }
 .player-stats > div { flex-direction:row;align-items:center;gap:9px; }
 .player-stats > div+div { padding-left:15px; }
 .player-stats dt { font-size:9px; }
 .player-stats dt .gc-icon { display:none; }
 .player-stats dd { font-size:23px; }
 .profile-section-heading { margin-bottom:12px; }
 .profile-section-intro { font-size:12px;margin-bottom:18px; }
 .overview-layout { grid-template-columns:1fr; }
 .overview-layout .next-games { padding:0 19px 18px; }
 .overview-next-step { padding:22px; }
 .overview-next-step .section-kicker { margin-bottom:16px; }
 .overview-step-art { float:right;margin:0 0 8px 12px; }
 .overview-next-step h3 { font-size:21px; }
 .overview-next-step p:not(.section-kicker) { font-size:12px;margin-bottom:17px; }
 .profile-section .guest-benefits { padding:22px 19px; }
 .profile-section .guest-benefits h2 { font-size:23px;line-height:1.5; }
 .profile-section .guest-benefits>p:not(.section-kicker) { font-size:12px; }
 .profile-section .guest-benefit-grid { grid-template-columns:1fr; }
 .profile-section .guest-benefits>small { font-size:11px; }
 .profile-section .guest-benefits .primary-button { max-width:none; }
 .collection-overview { gap:16px; }
 .collection-personal { display:flex;gap:16px; }
 #section-collection .next-badge { flex-direction:row;align-items:center; }
 #section-collection .badge-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
 #section-collection .achievement-highlights { padding:21px 18px;gap:18px; }
 #section-collection .achievement-highlights > div:first-child { flex-basis:100%; }
 #section-collection .achievement-highlights h2 { font-size:22px; }
 #section-collection .achievement-highlights #open-badges { margin-left:0; }
 #section-collection .pinned-badges { flex:1; }
 #section-collection .pinned-badge { width:62px; }
 #section-collection .pinned-badge img { width:54px;height:54px; }
 #section-collection .pinned-placeholder { width:48px;height:48px;border-radius:12px; }
 #section-collection .reward-collection > summary { min-height:83px;padding:19px; }
 #section-collection .reward-collection > summary strong { font-size:18px; }
 #section-collection .collection-body { padding:0 17px 20px; }
 #section-collection .shop-grid { grid-template-columns:1fr; }
 .sharing-management { grid-template-columns:1fr;gap:16px;margin-top:18px; }
 .profile-section .history-sharing { padding:0 19px 16px; }
 .profile-section .history-panel .section-heading { padding:22px 20px 17px; }
 .profile-editing { padding:22px 20px; }
 .profile-section #account-settings > summary { padding:22px 20px; }
 .profile-section #account-settings .settings-content { padding:0 20px 22px; }
 .ranking-rewards-panel #rankingCampaign { margin:0 10px 14px; }
}
#badge-album .achievement-highlights { margin:0 0 22px;padding:18px 0;border:0;border-bottom:1px solid #44453e;border-radius:0;background:transparent; }
#badge-album .achievement-highlights h2 { font-size:19px; }
/* Edit the photo and its frame with two separate, visible controls. */
.portrait-editor{flex:0 0 144px;width:144px}.portrait-editor .portrait-wrap{width:144px;height:144px;position:relative}.portrait-hitarea{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;border-radius:28px}.portrait-hitarea:disabled{cursor:default}.portrait-hitarea>.profile-portrait{display:block;width:100%;height:100%;box-sizing:border-box}.portrait-editor .is-framed .profile-portrait{position:absolute;left:var(--portrait-x);top:var(--portrait-y);width:var(--portrait-width);height:var(--portrait-height);margin:0;border:0;border-radius:var(--portrait-radius);transform:none;box-shadow:none}.portrait-edit-mark{position:absolute;right:1px;top:1px;z-index:3;display:grid;place-items:center;width:30px;height:30px;border:2px solid #fffaf2;border-radius:10px;background:#242b28;color:#fff4db;box-shadow:0 3px 8px #0002}.portrait-edit-mark .gc-icon{width:16px;height:16px}.frame-edit-button{position:absolute;z-index:4;right:-8px;bottom:-16px;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 11px;border:2px solid #fffaf2;border-radius:12px;background:#f5d89e;color:#352b20;font:600 11px var(--font-body);box-shadow:0 3px 8px #0002;cursor:pointer;white-space:nowrap}.frame-edit-button .gc-icon{width:18px;height:18px}.frame-edit-button:disabled{opacity:.55;cursor:wait}.portrait-edit-hint{margin:24px 0 0;text-align:center;font-size:10px;line-height:1.6;color:#817765}.portrait-hitarea:focus-visible,.frame-edit-button:focus-visible{outline:3px solid #bd343f;outline-offset:4px}.portrait-hitarea:not(:disabled):hover .portrait-edit-mark{background:#bd343f}.cosmetic-preview:not(.has-portrait-frame) .preview-portrait{inset:0;width:100%;height:100%;border-radius:22%}
@media(max-width:600px){.portrait-editor{flex-basis:120px;width:120px}.portrait-editor .portrait-wrap{width:120px;height:120px}.frame-edit-button{right:-4px;bottom:-17px;font-size:10px;padding:9px}.portrait-edit-hint{font-size:9px;margin-top:25px}}

/* Compact frame wardrobe: available items together, with one live portrait preview. */
.frame-picker{box-sizing:border-box;width:min(760px,calc(100% - 28px));max-width:calc(100% - 20px);max-height:90dvh;padding:0;border:1px solid #756346;border-radius:22px;background:#211e19;color:#f5efe3;box-shadow:0 26px 90px #0006;overflow:hidden}
.frame-picker[open]{display:flex;flex-direction:column}
.frame-picker::backdrop{background:#111917b8;backdrop-filter:blur(7px)}
.frame-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;padding:18px 22px;background:#f5f0e5;color:#302b24;border-bottom:1px solid #d8cfbe}
.frame-picker-heading h2{margin:0 0 3px;font-size:22px;line-height:1.4}
.frame-picker-heading p{margin:0;font-size:12px;color:#7b7162}
.frame-picker-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #d8cfbe;border-radius:12px;background:#ebe4d7;color:#554a39;cursor:pointer}
.frame-picker-close .gc-icon{width:19px;height:19px}
.frame-selection{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:14px;flex-shrink:0;padding:16px 22px;border-bottom:1px solid #4e4435;background:#30291f}
.frame-selection .cosmetic-preview{width:72px;height:72px;margin:0}
.frame-selection-copy{min-width:0}.frame-selection-copy small{display:block;font-size:10px;color:#dabf84;margin-bottom:4px}
.frame-selection-copy strong{display:block;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.frame-selection-copy p{margin:3px 0 0;font-size:11px;line-height:1.6;color:#bbaa93}
.frame-selection-actions{display:grid;gap:7px;max-width:190px}.frame-selection-actions button{font-size:12px;min-height:44px;padding:10px 16px;white-space:normal}
.frame-selection-actions button:disabled{background:#473e31;color:#bbaa93;border:1px solid #665949;box-shadow:none;opacity:1}
.frame-play-link{font-size:11px;min-height:44px;display:inline-flex;align-items:center;color:#e9c783;text-underline-offset:3px}
.frame-play-link[hidden]{display:none}
.frame-picker-notice{flex-shrink:0;margin:0;padding:10px 22px 0;font-size:12px;line-height:1.6;color:#acd2b6}
.frame-picker-notice:empty{display:none}.frame-picker-notice.is-error{color:#f0a79e}
.frame-picker-body{min-height:0;padding:16px 22px 22px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.frame-picker-body::-webkit-scrollbar{display:none}
.frame-picker .frame-search{margin:0 0 18px;border-color:#665949;background:#302921}.frame-search input{min-width:0;color:#f4eee1;background:transparent;font-size:16px}
.frame-group-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.frame-group-heading h3{margin:0;font-size:17px}.frame-group-heading p{margin:4px 0 0;font-size:11px;color:#bbaa93;line-height:1.6}.frame-group-heading>span{font-size:11px;color:#bbaa93;flex-shrink:0}
.frame-store{margin-top:24px;padding-top:20px;border-top:1px solid #4e4435}
.frame-store select{min-width:0;max-width:160px;min-height:44px;border:1px solid #665949;border-radius:10px;padding:8px;background:#302921;color:#f4eee1;font:400 12px var(--font-body)}
.frame-picker .collection-intro{margin:0 0 12px;color:#bbaa93;font-size:11px}
#shop-grid{display:flex;flex-direction:column;gap:17px}
.frame-store-heading{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:13px;font-weight:500;color:#ddd0b9}.frame-game-cover{width:30px;height:24px;object-fit:cover;border-radius:5px}
.frame-choice-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.frame-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;min-height:68px;padding:5px 3px 4px;border:2px solid transparent;border-radius:11px;background:#eee5d5;color:#574937;font:500 10px var(--font-body);cursor:pointer;touch-action:manipulation}
.frame-choice-art{display:grid;place-items:center;width:52px;max-width:100%;height:auto;aspect-ratio:1;flex:none}.frame-choice-art>img{width:100%;height:100%;object-fit:contain}.frame-choice-art>.gc-icon{width:28px;height:28px;color:#8e7f6b}
.frame-choice-label{line-height:1.5}.frame-choice:hover{background:#fff4df}.frame-choice.is-selected{border-color:#e9c783;background:#fff1cf;box-shadow:0 0 0 1px #e9c78355}
.frame-choice-equipped{position:absolute;right:3px;top:3px;display:grid;place-items:center;width:18px;height:18px;background:#f6f1e5;border-radius:50%;color:#4d775a}.frame-choice-equipped .gc-icon{width:16px;height:16px}
.frame-empty{grid-column:1/-1;font-size:12px;color:#bbaa93}.frame-choice:disabled{opacity:.65;cursor:wait}
.frame-picker button:focus-visible,.frame-picker input:focus-visible,.frame-picker select:focus-visible,.frame-picker a:focus-visible{outline:3px solid #e9c783;outline-offset:3px}
@media(max-width:600px){
 .frame-picker{width:calc(100% - 20px);border-radius:19px}.frame-picker-heading{padding:14px;gap:10px}.frame-picker-heading h2{font-size:19px}.frame-picker-heading p{font-size:11px}
 .frame-selection{grid-template-columns:64px minmax(0,1fr);gap:10px;padding:12px 14px}.frame-selection .cosmetic-preview{width:64px;height:64px}.frame-selection-copy strong{font-size:14px}.frame-selection-actions{grid-column:1/-1;max-width:none}.frame-selection-actions button{width:100%}
 .frame-picker-body{padding:14px}.frame-picker-notice{padding:8px 14px 0}.frame-choice-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.frame-group-heading h3{font-size:16px}.frame-store select{max-width:130px}.frame-selection-copy p{font-size:10px}
}

@media(max-width:400px){.frame-choice-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}