/*
 * Tirly player (P3). Loads after tokens.css and base.css, so reset, body, .btn and type come from there.
 * Colors: SOLID green (--color-accent) only on clickables. Violet and soft green (--color-accent-muted-1)
 * are allowed on decoration. Panel cards have no border and no shadow, only a subtle surface fill.
 */
/* Sentence case (Figma «Sentence case (prueba)», variant C): the panel no longer shouts. Label tracking was sized for capitals. */
html { --ls-label: 0.02em; }
/* sentence-case-reset */
h1, h2, h3, .h1, .h2, .h3, .display-xl, .label, .tag, .micro, .btn, .forms-tab, .forms-answers dt { text-transform: none; }
/* Patched Press Start: capital accents keep full letter body (Google cut is squashed). */
@font-face {
  font-family: "Press Start 2P";
  src:
    url("/tierly/assets/fonts/press-start-2p-es.woff2") format("woff2"),
    url("/tierly/assets/fonts/press-start-2p-es.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Legacy names the not-yet-migrated screens (P4-P14) still use, mapped to tokens. */
  --night: var(--color-bg);
  --navy: var(--color-surface);
  --card-border: var(--color-line);
  --cream: var(--color-text);
  --orange: var(--color-accent);
  --teal: var(--color-text);
  --muted: var(--color-muted-2);
  --gold: var(--color-gold);
  --discord-ink: var(--color-white);
  --px: 4px;
  --sidebar: 72px;
  --rail: clamp(340px, 28vw, 400px); /* 400px at Figma 1440 */
  /* Panel-local type steps (named --p-fs-* so they never shadow the token scale). */
  --p-fs-body: 16px;
  --p-fs-body-sm: 14px;
  --p-fs-display: 11px;
  --p-fs-display-sm: 10px;
  --p-fs-display-md: 12px;
  --p-fs-display-lg: 14px;
  --p-fs-label: 12px;
  --p-fs-pixel-min: 9px;
  --p-fs-pixel-sm: 10px;
  --p-fs-body-min: 14px;
}

html, body {
  min-height: 100%;
}

th, td, option, optgroup { font-family: var(--font-body); }
th { font-family: var(--font-display); font-weight: 400; }

/* Generic controls for screens that have not been migrated yet. .btn comes from base.css. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: var(--color-surface-2);
  border: 0;
  border-radius: var(--radius-device);
  padding: 8px 12px;
}

button {
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.4;
  cursor: pointer;
}

button:hover:not(:disabled) { color: var(--color-accent); }
button:disabled { color: var(--color-muted); cursor: not-allowed; }

a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent); }

img { display: block; max-width: 100%; }
.btn-discord .discord-icon,
.btn-discord svg {
  image-rendering: pixelated;
  flex-shrink: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* P1 icon set painted with masks so it follows currentColor. */
.ui-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: currentColor;
  -webkit-mask: var(--ui-icon) center / contain no-repeat;
  mask: var(--ui-icon) center / contain no-repeat;
}
.ui-icon--home { --ui-icon: url("/tierly/assets/icons/home.svg"); }
.ui-icon--events { --ui-icon: url("/tierly/assets/icons/events.svg"); }
.ui-icon--communities { --ui-icon: url("/tierly/assets/icons/communities.svg"); }
.ui-icon--music { --ui-icon: url("/tierly/assets/icons/music.svg"); }
.ui-icon--ranking { --ui-icon: url("/tierly/assets/icons/ranking.svg"); }
.ui-icon--profile { --ui-icon: url("/tierly/assets/icons/profile.svg"); }
.ui-icon--bell { --ui-icon: url("/tierly/assets/icons/bell.svg"); }
.ui-icon--settings { --ui-icon: url("/tierly/assets/icons/settings.svg"); }
.ui-icon--admin { --ui-icon: url("/tierly/assets/icons/admin.svg"); }
a.nav-item { text-decoration: none; }

.app {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100dvh;
}

/* Sidebar: icon rail from 768, full sidebar from 1024, tab bar under 768. */
.sidebar {
  background: var(--color-bg);
  border-right: 1px solid var(--color-line);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 4px;
}

.brand img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }

.brand span {
  display: none;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-text);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 16px;
  padding: 12px;
  transition: color 120ms ease, background-color 120ms ease;
}

.nav-item__label { display: none; }

.nav-item:hover:not(:disabled),
.nav-item:focus-visible {
  color: var(--color-accent);
  background: var(--color-surface);
}

.nav-item.is-active,
.nav-item.is-active:hover:not(:disabled) {
  background: var(--color-surface-2);
  border: 0;
  box-shadow: none;
  color: var(--color-text);
}

.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}

.nav-item .nav-badge {
  position: absolute;
  top: 6px;
  right: 6px;
}

@media (min-width: 1024px) {
  :root { --sidebar: 240px; }
  .sidebar { padding: 24px 16px; }
  .brand { justify-content: flex-start; padding: 4px 8px; }
  .brand span { display: inline; }
  .nav-item { justify-content: flex-start; padding: 12px 16px; }
  .nav-item__label { display: inline; }
  .nav-item .nav-badge { position: static; margin-left: auto; }
}

/* Buttons. Base look comes from base.css .btn; these are the legacy class names the render code emits. */
.btn-primary {
  border-color: var(--color-outline);
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-hard-sm);
}
.btn-primary:hover:not(:disabled) {
  color: var(--color-on-accent);
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-hard);
}
.btn-primary:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }

.btn:hover:not(:disabled):not(.btn-primary):not(.btn-discord) { border-color: var(--color-accent); color: var(--color-accent); }
.btn:disabled { cursor: not-allowed; } /* opacity comes from base.css (.btn:disabled) */

.btn-discord {
  background: var(--color-discord);
  color: var(--color-white);
  border-color: var(--color-discord);
}
.btn-discord:hover { color: var(--color-white); }

.btn-discord-outline {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-discord);
}
.btn-discord-outline:hover:not(:disabled) {
  background: var(--color-discord);
  border-color: var(--color-discord);
  color: var(--color-white);
}

.btn-discord .discord-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.btn-ghost {
  background: transparent;
  box-shadow: none;
  border: 0;
  min-height: 0;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text);
  letter-spacing: var(--ls-label);
}

.btn-static {
  background: var(--color-surface);
  color: var(--color-text);
  cursor: default;
  box-shadow: none;
}

.discord-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.link {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link:hover:not(:disabled) { color: var(--color-accent); }

/* Main */
.main { min-width: 0; min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  min-height: 89px;
  padding: 16px 48px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar__spacer { margin-right: auto; }

.topbar__brand {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-text);
}
.topbar__brand img { display: block; width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.topbar__brand img + img { image-rendering: auto; }
.topbar__brand img + img { width: 86.25px; height: 23px; } /* Figma wordmark 49:3395 */

/* Mobile-only page title below the top bar (Figma 52:9188); desktop keeps it in the bar. */
.screen-title { display: none; }
/* Signed out, every width: language and theme live in Ajustes and, since P14, the sidebar no longer lists it (the 44px box comes from .profile-gear). */
.topbar > .topbar__gear { display: grid; flex: 0 0 auto; }
.topbar__enter { display: inline-flex; } /* «Entrar» outline at every width (Pau, lote C) */
.auth-menu__mobile { display: none; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-muted-2);
}
.lang-switch__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  background: transparent;
  border-radius: var(--radius-device);
  color: var(--color-muted-2);
}
.lang-switch__btn[aria-pressed="true"] { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
.lang-switch__btn:hover:not(:disabled) { color: var(--color-accent); }

/* Dark / Light switch, beside ES / EN in the top bar */
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-muted-2);
}
.theme-switch__colon { margin-left: -4px; }
.theme-switch__btn {
  min-height: 44px;
  padding: 0 6px;
  background: transparent;
  border-radius: var(--radius-device);
  color: var(--color-muted-2);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.theme-switch__btn[aria-pressed="true"] { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
.theme-switch__btn:hover:not(:disabled) { color: var(--color-accent); }
.theme-switch__btn:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }

.content {
  flex: 1;
  padding: 48px;
  width: 100%;
  max-width: none;
}

/* Page title lives in the topbar on screens that are not Inicio. */
.topbar__title {
  margin: 0 auto 0 0;
  font-family: var(--font-display);
  font-size: var(--p-fs-display-lg);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-text);
}

.page-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  gap: 32px;
  align-items: start;
  width: 100%;
}

.page-main { min-width: 0; }

.right-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.rail-card { padding: 24px; }

.rail-card h2,
.rail-card h3 {
  font-family: var(--font-display);
  font-size: var(--p-fs-display-md);
  line-height: 1.5;
  margin: 0 0 12px;
  color: var(--color-text);
}

.rail-companion { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.rail-companion__head { display: flex; align-items: center; gap: 12px; }
.rail-companion h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
.rail-companion__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  font-size: 16px;
}
.rail-companion__copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-muted);
}
.rail-companion__cat { width: 64px; height: 64px; image-rendering: pixelated; }

.rail-events__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rail-events__empty { margin: 0; }
.rail-event {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--color-surface-2);
  border: 0;
  border-radius: 12px;
}
.rail-event__hit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
}
.rail-event__hit strong {
  font-size: var(--p-fs-body);
  line-height: 1.2;
  color: var(--color-text);
}
.rail-event__hit span {
  font-size: var(--p-fs-body-min);
  color: var(--color-muted-2);
}
.rail-event__comm { font-size: var(--p-fs-body-min) !important; }
.rail-event__cta .btn { width: 100%; }
.rail-event__cta .event-extra { margin-top: 6px; text-align: center; }

.auth-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 2px;
}

.auth-cta-stack__hint {
  margin: 0 !important;
  color: var(--color-muted-2);
  font-size: var(--p-fs-body-sm);
  line-height: 1.4;
}

.auth-cta-stack .btn { width: 100%; justify-content: center; }

.auth-cta-stack__what {
  align-self: flex-start;
}

.auth-cta-stack__what-body,
.auth-cta-stack__error {
  margin: 0;
  text-align: center;
  color: var(--color-muted-2);
  font-family: var(--font-body);
  font-size: var(--p-fs-body-sm);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* Footer: one row (Figma «Footer / Compact (panel)»). */
.site-footer,
.player-footer {
  margin-top: auto;
  padding: 0;
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.player-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 20px 48px;
}

.player-footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.player-footer__logo { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; image-rendering: pixelated; }

.player-footer__copy {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--ls-label);
  color: var(--color-muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 16px;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-text);
  border-bottom: 2px solid transparent;
}

.site-footer__links a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

@media (max-width: 860px) {
  .player-footer__inner { flex-direction: column; align-items: flex-start; padding: 20px 16px; }
}

.notices-wrap { position: relative; }

.bell-btn {
  position: relative;
  min-width: 40px;
  min-height: 40px;
  background: var(--navy);
  border: 4px solid var(--night);
}

.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

.notices-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(320px, calc(100vw - 32px));
  max-width: min(320px, calc(100vw - 32px));
  background: var(--navy);
  border: 4px solid var(--card-border);
  box-shadow: 4px 4px 0 var(--color-outline);
  padding: 12px;
  z-index: 30;
}

.notice-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 2px solid var(--card-border);
  box-shadow: none;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 20px;
  text-transform: none;
  color: var(--cream);
}

.notice-item.is-unread {
  border-color: var(--orange);
}

.notice-item.is-unread::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--orange);
  margin-right: 8px;
}

.xp-bar-segmented {
  display: flex;
  gap: 0;
  height: 8px;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  padding: 0;
  background: var(--color-surface-2);
}

.xp-bar-segmented > i { display: none; }

.xp-seg {
  flex: 1;
  background: transparent;
  min-width: 0;
}

.xp-seg.is-on { background: var(--color-accent-muted-1); }

.invite-card .hint { margin: 0 0 8px; color: var(--muted); }

.rail-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.rail-card__head h2 {
  margin: 0;
}

.rail-card__head .link {
  text-align: left;
  min-width: 0;
  max-width: 100%;
  font-size: 16px;
}

/* Rank ladder on Inicio rail */
.ranks-ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ranks-ladder__step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 6px 0 14px;
}

.ranks-ladder__icon {
  width: 48px;
  height: 48px;
  border: 2px solid var(--card-border);
  background: var(--night);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.ranks-ladder__icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.ranks-ladder__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ranks-ladder__name {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--cream);
}

.ranks-ladder__xp {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--muted);
}

.ranks-ladder__rail {
  position: absolute;
  left: 23px;
  top: 54px;
  bottom: -2px;
  width: 2px;
  background: var(--card-border);
  z-index: 0;
}

.ranks-ladder__step:last-child {
  padding-bottom: 0;
}

/* Top 3 podium */
.top3-podium {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.top3-podium__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 2px solid var(--card-border);
  background: var(--night);
}

.top3-podium__row.is-place-1 {
  border-color: var(--orange);
  box-shadow: 3px 3px 0 var(--orange);
}

.top3-place,
.place-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-sm);
  color: var(--night);
  background: var(--cream);
  border: 2px solid var(--night);
  flex-shrink: 0;
}

.place-mark-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--cream);
}

.place-mark__num {
  font-family: var(--font-display);
  font-size: var(--p-fs-display-sm);
  line-height: 1;
  min-width: 1.5ch;
  text-align: right;
  color: var(--cream);
}

.place-mark-cell .place-mark--emoji {
  width: 28px;
  height: 28px;
}

.place-mark--emoji {
  padding: 0;
  background: transparent;
  border: 0;
  object-fit: contain;
  image-rendering: pixelated;
}

.top3-podium__row.is-place-1 .top3-place:not(.place-mark-cell):not(.place-mark--emoji) {
  background: var(--orange);
}

.top3-podium__row.is-place-2 .top3-place:not(.place-mark-cell):not(.place-mark--emoji) {
  background: var(--teal);
  color: var(--cream);
}

.top3-podium .player-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.top3-podium .avatar {
  object-fit: cover;
}

.top3-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
  font-size: 20px;
  color: var(--cream);
}

.top3-xp {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  font-weight: 400;
  color: var(--muted);
}

.top3-empty {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 18px;
}

.top3-cta {
  width: 100%;
  background: transparent;
  color: var(--cream);
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  align-items: stretch;
}

/* Figma 4:351 card: black 3px outline, 16px radius, hard shadow (violet first column, green after). */
.community-card {
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: 16px;
  padding: 0;
  box-shadow: var(--shadow-accent-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.community-card:nth-child(3n + 1) { box-shadow: var(--shadow-accent-2-lg); }

.community-card:hover { border-color: var(--color-muted); }

.community-card__banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 24px 24px 16px;
  border: 0;
  background: var(--color-surface);
  box-shadow: none;
  text-align: left;
  text-transform: none;
  color: var(--cream);
  cursor: pointer;
}

.community-card__banner:hover:not(:disabled) { box-shadow: none; background: var(--color-surface-2); }
.community-card__banner:active:not(:disabled) { transform: none; }

.community-card__icon-wrap {
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.community-card__icon-wrap .comm-icon {
  border: 2px solid var(--color-outline);
  border-radius: 8px;
}

.community-card__who {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

.community-card__name {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.community-card__example { flex-shrink: 0; }

.community-card__count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-label);
  color: var(--color-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

.community-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 24px;
  flex: 1;
}

.community-card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

.community-card__block,
.community-card__event { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.community-card__label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-label);
  color: var(--color-muted);
}

.community-card__line { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--color-text); }
.community-card__when { color: var(--color-muted); }
.community-card__event--empty { opacity: 0.75; }
.community-card__event { align-items: flex-end; text-align: right; }

.community-card__cta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
}
.community-card__view {
  padding: 8px 0;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--ls-label);
  color: var(--color-text);
  cursor: pointer;
}
.community-card__view:hover:not(:disabled) { color: var(--color-accent); }

.game-cover {
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 48px;
  border: 4px solid var(--card-border);
  background: var(--navy);
  display: grid;
  place-items: center;
  color: var(--muted);
}

.game-cover .game-pad { width: 24px; height: 24px; }
.game-banner {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  image-rendering: auto;
}

.community-back { margin-bottom: 12px; }

/* Community Top 5 — the <ol> markers stay off so the text number is the only numbering. */
.community-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--navy);
  border: 4px solid var(--card-border);
  box-shadow: 4px 4px 0 var(--color-outline);
}

.community-header__icon {
  display: grid;
  place-items: center;
  padding: 4px;
  background: var(--night);
  border: 3px solid var(--card-border);
  box-shadow: 3px 3px 0 var(--color-outline);
}

.community-header__icon .comm-icon { border: 0; }

.community-header__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.community-header__copy .page-title {
  margin: 0;
  font-size: 14px;
}

.community-header__cta { justify-self: end; }

@media (max-width: 720px) {
  .community-header {
    grid-template-columns: auto 1fr;
  }
  .community-header__cta {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .community-header__cta .btn { width: 100%; }
}

/* Discord guild icon (64px on cards); fallback is big initials on a teal square. */
.comm-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: cover;
  border: 4px solid var(--card-border);
  background: var(--navy);
}

.comm-initials {
  display: inline-grid;
  place-items: center;
  background: var(--teal);
  color: var(--cream);
  font-family: var(--font-display);
  line-height: 1;
}

.event-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 20px;
  color: var(--muted);
}

.filter-field select {
  min-width: 160px;
  border: 2px solid var(--card-border);
}

.event-cover__badge {
  width: 104px;
  height: 104px;
  object-fit: contain;
}

.event-cover__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Presets keep their calm 140-620 px safe zone; the motif sits right, so bias the crop to it. */
  object-position: 70% 50%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.event-cover.is-fallback {
  background:
    var(--color-surface-2) !important;
}

.claim-xp__main,
.claim-rankup { color: var(--gold); }

.panel-orange { border-color: var(--orange) !important; }

.auth-menu-lang {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  font-size: 16px;
  color: var(--muted);
}

.section-head h2,
.page-title {
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.page-caption {
  color: var(--color-muted-2);
  margin: 0 0 16px;
  font-size: var(--p-fs-body-sm);
  overflow-wrap: anywhere;
}

.section { margin-bottom: 32px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

.section-nav-link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.section-nav-link:hover h2,
.section-nav-link:focus-visible h2 {
  color: var(--color-cyan);
}
.section-nav-link:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 4px;
}

.music-stats__empty {
  padding: 16px;
  text-align: center;
}

/* .card / .panel come from css/base.css (3px outline, hard shadow); this file no longer flattens them. */
.panel { padding: 24px; }

/* Next step (Figma 70:13822): eyebrow, badge + title row, button. */
.next-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px;
}

.next-step__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-muted-2);
}

.next-step__row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.next-step__row img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: contain;
}

.next-step__title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
}

/* Event cards */
.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.event-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.event-grid--home { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; align-items: stretch; }

/* Figma 3:209 Event card: flat, 24px padded, no cover. */
.event-card--home {
  padding: 24px;
  gap: 16px;
}
.event-card--home .event-card__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--ls-label);
  color: var(--color-muted-2);
}
.event-card--home .event-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 30px;
}
.event-card--home .event-meta { margin: 0; padding: 0; }
.event-card__badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 32px; color: var(--color-text); font-family: var(--font-body); font-size: 13px; line-height: 1.3; }
.event-card__badge img { flex: none; width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.event-card__badge span { min-width: 0; overflow-wrap: anywhere; }

.event-card:hover .event-title__btn,
.event-card:focus-within .event-title__btn { color: var(--color-accent); }

.event-cover {
  height: 148px;
  max-height: 160px;
  background: var(--color-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 0;
}

.detail-cover .event-cover { height: 240px; max-height: none; border: 0; }

.event-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.event-comm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.2;
  color: var(--teal);
}

.event-phase {
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  letter-spacing: 0;
  padding: 3px 6px;
  border: 2px solid var(--card-border);
  color: var(--muted);
}

.event-phase--live {
  border-color: var(--orange);
  color: var(--orange);
}

.event-phase--past {
  border-color: var(--muted);
  color: var(--muted);
}

.event-comm__icon {
  width: 18px;
  height: 18px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--card-border);
  image-rendering: auto;
}

.event-comm__initials {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: var(--p-fs-body-min);
  line-height: 1;
  color: var(--cream);
  background: var(--night);
  border: 1px solid var(--card-border);
}

.event-comm > span:not(.event-phase):not(.event-comm__icon):not(.event-comm__initials) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
}

.event-title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.event-title__btn {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  text-align: left;
  text-decoration: none;
  letter-spacing: 0;
  padding: 0;
  min-height: 0;
}

.event-meta, .event-count { color: var(--color-muted-2); font-family: var(--font-mono); font-size: var(--p-fs-label); letter-spacing: var(--ls-label);}
.event-reward { font-family: var(--font-mono); font-size: var(--p-fs-body-sm); color: var(--color-text); }

.event-body .btn,
.event-body .btn-static {
  margin-top: auto;
  width: 100%;
}

/* Unirme is Secondary (outline) and as wide as its label; the solid green is kept for the main CTA of the screen. */
.event-body .btn-join {
  width: auto;
  align-self: flex-start;
}

.event-extra { margin-top: 6px; text-align: center; }

/* How / progress */
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.how-step {
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-card);
  padding: 16px;
}

.how-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-accent-muted-1);
  color: var(--color-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-sm);
  margin-bottom: 8px;
}

.xp-bar {
  height: 8px;
  background: var(--color-surface-2);
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0 8px;
  display: flex;
  gap: 0;
  padding: 0;
}

.xp-bar > i {
  display: block;
  height: 100%;
  background: var(--color-accent-muted-1);
}

.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  border: 2px solid var(--teal);
  color: var(--teal);
  padding: 4px 6px;
}

.progress-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--color-muted-2);
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  letter-spacing: 0;
}

.progress-stats span {
  padding: 4px 10px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
}

.progress-stats strong { color: var(--color-text); font-weight: 500; }

/* The Inicio podium is the Ranking podium (.rank-podium, below): one component. */
.home-panel .top3-cta {
  display: block;
  max-width: 280px;
  width: 100%;
  margin: 16px auto 0;
}

/* Live / games */
.playing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.playing-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  border-radius: 16px;
  background: var(--color-surface-2);
  padding: 16px;
  box-shadow: none;
}

.playing-card__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.playing-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.playing-card__meta strong {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--p-fs-body);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playing-card__game {
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  color: var(--color-muted-2);
}

.playing-card__server {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--p-fs-body-sm);
  color: var(--color-muted-2);
  min-width: 0;
}

.playing-card__server strong {
  color: var(--color-text);
  font-weight: 400;
}

.playing-card__join {
  width: 100%;
  margin-top: auto;
}

.playing-card__hit {
  display: grid;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.live-join-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: end center;
}

.live-join-sheet__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--color-scrim);
}

.live-join-sheet__panel {
  position: relative;
  width: min(420px, 100%);
  background: var(--navy);
  border: 3px solid var(--cream);
  padding: 16px;
  display: grid;
  gap: 12px;
  box-shadow: 6px 6px 0 var(--night);
}
.live-join-sheet__kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  color: var(--muted);
}
.live-join-sheet__who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.live-join-sheet__avatar {
  flex-shrink: 0;
}
.live-join-sheet__avatar .avatar,
.live-join-sheet__avatar .avatar-lg {
  width: 72px;
  height: 72px;
}
.live-join-sheet__meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.live-join-sheet__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-join-sheet__game {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--orange);
}
.live-join-sheet__servers {
  display: grid;
  gap: 8px;
}
.live-join-sheet__choose {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  color: var(--muted);
}
.live-join-sheet__server-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.live-join-sheet__server {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 2px solid var(--card-border);
  background: var(--night);
}
.live-join-sheet__server-meta {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.live-join-sheet__server strong {
  font-weight: 400;
  color: var(--cream);
  font-size: 18px;
  font-family: var(--font-body);
}
.live-join-sheet__join {
  width: 100%;
}

.live-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--p-fs-label);
  font-family: var(--font-mono);
  vertical-align: middle;
}

.playing-row, .games-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.playing-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--card-border);
  background: var(--navy);
  padding: 6px 10px 6px 6px;
}

.playing-chip:hover { border-color: var(--cream); }

.community-grid--inicio {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.avatar {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-2);
  flex-shrink: 0;
}

/* Fallback: initial on a coloured circle (never a cat). */
.avatar-initial {
  display: inline-grid;
  place-items: center;
  background: var(--av, var(--color-surface-2));
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-sm);
  line-height: 1;
}

/* Anonymous player (no public-name opt-in): one neutral circle, no initial. */
.avatar-anon { background: var(--color-muted); }
.player-cell--anon { color: var(--color-muted-2); }
.toggle-help { margin: -4px 0 12px; font-size: 18px; line-height: 1.3; }

.avatar-lg { width: 72px; height: 72px; }
.avatar-lg.avatar-initial { font-size: 20px; }
.avatar-xl { width: 112px; height: 112px; }
.avatar-xl.avatar-initial { font-size: 28px; }
.avatar-fill { width: 100%; height: 100%; border: 0; }

.avatar-circle {
  border-radius: 50% !important;
  overflow: hidden;
}

.avatar-circle img,
.avatar.avatar-circle {
  border-radius: 50% !important;
}

.game-tile {
  flex: 0 0 112px;
  width: 112px;
  min-width: 0;
  border: 2px solid var(--card-border);
  background: var(--navy);
  box-shadow: none;
  padding: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 18px;
  text-transform: none;
}

.game-tile:hover:not(:disabled) { border-color: var(--cream); box-shadow: none; }

.game-tile__cover {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  height: 88px;
  background: var(--navy);
  color: var(--muted);
  border-bottom: 2px solid var(--card-border);
}

.game-tile__cover .game-banner,
.game-tile__cover img {
  object-fit: cover;
  object-position: center 30%;
}

.game-tile__cover .game-pad { width: 32px; height: 32px; }

.game-tile__name {
  display: block;
  padding: 6px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-caption { margin-top: 8px; color: var(--color-muted-2); font-size: var(--p-fs-body-sm); }

/* Long URLs or tx hashes in captions must never widen a phone: wrap anywhere as backup. */
.page-caption, .games-caption { overflow-wrap: anywhere; }

.live-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  background: var(--orange);
  padding: 4px 6px;
  animation: blink 1s steps(2) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.live-card {
  border: 4px solid var(--card-border);
  background: var(--navy);
  padding: 12px;
}

.live-card h3 {
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-sm);
  margin: 8px 0;
}

/* Tabs / filters */
.tabs, .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 14px;
}

.tab, .filter-btn {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  background: var(--night);
  color: var(--color-text);
  border: 2px solid var(--cream);
  margin-right: -2px;
  box-shadow: none;
  padding: 10px 12px;
}

/* Active: grey fill, text color, 3px accent bar (same language as the bottom tab bar). */
.tab.is-active, .filter-btn.is-active {
  background: var(--color-surface-2);
  color: var(--color-text);
  z-index: 1;
}

.tab.is-active::before, .filter-btn.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  border-radius: 0 0 2px 2px;
  background: var(--color-accent);
}

/* Ranking */
.ranking-page { width: 100%; }

.rank-hint { margin: 12px 0 0; color: var(--muted); font-size: 20px; }

.player-cell__name { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }

/* Ranking pagination: 50 rows per page, real links (?page=N), keyboard friendly. */
.rank-summary { margin: 0 0 8px; color: var(--muted); font-size: 18px; }
.rank-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 16px;
}
.rank-pager__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rank-pager__gap { align-self: center; min-width: 20px; text-align: center; color: var(--muted); }
.rank-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 2px solid var(--cream);
  background: var(--night);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  text-decoration: none;
}
.rank-pager a.rank-pager__link:hover { background: var(--color-surface-2); }
.rank-pager__link.is-current { background: var(--color-surface-2); box-shadow: inset 0 -3px 0 var(--color-accent); }
.rank-pager__link.is-disabled { opacity: 0.45; cursor: not-allowed; }

.player-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
  margin-left: 12px;
  padding: 0 10px;
  background: var(--night);
  border: 4px solid var(--card-border);
  color: var(--muted);
}

.search-box:focus-within { border-color: var(--cream); color: var(--cream); }
.search-box__icon { width: 16px; height: 16px; flex-shrink: 0; image-rendering: pixelated; }
.search-box .search-input { border: 0; padding: 8px 0; min-width: 0; outline: none; }

.search-input {
  flex: 1;
  min-width: 160px;
  font-family: var(--font-body);
  font-size: 20px;
  background: var(--night);
}

/* Profile */
.profile-banner {
  width: 100%;
  height: 140px;
  overflow: hidden;
  border: 4px solid var(--card-border);
  background: var(--color-well);
  margin-bottom: 12px;
}

