/* profile.css — V1 appearance. See DESIGN-HANDOVER.md. */


/* Identity and contacts */

.home-dashboard {
  max-width:760px;
  margin-top:0;
}

.home-identity {
  display:flex;
  align-items:center;
  gap:24px;
}

.home-identity img {
  image-rendering:pixelated;
  display:block;
}

.home-identity>a {
  flex-shrink:0;
}

.home-identity h1 {
  margin:4px 0 10px;
  overflow-wrap:anywhere;
}

.home-identity p {
  margin:6px 0;
}

.home-xp {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
}

.home-actions {
  max-width:760px;
  gap:18px;
}

.avatar-picker {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  max-width:600px;
  margin:12px 0 22px;
}

.avatar-option {
  min-width:0;
  border:2px solid #59637b;
  border-radius:10px;
  background:#12182b;
  position:relative;
}

.avatar-option label {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 4px;
  margin:0;
  cursor:pointer;
  font-size:13px;
  text-align:center;
}

.avatar-option img {
  width:64px;
  height:64px;
  image-rendering:pixelated;
}

.avatar-option input[type=radio] {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  margin:0;
  padding:0;
}

.avatar-option:has(input:checked) {
  border-color:var(--accent);
  box-shadow:inset 0 0 0 2px var(--accent);
  background:#294027;
}

.avatar-option:focus-within {
  outline:3px solid white;
  outline-offset:3px;
}

.top-ten-medal {
  font-size:24px;
}

#cabinet-test-link {
  display:block;
  width:100%;
  margin-bottom:12px;
}

@media(max-width:600px) {
.avatar-picker {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}


.home-identity {
  gap:16px;
}


.home-identity img {
  width:80px;
  height:80px;
}


.home-identity h1 {
  font-size:28px;
}


.home-xp {
  flex-wrap:wrap;
  gap:0;
}


.home-xp h2, .home-xp p {
  margin:10px 0;
}


.home-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}


.home-actions .button {
  font-size:15px;
  text-align:center;
}
}

.acquaintances-home-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.acquaintance-dot {
  display:inline-block;
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:var(--accent);
}

.acquaintances-page {
  max-width:960px;
}

.acquaintance-requests {
  margin-bottom:32px;
}

.acquaintance-request {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding:16px 0;
  border-bottom:1px solid var(--border-color);
}

.acquaintance-identity {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.acquaintance-identity img {
  width:56px;
  height:56px;
  flex:0 0 56px;
  image-rendering:pixelated;
}

.acquaintance-identity h3 {
  margin:0;
  font-size:18px;
  overflow-wrap:anywhere;
}

.acquaintance-identity p {
  margin:2px 0 0;
  color:var(--subtle);
  font-size:15px;
}

.acquaintance-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin:0;
}

.acquaintance-secondary {
  background:transparent;
  color:var(--subtle);
  border:1px solid var(--input-border);
  font-weight:500;
}

.acquaintance-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:14px;
}

.acquaintance-person {
  padding:16px;
  background:var(--panel);
  border:1px solid var(--border-color);
  border-radius:8px;
  min-width:0;
}

.acquaintance-remove {
  display:inline-block;
  color:var(--subtle);
  font-size:14px;
  margin-top:10px;
  padding:8px 0;
}

.acquaintances-page details {
  margin-top:24px;
}

.acquaintance-footer {
  margin-top:28px;
  gap:16px;
}

@media(max-width:600px) {
.acquaintance-grid {
  grid-template-columns:1fr;
}


.acquaintance-identity {
  max-width:100%;
}


.acquaintance-identity>div {
  min-width:0;
}


.acquaintance-actions {
  width:100%;
}


.acquaintance-footer {
  display:grid;
  grid-template-columns:1fr;
}


.acquaintance-footer .button {
  text-align:center;
}


.acquaintances-home-link {
  min-height:44px;
}
}


/* Support */

.xp-details {
  margin:24px 0;
}

.xp-details summary {
  padding:10px 0;
  min-height:44px;
}


/* Home and menus */

.home-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:20px;
  margin:24px 0 32px;
  max-width:760px;
}

.home-actions .home-qr-action {
  grid-column:1/-1;
  justify-self:start;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 24px;
  font-size:1.05rem;
}

.home-action-group {
  min-width:0;
}

.home-action-group h2 {
  font-size:1.1rem;
  margin:0 0 12px;
}

.home-action-group>div {
  display:grid;
  gap:10px;
}

.home-secondary {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:14px 16px;
  border:1px solid var(--secondary-border);
  border-radius:8px;
  background:#1d2339;
  color:#f4f5ff;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  line-height:1.4;
}

.home-secondary:hover {
  background:#283149;
}

.home-all-events {
  display:inline-flex;
  min-width:180px;
  justify-content:center;
}

.home-identity>div, .player-card-identity>div {
  min-width:0;
}

.home-identity h1, .player-card h1 {
  text-wrap:balance;
  overflow-wrap:anywhere;
}

