:root {
  color-scheme: light;
  --bg: #DAE3FC;
  --panel: #FFF8FD;
  --panel-soft: #FDF4E7;
  --honey: #FFD83D;
  --honey-strong: #F05C9D;
  --honey-soft: #FFF0BF;
  --amber: #07133F;
  --ink: #07133F;
  --muted: #4965A8;
  --line: #FFFFFF;
  --warm-gray: #D9E3FF;
  --pink: #F05C9D;
  --aqua: #63D9CA;
  --yellow: #FFD83D;
  --orange: #FF6840;
  --red: #F05C9D;
  --shadow: 0 12px 28px rgba(7, 19, 63, 0.18);
  --brand-logo-width: clamp(122px, 10vw, 155px);
  --brand-logo-height: clamp(122px, 10vw, 155px);
  --brand-logo-size: var(--brand-logo-width);
  --brand-logo-center-offset: clamp(61px, 5vw, 77.5px);
  --brand-logo-margin-left: clamp(16px, 2.2vw, 46px);
  --brand-nav-gap: 24px;
  --brand-row-padding-top: 12px;
  --brand-logo-shadowstroke:
    drop-shadow(0 1px 1px rgba(54, 60, 76, 0.28))
    drop-shadow(0 0 4px rgba(54, 60, 76, 0.24))
    drop-shadow(0 0 8px rgba(54, 60, 76, 0.16));
  --main-tab-height: 34px;
  --main-tab-center-offset: 17px;
}

/* Admin app shell */
body.admin-page {
  min-height: 100vh;
}

body.admin-page .active-game-tabs {
  display: none;
}

body.admin-page:not(.show-page) > .home-shell.admin-shell {
  width: min(100% - 20px, 1540px);
  padding: 14px 10px 28px;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  border-bottom: 1px solid var(--admin-border, #d9e2ec);
  background: rgba(248, 250, 252, 0.96);
  padding: 10px 18px;
  backdrop-filter: blur(14px);
}

.admin-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--admin-ink, #101828);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  text-decoration: none;
}

.admin-topbar-brand img {
  width: 48px;
  height: auto;
  display: block;
}

.admin-account-menu {
  position: relative;
}

.admin-account-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid var(--admin-border, #d9e2ec);
  border-radius: 8px;
  background: #ffffff;
  color: var(--admin-ink, #101828);
  cursor: pointer;
  font-weight: 850;
  list-style: none;
  padding: 5px 10px 5px 6px;
}

.admin-account-menu summary::-webkit-details-marker {
  display: none;
}

.admin-account-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--admin-accent-soft, #eaf1ff);
  color: var(--admin-accent, #2563eb);
  font-weight: 900;
  text-transform: uppercase;
}

.admin-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 4px;
  width: 220px;
  border: 1px solid var(--admin-border, #d9e2ec);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--admin-shadow, 0 12px 26px rgba(16, 24, 40, 0.08));
  padding: 8px;
}

.admin-account-menu-panel a {
  border-radius: 6px;
  color: var(--admin-ink, #101828);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  padding: 9px 10px;
}

.admin-account-menu-panel a:hover,
.admin-account-menu-panel a:focus-visible {
  background: var(--admin-accent-soft, #eaf1ff);
  color: var(--admin-accent, #2563eb);
}

.admin-account-menu-panel hr {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--admin-border, #d9e2ec);
  margin: 4px 0;
}

.admin-app-layout {
  display: grid;
  grid-template-columns: 242px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-rail {
  position: sticky;
  top: 78px;
  display: grid;
  gap: 14px;
  border: 1px solid var(--admin-border, #d9e2ec);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--admin-shadow, 0 12px 26px rgba(16, 24, 40, 0.08));
  padding: 14px;
}

.admin-rail-head {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--admin-border, #d9e2ec);
  padding-bottom: 12px;
}

.admin-rail-head strong {
  color: var(--admin-ink, #101828);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
}

.admin-rail-head span {
  color: var(--admin-muted, #667085);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-rail-nav {
  display: grid;
  gap: 4px;
}

.admin-rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  border-radius: 7px;
  color: var(--admin-muted, #667085);
  font-weight: 850;
  text-decoration: none;
  padding: 0 10px;
}

.admin-rail-link:hover,
.admin-rail-link:focus-visible {
  background: var(--admin-accent-soft, #eaf1ff);
  color: var(--admin-accent, #2563eb);
}

.admin-rail-link.is-active {
  background: var(--admin-accent, #2563eb);
  color: #ffffff;
}

.admin-rail-link b,
.admin-user-profile-tabs b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.08);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0 7px;
}

.admin-rail-link.is-active b {
  background: rgba(255, 255, 255, 0.22);
}

.admin-workspace {
  display: grid;
  gap: 18px;
  min-width: 0;
}

body.admin-page .admin-workspace > .admin-heading {
  position: static;
}

.admin-dashboard,
.admin-dashboard-grid {
  display: grid;
  gap: 18px;
}

.admin-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.admin-dashboard-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--admin-border, #d9e2ec);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--admin-shadow, 0 12px 26px rgba(16, 24, 40, 0.08));
  padding: 16px;
}

.admin-dashboard-card.is-primary {
  border-color: #9ec5ff;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
}

.admin-dashboard-card span {
  color: var(--admin-muted, #667085);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.admin-dashboard-card strong {
  color: var(--admin-ink, #101828);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 0.95;
}

.admin-dashboard-card small {
  color: var(--admin-muted, #667085);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.25;
}

.admin-dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-dashboard-list {
  display: grid;
  gap: 8px;
}

.admin-dashboard-list-row {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--admin-border, #d9e2ec);
  border-radius: 8px;
  background: #ffffff;
  color: var(--admin-ink, #101828);
  text-decoration: none;
  padding: 12px;
}

.admin-dashboard-list-row strong {
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-dashboard-list-row span,
.admin-dashboard-list-row small {
  color: var(--admin-muted, #667085);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
}

.admin-dashboard-list-row:hover,
.admin-dashboard-list-row:focus-visible {
  border-color: var(--admin-accent, #2563eb);
}

.admin-dashboard-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-dashboard-split span {
  display: grid;
  gap: 6px;
  border: 1px solid var(--admin-border, #d9e2ec);
  border-radius: 8px;
  background: var(--admin-surface-soft, #f8fafc);
  color: var(--admin-muted, #667085);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  padding: 14px;
}

.admin-dashboard-split strong {
  color: var(--admin-ink, #101828);
  font-size: 1.3rem;
  text-transform: none;
}

.admin-user-profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--admin-border, #d9e2ec);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--admin-shadow, 0 12px 26px rgba(16, 24, 40, 0.08));
  padding: 8px;
}

.admin-user-profile-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border-radius: 7px;
  color: var(--admin-muted, #667085);
  font-size: 0.9rem;
  font-weight: 850;
  text-decoration: none;
  padding: 0 10px;
}

.admin-user-profile-tabs a:hover,
.admin-user-profile-tabs a:focus-visible {
  background: var(--admin-accent-soft, #eaf1ff);
  color: var(--admin-accent, #2563eb);
}

.admin-user-profile-tabs a.is-active {
  background: var(--admin-accent, #2563eb);
  color: #ffffff;
}

.admin-user-account-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.admin-user-account-meta > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--admin-border, #d9e2ec);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.admin-user-account-meta dt {
  color: var(--admin-muted, #667085);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-user-account-meta dd {
  min-width: 0;
  margin: 0;
  color: var(--admin-ink, #101828);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.admin-shared-ip-users {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.admin-shared-ip-users a {
  display: inline-grid;
  gap: 2px;
  border: 1px solid var(--admin-border, #d9e2ec);
  border-radius: 7px;
  background: var(--admin-surface-soft, #f8fafc);
  color: var(--admin-ink, #101828);
  font-weight: 850;
  text-decoration: none;
  padding: 8px 10px;
}

.admin-filtered-words-form {
  max-width: 760px;
}

body.admin-page .admin-status.is-info {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

body.admin-page .admin-topbar,
body.admin-page .admin-rail,
body.admin-page .admin-heading,
body.admin-page .admin-panel,
body.admin-page .admin-dashboard-card {
  box-shadow: var(--admin-shadow);
}

body.admin-page .admin-topbar {
  background: rgba(255, 248, 253, 0.94);
}

body.admin-page .admin-rail-link.is-active,
body.admin-page .admin-primary-button,
body.admin-page .admin-link-button {
  background: linear-gradient(180deg, #ff83bd, var(--admin-accent));
  border-color: rgba(7, 19, 63, 0.08);
  color: #ffffff;
}

body.admin-page .admin-dashboard {
  gap: 14px;
}

body.admin-page .admin-dashboard-grid {
  align-items: start;
  gap: 14px;
}

body.admin-page .admin-dashboard-metrics {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

body.admin-page .admin-dashboard-card {
  align-content: center;
  gap: 8px;
  min-height: 92px;
  border-color: rgba(73, 101, 168, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(253, 244, 231, 0.6)),
    var(--admin-surface);
  padding: 12px 14px;
}

body.admin-page .admin-dashboard-card.is-primary {
  border-color: rgba(240, 92, 157, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 216, 61, 0.34), rgba(255, 248, 253, 0.88)),
    var(--admin-surface);
}

body.admin-page .admin-dashboard-card span,
body.admin-page .admin-dashboard-list-row span,
body.admin-page .admin-dashboard-list-row small {
  color: var(--admin-muted);
}

body.admin-page .admin-dashboard-card strong {
  color: var(--admin-ink);
  font-size: 1.78rem;
}

body.admin-page .admin-dashboard-panel {
  align-content: start;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255, 248, 253, 0.9), rgba(217, 227, 255, 0.44)),
    var(--admin-surface);
}

body.admin-page .admin-dashboard-panel .admin-panel-heading {
  border-bottom-color: rgba(73, 101, 168, 0.18);
  padding-bottom: 11px;
}

body.admin-page .admin-dashboard-panel .admin-panel-heading h2 {
  font-size: 1.24rem;
}

body.admin-page .admin-dashboard-panel .admin-panel-heading p {
  margin-top: 4px;
}

body.admin-page .admin-dashboard-list {
  gap: 0;
}

body.admin-page .admin-dashboard-list-row {
  border-width: 0 0 1px;
  border-color: rgba(73, 101, 168, 0.16);
  border-radius: 0;
  background: transparent;
  padding: 10px 2px;
}

body.admin-page .admin-dashboard-list-row:first-child {
  padding-top: 0;
}

body.admin-page .admin-dashboard-list-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

body.admin-page .admin-dashboard-list-row:hover,
body.admin-page .admin-dashboard-list-row:focus-visible {
  border-color: rgba(73, 101, 168, 0.16);
  color: var(--admin-accent);
}

body.admin-page .admin-dashboard-split {
  gap: 8px;
}

body.admin-page .admin-dashboard-split span {
  border-color: rgba(73, 101, 168, 0.16);
  background: rgba(255, 255, 255, 0.48);
  padding: 12px;
}

body.admin-page .admin-dashboard-online-panel {
  grid-column: 1 / -1;
}

body.admin-page .admin-presence-board {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 14px;
  align-items: start;
}

body.admin-page .admin-presence-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.admin-page .admin-presence-heading,
body.admin-page .admin-presence-guests summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  border-bottom: 1px solid rgba(73, 101, 168, 0.16);
  padding-bottom: 10px;
}

body.admin-page .admin-presence-heading strong,
body.admin-page .admin-presence-guests summary strong {
  color: var(--admin-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
}

body.admin-page .admin-presence-heading b,
body.admin-page .admin-presence-guests summary b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 24px;
  border-radius: 999px;
  background: rgba(99, 217, 202, 0.24);
  color: var(--admin-ink);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 0 9px;
}

body.admin-page .admin-presence-guests summary {
  cursor: pointer;
  list-style: none;
}

body.admin-page .admin-presence-guests summary::-webkit-details-marker {
  display: none;
}

body.admin-page .admin-presence-guests summary small {
  display: block;
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 0.78rem;
  font-weight: 750;
}

body.admin-page .admin-guest-list {
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

body.admin-page .admin-guest-row {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
}

body.admin-page .admin-guest-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

body.admin-page .admin-guest-row-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-ink);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .admin-guest-row-head span {
  color: var(--admin-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body.admin-page .admin-guest-row dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

body.admin-page .admin-guest-row dl > div {
  min-width: 0;
}

body.admin-page .admin-guest-row dt {
  color: var(--admin-muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

body.admin-page .admin-guest-row dd {
  min-width: 0;
  margin: 4px 0 0;
  color: var(--admin-ink);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

body.admin-page .admin-guest-row > small {
  color: var(--admin-muted);
  font-size: 0.76rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .admin-app-layout {
    grid-template-columns: 1fr;
  }

  .admin-rail {
    position: static;
  }

  .admin-rail-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dashboard-metrics,
  .admin-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-page .admin-presence-board {
    grid-template-columns: 1fr;
  }

  .admin-user-account-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-topbar {
    padding-inline: 10px;
  }

  .admin-account-menu-panel {
    right: 0;
    width: min(86vw, 240px);
  }

  .admin-rail-nav,
  .admin-dashboard-metrics,
  .admin-dashboard-grid,
  .admin-dashboard-split,
  body.admin-page .admin-guest-row dl {
    grid-template-columns: 1fr;
  }

  .admin-user-profile-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .admin-user-profile-tabs a {
    flex: 0 0 auto;
  }
}

.bank-marketplace.market-detail-view .market-ticket {
  overflow: hidden;
  padding: 0;
}

.bank-marketplace.market-detail-view .market-ticket-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.1);
  padding: 12px 14px;
}

.bank-marketplace.market-detail-view .market-ticket-top .market-side-toggle {
  display: flex;
  gap: 18px;
  margin: 0;
}

.bank-marketplace.market-detail-view .market-ticket-top .market-side-toggle button {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(7, 19, 63, 0.44);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  padding: 0;
  text-transform: uppercase;
}

.bank-marketplace.market-detail-view .market-ticket-top .market-side-toggle button.is-active {
  color: var(--ink);
}

.bank-marketplace.market-detail-view .market-ticket-top > strong {
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bank-marketplace.market-detail-view .market-ticket-body,
.bank-marketplace.market-detail-view .market-review-ticket {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.bank-marketplace.market-detail-view .market-review-ticket[hidden],
.bank-marketplace.market-detail-view .market-trade-form[hidden] {
  display: none;
}

.bank-marketplace.market-detail-view .market-ticket-market {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
}

.bank-marketplace.market-detail-view .market-ticket-head {
  grid-template-columns: 38px minmax(0, 1fr);
  margin: 0;
}

.bank-marketplace.market-detail-view .market-ticket-avatar {
  width: 38px;
  height: 46px;
}

.bank-marketplace.market-detail-view .market-ticket-head h2 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  color: var(--ink);
  font-size: 1.25rem;
}

.bank-marketplace.market-detail-view [data-market-selected-contract-label],
.bank-marketplace.market-detail-view [data-market-review-contract-label] {
  color: #11A892;
}

.bank-marketplace.market-detail-view [data-market-selected-contract-label].is-no,
.bank-marketplace.market-detail-view [data-market-review-contract-label].is-no {
  color: var(--pink);
}

.bank-marketplace.market-detail-view.is-selling .market-contract-toggle {
  display: none;
}

.bank-marketplace.market-detail-view .market-contract-toggle {
  margin: 0;
}

.bank-marketplace.market-detail-view .market-contract-toggle button {
  border-radius: 999px;
}

.bank-marketplace.market-detail-view .market-ticket-input-row {
  display: grid;
  gap: 6px;
}

.bank-marketplace.market-detail-view .market-ticket-input-row > span:first-child,
.bank-marketplace.market-detail-view .market-limit-line,
.bank-marketplace.market-detail-view .market-account-line {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.bank-marketplace.market-detail-view .market-buy-fields,
.bank-marketplace.market-detail-view .market-sell-fields {
  display: grid;
  gap: 10px;
}

.bank-marketplace.market-detail-view .market-buy-fields[hidden],
.bank-marketplace.market-detail-view .market-sell-fields[hidden] {
  display: none;
}

.bank-marketplace.market-detail-view .market-ticket-input-row > input,
.bank-marketplace.market-detail-view .market-expiration-row,
.bank-marketplace.market-detail-view .market-resting-row {
  width: 100%;
  min-height: 40px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 900;
  padding: 7px 10px;
}

.bank-marketplace.market-detail-view .market-expiration-row,
.bank-marketplace.market-detail-view .market-resting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.bank-marketplace.market-detail-view .market-expiration-row span,
.bank-marketplace.market-detail-view .market-resting-row span {
  color: var(--muted);
  font-weight: 900;
}

.bank-marketplace.market-detail-view .market-expiration-row select {
  max-width: 160px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
}

.bank-marketplace.market-detail-view .market-resting-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--pink);
}

.bank-marketplace.market-detail-view .market-resting-row.is-disabled {
  opacity: 0.58;
}

.bank-marketplace.market-detail-view .market-expiration-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.bank-marketplace.market-detail-view .market-expiration-chips button {
  min-height: 32px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.bank-marketplace.market-detail-view .market-expiration-chips button.is-active {
  border-color: rgba(7, 19, 63, 0.26);
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
}

.bank-marketplace.market-detail-view .market-ticket-summary {
  display: grid;
  gap: 9px;
  margin: 0;
}

.bank-marketplace.market-detail-view .market-ticket-summary div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
}

.bank-marketplace.market-detail-view .market-ticket-summary dt {
  color: var(--muted);
  font-weight: 900;
}

.bank-marketplace.market-detail-view .market-ticket-summary dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  text-align: right;
}

.bank-marketplace.market-detail-view .market-ticket-summary div:last-child dd {
  font-size: 1.32rem;
}

.bank-marketplace.market-detail-view .market-review-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bank-marketplace.market-detail-view .market-review-summary {
  margin-top: 6px;
}

.bank-marketplace.market-detail-view .market-review-actions {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.bank-marketplace.market-detail-view .market-review-back {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: transparent;
  cursor: pointer;
  position: relative;
}

.bank-marketplace.market-detail-view .market-review-back::before {
  content: "<";
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 900;
}

.bank-marketplace.market-detail-view .market-submit {
  border-radius: 999px;
  min-height: 42px;
}

.marketplace-shell {
  display: grid;
  gap: 18px;
}

.market-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: stretch;
  gap: 16px;
}

.market-title-block,
.market-balance-panel,
.market-stat-grid article,
.market-leader,
.market-board,
.market-ticket,
.market-book,
.market-positions,
.market-rules,
.market-activity,
.market-empty {
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 248, 253, 0.88), rgba(255, 255, 255, 0.62)),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 12px 24px rgba(7, 19, 63, 0.1);
}

.market-title-block {
  min-width: 0;
  overflow: hidden;
  padding: clamp(16px, 2.2vw, 28px);
}

.market-title-block p,
.market-board-head p,
.market-ticket-head p,
.market-panel-heading p {
  margin: 0 0 4px;
  color: var(--pink);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.market-title-block h1 {
  margin: 0;
  max-width: 850px;
  color: var(--ink);
  font-size: clamp(2rem, 4.2vw, 4.4rem);
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.market-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.market-badge-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 999px;
  background: linear-gradient(180deg, #75E7D8, var(--aqua));
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
  padding: 5px 12px;
}

.market-badge-row span:first-child {
  background: linear-gradient(180deg, #FFE769, var(--honey));
}

.market-balance-panel {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
}

.market-balance-panel > span,
.market-stat-grid span,
.market-leader span,
.market-ticket-lines dt,
.market-position span span,
.market-activity li span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.market-money {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 0.95;
}

.market-money span:first-child {
  color: var(--pink);
  font-size: 0.58em;
}

.market-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.market-stat-grid article {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 82px;
  min-width: 0;
  padding: 14px;
}

.market-stat-grid strong {
  color: var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.market-leaders {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.market-leader {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
}

.market-leader-avatar,
.market-outcome-avatar,
.market-ticket-avatar,
.market-position-avatar {
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 216, 61, 0.24), rgba(99, 217, 202, 0.2));
}

.market-leader-avatar,
.market-position-avatar {
  width: 48px;
  height: 58px;
}

.market-leader-avatar img,
.market-outcome-avatar img,
.market-ticket-avatar img,
.market-position-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.market-leader strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  align-items: start;
  gap: 16px;
}

.market-board {
  min-width: 0;
  overflow: hidden;
  padding: 14px;
}

.market-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  align-items: end;
  gap: 12px;
  margin-bottom: 10px;
}

.market-board-head h2,
.market-ticket-head h2,
.market-panel-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1.02;
}

.market-search input {
  width: 100%;
  min-height: 40px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font-weight: 800;
  padding: 8px 10px;
  outline: 0;
}

.market-search input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(240, 92, 157, 0.14);
}

.market-filter-row,
.market-side-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.market-filter,
.market-side-toggle button,
.market-submit,
.market-back-link {
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(217, 227, 255, 0.78));
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  min-height: 36px;
  padding: 7px 13px;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 0 rgba(7, 19, 63, 0.1);
}

.market-filter.is-active,
.market-side-toggle button.is-active,
.market-submit {
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.2);
}

.market-submit:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.market-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

.market-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.market-table th {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
  padding: 0 10px 2px;
  white-space: nowrap;
}

.market-table th:first-child,
.market-table td:first-child {
  text-align: left;
}

.market-row {
  background: rgba(255, 255, 255, 0.66);
}

.market-row td {
  border-block: 2px solid rgba(7, 19, 63, 0.08);
  color: var(--ink);
  font-weight: 900;
  text-align: right;
  padding: 7px 10px;
  white-space: nowrap;
}

.market-row td:first-child {
  border-left: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px 0 0 8px;
}

.market-row td:last-child {
  border-right: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 0 8px 8px 0;
}

.market-row.is-active td {
  border-color: rgba(240, 92, 157, 0.38);
  background: rgba(255, 240, 191, 0.42);
}

.market-row.is-held td {
  box-shadow: inset 0 0 0 999px rgba(99, 217, 202, 0.08);
}

.market-bid {
  color: #118276;
}

.market-ask {
  color: var(--pink);
}

.market-outcome-button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 900;
  padding: 0;
  text-align: left;
}

.market-outcome-button span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-outcome-avatar {
  width: 36px;
  height: 42px;
}

.market-side {
  display: grid;
  gap: 12px;
}

.market-ticket,
.market-book,
.market-positions,
.market-rules,
.market-activity,
.market-empty {
  padding: 14px;
}

.market-ticket-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.market-ticket-avatar {
  width: 58px;
  height: 70px;
}

.market-side-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 12px;
}

.market-side-toggle button {
  width: 100%;
  border-radius: 8px;
}

.market-trade-form {
  display: grid;
  gap: 12px;
}

.market-trade-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.market-trade-form input {
  width: 100%;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-weight: 900;
  padding: 8px 10px;
}

.market-ticket-lines {
  display: grid;
  gap: 7px;
  margin: 0;
}

.market-ticket-lines div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 7px;
}

.market-ticket-lines dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  text-align: right;
}

.market-ticket-total dd,
.market-ticket-total dt {
  color: var(--pink);
  font-size: 1.05rem;
}

.market-ticket-message {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
}

.market-ticket-message.is-success {
  color: #118276;
}

.market-ticket-message.is-error {
  color: var(--pink);
}

.market-panel-heading {
  margin-bottom: 10px;
}

.market-book-levels {
  display: grid;
  gap: 6px;
}

.market-book-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  padding: 5px 8px;
}

.market-book-bar {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  opacity: 0.28;
}

.market-book-row.is-bid .market-book-bar {
  background: var(--aqua);
}

.market-book-row.is-ask .market-book-bar {
  background: var(--pink);
}

.market-book-row > *:not(.market-book-bar) {
  position: relative;
  z-index: 1;
}

.market-position-list {
  display: grid;
  gap: 8px;
}

.market-position {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 7px;
}

.market-position-avatar {
  width: 42px;
  height: 50px;
}

.market-position strong,
.market-position b {
  color: var(--ink);
  font-weight: 900;
}

.market-position span span {
  display: block;
}

.market-empty-state,
.market-rules p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.market-activity ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.market-activity li {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 10px;
}

.market-activity li strong {
  color: var(--ink);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-empty {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.market-empty h1 {
  margin: 0;
}

@media (max-width: 1180px) {
  .market-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .market-leaders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-layout {
    grid-template-columns: 1fr;
  }

  .market-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-ticket {
    grid-row: span 3;
  }
}

@media (max-width: 760px) {
  .market-hero,
  .market-board-head,
  .market-side,
  .market-activity ol {
    grid-template-columns: 1fr;
  }

  .market-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-title-block h1 {
    font-size: clamp(1.7rem, 12vw, 3.25rem);
  }
}

@media (max-width: 520px) {
  .market-stat-grid,
  .market-leaders {
    grid-template-columns: 1fr;
  }

  .market-title-block,
  .market-balance-panel,
  .market-board,
  .market-ticket,
  .market-book,
  .market-positions,
  .market-rules,
  .market-activity {
    padding: 12px;
  }
}

.bank-market-space {
  display: grid;
  gap: 16px;
}

.bank-market-browser[hidden],
.market-detail-view[hidden] {
  display: none;
}

.bank-market-browser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.bank-market-card {
  display: grid;
  gap: 24px;
  min-height: 300px;
  border: 3px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 248, 253, 0.58)),
    rgba(255, 255, 255, 0.68);
  cursor: pointer;
  padding: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 28px rgba(7, 19, 63, 0.1);
}

.bank-market-card:hover,
.bank-market-card:focus-visible {
  border-color: rgba(240, 92, 157, 0.42);
  outline: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 34px rgba(7, 19, 63, 0.14);
}

.bank-market-card.is-closed {
  border-color: rgba(7, 19, 63, 0.2);
}

.bank-market-card-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.bank-market-card-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.bank-market-card-icon img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.bank-market-card-head p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bank-market-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.05;
}

.bank-market-card-table {
  display: grid;
  gap: 8px;
}

.bank-market-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 94px 94px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
}

.bank-market-card-row.is-heading {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.bank-market-card-row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bank-market-card-row strong {
  text-align: right;
}

.bank-market-card-row.is-resolved {
  color: var(--muted);
}

.bank-market-card-row b,
.market-price-button,
.market-contract-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  font-weight: 900;
  line-height: 1;
}

.bank-market-card-row .is-yes,
.market-price-button.is-yes,
.market-contract-toggle button[data-market-contract-side="yes"] strong {
  color: #11A892;
}

.bank-market-card-row .is-no,
.market-price-button.is-no,
.market-contract-toggle button[data-market-contract-side="no"] strong {
  color: var(--pink);
}

.bank-market-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  color: var(--muted);
  font-weight: 900;
}

.market-detail-toolbar {
  display: flex;
  justify-content: flex-start;
}

.market-detail-view .market-hero {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
}

.market-detail-view .market-title-block h1 {
  font-size: clamp(1.8rem, 3.5vw, 3.7rem);
}

.market-detail-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.market-chart-panel {
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 248, 253, 0.56)),
    rgba(255, 255, 255, 0.62);
  padding: 16px;
}

.market-chart-head,
.market-chart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-weight: 900;
}

.market-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.market-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.market-chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
}

.is-line-1 {
  color: #11A892;
}

.is-line-2 {
  color: #2F80ED;
}

.is-line-3 {
  color: #FF9F1C;
}

.market-chart-canvas {
  position: relative;
  height: clamp(220px, 28vw, 330px);
  margin-top: 14px;
}

.market-chart-canvas svg {
  display: block;
  width: calc(100% - 52px);
  height: 100%;
}

.market-chart-canvas line {
  stroke: rgba(7, 19, 63, 0.16);
  stroke-dasharray: 2 7;
}

.market-chart-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.market-chart-dot {
  fill: currentColor;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 5;
}

.market-chart-axis {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 900;
}

.market-chart-foot {
  border-top: 2px solid rgba(7, 19, 63, 0.08);
  margin-top: 12px;
  padding-top: 10px;
}

.market-range-tabs {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.market-range-tabs button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
  padding: 4px 8px;
}

.market-range-tabs button.is-active {
  color: var(--ink);
}

.market-contract-head {
  border-top: 2px solid rgba(7, 19, 63, 0.08);
  padding-top: 12px;
}

.market-contract-list {
  display: grid;
  margin-top: 8px;
}

.market-contract-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 120px minmax(116px, 150px) minmax(116px, 150px) 0;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border-top: 2px solid rgba(7, 19, 63, 0.08);
  padding: 12px 0;
}

.market-contract-row.is-heading {
  color: var(--muted);
  font-weight: 900;
  padding-block: 9px;
}

.market-contract-row.is-heading span:nth-child(2),
.market-contract-row.is-heading span:nth-child(3),
.market-contract-row.is-heading span:nth-child(4) {
  text-align: center;
}

.market-contract-person {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 800;
  padding: 0;
  text-align: left;
}

.market-contract-person > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-contract-row .market-outcome-avatar {
  width: 62px;
  height: 72px;
  border-radius: 8px;
}

.market-contract-chance {
  color: var(--ink);
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  font-weight: 900;
  text-align: center;
}

.market-price-button {
  width: 100%;
  min-height: 52px;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.06rem;
  padding: 6px 14px;
}

.market-contract-row.is-resolved .market-contract-person,
.market-contract-row.is-resolved .market-contract-chance {
  color: var(--muted);
}

.market-contract-person:disabled,
.market-price-button:disabled,
.market-contract-toggle button:disabled,
.bank-position-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.market-price-button.is-selected,
.market-contract-toggle button.is-active {
  border-color: rgba(7, 19, 63, 0.32);
  background: rgba(255, 240, 191, 0.7);
}

.market-contract-held {
  overflow: hidden;
  width: 0;
  opacity: 0;
}

.market-contract-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.market-contract-toggle button {
  cursor: pointer;
  min-height: 48px;
}

.market-money-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  padding: 0 10px;
}

.market-money-input > span {
  color: var(--pink);
  font-weight: 900;
}

.market-money-input input {
  border: 0;
  background: transparent;
  padding-inline: 0;
}

@media (max-width: 1180px) {
  .bank-market-browser {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .market-contract-row,
  .bank-market-card-row {
    grid-template-columns: minmax(0, 1fr) 84px;
  }

  .market-contract-row.is-heading span:nth-child(3),
  .market-contract-row.is-heading span:nth-child(4),
  .bank-market-card-row.is-heading span:nth-child(3),
  .bank-market-card-row.is-heading span:nth-child(4) {
    display: none;
  }

  .market-price-button,
  .bank-market-card-row b {
    grid-column: span 1;
  }

  .market-contract-row .market-price-button.is-yes,
  .market-contract-row .market-price-button.is-no {
    grid-column: span 1;
  }

  .market-contract-person {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .market-contract-row .market-outcome-avatar {
    width: 52px;
    height: 62px;
  }

  .market-chart-foot {
    flex-wrap: wrap;
  }
}

.bank-marketplace.market-detail-view {
  gap: 12px;
}

.bank-marketplace.market-detail-view .market-hero {
  gap: 12px;
}

.bank-marketplace.market-detail-view .market-title-block,
.bank-marketplace.market-detail-view .market-balance-panel,
.bank-marketplace.market-detail-view .market-stat-grid article,
.bank-marketplace.market-detail-view .market-chart-panel,
.bank-marketplace.market-detail-view .market-ticket,
.bank-marketplace.market-detail-view .market-positions,
.bank-marketplace.market-detail-view .market-rules {
  border-width: 2px;
  padding: 10px 12px;
}

.bank-marketplace.market-detail-view .market-title-block h1 {
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.05;
}

.bank-marketplace.market-detail-view .market-title-block p,
.bank-marketplace.market-detail-view .market-board-head p,
.bank-marketplace.market-detail-view .market-ticket-head p,
.bank-marketplace.market-detail-view .market-panel-heading p {
  font-size: 0.68rem;
}

.bank-marketplace.market-detail-view .market-badge-row {
  gap: 6px;
  margin-top: 10px;
}

.bank-marketplace.market-detail-view .market-badge-row span {
  min-height: 24px;
  font-size: 0.72rem;
  padding: 4px 9px;
}

.bank-marketplace.market-detail-view .market-money {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.bank-marketplace.market-detail-view .market-stat-grid {
  gap: 8px;
}

.bank-marketplace.market-detail-view .market-stat-grid article {
  min-height: 58px;
}

.bank-marketplace.market-detail-view .market-stat-grid strong {
  font-size: clamp(0.92rem, 1.2vw, 1.08rem);
}

.bank-marketplace.market-detail-view .market-layout {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 12px;
}

.bank-marketplace.market-detail-view .market-chart-canvas {
  height: clamp(170px, 19vw, 235px);
}

.bank-marketplace.market-detail-view .market-chart-head,
.bank-marketplace.market-detail-view .market-chart-foot,
.bank-marketplace.market-detail-view .market-chart-axis,
.bank-marketplace.market-detail-view .market-chart-legend {
  font-size: 0.78rem;
}

.bank-marketplace.market-detail-view .market-chart-legend {
  gap: 10px;
}

.bank-marketplace.market-detail-view .market-contract-head {
  padding-top: 8px;
}

.bank-marketplace.market-detail-view .market-board-head {
  margin-bottom: 8px;
}

.bank-marketplace.market-detail-view .market-board-head h2,
.bank-marketplace.market-detail-view .market-ticket-head h2,
.bank-marketplace.market-detail-view .market-panel-heading h2 {
  font-size: 1.12rem;
}

.bank-marketplace.market-detail-view .market-filter,
.bank-marketplace.market-detail-view .market-submit,
.bank-marketplace.market-detail-view .market-back-link {
  min-height: 30px;
  font-size: 0.82rem;
  padding: 5px 10px;
}

.bank-marketplace.market-detail-view .market-search input {
  min-height: 34px;
  font-size: 0.86rem;
  padding: 6px 9px;
}

.bank-marketplace.market-detail-view .market-contract-row {
  grid-template-columns: minmax(190px, 1fr) 86px minmax(92px, 120px) minmax(92px, 120px) 0;
  gap: 10px;
  padding: 8px 0;
}

.bank-marketplace.market-detail-view .market-contract-person {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  font-size: 0.98rem;
}

.bank-marketplace.market-detail-view .market-contract-row .market-outcome-avatar {
  width: 42px;
  height: 50px;
}

.bank-marketplace.market-detail-view .market-contract-chance {
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
}

.bank-marketplace.market-detail-view .market-price-button {
  min-height: 38px;
  font-size: 0.88rem;
  padding: 5px 10px;
}

.bank-marketplace.market-detail-view .market-ticket-head {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.bank-marketplace.market-detail-view .market-ticket-avatar {
  width: 46px;
  height: 56px;
}

.bank-marketplace.market-detail-view .market-side-toggle,
.bank-marketplace.market-detail-view .market-contract-toggle {
  gap: 6px;
  margin-bottom: 9px;
}

.bank-marketplace.market-detail-view .market-side-toggle button,
.bank-marketplace.market-detail-view .market-contract-toggle button {
  min-height: 36px;
  font-size: 0.86rem;
}

.bank-marketplace.market-detail-view .market-trade-form {
  gap: 9px;
}

.bank-marketplace.market-detail-view .market-trade-form input,
.bank-marketplace.market-detail-view .market-money-input {
  min-height: 36px;
  font-size: 0.88rem;
}

.bank-marketplace.market-detail-view .market-ticket-lines {
  gap: 5px;
}

.bank-marketplace.market-detail-view .market-ticket-lines div {
  padding-bottom: 5px;
}

.bank-marketplace.market-detail-view .market-ticket-lines dt,
.bank-marketplace.market-detail-view .market-ticket-lines dd,
.bank-marketplace.market-detail-view .market-ticket-message,
.bank-marketplace.market-detail-view .market-empty-state,
.bank-marketplace.market-detail-view .market-rules p {
  font-size: 0.82rem;
}

@media (max-width: 1180px) {
  .bank-marketplace.market-detail-view .market-layout {
    grid-template-columns: 1fr;
  }
}

@font-face {
  font-family: "Froople";
  src: url("fonts/Froople.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Ibrand";
  src: url("fonts/Ibrand.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Easy Pixel";
  src: url("fonts/Easy%20Pixel.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Belgium Rounded";
  src: url("fonts/BelgiumRounded-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/BarlowSemiCondensed-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/BarlowSemiCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("fonts/Barlow-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/BarlowSemiCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kimoru";
  src: url("fonts/KIMORU.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Mosswick";
  src: url("fonts/Mosswick.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Baresno";
  src: url("fonts/BARESNO.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Decohead";
  src: url("fonts/Decohead.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Decort";
  src: url("fonts/Decort.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Baserock";
  src: url("fonts/Baserock.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Lakon Rokum";
  src: url("fonts/Lakon%20Rokum%20Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Jungle";
  src: url("fonts/Jungle.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Javiore";
  src: url("fonts/Javiore.ttf") format("truetype");
  font-display: swap;
}

* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

html,
body {
  overscroll-behavior-y: none;
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 2px, transparent 2px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.24) 2px, transparent 2px),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.34) 0%, rgba(218, 227, 252, 0) 54%, rgba(180, 198, 248, 0.26) 100%),
    var(--bg);
  background-position: 0 0, 0 0, center, 0 0;
  background-size: 44px 44px, 44px 44px, auto, auto;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

body:has(> .site-footer:not(.home-tab-site-footer)),
body:has(> .site-footer.home-tab-site-footer.is-active) {
  display: flex;
  flex-direction: column;
}

body:has(> .site-footer:not(.home-tab-site-footer)) > .site-footer,
body:has(> .site-footer.home-tab-site-footer.is-active) > .site-footer.home-tab-site-footer {
  flex-shrink: 0;
  margin-top: auto;
}

html.site-font-size-smallest {
  font-size: 87.5%;
}

html.site-font-size-smaller {
  font-size: 93.75%;
}

html.site-font-size-bigger {
  font-size: 106.25%;
}

html.site-font-size-biggest {
  font-size: 112.5%;
}

body.profile-page.has-profile-background {
  background:
    linear-gradient(180deg, rgba(218, 227, 252, 0.42), rgba(218, 227, 252, 0.76)),
    var(--profile-background-image),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 2px, transparent 2px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.24) 2px, transparent 2px),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.34) 0%, rgba(218, 227, 252, 0) 54%, rgba(180, 198, 248, 0.26) 100%),
    var(--bg);
  background-attachment: fixed, fixed, scroll, scroll, scroll, scroll;
  background-position: center, center, 0 0, 0 0, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat, repeat;
  background-size: auto, cover, 44px 44px, 44px 44px, auto, auto;
}

body.has-show-backdrop {
  background:
    linear-gradient(180deg, rgba(7, 19, 63, 0.2), rgba(218, 227, 252, 0.36) 42%, rgba(218, 227, 252, 0.74)),
    var(--show-backdrop),
    var(--bg);
  background-attachment: fixed, fixed, scroll;
  background-position: center, center top, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, cover, auto;
}

body.show-page-bigbrother {
  --bg: #2a0008;
  --panel: #3b000d;
  --panel-soft: #520012;
  --honey: #ff405c;
  --honey-strong: #ff7080;
  --honey-soft: #ffd2d8;
  --amber: #fff2f4;
  --ink: #fff4f6;
  --muted: #ff9aa8;
  --line: rgba(255, 188, 196, 0.36);
  --warm-gray: #4a0010;
  --pink: #ff2848;
  --aqua: #b90024;
  --yellow: #ff6074;
  --orange: #ff173e;
  --red: #ff1138;
  --shadow: 0 18px 38px rgba(18, 0, 5, 0.38);
  --bb-red-deep: #240006;
  --bb-red-dark: #3f000d;
  --bb-red-mid: #8a001f;
  --bb-red-hot: #e80032;
  --bb-red-light: #ff7d8d;
  --bb-red-icon-filter: sepia(100%) saturate(430%) hue-rotate(304deg) brightness(92%) contrast(124%);
}

body.show-page-survivor {
  --bg: #042b2c;
  --panel: #073934;
  --panel-soft: #0e4c40;
  --honey: #e6bd55;
  --honey-strong: #f3cf6d;
  --honey-soft: #fff0b8;
  --amber: #fff7dd;
  --ink: #fff7dd;
  --muted: #b7dac8;
  --line: rgba(242, 200, 94, 0.34);
  --warm-gray: #0b3a35;
  --pink: #f2c85e;
  --aqua: #12a39b;
  --yellow: #f2c85e;
  --orange: #e08b43;
  --red: #ef734d;
  --shadow: 0 18px 38px rgba(2, 22, 23, 0.36);
  --survivor-teal-deep: #032223;
  --survivor-teal-dark: #063936;
  --survivor-teal-mid: #0b6963;
  --survivor-teal-hot: #14a79a;
  --survivor-gold: #f2c85e;
  --survivor-sand: #fff0b8;
  --survivor-icon-filter: sepia(82%) saturate(410%) hue-rotate(126deg) brightness(86%) contrast(92%);
}

body.show-page-bigbrother.has-show-backdrop {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 23, 62, 0.34), rgba(255, 23, 62, 0) 42%),
    linear-gradient(180deg, rgba(24, 0, 5, 0.18), rgba(74, 0, 16, 0.48) 48%, rgba(18, 0, 5, 0.9)),
    var(--show-backdrop),
    var(--bb-red-deep);
  background-attachment: fixed, fixed, fixed, scroll;
  background-position: center, center, center top, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover, auto;
}

body.show-page-survivor.has-show-backdrop {
  background:
    radial-gradient(circle at 36% 24%, rgba(242, 200, 94, 0.36), rgba(242, 200, 94, 0) 38%),
    linear-gradient(180deg, rgba(3, 34, 35, 0.16), rgba(4, 43, 44, 0.46) 48%, rgba(2, 22, 23, 0.9)),
    var(--show-backdrop),
    var(--survivor-teal-deep);
  background-attachment: fixed, fixed, fixed, scroll;
  background-position: center, center, center top, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: auto, auto, cover, auto;
}

body::before {
  display: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

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

a:hover {
  text-decoration: underline;
}

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 8px;
  overflow: visible;
  border-bottom: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 2px, transparent 2px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.24) 2px, transparent 2px),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.34) 0%, rgba(218, 227, 252, 0) 54%, rgba(180, 198, 248, 0.26) 100%),
    var(--bg);
  background-position: 0 0, 0 0, center, 0 0;
  background-size: 44px 44px, 44px 44px, auto, auto;
  box-shadow: none;
  padding: var(--brand-row-padding-top) 18px 10px;
}

.site-header::after {
  display: none;
}

body.has-show-backdrop .site-header {
  background:
    linear-gradient(180deg, rgba(255, 248, 253, 0.9), rgba(255, 248, 253, 0.68)),
    var(--show-backdrop),
    var(--bg);
  background-attachment: scroll, fixed, scroll;
  background-position: center, center top, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, cover, auto;
}

body.show-page-bigbrother.has-show-backdrop .site-header {
  background:
    linear-gradient(180deg, rgba(43, 0, 8, 0.96), rgba(82, 0, 18, 0.82)),
    var(--show-backdrop),
    var(--bb-red-deep);
  background-attachment: scroll, fixed, scroll;
  background-position: center, center top, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, cover, auto;
  box-shadow:
    inset 0 -1px 0 rgba(255, 136, 148, 0.16),
    0 12px 26px rgba(18, 0, 5, 0.22);
}

body.show-page-survivor.has-show-backdrop .site-header {
  background:
    linear-gradient(180deg, rgba(3, 34, 35, 0.95), rgba(8, 70, 64, 0.82)),
    var(--show-backdrop),
    var(--survivor-teal-deep);
  background-attachment: scroll, fixed, scroll;
  background-position: center, center top, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: auto, cover, auto;
  box-shadow:
    inset 0 -1px 0 rgba(242, 200, 94, 0.2),
    0 12px 26px rgba(2, 22, 23, 0.24);
}

.brand-row {
  display: contents;
}

.brand {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  max-width: var(--brand-logo-width);
  min-width: 0;
  margin-left: var(--brand-logo-margin-left);
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: auto;
  max-width: var(--brand-logo-width);
  height: auto;
  max-height: var(--brand-logo-height);
  object-fit: contain;
  object-position: left center;
  filter: var(--brand-logo-shadowstroke);
}

body.show-page-bigbrother .brand-logo {
  filter:
    var(--brand-logo-shadowstroke)
    drop-shadow(0 0 2px rgba(255, 216, 222, 0.9))
    drop-shadow(0 0 8px rgba(255, 40, 72, 0.7))
    drop-shadow(0 9px 18px rgba(18, 0, 5, 0.42));
}

body.show-page-survivor .brand-logo {
  filter:
    var(--brand-logo-shadowstroke)
    drop-shadow(0 0 2px rgba(255, 240, 184, 0.88))
    drop-shadow(0 0 8px rgba(20, 167, 154, 0.62))
    drop-shadow(0 9px 18px rgba(2, 22, 23, 0.42));
}

.account-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  align-self: start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 0;
}

.account-menu {
  position: relative;
  display: inline-flex;
}

.account-link,
.message-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 248, 253, 0.92), rgba(217, 227, 255, 0.78));
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 2px 0 rgba(7, 19, 63, 0.16),
    0 8px 16px rgba(7, 19, 63, 0.08);
}

.account-link {
  flex: 0 0 auto;
  width: max-content;
  min-height: 34px;
  gap: 7px;
  white-space: nowrap;
  padding: 3px 10px 3px 4px;
}

.account-menu-trigger {
  cursor: pointer;
  list-style: none;
  text-decoration: none;
  user-select: none;
}

.account-menu-trigger::-webkit-details-marker {
  display: none;
}

.account-menu-trigger::marker {
  content: "";
}

.account-menu-trigger.is-guest {
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.account-menu-button-icon {
  display: block;
  width: 21px;
  height: 21px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(0 2px 2px rgba(7, 19, 63, 0.12));
}

.account-username {
  display: block;
  max-width: none;
}

.account-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 156px;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 248, 253, 0.98), rgba(239, 244, 255, 0.96)),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 3px 0 rgba(7, 19, 63, 0.12),
    0 14px 24px rgba(7, 19, 63, 0.16);
  padding: 5px;
}

.account-dropdown a,
.account-dropdown-disabled {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 10px;
}

.account-dropdown-disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.account-dropdown-disabled > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-dropdown-disabled small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.account-dropdown-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
}

.account-dropdown a:hover,
.account-dropdown a:focus-visible {
  background: rgba(99, 217, 202, 0.18);
  text-decoration: none;
}

.message-link {
  width: 42px;
  padding: 4px;
}

.profile-initials,
.profile-avatar-thumb {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.66rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 2px rgba(7, 19, 63, 0.16);
}

.profile-avatar-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  transform: translateY(-2px) scale(1.12);
}

:is(
  img[data-account-avatar-target],
  img[data-current-user-avatar-target],
  img[data-profile-avatar-target],
  img.buzz-composer-avatar
)[src*="sample.png"],
:is(
  img[data-account-avatar-target],
  img[data-current-user-avatar-target],
  img[data-profile-avatar-target],
  img.buzz-composer-avatar
)[src*="sample2.png"],
:is(
  img[data-account-avatar-target],
  img[data-current-user-avatar-target],
  img[data-profile-avatar-target],
  img.buzz-composer-avatar
)[src*="sample3.png"] {
  visibility: hidden;
}

.account-icon {
  display: block;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(0 2px 2px rgba(7, 19, 63, 0.16));
}

.message-link strong {
  display: grid;
  place-items: center;
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 0 6px;
  background: var(--pink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  box-shadow: 0 2px 4px rgba(7, 19, 63, 0.16);
}

body.show-page-bigbrother .account-link,
body.show-page-bigbrother .message-link,
body.show-page-bigbrother .main-tab {
  border-color: rgba(255, 119, 136, 0.38);
  background:
    linear-gradient(180deg, rgba(110, 0, 23, 0.78), rgba(45, 0, 10, 0.88)),
    rgba(43, 0, 8, 0.86);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(18, 0, 5, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 164, 174, 0.22),
    0 2px 0 rgba(18, 0, 5, 0.34),
    0 10px 20px rgba(18, 0, 5, 0.2);
}

body.show-page-bigbrother .account-link:hover,
body.show-page-bigbrother .message-link:hover,
body.show-page-bigbrother .main-tab:hover,
body.show-page-bigbrother .main-tab:focus-visible {
  border-color: rgba(255, 158, 170, 0.64);
  background:
    linear-gradient(180deg, rgba(156, 0, 34, 0.9), rgba(78, 0, 16, 0.92)),
    rgba(88, 0, 18, 0.9);
}

body.show-page-bigbrother .main-tab.is-active,
body.show-page-bigbrother .main-menu.is-open > .main-tab {
  border-color: rgba(255, 176, 184, 0.78);
  background:
    linear-gradient(180deg, var(--bb-red-hot), var(--bb-red-mid) 64%, #560012),
    var(--bb-red-mid);
  color: #fff4f6;
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 216, 0.42),
    0 3px 0 rgba(34, 0, 7, 0.62),
    0 0 18px rgba(232, 0, 50, 0.28),
    0 12px 22px rgba(18, 0, 5, 0.28);
}

body.show-page-bigbrother .profile-initials,
body.show-page-bigbrother .profile-avatar-thumb,
body.show-page-bigbrother .message-link strong {
  background: linear-gradient(180deg, #ff7d8d, var(--bb-red-hot));
  color: #fff4f6;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 230, 0.45),
    0 2px 6px rgba(18, 0, 5, 0.28);
}

body.show-page-survivor .account-link,
body.show-page-survivor .message-link,
body.show-page-survivor .main-tab {
  border-color: rgba(242, 200, 94, 0.38);
  background:
    linear-gradient(180deg, rgba(11, 105, 99, 0.78), rgba(3, 43, 44, 0.9)),
    rgba(3, 34, 35, 0.88);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(2, 22, 23, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 184, 0.2),
    0 2px 0 rgba(2, 22, 23, 0.36),
    0 10px 20px rgba(2, 22, 23, 0.2);
}

body.show-page-survivor .account-link:hover,
body.show-page-survivor .message-link:hover,
body.show-page-survivor .main-tab:hover,
body.show-page-survivor .main-tab:focus-visible {
  border-color: rgba(255, 224, 137, 0.66);
  background:
    linear-gradient(180deg, rgba(20, 167, 154, 0.9), rgba(6, 72, 67, 0.92)),
    rgba(8, 70, 64, 0.9);
}

body.show-page-survivor .main-tab.is-active,
body.show-page-survivor .main-menu.is-open > .main-tab {
  border-color: rgba(255, 232, 154, 0.78);
  background:
    linear-gradient(180deg, var(--survivor-gold), #d99d35 64%, #81612a),
    var(--survivor-gold);
  color: #032223;
  text-shadow: 0 1px 0 rgba(255, 247, 221, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 219, 0.55),
    0 3px 0 rgba(2, 22, 23, 0.58),
    0 0 18px rgba(242, 200, 94, 0.3),
    0 12px 22px rgba(2, 22, 23, 0.28);
}

body.show-page-survivor .profile-initials,
body.show-page-survivor .profile-avatar-thumb,
body.show-page-survivor .message-link strong {
  background: linear-gradient(180deg, var(--survivor-sand), var(--survivor-gold));
  color: #032223;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 2px 6px rgba(2, 22, 23, 0.28);
}

.main-tabs {
  grid-column: 2;
  grid-row: 1;
  position: static;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.main-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: max-content;
  min-height: var(--main-tab-height);
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 248, 253, 0.92), rgba(217, 227, 255, 0.74));
  color: var(--ink);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  padding: 5px 14px 5px 10px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 2px 0 rgba(7, 19, 63, 0.16),
    0 8px 16px rgba(7, 19, 63, 0.1);
}

.main-tab img {
  display: block;
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(0 2px 2px rgba(7, 19, 63, 0.16));
}

.main-tab-badge {
  position: absolute;
  top: -8px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: #F05C9D;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 5px;
  text-shadow: none;
  box-shadow: 0 3px 8px rgba(240, 92, 157, 0.32);
}

.main-tab-badge[hidden] {
  display: none;
}

.main-tab span {
  display: block;
}

.main-tab.is-active,
.main-menu.is-open > .main-tab {
  border-color: rgba(7, 19, 63, 0.34);
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 3px 0 rgba(7, 19, 63, 0.24),
    0 10px 18px rgba(7, 19, 63, 0.14);
}

.main-menu {
  position: relative;
  display: inline-flex;
  min-width: max-content;
  z-index: 30;
}

.show-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 8px;
  min-width: 220px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: rgba(255, 248, 253, 0.95);
  box-shadow: var(--shadow);
  padding: 10px;
}

.show-menu-panel[hidden] {
  display: none;
}

.show-menu-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font-weight: 900;
  padding: 6px 9px;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 2px 0 rgba(7, 19, 63, 0.08);
}

.show-menu-link:hover {
  background: linear-gradient(180deg, #75E7D8, var(--aqua));
  text-decoration: none;
}

.show-menu-link img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(0 2px 2px rgba(7, 19, 63, 0.14));
}

.show-menu-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.show-page-bigbrother .main-tab img,
body.show-page-bigbrother .show-menu-link img,
body.show-page-bigbrother .account-icon {
  filter: var(--bb-red-icon-filter);
}

body.show-page-bigbrother .main-tab.is-active img,
body.show-page-bigbrother .main-menu.is-open > .main-tab img {
  filter: var(--bb-red-icon-filter);
}

body.show-page-survivor .main-tab img,
body.show-page-survivor .show-menu-link img,
body.show-page-survivor .account-icon {
  filter: var(--survivor-icon-filter);
}

body.show-page-survivor .main-tab.is-active img,
body.show-page-survivor .main-menu.is-open > .main-tab img {
  filter: sepia(72%) saturate(520%) hue-rotate(4deg) brightness(84%) contrast(98%);
}

body.show-page-bigbrother .show-menu-panel {
  border-color: rgba(255, 151, 164, 0.42);
  background:
    linear-gradient(180deg, rgba(81, 0, 17, 0.96), rgba(37, 0, 8, 0.96)),
    var(--bb-red-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 170, 180, 0.16),
    0 18px 36px rgba(18, 0, 5, 0.36);
}

body.show-page-bigbrother .show-menu-link {
  border-color: rgba(255, 121, 138, 0.32);
  background:
    linear-gradient(90deg, rgba(255, 23, 62, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(48, 0, 10, 0.84);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 188, 0.14),
    0 2px 0 rgba(18, 0, 5, 0.22);
}

body.show-page-bigbrother .show-menu-link:hover {
  border-color: rgba(255, 171, 182, 0.62);
  background:
    linear-gradient(90deg, rgba(255, 23, 62, 0.42), rgba(119, 0, 24, 0.82)),
    var(--bb-red-mid);
}

body.show-page-survivor .show-menu-panel {
  border-color: rgba(242, 200, 94, 0.42);
  background:
    linear-gradient(180deg, rgba(8, 70, 64, 0.96), rgba(3, 34, 35, 0.96)),
    var(--survivor-teal-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 184, 0.16),
    0 18px 36px rgba(2, 22, 23, 0.36);
}

body.show-page-survivor .show-menu-link {
  border-color: rgba(242, 200, 94, 0.3);
  background:
    linear-gradient(90deg, rgba(20, 167, 154, 0.18), rgba(255, 240, 184, 0.05)),
    rgba(3, 43, 44, 0.84);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 184, 0.14),
    0 2px 0 rgba(2, 22, 23, 0.22);
}

body.show-page-survivor .show-menu-link:hover {
  border-color: rgba(255, 224, 137, 0.62);
  background:
    linear-gradient(90deg, rgba(242, 200, 94, 0.36), rgba(11, 105, 99, 0.82)),
    var(--survivor-teal-mid);
}

.on-tv-panel {
  position: relative;
  z-index: 25;
  width: min(1060px, calc(100% - 28px));
  margin: 4px auto 12px;
}

.on-tv-page .on-tv-panel {
  margin-top: 24px;
}

.on-tv-panel-inner {
  display: grid;
  grid-template-columns: 1fr;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: rgba(255, 248, 253, 0.9);
  box-shadow: var(--shadow);
  padding: 12px;
}

body.has-show-backdrop .on-tv-panel-inner {
  background: rgba(255, 248, 253, 0.92);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

body.show-page-bigbrother .on-tv-panel-inner {
  border-color: rgba(255, 153, 165, 0.42);
  background:
    linear-gradient(180deg, rgba(72, 0, 15, 0.82), rgba(32, 0, 7, 0.9)),
    rgba(43, 0, 8, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 188, 0.18),
    0 20px 42px rgba(18, 0, 5, 0.34);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}

body.show-page-survivor .on-tv-panel-inner {
  border-color: rgba(242, 200, 94, 0.44);
  background:
    linear-gradient(180deg, rgba(8, 70, 64, 0.82), rgba(3, 34, 35, 0.9)),
    rgba(4, 43, 44, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 184, 0.18),
    0 20px 42px rgba(2, 22, 23, 0.34);
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}

.on-tv-calendar {
  min-width: 0;
}

.on-tv-calendar-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 10px;
}

.on-tv-calendar-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1.05;
}

.on-tv-calendar-heading span {
  color: var(--pink);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.on-tv-airings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.on-tv-airing {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 72px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(99, 217, 202, 0.15), rgba(255, 255, 255, 0.76) 48%),
    rgba(255, 255, 255, 0.74);
  padding: 10px;
}

.on-tv-airing.is-hidden {
  display: none;
}

.on-tv-airing time {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFE872, var(--yellow));
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 2px 0 rgba(7, 19, 63, 0.14);
}

.on-tv-airing strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.on-tv-airing span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.on-tv-empty {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

body.show-page-bigbrother .on-tv-calendar-heading h1 {
  color: #fff4f6;
  text-shadow:
    0 0 12px rgba(255, 40, 72, 0.48),
    0 2px 0 rgba(18, 0, 5, 0.56);
}

body.show-page-bigbrother .on-tv-calendar-heading span {
  color: var(--bb-red-light);
}

body.show-page-bigbrother .on-tv-airing {
  border-color: rgba(255, 124, 140, 0.3);
  background:
    linear-gradient(90deg, rgba(232, 0, 50, 0.26), rgba(255, 255, 255, 0.06) 58%),
    rgba(35, 0, 8, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 180, 188, 0.14),
    0 8px 18px rgba(18, 0, 5, 0.18);
}

body.show-page-bigbrother .on-tv-airing time {
  border: 1px solid rgba(255, 164, 176, 0.34);
  background: rgba(255, 124, 140, 0.14);
  color: #ffdbe0;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 232, 0.12),
    0 2px 0 rgba(18, 0, 5, 0.22);
}

body.show-page-bigbrother .on-tv-airing strong {
  color: #fff4f6;
}

body.show-page-bigbrother .on-tv-airing span,
body.show-page-bigbrother .on-tv-empty {
  color: var(--muted);
}

body.show-page-survivor .on-tv-calendar-heading h1 {
  color: #fff7dd;
  text-shadow:
    0 0 12px rgba(242, 200, 94, 0.42),
    0 2px 0 rgba(2, 22, 23, 0.58);
}

body.show-page-survivor .on-tv-calendar-heading span {
  color: var(--survivor-gold);
}

body.show-page-survivor .on-tv-airing {
  border-color: rgba(242, 200, 94, 0.3);
  background:
    linear-gradient(90deg, rgba(20, 167, 154, 0.24), rgba(255, 240, 184, 0.06) 58%),
    rgba(3, 34, 35, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 184, 0.14),
    0 8px 18px rgba(2, 22, 23, 0.18);
}

body.show-page-survivor .on-tv-airing time {
  background: linear-gradient(180deg, var(--survivor-sand), var(--survivor-gold) 58%, #bd8732);
  color: #032223;
  text-shadow: 0 1px 0 rgba(255, 247, 221, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 2px 0 rgba(2, 22, 23, 0.45),
    0 0 14px rgba(242, 200, 94, 0.28);
}

body.show-page-survivor .on-tv-airing strong {
  color: #fff7dd;
}

body.show-page-survivor .on-tv-airing span,
body.show-page-survivor .on-tv-empty {
  color: var(--muted);
}

body.show-page-survivor .on-tv-page {
  width: min(560px, calc(100% - 24px));
  margin-top: 8px;
}

body.show-page-survivor .on-tv-panel {
  width: 100%;
  margin-top: 0;
}

body.show-page-survivor .on-tv-panel-inner {
  border-width: 2px;
  border-radius: 6px;
  padding: 8px;
}

body.show-page-survivor .on-tv-calendar-heading {
  margin: 0 0 7px;
}

body.show-page-survivor .on-tv-calendar-heading h1 {
  font-size: 1.08rem;
}

body.show-page-survivor .on-tv-calendar-heading span {
  font-size: 0.68rem;
}

body.show-page-survivor .on-tv-airings {
  grid-template-columns: 1fr;
  gap: 6px;
}

body.show-page-survivor .on-tv-airing {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
  min-height: 50px;
  border-radius: 6px;
  padding: 7px;
}

body.show-page-survivor .on-tv-airing time {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  font-size: 0.68rem;
}

body.show-page-survivor .on-tv-airing strong {
  font-size: 0.8rem;
}

body.show-page-survivor .on-tv-airing span {
  margin-top: 3px;
  font-size: 0.7rem;
}

.show-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: start;
  gap: 14px;
}

.show-board-layout > .active-game-tabs {
  grid-column: 1 / -1;
}

.show-board-panel {
  display: grid;
  grid-column: 1;
  gap: 10px;
  min-width: 0;
}

.show-context-rail {
  display: grid;
  grid-column: 2;
  gap: 12px;
  min-width: 0;
}

.show-context-rail .on-tv-panel {
  width: 100%;
  margin: 0;
}

.show-board-header,
.show-board-controls,
.show-thread-card {
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 253, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 24px rgba(7, 19, 63, 0.08);
}

.show-board-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.show-board-handle {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.show-board-header h1 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 3vw, 2.5rem);
  line-height: 0.98;
}

.show-board-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(62px, auto));
  gap: 8px;
  margin: 0;
}

.show-board-stats div {
  display: grid;
  gap: 1px;
  min-width: 0;
  border-left: 1px solid rgba(7, 19, 63, 0.12);
  padding-left: 12px;
}

.show-board-stats dt,
.show-board-stats dd {
  margin: 0;
}

.show-board-stats dt {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.show-board-stats dd {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.show-section-tabs {
  display: flex;
  align-items: end;
  gap: 3px;
  min-width: 0;
  overflow-x: auto;
  border-bottom: 2px solid rgba(7, 19, 63, 0.12);
  padding: 0 2px;
  -webkit-overflow-scrolling: touch;
}

.show-section-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: rgba(7, 19, 63, 0.62);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  padding: 0 14px;
}

.show-section-tabs a:hover,
.show-section-tabs a:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.52);
  text-decoration: none;
}

.show-section-tabs a.is-active {
  border-bottom-color: var(--pink);
  background: rgba(240, 92, 157, 0.12);
  color: var(--ink);
}

.show-board-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.show-board-compose-menu {
  display: contents;
}

.show-board-compose-menu[open] {
  display: contents;
}

.show-board-compose-trigger {
  grid-column: 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  background: var(--pink);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  list-style: none;
  padding: 0 14px;
}

.show-board-compose-trigger::-webkit-details-marker {
  display: none;
}

.show-board-compose-menu[open] .show-board-compose-trigger {
  margin-bottom: 10px;
}

.show-board-post-form,
.show-board-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.show-board-post-form {
  grid-column: 1 / -1;
}

.show-board-field span {
  color: rgba(7, 19, 63, 0.68);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.show-board-post-form input,
.show-board-post-form textarea,
.show-reply-form textarea {
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font-weight: 800;
  outline: 0;
  padding: 8px 10px;
}

.show-board-post-form input {
  min-height: 38px;
}

.show-board-post-form textarea,
.show-reply-form textarea {
  width: 100%;
  line-height: 1.35;
  resize: vertical;
}

.show-board-post-form textarea {
  min-height: 148px;
}

.show-reply-form textarea {
  min-height: 84px;
}

.show-board-post-form input:focus,
.show-board-post-form textarea:focus,
.show-reply-form textarea:focus {
  border-color: rgba(240, 92, 157, 0.42);
  box-shadow: 0 0 0 3px rgba(240, 92, 157, 0.12);
}

.show-board-login-link,
.show-board-form-footer button,
.show-reply-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: var(--pink);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  padding: 0 14px;
}

.show-board-form-footer,
.show-reply-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.show-board-form-footer span,
.show-reply-actions span {
  color: rgba(73, 101, 168, 0.8);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
}

.show-board-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.show-board-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: rgba(7, 19, 63, 0.72);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  padding: 0 12px;
}

.show-board-tabs a.is-active {
  border-color: rgba(240, 92, 157, 0.3);
  background: rgba(240, 92, 157, 0.16);
  color: var(--ink);
}

.show-thread-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.show-thread-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.show-thread-votes {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 2px;
  border-right: 1px solid rgba(7, 19, 63, 0.08);
  background: rgba(217, 227, 255, 0.3);
  padding: 10px 6px;
}

.show-thread-vote-form {
  display: contents;
  margin: 0;
}

.show-thread-votes button,
.show-thread-votes a {
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(7, 19, 63, 0.56);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
  padding: 0;
}

.show-thread-votes button:hover,
.show-thread-votes button:focus-visible,
.show-thread-votes a:hover,
.show-thread-votes a:focus-visible,
.show-thread-votes button.is-active {
  background: rgba(240, 92, 157, 0.14);
  color: var(--pink);
}

.show-thread-votes strong {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.show-thread-body {
  min-width: 0;
  padding: 12px 14px 10px;
}

.show-thread-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
}

.show-thread-flair,
.show-thread-state,
.show-thread-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 8px;
}

.show-thread-flair {
  background: rgba(99, 217, 202, 0.2);
  color: var(--ink);
}

.show-thread-state {
  background: rgba(255, 232, 114, 0.28);
  color: rgba(7, 19, 63, 0.86);
}

.show-thread-card.has-spoiler .show-thread-state {
  background: rgba(240, 92, 157, 0.16);
  color: var(--pink);
}

.show-thread-body h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.5vw, 1.32rem);
  line-height: 1.1;
}

.show-thread-body h2 a {
  color: inherit;
  text-decoration: none;
}

.show-thread-body h2 a:hover,
.show-thread-body h2 a:focus-visible {
  color: var(--pink);
  text-decoration: none;
}

.show-thread-excerpt,
.show-thread-content {
  margin: 7px 0 0;
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.show-thread-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.show-thread-tags span {
  background: rgba(217, 227, 255, 0.58);
  color: rgba(7, 19, 63, 0.7);
}

.show-thread-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
}

.show-thread-actions a,
.show-thread-actions button {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: rgba(73, 101, 168, 0.86);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  padding: 0;
}

.show-thread-delete-form,
.show-reply-delete-form {
  margin: 0;
}

.show-thread-actions .show-thread-delete-button,
.show-reply-delete-form .show-thread-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(198, 32, 66, 0.88);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.show-reply-delete-form .show-thread-delete-button {
  min-height: 26px;
  border: 1px solid rgba(198, 32, 66, 0.16);
  background: rgba(198, 32, 66, 0.08);
  padding: 0 9px;
}

.show-thread-actions a:hover,
.show-thread-actions a:focus-visible,
.show-thread-actions button:hover,
.show-thread-actions button:focus-visible {
  color: var(--pink);
  text-decoration: none;
}

.show-thread-share-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  padding: 7px;
}

.show-thread-share-box[hidden] {
  display: none;
}

.show-thread-share-box input {
  min-width: 0;
  min-height: 30px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0 8px;
}

.show-thread-share-box button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: var(--pink);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  padding: 0 10px;
}

.show-thread-share-box span {
  grid-column: 1 / -1;
  color: rgba(73, 101, 168, 0.82);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.2;
}

.show-reply-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  padding-top: 10px;
}

.show-reply-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.show-reply-card {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  padding: 10px;
}

.show-reply-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.15;
}

.show-reply-meta strong {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
}

.show-reply-content {
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.show-reply-form {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.show-thread-empty {
  margin: 0;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 248, 253, 0.88);
  color: rgba(7, 19, 63, 0.64);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.25;
  padding: 18px;
  text-align: center;
}

.show-rankings-panel,
.show-section-empty,
.show-section-embed {
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 253, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 24px rgba(7, 19, 63, 0.08);
}

.show-rankings-panel {
  overflow: hidden;
}

.show-rankings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  padding: 14px 16px;
}

.show-rankings-header span,
.show-rankings-header time {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.show-rankings-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  text-align: right;
}

.show-rankings-header h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
}

.show-rankings-form {
  display: grid;
  gap: 0;
  min-width: 0;
}

.show-rankings-editor {
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  padding: 12px 16px;
}

.show-rankings-editor[open] {
  padding: 12px 0 0;
}

.show-rankings-editor summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  width: max-content;
  max-width: 100%;
  border-radius: 6px;
  background: var(--pink);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1;
  list-style: none;
  padding: 0 18px;
}

.show-rankings-editor summary::-webkit-details-marker {
  display: none;
}

.show-rankings-editor[open] summary {
  margin: 0 16px 12px;
}

.show-rankings-editor .show-rankings-form {
  border-top: 1px solid rgba(7, 19, 63, 0.1);
}

.show-rankings-scroll {
  max-width: 100%;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
}

.show-rankings-grid {
  width: min(100%, 1420px);
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 auto;
  table-layout: fixed;
}

.show-rankings-grid th,
.show-rankings-grid td {
  min-width: 0;
  height: 34px;
  border: 0;
  text-align: center;
  vertical-align: middle;
}

.show-rankings-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(7, 19, 63, 0.06);
  padding: 0 2px 4px;
}

.show-rankings-grid thead th:first-child,
.show-rankings-grid tbody th {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 48px;
  min-width: 48px;
  background: rgba(255, 248, 253, 0.98);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
}

.show-rankings-grid tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.48);
}

.show-rankings-grid tbody tr:nth-child(even) td {
  background: rgba(217, 227, 255, 0.26);
}

.show-ranking-player {
  display: grid;
  grid-template-rows: auto 16px;
  gap: 2px;
  justify-items: center;
  min-width: 0;
}

.show-ranking-player img,
.show-ranking-player > span {
  display: grid;
  place-items: center;
  width: min(50px, calc(100% - 6px));
  max-width: 50px;
  height: auto;
  aspect-ratio: 29 / 27;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(7, 19, 63, 0.12);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 900;
}

.show-ranking-player img {
  object-fit: cover;
}

.show-ranking-player.is-evicted img {
  filter: grayscale(1);
}

.show-ranking-player strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.5rem;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.show-ranking-choice {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 23px;
  height: 23px;
  cursor: pointer;
}

.show-ranking-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.show-ranking-choice span {
  display: block;
  width: 21px;
  height: 21px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 2px rgba(7, 19, 63, 0.12),
    0 1px 2px rgba(7, 19, 63, 0.1);
}

.show-ranking-choice input:checked + span {
  border-color: var(--pink);
  background:
    radial-gradient(circle at 50% 50%, var(--pink) 0 34%, transparent 38%),
    rgba(255, 255, 255, 0.96);
}

.show-ranking-choice input:focus-visible + span {
  box-shadow:
    0 0 0 3px rgba(240, 92, 157, 0.18),
    inset 0 1px 2px rgba(7, 19, 63, 0.12);
}

.show-ranking-choice input:disabled + span {
  opacity: 0.58;
  cursor: not-allowed;
}

.show-rankings-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  padding: 14px 16px 16px;
}

.show-rankings-footer span {
  color: rgba(7, 19, 63, 0.5);
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.2;
}

.show-rankings-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.show-rankings-footer button,
.show-rankings-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: #6aa84f;
  color: #ffffff;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
  padding: 0 18px;
}

.show-rankings-footer .show-rankings-secondary-button {
  border: 2px solid rgba(7, 19, 63, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
}

.show-rankings-footer .show-rankings-secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.show-rankings-results {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  background: rgba(255, 255, 255, 0.34);
  padding: 10px 0 0;
}

.show-rankings-results header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
}

.show-rankings-results h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.05;
}

.show-rankings-results header span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.show-rankings-results-scroll {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.show-rankings-results-grid {
  width: max-content;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.show-rankings-results-grid th,
.show-rankings-results-grid td {
  width: 96px;
  min-width: 96px;
  height: 26px;
  border: 0;
  text-align: center;
  vertical-align: middle;
}

.show-rankings-results-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 24px;
  background: rgba(7, 19, 63, 0.08);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
}

.show-rankings-results-grid thead th:first-child,
.show-rankings-results-grid tbody th {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 44px;
  min-width: 44px;
  background: rgba(255, 248, 253, 0.98);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 950;
  line-height: 1;
  vertical-align: middle;
}

.show-rankings-results-grid tbody tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.5);
}

.show-rankings-results-grid tbody tr:nth-child(even) td {
  background: rgba(217, 227, 255, 0.26);
}

.show-ranking-result-player {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: 92px;
  height: 24px;
  min-width: 0;
  margin: 0 auto;
  padding: 1px 3px;
}

.show-ranking-result-player img,
.show-ranking-result-player > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(7, 19, 63, 0.12);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 950;
}

.show-ranking-result-player img {
  object-fit: cover;
}

.show-ranking-result-player.is-evicted img {
  filter: grayscale(1);
}

.show-ranking-result-player strong {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  font-size: 0.56rem;
  font-weight: 950;
  line-height: 1;
  padding: 0;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.show-rankings-results-empty {
  margin: 0;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  color: rgba(7, 19, 63, 0.56);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.25;
  padding: 14px 16px 16px;
  text-align: center;
}

.show-ranking-rail-panel {
  width: min(100%, 286px);
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 248, 253, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 24px rgba(7, 19, 63, 0.08);
}

.show-ranking-rail-heading {
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  padding: 7px 8px;
}

.show-ranking-rail-heading span {
  display: block;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.show-ranking-rail-heading h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
}

.show-ranking-rail-list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.show-ranking-rail-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 64px;
  min-height: 50px;
  gap: 6px;
  align-items: center;
  padding: 3px 6px 3px 0;
}

.show-ranking-rail-item:nth-child(odd) {
  background: rgba(255, 255, 255, 0.48);
}

.show-ranking-rail-item:nth-child(even) {
  background: rgba(217, 227, 255, 0.26);
}

.show-ranking-rail-player {
  position: relative;
  display: grid;
  width: 44px;
  min-width: 0;
}

.show-ranking-rail-player img,
.show-ranking-rail-player > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 42px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(7, 19, 63, 0.12);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
}

.show-ranking-rail-player img {
  object-fit: cover;
}

.show-ranking-rail-item.is-evicted img {
  filter: grayscale(1);
}

.show-ranking-rail-player strong {
  display: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 0.5rem;
  font-weight: 950;
  line-height: 12px;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.show-ranking-rail-status {
  position: absolute;
  bottom: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 3px;
  background: var(--rail-status-color, var(--pink));
  color: #ffffff;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.show-ranking-rail-stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 3px 4px;
  min-width: 0;
}

.show-ranking-rail-stats b {
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
}

.show-ranking-rail-stats strong {
  min-width: 0;
  max-width: 78px;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.show-ranking-rail-stats span {
  grid-column: 1 / -1;
  color: rgba(7, 19, 63, 0.78);
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.show-ranking-rail-stats span + span {
  margin-top: -1px;
}

.show-ranking-rail-distribution {
  display: grid;
  align-content: center;
  justify-self: end;
  width: 62px;
  min-width: 0;
  gap: 2px;
}

.show-ranking-rail-bars {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: end;
  gap: 1px;
  height: 19px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.18);
}

.show-ranking-rail-bars span {
  display: block;
  min-height: 1px;
  height: var(--bar-height, 1px);
  background: var(--pink);
}

.show-ranking-rail-scale {
  display: flex;
  justify-content: space-between;
  color: rgba(7, 19, 63, 0.5);
  font-size: 0.45rem;
  font-weight: 900;
  line-height: 1;
}

.show-section-empty,
.show-section-embed {
  margin: 0;
  padding: 18px;
}

.show-section-empty {
  color: rgba(7, 19, 63, 0.64);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.show-section-embed .on-tv-panel {
  margin: 0;
}

.home-shell {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 28px));
  margin: 10px auto 42px;
}

body:not(.show-page) > .home-shell {
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 248, 253, 0.72), rgba(255, 255, 255, 0.46)),
    rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 24px 54px rgba(7, 19, 63, 0.16);
  padding: clamp(16px, 2vw, 28px) clamp(10px, 1.6vw, 22px) clamp(14px, 2vw, 28px);
  -webkit-backdrop-filter: blur(8px) saturate(118%);
  backdrop-filter: blur(8px) saturate(118%);
}

.home-shell:has(> .active-game-tabs) {
  margin-top: 34px;
}

.active-game-tabs {
  --active-game-tab-ink: #07133f;
  --active-game-tab-width: clamp(112px, 8vw, 124px);
  position: absolute;
  right: clamp(18px, 2.6vw, 44px);
  bottom: 100%;
  z-index: -1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 0;
  width: max-content;
  max-width: min(620px, calc(100% - 24px));
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  margin: 0;
  padding: 0 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.active-game-tabs::-webkit-scrollbar {
  display: none;
}

.active-game-tab {
  --active-game-tab-accent: var(--pink);
  --active-game-tab-bg-top: color-mix(in srgb, var(--active-game-tab-accent) 12%, #ffffff);
  --active-game-tab-bg-bottom: color-mix(in srgb, var(--active-game-tab-accent) 7%, #d9e3ff);
  --active-game-tab-hover-bg-top: color-mix(in srgb, var(--active-game-tab-accent) 18%, #ffffff);
  --active-game-tab-hover-bg-bottom: color-mix(in srgb, var(--active-game-tab-accent) 10%, #d9e3ff);
  --active-game-tab-current-bg-top: color-mix(in srgb, var(--active-game-tab-accent) 72%, #ffffff);
  --active-game-tab-current-bg-bottom: var(--active-game-tab-accent);
  --active-game-tab-border-color: rgba(7, 19, 63, 0.22);
  --active-game-tab-current-border: color-mix(in srgb, var(--active-game-tab-accent) 56%, #07133f);
  --active-game-tab-active-ink: #07133f;
  --active-game-tab-active-shadow: rgba(255, 255, 255, 0.68);
  --active-game-tab-font: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --active-game-tab-font-size: 0.9rem;
  --active-game-tab-font-weight: 900;
  --active-game-tab-text-stroke-width: 0;
  --active-game-tab-text-stroke-color: transparent;
  --active-game-tab-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
  --active-game-tab-active-text-shadow: 0 1px 0 var(--active-game-tab-active-shadow);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--active-game-tab-width);
  box-sizing: border-box;
  width: var(--active-game-tab-width);
  min-width: var(--active-game-tab-width);
  min-height: 32px;
  border: 2px solid var(--active-game-tab-border-color);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(
    180deg,
    var(--active-game-tab-bg-top),
    var(--active-game-tab-bg-bottom)
  );
  color: var(--active-game-tab-ink);
  cursor: pointer;
  font-family: var(--active-game-tab-font);
  font-size: var(--active-game-tab-font-size);
  font-weight: var(--active-game-tab-font-weight);
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  -webkit-text-stroke: var(--active-game-tab-text-stroke-width) var(--active-game-tab-text-stroke-color);
  paint-order: stroke fill;
  text-shadow: var(--active-game-tab-text-shadow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 -3px 8px rgba(7, 19, 63, 0.08);
  padding: 6px 16px 8px;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.active-game-tab + .active-game-tab {
  margin-left: -2px;
}

.active-game-tab:hover,
.active-game-tab:focus-visible {
  outline: 0;
  background: linear-gradient(
    180deg,
    var(--active-game-tab-hover-bg-top),
    var(--active-game-tab-hover-bg-bottom)
  );
  color: var(--active-game-tab-ink);
  text-decoration: none;
}

.active-game-tab.is-active {
  z-index: 1;
  border-color: var(--active-game-tab-current-border);
  background: linear-gradient(
    180deg,
    var(--active-game-tab-current-bg-top),
    var(--active-game-tab-current-bg-bottom)
  );
  color: var(--active-game-tab-active-ink);
  text-shadow: var(--active-game-tab-active-text-shadow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 -3px 8px rgba(7, 19, 63, 0.1);
}

.active-game-tab.is-spilled {
  --active-game-tab-accent: #B1E2BD;
  --active-game-tab-bg-top: #E6F8EA;
  --active-game-tab-bg-bottom: #B1E2BD;
  --active-game-tab-hover-bg-top: #F2FFF4;
  --active-game-tab-hover-bg-bottom: #A5DFB2;
  --active-game-tab-current-bg-top: #E6F8EA;
  --active-game-tab-current-bg-bottom: #B1E2BD;
  --active-game-tab-border-color: rgba(240, 92, 157, 0.38);
  --active-game-tab-current-border: #F05C9D;
  --active-game-tab-ink: #526EB0;
  --active-game-tab-active-ink: #526EB0;
  --active-game-tab-font: "Baserock", "Froople", Georgia, serif;
  --active-game-tab-font-size: 1rem;
  --active-game-tab-font-weight: 400;
  --active-game-tab-text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    1px 1px 0 rgba(255, 216, 61, 0.52);
  --active-game-tab-active-text-shadow: var(--active-game-tab-text-shadow);
}

.active-game-tab.is-madhouse {
  --active-game-tab-accent: #FFE22B;
  --active-game-tab-bg-top: #FFF071;
  --active-game-tab-bg-bottom: #FFE22B;
  --active-game-tab-hover-bg-top: #FFF58B;
  --active-game-tab-hover-bg-bottom: #FFE54A;
  --active-game-tab-current-bg-top: #FFF071;
  --active-game-tab-current-bg-bottom: #FFE22B;
  --active-game-tab-border-color: rgba(216, 62, 0, 0.58);
  --active-game-tab-current-border: #D83E00;
  --active-game-tab-ink: #D83E00;
  --active-game-tab-active-ink: #D83E00;
  --active-game-tab-font: "Lakon Rokum", Arial, Helvetica, sans-serif;
  --active-game-tab-font-size: 1.08rem;
  --active-game-tab-font-weight: 400;
  --active-game-tab-text-stroke-width: 0.42px;
  --active-game-tab-text-stroke-color: #7A2200;
  --active-game-tab-text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.76),
    0 3px 5px rgba(52, 29, 12, 0.14);
  --active-game-tab-active-text-shadow: var(--active-game-tab-text-shadow);
}

.active-game-tab.is-magnate {
  --active-game-tab-accent: #EC998C;
  --active-game-tab-bg-top: #F7CAD0;
  --active-game-tab-bg-bottom: #EC998C;
  --active-game-tab-hover-bg-top: #FFE0E2;
  --active-game-tab-hover-bg-bottom: #F0A89C;
  --active-game-tab-current-bg-top: #F7CAD0;
  --active-game-tab-current-bg-bottom: #EC998C;
  --active-game-tab-border-color: rgba(200, 149, 61, 0.5);
  --active-game-tab-current-border: #C8953D;
  --active-game-tab-ink: #3D2430;
  --active-game-tab-active-ink: #3D2430;
  --active-game-tab-font: "Decort", "Decohead", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --active-game-tab-font-size: 0.96rem;
  --active-game-tab-font-weight: 400;
  --active-game-tab-text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    1px 1px 0 rgba(200, 149, 61, 0.34);
  --active-game-tab-active-text-shadow: var(--active-game-tab-text-shadow);
}

.active-game-tab.is-palais {
  --active-game-tab-accent: #3d060b;
  --active-game-tab-bg-top: #6D121B;
  --active-game-tab-bg-bottom: #3D060B;
  --active-game-tab-hover-bg-top: #7D1720;
  --active-game-tab-hover-bg-bottom: #4F0A11;
  --active-game-tab-current-bg-top: #6D121B;
  --active-game-tab-current-bg-bottom: #3D060B;
  --active-game-tab-border-color: rgba(61, 6, 11, 0.58);
  --active-game-tab-current-border: #3D060B;
  --active-game-tab-ink: #FFFFFF;
  --active-game-tab-active-ink: #ffffff;
  --active-game-tab-active-shadow: rgba(7, 19, 63, 0.28);
  --active-game-tab-font: "Decohead", "Baresno", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --active-game-tab-font-weight: 400;
  --active-game-tab-text-shadow: 0 1px 0 rgba(7, 19, 63, 0.38);
  --active-game-tab-active-text-shadow: var(--active-game-tab-text-shadow);
}

.active-game-tab.is-jungle {
  --active-game-tab-accent: #456030;
  --active-game-tab-bg-top: #456030;
  --active-game-tab-bg-bottom: #456030;
  --active-game-tab-hover-bg-top: #456030;
  --active-game-tab-hover-bg-bottom: #456030;
  --active-game-tab-current-bg-top: #456030;
  --active-game-tab-current-bg-bottom: #456030;
  --active-game-tab-border-color: rgba(139, 91, 51, 0.62);
  --active-game-tab-current-border: #8B5B33;
  --active-game-tab-ink: #EADFC8;
  --active-game-tab-active-ink: #ffffff;
  --active-game-tab-active-shadow: rgba(7, 19, 63, 0.28);
  --active-game-tab-font: "Javiore", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --active-game-tab-font-size: 1.02rem;
  --active-game-tab-font-weight: 400;
  --active-game-tab-text-shadow: 0 2px 3px rgba(8, 11, 6, 0.56);
  --active-game-tab-active-text-shadow: var(--active-game-tab-text-shadow);
}

.active-game-tab.is-primal {
  --active-game-tab-accent: #000000;
  --active-game-tab-bg-top: #343434;
  --active-game-tab-bg-bottom: #000000;
  --active-game-tab-hover-bg-top: #424242;
  --active-game-tab-hover-bg-bottom: #111111;
  --active-game-tab-current-bg-top: #343434;
  --active-game-tab-current-bg-bottom: #000000;
  --active-game-tab-border-color: rgba(0, 0, 0, 0.6);
  --active-game-tab-current-border: #000000;
  --active-game-tab-ink: #ffffff;
  --active-game-tab-active-ink: #ffffff;
  --active-game-tab-active-shadow: rgba(7, 19, 63, 0.28);
  --active-game-tab-font: "Baserock", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --active-game-tab-font-weight: 400;
  --active-game-tab-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  --active-game-tab-active-text-shadow: var(--active-game-tab-text-shadow);
}

.active-game-tab.is-spy {
  --active-game-tab-accent: #DF0451;
  --active-game-tab-bg-top: #FF4C88;
  --active-game-tab-bg-bottom: #DF0451;
  --active-game-tab-hover-bg-top: #FF6FA0;
  --active-game-tab-hover-bg-bottom: #EC145F;
  --active-game-tab-current-bg-top: #FF4C88;
  --active-game-tab-current-bg-bottom: #DF0451;
  --active-game-tab-border-color: rgba(223, 4, 81, 0.58);
  --active-game-tab-current-border: #DF0451;
  --active-game-tab-ink: #ffffff;
  --active-game-tab-active-ink: #ffffff;
  --active-game-tab-active-shadow: rgba(7, 19, 63, 0.28);
  --active-game-tab-font: "Ibrand", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --active-game-tab-font-weight: 400;
  --active-game-tab-text-shadow: 0 1px 0 rgba(7, 19, 63, 0.38);
  --active-game-tab-active-text-shadow: var(--active-game-tab-text-shadow);
}

.active-game-tab.is-ascension {
  --active-game-tab-accent: #451D45;
  --active-game-tab-bg-top: #70406F;
  --active-game-tab-bg-bottom: #451D45;
  --active-game-tab-hover-bg-top: #805080;
  --active-game-tab-hover-bg-bottom: #562956;
  --active-game-tab-current-bg-top: #70406F;
  --active-game-tab-current-bg-bottom: #451D45;
  --active-game-tab-border-color: rgba(69, 29, 69, 0.56);
  --active-game-tab-current-border: #451D45;
  --active-game-tab-ink: #ffffff;
  --active-game-tab-active-ink: #ffffff;
  --active-game-tab-active-shadow: rgba(7, 19, 63, 0.28);
  --active-game-tab-font: "Decohead", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --active-game-tab-font-weight: 400;
  --active-game-tab-text-shadow: 0 1px 0 rgba(7, 19, 63, 0.38);
  --active-game-tab-active-text-shadow: var(--active-game-tab-text-shadow);
}

.active-game-tab.is-frontier {
  --active-game-tab-accent: #D39744;
  --active-game-tab-bg-top: #E9BB73;
  --active-game-tab-bg-bottom: #D39744;
  --active-game-tab-hover-bg-top: #F0CA88;
  --active-game-tab-hover-bg-bottom: #DFA453;
  --active-game-tab-current-bg-top: #E9BB73;
  --active-game-tab-current-bg-bottom: #D39744;
  --active-game-tab-border-color: rgba(141, 88, 27, 0.48);
  --active-game-tab-current-border: #9C5C15;
  --active-game-tab-ink: #2E1B0F;
  --active-game-tab-active-ink: #2E1B0F;
  --active-game-tab-font: "Baresno", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --active-game-tab-font-weight: 400;
  --active-game-tab-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
  --active-game-tab-active-text-shadow: var(--active-game-tab-text-shadow);
}

.active-game-tab-label {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  white-space: nowrap;
}

.spilled-info-shell,
.spilled-layout,
.magnate-game,
.magnate-poll,
.madhouse-game,
.jungle-game-shell {
  position: relative;
}

.spilled-info-shell:has(> .active-game-tabs),
.spilled-layout:has(> .active-game-tabs) {
  margin-top: 36px;
}

.magnate-game > .active-game-tabs,
.magnate-poll > .active-game-tabs {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: 3;
  justify-content: flex-end;
  width: min(1500px, calc(100% - 28px));
  max-width: min(1500px, calc(100% - 28px));
  margin: 0 auto 6px;
  padding: 0 clamp(24px, 4vw, 72px);
  overflow: visible;
  transform: none;
}

.spilled-layout > .active-game-tabs,
.madhouse-game > .active-game-tabs {
  grid-column: 1 / -1;
}

.game-lobby-admin {
  position: relative;
  z-index: 4;
  grid-column: 1 / -1;
  width: min(100%, 1180px);
  margin: 0 auto 14px;
  padding: 12px;
  border: 1px solid rgba(10, 22, 38, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 28px rgba(10, 22, 38, 0.12);
  color: #111827;
  font-family: Arial, Helvetica, sans-serif;
}

.game-lobby-admin__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.game-lobby-admin__eyebrow,
.game-lobby-admin__heading h2,
.game-lobby-admin__count,
.game-lobby-admin__status,
.game-lobby-admin__empty {
  margin: 0;
  letter-spacing: 0;
}

.game-lobby-admin__eyebrow {
  color: #4b5563;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.game-lobby-admin__heading h2 {
  margin-top: 2px;
  font-size: 1rem;
  line-height: 1.15;
}

.game-lobby-admin__count {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.76rem;
  font-weight: 800;
}

.game-lobby-admin__status {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
}

.game-lobby-admin__status.is-success {
  background: #dcfce7;
  color: #14532d;
}

.game-lobby-admin__status.is-error {
  background: #fee2e2;
  color: #7f1d1d;
}

.game-lobby-admin__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.game-lobby-admin__player {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  background: rgba(249, 250, 251, 0.92);
}

.game-lobby-admin__avatar {
  display: block;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 8px;
  background: #e5e7eb;
}

.game-lobby-admin__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-lobby-admin__player-meta {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.game-lobby-admin__player-meta a {
  overflow: hidden;
  color: #111827;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-lobby-admin__player-meta span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 700;
}

.game-lobby-admin__kick-form {
  margin: 0;
}

.game-lobby-admin__kick {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: #b91c1c;
  color: #ffffff;
  font: 800 0.78rem/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.game-lobby-admin__kick:hover,
.game-lobby-admin__kick:focus-visible {
  background: #991b1b;
}

.game-lobby-admin__kick:focus-visible {
  outline: 3px solid rgba(239, 68, 68, 0.34);
  outline-offset: 2px;
}

.game-lobby-admin__empty {
  color: #4b5563;
  font-size: 0.84rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .game-lobby-admin {
    padding: 10px;
  }

  .game-lobby-admin__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .game-lobby-admin__count {
    align-self: flex-start;
  }

  .game-lobby-admin__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.show-page-bigbrother .show-detail-layout > .active-game-tabs {
  grid-column: 1 / -1;
}

body.show-page-bigbrother .show-detail-layout:has(> .active-game-tabs) {
  margin-top: 34px;
}

.profile-shell {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 22px;
  --profile-narrow-width: 575px;
  --profile-buzz-width: 575px;
}

.profile-main-column {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(150px, 214px) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.08);
  padding: 0 4px 22px;
}

.profile-portrait-column {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
  width: 100%;
  max-width: 200px;
}

.profile-portrait {
  width: 100%;
  max-width: 200px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  aspect-ratio: 200 / 270;
  background:
    linear-gradient(180deg, rgba(255, 216, 61, 0.28), rgba(99, 217, 202, 0.2)),
    rgba(255, 248, 253, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 34px rgba(7, 19, 63, 0.16);
}

.profile-portrait-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.profile-portrait-link:hover,
.profile-portrait-link:focus-visible {
  border-color: rgba(99, 217, 202, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 0 4px rgba(99, 217, 202, 0.2),
    0 20px 38px rgba(7, 19, 63, 0.18);
  transform: translateY(-2px);
}

.profile-portrait-link:focus-visible {
  outline: 0;
}

.profile-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.profile-presence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-height: 20px;
  color: var(--muted);
  font-family: "Kimoru", "Barlow", Arial, Helvetica, sans-serif;
  font-size: 1.07rem;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.profile-presence::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, currentColor 20%, transparent),
    0 1px 2px rgba(7, 19, 63, 0.12);
}

.profile-presence.is-online {
  color: #0AA652;
}

.profile-presence.is-online::before {
  background: #046739;
  box-shadow:
    0 0 0 2px color-mix(in srgb, #046739 20%, transparent),
    0 1px 2px rgba(7, 19, 63, 0.12);
}

.profile-presence.is-offline {
  color: #DF1A50;
}

.profile-presence.is-offline::before {
  background: #9C1C1B;
  box-shadow:
    0 0 0 2px color-mix(in srgb, #9C1C1B 20%, transparent),
    0 1px 2px rgba(7, 19, 63, 0.12);
}

.profile-presence-label {
  font-weight: 700;
}

.profile-presence-time {
  font-weight: 400;
}

.profile-social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
}

.profile-social-link {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  transition:
    filter 170ms ease,
    transform 170ms ease;
}

.profile-social-link img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(7, 19, 63, 0.12));
  transition:
    filter 170ms ease,
    transform 170ms ease;
}

.profile-social-link:hover,
.profile-social-link:focus-visible {
  filter: saturate(1.08);
  text-decoration: none;
  transform: translateY(-2px) rotate(-4deg) scale(1.05);
}

.profile-social-link:hover img,
.profile-social-link:focus-visible img {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.74))
    drop-shadow(0 5px 7px rgba(7, 19, 63, 0.18));
}

.profile-social-link:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.profile-social-link:active {
  transform: translateY(0) scale(0.96);
}

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

.profile-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
}

.profile-section-heading p {
  margin: 0 0 7px;
  color: var(--pink);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.profile-identity h1 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: "Kimoru", Arial, Helvetica, sans-serif;
  font-size: 3.15rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.9;
  text-shadow:
    2px 0 0 rgba(255, 255, 255, 0.82),
    0 3px 0 rgba(255, 255, 255, 0.72),
    0 10px 18px rgba(7, 19, 63, 0.12);
}

.profile-verified-icon {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(7, 19, 63, 0.14));
}

.profile-verified-badge {
  flex: 0 0 auto;
  display: inline-grid;
  align-self: center;
  place-items: center;
  line-height: 0;
}

.profile-site-rank {
  --profile-site-rank-width: 31px;
  --profile-site-rank-height: 31px;
  position: relative;
  flex: 0 0 auto;
  display: block;
  align-self: center;
  width: var(--profile-site-rank-width);
  height: var(--profile-site-rank-height);
  line-height: 0;
  transform: translateY(1px);
}

.profile-site-rank.is-top-five {
  --profile-site-rank-width: 33px;
  --profile-site-rank-height: 46px;
}

.profile-site-rank-shape {
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.34) 0 8%, rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 46% 35%, rgba(255, 241, 132, 0.62) 0 18%, rgba(255, 241, 132, 0) 36%),
    linear-gradient(145deg, #F6D54C 0%, #D89A0A 46%, #A46604 72%, #F3C13E 100%);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.76))
    drop-shadow(0 3px 5px rgba(7, 19, 63, 0.2));
  -webkit-mask: url("game-assets/badges/normalrank.png") center / contain no-repeat;
  mask: url("game-assets/badges/normalrank.png") center / contain no-repeat;
}

.profile-site-rank.is-top-five .profile-site-rank-shape {
  background:
    radial-gradient(circle at 35% 19%, rgba(255, 255, 255, 0.34) 0 7%, rgba(255, 255, 255, 0) 23%),
    radial-gradient(circle at 47% 30%, rgba(255, 235, 117, 0.56) 0 17%, rgba(255, 235, 117, 0) 36%),
    linear-gradient(150deg, #F7D750 0%, #D99D0C 38%, #A26205 66%, #E5A90D 82%, #F2C849 100%);
  -webkit-mask-image: url("game-assets/badges/Top5.png");
  mask-image: url("game-assets/badges/Top5.png");
}

.profile-site-rank img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.profile-site-rank-number {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding-top: 1px;
  color: #2A1800;
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.76),
    0 -1px 0 rgba(119, 72, 0, 0.22);
}

.profile-site-rank.is-top-five .profile-site-rank-number {
  height: 72.3%;
  padding-top: 2px;
}

.profile-site-rank[data-rank-digits="2"] .profile-site-rank-number {
  font-size: 0.62rem;
}

.profile-site-rank[data-rank-digits="3"] .profile-site-rank-number {
  font-size: 0.5rem;
}

.profile-name-row [data-profile-name-tooltip] {
  position: relative;
  cursor: default;
}

.profile-name-row [data-profile-name-tooltip]::before,
.profile-name-row [data-profile-name-tooltip]::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  z-index: 6;
}

.profile-name-row [data-profile-name-tooltip]::before {
  content: "";
  bottom: calc(100% + 5px);
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(21, 23, 36, 0.92);
  border-left: 6px solid transparent;
}

.profile-name-row [data-profile-name-tooltip]::after {
  content: attr(data-profile-name-tooltip);
  bottom: calc(100% + 11px);
  max-width: min(260px, 82vw);
  padding: 7px 9px;
  border-radius: 3px;
  background: rgba(21, 23, 36, 0.92);
  box-shadow: 0 8px 18px rgba(7, 19, 63, 0.18);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.profile-name-row [data-profile-name-tooltip]:hover::before,
.profile-name-row [data-profile-name-tooltip]:hover::after,
.profile-name-row [data-profile-name-tooltip]:focus-visible::before,
.profile-name-row [data-profile-name-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.profile-level-card.shop-color-card {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
  width: 42px;
  min-width: 0;
  min-height: 64px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.profile-level-card.shop-color-card::before {
  display: none;
}

.profile-name-row .profile-level-card.shop-color-card[data-profile-name-tooltip]::before {
  display: block;
}

.profile-level-card .shop-color-swatch {
  width: 42px;
  min-height: 64px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%),
    linear-gradient(315deg, rgba(7, 19, 63, 0.16), rgba(7, 19, 63, 0) 54%),
    var(--level-color);
  box-shadow:
    inset 0 0 0 1px rgba(7, 19, 63, 0.12),
    0 4px 8px rgba(7, 19, 63, 0.12);
}

.profile-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 800;
}

.profile-balance span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.profile-balance [data-profile-stat-label] {
  position: relative;
  cursor: help;
}

.profile-balance [data-profile-stat-label]::before,
.profile-balance [data-profile-stat-label]::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  z-index: 4;
}

.profile-balance [data-profile-stat-label]::before {
  content: "";
  top: calc(100% + 4px);
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(21, 23, 36, 0.9);
  border-left: 6px solid transparent;
}

.profile-balance [data-profile-stat-label]::after {
  content: attr(data-profile-stat-label);
  top: calc(100% + 10px);
  padding: 7px 9px;
  border-radius: 3px;
  background: rgba(21, 23, 36, 0.9);
  box-shadow: 0 8px 18px rgba(7, 19, 63, 0.18);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.profile-balance [data-profile-stat-label]:hover::before,
.profile-balance [data-profile-stat-label]:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.profile-balance img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.82))
    drop-shadow(0 3px 4px rgba(7, 19, 63, 0.12));
}

.profile-games-played img {
  width: auto;
  height: 32px;
  transform: translateY(-1px);
}

.profile-games-info {
  gap: 20px;
}

.profile-ban-indicator img {
  width: auto;
  height: 26px;
}

.profile-balance strong {
  color: var(--ink);
  font-size: 1.18rem;
}

.profile-bio-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(217, 227, 255, 0.72)),
    rgba(255, 255, 255, 0.8);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 3px 0 rgba(7, 19, 63, 0.1);
  padding: 5px 11px;
}

.profile-bio-edit:hover,
.profile-bio-edit:focus-visible {
  border-color: rgba(240, 92, 157, 0.38);
  color: var(--ink);
}

.profile-bio-edit:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.profile-moderate-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 226, 240, 0.74)),
    rgba(255, 255, 255, 0.84);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 3px 0 rgba(7, 19, 63, 0.1);
  padding: 6px 12px;
}

.profile-moderate-trigger:hover,
.profile-moderate-trigger:focus-visible {
  border-color: rgba(240, 92, 157, 0.42);
  color: var(--pink);
  transform: translateY(-1px);
}

.profile-moderate-trigger:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.profile-admin-status {
  width: fit-content;
  max-width: min(100%, 460px);
  margin: 2px 0 0;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.25;
  padding: 8px 10px;
}

.profile-admin-status.is-success {
  border-color: rgba(45, 157, 123, 0.24);
  background: rgba(233, 251, 244, 0.9);
  color: #216d55;
}

.profile-admin-status.is-error {
  border-color: rgba(223, 4, 81, 0.2);
  background: rgba(255, 241, 247, 0.92);
  color: #a8073f;
}

body.is-profile-moderation-modal-open {
  overflow: hidden;
}

.shop-purchase-dialog.profile-moderation-dialog {
  width: min(100%, 500px);
}

.profile-moderation-head h2 {
  overflow-wrap: anywhere;
}

.profile-moderation-summary {
  display: grid;
  gap: 8px;
  margin: 0;
}

.profile-moderation-summary div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 38px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 10px;
}

.profile-moderation-summary dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.profile-moderation-summary dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.profile-moderation-summary a {
  color: var(--pink);
  font-weight: 950;
}

.profile-moderation-note,
.profile-moderation-action {
  display: grid;
  gap: 12px;
  margin: 0;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 244, 255, 0.78)),
    #fff;
  color: rgba(73, 101, 168, 0.92);
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.32;
  padding: 14px;
}

.profile-moderation-action p {
  margin: 0;
}

.profile-show-moderation-action {
  border-color: rgba(83, 179, 203, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(236, 252, 255, 0.78)),
    #fff;
}

.profile-show-moderation-action .profile-moderation-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
    #53b3cb;
}

.profile-moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-moderation-primary,
.profile-moderation-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1;
  padding: 9px 14px;
}

.profile-moderation-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
    var(--pink);
  color: #fff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.22);
}

.profile-moderation-secondary {
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
}

.profile-moderation-primary:hover,
.profile-moderation-primary:focus-visible,
.profile-moderation-secondary:hover,
.profile-moderation-secondary:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-friend-request {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition:
    filter 150ms ease,
    transform 150ms ease;
}

.profile-friend-request[hidden] {
  display: none;
}

.profile-friend-request::before,
.profile-friend-request::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  z-index: 4;
}

.profile-friend-request::before {
  content: "";
  top: calc(100% + 4px);
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(21, 23, 36, 0.9);
  border-left: 6px solid transparent;
}

.profile-friend-request::after {
  content: attr(data-profile-action-tooltip);
  top: calc(100% + 10px);
  padding: 7px 9px;
  border-radius: 3px;
  background: rgba(21, 23, 36, 0.9);
  box-shadow: 0 8px 18px rgba(7, 19, 63, 0.18);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.profile-friend-request:hover,
.profile-friend-request:focus-visible {
  filter: saturate(1.08) brightness(1.02);
  transform: translateY(-1px);
}

.profile-friend-request:hover::before,
.profile-friend-request:hover::after,
.profile-friend-request:focus-visible::before,
.profile-friend-request:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.profile-friend-request:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.profile-friend-request:active {
  transform: translateY(0) scale(0.96);
}

.profile-friend-request.is-requested {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.96) 0 21%, transparent 22%),
    linear-gradient(180deg, rgba(99, 217, 202, 0.26), rgba(255, 125, 184, 0.2));
  box-shadow:
    inset 0 0 0 2px rgba(99, 217, 202, 0.34),
    0 3px 7px rgba(7, 19, 63, 0.1);
  cursor: default;
}

.profile-friend-request.is-requested:hover,
.profile-friend-request.is-requested:focus-visible {
  filter: none;
  transform: none;
}

.profile-friend-request img {
  width: 32px;
  height: 32px;
  transition:
    filter 150ms ease,
    opacity 150ms ease,
    transform 150ms ease;
}

.profile-friend-request.is-requested img {
  opacity: 0.82;
  filter:
    saturate(0.78)
    hue-rotate(84deg)
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78));
  transform: scale(0.84);
}

.profile-friend-request-status {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  background: #63D9CA;
  box-shadow: 0 2px 4px rgba(7, 19, 63, 0.16);
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.profile-friend-request-status::before {
  content: "";
  width: 7px;
  height: 4px;
  border-bottom: 2px solid #07133F;
  border-left: 2px solid #07133F;
  transform: translateY(-1px) rotate(-45deg);
}

.profile-friend-request.is-requested .profile-friend-request-status {
  opacity: 1;
  transform: scale(1);
}

.profile-bio {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 560px);
  margin-top: 24px;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  padding-left: 28px;
}

.profile-bio::before {
  content: "";
  position: absolute;
  top: 0.34rem;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--aqua), #8EEBE0);
  box-shadow:
    11px -5px 0 -4px var(--pink),
    17px 7px 0 -5px var(--yellow);
  transform: rotate(45deg);
}

.profile-bio-text {
  max-width: 100%;
  min-height: 0;
  margin: 0;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.06rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.38;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}

.profile-bio-text[data-profile-bio-align="left"] {
  text-align: left;
}

.profile-bio-text[data-profile-bio-align="center"] {
  text-align: center;
}

.profile-bio-text[data-profile-bio-align="right"] {
  text-align: right;
}

.profile-bio-text.is-empty {
  color: rgba(73, 101, 168, 0.72);
}

.profile-bio-text strong {
  color: inherit;
  font-weight: 900;
}

.profile-bio-text em {
  font-style: italic;
}

.profile-bio-text s {
  text-decoration-thickness: 0.09em;
}

.profile-bio-underline {
  text-decoration-line: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.16em;
}

.profile-bio-image {
  display: block;
  max-width: 100%;
  margin: 8px 0;
}

.profile-bio-image img {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  object-fit: contain;
  box-shadow: 0 10px 22px rgba(7, 19, 63, 0.12);
}

.profile-bio-text[data-profile-bio-align="left"] .profile-bio-image img {
  margin-right: auto;
}

.profile-bio-text[data-profile-bio-align="center"] .profile-bio-image img {
  margin-inline: auto;
}

.profile-bio-text[data-profile-bio-align="right"] .profile-bio-image img {
  margin-left: auto;
}

.profile-bio-form {
  display: grid;
  width: 100%;
  gap: 9px;
}

.profile-bio-form[hidden] {
  display: none;
}

.profile-bio-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
}

.profile-bio-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.profile-bio-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(217, 227, 255, 0.66)),
    rgba(255, 255, 255, 0.82);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 3px 0 rgba(7, 19, 63, 0.08);
  padding: 0;
}

.profile-bio-tool:hover,
.profile-bio-tool:focus-visible,
.profile-bio-tool.is-active {
  border-color: rgba(240, 92, 157, 0.38);
  color: var(--ink);
}

.profile-bio-tool.is-active {
  background:
    linear-gradient(180deg, rgba(255, 231, 101, 0.95), rgba(255, 255, 255, 0.82)),
    rgba(255, 255, 255, 0.9);
}

.profile-bio-tool:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.profile-bio-underline-label {
  text-decoration-line: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.12em;
}

.profile-bio-image-tool-icon {
  position: relative;
  width: 16px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.profile-bio-image-tool-icon::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.profile-bio-image-tool-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 6px;
  background: linear-gradient(135deg, transparent 47%, currentColor 48% 58%, transparent 59%);
}

.profile-bio-align-icon {
  display: grid;
  width: 17px;
  gap: 3px;
}

.profile-bio-align-icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.profile-bio-align-icon span:nth-child(1) {
  width: 17px;
}

.profile-bio-align-icon span:nth-child(2) {
  width: 12px;
}

.profile-bio-align-icon span:nth-child(3) {
  width: 15px;
}

.profile-bio-align-icon.is-left span {
  justify-self: start;
}

.profile-bio-align-icon.is-center span {
  justify-self: center;
}

.profile-bio-align-icon.is-right span {
  justify-self: end;
}

.profile-bio-input {
  width: 100%;
  min-height: 132px;
  max-height: 260px;
  resize: vertical;
  border: 0;
  border-bottom: 3px dotted rgba(240, 92, 157, 0.36);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.06rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.38;
  box-shadow: none;
  padding: 0 0 8px;
}

.profile-bio-input::placeholder {
  color: rgba(73, 101, 168, 0.62);
  font-style: normal;
  font-weight: 400;
}

.profile-bio-input:focus-visible {
  border-bottom-color: rgba(99, 217, 202, 0.9);
  outline: 0;
  box-shadow: 0 5px 0 rgba(99, 217, 202, 0.12);
}

.profile-bio-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-bio-counter {
  color: rgba(7, 19, 63, 0.54);
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-bio-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-bio-cancel,
.profile-bio-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 3px 0 rgba(7, 19, 63, 0.1);
  padding: 7px 13px;
}

.profile-bio-cancel {
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
}

.profile-bio-save {
  border-color: rgba(240, 92, 157, 0.46);
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.2);
}

.profile-bio-cancel:hover,
.profile-bio-cancel:focus-visible,
.profile-bio-save:hover,
.profile-bio-save:focus-visible {
  filter: saturate(1.06) brightness(1.02);
}

.profile-bio-cancel:focus-visible,
.profile-bio-save:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.profile-game-card > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  font-weight: 900;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 3px 0 rgba(7, 19, 63, 0.18);
  padding: 7px 13px;
}

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

.profile-content-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--profile-narrow-width)) minmax(0, 1fr);
  align-items: start;
  justify-content: start;
  gap: 18px clamp(26px, 4vw, 56px);
  min-width: 0;
}

.profile-left-stack,
.profile-right-stack {
  display: grid;
  align-content: start;
  gap: 22px;
  min-width: 0;
}

.profile-left-stack {
  grid-column: 1;
  width: min(100%, var(--profile-narrow-width));
}

.profile-right-stack {
  grid-column: 2;
  width: 100%;
}

.profile-history-section,
.profile-interests-section {
  width: 100%;
}

.profile-history-section {
  margin-bottom: 8px;
}

.profile-buzz-section {
  align-self: start;
  justify-self: start;
  width: min(100%, var(--profile-buzz-width));
}

.profile-friends-panel {
  display: grid;
  gap: 16px;
  align-self: start;
  width: 100%;
  min-width: 0;
}

.profile-friends-list-section {
  display: grid;
  gap: 10px;
  width: 100%;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  padding-top: 14px;
}

.profile-friends-list-section[hidden] {
  display: none;
}

@media (max-width: 1120px) {
  .profile-content-grid {
    grid-template-columns: minmax(0, var(--profile-narrow-width));
  }

  .profile-left-stack,
  .profile-right-stack {
    grid-column: 1;
    grid-row: auto;
    width: min(100%, var(--profile-narrow-width));
  }

  .profile-top-friends {
    grid-template-columns: none;
    justify-content: center;
  }

  .profile-friend-card {
    max-width: 148px;
    margin-inline: auto;
  }
}

.profile-section-heading {
  margin-bottom: 10px;
}

.profile-history-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 9px;
}

.profile-history-heading::after {
  content: none;
}

.profile-section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.48rem;
  font-weight: 900;
  line-height: 1;
  text-transform: none;
}

.profile-history-heading h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.profile-history-heading h2::before {
  content: none;
}

.profile-history-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.profile-history-capacity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.profile-history-capacity-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(238, 244, 255, 0.6)),
    rgba(255, 255, 255, 0.62);
  color: #07133f;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  line-height: 1;
  padding: 5px 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 1px 3px rgba(7, 19, 63, 0.06);
}

.profile-history-capacity-item.is-slow {
  border-color: color-mix(in srgb, #7de8d9 42%, rgba(7, 19, 63, 0.18));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
    color-mix(in srgb, #7de8d9 32%, #ffffff);
}

.profile-history-capacity-item.is-fast {
  border-color: color-mix(in srgb, #f771a6 38%, rgba(7, 19, 63, 0.2));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
    color-mix(in srgb, #f771a6 26%, #ffffff);
}

.profile-history-capacity-label {
  overflow: hidden;
  color: rgba(7, 19, 63, 0.7);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-history-ticket-strip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.profile-history-ticket {
  display: block;
  width: 13px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(7, 19, 63, 0.16));
  flex: 0 0 auto;
  transform: rotate(-5deg) translateY(1px);
  transform-origin: 50% 62%;
}

.profile-history-ticket.is-fast-ticket {
  width: 16px;
}

.profile-history-ticket-strip .profile-history-ticket:nth-child(3n+2) {
  transform: rotate(5deg) translateY(-1px);
}

.profile-history-ticket-strip .profile-history-ticket:nth-child(3n) {
  transform: rotate(-2deg);
}

.profile-history-ticket.is-used {
  opacity: 0.3;
  filter:
    grayscale(1)
    saturate(0)
    brightness(0.52)
    drop-shadow(0 1px 1px rgba(7, 19, 63, 0.08));
}

.profile-buzz-heading,
.profile-friends-heading,
.profile-all-friends-heading,
.profile-bulletin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-friends-heading,
.profile-all-friends-heading,
.profile-bulletin-heading {
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 9px;
}

.profile-friends-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.profile-buzz-view-all,
.profile-top-friends-edit,
.profile-friends-see-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(217, 227, 255, 0.66)),
    rgba(255, 255, 255, 0.76);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 2px 5px rgba(7, 19, 63, 0.08);
  padding: 5px 11px;
}

.profile-buzz-view-all:hover,
.profile-buzz-view-all:focus-visible,
.profile-top-friends-edit:hover,
.profile-top-friends-edit:focus-visible,
.profile-friends-see-all:hover,
.profile-friends-see-all:focus-visible {
  background: rgba(99, 217, 202, 0.18);
  color: var(--ink);
}

.profile-buzz-view-all:focus-visible,
.profile-top-friends-edit:focus-visible,
.profile-friends-see-all:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-top-friends-edit[aria-expanded="true"],
.profile-friends-see-all[aria-expanded="true"] {
  background:
    linear-gradient(180deg, rgba(255, 125, 184, 0.18), rgba(99, 217, 202, 0.15)),
    rgba(255, 255, 255, 0.76);
  color: var(--ink);
}

.profile-top-friends,
.profile-all-friends-list {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-top-friends {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 12px;
  align-items: start;
  justify-content: center;
}

.profile-top-friends li,
.profile-all-friends-list li {
  min-width: 0;
}

.profile-top-friends li {
  flex: 0 0 104px;
}

.profile-top-friends .profile-friends-empty {
  flex-basis: 100%;
}

.profile-friends-empty {
  grid-column: 1 / -1;
  border: 1px dashed rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  list-style: none;
  text-align: center;
  padding: 14px;
}

.profile-top-friends-picker {
  --profile-friends-surface: rgba(255, 255, 255, 0.54);
  --profile-friends-surface-strong: rgba(255, 255, 255, 0.78);
  --profile-friends-border: rgba(7, 19, 63, 0.12);
  display: grid;
  gap: 10px;
  border: 1px solid var(--profile-friends-border);
  border-radius: 8px;
  background: var(--profile-friends-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 8px 18px rgba(7, 19, 63, 0.08);
  color: var(--ink);
  padding: 12px;
}

.profile-top-friends-picker[hidden] {
  display: none;
}

.profile-top-friends-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 8px;
}

.profile-top-friends-picker-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.05;
}

.profile-top-friends-picker-head span,
.profile-top-friends-status {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.profile-top-friends-picker-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 999px;
  background: rgba(255, 216, 61, 0.22);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  text-shadow: none;
  box-shadow: none;
  padding: 4px 9px;
}

.profile-top-friends-picker .profile-friends-empty,
.profile-top-friends-status {
  margin: 0;
}

.profile-top-friends-picker-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.profile-top-friends-picker.is-reordering .profile-top-friends-picker-tools {
  grid-template-columns: auto;
  justify-content: end;
}

.profile-top-friends-search {
  min-width: 0;
}

.profile-top-friends-search[hidden] {
  display: none;
}

.profile-top-friends-search input {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--profile-friends-border);
  border-radius: 8px;
  background: var(--profile-friends-surface-strong);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  padding: 7px 10px;
}

.profile-top-friends-search input::placeholder {
  color: rgba(7, 19, 63, 0.48);
}

.profile-top-friends-search input:focus {
  border-color: rgba(99, 217, 202, 0.95);
  box-shadow:
    0 0 0 3px rgba(99, 217, 202, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.profile-top-friends-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-top-friends-picker.is-reordering .profile-top-friends-picker-list {
  grid-template-columns: minmax(0, 1fr);
}

.profile-top-friend-choice {
  display: grid;
  grid-template-columns: auto 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--profile-friends-border);
  border-radius: 8px;
  background: var(--profile-friends-surface-strong);
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.08;
  box-shadow: none;
  padding: 6px 8px;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.profile-top-friend-choice:has(input:checked) {
  border-color: rgba(240, 92, 157, 0.34);
  background:
    linear-gradient(90deg, rgba(240, 92, 157, 0.14), rgba(255, 216, 61, 0.1)),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 3px 0 0 rgba(240, 92, 157, 0.78),
    0 2px 8px rgba(7, 19, 63, 0.07);
}

.profile-top-friend-choice:has(input:disabled:not(:checked)) {
  opacity: 0.52;
  cursor: not-allowed;
}

.profile-top-friend-choice input {
  position: relative;
  appearance: none;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(7, 19, 63, 0.22);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.86);
  cursor: inherit;
}

.profile-top-friend-choice input:checked {
  border-color: var(--pink);
  background: var(--pink);
}

.profile-top-friend-choice input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.profile-top-friend-choice input:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-top-friend-choice img {
  display: block;
  width: 30px;
  height: auto;
  aspect-ratio: 5 / 7;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 6px;
  background: rgba(217, 227, 255, 0.5);
  object-fit: cover;
  object-position: center 18%;
}

.profile-top-friend-choice span {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.profile-top-friend-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 21px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 999px;
  background: rgba(255, 216, 61, 0.36);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
  padding: 3px 7px;
}

.profile-top-friend-rank[hidden] {
  display: none;
}

.profile-top-friend-reorder-card {
  display: grid;
  grid-template-columns: auto 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--profile-friends-border);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(99, 217, 202, 0.12), rgba(255, 255, 255, 0) 58%),
    var(--profile-friends-surface-strong);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.08;
  box-shadow: none;
  padding: 6px 8px;
}

.profile-top-friend-reorder-card img {
  display: block;
  width: 30px;
  height: auto;
  aspect-ratio: 5 / 7;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 6px;
  background: rgba(217, 227, 255, 0.5);
  object-fit: cover;
  object-position: center 18%;
}

.profile-top-friend-reorder-card span:not(.profile-top-friend-drag-handle) {
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.profile-top-friend-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 999px;
  background: rgba(99, 217, 202, 0.22);
  color: var(--ink);
  cursor: grab;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 5px 8px;
}

[data-profile-top-friends-reorder-item] {
  cursor: grab;
}

[data-profile-top-friends-reorder-item].is-dragging {
  opacity: 0.48;
}

[data-profile-top-friends-reorder-item].is-drop-target .profile-top-friend-reorder-card {
  border-color: rgba(99, 217, 202, 0.95);
  box-shadow:
    0 0 0 3px rgba(99, 217, 202, 0.18),
    0 4px 10px rgba(7, 19, 63, 0.08);
}

.profile-top-friends-picker-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  padding-top: 10px;
}

.profile-top-friends-save,
.profile-top-friends-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 2px 6px rgba(7, 19, 63, 0.08);
  padding: 7px 12px;
}

.profile-top-friends-save {
  border: 1px solid rgba(240, 92, 157, 0.24);
  background: var(--pink);
  color: #ffffff;
  text-shadow: none;
}

.profile-top-friends-secondary {
  border: 1px solid var(--profile-friends-border);
  background: rgba(255, 255, 255, 0.64);
  color: var(--ink);
}

.profile-top-friends-secondary[aria-pressed="true"] {
  border-color: rgba(99, 217, 202, 0.34);
  background: rgba(99, 217, 202, 0.24);
  color: var(--ink);
}

.profile-top-friends-save:hover,
.profile-top-friends-save:focus-visible,
.profile-top-friends-secondary:hover,
.profile-top-friends-secondary:focus-visible {
  transform: translateY(-1px);
}

.profile-top-friends-save:hover,
.profile-top-friends-save:focus-visible {
  color: #ffffff;
}

.profile-top-friends-secondary:hover,
.profile-top-friends-secondary:focus-visible {
  color: var(--ink);
}

.profile-top-friends-save:focus-visible,
.profile-top-friends-secondary:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-friend-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-width: 0;
  width: 100%;
  border-radius: 9px;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.06;
  text-align: center;
  text-decoration: none;
  padding: 2px 2px 6px;
  transition:
    background 170ms ease,
    color 170ms ease,
    transform 170ms ease;
}

.profile-friend-card img {
  display: block;
  width: 86px;
  height: auto;
  aspect-ratio: 5 / 7;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(217, 227, 255, 0.56), rgba(255, 255, 255, 0.62)),
    rgba(217, 227, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 3px 7px rgba(7, 19, 63, 0.12);
  object-fit: cover;
  object-position: center 18%;
  transition:
    box-shadow 170ms ease,
    transform 170ms ease;
}

.profile-friend-card span,
.profile-all-friend-card span {
  min-width: 0;
  max-width: 100%;
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.profile-friend-card:hover,
.profile-friend-card:focus-visible {
  background: rgba(255, 255, 255, 0.36);
  color: var(--muted);
  text-decoration: none;
  transform: translateY(-2px);
}

.profile-friend-card:hover img,
.profile-friend-card:focus-visible img {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 6px 10px rgba(7, 19, 63, 0.16);
  transform: scale(1.035) rotate(-1.5deg);
}

.profile-friend-card:focus-visible,
.profile-all-friend-card:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.profile-friend-card:active,
.profile-all-friend-card:active {
  transform: translateY(0) scale(0.98);
}

.profile-all-friends-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  justify-content: center;
}

.profile-all-friends-list li {
  flex: 0 0 70px;
}

.profile-all-friends-list .profile-friends-empty {
  flex-basis: 100%;
}

.profile-all-friend-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  min-height: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.04;
  text-align: center;
  text-decoration: none;
  padding: 2px 1px 4px;
  transition:
    background 170ms ease,
    color 170ms ease,
    transform 170ms ease;
}

.profile-all-friend-card img {
  display: block;
  width: 44px;
  height: auto;
  aspect-ratio: 5 / 7;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  background: rgba(217, 227, 255, 0.42);
  object-fit: cover;
  object-position: center 18%;
}

.profile-all-friend-card:hover,
.profile-all-friend-card:focus-visible {
  background: rgba(255, 255, 255, 0.34);
  color: var(--muted);
  text-decoration: none;
  transform: translateY(-1px);
}

@media (max-width: 620px) {
  .profile-all-friends-list li {
    flex-basis: 62px;
  }
}

@media (max-width: 1120px) {
  .profile-top-friends {
    grid-template-columns: none;
    justify-content: center;
  }

  .profile-friend-card {
    max-width: 148px;
    margin-inline: auto;
  }
}

@media (max-width: 680px) {
  .profile-content-grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
  }

  .profile-left-stack,
  .profile-right-stack {
    width: min(100%, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
  }

  .profile-friends-panel {
    width: min(100%, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
    box-sizing: border-box;
  }

  .profile-top-friends-picker {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .profile-friends-heading,
  .profile-all-friends-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-friends-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }

  .profile-top-friends-edit,
  .profile-friends-see-all {
    width: 100%;
    min-width: 0;
  }

  .profile-top-friends-picker-tools,
  .profile-top-friends-picker.is-reordering .profile-top-friends-picker-tools,
  .profile-top-friends-picker-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-top-friends-picker-actions {
    justify-content: stretch;
  }

  .profile-top-friends-save,
  .profile-top-friends-secondary {
    flex: 1 1 92px;
  }
}

.profile-bulletin-section {
  width: 100%;
  min-width: 0;
}

.profile-bulletin-form {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.profile-bulletin-form[hidden],
.profile-bulletin-closed[hidden] {
  display: none;
}

.profile-bulletin-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.profile-bulletin-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: 1px solid rgba(7, 19, 63, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(217, 227, 255, 0.62)),
    rgba(255, 255, 255, 0.82);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 2px 4px rgba(7, 19, 63, 0.06);
  padding: 0;
}

.profile-bulletin-tool.is-emoji {
  border-color: rgba(73, 101, 168, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(231, 238, 255, 0.82)),
    rgba(255, 255, 255, 0.9);
}

.profile-bulletin-tool.is-image {
  border-color: rgba(99, 217, 202, 0.28);
}

.profile-bulletin-tool:hover,
.profile-bulletin-tool:focus-visible {
  border-color: rgba(240, 92, 157, 0.36);
  color: var(--ink);
}

.profile-bulletin-tool:focus-visible,
.profile-bulletin-submit:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-bulletin-tool.is-emoji img,
.profile-bulletin-tool.is-image img {
  display: block;
  width: 20px;
  height: 20px;
  filter: saturate(1.35) contrast(1.12) drop-shadow(0 1px 1px rgba(7, 19, 63, 0.08));
  object-fit: contain;
  opacity: 1;
}

.profile-bulletin-form.is-drag-over .profile-bulletin-editor {
  border-color: rgba(240, 92, 157, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 239, 247, 0.86)),
    rgba(255, 255, 255, 0.9);
}

.profile-bulletin-underline-label,
.profile-bulletin-underline {
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.14em;
}

.profile-bulletin-emoji-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 6px;
  max-height: 150px;
  overflow: auto;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 248, 255, 0.68)),
    rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 6px 13px rgba(7, 19, 63, 0.08);
  padding: 8px;
}

.profile-bulletin-emoji-panel[hidden] {
  display: none;
}

.profile-bulletin-emoji-option {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 3px;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.profile-bulletin-emoji-option img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.profile-bulletin-emoji-option:hover,
.profile-bulletin-emoji-option:focus-visible {
  border-color: rgba(99, 217, 202, 0.36);
  background: rgba(99, 217, 202, 0.12);
  transform: translateY(-1px);
}

.profile-bulletin-emoji-option:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-bulletin-input[hidden] {
  display: none;
}

.profile-bulletin-editor {
  width: 100%;
  min-height: 96px;
  overflow: auto;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.28;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 2px 5px rgba(7, 19, 63, 0.04);
  overflow-wrap: anywhere;
  padding: 9px 10px;
  white-space: pre-wrap;
}

.profile-bulletin-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(73, 101, 168, 0.62);
  pointer-events: none;
}

.profile-bulletin-editor:focus-visible {
  border-color: rgba(99, 217, 202, 0.72);
  outline: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 0 0 3px rgba(99, 217, 202, 0.13);
}

.profile-bulletin-preview {
  overflow: hidden;
  width: min(100%, 260px);
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 4px 9px rgba(7, 19, 63, 0.06);
}

.profile-bulletin-preview[hidden] {
  display: none;
}

.profile-bulletin-preview img,
.profile-bulletin-image img {
  display: block;
  width: 100%;
  max-height: 190px;
  object-fit: contain;
}

.profile-bulletin-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-bulletin-counter {
  color: rgba(7, 19, 63, 0.54);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
}

.profile-bulletin-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid rgba(240, 92, 157, 0.42);
  border-radius: 999px;
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 2px 4px rgba(7, 19, 63, 0.08);
  padding: 6px 12px;
}

.profile-bulletin-submit:disabled {
  border-color: rgba(73, 101, 168, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(217, 227, 255, 0.56)),
    rgba(255, 255, 255, 0.72);
  color: rgba(73, 101, 168, 0.48);
  cursor: not-allowed;
  text-shadow: none;
}

.profile-bulletin-closed {
  margin: 0;
  border: 1px solid rgba(73, 101, 168, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.22;
  padding: 10px 11px;
}

.profile-bulletin-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.profile-bulletin-pagination {
  justify-self: end;
  margin: 10px 0 0;
}

.profile-bulletin-pagination[hidden] {
  display: none;
}

.profile-bulletin-comment {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 255, 0.58)),
    rgba(255, 255, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 2px 6px rgba(7, 19, 63, 0.05);
  padding: 8px 10px;
}

.profile-bulletin-comment.has-bulletin-comment-menu {
  padding-right: 38px;
}

.profile-bulletin-comment.is-bulletin-menu-open {
  z-index: 20;
}

.profile-bulletin-comment:last-child {
  border-bottom: 1px solid rgba(73, 101, 168, 0.12);
}

.profile-bulletin-comment-avatar-link {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

.profile-bulletin-comment-avatar-link:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-bulletin-comment-avatar {
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  background: rgba(217, 227, 255, 0.42);
  box-shadow: 0 2px 5px rgba(7, 19, 63, 0.1);
  object-fit: cover;
  object-position: center 8%;
}

.profile-bulletin-comment-content {
  min-width: 0;
}

.profile-bulletin-comment-menu {
  position: absolute;
  top: 5px;
  right: 7px;
  z-index: 5;
}

.profile-bulletin-comment-menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 23px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(73, 101, 168, 0.74);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  opacity: 0.36;
  padding: 0 0 3px;
  transition:
    background 150ms ease,
    color 150ms ease,
    opacity 150ms ease;
}

.profile-bulletin-comment:hover .profile-bulletin-comment-menu-toggle,
.profile-bulletin-comment:focus-within .profile-bulletin-comment-menu-toggle,
.profile-bulletin-comment-menu.is-open .profile-bulletin-comment-menu-toggle {
  opacity: 0.92;
}

.profile-bulletin-comment-menu-toggle:hover,
.profile-bulletin-comment-menu-toggle:focus-visible,
.profile-bulletin-comment-menu.is-open .profile-bulletin-comment-menu-toggle {
  background: rgba(99, 217, 202, 0.16);
  color: var(--ink);
}

.profile-bulletin-comment-menu-toggle:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-bulletin-comment-menu-popover {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  min-width: 92px;
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.92)),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 7px 15px rgba(7, 19, 63, 0.13);
  padding: 4px;
}

.profile-bulletin-comment-menu-popover[hidden] {
  display: none;
}

.profile-bulletin-comment-menu-item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 7px 8px;
  text-align: left;
}

.profile-bulletin-comment-menu-item:hover,
.profile-bulletin-comment-menu-item:focus-visible {
  background: rgba(99, 217, 202, 0.16);
}

.profile-bulletin-comment-menu-item.is-danger {
  color: #b72562;
}

.profile-bulletin-comment-menu-item.is-danger:hover,
.profile-bulletin-comment-menu-item.is-danger:focus-visible {
  background: rgba(237, 100, 155, 0.12);
}

.profile-bulletin-comment-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 6px;
  row-gap: 2px;
  margin: 0 0 3px;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  line-height: 1.05;
}

.profile-bulletin-comment-meta strong {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: normal;
}

.profile-bulletin-comment-author-link {
  color: inherit;
  text-decoration: none;
}

.profile-bulletin-comment-author-link:hover,
.profile-bulletin-comment-author-link:focus-visible {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-bulletin-comment-author-link:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-bulletin-comment-meta time {
  flex: 0 0 auto;
  color: rgba(73, 101, 168, 0.72);
  font-size: 0.78rem;
  font-weight: 400;
  white-space: nowrap;
}

.profile-bulletin-comment-body {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.profile-bulletin-comment-body strong {
  font-weight: 700;
}

.profile-bulletin-comment-body em {
  font-style: italic;
}

.profile-bulletin-custom-emoji {
  display: inline-block;
  width: 1.45em;
  height: 1.45em;
  margin: 0 0.06em;
  object-fit: contain;
  vertical-align: -0.34em;
}

.profile-bulletin-editor .profile-bulletin-custom-emoji {
  width: 1.68em;
  height: 1.68em;
  vertical-align: -0.42em;
}

.profile-bulletin-comment-body:has(.profile-bulletin-custom-emoji:only-child) {
  line-height: 1;
}

.profile-bulletin-comment-body:has(.profile-bulletin-custom-emoji:only-child) .profile-bulletin-custom-emoji {
  width: 1.86em;
  height: 1.86em;
  vertical-align: -0.42em;
}

.profile-bulletin-image {
  display: block;
  overflow: hidden;
  width: min(100%, 260px);
  margin: 7px 0;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 4px 9px rgba(7, 19, 63, 0.06);
}

.settings-shell {
  display: grid;
  align-items: start;
  width: min(100% - 24px, 980px);
  gap: 18px;
}

.settings-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.settings-heading {
  border-bottom: 2px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 12px;
}

.settings-heading h1,
.settings-card h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  line-height: 1;
  letter-spacing: 0;
}

.settings-heading h1 {
  font-size: 2.1rem;
  font-weight: 900;
}

.settings-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1;
  padding: 8px 14px;
  box-shadow: 0 3px 7px rgba(7, 19, 63, 0.06);
}

.settings-tab:hover,
.settings-tab:focus-visible {
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  text-decoration: none;
}

.settings-tab.is-active {
  background: linear-gradient(180deg, #75E7D8, var(--aqua));
  color: #07133F;
}

.settings-tab-panel {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settings-tab-panel[hidden] {
  display: none;
}

.settings-form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settings-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(217, 227, 255, 0.38)),
    rgba(255, 255, 255, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 5px 11px rgba(7, 19, 63, 0.05);
  padding: 16px;
}

.settings-card h2 {
  font-size: 1.42rem;
  font-weight: 700;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  min-width: 0;
}

.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.settings-field-grid.is-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-field,
.settings-fieldset {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.settings-field > span,
.settings-fieldset legend {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.settings-fieldset {
  border: 0;
  padding: 0;
}

.settings-input,
.settings-textarea,
.settings-select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 10px 11px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 2px 5px rgba(7, 19, 63, 0.04);
}

.settings-color-field {
  max-width: 220px;
}

.settings-color-input {
  min-height: 44px;
  padding: 5px;
}

.settings-buzz-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
  padding: 12px;
}

.settings-buzz-preview[hidden] {
  display: none;
}

.settings-buzz-preview span {
  min-width: 0;
  color: var(--buzz-username-color, var(--ink));
  font-family: var(--buzz-username-font, "Barlow Semi Condensed", Arial, Helvetica, sans-serif);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.settings-buzz-preview small {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.settings-textarea {
  resize: vertical;
}

.settings-input::placeholder,
.settings-textarea::placeholder {
  color: rgba(73, 101, 168, 0.56);
}

.settings-input:focus-visible,
.settings-textarea:focus-visible,
.settings-select:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.settings-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}

.settings-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--pink);
}

.settings-check span {
  min-width: 0;
  line-height: 1.35;
}

.settings-muted {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
}

.settings-subheading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-subheading h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.05;
}

.settings-subheading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
}

.settings-upgrade,
.settings-upgrade-row {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.settings-upgrade[hidden],
.settings-upgrade-row[hidden] {
  display: none;
}

.settings-upload {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.settings-upload-drop,
.settings-custom-emoji-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px dashed rgba(73, 101, 168, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  padding: 9px 11px;
}

.settings-upload-drop input,
.settings-custom-emoji-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-upload-preview {
  min-height: 74px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(218, 227, 252, 0.15), rgba(7, 19, 63, 0.12)),
    var(--settings-upload-preview-image) center / cover no-repeat,
    rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.settings-custom-emoji-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.settings-custom-emoji-row {
  display: grid;
  grid-template-columns: 36px minmax(84px, auto) minmax(0, 1fr) auto;
  align-items: end;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
  padding: 9px;
}

.settings-custom-emoji-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(73, 101, 168, 0.18);
  border-radius: 7px;
  background:
    var(--settings-custom-emoji-image) center / 27px 27px no-repeat,
    rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-weight: 900;
}

.settings-custom-emoji-token {
  gap: 4px;
}

.settings-account-summary,
.settings-locked-username {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.settings-account-summary span {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
}

.settings-account-summary strong,
.settings-locked-username {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
}

.settings-locked-username {
  border: 1px solid rgba(73, 101, 168, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
  padding: 10px 11px;
}

.settings-locked-username span {
  color: var(--ink);
  line-height: 1.2;
}

.settings-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.settings-counter {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
}

.settings-segmented {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 430px);
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(217, 227, 255, 0.42)),
    rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 4px 9px rgba(7, 19, 63, 0.05);
  padding: 5px;
}

.settings-segmented.is-compact {
  width: min(100%, 330px);
}

.settings-segmented label {
  min-width: 0;
}

.settings-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.settings-segmented span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 7px 9px;
  transition:
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.settings-segmented input:checked + span {
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 2px 4px rgba(7, 19, 63, 0.08);
}

.settings-segmented input:focus-visible + span {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.settings-status {
  min-height: 1.1em;
  margin: 0;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
}

.settings-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.settings-save,
.settings-reset {
  min-height: 38px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 9px;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1;
  padding: 0 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 7px rgba(7, 19, 63, 0.07);
}

.settings-save {
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.14);
}

.settings-reset {
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
}

.settings-save.is-secondary {
  background: linear-gradient(180deg, #75E7D8, var(--aqua));
  color: #07133F;
  text-shadow: none;
}

.settings-reset.is-inline {
  min-height: 34px;
  padding: 0 11px;
  font-size: 0.9rem;
}

.settings-save:disabled,
.settings-reset:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.settings-save:hover,
.settings-save:focus-visible {
  background: linear-gradient(180deg, #ff91c5, #f05c9d);
}

.settings-reset:hover,
.settings-reset:focus-visible {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}

.settings-save:focus-visible,
.settings-reset:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.admin-shell {
  display: grid;
  align-items: start;
  width: min(100% - 24px, 1180px);
  gap: 16px;
}

.admin-heading,
.admin-access-panel,
.admin-panel {
  min-width: 0;
}

.admin-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.08);
  padding: 0 2px 14px;
}

.admin-heading h1,
.admin-access-panel h1,
.admin-panel h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  line-height: 1;
  letter-spacing: 0;
}

.admin-heading h1,
.admin-access-panel h1 {
  font-size: 2.15rem;
  font-weight: 900;
}

.admin-heading p,
.admin-panel-heading p,
.admin-access-panel p,
.admin-empty-state {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.28;
}

.admin-owner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background: linear-gradient(180deg, #FFD83D, #FFB84D);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 3px 7px rgba(7, 19, 63, 0.08);
}

.admin-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(217, 227, 255, 0.44)),
    rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 9px rgba(7, 19, 63, 0.05);
  padding: 6px;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  flex: 0 0 auto;
  border-radius: 8px;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 14px;
}

.admin-tab:hover,
.admin-tab:focus-visible {
  background: rgba(99, 217, 202, 0.16);
  color: var(--ink);
  text-decoration: none;
}

.admin-tab.is-active {
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 2px 4px rgba(7, 19, 63, 0.08);
}

.admin-tab.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-tab.is-disabled:hover {
  background: transparent;
  color: var(--muted);
}

.admin-panel,
.admin-access-panel {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(217, 227, 255, 0.38)),
    rgba(255, 255, 255, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 5px 11px rgba(7, 19, 63, 0.05);
  padding: 16px;
}

.admin-access-panel {
  justify-items: start;
}

.login-form {
  display: grid;
  gap: 12px;
  width: min(100%, 380px);
  min-width: 0;
}

.login-form .admin-primary-button {
  width: 100%;
}

.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
}

.auth-remember input {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}

.auth-shell {
  width: min(100% - 24px, 680px);
}

.auth-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}

.auth-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(217, 227, 255, 0.4)),
    rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 16px rgba(7, 19, 63, 0.07);
  padding: 20px;
}

.auth-card-head {
  display: grid;
  gap: 7px;
  max-width: 440px;
}

.auth-kicker {
  color: var(--pink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.auth-card-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.auth-card-head p,
.auth-switch {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.32;
}

.auth-form {
  width: min(100%, 430px);
}

.auth-switch {
  width: min(100%, 430px);
  border-top: 1px solid rgba(73, 101, 168, 0.12);
  padding-top: 13px;
}

.auth-switch a {
  color: var(--pink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-decoration: none;
}

.auth-switch a:hover,
.auth-switch a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.auth-switch a:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.banned-login-page {
  min-height: 100vh;
}

.banned-auth-shell {
  width: min(100% - 24px, 860px);
  margin-top: 28px;
  margin-bottom: 36px;
}

.banned-report-card {
  gap: 18px;
}

.banned-report-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid rgba(73, 101, 168, 0.12);
  padding-top: 16px;
}

.banned-report-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1.72rem;
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.banned-appeal-form {
  margin-top: 0;
  box-shadow: none;
}

@media (max-width: 760px) {
  .auth-shell {
    width: min(100% - 16px, 680px);
  }

  .auth-card {
    padding: 16px;
  }

  .auth-card-head h1 {
    font-size: 2rem;
  }

  .banned-auth-shell {
    width: min(100% - 16px, 860px);
    margin-top: 16px;
  }

  .banned-report-head {
    align-items: stretch;
    flex-direction: column;
  }
}

.admin-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.admin-panel h2 {
  font-size: 1.46rem;
  font-weight: 800;
}

.admin-user-filter,
.admin-layer-filter {
  display: grid;
  grid-template-columns: minmax(160px, 220px) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.admin-user-filter label,
.admin-layer-filter label,
.admin-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-user-filter span,
.admin-layer-filter span,
.admin-field > span {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.admin-design-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.admin-design-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.admin-design-form .admin-upload-field,
.admin-design-form .admin-add-to-users-field,
.admin-design-form .admin-field:has(.admin-textarea),
.admin-design-form .admin-selected-files,
.admin-design-form .admin-primary-button {
  grid-column: 1 / -1;
}

.admin-input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(73, 101, 168, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.25;
  padding: 10px 11px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 2px 5px rgba(7, 19, 63, 0.04);
}

.admin-textarea {
  min-height: 96px;
  resize: vertical;
}

.admin-input::placeholder {
  color: rgba(73, 101, 168, 0.56);
}

.admin-color-input {
  min-height: 40px;
  padding: 4px;
}

.admin-add-to-users-field[hidden] {
  display: none;
}

.admin-user-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-user-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
}

.admin-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 999px;
  background: rgba(99, 217, 202, 0.16);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  padding: 4px 6px 4px 10px;
}

.admin-user-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.admin-user-chip button:hover,
.admin-user-chip button:focus-visible {
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
}

.admin-user-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.admin-user-match-panel,
.admin-user-inventory-head {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.58);
  padding: 12px;
}

.admin-user-match-panel > strong,
.admin-user-inventory-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.admin-user-match-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.admin-user-inventory-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.admin-user-ban-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.admin-user-ban-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.58);
  padding: 12px;
}

.admin-user-ban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.admin-user-ban-head strong {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.admin-ban-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1;
  padding: 0 9px;
  text-transform: uppercase;
}

.admin-ban-pill.is-active {
  border-color: rgba(255, 104, 64, 0.28);
  background: rgba(255, 104, 64, 0.14);
  color: #A13018;
}

.admin-user-ban-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
}

.admin-user-ban-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 720px) {
  .admin-user-ban-grid,
  .admin-user-ban-form {
    grid-template-columns: 1fr;
  }
}

.admin-upload-field {
  position: relative;
}

.admin-file-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}

.admin-upload-drop {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 128px;
  border: 2px dashed rgba(73, 101, 168, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(99, 217, 202, 0.16), rgba(255, 216, 61, 0.14)),
    rgba(255, 255, 255, 0.66);
  color: var(--ink);
  text-align: center;
  padding: 18px;
}

.admin-upload-drop strong {
  max-width: 100%;
  overflow: hidden;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-upload-drop small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.admin-upload-field:focus-within .admin-upload-drop,
.admin-input:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.admin-upload-field.is-dragging .admin-upload-drop {
  border-color: rgba(255, 125, 184, 0.62);
  background:
    linear-gradient(135deg, rgba(99, 217, 202, 0.22), rgba(255, 125, 184, 0.2)),
    rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 0 0 2px rgba(255, 125, 184, 0.18),
    0 5px 11px rgba(7, 19, 63, 0.08);
}

.admin-primary-button,
.admin-secondary-button,
.admin-danger-button,
.admin-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 9px;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  padding: 0 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 7px rgba(7, 19, 63, 0.07);
}

.admin-primary-button,
.admin-link-button {
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.14);
}

.admin-secondary-button {
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
}

.admin-danger-button {
  min-height: 32px;
  background: rgba(255, 104, 64, 0.12);
  color: #A13018;
  font-size: 0.86rem;
}

.admin-primary-button:hover,
.admin-primary-button:focus-visible,
.admin-link-button:hover,
.admin-link-button:focus-visible {
  background: linear-gradient(180deg, #ff91c5, #f05c9d);
  text-decoration: none;
}

.admin-secondary-button:hover,
.admin-secondary-button:focus-visible {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.admin-danger-button:hover,
.admin-danger-button:focus-visible {
  background: rgba(255, 104, 64, 0.2);
}

.admin-primary-button:focus-visible,
.admin-secondary-button:focus-visible,
.admin-danger-button:focus-visible,
.admin-link-button:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.admin-design-preview {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.admin-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.admin-preview-toolbar > span {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.admin-avatar-preview-toggle {
  display: inline-grid;
  grid-template-columns: auto minmax(0, auto);
  align-items: center;
  gap: 7px;
  min-height: 32px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 11px;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 3px 7px rgba(7, 19, 63, 0.04);
}

.admin-avatar-preview-toggle input {
  appearance: none;
  position: relative;
  width: 28px;
  height: 16px;
  border: 1px solid rgba(73, 101, 168, 0.24);
  border-radius: 999px;
  background: rgba(217, 227, 255, 0.72);
  cursor: pointer;
}

.admin-avatar-preview-toggle input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(7, 19, 63, 0.18);
  transition: transform 0.16s ease;
}

.admin-avatar-preview-toggle input:checked {
  border-color: rgba(99, 217, 202, 0.72);
  background: linear-gradient(90deg, var(--aqua), var(--pink));
}

.admin-avatar-preview-toggle input:checked::after {
  transform: translateX(12px);
}

.admin-avatar-preview-toggle:has(input:focus-visible) {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.admin-avatar-skin-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  padding: 3px 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 3px 7px rgba(7, 19, 63, 0.04);
}

.admin-avatar-skin-control button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.admin-avatar-skin-control button:hover,
.admin-avatar-skin-control button:focus-visible,
.admin-avatar-skin-control button.is-active {
  border-color: rgba(255, 91, 169, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 91, 169, 0.14);
}

.admin-avatar-skin-control button:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.admin-avatar-skin-control button:active {
  transform: translateY(1px);
}

.admin-avatar-skin-control button span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--admin-preview-skin-swatch, #e5ad78);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.46),
    inset 0 -1px 2px rgba(7, 19, 63, 0.12);
}

.admin-design-preview-frame {
  display: grid;
  position: relative;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(45deg, rgba(73, 101, 168, 0.055) 25%, transparent 25% 75%, rgba(73, 101, 168, 0.055) 75%) 0 0 / 10px 10px,
    linear-gradient(45deg, transparent 25%, rgba(73, 101, 168, 0.032) 25% 75%, transparent 75%) 5px 5px / 10px 10px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 248, 253, 0.68)),
    rgba(238, 243, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 5px 11px rgba(7, 19, 63, 0.05);
}

.admin-design-preview-frame img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.admin-design-preview-frame > [data-admin-design-preview-empty] {
  color: rgba(73, 101, 168, 0.64);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.admin-design-preview-frame.is-avatar-preview > [data-admin-design-preview] {
  opacity: 0;
  visibility: hidden;
}

.admin-design-preview-frame.is-avatar-preview > [data-admin-design-preview-empty],
.admin-design-preview-frame.is-avatar-preview > .admin-crop-box {
  display: none;
}

.admin-avatar-upload-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.admin-avatar-upload-preview[hidden] {
  display: none;
}

.admin-avatar-upload-preview-stage {
  position: relative;
  display: block;
  height: min(calc(100% - 24px), 430px);
  max-width: calc(100% - 24px);
  aspect-ratio: 200 / 270;
}

.admin-avatar-upload-preview-layer {
  inset: 0;
  width: 100%;
  height: 100%;
}

.admin-avatar-upload-preview-layer.is-upload-layer {
  object-fit: cover;
}

.admin-crop-aspect-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.admin-crop-aspect {
  appearance: none;
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 8px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 3px 7px rgba(7, 19, 63, 0.04);
}

.admin-crop-aspect:hover,
.admin-crop-aspect:focus-visible {
  border-color: rgba(255, 125, 184, 0.42);
  background: rgba(255, 240, 248, 0.9);
}

.admin-crop-aspect.is-active {
  border-color: rgba(255, 125, 184, 0.58);
  background: linear-gradient(180deg, rgba(255, 125, 184, 0.24), rgba(153, 198, 255, 0.18));
  color: var(--pink);
}

.admin-crop-box {
  position: absolute;
  z-index: 3;
  display: block;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow:
    0 0 0 1px rgba(7, 19, 63, 0.22),
    inset 0 0 0 1px rgba(7, 19, 63, 0.1),
    0 8px 18px rgba(7, 19, 63, 0.18);
  cursor: move;
  touch-action: none;
}

.admin-crop-box[hidden] {
  display: none;
}

.admin-crop-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.46) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(90deg, transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.46) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(0deg, transparent calc(33.333% - 0.5px), rgba(255, 255, 255, 0.46) calc(33.333% - 0.5px) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(0deg, transparent calc(66.666% - 0.5px), rgba(255, 255, 255, 0.46) calc(66.666% - 0.5px) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
  opacity: 0.6;
  pointer-events: none;
}

.admin-crop-handle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 4;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  box-shadow: 0 2px 5px rgba(7, 19, 63, 0.24);
  cursor: nwse-resize;
  touch-action: none;
}

.admin-selected-files {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 253, 0.56)),
    rgba(217, 227, 255, 0.36);
  padding: 10px;
}

.admin-selected-files[hidden] {
  display: none;
}

.admin-selected-files strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-selected-files strong {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
}

.admin-selected-file-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-selected-file {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 8px;
}

.admin-selected-file[draggable="true"] {
  cursor: grab;
}

.admin-selected-file.is-dragging {
  opacity: 0.55;
}

.admin-selected-file.is-drop-target {
  border-color: rgba(255, 125, 184, 0.5);
  background: rgba(255, 125, 184, 0.12);
}

.admin-selected-file-crop {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(73, 101, 168, 0.065) 25%, transparent 25% 75%, rgba(73, 101, 168, 0.065) 75%) 0 0 / 10px 10px,
    linear-gradient(45deg, transparent 25%, rgba(73, 101, 168, 0.035) 25% 75%, transparent 75%) 5px 5px / 10px 10px,
    rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 4px 9px rgba(7, 19, 63, 0.04);
}

.admin-selected-file-crop img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.admin-selected-file-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.admin-selected-file-order,
.admin-selected-file-handle {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
  line-height: 1;
}

.admin-selected-files .admin-selected-file-order {
  width: 24px;
  color: var(--pink);
  font-size: 0.78rem;
}

.admin-selected-files .admin-selected-file-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-selected-files .admin-selected-file-handle {
  min-width: 0;
  overflow: hidden;
  color: rgba(73, 101, 168, 0.64);
  font-size: 0.72rem;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-design-preview dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-design-preview dl > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 10px;
}

.admin-design-preview dt,
.admin-design-preview dd {
  min-width: 0;
  margin: 0;
}

.admin-design-preview dt {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.admin-design-preview dd {
  overflow: hidden;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-status {
  margin: 0;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.25;
  padding: 10px 12px;
}

.admin-status.is-success {
  border-color: rgba(37, 145, 110, 0.24);
  background: rgba(99, 217, 202, 0.18);
}

.admin-status.is-error {
  border-color: rgba(255, 104, 64, 0.28);
  background: rgba(255, 104, 64, 0.14);
}

.admin-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  min-width: 0;
}

.admin-inventory-layer[hidden] {
  display: none;
}

.admin-inventory-sections {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.admin-inventory-gender-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-inventory-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid rgba(73, 101, 168, 0.14);
  padding: 0 2px 8px;
}

.admin-inventory-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.admin-inventory-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 750;
  line-height: 1.2;
}

.admin-inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 10px;
}

.admin-design-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 5px 11px rgba(7, 19, 63, 0.05);
  padding: 10px;
}

.admin-design-card-art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(99, 217, 202, 0.12), rgba(255, 216, 61, 0.12)),
    rgba(217, 227, 255, 0.54);
}

.admin-design-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-inventory-card {
  gap: 8px;
  border-radius: 8px;
  padding: 9px;
}

.admin-inventory-card .admin-design-card-art {
  aspect-ratio: 16 / 10;
  border-radius: 7px;
}

.admin-shop-poster-grid {
  max-width: 900px;
}

.admin-shop-poster-card {
  position: relative;
}

.admin-shop-poster-card.is-selected .shop-poster-frame {
  border-color: rgba(255, 125, 184, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 4px rgba(99, 217, 202, 0.24),
    0 18px 34px rgba(7, 19, 63, 0.22);
}

.admin-shop-poster-label {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.admin-shop-poster-label strong,
.admin-shop-poster-label small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-shop-poster-label strong {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1;
}

.admin-shop-poster-label small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
}

.admin-shop-item-form .admin-upload-drop {
  min-height: 128px;
}

.admin-shop-item-card {
  --item-accent: #47e6ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 0 0 2px color-mix(in srgb, var(--item-accent) 14%, transparent),
    0 5px 11px rgba(7, 19, 63, 0.05);
}

.admin-shop-item-art {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--item-accent) 16%, transparent), rgba(255, 216, 61, 0.1)),
    linear-gradient(45deg, rgba(73, 101, 168, 0.055) 25%, transparent 25% 75%, rgba(73, 101, 168, 0.055) 75%) 0 0 / 10px 10px,
    linear-gradient(45deg, transparent 25%, rgba(73, 101, 168, 0.032) 25% 75%, transparent 75%) 5px 5px / 10px 10px,
    rgba(255, 255, 255, 0.72);
}

.admin-shop-item-card.is-avatar-shop-item {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 0 0 1px rgba(73, 101, 168, 0.1),
    0 5px 11px rgba(7, 19, 63, 0.05);
}

.admin-shop-item-card.is-avatar-shop-item .admin-shop-item-art {
  background:
    linear-gradient(45deg, rgba(73, 101, 168, 0.055) 25%, transparent 25% 75%, rgba(73, 101, 168, 0.055) 75%) 0 0 / 10px 10px,
    linear-gradient(45deg, transparent 25%, rgba(73, 101, 168, 0.032) 25% 75%, transparent 75%) 5px 5px / 10px 10px,
    rgba(255, 255, 255, 0.72);
}

.admin-shop-item-swatch {
  display: block;
  width: min(78px, 52%);
  aspect-ratio: 1;
  border: 4px solid rgba(255, 255, 255, 0.86);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(7, 19, 63, 0.12),
    0 8px 18px rgba(7, 19, 63, 0.14);
}

.admin-shop-item-placeholder {
  display: block;
  width: min(78px, 52%);
  aspect-ratio: 1;
  border: 2px dashed rgba(73, 101, 168, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.52);
}

.admin-shop-card-actions {
  display: grid;
  grid-template-columns: repeat(2, max-content) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.admin-shop-card-actions form {
  margin: 0;
}

.admin-shop-edit-details {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-shop-edit-details[open] {
  grid-column: 1 / -1;
  width: 100%;
}

.admin-shop-edit-details summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  width: fit-content;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1;
  list-style: none;
  padding: 0 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 7px rgba(7, 19, 63, 0.07);
}

.admin-shop-edit-details summary::-webkit-details-marker {
  display: none;
}

.admin-shop-edit-details summary:hover,
.admin-shop-edit-details summary:focus-visible {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.admin-shop-edit-details summary:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.admin-shop-edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(73, 101, 168, 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.58);
}

.admin-shop-edit-form .admin-textarea {
  min-height: 78px;
}

.admin-market-manager {
  overflow: hidden;
}

.admin-market-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}

.admin-market-form > .admin-field,
.admin-market-form > .admin-market-close-field {
  grid-column: span 3;
}

.admin-market-form > .admin-field:has([name="market_title"]) {
  grid-column: span 6;
}

.admin-market-form > .admin-field:has([name="market_id"]),
.admin-market-form > .admin-field:has([name="market_spread_note"]),
.admin-market-form > .admin-field:has([name="market_incentive_note"]) {
  grid-column: span 4;
}

.admin-market-form > .admin-field:has(.admin-textarea),
.admin-market-form > .admin-market-outcomes {
  grid-column: 1 / -1;
}

.admin-market-close-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.admin-market-close-field small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1;
}

.admin-market-outcomes {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.13);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(238, 243, 255, 0.5)),
    rgba(255, 255, 255, 0.64);
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 5px 11px rgba(7, 19, 63, 0.04);
}

.admin-market-outcomes-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.admin-market-outcomes-head strong {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}

.admin-market-outcomes-head span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: right;
}

.admin-market-bulk-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.admin-market-bulk-add:has(.admin-market-bulk-summary:not([hidden])) {
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
}

.admin-market-bulk-keys {
  display: none;
}

.admin-market-dropzone {
  position: relative;
  display: grid;
  place-content: center;
  gap: 5px;
  min-height: 88px;
  overflow: hidden;
  border: 1px dashed rgba(73, 101, 168, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(99, 217, 202, 0.12), rgba(255, 125, 184, 0.12)),
    rgba(255, 255, 255, 0.72);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.admin-market-dropzone input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.admin-market-dropzone span,
.admin-market-dropzone small {
  pointer-events: none;
}

.admin-market-dropzone span {
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.admin-market-dropzone small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
}

.admin-market-dropzone:hover,
.admin-market-dropzone:focus-within,
.admin-market-dropzone.is-dragging {
  border-color: rgba(255, 125, 184, 0.58);
  background:
    linear-gradient(135deg, rgba(99, 217, 202, 0.18), rgba(255, 125, 184, 0.2)),
    rgba(255, 255, 255, 0.86);
}

.admin-market-bulk-summary {
  min-width: 0;
  max-height: 88px;
  overflow: auto;
  margin: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.3;
  padding: 10px;
}

.admin-market-bulk-summary[hidden] {
  display: none;
}

.admin-market-outcome-row {
  display: grid;
  grid-template-columns:
    58px
    minmax(140px, 1.1fr)
    minmax(220px, 2fr)
    minmax(74px, 0.58fr)
    minmax(86px, 0.66fr)
    minmax(78px, 0.62fr)
    minmax(124px, 0.78fr)
    auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 9px;
}

.admin-market-outcome-row[data-admin-market-status="resolved-no"] {
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.72;
}

.admin-market-outcome-row[data-admin-market-status="resolved-yes"] {
  border-color: rgba(37, 145, 110, 0.25);
  background: rgba(99, 217, 202, 0.13);
}

.admin-market-outcome-preview {
  display: grid;
  place-items: center;
  width: 58px;
  aspect-ratio: 1;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(73, 101, 168, 0.07) 25%, transparent 25% 75%, rgba(73, 101, 168, 0.07) 75%) 0 0 / 10px 10px,
    linear-gradient(45deg, transparent 25%, rgba(73, 101, 168, 0.04) 25% 75%, transparent 75%) 5px 5px / 10px 10px,
    rgba(255, 255, 255, 0.72);
  color: rgba(73, 101, 168, 0.52);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.admin-market-outcome-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-market-outcome-row .admin-field {
  gap: 4px;
}

.admin-market-outcome-row .admin-field > span {
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-market-outcome-row .admin-input {
  min-height: 34px;
  border-radius: 8px;
  font-size: 0.9rem;
  padding: 7px 8px;
}

.admin-market-outcome-row .admin-market-remove-outcome {
  min-height: 34px;
  align-self: end;
  border-color: rgba(255, 104, 64, 0.18);
  color: #A13018;
  font-size: 0.82rem;
  padding: 0 11px;
}

.admin-market-form > .admin-market-add-outcome {
  grid-column: 1 / span 3;
  justify-self: stretch;
}

.admin-market-form > .admin-primary-button {
  grid-column: 4 / -1;
  justify-self: stretch;
}

.admin-market-grid {
  grid-template-columns: minmax(0, 1fr);
}

.admin-market-card {
  grid-template-rows: auto auto auto;
}

.admin-market-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.admin-market-card-actions form {
  margin: 0;
}

.admin-market-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid rgba(37, 145, 110, 0.2);
  border-radius: 999px;
  background: rgba(99, 217, 202, 0.16);
  color: #166950;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 8px;
}

.admin-market-status-pill.is-closed {
  border-color: rgba(255, 104, 64, 0.22);
  background: rgba(255, 104, 64, 0.12);
  color: #A13018;
}

@media (max-width: 1100px) {
  .admin-market-outcome-row {
    grid-template-columns: 58px repeat(4, minmax(0, 1fr));
  }

  .admin-market-outcome-preview {
    grid-row: span 2;
  }

  .admin-market-outcome-row .admin-field:has([name="market_outcome_name[]"]) {
    grid-column: 2 / span 2;
  }

  .admin-market-outcome-row .admin-field:has([name="market_outcome_avatar[]"]) {
    grid-column: 4 / span 2;
  }

  .admin-market-outcome-row .admin-market-remove-outcome {
    grid-column: 5;
  }
}

@media (max-width: 820px) {
  .admin-market-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-market-form > .admin-field,
  .admin-market-form > .admin-market-close-field,
  .admin-market-form > .admin-field:has([name="market_title"]),
  .admin-market-form > .admin-field:has([name="market_id"]),
  .admin-market-form > .admin-field:has([name="market_spread_note"]),
  .admin-market-form > .admin-field:has([name="market_incentive_note"]),
  .admin-market-form > .admin-market-outcomes,
  .admin-market-form > .admin-market-add-outcome,
  .admin-market-form > .admin-primary-button {
    grid-column: 1 / -1;
  }

  .admin-market-bulk-add {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-market-outcomes-head {
    align-items: start;
    flex-direction: column;
  }

  .admin-market-outcomes-head span {
    text-align: left;
  }

  .admin-market-outcome-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .admin-market-outcome-preview {
    width: 52px;
    grid-column: 1;
    grid-row: 1;
  }

  .admin-market-outcome-row .admin-field,
  .admin-market-outcome-row .admin-field:has([name="market_outcome_avatar[]"]),
  .admin-market-outcome-row .admin-market-remove-outcome {
    grid-column: 1 / -1;
  }

  .admin-market-outcome-row .admin-field:has([name="market_outcome_name[]"]) {
    grid-column: 2;
  }
}

.admin-active-game-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.admin-active-game-card {
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    inset 0 0 0 2px color-mix(in srgb, var(--play-accent, var(--pink)) 12%, transparent),
    0 5px 11px rgba(7, 19, 63, 0.05);
}

.admin-active-game-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--play-accent, var(--pink)), color-mix(in srgb, var(--play-accent, var(--pink)) 14%, transparent));
}

.admin-active-game-card-head {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-active-game-color {
  display: block;
  width: 10px;
  height: 50px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 38%),
    var(--play-accent, var(--pink));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.36),
    0 4px 8px color-mix(in srgb, var(--play-accent, var(--pink)) 30%, rgba(7, 19, 63, 0.12));
}

.admin-active-game-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.admin-active-game-meta > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 8px;
}

.admin-active-game-meta dt,
.admin-active-game-meta dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-active-game-meta dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-active-game-meta dd {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.admin-active-game-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.admin-active-game-card-actions form {
  margin: 0;
}

.admin-active-game-edit-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-active-game-edit-form .admin-primary-button {
  grid-column: 1 / -1;
}

.admin-game-types-form {
  grid-template-columns: minmax(0, 1fr);
}

.admin-game-type-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.admin-game-type-card {
  align-content: start;
  grid-template-rows: auto auto auto auto;
  overflow: hidden;
}

.admin-game-type-head {
  display: grid;
  grid-template-columns: 12px 56px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-game-type-swatch {
  display: block;
  width: 10px;
  height: 52px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 38%),
    var(--play-accent, var(--pink));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.36),
    0 4px 8px color-mix(in srgb, var(--play-accent, var(--pink)) 30%, rgba(7, 19, 63, 0.12));
}

.admin-game-type-thumb {
  display: block;
  width: 56px;
  height: 56px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  object-fit: cover;
}

.admin-game-type-toggle {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.admin-game-type-toggle input {
  justify-self: end;
  width: 18px;
  height: 18px;
  accent-color: var(--play-accent, var(--pink));
}

.admin-game-type-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.admin-game-types-magnate {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  padding: 14px;
}

@media (max-width: 680px) {
  .admin-design-form,
  .admin-active-game-edit-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-game-type-head {
    grid-template-columns: 10px 48px minmax(0, 1fr);
  }

  .admin-game-type-thumb {
    width: 48px;
    height: 48px;
  }
}

.admin-design-card-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
}

.admin-design-card-stack img {
  min-width: 0;
  min-height: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.58);
  object-fit: contain;
}

.admin-design-card-stack img:first-child:nth-last-child(1) {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.admin-design-card-body {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.admin-design-card-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  min-width: 0;
}

.admin-design-card-body strong {
  overflow: hidden;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-inventory-card .admin-design-card-body strong {
  white-space: normal;
}

.admin-design-card-body span,
.admin-design-card-body small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-inventory-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
}

.admin-inventory-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.admin-inventory-meta-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  max-width: 100%;
  border: 1px solid rgba(73, 101, 168, 0.11);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.56);
  padding: 0 7px;
}

.admin-design-card-path {
  display: block;
  max-width: 100%;
}

.admin-design-card-body p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.admin-collection-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-collection-actions form {
  display: grid;
  min-width: 0;
  margin: 0;
}

.admin-collection-details {
  display: grid;
  min-width: 0;
}

.admin-collection-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1;
  padding: 0 11px;
  list-style: none;
}

.admin-collection-details summary::-webkit-details-marker {
  display: none;
}

.admin-collection-details summary::after {
  content: "+";
  color: var(--pink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.admin-collection-details[open] summary::after {
  content: "-";
}

.admin-collection-details summary:hover,
.admin-collection-details summary:focus-visible {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.admin-collection-details summary:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.admin-collection-file-list {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-height: 330px;
  overflow-y: auto;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.42);
  margin-top: 8px;
  padding: 8px;
}

.admin-collection-file {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 7px;
}

.admin-collection-file-art {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(99, 217, 202, 0.1), rgba(255, 216, 61, 0.1)),
    rgba(217, 227, 255, 0.5);
}

.admin-collection-file-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-collection-file-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-collection-file-body strong,
.admin-collection-file-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-collection-file-body strong {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1;
}

.admin-collection-file-body small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.05;
}

.admin-empty-state {
  display: grid;
  place-items: center;
  min-height: 110px;
  border: 1px dashed rgba(73, 101, 168, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.44);
  text-align: center;
  padding: 18px;
}

/* Admin control room refresh */
body.admin-page {
  --admin-bg: #DAE3FC;
  --admin-surface: #FFF8FD;
  --admin-surface-soft: #FDF4E7;
  --admin-surface-strong: #D9E3FF;
  --admin-border: rgba(73, 101, 168, 0.2);
  --admin-border-strong: rgba(73, 101, 168, 0.36);
  --admin-ink: #07133F;
  --admin-muted: #4965A8;
  --admin-subtle: rgba(73, 101, 168, 0.68);
  --admin-accent: #F05C9D;
  --admin-accent-soft: rgba(240, 92, 157, 0.12);
  --admin-success: #087443;
  --admin-success-soft: #e8f7ef;
  --admin-danger: #b42318;
  --admin-danger-soft: #fff0ed;
  --admin-warning: #b54708;
  --admin-shadow: 0 8px 18px rgba(7, 19, 63, 0.08);
  background: var(--admin-bg);
  color: var(--admin-ink);
  overflow-x: hidden;
}

body.admin-page .site-header {
  border-bottom: 1px solid var(--admin-border);
  background: rgba(245, 247, 251, 0.96);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.04);
}

body.admin-page .main-tab {
  min-height: 36px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-ink);
  font-size: 0.94rem;
  box-shadow: none;
  text-shadow: none;
}

body.admin-page .main-tab:hover,
body.admin-page .main-tab:focus-visible {
  border-color: var(--admin-border-strong);
  background: var(--admin-surface-soft);
  text-decoration: none;
}

body.admin-page .main-tab img {
  filter: none;
}

body.admin-page .admin-shell {
  box-sizing: border-box;
  width: min(100% - 20px, 1540px);
  gap: 18px;
  color: var(--admin-ink);
}

body.admin-page .admin-shell *,
body.admin-page .admin-shell *::before,
body.admin-page .admin-shell *::after {
  box-sizing: border-box;
}

body.admin-page:not(.show-page) > .home-shell.admin-shell {
  width: min(100% - 20px, 1540px);
  padding: 14px 10px 28px;
}

body.admin-page .admin-heading,
body.admin-page .admin-access-panel,
body.admin-page .admin-panel,
body.admin-page .admin-overview-card {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  box-shadow: var(--admin-shadow);
}

body.admin-page .admin-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
}

body.admin-page .admin-heading h1,
body.admin-page .admin-access-panel h1 {
  color: var(--admin-ink);
  font-size: 2rem;
  font-weight: 900;
}

body.admin-page .admin-heading p,
body.admin-page .admin-panel-heading p,
body.admin-page .admin-access-panel p,
body.admin-page .admin-empty-state {
  max-width: 760px;
  color: var(--admin-muted);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

body.admin-page .admin-owner-badge {
  justify-self: end;
  min-height: 30px;
  border: 1px solid #f2c94c;
  border-radius: 999px;
  background: #fff8df;
  color: #8a6100;
  box-shadow: none;
  text-shadow: none;
}

body.admin-page .admin-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

body.admin-page .admin-overview-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
}

body.admin-page .admin-overview-card span,
body.admin-page .admin-overview-card small {
  overflow: hidden;
  color: var(--admin-muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.admin-page .admin-overview-card strong {
  overflow: hidden;
  color: var(--admin-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .admin-overview-card small {
  color: var(--admin-subtle);
  font-size: 0.72rem;
  text-transform: none;
}

body.admin-page .admin-tabs {
  position: sticky;
  top: 8px;
  z-index: 18;
  gap: 4px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08);
  padding: 6px;
  backdrop-filter: blur(12px);
}

body.admin-page .admin-tab {
  gap: 8px;
  min-height: 36px;
  min-width: 0;
  border-radius: 7px;
  color: var(--admin-muted);
  font-size: 0.9rem;
  font-weight: 850;
  padding: 0 12px;
}

body.admin-page .admin-tab:hover,
body.admin-page .admin-tab:focus-visible {
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
  text-decoration: none;
}

body.admin-page .admin-tab.is-active {
  background: var(--admin-accent);
  color: #ffffff;
  box-shadow: none;
  text-shadow: none;
}

body.admin-page .admin-tab.is-disabled {
  opacity: 0.42;
}

body.admin-page .admin-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.08);
  color: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 7px;
}

body.admin-page .admin-tab.is-active .admin-tab__count {
  background: rgba(255, 255, 255, 0.22);
}

body.admin-page .admin-panel,
body.admin-page .admin-access-panel {
  gap: 18px;
  padding: 20px;
}

body.admin-page .admin-panel-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--admin-border);
  padding-bottom: 14px;
}

body.admin-page .admin-panel h2 {
  color: var(--admin-ink);
  font-size: 1.38rem;
  font-weight: 900;
}

body.admin-page .admin-user-filter,
body.admin-page .admin-layer-filter,
body.admin-page .admin-user-filter,
body.admin-page .admin-design-form,
body.admin-page .admin-shop-edit-form,
body.admin-page .admin-user-ban-card,
body.admin-page .admin-user-match-panel,
body.admin-page .admin-user-directory-panel,
body.admin-page .admin-user-inventory-head,
body.admin-page .admin-user-shop-inventory {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-soft);
  box-shadow: none;
}

body.admin-page .admin-design-form,
body.admin-page .admin-shop-edit-form {
  padding: 16px;
}

body.admin-page .admin-user-filter,
body.admin-page .admin-layer-filter {
  display: grid;
  grid-template-columns: minmax(280px, 560px) auto;
  align-items: end;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 12px;
}

body.admin-page .admin-field,
body.admin-page .admin-user-filter label,
body.admin-page .admin-layer-filter label {
  gap: 6px;
}

body.admin-page .admin-user-filter span,
body.admin-page .admin-layer-filter span,
body.admin-page .admin-field > span {
  color: var(--admin-muted);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.03em;
}

body.admin-page .admin-input {
  min-height: 40px;
  border: 1px solid var(--admin-border-strong);
  border-radius: 7px;
  background: var(--admin-surface);
  color: var(--admin-ink);
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: none;
}

body.admin-page .admin-input:focus-visible,
body.admin-page .admin-upload-field:focus-within .admin-upload-drop {
  border-color: var(--admin-accent);
  outline: 3px solid rgba(37, 99, 235, 0.16);
  outline-offset: 0;
}

body.admin-page .admin-textarea {
  min-height: 104px;
}

body.admin-page .admin-input::placeholder {
  color: var(--admin-subtle);
}

body.admin-page .admin-design-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
}

body.admin-page .admin-upload-drop,
body.admin-page .admin-market-dropzone {
  min-height: 132px;
  border: 1px dashed var(--admin-border-strong);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-ink);
  box-shadow: none;
}

body.admin-page .admin-upload-drop strong,
body.admin-page .admin-market-dropzone span {
  font-size: 1rem;
}

body.admin-page .admin-upload-drop small,
body.admin-page .admin-market-dropzone small {
  color: var(--admin-muted);
  font-size: 0.8rem;
}

body.admin-page .admin-upload-field.is-dragging .admin-upload-drop,
body.admin-page .admin-market-dropzone:hover,
body.admin-page .admin-market-dropzone:focus-within,
body.admin-page .admin-market-dropzone.is-dragging {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
  box-shadow: none;
}

body.admin-page .admin-primary-button,
body.admin-page .admin-secondary-button,
body.admin-page .admin-danger-button,
body.admin-page .admin-link-button,
body.admin-page .admin-shop-edit-details summary,
body.admin-page .admin-collection-details summary {
  min-height: 38px;
  border-radius: 7px;
  box-shadow: none;
  font-size: 0.92rem;
  font-weight: 850;
  text-shadow: none;
}

body.admin-page .admin-primary-button,
body.admin-page .admin-link-button {
  border-color: var(--admin-accent);
  background: var(--admin-accent);
  color: #ffffff;
}

body.admin-page .admin-secondary-button,
body.admin-page .admin-shop-edit-details summary,
body.admin-page .admin-collection-details summary {
  border-color: var(--admin-border-strong);
  background: var(--admin-surface);
  color: var(--admin-ink);
}

body.admin-page .admin-danger-button {
  min-height: 34px;
  border-color: #f3b7b0;
  background: var(--admin-danger-soft);
  color: var(--admin-danger);
}

body.admin-page .admin-primary-button:hover,
body.admin-page .admin-primary-button:focus-visible,
body.admin-page .admin-link-button:hover,
body.admin-page .admin-link-button:focus-visible {
  border-color: #1d4ed8;
  background: #1d4ed8;
}

body.admin-page .admin-secondary-button:hover,
body.admin-page .admin-secondary-button:focus-visible,
body.admin-page .admin-shop-edit-details summary:hover,
body.admin-page .admin-shop-edit-details summary:focus-visible,
body.admin-page .admin-collection-details summary:hover,
body.admin-page .admin-collection-details summary:focus-visible {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
}

body.admin-page .admin-danger-button:hover,
body.admin-page .admin-danger-button:focus-visible {
  border-color: #f04438;
  background: #fee4e2;
}

body.admin-page .admin-primary-button:focus-visible,
body.admin-page .admin-secondary-button:focus-visible,
body.admin-page .admin-danger-button:focus-visible,
body.admin-page .admin-link-button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.16);
  outline-offset: 2px;
}

body.admin-page .admin-status {
  border-radius: 8px;
  border-color: var(--admin-border);
  background: var(--admin-surface-soft);
  color: var(--admin-ink);
  font-weight: 700;
}

body.admin-page .admin-status.is-success {
  border-color: #a6e9c5;
  background: var(--admin-success-soft);
  color: var(--admin-success);
}

body.admin-page .admin-status.is-error {
  border-color: #f3b7b0;
  background: var(--admin-danger-soft);
  color: var(--admin-danger);
}

body.admin-page .admin-design-preview {
  align-content: start;
  gap: 12px;
}

body.admin-page .admin-design-preview-frame,
body.admin-page .admin-design-card-art,
body.admin-page .admin-selected-file-crop,
body.admin-page .admin-market-outcome-preview {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(16, 24, 40, 0.045) 25%, transparent 25% 75%, rgba(16, 24, 40, 0.045) 75%) 0 0 / 12px 12px,
    linear-gradient(45deg, transparent 25%, rgba(16, 24, 40, 0.028) 25% 75%, transparent 75%) 6px 6px / 12px 12px,
    #ffffff;
  box-shadow: none;
}

body.admin-page .admin-design-preview dl > div,
body.admin-page .admin-selected-files,
body.admin-page .admin-selected-file,
body.admin-page .admin-market-outcomes,
body.admin-page .admin-market-outcome-row {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  box-shadow: none;
}

body.admin-page .admin-selected-files {
  padding: 12px;
}

body.admin-page .admin-design-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

body.admin-page .admin-inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

body.admin-page .admin-design-card {
  gap: 12px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  padding: 12px;
}

body.admin-page .admin-design-card:hover {
  border-color: var(--admin-border-strong);
}

body.admin-page .admin-design-card-body {
  gap: 7px;
}

body.admin-page .admin-design-card-body strong,
body.admin-page .admin-inventory-card .admin-design-card-body strong {
  overflow: visible;
  color: var(--admin-ink);
  font-size: 1.05rem;
  line-height: 1.12;
  text-overflow: clip;
  white-space: normal;
}

body.admin-page .admin-design-card-body span,
body.admin-page .admin-design-card-body small {
  overflow: visible;
  color: var(--admin-muted);
  font-size: 0.82rem;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

body.admin-page .admin-design-card-path,
body.admin-page .admin-design-card-body small:last-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

body.admin-page .admin-design-card-body p {
  color: var(--admin-ink);
  font-size: 0.9rem;
  line-height: 1.35;
}

body.admin-page .admin-inventory-pill,
body.admin-page .admin-ban-pill,
body.admin-page .admin-market-status-pill {
  border-color: var(--admin-border);
  background: var(--admin-surface-strong);
  color: var(--admin-ink);
  font-size: 0.7rem;
}

body.admin-page .admin-ban-pill.is-active,
body.admin-page .admin-market-status-pill.is-closed {
  border-color: #f3b7b0;
  background: var(--admin-danger-soft);
  color: var(--admin-danger);
}

body.admin-page .admin-market-status-pill:not(.is-closed) {
  border-color: #a6e9c5;
  background: var(--admin-success-soft);
  color: var(--admin-success);
}

body.admin-page .admin-inventory-section-head {
  border-bottom-color: var(--admin-border);
}

body.admin-page .admin-inventory-section-head h3,
body.admin-page .admin-user-match-panel > strong,
body.admin-page .admin-user-inventory-head h3,
body.admin-page .admin-user-ban-head strong,
body.admin-page .admin-market-outcomes-head strong {
  color: var(--admin-ink);
}

body.admin-page .admin-user-ban-grid {
  gap: 14px;
}

body.admin-page .admin-user-ban-card,
body.admin-page .admin-user-match-panel,
body.admin-page .admin-user-inventory-head,
body.admin-page .admin-user-shop-inventory {
  padding: 14px;
}

body.admin-page .admin-user-directory-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

body.admin-page .admin-user-directory-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

body.admin-page .admin-user-directory-head strong {
  display: block;
  color: var(--admin-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

body.admin-page .admin-user-directory-head span {
  display: block;
  margin-top: 5px;
  color: var(--admin-muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

body.admin-page .admin-user-directory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  min-width: 0;
}

body.admin-page .admin-user-directory-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-ink);
  padding: 9px;
  text-decoration: none;
}

body.admin-page .admin-user-directory-card:hover,
body.admin-page .admin-user-directory-card:focus-visible {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
  text-decoration: none;
}

body.admin-page .admin-user-directory-card:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.16);
  outline-offset: 0;
}

body.admin-page .admin-user-directory-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-strong);
  color: var(--admin-accent);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1;
}

body.admin-page .admin-user-directory-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.admin-page .admin-user-directory-body strong,
body.admin-page .admin-user-directory-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .admin-user-directory-body strong {
  color: var(--admin-ink);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.05;
}

body.admin-page .admin-user-directory-body small {
  color: var(--admin-muted);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1;
}

body.admin-page .admin-user-directory-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border: 1px solid var(--admin-border);
  border-radius: 7px;
  background: var(--admin-surface-soft);
  color: var(--admin-accent);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 10px;
}

body.admin-page .admin-users-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

body.admin-page .admin-users-search-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.admin-page .admin-user-filter {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  width: 100%;
  max-width: none;
  background: rgba(255, 255, 255, 0.48);
}

body.admin-page .admin-user-filter .admin-primary-button {
  min-width: 130px;
}

body.admin-page .admin-users-online-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 248, 253, 0.9), rgba(217, 227, 255, 0.38)),
    var(--admin-surface);
  box-shadow: var(--admin-shadow);
  padding: 14px;
}

body.admin-page .admin-users-online-list {
  display: grid;
  gap: 6px;
  max-height: 360px;
  min-width: 0;
  overflow: auto;
  padding-right: 2px;
}

body.admin-page .admin-users-online-row {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--admin-ink);
  text-decoration: none;
  padding: 8px;
}

body.admin-page .admin-users-online-row:hover,
body.admin-page .admin-users-online-row:focus-visible,
body.admin-page .admin-users-online-row.is-selected {
  border-color: rgba(99, 217, 202, 0.45);
  background: rgba(99, 217, 202, 0.14);
  text-decoration: none;
}

body.admin-page .admin-users-online-dot {
  width: 9px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--aqua);
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.18);
}

body.admin-page .admin-users-online-row span:not(.admin-users-online-dot) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body.admin-page .admin-users-online-row strong,
body.admin-page .admin-users-online-row small {
  min-width: 0;
  overflow: hidden;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .admin-users-online-row strong {
  color: var(--admin-ink);
  font-size: 0.9rem;
  font-weight: 900;
}

body.admin-page .admin-users-online-row small {
  color: var(--admin-muted);
  font-size: 0.74rem;
  font-weight: 750;
}

body.admin-page .admin-user-inventory-head {
  background:
    linear-gradient(180deg, rgba(255, 216, 61, 0.16), rgba(255, 248, 253, 0.8)),
    var(--admin-surface);
}

body.admin-page .admin-user-inventory-head h3 {
  font-size: 1.52rem;
}

body.admin-page .admin-user-inventory-head p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

body.admin-page .admin-user-inventory-head p span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--admin-muted);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  padding: 0 9px;
}

body.admin-page .admin-user-profile-tabs {
  box-shadow: var(--admin-shadow);
}

body.admin-page .admin-user-account-card {
  gap: 14px;
}

body.admin-page .admin-user-account-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.admin-page .admin-user-account-meta > div {
  min-height: 74px;
  background: rgba(255, 255, 255, 0.5);
  padding: 10px;
}

body.admin-page .admin-user-account-meta dt {
  color: var(--admin-muted);
  font-size: 0.7rem;
}

body.admin-page .admin-user-account-meta dd {
  color: var(--admin-ink);
  font-size: 0.96rem;
  line-height: 1.15;
}

body.admin-page .admin-user-account-actions {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.admin-page .admin-user-account-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  padding: 12px;
}

body.admin-page .admin-user-rename-form {
  grid-template-columns: minmax(0, 1fr) auto;
}

body.admin-page .admin-user-account-form .admin-primary-button,
body.admin-page .admin-user-delete-form .admin-danger-button {
  min-width: 170px;
}

body.admin-page .admin-user-delete-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(180, 35, 24, 0.24);
  border-radius: 8px;
  background: rgba(255, 240, 237, 0.5);
  padding: 12px;
}

body.admin-page .admin-user-delete-form strong {
  display: block;
  color: var(--admin-danger);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

body.admin-page .admin-user-delete-form p {
  margin: 5px 0 0;
  color: #9f2d23;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
}

body.admin-page .admin-user-economy-card {
  gap: 14px;
  border-color: var(--admin-border-strong);
  background:
    linear-gradient(180deg, #ffffff, var(--admin-surface-soft));
}

body.admin-page .admin-user-economy-card .admin-user-ban-head {
  border-bottom: 1px solid var(--admin-border);
  padding-bottom: 10px;
}

body.admin-page .admin-user-economy-balances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
}

body.admin-page .admin-user-economy-balances > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 12px;
}

body.admin-page .admin-user-economy-balances dt,
body.admin-page .admin-user-economy-balances dd {
  min-width: 0;
  margin: 0;
}

body.admin-page .admin-user-economy-balances dt {
  color: var(--admin-muted);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

body.admin-page .admin-user-economy-balances dd {
  overflow: hidden;
  color: var(--admin-ink);
  font-size: clamp(1.25rem, 2vw, 1.72rem);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .admin-user-economy-card > .admin-user-ban-status {
  margin: -4px 0 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  color: var(--admin-muted);
  font-size: 0.84rem;
  font-weight: 750;
  padding: 9px 10px;
}

body.admin-page .admin-user-economy-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 12px;
}

body.admin-page .admin-user-economy-form .admin-field {
  gap: 5px;
}

body.admin-page .admin-user-economy-form .admin-input {
  min-height: 42px;
  font-size: 1rem;
}

body.admin-page .admin-user-economy-form .admin-primary-button {
  min-height: 42px;
  white-space: nowrap;
}

body.admin-page .admin-user-shop-inventory {
  display: grid;
  gap: 12px;
  min-width: 0;
}

body.admin-page .admin-user-design-inventory {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(217, 227, 255, 0.34)),
    var(--admin-surface);
  padding: 14px;
}

body.admin-page .admin-user-shop-inventory h4,
body.admin-page .admin-user-design-inventory h4,
body.admin-page .admin-user-shop-inventory p {
  margin: 0;
}

body.admin-page .admin-user-design-inventory p {
  margin: 0;
}

body.admin-page .admin-user-shop-inventory h4,
body.admin-page .admin-user-design-inventory h4 {
  color: var(--admin-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

body.admin-page .admin-user-shop-inventory p,
body.admin-page .admin-user-design-inventory p {
  margin-top: 5px;
  color: var(--admin-muted);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
}

body.admin-page .admin-user-design-layer-list,
body.admin-page .admin-user-design-layer-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}

body.admin-page .admin-user-design-card {
  align-content: start;
}

body.admin-page .admin-user-design-studio-head {
  align-items: flex-end;
  border-bottom: 0;
  padding-bottom: 0;
}

body.admin-page .admin-user-design-layer-tabs {
  align-items: center;
  gap: 7px;
  border-color: var(--admin-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(217, 227, 255, 0.36)),
    var(--admin-surface);
  padding: 7px;
}

body.admin-page .admin-user-design-layer-tabs .avatar-studio-layer-tab {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

body.admin-page .admin-user-design-layer-tabs .avatar-studio-layer-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(73, 101, 168, 0.12);
  color: var(--admin-muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 6px;
}

body.admin-page .admin-user-design-layer-tabs .avatar-studio-layer-tab:hover span,
body.admin-page .admin-user-design-layer-tabs .avatar-studio-layer-tab:focus-visible span {
  background: rgba(240, 92, 157, 0.14);
  color: var(--admin-accent);
}

body.admin-page .admin-user-design-layer-section {
  scroll-margin-top: 112px;
}

body.admin-page .admin-user-design-layer-section[hidden] {
  display: none;
}

body.admin-page .admin-user-design-layer-head,
body.admin-page .admin-user-design-gender-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border-bottom: 1px solid var(--admin-border);
  padding-bottom: 9px;
}

body.admin-page .admin-user-design-layer-head {
  display: none;
}

body.admin-page .admin-user-design-gender-head {
  border-bottom: 0;
  padding-bottom: 0;
}

body.admin-page .admin-user-design-gender-head p {
  display: none;
}

body.admin-page .admin-user-design-layer-head h3,
body.admin-page .admin-user-design-gender-head h3 {
  margin: 0;
  color: var(--admin-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1;
}

body.admin-page .admin-user-design-layer-head p,
body.admin-page .admin-user-design-gender-head p {
  margin: 5px 0 0;
  color: var(--admin-muted);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.18;
}

body.admin-page .admin-user-design-gender-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid var(--admin-border);
  padding-top: 12px;
}

body.admin-page .admin-user-design-gender-section:first-child {
  border-top: 0;
  padding-top: 0;
}

body.admin-page .admin-user-design-options {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}

body.admin-page .admin-user-design-option {
  cursor: default;
  position: relative;
}

body.admin-page .admin-user-design-option:hover,
body.admin-page .admin-user-design-option:focus-visible {
  border-color: rgba(99, 217, 202, 0.72);
  transform: translateY(-1px);
}

body.admin-page .admin-user-design-option .avatar-studio-option-preview,
body.admin-page .admin-user-design-option .avatar-studio-option-variant-preview {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 255, 248, 0.7)),
    var(--admin-surface);
}

body.admin-page .admin-user-design-option .avatar-studio-option-copy strong,
body.admin-page .admin-user-design-option .avatar-studio-option-variant-copy strong {
  font-size: 0.86rem;
}

body.admin-page .admin-user-design-option .avatar-studio-option-copy span,
body.admin-page .admin-user-design-option .avatar-studio-option-variant-copy span {
  font-size: 0.74rem;
}

body.admin-page .admin-user-design-remove-form {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 5;
  margin: 0;
}

body.admin-page .admin-user-design-remove-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 22px;
  border: 1px solid rgba(180, 35, 24, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 240, 237, 0.98), rgba(255, 224, 219, 0.9)),
    #fff;
  color: var(--admin-danger);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 8px 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 4px 10px rgba(7, 19, 63, 0.08);
}

body.admin-page .admin-user-design-remove-button:hover,
body.admin-page .admin-user-design-remove-button:focus-visible {
  border-color: rgba(180, 35, 24, 0.48);
  background: var(--admin-danger-soft);
  color: #7a271a;
  outline: 2px solid rgba(180, 35, 24, 0.14);
  outline-offset: 2px;
}

body.admin-page .admin-user-upgrades-panel {
  align-content: start;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(217, 227, 255, 0.32)),
    var(--admin-surface);
  padding: 14px;
}

body.admin-page .admin-user-upgrades-head {
  border-bottom: 1px solid var(--admin-border);
  padding-bottom: 12px;
}

body.admin-page .admin-deadpixel-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  min-width: 0;
}

body.admin-page .admin-deadpixel-upgrade-card {
  --admin-deadpixel-upgrade-color: var(--admin-accent);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas:
    "art body"
    "action action";
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--admin-deadpixel-upgrade-color) 10%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.72);
  padding: 12px;
  box-shadow: 0 1px 2px rgba(7, 19, 63, 0.05);
}

body.admin-page .admin-deadpixel-upgrade-card.is-active {
  border-color: color-mix(in srgb, var(--admin-deadpixel-upgrade-color) 50%, var(--admin-border));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--admin-deadpixel-upgrade-color) 16%, transparent), transparent 48%),
    rgba(255, 255, 255, 0.82);
}

body.admin-page .admin-deadpixel-upgrade-art {
  grid-area: art;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

body.admin-page .admin-deadpixel-upgrade-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.admin-page .admin-deadpixel-upgrade-swatch {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--admin-deadpixel-upgrade-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
}

body.admin-page .admin-deadpixel-upgrade-body {
  grid-area: body;
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

body.admin-page .admin-deadpixel-upgrade-topline,
body.admin-page .admin-deadpixel-upgrade-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

body.admin-page .admin-deadpixel-upgrade-topline span,
body.admin-page .admin-deadpixel-upgrade-topline b,
body.admin-page .admin-deadpixel-upgrade-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--admin-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--admin-muted);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 8px 1px;
}

body.admin-page .admin-deadpixel-upgrade-topline b.is-active {
  border-color: rgba(8, 116, 67, 0.28);
  background: var(--admin-success-soft);
  color: var(--admin-success);
}

body.admin-page .admin-deadpixel-upgrade-card h5 {
  margin: 0;
  color: var(--admin-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.04;
}

body.admin-page .admin-deadpixel-upgrade-card p {
  margin: 0;
  color: var(--admin-subtle);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.28;
}

body.admin-page .admin-deadpixel-upgrade-meta span {
  min-height: 20px;
  border-color: transparent;
  background: rgba(73, 101, 168, 0.08);
  font-size: 0.66rem;
}

body.admin-page .admin-deadpixel-upgrade-card form {
  grid-area: action;
  margin: 0;
}

body.admin-page .admin-deadpixel-upgrade-card .admin-primary-button {
  width: 100%;
  min-height: 38px;
}

body.admin-page .admin-deadpixel-upgrade-card .admin-primary-button:disabled {
  border-color: var(--admin-border);
  background: rgba(73, 101, 168, 0.12);
  color: var(--admin-muted);
  cursor: default;
  opacity: 1;
  box-shadow: none;
}

body.admin-page .admin-user-chip {
  border-color: #bfdbfe;
  border-radius: 999px;
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
}

body.admin-page .admin-shop-poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  max-width: none;
}

body.admin-page .admin-shop-poster-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
  padding: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

body.admin-page .admin-shop-poster-card:hover,
body.admin-page .admin-shop-poster-card:focus-visible {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
  text-decoration: none;
}

body.admin-page .admin-shop-poster-card .shop-poster-frame {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  box-shadow: none;
}

body.admin-page .admin-shop-poster-card.is-selected {
  border-color: var(--admin-accent);
  background: var(--admin-accent-soft);
}

body.admin-page .admin-shop-poster-card.is-selected .shop-poster-frame {
  border-color: var(--admin-accent);
  box-shadow: none;
}

body.admin-page .admin-shop-poster-label {
  text-align: left;
}

body.admin-page .admin-shop-card-actions,
body.admin-page .admin-active-game-card-actions,
body.admin-page .admin-market-card-actions,
body.admin-page .admin-announcement-actions,
body.admin-page .admin-collection-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body.admin-page .admin-shop-edit-details[open],
body.admin-page .admin-active-game-edit-details[open],
body.admin-page .admin-market-edit-details[open],
body.admin-page .admin-announcement-edit-details[open] {
  display: grid;
  gap: 10px;
  width: 100%;
  padding-top: 2px;
}

body.admin-page .admin-announcement-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

body.admin-page .admin-announcement-field {
  grid-column: span 3;
}

body.admin-page .admin-announcement-field.is-wide,
body.admin-page .admin-announcement-field.is-half {
  grid-column: span 6;
}

body.admin-page .admin-announcement-field.is-full,
body.admin-page .admin-announcement-form .admin-primary-button {
  grid-column: 1 / -1;
}

body.admin-page .admin-announcement-form .admin-primary-button {
  justify-self: start;
}

body.admin-page .admin-announcement-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.admin-page .admin-announcement-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface);
}

body.admin-page .admin-announcement-card-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body.admin-page .admin-announcement-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

body.admin-page .admin-announcement-card-head > div {
  min-width: 0;
}

body.admin-page .admin-announcement-card-head h3 {
  margin: 0;
  color: var(--admin-ink);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

body.admin-page .admin-announcement-card-head p {
  margin: 3px 0 0;
  color: var(--admin-muted);
  font-size: 0.84rem;
  font-weight: 800;
}

body.admin-page .admin-announcement-remaining {
  flex: 0 0 auto;
  border: 1px solid var(--admin-border-strong);
  border-radius: 999px;
  background: var(--admin-accent-soft);
  color: var(--admin-accent);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  padding: 7px 9px;
}

body.admin-page .admin-announcement-summary {
  max-width: 86ch;
  margin: 0;
  color: var(--admin-ink);
  font-size: 0.93rem;
  font-weight: 650;
  line-height: 1.36;
  overflow-wrap: anywhere;
}

body.admin-page .admin-announcement-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
}

body.admin-page .admin-announcement-meta div {
  min-width: 0;
}

body.admin-page .admin-announcement-meta dt {
  color: var(--admin-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

body.admin-page .admin-announcement-meta dd {
  min-width: 0;
  margin: 2px 0 0;
  color: var(--admin-ink);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.admin-page .admin-announcement-actions {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

body.admin-page .admin-announcement-actions form,
body.admin-page .admin-announcement-actions .admin-danger-button,
body.admin-page .admin-announcement-actions .admin-shop-edit-details summary {
  width: 100%;
}

body.admin-page .admin-announcement-edit-details[open] {
  min-width: min(560px, 100%);
}

body.admin-page .admin-announcement-edit-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

body.admin-page .admin-announcement-edit-form .admin-field.is-full,
body.admin-page .admin-announcement-edit-form .admin-primary-button {
  grid-column: 1 / -1;
}

body.admin-page .admin-market-manager {
  overflow: visible;
}

body.admin-page .admin-market-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

body.admin-page .admin-market-outcomes {
  padding: 14px;
}

body.admin-page .admin-market-outcomes-head {
  align-items: flex-start;
}

body.admin-page .admin-market-outcomes-head span {
  color: var(--admin-muted);
  text-align: right;
}

body.admin-page .admin-market-outcome-row {
  grid-template-columns:
    62px
    minmax(140px, 1.15fr)
    minmax(220px, 2fr)
    minmax(82px, 0.62fr)
    minmax(92px, 0.68fr)
    minmax(86px, 0.64fr)
    minmax(130px, 0.82fr)
    auto;
  padding: 10px;
}

body.admin-page .admin-market-outcome-preview {
  width: 62px;
}

body.admin-page .admin-active-game-card {
  align-content: start;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

body.admin-page .admin-active-game-card::before {
  height: 3px;
}

body.admin-page .admin-active-game-meta > div {
  border-color: var(--admin-border);
  background: var(--admin-surface-soft);
}

body.admin-page .admin-active-game-card-actions {
  padding-top: 2px;
}

body.admin-page .admin-active-game-card-actions .admin-secondary-button,
body.admin-page .admin-active-game-card-actions .admin-danger-button {
  min-height: 40px;
}

body.admin-page .admin-active-game-roster {
  display: grid;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid var(--admin-border);
  padding-top: 12px;
}

body.admin-page .admin-active-game-roster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

body.admin-page .admin-active-game-roster-head strong,
body.admin-page .admin-active-game-roster-head span {
  color: var(--admin-ink);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.15;
}

body.admin-page .admin-active-game-roster-head span {
  color: var(--admin-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

body.admin-page .admin-active-game-player-list {
  display: grid;
  gap: 7px;
  max-height: 280px;
  min-width: 0;
  overflow: auto;
  padding-right: 2px;
}

body.admin-page .admin-active-game-player {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-surface-soft);
  padding: 8px;
}

body.admin-page .admin-active-game-player-avatar {
  display: block;
  width: 38px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: #ffffff;
}

body.admin-page .admin-active-game-player-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.admin-page .admin-active-game-player-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.admin-page .admin-active-game-player-meta a {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-ink);
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-page .admin-active-game-player-meta span,
body.admin-page .admin-active-game-empty {
  color: var(--admin-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

body.admin-page .admin-active-game-player form {
  margin: 0;
}

body.admin-page .admin-active-game-kick-button {
  min-height: 32px;
  padding: 0 11px;
}

body.admin-page .admin-empty-state {
  min-height: 118px;
  border-color: var(--admin-border-strong);
  border-radius: 8px;
  background: var(--admin-surface-soft);
}

.game-lobby-admin {
  width: min(100% - 24px, 1180px);
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 12px 26px rgba(16, 24, 40, 0.06);
  color: #101828;
  font-family: "Barlow", Arial, Helvetica, sans-serif;
  padding: 14px;
}

.game-lobby-admin__heading {
  align-items: flex-start;
  border-bottom: 1px solid #d9e2ec;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.game-lobby-admin__eyebrow {
  color: #667085;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.game-lobby-admin__heading h2 {
  color: #101828;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.18rem;
  font-weight: 900;
}

.game-lobby-admin__count {
  border: 1px solid #b7c4d6;
  border-radius: 999px;
  background: #f8fafc;
  color: #344054;
}

.game-lobby-admin__status {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #f8fafc;
  color: #101828;
}

.game-lobby-admin__status.is-success {
  border-color: #a6e9c5;
  background: #e8f7ef;
  color: #087443;
}

.game-lobby-admin__status.is-error {
  border-color: #f3b7b0;
  background: #fff0ed;
  color: #b42318;
}

.game-lobby-admin__list {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.game-lobby-admin__player {
  border-color: #d9e2ec;
  border-radius: 8px;
  background: #f8fafc;
}

.game-lobby-admin__avatar {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #eef3f8;
}

.game-lobby-admin__player-meta a {
  color: #101828;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  font-weight: 900;
}

.game-lobby-admin__player-meta span {
  color: #667085;
}

.game-lobby-admin__kick {
  border: 1px solid #f3b7b0;
  border-radius: 7px;
  background: #fff0ed;
  color: #b42318;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
}

.game-lobby-admin__kick:hover,
.game-lobby-admin__kick:focus-visible {
  border-color: #f04438;
  background: #fee4e2;
}

.game-lobby-admin__kick:focus-visible {
  outline: 3px solid rgba(180, 35, 24, 0.16);
}

@media (min-width: 980px) {
  body.admin-page .admin-design-preview {
    position: sticky;
    top: 76px;
  }
}

@media (max-width: 1180px) {
  body.admin-page .admin-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.admin-page .admin-users-home-grid,
  body.admin-page .admin-user-delete-form {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .admin-market-outcome-row {
    grid-template-columns: 62px repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body.admin-page .admin-shell {
    width: min(100% - 12px, 1540px);
  }

  body.admin-page:not(.show-page) > .home-shell.admin-shell {
    width: min(100% - 20px, 1540px);
    padding: 10px;
  }

  body.admin-page .admin-heading,
  body.admin-page .admin-panel-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .admin-heading,
  body.admin-page .admin-panel,
  body.admin-page .admin-access-panel {
    padding: 16px;
  }

  body.admin-page .admin-user-account-meta,
  body.admin-page .admin-user-account-form,
  body.admin-page .admin-user-rename-form {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .admin-user-design-layer-head,
  body.admin-page .admin-user-design-gender-head {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-page .admin-user-design-options {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  }

  body.admin-page .admin-owner-badge {
    justify-self: start;
  }

  body.admin-page .admin-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.admin-page .admin-design-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .admin-design-preview {
    position: static;
  }

  body.admin-page .admin-market-form,
  body.admin-page .admin-design-form,
  body.admin-page .admin-user-economy-form,
  body.admin-page .admin-active-game-edit-form {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .admin-market-form > .admin-field,
  body.admin-page .admin-market-form > .admin-market-close-field,
  body.admin-page .admin-market-form > .admin-field:has([name="market_title"]),
  body.admin-page .admin-market-form > .admin-field:has([name="market_id"]),
  body.admin-page .admin-market-form > .admin-field:has([name="market_spread_note"]),
  body.admin-page .admin-market-form > .admin-field:has([name="market_incentive_note"]),
  body.admin-page .admin-market-form > .admin-market-outcomes,
  body.admin-page .admin-market-form > .admin-market-add-outcome,
  body.admin-page .admin-market-form > .admin-primary-button,
  body.admin-page .admin-announcement-field,
  body.admin-page .admin-announcement-field.is-wide,
  body.admin-page .admin-announcement-field.is-half,
  body.admin-page .admin-announcement-field.is-full,
  body.admin-page .admin-design-form .admin-primary-button {
    grid-column: 1 / -1;
  }

  body.admin-page .admin-announcement-card {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .admin-announcement-edit-details[open] {
    min-width: 0;
  }

  body.admin-page .admin-market-outcome-row {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  body.admin-page .admin-market-outcome-preview {
    width: 56px;
  }
}

@media (max-width: 640px) {
  body.admin-page .site-header {
    overflow-x: auto;
  }

  body.admin-page .main-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
    -webkit-overflow-scrolling: touch;
  }

  body.admin-page .admin-overview,
  body.admin-page .admin-user-filter,
  body.admin-page .admin-layer-filter,
  body.admin-page .admin-user-ban-grid,
  body.admin-page .admin-user-ban-form {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .admin-user-filter {
    width: 100%;
  }

  body.admin-page .admin-user-directory-list,
  body.admin-page .admin-user-economy-balances {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .admin-user-directory-card {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  body.admin-page .admin-user-directory-avatar {
    width: 34px;
  }

  body.admin-page .admin-tabs {
    top: 0;
    border-radius: 0;
    margin-right: 0;
    margin-left: 0;
  }

  body.admin-page .admin-tab {
    min-height: 34px;
    padding: 0 10px;
  }

  body.admin-page .admin-design-grid,
  body.admin-page .admin-inventory-grid,
  body.admin-page .admin-active-game-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.admin-page .admin-panel-heading,
  body.admin-page .admin-market-outcomes-head,
  .game-lobby-admin__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  body.admin-page .admin-market-outcomes-head span {
    text-align: left;
  }

  body.admin-page .admin-primary-button,
  body.admin-page .admin-secondary-button,
  body.admin-page .admin-danger-button,
  body.admin-page .admin-link-button {
    width: 100%;
  }

  body.admin-page .admin-active-game-player {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 8px;
  }

  body.admin-page .admin-active-game-player-avatar {
    width: 34px;
  }

  body.admin-page .admin-active-game-player .admin-danger-button {
    width: auto;
  }
}

.avatar-studio-shell {
  display: grid;
  align-items: start;
  width: min(100% - 24px, 1180px);
  gap: 18px;
}

.avatar-studio-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 12px;
}

.avatar-studio-heading-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.avatar-studio-heading h1,
.avatar-studio-preview-card strong,
.avatar-studio-workspace h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  line-height: 1;
  letter-spacing: 0;
}

.avatar-studio-heading h1 {
  font-size: 2.1rem;
  font-weight: 900;
}

.avatar-studio-heading-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.3;
}

.avatar-studio-profile-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  padding: 0 13px;
}

.avatar-studio-profile-link:hover,
.avatar-studio-profile-link:focus-visible {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  text-decoration: none;
}

.avatar-studio-profile-link:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.avatar-studio-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  min-width: 0;
}

.avatar-studio-preview-card {
  position: sticky;
  top: 16px;
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(217, 227, 255, 0.42)),
    rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 16px rgba(7, 19, 63, 0.08);
  padding: 16px;
}

.avatar-studio-preview-frame {
  position: relative;
  width: min(100%, 200px);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  aspect-ratio: 200 / 270;
  background: rgba(255, 248, 253, 0.92);
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 34px rgba(7, 19, 63, 0.16);
}

.avatar-studio-canvas,
.avatar-studio-preview-frame img {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-studio-canvas {
  object-fit: contain;
}

.avatar-studio-preview-frame img[hidden] {
  display: none;
}

.avatar-studio-preview-card strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 1.18rem;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-studio-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.avatar-studio-status.is-error {
  color: var(--pink);
}

.avatar-studio-shadow-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  user-select: none;
}

.avatar-studio-shadow-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--blue);
}

.avatar-studio-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.avatar-studio-actions .settings-save,
.avatar-studio-actions .settings-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 36px;
  text-decoration: none;
}

.avatar-studio-workspace {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.avatar-studio-builder-card {
  align-content: start;
  gap: 14px;
}

.avatar-studio-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.avatar-gender-toggle {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  padding: 2px;
}

.avatar-gender-toggle button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 30px;
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 0;
  box-shadow: none;
  transition:
    background 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.avatar-gender-toggle-separator {
  color: rgba(73, 101, 168, 0.38);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1;
}

.avatar-gender-toggle button:hover,
.avatar-gender-toggle button:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.58);
  outline: 0;
}

.avatar-gender-toggle button:focus-visible {
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.18);
}

.avatar-gender-toggle button.is-active {
  background: linear-gradient(180deg, #75E7D8, var(--aqua));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 3px 0 rgba(7, 19, 63, 0.1);
}

.avatar-gender-toggle button.is-active:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 3px 0 rgba(7, 19, 63, 0.1),
    0 0 0 3px rgba(99, 217, 202, 0.18);
}

.avatar-studio-layer-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-gutter: stable;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(217, 227, 255, 0.38)),
    rgba(255, 255, 255, 0.52);
  padding: 8px;
}

.avatar-studio-layer-tab {
  appearance: none;
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 12px;
}

.avatar-studio-layer-tab:hover,
.avatar-studio-layer-tab:focus-visible {
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
}

.avatar-studio-layer-tab:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.avatar-studio-layer-tab.is-active,
.avatar-studio-layer-tab[aria-selected="true"] {
  border-color: rgba(73, 101, 168, 0.16);
  background: var(--pink);
  color: #fff;
  box-shadow: 0 6px 12px rgba(240, 92, 157, 0.18);
}

.avatar-studio-layer-panel {
  display: grid;
  min-width: 0;
}

.avatar-studio-layer-panel[hidden] {
  display: none;
}

.avatar-studio-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  min-width: 0;
}

.avatar-studio-options--top {
  align-items: stretch;
}

.avatar-studio-option-shell {
  position: relative;
  display: grid;
  min-width: 0;
}

.avatar-studio-option-shell[hidden] {
  display: none !important;
}

.avatar-studio-option-variant {
  position: relative;
  cursor: default;
}

.avatar-studio-option-variant.is-selected {
  border-color: var(--pink);
  box-shadow:
    0 0 0 3px rgba(240, 92, 157, 0.14),
    0 8px 16px rgba(7, 19, 63, 0.1);
}

.avatar-studio-option-variant-main {
  appearance: none;
  display: block;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.avatar-studio-option-variant-main:focus-visible,
.avatar-studio-option-variant-arrow:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.avatar-studio-option-variant-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(250, 255, 248, 0.68)),
    rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 1px 4px rgba(7, 19, 63, 0.05);
  box-sizing: border-box;
}

.avatar-studio-option-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(250, 255, 248, 0.68)),
    rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 1px 4px rgba(7, 19, 63, 0.05);
  box-sizing: border-box;
}

.avatar-studio-option-variant-preview .avatar-studio-option-variant-main {
  height: 100%;
}

.avatar-studio-option-variant-preview img,
.avatar-studio-option-preview img,
.avatar-studio-option-variant-preview .avatar-studio-option-none {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center 24%;
}

.avatar-studio-option-variant-preview .avatar-studio-option-none {
  position: static;
  display: grid;
}

.avatar-studio-option-variant-preview img[hidden],
.avatar-studio-option-variant-preview .avatar-studio-option-none[hidden] {
  display: none;
}

.avatar-studio-option-variant[data-avatar-option-group-layer="backgrounds"] .avatar-studio-option-variant-preview img {
  object-fit: cover;
}

.avatar-studio-option-footer,
.avatar-studio-option-variant-footer {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}

.avatar-studio-option-variant-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.avatar-studio-option-variant-arrow {
  appearance: none;
  position: static;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(73, 101, 168, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.82)),
    rgba(255, 255, 255, 0.78);
  color: #4965a8;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 0 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 4px 12px rgba(7, 19, 63, 0.12);
}

.avatar-studio-option-variant-arrow:hover {
  border-color: rgba(99, 217, 202, 0.72);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}

.avatar-studio-resale-button {
  appearance: none;
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 21px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 231, 242, 0.96), rgba(247, 200, 222, 0.88)),
    #fff;
  color: #7b2e51;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 7px 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 5px 12px rgba(7, 19, 63, 0.08);
}

.avatar-studio-resale-button:hover:not(:disabled),
.avatar-studio-resale-button:focus-visible:not(:disabled) {
  border-color: rgba(240, 92, 157, 0.42);
  color: var(--ink);
  outline: 2px solid rgba(240, 92, 157, 0.22);
  outline-offset: 2px;
}

.avatar-studio-resale-button[hidden] {
  display: none;
}

.avatar-studio-option-copy,
.avatar-studio-option-variant-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  line-height: 1;
  text-align: center;
}

.avatar-studio-option-copy strong,
.avatar-studio-option-copy span,
.avatar-studio-option-variant-copy strong,
.avatar-studio-option-variant-copy span {
  overflow-wrap: anywhere;
  white-space: normal;
}

.avatar-studio-option-copy strong,
.avatar-studio-option-variant-copy strong {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
}

.avatar-studio-option-copy span,
.avatar-studio-option-variant-copy span {
  color: #4965a8;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.05;
}

.avatar-studio-option-count-spacer,
.avatar-studio-option-variant-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  min-width: 30px;
  height: 19px;
  box-sizing: border-box;
}

.avatar-studio-option-count-spacer {
  visibility: hidden;
}

.avatar-studio-option-variant-count {
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background: rgba(9, 19, 55, 0.58);
  color: #fff;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.avatar-studio-option-controls-spacer {
  display: block;
  width: 1px;
  height: 28px;
  justify-self: center;
  visibility: hidden;
}

.avatar-studio-option-variant-options[hidden] {
  display: none;
}

.avatar-studio-option[hidden] {
  display: none !important;
}

.avatar-studio-option {
  appearance: none;
  display: grid;
  align-content: start;
  gap: 8px;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 250, 247, 0.72)),
    linear-gradient(135deg, rgba(255, 216, 61, 0.13), rgba(99, 217, 202, 0.13)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 5px 14px rgba(7, 19, 63, 0.07);
  cursor: pointer;
  padding: 8px;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.avatar-studio-option[data-avatar-layer="backgrounds"] img {
  object-fit: cover;
}

.avatar-studio-option img.is-preview-cropped,
.avatar-studio-option-variant-preview img.is-preview-cropped {
  transform: none;
}

.avatar-studio-option-variant[data-avatar-option-group-layer] .avatar-studio-option-variant-preview img.is-preview-cropped {
  transform: none;
}

.avatar-studio-option-none {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 255, 246, 0.74)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 4px rgba(7, 19, 63, 0.05);
  color: #4965a8;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  box-sizing: border-box;
}

.avatar-studio-empty {
  margin: 0;
  border: 1px dashed rgba(73, 101, 168, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 18px;
  text-align: center;
}

.avatar-studio-option:hover,
.avatar-studio-option:focus-visible {
  border-color: rgba(99, 217, 202, 0.72);
  transform: translateY(-2px);
}

.avatar-studio-option:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.avatar-studio-option.is-selected,
.avatar-studio-option[aria-pressed="true"] {
  border-color: var(--pink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 252, 247, 0.82)),
    linear-gradient(135deg, rgba(255, 216, 61, 0.14), rgba(99, 217, 202, 0.16)),
    rgba(255, 255, 255, 0.78);
  box-shadow:
    0 0 0 3px rgba(240, 92, 157, 0.14),
    0 8px 16px rgba(7, 19, 63, 0.1);
}

.avatar-studio-option.is-selected .avatar-studio-option-copy strong,
.avatar-studio-option.is-selected .avatar-studio-option-variant-copy strong,
.avatar-studio-option[aria-pressed="true"] .avatar-studio-option-copy strong,
.avatar-studio-option[aria-pressed="true"] .avatar-studio-option-variant-copy strong {
  color: var(--ink);
}

.avatar-studio-option.is-selected .avatar-studio-option-copy span,
.avatar-studio-option.is-selected .avatar-studio-option-variant-copy span,
.avatar-studio-option[aria-pressed="true"] .avatar-studio-option-copy span,
.avatar-studio-option[aria-pressed="true"] .avatar-studio-option-variant-copy span {
  color: #4965a8;
}

.profile-history-pagination {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  justify-self: end;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(217, 227, 255, 0.5)),
    rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 4px rgba(7, 19, 63, 0.06);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  padding: 2px;
}

.profile-history-pagination button {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  line-height: 21px;
  text-decoration: none;
  box-shadow: none;
  padding: 0 6px;
  transition:
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.profile-history-page-items {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.profile-history-page-arrow {
  font-size: 0.92rem;
}

.profile-history-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 21px;
  color: rgba(73, 101, 168, 0.56);
  line-height: 21px;
}

.profile-history-pagination button[aria-current="page"] {
  min-width: 21px;
  padding: 0;
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 1px 3px rgba(240, 92, 157, 0.2);
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.14);
}

.profile-history-pagination button:hover:not([aria-current="page"]) {
  background: rgba(99, 217, 202, 0.18);
  color: var(--ink);
  text-decoration: none;
}

.profile-history-pagination button:disabled,
.profile-history-pagination button:disabled:hover {
  background: transparent;
  color: rgba(73, 101, 168, 0.34);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.profile-history-pagination button:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-history-pagination button:active {
  transform: translateY(1px);
}

.profile-history-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(76px, 1fr));
  justify-content: start;
  gap: 11px 7px;
  align-items: start;
  width: 100%;
  overflow: visible;
}

.profile-history-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.profile-history-card[hidden] {
  display: none;
}

.profile-history-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  aspect-ratio: 1;
  color: var(--history-ink);
  cursor: pointer;
  text-decoration: none;
  transition: filter 150ms ease;
}

.profile-history-badge:hover,
.profile-history-badge:focus-visible,
.profile-history-badge:active {
  text-decoration: none;
}

.profile-history-badge-shape {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 62% 74%, rgba(7, 19, 63, 0.18), rgba(7, 19, 63, 0) 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--history-accent) 62%, #ffffff), var(--history-accent) 58%, color-mix(in srgb, var(--history-accent) 78%, #07133F));
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.7))
    drop-shadow(0 5px 8px rgba(7, 19, 63, 0.18));
  transition:
    filter 150ms ease,
    background 150ms ease;
  -webkit-mask-image: var(--history-mask);
  mask-image: var(--history-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.profile-history-card.is-ascension .profile-history-badge::before {
  content: none;
}

.profile-history-card.is-ascension .profile-history-badge-shape {
  inset: 0;
  background: var(--history-mask) center / contain no-repeat;
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.42))
    drop-shadow(0 5px 8px rgba(7, 19, 63, 0.18));
  -webkit-mask-image: none;
  mask-image: none;
}

.profile-history-card.is-ascension .profile-history-badge-shape::before,
.profile-history-card.is-ascension .profile-history-badge-shape::after {
  content: none;
}

.profile-history-card.is-ascension .profile-history-badge:hover::before,
.profile-history-card.is-ascension .profile-history-badge:focus-visible::before {
  content: none;
}

.profile-history-card.is-ascension .profile-history-badge:hover .profile-history-badge-shape,
.profile-history-card.is-ascension .profile-history-badge:focus-visible .profile-history-badge-shape {
  background: var(--history-mask) center / contain no-repeat;
  filter:
    brightness(0.9)
    contrast(1.06)
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.34))
    drop-shadow(0 5px 8px rgba(7, 19, 63, 0.18));
}

.profile-history-card.is-ascension .profile-history-badge:hover .profile-history-badge-shape::before,
.profile-history-card.is-ascension .profile-history-badge:focus-visible .profile-history-badge-shape::before,
.profile-history-card.is-ascension .profile-history-badge:hover .profile-history-badge-shape::after,
.profile-history-card.is-ascension .profile-history-badge:focus-visible .profile-history-badge-shape::after {
  content: none;
}

.profile-history-card.is-ascension .profile-history-badge-text {
  z-index: 2;
  color: #f4e9ff;
  text-shadow:
    0 1px 0 rgba(21, 7, 31, 0.7),
    0 2px 5px rgba(7, 19, 63, 0.34);
}

.profile-history-card.is-the-magnate .profile-history-badge::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.82) 0 18%, rgba(243, 199, 194, 0.54) 34%, rgba(166, 73, 85, 0.18) 56%, rgba(243, 199, 194, 0) 76%);
  filter: blur(5px);
  opacity: 0.52;
  pointer-events: none;
  transform: scale(0.98);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.profile-history-card.is-the-magnate .profile-history-badge-shape {
  inset: 0;
  background: transparent;
  filter: none;
  transform: scale(1.04);
  -webkit-mask-image: none;
  mask-image: none;
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.profile-history-card.is-the-magnate .profile-history-badge-shape::before,
.profile-history-card.is-the-magnate .profile-history-badge-shape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--history-accent);
  pointer-events: none;
  transition:
    background 160ms ease,
    filter 160ms ease;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.profile-history-card.is-the-magnate .profile-history-badge-shape::before {
  z-index: 1;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.42) 0 20%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #fff6f4 0%, var(--history-accent) 48%, #e9adb5 100%);
  -webkit-mask-image: var(--history-center-mask, var(--history-mask));
  mask-image: var(--history-center-mask, var(--history-mask));
}

.profile-history-card.is-the-magnate .profile-history-badge-shape::after {
  z-index: 2;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.24) 0 22%, rgba(255, 255, 255, 0) 48%),
    linear-gradient(145deg, #ffe6e2 0%, var(--history-accent) 46%, #c8717d 100%);
  filter:
    drop-shadow(0 0 1px rgba(166, 73, 85, 0.6))
    drop-shadow(0 0 5px rgba(243, 199, 194, 0.5))
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.58))
    drop-shadow(0 6px 9px rgba(7, 19, 63, 0.2));
  -webkit-mask-image: var(--history-mask);
  mask-image: var(--history-mask);
}

.profile-history-card.is-the-magnate .profile-history-badge:hover::before,
.profile-history-card.is-the-magnate .profile-history-badge:focus-visible::before {
  opacity: 0.86;
  transform: scale(1.12);
}

.profile-history-card.is-the-magnate .profile-history-badge:hover .profile-history-badge-shape,
.profile-history-card.is-the-magnate .profile-history-badge:focus-visible .profile-history-badge-shape {
  background: transparent;
  filter: none;
  transform: translateY(-1px) scale(1.08) rotate(-2deg);
}

.profile-history-card.is-the-magnate .profile-history-badge:hover .profile-history-badge-shape::before,
.profile-history-card.is-the-magnate .profile-history-badge:focus-visible .profile-history-badge-shape::before {
  background:
    radial-gradient(circle at 32% 23%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 30%),
    linear-gradient(145deg, #fff2ef 0%, var(--history-accent) 46%, #eaaeb3 100%);
}

.profile-history-card.is-the-magnate .profile-history-badge:hover .profile-history-badge-shape::after,
.profile-history-card.is-the-magnate .profile-history-badge:focus-visible .profile-history-badge-shape::after {
  background: linear-gradient(145deg, #fff4f2 0%, var(--history-accent) 48%, #df9ba6 100%);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.52))
    drop-shadow(0 0 9px rgba(243, 199, 194, 0.66))
    drop-shadow(0 6px 9px rgba(7, 19, 63, 0.16));
}

.profile-history-card.is-the-magnate .profile-history-badge-text {
  z-index: 2;
  color: var(--history-ink);
  font-weight: 900;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 0 5px rgba(255, 255, 255, 0.28),
    0 2px 5px rgba(166, 73, 85, 0.3);
}

.profile-history-card.is-the-magnate .profile-history-badge:hover .profile-history-badge-text,
.profile-history-card.is-the-magnate .profile-history-badge:focus-visible .profile-history-badge-text {
  color: #7d3343;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88),
    0 0 6px rgba(255, 255, 255, 0.48),
    0 2px 6px rgba(166, 73, 85, 0.24);
}

.profile-history-card.is-frontier .profile-history-badge::before {
  content: none;
}

.profile-history-card.is-frontier .profile-history-badge-shape {
  inset: -2px -1px;
  background: #d39744;
  filter: none;
  -webkit-mask-image: var(--history-mask);
  mask-image: var(--history-mask);
}

.profile-history-card.is-frontier .profile-history-badge-shape::before {
  content: none;
}

.profile-history-card.is-frontier .profile-history-badge:hover::before,
.profile-history-card.is-frontier .profile-history-badge:focus-visible::before {
  content: none;
}

.profile-history-card.is-frontier .profile-history-badge:hover .profile-history-badge-shape,
.profile-history-card.is-frontier .profile-history-badge:focus-visible .profile-history-badge-shape {
  background: #c88634;
  filter: none;
}

.profile-history-card.is-frontier .profile-history-badge:hover .profile-history-badge-shape::before,
.profile-history-card.is-frontier .profile-history-badge:focus-visible .profile-history-badge-shape::before {
  content: none;
}

.profile-history-card.is-madhouse .profile-history-badge-shape {
  background:
    radial-gradient(circle at 32% 23%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0) 29%),
    radial-gradient(circle at 66% 76%, rgba(134, 83, 0, 0.2), rgba(134, 83, 0, 0) 35%),
    linear-gradient(138deg, #fff27a 0%, #f1d94f 42%, #f59a32 68%, #c96a1d 100%);
}

.profile-history-card.is-madhouse .profile-history-badge:hover .profile-history-badge-shape,
.profile-history-card.is-madhouse .profile-history-badge:focus-visible .profile-history-badge-shape {
  background:
    radial-gradient(circle at 36% 23%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 64% 74%, rgba(134, 83, 0, 0.12), rgba(134, 83, 0, 0) 36%),
    linear-gradient(138deg, #f6e969 0%, #e9cf49 48%, #e38a2c 100%);
}

.profile-history-card.is-palais .profile-history-badge-shape {
  background: var(--history-accent);
  filter:
    drop-shadow(0 0 1px rgba(255, 244, 236, 0.72))
    drop-shadow(0 5px 8px rgba(61, 6, 11, 0.18));
}

.profile-history-card.is-palais .profile-history-badge:hover .profile-history-badge-shape,
.profile-history-card.is-palais .profile-history-badge:focus-visible .profile-history-badge-shape {
  background: #651821;
  filter:
    drop-shadow(0 0 1px rgba(255, 244, 236, 0.78))
    drop-shadow(0 5px 8px rgba(61, 6, 11, 0.18));
}

.profile-history-card.is-palais .profile-history-badge-text {
  color: #fff4ec;
  text-shadow:
    0 1px 0 rgba(61, 6, 11, 0.78),
    0 2px 5px rgba(61, 6, 11, 0.28);
}

.profile-history-card.is-palais .profile-history-badge:hover .profile-history-badge-text,
.profile-history-card.is-palais .profile-history-badge:focus-visible .profile-history-badge-text {
  color: #ffffff;
}

.profile-history-card.is-ascension .profile-history-badge::after,
.profile-history-card.is-the-magnate .profile-history-badge::after,
.profile-history-card.is-frontier .profile-history-badge::after,
.profile-history-card.is-palais .profile-history-badge::after {
  display: none;
}

.profile-history-badge::after {
  content: "";
  position: absolute;
  inset: 6px 10px auto;
  height: 34%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  filter: blur(2px);
  opacity: 1;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.profile-history-badge:hover,
.profile-history-badge:focus-visible {
  z-index: 2;
}

.profile-history-badge:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 5px;
  border-radius: 999px;
}

.profile-history-badge:hover .profile-history-badge-shape,
.profile-history-badge:focus-visible .profile-history-badge-shape {
  background:
    radial-gradient(circle at 36% 23%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 62% 72%, rgba(7, 19, 63, 0.08), rgba(7, 19, 63, 0) 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--history-accent) 42%, #ffffff), color-mix(in srgb, var(--history-accent) 70%, #ffffff) 54%, color-mix(in srgb, var(--history-accent) 86%, #07133F));
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.62))
    drop-shadow(0 5px 8px rgba(7, 19, 63, 0.16));
}

.profile-history-badge:hover::after,
.profile-history-badge:focus-visible::after {
  opacity: 0.16;
}

.profile-history-badge:active {
  filter: saturate(1.08) brightness(0.98);
}

.profile-history-badge-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  color: var(--history-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.9;
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--history-accent) 35%, rgba(255, 255, 255, 0.7)),
    0 2px 5px rgba(7, 19, 63, 0.18);
}

.profile-history-badge-text strong {
  font-size: 1.52rem;
  font-weight: 700;
  line-height: 0.82;
}

.profile-history-badge-text small {
  margin-left: 1px;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-0.42em);
}

.profile-history-badge.is-ongoing .profile-history-badge-text {
  color: var(--history-ink);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1;
}

.profile-history-meta {
  position: relative;
  width: 84px;
  min-height: 52px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--history-meta) 14%, #ffffff);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5)),
    color-mix(in srgb, var(--history-accent) 10%, #eef4ff);
  color: color-mix(in srgb, var(--history-meta) 88%, #07133F);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  padding: 7px 5px 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 1px 4px rgba(7, 19, 63, 0.08);
}

.profile-history-meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: color-mix(in srgb, var(--history-accent) 72%, #ffffff);
  opacity: 0.72;
}

.profile-history-meta strong,
.profile-history-meta span,
.profile-history-meta time {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-history-meta strong,
.profile-history-meta span {
  font-size: 0.8rem;
}

.profile-history-meta strong {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-history-meta span {
  margin-top: 1px;
  font-weight: 900;
}

.profile-history-meta time {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 800;
  opacity: 0.86;
}

.profile-interests-heading {
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 9px;
}

.profile-interests-table {
  display: grid;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 3px 9px rgba(7, 19, 63, 0.05);
  margin: 0;
}

.profile-interest-row {
  display: grid;
  grid-template-columns:
    minmax(100px, 0.56fr)
    minmax(0, 1.44fr)
    minmax(100px, 0.56fr)
    minmax(0, 1.44fr);
  min-height: 44px;
  border-bottom: 1px solid rgba(73, 101, 168, 0.11);
  background: rgba(255, 255, 255, 0.38);
}

.profile-interest-row:nth-child(even) {
  background: rgba(246, 248, 255, 0.52);
}

.profile-interest-row:last-child {
  border-bottom: 0;
}

.profile-interest-row dt,
.profile-interest-row dd {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.profile-interest-row dt {
  border-right: 1px solid rgba(73, 101, 168, 0.14);
  background: rgba(217, 227, 255, 0.3);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.1;
  padding: 9px 11px;
}

.profile-interest-row dt:nth-of-type(2) {
  border-left: 1px solid rgba(73, 101, 168, 0.12);
}

.profile-interest-row dd {
  background: rgba(255, 255, 255, 0.34);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.24;
  overflow-wrap: anywhere;
  padding: 9px 12px;
}

.profile-interest-row dd:nth-of-type(2) {
  border-right: 0;
}

.profile-interest-empty {
  background: rgba(255, 255, 255, 0.22) !important;
}

dt.profile-interest-empty,
dd.profile-interest-empty {
  border-left: 1px solid rgba(73, 101, 168, 0.08);
}

dt.profile-interest-empty {
  border-right: 1px solid rgba(73, 101, 168, 0.08);
}

.profile-game-list,
.profile-buzz-list {
  display: grid;
  gap: 10px;
}

.profile-game-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  border: 2px solid var(--market-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(99, 217, 202, 0.14), rgba(255, 255, 255, 0.72) 48%, rgba(255, 216, 61, 0.12)),
    rgba(255, 255, 255, 0.64);
  padding: 10px 12px;
}

.profile-game-logo {
  display: grid;
  place-items: center;
  width: 74px;
  height: 54px;
  overflow: hidden;
}

.profile-game-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78))
    drop-shadow(0 5px 8px rgba(7, 19, 63, 0.14));
}

.profile-game-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.1;
}

.profile-game-card strong {
  display: block;
  margin-top: 4px;
  color: var(--pink);
  font-size: 0.88rem;
}

.profile-game-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.profile-game-card > a {
  min-width: 76px;
  min-height: 34px;
  font-size: 0.84rem;
  padding: 6px 12px;
}

.profile-buzz-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-buzz-post {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  overflow: visible;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)),
    rgba(246, 248, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 2px 6px rgba(7, 19, 63, 0.06);
  padding: 9px 13px;
}

.profile-buzz-post.has-buzz-verification {
  --buzz-verified-tint: transparent;
  --buzz-verified-tint-soft: transparent;
  --buzz-verified-detail-tint: transparent;
  border-color: rgba(7, 19, 63, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.52)),
    linear-gradient(90deg, var(--buzz-verified-tint), var(--buzz-verified-tint-soft) 48%, rgba(255, 255, 255, 0) 100%),
    rgba(246, 248, 255, 0.62);
}

.profile-buzz-post.is-verified-admin {
  --buzz-verified-tint: rgba(116, 227, 219, 0.18);
  --buzz-verified-tint-soft: rgba(116, 227, 219, 0.055);
  --buzz-verified-detail-tint: rgba(116, 227, 219, 0.07);
}

.profile-buzz-post.is-verified-subscriber {
  --buzz-verified-tint: rgba(243, 109, 151, 0.16);
  --buzz-verified-tint-soft: rgba(243, 109, 151, 0.05);
  --buzz-verified-detail-tint: rgba(243, 109, 151, 0.064);
}

.profile-buzz-post::before {
  content: none;
}

.profile-buzz-post:hover,
.profile-buzz-post:focus-within {
  z-index: 5;
}

.profile-buzz-post.is-buzz-menu-open {
  z-index: 50;
}

.profile-buzz-post.has-buzz-menu {
  padding-right: 40px;
}

.profile-buzz-post-menu {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 30;
}

.profile-buzz-menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(73, 101, 168, 0.74);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  opacity: 0.34;
  padding: 0 0 2px;
  transition:
    background 150ms ease,
    color 150ms ease,
    opacity 150ms ease;
}

.profile-buzz-post:hover .profile-buzz-menu-toggle,
.profile-buzz-post:focus-within .profile-buzz-menu-toggle,
.profile-buzz-post-menu.is-open .profile-buzz-menu-toggle {
  opacity: 0.92;
}

.profile-buzz-menu-toggle:hover,
.profile-buzz-menu-toggle:focus-visible,
.profile-buzz-post-menu.is-open .profile-buzz-menu-toggle {
  background: rgba(99, 217, 202, 0.16);
  color: var(--ink);
}

.profile-buzz-menu-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 164px;
  max-width: min(218px, calc(100vw - 28px));
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(7, 19, 63, 0.14);
  padding: 4px;
}

.profile-buzz-menu-popover[hidden] {
  display: none;
}

.profile-buzz-menu-item {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 31px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: normal;
  overflow: hidden;
  padding: 7px 9px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-buzz-menu-item:hover,
.profile-buzz-menu-item:focus-visible {
  background: rgba(99, 217, 202, 0.16);
}

.profile-buzz-menu-item.is-danger {
  color: #b72562;
}

.profile-buzz-menu-item.is-danger:hover,
.profile-buzz-menu-item.is-danger:focus-visible {
  background: rgba(237, 100, 155, 0.12);
}

.profile-buzz-avatar {
  display: block;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: #dcebf6;
  object-fit: cover;
  object-position: center 30%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.68),
    0 2px 5px rgba(7, 19, 63, 0.12);
}

.profile-buzz-avatar-link {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  text-decoration: none;
}

.profile-buzz-avatar-link:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.72);
  outline-offset: 3px;
}

.profile-buzz-post-body {
  min-width: 0;
  max-width: 100%;
}

.profile-buzz-post p {
  margin: 0;
}

.profile-buzz-post-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: rgba(73, 101, 168, 0.78);
  font-size: 0.76rem;
  line-height: 1.1;
}

.profile-buzz-post-meta strong {
  color: var(--buzz-username-color, var(--ink));
  font-family: var(--buzz-username-font, "Barlow Semi Condensed", Arial, Helvetica, sans-serif);
  font-size: 0.88rem;
  font-weight: 900;
}

.profile-buzz-author-link {
  color: inherit;
  text-decoration: none;
}

.profile-buzz-author-link:hover,
.profile-buzz-author-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.buzz-verified-badge {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  align-self: center;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: help;
  outline: 0;
  z-index: 2;
}

.buzz-verified-icon {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(7, 19, 63, 0.12));
}

.buzz-verified-badge::before,
.buzz-verified-badge::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
  z-index: 30;
}

.buzz-verified-badge::before {
  content: "";
  bottom: calc(100% + 3px);
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(21, 23, 36, 0.92);
  border-left: 4px solid transparent;
}

.buzz-verified-badge::after {
  content: attr(data-buzz-verification-tooltip);
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: min(180px, 62vw);
  padding: 5px 7px;
  border-radius: 3px;
  background: rgba(21, 23, 36, 0.92);
  box-shadow: 0 5px 12px rgba(7, 19, 63, 0.14);
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.buzz-verified-badge:hover::before,
.buzz-verified-badge:hover::after,
.buzz-verified-badge:focus-visible::before,
.buzz-verified-badge:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.buzz-verified-badge:focus-visible {
  box-shadow: 0 0 0 2px rgba(99, 217, 202, 0.42);
}

.profile-buzz-post-meta time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-buzz-post-meta time {
  flex: 0 0 auto;
}

.profile-buzz-post-meta time::before {
  content: "·";
  margin-right: 5px;
}

.profile-buzz-post .profile-buzz-post-text {
  max-width: 100%;
  margin-top: 6px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.28;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}

.buzz-custom-emoji {
  display: inline-block;
  width: 1.45em;
  height: 1.45em;
  margin: 0 1px;
  object-fit: contain;
  vertical-align: -0.34em;
}

.profile-buzz-post.has-buzz-spoiler:not(.is-spoiler-revealed) {
  min-height: 132px;
}

.profile-buzz-post.has-buzz-spoiler:not(.is-spoiler-revealed)::after {
  content: none;
}

.profile-buzz-spoiler-reveal {
  position: absolute;
  top: 48px;
  right: 13px;
  bottom: 43px;
  left: 65px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 248, 255, 0.9)),
    rgba(255, 255, 255, 0.72);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  padding: 10px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 4px 12px rgba(7, 19, 63, 0.05);
}

.profile-buzz-spoiler-reveal:hover,
.profile-buzz-spoiler-reveal:focus-visible {
  border-color: rgba(99, 217, 202, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(246, 248, 255, 0.96)),
    rgba(255, 255, 255, 0.82);
}

.profile-buzz-spoiler-reveal[hidden] {
  display: none;
}

.profile-buzz-post.has-buzz-spoiler:not(.is-spoiler-revealed) .profile-buzz-post-text,
.profile-buzz-post.has-buzz-spoiler:not(.is-spoiler-revealed) .profile-buzz-media,
.profile-buzz-post.has-buzz-spoiler:not(.is-spoiler-revealed) .profile-buzz-poll,
.profile-buzz-post.has-buzz-spoiler:not(.is-spoiler-revealed) .profile-buzz-post-tags {
  opacity: 0;
  pointer-events: none;
  user-select: none;
  visibility: hidden;
}

.profile-buzz-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  width: min(100%, 520px);
  margin-top: 8px;
}

.profile-buzz-media.is-count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-buzz-media-item {
  display: block;
  overflow: hidden;
  min-width: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.profile-buzz-media.is-count-1 .profile-buzz-media-item {
  aspect-ratio: auto;
  max-height: 360px;
}

.profile-buzz-media-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
}

.profile-buzz-media.is-count-1 .profile-buzz-media-item img {
  height: auto;
  object-fit: contain;
}

.profile-buzz-poll {
  display: grid;
  gap: 6px;
  width: min(100%, 520px);
  margin-top: 8px;
}

.profile-buzz-poll-choice {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  min-height: 36px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.05;
  padding: 8px 10px;
  text-align: left;
}

.profile-buzz-poll-choice::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: var(--buzz-poll-choice-percent, 0%);
  background: rgba(99, 217, 202, 0.16);
  pointer-events: none;
}

.profile-buzz-poll-choice.is-selected::before {
  background: rgba(99, 217, 202, 0.24);
}

.profile-buzz-poll-choice:hover,
.profile-buzz-poll-choice:focus-visible,
.profile-buzz-poll-choice.is-selected {
  border-color: rgba(99, 217, 202, 0.5);
  background: rgba(99, 217, 202, 0.16);
}

.profile-buzz-poll.is-closed .profile-buzz-poll-choice,
.profile-buzz-poll-choice:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.profile-buzz-poll.is-closed .profile-buzz-poll-choice:hover,
.profile-buzz-poll-choice:disabled:hover {
  border-color: rgba(7, 19, 63, 0.12);
  background: rgba(255, 255, 255, 0.66);
}

.profile-buzz-poll-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-buzz-poll-count {
  position: relative;
  z-index: 1;
  color: rgba(73, 101, 168, 0.78);
  font-size: 0.76rem;
}

.profile-buzz-poll-status {
  margin: 0;
  color: rgba(73, 101, 168, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.profile-buzz-hashtag,
.profile-buzz-mention {
  display: inline;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #237f98;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  line-height: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  padding: 0;
}

.profile-buzz-hashtag:hover,
.profile-buzz-hashtag:focus-visible,
.profile-buzz-mention:hover,
.profile-buzz-mention:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.profile-buzz-hashtag:focus-visible,
.profile-buzz-mention:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.48);
  outline-offset: 2px;
}

.profile-buzz-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 5px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.profile-buzz-post-actions {
  display: flex;
  align-items: center;
  gap: clamp(22px, 6vw, 54px);
  flex-wrap: nowrap;
  margin-top: 7px;
  color: rgba(73, 101, 168, 0.72);
  font-size: 0.64rem;
  font-weight: 900;
}

.profile-buzz-action {
  position: relative;
  --buzz-icon-shadow: rgba(73, 101, 168, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 19px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(73, 101, 168, 0.78);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition:
    color 150ms ease,
    filter 150ms ease;
  padding: 0;
}

.profile-buzz-action:hover,
.profile-buzz-action:focus-visible {
  color: var(--ink);
}

.profile-buzz-action:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.48);
  outline-offset: 2px;
}

.profile-buzz-action:active {
  filter: brightness(0.98);
}

.profile-buzz-action img,
.profile-buzz-like-icons,
.profile-buzz-repost-icons {
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
}

.profile-buzz-action > img {
  width: auto;
  height: auto;
  max-width: 17px;
  max-height: 17px;
  filter:
    brightness(0.82)
    saturate(1.5)
    drop-shadow(0 0 0 var(--buzz-icon-shadow))
    drop-shadow(0.35px 0 0 var(--buzz-icon-shadow));
  object-fit: contain;
}

.profile-buzz-action.is-comment > img {
  max-width: 18px;
  max-height: 18px;
}

.profile-buzz-action.is-repost > img {
  max-width: 17px;
  max-height: 19px;
}

.profile-buzz-like-icons,
.profile-buzz-repost-icons {
  position: relative;
  flex: 0 0 auto;
}

.profile-buzz-like-icons {
  width: 20px;
  height: 18px;
}

.profile-buzz-repost-icons {
  width: 19px;
  height: 21px;
}

.profile-buzz-share {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition:
    filter 150ms ease,
    transform 150ms ease;
}

.profile-buzz-share:hover,
.profile-buzz-share:focus-visible {
  filter: drop-shadow(0 1px 2px rgba(7, 19, 63, 0.16));
}

.profile-buzz-share.is-shared {
  filter: drop-shadow(0 1px 3px rgba(99, 217, 202, 0.42));
}

.profile-buzz-share:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.48);
  outline-offset: 2px;
}

.profile-buzz-share:active {
  transform: translateY(1px);
}

.profile-buzz-share img {
  display: block;
  width: auto;
  height: auto;
  max-width: 15px;
  max-height: 16px;
  object-fit: contain;
}

.buzz-share-popover {
  position: absolute;
  right: 12px;
  bottom: 34px;
  z-index: 12;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100% - 24px));
  border: 1px solid rgba(73, 101, 168, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 255, 0.94)),
    #FFFFFF;
  color: var(--ink);
  padding: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 12px 28px rgba(7, 19, 63, 0.16);
}

.buzz-share-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.buzz-share-field span {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.buzz-share-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(73, 101, 168, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 8px 9px;
}

.buzz-share-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.buzz-share-copy,
.buzz-share-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 7px;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  padding: 8px 11px;
  text-decoration: none;
}

.buzz-share-copy {
  border: 0;
  background: #F05C9D;
  color: #FFFFFF;
  cursor: pointer;
}

.buzz-share-open {
  border: 1px solid rgba(73, 101, 168, 0.16);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
}

.buzz-share-copy:hover,
.buzz-share-copy:focus-visible {
  background: #D93685;
}

.buzz-share-open:hover,
.buzz-share-open:focus-visible {
  border-color: rgba(99, 217, 202, 0.42);
  color: #237F98;
}

.buzz-share-status {
  min-height: 1em;
  margin: 0;
  color: #237F98;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.buzz-share-status.is-error {
  color: #B51C66;
}

.profile-buzz-like-icon,
.profile-buzz-repost-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.profile-buzz-like-icon {
  max-width: 20px;
  max-height: 18px;
}

.profile-buzz-repost-icon {
  max-width: 19px;
  max-height: 21px;
}

.profile-buzz-like-icon.is-unliked {
  opacity: 1;
  filter:
    brightness(0.82)
    saturate(1.5)
    drop-shadow(0 0 0 var(--buzz-icon-shadow))
    drop-shadow(0.35px 0 0 var(--buzz-icon-shadow));
  transform: translate(-50%, -50%) scale(1);
}

.profile-buzz-repost-icon.is-unreposted {
  opacity: 1;
  filter:
    brightness(0.82)
    saturate(1.5)
    drop-shadow(0 0 0 var(--buzz-icon-shadow))
    drop-shadow(0.35px 0 0 var(--buzz-icon-shadow));
  transform: translate(-50%, -50%) scale(1);
}

.profile-buzz-like-icon.is-liked {
  opacity: 0;
  filter:
    saturate(1.14)
    drop-shadow(0 0 0 rgba(237, 100, 155, 0.38))
    drop-shadow(0.35px 0 0 rgba(237, 100, 155, 0.28));
  transform: translate(-50%, -50%) scale(0.58) rotate(-8deg);
}

.profile-buzz-repost-icon.is-reposted {
  opacity: 0;
  max-width: 21px;
  max-height: 23px;
  filter:
    brightness(0.96)
    saturate(1.22)
    drop-shadow(0.45px 0 0 rgba(85, 191, 177, 0.58))
    drop-shadow(-0.35px 0 0 rgba(85, 191, 177, 0.44))
    drop-shadow(0 0.45px 0 rgba(85, 191, 177, 0.44))
    drop-shadow(0 -0.25px 0 rgba(85, 191, 177, 0.32));
  transform: translate(-50%, -50%) scale(0.64) rotate(-8deg);
}

.profile-buzz-action.is-like.is-liked {
  --buzz-icon-shadow: rgba(237, 100, 155, 0.38);
  color: #ed649b;
}

.profile-buzz-action.is-repost.is-reposted {
  --buzz-icon-shadow: rgba(85, 191, 177, 0.38);
  color: #55bfb1;
}

.profile-buzz-action.is-like.is-liked [data-buzz-like-count] {
  color: #ed649b;
}

.profile-buzz-action.is-repost.is-reposted [data-buzz-repost-count] {
  color: #55bfb1;
}

.profile-buzz-action.is-like.is-liked .profile-buzz-like-icon.is-unliked {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.62) rotate(8deg);
}

.profile-buzz-action.is-like.is-liked .profile-buzz-like-icon.is-liked {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.profile-buzz-action.is-repost.is-reposted .profile-buzz-repost-icon.is-unreposted {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.66) rotate(8deg);
}

.profile-buzz-action.is-repost.is-reposted .profile-buzz-repost-icon.is-reposted {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.profile-buzz-action.is-like.is-like-animating .profile-buzz-like-icons {
  animation: profileBuzzLikePop 240ms ease;
}

.profile-buzz-action.is-repost.is-repost-animating .profile-buzz-repost-icons {
  animation: profileBuzzRepostPop 300ms ease;
}

.profile-buzz-action.is-like.is-like-animating [data-buzz-like-count],
.profile-buzz-action.is-repost.is-repost-animating [data-buzz-repost-count] {
  animation: profileBuzzCountPop 240ms ease;
}

@keyframes profileBuzzLikePop {
  0% {
    transform: scale(1);
  }

  52% {
    transform: scale(1.22);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes profileBuzzRepostPop {
  0% {
    transform: scale(1) rotate(0deg);
  }

  48% {
    transform: scale(1.2) rotate(8deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes profileBuzzCountPop {
  0% {
    transform: translateY(0) scale(1);
  }

  52% {
    transform: translateY(-1px) scale(1.12);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.buzz-page-panel {
  padding: 10px 18px 36px;
}

.buzz-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(330px, 0.95fr)) minmax(290px, 0.72fr);
  gap: 18px;
  align-items: start;
  max-width: 1420px;
  margin: 0 auto;
}

.buzz-main-column,
.buzz-top-column,
.buzz-news-column {
  min-width: 0;
}

.buzz-action-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  margin: 0 0 10px;
  overflow-x: auto;
  padding: 0 4px 4px;
}

.buzz-rail-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(7, 19, 63, 0.52);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
}

.buzz-rail-button:hover,
.buzz-rail-button:focus-visible,
.buzz-rail-button.is-active {
  color: var(--ink);
}

.buzz-rail-button.is-active {
  box-shadow: none;
}

.buzz-rail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #F05C9D;
  color: #FFFFFF;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 5px;
  box-shadow: 0 2px 7px rgba(240, 92, 157, 0.3);
}

.buzz-rail-badge[hidden] {
  display: none;
}

.buzz-rail-icon {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  color: currentColor;
}

.buzz-rail-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--buzz-rail-icon-image) center / contain no-repeat;
  mask: var(--buzz-rail-icon-image) center / contain no-repeat;
}

.buzz-rail-icon.is-notifications,
.buzz-rail-icon.is-settings {
  width: 22px;
  height: 22px;
}

.buzz-feed-view[hidden],
.buzz-detail-panel[hidden] {
  display: none;
}

.buzz-composer-card,
.buzz-top-column,
.buzz-news-column {
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 248, 253, 0.58)),
    rgba(246, 248, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 8px 20px rgba(7, 19, 63, 0.08);
}

.buzz-composer-card {
  overflow: hidden;
  margin-bottom: 14px;
}

.buzz-guest-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 218, 79, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 253, 0.74));
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  color: var(--ink);
  padding: 18px 22px;
}

.buzz-guest-callout-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.buzz-guest-callout strong {
  color: #d92f70;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.buzz-guest-callout p {
  margin: 0;
  color: rgba(7, 19, 63, 0.68);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
}

.buzz-guest-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}

.buzz-guest-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
  padding: 0;
}

.buzz-guest-action img {
  display: block;
  width: auto;
  height: 42px;
  max-width: 170px;
  object-fit: contain;
}

.buzz-guest-action:hover,
.buzz-guest-action:focus-visible {
  transform: translateY(-1px);
}

.buzz-guest-action:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.8);
  outline-offset: 4px;
}

.buzz-guest-reply-callout a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 2px solid rgba(7, 19, 63, 0.88);
  border-radius: 6px;
  background: #ffda4f;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(7, 19, 63, 0.18);
  padding: 8px 13px;
}

.buzz-guest-reply-callout a:hover,
.buzz-guest-reply-callout a:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(7, 19, 63, 0.2);
}

.buzz-feed-tabs-shell {
  position: relative;
  border-bottom: 1px solid rgba(7, 19, 63, 0.14);
}

.buzz-feed-tabs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
}

.buzz-feed-tabs {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(73, 101, 168, 0.32) transparent;
}

.buzz-feed-tabs::-webkit-scrollbar {
  height: 7px;
}

.buzz-feed-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.buzz-feed-tabs::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(73, 101, 168, 0.25);
}

.buzz-feed-tabs button,
.buzz-follow-topic {
  position: relative;
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  max-width: 148px;
  min-height: 58px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(7, 19, 63, 0.48);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  box-shadow: none;
  padding: 8px 12px;
}

.buzz-feed-tabs button.is-active {
  color: var(--ink);
}

.buzz-feed-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: var(--aqua);
}

.buzz-follow-topic {
  min-width: 44px;
  width: 44px;
  max-width: none;
  border-left: 1px solid rgba(7, 19, 63, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 253, 0.64)),
    rgba(246, 248, 255, 0.9);
  padding: 8px 0;
  font-size: 1.22rem;
}

.buzz-feed-tabs-shell.has-max-followed-tags .buzz-follow-topic {
  color: rgba(7, 19, 63, 0.34);
}

.buzz-follow-topic-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  background: rgba(255, 255, 255, 0.58);
  padding: 10px;
}

.buzz-follow-topic-form[hidden] {
  display: none;
}

.buzz-follow-topic-form input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 8px 10px;
}

.buzz-follow-topic-form input::placeholder {
  color: rgba(7, 19, 63, 0.4);
}

.buzz-follow-topic-submit,
.buzz-follow-topic-cancel {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.84rem;
  font-weight: 900;
  padding: 8px 11px;
  white-space: nowrap;
}

.buzz-follow-topic-submit {
  background: rgba(99, 217, 202, 0.28);
  color: var(--ink);
}

.buzz-follow-topic-cancel {
  background: rgba(7, 19, 63, 0.08);
  color: rgba(7, 19, 63, 0.66);
}

.buzz-follow-topic-submit:hover,
.buzz-follow-topic-submit:focus-visible,
.buzz-follow-topic-cancel:hover,
.buzz-follow-topic-cancel:focus-visible {
  background: rgba(99, 217, 202, 0.18);
  color: var(--ink);
}

.buzz-follow-topic-status {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: rgba(73, 101, 168, 0.86);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.buzz-follow-topic-status.is-error {
  color: #b72562;
}

.buzz-follow-topic-status[hidden] {
  display: none;
}

.buzz-tag-context-menu {
  position: fixed;
  z-index: 1001;
  min-width: 148px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 253, 0.92)),
    rgba(246, 248, 255, 0.98);
  box-shadow: 0 14px 32px rgba(7, 19, 63, 0.18);
  padding: 6px;
}

.buzz-tag-context-menu[hidden] {
  display: none;
}

.buzz-tag-context-menu button {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  padding: 7px 9px;
  text-align: left;
  white-space: nowrap;
}

.buzz-tag-context-menu button:hover,
.buzz-tag-context-menu button:focus-visible {
  background: rgba(217, 47, 112, 0.1);
  color: #b72562;
}

.buzz-composer {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: start;
  padding: 18px 22px 14px;
}

.buzz-composer-avatar {
  grid-row: 1 / span 2;
  display: block;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  box-shadow: 0 2px 6px rgba(7, 19, 63, 0.14);
}

.buzz-composer textarea,
.buzz-composer-editor {
  grid-column: 2 / 4;
  width: 100%;
  min-height: 78px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.28;
  padding: 4px 0;
}

.buzz-composer textarea {
  resize: vertical;
}

.buzz-composer-editor {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.buzz-composer textarea::placeholder {
  color: rgba(7, 19, 63, 0.42);
}

.buzz-composer-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(7, 19, 63, 0.42);
  pointer-events: none;
}

.buzz-composer textarea:focus,
.buzz-composer-editor:focus {
  outline: none;
}

.buzz-composer-editor .buzz-custom-emoji {
  width: 1.72em;
  height: 1.72em;
  vertical-align: -0.42em;
}

.buzz-composer.is-drag-over {
  outline: 2px dashed rgba(99, 217, 202, 0.72);
  outline-offset: -8px;
  background: rgba(99, 217, 202, 0.08);
}

.buzz-composer-extras {
  grid-column: 2 / 4;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.buzz-composer-status {
  margin: 0;
  color: rgba(73, 101, 168, 0.9);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
}

.buzz-composer-status.is-error {
  color: #b72562;
}

.buzz-composer-status[hidden],
.buzz-composer-media-preview[hidden],
.buzz-composer-panel[hidden] {
  display: none;
}

.buzz-composer-media-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: min(100%, 460px);
}

.buzz-composer-media-preview.is-double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.buzz-composer-media-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-width: 0;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
}

.buzz-composer-media-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.buzz-composer-media-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 19, 63, 0.72);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.buzz-composer-panel {
  width: min(100%, 460px);
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px;
}

.buzz-emoji-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 186px;
  overflow-y: auto;
}

.buzz-emoji-option {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0;
}

.buzz-emoji-option-image {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  pointer-events: none;
}

.buzz-emoji-option:hover,
.buzz-emoji-option:focus-visible {
  background: rgba(99, 217, 202, 0.14);
}

.buzz-poll-panel {
  display: grid;
  gap: 8px;
}

.buzz-poll-builder-options {
  display: grid;
  gap: 6px;
}

.buzz-poll-builder-options input {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 7px 10px;
}

.buzz-poll-builder-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.buzz-poll-builder-button {
  min-height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(7, 19, 63, 0.08);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 6px 10px;
}

.buzz-poll-builder-button:hover,
.buzz-poll-builder-button:focus-visible {
  background: rgba(99, 217, 202, 0.18);
}

.buzz-poll-duration {
  position: relative;
  display: inline-flex;
}

.buzz-poll-duration-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(7, 19, 63, 0.08);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.buzz-poll-duration-button:hover,
.buzz-poll-duration-button:focus-visible,
.buzz-poll-duration.is-open .buzz-poll-duration-button {
  background: rgba(99, 217, 202, 0.18);
}

.buzz-poll-duration-clock {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.buzz-poll-duration-clock::before,
.buzz-poll-duration-clock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border-radius: 999px;
  background: currentColor;
  transform-origin: left center;
}

.buzz-poll-duration-clock::before {
  width: 2px;
  height: 5px;
  transform: translate(-50%, -100%);
}

.buzz-poll-duration-clock::after {
  width: 5px;
  height: 2px;
  transform: translateY(-50%) rotate(-35deg);
}

.buzz-poll-duration-menu {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 30px rgba(7, 19, 63, 0.14);
  padding: 5px;
  transform: translateY(-50%);
}

.buzz-poll-duration-menu[hidden] {
  display: none;
}

.buzz-poll-duration-option {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 5px 8px;
  text-align: left;
  white-space: nowrap;
}

.buzz-poll-duration-option:hover,
.buzz-poll-duration-option:focus-visible,
.buzz-poll-duration-option.is-selected {
  background: rgba(99, 217, 202, 0.16);
}

@media (max-width: 640px) {
  .buzz-poll-duration-menu {
    right: 0;
    bottom: calc(100% + 6px);
    left: auto;
    top: auto;
    transform: none;
  }
}

.buzz-composer-tools {
  grid-column: 2 / 3;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-height: 42px;
}

.buzz-tool {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(7, 19, 63, 0.52);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: none;
  padding: 0;
}

.buzz-tool img {
  display: block;
  width: auto;
  height: auto;
  max-width: 20px;
  max-height: 20px;
  object-fit: contain;
}

.buzz-tool:hover,
.buzz-tool:focus-visible,
.buzz-tool.is-active {
  background: rgba(99, 217, 202, 0.16);
  color: var(--ink);
}

.buzz-tool:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.buzz-tool:focus-visible,
.buzz-post-submit:focus-visible,
.buzz-show-posts:focus-visible,
.buzz-search-bar input:focus-visible,
.buzz-search-clear:focus-visible,
.buzz-rail-button:focus-visible,
.buzz-feed-tabs button:focus-visible,
.buzz-follow-topic:focus-visible,
.buzz-follow-topic-form input:focus-visible,
.buzz-follow-topic-submit:focus-visible,
.buzz-follow-topic-cancel:focus-visible,
.buzz-tag-context-menu button:focus-visible,
.buzz-composer-media-remove:focus-visible,
.buzz-emoji-option:focus-visible,
.buzz-poll-builder-options input:focus-visible,
.buzz-poll-builder-button:focus-visible,
.buzz-poll-duration-button:focus-visible,
.buzz-poll-duration-option:focus-visible,
.profile-buzz-menu-toggle:focus-visible,
.profile-buzz-menu-item:focus-visible,
.profile-buzz-spoiler-reveal:focus-visible,
.profile-buzz-poll-choice:focus-visible,
.buzz-confirmation-button:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.55);
  outline-offset: 2px;
}

.buzz-post-submit {
  grid-column: 3 / 4;
  justify-self: end;
  align-self: center;
  min-width: 96px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #75E7D8, var(--aqua));
  color: var(--ink);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 900;
  padding: 8px 18px;
  box-shadow: 0 3px 0 rgba(7, 19, 63, 0.16);
}

.buzz-post-submit:disabled {
  cursor: not-allowed;
  background: rgba(99, 217, 202, 0.24);
  color: rgba(7, 19, 63, 0.48);
  box-shadow: none;
}

.buzz-show-posts {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-top: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.34);
  color: var(--aqua);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  box-shadow: none;
}

.buzz-load-more {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 253, 0.58)),
    rgba(246, 248, 255, 0.74);
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.02rem;
  font-weight: 900;
  padding: 9px 14px;
  box-shadow: 0 2px 6px rgba(7, 19, 63, 0.06);
}

.buzz-load-more:hover,
.buzz-load-more:focus-visible {
  background: rgba(99, 217, 202, 0.18);
}

.buzz-load-more[hidden] {
  display: none;
}

.buzz-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0 0 12px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 248, 253, 0.62)),
    rgba(246, 248, 255, 0.78);
  padding: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 20px rgba(7, 19, 63, 0.08);
}

.buzz-search-bar[hidden] {
  display: none;
}

.buzz-search-bar input {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  padding: 8px 12px;
}

.buzz-search-bar input::placeholder {
  color: rgba(7, 19, 63, 0.42);
}

.buzz-search-clear {
  min-width: 68px;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: rgba(7, 19, 63, 0.08);
  color: rgba(7, 19, 63, 0.62);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  padding: 8px 12px;
}

.buzz-search-clear:hover,
.buzz-search-clear:focus-visible {
  background: rgba(99, 217, 202, 0.16);
  color: var(--ink);
}

.buzz-column-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.buzz-page-panel .buzz-column-heading h1,
.buzz-page-panel .buzz-column-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

.buzz-column-heading p {
  margin: 0;
  max-width: 28ch;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
}

.buzz-feed-list {
  align-content: start;
}

.buzz-feed-post[hidden] {
  display: none;
}

.buzz-feed-post {
  border-color: rgba(7, 19, 63, 0.1);
  cursor: pointer;
}

.buzz-feed-post button {
  cursor: pointer;
}

.buzz-page-panel .profile-buzz-post-actions {
  gap: clamp(18px, 3vw, 34px);
}

.buzz-top-column,
.buzz-news-column {
  position: sticky;
  top: 14px;
  padding: 14px;
}

.buzz-news-column {
  position: static;
}

.buzz-top-list {
  gap: 8px;
}

.buzz-top-list .profile-buzz-post {
  padding: 9px 10px;
}

.buzz-top-list .profile-buzz-post.has-buzz-menu {
  padding-right: 38px;
}

.buzz-top-rank {
  margin-left: auto;
  color: var(--pink);
  font-weight: 900;
}

.buzz-news-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 0 0 12px;
  padding: 0 0 2px;
}

.buzz-news-tabs button {
  flex: 0 0 auto;
  min-height: 30px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: rgba(7, 19, 63, 0.58);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  padding: 7px 10px;
  white-space: nowrap;
}

.buzz-news-tabs button:hover,
.buzz-news-tabs button:focus-visible,
.buzz-news-tabs button.is-active {
  border-color: rgba(7, 19, 63, 0.18);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
}

.buzz-news-tabs button.is-active {
  box-shadow: inset 0 -3px 0 rgba(99, 217, 202, 0.92);
}

.buzz-news-tabs button:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.72);
  outline-offset: 2px;
}

.buzz-news-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buzz-news-card {
  min-width: 0;
}

.buzz-news-card-shell {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: #303033;
  color: #F5F6FA;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 18px rgba(7, 19, 63, 0.16);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.buzz-news-card.is-featured .buzz-news-card-shell {
  margin-bottom: 4px;
}

.buzz-news-card.is-compact .buzz-news-card-shell {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: stretch;
  min-height: 94px;
  border-color: rgba(7, 19, 63, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(246, 248, 255, 0.66)),
    rgba(255, 255, 255, 0.72);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 2px 8px rgba(7, 19, 63, 0.06);
}

.buzz-news-card-shell:hover,
.buzz-news-card:focus-within .buzz-news-card-shell {
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(7, 19, 63, 0.22);
  transform: translateY(-1px);
}

.buzz-news-card.is-compact .buzz-news-card-shell:hover,
.buzz-news-card.is-compact:focus-within .buzz-news-card-shell {
  border-color: rgba(7, 19, 63, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 6px 14px rgba(7, 19, 63, 0.1);
}

.buzz-news-expand:focus-visible,
.buzz-news-open:focus-visible,
.buzz-news-article-close:focus-visible,
.buzz-news-article-link:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.72);
  outline-offset: 3px;
}

.buzz-news-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #202126;
}

.buzz-news-card.is-featured .buzz-news-media {
  aspect-ratio: 16 / 11;
}

.buzz-news-card.is-compact .buzz-news-media {
  width: 82px;
  height: 100%;
  min-height: 94px;
  aspect-ratio: auto;
}

.buzz-news-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.buzz-news-image-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, rgba(240, 92, 157, 0.58), rgba(99, 217, 202, 0.52)),
    linear-gradient(0deg, #22242B, #393A44);
}

.buzz-news-image-fallback span {
  max-width: 80%;
  color: rgba(255, 255, 255, 0.9);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
}

.buzz-news-card.is-compact .buzz-news-image-fallback span {
  display: none;
}

.buzz-news-rank {
  position: absolute;
  top: 9px;
  right: 9px;
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  padding: 5px 8px;
}

.buzz-news-section {
  position: absolute;
  left: 9px;
  bottom: 9px;
  max-width: calc(100% - 18px);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #FFFFFF;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
  padding: 6px 9px;
  text-transform: uppercase;
}

.buzz-news-card.is-compact .buzz-news-rank {
  top: 6px;
  right: 6px;
  min-width: 30px;
  min-height: 24px;
  font-size: 0.7rem;
  padding: 4px 7px;
}

.buzz-news-card.is-compact .buzz-news-section {
  display: none;
}

.buzz-news-card-body {
  display: grid;
  gap: 9px;
  padding: 13px 14px 14px;
  background: #303033;
}

.buzz-news-card.is-compact .buzz-news-card-body {
  gap: 5px;
  align-content: center;
  padding: 9px 10px;
  background: transparent;
}

.buzz-news-card h3 {
  margin: 0;
  color: #FFFFFF;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
}

.buzz-news-card.is-compact h3 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.04;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.buzz-news-summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.buzz-news-card.is-expanded .buzz-news-summary {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.buzz-news-card.is-compact .buzz-news-summary {
  display: none;
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.78rem;
}

.buzz-news-card.is-compact.is-expanded .buzz-news-summary {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.buzz-news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
}

.buzz-news-card.is-compact .buzz-news-meta {
  gap: 5px;
  color: rgba(73, 101, 168, 0.86);
  font-size: 0.74rem;
}

.buzz-news-source-mark {
  display: inline-block;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border: 3px dotted rgba(255, 255, 255, 0.86);
  border-radius: 50%;
}

.buzz-news-card.is-compact .buzz-news-source-mark {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(73, 101, 168, 0.58);
}

.buzz-news-meta time {
  margin-left: auto;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.76rem;
}

.buzz-news-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.buzz-news-card.is-compact .buzz-news-card-actions {
  gap: 7px;
  margin-top: 2px;
}

.buzz-news-expand,
.buzz-news-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 33px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  padding: 8px 14px;
  text-decoration: none;
}

.buzz-news-card.is-compact .buzz-news-expand,
.buzz-news-card.is-compact .buzz-news-open {
  min-height: 26px;
  font-size: 0.74rem;
  padding: 5px 9px;
}

.buzz-news-expand {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.84);
  box-shadow: none;
}

.buzz-news-card.is-compact .buzz-news-expand {
  background: rgba(7, 19, 63, 0.07);
  color: rgba(7, 19, 63, 0.62);
}

.buzz-news-open {
  margin-left: auto;
  background: rgba(99, 217, 202, 0.9);
  color: #07133F;
}

.buzz-news-open.is-disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

.buzz-news-expand:hover,
.buzz-news-expand:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

.buzz-news-open:hover,
.buzz-news-open:focus-visible {
  background: #75E7D8;
}

body.is-buzz-news-modal-open {
  overflow: hidden;
}

.buzz-news-modal[hidden] {
  display: none;
}

.buzz-news-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 4vw, 42px);
}

.buzz-news-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 19, 63, 0.62);
  backdrop-filter: blur(10px);
}

.buzz-news-article {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  background: #F7F9FC;
  color: var(--ink);
  box-shadow: 0 28px 70px rgba(7, 19, 63, 0.32);
}

.buzz-news-article-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.78);
  color: #FFFFFF;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  padding: 8px 12px;
}

.buzz-news-article-close:hover,
.buzz-news-article-close:focus-visible {
  background: var(--pink);
}

.buzz-news-article-media {
  position: relative;
  height: clamp(150px, 24dvh, 230px);
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(240, 92, 157, 0.18), rgba(99, 217, 202, 0.16)),
    #202126;
}

.buzz-news-article-media img {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: contain;
  padding: 14px;
}

.buzz-news-article-body {
  display: grid;
  gap: 14px;
  padding: clamp(22px, 4vw, 34px);
}

.buzz-news-article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: rgba(73, 101, 168, 0.9);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
}

.buzz-news-article-meta time {
  margin-left: auto;
  color: rgba(7, 19, 63, 0.48);
}

.buzz-news-article-section {
  justify-self: start;
  margin: 0;
  border-radius: 999px;
  background: rgba(99, 217, 202, 0.2);
  color: rgba(7, 19, 63, 0.82);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  padding: 8px 11px;
  text-transform: uppercase;
}

.buzz-news-article h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.buzz-news-article-copy {
  margin: 0;
  color: rgba(7, 19, 63, 0.74);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
}

.buzz-news-article-link {
  justify-self: start;
  min-height: 38px;
  border-radius: 999px;
  background: rgba(240, 92, 157, 0.92);
  color: #FFFFFF;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1;
  padding: 11px 15px;
  text-decoration: none;
}

.buzz-news-article-link:hover,
.buzz-news-article-link:focus-visible {
  background: #F05C9D;
}

.buzz-notification-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buzz-notification-list[hidden] {
  display: none;
}

.buzz-notification-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 248, 253, 0.58)),
    rgba(246, 248, 255, 0.74);
  color: var(--ink);
  padding: 12px;
  box-shadow: 0 6px 16px rgba(7, 19, 63, 0.07);
}

.buzz-notification-item.is-unread {
  border-color: rgba(240, 92, 157, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 248, 253, 0.94), rgba(217, 227, 255, 0.66)),
    rgba(255, 255, 255, 0.78);
}

.buzz-notification-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(99, 217, 202, 0.16);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 900;
}

.buzz-notification-copy {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.25;
}

.buzz-notification-copy strong {
  font-weight: 900;
}

.buzz-notification-copy a {
  color: var(--ink);
  text-decoration: none;
}

.buzz-notification-copy a:hover,
.buzz-notification-copy a:focus-visible {
  color: #237F98;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.buzz-notification-post {
  display: block;
  margin-top: 4px;
  color: rgba(73, 101, 168, 0.78);
  font-size: 0.82rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buzz-settings-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.buzz-settings-panel[hidden] {
  display: none;
}

.buzz-settings-card {
  border-radius: 8px;
}

.buzz-muted-term-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.buzz-settings-add {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: #F05C9D;
  color: #FFFFFF;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1;
  padding: 10px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 6px 13px rgba(240, 92, 157, 0.18);
}

.buzz-settings-add:hover,
.buzz-settings-add:focus-visible {
  background: #D93685;
}

.buzz-muted-term-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.buzz-muted-term-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  padding: 5px 5px 5px 10px;
}

.buzz-muted-term-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.buzz-muted-term-chip button {
  border: 0;
  border-radius: 999px;
  background: rgba(240, 92, 157, 0.12);
  color: #B51C66;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  padding: 6px 8px;
}

.buzz-notification-setting-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.55fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid rgba(73, 101, 168, 0.11);
  padding-top: 10px;
}

.buzz-notification-setting-row strong {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
}

.buzz-notification-segmented {
  justify-self: end;
}

@media (max-width: 680px) {
  .buzz-muted-term-form,
  .buzz-notification-setting-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .buzz-notification-segmented {
    justify-self: stretch;
    width: 100%;
  }
}

.buzz-empty-state {
  margin: 8px 0 0;
  border: 1px dashed rgba(7, 19, 63, 0.18);
  border-radius: 8px;
  color: var(--muted);
  font-weight: 900;
  padding: 18px;
}

.buzz-confirmation-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 19, 63, 0.32);
  backdrop-filter: blur(6px);
}

.buzz-confirmation-backdrop[hidden] {
  display: none;
}

.buzz-confirmation-dialog {
  display: grid;
  gap: 14px;
  width: min(100%, 390px);
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 248, 253, 0.9)),
    rgba(246, 248, 255, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 42px rgba(7, 19, 63, 0.24);
  color: var(--ink);
  padding: 22px;
}

.buzz-confirmation-dialog h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.buzz-confirmation-dialog p {
  margin: 0;
  color: rgba(73, 101, 168, 0.82);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.28;
}

.buzz-confirmation-button {
  min-height: 46px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  padding: 11px 18px;
}

.buzz-confirmation-button.is-danger {
  margin-top: 4px;
  border: 0;
  background: linear-gradient(180deg, #f36d97, #d92f70);
  color: #ffffff;
  box-shadow: 0 3px 0 rgba(111, 15, 59, 0.2);
}

.buzz-confirmation-button.is-danger:hover,
.buzz-confirmation-button.is-danger:focus-visible {
  background: linear-gradient(180deg, #ff7aa5, #d92f70);
}

.buzz-confirmation-button.is-cancel {
  border: 2px solid rgba(73, 101, 168, 0.42);
  background: rgba(255, 255, 255, 0.56);
  color: var(--ink);
}

.buzz-confirmation-button.is-cancel:hover,
.buzz-confirmation-button.is-cancel:focus-visible {
  border-color: rgba(99, 217, 202, 0.68);
  background: rgba(99, 217, 202, 0.14);
}

.buzz-detail-panel {
  width: 100%;
  margin: 0;
}

.buzz-detail-shell {
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 248, 253, 0.62)),
    rgba(246, 248, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 20px rgba(7, 19, 63, 0.08);
}

.buzz-detail-head {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.14);
  padding: 12px 22px;
}

.buzz-detail-head h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1;
}

.buzz-detail-back {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.buzz-detail-back img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.buzz-detail-back:hover,
.buzz-detail-back:focus-visible {
  background: rgba(99, 217, 202, 0.14);
}

.buzz-detail-back:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.55);
  outline-offset: 2px;
}

.buzz-detail-post .profile-buzz-post {
  border-width: 0 0 1px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 22px;
}

.buzz-detail-post .profile-buzz-post.has-buzz-menu {
  padding-right: 56px;
}

.buzz-detail-post .profile-buzz-post.has-buzz-verification {
  background:
    linear-gradient(90deg, var(--buzz-verified-detail-tint), rgba(255, 255, 255, 0) 72%),
    transparent;
}

.buzz-detail-post .profile-buzz-avatar {
  width: 54px;
  height: 54px;
}

.buzz-detail-post .profile-buzz-post-meta {
  font-size: 0.92rem;
}

.buzz-detail-post .profile-buzz-post-meta strong {
  font-size: 1.08rem;
}

.buzz-detail-post .buzz-verified-badge,
.buzz-detail-post .buzz-verified-icon {
  width: 16px;
  height: 16px;
}

.buzz-detail-post .profile-buzz-post-text {
  margin-top: 10px;
  font-size: clamp(1.12rem, 2.2vw, 1.45rem);
  line-height: 1.28;
}

.buzz-detail-post .profile-buzz-post-actions {
  margin-top: 18px;
}

.buzz-reply-composer {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px 12px;
  align-items: start;
  border-top: 1px solid rgba(7, 19, 63, 0.12);
  padding: 16px 22px;
}

.buzz-reply-composer .buzz-composer-avatar {
  grid-row: 1 / span 3;
  width: 44px;
  height: 44px;
}

.buzz-reply-context {
  grid-column: 2 / 4;
  margin: 0;
  color: rgba(73, 101, 168, 0.82);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.2;
}

.buzz-reply-context[hidden] {
  display: none;
}

.buzz-reply-composer textarea {
  grid-column: 2 / 3;
  min-height: 50px;
  width: 100%;
  resize: vertical;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 7px 0;
}

.buzz-reply-composer textarea::placeholder {
  color: rgba(7, 19, 63, 0.42);
}

.buzz-reply-composer textarea:focus {
  outline: none;
}

.buzz-reply-composer.is-drag-over {
  outline: 2px dashed rgba(99, 217, 202, 0.72);
  outline-offset: -8px;
  background: rgba(99, 217, 202, 0.08);
}

.buzz-reply-composer .buzz-composer-extras {
  grid-column: 2 / 4;
}

.buzz-reply-composer .buzz-composer-tools {
  grid-column: 2 / 3;
  min-height: 32px;
  gap: 12px;
}

.buzz-reply-composer .buzz-tool {
  width: 28px;
  height: 28px;
}

.buzz-reply-composer .buzz-composer-media-preview,
.buzz-reply-composer .buzz-composer-panel {
  width: min(100%, 380px);
}

.buzz-guest-reply-callout {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(7, 19, 63, 0.12);
  padding: 14px 22px 16px;
}

.buzz-reply-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buzz-reply {
  --reply-indent: 34px;
  --reply-avatar-center: 42px;
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  margin-left: calc(var(--reply-depth, 0) * var(--reply-indent));
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  padding: 14px 22px;
}

.buzz-reply::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;
  left: var(--reply-avatar-center);
  width: 2px;
  border-radius: 999px;
  background: rgba(73, 101, 168, 0.2);
}

.buzz-reply:last-child::before {
  bottom: calc(100% - 36px);
}

.buzz-reply.is-threaded::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--reply-avatar-center) - var(--reply-indent));
  width: var(--reply-indent);
  height: 34px;
  border-bottom: 2px solid rgba(73, 101, 168, 0.2);
  border-left: 2px solid rgba(73, 101, 168, 0.2);
  border-bottom-left-radius: 14px;
  pointer-events: none;
}

.buzz-reply:first-child {
  border-top: 0;
}

.buzz-reply-avatar {
  position: relative;
  z-index: 1;
  display: block;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  box-shadow: 0 2px 5px rgba(7, 19, 63, 0.12);
}

.buzz-reply-avatar-link {
  position: relative;
  z-index: 1;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
}

.buzz-reply-avatar-link:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.72);
  outline-offset: 3px;
}

.buzz-reply-body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.buzz-reply-meta {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  color: rgba(73, 101, 168, 0.72);
  font-size: 0.82rem;
  line-height: 1.1;
}

.buzz-reply-meta strong {
  color: var(--buzz-username-color, var(--ink));
  font-family: var(--buzz-username-font, "Barlow Semi Condensed", Arial, Helvetica, sans-serif);
  font-size: 0.96rem;
  font-weight: 900;
}

.buzz-reply-author-link,
.buzz-reply-handle-link {
  color: inherit;
  text-decoration: none;
}

.buzz-reply-author-link:hover,
.buzz-reply-author-link:focus-visible,
.buzz-reply-handle-link:hover,
.buzz-reply-handle-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.buzz-reply-target {
  margin: 3px 0 0;
  color: rgba(73, 101, 168, 0.74);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.15;
}

.buzz-reply-meta time::before {
  content: "·";
  margin-right: 5px;
}

.buzz-reply-text {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.32;
}

.buzz-reply .profile-buzz-media {
  width: min(100%, 420px);
  margin-top: 7px;
}

.buzz-reply .profile-buzz-media.is-count-1 .profile-buzz-media-item {
  max-height: 280px;
}

.buzz-reply .profile-buzz-media-item img {
  max-height: 280px;
}

.buzz-reply-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 8px;
  color: rgba(73, 101, 168, 0.72);
}

.buzz-reply-actions button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 0;
}

.buzz-reply-like {
  min-height: 18px;
}

@media (max-width: 1080px) {
  .buzz-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .buzz-top-column,
  .buzz-news-column {
    position: static;
  }

  .buzz-news-column {
    grid-column: 1 / -1;
  }

  .buzz-news-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .buzz-page-grid {
    grid-template-columns: 1fr;
  }

  .buzz-main-column,
  .buzz-top-column,
  .buzz-news-column {
    grid-column: auto;
    grid-row: auto;
    position: static;
  }
}

@media (max-width: 680px) {
  .buzz-page-panel {
    padding: 8px 10px 28px;
  }

  .buzz-action-bar {
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .buzz-rail-button {
    flex: 0 0 auto;
    min-height: 28px;
    font-size: 0.95rem;
    padding: 0;
  }

  .buzz-feed-tabs {
    display: flex;
    overflow-x: auto;
  }

  .buzz-feed-tabs button {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 138px;
  }

  .buzz-follow-topic {
    min-width: 44px;
    width: 44px;
  }

  .buzz-guest-callout {
    align-items: stretch;
    flex-direction: column;
    padding: 16px 14px;
  }

  .buzz-guest-actions {
    justify-content: flex-start;
  }

  .buzz-guest-action img {
    height: 40px;
    max-width: 160px;
  }

  .buzz-guest-reply-callout a {
    min-height: 44px;
  }

  .buzz-composer {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 14px;
  }

  .buzz-composer-avatar {
    width: 44px;
    height: 44px;
  }

  .buzz-composer textarea,
  .buzz-composer-editor,
  .buzz-composer-extras,
  .buzz-composer-tools,
  .buzz-post-submit {
    grid-column: 2 / 3;
  }

  .buzz-post-submit {
    justify-self: start;
  }

  .buzz-detail-head {
    padding: 10px 14px;
  }

  .buzz-detail-post .profile-buzz-post {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px 14px;
  }

  .buzz-detail-post .profile-buzz-post.has-buzz-menu {
    padding-right: 48px;
  }

  .buzz-detail-post .profile-buzz-avatar {
    width: 44px;
    height: 44px;
  }

  .buzz-reply-composer {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 14px;
  }

  .buzz-reply-context,
  .buzz-reply-composer textarea,
  .buzz-reply-composer .buzz-composer-extras,
  .buzz-reply-composer .buzz-composer-tools,
  .buzz-reply-composer .buzz-post-submit {
    grid-column: 2 / 3;
  }

  .buzz-reply {
    --reply-indent: 18px;
    --reply-avatar-center: 34px;
    padding: 13px 14px;
  }

  .buzz-reply.is-threaded::after {
    height: 32px;
    border-bottom-left-radius: 10px;
  }

  .buzz-column-heading {
    display: block;
  }

  .buzz-column-heading p {
    margin-top: 4px;
    text-align: left;
  }

  .buzz-news-list {
    grid-template-columns: 1fr;
  }

  .buzz-news-card h3 {
    font-size: 1.22rem;
  }

  .buzz-news-modal {
    align-items: end;
    padding: 10px;
  }

  .buzz-news-article {
    max-height: calc(100dvh - 20px);
  }

  .buzz-news-article-media {
    height: 150px;
    min-height: 0;
  }

  .buzz-news-article-body {
    padding: 20px;
  }

  .buzz-news-article h2 {
    font-size: 2rem;
  }

  .buzz-news-article-meta {
    align-items: flex-start;
  }
}

body.show-page-bigbrother .show-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, 292px) minmax(320px, 1fr);
  align-items: start;
  gap: 14px;
  width: calc(100% - 20px);
  max-width: none;
  margin: 10px 10px 42px;
}

body.show-page-bigbrother .show-detail-layout .on-tv-panel {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  margin: 0;
}

body.show-page-bigbrother .bb-memory-panel {
  grid-column: 1;
  grid-row: 1;
}

body.show-page-bigbrother .show-ranking-rail-panel {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
}

body.show-page-bigbrother .show-detail-layout .on-tv-panel-inner {
  padding: 9px;
}

body.show-page-bigbrother .show-detail-layout .on-tv-calendar-heading {
  margin-bottom: 7px;
}

body.show-page-bigbrother .show-detail-layout .on-tv-calendar-heading h1 {
  font-size: 0.98rem;
}

body.show-page-bigbrother .show-detail-layout .on-tv-calendar-heading span {
  font-size: 0.58rem;
}

body.show-page-bigbrother .show-detail-layout .on-tv-airings {
  grid-template-columns: 1fr;
  gap: 5px;
}

body.show-page-bigbrother .show-detail-layout .on-tv-airing {
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 48px;
  gap: 10px;
  padding: 8px 10px;
}

body.show-page-bigbrother .show-detail-layout .on-tv-airing time {
  width: 58px;
  height: 24px;
  border-radius: 999px;
  font-size: 0.58rem;
  white-space: nowrap;
}

body.show-page-bigbrother .show-detail-layout .on-tv-airing strong {
  font-size: 0.82rem;
}

body.show-page-bigbrother .show-detail-layout .on-tv-airing span {
  margin-top: 2px;
  font-size: 0.7rem;
}

body.show-page-bigbrother .show-detail-layout .show-board-panel {
  grid-column: 2;
  grid-row: 2;
}

body.show-page-bigbrother .show-detail-layout .show-context-rail {
  grid-column: 1;
  grid-row: 2;
}

body.show-page-bigbrother .show-board-header,
body.show-page-bigbrother .show-board-controls,
body.show-page-bigbrother .show-thread-card {
  border-color: rgba(255, 153, 165, 0.38);
  background:
    linear-gradient(180deg, rgba(84, 0, 18, 0.86), rgba(30, 0, 7, 0.94)),
    rgba(43, 0, 8, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 184, 192, 0.16),
    0 16px 34px rgba(18, 0, 5, 0.28);
}

body.show-page-bigbrother .show-board-handle,
body.show-page-bigbrother .show-board-field span,
body.show-page-bigbrother .show-thread-meta {
  color: #ff9aa8;
}

body.show-page-bigbrother .show-board-header h1,
body.show-page-bigbrother .show-board-stats dt,
body.show-page-bigbrother .show-thread-votes strong,
body.show-page-bigbrother .show-thread-body h2,
body.show-page-bigbrother .show-reply-meta strong {
  color: #fff4f6;
}

body.show-page-bigbrother .show-board-stats div,
body.show-page-bigbrother .show-thread-votes,
body.show-page-bigbrother .show-reply-section {
  border-color: rgba(255, 153, 165, 0.18);
}

body.show-page-bigbrother .show-board-stats dd,
body.show-page-bigbrother .show-board-form-footer span,
body.show-page-bigbrother .show-reply-actions span,
body.show-page-bigbrother .show-reply-meta,
body.show-page-bigbrother .show-thread-actions a,
body.show-page-bigbrother .show-thread-actions button {
  color: rgba(255, 219, 224, 0.72);
}

body.show-page-bigbrother .show-section-tabs {
  border-bottom-color: rgba(255, 153, 165, 0.24);
}

body.show-page-bigbrother .show-section-tabs a {
  color: rgba(255, 219, 224, 0.68);
}

body.show-page-bigbrother .show-section-tabs a:hover,
body.show-page-bigbrother .show-section-tabs a:focus-visible {
  background: rgba(255, 124, 140, 0.1);
  color: #fff4f6;
}

body.show-page-bigbrother .show-section-tabs a.is-active {
  border-bottom-color: #ff9aa8;
  background: rgba(255, 124, 140, 0.14);
  color: #fff4f6;
}

body.show-page-bigbrother .show-board-post-form input,
body.show-page-bigbrother .show-board-post-form textarea,
body.show-page-bigbrother .show-reply-form textarea {
  border-color: rgba(255, 153, 165, 0.26);
  background: rgba(25, 0, 6, 0.64);
  color: #fff4f6;
}

body.show-page-bigbrother .show-board-post-form input::placeholder,
body.show-page-bigbrother .show-board-post-form textarea::placeholder,
body.show-page-bigbrother .show-reply-form textarea::placeholder {
  color: rgba(255, 219, 224, 0.52);
}

body.show-page-bigbrother .show-board-login-link,
body.show-page-bigbrother .show-board-compose-trigger,
body.show-page-bigbrother .show-board-form-footer button,
body.show-page-bigbrother .show-reply-actions button {
  background: #e80032;
  color: #ffffff;
}

body.show-page-bigbrother .show-board-tabs a {
  border-color: rgba(255, 153, 165, 0.22);
  background: rgba(25, 0, 6, 0.44);
  color: rgba(255, 219, 224, 0.74);
}

body.show-page-bigbrother .show-board-tabs a.is-active,
body.show-page-bigbrother .show-thread-flair {
  border-color: rgba(255, 153, 165, 0.34);
  background: rgba(255, 124, 140, 0.16);
  color: #fff4f6;
}

body.show-page-bigbrother .show-thread-votes {
  background: rgba(20, 0, 5, 0.36);
}

body.show-page-bigbrother .show-thread-votes button,
body.show-page-bigbrother .show-thread-votes a {
  color: rgba(255, 219, 224, 0.58);
}

body.show-page-bigbrother .show-thread-votes button:hover,
body.show-page-bigbrother .show-thread-votes button:focus-visible,
body.show-page-bigbrother .show-thread-votes a:hover,
body.show-page-bigbrother .show-thread-votes a:focus-visible,
body.show-page-bigbrother .show-thread-votes button.is-active,
body.show-page-bigbrother .show-thread-body h2 a:hover,
body.show-page-bigbrother .show-thread-body h2 a:focus-visible,
body.show-page-bigbrother .show-thread-actions a:hover,
body.show-page-bigbrother .show-thread-actions a:focus-visible,
body.show-page-bigbrother .show-thread-actions button:hover,
body.show-page-bigbrother .show-thread-actions button:focus-visible {
  color: #ffffff;
}

body.show-page-bigbrother .show-thread-state,
body.show-page-bigbrother .show-thread-card.has-spoiler .show-thread-state {
  background: rgba(232, 0, 50, 0.22);
  color: #ffdbe0;
}

body.show-page-bigbrother .show-thread-excerpt {
  color: rgba(255, 219, 224, 0.78);
}

body.show-page-bigbrother .show-thread-content,
body.show-page-bigbrother .show-reply-content {
  color: rgba(255, 219, 224, 0.82);
}

body.show-page-bigbrother .show-reply-card {
  border-color: rgba(255, 153, 165, 0.18);
  background: rgba(25, 0, 6, 0.38);
}

body.show-page-bigbrother .show-thread-share-box {
  border-color: rgba(255, 153, 165, 0.18);
  background: rgba(25, 0, 6, 0.38);
}

body.show-page-bigbrother .show-thread-share-box input {
  border-color: rgba(255, 153, 165, 0.24);
  background: rgba(12, 0, 3, 0.72);
  color: #fff4f6;
}

body.show-page-bigbrother .show-thread-share-box button {
  background: #e80032;
  color: #ffffff;
}

body.show-page-bigbrother .show-thread-share-box span {
  color: rgba(255, 219, 224, 0.72);
}

body.show-page-bigbrother .show-thread-tags span {
  background: rgba(255, 124, 140, 0.12);
  color: rgba(255, 219, 224, 0.72);
}

body.show-page-bigbrother .show-thread-actions .show-thread-delete-button,
body.show-page-bigbrother .show-reply-delete-form .show-thread-delete-button {
  color: #ff9aa8;
}

body.show-page-bigbrother .show-reply-delete-form .show-thread-delete-button {
  border-color: rgba(255, 153, 165, 0.2);
  background: rgba(255, 124, 140, 0.1);
}

body.show-page-bigbrother .show-thread-empty {
  border-color: rgba(255, 153, 165, 0.34);
  background:
    linear-gradient(180deg, rgba(84, 0, 18, 0.74), rgba(30, 0, 7, 0.86)),
    rgba(43, 0, 8, 0.86);
  color: rgba(255, 219, 224, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 184, 192, 0.14),
    0 12px 24px rgba(18, 0, 5, 0.2);
}

body.show-page-bigbrother .show-rankings-panel,
body.show-page-bigbrother .show-ranking-rail-panel,
body.show-page-bigbrother .show-section-empty,
body.show-page-bigbrother .show-section-embed {
  border-color: rgba(255, 153, 165, 0.38);
  background:
    linear-gradient(180deg, rgba(84, 0, 18, 0.86), rgba(30, 0, 7, 0.94)),
    rgba(43, 0, 8, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 184, 192, 0.16),
    0 16px 34px rgba(18, 0, 5, 0.28);
}

body.show-page-bigbrother .show-rankings-header,
body.show-page-bigbrother .show-rankings-editor,
body.show-page-bigbrother .show-rankings-editor .show-rankings-form,
body.show-page-bigbrother .show-ranking-rail-heading,
body.show-page-bigbrother .show-rankings-footer,
body.show-page-bigbrother .show-rankings-results,
body.show-page-bigbrother .show-rankings-results-empty {
  border-color: rgba(255, 153, 165, 0.18);
}

body.show-page-bigbrother .show-rankings-header span,
body.show-page-bigbrother .show-rankings-header time,
body.show-page-bigbrother .show-rankings-footer span,
body.show-page-bigbrother .show-rankings-results header span,
body.show-page-bigbrother .show-ranking-rail-heading span,
body.show-page-bigbrother .show-ranking-rail-stats span,
body.show-page-bigbrother .show-ranking-rail-scale,
body.show-page-bigbrother .show-rankings-results-empty,
body.show-page-bigbrother .show-section-empty {
  color: rgba(255, 219, 224, 0.72);
}

body.show-page-bigbrother .show-rankings-header h2,
body.show-page-bigbrother .show-rankings-results h3,
body.show-page-bigbrother .show-ranking-rail-heading h2,
body.show-page-bigbrother .show-ranking-rail-stats b,
body.show-page-bigbrother .show-ranking-rail-stats strong,
body.show-page-bigbrother .show-ranking-player strong,
body.show-page-bigbrother .show-ranking-player > span,
body.show-page-bigbrother .show-rankings-results-grid thead th:first-child,
body.show-page-bigbrother .show-rankings-results-grid tbody th,
body.show-page-bigbrother .show-rankings-grid thead th:first-child,
body.show-page-bigbrother .show-rankings-grid tbody th {
  color: #fff4f6;
}

body.show-page-bigbrother .show-rankings-results {
  background: rgba(20, 0, 5, 0.2);
}

body.show-page-bigbrother .show-rankings-grid thead th {
  background: rgba(20, 0, 5, 0.5);
}

body.show-page-bigbrother .show-rankings-results-grid thead th {
  background: rgba(20, 0, 5, 0.72);
  color: #fff4f6;
}

body.show-page-bigbrother .show-rankings-grid thead th:first-child,
body.show-page-bigbrother .show-rankings-results-grid thead th:first-child,
body.show-page-bigbrother .show-rankings-results-grid tbody th,
body.show-page-bigbrother .show-rankings-grid tbody th {
  background: rgba(30, 0, 7, 0.98);
}

body.show-page-bigbrother .show-rankings-grid tbody tr:nth-child(odd) td {
  background: rgba(255, 124, 140, 0.08);
}

body.show-page-bigbrother .show-rankings-results-grid tbody tr:nth-child(odd) td {
  background: rgba(255, 124, 140, 0.1);
}

body.show-page-bigbrother .show-ranking-rail-item:nth-child(odd) {
  background: rgba(255, 124, 140, 0.1);
}

body.show-page-bigbrother .show-rankings-grid tbody tr:nth-child(even) td {
  background: rgba(25, 0, 6, 0.34);
}

body.show-page-bigbrother .show-rankings-results-grid tbody tr:nth-child(even) td {
  background: rgba(25, 0, 6, 0.4);
}

body.show-page-bigbrother .show-ranking-rail-item:nth-child(even) {
  background: rgba(25, 0, 6, 0.4);
}

body.show-page-bigbrother .show-ranking-rail-bars {
  border-bottom-color: rgba(255, 219, 224, 0.34);
}

body.show-page-bigbrother .show-ranking-rail-bars span {
  background: #e80086;
}

body.show-page-bigbrother .show-ranking-player img,
body.show-page-bigbrother .show-ranking-result-player img,
body.show-page-bigbrother .show-ranking-result-player > span,
body.show-page-bigbrother .show-ranking-rail-player img,
body.show-page-bigbrother .show-ranking-rail-player > span,
body.show-page-bigbrother .show-ranking-player > span {
  background: rgba(25, 0, 6, 0.64);
}

body.show-page-bigbrother .show-ranking-result-player strong {
  background: transparent;
  color: #fff4f6;
}

body.show-page-bigbrother .show-ranking-rail-player strong {
  background: rgba(255, 244, 246, 0.86);
  color: #3a000b;
}

body.show-page-bigbrother .show-ranking-choice span {
  border-color: rgba(255, 153, 165, 0.28);
  background: rgba(255, 244, 246, 0.92);
}

body.show-page-bigbrother .show-ranking-choice input:checked + span {
  border-color: #ff9aa8;
  background:
    radial-gradient(circle at 50% 50%, #e80032 0 34%, transparent 38%),
    rgba(255, 244, 246, 0.96);
}

body.show-page-bigbrother .show-rankings-footer button,
body.show-page-bigbrother .show-rankings-editor summary,
body.show-page-bigbrother .show-rankings-footer a {
  background: #e80032;
}

body.show-page-bigbrother .show-rankings-footer .show-rankings-secondary-button {
  border-color: rgba(255, 153, 165, 0.28);
  background: rgba(25, 0, 6, 0.5);
  color: #ffdbe0;
}

.bb-memory-panel {
  --bb-memory-card-size: clamp(41px, 3.1vw, 48px);
  position: relative;
  z-index: 25;
  min-width: 0;
  border: 3px solid rgba(255, 153, 165, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(84, 0, 18, 0.82), rgba(28, 0, 7, 0.92)),
    rgba(43, 0, 8, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 184, 192, 0.18),
    0 20px 42px rgba(18, 0, 5, 0.34);
  padding: 9px;
  -webkit-backdrop-filter: blur(2px) saturate(120%);
  backdrop-filter: blur(2px) saturate(120%);
}

.bb-memory-admin-trigger {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 2px solid rgba(255, 153, 165, 0.42);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    #e80032;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 6px 14px rgba(18, 0, 5, 0.28);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  opacity: 0;
  padding: 6px 9px;
  text-transform: uppercase;
  transform: translateY(-3px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.bb-memory-panel:hover .bb-memory-admin-trigger,
.bb-memory-admin-trigger:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.bb-memory-admin-trigger:focus-visible {
  outline: 2px solid #7ce4dc;
  outline-offset: 2px;
}

.bb-memory-save-status {
  margin: 0 0 7px;
  border: 1px solid rgba(255, 153, 165, 0.28);
  border-radius: 6px;
  background: rgba(255, 244, 246, 0.1);
  color: #ffdbe0;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.2;
  padding: 6px 7px;
}

.bb-memory-save-status.is-success {
  border-color: rgba(124, 228, 220, 0.32);
  background: rgba(124, 228, 220, 0.12);
  color: #bafbf7;
}

.bb-memory-save-status.is-error {
  border-color: rgba(255, 153, 165, 0.5);
  background: rgba(232, 0, 50, 0.16);
  color: #ffdbe0;
}

body.is-bb-memory-admin-modal-open {
  overflow: hidden;
}

.bb-memory-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  padding: clamp(14px, 3vw, 28px);
}

.bb-memory-admin-modal[hidden] {
  display: none;
}

.bb-memory-admin-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(calc(100vw - 32px), 640px);
  max-height: min(760px, calc(100vh - 72px));
  max-height: min(760px, calc(100dvh - 72px));
  overflow: hidden;
  border-color: rgba(255, 153, 165, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 244, 246, 0.98), rgba(255, 255, 255, 0.96)),
    #fff;
}

.bb-memory-admin-modal *,
.bb-memory-admin-modal *::before,
.bb-memory-admin-modal *::after {
  box-sizing: border-box;
}

.bb-memory-admin-head h2 {
  color: #3a000b;
}

.bb-memory-admin-form {
  position: static;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  width: 100%;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.bb-memory-admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 4px;
}

.bb-memory-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(138px, 0.38fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 244, 255, 0.76)),
    #fff;
  padding: 7px 9px;
}

.bb-memory-admin-player {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.bb-memory-admin-player img,
.bb-memory-admin-player em {
  display: block;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  max-height: 44px;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 244, 246, 0.88);
  color: #3a000b;
  font-size: 0.92rem;
  font-style: normal;
  font-weight: 950;
  line-height: 44px;
  object-fit: cover;
  text-align: center;
}

.bb-memory-admin-player strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #07133f;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.bb-memory-admin-row select {
  min-width: 0;
  width: 100%;
  min-height: 34px;
  border: 2px solid rgba(73, 101, 168, 0.2);
  border-radius: 7px;
  background: #ffffff;
  color: #07133f;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 5px 8px;
}

.bb-memory-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.bb-memory-admin-save,
.bb-memory-admin-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 950;
  line-height: 1;
  padding: 9px 14px;
}

.bb-memory-admin-save {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
    #e80032;
  color: #ffffff;
}

.bb-memory-admin-cancel {
  background: #ffffff;
  color: #4965a8;
}

.bb-memory-admin-save:hover,
.bb-memory-admin-save:focus-visible,
.bb-memory-admin-cancel:hover,
.bb-memory-admin-cancel:focus-visible {
  outline: 2px solid #7ce4dc;
  outline-offset: 2px;
}

@media (hover: none) {
  .bb-memory-admin-trigger {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 520px) {
  .bb-memory-admin-row {
    grid-template-columns: 1fr;
  }

  .bb-memory-admin-row select {
    width: 100%;
  }
}

.bb-memory-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 7px;
}

.bb-memory-panel-heading span {
  color: var(--bb-red-light);
  font-size: 0.54rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bb-memory-panel-heading h1 {
  margin: 0;
  color: #fff4f6;
  font-size: 0.92rem;
  line-height: 1.05;
  text-shadow:
    0 0 12px rgba(255, 40, 72, 0.48),
    0 2px 0 rgba(18, 0, 5, 0.56);
}

.bb-memory-wall {
  display: grid;
  gap: 5px;
}

.bb-memory-row {
  display: grid;
  grid-template-columns: repeat(var(--bb-memory-row-count), var(--bb-memory-card-size));
  justify-content: center;
  gap: 5px;
}

.bb-memory-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(14px, auto);
  min-width: 0;
}

.bb-memory-photo {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--bb-status-color, #ffffff);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(255, 118, 134, 0.18), rgba(30, 0, 7, 0.78));
  box-shadow:
    inset 0 0 0 1px rgba(18, 0, 5, 0.22),
    0 3px 7px rgba(18, 0, 5, 0.22);
}

.bb-memory-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-memory-photo > span:not(.bb-memory-status) {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fff4f6;
  font-size: 2rem;
  font-weight: 900;
}

.bb-memory-status {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  min-width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 3px;
  background: var(--bb-status-color, #ffffff);
  color: #230007;
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(18, 0, 5, 0.28);
}

.bb-memory-card.is-evicted .bb-memory-status {
  color: #ffffff;
}

.bb-memory-card.is-evicted .bb-memory-photo img {
  filter: grayscale(1);
}

.bb-memory-card.is-nominated .bb-memory-status {
  color: #ffffff;
}

.bb-memory-card strong {
  display: block;
  min-width: 0;
  min-height: 14px;
  margin-top: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 172, 182, 0.2);
  border-radius: 3px;
  background: rgba(25, 0, 6, 0.72);
  color: #fff4f6;
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 1.05;
  padding: 3px 2px 2px;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.bb-memory-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 7px;
  margin: 8px 0 0;
  border-top: 1px solid rgba(255, 153, 165, 0.2);
  padding-top: 7px;
}

.bb-memory-key-item {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.bb-memory-key-item dt,
.bb-memory-key-item dd {
  margin: 0;
}

.bb-memory-key-item dt span {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 2px solid var(--bb-key-color, #ffffff);
  border-radius: 3px;
  background: color-mix(in srgb, var(--bb-key-color, #ffffff) 82%, #240006);
  color: #230007;
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(18, 0, 5, 0.2);
}

.bb-memory-key-item.is-nominated dt span {
  color: #ffffff;
}

.bb-memory-key-item dd {
  overflow: hidden;
  color: #ffdbe0;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blank-pages {
  min-height: 60vh;
}

.blank-pages .tab-panel {
  min-height: 60vh;
}

.memory-wall-section {
  position: relative;
  max-width: 1380px;
  margin: 0 auto 24px;
  padding: 0 18px;
}

.home-section-heading,
.column-heading {
  margin-bottom: 12px;
}

.home-section-heading p,
.column-heading p {
  margin: 0 0 3px;
  color: var(--pink);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-section-heading h1,
.column-heading h2 {
  margin: 0;
  color: var(--ink);
  line-height: 1.08;
}

.home-section-heading {
  text-align: center;
}

.home-section-heading h1 {
  font-size: clamp(1.8rem, 3vw, 2.9rem);
}

.magnate-heading {
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  padding: 8px 0 6px;
}

.magnate-logo {
  display: block;
  width: clamp(150px, 12vw, 178px);
  height: auto;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 3px rgba(255, 248, 253, 0.9))
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.8))
    drop-shadow(2px 2px 0 rgba(232, 133, 100, 0.36))
    drop-shadow(0 8px 12px rgba(7, 19, 63, 0.2));
}

.memory-wall {
  --cast-backing: #F6E6CD;
  --cast-accent: #ED8F6D;
  display: grid;
  grid-template-columns: repeat(8, minmax(74px, 1fr));
  gap: 8px;
  justify-content: center;
  max-width: 1140px;
  margin: 0 auto;
  border: 3px solid var(--cast-accent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 248, 235, 0.72), rgba(246, 230, 205, 0.94)),
    var(--cast-backing);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.54),
    0 10px 20px rgba(7, 19, 63, 0.12);
  padding: 10px;
}

.memory-card {
  min-width: 0;
  border: 2px solid color-mix(in srgb, var(--cast-accent) 72%, #ffffff);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 250, 241, 0.96), rgba(255, 255, 255, 0.9));
  box-shadow: 0 2px 0 rgba(237, 143, 109, 0.28);
  overflow: hidden;
  text-align: center;
}

.memory-portrait {
  position: relative;
  aspect-ratio: 1 / 1.14;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.5), transparent 34%),
    linear-gradient(180deg, #DDF8F2, #ffffff);
}

.memory-portrait::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 27%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #E8B984;
  box-shadow: 0 -10px 0 var(--ink);
}

.memory-portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 62%;
  height: 38%;
  border-radius: 50% 50% 0 0;
  transform: translateX(-50%);
  background: var(--portrait-shirt, var(--honey));
}

.memory-portrait span {
  position: absolute;
  inset: auto 18% 0;
  height: 24%;
  background: rgba(255, 255, 255, 0.2);
  clip-path: polygon(0 100%, 48% 0, 100% 100%);
  z-index: 1;
}

.memory-portrait.has-image::before,
.memory-portrait.has-image::after {
  display: none;
}

.memory-portrait.has-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

.portrait-1 { --portrait-shirt: var(--pink); }
.portrait-2 { --portrait-shirt: var(--aqua); }
.portrait-3 { --portrait-shirt: var(--yellow); }
.portrait-4 { --portrait-shirt: var(--orange); }
.portrait-5 { --portrait-shirt: #5E7FE8; }
.portrait-6 { --portrait-shirt: var(--ink); }
.portrait-7 { --portrait-shirt: #FFFFFF; }
.portrait-8 { --portrait-shirt: #FF8FC5; }

.memory-card h2 {
  margin: 6px 5px 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-card p {
  margin: 2px 5px 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.nominee-vote-banner {
  max-width: 1140px;
  margin: 12px auto 0;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(240, 92, 157, 0.18), rgba(99, 217, 202, 0.13) 48%, rgba(255, 216, 61, 0.2)),
    rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 20px rgba(7, 19, 63, 0.1);
  padding: 14px 20px;
}

.nominee-vote-copy {
  min-width: 0;
}

.nominee-vote-copy > p {
  margin: 0 0 3px;
  color: var(--pink);
  font-size: 0.88rem;
  font-weight: 900;
  text-transform: uppercase;
}

.nominee-vote-copy h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.6vw, 2.15rem);
  line-height: 1.05;
}

.nominee-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 9px;
}

.nominee-plea-grid {
  display: grid;
  flex: 1 1 820px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 12px;
  min-width: 0;
  max-width: 900px;
}

.nominee-list {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.nominee-plea-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  border: 2px solid rgba(240, 92, 157, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 248, 253, 0.72)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 4px 10px rgba(7, 19, 63, 0.08);
  min-height: 160px;
  padding: 12px;
}

.nominee-plea-head {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.nominee-plea-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nominee-plea-text {
  position: relative;
  margin: 0;
  border-radius: 16px 16px 16px 7px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.34;
  box-shadow:
    inset 0 0 0 2px rgba(240, 92, 157, 0.12),
    0 5px 12px rgba(7, 19, 63, 0.08);
  padding: 14px 16px;
}

.nominee-plea-text::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 25px;
  width: 18px;
  height: 18px;
  background: inherit;
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  box-shadow: inset 2px 2px 0 rgba(240, 92, 157, 0.12);
}

.nominee-plea-text.is-empty {
  color: rgba(73, 101, 168, 0.72);
  font-style: italic;
}

.nominee-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: min(178px, 100%);
  border: 2px solid rgba(240, 92, 157, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 4px 10px rgba(7, 19, 63, 0.08);
  padding: 7px 12px 7px 7px;
}

.nominee-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nominee-avatar {
  position: relative;
  width: 58px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.48), transparent 34%),
    linear-gradient(180deg, #DDF8F2, #ffffff);
  box-shadow:
    0 0 0 2px rgba(7, 19, 63, 0.08),
    0 6px 12px rgba(7, 19, 63, 0.18);
}

.nominee-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.nominee-vote-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  min-height: 48px;
  border: 3px solid rgba(255, 216, 61, 0.9);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF, #FFF4B8);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  padding: 10px 18px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 0 rgba(217, 154, 0, 0.28),
    0 10px 16px rgba(7, 19, 63, 0.1);
  transition: box-shadow 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.nominee-vote-button:hover,
.nominee-vote-button:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 4px 0 rgba(217, 154, 0, 0.34),
    0 0 0 3px rgba(255, 216, 61, 0.3),
    0 14px 20px rgba(7, 19, 63, 0.14);
  text-decoration: none;
  transform: translateY(-2px);
}

.nominee-vote-button:focus-visible {
  outline: 3px solid rgba(255, 216, 61, 0.46);
  outline-offset: 3px;
}

.nominee-vote-button.is-disabled {
  cursor: default;
  opacity: 0.68;
}

.nominee-vote-button.is-disabled:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 3px 0 rgba(217, 154, 0, 0.28),
    0 10px 16px rgba(7, 19, 63, 0.1);
  transform: none;
}

.home-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  gap: 18px;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 18px 34px;
}

.top-buzz,
.current-games {
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background: rgba(255, 248, 253, 0.68);
  box-shadow: var(--shadow);
}

.top-buzz,
.current-games {
  padding: 16px;
}

.buzz-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buzz-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid rgba(7, 19, 63, 0.12);
  padding: 11px 0 3px;
}

.buzz-list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.buzz-rank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFE872, var(--yellow));
  color: var(--ink);
  font-weight: 900;
}

.buzz-list strong {
  color: var(--pink);
  font-size: 0.95rem;
}

.buzz-list p {
  margin: 3px 0 5px;
  color: var(--ink);
  line-height: 1.35;
}

.buzz-list div > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.current-game-list {
  display: grid;
  gap: 10px;
}

.game-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 12px;
}

.game-filter {
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 6px 9px;
}

.game-filter.is-active {
  border-color: rgba(7, 19, 63, 0.26);
  background: linear-gradient(180deg, #75E7D8, var(--aqua));
  color: var(--ink);
}

.current-game {
  --game-accent: var(--play-accent, var(--pink));
  --game-soft: var(--play-soft, rgba(240, 92, 157, 0.16));
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 38%, #ffffff);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--game-soft), rgba(255, 255, 255, 0.78) 46%),
    rgba(255, 255, 255, 0.78);
  padding: 10px 12px;
}

.current-game.is-hidden {
  display: none;
}

.hof-section {
  --hof-hero-ink: #07133f;
  --hof-hero-pink: #f05c9d;
  --hof-hero-aqua: #63d9ca;
  --hof-hero-yellow: #ffd83d;
  --hof-hero-orange: #ff6840;
  max-width: 1380px;
  margin: 0 auto;
  padding: 8px 18px 44px;
}

.hof-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  align-items: stretch;
  gap: 18px;
  width: 100%;
  min-width: 0;
  min-height: 348px;
  overflow: hidden;
  max-width: 1244px;
  margin: 0 auto 18px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 216, 61, 0.78), rgba(99, 217, 202, 0.58) 42%, rgba(240, 92, 157, 0.36));
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 38px rgba(7, 19, 63, 0.14);
  padding: 24px;
}

.hof-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  max-width: 560px;
}

.hof-kicker {
  margin: 0;
  color: rgba(7, 19, 63, 0.7);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.hof-hero h1 {
  margin: 0;
  color: var(--hof-hero-pink);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 4.45rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.86;
  text-shadow:
    2px 0 0 #ffffff,
    -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    3px 3px 0 var(--hof-hero-yellow),
    5px 5px 0 rgba(99, 217, 202, 0.42),
    0 9px 14px rgba(7, 19, 63, 0.14);
}

.hof-hero-lede,
.hof-hero-subcopy {
  max-width: 46ch;
  margin: 0;
  color: rgba(7, 19, 63, 0.76);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.hof-hero-lede {
  color: var(--hof-hero-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.52rem;
  font-weight: 950;
  line-height: 1.08;
}

.hof-hero-subcopy {
  font-size: 0.98rem;
  font-weight: 800;
}

.hof-hero-subcopy strong {
  color: var(--hof-hero-ink);
  font-weight: 950;
}

.hof-heading {
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  gap: 12px;
  max-width: 1240px;
  margin: 0 auto 34px;
  text-align: center;
}

.hof-heading::after {
  content: "";
  display: block;
  width: min(128px, 34vw);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(7, 19, 63, 0.18), transparent);
}

.hof-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hof-heading h1 {
  margin: 0;
  color: var(--pink);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 3.8rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.9;
  text-shadow:
    2px 0 0 #ffffff,
    -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    3px 3px 0 var(--yellow),
    5px 5px 0 rgba(99, 217, 202, 0.42),
    0 9px 14px rgba(7, 19, 63, 0.14);
}

.hof-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  align-items: start;
  gap: 24px;
  max-width: 1380px;
  margin: 0 auto;
}

.hof-main-list {
  --hof-row-width: 1048px;
  min-width: 0;
  width: min(100%, 1104px);
}

.hof-subheading {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
  text-shadow:
    1px 0 0 #ffffff,
    -1px 0 0 #ffffff,
    0 1px 0 #ffffff,
    0 -1px 0 #ffffff,
    2px 2px 0 rgba(255, 216, 61, 0.72),
    0 7px 12px rgba(7, 19, 63, 0.1);
}

.hof-empty-state {
  min-width: 0;
  margin: 0;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 248, 253, 0.88)),
    rgba(255, 255, 255, 0.62);
  color: rgba(7, 19, 63, 0.68);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.22;
  padding: 14px 16px;
  text-align: center;
}

.hof-weekly {
  position: relative;
  min-width: 0;
  border-left: 0;
  padding: 0 0 0 18px;
}

.hof-weekly::before {
  content: "";
  position: absolute;
  top: 44px;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.hof-weekly .hof-subheading {
  margin-bottom: 8px;
  font-size: 1.82rem;
}

.hof-weekly-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.hof-weekly-list li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 64px;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(99, 217, 202, 0.12), rgba(255, 255, 255, 0.72)),
    rgba(255, 255, 255, 0.62);
  padding: 8px 10px 8px 8px;
}

.hof-weekly-rank {
  position: absolute;
  top: -6px;
  left: -6px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: linear-gradient(180deg, #FFE872, var(--yellow));
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 3px 6px rgba(7, 19, 63, 0.12);
}

.hof-weekly-avatar {
  display: block;
  width: 48px;
  height: 54px;
  border-radius: 7px;
  background: #D7E8F6;
  overflow: hidden;
}

.hof-weekly-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.hof-weekly-list strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-family: "Kimoru", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hof-weekly-list strong.is-long-name {
  font-size: 0.92rem;
}

.hof-weekly-list strong.is-extra-long-name {
  font-size: 0.84rem;
}

.hof-weekly-list .hof-score {
  margin-top: 5px;
  justify-content: flex-start;
  font-size: 0.9rem;
}

.hof-weekly-list .hof-score img {
  width: 16px;
  height: 16px;
}

.magnate-winners {
  --magnate-ink: #3D2430;
  --magnate-muted: #7B5361;
  --magnate-coral: #EC998C;
  --magnate-rose: #F7CAD0;
  --magnate-gold: #C8953D;
  --magnate-teal: #4FA79B;
  --magnate-name-font: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --magnate-status-font: "Baresno", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  --magnate-deco-font: "Decohead", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  width: min(100%, 1104px);
  margin: 20px 0 0;
}

.magnate-winners .hof-subheading {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  gap: 4px;
  color: var(--magnate-ink);
  font-family: var(--magnate-deco-font);
  font-size: clamp(1.38rem, 2vw, 1.88rem);
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-bottom: 4px;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 2px 0 rgba(200, 149, 61, 0.44);
  text-transform: uppercase;
}

.magnate-winners-logo {
  display: block;
  width: min(190px, 38vw);
  height: auto;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8))
    drop-shadow(0 4px 8px rgba(61, 36, 48, 0.14));
}

.magnate-winners .hof-subheading::after {
  content: "";
  width: min(160px, 36vw);
  height: 18px;
  background: url("game-assets/magnate/decoLine.png") center / contain no-repeat;
  opacity: 0.62;
}

.magnate-winner-list {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  max-width: 1048px;
}

.magnate-winner-card {
  --winner-accent: var(--magnate-coral);
  --winner-frame: #D7A08E;
  --winner-frame-deep: #A96B5C;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 252, 253, 0.98), rgba(255, 255, 255, 0.95)) padding-box,
    linear-gradient(145deg, #F0C9BC 0%, #C78370 48%, #F7DDD3 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 8px 15px rgba(61, 36, 48, 0.07);
  color: inherit;
  padding: 7px;
  text-align: center;
  text-decoration: none;
}

.magnate-winner-card:hover,
.magnate-winner-card:focus,
.magnate-winner-card:visited {
  color: inherit;
  text-decoration: none;
}

.magnate-winner-card:hover h3,
.magnate-winner-card:focus h3 {
  text-decoration: none;
}

.magnate-winner-card::before,
.magnate-winner-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.magnate-winner-card::before {
  inset: 5px;
  z-index: 1;
  border: 1px solid rgba(215, 160, 142, 0.22);
  border-radius: 6px;
}

.magnate-winner-card::after {
  display: none;
}

.magnate-winner-card:nth-child(1) {
  --winner-accent: var(--magnate-gold);
}

.magnate-winner-card:nth-child(2) {
  --winner-accent: var(--magnate-coral);
}

.magnate-winner-card:nth-child(3) {
  --winner-accent: #B5384A;
}

.magnate-winner-card:nth-child(4) {
  --winner-accent: var(--magnate-teal);
}

.magnate-winner-card:nth-child(5) {
  --winner-accent: #D7A85B;
}

.magnate-winner-photo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 400 / 540;
  overflow: hidden;
  border: 1px solid rgba(215, 160, 142, 0.48);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 251, 252, 0.72), rgba(255, 255, 255, 0.94));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.86);
}

.magnate-winner-photo::after {
  display: none;
}

.magnate-winner-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translate3d(0, 0, 0);
  transform-origin: center 30%;
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.magnate-winner-card:hover .magnate-winner-photo img,
.magnate-winner-card:focus .magnate-winner-photo img {
  transform: translate3d(0, 0, 0) scale(1.018);
}

.magnate-winner-frame {
  display: none;
}

.magnate-winner-frame.is-top-right {
  top: -6%;
  right: -6%;
}

.magnate-winner-frame.is-bottom-right {
  right: -6%;
  bottom: -6%;
  transform: rotate(90deg);
}

.magnate-winner-frame.is-bottom-left {
  bottom: -6%;
  left: -6%;
  transform: rotate(180deg);
}

.magnate-winner-frame.is-top-left {
  top: -6%;
  left: -6%;
  transform: rotate(270deg);
}

.magnate-winner-info {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 48px;
  width: 100%;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  background: transparent;
  padding: 8px 5px 10px;
}

.magnate-game-number {
  position: absolute;
  z-index: 3;
  right: 6px;
  bottom: 5px;
  display: block;
  color: rgba(61, 36, 48, 0.06);
  font-family: var(--magnate-deco-font);
  font-size: 0.5rem;
  font-synthesis: none;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.magnate-winner-card h3 {
  margin: 0;
  overflow: hidden;
  color: #3D2430;
  font-family: var(--magnate-name-font);
  font-size: 0.8rem;
  font-synthesis: none;
  font-weight: 850;
  line-height: 1.12;
  padding-bottom: 1px;
  text-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magnate-winner-card h3.is-long-name {
  font-size: 0.72rem;
}

.magnate-winner-card h3.is-extra-long-name {
  font-size: 0.66rem;
}

.magnate-winner-percent {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 0;
  color: rgba(61, 36, 48, 0.48);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.magnate-winner-percent strong {
  color: #B66F61;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
}

.magnate-winner-percent span {
  letter-spacing: 0.04em;
}

.hof-grid {
  display: grid;
  gap: 10px;
  margin: 0 auto 12px;
}

.hof-grid-top {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-width: var(--hof-row-width);
}

.hof-grid-standard {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  max-width: var(--hof-row-width);
}

.hof-grid-row-3 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  max-width: var(--hof-row-width);
}

.hof-card {
  --hof-accent-a: rgba(255, 255, 255, 0.92);
  --hof-accent-b: rgba(217, 227, 255, 0.86);
  --hof-accent-c: rgba(255, 248, 253, 0.94);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 248, 253, 0.94)),
    var(--panel);
  box-shadow:
    0 3px 0 rgba(7, 19, 63, 0.1),
    0 10px 16px rgba(7, 19, 63, 0.08);
  padding: 7px;
  text-align: center;
  transform: translateZ(0);
  transition: box-shadow 120ms ease;
  will-change: auto;
}

.hof-card:hover {
  transform: translateZ(0);
}

.hof-card-large {
  border-width: 2px;
  border-radius: 7px;
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 253, 0.96)) padding-box,
    conic-gradient(from 210deg, var(--hof-accent-a), var(--hof-accent-b), var(--hof-accent-c), var(--hof-accent-a)) border-box;
  box-shadow:
    0 3px 0 rgba(7, 19, 63, 0.14),
    0 10px 16px rgba(7, 19, 63, 0.12);
  padding: 5px;
}

.hof-card:not(.hof-card-large) {
  border-width: 2px;
  border-radius: 7px;
  box-shadow:
    0 2px 0 rgba(7, 19, 63, 0.1),
    0 7px 12px rgba(7, 19, 63, 0.08);
  padding: 4px;
}

.hof-card-rank-1 {
  --hof-accent-a: #FFE872;
  --hof-accent-b: #F05C9D;
  --hof-accent-c: #63D9CA;
}

.hof-card-rank-2 {
  --hof-accent-a: #F8FBFF;
  --hof-accent-b: #8FA8FF;
  --hof-accent-c: #63D9CA;
}

.hof-card-rank-3 {
  --hof-accent-a: #FFC36A;
  --hof-accent-b: #FF6840;
  --hof-accent-c: #FFD83D;
}

.hof-card-rank-4 {
  --hof-accent-a: #FF8FC5;
  --hof-accent-b: #5E7FE8;
  --hof-accent-c: #FFD83D;
}

.hof-card-rank-5 {
  --hof-accent-a: #B7FF6A;
  --hof-accent-b: #F05C9D;
  --hof-accent-c: #63D9CA;
}

.hof-card::before,
.hof-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hof-card::before {
  inset: 9px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(7, 19, 63, 0.06),
    inset 0 0 24px rgba(255, 255, 255, 0.3);
}

.hof-card::after {
  display: none;
  z-index: 1;
  top: 0;
  right: 0;
  width: 58%;
  height: 52px;
  background:
    linear-gradient(110deg, transparent 0 26%, rgba(255, 255, 255, 0.42) 26% 38%, transparent 38%),
    linear-gradient(90deg, var(--hof-accent-a), var(--hof-accent-b), var(--hof-accent-c));
  clip-path: polygon(20% 0, 100% 0, 100% 56%, 0 100%);
  opacity: 0.74;
}

.hof-card-large::after {
  display: block;
  height: 40px;
}

.hof-card-large::before {
  inset: 6px;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(7, 19, 63, 0.06),
    inset 0 0 17px rgba(255, 255, 255, 0.3);
}

.hof-card:not(.hof-card-large)::before {
  inset: 6px;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(7, 19, 63, 0.06),
    inset 0 0 17px rgba(255, 255, 255, 0.3);
}

.hof-card > * {
  position: relative;
  z-index: 2;
}

.hof-rank {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 28px;
  border-radius: 8px 4px 8px 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(217, 227, 255, 0.92));
  color: var(--ink);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  padding: 2px 0 0;
  text-shadow:
    1px 0 0 #ffffff,
    -1px 0 0 #ffffff,
    0 1px 0 #ffffff,
    0 -1px 0 #ffffff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 4px 8px rgba(7, 19, 63, 0.12);
  transform: rotate(-4deg);
}

.hof-rank::before {
  display: none;
}

.hof-card-large .hof-rank {
  top: -3px;
  left: 8px;
  width: 36px;
  height: 40px;
  border-radius: 0 0 7px 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 38%),
    linear-gradient(180deg, #FFE872, #FFD83D 58%, #F0AE00);
  font-size: 0.84rem;
  padding: 3px 0 10px;
  transform: none;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.78),
    0 4px 7px rgba(7, 19, 63, 0.16);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
}

.hof-card-large .hof-rank::before {
  content: "";
  display: block;
  position: absolute;
  inset: auto 7px -5px;
  height: 8px;
  background: #F0AE00;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  opacity: 0.9;
}

.hof-card:not(.hof-card-large) .hof-rank {
  top: 6px;
  left: 6px;
  width: 28px;
  height: 18px;
  border-radius: 6px 3px 6px 3px;
  font-size: 0.6rem;
  padding-top: 1px;
}

.hof-avatar {
  align-self: start;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.24;
  overflow: hidden;
  border-radius: 6px 6px 3px 3px;
  background:
    linear-gradient(135deg, rgba(255, 216, 61, 0.16), rgba(99, 217, 202, 0.18)),
    #D7E8F6;
  box-shadow:
    inset 0 0 0 1px rgba(7, 19, 63, 0.08),
    inset 0 -34px 26px rgba(255, 248, 253, 0.16);
}

.hof-avatar:focus-visible,
.hof-weekly-avatar:focus-visible,
.magnate-winner-card:focus-visible,
.magnate-winner-photo:focus-visible {
  outline: 3px solid rgba(7, 19, 63, 0.72);
  outline-offset: 3px;
}

.hof-card-large .hof-avatar {
  aspect-ratio: 1 / 1.16;
  border-radius: 4px 4px 2px 2px;
}

.hof-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  object-fit: cover;
  object-position: 50% 30%;
  transform: translate3d(0, 0, 0);
  transform-origin: center 30%;
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.hof-card:hover .hof-avatar img,
.hof-card:focus-within .hof-avatar img {
  transform: translate3d(0, 0, 0) scale(1.018);
}

@media (prefers-reduced-motion: reduce) {
  .hof-avatar img,
  .magnate-winner-photo img {
    transition: none;
  }

  .hof-card:hover .hof-avatar img,
  .hof-card:focus-within .hof-avatar img,
  .magnate-winner-card:hover .magnate-winner-photo img,
  .magnate-winner-card:focus .magnate-winner-photo img {
    transform: none;
  }
}

.hof-player {
  position: relative;
  min-width: 0;
  min-height: 72px;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 248, 253, 0.98)),
    rgba(255, 248, 253, 0.92);
  padding: 9px 8px 11px;
}

.hof-card-large .hof-player {
  min-height: 57px;
  border-radius: 0 0 4px 4px;
  padding: 7px 6px 8px;
}

.hof-card:not(.hof-card-large) .hof-player {
  min-height: 39px;
  border-radius: 0 0 4px 4px;
  padding: 5px 4px 5px;
}

.hof-player h2 {
  display: block;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: "Kimoru", Arial, Helvetica, sans-serif;
  font-size: 1.12rem;
  font-weight: 900;
  line-height: 1.18;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    1px 0 0 rgba(255, 255, 255, 0.72),
    0 1px 0 rgba(255, 255, 255, 0.72);
}

.hof-card-large .hof-player h2 {
  font-size: clamp(0.94rem, 1.11vw, 1.06rem);
  font-weight: 900;
}

.hof-card-large .hof-player h2.is-long-name {
  font-size: clamp(0.94rem, 1.11vw, 1.06rem);
}

.hof-card-large .hof-player h2.is-extra-long-name {
  font-size: 0.9rem;
}

.hof-card:not(.hof-card-large) .hof-player h2 {
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.16;
}

.hof-card:not(.hof-card-large) .hof-player h2.is-long-name {
  font-size: 0.72rem;
}

.hof-card:not(.hof-card-large) .hof-player h2.is-extra-long-name {
  font-size: 0.66rem;
}

.hof-card:not(.hof-card-large) .hof-score {
  margin-top: 3px;
  gap: 3px;
  font-size: 0.68rem;
}

.hof-card:not(.hof-card-large) .hof-score img {
  width: 13px;
  height: 13px;
}

.hof-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 7px 0 0;
  color: var(--pink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.1;
}

.hof-score img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter:
    drop-shadow(1px 0 0 #ffffff)
    drop-shadow(-1px 0 0 #ffffff)
    drop-shadow(0 1px 0 #ffffff)
    drop-shadow(0 -1px 0 #ffffff)
    drop-shadow(0 2px 3px rgba(7, 19, 63, 0.14));
}

.hof-card-large .hof-score {
  gap: 4px;
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 500;
}

.hof-card-large .hof-score img {
  width: 15px;
  height: 15px;
}

.game-color {
  width: 8px;
  height: 42px;
  border-radius: 999px;
  background: var(--game-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--game-accent) 18%, transparent);
}

.current-game strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.1;
}

.current-game p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.game-spots {
  border-radius: 999px;
  background: color-mix(in srgb, var(--game-accent) 26%, #ffffff);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  padding: 6px 9px;
}

.game-hexagon {
  --game-accent: #FFD83D;
  --game-soft: rgba(255, 216, 61, 0.22);
}

.game-rookies {
  --game-accent: #F05C9D;
  --game-soft: rgba(240, 92, 157, 0.16);
}

.game-hive {
  --game-accent: #63D9CA;
  --game-soft: rgba(99, 217, 202, 0.16);
}

.game-court {
  --game-accent: #FF6840;
  --game-soft: rgba(255, 104, 64, 0.15);
}

.game-comb {
  --game-accent: #5E7FE8;
  --game-soft: rgba(94, 127, 232, 0.16);
}

.main-tab:hover,
.play-card-toggle:hover,
.play-enroll:hover {
  text-decoration: none;
}

.play-section {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto 60px;
  padding: 8px clamp(4px, 0.8vw, 14px) 0;
}

.play-stage {
  display: grid;
  grid-template-columns: minmax(0, min(620px, 54vw)) minmax(300px, 1fr);
  align-items: start;
  justify-content: start;
  gap: clamp(22px, 2.6vw, 36px);
  padding-left: clamp(0px, 4vw, 86px);
}

.play-enroll-stage {
  min-width: 0;
}

.play-enroll-view-stage {
  grid-template-columns: 1fr;
}

.play-heading-link {
  position: absolute;
  top: clamp(4px, 0.8vw, 12px);
  left: clamp(4px, 0.8vw, 12px);
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  text-decoration: none;
  transition: filter 160ms ease, transform 160ms ease;
}

.play-heading-link img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(7, 19, 63, 0.12));
}

.play-heading-link:hover,
.play-heading-link:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
}

.play-heading-link:hover img,
.play-heading-link:focus-visible img {
  filter: drop-shadow(0 10px 14px rgba(7, 19, 63, 0.16));
}

.play-heading-link:focus-visible {
  border-radius: 12px;
  outline: 3px solid rgba(99, 217, 202, 0.62);
  outline-offset: 4px;
}

.play-section:has(> .play-heading-link) .play-heading {
  min-height: 58px;
  padding-inline: 64px;
}

.play-stage-subheading {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
  text-align: center;
  text-shadow:
    1px 0 0 #ffffff,
    -1px 0 0 #ffffff,
    0 1px 0 #ffffff,
    0 -1px 0 #ffffff,
    2px 2px 0 rgba(255, 216, 61, 0.72),
    0 7px 12px rgba(7, 19, 63, 0.1);
}

.play-active-games {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
}

.play-active-games > .play-stage-subheading {
  align-self: flex-start;
  width: min(100%, 620px);
}

.play-lobby-admin-status {
  width: min(100%, 860px);
  margin: -2px 0 12px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.25;
  padding: 9px 11px;
  text-align: center;
}

.play-lobby-admin-status.is-success {
  border-color: rgba(39, 121, 109, 0.24);
  background: rgba(99, 217, 202, 0.14);
  color: #27796d;
}

.play-lobby-admin-status.is-error {
  border-color: rgba(180, 35, 24, 0.22);
  background: rgba(255, 240, 237, 0.86);
  color: #b42318;
}

.play-active-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 18px;
  row-gap: 4px;
  align-self: flex-start;
  width: min(100%, 620px);
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  margin: -4px 0 13px;
  padding-bottom: 7px;
}

.play-active-tabs button {
  position: relative;
  min-height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(7, 19, 63, 0.62);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 3px 0 6px;
  transition: color 150ms ease;
}

.play-active-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--play-tab-accent, var(--pink));
  opacity: 0;
  transform: scaleX(0.5);
  transform-origin: center;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.play-active-tabs button:hover,
.play-active-tabs button:focus-visible {
  color: var(--ink);
}

.play-active-tabs button.is-active {
  color: var(--ink);
}

.play-active-tabs button:hover::after,
.play-active-tabs button:focus-visible::after,
.play-active-tabs button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.play-active-tabs button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--play-tab-accent, var(--pink)) 38%, #ffffff);
  outline-offset: 4px;
}

.play-filter-game-jungle {
  --play-tab-accent: #456030;
}

.play-filter-game-magnate {
  --play-tab-accent: #EC998C;
}

.play-filter-game-palais {
  --play-tab-accent: #3d060b;
}

.play-filter-game-spilled {
  --play-tab-accent: #B1E2BD;
}

.play-filter-game-madhouse {
  --play-tab-accent: #FFE22B;
}

.play-filter-game-primal {
  --play-tab-accent: #000000;
}

.play-filter-game-spy {
  --play-tab-accent: #DF0451;
}

.play-filter-game-ascension {
  --play-tab-accent: #451D45;
}

.play-filter-game-frontier {
  --play-tab-accent: #D39744;
}

.play-active-table-wrap {
  align-self: flex-start;
  overflow: visible;
  width: min(100%, 620px);
  max-width: 620px;
}

.play-rail {
  display: grid;
  gap: 14px;
  min-width: 0;
  align-self: start;
  justify-self: stretch;
  position: sticky;
  top: 16px;
}

.play-rail-enroll {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  justify-self: center;
  color: #ffffff;
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: uppercase;
}

.play-rail-enroll::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 0;
  border-radius: 50%;
  background: rgba(255, 112, 184, 0.62);
  filter: blur(8px);
  opacity: 0.18;
  pointer-events: none;
  transform: scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
}

.play-rail-enroll-shape {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
}

.play-rail-enroll-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(7, 19, 63, 0.18));
  transition: filter 160ms ease, transform 160ms ease;
}

.play-rail-enroll-label {
  display: block;
  max-width: 68px;
  position: relative;
  z-index: 2;
  color: #ffffff;
  pointer-events: none;
  -webkit-text-stroke: 1px #B63876;
  paint-order: stroke fill;
  transition: color 160ms ease, -webkit-text-stroke-color 160ms ease, transform 160ms ease;
}

.play-rail-enroll:hover,
.play-rail-enroll:focus-visible {
  text-decoration: none;
}

.play-rail-enroll:hover::before,
.play-rail-enroll:focus-visible::before {
  opacity: 0.56;
  transform: scale(1.12);
}

.play-rail-enroll:hover .play-rail-enroll-art,
.play-rail-enroll:focus-visible .play-rail-enroll-art {
  filter:
    brightness(1.05)
    saturate(1.04)
    drop-shadow(0 6px 11px rgba(7, 19, 63, 0.2));
  transform: translateY(-1px) scale(1.08) rotate(-2deg);
}

.play-rail-enroll:hover .play-rail-enroll-label,
.play-rail-enroll:focus-visible .play-rail-enroll-label {
  color: #ffffff;
  -webkit-text-stroke-color: #A92F6C;
  text-shadow: none;
  transform: translateY(-1px) scale(1.03);
}

.play-rail-enroll:active .play-rail-enroll-art {
  filter:
    brightness(0.96)
    saturate(1.04)
    drop-shadow(0 2px 5px rgba(7, 19, 63, 0.16));
  transform: translateY(3px) scale(0.98);
}

.play-rail-enroll:active::before {
  opacity: 0.3;
  transform: scale(0.98);
}

.play-rail-enroll:active .play-rail-enroll-label {
  transform: translateY(3px);
}

.play-rail-enroll:focus-visible {
  outline: 3px solid rgba(99, 217, 202, 0.62);
  outline-offset: 4px;
}

.play-rail-card {
  box-sizing: border-box;
  display: grid;
  gap: 13px;
  min-width: 0;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 216, 61, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 253, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 16px 30px rgba(7, 19, 63, 0.1);
  padding: 16px;
}

.play-rail-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  padding-bottom: 9px;
}

.play-rail-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 1.58rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
  text-shadow:
    1px 0 0 #ffffff,
    -1px 0 0 #ffffff,
    0 1px 0 #ffffff,
    0 -1px 0 #ffffff,
    2px 2px 0 rgba(255, 216, 61, 0.62);
}

.play-rail-card-head span {
  color: rgba(7, 19, 63, 0.56);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.play-bulletin-board {
  gap: 12px;
}

.play-bulletin-list {
  display: grid;
  gap: 0;
}

.play-bulletin-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  padding: 12px 0;
}

.play-bulletin-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.play-bulletin-item:last-child {
  padding-bottom: 0;
}

.play-bulletin-tag {
  color: var(--pink);
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.play-bulletin-item h3,
.play-bulletin-item p {
  margin: 0;
}

.play-bulletin-item h3 {
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.13;
}

.play-bulletin-item p {
  color: rgba(7, 19, 63, 0.64);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.28;
}

.play-enroll-view {
  justify-self: center;
  width: min(640px, 100%);
}

.play-enroll-view > .play-stage-subheading {
  display: none;
}

.play-enroll-view .play-card-grid {
  gap: 16px;
}

.play-enroll-view .play-card-row {
  grid-template-columns: repeat(3, minmax(0, 184px));
  gap: 16px;
}

.play-active-table {
  position: relative;
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.15;
  table-layout: auto;
}

.play-active-table thead {
  display: none;
}

.play-active-table tbody {
  display: grid;
  gap: 10px;
}

.play-active-table th,
.play-active-table td {
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}

.play-active-table thead th:nth-child(1) {
  width: 48%;
}

.play-active-table thead th:nth-child(2) {
  width: 16%;
}

.play-active-table thead th:nth-child(3) {
  width: 18%;
}

.play-active-table thead th:nth-child(4) {
  width: 18%;
  text-align: right;
}

.play-active-table tbody .play-active-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 6px;
  min-height: 72px;
  border: 1px solid color-mix(in srgb, var(--play-accent, var(--pink)) 18%, rgba(7, 19, 63, 0.08));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--play-accent, var(--pink)) 20%, rgba(255, 255, 255, 0.88)), rgba(255, 255, 255, 0.76)),
    #ffffff;
  box-shadow:
    inset 4px 0 0 var(--play-accent, var(--pink)),
    0 8px 16px rgba(7, 19, 63, 0.06);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.play-active-table tbody .play-active-row[hidden] {
  display: none;
}

.play-active-table tbody .play-active-row:hover,
.play-active-table tbody .play-active-row:focus-within {
  z-index: 300;
  border-color: color-mix(in srgb, var(--play-accent, var(--pink)) 34%, rgba(7, 19, 63, 0.1));
  box-shadow:
    inset 4px 0 0 var(--play-accent, var(--pink)),
    0 12px 22px rgba(7, 19, 63, 0.1);
  transform: translateY(-1px);
}

.play-active-table tbody .play-active-row > * {
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: background 160ms ease;
}

.play-active-table tbody .play-active-row > :first-child {
  border-radius: 8px 0 0 8px;
  box-shadow: none;
}

.play-active-table tbody .play-active-row > :last-child {
  border-radius: 0 8px 8px 0;
}

.play-active-table tbody .play-active-row:hover > *,
.play-active-table tbody .play-active-row:focus-within > * {
  background: transparent;
}

.play-active-table tbody .play-active-row:hover > td:nth-child(2),
.play-active-table tbody .play-active-row:focus-within > td:nth-child(2) {
  z-index: 340;
}

.play-active-divider {
  display: block;
  background: transparent;
  box-shadow: none;
}

.play-active-divider[hidden] {
  display: none;
}

.play-active-divider td {
  display: block;
  padding: 3px 0 1px;
  border: 0;
}

.play-active-divider span {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  color: rgba(7, 19, 63, 0.46);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.play-active-divider span::before,
.play-active-divider span::after {
  content: "";
  height: 1px;
  background: rgba(7, 19, 63, 0.1);
}

.play-active-table tbody th {
  font-weight: 900;
}

.play-active-table a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  min-height: 58px;
  max-width: 100%;
  color: var(--ink);
  text-decoration: none;
}

.play-active-table a:hover,
.play-active-table a:focus-visible {
  color: color-mix(in srgb, var(--play-accent, var(--pink)) 72%, var(--ink));
}

.play-active-color {
  display: none;
}

.play-active-game-lockup {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 52px;
}

.play-active-game-art {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--play-accent, var(--pink)) 12%, rgba(7, 19, 63, 0.08));
  box-shadow:
    inset 0 2px 5px rgba(7, 19, 63, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.44),
    inset 0 0 0 1px color-mix(in srgb, var(--play-accent, var(--pink)) 30%, rgba(7, 19, 63, 0.16));
}

.play-active-game-logo {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  filter: saturate(0.94) brightness(0.96);
}

.play-active-game-art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 2px 4px rgba(7, 19, 63, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.play-active-game-labels {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.play-active-game-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-active-game-name {
  max-width: 100%;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
}

.play-active-game-id {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-active-game-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  color: rgba(7, 19, 63, 0.54);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1;
}

.play-active-game-dot {
  flex: 0 0 auto;
  color: rgba(7, 19, 63, 0.34);
}

.play-active-game-day {
  flex: 0 0 auto;
  color: rgba(7, 19, 63, 0.68);
  font-weight: 950;
  white-space: nowrap;
}

.play-active-table td {
  color: rgba(7, 19, 63, 0.72);
  font-weight: 900;
  white-space: nowrap;
}

.play-active-table td:nth-child(2) {
  justify-self: end;
  overflow: visible;
  position: relative;
}

.play-active-table td:nth-child(3) {
  display: none;
}

.play-active-table td:nth-child(4) {
  justify-self: end;
  text-align: right;
}

.play-active-status-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.play-active-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--pink);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  text-align: left;
}

.play-active-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0 0 3px rgba(240, 92, 157, 0.13);
}

.play-active-row.is-filled .play-active-status,
.play-active-row.is-ongoing .play-active-status {
  color: var(--pink);
}

.play-active-row.is-filling .play-active-status::before {
  background: var(--pink);
  box-shadow: 0 0 0 3px rgba(240, 92, 157, 0.13);
}

.play-lobby-close-form {
  display: inline-flex;
  margin: 0;
}

.play-lobby-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 1px solid rgba(180, 35, 24, 0.24);
  border-radius: 6px;
  background: rgba(255, 240, 237, 0.92);
  color: #b42318;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  padding: 0 9px;
}

.play-lobby-close:hover,
.play-lobby-close:focus-visible {
  border-color: rgba(180, 35, 24, 0.5);
  background: #fee4e2;
}

.play-lobby-close:focus-visible {
  outline: 2px solid rgba(180, 35, 24, 0.18);
  outline-offset: 2px;
}

.play-active-seats {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  cursor: pointer;
  outline: 0;
}

.play-active-seat-count {
  color: rgba(7, 19, 63, 0.78);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-align: left;
}

.play-active-seat-bar {
  display: block;
  overflow: hidden;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.1);
  box-shadow: inset 0 1px 1px rgba(7, 19, 63, 0.1);
}

.play-active-seat-bar span {
  display: block;
  width: var(--seat-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
    var(--play-accent, var(--pink));
}

.play-active-time {
  color: rgba(7, 19, 63, 0.66);
  font-size: 0.84rem;
  font-weight: 900;
}

.play-active-roster {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  z-index: 1000;
  display: grid;
  gap: 9px;
  width: 420px;
  max-width: calc(100vw - 32px);
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: #fffafd;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 30px rgba(7, 19, 63, 0.18);
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  transform: translate(-50%, -4px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 150ms ease,
    transform 150ms ease,
    visibility 150ms ease;
  visibility: hidden;
}

.play-active-roster::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(7, 19, 63, 0.14);
  border-left: 1px solid rgba(7, 19, 63, 0.14);
  background: rgba(255, 255, 255, 0.96);
  transform: translateX(-50%) rotate(45deg);
}

.play-active-seats.is-roster-open .play-active-roster {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
  visibility: visible;
}

.play-active-seats.is-roster-open {
  z-index: 1001;
}

.play-active-roster-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.play-active-roster-title span {
  color: rgba(7, 19, 63, 0.5);
}

.play-active-roster-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: min(320px, calc(100vh - 180px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.play-active-roster-player {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

a.play-active-roster-player:hover {
  color: color-mix(in srgb, var(--play-accent, var(--pink)) 72%, var(--ink));
  text-decoration: none;
}

a.play-active-roster-player:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

.play-active-roster-player img {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 6px;
  object-fit: cover;
  object-position: center 20%;
}

.play-active-roster-player span {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.play-card-grid {
  display: grid;
  gap: 16px;
}

.play-game-ban-notice {
  justify-self: center;
  width: min(640px, 100%);
  margin: 0;
  border: 1px solid rgba(255, 104, 64, 0.24);
  border-radius: 10px;
  background: rgba(255, 104, 64, 0.12);
  color: #A13018;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  padding: 10px 12px;
  text-align: center;
}

.play-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 184px));
  justify-content: center;
  gap: 16px;
  align-items: start;
}

.play-card {
  --play-accent: var(--pink);
  --play-soft: rgba(240, 92, 157, 0.16);
  position: relative;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--play-accent) 72%, #ffffff);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--play-accent) 16%, #ffffff), rgba(255, 255, 255, 0.76));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 4px 0 color-mix(in srgb, var(--play-accent) 54%, #07133F),
    0 14px 24px rgba(7, 19, 63, 0.14);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.play-card::before {
  display: none;
}

.play-card:not(.is-disabled):hover,
.play-card:not(.is-disabled):focus-within,
.play-card.is-open {
  z-index: 5;
  overflow: visible;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 5px 0 color-mix(in srgb, var(--play-accent) 62%, #07133F),
    0 0 0 3px color-mix(in srgb, var(--play-accent) 28%, #ffffff),
    0 18px 30px rgba(7, 19, 63, 0.18);
}

.play-card-toggle {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.play-card-toggle:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.play-card-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--play-accent) 42%, #ffffff);
  outline-offset: 4px;
}

.play-card-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin: 6px;
  border: 0;
  border-radius: 7px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.play-card-media::after {
  display: none;
}

.play-card-media > .play-card-status {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  max-width: calc(100% - 28px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 0.94;
  padding: 0;
  box-shadow: none;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(7, 19, 63, 0.26),
    0 8px 18px rgba(7, 19, 63, 0.28);
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.play-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease, filter 180ms ease;
  will-change: transform;
}

.play-card:not(.is-disabled):hover .play-card-media img,
.play-card:not(.is-disabled):focus-within .play-card-media img,
.play-card.is-open .play-card-media img {
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.025);
}

.play-card-media > span:not(.play-card-status) {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.76), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--play-accent) 32%, #ffffff), color-mix(in srgb, var(--play-accent) 18%, #DAE3FC));
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 3px 0 color-mix(in srgb, var(--play-accent) 30%, #07133F),
    0 12px 18px rgba(7, 19, 63, 0.12);
  transition: transform 180ms ease, filter 180ms ease;
  will-change: transform;
}

.play-card:not(.is-disabled):hover .play-card-media > span:not(.play-card-status),
.play-card:not(.is-disabled):focus-within .play-card-media > span:not(.play-card-status),
.play-card.is-open .play-card-media > span:not(.play-card-status) {
  filter: saturate(1.06) contrast(1.02);
  transform: scale(1.025);
}

.play-card.is-disabled {
  transform: none;
}

.play-card.is-disabled:hover,
.play-card.is-disabled:focus-within {
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 4px 0 color-mix(in srgb, var(--play-accent) 54%, #07133F),
    0 14px 24px rgba(7, 19, 63, 0.14);
}

.play-card.is-disabled .play-card-media img,
.play-card.is-disabled .play-card-media > span:not(.play-card-status) {
  transform: none;
}

.play-card.is-coming-soon {
  opacity: 0.96;
}

.play-card.is-coming-soon .play-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.28), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.46), rgba(218, 227, 252, 0.34));
  backdrop-filter: blur(7px) saturate(0.72);
  -webkit-backdrop-filter: blur(7px) saturate(0.72);
}

.play-card.is-coming-soon .play-card-media img {
  opacity: 0.52;
  filter: blur(3.5px) grayscale(42%) saturate(0.56) contrast(0.72) brightness(1.04);
  transform: scale(1.045);
}

.play-card-details {
  position: relative;
  z-index: 3;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 12px;
  text-align: center;
  transition: max-height 180ms ease, opacity 160ms ease, padding 180ms ease;
}

.play-card.is-open .play-card-details {
  max-height: 180px;
  overflow: visible;
  opacity: 1;
  padding: 2px 12px 15px;
}

.play-card-requirements {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 10px;
}

.play-level-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.play-level-badge .shop-color-swatch {
  width: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 44%),
    var(--level-color);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 0 2px rgba(7, 19, 63, 0.08),
    0 2px 5px rgba(7, 19, 63, 0.1);
}

.play-level-badge[data-play-tooltip] {
  position: relative;
  cursor: help;
}

.play-level-badge[data-play-tooltip]::before,
.play-level-badge[data-play-tooltip]::after {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  z-index: 30;
}

.play-level-badge[data-play-tooltip]::before {
  content: "";
  display: block;
  bottom: calc(100% + 5px);
  width: 0;
  height: 0;
  border-top: 6px solid rgba(21, 23, 36, 0.92);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  background: transparent;
}

.play-level-badge[data-play-tooltip]::after {
  content: attr(data-play-tooltip);
  bottom: calc(100% + 11px);
  max-width: min(220px, 82vw);
  padding: 6px 8px;
  border-radius: 3px;
  background: rgba(21, 23, 36, 0.92);
  box-shadow: 0 8px 18px rgba(7, 19, 63, 0.18);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.play-level-badge[data-play-tooltip]:hover::before,
.play-level-badge[data-play-tooltip]:hover::after,
.play-level-badge[data-play-tooltip]:focus-visible::before,
.play-level-badge[data-play-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.play-level-badge[data-play-tooltip]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--level-color) 52%, #ffffff);
  outline-offset: 3px;
}

.play-card-cost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 9px 4px 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 5px 10px rgba(7, 19, 63, 0.08);
}

.play-card-cost img {
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.play-enroll-form {
  display: inline-flex;
  margin: 0;
}

.play-enroll {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 38px;
  border: 2px solid color-mix(in srgb, var(--play-accent) 58%, rgba(7, 19, 63, 0.22));
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.72), transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--play-accent) 38%, #ffffff), var(--play-accent));
  color: #ffffff;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 18px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 3px 0 color-mix(in srgb, var(--play-accent) 42%, #07133F),
    0 10px 16px rgba(7, 19, 63, 0.14);
  transition: box-shadow 160ms ease, filter 160ms ease, transform 160ms ease;
}

.play-card.is-open .play-enroll {
  animation: enroll-pop 320ms cubic-bezier(0.2, 1.4, 0.34, 1);
}

.play-enroll:hover {
  filter: saturate(1.08) contrast(1.03);
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 4px 0 color-mix(in srgb, var(--play-accent) 48%, #07133F),
    0 14px 20px rgba(7, 19, 63, 0.18);
}

.play-enroll.is-locked,
.play-enroll:disabled {
  border-color: rgba(7, 19, 63, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(218, 227, 252, 0.68)),
    #AAB4CF;
  color: rgba(7, 19, 63, 0.42);
  cursor: not-allowed;
  filter: grayscale(42%);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 2px 0 rgba(7, 19, 63, 0.2),
    0 8px 12px rgba(7, 19, 63, 0.1);
}

.play-enroll.is-locked:hover,
.play-enroll:disabled:hover,
.play-enroll.is-locked:active,
.play-enroll:disabled:active {
  filter: grayscale(42%);
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 2px 0 rgba(7, 19, 63, 0.2),
    0 8px 12px rgba(7, 19, 63, 0.1);
}

.play-enroll:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 0 color-mix(in srgb, var(--play-accent) 48%, #07133F),
    0 7px 12px rgba(7, 19, 63, 0.14);
}

@keyframes enroll-pop {
  0% {
    opacity: 0.66;
    transform: scale(0.74);
  }

  68% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .play-card.is-open .play-enroll {
    animation: none;
  }
}

.play-game-jungle {
  --play-accent: #616437;
  --play-soft: rgba(97, 100, 55, 0.16);
}

.play-game-magnate {
  --play-accent: #EC998C;
  --play-soft: rgba(236, 153, 140, 0.18);
}

.play-game-palais {
  --play-accent: #761922;
  --play-soft: rgba(118, 25, 34, 0.16);
}

.play-game-spilled {
  --play-accent: #99B095;
  --play-soft: rgba(153, 176, 149, 0.18);
}

.play-game-madhouse {
  --play-accent: #FFE22B;
  --play-soft: rgba(255, 226, 43, 0.22);
}

.play-game-spilled .play-enroll,
.play-game-madhouse .play-enroll {
  color: #07133F;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56);
}

.play-game-primal {
  --play-accent: #000000;
  --play-soft: rgba(0, 0, 0, 0.12);
}

.play-game-spy {
  --play-accent: #DF0451;
  --play-soft: rgba(223, 4, 81, 0.16);
}

.play-game-ascension {
  --play-accent: #642E65;
  --play-soft: rgba(100, 46, 101, 0.16);
}

.play-game-frontier {
  --play-accent: #D39744;
  --play-soft: rgba(211, 151, 68, 0.18);
}

.play-enroll-modal .shop-purchase-head span {
  color: var(--play-accent, var(--pink));
}

.play-enroll-confirm-copy {
  margin: 0;
  color: rgba(73, 101, 168, 0.86);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.35;
}

.play-enroll-confirm-copy strong {
  color: var(--ink);
  font-weight: 950;
}

.play-enroll-summary {
  display: grid;
  gap: 8px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--play-accent, var(--pink)) 10%, #ffffff), rgba(255, 255, 255, 0.9)),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 8px 0 rgba(7, 19, 63, 0.07);
  padding: 12px;
}

.play-enroll-summary span {
  display: grid;
  grid-template-columns: minmax(96px, 0.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.2;
}

.play-enroll-summary b {
  color: rgba(73, 101, 168, 0.86);
  font-weight: 950;
}

.play-enroll-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 950;
}

.play-enroll-confirm-status {
  min-height: 1em;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.25;
}

.play-enroll-modal .shop-purchase-primary {
  border-color: color-mix(in srgb, var(--play-accent, var(--pink)) 44%, rgba(7, 19, 63, 0.14));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--play-accent, var(--pink)) 34%, #ffffff), var(--play-accent, var(--pink)));
}

.home-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.home-status article,
.home-sidebar,
.home-main,
.home-rail {
  border: 1px solid rgba(229, 188, 118, 0.5);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.home-status article {
  min-height: 92px;
  padding: 14px 16px;
}

.home-status span {
  display: block;
  color: var(--honey-strong);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.home-status strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
}

.home-status p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.home-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.home-sidebar,
.home-main,
.home-rail {
  min-width: 0;
  overflow: hidden;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #EEE5D9;
  background: linear-gradient(180deg, #fffaf0, #ffffff);
}

.profile-card h1 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.15;
}

.profile-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.mini-avatar {
  position: relative;
  width: 64px;
  height: 72px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #E9DED0;
  border-radius: 5px;
  background: linear-gradient(180deg, #FBF0DE, #ffffff 70%);
}

.mini-face {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 31px;
  height: 35px;
  border-radius: 45%;
  transform: translateX(-50%);
  background: #f3c789;
}

.mini-face::before,
.mini-face::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5E4A37;
}

.mini-face::before {
  left: 8px;
}

.mini-face::after {
  right: 8px;
}

.mini-hair {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 50%;
  width: 43px;
  height: 27px;
  border-radius: 50% 50% 24% 24%;
  transform: translateX(-50%);
  background: #5a321b;
}

.mini-shirt {
  position: absolute;
  bottom: -11px;
  left: 50%;
  width: 48px;
  height: 34px;
  border-radius: 24px 24px 0 0;
  transform: translateX(-50%);
  background: var(--honey);
}

.quick-actions {
  display: grid;
  padding: 10px 0;
}

.quick-actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 9px 16px;
  border-bottom: 1px solid #f0f1ed;
  color: var(--amber);
  font-weight: 800;
}

.quick-actions a:last-child {
  border-bottom: 0;
}

.quick-actions strong {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  padding: 0 6px;
  background: #e85063;
  color: #fff;
  font-size: 0.75rem;
}

.mini-board {
  padding: 14px 16px 18px;
  border-top: 1px solid #EEE5D9;
}

.mini-board h2,
.home-rail h2 {
  margin: 0 0 10px;
  color: #d25b72;
  font-size: 1.2rem;
  line-height: 1.15;
}

.mini-board article {
  display: grid;
  gap: 3px;
  padding: 10px 0;
  border-top: 1px solid #f1eee0;
}

.mini-board span {
  color: var(--muted);
  font-size: 0.9rem;
}

.notice-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fffaf0, #ffffff);
}

.notice-strip strong {
  color: var(--ink);
  font-size: 1.1rem;
}

.notice-strip span {
  color: #7d8791;
  font-weight: 700;
}

.notice-strip button {
  min-width: 112px;
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #F2D7A8, var(--honey));
  color: #5d4a16;
  cursor: pointer;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 5px rgba(167, 110, 39, 0.18);
}

.home-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 28px 18px;
}

.home-card-grid article {
  min-height: 128px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 255, 255, 0.96));
  padding: 16px;
}

.home-card-grid strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
}

.home-card-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.home-rooms {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  gap: 14px;
  padding: 0 28px 22px;
}

.home-rooms > div {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.82);
  padding: 16px;
}

.home-rooms h3 {
  margin: 0 0 12px;
  color: #b35d71;
  font-size: 1.05rem;
}

.home-rooms article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-top: 1px solid #eee5d2;
}

.home-rooms article:first-of-type {
  border-top: 0;
}

.home-rooms span {
  color: var(--muted);
  font-size: 0.92rem;
}

.home-rooms button {
  min-width: 64px;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #F2D7A8, var(--honey));
  color: #5d4a16;
  cursor: pointer;
  font-weight: 900;
}

.home-rooms ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: #6F5F4E;
  line-height: 1.35;
}

.home-rail {
  display: grid;
  gap: 0;
  padding: 16px 18px 20px;
}

.home-rail section {
  border-bottom: 1px solid #EEE5D9;
  padding: 12px 0 14px;
}

.home-rail section:first-child {
  padding-top: 0;
}

.home-rail section:last-child {
  border-bottom: 0;
}

.home-rail h2 span {
  color: #eca2ae;
  font-size: 0.85rem;
}

.home-rail p {
  margin: 3px 0 11px;
  color: var(--muted);
  line-height: 1.4;
}

.home-rail a {
  display: block;
  margin-top: 7px;
  font-weight: 700;
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 28px));
  margin: 22px auto 42px;
}

.game-card,
.primary-panel,
.side-panel {
  border: 1px solid rgba(229, 188, 118, 0.5);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.game-card {
  overflow: hidden;
}

.game-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 14px;
  background: linear-gradient(180deg, #FBF0DE, #FFFDF8);
  border-bottom: 1px solid #e8edf1;
}

.game-mode {
  margin: 0 0 2px;
  color: #e05d77;
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 0.85;
  text-transform: lowercase;
  text-shadow:
    -1px -1px 0 #ffffff,
    1px 1px 0 rgba(188, 91, 112, 0.25);
}

.game-title-bar h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  font-weight: 500;
}

.phase-pill {
  margin: 0;
  border: 1px solid rgba(217, 154, 0, 0.35);
  border-radius: 6px;
  background: #fff4b8;
  color: #6e4d10;
  font-weight: 800;
  padding: 10px 12px;
  text-align: center;
}

.cast-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(112px, 1fr);
  gap: 0;
  overflow-x: auto;
  padding: 0 0 14px;
  background: #ffffff;
}

.player-card {
  display: grid;
  grid-template-rows: 120px 26px 18px 26px;
  justify-items: center;
  align-items: start;
  min-width: 112px;
  margin: 0;
  padding: 7px 8px 0;
  border-right: 1px solid #e9f0f4;
  text-align: center;
}

.player-card h2 {
  max-width: 100%;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--amber);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-card p {
  margin: 0;
  color: #a4acb4;
  font-size: 0.82rem;
  line-height: 1;
}

.avatar {
  position: relative;
  width: 96px;
  height: 116px;
  overflow: hidden;
  border: 1px solid #E9DED0;
  border-radius: 4px;
  background: linear-gradient(180deg, #FBF0DE, #ffffff 62%);
}

.avatar .face {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 44px;
  height: 48px;
  border-radius: 45% 45% 48% 48%;
  transform: translateX(-50%);
  background: #f3c789;
}

.avatar .face::before,
.avatar .face::after {
  content: "";
  position: absolute;
  top: 19px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5E4A37;
}

.avatar .face::before {
  left: 12px;
}

.avatar .face::after {
  right: 12px;
}

.avatar .hair {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 50%;
  width: 58px;
  height: 38px;
  border-radius: 48% 48% 22% 22%;
  transform: translateX(-50%);
  background: #664020;
}

.avatar .shirt {
  position: absolute;
  bottom: -12px;
  left: 50%;
  width: 70px;
  height: 48px;
  border-radius: 36px 36px 0 0;
  transform: translateX(-50%);
  background: #8E5E22;
}

.avatar .shirt::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  width: 18px;
  height: 22px;
  transform: translateX(-50%);
  background: #F6E8D4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.avatar-pink .hair { background: #f5cf92; }
.avatar-pink .shirt { background: #ef8caf; }
.avatar-lime .hair { background: #f4ee21; }
.avatar-lime .shirt { background: #1c2635; }
.avatar-gold .hair { background: #8d5a24; }
.avatar-gold .shirt { background: var(--honey); }
.avatar-sage .hair { background: #4A3C31; }
.avatar-sage .shirt { background: #6F8176; }
.avatar-amber .hair { background: #bd7b28; }
.avatar-amber .shirt { background: #c43f3f; }
.avatar-violet .hair { background: #2e223a; }
.avatar-violet .shirt { background: #734aa6; }
.avatar-cocoa .hair { background: #5a321b; }
.avatar-cocoa .shirt { background: #6fb06c; }
.avatar-coral .hair { background: #b46a3a; }
.avatar-coral .shirt { background: #f29f90; }
.avatar-mint .hair { background: #2c3329; }
.avatar-mint .shirt { background: #63b6a6; }

.status {
  display: inline-grid;
  place-items: center;
  min-width: 27px;
  height: 25px;
  font-weight: 900;
  line-height: 1;
}

.status.is-safe::before {
  content: "";
  width: 12px;
  height: 22px;
  border-right: 5px solid var(--green);
  border-bottom: 5px solid var(--green);
  transform: rotate(42deg);
}

.status.is-nominated {
  color: var(--red);
  font-size: 2rem;
}

.status.is-hoh {
  border-radius: 3px;
  background: #a5d65d;
  color: #ffffff;
  font-size: 0.83rem;
  text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

.primary-panel {
  min-width: 0;
  overflow: hidden;
}

.tab-panel {
  display: none;
  padding: 0 0 18px;
}

.tab-panel.is-active {
  display: block;
}

.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 24px 0 0;
  padding: 0 18px 22px;
  color: rgba(7, 19, 63, 0.64);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  text-align: center;
}

.site-footer-inner {
  display: grid;
  justify-items: center;
  gap: 9px;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.site-footer-links,
.site-footer-games,
.site-footer-game-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
}

.site-footer-links {
  gap: 5px;
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.2;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--pink);
  text-decoration: none;
}

.site-footer a:focus-visible {
  outline: 2px solid rgba(240, 92, 157, 0.5);
  outline-offset: 2px;
}

.site-footer-games {
  gap: 7px 10px;
  font-size: 0.7rem;
  line-height: 1.2;
}

.site-footer-game-list {
  gap: 4px 10px;
}

.site-footer-game-link {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  color: rgba(7, 19, 63, 0.64);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 0;
}

.site-footer-disclaimer {
  margin: 0;
  max-width: 1080px;
  color: rgba(7, 19, 63, 0.52);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.34;
}

.site-footer-disclaimer em {
  color: rgba(7, 19, 63, 0.68);
  font-style: italic;
}

.site-footer-copyright {
  margin: 2px 0 0;
  color: rgba(7, 19, 63, 0.58);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

body.show-page-bigbrother > .site-footer {
  color: rgba(255, 219, 224, 0.78);
  text-shadow: 0 1px 0 rgba(18, 0, 5, 0.38);
}

body.show-page-bigbrother > .site-footer .site-footer-inner {
  border-top: 1px solid rgba(255, 153, 165, 0.22);
  padding-top: 14px;
}

body.show-page-bigbrother > .site-footer .site-footer-links {
  color: rgba(255, 244, 246, 0.86);
}

body.show-page-bigbrother > .site-footer .site-footer-game-link,
body.show-page-bigbrother > .site-footer .site-footer-copyright {
  color: rgba(255, 219, 224, 0.72);
}

body.show-page-bigbrother > .site-footer .site-footer-disclaimer {
  color: rgba(255, 190, 200, 0.7);
}

body.show-page-bigbrother > .site-footer .site-footer-disclaimer em {
  color: rgba(255, 244, 246, 0.82);
}

body.show-page-bigbrother > .site-footer a:hover,
body.show-page-bigbrother > .site-footer a:focus-visible {
  color: #ffffff;
}

.legal-page {
  --legal-card: rgba(255, 248, 253, 0.94);
  --legal-card-strong: rgba(255, 255, 255, 0.96);
  --legal-border: rgba(255, 255, 255, 0.92);
  --legal-copy: rgba(7, 19, 63, 0.78);
  --legal-muted: rgba(73, 101, 168, 0.86);
}

body.legal-page,
body.legal-page *,
body.legal-page *::before,
body.legal-page *::after {
  box-sizing: border-box;
}

.legal-shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 28px));
  min-width: 0;
  margin: 18px auto 44px;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  gap: 20px;
  align-items: end;
  min-width: 0;
  border: 3px solid var(--legal-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 253, 0.96) 0%, rgba(255, 248, 253, 0.96) 58%, rgba(230, 248, 234, 0.96) 58%, rgba(230, 248, 234, 0.96) 100%);
  box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 42px);
}

.legal-hero > * {
  min-width: 0;
}

.legal-eyebrow {
  margin: 0 0 8px;
  color: var(--pink);
  font-size: 0.86rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.legal-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: 4.85rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
  overflow-wrap: break-word;
  white-space: normal;
}

.legal-hero p:not(.legal-eyebrow) {
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--legal-copy);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.legal-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.legal-hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: var(--ink);
  color: #ffffff;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  padding: 10px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 0 rgba(7, 19, 63, 0.18);
}

.legal-hero-action:hover,
.legal-hero-action:focus-visible {
  background: var(--pink);
  color: #ffffff;
  outline: 0;
  transform: translateY(-1px);
}

.legal-hero-meta {
  display: grid;
  gap: 10px;
  justify-self: start;
  justify-items: start;
  width: min(100%, 260px);
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--legal-muted);
  padding: 13px 15px;
}

.legal-meta-row {
  display: grid;
  gap: 5px;
}

.legal-meta-row + .legal-meta-row {
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  padding-top: 9px;
}

.legal-hero-meta span {
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.legal-hero-meta strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 950;
}

.legal-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
  margin-top: 18px;
}

.legal-toc {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 3px solid var(--legal-border);
  border-radius: 8px;
  background: var(--legal-card);
  box-shadow: 0 10px 24px rgba(7, 19, 63, 0.12);
  padding: 14px;
}

.legal-toc h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
  text-transform: uppercase;
}

.legal-toc nav {
  display: grid;
  gap: 3px;
}

.legal-toc a {
  display: block;
  border-radius: 6px;
  color: var(--legal-muted);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
  padding: 8px 9px;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  background: var(--legal-card-strong);
  color: var(--pink);
  outline: none;
}

.legal-toc a:focus-visible {
  box-shadow: 0 0 0 2px rgba(240, 92, 157, 0.45);
}

.legal-document {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.legal-section {
  border: 3px solid var(--legal-border);
  border-radius: 8px;
  background: var(--legal-card);
  box-shadow: 0 10px 24px rgba(7, 19, 63, 0.11);
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
  scroll-margin-top: 18px;
}

.legal-intro {
  background: var(--legal-card-strong);
}

.legal-section h2,
.legal-section h3 {
  color: var(--ink);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.legal-section h2 {
  margin: 0 0 14px;
  font-size: 2.2rem;
}

.legal-section h3 {
  margin: 24px 0 10px;
  font-size: 1.4rem;
}

.legal-section h4 {
  margin: 20px 0 8px;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
}

.legal-section p,
.legal-section li {
  color: var(--legal-copy);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  line-height: 1.68;
  overflow-wrap: break-word;
}

.legal-section p {
  margin: 0;
}

.legal-section a {
  color: var(--pink);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.legal-section a:hover,
.legal-section a:focus-visible {
  color: var(--ink);
}

.legal-section p + p,
.legal-section p + ul,
.legal-section p + ol,
.legal-section ul + p,
.legal-section ol + p {
  margin-top: 13px;
}

.legal-section ul,
.legal-section ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 1.25rem;
}

.legal-section li::marker {
  color: var(--pink);
  font-weight: 900;
}

.legal-divider {
  width: 100%;
  height: 2px;
  border: 0;
  background: rgba(7, 19, 63, 0.08);
  margin: 2px 0;
}

.legal-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 15px;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.legal-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  color: var(--legal-copy);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
}

.legal-table th,
.legal-table td {
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  line-height: 1.35;
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
}

.legal-table th {
  background: rgba(99, 217, 202, 0.16);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 950;
  text-transform: uppercase;
}

.legal-table tr:last-child td {
  border-bottom: 0;
}

.legal-color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.legal-color-swatch.shop-color-card {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.legal-color-swatch.shop-color-card::before {
  content: none;
}

.legal-color-swatch.is-color-chromatica {
  --metal-speed: 5.7s;
  --metal-delay: -1.2s;
  --metal-dark-opacity: 0.9;
  --metal-bright-opacity: 0.76;
  --metal-dark-blur: 6px;
  --metal-bright-blur: 5.5px;
  --metal-dark-contrast: 1.06;
}

.legal-color-chip,
.legal-color-swatch .legal-color-chip.shop-color-swatch {
  position: relative;
  display: block;
  overflow: hidden;
  width: 1.06em;
  min-height: 1.06em;
  height: 1.06em;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%),
    linear-gradient(315deg, rgba(7, 19, 63, 0.16), rgba(7, 19, 63, 0) 54%),
    var(--legal-swatch-color);
  box-shadow:
    inset 0 0 0 1px rgba(7, 19, 63, 0.12),
    0 2px 5px rgba(7, 19, 63, 0.12);
}

.legal-inline-icon {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.34em;
  vertical-align: -0.32em;
}

.legal-blurred-text {
  display: inline-block;
  filter: blur(4px);
  user-select: none;
}

.legal-quote {
  margin: 15px 0 0;
  border-left: 5px solid var(--pink);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  padding: 13px 16px;
}

.legal-quote p {
  margin: 0;
  color: var(--ink);
  font-weight: 850;
}

.legal-quote p + p {
  margin-top: 8px;
}

.legal-section strong {
  color: var(--ink);
  font-weight: 900;
}

.legal-placeholder {
  display: inline-block;
  border: 1px dashed rgba(240, 92, 157, 0.6);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: #b83272;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 950;
  line-height: 1.15;
  padding: 0 5px 1px;
}

.legal-address,
.legal-callout {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  padding: 12px 14px;
}

.legal-address {
  border: 2px solid rgba(99, 217, 202, 0.38);
  color: var(--ink);
}

.legal-callout {
  border-left: 5px solid var(--pink);
  color: var(--ink);
  font-weight: 850;
}

.legal-page-subscriptions {
  --legal-card: rgba(255, 255, 255, 0.94);
  --legal-card-strong: rgba(255, 248, 253, 0.98);
  --legal-border: rgba(255, 255, 255, 0.96);
  --legal-copy: rgba(7, 19, 63, 0.82);
  --legal-muted: rgba(73, 101, 168, 0.9);
}

.legal-page-subscriptions .legal-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.96);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 248, 253, 0.96) 48%, rgba(238, 248, 255, 0.96) 100%);
}

.legal-page-subscriptions .legal-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(180deg, var(--pink), var(--aqua), var(--yellow));
}

.legal-page-subscriptions .legal-hero > * {
  position: relative;
}

.legal-page-subscriptions .legal-hero h1 {
  max-width: 760px;
}

.legal-page-subscriptions .legal-hero-action {
  background: var(--pink);
}

.legal-page-subscriptions .legal-hero-action:hover,
.legal-page-subscriptions .legal-hero-action:focus-visible {
  background: var(--ink);
}

.legal-page-subscriptions .legal-hero-meta {
  border-color: rgba(240, 92, 157, 0.22);
  background: rgba(255, 255, 255, 0.82);
}

.legal-page-subscriptions .legal-quote {
  border: 2px solid rgba(240, 92, 157, 0.24);
  border-left: 0;
  background:
    linear-gradient(135deg, rgba(255, 248, 253, 0.94), rgba(238, 248, 255, 0.9)),
    rgba(255, 255, 255, 0.86);
}

.legal-page-subscriptions #tier-summary {
  border-color: rgba(240, 92, 157, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 253, 0.88)),
    var(--legal-card);
}

.legal-page-subscriptions #tier-summary .legal-table-wrap {
  border-color: rgba(7, 19, 63, 0.1);
  background: rgba(255, 255, 255, 0.78);
}

.legal-page-subscriptions #tier-summary .legal-table th {
  background: rgba(240, 92, 157, 0.12);
}

.legal-page-subscriptions #tier-summary .legal-table tbody tr:last-child td {
  background: rgba(255, 216, 61, 0.16);
  color: var(--ink);
  font-weight: 800;
}

.legal-page-subscriptions #backstage-pass,
.legal-page-subscriptions #prime-time,
.legal-page-subscriptions #all-access {
  position: relative;
  overflow: hidden;
}

.legal-page-subscriptions #backstage-pass::before,
.legal-page-subscriptions #prime-time::before,
.legal-page-subscriptions #all-access::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
}

.legal-page-subscriptions #backstage-pass::before {
  background: var(--aqua);
}

.legal-page-subscriptions #prime-time::before {
  background: var(--yellow);
}

.legal-page-subscriptions #all-access {
  border-color: rgba(240, 92, 157, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 248, 253, 0.96), rgba(255, 255, 255, 0.92)),
    var(--legal-card);
}

.legal-page-subscriptions #all-access::before {
  background: var(--pink);
}

@media (max-width: 920px) {
  .legal-hero {
    grid-template-columns: 1fr;
  }

  .legal-hero h1 {
    font-size: 3.3rem;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
    max-height: none;
  }

  .legal-toc nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body.legal-page {
    overflow-x: hidden;
  }

  body.legal-page .main-tabs {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    width: 100%;
    max-width: 100%;
  }

  .legal-shell {
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    padding: 0 10px;
  }

  .legal-hero,
  .legal-section,
  .legal-toc {
    width: 100%;
    max-width: 100%;
    border-width: 2px;
  }

  .legal-hero h1 {
    font-size: 2.56rem;
  }

  .legal-page-privacy .legal-hero h1 {
    font-size: 2.2rem;
  }

  .legal-hero p:not(.legal-eyebrow) {
    max-width: 27ch;
    font-size: 0.96rem;
  }

  .legal-toc nav {
    grid-template-columns: 1fr;
  }

  .legal-section p,
  .legal-section li {
    font-size: 0.94rem;
  }
}

.moderation-shell {
  display: grid;
  gap: 18px;
}

.moderation-hero h1 {
  font-size: 4.85rem;
}

.moderation-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  border: 3px solid var(--legal-border);
  border-radius: 8px;
  background: rgba(255, 248, 253, 0.88);
  box-shadow: 0 10px 24px rgba(7, 19, 63, 0.1);
  padding: 10px;
}

.moderation-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  gap: 7px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
  padding: 9px 14px;
}

.moderation-tab strong {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  min-height: 20px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--pink);
  font-size: 0.75rem;
  padding: 2px 6px;
}

.moderation-tab:hover,
.moderation-tab:focus-visible,
.moderation-tab.is-active {
  border-color: rgba(240, 92, 157, 0.42);
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  text-decoration: none;
}

.moderation-tab:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.8);
  outline-offset: 2px;
}

.moderation-tab-panel {
  min-width: 0;
}

.moderation-section-head,
.moderation-report-copy,
.moderation-report-form,
.moderation-decision,
.moderation-empty-state {
  border: 3px solid var(--legal-border);
  border-radius: 8px;
  background: var(--legal-card);
  box-shadow: 0 10px 24px rgba(7, 19, 63, 0.1);
}

.moderation-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  margin-bottom: 18px;
  padding: 22px;
}

.moderation-section-head > div,
.moderation-report-copy,
.moderation-report-form {
  min-width: 0;
}

.moderation-section-head h2,
.moderation-report-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 2.65rem;
  font-weight: 950;
  line-height: 0.96;
  text-transform: uppercase;
}

.moderation-section-head p:not(.legal-eyebrow),
.moderation-report-copy p,
.moderation-report-copy li,
.moderation-empty-state {
  color: var(--legal-copy);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.moderation-section-head p:not(.legal-eyebrow) {
  max-width: 760px;
  margin: 9px 0 0;
}

.moderation-secondary-link,
.moderation-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
}

.moderation-secondary-link {
  flex: 0 0 auto;
  border: 2px solid rgba(7, 19, 63, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  padding: 9px 13px;
}

.moderation-secondary-link:hover,
.moderation-secondary-link:focus-visible {
  color: var(--pink);
  text-decoration: none;
}

.moderation-rules-layout {
  margin-top: 0;
}

.moderation-rules-document .legal-intro {
  background: var(--legal-card-strong);
}

.moderation-report-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.moderation-report-copy,
.moderation-report-form {
  padding: 22px;
}

.moderation-report-copy {
  display: grid;
  gap: 12px;
}

.moderation-report-copy p,
.moderation-report-copy ul {
  margin: 0;
}

.moderation-report-copy ul {
  display: grid;
  gap: 8px;
  padding-left: 1.1rem;
}

.moderation-report-form {
  display: grid;
  gap: 13px;
  background: var(--legal-card-strong);
}

.moderation-honeypot {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.moderation-field {
  display: grid;
  gap: 6px;
}

.moderation-field span,
.moderation-check span {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.moderation-field input,
.moderation-field select,
.moderation-field textarea {
  width: 100%;
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font: inherit;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  line-height: 1.4;
  outline: 0;
  padding: 10px 12px;
}

.moderation-field textarea {
  resize: vertical;
}

.moderation-field input:focus,
.moderation-field select:focus,
.moderation-field textarea:focus {
  border-color: rgba(99, 217, 202, 0.78);
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.16);
}

.moderation-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.moderation-check input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--pink);
}

.moderation-primary-button {
  width: max-content;
  border: 2px solid rgba(7, 19, 63, 0.22);
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(7, 19, 63, 0.16);
  padding: 10px 16px;
}

.moderation-status {
  margin: 0;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 850;
  line-height: 1.35;
  padding: 11px 13px;
}

.moderation-status.is-success {
  background: rgba(99, 217, 202, 0.22);
}

.moderation-status.is-error {
  background: rgba(240, 92, 157, 0.14);
}

.moderation-empty-state {
  margin: 0;
  padding: 28px;
}

.moderation-decision-list {
  display: grid;
  gap: 14px;
}

.moderation-decision {
  display: grid;
  gap: 11px;
  padding: 22px;
}

.moderation-decision p {
  margin: 0;
  color: var(--legal-copy);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  line-height: 1.55;
}

.moderation-decision-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.moderation-decision-head div {
  display: grid;
  gap: 3px;
}

.moderation-decision-head strong {
  color: var(--ink);
  font-size: 1.28rem;
  font-weight: 950;
}

.moderation-decision-head span,
.moderation-decision-category,
.moderation-decision-status,
.moderation-policy-tags span {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 950;
}

.moderation-decision-category {
  text-transform: uppercase;
}

.moderation-decision-status,
.moderation-policy-tags span {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(99, 217, 202, 0.18);
  line-height: 1;
  padding: 7px 10px;
}

.moderation-public-table-wrap,
.moderation-staff-table-wrap {
  overflow-x: auto;
  border: 2px solid var(--panel-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.moderation-public-table,
.moderation-staff-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.moderation-staff-table {
  min-width: 880px;
}

.moderation-staff-table.is-compact {
  min-width: 100%;
}

.moderation-staff-table.is-compact th:nth-child(4),
.moderation-staff-table.is-compact th:nth-child(5),
.moderation-staff-table.is-compact th:nth-child(6),
.moderation-staff-table.is-compact td:nth-child(4),
.moderation-staff-table.is-compact td:nth-child(5),
.moderation-staff-table.is-compact td:nth-child(6) {
  display: none;
}

.moderation-staff-table.is-compact th,
.moderation-staff-table.is-compact td {
  padding: 11px 10px;
}

.moderation-public-table th,
.moderation-public-table td,
.moderation-staff-table th,
.moderation-staff-table td {
  text-align: left;
  vertical-align: middle;
  padding: 13px 16px;
  border-bottom: 2px solid rgba(11, 19, 64, 0.08);
}

.moderation-public-table th,
.moderation-staff-table th {
  color: var(--muted);
  background: rgba(99, 217, 202, 0.08);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.moderation-public-table td,
.moderation-staff-table td {
  color: var(--ink);
  font-weight: 850;
}

.moderation-public-table tbody tr:last-child td,
.moderation-staff-table tbody tr:last-child td {
  border-bottom: 0;
}

.moderation-public-table tbody tr:hover,
.moderation-staff-table tbody tr:hover,
.moderation-staff-table tbody tr.is-active {
  background: rgba(246, 81, 157, 0.06);
}

.moderation-public-table strong,
.moderation-public-table small,
.moderation-staff-table strong,
.moderation-staff-table small {
  display: block;
}

.moderation-public-table strong,
.moderation-staff-table strong {
  font-size: 1.03rem;
  font-weight: 950;
}

.moderation-public-table small,
.moderation-staff-table small {
  margin-top: 2px;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 850;
}

.moderation-staff-table td:nth-child(4),
.moderation-staff-table td:nth-child(5) {
  color: var(--legal-copy);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.35;
}

.moderation-staff-report-id {
  color: var(--ink);
  font-weight: 950;
  text-decoration: none;
}

.moderation-staff-report-id:hover,
.moderation-staff-report-id:focus-visible {
  color: var(--pink);
  text-decoration: none;
}

.moderation-table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  padding: 7px 10px;
}

.moderation-table-action:hover,
.moderation-table-action:focus-visible {
  border-color: rgba(240, 92, 157, 0.42);
  background: var(--pink);
  color: #fff;
  text-decoration: none;
}

.moderation-policy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.moderation-subhead {
  margin: 0 0 12px;
}

.moderation-subhead h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.moderation-subhead h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.16rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.moderation-report-thread,
.moderation-appeal-review {
  display: grid;
  gap: 11px;
  margin-top: 16px;
  min-width: 0;
}

.moderation-report-note-list {
  display: grid;
  gap: 9px;
}

.moderation-report-note {
  display: grid;
  gap: 9px;
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 12px;
}

.moderation-report-note > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.moderation-report-note strong {
  color: var(--ink);
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.moderation-report-note small {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.moderation-report-note p,
.moderation-appeal-decision p {
  margin: 0;
  color: var(--legal-copy);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.52;
  overflow-wrap: break-word;
}

.moderation-appeal-decision {
  display: grid;
  gap: 6px;
  border-top: 2px solid rgba(7, 19, 63, 0.08);
  padding-top: 10px;
}

.moderation-appeal-decision > strong {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.moderation-statement-form {
  margin-top: 14px;
}

.moderation-report-detail,
.moderation-user-reports,
.moderation-public-record,
.moderation-staff-list-panel,
.moderation-staff-detail-panel,
.moderation-staff-stats {
  border: 3px solid var(--legal-border);
  border-radius: 8px;
  background: var(--legal-card);
  box-shadow: 0 10px 24px rgba(7, 19, 63, 0.1);
  min-width: 0;
}

.moderation-report-detail,
.moderation-user-reports,
.moderation-public-record,
.moderation-staff-list-panel,
.moderation-staff-detail-panel {
  padding: 22px;
}

.moderation-report-detail,
.moderation-user-reports,
.moderation-public-record {
  margin-top: 18px;
}

.moderation-report-detail-head,
.moderation-list-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.moderation-report-detail-head h3,
.moderation-list-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.58rem;
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.moderation-list-heading span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.moderation-report-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: rgba(73, 101, 168, 0.13);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  padding: 7px 10px;
}

.moderation-report-status.is-pending {
  background: rgba(255, 216, 61, 0.32);
  color: #7b5e00;
}

.moderation-report-status.is-under-review {
  background: rgba(99, 217, 202, 0.24);
  color: #207a70;
}

.moderation-report-status.is-ban-issued {
  background: rgba(240, 92, 157, 0.17);
  color: #b83272;
}

.moderation-report-status.is-warning-issued {
  background: rgba(255, 216, 61, 0.26);
  color: #856500;
}

.moderation-report-status.is-approved {
  background: rgba(99, 217, 202, 0.24);
  color: #207a70;
}

.moderation-report-status.is-denied {
  background: rgba(240, 92, 157, 0.17);
  color: #b83272;
}

.moderation-report-status.is-resolved,
.moderation-report-status.is-dismissed,
.moderation-report-status.is-no-action {
  background: rgba(73, 101, 168, 0.12);
  color: var(--muted);
}

.moderation-report-facts,
.moderation-public-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 0;
}

.moderation-report-facts div,
.moderation-public-facts div {
  display: grid;
  gap: 4px;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  min-width: 0;
  padding: 10px 12px;
}

.moderation-report-facts dt,
.moderation-public-facts dt,
.moderation-report-outcome strong {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.moderation-report-facts dd,
.moderation-public-facts dd {
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.moderation-report-body {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.moderation-report-body section {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.moderation-report-body h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.moderation-report-body p,
.moderation-user-report-card em {
  margin: 0;
  color: var(--legal-copy);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.moderation-report-outcome {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.moderation-report-outcome span {
  display: inline-grid;
  gap: 4px;
  border: 2px solid rgba(99, 217, 202, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  min-width: 150px;
  padding: 9px 11px;
}

.moderation-user-report-list,
.moderation-staff-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.moderation-user-report-card,
.moderation-staff-report {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  text-decoration: none;
  padding: 12px;
}

.moderation-user-report-card:hover,
.moderation-user-report-card:focus-visible,
.moderation-user-report-card.is-active,
.moderation-staff-report:hover,
.moderation-staff-report:focus-visible,
.moderation-staff-report.is-active {
  border-color: rgba(240, 92, 157, 0.42);
  background: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.moderation-user-report-card span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.moderation-user-report-card strong,
.moderation-staff-report strong {
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.moderation-user-report-card small,
.moderation-staff-report small,
.moderation-staff-report em {
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.moderation-public-facts {
  margin-top: 0;
}

.moderation-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.moderation-pagination a {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 34px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
}

.moderation-pagination a:hover,
.moderation-pagination a:focus-visible,
.moderation-pagination a.is-active {
  border-color: rgba(240, 92, 157, 0.42);
  background: var(--pink);
  color: #fff;
  text-decoration: none;
}

.moderation-staff-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
}

.moderation-staff-stat {
  display: grid;
  gap: 4px;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  min-width: 0;
  padding: 11px 12px;
  text-decoration: none;
}

.moderation-staff-stat:hover,
.moderation-staff-stat:focus-visible,
.moderation-staff-stat.is-active {
  border-color: rgba(240, 92, 157, 0.42);
  background: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}

.moderation-staff-stat.is-active {
  box-shadow: inset 0 -3px 0 rgba(240, 92, 157, 0.56);
}

.moderation-staff-stats strong {
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 950;
  line-height: 1;
}

.moderation-staff-stats small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.moderation-staff-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.moderation-staff-workspace.is-table-view {
  grid-template-columns: 1fr;
}

.moderation-staff-list-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.moderation-staff-workspace.is-table-view .moderation-staff-list-panel {
  position: static;
  max-height: none;
}

.moderation-staff-list {
  margin-top: 12px;
}

.moderation-staff-table-wrap {
  margin-top: 12px;
}

.moderation-staff-report .moderation-report-status {
  justify-self: start;
}

.moderation-staff-detail-panel {
  display: grid;
  gap: 14px;
}

.moderation-report-detail.is-staff {
  margin-top: 0;
  border-width: 0;
  box-shadow: none;
  padding: 0;
}

.moderation-decision-form {
  border-color: rgba(99, 217, 202, 0.34);
}

.moderation-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 920px) {
  .moderation-report-layout,
  .moderation-staff-workspace {
    grid-template-columns: 1fr;
  }

  .moderation-staff-list-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 620px) {
  .moderation-hero h1 {
    font-size: 2.56rem;
  }

  .moderation-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-width: 2px;
  }

  .moderation-tab {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
  }

  .moderation-tab:nth-child(3) {
    grid-column: 1 / -1;
  }

  .moderation-section-head,
  .moderation-decision-head,
  .moderation-report-detail-head,
  .moderation-list-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .moderation-report-copy,
  .moderation-report-form,
  .moderation-section-head,
  .moderation-decision,
  .moderation-empty-state,
  .moderation-report-detail,
  .moderation-user-reports,
  .moderation-public-record,
  .moderation-staff-list-panel,
  .moderation-staff-detail-panel {
    border-width: 2px;
    padding: 18px;
  }

  .moderation-staff-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-width: 2px;
    padding: 10px;
  }

  .moderation-report-facts,
  .moderation-public-facts,
  .moderation-form-grid {
    grid-template-columns: 1fr;
  }

  .moderation-section-head h2,
  .moderation-report-copy h2 {
    font-size: 1.9rem;
  }

  .legal-table {
    min-width: 300px;
  }
}

.spilled-info-page {
  --spilled-blue: #526EB0;
  --spilled-mint: #63D9CA;
  --spilled-mint-soft: #E6F8EA;
  --spilled-rose: #F05C9D;
  --spilled-yellow: #FFD83D;
}

.spilled-info-shell {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
  margin: 16px 0 48px;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.spilled-info-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(300px, 520px);
  justify-content: center;
  align-items: center;
  gap: clamp(22px, 4vw, 58px);
  min-height: 450px;
  overflow: hidden;
  padding: clamp(34px, 5vw, 66px) max(18px, calc((100% - 1180px) / 2));
  background:
    linear-gradient(90deg, rgba(7, 19, 63, 0.82), rgba(7, 19, 63, 0.52) 52%, rgba(7, 19, 63, 0.1)),
    url("game-assets/spilled/checkered_background.jpeg") center / cover;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.78);
}

.spilled-info-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 118px;
  background: url("game-assets/spilled/grass.png") bottom center / auto 118px repeat-x;
  pointer-events: none;
}

.spilled-info-hero-copy,
.spilled-info-hero-board {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.spilled-info-kicker {
  margin: 0 0 14px;
  color: var(--spilled-yellow);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 2px 5px rgba(7, 19, 63, 0.44);
}

.spilled-info-hero h1 {
  margin: 0;
  width: min(100%, 430px);
}

.spilled-info-hero h1 img {
  display: block;
  width: 100%;
  height: auto;
}

.spilled-info-hero-copy > p:not(.spilled-info-kicker) {
  max-width: 520px;
  margin: 18px 0 0;
  color: #FFFFFF;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  font-weight: 700;
  line-height: 1.24;
  text-shadow: 0 2px 8px rgba(7, 19, 63, 0.5);
}

.spilled-info-cta-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 26px;
}

.spilled-info-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFE872, var(--spilled-yellow));
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  padding: 11px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 rgba(217, 154, 0, 0.34),
    0 12px 18px rgba(7, 19, 63, 0.22);
}

.spilled-info-cta:hover,
.spilled-info-cta:focus-visible {
  transform: translateY(-1px);
}

.spilled-info-cta:disabled,
.spilled-info-cta[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(45%);
  opacity: 0.68;
  transform: none;
}

.spilled-info-secondary-link {
  color: #FFFFFF;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(7, 19, 63, 0.44);
}

.spilled-info-hero-board {
  position: relative;
  min-height: clamp(270px, 28vw, 330px);
  width: min(100%, 500px);
  margin: 0 auto;
}

.spilled-info-hero-token {
  position: absolute;
  display: block;
}

.spilled-info-hero-token img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 10px rgba(7, 19, 63, 0.24))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.24));
}

.spilled-info-hero-token.is-points {
  top: 8%;
  left: 14%;
  width: clamp(68px, 7vw, 94px);
  transform: rotate(-6deg);
  z-index: 2;
}

.spilled-info-hero-token.is-key {
  top: 13%;
  right: 7%;
  width: clamp(126px, 13vw, 172px);
  transform: rotate(2deg);
  z-index: 1;
}

.spilled-info-hero-token.is-drink {
  bottom: 6%;
  left: 18%;
  width: clamp(66px, 7.4vw, 96px);
  transform: rotate(-2deg);
  z-index: 3;
}

.spilled-info-hero-token.is-eat {
  right: 18%;
  bottom: 11%;
  width: clamp(78px, 8vw, 110px);
  transform: rotate(5deg);
  z-index: 2;
}

.spilled-info-section {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto;
}

.spilled-info-overview,
.spilled-info-payout-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1fr);
  gap: clamp(20px, 4vw, 42px);
  align-items: start;
}

.spilled-info-payout-section {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.spilled-info-section-copy h2,
.spilled-info-section-heading h2 {
  margin: 0;
  color: var(--spilled-rose);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: clamp(2.05rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.94;
  text-shadow:
    1px 0 0 #ffffff,
    -1px 0 0 #ffffff,
    0 1px 0 #ffffff,
    0 -1px 0 #ffffff,
    2px 2px 0 rgba(255, 216, 61, 0.64);
}

.spilled-info-section-copy p,
.spilled-info-section-heading p {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.45;
}

.spilled-info-section-heading {
  max-width: 720px;
  margin-bottom: 18px;
}

.spilled-info-basics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.spilled-info-basic,
.spilled-info-item {
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(230, 248, 234, 0.72)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px rgba(7, 19, 63, 0.1);
}

.spilled-info-basic {
  min-height: 132px;
  padding: 16px;
}

.spilled-info-basic h3,
.spilled-info-item h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.spilled-info-basic p,
.spilled-info-item p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.38;
}

.spilled-info-rule-section,
.spilled-info-chat-section,
.spilled-info-drop-section {
  display: grid;
  gap: 18px;
}

.spilled-info-rule-grid,
.spilled-info-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.spilled-info-rule-card,
.spilled-info-flow-card,
.spilled-info-callout,
.spilled-info-table,
.spilled-info-drop-card {
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(230, 248, 234, 0.68)),
    rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 24px rgba(7, 19, 63, 0.09);
}

.spilled-info-rule-card,
.spilled-info-flow-card {
  display: grid;
  align-content: start;
  min-height: 142px;
  padding: 16px;
}

.spilled-info-rule-card h3,
.spilled-info-flow-card h3,
.spilled-info-drop-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.24rem;
  font-weight: 900;
  line-height: 1.05;
}

.spilled-info-rule-card p,
.spilled-info-flow-card p,
.spilled-info-drop-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
}

.spilled-info-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background:
    linear-gradient(90deg, rgba(255, 216, 61, 0.38), rgba(255, 255, 255, 0.82)),
    rgba(255, 255, 255, 0.74);
}

.spilled-info-callout strong {
  flex: 0 0 auto;
  color: var(--spilled-rose);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.spilled-info-callout span {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.34;
}

.spilled-info-chat-section,
.spilled-info-wide-copy {
  max-width: 920px;
}

.spilled-info-table {
  overflow: hidden;
}

.spilled-info-table-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) repeat(3, minmax(110px, 1fr));
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(82, 110, 176, 0.16);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  padding: 13px 16px;
}

.spilled-info-table-row:last-child {
  border-bottom: 0;
}

.spilled-info-table-row.is-head {
  background: rgba(82, 110, 176, 0.12);
  color: var(--spilled-blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.spilled-info-table-row strong {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 900;
}

.spilled-info-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.spilled-info-mini-list,
.spilled-info-tip-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.spilled-info-mini-list {
  display: grid;
  gap: 7px;
}

.spilled-info-mini-list li,
.spilled-info-tip-list li {
  position: relative;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.28;
  padding-left: 18px;
}

.spilled-info-mini-list li::before,
.spilled-info-tip-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spilled-rose);
  box-shadow: 0 0 0 3px rgba(240, 92, 157, 0.14);
}

.spilled-info-drop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.spilled-info-drop-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 136px;
  padding: 16px;
}

.spilled-info-drop-card img {
  display: block;
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(7, 19, 63, 0.12));
}

.spilled-info-flow-card {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
}

.spilled-info-flow-card span {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFE872, var(--spilled-yellow));
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 0 rgba(217, 154, 0, 0.24);
}

.spilled-info-tip-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 0;
}

.spilled-info-tip-list li {
  min-height: 54px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 8px 14px rgba(7, 19, 63, 0.06);
  padding: 13px 14px 13px 34px;
}

.spilled-info-tip-list li::before {
  left: 14px;
  top: 19px;
}

.spilled-info-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.spilled-info-item {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 286px;
  padding: 16px;
}

.spilled-info-item-rank {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFE872, var(--spilled-yellow));
  color: var(--ink);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 0 rgba(217, 154, 0, 0.24);
}

.spilled-info-item img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 12px;
}

.spilled-info-item-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(82, 110, 176, 0.12);
  color: var(--spilled-blue);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 9px;
  text-transform: uppercase;
}

.spilled-info-payout-intro {
  max-width: 900px;
}

.spilled-info-payout-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  gap: 10px 12px;
}

.spilled-info-payout-card {
  display: grid;
  grid-template-columns: minmax(78px, 0.72fr) minmax(92px, 1fr) minmax(112px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 76px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 216, 61, 0.38), rgba(255, 255, 255, 0.74)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 14px rgba(7, 19, 63, 0.08);
  padding: 10px 14px;
}

.spilled-info-payout-card.is-place-2 {
  background:
    linear-gradient(90deg, rgba(99, 217, 202, 0.34), rgba(255, 255, 255, 0.74)),
    rgba(255, 255, 255, 0.72);
}

.spilled-info-payout-card.is-place-3 {
  background:
    linear-gradient(90deg, rgba(240, 92, 157, 0.22), rgba(255, 255, 255, 0.74)),
    rgba(255, 255, 255, 0.72);
}

.spilled-info-payout-card.is-standard {
  background:
    linear-gradient(90deg, rgba(229, 233, 242, 0.72), rgba(255, 255, 255, 0.76)),
    rgba(255, 255, 255, 0.72);
}

.spilled-info-payout-place {
  color: var(--spilled-blue);
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.05;
  text-transform: uppercase;
}

.spilled-info-payout-value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--ink);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.spilled-info-payout-value img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
}

.spilled-info-payout-value.is-fame {
  font-size: clamp(1.12rem, 1.55vw, 1.42rem);
}

.madhouse-info-faq,
.spilled-info-faq {
  display: grid;
  gap: 18px;
}

.madhouse-info-faq-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.madhouse-info-faq-item {
  display: grid;
  align-content: start;
  min-height: 150px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(230, 248, 234, 0.66)),
    rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 20px rgba(7, 19, 63, 0.08);
  padding: 16px;
}

.madhouse-info-faq-item h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 900;
  line-height: 1.08;
}

.madhouse-info-faq-item p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.38;
}

.spilled-info-payout-value.is-fortune {
  color: var(--spilled-rose);
  font-size: clamp(0.88rem, 1.25vw, 1.02rem);
}

.spilled-info-payout-card.is-standard .spilled-info-payout-value.is-fortune {
  color: #6B789C;
}

@media (max-width: 980px) {
  .spilled-info-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-bottom: 94px;
  }

  .spilled-info-hero-copy {
    max-width: 650px;
  }

  .spilled-info-hero-board {
    min-height: 260px;
    width: min(100%, 520px);
  }

  .spilled-info-overview {
    grid-template-columns: 1fr;
  }

  .spilled-info-rule-grid,
  .spilled-info-flow-grid,
  .spilled-info-tip-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spilled-info-drop-grid,
  .spilled-info-split {
    grid-template-columns: 1fr;
  }

  .spilled-info-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spilled-info-payout-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(9, auto);
  }

  .madhouse-info-faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .spilled-info-shell {
    gap: 26px;
    margin-top: 10px;
  }

  .spilled-info-hero {
    gap: 18px;
    padding: 28px 16px 82px;
  }

  .spilled-info-hero-copy > p:not(.spilled-info-kicker) {
    font-size: 1.12rem;
  }

  .spilled-info-cta-form {
    align-items: stretch;
    flex-direction: column;
  }

  .spilled-info-cta,
  .spilled-info-secondary-link {
    width: 100%;
    text-align: center;
  }

  .spilled-info-hero-board {
    min-height: 214px;
  }

  .spilled-info-section {
    width: min(100% - 20px, 1180px);
  }

  .spilled-info-basics,
  .spilled-info-items,
  .spilled-info-rule-grid,
  .spilled-info-flow-grid,
  .spilled-info-tip-list,
  .madhouse-info-faq-list {
    grid-template-columns: 1fr;
  }

  .spilled-info-callout {
    display: grid;
    gap: 6px;
  }

  .spilled-info-table {
    overflow-x: auto;
  }

  .spilled-info-table-row {
    min-width: 560px;
    grid-template-columns: minmax(112px, 0.8fr) repeat(3, minmax(100px, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .spilled-info-payout-list {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .spilled-info-payout-card {
    grid-template-columns: minmax(74px, 0.72fr) minmax(88px, 1fr) minmax(100px, 1fr);
    min-height: 68px;
    gap: 8px;
    padding: 10px;
  }

  .spilled-info-payout-value {
    gap: 6px;
  }

  .spilled-info-payout-value img {
    width: 22px;
    height: 22px;
  }

  .spilled-info-payout-value.is-fame {
    font-size: 1.1rem;
  }

  .spilled-info-payout-value.is-fortune {
    font-size: 0.86rem;
  }

  .spilled-info-basic,
  .spilled-info-item {
    min-height: 0;
  }
}

.jungle-hustle-info-page {
  --spilled-blue: #456030;
  --spilled-mint: #8FAD67;
  --spilled-mint-soft: #F0E6C9;
  --spilled-rose: #8B5B33;
  --spilled-yellow: #D0A34F;
  --jungle-deep: #152313;
  --jungle-leaf: #456030;
  --jungle-teal: #4E8E7A;
  --jungle-copper: #8B5B33;
  --jungle-gold: #D0A34F;
  --jungle-parchment: #F0E6C9;
  background: #F5EED9;
}

.jungle-hustle-info-page .spilled-info-hero {
  background:
    linear-gradient(90deg, rgba(15, 28, 14, 0.92), rgba(28, 49, 25, 0.7) 48%, rgba(21, 35, 19, 0.18)),
    url("game-assets/jungle hustle/background.png") center / cover;
  box-shadow:
    inset 0 -1px 0 rgba(240, 230, 201, 0.78),
    0 18px 36px rgba(21, 35, 19, 0.16);
}

.jungle-hustle-info-page .spilled-info-hero::after {
  height: 112px;
  background:
    linear-gradient(180deg, rgba(21, 35, 19, 0), rgba(21, 35, 19, 0.86)),
    linear-gradient(90deg, rgba(69, 96, 48, 0.72), rgba(139, 91, 51, 0.52), rgba(78, 142, 122, 0.42));
}

.jungle-hustle-info-page .spilled-info-kicker {
  color: #F6D568;
  text-shadow: 0 2px 5px rgba(10, 17, 8, 0.62);
}

.jungle-hustle-info-page .spilled-info-hero h1 {
  width: min(100%, 390px);
}

.jungle-hustle-info-page .spilled-info-hero-copy > p:not(.spilled-info-kicker),
.jungle-hustle-info-page .spilled-info-secondary-link {
  text-shadow: 0 2px 8px rgba(10, 17, 8, 0.68);
}

.jungle-hustle-info-page .spilled-info-cta {
  background: linear-gradient(180deg, #F5D889, var(--jungle-gold));
  color: #1B2416;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 rgba(96, 62, 28, 0.38),
    0 12px 18px rgba(10, 17, 8, 0.28);
}

.jungle-hustle-info-page .spilled-info-hero-token.is-tribal {
  right: 2%;
  bottom: 7%;
  width: clamp(220px, 24vw, 330px);
  transform: rotate(1deg);
  z-index: 1;
}

.jungle-hustle-info-page .spilled-info-hero-token.is-idol {
  top: 6%;
  right: 12%;
  width: clamp(82px, 8vw, 118px);
  transform: rotate(8deg);
  z-index: 3;
}

.jungle-hustle-info-page .spilled-info-hero-token.is-immunity {
  top: 12%;
  left: 6%;
  width: clamp(130px, 13vw, 180px);
  transform: rotate(-6deg);
  z-index: 2;
}

.jungle-hustle-info-page .spilled-info-hero-token.is-camp {
  left: 22%;
  bottom: 5%;
  width: clamp(88px, 9vw, 128px);
  transform: rotate(-2deg);
  z-index: 4;
}

.jungle-hustle-info-page .spilled-info-section-copy h2,
.jungle-hustle-info-page .spilled-info-section-heading h2 {
  color: var(--jungle-copper);
  font-family: "Javiore", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  text-shadow:
    1px 0 0 #F8F0D8,
    -1px 0 0 #F8F0D8,
    0 1px 0 #F8F0D8,
    0 -1px 0 #F8F0D8,
    2px 2px 0 rgba(208, 163, 79, 0.5);
}

.jungle-hustle-info-page .spilled-info-basic,
.jungle-hustle-info-page .spilled-info-item {
  border-color: rgba(240, 230, 201, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 250, 234, 0.92), rgba(240, 230, 201, 0.72)),
    rgba(255, 250, 234, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px rgba(21, 35, 19, 0.12);
}

.jungle-hustle-info-page .spilled-info-item-rank {
  background: linear-gradient(180deg, #F5D889, var(--jungle-gold));
  color: #1B2416;
  box-shadow: 0 3px 0 rgba(96, 62, 28, 0.26);
}

.jungle-hustle-info-page .spilled-info-item-label {
  background: rgba(78, 142, 122, 0.14);
  color: var(--jungle-teal);
}

.jungle-info-bonus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.jungle-info-bonus-card {
  min-height: 174px;
}

.jungle-info-camp-section {
  display: grid;
  gap: 16px;
}

.jungle-info-table-wrap {
  overflow-x: auto;
  border: 2px solid rgba(240, 230, 201, 0.86);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 234, 0.84), rgba(240, 230, 201, 0.62)),
    rgba(255, 250, 234, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 24px rgba(21, 35, 19, 0.1);
}

.jungle-info-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.jungle-info-table th,
.jungle-info-table td {
  border-bottom: 1px solid rgba(69, 96, 48, 0.16);
  padding: 13px 16px;
  text-align: left;
  vertical-align: middle;
}

.jungle-info-table thead th {
  background: rgba(69, 96, 48, 0.12);
  color: var(--jungle-leaf);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.jungle-info-table tbody th {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 900;
}

.jungle-info-table tbody tr:last-child th,
.jungle-info-table tbody tr:last-child td {
  border-bottom: 0;
}

.jungle-info-table tbody th span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.jungle-info-table img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}

.jungle-info-table td {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 800;
}

.jungle-info-consume-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jungle-hustle-info-page .spilled-info-payout-card {
  background:
    linear-gradient(90deg, rgba(208, 163, 79, 0.34), rgba(255, 250, 234, 0.78)),
    rgba(255, 250, 234, 0.72);
}

.jungle-hustle-info-page .spilled-info-payout-card.is-place-2 {
  background:
    linear-gradient(90deg, rgba(78, 142, 122, 0.3), rgba(255, 250, 234, 0.78)),
    rgba(255, 250, 234, 0.72);
}

.jungle-hustle-info-page .spilled-info-payout-card.is-place-3 {
  background:
    linear-gradient(90deg, rgba(139, 91, 51, 0.24), rgba(255, 250, 234, 0.78)),
    rgba(255, 250, 234, 0.72);
}

.jungle-hustle-info-page .spilled-info-payout-card.is-standard {
  background:
    linear-gradient(90deg, rgba(240, 230, 201, 0.78), rgba(255, 250, 234, 0.78)),
    rgba(255, 250, 234, 0.72);
}

.jungle-hustle-info-page .spilled-info-payout-value.is-fortune {
  color: var(--jungle-copper);
}

.jungle-hustle-info-page .spilled-info-payout-card.is-standard .spilled-info-payout-value.is-fortune {
  color: #66735C;
}

@media (max-width: 980px) {
  .jungle-info-bonus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jungle-info-consume-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .jungle-hustle-info-page .spilled-info-hero h1 {
    width: min(100%, 320px);
  }

  .jungle-hustle-info-page .spilled-info-hero-token.is-tribal {
    width: clamp(180px, 58vw, 260px);
  }

  .jungle-info-bonus-grid,
  .jungle-info-consume-items {
    grid-template-columns: 1fr;
  }

  .jungle-info-table {
    min-width: 580px;
  }
}

.madhouse-info-page {
  --spilled-blue: #D83E00;
  --spilled-mint: #FFE22B;
  --spilled-mint-soft: #FFF3B0;
  --spilled-rose: #D83E00;
  --spilled-yellow: #FFE22B;
  --madhouse-brown: #341D0C;
  --madhouse-cream: #F4EAD8;
  --madhouse-red: #D83E00;
  --madhouse-teal: #2F7D7A;
  --madhouse-plum: #6B3A86;
  --madhouse-yellow: #FFE22B;
  background: url("game-assets/madhouse/background.png") center top / 680px auto repeat #F4EAD8;
}

.madhouse-info-page .spilled-info-hero {
  grid-template-columns: minmax(0, 520px) minmax(300px, 430px);
  gap: clamp(22px, 4vw, 50px);
  align-items: center;
  min-height: 430px;
  overflow: visible;
  padding-top: clamp(30px, 4vw, 50px);
  padding-bottom: clamp(34px, 5vw, 58px);
  background:
    linear-gradient(90deg, rgba(52, 29, 12, 0.92), rgba(116, 42, 18, 0.76) 44%, rgba(244, 234, 216, 0.62)),
    url("game-assets/madhouse/background.png") center top / 680px auto repeat #F4EAD8;
  box-shadow:
    inset 0 -1px 0 rgba(255, 244, 194, 0.82),
    0 18px 36px rgba(52, 29, 12, 0.14);
}

.madhouse-info-page .spilled-info-hero::after {
  display: none;
}

.madhouse-info-page .spilled-info-kicker {
  color: #FFF071;
  text-shadow: 0 2px 5px rgba(52, 29, 12, 0.66);
}

.madhouse-info-page .spilled-info-hero h1 {
  display: grid;
  place-items: center;
  width: min(100%, 370px);
  border: 2px solid rgba(255, 250, 231, 0.72);
  border-radius: 8px;
  background: rgba(255, 250, 231, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 14px 24px rgba(52, 29, 12, 0.22);
  padding: 12px;
}

.madhouse-info-page .spilled-info-hero h1 img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: contain;
}

.madhouse-info-page .spilled-info-hero-copy > p:not(.spilled-info-kicker) {
  max-width: 500px;
  font-size: clamp(1.08rem, 1.55vw, 1.42rem);
}

.madhouse-info-page .spilled-info-hero-copy > p:not(.spilled-info-kicker),
.madhouse-info-page .spilled-info-secondary-link {
  text-shadow: 0 2px 8px rgba(52, 29, 12, 0.66);
}

.madhouse-info-hero-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 430px);
  border: 2px solid rgba(255, 250, 231, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 231, 0.88), rgba(255, 243, 176, 0.58)),
    rgba(255, 250, 231, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 32px rgba(52, 29, 12, 0.24);
  padding: 18px;
}

.madhouse-info-hero-card {
  display: grid;
  grid-template-rows: minmax(94px, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid rgba(52, 29, 12, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 250, 231, 0.72)),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 14px rgba(52, 29, 12, 0.12);
  padding: 12px;
}

.madhouse-info-hero-card img {
  display: block;
  width: min(78%, 108px);
  max-height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(52, 29, 12, 0.18));
}

.madhouse-info-hero-card:last-child img {
  width: min(86%, 140px);
  max-height: 76px;
}

.madhouse-info-hero-card span {
  color: var(--madhouse-brown);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.madhouse-info-page .spilled-info-cta {
  background: linear-gradient(180deg, #FFF071, var(--madhouse-yellow));
  color: var(--madhouse-brown);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 rgba(122, 34, 0, 0.34),
    0 12px 18px rgba(52, 29, 12, 0.28);
}

.madhouse-info-page .spilled-info-section-copy h2,
.madhouse-info-page .spilled-info-section-heading h2 {
  color: var(--madhouse-red);
  font-family: "Lakon Rokum", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  text-shadow:
    1px 0 0 #FFF7D5,
    -1px 0 0 #FFF7D5,
    0 1px 0 #FFF7D5,
    0 -1px 0 #FFF7D5,
    2px 2px 0 rgba(255, 226, 43, 0.62);
}

.madhouse-info-page .spilled-info-basic,
.madhouse-info-page .spilled-info-item,
.madhouse-info-page .madhouse-info-faq-item,
.madhouse-info-page .spilled-info-rule-card,
.madhouse-info-page .spilled-info-flow-card,
.madhouse-info-page .spilled-info-callout,
.madhouse-info-page .spilled-info-table,
.madhouse-info-page .spilled-info-drop-card,
.madhouse-info-page .spilled-info-tip-list li {
  border-color: rgba(255, 250, 231, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 250, 231, 0.9), rgba(255, 243, 176, 0.62)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 24px rgba(52, 29, 12, 0.12);
}

.madhouse-info-page .spilled-info-basic h3,
.madhouse-info-page .spilled-info-item h3,
.madhouse-info-page .madhouse-info-faq-item h3,
.madhouse-info-page .spilled-info-rule-card h3,
.madhouse-info-page .spilled-info-flow-card h3,
.madhouse-info-page .spilled-info-drop-card h3 {
  color: var(--madhouse-brown);
}

.madhouse-info-page .spilled-info-basic p,
.madhouse-info-page .spilled-info-item p,
.madhouse-info-page .madhouse-info-faq-item p,
.madhouse-info-page .spilled-info-rule-card p,
.madhouse-info-page .spilled-info-flow-card p,
.madhouse-info-page .spilled-info-drop-card p,
.madhouse-info-page .spilled-info-section-copy p,
.madhouse-info-page .spilled-info-section-heading p {
  color: rgba(52, 29, 12, 0.82);
}

.madhouse-info-page .spilled-info-item-rank {
  background: linear-gradient(180deg, #FFF071, var(--madhouse-yellow));
  color: var(--madhouse-brown);
  box-shadow: 0 3px 0 rgba(122, 34, 0, 0.24);
}

.madhouse-info-page .spilled-info-item-label {
  background: rgba(47, 125, 122, 0.14);
  color: var(--madhouse-teal);
}

.madhouse-info-page .spilled-info-table-row {
  border-bottom-color: rgba(52, 29, 12, 0.14);
  color: rgba(52, 29, 12, 0.76);
}

.madhouse-info-page .spilled-info-table-row.is-head {
  background: rgba(216, 62, 0, 0.12);
  color: var(--madhouse-red);
}

.madhouse-info-page .spilled-info-table-row strong {
  color: var(--madhouse-brown);
}

.madhouse-info-page .spilled-info-callout {
  background:
    linear-gradient(90deg, rgba(255, 226, 43, 0.44), rgba(255, 250, 231, 0.84)),
    rgba(255, 250, 231, 0.72);
}

.madhouse-info-page .spilled-info-callout strong,
.madhouse-info-page .spilled-info-payout-place,
.madhouse-info-page .spilled-info-payout-value.is-fortune {
  color: var(--madhouse-red);
}

.madhouse-info-page .spilled-info-callout span,
.madhouse-info-page .spilled-info-tip-list li {
  color: var(--madhouse-brown);
}

.madhouse-info-page .spilled-info-mini-list li::before,
.madhouse-info-page .spilled-info-tip-list li::before {
  background: var(--madhouse-red);
  box-shadow: 0 0 0 3px rgba(216, 62, 0, 0.14);
}

.madhouse-info-page .spilled-info-flow-card span {
  background: linear-gradient(180deg, #FFF071, var(--madhouse-yellow));
  color: var(--madhouse-brown);
  box-shadow: 0 3px 0 rgba(122, 34, 0, 0.24);
}

.madhouse-info-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.madhouse-info-flow .spilled-info-item {
  min-height: 270px;
}

.madhouse-info-competition-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.madhouse-info-rule-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.madhouse-info-auto-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.madhouse-info-page .spilled-info-payout-card {
  background:
    linear-gradient(90deg, rgba(255, 226, 43, 0.38), rgba(255, 250, 231, 0.78)),
    rgba(255, 250, 231, 0.72);
}

.madhouse-info-page .spilled-info-payout-card.is-place-2 {
  background:
    linear-gradient(90deg, rgba(47, 125, 122, 0.28), rgba(255, 250, 231, 0.78)),
    rgba(255, 250, 231, 0.72);
}

.madhouse-info-page .spilled-info-payout-card.is-place-3 {
  background:
    linear-gradient(90deg, rgba(107, 58, 134, 0.22), rgba(255, 250, 231, 0.78)),
    rgba(255, 250, 231, 0.72);
}

.madhouse-info-page .spilled-info-payout-card.is-standard {
  background:
    linear-gradient(90deg, rgba(244, 234, 216, 0.78), rgba(255, 250, 231, 0.78)),
    rgba(255, 250, 231, 0.72);
}

.madhouse-info-page .spilled-info-payout-card.is-standard .spilled-info-payout-value.is-fortune {
  color: rgba(52, 29, 12, 0.64);
}

@media (max-width: 1180px) {
  .madhouse-info-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .madhouse-info-flow,
  .madhouse-info-competition-grid,
  .madhouse-info-rule-grid,
  .madhouse-info-auto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .madhouse-info-page .spilled-info-hero h1 {
    width: min(100%, 320px);
    padding: 10px;
  }

  .madhouse-info-hero-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
  }

  .madhouse-info-hero-card {
    grid-template-rows: minmax(76px, 1fr) auto;
    padding: 10px;
  }

  .madhouse-info-hero-card img {
    max-height: 84px;
  }

  .madhouse-info-flow,
  .madhouse-info-competition-grid,
  .madhouse-info-rule-grid,
  .madhouse-info-auto-grid {
    grid-template-columns: 1fr;
  }
}

.magnate-info-page {
  --spilled-blue: #2F897E;
  --spilled-mint: #F4C7CB;
  --spilled-mint-soft: #FFF6E8;
  --spilled-rose: #A73D4A;
  --spilled-yellow: #D7A563;
  --magnate-info-ink: #2E1F2C;
  --magnate-info-muted: #70505E;
  --magnate-info-coral: #D98679;
  --magnate-info-rose: #A73D4A;
  --magnate-info-gold: #B98643;
  --magnate-info-bright-gold: #D7A563;
  --magnate-info-champagne: #FFF6E8;
  background:
    linear-gradient(90deg, rgba(46, 31, 44, 0.12), rgba(46, 31, 44, 0) 18%, rgba(46, 31, 44, 0) 82%, rgba(46, 31, 44, 0.1)),
    url("game-assets/magnate/background.png") center top / cover fixed #FFF7ED;
}

.magnate-info-page .site-header {
  background: rgba(255, 247, 237, 0.88);
  box-shadow: none;
}

.magnate-info-page .spilled-info-hero {
  background:
    linear-gradient(90deg, rgba(46, 31, 44, 0.9), rgba(77, 48, 61, 0.68) 48%, rgba(167, 61, 74, 0.2)),
    url("game-assets/magnate/background.png") center top / cover no-repeat #FFF7ED;
  box-shadow:
    inset 0 -1px 0 rgba(255, 246, 232, 0.86),
    0 18px 36px rgba(46, 31, 44, 0.14);
}

.magnate-info-page .spilled-info-hero::after {
  height: 116px;
  background:
    linear-gradient(180deg, rgba(46, 31, 44, 0), rgba(46, 31, 44, 0.72)),
    linear-gradient(90deg, rgba(185, 134, 67, 0.72), rgba(244, 199, 203, 0.56), rgba(47, 137, 126, 0.44));
}

.magnate-info-page .spilled-info-kicker {
  color: var(--magnate-info-bright-gold);
  text-shadow: 0 2px 5px rgba(46, 31, 44, 0.7);
}

.magnate-info-page .spilled-info-hero h1 {
  width: min(100%, 440px);
}

.magnate-info-page .spilled-info-hero h1 img {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7))
    drop-shadow(0 12px 18px rgba(46, 31, 44, 0.28));
}

.magnate-info-page .spilled-info-hero-copy > p:not(.spilled-info-kicker),
.magnate-info-page .spilled-info-secondary-link {
  color: var(--magnate-info-champagne);
  text-shadow: 0 2px 8px rgba(46, 31, 44, 0.72);
}

.magnate-info-page .spilled-info-cta {
  background: linear-gradient(180deg, #F0C982, var(--magnate-info-bright-gold));
  color: var(--magnate-info-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 4px 0 rgba(96, 60, 32, 0.34),
    0 12px 18px rgba(46, 31, 44, 0.3);
}

.magnate-info-hero-board {
  display: grid;
  place-items: center;
}

.magnate-info-wall {
  position: relative;
  display: grid;
  align-content: center;
  gap: 18px;
  width: min(100%, 470px);
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(185, 134, 67, 0.34);
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(185, 134, 67, 0.05) 0 1px, transparent 1px 44px),
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 36%),
    linear-gradient(135deg, rgba(255, 253, 249, 0.96), rgba(255, 246, 232, 0.78) 42%, rgba(255, 251, 247, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(185, 134, 67, 0.24),
    0 26px 52px rgba(46, 31, 44, 0.24);
  padding: 24px;
}

.magnate-info-wall::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(185, 134, 67, 0.2);
  border-radius: 9px;
  pointer-events: none;
}

.magnate-info-wall-logo {
  display: grid;
  place-items: center;
  min-height: 62px;
}

.magnate-info-wall-logo img {
  display: block;
  width: min(78%, 252px);
  height: auto;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9))
    drop-shadow(0 8px 14px rgba(46, 31, 44, 0.12));
}

.magnate-info-hero-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.magnate-info-player-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.magnate-info-player-photo {
  --magnate-info-frame-size: clamp(24px, 30%, 38px);
  position: relative;
  display: block;
  width: min(100%, 118px);
  aspect-ratio: 200 / 270;
  border: 1px solid rgba(185, 134, 67, 0.48);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, rgba(244, 199, 203, 0.44), rgba(255, 252, 247, 0.9));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 0 0 4px rgba(255, 255, 255, 0.36),
    0 10px 20px rgba(46, 31, 44, 0.13),
    0 2px 0 rgba(185, 134, 67, 0.16);
}

.magnate-info-player-photo::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 0 0 1px rgba(185, 134, 67, 0.12);
  pointer-events: none;
}

.magnate-info-player-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.magnate-info-player-frame {
  position: absolute;
  z-index: 4;
  width: var(--magnate-info-frame-size);
  aspect-ratio: 1;
  background: url("game-assets/magnate/SideFrame.png") center / contain no-repeat;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.8))
    drop-shadow(0 4px 7px rgba(61, 36, 48, 0.12));
  pointer-events: none;
}

.magnate-info-player-frame.is-top-right {
  top: -5%;
  right: -5%;
}

.magnate-info-player-frame.is-bottom-right {
  right: -5%;
  bottom: -5%;
  transform: rotate(90deg);
}

.magnate-info-player-frame.is-bottom-left {
  bottom: -5%;
  left: -5%;
  transform: rotate(180deg);
}

.magnate-info-player-frame.is-top-left {
  top: -5%;
  left: -5%;
  transform: rotate(270deg);
}

.magnate-info-player-name {
  width: 100%;
  overflow: hidden;
  color: var(--magnate-info-ink);
  font-family: "Mosswick", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.magnate-info-player-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 1px solid rgba(255, 246, 232, 0.94);
  background: linear-gradient(180deg, rgba(190, 74, 88, 0.98), rgba(139, 41, 56, 0.96));
  color: #FFF7ED;
  font-family: "Baresno", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1;
  padding: 5px 8px 4px;
  text-transform: uppercase;
}

.magnate-info-poll-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  border: 1px solid rgba(185, 134, 67, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(217, 134, 121, 0.16), rgba(255, 255, 255, 0.48)),
    rgba(255, 252, 247, 0.82);
  color: var(--magnate-info-muted);
  font-weight: 900;
  padding: 10px 14px;
  text-transform: uppercase;
}

.magnate-info-poll-preview strong {
  color: var(--magnate-info-rose, #A73D4A);
  font-size: 1.55rem;
  line-height: 1;
}

.magnate-info-page .spilled-info-section-copy h2,
.magnate-info-page .spilled-info-section-heading h2 {
  color: var(--spilled-rose);
  font-family: "Decort", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-shadow:
    1px 0 0 #FFF6E8,
    -1px 0 0 #FFF6E8,
    0 1px 0 #FFF6E8,
    0 -1px 0 #FFF6E8,
    2px 2px 0 rgba(185, 134, 67, 0.42);
}

.magnate-info-page .spilled-info-basic,
.magnate-info-page .spilled-info-item {
  border-color: rgba(255, 246, 232, 0.9);
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(255, 246, 232, 0.72)),
    rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 12px 24px rgba(46, 31, 44, 0.12);
}

.magnate-info-page .spilled-info-basic h3,
.magnate-info-page .spilled-info-item h3,
.magnate-info-page .spilled-info-section-copy p,
.magnate-info-page .spilled-info-section-heading p {
  color: var(--magnate-info-ink);
}

.magnate-info-page .spilled-info-basic p,
.magnate-info-page .spilled-info-item p {
  color: var(--magnate-info-muted);
}

.magnate-info-page .spilled-info-item-rank {
  background: linear-gradient(180deg, #F0C982, var(--magnate-info-bright-gold));
  color: var(--magnate-info-ink);
  box-shadow: 0 3px 0 rgba(96, 60, 32, 0.22);
}

.magnate-info-page .spilled-info-item-label {
  background: rgba(47, 137, 126, 0.13);
  color: var(--spilled-blue);
}

.magnate-info-page .spilled-info-payout-card {
  background:
    linear-gradient(90deg, rgba(185, 134, 67, 0.34), rgba(255, 252, 247, 0.8)),
    rgba(255, 252, 247, 0.74);
}

.magnate-info-page .spilled-info-payout-card.is-place-2 {
  background:
    linear-gradient(90deg, rgba(47, 137, 126, 0.24), rgba(255, 252, 247, 0.8)),
    rgba(255, 252, 247, 0.74);
}

.magnate-info-page .spilled-info-payout-card.is-place-3 {
  background:
    linear-gradient(90deg, rgba(217, 134, 121, 0.24), rgba(255, 252, 247, 0.8)),
    rgba(255, 252, 247, 0.74);
}

.magnate-info-page .spilled-info-payout-card.is-standard {
  background:
    linear-gradient(90deg, rgba(244, 199, 203, 0.3), rgba(255, 252, 247, 0.8)),
    rgba(255, 252, 247, 0.74);
}

.magnate-info-page .spilled-info-payout-place,
.magnate-info-page .spilled-info-payout-value.is-fortune {
  color: var(--spilled-rose);
}

.magnate-info-page .spilled-info-payout-card.is-standard .spilled-info-payout-value.is-fortune {
  color: var(--magnate-info-muted);
}

.magnate-info-rule-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .magnate-info-wall {
    min-height: 310px;
  }

  .magnate-info-rule-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .magnate-info-page .spilled-info-hero h1 {
    width: min(100%, 330px);
  }

  .magnate-info-wall {
    width: min(100%, 360px);
    min-height: 286px;
    padding: 18px;
  }

  .magnate-info-hero-cards {
    gap: 12px;
  }

  .magnate-info-player-photo {
    width: min(100%, 98px);
  }

  .magnate-info-player-name {
    font-size: 1rem;
  }
}

.chat-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #E9DED0;
  background: #f8fbfd;
}

.chat-tab {
  min-height: 54px;
  border: 0;
  border-right: 1px solid #E9DED0;
  background: linear-gradient(180deg, #ffffff, #f0f5f8);
  color: #9cb0c0;
  cursor: pointer;
  font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 8px 28px;
  transform: rotate(-4deg);
}

.chat-tab:nth-child(2) {
  color: #cf6f7c;
  transform: rotate(-5deg);
}

.chat-tab.is-active {
  color: #92aeca;
  background: #ffffff;
}

.chat-tab span {
  display: inline-block;
  margin-left: 8px;
  color: #65788a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  transform: rotate(4deg);
}

.composer {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto;
  gap: 10px 14px;
  padding: 12px 16px 20px;
  border-bottom: 1px solid #EEE5D9;
}

.composer label {
  grid-column: 1 / -1;
  color: #7b5c25;
  font-weight: 800;
}

.composer select {
  grid-column: 1 / -1;
  width: min(560px, 100%);
  border: 1px solid #ead3a5;
  background: #fff0e9;
  color: #825e2d;
  padding: 7px 9px;
}

.composer textarea {
  width: 100%;
  min-height: 108px;
  resize: vertical;
  border: 2px solid #D6B98C;
  border-radius: 3px;
  background: #fffaf8;
  color: var(--ink);
  padding: 10px;
}

.composer button,
.game-list button,
.competition-box button {
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #F2D7A8, var(--honey));
  color: #5d4a16;
  cursor: pointer;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 5px rgba(167, 110, 39, 0.18);
}

.composer button {
  align-self: start;
  min-width: 128px;
  min-height: 48px;
  margin-top: 1px;
}

.composer a {
  grid-column: 1 / -1;
  color: #a6a6a6;
  text-decoration: underline;
}

.feed {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 16px 4px;
  list-style: none;
}

.message {
  border: 1px solid transparent;
  border-radius: 2px;
  margin-top: 8px;
}

.message .meta,
.message p {
  margin: 0;
}

.message .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 12px;
  color: #7f8790;
}

.message .meta strong {
  color: var(--amber);
}

.message .meta b {
  margin-left: auto;
  color: #373737;
  font-size: 1.1rem;
}

.message > p:last-child {
  padding: 9px 20px 16px;
  font-size: 1.15rem;
}

.message.is-private {
  background: #fff6f3;
  border-color: #fde1d9;
}

.message.is-private .meta {
  background: #ffe0d8;
}

.message.is-public {
  background: #ffffff;
  border-color: #EEE5D9;
}

.message.is-public .meta {
  background: #F6E8D4;
}

.side-panel {
  display: grid;
  gap: 0;
  padding: 16px 18px 20px;
}

.side-panel section {
  border-bottom: 1px solid #EEE5D9;
  padding: 12px 0 14px;
}

.side-panel section:last-child {
  border-bottom: 0;
}

.side-panel h2 {
  margin: 0 0 8px;
  color: #e05d77;
  font-size: 1.35rem;
  line-height: 1.15;
}

.side-panel h2 span {
  color: #eca2ae;
  font-size: 0.85rem;
}

.side-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.side-panel a {
  display: block;
  margin-top: 7px;
  font-weight: 700;
}

.competition-box {
  text-align: right;
}

.competition-box button {
  min-height: 48px;
  padding: 0 18px;
  font-size: 1rem;
}

.competition-box p {
  margin-top: 10px;
}

.section-heading {
  padding: 28px 28px 14px;
}

.section-heading p {
  margin: 0 0 5px;
  color: #c27d05;
  font-weight: 900;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
}

.leaderboard,
.shop-grid,
.game-list {
  display: grid;
  gap: 12px;
  padding: 0 28px 20px;
}

.leaderboard article,
.game-list article,
.shop-grid article {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  padding: 12px 14px;
}

.leaderboard article span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E9C98C;
  color: #6b4b10;
  font-weight: 900;
}

.leaderboard article p,
.shop-grid article p {
  margin: 0 0 0 auto;
  color: var(--muted);
}

.shop-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-grid article {
  display: grid;
  justify-items: center;
  text-align: center;
}

.shop-grid article p {
  margin: 0;
}

.shop-item {
  display: block;
  width: 72px;
  height: 56px;
}

.shop-item.crown {
  background: linear-gradient(180deg, #F2D7A8, #B98231);
  clip-path: polygon(0 100%, 0 35%, 24% 55%, 38% 10%, 55% 55%, 78% 12%, 100% 45%, 100% 100%);
}

.shop-item.shades {
  position: relative;
}

.shop-item.shades::before,
.shop-item.shades::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 30px;
  height: 22px;
  border-radius: 50%;
  background: #3F352B;
}

.shop-item.shades::before {
  left: 5px;
}

.shop-item.shades::after {
  right: 5px;
}

.shop-item.jacket {
  border-radius: 28px 28px 4px 4px;
  background: linear-gradient(90deg, #c58b2a 0 46%, #fff1ba 46% 54%, #c58b2a 54%);
}

.shops-section {
  --shops-ink: #07133f;
  --shops-muted: #4965a8;
  --shops-panel: rgba(255, 255, 255, 0.74);
  --shops-panel-strong: rgba(255, 248, 253, 0.92);
  --shops-line: rgba(255, 255, 255, 0.82);
  --shops-pink: #f05c9d;
  --shops-aqua: #63d9ca;
  --shops-yellow: #ffd83d;
  --shops-orange: #ff6840;
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  overflow: hidden;
  margin: 0 auto;
  padding: 8px 18px 34px;
}

.shops-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 348px;
  border: 3px solid var(--shops-line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 216, 61, 0.78), rgba(99, 217, 202, 0.58) 42%, rgba(240, 92, 157, 0.36));
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 18px 38px rgba(7, 19, 63, 0.14);
  padding: 24px;
}

.shops-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  max-width: 560px;
}

.shops-kicker,
.shop-card-topline {
  margin: 0;
  color: rgba(7, 19, 63, 0.7);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.shops-hero h1 {
  margin: 0;
  color: var(--shops-pink);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 4.45rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.86;
  text-shadow:
    2px 0 0 #ffffff,
    -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    3px 3px 0 var(--shops-yellow),
    5px 5px 0 rgba(99, 217, 202, 0.42),
    0 9px 14px rgba(7, 19, 63, 0.14);
}

.shops-hero-lede,
.shops-hero-subcopy {
  max-width: 46ch;
  margin: 0;
  color: rgba(7, 19, 63, 0.76);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.shops-hero-lede {
  color: var(--shops-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.52rem;
  font-weight: 950;
  line-height: 1.08;
}

.shops-hero-subcopy {
  font-size: 0.98rem;
  font-weight: 800;
}

.shops-hero-subcopy strong {
  color: var(--shops-ink);
  font-weight: 950;
}

.shops-hero-showcase {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 298px;
}

.shops-feature-poster {
  --shop-accent: var(--shops-pink);
  position: absolute;
  display: block;
  width: 190px;
  min-width: 0;
  border: 3px solid #ffffff;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 30px rgba(7, 19, 63, 0.18);
  color: var(--shops-ink);
  overflow: hidden;
}

.shops-feature-poster.is-status {
  --shop-accent: var(--shops-yellow);
}

.shops-feature-poster.is-utility {
  --shop-accent: var(--shops-aqua);
}

.shops-feature-poster.is-finance {
  --shop-accent: var(--shops-orange);
}

.shops-feature-poster.is-poster-1 {
  left: 50%;
  top: 0;
  z-index: 3;
  transform: translateX(-50%) rotate(1deg);
}

.shops-feature-poster.is-poster-2 {
  left: 8%;
  top: 44px;
  z-index: 2;
  transform: rotate(-7deg);
}

.shops-feature-poster.is-poster-3 {
  right: 8%;
  top: 66px;
  z-index: 1;
  transform: rotate(7deg);
}

.shops-feature-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 527 / 738;
  object-fit: cover;
}

.shops-feature-poster span {
  display: grid;
  gap: 4px;
  border-top: 5px solid var(--shop-accent);
  background: rgba(255, 255, 255, 0.96);
  padding: 9px 10px 10px;
}

.shops-feature-poster b,
.shops-feature-poster em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shops-feature-poster b {
  color: var(--shops-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}

.shops-feature-poster em {
  color: rgba(7, 19, 63, 0.58);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.15;
}

.shop-card-section {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.shop-card-section + .shop-card-section {
  margin-top: 6px;
}

.shop-section-divider {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.shop-section-divider::before,
.shop-section-divider::after {
  content: "";
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(240, 92, 157, 0.38), rgba(99, 217, 202, 0.34), transparent);
}

.shop-section-divider h2 {
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 10px 20px rgba(7, 19, 63, 0.08);
  color: var(--shops-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.02rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  padding: 9px 14px;
  text-transform: uppercase;
}

.shop-poster-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

.shop-poster-card {
  --shop-accent: var(--shops-pink);
  --shop-accent-soft: rgba(240, 92, 157, 0.12);
  position: relative;
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 164px;
  gap: 14px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background:
    linear-gradient(90deg, var(--shop-accent-soft), rgba(255, 255, 255, 0.58)),
    rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 28px rgba(7, 19, 63, 0.12);
  color: var(--ink);
  padding: 12px;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.shop-poster-card.is-status {
  --shop-accent: var(--shops-yellow);
  --shop-accent-soft: rgba(255, 216, 61, 0.16);
}

.shop-poster-card.is-utility {
  --shop-accent: var(--shops-aqua);
  --shop-accent-soft: rgba(99, 217, 202, 0.15);
}

.shop-poster-card.is-finance {
  --shop-accent: var(--shops-orange);
  --shop-accent-soft: rgba(255, 104, 64, 0.14);
}

.shop-poster-card:hover,
.shop-poster-card:focus-visible {
  border-color: color-mix(in srgb, var(--shop-accent) 52%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 20px 36px rgba(7, 19, 63, 0.18);
  text-decoration: none;
  transform: translateY(-2px);
}

.shop-poster-card:focus-visible {
  outline: 3px solid rgba(240, 92, 157, 0.42);
  outline-offset: 3px;
}

.shop-poster-frame {
  display: block;
  overflow: hidden;
  width: 112px;
  aspect-ratio: 527 / 738;
  border: 3px solid #ffffff;
  border-radius: 8px;
  background: rgba(255, 248, 253, 0.82);
  box-shadow:
    0 8px 16px rgba(7, 19, 63, 0.14),
    5px 5px 0 var(--shop-accent);
}

.shop-poster-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-card-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.shop-card-copy strong {
  min-width: 0;
  color: var(--shops-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.34rem;
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.shop-card-copy > span:not(.shop-card-topline) {
  color: rgba(7, 19, 63, 0.64);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.25;
}

.shops-empty {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

body.shop-page {
  --shop-theme-accent: var(--pink);
  --shop-theme-accent-2: var(--aqua);
  --shop-theme-accent-3: var(--yellow);
  --shop-action-buy: var(--pink);
  --shop-action-gift: var(--aqua);
  --shop-action-try: var(--yellow);
  --shop-theme-button: var(--ink);
  --shop-theme-heading: var(--ink);
  --shop-theme-soft: rgba(255, 248, 253, 0.72);
  --shop-theme-soft-2: rgba(240, 252, 249, 0.58);
  --shop-theme-panel: rgba(255, 255, 255, 0.76);
  --shop-theme-line: rgba(240, 92, 157, 0.3);
  --shop-theme-shadow: rgba(7, 19, 63, 0.14);
}

.shop-detail {
  --shop-theme-accent: var(--pink);
  --shop-theme-accent-2: var(--aqua);
  --shop-theme-accent-3: var(--yellow);
  --shop-action-buy: var(--pink);
  --shop-action-gift: var(--aqua);
  --shop-action-try: var(--yellow);
  --shop-theme-button: var(--ink);
  --shop-theme-heading: var(--ink);
  --shop-theme-soft: rgba(255, 248, 253, 0.72);
  --shop-theme-soft-2: rgba(240, 252, 249, 0.58);
  --shop-theme-panel: rgba(255, 255, 255, 0.76);
  --shop-theme-line: rgba(240, 92, 157, 0.3);
  --shop-theme-shadow: rgba(7, 19, 63, 0.14);
  max-width: 1380px;
  margin: 0 auto;
  padding: 8px 18px 34px;
}

body.shop-page-royal-meridian-bank .shop-detail {
  --shop-theme-accent: #d7ad5f;
  --shop-theme-accent-2: #264f7f;
  --shop-theme-accent-3: #ff6840;
  --shop-theme-button: #0b193a;
  --shop-theme-heading: #102150;
  --shop-theme-soft: rgba(255, 247, 222, 0.78);
  --shop-theme-soft-2: rgba(226, 239, 255, 0.62);
  --shop-theme-line: rgba(215, 173, 95, 0.42);
  --shop-theme-shadow: rgba(11, 25, 58, 0.18);
}

body.shop-page-deadpixel .shop-detail {
  --shop-theme-accent: #63d9ca;
  --shop-theme-accent-2: #b899ff;
  --shop-theme-accent-3: #ffd83d;
  --shop-theme-button: #243c86;
  --shop-theme-heading: #152760;
  --shop-theme-soft: rgba(232, 255, 251, 0.74);
  --shop-theme-soft-2: rgba(247, 232, 255, 0.56);
  --shop-theme-line: rgba(99, 217, 202, 0.44);
}

body.shop-page-levels .shop-detail {
  --shop-theme-accent: #ffd83d;
  --shop-theme-accent-2: #63d9ca;
  --shop-theme-accent-3: #f05c9d;
  --shop-theme-button: #07133f;
  --shop-theme-heading: #07133f;
  --shop-theme-soft: rgba(255, 250, 217, 0.76);
  --shop-theme-soft-2: rgba(232, 249, 255, 0.6);
  --shop-theme-line: rgba(255, 216, 61, 0.5);
}

body.shop-page-cherry-static .shop-detail {
  --shop-theme-accent: #f05c9d;
  --shop-theme-accent-2: #ff7c6f;
  --shop-theme-accent-3: #63d9ca;
  --shop-theme-button: #9f1d55;
  --shop-theme-heading: #65133c;
  --shop-theme-soft: rgba(255, 231, 242, 0.74);
  --shop-theme-soft-2: rgba(236, 255, 249, 0.58);
  --shop-theme-line: rgba(240, 92, 157, 0.44);
}

body.shop-page-cut-cloth .shop-detail {
  --shop-theme-accent: #2f745f;
  --shop-theme-accent-2: #d7ad5f;
  --shop-theme-accent-3: #f05c9d;
  --shop-theme-button: #163e34;
  --shop-theme-heading: #17372f;
  --shop-theme-soft: rgba(232, 248, 241, 0.72);
  --shop-theme-soft-2: rgba(255, 244, 222, 0.56);
  --shop-theme-line: rgba(47, 116, 95, 0.38);
}

body.shop-page-face-value .shop-detail {
  --shop-theme-accent: #101010;
  --shop-theme-accent-2: #d7ad5f;
  --shop-theme-accent-3: #f05c9d;
  --shop-theme-button: #101010;
  --shop-theme-heading: #16121f;
  --shop-theme-soft: rgba(242, 238, 231, 0.72);
  --shop-theme-soft-2: rgba(255, 232, 244, 0.54);
  --shop-theme-line: rgba(16, 16, 16, 0.2);
}

body.shop-page-blink .shop-detail {
  --shop-theme-accent: #7aa8ff;
  --shop-theme-accent-2: #f05c9d;
  --shop-theme-accent-3: #ffd83d;
  --shop-theme-button: #2a4f9c;
  --shop-theme-heading: #18326f;
  --shop-theme-soft: rgba(235, 243, 255, 0.76);
  --shop-theme-soft-2: rgba(255, 233, 246, 0.56);
  --shop-theme-line: rgba(122, 168, 255, 0.42);
}

body.shop-page-fringe-theory .shop-detail {
  --shop-theme-accent: #b899ff;
  --shop-theme-accent-2: #f05c9d;
  --shop-theme-accent-3: #63d9ca;
  --shop-theme-button: #6043a9;
  --shop-theme-heading: #3d2c78;
  --shop-theme-soft: rgba(245, 238, 255, 0.74);
  --shop-theme-soft-2: rgba(255, 232, 246, 0.54);
  --shop-theme-line: rgba(184, 153, 255, 0.46);
}

body.shop-page-uppercut .shop-detail {
  --shop-theme-accent: #5e7fe8;
  --shop-theme-accent-2: #ff6840;
  --shop-theme-accent-3: #ffd83d;
  --shop-theme-button: #1f3e9a;
  --shop-theme-heading: #132869;
  --shop-theme-soft: rgba(237, 241, 255, 0.74);
  --shop-theme-soft-2: rgba(255, 237, 229, 0.58);
  --shop-theme-line: rgba(94, 127, 232, 0.42);
}

body.shop-page-big-paper .shop-detail {
  --shop-theme-accent: #ff6840;
  --shop-theme-accent-2: #63d9ca;
  --shop-theme-accent-3: #ffd83d;
  --shop-theme-button: #b3381f;
  --shop-theme-heading: #6d2417;
  --shop-theme-soft: rgba(255, 237, 229, 0.72);
  --shop-theme-soft-2: rgba(232, 252, 249, 0.58);
  --shop-theme-line: rgba(255, 104, 64, 0.42);
}

body.shop-page-velvet-relic .shop-detail {
  --shop-theme-accent: #8b5bd6;
  --shop-theme-accent-2: #d7ad5f;
  --shop-theme-accent-3: #63d9ca;
  --shop-theme-button: #4e2b86;
  --shop-theme-heading: #321d5f;
  --shop-theme-soft: rgba(246, 239, 255, 0.74);
  --shop-theme-soft-2: rgba(255, 246, 224, 0.56);
  --shop-theme-line: rgba(139, 91, 214, 0.42);
}

.shop-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 28%, #ffffff);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), var(--shop-theme-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  margin-bottom: 16px;
  padding: 7px 13px 7px 11px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.shop-back-link:hover {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 48%, #ffffff);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--shop-theme-soft) 76%, #ffffff));
  text-decoration: none;
}

.shop-back-link img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.shop-detail-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
  justify-content: stretch;
  gap: 30px;
  align-items: start;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.34) 1px, transparent 1px),
    linear-gradient(135deg, var(--shop-theme-soft), var(--shop-theme-soft-2) 58%, rgba(255, 255, 255, 0.74));
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 38px var(--shop-theme-shadow);
  padding: 18px;
}

.shop-detail-poster {
  overflow: hidden;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 527 / 738;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-theme-soft) 72%, #ffffff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    7px 7px 0 var(--shop-theme-accent),
    0 18px 34px var(--shop-theme-shadow);
}

.shop-detail-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-detail-panel,
.shop-missing {
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), var(--shop-theme-panel)),
    linear-gradient(135deg, var(--shop-theme-soft), var(--shop-theme-soft-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 14px 30px var(--shop-theme-shadow);
  padding: 22px;
}

.shop-detail-panel {
  min-height: 280px;
}

.shop-detail-panel h1,
.shop-missing h1 {
  margin: 0;
  color: var(--shop-theme-heading);
  font-family: "Belgium Rounded", Arial, Helvetica, sans-serif;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
  text-shadow:
    1px 0 0 rgba(255, 255, 255, 0.86),
    0 1px 0 rgba(255, 255, 255, 0.86),
    2px 2px 0 color-mix(in srgb, var(--shop-theme-accent) 22%, transparent);
}

.shop-inventory-tabs {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.shop-inventory-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--shop-theme-accent) 22%, rgba(7, 19, 63, 0.12));
  padding-top: 18px;
}

.shop-inventory-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 18%, rgba(7, 19, 63, 0.1));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 8px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.shop-inventory-tab:hover,
.shop-inventory-tab:focus-visible {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 46%, #ffffff);
  color: var(--ink);
  outline: 0;
}

.shop-inventory-tab.is-active {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 62%, #ffffff);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--shop-theme-soft) 86%, #ffffff));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 0 color-mix(in srgb, var(--shop-theme-accent) 24%, transparent);
}

.shop-detail-placeholder {
  margin-top: 20px;
  border-top: 1px solid rgba(7, 19, 63, 0.12);
  padding-top: 18px;
}

.shop-detail-placeholder p,
.shop-missing p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
}

.bank-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  align-items: center;
  gap: 18px;
}

.bank-balance-card {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 72px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 20%, rgba(7, 19, 63, 0.08));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), var(--shop-theme-soft)),
    rgba(255, 255, 255, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 12px 24px rgba(7, 19, 63, 0.08);
  padding: 10px 12px;
}

.bank-balance-label {
  min-width: 0;
  color: color-mix(in srgb, var(--shop-theme-heading) 72%, var(--muted));
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.bank-balance-card strong {
  color: var(--shop-theme-heading);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.82rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.9;
  white-space: nowrap;
}

.bank-money {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  white-space: nowrap;
}

.bank-money-prefix {
  color: inherit;
  font: inherit;
  font-size: 0.9em;
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(0.01em);
}

.bank-tabs {
  display: grid;
  gap: 18px;
  margin-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--shop-theme-accent) 22%, rgba(7, 19, 63, 0.12));
  padding-top: 20px;
}

.bank-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bank-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 18%, rgba(7, 19, 63, 0.1));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 8px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.bank-tab:hover,
.bank-tab:focus-visible {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 42%, #ffffff);
  color: var(--ink);
}

.bank-tab.is-active {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 62%, #ffffff);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--shop-theme-soft) 88%, #ffffff));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 0 color-mix(in srgb, var(--shop-theme-accent) 24%, transparent);
}

.bank-panel {
  border: 2px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), var(--shop-theme-soft)),
    rgba(255, 248, 253, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 24px rgba(7, 19, 63, 0.08);
  padding: 18px;
}

.bank-panel[hidden] {
  display: none;
}

.bank-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 16px;
  align-items: stretch;
}

.bank-panel-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.bank-positions-panel {
  --market-bg: #fff8fd;
  --market-surface: #fffafd;
  --market-line: rgba(7, 19, 63, 0.12);
  --market-ink: #07133f;
  --market-muted: #4965a8;
  display: block;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 248, 253, 0.96), rgba(238, 243, 255, 0.9)),
    var(--market-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px rgba(7, 19, 63, 0.08);
  color: var(--market-ink);
  padding: 12px;
}

.bank-positions-panel[hidden] {
  display: none;
}

.bank-portfolio-shell {
  display: grid;
  gap: 12px;
}

.bank-portfolio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.bank-portfolio-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.92;
}

.bank-portfolio-overview {
  display: grid;
  gap: 12px;
}

.bank-portfolio-primary {
  display: grid;
  align-content: center;
  gap: 6px;
  width: min(100%, 220px);
  min-height: 88px;
  border: 2px solid var(--market-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 253, 0.72)),
    var(--market-surface, var(--panel));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 18px rgba(7, 19, 63, 0.07);
  padding: 14px 16px;
}

.bank-portfolio-primary span,
.bank-portfolio-metrics dt {
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.bank-portfolio-primary span {
  font-size: 0.96rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bank-portfolio-primary strong {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 2.42rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.9;
}

.bank-portfolio-money,
.bank-portfolio-metrics dd,
.bank-position-value strong {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
}

.bank-portfolio-money-symbol,
.bank-position-money-symbol {
  display: inline-block;
  color: inherit;
  font-size: 0.82em;
  line-height: 1;
  transform: translateY(-0.01em);
}

.bank-portfolio-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
}

.bank-portfolio-metrics div {
  display: grid;
  gap: 4px;
  min-width: min(100%, 132px);
}

.bank-portfolio-metrics dd {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.bank-portfolio-metrics dd.is-positive {
  color: #11A892;
}

.bank-portfolio-metrics dd.is-negative {
  color: var(--pink);
}

.bank-portfolio-metrics dd.is-neutral {
  color: var(--ink);
}

.bank-portfolio-view-tabs button,
.bank-portfolio-sort strong,
.bank-position-card {
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.bank-portfolio-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.12);
  padding-bottom: 10px;
}

.bank-portfolio-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.bank-portfolio-view-tabs button {
  border: 0;
  background: transparent;
  color: rgba(73, 101, 168, 0.56);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0;
  text-transform: uppercase;
}

.bank-portfolio-view-tabs button.is-active {
  color: var(--ink);
}

.bank-portfolio-view-tabs button:disabled {
  cursor: default;
}

.bank-portfolio-sort {
  display: inline-grid;
  grid-template-columns: 22px auto;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  min-width: 0;
}

.bank-portfolio-sort span {
  position: relative;
  display: block;
  width: 22px;
  height: 18px;
}

.bank-portfolio-sort span::before,
.bank-portfolio-sort span::after {
  content: "";
  position: absolute;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.bank-portfolio-sort span::before {
  top: 3px;
  width: 22px;
  box-shadow: 0 6px 0 currentColor;
}

.bank-portfolio-sort span::after {
  bottom: 3px;
  width: 12px;
}

.bank-portfolio-sort strong {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.bank-portfolio-search {
  position: relative;
  display: block;
}

.bank-portfolio-search::before,
.bank-portfolio-search::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.bank-portfolio-search::before {
  top: 50%;
  left: 15px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(73, 101, 168, 0.56);
  border-radius: 50%;
  transform: translateY(-60%);
}

.bank-portfolio-search::after {
  top: calc(50% + 6px);
  left: 26px;
  width: 9px;
  height: 2px;
  border-radius: 999px;
  background: rgba(73, 101, 168, 0.56);
  transform: rotate(45deg);
  transform-origin: left center;
}

.bank-portfolio-search input {
  width: 100%;
  min-height: 38px;
  border: 2px solid var(--market-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  outline: 0;
  padding: 7px 12px 7px 38px;
}

.bank-portfolio-search input::placeholder {
  color: rgba(73, 101, 168, 0.62);
}

.bank-portfolio-search input:focus {
  border-color: rgba(99, 217, 202, 0.74);
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.18);
}

.bank-position-list {
  display: grid;
  gap: 10px;
}

.bank-position-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 248, 253, 0.64)),
    rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 20px rgba(7, 19, 63, 0.07);
  color: var(--ink);
  padding: 10px 12px;
}

.bank-position-card-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  cursor: pointer;
  padding-bottom: 10px;
}

.bank-position-card-head:hover .bank-position-market-link,
.bank-position-card-head:focus-visible .bank-position-market-link {
  color: var(--pink);
}

.bank-position-card-head:focus-visible {
  border-radius: 6px;
  outline: 2px solid rgba(240, 92, 157, 0.28);
  outline-offset: 3px;
}

.bank-position-avatar {
  display: block;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 216, 61, 0.32), rgba(99, 217, 202, 0.25));
}

.bank-position-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.bank-position-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.bank-position-market-link {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  min-height: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
}

.bank-position-market-link:hover,
.bank-position-market-link:focus-visible {
  color: var(--pink);
  outline: 0;
}

.bank-position-title .bank-position-market-link {
  display: inline;
  width: auto;
  min-width: 0;
  max-width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.bank-position-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, 102px) minmax(170px, 0.36fr);
  align-items: center;
  gap: 12px;
}

.bank-position-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.bank-position-copy strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.bank-position-copy span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
}

.bank-position-copy .bank-position-money-symbol,
.bank-position-value .bank-position-money-symbol {
  font-size: 0.82em;
  line-height: 1;
  transform: translateY(-0.01em);
}

.bank-position-side {
  font: inherit;
}

.bank-position-side.is-yes {
  color: #11A892;
}

.bank-position-side.is-no {
  color: var(--pink);
}

.bank-position-value {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bank-position-value strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

.bank-position-value span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.bank-position-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bank-portfolio-record .bank-position-actions {
  grid-template-columns: 1fr;
}

.bank-position-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 34px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 6px 10px;
  white-space: nowrap;
}

.bank-position-actions button:hover,
.bank-position-actions button:focus-visible {
  border-color: rgba(240, 92, 157, 0.58);
  outline: 0;
}

.bank-positions-empty {
  margin: 0;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 22px 24px;
}

.bank-service-form {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 0.8fr) minmax(150px, 0.8fr) auto;
  gap: 12px;
  align-items: end;
}

.bank-transfer-note {
  margin: 0;
  border: 1px solid rgba(99, 217, 202, 0.34);
  border-radius: 8px;
  background: rgba(99, 217, 202, 0.12);
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.35;
  padding: 11px 12px;
}

.bank-service-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.bank-service-form label > span:first-child,
.bank-summary span,
.bank-rate-card span,
.bank-market-grid article span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.bank-service-form input,
.bank-service-form select {
  width: 100%;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  outline: none;
  padding: 9px 11px;
}

.bank-service-form input:focus,
.bank-service-form select:focus {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 68%, #ffffff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-theme-accent) 18%, transparent);
}

.bank-money-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.bank-money-input:focus-within {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 68%, #ffffff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-theme-accent) 18%, transparent);
}

.bank-money-input-prefix {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  padding-left: 10px;
}

.bank-money-input input {
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 8px 10px 8px 4px;
}

.bank-money-input input:focus {
  border-color: transparent;
  box-shadow: none;
}

.bank-service-form button,
.bank-purchase-card button,
.bank-subscription-card button,
.bank-market-grid article button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 38%, #ffffff);
  border-radius: 8px;
  background: var(--shop-theme-button);
  color: #ffffff;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 9px 17px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 4px 0 rgba(7, 19, 63, 0.14);
}

.bank-service-form button:hover,
.bank-service-form button:focus-visible,
.bank-purchase-card button:hover,
.bank-purchase-card button:focus-visible,
.bank-subscription-card button:hover,
.bank-subscription-card button:focus-visible,
.bank-market-grid article button:hover,
.bank-market-grid article button:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.bank-purchase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(58px, auto));
  grid-auto-flow: column;
  gap: 8px;
}

.bank-subscription-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 34%, rgba(255, 255, 255, 0.9));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), color-mix(in srgb, var(--shop-theme-soft) 72%, #ffffff)),
    rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 16px rgba(7, 19, 63, 0.07);
  padding: 13px 14px;
}

.bank-subscription-callout p,
.bank-subscription-callout h2,
.bank-subscription-callout span {
  margin: 0;
}

.bank-subscription-callout p {
  color: var(--shop-theme-button);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.bank-subscription-callout h2 {
  margin-top: 5px;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.02;
}

.bank-subscription-callout span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.24;
}

.bank-subscription-callout a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 42%, #ffffff);
  border-radius: 8px;
  background: var(--shop-theme-button);
  color: #ffffff;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  padding: 8px 14px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 4px 0 rgba(7, 19, 63, 0.14);
}

.bank-subscription-callout a:hover,
.bank-subscription-callout a:focus-visible {
  filter: brightness(1.04);
  outline: 0;
  transform: translateY(-1px);
}

.bank-subscription-products,
.bank-fortune-products {
  display: grid;
  gap: 10px;
}

.bank-fortune-products {
  margin-top: 0;
}

.bank-purchase-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.bank-purchase-section-head p,
.bank-purchase-section-head h2 {
  margin: 0;
}

.bank-purchase-section-head p {
  color: var(--shop-theme-button);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.bank-purchase-section-head h2 {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.bank-subscription-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.bank-subscribe-panel {
  display: grid;
  gap: 8px;
}

.bank-subscribe-panel .bank-subscription-callout {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(7, 19, 63, 0.08);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.92), rgba(255, 247, 230, 0.78)),
    rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 16px rgba(7, 19, 63, 0.06);
  margin-bottom: 0;
  overflow: hidden;
  padding: 11px 14px;
}

.bank-subscribe-panel .bank-subscription-callout::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #f00663, #10bf57 52%, #d9a928);
}

.bank-subscription-callout-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bank-subscribe-panel .bank-subscription-callout h2 {
  margin: 0;
  font-size: 1.44rem;
  line-height: 0.96;
}

.bank-subscribe-panel .bank-subscription-callout span {
  max-width: 620px;
}

.bank-subscribe-panel .bank-subscription-callout-copy > span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.16;
}

.bank-subscription-callout-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.bank-subscribe-panel .bank-subscription-callout a {
  min-height: 34px;
  border-color: rgba(217, 169, 40, 0.38);
  background: #ffffff;
  color: var(--shop-theme-button);
  font-size: 0.84rem;
  padding: 7px 13px;
  box-shadow: 0 3px 0 rgba(217, 169, 40, 0.16);
}

.bank-subscription-card {
  --subscription-accent: #f00663;
  --subscription-ink: #07133f;
  position: relative;
  min-height: 248px;
  border: 0;
  border-radius: 8px;
  background: var(--subscription-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 22px rgba(7, 19, 63, 0.12);
  overflow: hidden;
  padding: 10px;
}

.bank-subscription-card[data-bank-subscription-tier="backstage-pass"] {
  --subscription-accent: #f00663;
  min-height: 306px;
}

.bank-subscription-card[data-bank-subscription-tier="prime-time"] {
  --subscription-accent: #10bf57;
  min-height: 322px;
}

.bank-subscription-card[data-bank-subscription-tier="all-access"] {
  --subscription-accent: #d9a928;
  min-height: 336px;
}

.bank-subscription-ticket {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  min-height: 100%;
}

.bank-subscription-sheet {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  width: 100%;
  min-height: 0;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background: #ffffff;
  color: var(--subscription-ink);
  padding: 8px 11px 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.bank-subscription-tier-icon {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.bank-subscription-card[data-bank-subscription-tier="all-access"] .bank-subscription-tier-icon {
  width: 36px;
  height: 54px;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
}

.bank-subscription-sheet h3 {
  margin: 0;
  color: var(--subscription-accent);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.bank-subscription-checks {
  display: grid;
  gap: 3px;
  width: min(100%, 232px);
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.59rem;
  font-weight: 800;
  line-height: 1.12;
}

.bank-subscription-checks li {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.06);
  padding-bottom: 2px;
  overflow-wrap: anywhere;
}

.bank-subscription-checks li::before {
  content: "✓";
  color: var(--subscription-accent);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

.bank-subscription-card[data-bank-subscription-tier="all-access"] .bank-subscription-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 3px;
  width: 100%;
  font-size: 0.56rem;
}

.bank-subscription-card[data-bank-subscription-tier="all-access"] .bank-subscription-checks li {
  grid-template-columns: 11px minmax(0, 1fr);
}

.bank-subscription-callout-chip {
  position: absolute;
  top: 9px;
  right: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  border: 1px solid color-mix(in srgb, var(--subscription-accent) 46%, #ffffff);
  border-radius: 999px;
  background: #ffffff;
  color: var(--subscription-accent);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 4px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bank-subscription-price-badge {
  display: grid;
  place-items: center;
  align-content: center;
  width: 68px;
  height: 68px;
  margin-top: -32px;
  border: 5px solid var(--subscription-accent);
  border-radius: 999px;
  background: #1b2028;
  color: #ffffff;
  box-shadow: 0 7px 12px rgba(7, 19, 63, 0.24);
  text-align: center;
  z-index: 1;
}

.bank-subscription-price-badge strong,
.bank-subscription-price-badge span {
  display: block;
  margin: 0;
}

.bank-subscription-price-badge strong {
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.24rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.94;
}

.bank-subscription-price-badge span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.46rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.bank-subscription-card button {
  width: min(100%, 150px);
  min-height: 26px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  background: #ffffff;
  color: var(--subscription-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 4px 0 rgba(7, 19, 63, 0.12);
  font-size: 0.7rem;
  font-weight: 900;
  padding: 5px 11px;
  text-transform: uppercase;
}

.bank-purchase-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(142px, 1fr) 70px 72px;
  grid-template-areas: "amount price action";
  align-items: center;
  gap: 7px 8px;
  min-height: 58px;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.44));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 6px 12px rgba(7, 19, 63, 0.05);
  padding: 10px 11px 10px 12px;
}

.bank-purchase-card.has-callout {
  grid-template-areas:
    "amount price action"
    "callout price action";
  min-height: 66px;
  border-color: color-mix(in srgb, var(--shop-theme-accent) 38%, #ffffff);
  background:
    linear-gradient(90deg, rgba(255, 248, 253, 0.9), rgba(255, 255, 255, 0.72));
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--shop-theme-accent) 58%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 16px rgba(240, 92, 157, 0.12);
}

.bank-purchase-amount {
  grid-area: amount;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
  min-width: 0;
}

.bank-purchase-amount .bank-money {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}

.bank-purchase-extra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border: 1px solid color-mix(in srgb, var(--shop-theme-accent) 48%, #ffffff);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--shop-theme-button);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 3px 6px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.bank-purchase-callout {
  grid-area: callout;
  align-self: start;
  color: var(--shop-theme-button);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.bank-purchase-price {
  grid-area: price;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  justify-self: end;
  min-width: 64px;
  text-align: right;
  white-space: nowrap;
}

.bank-purchase-card button {
  grid-area: action;
  width: auto;
  min-width: 72px;
  min-height: 30px;
  margin-top: 0;
  background: rgba(255, 255, 255, 0.78);
  color: var(--shop-theme-button);
  font-size: 0.86rem;
  padding: 6px 10px;
}

.bank-purchase-card button:hover,
.bank-purchase-card button:focus-visible {
  background: var(--shop-theme-button);
  color: #ffffff;
}

.bank-summary,
.bank-rate-card,
.bank-market-grid article {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 108px;
  border: 1px solid color-mix(in srgb, var(--shop-theme-accent) 16%, rgba(7, 19, 63, 0.08));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.36));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  padding: 14px;
}

.bank-summary {
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
}

.bank-summary-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--shop-theme-accent-3) 24%, #ffffff);
}

.bank-summary-icon img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.bank-summary strong,
.bank-rate-card strong,
.bank-market-grid article strong {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.98;
}

.bank-rate-card strong {
  font-size: 1.45rem;
  line-height: 1.04;
}

.bank-rate-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
}

.bank-market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.bank-market-grid article {
  min-height: 144px;
}

.bank-market-grid article button {
  width: 100%;
  margin-top: 4px;
}

.shop-inventory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.shop-inventory-head h1 {
  margin: 0;
}

.shop-avatar-gender-toggle {
  margin-left: auto;
}

.shop-admin-sale-status {
  margin: 14px 0 0;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 8px 11px;
}

.shop-admin-sale-status.is-success {
  border-color: rgba(31, 122, 79, 0.24);
  background: rgba(214, 248, 237, 0.62);
  color: #1f7a4f;
}

.shop-admin-sale-status.is-error {
  border-color: rgba(161, 48, 24, 0.22);
  background: rgba(255, 231, 242, 0.58);
  color: #a13018;
}

.shop-color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--shop-theme-accent) 22%, rgba(7, 19, 63, 0.12));
  padding-top: 24px;
}

.shop-tech-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: start;
  gap: 24px 18px;
  margin-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--shop-theme-accent) 22%, rgba(7, 19, 63, 0.12));
  padding-top: 24px;
}

.shop-tech-grid.is-deadpixel-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.shop-inventory-tabs .shop-tech-grid {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.shop-tech-card {
  --item-accent: var(--shop-theme-accent, #47e6ff);
  position: relative;
  display: block;
  min-width: 0;
  height: 254px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--item-accent) 20%, rgba(7, 19, 63, 0.08));
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--shop-theme-soft) 50%, #ffffff), rgba(255, 255, 255, 0.5));
  box-shadow:
    0 16px 28px rgba(7, 19, 63, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  outline: none;
  transition:
    box-shadow 180ms ease,
    transform 180ms ease;
}

.shop-tech-card[hidden] {
  display: none !important;
}

.shop-item-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 5px;
  max-width: calc(100% - 76px);
  pointer-events: none;
}

.shop-item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 6px;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 4px 7px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 5px 12px rgba(7, 19, 63, 0.12);
}

.shop-item-badge.is-new {
  background: linear-gradient(180deg, #fff4a9, #ffd83d);
}

.shop-item-badge.is-sale {
  background: linear-gradient(180deg, #ff9dca, #f05c9d);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.18);
}

.shop-item-badge.is-sold-out {
  background: linear-gradient(180deg, #e24b40, #a13018);
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.2);
}

.shop-price-display {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.shop-price-display.is-on-sale .shop-price-original {
  color: rgba(73, 101, 168, 0.54);
  font-weight: 800;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.shop-price-display.is-on-sale .shop-price-sale {
  color: var(--pink);
  font-weight: 950;
}

.shop-admin-sale-control {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 8;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.shop-admin-sale-control[open] {
  z-index: 20;
}

.shop-admin-sale-control summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.02em;
  line-height: 1;
  list-style: none;
  padding: 5px 8px;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 6px 14px rgba(7, 19, 63, 0.1);
}

.shop-admin-sale-control summary::-webkit-details-marker {
  display: none;
}

.shop-admin-sale-control summary:hover,
.shop-admin-sale-control summary:focus-visible {
  border-color: rgba(240, 92, 157, 0.42);
  color: var(--pink);
  outline: 0;
}

.shop-admin-sale-form {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 8px;
  width: 178px;
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 253, 0.96)),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 16px 28px rgba(7, 19, 63, 0.18);
  padding: 9px;
}

.shop-admin-sale-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.shop-admin-sale-form label span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.shop-admin-sale-form input {
  width: 100%;
  min-height: 31px;
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
  outline: 0;
  padding: 5px 7px;
}

.shop-admin-sale-form input:focus-visible {
  border-color: rgba(99, 217, 202, 0.82);
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.14);
}

.shop-admin-sale-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.shop-admin-sale-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 30px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  padding: 5px 7px;
}

.shop-admin-sale-actions button[value="set"] {
  border-color: rgba(240, 92, 157, 0.32);
  background: linear-gradient(180deg, #ff9dca, #f05c9d);
  color: #ffffff;
}

.shop-admin-sale-actions button:hover:not(:disabled),
.shop-admin-sale-actions button:focus-visible:not(:disabled) {
  filter: brightness(1.04);
  outline: 0;
  transform: translateY(-1px);
}

.shop-admin-sale-actions button:disabled {
  cursor: not-allowed;
  filter: grayscale(38%);
  opacity: 0.5;
  transform: none;
}

.shop-color-card:has(.shop-admin-sale-control[open]),
.shop-tech-card:has(.shop-admin-sale-control[open]) {
  overflow: visible;
  z-index: 25;
}

.shop-tech-card::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  z-index: 2;
  height: 2px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--item-accent) 88%, #ffffff), transparent);
  opacity: 0;
  transition: opacity 180ms ease;
}

.shop-tech-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), color-mix(in srgb, var(--item-accent) 12%, transparent));
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.shop-tech-card.is-avatar-shop-item::before {
  background: rgba(73, 101, 168, 0.16);
}

.shop-tech-card.is-avatar-shop-item::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(73, 101, 168, 0.055));
}

.shop-tech-art {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: transparent;
  padding: 7px 7px 86px;
  transition:
    filter 180ms ease,
    opacity 180ms ease,
    padding 180ms ease;
}

.shop-tech-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.shop-tech-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 86px;
  height: 86px;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--item-accent) 18%, rgba(7, 19, 63, 0.08));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), color-mix(in srgb, var(--shop-theme-soft) 58%, #ffffff));
  padding: 10px 12px 9px;
  transition:
    height 180ms ease,
    background 180ms ease;
}

.shop-tech-title {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 34px;
}

.shop-tech-title.has-collection {
  min-height: 44px;
}

.shop-tech-collection {
  display: block;
  overflow: hidden;
  color: color-mix(in srgb, var(--item-accent) 52%, rgba(7, 19, 63, 0.58));
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.shop-tech-panel strong {
  display: -webkit-box;
  color: var(--ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.05;
  max-height: 33px;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shop-tech-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: rgba(7, 19, 63, 0.56);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
}

.shop-tech-fame,
.shop-tech-quantity,
.shop-tech-owned-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shop-tech-fame::before,
.shop-tech-quantity::before,
.shop-tech-owned-count::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.28);
}

.shop-tech-owned-count {
  color: rgba(7, 19, 63, 0.68);
}

.shop-tech-owned-count.is-maxed {
  color: #a13018;
}

.shop-tech-quantity.is-sold-out {
  color: #a13018;
}

.shop-tech-fame img {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.shop-tech-description {
  display: block;
  overflow: hidden;
  max-height: 0;
  margin: 0;
  color: rgba(7, 19, 63, 0.78);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.24;
  opacity: 0;
  transform: translateY(5px);
  transition:
    max-height 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.shop-tech-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  visibility: hidden;
  transition:
    height 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.shop-tech-buy-button,
.shop-tech-gift-button,
.shop-tech-try-button {
  --shop-action-color: var(--shop-action-buy, var(--pink));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--shop-action-color) 38%, rgba(7, 19, 63, 0.08));
  border-radius: 6px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--shop-action-color) 12%, #ffffff), color-mix(in srgb, var(--shop-action-color) 28%, #ffffff));
  color: color-mix(in srgb, var(--shop-action-color) 56%, var(--ink));
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 16px color-mix(in srgb, var(--shop-action-color) 16%, rgba(7, 19, 63, 0.08));
  transition:
    box-shadow 160ms ease,
    transform 180ms ease;
}

.shop-tech-buy-button {
  --shop-action-color: var(--shop-action-buy, var(--pink));
}

.shop-tech-gift-button {
  --shop-action-color: var(--shop-action-gift, var(--aqua));
}

.shop-tech-try-button {
  --shop-action-color: var(--shop-action-try, var(--yellow));
}

.shop-tech-card.is-avatar-shop-item .shop-tech-actions {
  gap: 6px;
}

.shop-tech-card.is-avatar-shop-item .shop-tech-buy-button,
.shop-tech-card.is-avatar-shop-item .shop-tech-gift-button,
.shop-tech-card.is-avatar-shop-item .shop-tech-try-button {
  font-size: 0.82rem;
  padding: 0 6px;
}

.shop-tech-buy-button:hover:not(:disabled),
.shop-tech-buy-button:focus-visible:not(:disabled),
.shop-tech-gift-button:hover:not(:disabled),
.shop-tech-gift-button:focus-visible:not(:disabled),
.shop-tech-try-button:hover:not(:disabled),
.shop-tech-try-button:focus-visible:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 10px 18px rgba(7, 19, 63, 0.12);
  transform: translateY(-1px);
}

.shop-tech-card:hover,
.shop-tech-card:focus,
.shop-tech-card:focus-within {
  box-shadow:
    0 20px 34px rgba(7, 19, 63, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.86);
  transform: translateY(-2px);
}

.shop-tech-card:hover::before,
.shop-tech-card:focus::before,
.shop-tech-card:focus-within::before,
.shop-tech-card:hover::after,
.shop-tech-card:focus::after,
.shop-tech-card:focus-within::after {
  opacity: 1;
}

.shop-tech-card.is-avatar-shop-item:hover::before,
.shop-tech-card.is-avatar-shop-item:focus::before,
.shop-tech-card.is-avatar-shop-item:focus-within::before {
  opacity: 0;
}

.shop-tech-card:hover .shop-tech-panel,
.shop-tech-card:focus .shop-tech-panel,
.shop-tech-card:focus-within .shop-tech-panel {
  height: 162px;
  background: rgba(255, 255, 255, 0.98);
}

.shop-tech-card:hover .shop-tech-art,
.shop-tech-card:focus .shop-tech-art,
.shop-tech-card:focus-within .shop-tech-art {
  padding-bottom: 168px;
}

.shop-tech-card.is-sold-out .shop-tech-art {
  filter: grayscale(100%) saturate(0);
  opacity: 0.56;
}

.shop-tech-card:hover .shop-tech-description,
.shop-tech-card:focus .shop-tech-description,
.shop-tech-card:focus-within .shop-tech-description {
  max-height: 64px;
  opacity: 1;
  transform: translateY(0);
}

.shop-tech-card:hover .shop-tech-actions,
.shop-tech-card:focus .shop-tech-actions,
.shop-tech-card:focus-within .shop-tech-actions {
  height: 32px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.shop-tech-buy-button:disabled,
.shop-tech-gift-button:disabled,
.shop-tech-try-button:disabled {
  cursor: not-allowed;
  filter: grayscale(42%);
  opacity: 0.42;
  transform: none;
}

.avatar-try-modal[hidden] {
  display: none;
}

.avatar-try-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.avatar-try-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 34, 0.54);
  backdrop-filter: blur(10px);
}

.avatar-try-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(160px, 236px) minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  width: min(640px, calc(100vw - 32px));
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 246, 255, 0.94));
  box-shadow:
    0 30px 70px rgba(7, 19, 63, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  outline: none;
  padding: 24px;
}

.avatar-try-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: rgba(7, 19, 63, 0.72);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 0;
}

.avatar-try-close:hover,
.avatar-try-close:focus-visible {
  border-color: rgba(7, 19, 63, 0.24);
  color: var(--ink);
  transform: translateY(-1px);
}

.avatar-try-stage {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 236px;
  aspect-ratio: 200 / 270;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(7, 19, 63, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(7, 19, 63, 0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(7, 19, 63, 0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(7, 19, 63, 0.05) 75%),
    #ffffff;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.avatar-try-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.avatar-try-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-right: 24px;
}

.avatar-try-kicker {
  color: rgba(7, 19, 63, 0.54);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.avatar-try-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.avatar-try-copy p {
  margin: 0;
  color: rgba(7, 19, 63, 0.66);
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

.avatar-try-copy p.is-error {
  color: #a13018;
}

@media (max-width: 600px) {
  .avatar-try-modal {
    padding: 16px;
  }

  .avatar-try-dialog {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 20px;
  }

  .avatar-try-stage {
    max-width: 190px;
  }

  .avatar-try-copy {
    padding-right: 0;
    text-align: center;
  }

  .avatar-try-copy h2 {
    font-size: 1.15rem;
  }
}

@media (max-width: 1180px) {
  .shop-tech-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shop-tech-grid.is-deadpixel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 900px) {
  .shop-tech-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shop-tech-grid.is-deadpixel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .shop-tech-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
  }

  .shop-tech-grid.is-deadpixel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .shop-tech-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-tech-grid.is-deadpixel-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shop-color-card {
  --level-color: #d9e3ff;
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 74px;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
  min-height: 118px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 248, 253, 0.56));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--level-color) 18%, rgba(7, 19, 63, 0.08)),
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 12px 22px rgba(7, 19, 63, 0.08);
  padding: 13px 15px 13px 13px;
}

.shop-color-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--level-color), color-mix(in srgb, var(--level-color) 18%, transparent) 62%, transparent);
}

.profile-name-row .profile-level-card.shop-color-card[data-profile-name-tooltip]::before {
  top: auto;
  right: auto;
  bottom: calc(100% + 5px);
  left: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid rgba(21, 23, 36, 0.92);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  background: transparent;
}

.shop-color-swatch {
  position: relative;
  display: block;
  overflow: hidden;
  width: 82px;
  min-height: 92px;
  border: 4px solid rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%),
    linear-gradient(315deg, rgba(7, 19, 63, 0.16), rgba(7, 19, 63, 0) 54%),
    var(--level-color);
  box-shadow:
    inset 0 0 0 1px rgba(7, 19, 63, 0.12),
    0 4px 8px rgba(7, 19, 63, 0.12);
}

.shop-color-card.is-sold-out .shop-color-swatch {
  filter: grayscale(100%) saturate(0);
  opacity: 0.56;
}

.shop-color-card.is-metallic .shop-color-swatch {
  isolation: isolate;
  background:
    radial-gradient(ellipse 82% 52% at 24% 8%, rgba(255, 255, 255, 0.34), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), transparent 32%),
    linear-gradient(320deg, rgba(0, 0, 0, 0.16), transparent 54%),
    var(--level-color);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 12px 18px rgba(255, 255, 255, 0.12),
    inset 0 -14px 24px rgba(0, 0, 0, 0.16),
    0 4px 10px rgba(0, 0, 0, 0.08);
}

.shop-color-card.is-metallic .shop-color-swatch::before {
  content: "";
  position: absolute;
  inset: -72%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 96% 142% at 10% 96%, transparent 36%, rgba(255, 255, 255, 0.5) 43%, rgba(0, 0, 0, 0.14) 55%, transparent 68%),
    radial-gradient(ellipse 88% 124% at 88% 8%, transparent 34%, rgba(0, 0, 0, 0.18) 43%, rgba(255, 255, 255, 0.44) 50%, transparent 64%),
    radial-gradient(ellipse 62% 104% at 52% 48%, transparent 30%, rgba(255, 255, 255, 0.42) 42%, rgba(0, 0, 0, 0.1) 54%, transparent 66%);
  mix-blend-mode: overlay;
  filter: blur(var(--metal-dark-blur, 5px)) contrast(var(--metal-dark-contrast, 1.12)) saturate(1.04);
  opacity: var(--metal-dark-opacity, 1);
  animation: shop-metal-liquid var(--metal-speed, 4.8s) cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  animation-delay: var(--metal-delay, 0s);
  will-change: transform;
}

.shop-color-card.is-metallic .shop-color-swatch::after {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 92% 30% at 28% 4%, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.2) 36%, transparent 70%),
    radial-gradient(ellipse 62% 120% at 12% 88%, transparent 40%, rgba(255, 255, 255, 0.54) 50%, rgba(255, 255, 255, 0.12) 58%, transparent 68%),
    radial-gradient(ellipse 58% 112% at 84% 18%, transparent 36%, rgba(255, 255, 255, 0.42) 46%, transparent 64%);
  mix-blend-mode: screen;
  filter: blur(var(--metal-bright-blur, 4px));
  opacity: var(--metal-bright-opacity, 0.88);
  animation: shop-metal-sheen 11.5s ease-in-out infinite alternate;
  animation-delay: var(--metal-delay, 0s);
  will-change: transform;
}

.shop-color-card.is-color-electrum .shop-color-swatch::before {
  background:
    radial-gradient(ellipse 112% 128% at 70% 104%, transparent 38%, rgba(255, 255, 255, 0.44) 49%, rgba(0, 0, 0, 0.08) 62%, transparent 74%),
    radial-gradient(ellipse 88% 122% at 2% 18%, transparent 40%, rgba(255, 255, 255, 0.36) 51%, transparent 68%);
}

.shop-color-card.is-color-electrum .shop-color-swatch::after {
  background:
    radial-gradient(ellipse 80% 28% at 70% 7%, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.18) 40%, transparent 72%),
    radial-gradient(ellipse 88% 112% at 72% 98%, transparent 42%, rgba(255, 255, 255, 0.46) 52%, transparent 70%);
}

.shop-color-card.is-color-iridium .shop-color-swatch::before {
  background:
    radial-gradient(ellipse 88% 150% at 110% 22%, transparent 34%, rgba(255, 255, 255, 0.42) 43%, rgba(0, 0, 0, 0.16) 55%, transparent 68%),
    radial-gradient(ellipse 104% 104% at -16% 74%, transparent 34%, rgba(0, 0, 0, 0.2) 43%, rgba(255, 255, 255, 0.36) 51%, transparent 66%),
    radial-gradient(ellipse 72% 100% at 54% 48%, transparent 30%, rgba(255, 255, 255, 0.34) 43%, rgba(0, 0, 0, 0.12) 55%, transparent 68%);
}

.shop-color-card.is-color-iridium .shop-color-swatch::after {
  background:
    radial-gradient(ellipse 96% 32% at 24% 5%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.16) 36%, transparent 68%),
    radial-gradient(ellipse 70% 118% at 88% 42%, transparent 36%, rgba(255, 255, 255, 0.42) 47%, transparent 66%),
    radial-gradient(ellipse 74% 94% at 8% 74%, transparent 38%, rgba(255, 255, 255, 0.34) 48%, transparent 68%);
}

.shop-color-card.is-color-chromatica .shop-color-swatch::before {
  background:
    radial-gradient(ellipse 98% 144% at 4% 10%, transparent 34%, rgba(255, 255, 255, 0.44) 43%, rgba(0, 0, 0, 0.12) 55%, transparent 68%),
    radial-gradient(ellipse 110% 96% at 106% 82%, transparent 32%, rgba(0, 0, 0, 0.16) 42%, rgba(255, 255, 255, 0.4) 50%, transparent 66%),
    radial-gradient(ellipse 64% 118% at 45% 62%, transparent 30%, rgba(255, 255, 255, 0.38) 42%, rgba(0, 0, 0, 0.1) 54%, transparent 68%);
}

.shop-color-card.is-color-chromatica .shop-color-swatch::after {
  background:
    radial-gradient(ellipse 82% 28% at 42% 6%, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.18) 38%, transparent 70%),
    radial-gradient(ellipse 66% 118% at 7% 70%, transparent 38%, rgba(255, 255, 255, 0.44) 48%, transparent 68%),
    radial-gradient(ellipse 82% 108% at 86% 28%, transparent 34%, rgba(255, 255, 255, 0.36) 44%, transparent 66%);
}

.shop-color-card.has-image .shop-color-swatch {
  background: var(--level-color);
}

.shop-color-card.has-image .shop-color-swatch img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transform: translate(var(--swatch-crop-x, 0), var(--swatch-crop-y, 0));
}

@keyframes shop-metal-liquid {
  0% {
    transform: translate3d(-9%, -5%, 0) rotate(-9deg) scale(1.04);
  }

  50% {
    transform: translate3d(4%, 2%, 0) rotate(3deg) scale(1.13);
  }

  100% {
    transform: translate3d(8%, 6%, 0) rotate(-2deg) scale(1.07);
  }
}

@keyframes shop-metal-sheen {
  0% {
    transform: translate3d(-4%, -2%, 0) rotate(-3deg) scale(1.02);
  }

  50% {
    transform: translate3d(1%, 1%, 0) rotate(2deg) scale(1.06);
  }

  100% {
    transform: translate3d(4%, 3%, 0) rotate(-1deg) scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-color-card.is-metallic .shop-color-swatch::before,
  .shop-color-card.is-metallic .shop-color-swatch::after {
    animation: none;
  }
}

.shop-color-info {
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
  gap: 10px;
  align-content: center;
  padding: 4px 0;
}

.shop-color-info strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.24;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-color-stats {
  display: grid;
  gap: 7px;
}

.shop-color-stat {
  display: grid;
  grid-template-columns: 20px minmax(52px, auto);
  align-items: center;
  gap: 7px;
  min-height: 22px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.shop-color-stat img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.shop-color-stat-value {
  color: var(--ink);
  font-weight: 900;
  text-align: left;
}

.shop-buy-button {
  --shop-action-color: var(--shop-action-buy, var(--pink));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: end;
  width: 70px;
  min-height: 34px;
  border: 2px solid color-mix(in srgb, var(--shop-action-color) 46%, rgba(7, 19, 63, 0.12));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), color-mix(in srgb, var(--shop-action-color) 28%, #ffffff));
  color: color-mix(in srgb, var(--shop-action-color) 56%, var(--ink));
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 3px 0 color-mix(in srgb, var(--shop-action-color) 24%, rgba(7, 19, 63, 0.16));
}

.shop-buy-button:hover:not(:disabled),
.shop-buy-button:focus-visible:not(:disabled) {
  transform: translateY(-1px);
}

.shop-buy-button:disabled {
  cursor: not-allowed;
  filter: grayscale(42%);
  opacity: 0.38;
  transform: none;
}

.shop-color-card.is-owned .shop-buy-button:disabled,
.shop-tech-card.is-owned .shop-tech-buy-button:disabled {
  filter: none;
  opacity: 0.82;
}

.shop-purchase-modal[hidden] {
  display: none;
}

.shop-purchase-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}

.shop-purchase-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 19, 63, 0.56);
  backdrop-filter: blur(6px);
}

.shop-purchase-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(100%, 460px);
  max-height: min(720px, calc(100vh - 40px));
  overflow: auto;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 253, 0.96)),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 24px 56px rgba(7, 19, 63, 0.28);
  outline: none;
  padding: 20px;
}

.shop-purchase-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 950;
  line-height: 1;
}

.shop-purchase-close:hover,
.shop-purchase-close:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.shop-purchase-head {
  display: grid;
  gap: 5px;
  padding-right: 42px;
}

.shop-purchase-head span {
  color: var(--pink);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.shop-purchase-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.96;
}

.shop-digital-receipt,
.mailbox-receipt-card {
  display: grid;
  gap: 14px;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 252, 249, 0.78)),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 8px 0 rgba(7, 19, 63, 0.08);
  padding: 14px;
}

.mailbox-receipt-card.is-resale-sale {
  border-color: rgba(240, 92, 157, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 253, 0.86)),
    #fff;
}

.mailbox-receipt-card.is-resale-return {
  border-color: rgba(73, 101, 168, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 244, 255, 0.86)),
    #fff;
}

.avatar-resale-summary {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 252, 249, 0.78)),
    #fff;
  padding: 12px;
}

.avatar-resale-summary:has(.avatar-resale-summary-image[hidden]) {
  grid-template-columns: 1fr;
}

.avatar-resale-summary-image {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: #fff;
}

.avatar-resale-summary-image[hidden] {
  display: none;
}

.avatar-resale-summary-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.avatar-resale-summary div,
.avatar-resale-price-field,
.avatar-resale-terms {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.avatar-resale-summary strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.28rem;
  font-weight: 950;
  line-height: 1;
}

.avatar-resale-summary span,
.avatar-resale-price-field > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.avatar-resale-price-field {
  gap: 8px;
}

.avatar-resale-price-field .bank-money-input {
  min-height: 54px;
  border-color: rgba(73, 101, 168, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 252, 249, 0.82)),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 14px rgba(7, 19, 63, 0.06);
}

.avatar-resale-price-field .bank-money-input-prefix,
.avatar-resale-price-field .bank-money-input input {
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 950;
  letter-spacing: 0;
}

.avatar-resale-price-field .bank-money-input-prefix {
  color: rgba(7, 19, 63, 0.7);
  font-size: 1.22rem;
  padding-left: 14px;
}

.avatar-resale-price-field .bank-money-input input {
  min-height: 50px;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
  padding: 8px 13px 9px 5px;
}

.avatar-resale-terms {
  counter-reset: avatar-resale-term;
  gap: 8px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 248, 253, 0.74)),
    rgba(240, 252, 249, 0.5);
  padding: 10px;
}

.avatar-resale-terms p {
  position: relative;
  margin: 0;
  min-height: 38px;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.7);
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.3;
  padding: 8px 10px 8px 42px;
}

.avatar-resale-terms p:first-child {
  border-color: rgba(240, 92, 157, 0.2);
  background: rgba(255, 231, 242, 0.5);
  color: var(--ink);
  font-weight: 900;
}

.avatar-resale-terms p::before {
  counter-increment: avatar-resale-term;
  content: counter(avatar-resale-term);
  position: absolute;
  top: 8px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 216, 61, 0.95), rgba(99, 217, 202, 0.78)),
    #ffffff;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.avatar-resale-terms strong {
  display: inline-flex;
  align-items: baseline;
  border-radius: 999px;
  background: rgba(255, 216, 61, 0.24);
  color: var(--ink);
  padding: 0 5px 1px;
  white-space: nowrap;
}

.shop-digital-receipt-top,
.mailbox-receipt-head {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.shop-digital-receipt-top:not(:has(.shop-digital-receipt-image)),
.mailbox-receipt-head:not(:has(.mailbox-receipt-image)) {
  grid-template-columns: 1fr;
}

.shop-digital-receipt-image,
.mailbox-receipt-image {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 0.8px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 6px 16px rgba(7, 19, 63, 0.08);
}

.shop-digital-receipt-image img,
.mailbox-receipt-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-digital-receipt-copy,
.mailbox-receipt-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.shop-digital-receipt-copy span,
.mailbox-receipt-copy span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.shop-digital-receipt-copy strong,
.mailbox-receipt-copy h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.34rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.shop-digital-receipt-lines,
.mailbox-receipt-lines {
  display: grid;
  gap: 8px;
  border-top: 1px dashed rgba(7, 19, 63, 0.2);
  border-bottom: 1px dashed rgba(7, 19, 63, 0.2);
  padding: 12px 0;
}

.shop-digital-receipt-lines > span,
.mailbox-receipt-lines > span,
.shop-digital-receipt-total,
.mailbox-receipt-total {
  display: grid;
  grid-template-columns: minmax(90px, 0.45fr) minmax(5.8em, 1fr);
  gap: 12px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.25;
}

.shop-digital-receipt-lines b,
.mailbox-receipt-lines b,
.shop-digital-receipt-total b,
.mailbox-receipt-total b {
  color: rgba(73, 101, 168, 0.86);
  font-weight: 950;
}

.shop-digital-receipt-lines strong,
.mailbox-receipt-lines strong,
.shop-digital-receipt-total strong,
.mailbox-receipt-total strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 950;
}

.shop-digital-receipt-lines [data-receipt-row="price"] strong,
.mailbox-receipt-lines [data-receipt-row="price"] strong,
.mailbox-receipt-lines [data-receipt-row="sold-for"] strong,
.mailbox-receipt-lines [data-receipt-row="processing-fee"] strong,
.mailbox-receipt-lines [data-receipt-row="you-earned"] strong,
.mailbox-receipt-lines [data-receipt-row="listing-price"] strong,
.shop-digital-receipt-total strong,
.mailbox-receipt-total strong {
  min-width: max-content;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}

.receipt-currency {
  display: inline-block;
  font-style: normal;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: keep-all;
}

.mailbox-receipt-lines a {
  color: var(--pink);
  text-decoration: none;
}

.mailbox-receipt-lines a:hover,
.mailbox-receipt-lines a:focus-visible {
  text-decoration: underline;
}

.shop-digital-receipt-total,
.mailbox-receipt-total {
  align-items: center;
  font-size: 1rem;
}

.mailbox-receipt-intro {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.45;
}

.mailbox-receipt-intro a {
  display: inline-block;
  border-radius: 4px;
  background: rgba(123, 74, 96, 0.22);
  color: var(--ink);
  line-height: 1.1;
  padding: 1px 4px 3px;
  text-decoration: none;
}

.mailbox-receipt-intro a:hover,
.mailbox-receipt-intro a:focus-visible {
  text-decoration: underline;
}

.mailbox-friend-request-card {
  display: grid;
  gap: 14px;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 240, 191, 0.72)),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 8px 0 rgba(7, 19, 63, 0.08);
  padding: 14px;
}

.mailbox-friend-request-card.is-accepted {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(214, 248, 237, 0.78)),
    #fff;
}

.mailbox-friend-request-card.is-declined {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 232, 237, 0.78)),
    #fff;
}

.mailbox-friend-request-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.mailbox-friend-request-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 0.8px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(99, 217, 202, 0.9), rgba(255, 216, 61, 0.82));
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 950;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 6px 16px rgba(7, 19, 63, 0.08);
}

.mailbox-friend-request-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  transform: translateY(-2px) scale(1.12);
}

.mailbox-friend-request-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.mailbox-friend-request-copy span {
  color: var(--pink);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.mailbox-friend-request-copy h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.46rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.mailbox-friend-request-copy p,
.mailbox-friend-request-status {
  margin: 0;
  color: rgba(73, 101, 168, 0.84);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.mailbox-friend-request-profile {
  width: max-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  border-radius: 4px;
  color: var(--pink);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}

.mailbox-friend-request-profile:hover,
.mailbox-friend-request-profile:focus-visible {
  text-decoration: underline;
}

.mailbox-friend-request-status {
  border-top: 1px dashed rgba(7, 19, 63, 0.18);
  border-bottom: 1px dashed rgba(7, 19, 63, 0.18);
  padding: 10px 0;
}

.mailbox-friend-request-card.is-accepted .mailbox-friend-request-status {
  color: #27796d;
}

.mailbox-friend-request-card.is-declined .mailbox-friend-request-status {
  color: #8b3b52;
}

.mailbox-friend-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mailbox-friend-request-action:disabled {
  cursor: default;
  filter: grayscale(32%);
  opacity: 0.62;
  transform: none;
}

.shop-gift-search-panel {
  display: grid;
  gap: 10px;
}

.shop-gift-search-panel[hidden] {
  display: none;
}

.shop-custom-panel {
  display: grid;
  gap: 10px;
}

.shop-custom-panel[hidden] {
  display: none;
}

.shop-custom-preview {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 178px);
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  aspect-ratio: 1058 / 1428;
  background: rgba(255, 255, 255, 0.82);
}

.shop-custom-preview[hidden] {
  display: none;
}

.shop-custom-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-custom-preview strong {
  position: absolute;
  left: 0;
  bottom: 24.86%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49.53%;
  height: 4.76%;
  overflow: hidden;
  color: #fff;
  font-family: "Barlow Semi Condensed", "Inter", sans-serif;
  font-size: clamp(0.56rem, 3vw, 1rem);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  white-space: nowrap;
}

.shop-custom-field {
  display: grid;
  gap: 6px;
}

.shop-custom-field span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.shop-custom-field input {
  width: 100%;
  min-height: 40px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  outline: none;
  padding: 8px 10px;
}

.shop-custom-field input:focus-visible {
  border-color: rgba(99, 217, 202, 0.88);
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.16);
}

.shop-gift-search {
  display: grid;
  gap: 6px;
}

.shop-gift-search span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.shop-gift-search input {
  width: 100%;
  min-height: 40px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  outline: none;
  padding: 8px 10px;
}

.shop-gift-search input:focus-visible {
  border-color: rgba(99, 217, 202, 0.88);
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.16);
}

.shop-gift-results {
  display: grid;
  gap: 7px;
  max-height: 188px;
  overflow: auto;
}

.shop-gift-result {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 6px 8px;
  text-align: left;
}

.shop-gift-result:hover,
.shop-gift-result:focus-visible,
.shop-gift-result.is-selected {
  border-color: rgba(240, 92, 157, 0.38);
  background: rgba(255, 240, 191, 0.64);
}

.shop-gift-result-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(99, 217, 202, 0.9), rgba(255, 216, 61, 0.82));
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 950;
}

.shop-gift-result-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}

.shop-gift-result strong {
  min-width: 0;
  overflow: hidden;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-gift-empty,
.shop-gift-selected,
.shop-purchase-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.25;
}

.shop-purchase-status.is-error {
  color: #a13018;
}

.shop-purchase-status.is-success {
  color: #1f7a4f;
}

.shop-purchase-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 10px;
}

.shop-purchase-secondary,
.shop-purchase-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1;
  padding: 0 12px;
}

.shop-purchase-secondary {
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted);
}

.shop-purchase-primary {
  border-color: rgba(240, 92, 157, 0.44);
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #fff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.2);
}

.shop-purchase-primary:disabled,
.shop-purchase-secondary:disabled {
  cursor: not-allowed;
  filter: grayscale(38%);
  opacity: 0.54;
}

.mailbox-message-body.has-mailbox-receipt {
  white-space: normal;
}

.mailbox-message-body.has-friend-request {
  white-space: normal;
}

.shop-missing {
  max-width: 620px;
  margin: 0 auto;
}

.shop-missing .shop-back-link {
  margin: 14px 0 0;
}

.game-list article {
  display: grid;
  grid-template-columns: 1fr auto auto;
}

.game-list span {
  color: var(--muted);
}

.game-list button {
  min-width: 80px;
  min-height: 38px;
}

.mailbox-shell {
  display: grid;
  gap: 16px;
}

.mailbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  padding: 2px 4px 16px;
}

.mailbox-owner-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.mailbox-owner-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.88);
  border-radius: 18px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.78), transparent 36%),
    linear-gradient(145deg, rgba(99, 217, 202, 0.86), rgba(240, 92, 157, 0.82));
  color: #fff;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.32rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 10px 22px rgba(7, 19, 63, 0.14);
}

.mailbox-owner-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  transform: translateY(-3px) scale(1.12);
}

.mailbox-owner-copy {
  min-width: 0;
}

.mailbox-owner-copy p {
  margin: 0 0 3px;
  color: var(--pink);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.mailbox-owner-copy h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.94;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.78);
}

.mailbox-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 9px;
  width: min(100%, 340px);
}

.mailbox-stats span {
  display: grid;
  gap: 3px;
  min-height: 62px;
  align-content: center;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(217, 227, 255, 0.62)),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 5px 0 rgba(7, 19, 63, 0.08);
  padding: 9px;
  text-align: center;
}

.mailbox-stats strong {
  color: var(--ink);
  font-size: 1.36rem;
  font-weight: 950;
  line-height: 1;
}

.mailbox-stats small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.mailbox-workspace {
  display: grid;
  grid-template-columns: 154px minmax(260px, 410px) minmax(320px, 1fr);
  min-height: 620px;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 248, 253, 0.96), rgba(239, 244, 255, 0.9)),
    #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 12px 24px rgba(7, 19, 63, 0.12);
}

.mailbox-sidebar {
  display: grid;
  align-content: start;
  gap: 8px;
  border-right: 2px solid rgba(7, 19, 63, 0.08);
  background:
    linear-gradient(180deg, rgba(7, 19, 63, 0.04), rgba(99, 217, 202, 0.12)),
    rgba(255, 255, 255, 0.42);
  padding: 12px;
}

.mailbox-folder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  padding: 9px 10px;
  text-align: left;
}

.mailbox-folder:hover,
.mailbox-folder:focus-visible {
  border-color: rgba(99, 217, 202, 0.34);
  background: rgba(255, 255, 255, 0.56);
  color: var(--ink);
}

.mailbox-folder:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.mailbox-folder.is-active {
  border-color: rgba(240, 92, 157, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 240, 191, 0.72)),
    rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 4px 0 rgba(7, 19, 63, 0.08);
}

.mailbox-folder strong {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.08);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 950;
  padding: 0 7px;
}

.mailbox-compose-trigger {
  grid-template-columns: 1fr;
  margin-top: 5px;
  border-color: rgba(240, 92, 157, 0.38);
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.22);
}

.mailbox-compose-trigger:hover,
.mailbox-compose-trigger:focus-visible,
.mailbox-compose-trigger.is-active {
  border-color: rgba(240, 92, 157, 0.52);
  background: linear-gradient(180deg, #ff8dc2, var(--pink));
  color: #fff;
}

.mailbox-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  border-right: 2px solid rgba(7, 19, 63, 0.08);
  background: rgba(255, 255, 255, 0.48);
}

.mailbox-list-heading {
  display: grid;
  gap: 10px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.08);
  padding: 14px;
}

.mailbox-list-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.46rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.mailbox-list-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
}

.mailbox-search input {
  width: 100%;
  min-height: 36px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  outline: 0;
  padding: 7px 10px;
}

.mailbox-search input::placeholder {
  color: rgba(73, 101, 168, 0.68);
}

.mailbox-search input:focus-visible {
  border-color: rgba(99, 217, 202, 0.88);
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.16);
}

.mailbox-list {
  display: grid;
  align-content: start;
  gap: 0;
  min-height: 0;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mailbox-list-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 12px 14px;
  text-align: left;
}

.mailbox-list-item:hover,
.mailbox-list-item:focus-visible {
  background: rgba(99, 217, 202, 0.12);
}

.mailbox-list-item:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: -2px;
}

.mailbox-list-item.is-active {
  background:
    linear-gradient(90deg, rgba(255, 216, 61, 0.25), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, 0.82);
}

.mailbox-list-item.is-unread .mailbox-list-subject,
.mailbox-list-item.is-unread .mailbox-list-sender {
  font-weight: 950;
}

.mailbox-list-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border: 0.8px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(99, 217, 202, 0.9), rgba(255, 216, 61, 0.82));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 950;
}

.mailbox-list-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  transform: translateY(-2px) scale(1.12);
}

.mailbox-list-avatar.is-shop-poster {
  height: 50px;
  border-radius: 6px;
  background: #fff;
}

.mailbox-list-avatar.is-shop-poster img {
  object-fit: cover;
  object-position: center;
  transform: none;
}

.mailbox-list-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.mailbox-list-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mailbox-list-sender,
.mailbox-list-time {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mailbox-list-time {
  color: rgba(73, 101, 168, 0.7);
  font-size: 0.7rem;
}

.mailbox-list-subject {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mailbox-list-preview {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(73, 101, 168, 0.86);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mailbox-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0 0 3px rgba(240, 92, 157, 0.14);
}

.mailbox-empty {
  align-self: start;
  margin: 14px;
  border: 2px dashed rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  color: rgba(73, 101, 168, 0.76);
  font-size: 0.86rem;
  font-weight: 850;
  padding: 14px;
  text-align: center;
}

.mailbox-empty[hidden] {
  display: none;
}

.mailbox-detail-panel {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(ellipse at top right, rgba(255, 216, 61, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 248, 253, 0.9));
}

.mailbox-message-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.mailbox-message-view[hidden] {
  display: none;
}

.mailbox-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  min-height: 100%;
  color: var(--muted);
  font-weight: 850;
  text-align: center;
  padding: 34px;
}

.mailbox-placeholder img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: 0.78;
  filter: drop-shadow(0 5px 10px rgba(7, 19, 63, 0.12));
}

.mailbox-placeholder strong {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.52rem;
  line-height: 1;
}

.mailbox-placeholder span {
  font-size: 0.9rem;
}

.mailbox-message-head {
  display: grid;
  gap: 12px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.08);
  background: rgba(255, 255, 255, 0.58);
  padding: 18px;
}

.mailbox-message-subject-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.mailbox-message-subject-row h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.42rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.mailbox-message-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.mailbox-message-meta {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.mailbox-message-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 0.8px solid rgba(7, 19, 63, 0.16);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(99, 217, 202, 0.9), rgba(255, 216, 61, 0.82));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 950;
}

.mailbox-message-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
  transform: translateY(-2px) scale(1.12);
}

.mailbox-message-avatar.is-shop-poster {
  height: 64px;
  border-radius: 6px;
  background: #fff;
}

.mailbox-message-avatar.is-shop-poster img {
  object-fit: cover;
  object-position: center;
  transform: none;
}

.mailbox-message-addresses {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.mailbox-message-addresses strong,
.mailbox-message-addresses span,
.mailbox-message-addresses time {
  overflow-wrap: anywhere;
}

.mailbox-message-addresses strong {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.15;
}

.mailbox-message-addresses span,
.mailbox-message-addresses time {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.mailbox-message-body {
  min-height: 0;
  overflow: auto;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mailbox-message-body p {
  margin: 0;
}

.mailbox-message-action-link {
  width: max-content;
  max-width: 100%;
  margin-top: 12px;
}

.mailbox-message-button,
.mailbox-primary-button,
.mailbox-secondary-button,
.mailbox-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 3px 0 rgba(7, 19, 63, 0.1);
  padding: 7px 12px;
}

.mailbox-message-button,
.mailbox-secondary-button,
.mailbox-icon-button {
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
}

.mailbox-message-delete-button {
  border-color: rgba(191, 46, 82, 0.28);
  background: rgba(255, 255, 255, 0.82);
  color: #BF2E52;
}

.mailbox-primary-button {
  border-color: rgba(240, 92, 157, 0.46);
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #fff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.2);
}

.mailbox-message-button:disabled,
.mailbox-primary-button:disabled,
.mailbox-secondary-button:disabled,
.mailbox-icon-button:disabled {
  cursor: not-allowed;
  filter: grayscale(26%);
  opacity: 0.58;
}

.mailbox-message-button:hover,
.mailbox-message-button:focus-visible,
.mailbox-primary-button:hover,
.mailbox-primary-button:focus-visible,
.mailbox-secondary-button:hover,
.mailbox-secondary-button:focus-visible,
.mailbox-icon-button:hover,
.mailbox-icon-button:focus-visible {
  filter: saturate(1.06) brightness(1.02);
  text-decoration: none;
}

.mailbox-message-button:focus-visible,
.mailbox-primary-button:focus-visible,
.mailbox-secondary-button:focus-visible,
.mailbox-icon-button:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.mailbox-icon-button {
  width: 34px;
  padding: 0;
}

.mailbox-compose {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  height: 100%;
  overflow: auto;
  background:
    radial-gradient(ellipse at top right, rgba(99, 217, 202, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.86);
  padding: 18px;
}

.mailbox-compose[hidden] {
  display: none;
}

.mailbox-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 11px;
}

.mailbox-compose-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.52rem;
  font-weight: 900;
  line-height: 1;
}

.mailbox-compose label {
  display: grid;
  gap: 6px;
}

.mailbox-compose label span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.mailbox-compose input,
.mailbox-compose textarea {
  width: 100%;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  outline: 0;
  padding: 9px 11px;
}

.mailbox-compose input[readonly] {
  background: rgba(217, 227, 255, 0.42);
  color: var(--muted);
}

.mailbox-compose textarea {
  min-height: 220px;
  resize: vertical;
}

.mailbox-compose input:focus-visible,
.mailbox-compose textarea:focus-visible {
  border-color: rgba(99, 217, 202, 0.88);
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.16);
}

.mailbox-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mailbox-compose-footer p {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.mailbox-compose-footer p.is-error {
  color: var(--pink);
}

.mailbox-compose-footer p.is-success {
  color: #27796d;
}

.mailbox-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 900px) {
  :root {
    --brand-logo-width: clamp(122px, 10vw, 155px);
    --brand-logo-height: clamp(122px, 10vw, 155px);
    --brand-logo-size: var(--brand-logo-width);
    --brand-logo-center-offset: clamp(61px, 5vw, 77.5px);
    --brand-nav-gap: 14px;
  }

  .brand-row {
    align-items: flex-start;
    flex-direction: row;
  }

  .account-actions {
    justify-content: flex-end;
    width: auto;
  }

  .main-tabs {
    gap: 6px;
  }

  .main-tab {
    font-size: 0.92rem;
    padding: 5px 10px 5px 8px;
  }

  .home-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-layout {
    grid-template-columns: 1fr;
  }

  .play-stage {
    grid-template-columns: 1fr;
    min-width: 0;
    padding-left: 0;
    width: 100%;
  }

  .play-rail {
    position: static;
    width: min(100%, 620px);
    justify-self: center;
  }

  .play-active-games {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    border-right: 0;
    border-bottom: 2px solid rgba(7, 19, 63, 0.08);
    padding-right: 0;
    padding-bottom: 24px;
  }

  .play-active-games > .play-stage-subheading {
    align-self: center;
  }

  .play-active-table-wrap {
    align-self: center;
    overflow: visible;
    width: min(100%, 560px);
    max-width: calc(100vw - 32px);
  }

  .play-active-table {
    display: block;
    min-width: 0;
    max-width: 100%;
    table-layout: auto;
  }

  .play-active-table thead {
    display: none;
  }

  .play-active-table tbody {
    display: grid;
    gap: 10px;
    width: 100%;
  }

  .play-active-table tbody .play-active-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    width: 100%;
  }

  .play-active-table th,
  .play-active-table td {
    box-sizing: border-box;
    min-width: 0;
  }

  .play-active-table thead th:nth-child(2),
  .play-active-table thead th:nth-child(3),
  .play-active-table tbody td:nth-child(2),
  .play-active-table tbody td:nth-child(3) {
    display: none;
  }

  .play-active-table thead th:nth-child(1) {
    width: auto;
  }

  .play-active-table thead th:nth-child(4) {
    width: auto;
  }

  .play-enroll-view .play-card-row {
    grid-template-columns: repeat(2, minmax(0, 224px));
    justify-content: center;
  }

  .home-card-grid,
  .home-rooms,
  .home-columns {
    grid-template-columns: 1fr;
  }

  .hof-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hof-hero-copy {
    max-width: none;
  }

  .memory-wall {
    grid-template-columns: repeat(8, minmax(74px, 1fr));
    overflow-x: auto;
  }

  .hof-grid-standard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hof-content {
    grid-template-columns: 1fr;
  }

  .hof-weekly {
    position: static;
    max-width: none;
  }

  .hof-weekly-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hof-weekly-list li {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .hof-weekly-avatar {
    width: 38px;
    height: 44px;
  }

  .magnate-winner-list {
    grid-template-columns: repeat(8, minmax(118px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .hof-heading h1 {
    font-size: 3.25rem;
  }

  .magnate-heading {
    padding-block: 6px;
  }

  .home-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  }

  .profile-card,
  .mini-board {
    border-bottom: 0;
  }

  .mini-board {
    border-top: 0;
    border-left: 1px solid #EEE5D9;
  }

  .quick-actions {
    grid-column: 1 / -1;
    border-top: 1px solid #EEE5D9;
  }

  .profile-hero {
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 18px;
  }

  .profile-identity h1 {
    font-size: 2.55rem;
  }

  .mailbox-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .avatar-studio-layout {
    grid-template-columns: 1fr;
  }

  .avatar-studio-preview-card {
    position: static;
  }

  .avatar-studio-preview-frame {
    width: min(100%, 200px);
  }

  .mailbox-stats {
    width: 100%;
  }

  .mailbox-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .mailbox-sidebar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 2px solid rgba(7, 19, 63, 0.08);
  }

  .mailbox-folder {
    justify-content: center;
    text-align: center;
  }

  .mailbox-list-panel {
    min-height: 360px;
    border-right: 0;
    border-bottom: 2px solid rgba(7, 19, 63, 0.08);
  }

  .mailbox-detail-panel {
    min-height: 420px;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .side-panel {
    order: -1;
  }

  .shop-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
    margin: 0 auto;
  }

  .shop-detail-poster {
    width: 100%;
    max-width: 220px;
    justify-self: center;
  }

  .shops-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .shops-hero-copy {
    max-width: none;
  }

  .shops-hero-showcase {
    min-height: 292px;
  }

  .shop-poster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .shop-poster-card {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  .shop-poster-frame {
    width: 100px;
  }

  .shop-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bank-heading-row {
    grid-template-columns: 1fr;
  }

  .bank-balance-card {
    width: min(100%, 260px);
    justify-self: start;
  }

  .bank-panel-grid {
    grid-template-columns: 1fr;
  }

  .bank-service-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bank-service-form button {
    width: 100%;
  }

  .bank-market-grid {
    grid-template-columns: 1fr;
  }

  .bank-subscription-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bank-purchase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-color-card {
    grid-template-columns: 82px minmax(0, 1fr) 70px;
  }

  body.show-page-bigbrother .show-detail-layout {
    grid-template-columns: 1fr;
    width: min(100% - 16px, 520px);
    max-width: 520px;
    margin: 12px auto 42px;
  }

  body.show-page-bigbrother .show-detail-layout .on-tv-panel {
    order: 2;
  }

  .bb-memory-panel {
    --bb-memory-card-size: clamp(38px, 9vw, 52px);
  }

  .show-board-layout,
  body.show-page-bigbrother .show-detail-layout {
    grid-template-columns: 1fr;
    width: min(100% - 16px, 760px);
    max-width: 760px;
    margin: 12px auto 42px;
  }

  .show-board-panel,
  .show-context-rail,
  body.show-page-bigbrother .show-detail-layout .show-board-panel,
  body.show-page-bigbrother .show-detail-layout .show-context-rail {
    grid-column: 1;
    grid-row: auto;
  }

  .show-context-rail {
    order: 2;
  }
}

@media (max-width: 640px) {
  .play-active-table-wrap {
    overflow: visible;
  }

  .play-active-table {
    min-width: 0;
  }

  .play-active-table thead th:nth-child(2),
  .play-active-table thead th:nth-child(3),
  .play-active-table tbody td:nth-child(2),
  .play-active-table tbody td:nth-child(3) {
    display: none;
  }

  .play-active-table thead th:nth-child(1) {
    width: auto;
  }

  .play-active-table thead th:nth-child(4) {
    width: 92px;
  }

  .play-active-table th,
  .play-active-table td {
    padding-inline: 10px;
  }

  .play-active-table a {
    gap: 10px;
  }

  .play-active-game-art {
    width: 44px;
    height: 44px;
  }

  .play-active-game-lockup {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .play-active-status {
    font-size: 0.7rem;
  }

  .play-active-status-cell {
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
  }

  .play-active-table tbody .play-active-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .play-active-table tbody td:nth-child(4) {
    display: none;
  }

  .play-stage .play-rail {
    width: min(100%, calc(100vw - 72px));
    max-width: calc(100vw - 72px);
    justify-self: center;
  }

  .play-rail-card {
    width: 100%;
    padding: 12px;
  }

  .play-lobby-close {
    min-height: 24px;
    font-size: 0.62rem;
    padding-inline: 7px;
  }
}

@media (max-width: 820px) {
  .profile-section[aria-labelledby="profile-activity-title"],
  .profile-section[aria-labelledby="profile-games-title"],
  .profile-section[aria-labelledby="profile-interests-title"] {
    width: 100%;
  }

  .profile-section[aria-labelledby="profile-activity-title"] {
    justify-self: stretch;
  }
}

@media (max-width: 680px) {
  :root {
    --brand-logo-width: 112px;
    --brand-logo-height: 112px;
    --brand-logo-size: var(--brand-logo-width);
    --brand-logo-center-offset: 56px;
    --brand-logo-margin-left: 0px;
    --brand-nav-gap: 12px;
    --brand-row-padding-top: 10px;
  }

  body {
    overflow-x: hidden;
  }

  .page-shell,
  .home-shell {
    width: min(100% - 16px, 1500px);
    margin-top: 12px;
  }

  body:not(.show-page) > .home-shell {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    overflow: hidden;
    border-width: 2px;
    border-radius: 13px;
    padding: 12px 6px 16px;
  }

  .active-game-tabs {
    --active-game-tab-width: clamp(104px, 32vw, 122px);
    right: 8px;
    width: max-content;
    max-width: calc(100% - 16px);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    gap: 0;
    padding: 0 2px;
    -webkit-overflow-scrolling: touch;
  }

  .active-game-tab {
    flex-basis: var(--active-game-tab-width);
    width: var(--active-game-tab-width);
    min-width: var(--active-game-tab-width);
    min-height: 30px;
    border-radius: 10px 10px 0 0;
    font-size: 0.84rem;
    padding: 6px 12px 7px;
  }

  .active-game-tab-label {
    max-width: 12ch;
  }

  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px;
    padding: var(--brand-row-padding-top) 12px 8px;
  }

  .brand {
    margin-left: 0;
    width: auto;
    max-width: var(--brand-logo-width);
    min-width: 0;
  }

  .brand-row {
    padding: var(--brand-row-padding-top) 12px 0;
  }

  .account-actions {
    gap: 6px;
  }

  .account-link,
  .message-link {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 0.8rem;
  }

  .account-link {
    padding: 3px 10px 3px 4px;
  }

  .account-link:not(.is-guest) {
    width: 30px;
    min-width: 30px;
    padding: 2px;
  }

  .account-username {
    display: none;
  }

  .account-menu-trigger.is-guest {
    width: 30px;
    min-width: 30px;
    padding: 0;
  }

  .message-link {
    width: 38px;
    padding: 4px;
  }

  .account-icon {
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
  }

  .profile-initials,
  .profile-avatar-thumb {
    width: 25px;
    height: 25px;
  }

  .main-tabs {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
    margin-top: 0;
  }

  .main-tab {
    font-size: 0.88rem;
    gap: 4px;
    padding: 5px 10px 5px 7px;
  }

  .main-tab img {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
  }

  .main-menu {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-shell {
    gap: 16px;
  }

  .profile-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 0 4px 18px;
  }

  .profile-portrait {
    width: min(100%, 210px);
  }

  .profile-identity h1 {
    font-size: 1.95rem;
    line-height: 0.95;
  }

  .profile-name-row {
    justify-content: center;
    gap: 9px;
    margin-inline: auto;
  }

  .profile-verified-icon {
    width: 17px;
    height: 17px;
  }

  .profile-site-rank {
    --profile-site-rank-width: 27px;
    --profile-site-rank-height: 27px;
    transform: translateY(1px);
  }

  .profile-site-rank.is-top-five {
    --profile-site-rank-width: 29px;
    --profile-site-rank-height: 40px;
  }

  .profile-site-rank-number {
    font-size: 0.62rem;
  }

  .profile-site-rank[data-rank-digits="2"] .profile-site-rank-number {
    font-size: 0.54rem;
  }

  .profile-site-rank[data-rank-digits="3"] .profile-site-rank-number {
    font-size: 0.44rem;
  }

  .profile-level-card.shop-color-card {
    width: 34px;
    min-height: 52px;
    padding: 0;
  }

  .profile-level-card .shop-color-swatch {
    width: 34px;
    min-height: 52px;
  }

  .profile-balance {
    justify-content: center;
    gap: 10px 14px;
  }

  .profile-bio {
    width: min(100%, 420px);
    margin-inline: auto;
  }

  .profile-bio-form {
    text-align: left;
  }

  .profile-bio-form-footer {
    justify-content: center;
  }

  .profile-bio-counter {
    flex-basis: 100%;
    text-align: center;
  }

  .profile-history-heading {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 8px;
  }

  .settings-segmented {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .settings-grid,
  .settings-field-grid,
  .settings-field-grid.is-wide {
    grid-template-columns: 1fr;
  }

  .settings-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-upload,
  .settings-custom-emoji-row,
  .settings-buzz-preview {
    grid-template-columns: 1fr;
  }

  .settings-custom-emoji-preview {
    justify-self: start;
  }

  .settings-actions {
    align-items: stretch;
  }

  .avatar-studio-shell {
    width: min(100% - 16px, 1180px);
  }

  .avatar-studio-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .avatar-studio-profile-link {
    width: 100%;
  }

  .avatar-studio-builder-head {
    align-items: flex-start;
  }

  .avatar-gender-toggle {
    width: fit-content;
    max-width: 100%;
  }

  .avatar-studio-options {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
  }

  .settings-save,
  .settings-reset {
    flex: 1 1 135px;
  }

  .profile-history-pagination {
    max-width: 100%;
    justify-self: start;
    overflow-x: auto;
  }

  .profile-history-title-row {
    width: 100%;
  }

  .profile-history-capacity {
    width: 100%;
    justify-content: flex-start;
  }

  .profile-interest-row {
    grid-template-columns: 1fr;
  }

  .profile-interest-row dt {
    border-right: 0;
    border-bottom: 1px solid rgba(73, 101, 168, 0.1);
    padding-bottom: 5px;
  }

  .profile-interest-row dd {
    padding-top: 7px;
  }

  .mailbox-header {
    padding-inline: 2px;
  }

  .mailbox-owner-avatar {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  .mailbox-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mailbox-stats span {
    min-height: 54px;
    padding: 7px;
  }

  .mailbox-stats strong {
    font-size: 1.16rem;
  }

  .mailbox-sidebar {
    gap: 6px;
    padding: 8px;
  }

  .mailbox-folder {
    min-height: 38px;
    font-size: 0.78rem;
    padding: 8px 7px;
  }

  .mailbox-list-heading {
    padding: 12px;
  }

  .mailbox-list-item {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    padding: 11px 12px;
  }

  .mailbox-list-avatar {
    width: 34px;
    height: 34px;
  }

  .mailbox-list-avatar.is-shop-poster {
    height: 46px;
  }

  .mailbox-message-subject-row {
    grid-template-columns: 1fr;
  }

  .mailbox-message-actions {
    justify-content: flex-start;
  }

  .mailbox-compose {
    padding: 14px;
  }

  .profile-history-list {
    grid-template-columns: repeat(auto-fit, minmax(76px, 84px));
    justify-content: center;
    gap: 14px 7px;
    overflow: visible;
  }

  .profile-history-badge {
    width: 72px;
  }

  .profile-history-badge-text strong {
    font-size: 1.46rem;
  }

  .profile-history-badge-text small {
    font-size: 0.54rem;
  }

  .profile-history-badge.is-ongoing .profile-history-badge-text {
    font-size: 0.94rem;
  }

  .profile-history-meta {
    width: 78px;
    min-height: 50px;
  }

  .profile-history-meta strong {
    font-size: 0.62rem;
  }

  .profile-history-meta span {
    font-size: 0.74rem;
  }

  .profile-history-meta time {
    font-size: 0.64rem;
  }

  .profile-game-card {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
  }

  .profile-game-logo {
    width: 58px;
    height: 46px;
  }

  .profile-game-card > a {
    grid-column: 1 / -1;
    width: 100%;
  }

  .show-menu-panel {
    position: static;
    min-width: 210px;
    margin-top: 8px;
  }

  .on-tv-panel {
    width: min(100% - 16px, 1500px);
    margin-top: 2px;
  }

  .on-tv-panel-inner {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .bb-memory-panel {
    --bb-memory-card-size: clamp(34px, 13vw, 46px);
    padding: 8px;
  }

  .bb-memory-panel-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .bb-memory-row {
    gap: 4px;
  }

  .bb-memory-card strong {
    min-height: 13px;
    font-size: 0.44rem;
    padding: 3px 2px 2px;
  }

  .bb-memory-status {
    top: 2px;
    left: 2px;
    min-width: 11px;
    height: 11px;
    font-size: 0.48rem;
  }

  .bb-memory-key {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .show-board-header {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 12px;
  }

  .show-board-stats {
    justify-content: start;
  }

  .show-section-tabs {
    gap: 2px;
    overflow-x: auto;
  }

  .show-section-tabs a {
    min-height: 34px;
    font-size: 0.74rem;
    padding: 0 10px;
  }

  .show-board-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 7px;
    padding: 8px;
  }

  .show-board-compose-trigger,
  .show-board-login-link {
    grid-column: 1;
    justify-self: start;
  }

  .show-board-post-form input {
    min-height: 34px;
    font-size: 0.78rem;
  }

  .show-board-post-form textarea,
  .show-reply-form textarea {
    font-size: 0.78rem;
  }

  .show-board-login-link,
  .show-board-compose-trigger,
  .show-board-form-footer button,
  .show-reply-actions button {
    min-height: 34px;
    font-size: 0.74rem;
    padding: 0 10px;
  }

  .show-board-tabs {
    gap: 5px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .show-board-tabs a {
    flex: 0 0 auto;
  }

  .show-thread-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .show-thread-votes {
    padding: 8px 4px;
  }

  .show-thread-votes button,
  .show-thread-votes a {
    width: 22px;
  }

  .show-thread-body {
    padding: 10px;
  }

  .show-thread-excerpt,
  .show-thread-content,
  .show-reply-content {
    font-size: 0.8rem;
  }

  .on-tv-airings {
    grid-template-columns: 1fr;
  }

  .home-status {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .home-status article {
    min-height: 82px;
    padding: 12px;
  }

  .home-status strong {
    font-size: 1.55rem;
  }

  .home-sidebar {
    display: block;
  }

  .mini-board {
    border-left: 0;
    border-top: 1px solid #EEE5D9;
  }

  .notice-strip {
    grid-template-columns: 1fr;
  }

  .notice-strip button {
    width: 100%;
  }

  .home-card-grid,
  .home-rooms,
  .home-columns,
  .memory-wall-section,
  .hof-section,
  .play-section,
  .shops-section,
  .shop-detail {
    padding-inline: 12px;
  }

  .hof-section,
  .shops-section {
    padding-inline: 8px;
  }

  .shops-hero {
    gap: 14px;
    padding: 12px;
  }

  .hof-hero {
    gap: 14px;
    padding: 12px;
  }

  .shops-hero h1 {
    font-size: 3.05rem;
  }

  .hof-hero h1 {
    font-size: 3.05rem;
  }

  .shops-hero-lede,
  .shops-hero-subcopy,
  .hof-hero-lede,
  .hof-hero-subcopy {
    max-width: 28ch;
  }

  .shops-hero-lede {
    font-size: 1.24rem;
  }

  .hof-hero-lede {
    font-size: 1.24rem;
  }

  .shops-hero-subcopy {
    font-size: 0.92rem;
  }

  .hof-hero-subcopy {
    font-size: 0.92rem;
  }

  .shops-hero-showcase {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 88px));
    justify-content: start;
    gap: 8px;
    min-height: 0;
    overflow: visible;
    padding-bottom: 0;
  }

  .shops-feature-poster,
  .shops-feature-poster.is-poster-1,
  .shops-feature-poster.is-poster-2,
  .shops-feature-poster.is-poster-3 {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }

  .shops-feature-poster span {
    padding: 7px;
  }

  .shops-feature-poster b {
    font-size: 0.66rem;
  }

  .shops-feature-poster em {
    display: none;
  }

  .shop-section-divider {
    grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr);
    gap: 8px;
  }

  .shop-section-divider h2 {
    font-size: 0.86rem;
    padding: 8px 10px;
  }

  .shop-poster-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .shop-poster-card {
    grid-template-columns: 66px minmax(0, 1fr);
    min-height: 142px;
    gap: 12px;
    padding: 10px;
  }

  .shop-poster-frame {
    width: 66px;
  }

  .shop-card-copy {
    max-width: 24ch;
  }

  .shop-card-copy strong,
  .shop-card-copy > span {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .shop-card-copy strong {
    font-size: 1.14rem;
  }

  .shop-card-copy > span:not(.shop-card-topline) {
    font-size: 0.8rem;
  }

  .shop-color-grid {
    grid-template-columns: 1fr;
  }

  .bank-tab-list,
  .bank-service-form {
    grid-template-columns: 1fr;
  }

  .bank-balance-card {
    gap: 6px;
    min-height: 72px;
    padding: 10px 12px;
  }

  .bank-balance-label {
    font-size: 0.78rem;
  }

  .bank-balance-card strong {
    justify-self: start;
    font-size: 1.62rem;
  }

  .bank-tab-list {
    display: grid;
  }

  .bank-tab,
  .bank-service-form button {
    width: 100%;
  }

  .bank-purchase-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .bank-subscription-callout {
    grid-template-columns: 1fr;
  }

  .bank-subscription-callout a {
    width: 100%;
  }

  .bank-purchase-section-head {
    align-items: start;
    flex-direction: column;
    gap: 5px;
  }

  .bank-subscription-grid {
    grid-template-columns: 1fr;
  }

  .bank-purchase-card:last-child {
    border-bottom: 0;
  }

  .bank-purchase-card {
    grid-template-columns: minmax(116px, 1fr) 64px 72px;
    grid-template-areas: "amount price action";
  }

  .bank-purchase-card.has-callout {
    grid-template-areas:
      "amount price action"
      "callout callout action";
  }

  .bank-panel {
    padding: 14px;
  }

  .bank-portfolio-controls,
  .bank-position-card-body {
    grid-template-columns: 1fr;
  }

  .bank-positions-panel {
    padding: 16px;
  }

  .bank-portfolio-sort {
    justify-content: start;
  }

  .bank-position-card {
    gap: 18px;
    border-radius: 18px;
    padding: 18px;
  }

  .bank-position-card-head {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    padding-bottom: 18px;
  }

  .bank-position-avatar {
    width: 44px;
    height: 44px;
  }

  .bank-position-actions {
    grid-template-columns: 1fr;
  }

  .bank-portfolio-search input {
    min-height: 58px;
    padding-left: 58px;
  }

  .bank-portfolio-search::before {
    left: 19px;
  }

  .bank-portfolio-search::after {
    left: 35px;
  }

  .bank-summary strong,
  .bank-rate-card strong,
  .bank-market-grid article strong {
    font-size: 1.68rem;
  }

  .shop-color-card {
    grid-template-columns: 82px minmax(0, 1fr) 70px;
  }

  .shop-detail-panel,
  .shop-missing {
    padding: 16px;
  }

  .shop-detail-panel h1,
  .shop-missing h1 {
    font-size: 2rem;
  }

  .hof-heading {
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }

  .hof-title-row {
    gap: 8px;
  }

  .hof-heading h1 {
    font-size: 2.45rem;
    text-shadow:
      1px 0 0 #ffffff,
      -1px 0 0 #ffffff,
      0 1px 0 #ffffff,
      0 -1px 0 #ffffff,
      2px 2px 0 var(--yellow),
      3px 3px 0 rgba(99, 217, 202, 0.38),
      0 7px 12px rgba(7, 19, 63, 0.12);
  }

  .hof-grid-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: min(calc(100vw - 44px), 330px);
  }

  .hof-grid-standard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: min(calc(100vw - 44px), 330px);
  }

  .hof-grid-row-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: min(calc(100vw - 44px), 330px);
  }

  .hof-card-large {
    padding: 4px;
  }

  .hof-card-large .hof-avatar {
    aspect-ratio: 1 / 1.14;
  }

  .hof-card-large .hof-rank {
    left: 6px;
    width: 31px;
    height: 35px;
    font-size: 0.7rem;
    padding-bottom: 8px;
  }

  .hof-card-large .hof-rank::before {
    inset-inline: 6px;
    height: 6px;
  }

  .hof-card-large .hof-player {
    min-height: 49px;
    padding: 6px 5px 8px;
  }

  .hof-card-large .hof-player h2 {
    font-size: 0.88rem;
  }

  .hof-card-large .hof-player h2.is-long-name {
    font-size: 0.78rem;
  }

  .hof-card-large .hof-player h2.is-extra-long-name {
    font-size: 0.72rem;
  }

  .hof-card-large .hof-score {
    font-size: 0.74rem;
  }

  .hof-card-large .hof-score img {
    width: 13px;
    height: 13px;
  }

  .hof-subheading {
    font-size: 1.75rem;
  }

  .hof-weekly-list {
    grid-template-columns: 1fr;
  }

  .magnate-winners {
    margin-top: 22px;
  }

  .magnate-winner-list {
    grid-template-columns: repeat(8, minmax(118px, 1fr));
  }

  .hof-player {
    min-height: 64px;
  }

  .magnate-heading {
    padding: 4px 0 6px;
  }

  .nominee-vote-banner {
    padding: 12px;
  }

  .nominee-action-row,
  .nominee-list,
  .nominee-plea-grid {
    width: 100%;
  }

  .nominee-plea-grid {
    grid-template-columns: 1fr;
  }

  .nominee-plea-head {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .nominee-card {
    grid-template-columns: 52px minmax(0, 1fr);
    width: 100%;
  }

  .nominee-avatar {
    width: 52px;
  }

  .nominee-vote-button {
    width: 100%;
  }

  .play-card-grid {
    gap: 16px;
  }

  .play-enroll-view {
    width: 100%;
  }

  .play-card-row {
    grid-template-columns: minmax(0, 184px);
    gap: 16px;
  }

  .play-enroll-view .play-card-row {
    grid-template-columns: minmax(0, 260px);
    justify-content: center;
  }

  .play-enroll-view .play-card {
    width: 100%;
  }

  .memory-wall {
    grid-template-columns: repeat(4, minmax(64px, 1fr));
    gap: 7px;
    padding: 8px;
  }

  .memory-card h2 {
    font-size: 0.78rem;
  }

  .home-rooms article {
    grid-template-columns: 1fr;
    padding: 10px 0;
  }

  .home-rooms button {
    width: 100%;
  }

  .game-title-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

  .phase-pill {
    width: 100%;
  }

  .cast-strip {
    grid-auto-columns: 104px;
  }

  .player-card {
    grid-template-rows: 106px 28px 18px 26px;
    min-width: 104px;
  }

  .avatar {
    width: 84px;
    height: 102px;
  }

  .composer {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .composer button {
    width: 100%;
  }

  .chat-tab {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1rem;
    padding-inline: 12px;
  }

  .message .meta {
    flex-wrap: wrap;
  }

  .message .meta b {
    margin-left: 0;
  }

  .shop-grid {
    grid-template-columns: 1fr;
  }

  .leaderboard article,
  .game-list article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .hof-grid-top {
    max-width: min(calc(100vw - 44px), 267px);
  }

  .hof-grid-standard {
    max-width: min(calc(100vw - 44px), 267px);
  }
}

body .bank-marketplace.market-detail-view .market-ticket {
  overflow: hidden;
  padding: 0;
}

body .bank-marketplace.market-detail-view .market-ticket-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.1);
  padding: 12px 14px;
}

body .bank-marketplace.market-detail-view .market-ticket-top .market-side-toggle {
  display: flex;
  gap: 18px;
  margin: 0;
}

body .bank-marketplace.market-detail-view .market-ticket-top .market-side-toggle button {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(7, 19, 63, 0.44);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  padding: 0;
  text-transform: uppercase;
}

body .bank-marketplace.market-detail-view .market-ticket-top .market-side-toggle button.is-active {
  color: var(--ink);
}

body .bank-marketplace.market-detail-view .market-ticket-top > strong {
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .bank-marketplace.market-detail-view .market-ticket-body,
body .bank-marketplace.market-detail-view .market-review-ticket {
  display: grid;
  gap: 12px;
  padding: 14px;
}

body .bank-marketplace.market-detail-view .market-review-ticket[hidden],
body .bank-marketplace.market-detail-view .market-trade-form[hidden],
body .bank-marketplace.market-detail-view .market-buy-fields[hidden],
body .bank-marketplace.market-detail-view .market-sell-fields[hidden] {
  display: none;
}

body .bank-marketplace.market-detail-view .market-ticket-market {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 800;
}

body .bank-marketplace.market-detail-view .market-ticket-head {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  margin: 0;
}

body .bank-marketplace.market-detail-view .market-ticket-avatar {
  width: 38px;
  height: 46px;
}

body .bank-marketplace.market-detail-view .market-ticket-head h2 {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  color: var(--ink);
  font-size: 1.25rem;
}

body .bank-marketplace.market-detail-view [data-market-selected-contract-label],
body .bank-marketplace.market-detail-view [data-market-review-contract-label] {
  color: #11A892;
}

body .bank-marketplace.market-detail-view [data-market-selected-contract-label].is-no,
body .bank-marketplace.market-detail-view [data-market-review-contract-label].is-no {
  color: var(--pink);
}

body .bank-marketplace.market-detail-view.is-selling .market-contract-toggle {
  display: none;
}

body .bank-marketplace.market-detail-view .market-contract-toggle {
  margin: 0;
}

body .bank-marketplace.market-detail-view .market-ticket-input-row {
  display: grid;
  gap: 6px;
}

body .bank-marketplace.market-detail-view .market-ticket-input-row > span:first-child,
body .bank-marketplace.market-detail-view .market-limit-line,
body .bank-marketplace.market-detail-view .market-account-line {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

body .bank-marketplace.market-detail-view .market-buy-fields,
body .bank-marketplace.market-detail-view .market-sell-fields {
  display: grid;
  gap: 10px;
}

body .bank-marketplace.market-detail-view .market-ticket-input-row > input,
body .bank-marketplace.market-detail-view .market-expiration-row,
body .bank-marketplace.market-detail-view .market-resting-row {
  width: 100%;
  min-height: 40px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 900;
  padding: 7px 10px;
}

body .bank-marketplace.market-detail-view .market-expiration-row,
body .bank-marketplace.market-detail-view .market-resting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

body .bank-marketplace.market-detail-view .market-expiration-row span,
body .bank-marketplace.market-detail-view .market-resting-row span,
body .bank-marketplace.market-detail-view .market-ticket-summary dt {
  color: var(--muted);
  font-weight: 900;
}

body .bank-marketplace.market-detail-view .market-expiration-row select {
  max-width: 160px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 900;
}

body .bank-marketplace.market-detail-view .market-resting-row input {
  width: 20px;
  height: 20px;
  accent-color: var(--pink);
}

body .bank-marketplace.market-detail-view .market-resting-row.is-disabled {
  opacity: 0.58;
}

body .bank-marketplace.market-detail-view .market-expiration-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

body .bank-marketplace.market-detail-view .market-expiration-chips button {
  min-height: 32px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

body .bank-marketplace.market-detail-view .market-expiration-chips button.is-active {
  border-color: rgba(7, 19, 63, 0.26);
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
}

body .bank-marketplace.market-detail-view .market-ticket-summary {
  display: grid;
  gap: 9px;
  margin: 0;
}

body .bank-marketplace.market-detail-view .market-ticket-summary div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
}

body .bank-marketplace.market-detail-view .market-ticket-summary dd {
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  text-align: right;
}

body .bank-marketplace.market-detail-view .market-ticket-summary div:last-child dd {
  font-size: 1.32rem;
}

body .bank-marketplace.market-detail-view .market-review-title {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body .bank-marketplace.market-detail-view .market-review-actions {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  margin-top: 4px;
}

body .bank-marketplace.market-detail-view .market-review-back {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: transparent;
  cursor: pointer;
  position: relative;
}

body .bank-marketplace.market-detail-view .market-review-back::before {
  content: none;
}

body .bank-marketplace.market-detail-view .market-submit {
  border-radius: 999px;
  min-height: 42px;
}

body .bank-marketplace.market-detail-view.is-reviewing-order .market-ticket-top,
body .bank-marketplace.market-detail-view.is-reviewing-order .market-ticket-body > .market-ticket-market,
body .bank-marketplace.market-detail-view.is-reviewing-order .market-ticket-body > .market-ticket-head,
body .bank-marketplace.market-detail-view.is-reviewing-order .market-ticket-body > .market-contract-toggle {
  display: none;
}

body .bank-marketplace.market-detail-view.is-reviewing-order .market-ticket-body {
  padding: 0;
}

body .bank-marketplace.market-detail-view.is-reviewing-order .market-review-ticket {
  padding: 14px;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket {
  border-color: rgba(7, 19, 63, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 248, 253, 0.52)),
    rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 18px rgba(7, 19, 63, 0.08);
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-top {
  grid-template-columns: minmax(0, 1fr) max-content;
  min-height: 46px;
  padding: 10px 14px;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-top .market-side-toggle {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-top .market-side-toggle button {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-body {
  gap: 10px;
  padding: 12px 14px 14px;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-market {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-head {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-avatar {
  width: 34px;
  height: 40px;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-head h2 {
  font-size: 1.06rem;
  line-height: 1.08;
}

body .bank-marketplace.market-detail-view .market-side .market-contract-toggle {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

body .bank-marketplace.market-detail-view .market-side .market-contract-toggle button {
  min-height: 34px;
  border-width: 2px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: none;
  font-size: 0.8rem;
  padding: 5px 8px;
}

body .bank-marketplace.market-detail-view .market-side .market-contract-toggle button.is-active {
  background: rgba(255, 240, 191, 0.62);
}

body .bank-marketplace.market-detail-view .market-side .market-money-input,
body .bank-marketplace.market-detail-view .market-side .market-ticket-input-row > input {
  min-height: 36px;
  border-color: rgba(7, 19, 63, 0.16);
  background: rgba(255, 255, 255, 0.66);
  font-size: 0.86rem;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-summary {
  gap: 7px;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-summary dt,
body .bank-marketplace.market-detail-view .market-side .market-ticket-summary dd {
  font-size: 0.82rem;
}

body .bank-marketplace.market-detail-view .market-side .market-ticket-summary div:last-child dd {
  font-size: 1.08rem;
}

body .bank-marketplace.market-detail-view .market-side .market-submit {
  min-height: 38px;
  border-width: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 2px 0 rgba(7, 19, 63, 0.16);
  font-size: 0.9rem;
}

body .bank-marketplace.market-detail-view .market-side .market-positions {
  padding: 12px 14px;
}

body .bank-marketplace.market-detail-view .market-side .market-review-ticket {
  gap: 12px;
  padding: 14px;
}

body .bank-marketplace.market-detail-view .market-side .market-review-title {
  border-bottom: 2px solid rgba(7, 19, 63, 0.1);
  margin: -14px -14px 0;
  padding: 12px 14px;
}

body .bank-marketplace.market-detail-view .market-review-back img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(0 1px 2px rgba(7, 19, 63, 0.18));
}

body .bank-market-browser {
  grid-template-columns: minmax(0, 520px);
  align-items: start;
}

body .bank-market-card {
  gap: 12px;
  min-height: 0;
  border-width: 2px;
  padding: 14px;
}

body .bank-market-card-head {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
}

body .bank-market-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 6px;
}

body .bank-market-card-icon img {
  width: 30px;
  height: 30px;
}

body .bank-market-card-head p {
  margin-bottom: 3px;
  font-size: 0.68rem;
}

body .bank-market-card-head h2 {
  font-size: 1.18rem;
  line-height: 1.05;
}

body .bank-market-card-table {
  gap: 5px;
}

body .bank-market-card-row {
  grid-template-columns: minmax(0, 1fr) 58px 72px 72px;
  gap: 6px;
  font-size: 0.82rem;
}

body .bank-market-card-row.is-heading {
  font-size: 0.68rem;
}

body .bank-market-card-row b {
  min-height: 30px;
  border-width: 2px;
  font-size: 0.76rem;
  padding-inline: 7px;
}

body .bank-market-card-foot {
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  margin-top: 4px;
  padding-top: 8px;
  font-size: 0.78rem;
}

/* Royal Meridian market: light market tones */
body #bank-panel-market {
  --market-bg: #fff8fd;
  --market-bg-deep: #eef3ff;
  --market-surface: #fffafd;
  --market-surface-raised: #ffffff;
  --market-surface-soft: #fff3fa;
  --market-line: rgba(7, 19, 63, 0.12);
  --market-line-strong: rgba(7, 19, 63, 0.2);
  --market-ink: #07133f;
  --market-muted: #4965a8;
  --market-pink: var(--pink);
  --market-pink-strong: #e84f98;
  --market-yes: #11a892;
  --market-no: #f04462;
  background:
    linear-gradient(145deg, rgba(255, 248, 253, 0.96), rgba(238, 243, 255, 0.9)),
    var(--market-bg);
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 8px;
  padding: 16px;
}

body #bank-panel-market .bank-market-space {
  color: var(--market-ink);
}

body #bank-panel-market .bank-market-browser {
  grid-template-columns: minmax(0, 500px);
}

body #bank-panel-market .bank-market-card,
body #bank-panel-market .market-title-block,
body #bank-panel-market .market-chart-panel,
body #bank-panel-market .market-ticket,
body #bank-panel-market .market-positions,
body #bank-panel-market .market-rules {
  border-color: var(--market-line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 253, 0.72)),
    var(--market-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 10px 22px rgba(7, 19, 63, 0.08);
}

body #bank-panel-market .bank-market-card:hover,
body #bank-panel-market .bank-market-card:focus-visible {
  border-color: rgba(240, 92, 157, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 12px 26px rgba(7, 19, 63, 0.12);
}

body #bank-panel-market .market-title-block h1,
body #bank-panel-market .market-board-head h2,
body #bank-panel-market .market-ticket-head h2,
body #bank-panel-market .market-panel-heading h2,
body #bank-panel-market .bank-market-card-head h2,
body #bank-panel-market .bank-market-card-row,
body #bank-panel-market .market-contract-person,
body #bank-panel-market .market-contract-chance,
body #bank-panel-market .market-price-button,
body #bank-panel-market .market-ticket-summary dd,
body #bank-panel-market .market-ticket-market,
body #bank-panel-market .market-review-title,
body #bank-panel-market .market-position strong,
body #bank-panel-market .market-position b,
body #bank-panel-market .market-back-link,
body #bank-panel-market .market-ticket-top > strong {
  color: var(--market-ink);
}

body #bank-panel-market .market-title-block p,
body #bank-panel-market .market-board-head p,
body #bank-panel-market .market-ticket-head p,
body #bank-panel-market .market-panel-heading p,
body #bank-panel-market .bank-market-card-head p,
body #bank-panel-market .bank-market-card-row.is-heading,
body #bank-panel-market .bank-market-card-foot,
body #bank-panel-market .market-chart-head,
body #bank-panel-market .market-chart-foot,
body #bank-panel-market .market-chart-axis,
body #bank-panel-market .market-contract-row.is-heading,
body #bank-panel-market .market-ticket-input-row > span:first-child,
body #bank-panel-market .market-ticket-summary dt,
body #bank-panel-market .market-limit-line,
body #bank-panel-market .market-account-line,
body #bank-panel-market .market-empty-state,
body #bank-panel-market .market-rules p,
body #bank-panel-market .market-position span span {
  color: var(--market-muted);
}

body #bank-panel-market .market-title-block p,
body #bank-panel-market .market-board-head p,
body #bank-panel-market .market-panel-heading p {
  color: var(--market-pink);
}

body #bank-panel-market .market-badge-row span {
  border-color: var(--market-line);
  background: rgba(255, 255, 255, 0.7);
  color: var(--market-ink);
}

body #bank-panel-market .bank-market-card-icon,
body #bank-panel-market .market-outcome-avatar,
body #bank-panel-market .market-ticket-avatar,
body #bank-panel-market .market-position-avatar {
  border-color: var(--market-line);
  background:
    linear-gradient(180deg, rgba(240, 92, 157, 0.12), rgba(255, 255, 255, 0.72)),
    var(--market-surface-raised);
}

body #bank-panel-market .market-chart-canvas line {
  stroke: rgba(7, 19, 63, 0.14);
}

body #bank-panel-market .market-chart-dot {
  stroke: rgba(255, 255, 255, 0.9);
}

body #bank-panel-market .is-line-1 {
  color: var(--market-yes);
}

body #bank-panel-market .is-line-2 {
  color: #466bd8;
}

body #bank-panel-market .is-line-3 {
  color: #e18b2e;
}

body #bank-panel-market .market-chart-canvas {
  cursor: crosshair;
}

body #bank-panel-market .market-chart-hover-line {
  opacity: 0;
  pointer-events: none;
  stroke: rgba(7, 19, 63, 0.28);
  stroke-dasharray: 6 8;
  stroke-width: 2;
  transition: opacity 0.12s ease;
}

body #bank-panel-market .market-chart-hover-points {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

body #bank-panel-market .market-chart-panel.is-hovering .market-chart-hover-line,
body #bank-panel-market .market-chart-panel.is-hovering .market-chart-hover-points {
  opacity: 1;
}

body #bank-panel-market .market-chart-hover-dot {
  fill: currentColor;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 5;
}

body #bank-panel-market .market-chart-tooltip {
  position: absolute;
  inset: 0 52px 0 0;
  z-index: 5;
  display: block;
  color: var(--market-ink);
  font-size: 0.76rem;
  font-weight: 900;
  pointer-events: none;
}

body #bank-panel-market .market-chart-tooltip[hidden] {
  display: none;
}

body #bank-panel-market .market-chart-tooltip > strong {
  position: absolute;
  top: 0;
  color: var(--market-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translate(-50%, -118%);
  white-space: nowrap;
}

body #bank-panel-market .market-chart-tooltip span {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 210px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 2px 10px rgba(7, 19, 63, 0.08);
  line-height: 1;
  padding: 4px 6px;
  transform: translate(0, -50%);
  white-space: nowrap;
}

body #bank-panel-market .market-chart-tooltip span.is-left {
  transform: translate(-100%, -50%);
}

body #bank-panel-market .market-chart-tooltip i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}

body #bank-panel-market .market-chart-tooltip b {
  overflow: hidden;
  color: currentColor;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body #bank-panel-market .market-chart-tooltip em {
  color: currentColor;
  font-style: normal;
}

body #bank-panel-market .market-contract-head,
body #bank-panel-market .market-contract-row,
body #bank-panel-market .market-chart-foot,
body #bank-panel-market .bank-market-card-foot,
body #bank-panel-market .market-review-title {
  border-color: var(--market-line);
}

body #bank-panel-market .market-contract-row.is-active {
  background: rgba(240, 92, 157, 0.07);
}

body #bank-panel-market .market-contract-row.is-held {
  background: rgba(240, 92, 157, 0.06);
}

body #bank-panel-market .market-contract-row .market-contract-chance {
  font-size: 1.08rem;
  line-height: 1;
}

body #bank-panel-market .market-contract-person {
  grid-template-columns: 48px minmax(0, 1fr);
}

body #bank-panel-market .market-contract-row .market-outcome-avatar {
  width: 48px;
  height: 48px;
  border-radius: 8px;
}

body #bank-panel-market .market-side .market-ticket-head,
body #bank-panel-market .market-review-ticket .market-ticket-head {
  grid-template-columns: 54px minmax(0, 1fr);
}

body #bank-panel-market .market-side .market-ticket-avatar,
body #bank-panel-market .market-review-ticket .market-ticket-avatar {
  width: 54px;
  height: 54px;
  border-radius: 8px;
}

body #bank-panel-market .market-position-avatar {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

body #bank-panel-market .bank-market-card-row b,
body #bank-panel-market .market-price-button,
body #bank-panel-market .market-contract-toggle button,
body #bank-panel-market .market-search input,
body #bank-panel-market .market-ticket-input-row > input,
body #bank-panel-market .market-money-input,
body #bank-panel-market .market-expiration-row,
body #bank-panel-market .market-resting-row,
body #bank-panel-market .market-position {
  border-color: var(--market-line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--market-ink);
  box-shadow: none;
}

body #bank-panel-market .market-search input:focus,
body #bank-panel-market .market-money-input:focus-within,
body #bank-panel-market .market-ticket-input-row > input:focus {
  border-color: rgba(240, 92, 157, 0.72);
  box-shadow: 0 0 0 3px rgba(240, 92, 157, 0.16);
}

body #bank-panel-market .market-money-input > span {
  color: var(--market-pink);
}

body #bank-panel-market .bank-market-card-row .is-yes,
body #bank-panel-market .market-price-button.is-yes,
body #bank-panel-market .market-contract-toggle button[data-market-contract-side="yes"] strong,
body #bank-panel-market [data-market-selected-contract-label],
body #bank-panel-market [data-market-review-contract-label] {
  color: var(--market-yes);
}

body #bank-panel-market .bank-market-card-row .is-no,
body #bank-panel-market .market-price-button.is-no,
body #bank-panel-market .market-contract-toggle button[data-market-contract-side="no"] strong,
body #bank-panel-market [data-market-selected-contract-label].is-no,
body #bank-panel-market [data-market-review-contract-label].is-no {
  color: var(--market-no);
}

body #bank-panel-market .market-price-button.is-selected,
body #bank-panel-market .market-contract-toggle button.is-active {
  border-color: rgba(7, 19, 63, 0.18);
  background: rgba(255, 255, 255, 0.78);
}

body #bank-panel-market .market-price-button.is-yes.is-selected,
body #bank-panel-market .market-contract-toggle button[data-market-contract-side="yes"].is-active {
  border-color: rgba(17, 168, 146, 0.46);
  background:
    linear-gradient(180deg, rgba(17, 168, 146, 0.18), rgba(17, 168, 146, 0.08)),
    rgba(255, 255, 255, 0.78);
}

body #bank-panel-market .market-price-button.is-no.is-selected,
body #bank-panel-market .market-contract-toggle button[data-market-contract-side="no"].is-active {
  border-color: rgba(240, 68, 98, 0.46);
  background:
    linear-gradient(180deg, rgba(240, 68, 98, 0.16), rgba(240, 68, 98, 0.07)),
    rgba(255, 255, 255, 0.78);
}

body #bank-panel-market .market-filter,
body #bank-panel-market .market-side-toggle button,
body #bank-panel-market .market-back-link,
body #bank-panel-market .market-review-back,
body #bank-panel-market .market-expiration-chips button {
  border-color: var(--market-line);
  background: rgba(255, 255, 255, 0.64);
  color: var(--market-ink);
  box-shadow: none;
}

body #bank-panel-market .market-filter.is-active,
body #bank-panel-market .market-expiration-chips button.is-active,
body #bank-panel-market .market-submit {
  border-color: rgba(240, 92, 157, 0.66);
  background: linear-gradient(180deg, #ff77b5, var(--market-pink-strong));
  color: #fff8fc;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.18);
}

body #bank-panel-market .market-side-toggle button.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--market-pink);
  text-shadow: none;
}

body #bank-panel-market .market-submit:disabled {
  background: rgba(217, 227, 255, 0.68);
  border-color: rgba(7, 19, 63, 0.12);
  color: rgba(7, 19, 63, 0.42);
  text-shadow: none;
}

body #bank-panel-market .market-side .market-ticket {
  border-color: var(--market-line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 244, 251, 0.84)),
    var(--market-surface-soft);
}

body #bank-panel-market .market-side .market-contract-toggle button.is-active {
  background: rgba(255, 255, 255, 0.78);
}

body #bank-panel-market .market-side .market-contract-toggle button[data-market-contract-side="yes"].is-active {
  background:
    linear-gradient(180deg, rgba(17, 168, 146, 0.18), rgba(17, 168, 146, 0.08)),
    rgba(255, 255, 255, 0.78);
}

body #bank-panel-market .market-side .market-contract-toggle button[data-market-contract-side="no"].is-active {
  background:
    linear-gradient(180deg, rgba(240, 68, 98, 0.16), rgba(240, 68, 98, 0.07)),
    rgba(255, 255, 255, 0.78);
}

body #bank-panel-market .market-ticket-message.is-success {
  color: var(--market-pink);
}

body #bank-panel-market .market-ticket-message.is-warning {
  color: #a86200;
}

body #bank-panel-market .market-ticket-message.is-error {
  color: #b72562;
}

@media (max-width: 760px) {
  body #bank-panel-market {
    padding: 10px;
  }
}

body:not(.show-page) > .home-shell.home-shell-welcome,
body:not(.show-page) > .home-retro-footer,
.home-hero.home-welcome {
  --home-pink: #e36ea3;
  --home-yellow: #f8d157;
  --home-teal: #8adbd0;
  --home-blue: #d9e1f8;
  --home-white: #ffffff;
  --home-ink: #07133f;
}

body:not(.show-page) > .home-shell.home-shell-welcome.is-home-panel-active {
  margin-bottom: 14px;
  background:
    linear-gradient(rgba(7, 19, 63, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 19, 63, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, rgba(217, 225, 248, 0.88), rgba(255, 255, 255, 0.78) 58%, rgba(138, 219, 208, 0.72));
  background-size: 24px 24px, 24px 24px, auto;
  background-origin: content-box, content-box, padding-box;
  background-clip: content-box, content-box, padding-box;
}

.home-hero.home-welcome {
  --home-welcome-width: 640px;
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  align-items: start;
  justify-content: start;
  gap: 14px;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

.home-left-zone {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

.home-welcome-row {
  display: grid;
  grid-template-columns: minmax(0, var(--home-welcome-width)) minmax(118px, 1fr);
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

.home-announcement-row {
  display: grid;
  grid-template-columns: minmax(320px, clamp(360px, 44%, 500px)) minmax(300px, 1fr);
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

.home-side-stack {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.home-welcome-copy,
.home-guest-discovery-panel,
.home-welcome-avatar-card,
.home-bank-account-panel,
.home-local-panel,
.home-market-volume-panel,
.home-announcement-console,
.home-magnate-cast-panel,
.home-notepad-panel {
  min-width: 0;
  border: 3px solid var(--home-ink);
  border-radius: 0;
  box-shadow: 5px 5px 0 rgba(7, 19, 63, 0.2);
}

.home-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  border-bottom: 3px solid var(--home-ink);
  background: var(--home-pink);
  color: var(--home-white);
  font-family: "Easy Pixel", "Courier New", monospace;
  font-size: 0.98rem;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: none;
  font-smooth: never;
  line-height: 1;
  padding: 6px 9px;
}

.home-window-bar span,
.home-window-bar [id] {
  font-family: "Easy Pixel", "Courier New", monospace;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

.home-welcome-copy {
  display: grid;
  align-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
    linear-gradient(90deg, var(--home-white), var(--home-blue));
  padding: 28px;
}

.home-welcome-copy .home-eyebrow,
.home-welcome-shortcuts > p {
  width: fit-content;
  border: 3px solid var(--home-ink);
  background: var(--home-teal);
  color: var(--home-ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  padding: 7px 9px;
}

.home-welcome-shortcuts > p {
  background: var(--home-yellow);
  font-size: 0.95rem;
}

.home-welcome-copy h1 {
  max-width: 900px;
  margin: 16px 0 0;
  color: var(--home-pink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 3.6rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.95;
  overflow-wrap: anywhere;
  text-shadow:
    3px 3px 0 var(--home-yellow),
    6px 6px 0 rgba(7, 19, 63, 0.92);
}

.home-welcome-copy h2 {
  max-width: 900px;
  margin: 14px 0 0;
  color: var(--home-pink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 2.3rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  overflow-wrap: anywhere;
  text-shadow:
    2px 2px 0 var(--home-yellow),
    4px 4px 0 rgba(7, 19, 63, 0.92);
}

.home-guest-discovery-panel {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background:
    linear-gradient(rgba(7, 19, 63, 0.045) 2px, transparent 2px),
    linear-gradient(90deg, rgba(7, 19, 63, 0.045) 2px, transparent 2px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(230, 248, 234, 0.88));
  background-size: 18px 18px, 18px 18px, auto;
}

.home-guest-discovery-body {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 246, 251, 0.92)),
    var(--home-white);
  padding: 18px 22px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 216, 61, 0.18);
}

.home-guest-primary-panel .home-guest-discovery-body {
  align-content: start;
  gap: 13px;
  padding: 26px 28px;
}

.home-guest-discovery-kicker {
  width: fit-content;
  max-width: 100%;
  border: 2px solid var(--home-ink);
  background: var(--home-pink);
  color: var(--home-white);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.home-guest-primary-panel .home-guest-discovery-kicker {
  background: var(--home-teal);
  color: var(--home-ink);
}

.home-guest-discovery-body h1 {
  margin: 0;
  color: var(--home-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.95rem, 3.1vw, 3.25rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.home-guest-discovery-body h2 {
  margin: 0;
  color: var(--home-ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(0.88rem, 1vw, 1.08rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.home-guest-discovery-body p {
  margin: 0;
  color: rgba(7, 19, 63, 0.82);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  font-weight: 800;
  line-height: 1.35;
}

.home-guest-primary-panel .home-guest-discovery-body p {
  color: rgba(7, 19, 63, 0.86);
  font-size: clamp(0.92rem, 1.04vw, 1.08rem);
  line-height: 1.38;
}

.home-guest-discovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.home-guest-discovery-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 3px solid var(--home-ink);
  background: var(--home-yellow);
  color: var(--home-ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  padding: 5px 8px;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
}

.home-guest-discovery-actions a:hover,
.home-guest-discovery-actions a:focus-visible {
  background: var(--home-teal);
  outline: 0;
  text-decoration: none;
  transform: translate(-1px, -1px);
}

.home-welcome-copy > p:not(.home-eyebrow) {
  max-width: 58ch;
  margin: 20px 0 0;
  color: rgba(7, 19, 63, 0.86);
  font-size: 1.04rem;
  font-weight: 850;
  line-height: 1.42;
}

.home-welcome-shortcuts {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 30px;
}

.home-welcome-shortcuts > div {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px 24px;
  justify-content: center;
}

.home-welcome-shortcut {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: 82px;
  min-width: 82px;
  min-height: 84px;
  padding: 4px 2px 2px;
  color: var(--home-ink);
  text-align: center;
  text-decoration: none;
  transform: translateY(0);
  transition:
    transform 140ms ease;
}

.home-welcome-shortcut img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter:
    drop-shadow(3px 3px 0 var(--home-teal))
    drop-shadow(5px 5px 0 rgba(7, 19, 63, 0.18));
  transform: translate(0, 0) rotate(0deg);
  transform-origin: center bottom;
  transition:
    filter 120ms ease,
    transform 140ms ease;
}

.home-welcome-shortcut span,
.home-desktop-game-label,
.home-desktop-game-number,
.home-announcement-kicker,
.home-announcement-message h2,
.home-announcement-empty,
.home-local-readout dd,
.home-bank-account-money,
.home-bank-account-link,
.home-market-volume-rank,
.home-market-volume-copy strong,
.home-market-volume-quote,
.home-notepad-panel .home-window-bar,
.home-footer-primary-links,
.home-footer-links h2,
.home-footer-games h2,
.home-footer-disclaimer h2,
.home-footer-game-link {
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

.home-welcome-shortcut span {
  max-width: 100%;
  color: var(--home-ink);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.home-welcome-shortcut:hover,
.home-welcome-shortcut:focus-visible {
  outline: 0;
  text-decoration: none;
  transform: translate(-2px, -3px);
}

.home-welcome-shortcut:hover img,
.home-welcome-shortcut:focus-visible img {
  filter:
    drop-shadow(3px 3px 0 var(--home-pink))
    drop-shadow(4px 4px 0 var(--home-yellow))
    drop-shadow(5px 5px 0 var(--home-teal))
    drop-shadow(7px 7px 0 rgba(7, 19, 63, 0.18));
  transform: translate(-4px, -4px);
}

.home-desktop-icons {
  position: relative;
  min-width: 0;
  min-height: 100%;
  align-self: stretch;
}

.home-desktop-game-icon {
  --desktop-offset-x: -50%;
  --desktop-offset-y: -50%;
  --desktop-lift: 0px;
  --desktop-scale: 1;
  --desktop-hover-tilt: 0deg;
  position: absolute;
  left: var(--desktop-x, 50%);
  top: var(--desktop-y, 50%);
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 104px;
  color: var(--home-ink);
  text-align: center;
  text-decoration: none;
  transform:
    translate(var(--desktop-offset-x), calc(var(--desktop-offset-y) + var(--desktop-lift)))
    rotate(calc(var(--desktop-rotate, 0deg) + var(--desktop-hover-tilt)))
    scale(var(--desktop-scale));
  transform-origin: center;
  transition:
    transform 160ms cubic-bezier(.2, .88, .3, 1.18);
}

.home-desktop-game-icon:hover,
.home-desktop-game-icon:focus-visible {
  --desktop-lift: -4px;
  --desktop-scale: 1.025;
  --desktop-hover-tilt: -1deg;
  outline: 0;
  text-decoration: none;
}

.home-desktop-game-art {
  display: block;
  width: auto;
  max-width: 86px;
  max-height: 66px;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(5px 5px 0 var(--home-teal))
    drop-shadow(7px 7px 0 rgba(7, 19, 63, 0.14));
  transform: translate(0, 0) rotate(0deg) scale(1);
  transition:
    filter 140ms ease,
    transform 160ms cubic-bezier(.2, .88, .3, 1.18);
}

.home-desktop-game-icon:hover .home-desktop-game-art,
.home-desktop-game-icon:focus-visible .home-desktop-game-art {
  filter:
    saturate(1.06)
    drop-shadow(6px 6px 0 var(--home-teal))
    drop-shadow(8px 8px 0 rgba(227, 110, 163, 0.3))
    drop-shadow(10px 10px 0 rgba(7, 19, 63, 0.12));
  transform: translate(-2px, -3px) rotate(-2deg);
}

.home-desktop-game-icon:focus-visible .home-desktop-game-art {
  outline: 3px solid var(--home-pink);
  outline-offset: 5px;
}

.home-desktop-game-text {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.home-desktop-game-label {
  color: var(--home-ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.05;
  text-decoration: none;
  overflow-wrap: anywhere;
  text-shadow:
    1px 1px 0 var(--home-white),
    2px 2px 0 rgba(255, 255, 255, 0.82);
  transition:
    transform 140ms ease,
    text-shadow 140ms ease;
}

.home-desktop-game-number {
  color: rgba(7, 19, 63, 0.78);
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  overflow-wrap: anywhere;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.86);
}

.home-desktop-game-icon:hover .home-desktop-game-label,
.home-desktop-game-icon:focus-visible .home-desktop-game-label {
  text-decoration: none;
  text-shadow:
    1px 1px 0 var(--home-white),
    2px 2px 0 var(--home-pink),
    3px 3px 0 rgba(138, 219, 208, 0.76);
  transform: translateY(1px);
}

.home-announcement-console {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-self: stretch;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9)),
    var(--home-blue);
}

.home-announcement-console .home-window-bar {
  background: var(--home-yellow);
  color: var(--home-ink);
}

.home-announcement-body {
  display: grid;
  align-content: center;
  min-height: 106px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 248, 221, 0.72)),
    var(--home-white);
  padding: 16px 18px;
}

.home-announcement-message {
  display: grid;
  gap: 8px;
}

.home-announcement-message[hidden],
.home-announcement-empty[hidden],
.home-announcement-actions[hidden] {
  display: none;
}

.home-announcement-kicker {
  margin: 0;
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.home-announcement-message h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: 1.16rem;
  font-weight: 900;
  line-height: 1.05;
}

.home-announcement-message p:not(.home-announcement-kicker),
.home-announcement-empty {
  margin: 0;
  color: rgba(7, 19, 63, 0.82);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.34;
}

.home-announcement-actions {
  display: flex;
  justify-content: center;
  gap: 22px;
  border-top: 3px solid var(--home-ink);
  background: rgba(255, 255, 255, 0.82);
  padding: 10px;
}

.home-announcement-actions button {
  min-width: 100px;
  min-height: 31px;
  border: 3px solid rgba(7, 19, 63, 0.48);
  border-radius: 0;
  background: linear-gradient(180deg, #ffffff, #fff5cf);
  color: var(--home-ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.home-welcome-avatar-card,
.home-bank-account-panel,
.home-local-panel,
.home-market-volume-panel,
.home-notepad-panel {
  display: grid;
  background: var(--home-white);
}

.home-welcome-avatar-card,
.home-bank-account-panel,
.home-market-volume-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.home-avatar-screen {
  display: grid;
  place-items: center;
  min-height: 0;
  background:
    linear-gradient(rgba(7, 19, 63, 0.04) 2px, transparent 2px),
    linear-gradient(90deg, rgba(7, 19, 63, 0.04) 2px, transparent 2px),
    var(--home-white);
  background-size: 18px 18px, 18px 18px, auto;
  padding: 14px;
}

.home-avatar-screen img {
  display: block;
  width: auto;
  max-width: min(100%, 220px);
  height: auto;
  max-height: 286px;
  border: 3px solid var(--home-ink);
  background: var(--home-white);
  object-fit: contain;
  object-position: center bottom;
  box-shadow: 4px 4px 0 rgba(7, 19, 63, 0.2);
}

.home-bank-account-panel .home-window-bar,
.home-local-panel .home-window-bar {
  background: var(--home-teal);
  color: var(--home-ink);
}

.home-bank-account-body {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "chip copy"
    "link link";
  align-items: center;
  gap: 12px;
  background:
    linear-gradient(rgba(7, 19, 63, 0.05) 2px, transparent 2px),
    linear-gradient(90deg, rgba(7, 19, 63, 0.05) 2px, transparent 2px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 221, 0.84)),
    var(--home-yellow);
  background-size: 18px 18px, 18px 18px, auto, auto;
  padding: 14px;
}

.home-bank-account-chip {
  display: grid;
  grid-area: chip;
  place-items: center;
  width: 50px;
  aspect-ratio: 1;
  border: 3px solid var(--home-ink);
  background: var(--home-yellow);
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.18);
}

.home-bank-account-chip img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.home-bank-account-copy {
  display: grid;
  grid-area: copy;
  gap: 6px;
  min-width: 0;
}

.home-bank-account-copy > span,
.home-bank-account-copy p,
.home-local-readout dt {
  margin: 0;
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.home-bank-account-money {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.07em;
  min-width: 0;
  color: var(--home-ink);
  font-size: 1.72rem;
  font-weight: 900;
  line-height: 0.94;
  overflow-wrap: anywhere;
}

.home-bank-account-link {
  display: inline-flex;
  grid-area: link;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 34px;
  border: 3px solid var(--home-ink);
  background: var(--home-pink);
  color: var(--home-white);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.18);
  padding: 7px 10px;
}

.home-local-panel {
  grid-template-rows: auto 1fr auto;
  background: var(--home-yellow);
}

.home-local-readout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-bottom: 3px solid var(--home-ink);
}

.home-local-readout div {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 94px;
  border-right: 3px solid var(--home-ink);
  background: rgba(255, 255, 255, 0.72);
  padding: 12px 10px;
}

.home-local-readout div:last-child {
  border-right: 0;
}

.home-local-readout dd {
  margin: 7px 0 0;
  color: var(--home-ink);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.home-local-note {
  margin: 0;
  color: var(--home-ink);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.25;
  padding: 10px;
}

.home-market-volume-panel .home-window-bar {
  background: var(--home-yellow);
  color: var(--home-ink);
}

.home-market-volume-body {
  min-width: 0;
  background:
    linear-gradient(rgba(7, 19, 63, 0.04) 2px, transparent 2px),
    linear-gradient(90deg, rgba(7, 19, 63, 0.04) 2px, transparent 2px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(217, 225, 248, 0.68)),
    var(--home-white);
  background-size: 18px 18px, 18px 18px, auto, auto;
  padding: 10px;
}

.home-market-volume-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-market-volume-link {
  display: grid;
  grid-template-columns: 30px 42px minmax(0, 1fr) minmax(76px, auto);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 58px;
  border: 3px solid var(--home-ink);
  background: rgba(255, 255, 255, 0.82);
  color: var(--home-ink);
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
  padding: 7px 8px;
}

.home-market-volume-rank {
  color: var(--home-pink);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.home-market-volume-icon {
  display: grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid var(--home-ink);
  background: var(--home-teal);
}

.home-market-volume-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.home-market-volume-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-market-volume-copy strong {
  min-width: 0;
  color: var(--home-ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.home-market-volume-copy span {
  min-width: 0;
  color: rgba(7, 19, 63, 0.68);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.home-market-volume-quote {
  display: grid;
  justify-items: end;
  gap: 4px;
  color: var(--home-ink);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.home-market-volume-quote span {
  color: rgba(7, 19, 63, 0.72);
}

.home-market-volume-quote b {
  color: var(--home-pink);
  font-weight: 900;
}

.home-market-volume-empty {
  margin: 0;
  color: var(--home-ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.2;
  padding: 10px;
}

.home-magnate-cast-panel {
  display: grid;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: var(--home-white);
}

.home-magnate-cast-panel .home-window-bar {
  background: var(--home-pink);
  color: var(--home-white);
}

.home-magnate-cast-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 18px 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 245, 248, 0.42) 42%, rgba(255, 255, 255, 0.62)),
    url("game-assets/magnate/background.png") center top / cover no-repeat,
    #fff8fa;
  padding: 16px 18px 14px;
}

.home-magnate-mini-grid {
  display: grid;
  grid-template-columns: repeat(8, 76px);
  justify-content: start;
  gap: 16px 18px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  padding-bottom: 6px;
}

.home-magnate-mini-player {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
}

.home-magnate-mini-photo {
  --home-magnate-frame-size: 22px;
  position: relative;
  display: block;
  width: 68px;
  aspect-ratio: 1;
  overflow: visible;
  border: 3px solid var(--home-ink);
  background: var(--home-white);
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.18);
}

.home-magnate-mini-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.home-magnate-mini-photo.is-evicted img {
  filter: grayscale(100%) contrast(1.03);
}

.home-magnate-mini-frame {
  position: absolute;
  z-index: 2;
  width: var(--home-magnate-frame-size);
  aspect-ratio: 1;
  background: url("game-assets/magnate/SideFrame.png") center / contain no-repeat;
  pointer-events: none;
}

.home-magnate-mini-frame.is-top-right {
  top: -7%;
  right: -7%;
}

.home-magnate-mini-frame.is-bottom-right {
  right: -7%;
  bottom: -7%;
  transform: rotate(90deg);
}

.home-magnate-mini-frame.is-bottom-left {
  bottom: -7%;
  left: -7%;
  transform: rotate(180deg);
}

.home-magnate-mini-frame.is-top-left {
  top: -7%;
  left: -7%;
  transform: rotate(270deg);
}

.home-magnate-mini-info {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}

.home-magnate-mini-name,
.home-magnate-mini-status,
.home-magnate-action {
  color: var(--home-ink);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
}

.home-magnate-mini-name,
.home-magnate-mini-status {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-magnate-mini-status.is-nominated {
  color: var(--home-pink);
}

.home-magnate-actions {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  min-width: 0;
}

.home-magnate-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 156px);
  min-height: 38px;
  border: 3px solid var(--home-ink);
  background: var(--home-yellow);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  box-shadow: 4px 4px 0 rgba(7, 19, 63, 0.18);
  padding: 8px 10px;
}

.home-notepad-panel {
  grid-template-rows: auto minmax(128px, 1fr);
  justify-self: stretch;
  width: 100%;
}

.home-notepad-panel .home-window-bar {
  background: #f08ea1;
  color: var(--home-ink);
}

.home-notepad-field {
  width: 100%;
  min-width: 0;
  min-height: 128px;
  resize: vertical;
  border: 0;
  border-radius: 0;
  background:
    repeating-linear-gradient(180deg, rgba(248, 209, 87, 0.18) 0 1px, transparent 1px 26px),
    #fff8dc;
  color: var(--home-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  outline: 0;
  padding: 14px;
}

.home-retro-footer {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 28px));
  min-width: 0;
  margin: 0 auto 42px;
  overflow: hidden;
  border: 2px solid var(--home-ink);
  border-radius: 18px;
  background: var(--home-white);
  color: var(--home-ink);
  box-shadow: 4px 4px 0 rgba(7, 19, 63, 0.16);
}

.home-retro-footer:not(.is-active) {
  display: none;
}

.home-tab-site-footer:not(.is-active) {
  display: none;
}

.home-footer-primary-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  color: var(--home-ink);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
}

.home-footer-primary-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 24px;
  border: 2px solid rgba(7, 19, 63, 0.88);
  border-radius: 999px;
  background: rgba(138, 219, 208, 0.58);
  color: var(--home-ink);
  box-shadow: 2px 2px 0 rgba(7, 19, 63, 0.1);
  text-decoration: none;
  padding: 5px 8px;
}

.home-footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(320px, 0.9fr) minmax(0, 1.26fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  background:
    linear-gradient(rgba(7, 19, 63, 0.055) 2px, transparent 2px),
    linear-gradient(90deg, rgba(7, 19, 63, 0.055) 2px, transparent 2px),
    linear-gradient(135deg, rgba(217, 225, 248, 0.76), rgba(255, 255, 255, 0.88) 48%, rgba(138, 219, 208, 0.42)),
    var(--home-white);
  background-size: 20px 20px, 20px 20px, auto, auto;
  padding: 18px 22px 20px;
}

.home-footer-brand,
.home-footer-directory,
.home-footer-links,
.home-footer-games,
.home-footer-disclaimer {
  min-width: 0;
  max-width: 100%;
}

.home-footer-brand {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
}

.home-footer-brand img {
  display: block;
  width: 110px;
  max-width: 100%;
  height: auto;
}

.home-footer-directory {
  display: grid;
  gap: 14px;
}

.home-footer-brand p,
.home-footer-disclaimer p {
  margin: 0;
  color: rgba(7, 19, 63, 0.82);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.32;
}

.home-footer-brand p {
  max-width: 42ch;
  color: rgba(7, 19, 63, 0.76);
}

.home-footer-disclaimer p {
  width: 100%;
  max-width: 82ch;
  overflow-wrap: anywhere;
  word-break: normal;
}

.home-footer-games h2,
.home-footer-links h2,
.home-footer-disclaimer h2 {
  margin: 0 0 8px;
  color: var(--home-pink);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.home-footer-games > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}

.home-footer-game-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 2px solid rgba(7, 19, 63, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--home-ink);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
  text-align: center;
  box-shadow: 2px 2px 0 rgba(7, 19, 63, 0.1);
  padding: 5px 8px;
}

.home-footer-copyright {
  margin: 0;
  border-top: 2px solid rgba(7, 19, 63, 0.88);
  background: rgba(255, 255, 255, 0.86);
  color: rgba(7, 19, 63, 0.74);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  padding: 10px 14px;
}

@media (max-width: 1020px) {
  .home-hero.home-welcome,
  .home-left-zone,
  .home-welcome-row,
  .home-announcement-row {
    grid-template-columns: 1fr;
  }

  .home-desktop-icons {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 14px 18px;
    min-height: 0;
  }

  .home-guest-discovery-panel {
    min-height: 0;
  }

  .home-desktop-game-icon {
    --desktop-offset-x: 0%;
    --desktop-offset-y: 0%;
    position: static;
  }

  .home-magnate-cast-body {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .home-magnate-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .home-footer-main {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
    align-items: start;
  }

  .home-footer-directory,
  .home-footer-disclaimer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .home-hero.home-welcome {
    justify-self: center;
    width: 100%;
    max-width: 100%;
    gap: 12px;
  }

  .home-welcome-copy,
  .home-guest-discovery-panel,
  .home-welcome-avatar-card,
  .home-bank-account-panel,
  .home-local-panel,
  .home-market-volume-panel,
  .home-announcement-console,
  .home-magnate-cast-panel,
  .home-notepad-panel {
    justify-self: start;
    width: min(100%, calc(100vw - 96px));
    max-width: calc(100vw - 96px);
    border-width: 3px;
    box-shadow: 4px 4px 0 rgba(7, 19, 63, 0.22);
  }

  body:not(.show-page) > .home-retro-footer {
    width: calc(100vw - 96px);
    max-width: calc(100vw - 96px);
    margin-right: auto;
    margin-left: 8px;
    margin-bottom: 28px;
    border-width: 2px;
    border-radius: 14px;
    box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
  }

  .home-footer-primary-links {
    gap: 6px;
    width: 100%;
    font-size: 0.62rem;
  }

  .home-footer-primary-links a {
    justify-content: center;
    min-width: 0;
    min-height: 24px;
    padding: 5px 7px;
  }

  .home-footer-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
    padding: 13px;
  }

  .home-footer-brand {
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .home-footer-brand img {
    width: 78px;
  }

  .home-footer-brand p,
  .home-footer-disclaimer p {
    font-size: 0.74rem;
  }

  .home-footer-disclaimer p {
    max-width: 100%;
    font-size: 0.68rem;
    line-height: 1.32;
    word-break: break-word;
  }

  .home-footer-games h2,
  .home-footer-links h2,
  .home-footer-disclaimer h2 {
    font-size: 0.76rem;
  }

  .home-footer-game-link {
    width: 100%;
    min-width: 0;
    min-height: 26px;
    font-size: 0.62rem;
    padding: 5px 7px;
  }

  .home-footer-games > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-welcome-copy {
    padding: 20px 16px;
  }

  .home-guest-primary-panel .home-guest-discovery-body {
    padding: 20px 16px;
  }

  .home-guest-discovery-body h1 {
    font-size: 1.72rem;
    line-height: 1.08;
  }

  .home-welcome-copy h1 {
    font-size: 1.42rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
    word-break: break-all;
    text-shadow:
      3px 3px 0 var(--home-yellow),
      6px 6px 0 rgba(7, 19, 63, 0.92);
  }

  .home-welcome-shortcuts > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
  }

  .home-bank-account-body {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .home-bank-account-chip {
    width: 48px;
  }

  .home-bank-account-money {
    font-size: 1.46rem;
  }

  .home-local-readout {
    grid-template-columns: 1fr;
  }

  .home-local-readout div {
    min-height: 82px;
    border-right: 0;
    border-bottom: 3px solid var(--home-ink);
  }

  .home-local-readout div:last-child {
    border-bottom: 0;
  }

  .home-local-readout dd {
    font-size: 1.25rem;
  }

  .home-market-volume-link {
    grid-template-columns: 28px 36px minmax(0, 1fr);
    gap: 8px;
    min-height: 64px;
    padding: 7px;
  }

  .home-market-volume-icon {
    width: 34px;
    border-width: 2px;
  }

  .home-market-volume-quote {
    grid-column: 2 / -1;
    display: flex;
    justify-content: space-between;
    justify-self: stretch;
    min-width: 0;
    white-space: normal;
  }
}