.profile-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
}

.profile-hero {
  margin-bottom: 18px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.profile-public {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.profile-crumb {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-muted-2);
}

.profile-back { margin: 0 0 8px; }

.profile-hero__stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}

.profile-hero__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 14 / 3; /* Figma 6:837: ~1116x236 strip */
  max-height: 240px;
  overflow: hidden;
  border: 3px solid var(--color-outline);
  border-radius: 16px;
  background: var(--color-well);
  box-shadow: none;
}

.profile-hero__banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
  transform-origin: center center;
}

.profile-hero__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  align-items: start;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding-top: 16px;
}

/* Avatar sits inside the identity card, below the banner. */
.profile-hero__avatar {
  margin-top: 0;
}

.profile-hero__avatar .avatar,
.profile-hero__avatar .avatar-xl {
  width: 112px;
  height: 112px;
  border: 4px solid var(--card-border);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--color-outline);
  background: var(--color-avatar-well);
}

.profile-hero__avatar .avatar-xl.avatar-initial { font-size: 28px; }

.profile-hero__meta {
  min-width: 0;
}

.profile-hero__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.profile-hero__name {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0;
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

.profile-hero__title-row .rank-badge--xl {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 2px;
  border-radius: var(--radius-button);
  background: var(--color-surface-2);
}

.profile-hero__title-row .rank-badge--xl .rank-badge__icon {
  width: 24px;
  height: 24px;
}

.profile-hero__title-row .rank-badge--xl .rank-badge__name {
  font-size: var(--p-fs-pixel-min);
  color: var(--color-text);
}

.profile-hero__handle {
  color: var(--muted);
  font-size: var(--p-fs-body-sm);
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.profile-hero__handle-main {
  color: var(--cream);
  font-family: var(--font-display);
  font-size: var(--p-fs-body-sm);
}
.profile-hero__handle-src {
  margin-left: auto;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  letter-spacing: 0;
}

.profile-hero__comms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.profile-comm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--card-border);
  background: var(--navy);
  padding: 4px 8px;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  color: var(--cream);
}

.profile-comm-chip__icon {
  width: 16px;
  height: 16px;
  object-fit: cover;
  image-rendering: auto;
}

.profile-hero__xp { margin: 6px 0 8px; width: 100%; max-width: none; }

.profile-hero__xp-bar { height: 10px; }

.profile-hero__xp-caption {
  color: var(--muted);
  font-size: var(--p-fs-body-min);
  margin-top: 4px;
}

.profile-hero__bio {
  color: var(--muted);
  margin: 0 0 8px;
  max-width: 42ch;
}

.profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.profile-hero__stats { margin: 0; }

.profile-hero__stats .stat-cell {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: 16px 8px;
}

.profile-hero__stats .stat-cell strong.is-zero { color: var(--color-muted-2); }
.profile-hero__stats .stat-cell strong.is-positive { color: var(--color-accent); }

.profile-hero__shelf { margin-bottom: 0; }

.profile-shelf-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.profile-shelf-badge {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 6px;
  border: 2px solid var(--card-border);
  background: var(--night);
  box-shadow: none;
  display: grid;
  place-items: center;
}

.profile-shelf-badge img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.profile-shelf-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}

.profile-shelf-empty p { margin: 0; }

.profile-edit-card { margin-top: 12px; }
.profile-edit-fields { margin-top: 14px; }

.passport-repo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.passport-repo {
  border: 2px solid var(--card-border);
  background: var(--night);
  padding: 10px 12px;
}

.passport-repo__name {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--teal);
  word-break: break-all;
}

.passport-repo__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--p-fs-body-min);
}

.passport-repo__desc {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.profile-header {
  display: flex;
  gap: 14px;
  align-items: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 16px;
}

.profile-hero__stats.stats-grid,
.profile-hero__shelf {
  margin: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .profile-hero__banner {
    aspect-ratio: 13 / 5; /* Figma 44:9970: ~358x136 */
    max-height: none;
  }
  .profile-hero__name { font-size: 18px; }
  .profile-hero__body {
    grid-template-columns: 1fr;
    margin-top: 0;
  }
  .profile-hero__avatar {
    margin-top: -48px;
    justify-self: start;
  }
  .profile-hero__avatar .avatar,
  .profile-hero__avatar .avatar-xl {
    width: 96px;
    height: 96px;
  }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.stat-cell {
  border: 2px solid var(--card-border);
  background: var(--navy);
  padding: 10px 8px;
  text-align: center;
}

.stat-cell span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  color: var(--muted);
  margin-bottom: 6px;
}

.stat-cell strong {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--orange);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.social-chip {
  border: 2px solid var(--teal);
  color: var(--teal);
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  padding: 4px 6px;
}

.crop-frame {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border: 4px solid var(--card-border);
  background: var(--color-well);
  cursor: grab;
  touch-action: none;
}

.crop-frame:active { cursor: grabbing; }

.crop-zoom { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0; }
.crop-zoom button { min-width: 44px; min-height: 44px; }
.crop-zoom__slider { flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 0; accent-color: var(--color-accent); background: transparent; cursor: pointer; }
.crop-zoom__slider:focus-visible { outline: 2px solid var(--color-accent-2, var(--color-accent)); outline-offset: 4px; }
.crop-zoom__label { min-width: 4ch; text-align: right; color: var(--color-accent); font-family: var(--font-display); font-size: var(--fs-label); }
.banner-range { margin: var(--space-2, 8px) 0 0; font-size: var(--fs-label); color: var(--color-muted); }
.banner-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-3); }
@media (max-width: 720px) { .profile-edit-card { padding: var(--space-4); } }

.crop-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
}

.link-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--cream);
  text-transform: none;
}

.link-row:active { transform: none; }

.banner-carousel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.banner-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  background: var(--color-well);
  padding: 4px;
  border: 2px solid var(--card-border);
}

.banner-option {
  display: block;
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  box-shadow: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-well);
  min-width: 0;
}

.banner-option img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  image-rendering: pixelated;
}

.banner-option.is-selected {
  border-color: var(--orange);
  outline: none;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
}

.badge-cell {
  aspect-ratio: 1;
  border: 2px solid var(--cream);
  background: var(--night);
  display: grid;
  place-items: center;
  box-shadow: none;
  padding: 6px;
}

.badge-cell img { width: 36px; height: 36px; object-fit: contain; }
.badge-cell.is-empty { color: var(--muted); font-size: 22px; cursor: default; border-color: var(--muted); }

.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px solid var(--night);
}

.settings-block {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 2px solid var(--night);
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  border: 2px solid var(--night);
  padding: 8px;
}

.toggle {
  width: 40px;
  height: 20px;
  background: var(--night);
  border: 2px solid var(--cream);
  position: relative;
  padding: 0;
  box-shadow: none;
}

.toggle.is-on { background: var(--teal); }
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--cream);
}
.toggle.is-on::after { left: 22px; }

.logout {
  background: transparent;
  border: 2px solid var(--orange);
  color: var(--orange);
  box-shadow: none;
  margin-top: 8px;
}

/* /tirly/u/:handle skeleton — placeholder banner, hero card and stats while the lookup runs. */
.profile-skeleton { display: grid; gap: 16px; }
.skel {
  background: var(--color-surface-2);
  border-radius: 12px;
  animation: skel-pulse 1.2s ease-in-out infinite alternate;
}
.skel--banner { height: 160px; }
.skel--card { height: 220px; }
.profile-skeleton__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.skel--stat { height: 72px; }
@keyframes skel-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}
@media (max-width: 560px) {
  .profile-skeleton__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.profile-signed-out-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 340px);
}

.profile-signed-out {
  position: relative;
  z-index: 1;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}

.profile-signed-out__title {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.profile-signed-out img {
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
  object-fit: contain;
}

.empty {
  text-align: center;
  padding: 32px 16px;
}

.empty img {
  width: 100px;
  height: 100px;
  margin: 0 auto 12px;
  object-fit: contain;
}

/* Auth */
.auth-wrap { position: relative; }

.auth-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--navy);
  border: 4px solid var(--card-border);
  min-width: 180px;
  padding: 6px;
  z-index: 30;
  box-shadow: 4px 4px 0 var(--night);
}

.auth-menu button {
  display: block;
  width: 100%;
  text-align: left;
  box-shadow: none;
  margin-bottom: 4px;
}

.avatar-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--color-outline);
  background: var(--color-surface-2);
  overflow: hidden;
  border-radius: 50%;
}

.avatar-btn:hover,
.avatar-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Detail / checklist */
.detail-cover { margin-bottom: 0; }
.checklist { list-style: none; margin: 14px 0; padding: 0; }
.checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border: 2px solid var(--night);
  margin-bottom: 6px;
}
.checklist li.is-done { border-color: var(--teal); }
.checklist .mark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--teal);
  display: grid;
  place-items: center;
  font-size: var(--p-fs-body-min);
  color: var(--teal);
  flex-shrink: 0;
}
.checklist li.is-done .mark {
  background: var(--teal);
  color: var(--cream);
}
.notice { color: var(--muted); font-size: 16px; }

/* Modal */
.backdrop {
  position: fixed;
  inset: 0;
  background: var(--night);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 50;
}

.modal {
  width: min(440px, 100%);
  background: var(--navy);
  border: 4px solid var(--card-border);
  padding: 16px;
  box-shadow: 8px 8px 0 var(--night);
  max-height: 90vh;
  overflow-y: auto;
}

.modal h3 {
  font-family: var(--font-display);
  font-size: 12px;
  margin: 0 0 10px;
}

.community-list { list-style: none; margin: 12px 0 0; padding: 0; }
.community-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 2px solid var(--night);
}

/* —— Música / Listening boards (arcade now-playing, not plain lists) —— */
.music-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.music-panel {
  --listen-accent: var(--color-accent-muted-1);
  background: var(--color-surface-2);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  padding: 16px;
  margin-bottom: 14px;
}
.music-panel--live {
  background: var(--color-surface-2);
}

/* Música screen (Figma 4:490): its panels are k-cards; the same panel on Inicio stays flat. */
.music-page .music-panel {
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: 16px;
  box-shadow: var(--shadow-accent-2-lg);
  padding: 24px;
  margin-bottom: 24px;
}
.music-page .music-panel--live { box-shadow: var(--shadow-accent-lg); }
.music-panel--recs {
  margin-bottom: 0;
}
.music-panel--tops .music-tops__tabs {
  margin-bottom: 12px;
}
.music-panel--tops .listening-more {
  margin-top: 12px;
}
.music-panel--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 20px 14px;
}
.music-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.music-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--cream);
  letter-spacing: 0;
}
.music-eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}
.music-eq i {
  display: block;
  width: 4px;
  background: var(--color-accent);
  border: 1px solid var(--color-outline);
  animation: music-eq-pulse 0.9s steps(3, end) infinite;
}
.music-eq i:nth-child(1) { height: 6px; animation-delay: 0s; }
.music-eq i:nth-child(2) { height: 12px; animation-delay: 0.12s; }
.music-eq i:nth-child(3) { height: 8px; animation-delay: 0.24s; }
.music-eq i:nth-child(4) { height: 14px; animation-delay: 0.08s; }
.music-eq i:nth-child(5) { height: 7px; animation-delay: 0.2s; }
@keyframes music-eq-pulse {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .music-eq i { animation: none; transform: none; }
}

.music-now {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.music-now__card {
  --listen-accent: var(--color-accent-muted-1);
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  min-height: 118px;
  padding: 12px;
  background: var(--color-surface);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.music-now__art {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  width: 56px;
  height: 56px;
  background: transparent;
  border: 0;
}
/* The Figma turntable is 78×67: it is scaled around its centre to sit in the 56px (48px on phones) art box. */
.music-now__art .vinyl-s { transform: scale(0.72); transform-origin: center; }
/* Genre palette (Figma «Genre», tokens.css). Every genre id the JS can emit (catalog ids + «neutral») maps to its
   --genre-<key>-* set: ring/label/accent → -strong, tinted plate → -base, text on the plate → -on-base.
   Same mapping as genreKey() in music-genre.mjs; «otro» is the neutral fallback. */
.vinyl-s--pop, .now-row--pop, .genre-badge--pop { --genre-accent: var(--genre-pop-strong); --genre-tint: var(--genre-pop-base); --genre-on-tint: var(--genre-pop-on-base); --genre-on-accent: var(--genre-pop-on-strong); }
.vinyl-s--rock, .now-row--rock, .genre-badge--rock { --genre-accent: var(--genre-rock-strong); --genre-tint: var(--genre-rock-base); --genre-on-tint: var(--genre-rock-on-base); --genre-on-accent: var(--genre-rock-on-strong); }
.vinyl-s--indie, .now-row--indie, .genre-badge--indie,
.vinyl-s--alternative, .now-row--alternative, .genre-badge--alternative,
.vinyl-s--shoegaze_dream, .now-row--shoegaze_dream, .genre-badge--shoegaze_dream { --genre-accent: var(--genre-indie-strong); --genre-tint: var(--genre-indie-base); --genre-on-tint: var(--genre-indie-on-base); --genre-on-accent: var(--genre-indie-on-strong); }
.vinyl-s--electronic, .now-row--electronic, .genre-badge--electronic { --genre-accent: var(--genre-electronica-strong); --genre-tint: var(--genre-electronica-base); --genre-on-tint: var(--genre-electronica-on-base); --genre-on-accent: var(--genre-electronica-on-strong); }
.vinyl-s--hiphop, .now-row--hiphop, .genre-badge--hiphop { --genre-accent: var(--genre-hiphop-strong); --genre-tint: var(--genre-hiphop-base); --genre-on-tint: var(--genre-hiphop-on-base); --genre-on-accent: var(--genre-hiphop-on-strong); }
.vinyl-s--rnb_soul, .now-row--rnb_soul, .genre-badge--rnb_soul { --genre-accent: var(--genre-rnb-strong); --genre-tint: var(--genre-rnb-base); --genre-on-tint: var(--genre-rnb-on-base); --genre-on-accent: var(--genre-rnb-on-strong); }
.vinyl-s--jazz, .now-row--jazz, .genre-badge--jazz,
.vinyl-s--classical, .now-row--classical, .genre-badge--classical { --genre-accent: var(--genre-jazz-strong); --genre-tint: var(--genre-jazz-base); --genre-on-tint: var(--genre-jazz-on-base); --genre-on-accent: var(--genre-jazz-on-strong); }
.vinyl-s--latin, .now-row--latin, .genre-badge--latin { --genre-accent: var(--genre-latino-strong); --genre-tint: var(--genre-latino-base); --genre-on-tint: var(--genre-latino-on-base); --genre-on-accent: var(--genre-latino-on-strong); }
.vinyl-s--metal, .now-row--metal, .genre-badge--metal { --genre-accent: var(--genre-metal-strong); --genre-tint: var(--genre-metal-base); --genre-on-tint: var(--genre-metal-on-base); --genre-on-accent: var(--genre-metal-on-strong); }
.vinyl-s--kpop_jpop, .now-row--kpop_jpop, .genre-badge--kpop_jpop { --genre-accent: var(--genre-kpop-strong); --genre-tint: var(--genre-kpop-base); --genre-on-tint: var(--genre-kpop-on-base); --genre-on-accent: var(--genre-kpop-on-strong); }
.vinyl-s--folk, .now-row--folk, .genre-badge--folk,
.vinyl-s--other, .now-row--other, .genre-badge--other,
.vinyl-s--neutral, .now-row--neutral, .genre-badge--neutral { --genre-accent: var(--genre-otro-strong); --genre-tint: var(--genre-otro-base); --genre-on-tint: var(--genre-otro-on-base); --genre-on-accent: var(--genre-otro-on-strong); }

.music-now__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.music-now__genre {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-muted-2);
  background: transparent;
  border: 0;
  padding: 0;
}
.music-now__track {
  font-size: var(--p-fs-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-now__artist {
  color: var(--color-muted-2);
  font-size: var(--p-fs-body-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-now__listener {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--color-line);
  min-width: 0;
}
.music-now__who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.music-now__who strong {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-now__who span {
  color: var(--muted);
  font-size: var(--p-fs-body-min);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.music-chart__row {
  --listen-accent: var(--teal);
  --chart-pct: 40%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--night);
  border: 3px solid var(--card-border);
  border-left: 6px solid var(--listen-accent);
  box-shadow: 3px 3px 0 var(--color-outline);
}
.music-chart__rank {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 9px;
  background: var(--cream);
  color: var(--night);
  border: 2px solid var(--night);
}
.music-chart__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.music-chart__titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.music-chart__titles strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}
.music-chart__titles span {
  color: var(--muted);
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-chart__track {
  height: 8px;
  background: var(--color-track-well);
  border: 2px solid var(--night);
  position: relative;
  overflow: hidden;
}
.music-chart__track i {
  display: block;
  height: 100%;
  width: var(--chart-pct);
  background: var(--listen-accent);
  box-shadow: inset -2px 0 0 var(--color-track-edge);
}
.music-chart__genre {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--night);
  background: var(--listen-accent);
  border: 2px solid var(--night);
  padding: 3px 5px;
  white-space: nowrap;
}
.music-chart__mins {
  color: var(--gold);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.music-stats__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.music-stats__split .music-panel { margin-bottom: 0; }

.music-recs { margin-bottom: 0; }
.music-recs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.music-recs__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.music-recs__genre {
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  padding: 6px 8px;
  border: 2px solid var(--card-border);
  background: var(--night);
  color: var(--cream);
}
.music-recs__summary {
  color: var(--muted);
  margin: 0 0 14px;
  max-width: 52ch;
}
.music-recs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.music-rec-card {
  --listen-accent: var(--teal);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 128px;
  padding: 12px;
  background: var(--night);
  border: 3px solid var(--listen-accent);
  box-shadow: 4px 4px 0 var(--color-outline);
}
.music-rec-card__genre {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  color: var(--night);
  background: var(--listen-accent);
  border: 2px solid var(--night);
  padding: 2px 5px;
}
.music-rec-card__title {
  font-size: 20px;
  line-height: 1.15;
}
.music-rec-card__artist { color: var(--muted); font-size: 16px; }
.music-rec-card__reason {
  margin-top: auto;
  color: var(--cream);
  font-size: 16px;
  opacity: 0.85;
}

/* Genre accent of the Música cards, chart bars and recs: --genre-<key>-strong (tokens.css, both themes). «other» and the neutral fallback share «otro». */
.music-now__card--pop,
.music-chart__row--pop,
.music-rec-card--pop { --listen-accent: var(--genre-pop-strong); }
.music-now__card--rock,
.music-chart__row--rock,
.music-rec-card--rock { --listen-accent: var(--genre-rock-strong); }
.music-now__card--electronic,
.music-chart__row--electronic,
.music-rec-card--electronic { --listen-accent: var(--genre-electronica-strong); }
.music-now__card--hiphop,
.music-chart__row--hiphop,
.music-rec-card--hiphop { --listen-accent: var(--genre-hiphop-strong); }
.music-now__card--latin,
.music-chart__row--latin,
.music-rec-card--latin { --listen-accent: var(--genre-latino-strong); }
.music-now__card--indie,
.music-chart__row--indie,
.music-rec-card--indie { --listen-accent: var(--genre-indie-strong); }
.music-now__card--metal,
.music-chart__row--metal,
.music-rec-card--metal { --listen-accent: var(--genre-metal-strong); }
.music-now__card--other,
.music-chart__row--other,
.music-rec-card--other,
.music-now__card--neutral,
.music-chart__row--neutral,
.music-rec-card--neutral { --listen-accent: var(--genre-otro-strong); }

.listening-more { margin-top: 4px; margin-bottom: 8px; }

@media (max-width: 820px) {
  .music-stats__split { grid-template-columns: 1fr; }
  .music-chart__row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank main mins"
      "rank main genre";
  }
  .music-chart__rank { grid-area: rank; }
  .music-chart__main { grid-area: main; }
  .music-chart__mins { grid-area: mins; }
  .music-chart__genre { grid-area: genre; justify-self: end; }
}

@media (max-width: 420px) {
  .music-chart__row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank main main"
      "rank mins genre";
  }
  .music-chart__rank { grid-area: rank; }
  .music-chart__main { grid-area: main; }
  .music-chart__mins { grid-area: mins; justify-self: start; }
  .music-chart__genre { grid-area: genre; justify-self: end; }
}

.game-roster {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.game-roster__back {
  align-self: flex-start;
}

.game-roster__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-roster__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--night);
  background: var(--navy);
}

.game-roster__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.game-roster__who .avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.game-roster__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.game-roster__name {
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-sm);
  color: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-roster__status,
.game-roster__mins {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.2;
}

.game-roster__row.is-live .game-roster__status {
  color: var(--teal);
}

.game-roster__cat.pose-img,
.game-roster__cat {
  flex-shrink: 0;
  width: 48px !important;
  height: 48px !important;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}

.game-panel { max-width: min(440px, calc(100vw - 32px)); max-height: min(80dvh, 640px); overflow: auto; }
.game-panel__section {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--cream);
}
.game-panel__stats { margin-top: 8px; }
.game-panel__list { margin-top: 4px; }
.game-panel__row {
  align-items: center;
  flex-wrap: wrap;
}
.game-panel__who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 140px;
}
.game-panel__who .avatar,
.game-panel__who .comm-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.game-panel__meta {
  color: var(--muted);
  font-size: 16px;
  flex: 1 1 100px;
  text-align: right;
}

/* Demo */
/* Docked bottom-left over the sidebar (footer lives in the content column); the sidebar CTA moves up to stay clear. */
.demo-bar {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 40;
  background: var(--navy);
  border: 4px solid var(--cream);
  padding: 10px;
  max-width: calc(var(--sidebar) - 24px);
  text-align: center;
  font-size: var(--p-fs-body-min);
  box-shadow: 4px 4px 0 var(--night);
}

.demo-bar summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  color: var(--muted);
  list-style: none;
}

.demo-bar summary::-webkit-details-marker { display: none; }

@media (min-width: 768px) and (max-width: 1023px) {
  .demo-bar { padding: 6px 4px; border-width: 2px; left: 8px; max-width: calc(var(--sidebar) - 16px); }
}

.demo-opts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.demo-opts button {
  font-size: var(--p-fs-pixel-min);
  box-shadow: none;
  text-align: left;
}

.demo-opts button.is-active { background: var(--orange); }

/* Mobile bottom nav (<768): 6 destinations, icon over label, >= 44px targets, safe-area aware. */
/* Bar height = 6 + 58 (button min-height) + 6 padding + 3 border; add the safe-area inset where it is used. */
:root { --bottom-tab-h: 73px; --demo-bar-bottom: 80px; --demo-bar-h: 72px; } /* demo badge: bottom offset and collapsed height (phones) */
.bottom-tab {
  /* Equal left/right padding keeps the first and last active pill off the screen edge. */
  padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 3px solid var(--color-outline); /* Figma 73:21116: 3px outline on top of the bar */
  z-index: 35;
  justify-content: space-between;
  gap: 0;
}

.bottom-tab button {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  color: var(--color-muted);
}

/* Figma 73:21936: Comunidades keeps a fixed 76px cell, the other five share the rest. */
.bottom-tab [data-nav="comunidades"] { flex: 0 0 76px; }

/* The pill is what lights up: icon over label, 5px/2px padding, 4px gap. */
.bottom-tab__pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 2px;
  border-radius: 8px;
  max-width: 100%; /* P9: the active pill (3px border) never outgrows a 53px tab at 360 */
}

.bottom-tab button:hover:not(:disabled),
.bottom-tab button:focus-visible {
  box-shadow: none;
  transform: none;
  color: var(--color-accent);
}

.bottom-tab__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.bottom-tab .ui-icon { width: 24px; height: 24px; flex-basis: 24px; }
/* Figma tab icons (73:21116), painted as masks so they follow currentColor. */
.bottom-tab .ui-icon--home { --ui-icon: url("/tierly/assets/icons/tab-home.svg"); }
.bottom-tab .ui-icon--events { --ui-icon: url("/tierly/assets/icons/tab-events.svg"); }
.bottom-tab .ui-icon--communities { --ui-icon: url("/tierly/assets/icons/tab-communities.svg"); }
.bottom-tab .ui-icon--music { --ui-icon: url("/tierly/assets/icons/tab-music.svg"); }
.bottom-tab .ui-icon--ranking { --ui-icon: url("/tierly/assets/icons/tab-ranking.svg"); }
.bottom-tab .ui-icon--profile { --ui-icon: url("/tierly/assets/icons/tab-profile.svg"); }

.bottom-tab__label {
  display: block;
  font-size: 11px;
  line-height: 1.25; /* overflow:hidden would clip the descenders of "Ranking" at line-height 1 */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-tab__badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 10px;
  line-height: 14px;
}

/* Active (Figma 73:21936): grey pill with a 3px outline border and offset shadow, 3px accent bar on top. */
.bottom-tab button.is-active,
.bottom-tab button.is-active:hover:not(:disabled) { color: var(--color-text); }

.bottom-tab button.is-active .bottom-tab__pill {
  background: var(--color-surface-2);
  border: 3px solid var(--color-outline);
  box-shadow: 3px 3px 0 var(--color-outline);
  color: var(--color-text);
}

.bottom-tab button.is-active .bottom-tab__pill::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  height: 3px;
  background: var(--color-accent);
}

@media (max-width: 767px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .bottom-tab { display: flex; }
  .topbar__brand { display: inline-flex; gap: 12px; margin-right: auto; }

}

@media (max-width: 1100px) {
  .page-columns { grid-template-columns: 1fr; }
  .right-rail { order: 2; }
}