.profile-nickname-note {
  margin:28px 0 12px;
  padding-top:16px;
  border-top:1px solid var(--border-color);
  font-size:.95rem;
}

.profile-nickname-note p {
  margin:4px 0;
}

@media(max-width:600px) {
.home-actions {
  gap:20px 12px;
}


.home-actions .home-qr-action {
  justify-self:stretch;
}


.home-secondary {
  padding:12px;
  font-size:1rem;
}


.home-action-group h2 {
  font-size:1rem;
  min-height:2.8em;
  display:flex;
  align-items:center;
}
}

@media(max-width:440px) {
.home-identity {
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}


.home-identity>div {
  width:100%;
}


.home-identity h1 {
  font-size:clamp(26px,7.2vw,32px);
}
}

@media(max-width:600px) {
.home-action-group>div {
  grid-auto-rows:minmax(72px,auto);
}
}

.home-progress {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--border-color);
}

.home-progress .home-xp {
  margin-top:0;
}

.home-progress .home-xp h2, .home-progress .home-xp p {
  margin:0 0 14px;
}

.home-xp-help {
  margin:18px 0 0;
  font-size:.95rem;
}

.home-action-group h2 {
  text-align:center;
  justify-content:center;
}


/* Museum and visitor orientation */

.visitor-welcome {
  max-width:1050px;
  margin:1rem auto 3rem;
}

.visitor-welcome-heading {
  max-width:760px;
  padding:1.5rem 0 2rem;
}

.visitor-welcome h1 {
  font-size:clamp(2.2rem,5vw,3.7rem);
  line-height:1.08;
  margin:.6rem 0 1.2rem;
}

.visitor-welcome-heading>p:last-child {
  font-size:1.15rem;
  line-height:1.6;
}

.visitor-paths {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}