@media (max-width: 860px) {
  .how-steps { grid-template-columns: 1fr; }
  .hero-banner { min-height: 220px; }
  .hero-banner__body { margin: 12px; padding: 12px; max-width: none; width: calc(100% - 24px); }
  .hero-banner__cat { display: none; }
  .hero-banner__body h1 { font-size: var(--p-fs-display-md); }
  .hero-banner__body p,
  .hero-banner__sub { font-size: 18px; margin-bottom: 8px; }
  .hero-banner__body .auth-cta-stack__hint { margin: 0; }
  .banner-track { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-bar { bottom: var(--demo-bar-bottom); left: 12px; max-width: 220px; }
  .player-footer,
  .site-footer { text-align: center; }
  .content { padding: 20px 16px; }
  .topbar {
    gap: 8px;
    padding: 10px 12px;
  }
  .topbar__title {
    font-size: var(--p-fs-display);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar .btn {
    padding: 10px 12px;
    flex-shrink: 0;
  }
  .community-card__games { flex-wrap: wrap; }
  .profile-signed-out-wrap {
    min-height: 380px;
    padding: 72px 0 12px;
  }
  .profile-signed-out {
    width: 100%;
    max-width: none;
  }
  .profile-signed-out img {
    width: 96px;
    height: 96px;
  }
}

/* Now playing · phones: card in normal flow, 48px cover, one-line ellipsis, content clears the tab bar. */
@media (max-width: 480px) {
  .music-now { grid-template-columns: minmax(0, 1fr); }
  .music-now__card {
    position: static;
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 0;
  }
  .music-now__art { width: 48px; height: 48px; }
  .music-now__art .vinyl-s { transform: scale(0.6); }
  .music-now__track,
  .music-now__artist {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Mobile top bar, after the 860px block so its padding/gap rules win. */
@media (max-width: 767px) {
  /* Shape from Figma 52:9159: 64px, logo at x=16, avatar at the right edge. */
  .topbar {
    height: 64px;
    min-height: 64px;
    padding: 0 16px;
    gap: 8px;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 100;
  }
  /* Not in the Figma mobile bar: bell (it lives in the avatar menu), title (moves below), CTA. ES/EN stays (Figma 6:917, prompt-maestro §4.5). */
  .topbar .notices-wrap,
  .topbar .topbar__title,
  .topbar .topbar__spacer { display: none; }
  /* ES/EN sits in the bar for everyone; the bell lives inside the avatar menu. Signed out: outline Entrar beside it. */
  .topbar > .topbar__gear { display: grid; width: 44px; height: 44px; flex: 0 0 auto; margin-left: auto; }
  .topbar > .topbar__gear + .topbar__enter { margin-left: 0; }
  .topbar__enter {
    display: inline-flex;
    min-height: 44px;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .auth-menu .nav-badge { position: static; margin-left: 6px; }
  .auth-menu { max-width: calc(100vw - 32px); max-height: calc(100dvh - 160px); overflow-y: auto; } /* stay clear of the tab bar */
  .notices-panel--inline { position: static; width: auto; max-width: none; margin-top: 6px; padding: 0; border: 0; box-shadow: none; }
  .notices-panel--inline h3 { display: none; } /* the menu item above already names it */
  .notices-panel--inline ul { margin: 0; padding: 0; list-style: none; }
  .notices-panel--inline .notice-item { font-size: 16px; }
  .topbar .avatar-btn {
    position: relative;
    width: 36px;
    height: 36px;
    min-width: 0; /* beats the coarse-pointer 44px floor; ::after below restores the hit area */
    min-height: 0;
    border: 2px solid var(--color-outline);
    border-radius: 8px;
  }
  .topbar .avatar-btn::after { content: ""; position: absolute; inset: -4px; } /* keep a 44px hit area */
  .screen-title {
    display: block;
    margin: 4px 0 16px;
    font-family: var(--font-display);
    font-size: var(--fs-subtitle);
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-text);
  }
}

/* Ranks + claimable badges */
.pixel-img { image-rendering: pixelated; image-rendering: crisp-edges; }
.pixel-ph {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 48px;
  background: var(--night);
  border: 2px dashed var(--muted);
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}

.rank-badge__icon {
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.rank-badge__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rank-badge__name {
  font-family: var(--font-display);
  color: var(--color-text);
}

.rank-badge--sm .rank-badge__icon { width: 28px; height: 28px; }
.rank-badge--sm .rank-badge__name { font-size: var(--p-fs-label); }
.rank-badge--md .rank-badge__icon { width: 40px; height: 40px; }
.rank-badge--md .rank-badge__name { font-size: var(--p-fs-display-sm); }
.rank-badge--lg .rank-badge__icon { width: 64px; height: 64px; }
.rank-badge--lg .rank-badge__name { font-size: var(--p-fs-display); }
/* 96px shield with the rank label UNDER it (player cards, Figma 2:105). */
.rank-badge--xl { flex-direction: column; align-items: flex-start; gap: 8px; }
.rank-badge--xl .rank-badge__icon { width: 96px; height: 96px; }
.rank-badge--xl .rank-badge__name {
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--color-muted-2);
}
.playing-card__hit:hover .playing-card__meta strong,
.playing-card__hit:focus-visible .playing-card__meta strong { color: var(--color-accent); }

.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-accent-muted-1);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
}

.bottom-tab .nav-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 14px;
  height: 14px;
  font-size: 7px;
}

.bottom-tab button { position: relative; }

.auth-menu-rank {
  padding: 8px 10px;
  border-bottom: 2px solid var(--night);
}

.badge--common,
.badge-cell.is-common { border-color: var(--cream); }
.badge--rare { border-color: var(--teal); }
.badge--legendary { border-color: var(--color-legendary); }

.badge-rarity {
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  padding: 2px 6px;
  border: 2px solid var(--cream);
}
.badge-rarity--common { border-color: var(--cream); color: var(--cream); }
.badge-rarity--rare { border-color: var(--teal); color: var(--teal); }
.badge-rarity--legendary { border-color: var(--color-legendary); color: var(--color-legendary); }

.badge-cell {
  position: relative;
  overflow: hidden;
}

.badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--orange);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  padding: 2px 4px;
  border: 2px solid var(--cream);
}

.badge-pending-tag {
  position: absolute;
  left: 4px;
  bottom: 4px;
  right: 4px;
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-min);
  color: var(--orange);
  background: var(--night);
  border: 1px solid var(--orange);
  padding: 2px;
}

.badge-hint {
  display: none;
}

.badge-cell.is-locked:hover .badge-hint,
.badge-cell.is-locked:focus-visible .badge-hint {
  display: block;
  position: absolute;
  inset: auto 4px 4px 4px;
  font-size: var(--p-fs-body-min);
  line-height: 1.2;
  color: var(--cream);
  background: var(--color-scrim-strong);
  padding: 4px;
}

.pending-strip {
  border: 3px solid var(--orange);
  background: var(--navy);
  padding: 12px;
  margin-bottom: 16px;
}

.pending-strip h3 {
  font-family: var(--font-display);
  font-size: 9px;
  margin: 0 0 10px;
  color: var(--orange);
}

.pending-row {
  display: grid;
  gap: 10px;
}

.pending-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
  border: 2px solid var(--cream);
  padding: 8px;
}

.pending-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.pending-card.badge--common { border-color: var(--cream); }
.pending-card.badge--rare { border-color: var(--teal); }
.pending-card.badge--legendary { border-color: var(--color-legendary); }

.album-group { margin-bottom: 18px; }
.album-group h3 {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--muted);
  margin: 0 0 8px;
}

.badge-album-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.badge-earned-grid { grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 16px; }
.badge-earned {
  border: 2px solid var(--cream);
  background: var(--night);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 16px;
  text-align: center;
  min-width: 0;
  overflow: hidden;
}
.badge-earned > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.badge-earned .badge-verify-id { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.badge-earned img { width: 110px; height: 110px; object-fit: contain; image-rendering: pixelated; }
.badge-earned small { color: var(--muted); font-size: var(--p-fs-body-min); }
.badge-earned .games-caption { overflow-wrap: anywhere; }
.badge-earned .badge-explorer-link { white-space: normal; }
.badge-earned .games-caption,
.claim-stellar .games-caption {
  font-size: var(--p-fs-body-min);
  line-height: 1.35;
  text-align: center;
}
.badge-explorer-link {
  color: var(--teal);
  text-decoration: underline;
  font-weight: 600;
  white-space: nowrap;
}
.claim-stellar { margin: 0 0 12px; }

.badge-detail {
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
  border: 4px solid var(--cream);
  display: grid;
  place-items: center;
  background: var(--night);
}
.badge-detail.badge--rare { border-color: var(--teal); }
.badge-detail.badge--legendary { border-color: var(--color-legendary); }
.badge-detail img { width: 96px; height: 96px; object-fit: contain; }

.claim-modal__card { text-align: center; }

.claim-modal__card.is-signing .claim-badge {
  opacity: 1;
  transform: none;
}

.claim-cat--pace {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 96px;
  min-height: 80px;
  margin: 0 auto 8px;
}

.claim-cat--pace .pose-img {
  animation: claim-cat-pace 1.05s ease-in-out infinite alternate;
}

.claim-cat__clock {
  position: absolute;
  top: -2px;
  right: 4px;
  font-size: 22px;
  line-height: 1;
  animation: claim-clock-tick 1.05s ease-in-out infinite alternate;
  filter: drop-shadow(0 1px 0 var(--color-outline));
}

@keyframes claim-cat-pace {
  from { transform: translateX(-16px); }
  to { transform: translateX(16px); }
}

@keyframes claim-clock-tick {
  from { transform: translateX(-10px) rotate(-12deg); }
  to { transform: translateX(10px) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .claim-cat--pace .pose-img,
  .claim-cat__clock { animation: none; }
}

.claim-album-page {
  min-height: 140px;
  border: 3px solid var(--cream);
  background: var(--color-album-well);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.claim-badge {
  width: 88px;
  height: 88px;
  transform: translateY(-24px) rotate(-6deg);
  opacity: 0;
}

.claim-modal__card.is-animating .claim-badge {
  animation: badge-drop 0.7s steps(6) forwards;
}

.claim-modal__card.is-done .claim-badge,
.claim-badge.is-pressed {
  transform: translateY(0) rotate(-3deg);
  opacity: 1;
}

@keyframes badge-drop {
  0% { transform: translateY(-40px) rotate(-12deg); opacity: 0; }
  70% { transform: translateY(6px) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0) rotate(-3deg); opacity: 1; }
}

.claim-badge img { width: 100%; height: 100%; object-fit: contain; }
.claim-xp { margin: 8px 0; }
.claim-xp__main {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--orange);
}
.claim-xp__bonus {
  color: var(--teal);
  font-size: 16px;
}
.claim-rankup {
  font-family: var(--font-display);
  font-size: var(--p-fs-pixel-sm);
  color: var(--cream);
  margin: 10px 0;
}
.claim-xp-bar { margin: 10px 0 14px; }

.claim-cat { display: flex; justify-content: center; margin-bottom: 8px; }

.claim-rankup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Cat poses */
.pose-img { flex-shrink: 0; max-width: none; }
.pose-img.img-fallback {
  background: var(--navy);
  border: 2px dashed var(--muted);
}

.hero-banner__body .pose-img { width: 72px; height: 72px; }

.flash-toast {
  display: flex;
  align-items: center;
  gap: 8px;
}

.album-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
  color: var(--muted);
}

.album-empty p { margin: 0; }

@media (max-width: 860px) {
  .pending-card { grid-template-columns: 56px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  button:active:not(:disabled) { transform: none; }
  .claim-badge { opacity: 1; transform: none; }
}

/* Discord / game media: smooth scaling + 4px navy border. Only Tirly pixel art stays pixelated. */
.discord-img,
.avatar--discord,
.avatar-initial,
.comm-icon,
.game-banner,
.game-tile__cover img,
.game-cover img {
  image-rendering: auto;
}

.event-comm__icon { border-width: 2px; }
.event-comm__initials { border-width: 2px; }
.game-tile { border-width: 4px; }

/* Live block states: simple placeholder, one-line error */
.block-placeholder {
  min-height: 112px;
  background: var(--navy);
  border: 4px solid var(--card-border);
  box-shadow: 4px 4px 0 var(--color-outline);
  animation: block-pulse 1.2s steps(2, end) infinite;
}

@keyframes block-pulse { 50% { opacity: 0.55; } }

.block-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--navy);
  border: 4px solid var(--card-border);
  box-shadow: 4px 4px 0 var(--color-outline);
  color: var(--muted);
}

/* Panel de mi servidor (live, community admins only) */
a.nav-item--owner,
a.auth-menu-link {
  text-decoration: none;
  box-sizing: border-box;
}

a.auth-menu-link {
  display: block;
  padding: 8px;
  margin-bottom: 4px;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 9px;
}

a.auth-menu-link:hover,
a.auth-menu-link:focus-visible { background: var(--teal); }

@media (max-width: 860px) {
  button,
  a.btn,
  [role="tab"],
  summary,
  .link,
  .player-cell,
  .site-footer__links a {
    min-height: 44px;
    min-width: 44px;
  }
  .bottom-tab button { min-width: 0; }
  .bell-btn { min-width: 44px; min-height: 44px; }
  p > a:not(.btn) {
    min-height: 0;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .top3-podium .top3-name { min-width: 0; }
}

/* ===== P3 · Home (Figma 3:101 out, 3:209 in, 6:917 mobile) ===== */
.section-head .eyebrow-title,
.rail-card .eyebrow-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--ls-label);
  color: var(--color-muted-2);
}

/* Figma «Tu progreso»: regular weight, .72px tracking. */
.progress-card .eyebrow-title {
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0;
}

.home-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}

/* Figma 21:8286: the sparkle floats at the head's right edge. The ring of 21:8288 was dropped: next to the sparkle it read as a stuck loading spinner. */
.home-head::before,
.page-head::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: center / contain no-repeat;
}
.home-head::before,
.page-head::before { right: 12px; top: 0; width: 48px; height: 48px; background-image: url("/tierly/assets/landing/deco-sparkle-home.svg"); }

.home-head .page-title {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.24px;
}

.home-head__sub {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-muted);
}

@media (max-width: 1100px) {
  .home-head::before,
  .page-head::before { display: none; }
}

.home-head__eyebrow {
  margin: 0;
  line-height: 16px;
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--color-muted-2);
}

.home .section { margin-bottom: 32px; }

.home-panel { padding: 28px; }

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
  padding: clamp(24px, 4vw, 48px);
}

.home-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem);
  line-height: 1.25;
  color: var(--color-text);
  /* Whole words only: the size shrinks with the viewport instead of splitting «COMUNIDAD». */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.home-hero__sub {
  margin: 0;
  max-width: 62ch;
  font-size: var(--p-fs-body);
  line-height: 1.5;
  color: var(--color-muted-2);
}

.home-hero .auth-cta-stack { align-items: flex-start; max-width: 640px; }
.home-hero .auth-cta-stack .btn { width: auto; }
.auth-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* How ranks work */
.how-ranks .section-head { margin-bottom: 24px; }
.how-ranks .section-head h2 { font-size: var(--fs-h2); line-height: 44px; }

.how-ranks__intro {
  max-width: 760px;
  margin: 0 0 24px;
  font-size: var(--p-fs-body);
  line-height: 26px;
  color: var(--color-muted-2);
}

.how-ranks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.rank-tile {
  --tier: var(--color-muted);
  position: relative;
  /* Figma 71:18789: 26 top / 20 sides / 24 bottom, a 14px stack, and a 6px accent bar flush with the outer edge (clip-path, not overflow, so the bar can cover the border). */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 20px 24px;
  clip-path: inset(0 round var(--radius-card));
}

.rank-tile::before {
  content: "";
  position: absolute;
  inset: -3px -3px auto -3px;
  height: 6px;
  background: var(--tier);
}

.rank-tile--bronze { --tier: var(--color-bronze); }
.rank-tile--silver { --tier: var(--color-silver); }
.rank-tile--gold { --tier: var(--color-gold); }
.rank-tile--platinum { --tier: var(--color-accent-muted-1); }
.rank-tile--diamond { --tier: var(--color-accent-2); }

.rank-tile__icon { width: 40px; height: 44px; object-fit: contain; image-rendering: pixelated; }

.rank-tile__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-text);
}

.rank-tile__range {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

.rank-tile__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  line-height: 16px;
  letter-spacing: 0;
  color: var(--color-muted-2);
}

.rank-tile__divs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }

.rank-tile__div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--color-surface-2);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.rank-tile__roman { color: var(--color-muted-2); font-size: 12px; font-weight: 700; }
.rank-tile__xp { margin-left: auto; text-align: right; }

.rank-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
  padding: 16px 20px;
}

.rank-legend__icon { width: 32px; height: 35px; object-fit: contain; image-rendering: pixelated; }
.rank-legend__name { font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 400; color: var(--color-text); }
.rank-legend__from {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
}

.rank-legend__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rank-legend__chip {
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.rank-legend__chip span { font-size: 12px; font-weight: 700; color: var(--color-accent-text); }

.rank-legend__tag {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--color-accent-muted-1);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  line-height: 14px;
  font-weight: 700;
  letter-spacing: var(--ls-label);
}

/* Progress card: the one card with the violet shadow. */
.progress-card {
  background: var(--color-surface);
  border: var(--outline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-accent-2);
}

.progress-card { padding: 28px; }
.progress-card .rank-badge { gap: 16px; }
.progress-card .rank-badge__icon { width: 58px; height: 64px; }
.progress-card .xp-bar {
  height: 14px;
  border: 2px solid var(--color-outline);
  border-radius: 999px;
  background: var(--color-bg);
}
.progress-card .progress-stats span {
  padding: 6px 12px;
  border: 0;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0;
}
.progress-card .rank-badge__name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.3vw, 40px);
  overflow-wrap: normal;
  line-height: 1.25;
  color: var(--color-text);
}

.progress-note {
  font-size: var(--p-fs-body-sm);
  color: var(--color-text);
  margin-bottom: 12px;
}

/* Sign badge: the only Primary on Home. */
.sign-badge { display: flex; flex-direction: column; gap: 12px; }

.sign-badge__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--color-muted-2);
}

.sign-badge .sign-badge__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-text);
}

.sign-badge__body { margin: 0; font-size: var(--p-fs-body-sm); color: var(--color-muted-2); }
.sign-badge__cta {
  width: 100%;
  padding: 20px 28px;
  font-size: 14px;
  letter-spacing: 0;
}

/* Recent badges */
.recent-badges__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.recent-badge { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; }
.recent-badge__art img { width: 44px; height: 44px; border-radius: 8px; image-rendering: pixelated; }
.recent-badge__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recent-badge__meta strong {
  font-size: var(--p-fs-body-sm);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-badge__meta span {
  font-family: var(--font-mono);
  font-size: var(--p-fs-label);
  letter-spacing: var(--ls-label);
  color: var(--color-muted-2);
}
.recent-badge__verify {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.recent-badges__empty { margin: 0; font-size: var(--p-fs-body-sm); color: var(--color-muted-2); }

/* Home allows exactly one solid green: the hero CTA (signed out) or Firmar (signed in).
   Anything else that still carries .btn-primary reads as Secondary here. */
.home .btn-primary:not(.btn-primary--keep) {
  background: transparent;
  border-color: var(--color-muted);
  color: var(--color-text);
  box-shadow: none;
}
.home .btn-primary:not(.btn-primary--keep):hover:not(:disabled) {
  transform: none;
  box-shadow: none;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Desktop top bar: the create-account CTA reads as Secondary so each screen keeps one solid green.
   The mobile top bar (<=767px) is styled separately. */
@media (min-width: 768px) {
  .topbar .btn-primary {
    background: transparent;
    border-color: var(--color-muted);
    color: var(--color-text);
    box-shadow: none;
  }
  .topbar .btn-primary:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* Layout: two columns on desktop; one column in the handoff order below 1100px. */
@media (max-width: 1100px) {
  .page-columns--home {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .page-columns--home > .page-main,
  .page-columns--home > .right-rail { display: contents; }
  .page-columns--home .section,
  .page-columns--home .home-panel { margin-bottom: 0; }
  .page-columns--home [data-home="next"] { order: 1; }
  .page-columns--home [data-home="progress"] { order: 2; }
  .page-columns--home [data-home="playing"] { order: 3; }
  .page-columns--home [data-home="listening"] { order: 4; }
  .page-columns--home [data-home="top3"] { order: 5; }
  .page-columns--home [data-home="companion"] { order: 6; }
  .page-columns--home [data-home="badge"] { order: 7; }
  .page-columns--home [data-home="events"] { order: 8; }
  .page-columns--home [data-home="recent"] { order: 9; }
}

@media (max-width: 767px) {
  .home-panel { padding: 20px 16px; }
  .home-hero { margin-bottom: 24px; }
  .rank-legend__tag { margin-left: 0; }
  .section-head h2 { font-size: 16px; }
}

/* Figma 6:917: the 390 progress card names the rank in Space Grotesk bold. */
@media (max-width: 767px) {
  .progress-card .rank-badge__name {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
  }
}

/* Page head shared by the screens that own their title (Figma 6:369, docs/design-ref). */
.page-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.page-head__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--ls-label);
  color: var(--color-accent);
}
.page-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -0.24px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.page-head__sub {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-muted);
}
@media (max-width: 1100px) {
  .page-head__title { font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem); line-height: 1.25; }
}

/* Ranking */
.ranking-page { display: flex; flex-direction: column; gap: 32px; }
.ranking-top { display: flex; flex-direction: column; gap: 24px; }
.pt-short { display: none; }

.rank-tabs { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rank-tab {
  cursor: pointer;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: var(--ls-label);
  color: var(--color-text);
  background: var(--color-bg);
  border: 3px solid var(--color-outline);
  border-radius: 8px;
  box-shadow: var(--shadow-hard-sm);
}
.rank-tab.is-active { background: var(--color-accent); color: var(--color-on-accent); }
button.rank-tab:hover:not(:disabled) { border-color: var(--color-accent); }

.rank-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--ls-label);
  border-radius: 999px;
  color: var(--color-text);
}
.chip--solid { background: var(--color-surface-2); }
.chip--outline { border: 2px solid var(--color-text); background: transparent; }
.rank-chips__example { margin-left: auto; }
.rank-chips .search-box { flex: 0 1 260px; margin-left: 8px; }

/* Podium: avatar, name, XP, then a block step. */
.rank-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.rank-podium__place { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.rank-podium__star { position: absolute; top: -22px; width: 16px; height: 16px; }
.rank-podium__who { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: inherit; min-width: 0; max-width: 100%; }
.rank-podium__avatar { width: 56px; height: 56px; border: 3px solid var(--color-outline); border-radius: 8px; }
.rank-podium__place--1 .rank-podium__avatar { width: 64px; height: 64px; }
.rank-podium__name { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--color-text); max-width: 100%; text-align: center; overflow-wrap: anywhere; } /* no «…» truncation (prompt-maestro §2) */
.rank-podium__xp { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; color: var(--color-muted); padding-bottom: 6px; }
.rank-podium__xp img { width: 16px; height: 16px; image-rendering: pixelated; }
.rank-podium__step {
  display: grid;
  place-items: center;
  width: 100%;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.25;
  color: var(--color-white);
  border: 3px solid var(--color-outline);
  border-radius: 12px;
  box-shadow: none;
}
.rank-podium__place--1 .rank-podium__step { height: 104px; background: var(--color-accent); color: var(--color-on-accent); font-size: 40px; }
.rank-podium__place--2 .rank-podium__step { height: 76px; background: var(--color-accent-2); }
.rank-podium__place--3 .rank-podium__step { height: 56px; background: var(--color-bronze); }

/* Rows: one card each. */
.rank-list-wrap { display: flex; flex-direction: column; gap: 12px; }
.rank-list__head,
.rank-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 200px 160px; align-items: center; column-gap: 16px; }
.rank-list__head {
  padding: 0 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0;
  color: var(--color-muted);
}
.rank-list__head span:last-child { text-align: right; }
.rank-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rank-row {
  padding: 12px 20px;
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: 8px;
  box-shadow: none;
}
.rank-row--you { border-color: var(--color-accent); }
.rank-row__pos { font-family: var(--font-display); font-size: 12px; color: var(--color-muted); }
.rank-row--you .rank-row__pos,
.rank-row--you .rank-row__xp { color: var(--color-accent); }
.rank-row__who { min-width: 0; }
.rank-row__avatar { width: 36px; height: 36px; border: 2px solid var(--color-outline); border-radius: 4px; flex: 0 0 36px; }
.rank-row .player-cell { gap: 12px; min-width: 0; font-weight: 500; }
.rank-row .player-cell__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-tier { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.rank-tier__icon { width: 20px; height: 20px; image-rendering: pixelated; }
.rank-row__xp { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--color-text); white-space: nowrap; text-align: right; }
.rank-list__gap { margin: 0; text-align: center; letter-spacing: 4px; color: var(--color-muted); }

@media (max-width: 767px) {
  .ranking-page { gap: 20px; }
  .ranking-top { flex-direction: column; align-items: flex-start; gap: 12px; } /* full h1 (prompt-maestro §5.7) leaves no room beside it for the help button */
  .ranking-head .page-head__kicker,
  .ranking-head .page-head__sub { display: none; }
  .page-head .page-head__kicker { display: none; }
  .ranking-head .page-head__title { font-size: 24px; line-height: 1.25; }
  .rank-chips .search-box { flex-basis: 100%; margin-left: 0; }
  .rank-list__head { display: none; }
  .rank-row { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "pos who xp" "pos tier xp"; padding: 12px 16px; row-gap: 2px; }
  .rank-row__pos { grid-area: pos; }
  .rank-row__who { grid-area: who; }
  .rank-row__tier { grid-area: tier; }
  .rank-row__xp { grid-area: xp; padding-left: 12px; font-size: 13px; }
  .rank-row .player-cell__name { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
  .rank-podium { gap: 8px; }
  .rank-podium__step { font-size: 24px; }
}
@media (min-width: 1101px) and (max-width: 1279px) {
  .rank-list__head,
  .rank-row { grid-template-columns: 64px minmax(0, 1fr) 150px 120px; }
}

.rank-chips .search-box { min-width: 0; border-width: 3px; border-radius: 8px; padding: 0 12px; }
.rank-chips .search-box .search-input { font-size: 14px; padding: 8px 0; min-width: 0; }

.communities-head { margin-bottom: 32px; }
.community-grid { margin-bottom: 32px; }
/* Eventos (Figma 4:192) */
.events-head { margin-bottom: 32px; }
.chip-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip-tabs .tab {
  padding: 4px 12px;
  min-height: 0;
  font-size: 11px;
  line-height: 16px;
  background: transparent;
  border: 2px solid var(--color-text);
  border-radius: 999px;
  box-shadow: none;
}
.chip-tabs .tab.is-active { background: var(--color-surface-2); border-color: var(--color-surface-2); }
.chip-tabs .tab.is-active::before { display: none; }
.event-grid--k { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px; margin-top: 24px; }
.event-card--k {
  border: 3px solid var(--color-outline);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--color-outline); /* Figma 4:192: only every third card carries a coloured shadow */
}
.event-card--k:nth-child(3n) { box-shadow: var(--shadow-accent-2-lg); }
.event-card--home .event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-muted); }
.event-filters { gap: 16px; margin-bottom: 0; }
.event-filters .filter-field { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label);}
.event-filters .filter-field select { font-size: 14px; min-height: 40px; border-radius: 8px; }

/* Música head + record crate (Figma 4:490) */
.music-head { margin-bottom: 8px; }
.chip--accent2 { background: var(--color-accent-2); color: var(--color-white); margin-left: 8px; }
/* «Cajón de discos» card (Figma v2, component 205:31094). Colors come from the --genre-<key>-* tokens through the per-key modifier.
   Crate exception: the card keeps its genre-colored 3px outline + hard 6/6 shadow at rest, exactly as v2 (the general «no colored shadow at rest» rule does not apply to crate cards). */
.music-crate__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; gap: 24px; padding-right: 6px; padding-bottom: 6px; }
.music-crate__card {
  --crate-base: var(--genre-otro-base);
  --crate-strong: var(--genre-otro-strong);
  --crate-on-base: var(--genre-otro-on-base);
  --crate-on-strong: var(--genre-otro-on-strong);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  padding: 12px 12px 14px;
  background: var(--crate-base);
  color: var(--crate-on-base);
  border: 3px solid var(--color-outline);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--crate-strong);
}
.music-crate__card--rock { --crate-base: var(--genre-rock-base); --crate-strong: var(--genre-rock-strong); --crate-on-base: var(--genre-rock-on-base); --crate-on-strong: var(--genre-rock-on-strong); }
.music-crate__card--pop { --crate-base: var(--genre-pop-base); --crate-strong: var(--genre-pop-strong); --crate-on-base: var(--genre-pop-on-base); --crate-on-strong: var(--genre-pop-on-strong); }
.music-crate__card--hiphop { --crate-base: var(--genre-hiphop-base); --crate-strong: var(--genre-hiphop-strong); --crate-on-base: var(--genre-hiphop-on-base); --crate-on-strong: var(--genre-hiphop-on-strong); }
.music-crate__card--electronica { --crate-base: var(--genre-electronica-base); --crate-strong: var(--genre-electronica-strong); --crate-on-base: var(--genre-electronica-on-base); --crate-on-strong: var(--genre-electronica-on-strong); }
.music-crate__card--indie { --crate-base: var(--genre-indie-base); --crate-strong: var(--genre-indie-strong); --crate-on-base: var(--genre-indie-on-base); --crate-on-strong: var(--genre-indie-on-strong); }
.music-crate__card--metal { --crate-base: var(--genre-metal-base); --crate-strong: var(--genre-metal-strong); --crate-on-base: var(--genre-metal-on-base); --crate-on-strong: var(--genre-metal-on-strong); }
.music-crate__card--latino { --crate-base: var(--genre-latino-base); --crate-strong: var(--genre-latino-strong); --crate-on-base: var(--genre-latino-on-base); --crate-on-strong: var(--genre-latino-on-strong); }
.music-crate__card--rnb { --crate-base: var(--genre-rnb-base); --crate-strong: var(--genre-rnb-strong); --crate-on-base: var(--genre-rnb-on-base); --crate-on-strong: var(--genre-rnb-on-strong); }
.music-crate__card--jazz { --crate-base: var(--genre-jazz-base); --crate-strong: var(--genre-jazz-strong); --crate-on-base: var(--genre-jazz-on-base); --crate-on-strong: var(--genre-jazz-on-strong); }
.music-crate__card--kpop { --crate-base: var(--genre-kpop-base); --crate-strong: var(--genre-kpop-strong); --crate-on-base: var(--genre-kpop-on-base); --crate-on-strong: var(--genre-kpop-on-strong); }
.music-crate__card--otro { --crate-base: var(--genre-otro-base); --crate-strong: var(--genre-otro-strong); --crate-on-base: var(--genre-otro-on-base); --crate-on-strong: var(--genre-otro-on-strong); }
/* Art box is 180x132 in Figma; cqw keeps the same proportions at any card width (cover 120, vinyl 120 peeking 6px out, groove 80, label 32). */
/* Fixed v2 pixels (art 132, cover/vinyl 120, groove 80, label 32). Plain px first, so a browser without container query units keeps them;
   the min(px, cqw) overrides, resolved against the card (the container), only shrink them proportionally when the card inner width is under Figma's 141px mobile card. */
.music-crate__card { container-type: inline-size; }
.music-crate__art { position: relative; height: 132px; }
.music-crate__vinyl, .music-crate__cover, .music-crate__rank { position: absolute; }
/* Owner 2026-10-22: the v2 flat disc became the Genre-badges turntable. The whole 78×67 turntable fills a 135×116 slot whose
   pivot ends 15px past the art box (inside the 12px padding + 3px border), so the disc is 111px (v2 drew 120) and nothing
   is clipped; every part keeps its Figma ratio in %, and rings, label and headshell take the card colour through --genre-accent. */
.music-crate__card { --genre-accent: var(--crate-strong); overflow: hidden; }
.music-crate__vinyl { right: -15px; top: 6px; width: 135px; height: 116px; }
.music-crate__vinyl .vinyl-s { flex: none; width: 100%; height: 100%; }
.music-crate__vinyl .vinyl-s__disc { width: 82.05%; height: 95.52%; }
.music-crate__vinyl .vinyl-s__arm { left: 56.15%; top: 9.97%; width: 31.18%; height: 45.85%; }
.music-crate__vinyl .vinyl-s__head { left: 50.95%; top: 54.63%; width: 8.95%; height: 9.54%; }
.music-crate__vinyl .vinyl-s__head i { width: 86%; height: 56%; }
.music-crate__vinyl .vinyl-s__pivot { left: 80.41%; top: 3.82%; width: 13.13%; height: 15.28%; }
.music-crate__vinyl .vinyl-s__cap { left: 84.51%; top: 8.6%; width: 4.92%; height: 5.73%; }
.music-crate__cover { left: 0; top: 6px; width: 120px; height: 120px; box-sizing: border-box; overflow: hidden; display: grid; place-items: center; background: var(--crate-strong); border: 3px solid var(--color-outline); }
.music-crate__art { height: min(132px, 93.62cqw); }
.music-crate__vinyl { right: calc(-1 * min(15px, 10.64cqw)); top: min(6px, 4.26cqw); width: min(135px, 95.74cqw); height: min(116px, 82.27cqw); }
.music-crate__cover { top: min(6px, 4.26cqw); width: min(120px, 85.11cqw); height: min(120px, 85.11cqw); }
.music-crate__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.music-crate__initials { font-family: var(--font-display); font-size: 28px; font-size: min(28px, 19.86cqw); line-height: 1.2; color: var(--crate-on-strong); }
.music-crate__rank { left: 6px; top: 0; z-index: 2; box-sizing: border-box; max-width: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 6px; background: var(--color-outline); border: 2px solid var(--crate-strong); color: var(--color-white); font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0; }
.music-crate__name { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: "Space Grotesk", var(--font-body); font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--crate-on-base); }
.music-crate__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-family: var(--font-mono); }
.music-crate__mins { font-size: 12px; line-height: 1.4; letter-spacing: 0; color: var(--crate-on-base); }
.music-crate__chip { padding: 3px 6px; background: var(--crate-strong); color: var(--crate-on-strong); border: 2px solid var(--color-outline); border-radius: 4px; font-size: 10px; line-height: 1.4; letter-spacing: 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
@media (max-width: 1180px) { .music-crate__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* «Ahora suena» rows (Música, Figma 70:18805): surface-2 row, 12px padding/gap, the turntable first, then track 20/1.35,
   artist 14 muted, genre tag 12 mono uppercase and the listener line (avatar 28, name 10 mono uppercase, server muted). */
.music-listeners { padding: 20px; background: var(--color-surface); border: 3px solid var(--color-outline); border-radius: 20px; box-shadow: var(--shadow-hard-sm); }
.music-listeners__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.listener-tile { --genre-accent: var(--crate-strong); display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px; background: var(--color-surface-2); border-radius: 16px; overflow: hidden; }
.listener-tile .vinyl-s { flex: 0 0 78px; }
.listener-tile__info { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.listener-tile__track, .listener-tile__artist, .listener-tile__name, .listener-tile__server { display: block; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.listener-tile__track { font-family: "Space Grotesk", var(--font-body); font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--color-text); }
.listener-tile__artist { font-size: 14px; line-height: 1.5; color: var(--color-muted-2); } /* no opacity: 0.7 on muted measured 3.0:1 on the tile */
.listener-tile__genre { padding: 4px 8px; border-radius: 999px; background: var(--crate-base); color: var(--crate-on-base); font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; }
.listener-tile__who { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; font-family: var(--font-mono); font-size: 10px; line-height: 1.4; letter-spacing: 0; }
.listener-tile__who .avatar { flex: 0 0 auto; width: 28px; height: 28px; border: 2px solid var(--color-outline); border-radius: 8px; }
.listener-tile__name { flex: 0 1 auto; color: var(--color-text); }
.listener-tile__server { flex: 1 1 0; color: var(--color-muted); }
.listener-tile__server .listener-communities { color: inherit; }
@media (max-width: 767px) { .music-listeners { padding: 16px; } .music-listeners__grid { grid-template-columns: minmax(0, 1fr); } }
.music-listeners .listening-more { margin-top: 20px; }
.listener-row__genre {letter-spacing: 0; font-size: 10px; }
.listeners-sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; }
.listeners-sheet__backdrop { position: absolute; inset: 0; border: 0; background: var(--color-scrim); }
.listeners-sheet__panel { position: relative; display: flex; flex-direction: column; gap: 12px; width: min(480px, 100%); max-height: min(560px, 100%); padding: 16px; background: var(--color-surface); color: var(--color-text); border: 3px solid var(--color-outline); border-radius: 8px; box-shadow: 6px 6px 0 var(--color-outline); }
.listeners-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.listeners-sheet__head h2 { margin: 0; font-size: 16px; }
.listener-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 8px; }
.listener-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.listener-row .avatar { flex: 0 0 auto; width: 36px; height: 36px; }
.listener-row__text { display: grid; flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 12px; }
.listener-row__text > * { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Dialog rows: the shared turntable at half size (39×33.5), coloured by the row's genre key, spinning like the tiles. */
.listener-row__disc { --genre-accent: var(--crate-strong); position: relative; flex: 0 0 auto; width: 39px; height: 34px; overflow: visible; }
.listener-row__disc .vinyl-s { transform: scale(0.5); transform-origin: top left; }
/* Cover as the round label, centred on the 32px disc (56% of it), outlined so it reads on any genre colour. */
.listener-row__img { position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--color-outline); object-fit: cover; box-sizing: border-box; }
.listeners-sheet__head .btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.listeners-sheet__head .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 767px) {
  .listeners-sheet { place-items: end center; padding: 0; }
  .listeners-sheet__panel { width: 100%; max-height: 80vh; border-radius: 8px 8px 0 0; border-bottom: 0; box-shadow: none; }
}


/* Mi perfil hero (Figma 6:837): banner above the identity card, k-card outlines. */
.profile-hero__body {
  border: 3px solid var(--color-outline);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--color-outline);
  padding: 24px;
}
.profile-hero__avatar .avatar,
.profile-hero__avatar .avatar-xl {
  width: 120px;
  height: 120px;
  border: 3px solid var(--color-outline);
  border-radius: 50%;
  box-shadow: none;
  background: var(--color-accent-2);
  color: var(--color-accent);
}
.profile-hero__avatar .avatar-xl.avatar-initial { font-size: 40px; }
.profile-hero__stats .stat-cell {
  text-align: left;
  border: 3px solid var(--color-outline);
  border-radius: 12px;
  box-shadow: var(--shadow-hard-sm);
  padding: 12px 16px;
}
.profile-hero__stats .stat-cell span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; }
.profile-hero__stats .stat-cell strong { font-size: 20px; line-height: 1.25; }
.profile-hero__stats { gap: 16px; }

/* Ajustes (docs/design-ref/settings.png) */
.settings-head { margin-bottom: 32px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.settings-side { display: flex; flex-direction: column; gap: 32px; }
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
}
.settings-card h2 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.5; color: var(--color-text); }
.settings-card p { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--color-muted); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0; }
.settings-row__copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.settings-row__copy strong { font-family: var(--font-mono); font-size: 16px; font-weight: 400; color: var(--color-text); }
.settings-row__copy span { font-family: var(--font-mono); font-size: 14px; color: var(--color-muted); }
.settings-soon { margin-left: 8px; font-size: 10px; padding: 1px 8px; }
.settings-switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 24px;
  padding: 0;
  box-sizing: border-box;
  background: var(--color-surface-2);
  border: 1px solid var(--color-line);
  border-radius: 0;
  cursor: pointer;
}
.settings-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--color-muted);
  border-radius: 0;
  transition: transform 120ms ease;
}
.settings-switch[aria-checked="true"] { background: var(--color-accent); border-color: var(--color-accent); }
.settings-switch[aria-checked="true"]::after { background: var(--color-on-accent); transform: translateX(22px); }
.settings-switch:disabled { cursor: not-allowed; opacity: 0.6; }
.settings-lang { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-muted); }
.settings-lang .chip { cursor: pointer; }
.settings-delete {
  width: 100%;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--color-danger-soft);
  background: var(--color-bg);
  border: 3px solid var(--color-outline);
  border-radius: 12px;
  cursor: pointer;
}
.settings-delete:hover:not(:disabled) { border-color: var(--color-danger-soft); }
.profile-top { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.profile-gear {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-accent);
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: 8px;
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
}
.profile-gear .ui-icon { width: 20px; height: 20px; }
@media (max-width: 1100px) {
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .settings-card { padding: 20px; }
}

/* Passkey signing modal (Figma 6:864) */
.passkey-backdrop { background: var(--color-bg); }
.passkey-modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: min(370px, 100%);
  padding: 28px;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  border-radius: 16px;
  box-shadow: var(--shadow-accent-2-lg);
}
.passkey-modal__key { display: grid; place-items: center; width: 56px; height: 56px; background: var(--color-accent); color: var(--color-on-accent); }
.passkey-modal__key img { width: 40px; height: 40px; image-rendering: pixelated; }
.passkey-modal__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 32px; color: var(--color-text); overflow-wrap: anywhere; }
.passkey-modal__kicker { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: var(--ls-label); color: var(--color-accent); }
.passkey-modal__body { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--color-muted); }
.passkey-modal__primary,
.passkey-modal__later { width: 100%; padding: 20px 28px; font-size: 14px; letter-spacing: 0; border-radius: 12px; }
.passkey-modal__later { border: 3px solid var(--color-muted); background: transparent; color: var(--color-text); }
@media (max-width: 767px) {
  .passkey-modal { width: min(350px, 100%); padding: 28px; }
}

/* Inicio extras (Figma 3:209): next-step meta, LIVE chip, Ahora suena rows, vinyl, empty states */
.next-step__text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.next-step__meta { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.chip--live { gap: 6px; }
/* REC light: a red dot that blinks like a camera recording; still when motion is reduced. */
.chip--live { align-items: center; }
.live-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  animation: live-rec 1s steps(2, jump-none) infinite;
}
@keyframes live-rec { 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

.now-rows { display: flex; flex-direction: column; gap: 16px; }
.now-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--color-surface-2);
  border-radius: 16px;
}
.now-row__track { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.now-row__track strong { font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; }
.now-row__track span:not(.chip) { font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.now-row__genre { background: var(--genre-tint, var(--genre-otro-base)); color: var(--genre-on-tint, var(--genre-otro-on-base)); }
.now-row__listener { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; min-width: 0; }
.now-row__listener .avatar { width: 36px; height: 36px; border: 2px solid var(--color-outline); border-radius: 8px; }
.now-row__listener strong { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; color: var(--color-text); }
.now-row__listener span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; color: var(--color-muted); }

/* Figma «Vinyl» Size=S, Playing: 78x67 box, 64px disc that spins, tonearm over it. */
.vinyl-s { position: relative; flex: 0 0 78px; display: block; width: 78px; height: 67px; }
.vinyl-s > span { position: absolute; display: block; }
.vinyl-s img, .vinyl-s svg { display: block; width: 100%; height: 100%; max-width: none; }
.vinyl-s__disc { left: 0; top: 0; width: 64px; height: 64px; color: var(--genre-accent, var(--genre-otro-strong)); }
.vinyl-s__disc img, .vinyl-s__disc svg { width: 104.69%; height: 104.69%; }
/* Size=L disc (Música hero): 346px viewBox = 340px disc + 6px shadow. */
.vinyl-s--l .vinyl-s__disc img, .vinyl-s--l .vinyl-s__disc svg { width: 101.76%; height: 101.76%; }
.vinyl-s__arm { left: 43.8px; top: 6.68px; width: 24.32px; height: 30.72px; }
.vinyl-s__arm img { position: absolute; inset: -3.26% -4.11%; width: auto; height: auto; }
.vinyl-s__head { left: 39.74px; top: 36.6px; width: 6.98px; height: 6.39px; display: flex; align-items: center; justify-content: center; }
.vinyl-s__head i { display: block; width: 6px; height: 3.6px; border: 1px solid var(--color-outline); border-radius: 0.6px; background: var(--genre-accent, var(--genre-otro-strong)); transform: rotate(35deg); box-sizing: border-box; }
.vinyl-s__pivot { left: 62.72px; top: 2.56px; width: 10.24px; height: 10.24px; }
.vinyl-s__cap { left: 65.92px; top: 5.76px; width: 3.84px; height: 3.84px; }
/* One spin for every vinyl (turntable disc, crate/tile disc, pixel vinyl): only inside .is-playing, and on `rotate` so it never
   fights a transform (the centred tile disc keeps its translateX). No transition on rotate: a re-render must not ease the angle. */
@keyframes vinyl-rotate { to { rotate: 360deg; } }
.is-playing .vinyl-s__disc { animation: vinyl-rotate 1.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .vinyl-s__disc { animation: none; rotate: 0deg; } }

.home-panel--k {
  border: 3px solid var(--color-outline);
  border-radius: 16px;
  box-shadow: var(--shadow-accent-lg);
}
.empty-note {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-surface-2);
  border: 2px dashed var(--color-line);
  border-radius: 12px;
}
.empty-note__icon { display: grid; place-items: center; width: 44px; flex: 0 0 44px; color: var(--color-accent); }
.empty-note__icon .game-pad { width: 32px; height: 32px; }
.empty-note p { margin: 0; font-size: 16px; color: var(--color-muted); }
.empty-note__link { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-accent); }

.comm-initial--tint {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid var(--color-outline);
  border-radius: 8px;
  color: var(--color-ink);
  font-family: var(--font-display);
  line-height: 1;
}
.event-comm__initials.comm-initial--tint { width: 18px; height: 18px; font-size: 8px; border-width: 1px; border-radius: 4px; }

/* Inicio playing cards (Figma «Playing card»): name 20px, game 12px mono, server in plain text, grey outline button. */
.playing-card__meta strong { font-family: var(--font-body); font-size: 20px; font-weight: 500; line-height: 1.35; }
.playing-card__game { text-transform: none; letter-spacing: 0; }
.playing-card__server { font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.playing-card__server .event-comm__icon,
.playing-card__server .event-comm__initials { display: none; }
.playing-card__server strong { color: var(--color-muted); }
.playing-card .btn-discord-outline {
  color: var(--color-text);
  background: transparent;
  border-color: var(--color-muted);
}
.playing-card .btn-discord-outline .discord-icon { display: none; }
.playing-card .avatar { width: 44px; height: 44px; border: 3px solid var(--color-outline); border-radius: 8px; flex: 0 0 44px; }
.now-row__listener .avatar-initial { color: var(--color-ink); font-size: 9px; }
.event-card__cat { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: var(--color-surface-2); }

@media (max-width: 767px) {
  .now-row { flex-wrap: wrap; }
  .now-row__track { flex: 1 1 140px; }
  .now-row__listener { flex: 1 0 100%; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; text-align: left; gap: 8px; padding-top: 8px; border-top: 0; }
}
.empty-note__icon { flex: 0 0 auto; width: auto; min-width: 44px; }

@media (max-width: 767px) {
  .rank-row .live-chip { display: none; }
  .rank-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .rank-chips > * { flex: 0 0 auto; }
  .rank-chips .search-box { flex: 1 0 100%; }
}
@media (max-width: 560px) {
  .music-crate__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

/* k-card: the reference card (3px outline, 16px radius, hard 6px shadow), green by default */
.k-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: 16px;
  box-shadow: var(--shadow-accent-lg);
}
.k-card--purple { box-shadow: var(--shadow-accent-2-lg); }
.k-card h2 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.5; color: var(--color-text); }

/* Detalle de evento (docs/design-ref/event-detail.png) */
.event-detail__back {
  align-self: flex-start;
  margin: 0 0 32px;
  padding: 8px 0;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--color-accent);
  cursor: pointer;
}
.event-detail__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 32px; align-items: start; }
.event-detail__main,
.event-detail__side { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.event-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.event-hero__title { font-size: 48px; line-height: 64px; max-width: none; }
.event-hero__intro { margin: 0; font-family: var(--font-mono); font-size: 16px; line-height: 26px; color: var(--color-muted); }
.event-hero__meta { display: flex; flex-wrap: wrap; gap: 16px 48px; }
.event-hero__meta-item { display: flex; flex-direction: column; gap: 6px; }
.event-hero__meta-item span { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); color: var(--color-muted); }
.event-hero__meta-item strong { font-family: var(--font-mono); font-size: 16px; font-weight: 400; color: var(--color-text); }
.event-hero__meta-item .is-accent { color: var(--color-accent); }
.who-is-in__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.who-is-in__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); color: var(--color-muted); }
.who-is-in__row { display: flex; flex-wrap: wrap; gap: 12px; }
.how-counts__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.how-counts__list li { position: relative; padding-left: 24px; font-family: var(--font-mono); font-size: 16px; line-height: 26px; color: var(--color-text); }
.how-counts__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--color-accent); }
.event-voice { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 2px dashed var(--color-dashed); border-radius: 12px; background: var(--color-surface-2); }
.event-voice__head { display: flex; align-items: center; gap: 12px; }
.event-voice__head strong { flex: 1; font-weight: 400; color: var(--color-muted); }
.event-voice__head .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-muted); }
.event-voice p { margin: 0; font-size: 14px; color: var(--color-muted); }
.event-voice small { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
.join-night {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: var(--color-surface);
  border: 3px solid var(--color-accent);
  border-radius: 16px;
  box-shadow: var(--shadow-accent-2-lg);
}
.join-night h2 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.5;}
.join-night p { margin: 0; font-family: var(--font-mono); font-size: 16px; color: var(--color-muted); }
.join-night .btn { width: 100%; padding: 20px 28px; font-size: 14px; letter-spacing: 0; }
.join-night__more { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.badge-preview__label { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-muted); }
.badge-preview__art { display: grid; place-items: center; padding: 24px; background: var(--color-surface-2); border-radius: 8px; }
.badge-preview__art img { width: 160px; height: 160px; object-fit: contain; image-rendering: pixelated; }
.badge-preview strong { font-family: var(--font-mono); font-size: 14px; font-weight: 400; letter-spacing: var(--ls-label); color: var(--color-text); }
.badge-preview__issued { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-accent); }
@media (max-width: 1100px) {
  .event-detail__grid { grid-template-columns: minmax(0, 1fr); }
  .event-detail__side { order: -1; }
}
@media (max-width: 767px) {
  .k-card, .join-night { padding: 20px; }
  .event-hero__title { font-size: 24px; line-height: 1.4; }
}
.join-night .btn-join,
.join-night .btn-primary {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 3px solid var(--color-outline);
  box-shadow: var(--shadow-hard-sm);
}
/* Solid accent CTAs: keep on-accent text on hover (global button:hover sets accent). */
.join-night .btn-join:hover:not(:disabled),
.join-night .btn-primary:hover:not(:disabled) {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-outline);
}

/* Detalle de comunidad (docs/design-ref/community-detail.png) */
.community-hero { flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px 32px; margin-bottom: 32px; }
.community-hero__icon .comm-icon { border: 2px solid var(--color-outline); border-radius: 8px; }
.community-hero__copy { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.community-hero__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.community-hero__title { font-size: 40px; line-height: 1.25; }
.community-hero__sub { margin: 0; font-family: var(--font-mono); font-size: 16px; color: var(--color-muted); }
.community-hero__join { flex-shrink: 0; }
.community-detail__cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; margin-bottom: 40px; align-items: stretch; }
.community-detail__cap { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-muted); }
.hourly { display: flex; align-items: flex-end; gap: 12px; height: 220px; margin-top: 16px; }
.hourly__bar { flex: 1; display: block; min-height: 6px; background: var(--color-surface-2); border-radius: 2px; }
.hourly__bar.is-peak { background: var(--color-accent); }
.hourly__axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-muted); }
.top-games { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 28px; margin-top: 16px; }
.top-games li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 16px; color: var(--color-text); }
.top-games strong { font-size: 12px; font-weight: 500; color: var(--color-accent); }
.community-detail__upcoming { margin-bottom: 40px; }
.community-detail__none { margin: 0 0 40px; color: var(--color-muted); }
@media (max-width: 1100px) { .community-detail__cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .community-hero { padding: 20px; } .community-hero__title { font-size: 24px; } .hourly { height: 160px; gap: 6px; } }
.community-hero .btn-discord {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 3px solid var(--color-outline);
  box-shadow: var(--shadow-hard-sm);
}
.community-hero .btn-discord .discord-icon { display: none; }

/* Podium avatar fallback: the rank shield, never initials (Pau QA #6). */
.rank-podium__avatar--rank {
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

.player-footer__right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 24px; }
@media (max-width: 860px) { .player-footer__right { justify-content: flex-start; } }

/* Mi perfil (docs/design-ref/my-profile.png): head row and k-card sections */
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.profile-head__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.5; color: var(--color-text); }
.profile-head .profile-gear { margin-left: auto; }
.profile-sections { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.profile-sections > section,
.profile-sections > .settings-block {
  padding: 24px;
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
  margin: 0;
}
.profile-sections > section > .section-head { margin-bottom: 12px; }
.profile-sections .card:not(section) { background: transparent; border: 0; box-shadow: none; padding: 0; }
.profile-share h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; line-height: 1.5;}
.profile-share__hint { margin: 0 0 16px; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); overflow-wrap: anywhere; }
.profile-share__preview { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; padding: 12px; background: var(--color-bg); border: 3px solid var(--color-outline); border-radius: 12px; box-shadow: var(--shadow-hard-sm); overflow: hidden; }
.profile-share__preview img { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; }
.profile-share__who { display: flex; align-items: center; gap: 12px; }
.profile-share__who strong { font-family: var(--font-display); font-size: 12px; line-height: 1.5; color: var(--color-text); }
.profile-share__avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--color-outline); }
.profile-share__preview span { font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }

/* Música: now-playing hero, KPIs, genre badges (docs/design-ref/music.png) */
.music-hero { flex-direction: row; align-items: center; gap: 40px; flex-wrap: wrap; padding: 40px; margin-bottom: 32px; }
.music-hero__vinyl { flex: 0 0 auto; width: 234px; height: 201px; }
.music-hero__vinyl .vinyl-s { transform: scale(3); transform-origin: top left; }
.music-hero__body { display: flex; flex: 1 1 280px; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.music-hero__live { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--ls-label); color: var(--color-accent); }
.music-hero__title { margin: 0; font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1.25; color: var(--color-text); overflow-wrap: anywhere; }
.music-hero__artist { margin: 0; font-size: 20px; color: var(--color-muted); }
.music-hero__who { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); }
.music-hero__who .avatar { width: 40px; height: 40px; border: 2px solid var(--color-outline); border-radius: 6px; }
.music-hero__more { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 32px; }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--color-surface); border: 3px solid var(--color-outline); border-radius: 16px; box-shadow: var(--shadow-accent-2-lg); }
.kpi strong { font-family: var(--font-display); font-size: 28px; line-height: 1.25; color: var(--color-accent); }
.kpi--vibe { box-shadow: var(--shadow-accent-lg); }
.kpi--vibe strong { color: var(--color-cyan); }
.kpi span { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-text); }
.kpi small { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
.genre-badges__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.genre-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; background: var(--color-surface); border: 3px solid var(--color-outline); border-radius: 12px; box-shadow: 4px 4px 0 var(--genre-accent, var(--genre-otro-strong)); font-family: var(--font-mono); text-align: center; }
.genre-badge strong { font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-text); }
.genre-badge span { font-size: 11px; color: var(--color-accent); }
.genre-badge .vinyl-s .vinyl-s__disc { color: var(--genre-accent, var(--genre-otro-strong)); } /* the turntable spans are not the badge caption */
.genre-badge--locked { filter: grayscale(1); box-shadow: none; border-color: var(--color-line); }
.genre-badge--locked span { color: var(--color-muted); }
.profile-hero__shelf { border: 3px solid var(--color-outline); border-radius: 16px; box-shadow: var(--shadow-accent-lg); padding: 28px; background: var(--color-surface); }
@media (max-width: 767px) { .music-hero { padding: 20px; gap: 16px; } .music-hero__title { font-size: 24px; } .music-hero__vinyl { width: 156px; height: 134px; } .music-hero__vinyl .vinyl-s { transform: scale(2); } }
.passport-chip { color: var(--color-accent); }
.who-is-in__avatar { width: 56px; height: 56px; font-size: 14px; border: 3px solid var(--color-outline); border-radius: 8px; }
.who-is-in__row { gap: 14px; }

/* Pill toggle (off): 44x24 track, round knob. */
.settings-switch--pill { width: 44px; height: 24px; border-radius: 999px; background: var(--color-switch-off); }
.settings-switch--pill::after { top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-muted); }
.settings-switch--pill[aria-checked="true"]::after { transform: translateX(20px); }

/* Sidebar colours per Pau's target: white labels, grey icons, the Home icon in the accent, a dim icon on the active item. */
.sidebar .nav-item .ui-icon { color: var(--color-muted); }
.sidebar .nav-item .ui-icon--home { color: var(--color-accent); }
.sidebar .nav-item.is-active .ui-icon { opacity: 0.45; }

/* Top bar per Pau's target (docs: tirly-int-smoke/event-detail-target.png): search left, name + chip + avatar right. */
.topbar__search {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 1 400px;
  min-width: 0;
  padding: 12px 16px;
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: 8px;
  box-shadow: var(--shadow-accent-lg);
  color: var(--color-muted);
}
.topbar__search:focus-within { border-color: var(--color-text); }
.topbar__search-icon { font-size: 16px; line-height: 1; }
.topbar__search input { flex: 1; min-width: 0; padding: 0; background: transparent; border: 0; outline: 0; color: var(--color-text); font-family: var(--font-mono); font-size: 14px; }
.topbar__search input::placeholder { color: var(--color-muted); }
.topbar__name { font-family: var(--font-mono); font-size: 14px; color: var(--color-text); white-space: nowrap; }
.topbar__example { font-size: 11px; }
.auth-menu__notices { display: block; }
.auth-menu__notices-panel { display: block; }
@media (max-width: 767px) {
  .topbar__search,
  .topbar__name,
  .topbar__example { display: none; }
}

/* 8-point request #2: violet initials avatar in the top bar, h1 crumb on public profiles. */
/* Topbar search dropdown: grouped public results (games, communities, players). */
.topbar__search { position: relative; }
.topbar-search__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: 8px;
  box-shadow: var(--shadow-accent-lg);
  font-family: var(--font-mono);
}
.topbar-search__list[hidden] { display: none; }
.topbar-search__heading { padding: 8px 10px 4px; font-size: 11px; letter-spacing: 0; color: var(--color-muted); }
.topbar-search__option { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; font-size: 14px; color: var(--color-text); cursor: pointer; }
.topbar-search__option:hover,
.topbar-search__option[aria-selected="true"] { background: var(--color-surface-2); outline: 2px solid var(--color-accent); outline-offset: -2px; }
.topbar-search__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-search__meta { flex-shrink: 0; font-size: 12px; color: var(--color-muted); }
.topbar-search__state { padding: 12px 10px; font-size: 13px; color: var(--color-muted); }
.topbar .avatar-btn .avatar-initial { background: var(--color-accent-2) !important; color: var(--color-white) !important; }
h1.profile-crumb { margin: 0 0 8px; font-weight: 400; }