.visitor-paths section {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:1.7rem;
  border:1px solid #496344;
  border-radius:18px;
  background:linear-gradient(145deg,#1d3024,#131b23);
}

.visitor-paths h2 {
  font-size:1.5rem;
  margin:.8rem 0;
}

.visitor-paths p {
  line-height:1.6;
  margin:0 0 1rem;
}

.visitor-paths .button {
  margin-top:auto;
  text-align:center;
  width:100%;
  box-sizing:border-box;
}

.visitor-symbol {
  font-size:2rem;
  color:#b0f566;
}

.visitor-note, .visitor-login {
  color:#c4ccc1;
}

.visitor-login {
  margin-top:1.6rem;
}

.visitor-introduction {
  max-width:600px;
  margin:1rem auto 3rem;
}

.visitor-introduction h1 {
  font-size:clamp(1.8rem,4vw,2.6rem);
  line-height:1.2;
}

.visitor-introduction p {
  font-size:1.1rem;
  line-height:1.6;
}

.visitor-possibilities {
  list-style:none;
  padding:0;
  margin:1.8rem 0;
  display:grid;
  gap:1.2rem;
}

.visitor-possibilities li {
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:1.1rem;
}

.visitor-possibilities span {
  width:2rem;
  text-align:center;
  flex-shrink:0;
}

.visitor-intro-actions {
  display:flex;
  gap:1rem;
  align-items:center;
  margin-top:1.8rem;
  flex-wrap:wrap;
}

.visitor-intro-actions .visitor-later {
  background:transparent;
  color:#d9e3d2;
  text-decoration:underline;
  font-weight:400;
}

.visitor-scan-example {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#b0f566;
  color:#102013;
  width:110px;
  height:110px;
  border-radius:50%;
  font-size:2rem;
  margin:1.5rem auto;
}

.visitor-scan-example strong {
  font-size:1rem;
}

.profile-introduction-link {
  margin-top:2rem;
  font-size:1rem;
}

@media(max-width:600px) {
.visitor-paths {
  grid-template-columns:1fr;
  gap:1rem;
}


.visitor-paths section {
  padding:1.3rem;
}


.visitor-welcome-heading {
  padding-top:.5rem;
}


.visitor-introduction {
  margin-top:.5rem;
}


.visitor-intro-actions>button {
  min-height:48px;
}
}

.welcome-page>header {
  padding-top:16px;
  padding-bottom:16px;
}

.welcome-page main {
  padding-top:24px;
}

.welcome-page .visitor-welcome {
  margin:0 auto 1rem;
}

.welcome-page .visitor-welcome-heading {
  padding:0 0 1.2rem;
}

.welcome-page .museum-kicker {
  margin:0 0 .5rem;
}

.welcome-page .visitor-welcome h1 {
  font-size:clamp(2rem,4vw,3.2rem);
  margin:0 0 .7rem;
}

.welcome-page .visitor-welcome-heading>p:last-child {
  font-size:1.0625rem;
  line-height:1.45;
  margin:0;
}

.welcome-page .visitor-paths {
  gap:1rem;
}

.welcome-page .visitor-paths section {
  padding:1.2rem;
  gap:.65rem;
}

.welcome-page .visitor-paths h2 {
  font-size:1.35rem;
  margin:0;
}

.welcome-page .visitor-paths p {
  margin:0;
  line-height:1.4;
}

.welcome-page .visitor-paths .button {
  min-height:44px;
  margin-top:auto;
}

.welcome-page .visitor-login {
  margin:1rem 0 0;
}

@media(max-width:600px) {
.welcome-page>header {
  padding:10px 16px;
}


.welcome-page main {
  padding-top:16px;
}


.welcome-page .visitor-welcome-heading {
  padding-bottom:14px;
}


.welcome-page .visitor-welcome h1 {
  font-size:2rem;
  line-height:1.1;
}


.welcome-page .museum-kicker {
  font-size:.75rem;
  letter-spacing:1px;
}


.welcome-page .visitor-paths {
  gap:10px;
}


.welcome-page .visitor-paths section {
  padding:12px;
  gap:8px;
  border-radius:12px;
}


.welcome-page .visitor-paths h2 {
  font-size:1.2rem;
}


.welcome-page .visitor-paths p {
  font-size:1rem;
}


.welcome-page .visitor-login {
  margin-top:12px;
}
}

.visitor-possibilities {
  gap:8px;
  margin:1.2rem 0;
}

.visitor-possibilities li {
  display:block;
  padding:9px 12px;
  border:1px solid #42503e;
  border-left:3px solid var(--accent);
  border-radius:8px;
  background:#1b2824;
  line-height:1.4;
  font-size:1.0625rem;
}

@media(max-width:600px) {
.visitor-introduction:not(.intro-scan) h1 {
  font-size:1.8rem;
}
}


/* Accepted compact layouts */

.acquaintance-start {
  padding-bottom:24px;
  margin-bottom:24px;
  border-bottom:1px solid var(--border-color);
}

.acquaintance-start .acquaintance-footer {
  margin:16px 0 0;
}

.player-qr-page {
  max-width:620px;
}

.personal-qr-image {
  display:block;
  width:clamp(270px,calc(29.1vw + 156.5px),400px);
  max-width:100%;
  height:auto;
  margin:0 auto 22px;
}

.qr-details textarea {
  width:100%;
  box-sizing:border-box;
  margin-top:12px;
}

.acquaintance-player-link {
  color:inherit;
  text-decoration:none;
  border-radius:8px;
  flex:1;
  min-width:0;
}

.acquaintance-player-link:hover, .acquaintance-player-link:focus-visible {
  background:#252c42;
  outline:2px solid var(--turquoise);
  outline-offset:4px;
}

.xp-journal-page {
  max-width:780px;
}

.xp-journal-page .home-progress {
  border-top:0;
  padding-top:0;
  margin-top:0;
}

.xp-chronicle {
  margin-top:24px;
}

.xp-chronicle-entry {
  padding:8px 0;
  border-bottom:1px solid #454859;
}

.xp-chronicle-entry p {
  margin:0 0 2px;
  line-height:1.4;
}

.xp-chronicle-entry strong {
  color:var(--turquoise);
}

.xp-chronicle-entry time {
  display:block;
  line-height:1.35;
  color:#b9c1d2;
  font-size:.95rem;
}

.submission-list {
  display:grid;
  gap:10px;
  max-width:850px;
}

.submission-entry {
  padding:12px 16px;
  border:1px solid var(--border-color);
  border-radius:10px;
  background:var(--panel);
}

.submission-entry h2 {
  font-size:1.1rem;
  margin:0 0 4px;
  line-height:1.35;
}

.submission-entry p {
  margin:4px 0;
  line-height:1.4;
}

.submission-entry .score {
  font-size:1.65rem;
  line-height:1.2;
  font-weight:800;
  margin:6px 0;
}

.submission-entry .badge {
  display:inline-block;
  margin:0;
  padding:3px 8px;
}

.public-player-heading .public-player-name {
  display:inline-block;
  max-width:100%;
  overflow-wrap:anywhere;
}

@media(max-width:600px) {
.public-player-heading {
  font-size:clamp(1.5rem,6.5vw,2rem);
  line-height:1.2;
}


.public-player-heading>span {
  display:block;
}


.public-player-heading .public-player-name {
  display:block;
  margin-top:4px;
}
}


/* Achievements */

.achievement-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:18px;
  margin:24px 0;
}

.achievement-card {
  position:relative;
  min-width:0;
  padding:24px;
  border:2px solid #526075;
  border-radius:16px;
  background:#182333;
  color:#edf3fc;
  overflow-wrap:anywhere;
}