/* Ranking: optional Streak / Badges columns (only with data). */
.rank-list-wrap.has-streak .rank-list__head,
.rank-list-wrap.has-streak .rank-row { grid-template-columns: 72px minmax(0, 1fr) 200px 160px 120px; }
.rank-list-wrap.has-streak.has-badges .rank-list__head,
.rank-list-wrap.has-streak.has-badges .rank-row { grid-template-columns: 72px minmax(0, 1fr) 200px 160px 120px 90px; }
.rank-list-wrap.has-badges:not(.has-streak) .rank-list__head,
.rank-list-wrap.has-badges:not(.has-streak) .rank-row { grid-template-columns: 72px minmax(0, 1fr) 200px 160px 90px; }
.rank-row__streak, .rank-row__badges { font-family: var(--font-mono); font-size: 13px; color: var(--color-muted); text-align: right; }
.rank-list__head span:nth-child(n+5) { text-align: right; }
@media (max-width: 767px) { .rank-row__streak, .rank-row__badges { display: none; } .rank-list__head span:nth-child(n+5) { display: none; } }
.rank-podium__place--you .rank-podium__step { border-color: var(--color-accent); }
.rank-podium__place--you .rank-podium__name { color: var(--color-accent); }

/* Mi perfil (8-point request #6): chips, big badge cards, ride-or-die */
.social-chip--x { background: var(--color-cyan); color: var(--color-on-accent); border-color: var(--color-outline); }
.social-chip--ig { background: var(--color-accent-2); color: var(--color-white); border-color: var(--color-outline); }
.social-chip--tg { background: var(--color-muted); color: var(--color-on-accent); border-color: var(--color-outline); }
.profile-shelf-row { display: flex; flex-wrap: wrap; gap: 16px; }
.badge-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 168px;
  min-width: min-content; /* a long single word (LANZAMIENTO) widens the card instead of overflowing it */
  padding: 12px;
  text-align: left;
  background: var(--color-surface-2);
  border: 3px solid var(--color-outline);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--color-accent);
  color: var(--color-text);
}
button.badge-card { cursor: pointer; }
.badge-card--rare { box-shadow: 4px 4px 0 var(--color-accent-2); }
.badge-card--legendary { box-shadow: 4px 4px 0 var(--color-gold, var(--color-yellow)); border-color: var(--color-gold, var(--color-yellow)); }
.badge-card__art { display: grid; place-items: center; width: 100%; padding: 8px; background: var(--color-bg); border-radius: 8px; }
.badge-card__art img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
.badge-card__name { font-family: var(--font-display); font-size: 9px; line-height: 1.5;}
.badge-card__rarity { font-size: 9px; padding: 1px 8px; }
.badge-card__meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0; color: var(--color-muted); overflow-wrap: anywhere; }
.badge-card__verify { font-family: var(--font-mono); font-size: 9px; color: var(--color-accent); }
.profile-sections > .ride-or-die { background: var(--color-accent-2); box-shadow: 6px 6px 0 var(--color-outline); }
.ride-or-die h2, .ride-or-die .page-caption { color: var(--color-white); }
.ride-or-die .history-list li strong { color: var(--color-accent); }
.ride-or-die .history-list li small { color: var(--color-white) !important; opacity: 0.8; }

/* Música (8-point request #5) */
.music-head-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; align-items: start; margin-bottom: 8px; }
.music-opt-in { padding: 20px; gap: 10px; align-items: flex-start; }
.music-xp-hint { margin: 4px 0 0; font-family: var(--font-mono); font-size: 12px; }
.music-xp-hint .link { padding: 0; font: inherit; color: var(--color-accent); }
.music-opt-in h2 { font-size: 12px; margin: 0; }
.music-opt-in p { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--color-text); }
.hide-listening { padding: 20px; gap: 8px; }
.hide-listening__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hide-listening h2 { font-size: 12px; }
.hide-listening p { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--color-text); }
.hide-listening small { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
.music-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.music-hero__chips .chip--outline { border-color: var(--color-cyan); color: var(--color-cyan); }
.music-hero__progress { width: 100%; height: 8px; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
.music-hero__progress i { display: block; height: 100%; background: var(--color-accent); }
.music-hero__times { display: flex; justify-content: space-between; width: 100%; font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
.music-hero__session { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; background: var(--color-bg); border: 2px solid var(--color-line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); color: var(--color-muted); }
.music-hero__session-bar { flex: 1; height: 6px; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
.music-hero__session-bar i { display: block; height: 100%; background: var(--color-accent-2); }
.music-hero__session strong { color: var(--color-text); font-weight: 500; white-space: nowrap; }
.music-hero__avatars { display: inline-flex; gap: 6px; }
.music-hero__avatars .avatar { width: 36px; height: 36px; border: 2px solid var(--color-outline); border-radius: 6px; }
.kpi--xp { background: var(--color-accent); border-color: var(--color-outline); box-shadow: var(--shadow-accent-2-lg); }
.kpi--xp strong, .kpi--xp span, .kpi--xp small { color: var(--color-on-accent); }
.music-crate__toggle { display: flex; gap: 8px; }
.music-crate__toggle .chip { cursor: pointer; }
.music-crate__toggle .chip.is-active { background: var(--color-accent); color: var(--color-on-accent); }
.music-duo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 32px; }
.music-duo > .k-card:only-child { grid-column: 1 / -1; }
.top-listeners__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top-listeners__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.top-listeners__row { display: grid; grid-template-columns: 36px 40px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.top-listeners__row.is-you { border: 2px solid var(--color-accent); background: var(--color-surface-2); }
.top-listeners__row .avatar { width: 40px; height: 40px; border: 2px solid var(--color-outline); border-radius: 6px; }
.top-listeners__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--color-text); }
.top-listeners__bar { height: 6px; background: var(--color-surface-2); border-radius: 999px; overflow: hidden; }
.top-listeners__bar i { display: block; height: 100%; background: var(--color-accent-2); }
.top-listeners__row.is-you .top-listeners__bar i, .top-listeners__row:first-child .top-listeners__bar i { background: var(--color-accent); }
.your-top-tracks__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.your-top-tracks__list li { display: flex; align-items: center; gap: 12px; }
.your-top-tracks__vinyl { flex: 0 0 44px; width: 44px; height: 40px; position: relative; overflow: visible; }
.your-top-tracks__vinyl .vinyl-s { transform: scale(0.55); transform-origin: top left; }
.your-top-tracks__who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.your-top-tracks__who strong { font-size: 14px; color: var(--color-text); overflow-wrap: anywhere; }
.your-top-tracks__who small { font-size: 12px; color: var(--color-muted); }
@media (max-width: 1100px) { .music-head-row, .music-duo { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .top-listeners__row { grid-template-columns: 28px 36px minmax(0, 1fr) auto; } .top-listeners__bar { display: none; } }

/* Join this night: COPY LINK is a quiet text link under the two main buttons (Pau). */
.join-night__copy { align-self: flex-start; padding: 4px 0; background: none; border: 0; box-shadow: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.join-night__copy:hover { color: var(--color-accent); }

/* Eventos empty state (Figma 4:192) */
.events-empty { align-items: center; text-align: center; padding: 48px 24px; }
.events-empty__art { display: grid; place-items: center; width: 260px; max-width: 100%; height: 200px; background: var(--color-accent-2); border: 3px solid var(--color-outline); border-radius: 12px; box-shadow: var(--shadow-accent-lg); }
.events-empty h2 { font-size: 20px; }
.events-empty p { margin: 0; color: var(--color-muted); font-size: 14px; }
@media (max-width: 767px) { .events-empty { padding: 32px 16px; } .events-empty h2 { font-size: 16px; } }

/* Inicio, design-lead round 2 (Figma 3:209 / 6:917 + prompt-maestro §3): measured values, one block */
@media (max-width: 767px) { .rail-companion { width: 100%; box-sizing: border-box; } }
/* Podium on Inicio: #2 100, #1 140, #3 76, radius 12 12 4 4 */
[data-block="top3"] .rank-podium__place--2 .rank-podium__step { height: 100px; }
[data-block="top3"] .rank-podium__place--1 .rank-podium__step { height: 140px; }
[data-block="top3"] .rank-podium__place--3 .rank-podium__step { height: 76px; }
[data-block="top3"] .rank-podium__step { border-radius: 12px 12px 4px 4px; }
/* Secondary buttons on Inicio hug their content (prompt-maestro §3: 2px var(--color-muted), radius 8, transparent) */
[data-block="top3"] .top3-cta,
[data-block="playing-now"] .btn,
[data-block="upcoming"] .btn,
[data-block="next-step"] .btn { width: auto; align-self: flex-start; padding: 12px 20px; border: 2px solid var(--color-muted); border-radius: 8px; background: transparent; box-shadow: none; }
[data-block="top3"] .top3-cta { display: flex; margin: 16px auto 0; align-self: center; }
[data-block="playing-now"] .playing-card .btn { justify-content: center; }
/* PLAYING NOW meta: «en Server Example», body font, no tracking */
.playing-card__server { font-family: var(--font-body); font-size: 14px; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--color-muted); }
.playing-card__meta strong { letter-spacing: 0; }
.playing-card .avatar { width: 44px; height: 44px; border: 3px solid var(--color-outline); font-family: var(--font-display); font-size: 11px; color: var(--color-on-accent); }
/* UPCOMING: «Server Example · EXAMPLE» in one muted line, Press Start 20/30 titles */
.event-card__meta { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 22px; text-transform: none; letter-spacing: 0; color: var(--color-muted); }
.event-card--home .event-title__btn { font-family: var(--font-display); font-size: 20px; font-weight: 400; line-height: 30px; letter-spacing: 0; }
/* RECENT BADGES title 20/30; verify links underline only on hover/focus */
.recent-badges > h2 { font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 400; margin: 0 0 16px;}
.recent-badge__meta strong { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 22px; color: var(--color-text); }
.recent-badge__verify, [data-block="upcoming"] .link, .home-block__head .link { text-decoration: none; }
.recent-badge__verify:hover, .recent-badge__verify:focus-visible, .home-block__head .link:hover, .home-block__head .link:focus-visible { text-decoration: underline; }
/* TU PROGRESO: «1,340 XP · EXAMPLE» line, 40px tier, 6px violet shadow */
.progress-card { box-shadow: var(--shadow-accent-2-lg); }
.progress-card .rank-badge__name { font-size: clamp(28px, 2.4vw, 40px); min-width: 0; }
.progress-card .rank-badge { flex-wrap: nowrap; } /* shield and tier stay on one row (Figma 3:209); the name shrinks with clamp instead */
.progress-card__xp { margin: -4px 0 12px 74px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0; line-height: 1.4; color: var(--color-muted); }
/* NOW PLAYING rows */
.now-row__genre { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; background: var(--genre-tint, var(--genre-otro-base)); color: var(--genre-on-tint, var(--genre-otro-on-base)); }
.now-row__listener strong { font-weight: 400; }
/* 390: gutters 20px, h1 from the base scale, section titles 14/20 */
@media (max-width: 767px) {
  .content { padding-left: 20px; padding-right: 20px; }
  .topbar { gap: 12px; }
  .bottom-tab__label { font-size: 10px; }
  [data-block] > .section-title, [data-block] > h2, .home-block__head h2 { font-size: 14px; line-height: 20px; }
}

/* Música, Pau's 6 points */
.listener-communities { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.music-hero__who-line em { font-style: normal; color: var(--color-muted); }
.kpi strong { overflow-wrap: anywhere; font-size: clamp(18px, 2.2vw, 28px); } /* «ELECTRONIC» never leaves its card */
.kpi--vibe small {}
.genre-badges__row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.genre-badge { border: 3px solid var(--color-outline); box-shadow: 4px 4px 0 var(--genre-accent, var(--genre-otro-strong)); }
.genre-badge--locked { filter: grayscale(1); box-shadow: none; border: 3px solid var(--color-outline); }
.music-hero { align-items: center; }
.music-hero__vinyl { width: 280px; height: 240px; display: grid; place-items: center; overflow: visible; }
.music-hero__vinyl .vinyl-s { transform: scale(3.5); transform-origin: center; }
@media (max-width: 767px) { .music-hero__vinyl { width: 100%; height: 190px; } .music-hero__vinyl .vinyl-s { transform: scale(2.4); } }
.kpi--vibe strong { overflow-wrap: normal; font-size: clamp(16px, 1.55vw, 22px); }

/* «Perfil no disponible» card: panel tokens, full-width on phones */
.profile-signed-out.card { border: 3px solid var(--color-outline); border-radius: var(--radius-card, 20px); box-shadow: var(--shadow-accent-lg); }
.profile-signed-out__title { font-size: 20px; line-height: 30px;}
@media (max-width: 767px) {
  .profile-signed-out.card { max-width: none; width: 100%; box-sizing: border-box; }
}

/* Compartir perfil: the real OG card, 1200:630, then the actions */
.profile-share__image { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border: 3px solid var(--color-outline); border-radius: var(--radius-card, 16px); margin: 0 0 12px; background: var(--color-bg); }
.profile-share__url { margin: 0 0 16px; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); overflow-wrap: anywhere; }
.profile-share__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.profile-share__copy { box-shadow: var(--shadow-hard-sm, 4px 4px 0 var(--color-outline)); }
@media (max-width: 767px) { .profile-share__actions { flex-direction: column; } .profile-share__actions .btn { width: 100%; } }

/* Inicio r2b: fixed line-heights where the 16/26 body leaked in, 390 section titles, NOW PLAYING at 390 */
.recent-badge__meta span { font-size: 12px; line-height: 16px; }
.playing-card__game { font-size: 12px; line-height: 16.8px; }
.sign-badge__body { font-size: 14px; line-height: 22px; }
.music-community .games-caption { font-size: 14px; line-height: 21px; }
.now-row__listener strong { font-size: 10px; line-height: 14px; }
.now-row__track { display: flex; flex-direction: column; }
@media (max-width: 767px) {
  [data-block] .section-head h2, .recent-badges > h2 { font-size: 14px; line-height: 20px; }
  .now-row__genre { order: 3; }
  .now-row__listener { border-top: 0; }
}

/* Panel card radius is 16 (prompt-maestro §3); base.css keeps 20 for the other surfaces. */
:root { --radius-card: 16px; }
/* «Perfil no disponible»: 8px back button, card with the 20px side margin on phones */
.profile-signed-out .btn { border-radius: 8px; border-width: 2px; }
@media (max-width: 767px) {
  .profile-signed-out-wrap { padding: 0; min-height: 0; } /* the 20px gutter is .content's */
  .profile-signed-out.card { max-width: none; width: 100%; box-sizing: border-box; }
}
/* Música r2 (design-lead revb) */
.music-hero__vinyl { width: 350px; height: 300px; }
.music-hero__vinyl .vinyl-s { transform: scale(4.4); }
.music-hero .music-hero__title { font-size: 40px; line-height: 1.25; }
.music-hero__chips .chip--solid { background: var(--color-cyan); color: var(--color-on-accent); }
.music-crate + .music-duo, .music-crate ~ .music-duo { margin-top: 52px; }
.music-duo { margin-top: 52px; }
@media (min-width: 1101px) { .music-duo { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.your-top-tracks__who strong { overflow-wrap: normal; }
.kpis > .kpi:nth-child(2) { box-shadow: var(--shadow-accent-lg); }
.kpi--vibe strong { font-size: clamp(16px, 1.55vw, 22px); }
.kpi--vibe small { text-transform: none; }
.genre-badge:not(.genre-badge--locked) { border-color: var(--genre-accent, var(--genre-otro-strong)); }
@media (max-width: 767px) {
  .music-hero__vinyl { width: 100%; height: 190px; }
  .music-hero__vinyl .vinyl-s { transform: scale(2.4); }
  .music-hero .music-hero__title { font-size: 24px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .music-head .page-head__kicker { display: flex; }
  .genre-badges .games-caption { font-size: 11px; line-height: 1.4; }
  .kpi { min-width: 0; }
  .kpi strong { font-size: 20px; }
  .kpi--vibe strong { font-size: 13px; overflow-wrap: anywhere; }
}
.music-duo > .k-card, .music-hero { min-width: 0; }
@media (max-width: 767px) { .your-top-tracks__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; } .your-top-tracks__list li .chip { grid-column: 2; justify-self: start; margin: 0; } }

/* Ranking r2 (design-lead revb) */
.rank-chips .filter-btn.is-active { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.rank-chips .filter-btn.is-active::before { display: none; }
.rank-podium__place--1 .rank-podium__step { height: 135px; }
.rank-podium__place--2 .rank-podium__step { height: 95px; }
.rank-podium__place--3 .rank-podium__step { height: 72px; }
.rank-podium__place--1:not(.rank-podium__place--you) .rank-podium__step { border-color: var(--color-outline); }
.rank-row .player-cell__name, .rank-row__who { letter-spacing: 0; }
.rank-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.rank-chips > * { flex: 0 0 auto; }
@media (max-width: 767px) {
  .ranking-head .page-head__sub { display: block; }
  .rank-row { padding: 8px 12px; row-gap: 0; align-items: center; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "pos who xp"; min-height: 64px; }
  .rank-row__tier { display: none; }
  .rank-row__xp { align-self: center; }
}

/* Ajustes r2 + modal r2 (design-lead revb) */
.settings-grid { align-items: stretch; }
.settings-side > .settings-card:last-child { flex: 1; }
.settings-card .btn, .settings-delete { border-radius: 8px; min-height: 46px; padding: 0 16px; }
.chip.settings-soon { font-size: 10px; line-height: 14px; padding: 1px 8px; }
.settings-switch { min-width: 0; min-height: 0; }
.settings-switch::before { content: ""; position: absolute; inset: -13px -5px; } /* 44px touch area, invisible */
.settings-lang .chip { min-width: 0; min-height: 0; width: auto; height: auto; padding: 4px 10px; }
.passkey-modal__primary, .passkey-modal__later { padding: 12px 20px; font-size: 12px; letter-spacing: 0; border-radius: 8px; white-space: nowrap; }
.passkey-modal__later { border-width: 2px; }
.passkey-modal__kicker { font-size: 11px; }

/* Inicio r3: recent badges keep name and date whole at 390 (VERIFY drops under the text, no ellipsis) */
@media (max-width: 767px) {
  .recent-badge { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
  .recent-badge__meta strong { white-space: normal; overflow: visible; text-overflow: clip; }
  .recent-badge__meta span { white-space: nowrap; }
  .recent-badge__verify { grid-column: 2; justify-self: start; }
}

/* Global r2 (design-lead): avatar menu is a card, 32px avatar, centred footer on phones, buttons radius 8 / secondary 2px */
:root { --radius-button: 8px; }
.btn:not(.btn-primary):not(.btn-discord):not(.btn-discord-outline):not(.btn-ghost):not(.btn--cyan) { border-width: 2px; }
.auth-menu { min-width: 220px; padding: 8px; border-radius: 16px; background: var(--color-surface); border: 3px solid var(--color-outline); box-shadow: var(--shadow-accent-lg); }
.auth-menu button, .auth-menu .auth-menu-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px; text-align: left; white-space: nowrap; background: none; border: 0; border-radius: 8px; color: var(--color-text); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); cursor: pointer; margin: 0; }
.auth-menu button:hover, .auth-menu button:focus-visible, .auth-menu .auth-menu-link:hover { background: var(--color-surface-2); outline: none; }
.auth-menu .nav-badge { position: static; margin-left: 6px; }
@media (min-width: 768px) {
  .avatar-btn { width: 32px; height: 32px; min-width: 0; min-height: 0; border-radius: 4px; }
  .nav-item .ui-icon { width: 16px; height: 16px; flex-basis: 16px; }
}
@media (max-width: 767px) {
  /* Single source of footer clearance: the footer closes every screen and stops 16px above the fixed tab bar (the floating demo bar sits over content, not in flow). */
  .player-footer, .site-footer { padding-bottom: calc(var(--bottom-tab-h) + 16px + env(safe-area-inset-bottom, 0px)); }
  .app:has(.demo-bar) .player-footer, .app:has(.demo-bar) .site-footer { padding-bottom: calc(var(--demo-bar-bottom) + var(--demo-bar-h) + 16px + env(safe-area-inset-bottom, 0px)); }
  .player-footer__inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
  .player-footer__brand, .player-footer__right { justify-content: center; }
  .site-footer__links { justify-content: center; }
  .bottom-tab button { letter-spacing: 0; flex: 1 1 0; min-width: 0; }
  .bottom-tab [data-nav="comunidades"] { flex: 0 0 88px; }
}

/* Mi perfil r2 (design-lead): 2-column grid, chips, cyan buttons, compact shelf + milestone row, switches, settings summary */
.btn--cyan { background: var(--color-cyan); color: var(--color-on-accent); border: 3px solid var(--color-outline); box-shadow: var(--shadow-hard-sm); }
.btn--cyan:hover:not(:disabled) { background: var(--color-cyan); color: var(--color-on-accent); border-color: var(--color-outline); }
@media (min-width: 1101px) {
  .profile-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
}
.profile-sections > .profile-history .history-list { background: none; border: 0; box-shadow: none; padding: 0; }
.profile-sections > .settings-block { grid-column: 1 / -1; }
.social-chip, .profile-comm-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.profile-hero__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.profile-hero__title-row .rank-badge--xl { flex-direction: row; align-items: center; gap: 0; }
.profile-hero__title-row .rank-badge--xl .rank-badge__icon { width: 28px; height: 28px; margin-right: 8px; }
.profile-hero__title-row .rank-badge--xl .rank-badge__name { padding: 3px 10px; border: 2px solid var(--color-text); border-radius: 999px; font-size: 11px; line-height: 14px; color: var(--color-text);}
.profile-hero__xp { max-width: 420px; }
.profile-hero__xp-caption { color: var(--color-accent); }
.profile-hero__actions .link { color: var(--color-cyan); text-transform: none; letter-spacing: 0; }
.profile-hero__actions .btn { font-family: var(--font-sans); font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* Tu género top (Figma 6:837): vinyl left of «Compartir perfil», demo only */
.profile-genre__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.profile-genre__head h2 { margin: 0; font-family: var(--font-display); font-size: 12px; line-height: 1.5; font-weight: 400; color: var(--color-cream); }
.profile-genre { min-width: 0; }
.profile-genre__body { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
/* Same Figma «Vinyl» as .vinyl-s (78x67), every measure at 2.2x: 172x148 box, 141px disc */
.profile-genre .vinyl-s { flex: 0 0 172px; width: 172px; height: 148px; }
.profile-genre .vinyl-s__disc { width: 141px; height: 141px; }
.profile-genre .vinyl-s__arm { left: 96.4px; top: 14.7px; width: 53.5px; height: 67.6px; }
.profile-genre .vinyl-s__head { left: 87.4px; top: 80.5px; width: 15.4px; height: 14.1px; }
.profile-genre .vinyl-s__head i { width: 13.2px; height: 7.9px; border-width: 2px; border-radius: 1.3px; }
.profile-genre .vinyl-s__pivot { left: 138px; top: 5.6px; width: 22.5px; height: 22.5px; }
.profile-genre .vinyl-s__cap { left: 145px; top: 12.7px; width: 8.5px; height: 8.5px; }
.profile-genre__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.profile-genre__text strong { font-family: var(--font-display); font-size: 12px; font-weight: 400; color: var(--genre-electronica-strong); } /* PROPUESTO: the demo genre is electronic; a real source will set --genre-accent per key */
.profile-genre__text span { font-family: var(--font-mono); font-size: 10px; color: var(--color-muted-2); }
@media (min-width: 1101px) {
  .profile-genre { grid-column: 1; }
  .profile-genre + .profile-share { grid-column: 2; }
}
.profile-hero__stats .stat-cell { border-radius: 16px; box-shadow: var(--shadow-hard); }
.profile-shelf-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.profile-shelf-row .badge-card { flex: 0 0 116px; width: 116px; padding: 8px; gap: 4px; font-size: 10px; }
.profile-shelf-row .badge-card__name { font-size: 10px; line-height: 1.3; }
.profile-shelf-row .badge-card__meta, .profile-shelf-row .badge-card__verify { font-size: 9px; line-height: 1.3; }
.profile-shelf-row .badge-card__art img { width: 32px; height: 32px; }
.badge-card--featured .badge-card__art img { width: 256px; height: 256px; max-width: 100%; }
.badge-card--locked { filter: none; border-style: dashed; }
.badge-art {
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--badge-ring, transparent);
}
.badge-art--earned { background: color-mix(in srgb, var(--badge-color, transparent) 18%, transparent); }
.badge-art--locked { box-shadow: 0 0 0 2px var(--badge-ring, var(--badge-ring-common-base)); background: transparent; }
.badge-art img { image-rendering: pixelated; image-rendering: crisp-edges; }
.profile-logros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.profile-logros .badge { width: 56px; height: 56px; }
.passport-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 12px; background: var(--color-surface-2); border-radius: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
.passport-wallet code { color: var(--color-text); }
.ride-or-die h2 { color: var(--color-accent); }
.ride-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ride-chip { background: var(--color-accent); color: var(--color-on-accent); }
/* Ajustes · privacidad on Mi perfil — Figma 43:10724 / 115:51096 */
.settings-block { display: flex; flex-direction: column; gap: 14px; }
.settings-block h2 { margin: 0; font-family: var(--font-display); font-size: 10px; line-height: 1.5; font-weight: 400; color: var(--color-muted-2); }
.settings-block .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0; padding: 0; border: 0; }
.settings-block .toggle-row__copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 620px; }
.settings-block .toggle-row__copy strong { font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: normal; color: var(--color-cream); }
.settings-block .toggle-help { margin: 0; font-family: var(--font-mono); font-size: 10px; line-height: normal; color: var(--color-muted-2); }
.settings-block .toggle { position: relative; flex: 0 0 auto; box-sizing: border-box; width: 56px; height: 30px; min-width: 0; min-height: 0; padding: 0; background: var(--color-surface-2); border: 3px solid var(--color-outline); border-radius: 999px; box-shadow: none; cursor: pointer; }
.settings-block .toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--color-muted); border-radius: 50%; transition: transform 0.15s; }
.settings-block .toggle.is-on { background: var(--color-accent); }
.settings-block .toggle.is-on::after { background: var(--color-outline); transform: translateX(26px); }
.settings-block__passkey { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.settings-block__passkey strong { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--color-cream); }
.settings-block__passkey span { font-family: var(--font-mono); font-size: 11px; color: var(--color-muted-2); }
.settings-block__passkey .btn { font-family: var(--font-sans); min-height: 0; padding: 8px 18px; border-width: 3px; border-radius: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.settings-block__note, .settings-block__more { margin: 0; font-family: var(--font-mono); font-size: 10px; line-height: normal; color: var(--color-muted-2); }
.settings-block__more .link { padding: 0; color: var(--color-muted-2); font-size: inherit; text-decoration: none; text-transform: none; letter-spacing: 0; text-align: left; }
.settings-block__more .link:hover { text-decoration: underline; }
.settings-block--access .settings-block__lead { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: normal; color: var(--color-text); }
.settings-block--access .btn { font-family: var(--font-sans); align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 48px; min-height: 0; padding: 0 14px; border-width: 3px; border-radius: 12px; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.settings-block--access .btn .ui-icon { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .profile-head { flex-wrap: nowrap; }
  /* P9: the title wraps («Mi perfil · Editar» + the Ejemplo chip) instead of pushing the gear past 360 px. */
  .profile-head__title { font-size: 18px; white-space: normal; min-width: 0; flex: 1 1 0; }
  .profile-hero__avatar { position: static; margin: 0 0 12px; }
  .profile-hero__body { margin-top: 0; }
}
.profile-hero__handle { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.profile-hero__handle-src { margin: 0; }
.profile-hero__handle-src::before { content: "·"; margin-right: 8px; }
.profile-sections > .badge-album { grid-column: 1 / -1; }
.profile-crumb { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; color: var(--color-accent); }

/* Detalle de evento r2 (design-lead) */
.event-hero__host { display: inline; padding: 0; min-height: 0; min-width: 0; font: inherit; color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; }
.event-hero__host--tirly {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
}
.event-hero__host--tirly img { width: 20px; height: 20px; image-rendering: pixelated; }
.who-is-in__avatar { width: 40px; height: 40px; font-size: 11px; border: 2px solid var(--color-outline); }
.who-is-in__row { gap: 8px; }
.who-is-in__head h2 { white-space: nowrap; }
.event-voice .settings-switch { width: 36px; height: 20px; min-width: 0; min-height: 0; border-radius: 999px; }
.event-voice .settings-switch::after { top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; }
.join-night .btn { padding: 12px 20px; font-size: 12px; letter-spacing: var(--ls-label); border-radius: 8px; min-height: 0; }
.join-night .btn:not(.btn-primary):not(.btn-join) { border-width: 2px; }
@media (max-width: 767px) {
  .event-detail__grid { display: flex; flex-direction: column; gap: 20px; }
  .event-detail__main, .event-detail__side { display: contents; }
  /* Figma 52:9224: cover, title, date, who, reward, description, join button, voice SOON; the rest follows. */
  [data-block="event-cover"] { order: 0; }
  [data-block="event-hero"] { order: 1; }
  [data-block="who-is-in"] { order: 2; }
  [data-block="event-reward"] { order: 3; }
  [data-block="event-description"] { order: 4; }
  [data-block="join-night"] { order: 5; }
  [data-block="voice-soon"] { order: 6; }
  [data-block="how-counts"] { order: 7; }
  [data-block="event-forms"] { order: 8; }
  [data-block="badge-preview"] { display: none; }
}

/* Comunidades + detalle r2 (design-lead) */
.community-card__facts { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.community-card__line { white-space: nowrap; font-size: 14px; }
.community-hero__title { font-size: 32px; line-height: 1.25; }
.community-hero__title-row { flex-wrap: nowrap; }
.community-hero__icon .comm-icon { width: 44px; height: 44px; }
.event-card .btn-join, .event-card .btn { width: auto; align-self: flex-start; padding: 12px 20px; border-radius: 8px; min-height: 0; }
.event-card .btn:not(.btn-primary) { border-width: 2px; }
@media (max-width: 767px) {
  .community-hero { flex-direction: column; align-items: flex-start; }
  .community-hero__copy { flex: 0 0 auto; width: 100%; }
  .community-hero__title-row { flex-wrap: wrap; }
  .community-hero__join { align-self: stretch; }
}

/* Eventos r2 (design-lead): one chip row, Martian Mono 12 chips, solid green active chip */
.event-chiprow { display: flex; align-items: center; gap: 8px 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 8px 0 0; }
.event-chiprow > * { flex: 0 0 auto; }
.chip-tabs { display: flex; gap: 8px; flex-wrap: nowrap; }
.chip-tabs .tab { padding: 6px 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: var(--ls-label); border: 1.5px solid var(--color-text); border-radius: 999px; background: transparent; color: var(--color-text); }
.chip-tabs .tab.is-active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.chip-tabs .tab.is-active::before { display: none; }
.event-chiprow .event-filters { display: flex; gap: 8px; margin: 0; }
.event-chiprow .filter-field > span { display: none; }
.event-chiprow .filter-field select { min-height: 0; height: 32px; padding: 0 28px 0 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); border: 1.5px solid var(--color-text); border-radius: 999px; background-color: transparent; color: var(--color-text); }
.events-empty__art { position: relative; }
.events-empty__star { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px; }

/* Inicio sin sesión r2: hero CTAs on one row, left-aligned passkey help */
.home-hero .auth-cta-row { flex-wrap: nowrap; }
.home-hero .auth-cta-stack__what, .home-hero .auth-cta-stack__what-body { text-align: left; align-self: flex-start; }
.home-events-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.home-events-empty p { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 1.5;}
.who-is-in { min-width: 0; }
.who-is-in__head { flex-wrap: wrap; }
@media (max-width: 767px) { .who-is-in__head h2 { font-size: 16px; } }
.home .rail-card, .home [data-block] { box-sizing: border-box; }
@media (max-width: 767px) { .home [data-block="recent-badges"] { align-self: stretch; width: 100%; } }

/* Ranking chips: one complete row on desktop (server chips use the short code), horizontal scroll only on phones */
.rank-chips { flex-wrap: nowrap; overflow: visible; }
@media (max-width: 767px) { .rank-chips { overflow-x: auto; } }

/* r3 (design-lead): Música, Ranking, modal */
.music-crate { margin-bottom: 0; }
.music-crate + .music-duo { margin-top: 32px; }
.kpi--vibe strong { font-size: 28px; white-space: nowrap; overflow-wrap: normal; }
.genre-badge { border-radius: 16px; }
@media (max-width: 767px) {
  .kpi--vibe strong { font-size: 15px; overflow-wrap: normal; }
}
.rank-row__avatar { letter-spacing: 0; font-size: 11px; }
.rank-tab { min-height: 38px; height: 38px; box-sizing: border-box; }
.rank-podium__step { border-color: var(--color-outline); }
.rank-podium__place--you .rank-podium__step { border-color: var(--color-outline); }
.rank-pager__link { border: 2px solid var(--color-muted); border-radius: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label);}
.rank-pager__link.is-current { border-color: var(--color-accent); }
.passkey-modal { border-width: 3px; }
.passkey-modal:focus { outline: none; }
.passkey-modal__kicker { font-size: 10px; letter-spacing: 0; white-space: nowrap; }

/* r3c (design-lead): Eventos, detalle, Comunidades, Mi perfil, público, Inicio, Global */
.chip-tabs .tab { border-width: 1.5px; height: 30px; padding-top: 0; padding-bottom: 0; }
.event-chiprow { align-items: center; }
.event-chiprow .filter-field select { height: 30px; font-weight: 500; width: auto; field-sizing: content; }
.events-empty__star { width: 40px; height: 40px; top: -16px; right: -16px; }
@media (max-width: 767px) {
  .join-night, .badge-preview { width: 100%; box-sizing: border-box; }
  .avatar-btn { width: 32px; height: 32px; min-width: 0; min-height: 0; border-radius: 4px; position: relative; }
  .avatar-btn::before { content: ""; position: absolute; inset: -6px; }
  .topbar__enter { font-size: 12px; letter-spacing: 0; padding: 0 12px; }
  .player-footer__brand { flex-direction: column; justify-content: center; text-align: center; width: 100%; }
}
.join-night .btn-primary, .join-night .btn-join.btn-primary { border-width: 3px; }
.community-card__label { white-space: nowrap; }
.community-card .comm-icon { width: 44px; height: 44px; }
.btn.btn--cyan { border-width: 3px; }
.profile-hero__handle-main { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--color-muted-2); }
.profile-hero__shelf.card--shadow-ink { box-shadow: var(--shadow-hard); }
.settings-block { min-width: 0; box-sizing: border-box; max-width: 100%; }
.profile-share__native { background: var(--color-cyan); color: var(--color-on-accent); border: 3px solid var(--color-outline); box-shadow: var(--shadow-hard-sm); }
.passport-wallet .chip--solid { background: var(--color-cyan); color: var(--color-on-accent); }
.profile-hero__shelf .pending-strip { border: 0; background: var(--color-surface-2); border-radius: 16px; padding: 16px; }
.profile-hero__shelf .pending-card { border: 0; background: transparent; }
.passport-repo__name { font-family: var(--font-mono); font-size: 12px; text-decoration: underline; }
.passport-repo__desc { font-size: 11px; color: var(--color-muted); }
.passport-chip { white-space: nowrap; }
.profile-hero__avatar .avatar-xl.avatar-initial { color: var(--color-text); }
.home-panel--k { padding: 24px; }
.home-events-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.home-hero .auth-cta-stack { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.home-hero .auth-cta-stack__hint, .home-hero .auth-cta-stack__what, .home-hero .auth-cta-stack__what-body, .home-hero .auth-cta-stack__error { flex: 1 1 100%; }
@media (max-width: 767px) { .profile-head { gap: 8px; } .profile-head__title { font-size: clamp(14px, 4.4vw, 18px); } .profile-head .profile-gear { flex: 0 0 auto; margin-left: auto; } }
@media (max-width: 767px) { .passport-chip { white-space: normal; text-align: center; max-width: 100%; } .section-head { flex-wrap: wrap; } }
.rank-row__avatar { font-size: 10px; padding: 0 2px; box-sizing: border-box; overflow: hidden; }
.music-hero__more { margin-left: 4px; color: var(--color-muted); }

/* Mi perfil · milestone badges: whole Figma exports (114:10062…), 88px, one row with inner scroll */
.profile-logros { display: flex; gap: 12px; margin: 16px 0 0; padding: 0 0 6px; list-style: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.ach-badge { flex: 0 0 88px; width: 88px; height: 88px; }
.ach-badge img { display: block; width: 88px; height: 88px; image-rendering: pixelated; }
@media (max-width: 767px) { .profile-logros { gap: 8px; } }
.profile-logros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }

.profile-logros__caption { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--color-muted); }
.ach-badge--locked img { filter: saturate(0.35); opacity: 0.8; }

/* logros: the 11 badges fit one row at desktop widths (shrink down to 72px); phones keep 88px and scroll so the next one peeks */
.profile-logros { gap: 8px; }
.ach-badge { flex: 1 1 0; min-width: 72px; max-width: 88px; width: auto; height: auto; aspect-ratio: 1; }
.ach-badge img { width: 100%; height: 100%; }
@media (max-width: 767px) { .ach-badge { flex: 0 0 88px; width: 88px; } }

/* Create-passkey card: busy and error live inside the card (no floating toast) */
.pixel-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 10px; border: 3px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; animation: pixel-spin 0.8s steps(8) infinite; vertical-align: -2px; }
@keyframes pixel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pixel-spinner { animation: none; } }

/* Toasts (the only floating notice): desktop bottom-right 24px off the edge, phones bottom-centre above the tab bar; 3px outline + hard shadow */
.demo-bar.flash-toast { position: fixed; left: auto; right: 24px; bottom: 24px; max-width: min(420px, calc(100vw - 48px)); padding: 12px 16px; background: var(--color-surface); border: 3px solid var(--color-outline); border-radius: 8px; box-shadow: var(--shadow-hard); text-align: left; pointer-events: none; z-index: 60; }
@media (max-width: 767px) { .demo-bar.flash-toast { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--bottom-tab-h, 71px) + 16px); width: max-content; } }

/* ── Light theme (Figma «11 Light mode») ──────────────────────────────────────
   Tokens do most of the work. These rules cover surfaces where dark and light need a different role:
   text on pastel genre/avatar fills is ink, text on violet is white, and dimmed (opacity) states keep AA. */
/* Initials on a tinted square: white or ink, whichever the tint needs (the dark theme's fixed threshold misses AA on mid tones). */
[data-theme="light"] :is(.avatar-initial, .comm-initial--tint, .event-comm__initials) {
  color: oklch(from var(--av, var(--color-surface-2)) clamp(0, (0.6 - l) * 1000, 1) 0 0) !important;
}
[data-theme="light"] .topbar .avatar-btn .avatar-initial { color: var(--color-white) !important; }
[data-theme="light"] .profile-hero__avatar .avatar-xl,
[data-theme="light"] .profile-hero__avatar .avatar-xl.avatar-initial { color: var(--color-white); }
[data-theme="light"] .ride-or-die h2,
[data-theme="light"] .ride-or-die .history-list li strong { color: var(--color-white); }
[data-theme="light"] .community-card__event--empty,
[data-theme="light"] .genre-badge--locked { opacity: 1; }
/* Genre fills: ink or white by the fill, so the darker light cyan gets white and the pastels get ink. */
[data-theme="light"] :is(.music-chart__genre, .music-rec-card__genre) {
  color: oklch(from var(--listen-accent) clamp(0, (0.6 - l) * 1000, 1) 0 0);
}
[data-theme="light"] .topbar__brand img + img { filter: invert(1); }

/* Phones: the Dark / Light switch collapses to two icon buttons so the brand keeps its room.
   The mask sits on ::before so the button itself stays unmasked and its focus ring is visible. */
@media (max-width: 767px) {
  .theme-switch__label, .theme-switch__colon, .theme-switch__sep { display: none; }
  .theme-switch { gap: 0; }
  .theme-switch__btn {
    position: relative;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;
  }
  .theme-switch__text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .theme-switch__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: center / 16px 16px no-repeat;
    mask: center / 16px 16px no-repeat;
  }
  .theme-switch__btn[data-set-theme="dark"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 1.5a6.5 6.5 0 1 0 4.5 11A5.5 5.5 0 0 1 10 1.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 1.5a6.5 6.5 0 1 0 4.5 11A5.5 5.5 0 0 1 10 1.5z'/%3E%3C/svg%3E"); }
  .theme-switch__btn[data-set-theme="light"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 .5v2.5M8 13v2.5M.5 8H3M13 8h2.5M2.7 2.7l1.8 1.8M11.5 11.5l1.8 1.8M2.7 13.3l1.8-1.8M11.5 4.5l1.8-1.8' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 .5v2.5M8 13v2.5M.5 8H3M13 8h2.5M2.7 2.7l1.8 1.8M11.5 11.5l1.8 1.8M2.7 13.3l1.8-1.8M11.5 4.5l1.8-1.8' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); }
}
[data-theme="light"] .passkey-modal__key img { filter: invert(1); } /* baked-black key pixels become on-accent white */

/* Phone header budget (360px signed out is the tightest): logo and ENTRAR first, then ES/EN, then the theme icon.
   The brand never shrinks into the language switch; below 420px the wordmark gets smaller and the theme pair
   shows only the button that switches to the other theme. */
@media (max-width: 767px) {
  .topbar { gap: 12px; }
  .topbar__brand { flex: 0 0 auto; gap: 8px; }
}
@media (max-width: 420px) {
  .topbar { padding: 0 12px; }
  .topbar__brand img + img { width: 64.7px; height: 17.25px; }
  .topbar__enter { padding: 0 8px; }
  .topbar .theme-switch__btn[aria-pressed="true"] { display: none; }
}
/* 360px signed out in English («SIGN IN») is the tightest header: tighten the wordmark, ENTRAR and the icon buttons. */
@media (max-width: 380px) {
  .topbar { padding: 0 10px; }
  .topbar__brand { gap: 6px; }
  .topbar__brand img + img { width: 54px; height: 14.4px; }
  .topbar__enter { padding: 0 6px; font-size: 10px; letter-spacing: 0.02em; }
  .topbar .theme-switch__btn { width: 30px; }
}

/* ============================================================
   Inicio, signed in · Figma 3:209 (desktop), 6:917 (mobile), 70:14313 (empty states)
   First-level cards are flat (.card--flat, no border, no shadow); only «Tu progreso» keeps the
   outlined .card--shadow-2. Every value below is read from the Figma node dump; colors are tokens.
   ========================================================================== */
.home:not(.home--out) .card--flat { border: 0; box-shadow: none; border-radius: var(--radius-card); background: var(--color-surface); }
.home:not(.home--out) .card--nested { border-radius: 16px; }

/* Section heads: 20px pixel title (30px line), 12px gap to the chip */
.home:not(.home--out) [data-block] .section-head { align-items: center; gap: 12px; margin-bottom: 16px; }
.home:not(.home--out) [data-block] .section-head h2 { font-size: 20px; line-height: 30px; }
.home:not(.home--out) [data-block="upcoming"] .section-head { margin-bottom: 32px; }
.home:not(.home--out) .section-head .chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; color: var(--color-text); }
.home:not(.home--out) .section-head .chip--outline { padding: 4px 8px; border: 2px solid var(--color-muted); border-radius: 999px; background: transparent; }
.home:not(.home--out) .section-head .chip--live { padding: 4px 8px; border: 0; border-radius: 999px; background: var(--color-surface-2); }

/* Buttons inside Home cards: 3px muted outline, 12px radius, 12/20 padding (Figma «Button») */
.home:not(.home--out) [data-block] .btn:not(.btn-primary):not(.btn-join),
.home:not(.home--out) [data-block="upcoming"] .btn-join {
  min-height: 46px; padding: 12px 20px; border: 3px solid var(--color-muted); border-radius: var(--radius-button);
  background: transparent; box-shadow: none; color: var(--color-text);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0;
}
.home:not(.home--out) [data-block] .btn:hover:not(:disabled) { border-color: var(--color-accent); }

/* Tu próximo paso: SG 20 title, SG 14 context line */
.home:not(.home--out) .next-step__text { gap: 6px; }
.home:not(.home--out) .next-step__title { font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 27px; }
.home:not(.home--out) .next-step__meta { font-family: var(--font-sans); font-size: 14px; line-height: 21px; color: var(--color-muted); }

/* Top 3 podium: P2 | P1 | P3, flat steps, square initials avatars */
.home-podium { display: flex; align-items: flex-end; gap: 12px; width: 100%; }
.home-podium__place { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.home-podium__crown { width: 28px; height: 28px; image-rendering: pixelated; }
.home-podium__who { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; }
.home-podium__who.link-row { cursor: pointer; }
.home-podium__who.link-row:hover .home-podium__name { color: var(--color-accent); }
.home-podium__avatar { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border: 4px solid var(--color-outline); border-radius: 9px; background: var(--color-surface-2); color: var(--color-text); font-family: var(--font-display); font-size: 14px; line-height: 1; object-fit: cover; box-sizing: border-box; }
.home-podium__place--1 .home-podium__avatar { width: 72px; height: 72px; border-width: 5px; }
.home-podium__place--3 .home-podium__avatar.avatar-initial { background: var(--color-bronze); color: var(--color-ink); }
.home-podium__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 17px; color: var(--color-text); }
.home-podium__xp { display: inline-flex; align-items: center; gap: 4px; padding-bottom: 6px; font-family: var(--font-mono); font-size: 10px; line-height: 14px; color: var(--color-muted); }
.home-podium__xp img { width: 16px; height: 18px; }
.home-podium__step { display: grid; place-items: center; width: 100%; border-radius: 8px 8px 0 0; background: var(--color-surface-2); color: var(--color-text); font-family: var(--font-display); font-size: 36px; line-height: 1.25; }
.home-podium__place--2 .home-podium__step { height: 100px; }
.home-podium__place--1 .home-podium__step { height: 140px; font-size: 48px; }
.home-podium__place--3 .home-podium__step { height: 76px; background: color-mix(in srgb, var(--color-bronze) 30%, var(--color-surface-2)); }
.home:not(.home--out) [data-block="top3"] .top3-cta { display: flex; margin: 0 auto; align-self: center; width: auto; max-width: none; }
.home:not(.home--out) [data-block="top3"] { display: flex; flex-direction: column; gap: 16px; }
.home:not(.home--out) [data-block="top3"] .section-head { margin-bottom: 0; }

/* Jugando ahora */
.home:not(.home--out) [data-block="playing-now"] { display: flex; flex-direction: column; gap: 16px; }
.home:not(.home--out) [data-block="playing-now"] .section-head { margin-bottom: 0; }
.home:not(.home--out) .playing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.home:not(.home--out) .playing-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
.home:not(.home--out) .playing-card__hit { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
.home:not(.home--out) .playing-card__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.home:not(.home--out) .playing-card .avatar { width: 44px; height: 44px; flex: 0 0 44px; border: 3px solid var(--color-outline); border-radius: 7px; box-sizing: border-box; font-family: var(--font-display); font-size: 11px; }
.home:not(.home--out) .playing-card .avatar-anon { border-width: 2px; }
.home:not(.home--out) .playing-card__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home:not(.home--out) .playing-card__meta strong { font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 27px; color: var(--color-text); text-transform: none; }
.home:not(.home--out) .playing-card__game { font-family: var(--font-mono); font-size: 12px; line-height: 17px; letter-spacing: 0; color: var(--color-muted-2); }
.home:not(.home--out) .playing-card__server { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 21px; color: var(--color-muted); }

/* Ahora suena: tag, title, artist | avatar, player, server */
.home:not(.home--out) [data-block="now-playing"] { display: flex; flex-direction: column; gap: 16px; }
.home:not(.home--out) [data-block="now-playing"] .section-head { margin-bottom: 0; }
.home:not(.home--out) .now-rows { display: flex; flex-direction: column; gap: 16px; }
.home:not(.home--out) .now-row { display: flex; align-items: center; gap: 16px; padding: 16px; flex-wrap: nowrap; }
.home:not(.home--out) .now-row__track { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 1 auto; min-width: 0; }
.home:not(.home--out) .now-row__track strong { font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 27px; color: var(--color-text); }
.home:not(.home--out) .now-row__track > span:not(.chip) { font-family: var(--font-sans); font-size: 14px; line-height: 21px; color: var(--color-muted); }
.home:not(.home--out) .now-row__genre { order: 0; padding: 4px 8px; border: 0; border-radius: 999px; background: var(--genre-tint, var(--genre-otro-base)); font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; color: var(--genre-on-tint, var(--genre-otro-on-base)); }
.home:not(.home--out) .now-row__listener { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; text-align: right; }
.home:not(.home--out) .now-row__listener .avatar { width: 36px; height: 36px; border: 2px solid var(--color-outline); border-radius: 6px; box-sizing: border-box; font-family: var(--font-display); font-size: 9px; }
.home:not(.home--out) .now-row__listener strong { font-family: var(--font-mono); font-size: 10px; font-weight: 400; line-height: 14px; color: var(--color-text); }
.home:not(.home--out) .now-row__listener > span:last-child { font-family: var(--font-mono); font-size: 10px; line-height: 14px; color: var(--color-muted); }
.home:not(.home--out) .games-caption { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 21px; color: var(--color-muted); }

/* Próximos eventos */
.home:not(.home--out) [data-block="upcoming"] { margin-bottom: 0; }
.home:not(.home--out) .event-grid--home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.home:not(.home--out) .event-card--home { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
.home:not(.home--out) .event-card__when { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; color: var(--color-muted-2); }
.home:not(.home--out) .event-card__cat { padding: 4px 8px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text); line-height: 16px; }
.home:not(.home--out) .event-card--home .event-title { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 30px;}
.home:not(.home--out) .event-card--home .event-title__btn { font: inherit; color: var(--color-text); text-decoration: none; text-align: left; }
.home:not(.home--out) .event-card__meta { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--color-muted); }