.achievement-card.is-unlocked {
  border-color:#a8e96c;
  background:linear-gradient(145deg,#20372c,#182333);
}

.achievement-card.is-secret {
  border-style:dashed;
  background:#202735;
}

.achievement-card h2 {
  font-size:1.35rem;
  line-height:1.25;
  margin:14px 0 10px;
}

.achievement-card p, .achievement-steps {
  font-size:1rem;
  line-height:1.6;
}

.achievement-badge {
  display:block;
  font-size:3rem;
  line-height:1.3;
}

.achievement-status, .achievement-new {
  color:#bcf58a;
  font-weight:800;
}

.achievement-new {
  position:absolute;
  right:20px;
  top:22px;
}

.achievement-count, .achievement-progress {
  font-size:1.4rem!important;
  font-weight:800;
}

.achievement-steps {
  list-style:none;
  padding:0;
  margin:0;
}

.achievement-celebration {
  margin:20px 0;
  padding:28px;
  border:2px solid #b5ff65;
  border-radius:16px;
  background:linear-gradient(120deg,#29452e,#192641);
  color:#fff;
}

.achievement-celebration h2 {
  font-size:clamp(1.6rem,4vw,2.3rem);
  line-height:1.2;
  overflow-wrap:anywhere;
}

.achievement-celebration p {
  font-size:1.1rem;
  line-height:1.5;
}

.achievement-kicker {
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.04em;
}

.achievement-celebration .button {
  display:inline-flex;
  min-height:48px;
  align-items:center;
  margin-top:12px;
}

.achievement-heading {
  display:block;
  background:none;
  border:0;
  padding:0;
  margin:0 0 24px;
}

.achievement-heading h1 {
  margin:0 0 12px;
}

.achievement-heading .achievement-count {
  margin:0;
}

.achievement-seen {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 8px;
  margin:12px 0 0;
  font-size:1rem;
}

.achievement-seen button {
  background:transparent;
  color:inherit;
  border:0;
  border-radius:4px;
  padding:8px 0;
  min-height:44px;
  font-size:1rem;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  box-shadow:none;
}

.achievement-seen button:hover, .achievement-seen button:focus-visible {
  background:transparent;
  color:#bcf58a;
}

@media(max-width:480px) {
.achievement-card, .achievement-celebration {
  padding:20px;
}


.achievement-grid {
  gap:14px;
}


.achievement-heading {
  margin-bottom:16px;
}


.achievement-heading h1 {
  font-size:1.8rem;
  margin-bottom:6px;
}


.achievement-heading .achievement-count {
  font-size:1.15rem!important;
}


.achievement-seen {
  margin-top:4px;
}


.achievement-heading+.achievement-grid {
  margin-top:16px;
}
}

.compact-achievements {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:12px;
  margin:16px 0;
}

.compact-achievements .achievement-card {
  padding:14px 16px 14px 60px;
  border-width:1px;
  border-radius:10px;
}

.compact-achievements .achievement-badge {
  position:absolute;
  left:16px;
  top:15px;
  font-size:1.65rem;
  line-height:1.3;
}

.compact-achievements h2 {
  font-size:1.15rem;
  margin:0 0 6px;
  padding-right:32px;
}

.compact-achievements p {
  margin:6px 0;
  line-height:1.45;
}

.compact-achievements .achievement-progress {
  font-size:1.1rem!important;
}

.compact-achievements .achievement-new {
  top:14px;
  right:12px;
  font-size:.9rem;
}

.compact-achievements .achievement-steps {
  line-height:1.45;
}

.secret-achievements {
  border:1px dashed #66728f;
  border-radius:10px;
  padding:14px 16px;
  margin:16px 0;
}

.secret-achievements h2 {
  font-size:1.15rem;
  margin:0 0 8px;
}

.secret-achievements p {
  margin:0;
}

.compact-achievements {
  align-items:start;
}

.compact-achievements .achievement-simple {
  padding-top:10px;
  padding-bottom:10px;
}

.compact-achievements .achievement-simple p {
  margin:4px 0;
}

.compact-achievements .achievement-simple .achievement-badge {
  top:11px;
}


/* Shared player card and editor */

:where(.profile-styles) .profile-card-page {
  max-width:850px;
  margin:0 auto;
}

:where(.profile-styles) .player-card {
  --prestige:#6e8291;
  border:3px solid var(--prestige);
  border-radius:24px;
  padding:32px;
  background:#121e2a;
  color:#f6f8fb;
  overflow-wrap:anywhere;
}

:where(.profile-styles) .player-card.champion-frame {
  --prestige:#edc966;
  background:linear-gradient(140deg,#39301d,#121e2a 68%);
  box-shadow:inset 0 7px #edc966;
}

:where(.profile-styles) .player-card.tournament-winner-frame {
  --prestige:#59d7ba;
  border-radius:6px 32px;
  background:linear-gradient(145deg,#153d36,#121e2a 65%);
  border-left-width:10px;
}

:where(.profile-styles) .player-card.pixel-team-frame {
  --prestige:#b69afb;
  background:repeating-linear-gradient(135deg,#25203a 0 16px,#211e32 16px 32px);
  border-style:double;
  border-width:7px;
}

:where(.profile-styles) .player-card.pixel-winner-frame {
  --prestige:#ffe6a2;
  border-width:6px;
  background:radial-gradient(ellipse at top right,#755321,#211b37 65%);
  box-shadow:0 0 0 4px #9c78de,inset 0 0 0 4px #302449;
}

:where(.profile-styles) .player-card-identity {
  display:flex;
  align-items:center;
  gap:28px;
}

:where(.profile-styles) .player-card-avatar {
  object-fit:cover;
  border-radius:20px;
  background:#101725;
  flex-shrink:0;
}

:where(.profile-styles) .player-card h1 {
  margin:4px 0 12px;
  font-size:clamp(1.8rem,5vw,3rem);
  line-height:1.15;
}

:where(.profile-styles) .player-card-level {
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.08em;
}

:where(.profile-styles) .player-card-title {
  color:var(--prestige);
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.045em;
}

:where(.profile-styles) .player-card-champion {
  border-top:1px solid #ffffff40;
  padding-top:20px;
  font-weight:700;
}

:where(.profile-styles) .player-card-champion span {
  display:block;
  font-size:1rem;
  font-weight:400;
  margin-top:5px;
}

:where(.profile-styles) .player-card-highlights {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}

:where(.profile-styles) .player-card-highlights article {
  padding:18px;
  background:#08121ab3;
  border-radius:14px;
}

:where(.profile-styles) .player-card-highlights article>span {
  font-size:2.5rem;
}

:where(.profile-styles) .player-card-highlights h2 {
  font-size:1.1rem;
  margin:12px 0 8px;
}

:where(.profile-styles) .player-card-highlights p {
  font-size:1rem;
  line-height:1.5;
  margin:0;
}

:where(.profile-styles) .profile-card-links {
  display:flex;
  gap:18px 28px;
  flex-wrap:wrap;
  margin:28px 0;
}

:where(.profile-styles) .profile-card-links a {
  padding:12px 0;
}

:where(.profile-styles) .profile-editor-section {
  margin-top:28px;
}

:where(.profile-styles) .profile-editor-section h3 {
  margin-top:32px;
}

:where(.profile-styles) .profile-editor-section select, :where(.profile-styles) .profile-editor-section input[type=file], :where(.profile-styles) .profile-editor-section textarea {
  max-width:100%;
  width:100%;
  box-sizing:border-box;
}

:where(.profile-styles) .profile-editor-section label {
  display:block;
  margin-bottom:8px;
}

:where(.profile-styles) .profile-editor-section button {
  margin-top:12px;
}

:where(.profile-styles) .profile-secondary {
  background:transparent!important;
  color:#e5edf4!important;
  border:1px solid var(--secondary-border)!important;
}

:where(.profile-styles) .profile-photo-status {
  display:flex;
  align-items:center;
  gap:20px;
  margin:20px 0;
}

:where(.profile-styles) .profile-photo-status img {
  object-fit:cover;
  border-radius:12px;
}

:where(.profile-styles) .profile-review-image {
  display:block;
  width:100%;
  max-width:512px;
  height:auto;
  border-radius:16px;
  margin:20px 0;
}

:where(.profile-styles) .profile-review-actions {
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:20px;
}

:where(.profile-styles) .profile-review-actions button {
  min-height:56px;
  min-width:140px;
  font-size:1.15rem;
}

:where(.profile-styles) .profile-editor-section .helptext {
  display:block;
  font-size:1rem;
  line-height:1.6;
  margin-top:12px;
}

:where(.profile-styles) .profile-editor-section details {
  margin:24px 0;
}

:where(.profile-styles) .profile-editor-section summary {
  padding:14px 0;
  cursor:pointer;
}

@media(max-width:560px) {
:where(.profile-styles) .player-card {
  padding:22px 18px;
}


:where(.profile-styles) .player-card-identity {
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}


:where(.profile-styles) .player-card-avatar {
  width:128px;
  height:128px;
}


:where(.profile-styles) .player-card-highlights {
  grid-template-columns:1fr;
}


:where(.profile-styles) .player-card-title {
  font-size:1rem;
}


:where(.profile-styles) .profile-editor-section {
  padding:22px 18px;
}


:where(.profile-styles) .profile-review-actions {
  gap:16px;
}


:where(.profile-styles) .profile-review-actions button {
  flex:1;
  min-width:110px;
}


:where(.profile-styles) .profile-photo-status {
  align-items:flex-start;
  flex-wrap:wrap;
}
}

:where(.profile-styles) .profile-editor-section .avatar-option label {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

:where(.profile-styles) .profile-editor-section .avatar-option label img {
  display:block;
}

:where(.profile-styles) .player-card-highlights h2 {
  margin-bottom:0;
}

@media(max-width:560px) {
:where(.profile-styles) .player-card-highlights article {
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 16px;
}


:where(.profile-styles) .player-card-highlights h2 {
  margin:0;
}


:where(.profile-styles) .player-card-highlights article>span {
  font-size:2rem;
  flex-shrink:0;
}
}

:where(.profile-styles) .profile-card-links {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

:where(.profile-styles) .profile-card-links a.button {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:14px 16px;
  text-align:center;
  text-decoration:none;
  line-height:1.4;
}

:where(.profile-styles) .frame-fieldset {
  border:0;
  padding:0;
  min-width:0;
}

:where(.profile-styles) .frame-fieldset legend {
  margin-bottom:14px;
}

:where(.profile-styles) .frame-picker {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}

:where(.profile-styles) .frame-picker label {
  position:relative;
  cursor:pointer;
  height:100%;
  margin:0;
  box-sizing:border-box;
  padding:6px;
  border:2px solid transparent;
  border-radius:16px;
}

:where(.profile-styles) .frame-picker input {
  position:absolute;
  top:20px;
  right:20px;
  accent-color:var(--accent);
  width:20px;
  height:20px;
  z-index:1;
}

:where(.profile-styles) .frame-picker input:disabled {
  display:none;
}

:where(.profile-styles) .frame-picker label:has(input:checked) {
  border-color:var(--accent);
  background:#294027;
}

:where(.profile-styles) .frame-picker label:focus-within {
  outline:3px solid white;
  outline-offset:3px;
}

:where(.profile-styles) .frame-option {
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:8px 0; font-size:1rem; line-height:1.3;
}
:where(.profile-styles) .player-card.frame-swatch {
  display:grid; place-items:center; width:76px; height:76px; min-height:0;
  padding:10px; margin:0; border-radius:12px;
}
:where(.profile-styles) .frame-swatch img { width:48px; height:48px; border-radius:8px; object-fit:cover; }
:where(.profile-styles) .frame-option small { font-size:.95rem; }
:where(.profile-styles) .frame-picker label:has(input:disabled) { cursor:default; }
:where(.profile-styles) .locked-titles { margin-top:12px; }
:where(.profile-styles) .locked-titles ul { display:grid; gap:8px; padding-left:0; list-style:none; }

:where(.profile-styles) .upload-main-rule {
  display:block;
  font-weight:600;
}

:where(.profile-styles) .upload-limits {
  display:block;
  margin-top:6px;
  font-size:.9rem;
  color:#b9c4d2;
}

:where(.profile-styles) .profile-editor-section .profile-rejection {
  margin:12px 0 0;
  flex:1;
  min-width:140px;
}

:where(.profile-styles) .profile-editor-section .profile-rejection>summary {
  list-style:none;
  min-height:56px;
  padding:16px 22px;
  text-align:center;
  font-size:1.15rem;
}

:where(.profile-styles) .profile-rejection summary::-webkit-details-marker {
  display:none;
}

:where(.profile-styles) .profile-rejection-fields {
  margin-top:20px;
}

:where(.profile-styles) .profile-review-actions:has(.profile-rejection[open]) {
  align-items:flex-start;
}

:where(.profile-styles) .profile-rejection[open] {
  flex-basis:100%;
}

:where(.profile-styles) .profile-rejection[open]>summary {
  max-width:220px;
}

:where(.profile-styles) .profile-review-actions>button {
  align-self:flex-start;
}

@media(max-width:560px) {
:where(.profile-styles) .frame-picker {
  grid-template-columns:repeat(2,minmax(0,1fr));
}


:where(.profile-styles) .profile-card-links {
  gap:12px;
}


:where(.profile-styles) .profile-card-links a.button {
  font-size:1rem;
}


:where(.profile-styles) .profile-editor-section .profile-rejection {
  min-width:110px;
}


:where(.profile-styles) .profile-review-actions:has(.profile-rejection[open])>button {
  flex:0 1 auto;
}
}

:where(.profile-styles) .profile-card-page .player-card {
  padding:24px;
}

:where(.profile-styles) .profile-card-page .player-card-level {
  margin:0 0 4px;
}

:where(.profile-styles) .profile-card-page .player-card-title {
  margin:6px 0 0;
}

:where(.profile-styles) .profile-card-page .player-card-champion {
  padding-top:10px;
  margin:12px 0 0;
  line-height:1.35;
}

:where(.profile-styles) .profile-card-page .player-card-highlights {
  margin-top:16px;
  gap:8px;
}

:where(.profile-styles) .profile-card-page .player-card-highlights article {
  padding:10px;
  text-align:center;
}

:where(.profile-styles) .profile-card-page .player-card-highlights h2 {
  line-height:1.3;
  margin:6px 0 0;
  hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}

@media(max-width:560px) {
:where(.profile-styles) .profile-card-page .player-card {
  padding:16px 12px;
}


:where(.profile-styles) .profile-card-page .player-card-identity {
  flex-direction:row;
  gap:12px;
  align-items:center;
}


:where(.profile-styles) .profile-card-page .player-card-avatar {
  width:80px;
  height:80px;
  border-radius:14px;
}


:where(.profile-styles) .profile-card-page .player-card h1 {
  font-size:clamp(1.55rem,6.6vw,1.95rem);
  line-height:1.15;
  margin:4px 0 0;
}


:where(.profile-styles) .profile-card-page .player-card-level {
  font-size:1rem;
}


:where(.profile-styles) .profile-card-page .player-card-title {
  font-size:1rem;
  line-height:1.3;
  letter-spacing:normal;
}


:where(.profile-styles) .profile-card-page .player-card-highlights {
  display:flex;
  flex-wrap:wrap;
}


:where(.profile-styles) .profile-card-page .player-card-highlights article {
  display:block;
  padding:8px 4px;
  flex:1 1 90px;
  min-width:min-content;
}


:where(.profile-styles) .profile-card-page .player-card-highlights article>span {
  font-size:1.8rem;
  line-height:1.2;
}


:where(.profile-styles) .profile-card-page .player-card-highlights h2 {
  font-size:1rem;
}
}


/* Photo action */

.photo-pick {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:52px;
  padding:12px 22px;
  border-radius:8px;
  background:var(--accent,#b5ff65);
  color:#111526;
  font-weight:800;
  cursor:pointer;
  margin:18px 0 0;
}

.photo-pick label {
  margin:0;
  cursor:pointer;
  color:inherit;
}

.photo-pick input[type=file] {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  margin:0;
  padding:0;
}

.photo-pick:focus-within {
  outline:3px solid white;
  outline-offset:4px;
}

.pixel-avatar { image-rendering: pixelated; }

/* XP overview: compact, data-driven opportunities, scoped to this page. */
.xp-earn { max-width:850px; }
.xp-earn-intro { margin:8px 0 var(--space-6); }
.xp-earn section { margin:0 0 28px; }
.xp-earn h2 { font-size:var(--heading-small-size); margin:0 0 10px; }
.xp-earn section>p { margin:8px 0 12px; }
.xp-earn-list { border-top:var(--border-width) solid var(--border-color); }
.xp-earn-entry, .xp-earn-offer { padding:12px 0; border-bottom:var(--border-width) solid var(--border-color); }
.xp-earn-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.xp-earn-line>a, .xp-earn-line>span { min-width:0; font-weight:600; }
.xp-earn-line>a { color:var(--ink); text-decoration:none; }
.xp-earn-line>a:hover { text-decoration:underline; }
.xp-earn-amount { flex-shrink:0; color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; }
.xp-earn-rule { margin:4px 0 0; color:var(--subtle); font-size:.9rem; line-height:1.4; }
.xp-earn-offer { min-height:48px; color:var(--ink); text-decoration:none; }
.xp-earn-offer[href]:hover, .xp-earn-offer[href]:focus-visible { background:var(--panel); }
.xp-earn .xp-details { margin:12px 0 0; }
.xp-earn .xp-details summary { font-size:1rem; }
.xp-earn-more { display:inline-block; min-height:44px; padding-top:8px; }
@media(max-width:600px) {
  .xp-earn-line { gap:10px; }
  .xp-earn-entry, .xp-earn-offer { padding:10px 0; }
  .xp-earn-amount { font-size:.95rem; }
}
/* Level reward styles: stable keys, independent of editable public names. */
.player-card.level-bronze { --prestige:#c49364; background:linear-gradient(140deg,#493023,#121e2a 70%); }
.player-card.level-neon { --prestige:#8cffcf; background:linear-gradient(140deg,#16483f,#121e2a 70%); box-shadow:0 0 12px #69efad55,inset 0 0 0 2px #173d35; }
.player-card.level-synthwave { --prestige:#eb8bff; background:linear-gradient(135deg,#512956,#18253d 75%); }
.player-card.level-retro { --prestige:#8cc8ff; background:repeating-linear-gradient(0deg,#152637 0 5px,#182d40 5px 6px); border-radius:6px; }
.player-card.level-gold { --prestige:#f5d578; background:linear-gradient(135deg,#574921,#1b2530 65%); box-shadow:inset 0 0 0 3px #927538,0 0 15px #dbbb5655; }
.player-card.level-platinum { --prestige:#d5e7f7; background:linear-gradient(135deg,#506170,#192737 70%); box-shadow:inset 0 0 0 2px #7893a6; }
.player-card.level-elite { --prestige:#b7a2ff; background:linear-gradient(140deg,#42376a,#142739 65%); box-shadow:inset 5px 0 #7463b3,inset -5px 0 #7463b3; }
.player-card.level-legend { --prestige:#fff0b1; background:linear-gradient(125deg,#56442b,#322e59 45%,#132e37); box-shadow:inset 0 0 0 3px #bf9d55,0 0 18px #e7c57466; }
.home-progress p:has(+ .next-reward) { margin-bottom:4px; }
.next-reward { padding:0; margin-top:4px; line-height:1.5; }
.xp-celebration { border:2px solid var(--accent); border-radius:16px; padding:20px; margin:0 0 20px; background:var(--panel); }
.xp-celebration h2 { margin:8px 0; color:var(--accent); font-size:clamp(1.7rem,5vw,2.6rem); }
.xp-celebration-amount, .xp-celebration-level { font-size:1.4rem; font-weight:800; }
.xp-celebration p { overflow-wrap:anywhere; }
.reward-locked { opacity:.68; filter:saturate(.35); }
:where(.profile-styles) .acquaintance-player-link.player-card { padding:12px; border-radius:12px; width:100%; box-sizing:border-box; gap:12px; }
.acquaintance-player-link .player-card-level { font-size:.85rem; margin:0 0 3px; }
.acquaintance-player-link .player-card-title { font-size:1rem; margin:4px 0; }
.acquaintance-player-link h3 { margin:0; }
.acquaintance-highlights { display:flex; gap:8px; margin:6px 0 0; font-size:1.25rem; }

/* A short, optional success accent; the actual reward remains journal-driven. */
.xp-celebration:has(.level-up-star) { border-color:#e8c466; text-align:center; }
.level-up-star { display:block; width:80px; height:80px; margin:10px auto; color:#ffd86b; filter:drop-shadow(0 0 9px #e8bb4844); }
.xp-celebration:has(.level-up-star) h2 { color:#ffd86b; }
@media (prefers-reduced-motion:no-preference) {
  .level-up-star { animation:level-success-pop 1.15s .15s cubic-bezier(.2,.7,.25,1) 1 backwards; }
}
@keyframes level-success-pop {
  0% { transform:scale(.35); opacity:.25; }
  45% { transform:scale(1.45); opacity:1; filter:drop-shadow(0 0 22px #ffd86bdd); }
  70% { transform:scale(.92); filter:drop-shadow(0 0 14px #ffd86baa); }
  100% { transform:scale(1); opacity:1; filter:drop-shadow(0 0 9px #e8bb4844); }
}
main:has(.xp-celebration:not([hidden])) > .flash.success { padding:8px 12px; border:0; background:transparent; margin-bottom:8px; box-shadow:none; }

/* Home uses the existing player-card frame styles and shared card data. */
:where(.profile-styles) .player-card.home-dashboard { padding:20px; }
.home-dashboard .home-identity { flex-direction:row; align-items:center; gap:16px; }
.home-dashboard .home-identity>div { width:auto; min-width:0; }
.home-dashboard .player-card-avatar { width:96px; height:96px; border-radius:14px; }
.home-dashboard .home-identity h1 { margin:4px 0; font-size:clamp(1.6rem,6vw,2.2rem); text-align:left; }
.home-dashboard .player-card-level { margin:0; font-size:.9rem; }
.home-dashboard .player-card-title { margin:5px 0 0; font-size:1rem; }
.home-dashboard .home-highlights { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 0; font-size:1.3rem; }
.home-dashboard .home-progress { margin-top:18px; padding-top:16px; }
.home-dashboard .home-progress p:has(+ .next-reward) { margin-bottom:2px; }
.home-dashboard .next-reward { margin-top:2px; }
@media (max-width:560px) {
  :where(.profile-styles) .player-card.home-dashboard { padding:18px 14px; }
  .home-dashboard .player-card-avatar { width:80px; height:80px; }
  .home-dashboard .home-identity { gap:12px; }
}

/* Motivation overview: requirement first, cadence on its own final line. */
.xp-earn .next-reward { display:table; padding:10px 14px; border:1px solid var(--border-color); border-radius:8px; margin:12px 0 24px; }
.xp-earn h2 { display:flex; gap:9px; align-items:center; }
.xp-earn-limit { margin:6px 0 0; color:var(--subtle); font-size:.9rem; line-height:1.4; }
.submission-result { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:8px 0; }
.submission-result>strong { font-size:1.3rem; }
.submission-meta { color:var(--subtle); }
.submission-entry .submission-status-confirmed { color:var(--accent); }
.submission-entry .submission-status-rejected { color:#ffae94; }
.monthly-personal-scores { max-width:850px; }
.monthly-personal-row { display:grid; grid-template-columns:3ch minmax(0,1fr) auto; gap:12px; padding:12px 0; align-items:center; border-bottom:1px solid var(--border-color); }
.monthly-personal-rank { color:var(--accent); font-size:1.3rem; }
.monthly-personal-row>span { overflow-wrap:anywhere; }
.monthly-personal-row>strong:last-child { font-variant-numeric:tabular-nums; }
.score-submission { max-width:720px; }
.score-game-heading { max-width:600px; margin-bottom:20px; }
.score-submission-note { color:var(--subtle); }
.score-first-reward { color:var(--accent); font-weight:600; }
.score-submit-step { margin:22px 0; padding-top:16px; border-top:1px solid var(--border-color); }
.score-submit-step h3 { font-size:1.2rem; margin:0 0 10px; }
.score-submit-step .admin-accordion { margin-top:12px; }

.submission-list + .personal-bests-heading { margin-top:32px; }
#photo-state:empty { display:none; }