/* Right rail */
.home:not(.home--out) .progress-card__rank { display: flex; align-items: center; gap: 16px; margin: 0; }
.home:not(.home--out) .progress-card__icon { width: 58px; height: 64px; flex: 0 0 auto; }
.home:not(.home--out) .progress-card__title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home:not(.home--out) .progress-card__name { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 50px; color: var(--color-text); overflow-wrap: normal; }
.home:not(.home--out) .progress-card__division { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home:not(.home--out) .progress-card__xp { margin: 0; font-family: var(--font-mono); font-size: 10px; line-height: 14px; color: var(--color-muted);}
.progress-bar { width: 100%; height: 14px; border: 2px solid var(--color-outline); border-radius: 999px; background: var(--color-bg); overflow: hidden; box-sizing: content-box; }
.progress-bar__fill { display: block; height: 100%; border-radius: 999px 0 0 999px; background: var(--color-accent-muted-1); }
.home:not(.home--out) .progress-note { font-family: var(--font-sans); font-size: 14px; line-height: 21px; color: var(--color-text); }
.home:not(.home--out) .progress-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.home:not(.home--out) .progress-stats span { padding: 6px 12px; border-radius: 999px; background: var(--color-surface-2); font-family: var(--font-mono); font-size: 10px; line-height: 14px; color: var(--color-text); }
.home:not(.home--out) .progress-stats strong { font-weight: 400; }

/* Top bar (Figma 3:206): flat 400px search, 48px dark avatar with initials in the pixel font */
.topbar__search { border-radius: var(--radius-button); box-shadow: none; background: var(--color-surface); }
.topbar .avatar-btn { width: 48px; height: 48px; min-width: 0; min-height: 0; border: 2px solid var(--color-outline); border-radius: 8px; background: var(--color-surface-2); }
.topbar .avatar-btn .avatar-initial { background: var(--color-surface-2) !important; color: var(--color-text) !important; font-family: var(--font-display); font-size: 12px; }
[data-theme="light"] .topbar .avatar-btn .avatar-initial { color: var(--color-text) !important; }

/* Tu progreso */
.home:not(.home--out) .progress-card { display: flex; flex-direction: column; gap: 16px; }
.home:not(.home--out) .progress-card .progress-bar { box-sizing: border-box; height: 14px; }
.home:not(.home--out) .progress-card__xp { margin: 0; }
.home:not(.home--out) .progress-stats { margin-top: 0; }

/* Tirly card, sign-badge CTA, recent badges */
.home:not(.home--out) .rail-companion h2 { margin: 0; font-family: var(--font-sans); font-size: 28px; font-weight: 700; line-height: 34px; }
.home:not(.home--out) .rail-companion__copy p { font-family: var(--font-sans); font-size: 16px; line-height: 24px; }
.home:not(.home--out) .sign-badge { padding: 24px; gap: 16px; }
.home:not(.home--out) .sign-badge__eyebrow { font-weight: 500; line-height: 16px; }
.home:not(.home--out) .sign-badge .sign-badge__title { line-height: 30px; }
.home:not(.home--out) .sign-badge__body { font-size: 14px; line-height: 22px; color: var(--color-muted); }
.home:not(.home--out) .sign-badge__cta { box-sizing: border-box; min-height: 62px; padding: 20px 28px; border: 3px solid var(--color-outline); border-radius: var(--radius-button); background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-hard-sm); font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 16px; letter-spacing: 0; }
.home:not(.home--out) .recent-badges { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.home:not(.home--out) .recent-badges > h2 { margin: 0; }
.home:not(.home--out) .recent-badges__list { gap: 16px; }
.home:not(.home--out) .recent-badge { padding: 12px 0; gap: 16px; }
.home:not(.home--out) .recent-badge__meta { gap: 4px; }
.home:not(.home--out) .recent-badge__meta span { font-weight: 500; line-height: 16px; letter-spacing: 0; color: var(--color-muted); }
.home:not(.home--out) .recent-badge__verify { min-height: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; text-decoration: none; color: var(--color-text); }
.home:not(.home--out) .playing-card__meta strong {}
.home-podium__name, .home-podium__xp { letter-spacing: 0; }
.home:not(.home--out) .progress-note { margin: 0; }
.player-footer .site-footer__links { gap: 24px; }
.player-footer .site-footer__links a { min-height: 24px; display: inline-flex; align-items: center; }
.player-footer__right { align-items: center; }

/* Demo subtitle: full line on desktop, «JUGADOR DE EJEMPLO» label on phones (Figma 6:917) */
.home-head__sub-short { display: none; }

/* ---- Inicio at 390 / 360 (Figma 6:917) -------------------------------------------------------- */
@media (max-width: 767px) {
  .home:not(.home--out) .home-head { gap: 8px; margin-bottom: 24px; }
  .home:not(.home--out) .home-head .page-title { font-size: clamp(26px, 8.2vw, 32px); line-height: 1.375; }
  .home:not(.home--out) .home-head__sub { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; }
  .home:not(.home--out) .home-head__sub-long { display: none; }
  .home:not(.home--out) .home-head__sub-short { display: inline; }
  .page-columns--home { gap: 24px; }
  .home:not(.home--out) .home-panel,
  .home:not(.home--out) .rail-card,
  .home:not(.home--out) .next-step,
  .home:not(.home--out) .sign-badge,
  .home:not(.home--out) .recent-badges { padding: 20px; }
  .home:not(.home--out) .event-card--home { padding: 24px; }
  .home:not(.home--out) .rail-companion--empty,
  .home:not(.home--out) .progress-card { padding: 22px 22px 18px; }
  .home:not(.home--out) .rail-companion--empty { padding: 24px; }
  .home:not(.home--out) .event-card__when { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .home:not(.home--out) [data-block] .section-head { flex-wrap: nowrap; gap: 10px; }
  .home:not(.home--out) [data-block] .section-head h2 { font-size: 14px; line-height: 20px; min-width: 0; }
  .home:not(.home--out) [data-block] .section-head .chip { flex: 0 0 auto; }
  .home:not(.home--out) .recent-badges > h2 { font-size: 14px; line-height: 20px; }

  /* Tu próximo paso */
  .home:not(.home--out) .next-step__row { align-items: center; }
  .home:not(.home--out) .next-step__text { gap: 6px; }


  /* Jugando ahora: one column */
  .home:not(.home--out) .playing-grid { grid-template-columns: minmax(0, 1fr); }

  /* Ahora suena: vinyl | (title, artist, tag, listener) */
  .home:not(.home--out) [data-block="now-playing"] { gap: 12px; }
  .home:not(.home--out) .now-rows { gap: 12px; }
  .home:not(.home--out) .now-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; padding: 12px; }
  .home:not(.home--out) .now-row .vinyl-s { grid-row: 1 / span 2; grid-column: 1; }
  .home:not(.home--out) .now-row__track { grid-column: 2; grid-row: 1; gap: 6px; }
  .home:not(.home--out) .now-row__track strong { order: 1; }
  .home:not(.home--out) .now-row__track > span:not(.chip) { order: 2; }
  .home:not(.home--out) .now-row__genre { order: 3; }
  .home:not(.home--out) .now-row__listener { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: nowrap; min-width: 0; gap: 6px; padding: 0; text-align: left; }
  .home:not(.home--out) .now-row__listener > span:last-child { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home:not(.home--out) .now-row__listener strong { flex: 0 0 auto; }
  .home:not(.home--out) .now-row__listener .avatar { width: 28px; height: 28px; }

  /* Top 3 */
  .home-podium { gap: 8px; }
  .home-podium__crown { width: 20px; height: 20px; }
  .home-podium__avatar { width: 40px; height: 40px; border-width: 3px; border-radius: 7px; font-size: 10px; }
  .home-podium__place--1 .home-podium__avatar { width: 52px; height: 52px; border-width: 3px; }
  .home-podium__xp { padding-bottom: 4px; }
  .home-podium__step { font-size: 22px; }
  .home-podium__place--2 .home-podium__step { height: 70px; }
  .home-podium__place--1 .home-podium__step { height: 96px; font-size: 28px; }
  .home-podium__place--3 .home-podium__step { height: 54px; }

  /* Figma 6:917 has no EJEMPLO chip on the Top 3 head: the title keeps one line */
  .home:not(.home--out) [data-block="top3"] .section-head .chip { display: none; }
  .home:not(.home--out) [data-block="top3"] .section-head h2 { line-height: 30px; }

  /* Sign-badge card: eyebrow, title and button only (Figma 6:913) */
  .home:not(.home--out) .sign-badge__body { display: none; }

  /* Próximos eventos */
  .home:not(.home--out) [data-block="upcoming"] .section-head { flex-wrap: wrap; margin-bottom: 24px; }
  .home:not(.home--out) [data-block="upcoming"] .section-head h2 { font-size: 20px; line-height: 30px; }
  .home:not(.home--out) [data-block="upcoming"] .section-head .link { white-space: nowrap; }
  .home:not(.home--out) .event-grid--home { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .home:not(.home--out) .event-card--home .event-title { overflow-wrap: normal; word-break: normal; }

  /* Top bar (Figma 6:903): 80px tall, 20px sides; ES/EN, theme and the 48px avatar keep 12px gaps */
  .topbar--signed-in { height: 80px; min-height: 80px; padding: 16px 20px; }
  .topbar .avatar-btn { width: 48px; height: 48px; }
  .page-columns--home { align-items: stretch; }
  .home:not(.home--out) { padding-top: 4px; }
}
@media (max-width: 420px) {
  .topbar--signed-in { padding: 16px 12px; }
}

/* Empty states of «Jugando ahora» / «Ahora suena» (Figma 70:14313) */
.home:not(.home--out) .home-panel--k { border: 0; box-shadow: none; border-radius: var(--radius-card); padding: 28px; }
.home:not(.home--out) .empty-note { gap: 16px; padding: 22px; border: 2px dashed var(--color-line); border-radius: 12px; background: var(--color-surface-2); }
.home:not(.home--out) .empty-note__icon { flex: 0 0 auto; min-width: 0; width: auto; color: var(--color-accent); }
.home:not(.home--out) .empty-note__icon .vinyl-s { flex: 0 0 auto; }
.home:not(.home--out) .empty-note p { font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--color-muted); }
.home:not(.home--out) .empty-note__link { margin: 8px 0 0; padding: 0; border: 0; background: none; font-family: var(--font-mono); font-size: 12px; font-weight: 400; line-height: 24px; letter-spacing: 0; color: var(--color-accent); cursor: pointer; text-decoration: none; }
.home:not(.home--out) .empty-note__link:hover,
.home:not(.home--out) .empty-note__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .home-podium__place--3 .home-podium__step { background: var(--color-bronze); }

/* ==========================================================================
   Inicio v2 (Bastian): flat cards at rest, green border + hard shadow only on CLICKABLE cards
   (.card--link: the whole card is one <a>/<button>). Figma 238:31747, 239:31683, 238:31519.
   ========================================================================== */
.card--link { display: block; box-sizing: border-box; border: 3px solid transparent; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: none; color: inherit; text-decoration: none; cursor: pointer; outline: 1px solid var(--color-line); outline-offset: -1px; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.card--link:hover,
.card--link:focus-visible { border-color: var(--color-accent); outline-color: transparent; box-shadow: 6px 6px 0 var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .card--link { transition: none; } }

/* Tu progreso v2 */
.home:not(.home--out) .progress-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 22px 18px; text-align: center; }
.home:not(.home--out) .progress-card .eyebrow-title { margin: 0; font-weight: 400; line-height: 14px; letter-spacing: 0; color: var(--color-muted-2); }
.home:not(.home--out) .progress-card__badge { width: 112px; height: 112px; image-rendering: pixelated; }
.home:not(.home--out) .progress-card__name { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 32px; font-weight: 400; color: var(--color-text); overflow-wrap: normal; }
.home:not(.home--out) .progress-bar { width: 100%; box-sizing: border-box; height: 14px; }
.home:not(.home--out) .progress-bar__fill { background: var(--color-accent); }
.progress-xp { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.progress-xp__label { font-family: var(--font-mono); font-size: 10px; line-height: 12px; letter-spacing: 0; color: var(--color-muted); }
.progress-xp__value { font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 14px; color: var(--color-text); }
.home:not(.home--out) .progress-note { font-size: 14px; line-height: 18px; color: var(--color-muted); }
.home:not(.home--out) .progress-stats { justify-content: center; }
.home:not(.home--out) .progress-stats span { padding: 6px 12px; line-height: 12px; letter-spacing: 0; }
.home:not(.home--out) .progress-card__cta { align-self: stretch; margin-top: 0; padding-top: 14px; border-top: 1px solid var(--color-line); text-align: right; font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 14px; color: var(--color-text); }
.home:not(.home--out) .progress-card:hover .progress-card__cta,
.home:not(.home--out) .progress-card:focus-visible .progress-card__cta { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .home:not(.home--out) .progress-card:hover .progress-card__cta { color: var(--color-accent); }

/* Tirly: no events yet (Figma 239:31683) */
.home:not(.home--out) .rail-companion--empty { align-items: center; gap: 14px; padding: 24px; border: 1px solid var(--color-line); text-align: center; }
.home:not(.home--out) .rail-companion--empty h2.rail-companion__empty-title { margin: 0; width: 100%; font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 400; text-transform: none; color: var(--color-text); }
.home:not(.home--out) .rail-companion .rail-companion__empty-body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 19px; color: var(--color-muted); }
.empty-art { position: relative; width: 100%; height: 180px; overflow: hidden; border-radius: 16px; background: var(--color-surface-2); container-type: inline-size; }
.empty-art__scene { position: absolute; inset: 0; } /* the scene is ~330px wide: it shrinks as a whole when the card is narrower, never clips */
.empty-art__scene > * { position: absolute; }
@container (max-width: 339px) { .empty-art__scene { transform: scale(0.9); } }
@container (max-width: 305px) { .empty-art__scene { transform: scale(0.8); } }
@container (max-width: 272px) { .empty-art__scene { transform: scale(0.72); } }
@container (max-width: 245px) { .empty-art__scene { transform: scale(0.64); } }
.empty-art__floor { left: 12px; right: 12px; top: 160px; height: 6px; background: repeating-linear-gradient(90deg, var(--color-line) 0 6px, transparent 6px 24px); }
.empty-art__ring { top: 20px; width: 8px; height: 18px; border-radius: 2px; background: var(--color-outline); transform: translateX(-50%); }
.empty-art__ring--a { left: calc(50% + 59px); }
.empty-art__ring--b { left: calc(50% + 129px); }
.empty-art__calendar { left: calc(50% + 93px); top: 30px; width: 124px; height: 124px; box-sizing: border-box; overflow: hidden; border: 3px solid var(--color-outline); border-radius: 8px; background: var(--color-cream); transform: translateX(-50%); }
.empty-art__calendar > * { position: absolute; }
.empty-art__head { left: -3px; top: -3px; width: 124px; height: 30px; background: var(--color-accent-2); }
.empty-art__headline { left: -3px; top: 27px; width: 124px; height: 3px; background: var(--color-outline); }
.empty-art__month { left: 43px; top: 7px; font-family: var(--font-display); font-size: 10px; line-height: 10px; color: var(--color-white); }
.empty-art__day { width: 22px; height: 20px; box-sizing: border-box; border: 2px dashed var(--color-muted-2); border-radius: 3px; }
.empty-art__q { font-family: var(--font-display); font-weight: 400; color: var(--color-accent); }
.empty-art__q--big { left: calc(50% + 143px); top: 10px; font-size: 20px; line-height: 20px; }
.empty-art__q--small { left: calc(50% + 15px); top: 18px; font-size: 12px; line-height: 12px; }
.empty-art__cat { left: calc(50% - 91px); top: 26px; width: 140px; height: 140px; transform: translateX(-50%); }
.empty-art__handle { left: calc(50% - 41px); top: 134px; width: 12px; height: 46px; box-sizing: border-box; border: 3px solid var(--color-outline); border-radius: 3px; background: var(--color-brand-orange); transform: translate(-50%, -50%) rotate(-35deg); }
.empty-art__lens { left: calc(50% - 9px); top: 58px; width: 64px; height: 64px; box-sizing: border-box; border: 6px solid var(--color-outline); border-radius: 50%; background: var(--color-cyan); transform: translateX(-50%); }
.empty-art__rim { left: calc(50% - 9px); top: 61px; width: 58px; height: 58px; box-sizing: border-box; border: 3px solid var(--color-cream); border-radius: 50%; transform: translateX(-50%); }
.empty-art__shine { left: calc(50% - 19px); top: 72px; width: 8px; height: 14px; border-radius: 2px; background: var(--color-white); transform: translateX(-50%); }
.empty-art img { image-rendering: pixelated; }

/* Community card (Figma 238:31519): flat at rest, 3px green border + green hard shadow on hover / keyboard focus (master card rule) */
.community-card { border: 3px solid transparent; border-radius: var(--radius-card); box-shadow: none; outline: 1px solid var(--color-line); outline-offset: -1px; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.community-card:nth-child(3n + 1) { box-shadow: none; }
.community-card:hover,
.community-card:focus-within { border-color: var(--color-accent); outline-color: transparent; box-shadow: 6px 6px 0 var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .community-card { transition: none; } }

/* Empty «Próximos eventos» (Figma 239:72813): same Tirly art as the rail card, wide */
.home:not(.home--out) .events-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; border: 1px solid var(--color-line); text-align: center; }
.events-empty .empty-art { max-width: 100%; }
.events-empty__title { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 22px; font-weight: 400; text-transform: none; color: var(--color-text); }
.events-empty__body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 19px; color: var(--color-muted); }
.home:not(.home--out) .empty-note__vinyl { display: block; width: 64px; height: 67px; opacity: 0.55; }
.home:not(.home--out) .now-row__genre { white-space: nowrap; }

/* Master prompt §0: no coloured shadow at rest on Música and Eventos cards (black outline kept, black hard shadow only) */
.k-card, .k-card--purple, .k-card--green, .kpi, .kpi--xp, .kpi--vibe, .kpis > .kpi:nth-child(2), .event-card--k, .event-card--k:nth-child(3n) { box-shadow: var(--shadow-hard); }

/* Header avatar is already 48px (≥44px target): the extra hit-area pseudo-elements made it scroll (master 1.6) */
.topbar .avatar-btn::before, .topbar .avatar-btn::after { content: none; }

/* Avatar menu: language + theme groups (owner request; replaces the inline ES/EN and theme switch of the signed-in header) */
.auth-menu { min-width: 232px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 120px); overflow-y: auto; }
.auth-menu__sep { height: 1px; margin: 6px 4px; background: var(--color-line); }
.auth-menu__group { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; }
.auth-menu__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--ls-label); color: var(--color-muted-2); }
.auth-menu__seg { display: flex; flex: 0 0 auto; border: 2px solid var(--color-outline); border-radius: 8px; overflow: hidden; background: var(--color-surface-2); }
.auth-menu .auth-menu__seg button { display: block; width: auto; min-width: 44px; min-height: 36px; padding: 6px 10px; border-radius: 0; text-align: center; color: var(--color-muted-2); }
.auth-menu .auth-menu__seg button + button { border-left: 2px solid var(--color-outline); }
.auth-menu .auth-menu__seg button[aria-checked="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.auth-menu .auth-menu__seg button[aria-checked="true"]:hover { background: var(--color-accent); }
.auth-menu .auth-menu__seg button:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: -4px; }

/* Community card v2 (Figma 238:31519): horizontal, flat at rest; the whole card is one button */
.community-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
button.community-card { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 20px; align-items: stretch; width: 100%; height: auto; padding: 17px; overflow: visible; text-align: left; cursor: pointer; background: var(--color-surface); color: var(--color-text); text-transform: none; box-shadow: none; }
.community-card:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: -3px; box-shadow: 6px 6px 0 var(--color-accent); }
.community-card__image { display: block; width: 144px; height: 144px; }
.community-card__image .comm-icon { display: grid; place-items: center; width: 144px !important; height: 144px !important; box-sizing: border-box; border: 3px solid var(--color-outline); border-radius: 16px; font-family: var(--font-display); font-size: 36px !important; object-fit: cover; }
.community-card__info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.community-card .community-card__name { display: block; -webkit-line-clamp: unset; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 400; overflow-wrap: anywhere; color: var(--color-text); }
.community-card__line { font-family: var(--font-sans); font-size: 14px; line-height: 18px; color: var(--color-muted); }
.community-card__pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--color-outline); border-radius: 999px; background: var(--color-accent-2); color: var(--color-white); font-family: var(--font-mono); font-size: 11px; line-height: 13px;}
.community-card__pill-icon { width: 14px; height: 14px; background: currentColor; -webkit-mask: url("/tierly/assets/icons/communities.svg") center / contain no-repeat; mask: url("/tierly/assets/icons/communities.svg") center / contain no-repeat; }
.community-card .community-card__view { align-self: flex-end; margin-top: auto; padding: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 700; line-height: 16px; letter-spacing: 0; text-transform: none; color: var(--color-text); text-decoration: none; }
.community-card:hover .community-card__view,
.community-card:focus-visible .community-card__view { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .community-card:hover .community-card__view,
[data-theme="light"] .community-card:focus-visible .community-card__view { color: var(--color-accent); }
@media (max-width: 560px) {
  button.community-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 15px; }
  .community-card__image, .community-card__image .comm-icon { width: 96px !important; height: 96px !important; font-size: 26px !important; }
  .community-card .community-card__name { font-size: 14px; line-height: 20px; }
}
.community-card .community-card__line { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* Preset event covers (Figma 250:10063): list cards, detail. Presets are 760x240 with a baked 2px outline. */
.detail-cover { order: 0; }
.detail-cover .event-cover { border-radius: 16px; }
.event-card--cover { padding: 0; gap: 0; }
.event-card--cover .event-cover { height: auto; aspect-ratio: 760 / 240; max-height: none; flex: none; }
.event-card__body { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }
@media (max-width: 767px) {
  .detail-cover .event-cover { height: 180px; max-height: none; }
}

/* Presets are 760x240: always show the whole composition (cover, smooth). A native-pixel crop at 100 px
   cut the rocket/pad motifs into unreadable fragments (prod screenshot of «TEST»). */
.event-cover__img--preset { object-fit: cover; object-position: 70% 50%; image-rendering: auto; }

/* WoW Forever is native pixel art (not a scaled illustration): keep hard edges and centre the crop so the
   «W» badge and sparkles in the 140-620 px safe zone never clip, including on the narrower mobile card. */
.event-cover__img[src*="evento-wowforever"] { object-position: 50% 50%; image-rendering: pixelated; }

/* Event cards (Figma master card rule): flat at rest, the whole card is one link (stretched title button);
   3px accent border + hard accent shadow on hover and keyboard focus. The join button stays its own control above it. */
.event-card--home,
.event-card--home.event-card--k,
.event-card--home.event-card--k:nth-child(3n) { position: relative; border: 3px solid transparent; box-shadow: none; outline: 1px solid var(--color-line); outline-offset: -1px; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
/* The hairline sits just outside the box when there is a cover, so it never draws over the image edge. */
.event-card--home.event-card--cover { outline-offset: 0; }
.event-card--home:hover,
.event-card--home.event-card--k:hover,
.event-card--home.event-card--k:nth-child(3n):hover { border-color: var(--color-accent); outline-color: transparent; box-shadow: 6px 6px 0 var(--color-accent); }
/* Stretched link: the title button's ::after covers the whole card. By design it blocks text selection inside the card. */
.event-card--home .event-title__btn::after { content: ""; position: absolute; inset: 0; }
.event-card--home .btn-join,
.event-card--home .btn { position: relative; z-index: 1; }
/* Keyboard focus on the card needs :has(). Without it (Firefox < 121, Safari < 15.4) the title button keeps its own outline. */
@supports selector(:has(*)) {
  .event-card--home:has(.event-title__btn:focus-visible),
  .event-card--home.event-card--k:has(.event-title__btn:focus-visible) { border-color: var(--color-accent); outline-color: transparent; box-shadow: 6px 6px 0 var(--color-accent); }
  .event-card--home .event-title__btn:focus-visible { outline: none; }
}
@media (prefers-reduced-motion: reduce) { .event-card--home { transition: none; } }


/* Ranking tabs + RANGOS view (Figma 67:11969 / 67:16381). Flat cards at rest; nothing here is clickable, so no hover. */
.rank-view { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.chip--accent { background: var(--color-accent); color: var(--color-on-accent); }

.rank-top-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.rank-top-row--solo { grid-template-columns: minmax(0, 540px); }

.rank-me,
.rank-sources,
.rank-card,
.rank-faq__item {
  background: var(--color-surface);
  border: 3px solid var(--color-outline);
  border-radius: var(--radius-card);
  box-shadow: none;
  min-width: 0;
}
.rank-me { display: flex; flex-direction: column; gap: var(--space-4); padding: 28px; }
.rank-me__top { display: flex; align-items: center; gap: var(--space-4); }
.rank-me__badge { width: 80px; height: 80px; flex: none; image-rendering: pixelated; }
.rank-me__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rank-me__eyebrow { margin: 0; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0; color: var(--color-muted-2); }
.rank-me__name { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 44px; color: var(--color-accent-text); overflow-wrap: anywhere; }
.rank-me__who { font-family: var(--font-sans); margin: 0; font-size: var(--fs-body); line-height: 1.5; color: var(--color-text); overflow-wrap: anywhere; }
.rank-me__progress { display: flex; flex-direction: column; gap: var(--space-2); }
.rank-me__lbl { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0; color: var(--color-muted-2); }
.rank-me__lbl span:last-child { color: var(--color-text); text-align: right; }
.rank-me__missing { font-family: var(--font-sans); margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--color-text); }
.rank-me__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.rank-sources { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.rank-sources__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 30px; font-weight: 400; color: var(--color-text); }
.rank-sources__list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rank-source { display: flex; align-items: center; gap: 14px; }
.rank-source__val {
  flex: 0 0 120px;
  padding: 10px 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 2px solid var(--color-outline);
  border-radius: var(--radius-button);
}
.rank-source__val.is-on { background: var(--color-accent); color: var(--color-on-accent); }
.rank-source__txt { font-family: var(--font-sans); display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--color-muted-2); }
.rank-source__txt strong { font-size: var(--fs-body); font-weight: 400; color: var(--color-text); }

.rank-ladder { display: flex; flex-direction: column; gap: var(--space-4); }
.rank-ladder__title,
.rank-faq__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 44px; font-weight: 400; color: var(--color-text); }
.rank-ladder__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rank-card { display: flex; flex-direction: column; gap: var(--space-3); padding: 24px; }
.rank-card.is-you { border-color: var(--color-accent); }
.rank-card__head { display: flex; align-items: flex-start; justify-content: space-between; }
.rank-card__badge { width: 56px; height: 56px; image-rendering: pixelated; }
.rank-card__name { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 30px; font-weight: 400; letter-spacing: 0; color: var(--color-text); overflow-wrap: anywhere; }
.rank-card__range { margin: 0; font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 500; line-height: 1.5; color: var(--color-text); }
.rank-card__label { margin: 0; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0; color: var(--color-muted-2); }
.rank-card__divs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rank-card__div { padding: 5px 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-line); border-radius: 4px; }
.rank-card__div strong { font-weight: 700; color: var(--color-accent-text); }
.rank-card__benefits { margin: 0; font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.4; letter-spacing: 0; color: var(--color-muted-2); }

.rank-faq { display: flex; flex-direction: column; gap: var(--space-3); }
.rank-faq__item { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.rank-faq__item h3 { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; margin: 0; font-size: var(--fs-subtitle); font-weight: 500; line-height: 1.35; color: var(--color-text); }
.rank-faq__item p { font-family: var(--font-sans); margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--color-muted-2); }

@media (max-width: 1000px) {
  .rank-top-row { grid-template-columns: minmax(0, 1fr); }
  .rank-ladder__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .rank-view { gap: 24px; }
  .rank-ladder__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .rank-me, .rank-sources { padding: 20px; }
  .rank-me__name { font-size: 24px; line-height: 32px; }
  .rank-source { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .rank-source__val { flex: none; width: 100%; max-width: 160px; }
  .rank-ladder__title, .rank-faq__title { font-size: var(--fs-h3); line-height: 30px; }
  .rank-tabs { gap: var(--space-2); }
}

/* Sweep 2026-10-21: Home and Ranking cards are flat at rest (no green / violet hard shadow); green border + shadow only on hover / focus of clickable cards */
.home-hero.card, .rank-tile.card, .rank-legend.card, .empty-state.card, .home-panel--k { box-shadow: none; }
a.card:hover, button.card:hover, [role="link"].card:hover,
a.card:focus-visible, button.card:focus-visible, [role="link"].card:focus-visible { border-color: var(--color-accent); box-shadow: 6px 6px 0 var(--color-accent); }

/* Phones: Home shows ONE «no events» empty (the wide card in the list), not that plus the Tirly rail card */
@media (max-width: 768px) { .home:has(.events-empty) .rail-companion--empty { display: none; } }

/* Pressed segmented chips in Ajustes (Idioma / Tema): accent fill + on-accent text at rest, hover and focus, dark and light (>= 4.5:1) */
.settings-lang .chip[aria-pressed="true"],
.settings-lang .chip[aria-pressed="true"]:hover,
.settings-lang .chip[aria-pressed="true"]:active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.settings-lang .chip:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 2px; }

/* «Cuadrícula / Lista» segmented control (owner 2026-10-22): pill radiogroup, checked = accent plate, flat otherwise. */
.view-toggle { display: inline-flex; margin-left: auto; padding: 2px; border: 2px solid var(--color-outline); border-radius: 999px; background: var(--color-surface-2); }
.view-toggle__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--color-muted); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0; cursor: pointer; }
.view-toggle__btn[aria-checked="true"] { background: var(--color-accent); color: var(--color-on-accent); }
.view-toggle__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.view-toggle__icon { display: block; flex: 0 0 auto; }
@media (max-width: 420px) { .view-toggle__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .view-toggle__btn { padding: 6px 10px; } }

/* Música: up to three hero cards side by side (owner 2026-10-22), each with the 33:5812 anatomy at 2.2x vinyl. */
.music-heroes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 32px; }
.music-heroes--1 { grid-template-columns: minmax(0, 1fr); }
.music-heroes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.music-heroes .music-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; margin-bottom: 0; min-width: 0; }
.music-heroes .music-hero__vinyl { display: block; width: 172px; height: 148px; overflow: visible; }
.music-heroes .music-hero__vinyl .vinyl-s { transform: scale(2.2); transform-origin: top left; }
.music-heroes .music-hero__body { flex: 1 1 auto; width: 100%; }
.music-heroes .music-hero .music-hero__title { font-size: 24px; line-height: 1.25; }
.music-heroes .music-hero__artist { font-size: 16px; }
@media (max-width: 1180px) { .music-heroes--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .music-heroes, .music-heroes--2, .music-heroes--3 { grid-template-columns: minmax(0, 1fr); }
  .music-heroes .music-hero { padding: 20px; }
}

/* «Ahora suena» after the heroes: grid = vertical tiles (3 / 2 on phones), list = the Inicio-style rows. */
.music-listeners--grid .music-listeners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.music-listeners--grid .listener-tile { flex-direction: column; align-items: center; text-align: center; }
.music-listeners--grid .listener-tile__info { align-items: center; width: 100%; }
.music-listeners--grid .listener-tile__who { justify-content: center; }
.music-listeners--grid .listener-tile__server { flex: 0 1 auto; }
.music-listeners--list .music-listeners__grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 767px) { .music-listeners--grid .music-listeners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Comunidades «Lista» (owner 2026-10-22): compact rows, flat at rest; accent border + hard shadow only on hover/focus like the cards. */
.communities-tools { display: flex; justify-content: flex-end; margin: -8px 0 16px; }
.community-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.community-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; padding: 12px 16px; background: var(--color-surface); color: var(--color-text); border: 3px solid transparent; border-radius: var(--radius-card); outline: 1px solid var(--color-line); outline-offset: -1px; box-shadow: none; text-align: left; text-transform: none; cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.community-row:hover, .community-row:focus-visible { border-color: var(--color-accent); outline-color: transparent; box-shadow: 6px 6px 0 var(--color-accent); }
.community-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }
.community-row__image { display: block; width: 56px; height: 56px; }
.community-row__image .comm-icon { display: grid; place-items: center; width: 56px !important; height: 56px !important; box-sizing: border-box; border: 2px solid var(--color-outline); border-radius: 12px; font-family: var(--font-display); font-size: 16px !important; object-fit: cover; }
.community-row__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.community-row__name { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--color-text); }
.community-row__line { font-family: var(--font-sans); font-size: 14px; line-height: 18px; color: var(--color-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.community-row__view { font-family: var(--font-mono); font-size: 13px; font-weight: 700; line-height: 16px; white-space: nowrap; color: var(--color-text); }
.community-row:hover .community-row__view, .community-row:focus-visible .community-row__view { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .community-row:hover .community-row__view, [data-theme="light"] .community-row:focus-visible .community-row__view { color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .community-row { transition: none; } }
@media (max-width: 560px) {
  .community-row { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .community-row__image, .community-row__image .comm-icon { width: 48px !important; height: 48px !important; }
  .community-row__view { display: none; }
  /* Phones: let the name take two lines and the facts wrap instead of cutting «23 players» off. */
  .community-row__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .community-row__line { white-space: normal; }
}

/* «Tu vibe» keeps the whole genre name (owner): clamp first, ellipsis as the last resort, never a cut «ELECTRO». */
.kpi--vibe strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Multi-hero polish: short eyebrow, the EXAMPLE pill may drop to a second line (never a 3-line eyebrow); one caption under the row. */
.music-heroes .music-hero__live { flex-wrap: wrap; row-gap: 4px; }
.music-heroes .music-hero__live .chip { margin-left: 0; }
.music-heroes--multi { margin-bottom: 12px; }
.music-heroes__caption { margin: 0 0 32px; }
/* «Tu vibe»: the whole word (ELECTRÓNICA / ELECTRONIC) fits the 1/4 KPI at 1440 without the ellipsis kicking in. */
.kpi--vibe strong { font-size: clamp(14px, 1.3vw, 20px); }
@media (max-width: 767px) { .kpi--vibe strong { font-size: 11px; letter-spacing: 0; } } /* 2×2 KPIs: ELECTRÓNICA still whole */

/* QR onboarding scan flow (S8-d): #app drops the sidebar|main grid so the card centres on the viewport. */
.app.app--onboard-scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-template-columns: unset;
  box-sizing: border-box;
  min-height: 100dvh;
  width: 100%;
  padding: var(--space-6, 32px) var(--space-4, 16px);
  background: var(--color-bg);
}
.onb-scan {
  box-sizing: border-box;
  width: min(520px, 100%);
  margin: 0;
  padding: var(--space-6, 32px) var(--space-5, 24px);
  display: grid;
  gap: var(--space-4, 16px);
  justify-items: stretch;
  background: var(--color-surface);
  color: var(--color-text);
  border: 3px solid var(--color-outline);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-hard);
}
.onb-scan h1 { font-size: var(--fs-h2); margin: 0; line-height: 1.35; text-wrap: balance; }
.onb-scan p { margin: 0; color: var(--color-muted); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
.onb-scan .onb-signing { color: var(--color-text); }
.onb-scan .onb-status { color: var(--color-muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.onb-scan [role="alert"] { color: var(--color-danger); }
.onb-scan .onb-xp strong { color: var(--color-accent); }
.onb-scan .onb-cta { justify-self: start; }
.onb-scan[data-onboard-step="unavailable"] .onb-cta,
.onb-scan[data-onboard-step="error"] .onb-cta,
.onb-scan[data-onboard-step="success"] .onb-cta { justify-self: stretch; width: 100%; }
.onb-scan .onb-cta[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 480px) {
  .app.app--onboard-scan { padding: var(--space-4, 16px) var(--space-3, 12px); align-items: stretch; }
  .onb-scan { width: 100%; padding: var(--space-5, 24px) var(--space-4, 16px); }
}

/* ---------- Own profile: the single «Tus insignias» section (earned on top, locked silhouettes below) ---------- */
.my-badges__sub { margin: 4px 0 16px; font-size: var(--p-fs-body-min, 12px); line-height: 1.4; color: var(--color-muted); }
.my-badges__earned { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 16px; align-items: stretch; }
.my-badge { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.my-badge--earned { height: 100%; padding: 12px; background: var(--color-surface-2); border: 3px solid var(--color-outline); border-radius: 12px; box-shadow: 4px 4px 0 var(--color-accent); color: var(--color-text); }
.my-badge__art { display: grid; place-items: center; width: 100%; padding: 8px; background: var(--color-bg); border-radius: 8px; }
.my-badge__art .badge-art { display: grid; place-items: center; }
.my-badge--earned .my-badge__art img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
.my-badge__art .badge-art--generic { width: 96px; height: 96px; color: var(--color-muted); }
.my-badge__art .badge-art--generic .game-pad { width: 64px; height: 64px; }
.my-badge__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 100%; font-family: var(--font-display); font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
.my-badge__meta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--color-muted); }
.my-badge__foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.my-badge__status { margin: 0; font-size: 11px; line-height: 1.35; color: var(--color-muted); }
.my-badge__status--confirmed { color: var(--color-text); font-weight: 700; }
.my-badge__detail { background: none; border: 0; padding: 4px 6px; min-height: 24px; font: inherit; font-size: 11px; color: var(--color-link, var(--color-accent)); text-decoration: underline; cursor: pointer; }
.my-badges__empty { margin: 4px 0 8px; }
.my-badges__locked-title { margin: 24px 0 12px; font-family: var(--font-display); font-size: 10px; color: var(--color-muted); }
.my-badges__locked { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 16px 12px; margin: 0; padding: 0; list-style: none; align-items: stretch; }
.my-badge--locked { position: relative; justify-content: flex-start; }
.my-badge--locked { cursor: default; border-radius: 8px; }
.my-badge--locked .my-badge__art { padding: 0; background: transparent; }
.my-badge--locked .badge-art { box-shadow: none; }
.my-badge--locked .my-badge__art img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.my-badge--locked:hover .my-badge__art img,
.my-badge--locked:focus-visible .my-badge__art img { opacity: .7; }
.my-badge--locked:focus-visible { outline: 2px solid var(--color-accent-2, var(--color-accent)); outline-offset: 4px; }

/* «Próximas insignias» (P6, Figma 6:837): locked milestone badges dimmed to 55%; the SOON one keeps its tag readable. */
.next-badges { margin-top: 24px; }
.next-badges__title { margin: 0 0 4px; font-family: var(--font-display); font-size: 10px; color: var(--color-muted); }
.next-badges__sub { margin: 0 0 12px; font-size: var(--fs-label); color: var(--color-muted); }
.next-badges__list { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px) var(--space-4, 16px); margin: 0; padding: 0; list-style: none; }
.next-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 88px; text-align: center; opacity: .55; }
.next-badge__art { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.next-badge__name { font-size: var(--fs-label); line-height: 1.25; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .next-badges__list { gap: var(--space-3, 12px); }
  .next-badge { width: calc((100% - 2 * var(--space-3, 12px)) / 3); }
}
.my-badge--locked::after { content: attr(data-tip); content: attr(data-tip) / ""; position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 50%; width: min(220px, calc(100vw - 16px)); box-sizing: border-box; padding: 8px 10px; transform: translateX(calc(-50% + var(--tip-dx, 0px))); background: var(--color-surface-2); color: var(--color-text); border: 2px solid var(--color-outline); border-radius: 8px; font-size: 11px; line-height: 1.4; text-align: left; text-transform: none; pointer-events: none; display: none; }
.my-badge--locked:hover::after,
.my-badge--locked:focus::after { display: block; }
.my-badge--locked[data-tip-off]::after { display: none; }
.my-badge--locked .my-badge__name { font-size: 8px; color: var(--color-muted); }
.my-badge__hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 100%; font-size: 10px; line-height: 1.35; color: var(--color-muted); overflow-wrap: anywhere; }
.my-badge__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.my-badge__soon { max-width: 100%; padding: 2px 8px; letter-spacing: 0; border-width: 1px; font-size: 9px; line-height: 12px; color: var(--color-muted); border-color: var(--color-muted); white-space: nowrap; }
.my-badge-dialog { display: grid; gap: 12px; max-width: min(420px, calc(100vw - 32px)); }
.my-badge-dialog h3 { margin: 0; overflow-wrap: anywhere; }
.my-badge-dialog p { margin: 0; }
.my-badge-dialog__links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
@media (max-width: 479px) {
  .my-badges__earned { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .profile-hero__shelf.my-badges { padding: 16px; }
}

/* Home «Tu próximo paso» / Tirly card (P-home coherence) */
.rail-companion__meta { margin: 0; color: var(--color-muted-2); font-size: 12px; line-height: 1.5; }
.rail-companion__copy .link { align-self: flex-start; }
/* The pixel title font draws 0 like an O; digits of a display name keep a distinct zero. */
.glyph-zero { font-family: var(--font-mono); font-weight: 700; font-size: 1.15em; line-height: 1; letter-spacing: 0; }

/* Long names (events, communities, recent badges) wrap to two lines instead of a one-line ellipsis; the full name is in title. */
.event-comm > span:not(.event-phase):not(.event-comm__icon):not(.event-comm__initials),
.event-card__meta,
.recent-badge__meta strong,
.rail-event__hit strong,
.rail-event__comm,
.community-row__name,
.my-badge__meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

/* Home recent badges: the status line (same text as My profile) wraps instead of overflowing. */
.recent-badge__meta span.recent-badge__status { white-space: normal; overflow-wrap: anywhere; text-transform: none; }

/* ---- Claim & firma (v1) · Figma 411:16279 / 411:17179: equal-height badge cards, content on top, action anchored at the bottom ---- */
.my-badges__earned { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 1fr; gap: 24px; }
.my-badge--earned { align-items: flex-start; justify-content: flex-start; gap: 12px; padding: 20px; text-align: left; box-sizing: border-box; }
.my-badge--earned .my-badge__art { width: auto; padding: 0; background: none; border-radius: 0; place-items: start; }
.my-badge--earned .my-badge__art img { width: 96px; height: 96px; }
.my-badge--earned .my-badge__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; width: 100%; }
.my-badge--earned .my-badge__name { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 22px; text-transform: none; text-align: left; }
.my-badge--earned .my-badge__meta { font-family: var(--font-mono); font-size: 12px; text-align: left; }
.my-badge--earned .my-badge__status { display: inline-flex; align-items: center; gap: 8px; padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 18px; background: var(--color-surface); color: var(--color-muted); }
.my-badge--earned .my-badge__status--unsigned { background: var(--color-yellow); color: var(--color-outline); }
.my-badge--earned .my-badge__status--confirmed { background: var(--color-success); color: var(--color-outline); }
.my-badge--earned .my-badge__status--failed { background: var(--color-danger); color: var(--color-outline); }
.my-badge--earned .my-badge__status--pending { padding: 0; background: none; color: var(--color-cyan); }
.my-badge--earned .my-badge__status--offchain { font-weight: 500; background: var(--color-surface); color: var(--color-muted); }
.my-badge__hint-line { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--color-muted); text-align: left; }
.my-badge__spinner { flex: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: my-badge-spin 0.9s linear infinite; }
@keyframes my-badge-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .my-badge__spinner { animation: none; border-right-color: currentColor; opacity: 0.6; } }
.my-badge--earned .my-badge__foot { margin-top: auto; align-items: flex-start; gap: 8px; min-height: 44px; justify-content: flex-end; }
.my-badge--earned .my-badge__detail { min-height: 44px; display: inline-flex; align-items: center; padding: 0 8px; margin-left: -8px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-decoration: none; color: var(--color-accent); border-radius: 6px; }
.my-badge--earned .my-badge__detail:hover { text-decoration: underline; }
.my-badge--earned .my-badge__detail:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }
.my-badge--earned .my-badge__tx { text-decoration: none; }
.my-badge__chip-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--color-surface); color: var(--color-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 700; cursor: pointer; }
.my-badge__chip-btn:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }
@media (max-width: 479px) {
  .my-badges__earned { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .my-badge--earned { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "art body" "foot foot"; column-gap: 16px; row-gap: 12px; align-items: start; }
  .my-badge--earned .my-badge__art { grid-area: art; }
  .my-badge--earned .my-badge__art img, .my-badge--earned .my-badge__art .badge-art--generic { width: 64px; height: 64px; }
  .my-badge--earned .my-badge__body { grid-area: body; }
  .my-badge--earned .my-badge__foot { grid-area: foot; align-self: end; }
  .my-badge__chip-btn { min-height: 44px; }
}


/* Celebration · Figma 412:17989 */
.claim-celeb { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 28px; text-align: center; max-width: min(440px, calc(100vw - 32px)); }
.claim-celeb--ok { border-color: var(--color-accent); }
.claim-celeb__xp { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.5; color: var(--color-accent); }
.claim-celeb__title { margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 27px; text-transform: none; color: var(--color-text); }
.claim-celeb__body { margin: 0; max-width: 34ch; font-family: var(--font-sans); font-size: 14px; line-height: 21px; color: var(--color-muted); }
.claim-celeb .btn { min-height: 44px; margin-top: 8px; }
.claim-celeb__later { min-height: 44px; padding: 0 12px; border: 0; background: none; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color-accent); cursor: pointer; border-radius: 6px; }
.claim-celeb__later:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }

/* Home CTA · Figma 410:15624: body line, «Firmando 1 de 3» progress, action pinned to the bottom of the card */
.next-step__progress { display: grid; gap: 8px; width: 100%; }
.next-step__progress-label { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--color-text); }
.next-step .sign-badge__cta { min-height: 44px; }
.my-badge--earned .my-badge__detail, .my-badge__chip-btn, .my-badge--earned .my-badge__status { text-transform: none; letter-spacing: 0; }
.my-badge--earned .my-badge__status { overflow-wrap: anywhere; }
.next-step .sign-badge__cta { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 700; }
.claim-celeb .btn, .claim-celeb__later, .next-step .btn { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 700; }
.home:not(.home--out) .next-step .btn, .next-step .btn.sign-badge__cta { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 700; }
.next-step .btn.sign-badge__cta { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font-sans) !important; font-weight: 700; }
@media (max-width: 479px) { .home:not(.home--out) .next-step__row { flex-direction: column; align-items: flex-start; } .next-step .sign-badge__cta { width: 100%; } }
/* Celebration buttons · Figma 412:17989: 14px bold label, 46px tall */
.claim-celeb .btn { min-height: 46px; padding: 0 24px; font-size: 14px; }
/* Light theme: success/danger are dark fills there, so their chips take white text (AA); the dark theme keeps black on the bright fills. */
:root[data-theme="light"] .my-badge--earned .my-badge__status--confirmed,
:root[data-theme="light"] .my-badge--earned .my-badge__status--failed { color: var(--color-white); }
.next-step .btn.sign-badge__cta { font-size: 14px; }

/* P14 start · Mi perfil móvil + Ajustes (Figma 44:9970, 89:32312, 91:33446, 91:33898, 91:34311, 52:9527) */

/* Ajustes: «← Perfil», the title, then one card per block (one column on mobile). */
.settings-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.settings-back { min-height: 44px; padding: 0 var(--space-4); font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; border-radius: var(--radius-button); }
.settings-title { margin: 0; max-width: 100%; font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.5; font-weight: 400; text-transform: uppercase; color: var(--color-text); overflow-wrap: anywhere; }
.settings-row__copy span { overflow-wrap: anywhere; }
.settings-discord { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.settings-discord__icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; color: var(--color-accent); }
.settings-discord__icon .discord-icon { width: 32px; height: 32px; }
.settings-discord__copy { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
.settings-discord__copy strong { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--color-text); }
.settings-discord__copy span { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--color-muted); overflow-wrap: anywhere; }
.settings-discord__ok { flex: 0 0 auto; }
.settings-discord__hint { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); background: var(--color-bg); border: 2px dashed var(--color-line); border-radius: var(--radius-button); }
.settings-discord__hint p { overflow-wrap: anywhere; }
.settings-discord__hint .btn { min-height: 44px; }
.settings-card .settings-logout { width: 100%; min-height: 48px; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-on-accent); background: var(--color-danger-soft); border: 3px solid var(--color-outline); box-shadow: var(--shadow-hard-sm); }
.settings-card .settings-delete { min-height: 48px; }

/* Perfil: «Cambiar banner» over the hero banner and the edit form. */
.profile-hero__banner-btn { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 1; min-height: 44px; padding: 0 var(--space-4); font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-bg); background: var(--color-text); border: 3px solid var(--color-outline); box-shadow: var(--shadow-hard-sm); }
.profile-edit-card { display: flex; flex-direction: column; gap: var(--space-4); }
.profile-edit-card .section-head { margin: 0; }
.profile-edit-card__banner { align-self: stretch; min-height: 48px; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-bg); background: var(--color-text); }
.profile-edit-fields { display: flex; flex-direction: column; gap: var(--space-4); margin-top: 0; min-width: 0; }
.profile-edit-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.profile-edit-card__actions .btn { min-height: 48px; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field__label { font-family: var(--font-display); font-size: var(--fs-micro); line-height: 1.5; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-muted); }
.field__input { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); font: inherit; font-family: var(--font-sans); font-size: 16px; color: var(--color-text); background: var(--color-bg); border: 2px solid var(--color-line); border-radius: var(--radius-button); }
textarea.field__input { min-height: 112px; resize: vertical; }
.field__input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.field__input[readonly] { color: var(--color-muted); }
.field__hint { margin: 0; font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.4; color: var(--color-muted); overflow-wrap: anywhere; }

/* Sheets: banner / share / Passport. Bottom sheet up to 767px, centred modal above. */
body:has(.profile-sheet-scrim) { overflow: hidden; }
.profile-sheet-scrim { position: fixed; inset: 0; z-index: 110; /* above the mobile top bar (100) and the tab bar */ display: grid; place-items: center; padding: var(--space-4); background: var(--color-scrim); }
.profile-sheet { position: relative; display: flex; flex-direction: column; gap: var(--space-4); box-sizing: border-box; width: min(560px, 100%); max-height: calc(100dvh - 2 * var(--space-4)); padding: var(--space-5); overflow: hidden; color: var(--color-text); background: var(--color-surface); border: 3px solid var(--color-outline); border-radius: var(--radius-card); box-shadow: var(--shadow-hard); }
.profile-sheet:focus { outline: none; }
.profile-sheet:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.profile-sheet__grip { display: none; align-self: center; width: 48px; height: 4px; border-radius: 999px; background: var(--color-line); }
.profile-sheet__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.profile-sheet__title { margin: 0; min-width: 0; font-family: var(--font-display); font-size: var(--fs-small); line-height: 1.6; font-weight: 400; text-transform: uppercase; color: var(--color-text); overflow-wrap: anywhere; }
.profile-sheet__close { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; font-family: var(--font-sans); font-size: 18px; line-height: 1; color: var(--color-text); background: var(--color-surface-2); border: 3px solid var(--color-outline); border-radius: var(--radius-button); box-shadow: var(--shadow-hard-sm); cursor: pointer; }
.profile-sheet__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--space-4); min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-1) var(--space-2) 0; }
.profile-sheet__sub { margin: 0; font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.5; color: var(--color-muted); overflow-wrap: anywhere; }
.profile-sheet__section { margin: 0; font-family: var(--font-display); font-size: var(--fs-micro); line-height: 1.5; letter-spacing: var(--ls-label); font-weight: 400; text-transform: uppercase; color: var(--color-muted); }
.profile-sheet__actions { display: flex; flex: 0 0 auto; gap: var(--space-3); }
.profile-sheet__actions .btn { flex: 1 1 0; min-height: 48px; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.profile-sheet__controls { min-width: 0; }
.profile-sheet__controls input { box-sizing: border-box; max-width: 100%; min-height: 44px; }
.profile-sheet__stack { display: flex; flex-direction: column; gap: var(--space-3); }
.profile-sheet__stack .btn { display: flex; align-items: center; justify-content: center; min-height: 48px; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; text-decoration: none; }
.profile-sheet__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; padding: var(--space-3) var(--space-4); background: var(--color-bg); border: 2px solid var(--color-line); border-radius: var(--radius-button); }
.profile-sheet__link-text { min-width: 0; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--color-text); overflow-wrap: anywhere; }
.profile-sheet__link-copy { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 var(--space-2); font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: var(--color-accent); background: none; border: 0; cursor: pointer; }
.profile-sheet__note { margin: 0; font-family: var(--font-mono); font-size: var(--fs-label); line-height: 1.5; color: var(--color-muted); overflow-wrap: anywhere; }
.banner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.banner-tile { position: relative; display: block; min-width: 0; min-height: 44px; padding: 0; overflow: hidden; aspect-ratio: 2 / 1; background: var(--color-well); border: 3px solid var(--color-outline); border-radius: var(--radius-button); box-shadow: none; cursor: pointer; }
.banner-tile img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.banner-tile.is-selected { border-color: var(--color-accent); }
.banner-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.banner-tile__name { position: absolute; left: var(--space-2); bottom: var(--space-2); max-width: calc(100% - 2 * var(--space-2)); padding: 2px var(--space-2); overflow: hidden; font-family: var(--font-mono); font-size: var(--fs-micro); text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); background: var(--color-scrim); border-radius: var(--radius-device); }
.banner-pager { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.banner-pager__btn, .banner-zoom__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; font-family: var(--font-sans); font-size: 20px; line-height: 1; color: var(--color-text); background: var(--color-surface-2); border: 3px solid var(--color-outline); border-radius: var(--radius-button); box-shadow: var(--shadow-hard-sm); cursor: pointer; }
.banner-pager__btn:disabled, .banner-zoom__btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.banner-pager__label { min-width: 9ch; text-align: center; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-muted); }
.profile-sheet .crop-frame { flex: 0 0 auto; height: auto; aspect-ratio: 13 / 4; border: 3px solid var(--color-outline); border-radius: var(--radius-button); }
.banner-zoom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.banner-zoom__label { min-width: 5ch; text-align: center; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-accent); }
.banner-zoom__hint { flex: 1 1 8ch; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-label); color: var(--color-muted); overflow-wrap: anywhere; }
.profile-sheet .profile-share__image { margin: 0; }
@media (max-width: 767px) {
  .settings-card h2 { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-muted); }
  .profile-sheet-scrim { place-items: end center; padding: 0; }
  .profile-sheet { width: 100%; max-height: min(92dvh, 100%); padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-width: 3px 3px 0; border-radius: var(--radius-panel) var(--radius-panel) 0 0; box-shadow: none; }
  .profile-sheet__grip { display: block; }
  .profile-hero__banner-btn { right: var(--space-2); bottom: var(--space-2); }
}
/* P14 end */

/* P4 · Eventos, detalle, comunidades (Figma 4:192, 11:2540, 52:9224, 4:351, 11:2858, 51:9119).
   The reward / description / standalone voice cards and the «Asistentes» heading exist for the mobile order only. */
.event-reward, .event-description, .event-voice--m, .who-is-in__title-m, .who-is-in__more { display: none; }
.event-reward__line, .event-description p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.event-reward__chip { margin: 0; padding: 20px 16px; border: 2px solid var(--color-outline); border-radius: 8px; background: var(--color-surface-2); font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: var(--color-text); overflow-wrap: anywhere; }
.event-voice { gap: 10px; padding: 16px; }
.event-voice__head strong { font-size: 16px; font-weight: 700; }
.event-voice small { font-size: 10px; }
/* Filter chips: one wrapping group per filter on desktop, a scrolling row on phones. */
.event-chiprow { flex-wrap: wrap; overflow: visible; }
.event-chiprow .event-filters { display: contents; }
.event-chiprow .chip-tabs { flex-wrap: wrap; flex: 0 0 auto; max-width: 100%; margin: 0; }
@media (max-width: 767px) {
  .event-chiprow { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 16px; }
  .event-chiprow .chip-tabs { flex-wrap: nowrap; max-width: none; }
  .event-chiprow .tab { white-space: nowrap; }
  .event-reward, .event-description { display: flex; gap: 8px; }
  .event-reward h2, .event-description h2 { font-size: 14px; }
  .event-voice--m { display: flex; margin-inline: 8px; }
  .how-counts .event-voice--soon { display: none; }
  .who-is-in__title-d { display: none; }
  .who-is-in__title-m { display: inline; }
  .who-is-in__avatar--extra { display: none; }
  .who-is-in__more { display: inline; align-self: center; font-family: var(--font-mono); font-size: 12px; color: var(--color-muted); }
  .who-is-in__avatar { width: 36px; height: 36px; font-size: 9px; }
  /* Hero: no card, intro and reward move to their own cards, the first meta item reads as the date line. */
  .event-hero { padding: 0; background: none; border: 0; box-shadow: none; }
  .event-hero__intro, .event-hero__meta-item--reward { display: none; }
  .event-hero__meta-item:first-child span { display: none; }
  .event-hero__meta-item:first-child strong { font-size: 11px; text-transform: uppercase; color: var(--color-accent); }
  .event-hero__meta { gap: 4px 16px; }
  .event-hero__meta-item:not(:first-child) { flex-direction: row; align-items: baseline; gap: 8px; }
  .event-hero__meta-item:not(:first-child) strong { font-size: 11px; color: var(--color-muted); }
  /* Join: just the button (+ calendar and link), straight after the description. */
  .join-night { padding: 0; background: none; border: 0; box-shadow: none; }
  .join-night h2, .join-night > p { display: none; }
}

/* sign-modal:start. Figma «Firma de insignia / Modal» 439:37172. One component for every badge; tokens only. */
.sign-backdrop { z-index: 60; }
.sign-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  width: min(480px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px 32px 32px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border-strong);
  border-radius: 16px;
  text-align: center;
  font-family: var(--font-sans);
}
.sign-modal:focus { outline: none; }
.sign-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.sign-modal__eyebrow { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--color-muted); text-align: left; }
.sign-modal__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-muted); font-family: var(--font-mono); font-size: 14px; line-height: 1.4; white-space: nowrap; }
.sign-modal__x { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; background: transparent; color: var(--color-text); border: 1.5px solid var(--color-border-strong); border-radius: 8px; cursor: pointer; }
.sign-modal__x:hover { border-color: var(--color-accent); color: var(--color-accent); }
.sign-modal__x:focus-visible,
.sign-modal__link:focus-visible,
.sign-modal__stellar:focus-visible,
.sign-modal__primary:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 2px; }
.sign-modal__grab { display: none; }

.sign-modal__hero { display: flex; align-items: flex-end; justify-content: center; }
.sign-modal__hero.is-solo { padding-top: 4px; }
.sign-modal__stage { position: relative; flex: none; width: 176px; height: 144px; }
.sign-spark { position: absolute; width: 12px; height: 12px; }
.sign-spark::before,
.sign-spark::after { content: ""; position: absolute; background: var(--color-sparkle); }
.sign-spark::before { left: 4px; top: 0; width: 4px; height: 12px; }
.sign-spark::after { left: 0; top: 4px; width: 12px; height: 4px; }
.sign-spark:nth-child(1) { left: 0; top: 20px; }
.sign-spark:nth-child(2) { left: 162px; top: 6px; }
.sign-spark:nth-child(3) { left: 6px; top: 120px; }
.sign-spark:nth-child(4) { left: 160px; top: 104px; }
.sign-modal__badge { position: absolute; left: 24px; top: 8px; width: 128px; height: 128px; display: block; }
.sign-modal__badge-img { display: block; width: 128px; height: 128px; image-rendering: pixelated; image-rendering: crisp-edges; }
.sign-modal__cat { flex: none; display: block; object-fit: contain; }
.sign-modal__cat--sm { width: 67px; height: 72px; }
.sign-modal__cat--lg { width: 119px; height: 128px; }

.sign-modal__title { margin: 0; font-family: var(--font-sans); font-size: 22px; font-weight: 700; line-height: normal; text-transform: none; letter-spacing: 0; color: var(--color-text); }
.sign-modal__name { margin: 0; font-size: 16px; line-height: normal; color: var(--color-muted); }
.sign-modal__msg { display: flex; flex-direction: column; gap: 12px; }
.sign-modal__text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--color-muted); }
.sign-modal__xp { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: normal; color: var(--color-accent); }
.sign-modal__net { margin: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--color-muted); }

.sign-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px; list-style: none; background: var(--color-surface-2); border-radius: 12px; }
.sign-step { display: flex; align-items: center; gap: 12px; text-align: left; }
.sign-step__mark { position: relative; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; }
.sign-step__label { flex: 1 1 0; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--color-text); }
.sign-step__status { font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--color-muted); white-space: nowrap; }
.sign-step.is-done .sign-step__mark { background: var(--color-accent); color: var(--color-on-accent); }
.sign-step.is-done .sign-step__mark svg { animation: sign-pop 160ms ease-out; }
.sign-step.is-current .sign-step__label { font-weight: 700; }
.sign-step.is-current .sign-step__status { color: var(--color-cyan); }
.sign-step.is-current .sign-step__mark { border: 2px solid var(--color-cyan); animation: sign-pulse 1.2s ease-in-out infinite; }
.sign-step.is-current .sign-step__mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-cyan); }
.sign-step.is-pending .sign-step__label { color: var(--color-muted); }
.sign-step.is-pending .sign-step__mark { border: 2px solid var(--color-muted); opacity: 0.6; }

.sign-note { margin: 0; padding: 12px 16px; border: 1.5px solid var(--color-border-strong); border-radius: 8px; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; text-align: left; color: var(--color-text); }
.sign-batch,
.sign-division { display: flex; flex-direction: column; gap: 8px; }
.sign-batch__row,
.sign-division__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--color-text); text-align: left; }
.sign-batch__label { margin: 0; }
.sign-batch__count,
.sign-division__goal { color: var(--color-muted); white-space: nowrap; }
.sign-bar { height: 10px; border-radius: 5px; background: var(--color-surface-2); overflow: hidden; }
.sign-bar i { display: block; height: 100%; width: var(--sign-pct, 0%); border-radius: 5px; background: var(--color-accent); transition: width 600ms ease-out; }

.sign-modal__primary { width: 100%; min-height: 48px; padding: 14px 16px; border: 2px solid var(--color-outline); border-radius: 8px; box-shadow: 4px 4px 0 var(--color-shadow); font-family: var(--font-sans); font-size: 16px; font-weight: 700; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.sign-modal__link,
.sign-modal__stellar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; min-height: 44px; padding: 6px 12px; background: none; border: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 6px; }
.sign-modal__link { color: var(--color-text); }
.sign-modal__stellar { color: var(--color-cyan); }
.sign-modal__live { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sign-modal.is-animate { animation: sign-enter 180ms ease-out; }
.sign-modal.is-animate .sign-modal__badge.is-pressed { animation: sign-press 700ms steps(6) both; }
.sign-modal.is-animate .sign-division .sign-bar i { animation: sign-fill 600ms ease-out both; }
@keyframes sign-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sign-sheet { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sign-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sign-pop { from { transform: scale(0.5); } to { transform: scale(1); } }
@keyframes sign-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-cyan) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes sign-press { from { transform: translateY(-40px); opacity: 0; } 70% { transform: translateY(6px); opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes sign-fill { from { width: 0; } to { width: var(--sign-pct, 0%); } }

/* Mobile: bottom sheet. The grab handle shows only when the sheet can be closed (the modal renders it only then). */
@media (max-width: 767px) {
  .sign-backdrop { align-items: end; justify-items: center; padding: 0; }
  .sign-modal { width: 100%; max-height: calc(100dvh - 16px); padding: 12px 24px calc(32px + env(safe-area-inset-bottom)); border-bottom-width: 0; border-radius: 16px 16px 0 0; }
  .sign-modal.is-animate { animation: sign-sheet 240ms ease-out; }
  .sign-modal__grab { display: block; align-self: center; width: 36px; height: 4px; margin-bottom: -8px; border-radius: 2px; background: var(--color-muted); }
  .sign-modal__eyebrow { display: none; }
  .sign-modal__bar { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .sign-modal,
  .sign-step.is-current .sign-step__mark,
  .sign-step.is-done .sign-step__mark svg,
  .sign-modal.is-animate .sign-modal__badge.is-pressed,
  .sign-modal.is-animate .sign-division .sign-bar i { animation: none; transform: none; }
  .sign-modal.is-animate { animation: sign-fade 80ms linear; transform: none; }
  .sign-modal__primary:active { transform: none; }
  .sign-bar i { transition: none; }
}
/* sign-modal:end */