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

[hidden] {
  display: none !important;
}

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%; }

/* Buzz notifications and controls restored from the legacy Buzz implementation. */
.buzz-notification-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.buzz-notification-list[hidden], .buzz-settings-panel[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,.86), rgba(255,248,253,.58)), rgba(246,248,255,.74); color: var(--ink); padding: 12px; box-shadow: 0 6px 16px rgba(7,19,63,.07); }
.buzz-notification-item.is-unread { border-color: rgba(240,92,157,.34); background: linear-gradient(180deg, rgba(255,248,253,.94), rgba(217,227,255,.66)), rgba(255,255,255,.78); }
.buzz-notification-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(99,217,202,.16); color: var(--ink); font-size: 1.15rem; font-weight: 900; }
.buzz-notification-copy { min-width: 0; margin: 0; color: var(--ink); font-size: .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; width: 100%; margin-top: 4px; border: 0; background: transparent; color: rgba(73,101,168,.78); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; overflow: hidden; padding: 0; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.buzz-settings-panel { display: grid; gap: 12px; min-width: 0; }
.buzz-settings-card { border: 1px solid rgba(7,19,63,.1); border-radius: 8px; background: rgba(255,255,255,.78); padding: 16px; box-shadow: 0 6px 16px rgba(7,19,63,.07); }
.buzz-settings-card h2 { margin: 0 0 6px; color: var(--ink); }
.buzz-settings-card > p { margin: 0 0 14px; color: var(--muted); font-weight: 700; }
.buzz-muted-term-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; min-width: 0; }
.buzz-settings-input { box-sizing: border-box; min-height: 40px; width: 100%; border: 1px solid rgba(73,101,168,.2); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; padding: 8px 10px; }
.buzz-settings-add { min-height: 40px; border: 0; border-radius: 8px; background: #f05c9d; color: #fff; cursor: pointer; font-family: "Barlow Semi Condensed",Arial,Helvetica,sans-serif; font-size: .96rem; font-weight: 900; line-height: 1; padding: 10px 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 6px 13px rgba(240,92,157,.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; margin-top: 12px; }
.buzz-muted-term-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 1px solid rgba(73,101,168,.16); border-radius: 999px; background: rgba(255,255,255,.74); color: var(--ink); font-size: .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,.12); color: #b51c66; cursor: pointer; font: inherit; font-size: .74rem; font-weight: 900; line-height: 1; padding: 6px 8px; }
.buzz-notification-setting-row { display: grid; grid-template-columns: minmax(90px,.55fr) minmax(0,1fr); align-items: center; gap: 10px; min-width: 0; border-top: 1px solid rgba(73,101,168,.11); margin-top: 10px; padding-top: 10px; }
.buzz-notification-setting-row strong { color: var(--ink); font-size: 1rem; font-weight: 900; line-height: 1.1; }
.buzz-notification-segmented { display: inline-grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; justify-self: end; width: min(100%,330px); border: 1px solid rgba(73,101,168,.14); border-radius: 10px; background: rgba(255,255,255,.68); padding: 5px; }
.buzz-notification-segmented label { min-width: 0; }
.buzz-notification-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.buzz-notification-segmented span { display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 8px; color: var(--muted); cursor: pointer; font-size: .9rem; font-weight: 700; padding: 7px 9px; }
.buzz-notification-segmented input:checked + span { background: linear-gradient(180deg,#ff7db8,var(--pink)); color: #fff; text-shadow: 0 1px 0 rgba(7,19,63,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.56),0 2px 4px rgba(7,19,63,.08); }
.buzz-notification-segmented input:focus-visible + span { outline: 2px solid var(--aqua); outline-offset: 2px; }
@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%; } }

.bank-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  align-items: center;
  gap: 18px;
}

.bank-heading-row h1 {
  margin: 0;
}

.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));
  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 {
  color: color-mix(in srgb, var(--shop-theme-heading) 72%, var(--muted));
  font-size: 0.86rem;
  font-weight: 700;
  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;
  line-height: 0.9;
  white-space: nowrap;
}

.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: 700 1rem/1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  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%, #fff);
  color: var(--ink);
  outline: 0;
}

.bank-tab.is-active {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 62%, #fff);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--shop-theme-soft) 88%, #fff));
  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-tab[hidden],
.bank-panel[hidden] {
  display: none !important;
}

.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));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 12px 24px rgba(7, 19, 63, 0.08);
  padding: 18px;
}

.bank-transfer-note {
  margin: 0 0 14px;
  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 {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 0.8fr) minmax(150px, 0.8fr) auto;
  gap: 12px;
  align-items: end;
}

.bank-service-form label,
.bank-trade-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.bank-service-form label > span:first-child,
.bank-trade-form label > span:first-child {
  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-trade-form input {
  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: 800 1rem/1.1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  outline: none;
  padding: 9px 11px;
}

.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-prefix {
  color: var(--ink);
  font: 800 1rem/1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  padding-left: 10px;
}

.bank-money-input input {
  min-height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 4px;
}

.bank-service-form > button,
.bank-login-required a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 38%, #fff);
  border-radius: 8px;
  background: var(--shop-theme-button);
  color: #fff;
  cursor: pointer;
  font: 700 1rem/1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  padding: 9px 17px;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 4px 0 rgba(7, 19, 63, 0.14);
}

.bank-action-status {
  grid-column: 1 / -1;
  min-height: 1.2em;
  margin: 0;
  color: #157c6d;
  font-weight: 800;
}

.bank-action-status.is-error {
  color: #b52b57;
}

.bank-market-browser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
}

.bank-market-card {
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 24px rgba(7, 19, 63, 0.08);
}

.bank-market-card.is-closed {
  opacity: 0.68;
}

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

.bank-market-card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(99, 217, 202, 0.14);
}

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

.bank-market-card-head p,
.bank-market-card-head h2 {
  margin: 0;
}

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

.bank-market-card-head h2 {
  color: var(--ink);
  font: 700 1.3rem/1.05 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.bank-market-card-table {
  border-top: 1px solid rgba(7, 19, 63, 0.1);
}

.bank-market-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding: 7px 12px;
}

.bank-market-card-row.is-heading {
  min-height: 32px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bank-market-person {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.bank-market-person img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 20%;
}

.bank-market-person strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-price-button {
  min-height: 32px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.market-price-button.is-yes { background: rgba(99, 217, 202, 0.22); color: #08796b; }
.market-price-button.is-no { background: rgba(240, 92, 157, 0.18); color: #ad315f; }

.bank-market-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 10px 12px;
}

.bank-positions-panel {
  --market-line: rgba(7, 19, 63, 0.12);
}

.bank-portfolio-shell,
.bank-portfolio-overview,
.bank-position-list {
  display: grid;
  gap: 12px;
}

.bank-portfolio-head h2 {
  margin: 0;
  color: var(--ink);
  font: 700 1.62rem/1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.bank-portfolio-overview {
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  align-items: center;
}

.bank-portfolio-primary,
.bank-position-card {
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 20px rgba(7, 19, 63, 0.07);
  padding: 12px;
}

.bank-portfolio-primary {
  display: grid;
  gap: 5px;
}

.bank-portfolio-primary span,
.bank-portfolio-metrics dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.bank-portfolio-primary strong {
  color: var(--ink);
  font: 600 2rem/1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.bank-portfolio-metrics {
  display: flex;
  gap: 28px;
  margin: 0;
}

.bank-portfolio-metrics dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 800;
}

.bank-portfolio-metrics dd.is-positive { color: #08796b; }
.bank-portfolio-metrics dd.is-negative { color: #b52b57; }

.bank-position-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  padding-bottom: 10px;
}

.bank-position-avatar {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 8px;
}

.bank-position-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.bank-position-title { display: grid; gap: 2px; min-width: 0; color: var(--ink); }
.bank-position-title span { color: var(--muted); font-size: 0.8rem; }

.bank-position-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, auto) minmax(160px, 220px);
  align-items: center;
  gap: 12px;
  padding-top: 10px;
}

.bank-position-copy,
.bank-position-value {
  display: grid;
  gap: 4px;
}

.bank-position-copy span,
.bank-position-value span { color: var(--muted); font-size: 0.78rem; }
.bank-position-side.is-yes { color: #08796b; }
.bank-position-side.is-no { color: #b52b57; }

.bank-position-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bank-position-actions button {
  min-height: 34px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
}

.bank-positions-empty {
  margin: 0;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-size: 1.08rem;
  font-weight: 700;
  padding: 22px 24px;
}

.bank-trade-dialog { max-width: 520px; }
.bank-trade-form { display: grid; gap: 14px; }
.market-contract-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.market-contract-toggle button { min-height: 38px; border: 2px solid rgba(7, 19, 63, 0.12); border-radius: 8px; background: rgba(255,255,255,.7); color: var(--muted); font-weight: 900; }
.market-contract-toggle button.is-active { border-color: var(--shop-theme-accent); color: var(--ink); box-shadow: 0 3px 0 color-mix(in srgb, var(--shop-theme-accent) 24%, transparent); }
.bank-trade-summary { display: grid; gap: 5px; border: 1px solid rgba(7,19,63,.1); border-radius: 8px; background: rgba(255,255,255,.58); padding: 12px; }
.bank-trade-summary span { color: var(--muted); }
.bank-login-required { display: grid; justify-items: start; gap: 12px; margin-top: 20px; border-top: 1px solid rgba(7,19,63,.12); padding-top: 20px; }
.bank-login-required p { margin: 0; color: var(--muted); font-weight: 700; }

@media (max-width: 1100px) {
  .shop-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-service-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-service-form > button { justify-self: start; }
}

@media (max-width: 720px) {
  .bank-heading-row,
  .bank-portfolio-overview,
  .bank-position-card-body,
  .bank-service-form { grid-template-columns: minmax(0, 1fr); }
  .bank-market-browser { grid-template-columns: minmax(0, 1fr); }
  .bank-market-card-row { grid-template-columns: minmax(0, 1fr) 54px 54px; }
  .shop-color-card { grid-template-columns: 72px minmax(0, 1fr); }
  .shop-buy-button { grid-column: 1 / -1; justify-self: stretch; width: auto; }
}

.construction-shell {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 210px);
  padding: 32px 18px;
  text-align: center;
}

.construction-shell h1 {
  margin: 0;
  color: var(--pink);
  font-family: "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(3.25rem, 9vw, 7rem);
  font-weight: 900;
  line-height: 0.9;
  text-shadow:
    2px 0 0 #ffffff,
    -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    4px 4px 0 var(--yellow),
    8px 8px 0 rgba(99, 217, 202, 0.5);
}

/* Arcade directory. */
.arcade-shell {
  margin-bottom: 18px;
}

.arcade-section {
  max-width: 1380px;
  margin: 0 auto;
  padding: 8px 18px 44px;
}

.arcade-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: center;
  width: 100%;
  min-height: var(--feature-hero-height);
  max-width: 1244px;
  margin: 0 auto 18px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 8px;
  padding: 18px 34px;
  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.76), rgba(99, 217, 202, 0.62) 43%, rgba(240, 92, 157, 0.4));
  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);
}

.arcade-hero::after {
  content: "";
  position: absolute;
  right: 118px;
  bottom: -96px;
  width: 310px;
  height: 310px;
  border: 34px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.arcade-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 10px;
  max-width: 600px;
}

.arcade-kicker,
.arcade-hero-lede,
.arcade-hero-subcopy {
  margin: 0;
}

.arcade-kicker {
  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;
}

.arcade-hero h1 {
  margin: 0;
  color: var(--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(--yellow),
    5px 5px 0 rgba(99, 217, 202, 0.42),
    0 9px 14px rgba(7, 19, 63, 0.14);
}

.arcade-hero-lede {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.52rem;
  font-weight: 950;
  line-height: 1.08;
}

.arcade-hero-subcopy {
  color: rgba(7, 19, 63, 0.76);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.45;
}

.arcade-hero-icon {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 150px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 14px 12px rgba(7, 19, 63, 0.2));
  transform: rotate(5deg);
}

.arcade-library {
  max-width: 1244px;
  margin: 0 auto;
  border: 1px solid rgba(7, 19, 63, 0.13);
  border-radius: 18px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 32px rgba(7, 19, 63, 0.1);
}

.arcade-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 30px;
}

.arcade-game-card {
  position: relative;
  display: block;
  aspect-ratio: 5 / 3;
  min-width: 0;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(7, 19, 63, 0.18),
    5px 5px 0 rgba(99, 217, 202, 0.34),
    0 10px 22px rgba(7, 19, 63, 0.15);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.arcade-game-card:hover,
.arcade-game-card:focus-visible {
  outline: none;
  transform: translateY(-4px);
  box-shadow:
    0 0 0 2px rgba(240, 92, 157, 0.48),
    6px 7px 0 rgba(99, 217, 202, 0.48),
    0 16px 30px rgba(7, 19, 63, 0.2);
}

.arcade-card-art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
}

.arcade-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arcade-play-stage {
  --host-mini-game-frame-width: 1200px;
  --host-mini-game-frame-height: 820px;
  --host-mini-game-frame-ratio: 1200 / 820;
  width: min(100%, var(--host-mini-game-frame-width));
  margin: 8px auto 44px;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.16);
  border-radius: 16px;
  background: #050704;
  box-shadow: 0 18px 38px rgba(7, 19, 63, 0.18);
}

.arcade-stage-bar {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 14px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.14);
  background: rgba(255, 255, 255, 0.96);
  padding: 10px 14px;
}

.arcade-stage-bar::after {
  content: "";
  width: 142px;
}

.arcade-stage-bar h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arcade-stage-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border: 1px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: rgba(99, 217, 202, 0.18);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  padding: 7px 12px;
  text-decoration: none;
}

.arcade-stage-back:hover,
.arcade-stage-back:focus-visible {
  background: rgba(99, 217, 202, 0.34);
}

.arcade-stage-back img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.arcade-embed-shell,
.socipic-mini-game-viewport {
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: #050704;
}

.socipic-mini-game-viewport {
  align-self: start;
  aspect-ratio: var(--host-mini-game-frame-ratio, 1200 / 820);
  height: auto;
}

.socipic-mini-game-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #050704;
}

@media (max-width: 1040px) {
  .arcade-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Registration controls and invite lifecycle restored from the September 6 site. */
.admin-registration-panel > .admin-panel-head {
  margin-bottom: 14px;
}

.admin-registration-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.admin-registration-tabs button {
  min-height: 40px;
  border: 2px solid rgba(7, 19, 63, 0.24);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 8px 17px;
}

.admin-registration-tabs button.is-active {
  border-color: var(--ink);
  background: var(--pink);
  color: #fff;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
}

.admin-registration-view,
.admin-registration-form {
  display: grid;
  gap: 18px;
}

.admin-registration-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-registration-preview {
  display: grid;
  gap: 4px;
  border: 2px dashed rgba(73, 101, 168, 0.3);
  background: rgba(217, 227, 255, 0.3);
  color: var(--muted);
  padding: 14px;
}

.admin-registration-preview strong {
  color: var(--ink);
}

.admin-toggle-field {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.admin-toggle-field input {
  width: 20px;
  height: 20px;
  accent-color: var(--pink);
}

.admin-registration-taper {
  display: grid;
  gap: 12px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  background: rgba(255, 255, 255, 0.62);
  padding: 16px;
}

.admin-registration-taper > header {
  display: grid;
  gap: 3px;
}

.admin-registration-taper > header span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.admin-registration-taper-rows {
  display: grid;
  gap: 10px;
}

.admin-registration-taper-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) 38px;
  align-items: end;
  gap: 12px;
}

.admin-tier-remove {
  width: 38px;
  min-height: 38px;
  border: 2px solid rgba(181, 28, 102, 0.34);
  background: #fff0f6;
  color: #b51c66;
  cursor: pointer;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
}

.admin-registration-invite-preview {
  display: grid;
  gap: 9px;
  border: 3px solid var(--ink);
  background: linear-gradient(135deg, rgba(255, 216, 61, 0.2), rgba(99, 217, 202, 0.18)), #fff;
  padding: 15px;
  box-shadow: 8px 8px 0 rgba(7, 19, 63, 0.14);
}

.admin-registration-invite-preview > span,
.profile-page .profile-referral-card-title {
  justify-self: start;
  background: var(--pink);
  color: #fff;
  font-family: "Pixelify Sans", "Barlow Semi Condensed", sans-serif;
  font-weight: 900;
  padding: 8px 11px;
  text-shadow: 2px 2px 0 rgba(7, 19, 63, 0.16);
}

.admin-registration-invite-preview small {
  color: var(--muted);
  font-weight: 700;
}

.admin-registration-invite-preview button {
  justify-self: start;
  min-height: 36px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  padding: 7px 11px;
}

.admin-registration-receipts {
  margin-top: 4px;
}

.profile-page .profile-identity.has-referral-card {
  min-height: 190px;
}

.profile-page .profile-referral-slot {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: clamp(18px, 5vw, 96px);
  left: min(48%, 690px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.profile-page .profile-referral-card {
  display: grid;
  gap: 9px;
  box-sizing: border-box;
  width: min(100%, 360px);
  pointer-events: auto;
  border: 3px solid var(--ink);
  background: linear-gradient(135deg, rgba(255, 216, 61, 0.2), rgba(99, 217, 202, 0.18)), rgba(255, 255, 255, 0.94);
  color: var(--ink);
  padding: 14px;
  box-shadow: 8px 8px 0 rgba(7, 19, 63, 0.16);
}

.profile-page .profile-referral-card strong {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.05;
}

.profile-page .profile-referral-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.25;
}

.profile-page .profile-referral-card button {
  justify-self: start;
  min-height: 38px;
  border: 3px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: 0 12px;
  box-shadow: 5px 5px 0 rgba(7, 19, 63, 0.18);
}

.profile-page .profile-referral-copy-status {
  min-height: 1em;
  color: var(--pink);
  font-size: 0.86rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.auth-invite-applied {
  margin: 0;
  border: 2px solid rgba(35, 127, 152, 0.28);
  background: rgba(99, 217, 202, 0.16);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.25;
  padding: 11px 13px;
}

body.invite-page {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: linear-gradient(rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.82)), linear-gradient(90deg, rgba(119, 226, 214, 0.22) 1px, transparent 1px), linear-gradient(0deg, rgba(119, 226, 214, 0.18) 1px, transparent 1px), linear-gradient(135deg, #fff6fb 0%, #f1f7ff 48%, #fff8d8 100%);
  background-size: auto, 42px 42px, 42px 42px, auto;
}

.invite-shell {
  box-sizing: border-box;
  width: min(980px, calc(100vw - 36px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 40px 0;
}

.invite-card {
  width: 100%;
  border: 5px solid var(--ink);
  box-shadow: 14px 14px 0 rgba(7, 19, 66, 0.16);
  background: rgba(255, 255, 255, 0.94);
}

.invite-card-titlebar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 5px solid var(--ink);
  color: #fff;
  background: var(--pink);
  font-family: "Pixelify Sans", sans-serif;
  font-size: clamp(1.15rem, 3vw, 1.8rem);
  font-weight: 900;
}

.invite-card-body {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(24px, 5vw, 54px);
  align-items: center;
  padding: clamp(26px, 5vw, 54px);
  background: radial-gradient(circle at 82% 18%, rgba(255, 219, 70, 0.38), transparent 32%), radial-gradient(circle at 12% 84%, rgba(105, 222, 211, 0.24), transparent 34%), linear-gradient(180deg, #fff, #fff9fc);
}

.invite-logo-wrap,
.invite-copy {
  display: grid;
  gap: 16px;
}

.invite-logo-wrap {
  justify-items: center;
}

.invite-logo-wrap img {
  width: min(100%, 320px);
  filter: drop-shadow(8px 10px 0 rgba(105, 222, 211, 0.45));
}

.invite-pill {
  padding: 8px 16px;
  border: 4px solid var(--ink);
  background: var(--yellow);
  font-weight: 900;
  text-transform: uppercase;
}

.invite-eyebrow {
  color: var(--pink);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.invite-copy h1 {
  margin: 0;
  font-family: "Kimoru", Arial, sans-serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.9;
}

.invite-copy p {
  margin: 0;
  color: #303b6b;
  font-size: clamp(1.2rem, 2.5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.25;
}

.invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.invite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 6px 20px;
  border: 4px solid var(--ink);
  box-shadow: 7px 7px 0 rgba(7, 19, 66, 0.18);
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 900;
  text-decoration: none;
}

.invite-button-primary { background: var(--yellow); }
.invite-button-secondary { background: #fff; color: #4866a7; }
.invite-note { color: #6171a2; font-weight: 800; }

@media (max-width: 1420px) {
  .profile-page .profile-identity.has-referral-card { min-height: 0; }
  .profile-page .profile-referral-slot { position: static; justify-content: center; margin-top: 18px; pointer-events: auto; }
  .profile-page .profile-referral-card { width: min(100%, 420px); }
}

@media (max-width: 760px) {
  .admin-registration-metrics,
  .admin-registration-taper-row,
  .invite-card-body { grid-template-columns: 1fr; }
  .admin-tier-remove { justify-self: start; }
  .invite-card-body { text-align: center; }
  .invite-actions { justify-content: center; }
}

/* Functional realtime admin control room. */
.admin-app-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-rail {
  position: sticky;
  top: 14px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 5px 5px 0 rgba(7, 19, 63, 0.14);
}

.admin-rail-head {
  display: grid;
  gap: 3px;
  border-bottom: 3px solid var(--ink);
  background: var(--mint);
  color: var(--ink);
  padding: 13px;
}

.admin-rail-head strong,
.admin-rail-head span,
.admin-rail-link {
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.admin-rail-head strong {
  font-size: 1.12rem;
  font-weight: 950;
}

.admin-rail-head span {
  color: rgba(7, 19, 63, 0.68);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-rail-nav {
  display: grid;
  padding: 7px;
}

.admin-rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 39px;
  border: 2px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  font-weight: 900;
  padding: 7px 9px;
  text-decoration: none;
}

.admin-rail-link:hover,
.admin-rail-link:focus-visible {
  border-color: rgba(7, 19, 63, 0.2);
  background: rgba(99, 217, 202, 0.13);
  outline: 0;
}

.admin-rail-link.is-active {
  border-color: var(--ink);
  background: var(--pink);
  color: #fff;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
}

.admin-rail-link b {
  min-width: 23px;
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.12);
  font-size: 0.74rem;
  padding: 2px 6px;
  text-align: center;
}

.admin-workspace {
  min-width: 0;
}

.admin-workspace .admin-heading {
  align-items: center;
}

.admin-workspace .admin-heading h1 {
  font-size: clamp(2.5rem, 4.2vw, 4.6rem);
}

.admin-workspace .admin-status {
  max-width: 360px;
}

.admin-panel-head > div {
  min-width: 0;
}

.admin-panel-head p {
  margin-top: 5px;
  text-align: left;
}

.admin-users-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(420px, 1.28fr);
  gap: 14px;
}

.admin-bulk-fortune {
  margin-bottom: 14px;
}

.admin-user-directory,
.admin-user-editor {
  min-height: 560px;
}

.admin-user-directory-list {
  display: grid;
  gap: 7px;
  max-height: 650px;
  margin-top: 12px;
  overflow: auto;
  padding: 2px 4px 6px 2px;
}

.admin-user-directory-card {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  cursor: pointer;
  padding: 8px;
  text-align: left;
}

.admin-user-directory-card[hidden] {
  display: none;
}

.admin-user-directory-card:hover,
.admin-user-directory-card:focus-visible,
.admin-user-directory-card.is-selected {
  border-color: var(--ink);
  background: rgba(99, 217, 202, 0.18);
  outline: 0;
}

.admin-user-directory-card small {
  overflow: hidden;
  color: rgba(7, 19, 63, 0.65);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-tabs { display: flex; gap: 7px; margin: -3px 0 16px; overflow-x: auto; padding: 3px 2px 8px; }
.admin-user-tab { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; border: 2px solid rgba(7, 19, 63, 0.25); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-size: .86rem; font-weight: 900; padding: 7px 12px; }
.admin-user-tab b { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; background: rgba(7, 19, 63, .1); font-size: .7rem; }
.admin-user-tab.is-active b { background: #fff; color: #a2154d; }
.admin-user-tab:hover, .admin-user-tab:focus-visible, .admin-user-tab.is-active { border-color: var(--ink); background: var(--pink); color: #fff; outline: 0; }
.admin-user-tab-view { min-width: 0; }
.admin-user-section { display: grid; gap: 18px; }
.admin-user-email { border: 1px solid rgba(73, 101, 168, .2); border-radius: 10px; background: rgba(255, 255, 255, .58); padding: 14px; }
.admin-user-email h3 { margin: 0 0 10px; }
.admin-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.admin-fact-grid > div, .admin-subpanel { border: 2px solid rgba(7, 19, 63, 0.14); border-radius: 9px; background: rgba(237, 251, 249, 0.65); padding: 12px; }
.admin-fact-grid dt { color: rgba(7, 19, 63, 0.6); font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.admin-fact-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; font-weight: 800; }
.admin-danger-zone { border: 2px solid #d6316b; border-radius: 10px; background: rgba(255, 224, 236, .45); padding: 14px; }
.admin-danger-zone h3, .admin-subpanel h3 { margin: 0 0 10px; }
.admin-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-ban-state { border-radius: 7px; background: rgba(99, 217, 202, .18); color: #13675c; font-weight: 900; padding: 8px 10px; }
.admin-ban-state.is-active { background: rgba(239, 78, 142, .13); color: #a2154d; }
.admin-ban-pill { display: inline-block; border-radius: 999px; background: rgba(7, 19, 63, .08); font-size: .76rem; font-weight: 900; padding: 5px 8px; }
.admin-ban-pill.is-active { background: rgba(239, 78, 142, .15); color: #a2154d; }
.admin-design-grid, .admin-upgrade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.admin-design-layer-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 13px; padding: 2px 2px 8px; }
.admin-design-layer-tab { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; border: 2px solid rgba(7, 19, 63, .2); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-weight: 950; padding: 8px 11px; }
.admin-design-layer-tab b { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 999px; background: rgba(7, 19, 63, .1); font-size: .75rem; }
.admin-design-layer-tab:hover, .admin-design-layer-tab:focus-visible, .admin-design-layer-tab.is-active { border-color: var(--ink); background: rgba(239, 78, 142, .13); outline: 0; }
.admin-design-layer-tab.is-active b { background: var(--pink); color: #fff; }
.admin-design-layer-panel { display: grid; gap: 15px; }
.admin-design-layer-heading, .admin-design-section-head, .admin-design-collection > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-design-layer-heading { border-bottom: 2px solid rgba(7, 19, 63, .14); padding-bottom: 11px; }
.admin-design-layer-heading span, .admin-design-section-head span { color: #a2154d; font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-size: .75rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.admin-design-layer-heading h2, .admin-design-collection h3, .admin-design-collection p { margin: 0; }
.admin-design-gender { display: grid; gap: 11px; }
.admin-design-section-head { border-radius: 8px; background: rgba(99, 217, 202, .16); padding: 10px 12px; }
.admin-design-section-head > div { display: flex; align-items: baseline; gap: 10px; }
.admin-design-collection { display: grid; gap: 8px; border-left: 4px solid rgba(7, 19, 63, .12); padding-left: 10px; }
.admin-design-collection > header p { color: rgba(7, 19, 63, .6); font-size: .82rem; font-weight: 800; }
.admin-design-card, .admin-upgrade-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 11px; border: 2px solid rgba(7, 19, 63, .14); border-radius: 9px; background: #fff; padding: 10px; }
.admin-design-card > img, .admin-upgrade-card > img { width: 96px; height: 96px; border-radius: 7px; background: rgba(209, 220, 250, .5); object-fit: contain; }
.admin-design-card > div, .admin-upgrade-card > div { display: grid; align-content: start; gap: 7px; min-width: 0; }
.admin-design-card small, .admin-upgrade-card small { color: rgba(7, 19, 63, .62); font-weight: 800; }
.admin-upgrade-card p { margin: 0; font-size: .86rem; }
.admin-ip { display: block; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.admin-upload-studio {
  display: grid;
  gap: 14px;
}

.admin-upload-studio-head,
.admin-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-upload-studio-head {
  border-bottom: 2px solid rgba(7, 19, 63, .14);
  padding-bottom: 12px;
}

.admin-upload-studio-head span,
.admin-preview-toolbar > span,
.admin-upload-label {
  color: #a2154d;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: .74rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.admin-upload-studio-head h2,
.admin-upload-studio-head p {
  margin: 0;
}

.admin-upload-studio-head h2 {
  margin-top: 2px;
  color: var(--ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
}

.admin-upload-studio-head p {
  margin-top: 5px;
  color: rgba(7, 19, 63, .66);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 800;
}

.admin-upload-studio-head > b {
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(99, 217, 202, .2);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: .78rem;
  padding: 6px 10px;
}

.admin-upload-studio-layout {
  display: grid;
  grid-template-columns: minmax(270px, .82fr) minmax(330px, 1.18fr);
  align-items: start;
  gap: 14px;
}

.admin-design-form,
.admin-design-preview {
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  padding: 13px;
}

.admin-upload-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-upload-fields > .admin-upload-field,
.admin-upload-fields > .admin-primary-button,
.admin-upload-fields > .admin-selected-files,
.admin-upload-fields > .admin-hair-shadow-field {
  grid-column: 1 / -1;
}

.admin-upload-field {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
}

.admin-upload-field[hidden] {
  display: none !important;
}

.admin-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.admin-upload-drop {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 88px;
  border: 2px dashed rgba(7, 19, 63, .34);
  border-radius: 9px;
  background: rgba(209, 220, 250, .28);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  padding: 13px;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.admin-upload-drop strong {
  overflow: hidden;
  max-width: 100%;
  font-size: .98rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-upload-drop small {
  color: rgba(7, 19, 63, .64);
  font-weight: 800;
}

.admin-upload-field:hover .admin-upload-drop,
.admin-upload-field:focus-within .admin-upload-drop,
.admin-upload-field.is-dragging .admin-upload-drop {
  border-color: var(--pink);
  background: rgba(239, 78, 142, .1);
}

.admin-upload-field.is-dragging .admin-upload-drop {
  transform: translateY(-2px);
}

.admin-design-preview {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 11px;
}

.admin-preview-toolbar {
  flex-wrap: wrap;
}

.admin-avatar-preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: .8rem;
  font-weight: 900;
}

.admin-avatar-preview-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}

.admin-avatar-skin-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-avatar-skin-control button {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 2px;
}

.admin-avatar-skin-control button:hover,
.admin-avatar-skin-control button:focus-visible,
.admin-avatar-skin-control button.is-active {
  border-color: var(--ink);
  outline: 0;
}

.admin-avatar-skin-control button > span {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(7, 19, 63, .2);
  border-radius: 50%;
  background: var(--admin-preview-skin-swatch);
}

.admin-design-preview-frame {
  position: relative;
  display: grid;
  width: min(100%, 340px);
  min-height: 0;
  max-height: 340px;
  justify-self: center;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background-color: #f8faff;
  background-image:
    linear-gradient(45deg, rgba(7, 19, 63, .055) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(7, 19, 63, .055) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(7, 19, 63, .055) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(7, 19, 63, .055) 75%);
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  background-size: 18px 18px;
  touch-action: none;
}

.admin-design-preview-frame.is-avatar-preview {
  aspect-ratio: 200 / 270;
  justify-self: center;
  width: min(100%, 200px);
  height: auto;
  max-height: 270px;
  background-color: #dce5ff;
}

.admin-design-preview-frame > img {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0 auto auto 0;
  object-fit: contain;
  user-select: none;
}

.admin-design-preview-frame > canvas {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.admin-design-preview-frame > span:not(.admin-crop-box) {
  color: rgba(7, 19, 63, .46);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: .86rem;
}

.admin-crop-box {
  position: absolute;
  z-index: 3;
  display: block;
  border: 3px solid #fff;
  border-radius: 3px;
  cursor: default;
  box-shadow: 0 0 0 2px #a2154d, 0 0 0 9999px rgba(7, 19, 63, .32);
}

.admin-crop-box[hidden] {
  display: none !important;
}

.admin-crop-handle {
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 17px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--pink);
  cursor: nwse-resize;
  box-shadow: 0 0 0 2px var(--ink);
}

.admin-crop-aspect-controls {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.admin-crop-aspect-controls button {
  flex: 0 0 auto;
  min-height: 31px;
  border: 2px solid rgba(7, 19, 63, .2);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: .75rem;
  font-weight: 900;
  padding: 5px 9px;
}

.admin-crop-aspect-controls button:hover,
.admin-crop-aspect-controls button:focus-visible,
.admin-crop-aspect-controls button.is-active {
  border-color: var(--ink);
  background: rgba(239, 78, 142, .12);
  outline: 0;
}

.admin-design-preview > dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.admin-design-preview > dl > div {
  min-width: 0;
  border-radius: 7px;
  background: rgba(209, 220, 250, .34);
  padding: 8px;
}

.admin-design-preview dt {
  color: rgba(7, 19, 63, .56);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-design-preview dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: .84rem;
  font-weight: 900;
}

.admin-selected-files {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-selected-files[hidden] {
  display: none !important;
}

.admin-selected-files > strong {
  color: rgba(7, 19, 63, .7);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: .8rem;
}

.admin-selected-file-list {
  display: grid;
  gap: 6px;
  max-height: 270px;
  margin: 0;
  overflow: auto;
  padding: 0;
  list-style: none;
}

.admin-selected-file {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 2px solid rgba(7, 19, 63, .12);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 6px;
}

.admin-selected-file.is-active {
  border-color: var(--ink);
  background: rgba(99, 217, 202, .13);
}

.admin-selected-file-crop {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(209, 220, 250, .48);
}

.admin-selected-file-crop img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-selected-file-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
}

.admin-selected-file-order {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: .68rem;
}

.admin-selected-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-selected-file-handle {
  color: #a2154d;
  font-size: .7rem;
  text-transform: uppercase;
}

.admin-user-pick,
button.admin-user-link {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.admin-form {
  display: grid;
  gap: 16px;
}

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

.admin-field.is-full {
  grid-column: 1 / -1;
}

textarea.admin-input {
  min-height: 112px;
  resize: vertical;
}

.admin-check {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 9px;
  min-height: 42px;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
}

.admin-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--pink);
}

.admin-profile-summary,
.admin-form-actions,
.admin-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-profile-summary {
  border-bottom: 2px solid rgba(7, 19, 63, 0.12);
  padding-bottom: 13px;
}

.admin-profile-summary > a,
.admin-panel a {
  color: #9b245e;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
}

.admin-form-actions {
  justify-content: flex-end;
  border-top: 2px solid rgba(7, 19, 63, 0.1);
  padding-top: 13px;
}

.admin-secondary-button,
.admin-danger-button {
  min-height: 36px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 950;
  padding: 7px 10px;
}

.admin-danger-button {
  border-color: #98234f;
  background: #fff0f6;
  color: #98234f;
}

.admin-primary-button.is-small {
  min-height: 36px;
  border-width: 2px;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  text-shadow: none;
  padding: 7px 10px;
}

.admin-primary-button:disabled,
.admin-secondary-button:disabled,
.admin-danger-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.admin-help {
  margin: 0;
  color: rgba(7, 19, 63, 0.74);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.45;
}

.admin-shop-view { display: grid; gap: 18px; margin-top: 15px; }
.admin-shop-view [hidden], .admin-avatar-preview-toggle[hidden], .admin-avatar-skin-control[hidden] { display: none !important; }
.admin-shop-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 10px; }
.admin-shop-poster-card { display: grid; align-content: start; gap: 7px; min-width: 0; border: 2px solid rgba(7, 19, 63, .16); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; padding: 8px; text-align: left; }
.admin-shop-poster-card:hover, .admin-shop-poster-card:focus-visible, .admin-shop-poster-card.is-selected { border-color: var(--ink); background: rgba(99, 217, 202, .15); outline: 0; box-shadow: 4px 4px 0 rgba(7, 19, 63, .12); }
.admin-shop-poster-frame { display: grid; aspect-ratio: 4 / 5; overflow: hidden; place-items: center; border-radius: 7px; background: #eaf0ff; }
.admin-shop-poster-frame img { width: 100%; height: 100%; object-fit: cover; }
.admin-shop-poster-label { display: grid; min-width: 0; }
.admin-shop-poster-label strong, .admin-shop-poster-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-shop-poster-label strong { font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-size: .9rem; font-weight: 950; }
.admin-shop-poster-label small { color: rgba(7, 19, 63, .62); font-weight: 800; }
.admin-shop-selected-head, .admin-shop-inventory > header, .admin-shop-intro, .admin-designer-shop > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-shop-selected-head { border-block: 2px solid rgba(7, 19, 63, .12); padding-block: 13px; }
.admin-shop-selected-head h2, .admin-shop-selected-head p, .admin-shop-inventory h3, .admin-shop-intro h2, .admin-shop-intro p, .admin-designer-shop h3, .admin-designer-shop p { margin: 0; }
.admin-shop-selected-head span, .admin-shop-inventory > header span, .admin-shop-intro span, .admin-designer-shop > header span { color: #a2154d; font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-size: .73rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.admin-shop-selected-head p, .admin-shop-intro p, .admin-designer-shop p { margin-top: 4px; color: rgba(7, 19, 63, .67); font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-weight: 800; }
.admin-shop-closed-note { border: 2px solid #ae2a5b; border-radius: 9px; background: #fff0f6; color: #8d1947; font-weight: 900; padding: 12px; }
.admin-shop-inventory { display: grid; gap: 12px; }
.admin-shop-inventory > header { border-bottom: 2px solid rgba(7, 19, 63, .12); padding-bottom: 10px; }
.admin-shop-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.admin-shop-item-grid.is-compact { grid-template-columns: 1fr; max-height: 720px; overflow-y: auto; padding-right: 3px; }
.admin-shop-item-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 11px; border: 2px solid rgba(7, 19, 63, .14); border-radius: 10px; background: #fff; padding: 10px; }
.admin-shop-item-art { display: grid; width: 112px; height: 138px; overflow: hidden; place-items: center; border-radius: 8px; background: #e9efff; }
.admin-shop-item-art img { width: 100%; height: 100%; object-fit: contain; }
.admin-shop-item-art > span { width: 68px; height: 68px; border: 2px solid var(--ink); border-radius: 50%; }
.admin-shop-item-body { display: grid; align-content: start; gap: 7px; min-width: 0; }
.admin-shop-item-body > strong { font-size: 1rem; }
.admin-shop-item-body > small { color: rgba(7, 19, 63, .62); font-weight: 800; }
.admin-shop-item-body > p { margin: 0; color: rgba(7, 19, 63, .72); font-size: .82rem; }
.admin-shop-item-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-shop-item-pills span { border-radius: 999px; background: rgba(99, 217, 202, .18); color: #175f58; font-size: .7rem; font-weight: 950; padding: 4px 7px; }
.admin-shop-edit-details { border-top: 1px solid rgba(7, 19, 63, .14); padding-top: 6px; }
.admin-shop-edit-details summary { color: #98234f; cursor: pointer; font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-weight: 950; }
.admin-shop-edit-form { margin-top: 9px; }
.admin-shop-file-form { display: grid; gap: 7px; }
.admin-shop-file-form .admin-upload-drop { min-height: 50px; padding: 7px; }
.admin-shop-file-form .admin-upload-drop small { font-size: .72rem; }
.admin-shop-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-shop-create { display: grid; gap: 15px; }
.admin-shop-create-form { max-width: 980px; }
.admin-shop-layer-field { min-width: 0; margin: 0; border: 2px solid rgba(7, 19, 63, .14); border-radius: 10px; padding: 12px; }
.admin-shop-layer-field legend { color: #a2154d; font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 950; padding-inline: 6px; text-transform: uppercase; }
.admin-shop-layer-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 7px; }
.admin-shop-layer-options label { display: flex; align-items: center; gap: 7px; border: 2px solid rgba(7, 19, 63, .12); border-radius: 8px; background: #fff; cursor: pointer; font-weight: 900; padding: 8px; }
.admin-shop-layer-options label:has(input:checked) { border-color: var(--ink); background: rgba(239, 78, 142, .12); }
.admin-shop-designer-assign { display: grid; grid-template-columns: 1fr minmax(300px, .8fr); align-items: end; gap: 18px; border: 2px solid var(--ink); border-radius: 10px; background: rgba(99, 217, 202, .12); padding: 15px; }
.admin-shop-designer-assign h2, .admin-shop-designer-assign p { margin: 0; }
.admin-shop-designer-assign p { margin-top: 5px; color: rgba(7, 19, 63, .7); font-weight: 800; }
.admin-designer-shop-list { display: grid; gap: 16px; }
.admin-designer-shop { display: grid; gap: 14px; border: 2px solid var(--ink); border-radius: 11px; background: #fff; padding: 14px; box-shadow: 5px 5px 0 rgba(7, 19, 63, .11); }
.admin-designer-shop.is-closed { background: rgba(255, 240, 246, .75); }
.admin-designer-shop > header { justify-content: flex-start; }
.admin-designer-shop > header img { width: 82px; height: 100px; border: 2px solid rgba(7, 19, 63, .14); border-radius: 8px; background: #eaf0ff; object-fit: cover; }
.admin-designer-shop > header div { flex: 1; }
.admin-designer-shop > header > a { color: #98234f; font-weight: 950; }

@media (max-width: 1100px) {
  .admin-shop-item-grid { grid-template-columns: 1fr; }
}

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

  .admin-rail {
    position: static;
  }

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

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

  .admin-user-directory,
  .admin-user-editor {
    min-height: 0;
  }

  .admin-upload-studio-layout {
    grid-template-columns: 1fr;
  }

  .admin-design-preview {
    position: static;
  }

  .admin-shop-designer-assign { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .admin-shell {
    width: min(100% - 16px, 1680px);
    padding: 10px;
  }

  .admin-rail-nav,
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-two-column,
  .admin-design-grid,
  .admin-upgrade-grid,
  .admin-fact-grid {
    grid-template-columns: 1fr;
  }

  .admin-field.is-full {
    grid-column: auto;
  }

  .admin-upload-fields,
  .admin-design-preview > dl {
    grid-template-columns: 1fr;
  }

  .admin-upload-fields > * {
    grid-column: auto !important;
  }

  .admin-shop-item-card { grid-template-columns: 82px minmax(0, 1fr); }
  .admin-shop-item-art { width: 82px; height: 104px; }
  .admin-shop-selected-head, .admin-shop-intro, .admin-designer-shop > header { align-items: flex-start; flex-wrap: wrap; }

  .admin-design-preview-frame {
    min-height: 280px;
  }

  .admin-design-preview-frame.is-avatar-preview {
    min-height: 0;
  }

  .admin-workspace .admin-heading {
    display: grid;
  }
}

@media (max-width: 760px) {
  .arcade-page .home-shell {
    width: calc(100% - 18px);
    padding-inline: 8px;
  }

  .arcade-page .main-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 132px));
    justify-content: center;
    gap: 6px;
    width: min(100%, 276px);
    max-width: calc(100vw - 18px);
  }

  .arcade-page .main-tab {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .arcade-section {
    padding-inline: 8px;
  }

  .arcade-hero {
    grid-template-columns: minmax(0, 1fr) 92px;
    min-height: 0;
    padding: 22px 18px;
  }

  .arcade-hero h1 {
    font-size: 3.05rem;
  }

  .arcade-hero-lede {
    font-size: 1.24rem;
  }

  .arcade-hero-subcopy {
    font-size: 0.92rem;
  }

  .arcade-hero-icon {
    width: 82px;
    height: 88px;
  }

  .arcade-library {
    padding: 15px;
  }

  .arcade-play-stage {
    margin-bottom: 24px;
  }

  .arcade-stage-bar {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 8px;
  }

  .arcade-stage-bar::after {
    display: none;
  }

  .arcade-stage-back span {
    display: none;
  }

  .arcade-stage-bar h1 {
    padding-right: 42px;
    font-size: 1.08rem;
  }
}

@media (max-width: 560px) {
  .arcade-game-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }

  .arcade-game-card {
    aspect-ratio: 5 / 3;
  }
}

/* Admin dashboard. */
.admin-page {
  min-height: 100svh;
}

.admin-shell {
  width: min(1680px, calc(100% - 32px));
  margin: 28px auto 40px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7, 19, 63, 0.055) 1px, transparent 1px),
    linear-gradient(0deg, rgba(7, 19, 63, 0.055) 1px, transparent 1px),
    rgba(255, 255, 255, 0.9);
  background-size: 32px 32px;
  box-shadow:
    8px 8px 0 rgba(99, 217, 202, 0.26),
    0 18px 42px rgba(7, 19, 63, 0.12);
  padding: clamp(16px, 2vw, 26px);
}

.admin-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.admin-kicker {
  display: inline-flex;
  margin: 0 0 8px;
  border: 2px solid var(--ink);
  background: var(--mint);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
  padding: 5px 9px;
  text-transform: uppercase;
}

.admin-heading h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.82;
  text-shadow:
    2px 2px 0 #ffffff,
    4px 4px 0 rgba(240, 92, 157, 0.55);
}

.admin-heading .admin-status {
  margin: 0;
  max-width: 420px;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

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

.admin-metric,
.admin-panel {
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 5px 5px 0 rgba(7, 19, 63, 0.12);
}

.admin-metric {
  display: grid;
  gap: 4px;
  min-height: 104px;
  padding: 12px;
}

.admin-metric span,
.admin-metric small,
.admin-panel-head p,
.admin-empty-state {
  color: rgba(7, 19, 63, 0.68);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 850;
  line-height: 1.1;
}

.admin-metric span {
  font-size: 0.88rem;
  text-transform: uppercase;
}

.admin-metric strong {
  color: var(--ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1;
}

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

.admin-panel {
  min-width: 0;
  padding: 14px;
}

.admin-panel.is-wide {
  grid-column: 1 / -1;
}

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

.admin-panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
}

.admin-panel-head p {
  margin: 0;
  text-align: right;
}

.admin-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 850;
}

.admin-table th,
.admin-table td {
  border-top: 2px solid rgba(7, 19, 63, 0.12);
  padding: 8px 7px;
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  color: rgba(7, 19, 63, 0.68);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.admin-user-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}

.admin-user-link img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #ffffff;
  object-fit: cover;
}

.admin-empty-state {
  margin: 0;
}

/* Realtime game control room. */
.admin-game-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 14px;
  overflow-x: auto;
  padding: 2px 3px 7px;
}

.admin-game-tabs .admin-secondary-button {
  margin-left: auto;
  white-space: nowrap;
}

.admin-game-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 950;
  padding: 8px 14px;
  white-space: nowrap;
}

.admin-game-tab b {
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.1);
  font-size: 0.75rem;
  padding: 2px 7px;
}

.admin-game-tab.is-active {
  border-color: var(--ink);
  background: var(--pink);
  color: #fff;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
}

.admin-game-tab-panel {
  border: 3px solid var(--ink);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 5px 5px 0 rgba(7, 19, 63, 0.12);
  padding: clamp(13px, 2vw, 20px);
}

.admin-game-settings-form,
.admin-game-room-grid,
.admin-game-type-grid {
  display: grid;
  gap: 14px;
}

.admin-game-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.admin-game-section-head h2,
.admin-game-section-head p,
.admin-game-section-head > span {
  margin: 0;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.admin-game-section-head h2 {
  color: var(--ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
}

.admin-game-section-head p,
.admin-game-section-head > span {
  color: rgba(7, 19, 63, 0.68);
  font-weight: 850;
}

.admin-game-section-head > span { text-align: right; }

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

.admin-game-room-card,
.admin-game-type-card {
  --admin-game-color: var(--pink);
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.19);
  border-radius: 10px;
  background: #fff;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.admin-game-room-card > header,
.admin-game-type-card > header {
  position: relative;
  display: grid;
  grid-template-columns: 8px 70px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 10px 13px 10px 0;
}

.admin-game-accent {
  align-self: stretch;
  border-radius: 0 7px 7px 0;
  background: var(--admin-game-color);
}

.admin-game-room-card > header img,
.admin-game-type-card > header img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.admin-game-logo-wrap {
  position: relative;
  display: block;
  width: 70px;
  height: 70px;
}

.admin-game-logo-wrap > img {
  display: block;
}

.admin-game-explainer-link {
  position: absolute;
  right: -5px;
  bottom: -5px;
  z-index: 2;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #d9dce5;
  color: #697084;
  font: 950 0.82rem/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(7, 19, 63, 0.2);
}

.admin-game-explainer-link:hover,
.admin-game-explainer-link:focus-visible {
  background: #c9ceda;
  color: #343b50;
  outline: 2px solid rgba(7, 19, 63, 0.28);
  outline-offset: 2px;
}

.admin-game-room-card > header div,
.admin-game-type-card > header div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-game-room-card > header strong,
.admin-game-type-card > header strong {
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 950;
}

.admin-game-room-card > header span,
.admin-game-room-card > header small,
.admin-game-type-card > header span,
.admin-game-type-card > header small,
.admin-game-type-card > p {
  color: rgba(7, 19, 63, 0.68);
  font-weight: 850;
}

.admin-game-room-card > dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-block: 2px solid rgba(7, 19, 63, 0.1);
}

.admin-game-room-card > dl div { padding: 9px 11px; }
.admin-game-room-card dt { color: rgba(7, 19, 63, 0.55); font-size: 0.72rem; font-weight: 950; text-transform: uppercase; }
.admin-game-room-card dd { margin: 2px 0 0; color: var(--ink); font-weight: 950; }

.admin-game-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px;
}

.admin-game-idols {
  border-top: 2px solid rgba(7, 19, 63, 0.1);
  background: rgba(245, 197, 66, 0.1);
  padding: 11px;
}

.admin-game-idols > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
}

.admin-game-idols > header strong { font-weight: 950; }
.admin-game-idols > header span { color: rgba(7, 19, 63, 0.58); font-size: 0.75rem; font-weight: 850; }
.admin-game-idol-list { display: grid; gap: 6px; margin-top: 9px; }

.admin-game-idol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.admin-game-idol > span { display: grid; min-width: 0; }
.admin-game-idol strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; }
.admin-game-idol small { color: #12826f; font-weight: 850; }
.admin-game-idol > b { color: var(--ink); font-size: 1.2rem; font-weight: 950; }
.admin-game-idol.is-found { opacity: 0.65; }
.admin-game-idol.is-found small { color: rgba(7, 19, 63, 0.58); }

.admin-game-roster {
  border-top: 2px solid rgba(7, 19, 63, 0.1);
  background: rgba(99, 217, 202, 0.08);
  padding: 11px;
}

.admin-game-roster > header {
  display: flex;
  justify-content: space-between;
  color: var(--ink);
  font-weight: 950;
}

.admin-game-player-list { display: grid; gap: 6px; margin-top: 9px; }
.admin-game-player { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; border: 2px solid rgba(7, 19, 63, 0.1); border-radius: 8px; background: #fff; padding: 6px; }
.admin-game-player > a { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; }
.admin-game-player img { width: 38px; height: 38px; flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 50%; object-fit: cover; }
.admin-game-player a span { display: grid; min-width: 0; }
.admin-game-player a strong { overflow: hidden; text-overflow: ellipsis; }
.admin-game-player a small { color: rgba(7, 19, 63, 0.6); }
.admin-game-player > i { color: rgba(7, 19, 63, 0.48); font-size: 0.75rem; font-style: normal; font-weight: 950; text-transform: uppercase; }
.admin-game-player > i.is-online { color: #12826f; }

.admin-game-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-block: 2px solid rgba(7, 19, 63, 0.1);
  color: var(--ink);
  padding: 10px 13px;
}

.admin-game-toggle > span { display: grid; gap: 2px; }
.admin-game-toggle small { color: rgba(7, 19, 63, 0.62); font-weight: 800; }
.admin-game-toggle input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--pink); }
.admin-game-requirements { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 12px; }
.admin-game-type-card > p { margin: 0; border-top: 2px solid rgba(7, 19, 63, 0.1); padding: 9px 12px; }
.admin-magnate-settings { display: grid; gap: 13px; }
.admin-magnate-settings .admin-game-section-head { margin-bottom: 0; }
.admin-game-usernames { min-height: 150px; resize: vertical; }
.admin-game-empty { display: grid; place-items: center; gap: 5px; min-height: 180px; border: 2px dashed rgba(7, 19, 63, 0.2); border-radius: 9px; color: rgba(7, 19, 63, 0.62); font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif; font-weight: 850; text-align: center; }

.play-game-spilled { --admin-game-color: #ed638e; }
.play-game-madhouse { --admin-game-color: #6733bd; }
.play-game-the-magnate { --admin-game-color: #c58a35; }
.play-game-jungle-hustle { --admin-game-color: #22946f; }
.play-game-palais { --admin-game-color: #3a84d6; }
.play-game-dead-by-dawn { --admin-game-color: #89272d; }
.play-game-primal { --admin-game-color: #cf6338; }
.play-game-ascension { --admin-game-color: #7772ca; }
.play-game-frontier { --admin-game-color: #916330; }

@media (max-width: 940px) {
  .admin-heading {
    display: grid;
    align-items: start;
  }

  .admin-metric-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-panel.is-wide {
    grid-column: auto;
  }

  .admin-game-room-grid,
  .admin-game-type-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1400px) and (min-width: 941px) {
  .admin-dashboard-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-game-tabs .admin-secondary-button { margin-left: 0; }
  .admin-game-section-head { display: grid; align-items: start; }
  .admin-game-section-head > span { text-align: left; }
  .admin-game-room-card > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-game-requirements { grid-template-columns: 1fr; }
  .admin-game-player { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-game-player > i { display: none; }
}

html[data-session-pending="true"] [data-auth-only],
html[data-session-pending="true"] [data-auth-guest],
html[data-session-pending="true"] [data-home-auth-only],
html[data-session-pending="true"] [data-home-guest-only],
html[data-session-pending="true"] [data-session-user],
html[data-session-pending="true"] [data-session-guest] {
  display: none !important;
}

/* Realtime profile page. */
.profile-shell {
  width: min(1260px, calc(100% - 28px));
  margin-top: 14px;
}

.profile-status {
  margin: 0;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(7, 19, 63, 0.68);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  padding: 16px;
  text-align: center;
}

.profile-status.is-error {
  border-color: rgba(240, 92, 157, 0.38);
  background: rgba(255, 240, 248, 0.92);
  color: #9c164e;
}

.profile-status[hidden],
.profile-surface[hidden] {
  display: none;
}

.profile-surface {
  display: grid;
  gap: 18px;
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: stretch;
  border: 3px solid rgba(7, 19, 63, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 253, 0.84)),
    rgba(255, 255, 255, 0.8);
  box-shadow: 7px 7px 0 rgba(7, 19, 63, 0.1);
  padding: clamp(14px, 2vw, 24px);
}

.profile-portrait-column {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.profile-portrait {
  display: grid;
  place-items: end center;
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  border: 3px solid rgba(7, 19, 63, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(218, 227, 252, 0.5), rgba(255, 248, 253, 0.82)),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.profile-portrait img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  object-position: bottom center;
}

.profile-portrait-link:hover,
.profile-portrait-link:focus-visible {
  border-color: rgba(240, 92, 157, 0.5);
  outline: 3px solid rgba(99, 217, 202, 0.35);
  outline-offset: 3px;
}

.profile-presence {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: rgba(7, 19, 63, 0.72);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
}

.profile-presence::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #9aa9d0;
}

.profile-presence.is-online::before {
  background: #30c279;
  box-shadow: 0 0 0 4px rgba(48, 194, 121, 0.16);
}

.profile-social-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-social-links[hidden] {
  display: none;
}

.profile-social-link {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 5px 10px rgba(7, 19, 63, 0.08);
  padding: 6px;
}

.profile-social-link img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.profile-identity {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.profile-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
}

.profile-name-row h1 {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.9;
  overflow-wrap: anywhere;
  text-shadow:
    2px 0 0 #ffffff,
    -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    4px 4px 0 rgba(255, 216, 61, 0.68);
}

.profile-level-card,
.profile-site-rank,
.profile-verified-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 5px 10px rgba(7, 19, 63, 0.08);
}

.profile-level-card {
  min-width: 48px;
  height: 34px;
  background: linear-gradient(180deg, #07133f, #4965a8);
  color: #ffffff;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 950;
}

.profile-site-rank {
  min-width: 42px;
  height: 34px;
  color: var(--pink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 950;
}

.profile-site-rank.is-top-five {
  background: linear-gradient(180deg, #ffe56b, #ffb84d);
  color: #07133f;
}

.profile-site-rank[hidden],
.profile-verified-badge[hidden] {
  display: none;
}

.profile-verified-badge {
  width: 34px;
  height: 34px;
}

.profile-verified-icon {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.profile-balance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-balance > span,
.profile-mail-link,
.profile-friend-request,
.profile-bio-edit {
  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: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.94rem;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 0 5px 12px rgba(7, 19, 63, 0.08);
  padding: 6px 12px;
}

.profile-balance img,
.profile-friend-request img,
.profile-mail-link img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.profile-mail-link {
  width: 38px;
  padding: 6px;
}

.profile-bio-edit,
.profile-friend-request {
  background: linear-gradient(180deg, #ff7db8, var(--pink));
  color: #ffffff;
}

.profile-bio {
  width: min(100%, 720px);
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  padding: 14px;
}

.profile-bio-text {
  color: rgba(7, 19, 63, 0.84);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.38;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.profile-bio-text.is-empty {
  color: rgba(7, 19, 63, 0.46);
  font-style: italic;
}

.profile-edit-form {
  width: min(100%, 860px);
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
  padding: 14px;
}

.profile-edit-form[hidden] {
  display: none;
}

.profile-edit-grid,
.profile-edit-interest-grid,
.profile-edit-social-grid {
  display: grid;
  gap: 12px;
}

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

.profile-edit-field,
.profile-edit-section {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.profile-edit-field.is-wide,
.profile-edit-section.is-wide,
.profile-edit-align {
  grid-column: 1 / -1;
}

.profile-edit-field span,
.profile-edit-align legend,
.profile-edit-section h2 {
  color: rgba(7, 19, 63, 0.68);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  margin: 0;
  text-transform: uppercase;
}

.profile-edit-field input,
.profile-edit-field textarea,
.profile-bulletin-input {
  width: 100%;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.32;
  padding: 9px 10px;
  resize: vertical;
}

.profile-edit-align {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

.profile-edit-align label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
}

.profile-edit-interest-grid,
.profile-edit-social-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-edit-status {
  margin: 10px 0 0;
  color: rgba(7, 19, 63, 0.7);
  font-size: 0.88rem;
  font-weight: 850;
}

.profile-edit-status[hidden] {
  display: none;
}

.profile-edit-actions,
.profile-bio-buttons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-bio-save,
.profile-bio-cancel,
.profile-bulletin-submit,
.profile-friends-see-all,
.profile-buzz-view-all {
  min-height: 34px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
  padding: 7px 12px;
}

.profile-bio-save,
.profile-bulletin-submit {
  background: linear-gradient(180deg, #ff7db8, var(--pink));
  color: #ffffff;
}

.profile-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}

.profile-left-stack,
.profile-right-stack {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.profile-section,
.profile-friends-panel {
  min-width: 0;
  border: 3px solid rgba(7, 19, 63, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 6px 6px 0 rgba(7, 19, 63, 0.08);
  padding: 16px;
}

.profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.profile-section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.92;
  overflow-wrap: anywhere;
  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.6);
}

.profile-section-heading p,
.profile-history-empty,
.profile-buzz-empty,
.profile-friends-empty,
.profile-bulletin-closed {
  margin: 0;
  color: rgba(7, 19, 63, 0.58);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 850;
  line-height: 1.24;
}

.profile-history-list {
  display: grid;
  gap: 10px;
}

.profile-history-card {
  --profile-game-accent: var(--pink);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  border: 2px solid color-mix(in srgb, var(--profile-game-accent) 28%, rgba(7, 19, 63, 0.12));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--profile-game-accent) 18%, #ffffff), rgba(255, 255, 255, 0.88)),
    #ffffff;
  box-shadow: inset 5px 0 0 var(--profile-game-accent);
  padding: 10px 12px;
}

.profile-history-badge {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 10px;
  background: var(--profile-game-accent);
  color: #ffffff;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px 10px rgba(7, 19, 63, 0.12);
}

.profile-history-badge.is-result strong {
  display: block;
  color: #ffffff;
  font-size: 1.7rem;
  line-height: 1;
}

.profile-history-badge.is-result.is-win {
  background: #30b873;
}

.profile-history-badge.is-result.is-loss {
  background: #07133f;
}

.profile-history-badge.is-ongoing {
  background: linear-gradient(180deg, #ff7db8, var(--pink));
}

.profile-history-badge-shape {
  display: none;
}

.profile-game-lockup {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-game-logo {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(7, 19, 63, 0.08);
}

.profile-game-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-game-copy h3,
.profile-game-copy p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-game-copy h3 {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 950;
}

.profile-game-copy p {
  color: rgba(7, 19, 63, 0.62);
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-history-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 72px;
  color: rgba(7, 19, 63, 0.64);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-align: right;
}

.profile-history-meta strong {
  color: var(--ink);
}

.profile-interests-table {
  display: grid;
  gap: 0;
  margin: 0;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.profile-interest-row {
  display: grid;
  grid-template-columns: minmax(110px, 180px) minmax(0, 1fr);
  min-width: 0;
}

.profile-interest-row:nth-child(even) {
  background: rgba(218, 227, 252, 0.38);
}

.profile-interest-row dt,
.profile-interest-row dd {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  line-height: 1.25;
  overflow-wrap: anywhere;
  padding: 10px 12px;
}

.profile-interest-row dt {
  border-right: 2px solid rgba(7, 19, 63, 0.08);
  color: rgba(7, 19, 63, 0.62);
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.profile-interest-row dd {
  font-size: 0.96rem;
  font-weight: 850;
}

.profile-top-friends,
.profile-all-friends-list,
.profile-bulletin-list,
.profile-buzz-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-top-friends {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.profile-all-friends-list {
  display: grid;
  gap: 8px;
}

.profile-friend-card,
.profile-all-friend-card {
  display: grid;
  align-items: center;
  min-width: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-decoration: none;
}

.profile-friend-card {
  justify-items: center;
  gap: 6px;
  min-height: 112px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  padding: 8px 6px;
  text-align: center;
}

.profile-friend-card img {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(218, 227, 252, 0.6);
}

.profile-friend-card span,
.profile-all-friend-card span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-all-friend-card {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 8px;
  min-height: 48px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding: 5px 0;
}

.profile-all-friend-card img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
}

.profile-friends-list-section {
  margin-top: 14px;
}

.profile-friends-list-section[hidden] {
  display: none;
}

.profile-bulletin-form {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.profile-bulletin-form[hidden],
.profile-bulletin-closed[hidden],
.profile-history-empty[hidden],
.profile-buzz-empty[hidden],
.profile-friends-empty[hidden] {
  display: none;
}

.profile-bulletin-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-bulletin-counter {
  color: rgba(7, 19, 63, 0.56);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-bulletin-list {
  display: grid;
  gap: 10px;
}

.profile-bulletin-comment {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.profile-bulletin-comment-avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(218, 227, 252, 0.6);
}

.profile-bulletin-comment-content {
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  padding: 9px 10px;
}

.profile-bulletin-comment-meta,
.profile-bulletin-comment-body {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  line-height: 1.28;
}

.profile-bulletin-comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: rgba(7, 19, 63, 0.54);
  font-size: 0.8rem;
  font-weight: 900;
}

.profile-bulletin-comment-meta a {
  color: var(--ink);
  text-decoration: none;
}

.profile-bulletin-comment-body {
  margin-top: 5px;
  font-size: 0.94rem;
  font-weight: 800;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .profile-hero,
  .profile-content-grid {
    grid-template-columns: 1fr;
  }

  .profile-portrait-column {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    align-items: start;
  }

  .profile-social-links {
    align-self: start;
    justify-content: flex-start;
  }

  .profile-edit-interest-grid,
  .profile-edit-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .profile-shell {
    width: min(100% - 18px, 1260px);
    padding: 12px;
  }

  .profile-hero,
  .profile-section,
  .profile-friends-panel {
    padding: 12px;
  }

  .profile-portrait-column,
  .profile-edit-grid,
  .profile-edit-interest-grid,
  .profile-edit-social-grid {
    grid-template-columns: 1fr;
  }

  .profile-portrait {
    min-height: 230px;
  }

  .profile-name-row h1 {
    font-size: clamp(2.45rem, 16vw, 4.1rem);
  }

  .profile-balance {
    align-items: stretch;
  }

  .profile-history-card {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .profile-history-meta {
    grid-column: 1 / -1;
    justify-items: start;
    grid-template-columns: repeat(3, auto);
    min-width: 0;
    text-align: left;
  }

  .profile-history-badge {
    width: 50px;
    height: 50px;
  }

  .profile-top-friends {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-interest-row {
    grid-template-columns: 1fr;
  }

  .profile-interest-row dt {
    border-right: 0;
    border-bottom: 1px solid rgba(7, 19, 63, 0.08);
    padding-bottom: 5px;
  }

  .profile-interest-row dd {
    padding-top: 7px;
  }
}

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

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

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

@font-face {
  font-family: "Klathy Blur";
  src: url("/assets/site/fonts/KLATHY-Blur.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

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

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

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

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

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

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

@font-face {
  font-family: "Decohead";
  src: url("/assets/carryover/fonts/Decohead.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

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

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

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

@font-face {
  font-family: "You Are Scared";
  src: url("/assets/carryover/fonts/You%20Are%20Scared.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

: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-margin-left: clamp(16px, 2.2vw, 46px);
  --main-tab-height: 34px;
  --feature-hero-height: 280px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  overscroll-behavior-y: none;
}

body {
  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;
}

.maintenance-page {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34) 2px, transparent 2px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.34) 2px, transparent 2px),
    radial-gradient(circle at 28% 18%, rgba(255, 216, 61, 0.34), transparent 22%),
    radial-gradient(circle at 74% 72%, rgba(99, 217, 202, 0.28), transparent 28%),
    var(--bg);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.maintenance-shell {
  display: grid;
  width: min(560px, 100%);
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.maintenance-logo {
  display: block;
  width: min(255px, 76vw);
  height: auto;
  filter:
    drop-shadow(0 2px 0 #ffffff)
    drop-shadow(0 7px 0 rgba(7, 19, 63, 0.16));
}

.maintenance-panel {
  width: 100%;
  box-sizing: border-box;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 253, 0.96));
  box-shadow:
    8px 8px 0 rgba(240, 92, 157, 0.24),
    14px 14px 0 rgba(99, 217, 202, 0.2),
    0 18px 42px rgba(7, 19, 63, 0.14);
  padding: clamp(24px, 6vw, 40px);
  text-align: center;
}

.maintenance-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  padding: 5px 12px 4px;
  text-transform: uppercase;
}

.maintenance-panel h1 {
  max-width: 11ch;
  margin: 0 auto;
  color: var(--ink);
  font-family: "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(3.25rem, 10vw, 5.6rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.82;
  text-shadow:
    2px 0 0 #ffffff,
    -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    4px 4px 0 rgba(240, 92, 157, 0.62);
}

.maintenance-copy {
  max-width: 34ch;
  margin: 20px auto 0;
  color: rgba(7, 19, 63, 0.72);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.16rem;
  font-weight: 900;
  line-height: 1.2;
}

.maintenance-login-button {
  display: inline-flex;
  margin-top: 22px;
  transition: filter 140ms ease, transform 140ms ease;
}

.maintenance-login-button:hover,
.maintenance-login-button:focus-visible {
  outline: 0;
  transform: translate(-1px, -2px);
  filter: saturate(1.08);
}

.maintenance-login-button img {
  display: block;
  width: min(190px, 60vw);
  height: auto;
  filter:
    drop-shadow(3px 3px 0 rgba(99, 217, 202, 0.72))
    drop-shadow(6px 6px 0 rgba(7, 19, 63, 0.16));
}

.maintenance-login-shell {
  width: min(500px, 100%);
}

.maintenance-auth-card {
  width: 100%;
  box-sizing: border-box;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 253, 0.96));
  box-shadow:
    8px 8px 0 rgba(240, 92, 157, 0.24),
    14px 14px 0 rgba(99, 217, 202, 0.2),
    0 18px 40px rgba(7, 19, 63, 0.14);
  padding: clamp(22px, 6vw, 34px);
}

.maintenance-login-submit {
  display: inline-flex;
  justify-self: center;
  border: 0;
  background: transparent;
  padding: 4px;
  transition: filter 140ms ease, transform 140ms ease;
}

.maintenance-login-submit:hover,
.maintenance-login-submit:focus-visible {
  outline: 0;
  transform: translate(-1px, -2px);
  filter: saturate(1.08);
}

.maintenance-login-submit img {
  display: block;
  width: min(185px, 58vw);
  height: auto;
  filter:
    drop-shadow(3px 3px 0 rgba(99, 217, 202, 0.72))
    drop-shadow(6px 6px 0 rgba(7, 19, 63, 0.16));
}

@media (max-width: 520px) {
  .maintenance-panel h1 {
    font-size: 3.2rem;
  }
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.archive-game-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0, rgba(151, 181, 255, 0.2), transparent 42rem),
    #f7f7ff;
  color: #08143f;
}

.archive-game-shell {
  width: min(980px, calc(100% - 40px));
  margin: 34px auto 80px;
}

.archive-game-status {
  padding: 42px;
  text-align: center;
  font: 600 1.25rem/1.4 "Barlow Semi Condensed", Arial, sans-serif;
  color: #4965a8;
}

.archive-game-status.is-error {
  color: #a2213d;
}

.archive-game-surface {
  overflow: hidden;
  border: 1px solid rgba(73, 101, 168, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 50px rgba(22, 39, 93, 0.13);
}

.archive-game-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 34px 40px;
  border-bottom: 1px solid rgba(73, 101, 168, 0.18);
  background: linear-gradient(135deg, rgba(236, 240, 255, 0.98), rgba(255, 255, 255, 0.95));
}

.archive-game-logo {
  width: 132px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(10, 24, 70, 0.17));
}

.archive-game-kicker {
  margin: 0 0 3px;
  color: #4965a8;
  font: 700 1rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.archive-game-hero h1 {
  margin: 0;
  font: 700 clamp(2.6rem, 7vw, 4.8rem)/0.95 "Froople", "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: -0.03em;
}

.archive-game-meta {
  display: flex;
  gap: 9px;
  margin: 12px 0 0;
  color: #4965a8;
  font: 600 1.15rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
}

.archive-game-results {
  padding: 32px 40px 42px;
}

.archive-game-results-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.archive-game-results-heading h2 {
  margin: 0;
  font: 700 2.15rem/1 "Froople", "Barlow Semi Condensed", Arial, sans-serif;
}

.archive-game-results-heading span {
  color: #7385b3;
  font: 600 1rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
}

.archive-game-player-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.archive-game-player {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  min-height: 70px;
  overflow: hidden;
  border: 1px solid rgba(73, 101, 168, 0.17);
  border-radius: 12px;
  background: #fafbff;
}

.archive-game-player-placement {
  display: grid;
  align-self: stretch;
  place-items: center;
  background: #edf1ff;
  color: #243f89;
  font: 700 1.28rem/1 "Froople", "Barlow Semi Condensed", Arial, sans-serif;
}

.archive-game-player-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 12px;
  color: #08143f;
  text-decoration: none;
  font: 600 1.2rem/1.15 "Barlow Semi Condensed", Arial, sans-serif;
}

.archive-game-player-profile:hover span,
.archive-game-player-profile:focus-visible span {
  color: #4965a8;
  text-decoration: underline;
}

.archive-game-player-avatar {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(22, 39, 93, 0.16);
}

@media (max-width: 680px) {
  .archive-game-shell {
    width: min(100% - 20px, 980px);
    margin-top: 18px;
  }

  .archive-game-hero {
    gap: 18px;
    padding: 24px 20px;
  }

  .archive-game-logo {
    width: 86px;
    height: 86px;
  }

  .archive-game-results {
    padding: 24px 18px 30px;
  }

  .archive-game-player-list {
    grid-template-columns: 1fr;
  }
}

.site-header {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 8px;
  overflow: visible;
  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;
  padding: 12px 18px 10px;
}

.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-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:
    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));
}

.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,
.main-tab,
.pill-button,
.primary-button,
.chat-form button,
.create-panel button,
.room-card button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  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);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  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);
  padding: 5px 14px 5px 10px;
}

.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 button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 10px;
}

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

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

.message-link {
  width: 36px;
  min-width: 36px;
  min-height: 32px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.message-link:hover,
.message-link:focus-visible {
  background: transparent;
  box-shadow: none;
}

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

.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;
  font-weight: 900;
  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);
}

.account-icon {
  display: block;
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-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.16));
  transition:
    filter 150ms ease,
    transform 150ms ease;
}

.message-link:hover .account-icon,
.message-link:focus-visible .account-icon {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(0 3px 4px rgba(7, 19, 63, 0.18));
  transform: translateY(-1px);
}

.message-link strong {
  display: grid;
  place-items: center;
  position: absolute;
  top: -6px;
  right: -7px;
  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);
}

.message-link strong[hidden] {
  display: none;
}

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

.main-tab {
  gap: 5px;
  min-width: max-content;
  min-height: var(--main-tab-height);
}

.main-tab img {
  display: block;
  width: 20px;
  height: 20px;
  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.is-active,
.primary-button,
.create-panel button[type="submit"] {
  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);
}

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

.realtime-shell {
  min-height: calc(100vh - 180px);
}

.is-hidden {
  display: none !important;
}

html.is-starting-game-route[data-starting-game="dead-by-dawn"] body {
  --dbd-red: #ff0a45;
  --dbd-cream: #fff4e6;
  --dbd-muted: #b99068;
  --dbd-panel: rgba(20, 16, 14, 0.9);
  --dbd-line: rgba(255, 244, 230, 0.22);
  --dbd-panel-strong: rgba(20, 16, 14, 0.94);
  --dbd-panel-soft: rgba(39, 30, 27, 0.86);
  --dbd-border: rgba(185, 144, 104, 0.52);
  --dbd-border-hot: rgba(255, 10, 69, 0.72);
  background:
    linear-gradient(180deg, rgba(9, 8, 7, 0.46), rgba(9, 8, 7, 0.9)),
    url("/assets/carryover/game-assets/deadbydawn/background.png") center center / cover fixed no-repeat,
    #10060a;
  color: var(--dbd-cream);
}

html.is-starting-game-route[data-starting-game="dead-by-dawn"] .site-header {
  background: transparent;
  box-shadow: none;
}

html.is-starting-game-route [data-view="home"],
html.is-starting-game-route .home-retro-footer {
  display: none !important;
}

html.is-starting-game-route [data-view="game"] {
  display: block !important;
}

.main-tab[hidden],
.pill-button[hidden],
.timer[hidden],
.role-tag[hidden],
.account-link[hidden],
[data-auth-only][hidden],
[data-auth-guest][hidden],
[data-session-guest][hidden],
[data-session-user][hidden],
[data-auth-status][hidden],
[data-auth-panel][hidden] {
  display: none !important;
}

html:not([data-authenticated="true"]) [data-auth-only],
html:not([data-authenticated="true"]) [data-home-auth-only],
html:not([data-authenticated="true"]) [data-session-user] {
  display: none !important;
}

html[data-authenticated="true"] [data-auth-guest],
html[data-authenticated="true"] [data-home-guest-only],
html[data-authenticated="true"] [data-session-guest] {
  display: none !important;
}

.realtime-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 16px;
  margin-bottom: 18px;
}

.realtime-window,
.realtime-hero-card,
.room-card,
.panel {
  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);
}

.realtime-hero-card {
  min-height: 302px;
  overflow: hidden;
}

.home-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.12);
  background: linear-gradient(180deg, rgba(255, 216, 61, 0.9), rgba(255, 216, 61, 0.62));
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  padding: 5px 10px;
}

.realtime-hero-body {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 264px;
  padding: 24px;
  text-align: center;
}

.home-eyebrow {
  margin: 0 0 5px;
  color: var(--pink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dbd-logo {
  display: block;
  width: min(100%, 420px);
  max-height: 160px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
    drop-shadow(2px 2px 0 rgba(240, 92, 157, 0.24))
    drop-shadow(0 8px 12px rgba(7, 19, 63, 0.16));
}

.connection {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 96px;
  margin-top: 14px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
}

.connection.is-online {
  background: rgba(99, 217, 202, 0.28);
  color: #16796e;
}

.connection.is-offline {
  background: rgba(240, 92, 157, 0.18);
  color: var(--pink);
}

.create-panel {
  display: grid;
  align-content: start;
  gap: 13px;
  overflow: hidden;
}

.create-panel label,
.create-panel button,
.create-panel .form-status {
  margin-inline: 14px;
}

.create-panel label:first-of-type {
  margin-top: 14px;
}

.create-panel .form-status {
  margin-bottom: 14px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
}

input,
textarea {
  width: 100%;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  padding: 9px 10px;
}

input:focus,
textarea:focus {
  border-color: rgba(240, 92, 157, 0.58);
  box-shadow: 0 0 0 3px rgba(240, 92, 157, 0.12);
}

textarea {
  resize: none;
}

.form-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.room-list-section {
  display: grid;
  gap: 12px;
}

.section-heading,
.game-header,
.panel-heading,
.phase-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-heading h2,
.panel-heading h2,
.phase-strip h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.05;
}

.phase-role-title {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.room-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.room-card h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.38rem;
  font-weight: 900;
}

.room-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.room-card form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.chat-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 8px;
  flex: 0 0 auto;
  margin-top: auto;
}

.chat-emoji-button {
  min-width: 34px;
  padding: 0;
}

.chat-emoji-button img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
}

.chat-emoji-picker {
  position: absolute;
  right: 74px;
  bottom: calc(100% + 8px);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(8, 34px);
  gap: 4px;
  padding: 8px;
}

.chat-emoji-picker[hidden] {
  display: none;
}

.chat-emoji-option {
  min-width: 30px;
  min-height: 30px;
  padding: 0;
}

.chat-emoji-option-image,
.message-custom-emoji {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.message-custom-emoji {
  display: inline-block;
  vertical-align: -0.25em;
}

.message-mention {
  color: var(--pink);
  font-weight: 900;
}

.message-mention.is-everyone {
  border-radius: 5px;
  background: rgba(240, 92, 157, 0.12);
  padding: 0 3px;
}

.game-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px 14px;
}

.game-title-lockup {
  grid-column: 2;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.game-header-actions {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
}

.dbd-lobby-leave-button {
  min-width: 128px;
  min-height: 38px;
  border: 2px solid rgba(255, 10, 69, 0.72);
  border-radius: 8px;
  background: rgba(15, 11, 10, 0.9);
  color: var(--dbd-cream, #fff4e6);
  font-weight: 900;
  padding: 8px 14px;
  text-transform: uppercase;
}

.dbd-lobby-leave-button:hover,
.dbd-lobby-leave-button:focus-visible {
  border-color: #ff0a45;
  background: rgba(255, 10, 69, 0.16);
}

.dbd-lobby-leave-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.game-title-logo-heading {
  margin: 0;
  line-height: 0;
}

.game-number-help-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: -6px;
  line-height: 1;
}

.game-number-help-row .game-number-meta {
  margin: 0;
}

.game-number-help-row .game-explainer-help-link {
  width: 20px;
  min-width: 20px;
  height: 20px;
  font-size: 12px;
}

.game-title-logo {
  display: block;
  width: clamp(118px, 14vw, 178px);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(255, 245, 228, 0.28))
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.34));
}

.game-title-text {
  display: block;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 0.95;
  text-align: center;
}

.game-title-text[hidden] {
  display: none;
}

.game-explainer-help-row {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 6px 0 0;
  line-height: 1;
}

.game-explainer-help-row.is-spilled-lite {
  width: min(100%, 190px);
  margin: -8px 0;
}

.game-explainer-help-link {
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid rgba(165, 165, 165, 0.65);
  border-radius: 50%;
  background: rgba(40, 40, 40, 0.5);
  color: rgba(220, 220, 220, 0.76);
  font: 800 14px/1 Arial, Helvetica, sans-serif;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.game-explainer-help-link:hover,
.game-explainer-help-link:focus-visible {
  border-color: rgba(235, 235, 235, 0.92);
  color: #fff;
  opacity: 1;
  transform: translateY(-1px);
}

.message-inline-link {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  overflow-wrap: anywhere;
}

.dbd-ready-check-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 3, 4, 0.82);
  backdrop-filter: blur(7px);
}

.dbd-ready-check-card {
  width: min(520px, 100%);
  border: 3px solid rgba(255, 244, 230, 0.82);
  border-radius: 18px;
  padding: clamp(28px, 5vw, 48px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 10, 69, 0.2), transparent 48%),
    linear-gradient(180deg, #251b1d, #100b0c);
  color: #fff4e6;
  text-align: center;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.64), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dbd-ready-check-eyebrow,
.dbd-ready-check-copy,
.dbd-ready-check-progress {
  margin: 0;
}

.dbd-ready-check-eyebrow {
  color: #ff0a45;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dbd-ready-check-title {
  margin: 10px 0 12px;
  color: #fff4e6;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(2.3rem, 7vw, 4.3rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.dbd-ready-check-copy {
  color: rgba(255, 244, 230, 0.78);
  font-weight: 700;
  line-height: 1.45;
}

.dbd-ready-check-countdown {
  display: block;
  margin: 22px 0 6px;
  color: #ff0a45;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(3rem, 10vw, 5.8rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dbd-ready-check-progress {
  color: rgba(255, 244, 230, 0.75);
  font-weight: 800;
}

.dbd-ready-check-button {
  min-width: min(280px, 100%);
  min-height: 58px;
  margin-top: 24px;
  border: 2px solid #ffb4c5;
  border-radius: 10px;
  background: linear-gradient(180deg, #ff1d57, #bb0031);
  color: #fff;
  font: 900 1.15rem/1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  box-shadow: 0 8px 0 #62001a, 0 16px 30px rgba(0, 0, 0, 0.36);
}

.dbd-ready-check-button:disabled {
  border-color: rgba(255, 244, 230, 0.38);
  background: #403738;
  color: rgba(255, 244, 230, 0.72);
  box-shadow: 0 5px 0 #171112;
  cursor: default;
}

.game-number-meta {
  margin: -4px 0 0;
  color: rgba(255, 244, 230, 0.76);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.timer {
  display: grid;
  place-items: center;
  min-width: 86px;
  min-height: 48px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 216, 61, 0.72), rgba(255, 255, 255, 0.62));
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 2px 0 rgba(7, 19, 63, 0.12);
}

.phase-copy {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}

.game-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(420px, 1.36fr) minmax(260px, 0.92fr);
  grid-template-areas: "roster chat actions";
  gap: 14px;
  align-items: stretch;
  min-height: clamp(620px, calc(100vh - 330px), 760px);
}

.panel {
  min-width: 0;
  min-height: 0;
  padding: 14px;
}

.roster-panel {
  grid-area: roster;
}

.roster {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.player-row {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
  padding: 7px 9px;
}

.player-row.can-private-chat {
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.player-row.can-private-chat:hover,
.player-row.is-private-target {
  border-color: rgba(240, 92, 157, 0.5);
  background: rgba(255, 255, 255, 0.74);
}

.player-row.is-dead {
  opacity: 0.55;
}

.player-row.is-role-mark-open {
  z-index: 80;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(73, 101, 168, 0.45);
}

.dot.is-online {
  background: var(--aqua);
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.18);
}

.player-avatar {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  object-fit: cover;
  object-position: 50% 18%;
  box-shadow:
    0 0 0 2px rgba(73, 101, 168, 0.16),
    0 2px 0 rgba(7, 19, 63, 0.1);
  object-fit: cover;
  overflow: hidden;
}

.player-avatar.is-online {
  box-shadow:
    0 0 0 2px rgba(99, 217, 202, 0.74),
    0 0 12px rgba(99, 217, 202, 0.28),
    0 2px 0 rgba(7, 19, 63, 0.1);
}

.player-profile-link {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-decoration: none;
}

.player-profile-link:focus-visible {
  outline: 3px solid rgba(240, 92, 157, 0.72);
  outline-offset: 3px;
}

.player-name-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.player-private-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: var(--pink);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 5px;
}

.role-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 38px;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.role-icon {
  width: 32px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.26));
}

.role-mark-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.role-mark-button:hover,
.role-mark-button:focus-visible {
  transform: translateY(-1px) scale(1.05);
  outline: none;
}

.role-mark-button.is-marked .role-icon {
  filter:
    drop-shadow(0 0 6px rgba(240, 92, 157, 0.45))
    drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.26));
}

.role-mark-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 120;
  display: grid;
  width: 156px;
  gap: 4px;
  border: 2px solid rgba(7, 19, 63, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 5px 6px 0 rgba(7, 19, 63, 0.18);
  padding: 6px;
}

.role-mark-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 5px 6px;
  text-align: left;
}

.role-mark-option img {
  width: 22px;
  height: 24px;
  object-fit: contain;
}

.role-mark-option:hover,
.role-mark-option:focus-visible,
.role-mark-option.is-selected {
  border-color: rgba(240, 92, 157, 0.5);
  background: rgba(240, 92, 157, 0.12);
  outline: none;
}

.start-button {
  width: 100%;
}

.action-panel {
  grid-area: actions;
  display: grid;
  gap: 12px;
  align-content: start;
}

.role-card,
.result-row,
.target-button,
.message {
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 2px 0 rgba(7, 19, 63, 0.06);
}

.role-card {
  position: relative;
  display: grid;
  min-width: 0;
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: left;
  padding: 13px;
}

.role-card.has-role-card {
  aspect-ratio: 27 / 20;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}

.role-card-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.role-card-art[hidden] {
  display: none;
}

.role-card-name {
  display: block;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
}

.role-card.has-role-card .role-card-name {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  max-width: calc(100% - 24px);
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: "Naleni", "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.4rem, 2.7vw, 2.05rem);
  line-height: 0.9;
  text-align: right;
}

.role-card-summary {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.role-card-summary-line,
.role-card-summary-win {
  display: block;
}

.role-card-summary-line {
  margin: 0 0 10px;
}

.role-card-summary-win {
  margin-top: 2px;
}

.role-card.has-role-card .role-card-summary {
  position: absolute;
  z-index: 3;
  inset: 14px;
  display: none;
  align-content: start;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.18;
}

.role-card.has-role-card.is-showing-description .role-card-summary {
  display: grid;
}

.role-card h3 {
  margin: 0 0 5px;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
}

.role-card p:last-child {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.target-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 9px;
}

.vote-ledger {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.vote-action-control {
  justify-self: center;
  position: relative;
  display: inline-block;
  min-width: min(100%, 260px);
}

.vote-action-select {
  width: 100%;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: var(--yellow);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
  padding: 10px 34px 11px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(7, 19, 63, 0.12);
}

.vote-action-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.vote-action-select:focus {
  outline: none;
  border-color: rgba(240, 92, 157, 0.58);
  box-shadow:
    0 3px 0 rgba(7, 19, 63, 0.12),
    0 0 0 3px rgba(240, 92, 157, 0.14);
}

.vote-action-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  display: grid;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 3px 0 rgba(7, 19, 63, 0.12),
    0 16px 26px rgba(7, 19, 63, 0.16);
  padding: 4px;
}

.vote-action-menu[hidden] {
  display: none;
}

.vote-action-option {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  padding: 8px 10px;
}

.vote-action-option:hover,
.vote-action-option.is-selected {
  background: rgba(240, 92, 157, 0.13);
  color: var(--pink);
}

.vote-ledger-rows {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.vote-ledger-row {
  display: grid;
  grid-template-columns: 32px minmax(70px, 0.72fr) auto minmax(92px, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: default;
  padding: 4px 0;
}

button.vote-ledger-row {
  cursor: pointer;
}

.vote-ledger-row.is-selected {
  color: var(--pink);
}

.vote-ledger-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(73, 101, 168, 0.86);
  color: #fff;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
}

.vote-ledger-name,
.vote-ledger-verb,
.vote-ledger-target {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vote-ledger-summary {
  grid-template-columns: 32px minmax(0, 1fr);
  margin-top: 8px;
  border-top: 1px solid rgba(7, 19, 63, 0.12);
  padding-top: 10px;
}

.vote-ledger-summary .vote-ledger-count {
  background: rgba(80, 144, 45, 0.92);
}

.target-button {
  display: grid;
  align-items: start;
  gap: 4px;
  min-height: 74px;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  text-align: left;
  padding: 11px;
}

.target-button.is-selected {
  border-color: rgba(240, 92, 157, 0.58);
  background: linear-gradient(180deg, rgba(255, 216, 61, 0.38), rgba(255, 255, 255, 0.72));
}

.target-button small {
  color: var(--muted);
  font-weight: 900;
}

.results {
  display: grid;
  gap: 8px;
}

.result-row {
  color: var(--muted);
  font-weight: 850;
  padding: 10px;
}

.chat-panel {
  grid-area: chat;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: clamp(620px, calc(100vh - 330px), 760px);
  max-height: none;
  overflow: hidden;
}

.chat-phase-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.chat-phase-tab {
  flex: 0 0 auto;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
}

.chat-phase-tab.is-active {
  border-color: rgba(240, 92, 157, 0.58);
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
}

.private-chat-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
}

.private-chat-strip[hidden] {
  display: none;
}

.private-chat-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
}

.private-chat-strip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-chat-strip strong {
  color: var(--ink);
}

.private-chat-strip button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 2px;
}

.chat-feed {
  display: grid;
  align-content: start;
  flex: 1 1 0;
  gap: 9px;
  height: 0;
  min-height: 0;
  margin: 12px 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}

.message {
  padding: 10px;
}

.message-avatar {
  display: none;
}

.message-content {
  min-width: 0;
}

.message.is-system {
  border-color: rgba(255, 216, 61, 0.72);
  background: rgba(255, 240, 191, 0.52);
}

.message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  font-weight: 900;
}

.message-body {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

body.is-dbd-game-view {
  --dbd-red: #ff0a45;
  --dbd-cream: #fff4e6;
  --dbd-muted: #b99068;
  --dbd-panel: rgba(20, 16, 14, 0.9);
  --dbd-line: rgba(255, 244, 230, 0.22);
  --dbd-panel-strong: rgba(20, 16, 14, 0.94);
  --dbd-panel-soft: rgba(39, 30, 27, 0.86);
  --dbd-border: rgba(185, 144, 104, 0.52);
  --dbd-border-hot: rgba(255, 10, 69, 0.72);
  background:
    linear-gradient(180deg, rgba(9, 8, 7, 0.46), rgba(9, 8, 7, 0.9)),
    url("/assets/carryover/game-assets/deadbydawn/background.png") center center / cover fixed no-repeat,
    #10060a;
  color: var(--dbd-cream);
}

body.is-dbd-game-view .site-header {
  background: transparent;
  box-shadow: none;
}

body.is-dbd-game-view .main-tab,
body.is-dbd-game-view .account-link {
  border-color: rgba(185, 144, 104, 0.66);
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.1), rgba(255, 244, 230, 0.02) 42%),
    linear-gradient(180deg, rgba(49, 39, 34, 0.96), rgba(18, 14, 13, 0.96));
  color: var(--dbd-cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.1),
    0 2px 0 rgba(0, 0, 0, 0.34),
    0 0 14px rgba(185, 144, 104, 0.1);
}

body.is-dbd-game-view .main-tab img,
body.is-dbd-game-view .account-link img,
body.is-dbd-game-view .message-link img {
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 7px rgba(255, 10, 69, 0.16));
}

body.is-dbd-game-view .main-tab.is-active,
body.is-dbd-game-view .main-tab:hover,
body.is-dbd-game-view .account-link:hover {
  border-color: var(--dbd-border-hot);
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.13), rgba(255, 244, 230, 0.03) 42%),
    linear-gradient(180deg, rgba(91, 16, 30, 0.98), rgba(28, 13, 15, 0.98));
  color: var(--dbd-cream);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.38),
    0 0 18px rgba(255, 10, 69, 0.18);
}

html.is-starting-game-route[data-starting-game="dead-by-dawn"] .home-shell.realtime-shell,
body.is-dbd-game-view .home-shell.realtime-shell {
  width: min(1540px, calc(100% - 56px));
  min-height: auto;
  margin: 28px auto 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.is-dbd-game-view .home-retro-footer {
  display: none;
}

body.is-spilled-game-view .home-retro-footer {
  display: none;
}

html.is-starting-game-route[data-starting-game="madhouse"] .home-shell.realtime-shell,
body.is-madhouse-game-view .home-shell.realtime-shell {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.is-starting-game-route[data-starting-game="madhouse"] [data-view="game"],
body.is-madhouse-game-view [data-view="game"] {
  min-height: 100vh;
}

html.is-starting-game-route[data-starting-game="madhouse"] .home-retro-footer,
body.is-madhouse-game-view .home-retro-footer {
  display: none !important;
}

body.is-dbd-game-view .game-grid {
  grid-template-columns: minmax(220px, 0.58fr) minmax(680px, 1.94fr) minmax(250px, 0.72fr);
  gap: 16px;
  height: max(760px, calc(100vh - 245px));
  min-height: max(760px, calc(100vh - 245px));
}

body.is-dbd-game-view .action-panel {
  display: flex;
  flex-direction: column;
  align-content: normal;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

body.is-dbd-game-view .panel {
  border: 3px solid var(--dbd-line);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.08), rgba(255, 244, 230, 0.02)),
    var(--dbd-panel-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.32);
}

body.is-dbd-game-view .game-header {
  grid-template-columns: minmax(128px, 1fr) auto minmax(128px, 1fr);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 18px;
}

body.is-dbd-game-view .game-header-actions {
  justify-self: end;
}

body.is-dbd-game-view .game-title-logo {
  width: clamp(270px, 31vw, 460px);
  max-height: 150px;
  filter:
    drop-shadow(0 2px 0 rgba(16, 14, 13, 0.88))
    drop-shadow(0 0 18px rgba(255, 10, 69, 0.28));
}

body.is-dbd-game-view .game-header h1,
body.is-dbd-game-view .section-heading h2,
body.is-dbd-game-view .panel-heading h2,
body.is-dbd-game-view .phase-strip h2,
body.is-dbd-game-view .role-card h3,
body.is-dbd-game-view .message-body,
body.is-dbd-game-view .target-button {
  color: var(--dbd-cream);
}

body.is-dbd-game-view .home-eyebrow,
body.is-dbd-game-view .role-card p:last-child,
body.is-dbd-game-view .result-row,
body.is-dbd-game-view .message-meta,
body.is-dbd-game-view .target-button small,
body.is-dbd-game-view .role-tag,
body.is-dbd-game-view .form-status,
body.is-dbd-game-view .panel-heading span,
body.is-dbd-game-view .game-number-meta {
  color: var(--dbd-muted);
}

body.is-dbd-game-view .home-eyebrow {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border: 1px solid rgba(255, 10, 69, 0.46);
  border-radius: 999px;
  background: rgba(255, 10, 69, 0.1);
  color: var(--dbd-red);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 8px 5px;
  text-shadow: 0 1px 0 rgba(16, 14, 13, 0.72);
  text-transform: uppercase;
}

body.is-dbd-game-view .timer,
body.is-dbd-game-view .role-card,
body.is-dbd-game-view .target-button,
body.is-dbd-game-view .result-row,
body.is-dbd-game-view .message {
  border: 1px solid var(--dbd-border);
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.07), transparent 52%),
    rgba(35, 27, 24, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.06),
    0 2px 0 rgba(0, 0, 0, 0.22);
}

body.is-dbd-game-view .timer {
  display: block;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--dbd-muted);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: none;
}

body.is-dbd-game-view .player-row {
  z-index: 0;
  border: 1px solid rgba(185, 144, 104, 0.44);
  background: rgba(35, 27, 24, 0.9);
  color: var(--dbd-cream);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.05),
    0 2px 0 rgba(0, 0, 0, 0.24);
}

body.is-dbd-game-view .player-row.can-private-chat:hover,
body.is-dbd-game-view .player-row.is-private-target {
  transform: translateY(-1px);
  border-color: var(--dbd-border-hot);
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.08), rgba(255, 244, 230, 0.02)),
    rgba(58, 31, 32, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.08),
    0 3px 0 rgba(0, 0, 0, 0.28),
    0 0 16px rgba(255, 10, 69, 0.12);
}

body.is-dbd-game-view .player-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--dbd-cream);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-dbd-game-view .player-row.has-private-unread {
  border-color: var(--dbd-border-hot);
}

body.is-dbd-game-view .player-private-unread {
  border-color: rgba(255, 244, 230, 0.94);
  background: var(--dbd-red);
  color: var(--dbd-cream);
  box-shadow: 0 0 12px rgba(255, 10, 69, 0.34);
}

body.is-dbd-game-view .player-row.is-dead {
  opacity: 0.72;
}

body.is-dbd-game-view .player-row.is-role-mark-open {
  z-index: 120;
}

body.is-dbd-game-view .player-row.is-dead strong {
  color: rgba(255, 244, 230, 0.62);
}

body.is-dbd-game-view .player-avatar {
  border: 2px solid rgba(185, 144, 104, 0.88);
  background: rgba(255, 244, 230, 0.28);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.32);
}

body.is-dbd-game-view .player-avatar.is-online {
  border-color: var(--dbd-red);
  box-shadow:
    0 0 14px rgba(255, 10, 69, 0.34),
    0 2px 0 rgba(0, 0, 0, 0.32);
}

body.is-dbd-game-view .role-tag {
  color: rgba(190, 139, 94, 0.9);
}

body.is-dbd-game-view .role-icon {
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.38));
}

body.is-dbd-game-view .player-row.is-dead .role-icon {
  filter: grayscale(0.18) saturate(0.82) drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.38));
  opacity: 0.9;
}

body.is-dbd-game-view .role-mark-button.is-marked .role-icon {
  filter:
    drop-shadow(0 0 8px rgba(255, 10, 69, 0.5))
    drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.38));
}

body.is-dbd-game-view .role-mark-menu {
  z-index: 240;
  border-color: rgba(126, 90, 62, 0.9);
  background:
    linear-gradient(180deg, rgba(55, 35, 34, 0.98), rgba(23, 18, 16, 0.98));
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.45),
    0 0 24px rgba(0, 0, 0, 0.28);
}

body.is-dbd-game-view .role-mark-option {
  color: var(--dbd-cream);
}

body.is-dbd-game-view .role-mark-option:hover,
body.is-dbd-game-view .role-mark-option:focus-visible,
body.is-dbd-game-view .role-mark-option.is-selected {
  border-color: rgba(255, 10, 69, 0.6);
  background: rgba(255, 10, 69, 0.14);
  color: var(--dbd-red);
}

body.is-dbd-game-view .role-card {
  border-color: rgba(190, 139, 94, 0.78);
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 10, 69, 0.1), rgba(255, 10, 69, 0) 44%),
    linear-gradient(180deg, rgba(255, 244, 230, 0.08), rgba(255, 244, 230, 0.02) 48%, rgba(10, 8, 8, 0.12)),
    rgba(35, 27, 24, 0.94);
}

body.is-dbd-game-view .role-card.has-role-card {
  flex: 0 0 auto;
  height: clamp(150px, 18vh, 210px);
  aspect-ratio: auto;
  border: 2px solid rgba(190, 139, 94, 0.78);
  border-radius: 10px;
  background: rgba(12, 9, 8, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.08),
    0 3px 0 rgba(0, 0, 0, 0.32),
    0 0 22px rgba(255, 10, 69, 0.08);
  margin-bottom: 0;
}

body.is-dbd-game-view .role-card.has-role-card:hover {
  border-color: var(--dbd-border-hot);
}

body.is-dbd-game-view .role-card-art {
  height: 100%;
  filter: saturate(1.06) contrast(1.04);
  object-position: center 38%;
  transition: filter 160ms ease, transform 160ms ease;
}

body.is-dbd-game-view .role-card.has-role-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 4, 4, 0) 52%, rgba(5, 4, 4, 0.54)),
    radial-gradient(circle at 82% 82%, rgba(255, 10, 69, 0.15), transparent 42%);
  pointer-events: none;
}

body.is-dbd-game-view .role-card.has-role-card.is-showing-description .role-card-art {
  filter: brightness(0.24) saturate(0.84) blur(1px);
  transform: scale(1.025);
}

body.is-dbd-game-view .role-card.has-role-card.is-showing-description::after {
  background: rgba(12, 9, 8, 0.58);
}

body.is-dbd-game-view .role-card.has-role-card .role-card-name {
  display: none;
  color: var(--dbd-red);
  right: 14px;
  bottom: 12px;
  font-size: clamp(1.05rem, 1.45vw, 1.55rem);
  -webkit-text-stroke: 0.7px rgba(0, 0, 0, 0.95);
  paint-order: stroke fill;
  text-shadow: none;
}

body.is-dbd-game-view .role-card.has-role-card .role-card-summary {
  inset: 13px 15px 48px;
  align-content: start;
  max-height: calc(100% - 62px);
  overflow-y: auto;
  color: rgba(255, 244, 230, 0.82);
  font-size: clamp(0.76rem, 0.88vw, 0.9rem);
  font-weight: 700;
  line-height: 1.3;
  text-shadow: none;
  scrollbar-color: rgba(255, 10, 69, 0.55) rgba(35, 27, 24, 0.58);
}

body.is-dbd-game-view .role-card-summary-line {
  color: rgba(255, 244, 230, 0.82);
}

body.is-dbd-game-view .role-card-summary-win {
  color: var(--dbd-cream);
  font-weight: 900;
}

body.is-dbd-game-view .role-card h3,
body.is-dbd-game-view .role-card-name,
body.is-dbd-game-view .phase-strip h2 {
  color: var(--dbd-red);
  font-family: "You Are Scared", "Naleni", "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow:
    0 1px 0 rgba(16, 14, 13, 0.82),
    0 0 14px rgba(255, 10, 69, 0.24);
}

body.is-dbd-game-view .panel-heading h2 {
  color: var(--dbd-cream);
  font-family: "You Are Scared", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.95;
  text-shadow: none;
}

body.is-dbd-game-view .phase-strip h2 {
  font-size: clamp(1.05rem, 1.25vw, 1.35rem);
  font-weight: 400;
  line-height: 1;
}

body.is-dbd-game-view .phase-role-title {
  color: var(--dbd-red);
  font-family: "You Are Scared", "Naleni", "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.12rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  -webkit-text-stroke: 0.7px rgba(0, 0, 0, 0.95);
  paint-order: stroke fill;
  text-shadow: none;
}

body.is-dbd-game-view .target-button.is-selected {
  border-color: var(--dbd-border-hot);
  background: rgba(255, 10, 69, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.08),
    0 0 16px rgba(255, 10, 69, 0.12);
}

body.is-dbd-game-view .target-grid {
  display: block;
  position: relative;
  z-index: 6;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 4px 4px 0;
  scrollbar-color: rgba(255, 10, 69, 0.58) rgba(35, 27, 24, 0.62);
}

body.is-dbd-game-view .target-grid.has-night-action-dropdown {
  flex: 0 0 auto;
  overflow: visible;
  padding: 0;
}

body.is-dbd-game-view .night-action-field {
  display: grid;
  gap: 8px;
  width: 100%;
}

body.is-dbd-game-view .night-action-control {
  display: inline-block;
  width: min(100%, 260px);
  min-width: 0;
}

body.is-dbd-game-view .night-action-label {
  color: var(--dbd-muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.2;
}

body.is-dbd-game-view .night-action-select {
  width: 100%;
  min-height: 0;
}

body.is-dbd-game-view .vote-ledger {
  gap: 10px;
}

body.is-dbd-game-view .vote-action-control {
  color: var(--dbd-red);
  z-index: 4;
}

body.is-dbd-game-view .vote-action-select {
  border: 2px solid var(--dbd-border-hot);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.12), rgba(255, 244, 230, 0.02) 46%),
    linear-gradient(180deg, rgba(72, 25, 32, 0.98), rgba(25, 17, 15, 0.98));
  color: var(--dbd-cream);
  font-size: 1.12rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.12),
    0 4px 0 rgba(0, 0, 0, 0.34),
    0 0 18px rgba(255, 10, 69, 0.12);
}

body.is-dbd-game-view .vote-action-select:focus {
  border-color: rgba(255, 10, 69, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.12),
    0 4px 0 rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(255, 10, 69, 0.16),
    0 0 18px rgba(255, 10, 69, 0.16);
}

body.is-dbd-game-view .vote-action-menu {
  border: 2px solid var(--dbd-border-hot);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.08), rgba(255, 244, 230, 0.02)),
    rgba(20, 16, 14, 0.98);
  scrollbar-color: rgba(255, 10, 69, 0.58) rgba(35, 27, 24, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.08),
    0 4px 0 rgba(0, 0, 0, 0.34),
    0 14px 24px rgba(0, 0, 0, 0.4);
}

body.is-dbd-game-view .vote-action-option {
  color: rgba(255, 244, 230, 0.82);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.82);
}

body.is-dbd-game-view .vote-action-option:hover,
body.is-dbd-game-view .vote-action-option.is-selected {
  background: rgba(255, 10, 69, 0.15);
  color: var(--dbd-red);
}

body.is-dbd-game-view .vote-ledger-rows {
  gap: 1px;
  padding-top: 2px;
}

body.is-dbd-game-view .vote-ledger-row {
  grid-template-columns: 28px minmax(58px, 0.68fr) auto minmax(72px, 1fr);
  gap: 6px;
  color: rgba(255, 244, 230, 0.88);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.91rem;
  font-weight: 850;
  line-height: 1.08;
  padding: 3px 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.78);
}

body.is-dbd-game-view .vote-ledger-name {
  color: var(--dbd-cream);
}

body.is-dbd-game-view .vote-ledger-verb {
  color: var(--dbd-muted);
}

body.is-dbd-game-view .vote-ledger-target {
  color: rgba(255, 244, 230, 0.68);
}

body.is-dbd-game-view button.vote-ledger-row:hover,
body.is-dbd-game-view .vote-ledger-row.is-selected {
  color: var(--dbd-red);
}

body.is-dbd-game-view button.vote-ledger-row:hover .vote-ledger-name,
body.is-dbd-game-view button.vote-ledger-row:hover .vote-ledger-target,
body.is-dbd-game-view .vote-ledger-row.is-selected .vote-ledger-name,
body.is-dbd-game-view .vote-ledger-row.is-selected .vote-ledger-target {
  color: var(--dbd-red);
}

body.is-dbd-game-view button.vote-ledger-row:hover .vote-ledger-count,
body.is-dbd-game-view .vote-ledger-row.is-selected .vote-ledger-count {
  background: var(--dbd-red);
  color: var(--dbd-cream);
}

body.is-dbd-game-view .vote-ledger-count {
  width: 23px;
  height: 23px;
  border: 1px solid rgba(255, 10, 69, 0.44);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 244, 230, 0.16), rgba(255, 244, 230, 0) 42%),
    rgba(255, 10, 69, 0.18);
  color: var(--dbd-cream);
  font-size: 0.86rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.2),
    0 2px 0 rgba(0, 0, 0, 0.22);
}

body.is-dbd-game-view .vote-ledger-summary {
  border-top-color: var(--dbd-line);
  color: rgba(255, 244, 230, 0.56);
}

body.is-dbd-game-view .vote-ledger-summary .vote-ledger-count {
  border-color: rgba(99, 217, 202, 0.58);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 244, 230, 0.18), rgba(255, 244, 230, 0) 42%),
    rgba(99, 217, 202, 0.18);
  color: #cffff8;
}

body.is-dbd-game-view .vote-ledger-summary .vote-ledger-target {
  color: rgba(255, 244, 230, 0.56);
}

body.is-dbd-game-view .message.is-system {
  background: transparent;
}

body.is-dbd-game-view .message {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 3px 6px;
}

body.is-dbd-game-view .message + .message {
  margin-top: 5px;
}

body.is-dbd-game-view .message + .message:not(.is-continuation):not(.is-system) {
  margin-top: 10px;
}

body.is-dbd-game-view .message.is-continuation {
  margin-top: 0;
  padding-top: 0;
}

body.is-dbd-game-view .message.is-dead-chat {
  opacity: 0.52;
}

body.is-dbd-game-view .message.is-dead-chat .message-avatar {
  filter: grayscale(1) contrast(0.82);
}

body.is-dbd-game-view .message-avatar {
  display: block;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #050505;
  object-fit: cover;
  object-position: 50% 18%;
  box-shadow:
    0 0 0 1px rgba(255, 244, 230, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.36);
}

body.is-dbd-game-view .message.is-continuation .message-avatar {
  height: 0;
  visibility: hidden;
  box-shadow: none;
}

body.is-dbd-game-view .message-content {
  min-width: 0;
}

body.is-dbd-game-view .message-meta {
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  margin-bottom: 2px;
  font-size: 1rem;
  line-height: 1.08;
}

body.is-dbd-game-view .message-meta strong {
  color: var(--dbd-red);
  overflow: hidden;
  font-size: 1.12rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(16, 14, 13, 0.82),
    0 0 14px rgba(255, 10, 69, 0.24);
}

body.is-dbd-game-view .message-meta span {
  flex: 0 0 auto;
  color: rgba(255, 244, 230, 0.48);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 800;
  text-shadow: none;
}

body.is-dbd-game-view .message-body {
  color: var(--dbd-cream);
  cursor: text;
  font-size: 1.08rem;
  line-height: 1.28;
}

body.is-dbd-game-view .dbd-message-quote {
  max-width: min(620px, 100%);
  margin: 0 0 6px;
  border-left: 3px solid var(--dbd-red);
  border-radius: 0 5px 5px 0;
  background: rgba(255, 244, 230, 0.07);
  color: rgba(255, 244, 230, 0.7);
  font-size: 0.9em;
  line-height: 1.25;
  padding: 5px 8px;
  white-space: pre-wrap;
}

body.is-dbd-game-view .dbd-message-reply {
  display: block;
}

body.is-dbd-game-view .message-inline-image {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 6px;
}

body.is-dbd-game-view .message-media {
  display: block;
  width: auto;
  height: auto;
  max-width: min(420px, 100%);
  max-height: 320px;
  border-radius: 8px;
  object-fit: contain;
}

body.is-dbd-game-view .message.is-camp-notice {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 7px 6px;
  text-align: center;
}

body.is-dbd-game-view .message.is-camp-notice .message-body {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(680px, 92%);
  border: 1px solid rgba(255, 10, 69, 0.76);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 10, 69, 0.3), rgba(92, 22, 32, 0.42)),
    rgba(36, 18, 22, 0.94);
  color: var(--dbd-cream);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  padding: 7px 12px 8px;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.34),
    0 0 14px rgba(255, 10, 69, 0.12);
}

body.is-dbd-game-view .chat-phase-tabs {
  margin-top: 8px;
  scrollbar-color: rgba(255, 10, 69, 0.58) transparent;
}

body.is-dbd-game-view .chat-phase-tab {
  border: 1px solid rgba(185, 144, 104, 0.5);
  border-radius: 7px;
  background: rgba(35, 27, 24, 0.76);
  color: var(--dbd-muted);
  text-shadow: 0 1px 0 rgba(16, 14, 13, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.05),
    0 2px 0 rgba(0, 0, 0, 0.2);
}

body.is-dbd-game-view .chat-phase-tab:hover,
body.is-dbd-game-view .chat-phase-tab.is-active {
  border-color: var(--dbd-border-hot);
  background: rgba(255, 10, 69, 0.14);
  color: var(--dbd-red);
}

body.is-dbd-game-view .private-chat-strip {
  margin: 0;
  color: var(--dbd-muted);
  text-shadow: 0 1px 0 rgba(16, 14, 13, 0.72);
}

body.is-dbd-game-view .private-chat-avatar {
  border-color: rgba(255, 244, 230, 0.88);
  background: rgba(255, 244, 230, 0.82);
  box-shadow:
    0 0 0 2px rgba(255, 10, 69, 0.42),
    0 2px 0 rgba(0, 0, 0, 0.32);
}

body.is-dbd-game-view .private-chat-strip strong {
  color: var(--dbd-red);
}

body.is-dbd-game-view .private-chat-strip button {
  color: rgba(255, 244, 230, 0.62);
}

body.is-dbd-game-view .private-chat-strip button:hover {
  color: var(--dbd-red);
}

body.is-dbd-game-view .panel-heading,
body.is-dbd-game-view .phase-strip {
  border-bottom: 2px solid var(--dbd-line);
  padding-bottom: 10px;
}

body.is-dbd-game-view .chat-feed {
  gap: 0;
  min-height: 0;
  padding: 0 6px 0 0;
  scrollbar-color: rgba(255, 10, 69, 0.58) rgba(35, 27, 24, 0.62);
  -webkit-user-select: none;
  user-select: none;
}

body.is-dbd-game-view .chat-feed img,
body.is-dbd-game-view .chat-feed a {
  -webkit-user-drag: none;
}

body.is-dbd-game-view .message-body {
  cursor: default;
}

body.is-dbd-game-view .pill-button,
body.is-dbd-game-view .chat-form button[type="submit"] {
  border: 2px solid var(--dbd-border);
  border-radius: 7px;
  background: rgba(35, 27, 24, 0.9);
  color: var(--dbd-muted);
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(16, 14, 13, 0.72);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 230, 0.06);
}

body.is-dbd-game-view .pill-button:hover,
body.is-dbd-game-view .chat-form button[type="submit"]:hover,
body.is-dbd-game-view .target-button:hover {
  transform: translateY(-1px);
  border-color: var(--dbd-border-hot);
  color: var(--dbd-red);
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.24),
    0 0 16px rgba(255, 10, 69, 0.14);
}

body.is-dbd-game-view .chat-form button[type="submit"],
body.is-dbd-game-view .primary-button {
  border-color: var(--dbd-border-hot);
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.1), transparent 45%),
    rgba(255, 10, 69, 0.18);
  color: var(--dbd-red);
  text-shadow: 0 1px 0 rgba(16, 14, 13, 0.82);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.24),
    0 0 14px rgba(255, 10, 69, 0.12);
}

body.is-dbd-game-view .primary-button:not(:disabled):hover,
body.is-dbd-game-view .chat-form button[type="submit"]:not(:disabled):hover {
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.14), transparent 45%),
    rgba(255, 10, 69, 0.26);
  color: #ff5b88;
}

body.is-dbd-game-view .chat-form {
  grid-template-columns: minmax(0, 1fr) 34px auto;
  align-items: center;
  border-top: 2px solid var(--dbd-line);
  padding-top: 10px;
}

body.is-dbd-game-view .chat-form textarea {
  min-height: 42px;
  line-height: 1.2;
  padding-top: 8px;
  padding-bottom: 8px;
}

body.is-dbd-game-view .chat-form .chat-emoji-button,
body.is-dbd-game-view .chat-form .chat-emoji-button:not(:disabled):hover {
  all: unset;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  cursor: pointer;
}

body.is-dbd-game-view .chat-form .chat-emoji-button img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.64))
    drop-shadow(0 0 8px rgba(255, 10, 69, 0.2));
}

body.is-dbd-game-view .chat-form .chat-emoji-button:focus-visible {
  outline: 2px solid var(--dbd-border-hot);
  outline-offset: 2px;
}

body.is-dbd-game-view .chat-form .chat-emoji-button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

body.is-dbd-game-view .chat-form .chat-emoji-option,
body.is-dbd-game-view .chat-form .chat-emoji-option:not(:disabled):hover {
  all: unset;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  cursor: pointer;
}

body.is-dbd-game-view .chat-form .chat-emoji-option-image {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  pointer-events: none;
}

body.is-dbd-game-view .chat-form .chat-emoji-option:not(:disabled):hover {
  background: rgba(255, 10, 69, 0.13);
}

body.is-dbd-game-view .chat-form .chat-emoji-option:focus-visible {
  outline: 2px solid var(--dbd-border-hot);
  outline-offset: 1px;
}

body.is-dbd-game-view .message-custom-emoji {
  width: 1.4em;
  height: 1.4em;
}

body.is-dbd-game-view .message-mention {
  color: var(--dbd-red);
  text-shadow:
    0 1px 0 rgba(16, 14, 13, 0.82),
    0 0 12px rgba(255, 10, 69, 0.24);
}

body.is-dbd-game-view .message-mention.is-everyone {
  background: rgba(255, 10, 69, 0.16);
}

body.is-dbd-game-view .chat-emoji-picker {
  right: 78px;
  border: 1px solid rgba(185, 144, 104, 0.52);
  border-radius: 8px;
  background: rgba(15, 11, 10, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.32);
}

body.is-dbd-game-view input,
body.is-dbd-game-view textarea {
  border: 2px solid var(--dbd-border);
  border-radius: 8px;
  background: rgba(15, 11, 10, 0.74);
  color: var(--dbd-cream);
  text-shadow: none;
}

body.is-dbd-game-view input:focus,
body.is-dbd-game-view textarea:focus {
  border-color: var(--dbd-border-hot);
  box-shadow: 0 0 0 3px rgba(255, 10, 69, 0.13);
}

body.is-dbd-game-view input::placeholder,
body.is-dbd-game-view textarea::placeholder {
  color: rgba(255, 244, 230, 0.48);
}

@media (max-width: 1050px) {
  .realtime-hero {
    grid-template-columns: 1fr;
  }

  .game-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "chat"
      "actions"
      "roster";
    height: auto;
    min-height: 0;
  }

  body.is-dbd-game-view .game-grid {
    height: auto;
    min-height: 0;
  }

  .chat-panel {
    min-height: 560px;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .brand,
  .main-tabs,
  .account-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: center;
    margin-left: 0;
  }

  .home-shell {
    width: min(100% - 18px, 1500px);
  }

  .room-card,
  .room-card form,
  .chat-form {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .game-header,
  .phase-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .game-header {
    grid-template-columns: 1fr;
  }

  .game-title-lockup,
  .game-header-actions {
    grid-column: 1;
  }

  .game-header-actions {
    justify-content: center;
  }
}

/* Homepage parity layer: match the existing Socipic desktop/window layout. */
.realtime-page {
  --home-pink: #e36ea3;
  --home-yellow: #f8d157;
  --home-teal: #8adbd0;
  --home-blue: #d9e1f8;
  --home-white: #ffffff;
  --home-ink: #07133f;
}

.home-hero.home-welcome {
  --home-pink: #e36ea3;
  --home-yellow: #f8d157;
  --home-teal: #8adbd0;
  --home-blue: #d9e1f8;
  --home-white: #ffffff;
  --home-ink: #07133f;
}

.home-shell.realtime-shell {
  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;
}

html:not(.is-starting-game-route) .home-shell.realtime-shell {
  min-height: 0;
}

.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;
}

[data-home-auth-only][hidden],
[data-home-guest-only][hidden],
[data-auth-guest][hidden] {
  display: none !important;
}

html[data-authenticated="true"] [data-auth-guest],
html[data-authenticated="true"] [data-home-guest-only],
.home-welcome.is-logged-in [data-auth-guest],
.home-welcome.is-logged-in [data-home-guest-only] {
  display: none !important;
}

html[data-authenticated="false"] [data-auth-only],
html[data-authenticated="false"] [data-home-auth-only],
.home-welcome.is-logged-out [data-home-auth-only] {
  display: none !important;
}

.buzz-page-panel[data-buzz-can-interact="true"] [data-auth-guest],
.buzz-page-panel[data-buzz-can-interact="false"] [data-buzz-composer] {
  display: none !important;
}

.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-announcement-console,
.home-notepad-panel,
.home-market-volume-panel {
  min-width: 0;
  border: 3px solid var(--home-ink);
  border-radius: 0;
  background: var(--home-white);
  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.82rem;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: none;
  line-height: 1;
  padding: 6px 9px;
}

.home-window-bar span {
  font-family: "Easy Pixel", "Courier New", monospace;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
}

.home-guest-discovery-panel {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto 1fr;
  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: start;
  gap: 13px;
  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: 26px 28px;
  box-shadow: inset 0 0 0 2px rgba(255, 216, 61, 0.18);
}

.home-guest-discovery-kicker,
.home-eyebrow,
.home-welcome-shortcuts > p {
  width: fit-content;
  max-width: 100%;
  border: 2px solid var(--home-ink);
  border-radius: 0;
  background: var(--home-teal);
  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;
  margin: 0;
  padding: 7px 9px;
  text-transform: uppercase;
}

.home-eyebrow,
.home-welcome-shortcuts > p {
  border-width: 3px;
  font-size: 0.92rem;
  text-transform: none;
}

.home-welcome-shortcuts > p {
  background: var(--home-yellow);
  font-size: 0.95rem;
}

.home-guest-discovery-body h1 {
  margin: 0;
  color: var(--home-ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 3.1vw, 3.25rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.home-guest-discovery-body p {
  margin: 0;
  color: rgba(7, 19, 63, 0.86);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(0.92rem, 1.04vw, 1.08rem);
  font-weight: 800;
  line-height: 1.38;
}

.home-guest-discovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.home-guest-discovery-actions a,
.create-panel button[type="submit"],
.room-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 3px solid var(--home-ink);
  border-radius: 0;
  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-shadow: none;
  padding: 5px 8px;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
  text-decoration: none;
}

.home-guest-discovery-actions a:hover,
.home-guest-discovery-actions a:focus-visible {
  background: var(--home-pink);
  color: var(--home-white);
  outline: 0;
  transform: translate(-2px, -2px);
}

.create-panel button[type="submit"] {
  background: var(--home-pink);
  color: var(--home-white);
}

.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 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-welcome-copy > p:not(.home-eyebrow) {
  max-width: 58ch;
  margin: 20px 0 0;
  color: rgba(7, 19, 63, 0.86);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  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-fashionista-link,
.home-bank-account-money,
.home-local-readout dd {
  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(-1px, -2px) rotate(-3deg);
}

.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-text {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.home-desktop-game-label,
.home-desktop-game-number {
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.home-desktop-game-label {
  color: var(--home-ink);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.05;
  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-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-shadow:
    1px 1px 0 var(--home-white),
    2px 2px 0 var(--home-pink),
    3px 3px 0 rgba(138, 219, 208, 0.76);
}

.home-welcome-avatar-card,
.home-bank-account-panel,
.home-local-panel,
.home-announcement-console,
.home-notepad-panel,
.home-market-volume-panel {
  display: grid;
}

.home-welcome-avatar-card,
.home-bank-account-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.home-avatar-screen {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  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-fashionista-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border: 3px solid var(--home-ink);
  background: var(--home-yellow);
  color: var(--home-ink);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
  padding: 7px 9px;
  text-align: center;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
}

.home-notepad-panel {
  grid-template-rows: auto minmax(128px, 1fr);
}

.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;
}

input,
textarea {
  border-radius: 0;
}

.home-bank-account-panel .home-window-bar,
.home-local-panel .home-window-bar {
  background: var(--home-teal);
  color: var(--home-ink);
}

.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 dt {
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.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-live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.home-live-status::before {
  width: 8px;
  height: 8px;
  border: 2px solid var(--home-ink);
  background: var(--home-yellow);
  content: "";
}

.home-live-status[data-state="online"]::before {
  background: #54d68b;
}

.home-live-status[data-state="offline"]::before {
  background: #ff6b7d;
}

.home-announcement-console .home-window-bar {
  background: var(--home-yellow);
  color: var(--home-ink);
}

.home-announcement-body {
  display: grid;
  align-content: center;
  min-height: 134px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.88)),
    var(--home-white);
  padding: 16px 18px;
}

.home-announcement-empty {
  margin: 0;
  color: rgba(7, 19, 63, 0.82);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.34;
}

.home-announcement-message {
  display: grid;
  gap: 7px;
}

.home-announcement-message[hidden] {
  display: none;
}

.home-announcement-message h2,
.home-announcement-message p {
  margin: 0;
}

.home-announcement-message a {
  width: fit-content;
  color: #9b245e;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.84rem;
  font-weight: 950;
}

.home-announcement-message h2 {
  color: var(--home-ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
  line-height: 1.1;
}

.home-announcement-message p {
  color: rgba(7, 19, 63, 0.78);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}

.home-announcement-kicker {
  color: var(--home-pink) !important;
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.72rem !important;
  text-transform: uppercase;
}

.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[hidden] {
  display: none;
}

.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;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.14);
}

.home-bank-account-body {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "chip copy"
    "chip 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 {
  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-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  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-welcome.is-logged-in .home-welcome-copy {
  align-content: start;
}

.home-welcome.is-logged-in .home-welcome-copy h1 {
  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.7rem, 2.55vw, 2.55rem);
  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-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-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  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-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  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-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  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-retro-footer {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 28px));
  min-width: 0;
  margin: 0 auto 42px;
  overflow: hidden;
  border: 3px solid var(--home-ink);
  border-radius: 18px;
  background: var(--home-white);
  color: var(--home-ink);
  box-shadow: 5px 5px 0 rgba(7, 19, 63, 0.18);
}

.home-footer-main {
  display: grid;
  grid-template-columns: minmax(250px, 0.82fr) minmax(340px, 0.9fr) minmax(0, 1.35fr);
  gap: clamp(16px, 2.5vw, 46px);
  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.72), 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: 16px 20px 17px;
}

.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: 96px;
  max-width: 100%;
  height: auto;
}

.home-footer-directory {
  display: grid;
  gap: 12px;
}

.home-footer-brand p,
.home-footer-disclaimer p {
  margin: 0;
  color: rgba(7, 19, 63, 0.78);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.23;
}

.home-footer-brand p {
  max-width: 42ch;
}

.home-footer-disclaimer p {
  max-width: 82ch;
}

.home-footer-games h2,
.home-footer-links h2,
.home-footer-disclaimer h2 {
  margin: 0 0 6px;
  color: var(--home-pink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.home-footer-primary-links,
.home-footer-games > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.home-footer-primary-links a,
.home-footer-game-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.88);
  background: rgba(138, 219, 208, 0.74);
  color: var(--home-ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-shadow: 2px 2px 0 rgba(7, 19, 63, 0.13);
  padding: 5px 7px;
}

.home-footer-primary-links a {
  min-height: 24px;
  border-radius: 999px;
}

.home-footer-game-link {
  min-height: 24px;
  border-radius: 999px;
  background: rgba(138, 219, 208, 0.74);
}

.home-footer-copyright {
  margin: 0;
  border-top: 3px solid var(--home-ink);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(7, 19, 63, 0.7);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  padding: 8px 14px;
}

.site-text-footer {
  position: relative;
  z-index: 1;
  width: min(1240px, calc(100% - 28px));
  margin: 0 auto 18px;
  color: rgba(7, 19, 63, 0.64);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.16;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

.site-footer-link-row,
.site-footer-game-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px 6px;
}

.site-footer-link-row {
  font-size: 0.76rem;
}

.site-footer-game-row {
  gap: 5px 14px;
  margin-top: 4px;
  font-size: 0.68rem;
}

.site-text-footer a {
  color: inherit;
  text-decoration: none;
}

.site-text-footer a:hover,
.site-text-footer a:focus-visible {
  color: var(--home-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer-disclaimer,
.site-footer-copyright {
  margin: 0 auto;
}

.site-footer-disclaimer {
  max-width: 1120px;
  margin-top: 7px;
}

.site-footer-copyright {
  margin-top: 6px;
  font-size: 0.68rem;
}

/* Settings keeps its focused form width while sharing the current site header. */
body.settings-page > .settings-shell {
  width: min(100% - 24px, 980px);
}

/* Login page parity layer. */
.auth-shell {
  width: min(760px, calc(100% - 28px));
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 18px;
}

.login-page .auth-shell {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.auth-panel {
  width: min(100%, 560px);
  margin: 0 auto;
}

.auth-card {
  overflow: hidden;
  border: 3px solid rgba(7, 19, 63, 0.88);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(7, 19, 63, 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(7, 19, 63, 0.045) 1px, transparent 1px),
    rgba(255, 255, 255, 0.88);
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    8px 8px 0 rgba(7, 19, 63, 0.12),
    0 18px 42px rgba(7, 19, 63, 0.14);
}

.auth-card-head {
  border-bottom: 3px solid rgba(7, 19, 63, 0.88);
  background: linear-gradient(90deg, rgba(255, 216, 61, 0.8), rgba(99, 217, 202, 0.56));
  padding: 16px 18px 14px;
}

.auth-kicker {
  display: block;
  margin: 0 0 8px;
  color: var(--pink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.auth-card-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: clamp(2.4rem, 7vw, 4.1rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.84;
  text-shadow:
    2px 0 0 #ffffff,
    -2px 0 0 #ffffff,
    0 2px 0 #ffffff,
    0 -2px 0 #ffffff,
    3px 3px 0 rgba(240, 92, 157, 0.6);
}

.auth-card-head p {
  max-width: 44ch;
  margin: 10px 0 0;
  color: rgba(7, 19, 63, 0.76);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.28;
}

.auth-mode-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 16px 0;
}

.auth-mode-tab {
  position: relative;
  display: inline-grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
  padding: 0;
  transition: transform 140ms ease, filter 140ms ease;
}

.auth-mode-tab img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 112px;
  object-fit: contain;
  filter:
    drop-shadow(3px 3px 0 rgba(99, 217, 202, 0.72))
    drop-shadow(5px 5px 0 rgba(7, 19, 63, 0.14));
}

.auth-mode-tab span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.auth-mode-tab.is-active {
  filter: saturate(1.08);
}

.auth-form {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.admin-field {
  display: grid;
  gap: 5px;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
}

.admin-field > span,
.auth-remember {
  color: rgba(7, 19, 63, 0.76);
  font-size: 0.9rem;
  line-height: 1.1;
}

.admin-input {
  width: 100%;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.2;
  outline: 0;
  padding: 8px 11px;
  box-shadow: inset 0 1px 3px rgba(7, 19, 63, 0.08);
}

.admin-input:focus-visible {
  border-color: rgba(240, 92, 157, 0.72);
  box-shadow:
    0 0 0 3px rgba(240, 92, 157, 0.16),
    inset 0 1px 3px rgba(7, 19, 63, 0.08);
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 850;
}

.auth-remember input {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}

.admin-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 3px solid rgba(7, 19, 63, 0.92);
  border-radius: 8px;
  background: var(--pink);
  color: #ffffff;
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(7, 19, 63, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    4px 4px 0 rgba(7, 19, 63, 0.16);
  padding: 9px 14px;
}

.admin-primary-button:hover,
.admin-primary-button:focus-visible,
.auth-mode-tab:hover,
.auth-mode-tab:focus-visible {
  outline: 0;
  transform: translate(-1px, -2px);
}

.admin-status {
  margin: 14px 16px 0;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: rgba(7, 19, 63, 0.78);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.18;
  padding: 9px 11px;
}

.admin-status.is-error {
  border-color: rgba(240, 92, 157, 0.42);
  background: rgba(255, 240, 247, 0.92);
  color: #8f2458;
}

.admin-status.is-success {
  border-color: rgba(40, 164, 146, 0.36);
  background: rgba(235, 255, 251, 0.92);
  color: #116b5e;
}

/* Shops directory. */
.shops-shell {
  max-width: 1500px;
  margin-bottom: 18px;
  padding: 18px;
}

.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-directory-section {
  padding-top: 6px;
}

.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: var(--feature-hero-height);
  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: 18px;
}

.shops-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 10px;
  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: 238px;
}

.shops-feature-poster {
  --shop-accent: var(--shops-pink);
  position: absolute;
  display: block;
  width: 140px;
  min-width: 0;
  overflow: hidden;
  border: 3px solid #ffffff;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 30px rgba(7, 19, 63, 0.18);
  color: var(--shops-ink);
}

.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-designer {
  --shop-accent: var(--shops-aqua);
}

.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: 30px;
  z-index: 2;
  transform: rotate(-7deg);
}

.shops-feature-poster.is-poster-3 {
  right: 8%;
  top: 44px;
  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-section-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: auto;
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.shops-hero-tabs {
  justify-self: start;
  margin-top: 4px;
}

.shop-section-tab {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 34px;
  border: 2px solid rgba(7, 19, 63, 0.9);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 249, 255, 0.88)),
    rgba(255, 255, 255, 0.9);
  color: var(--shops-ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1;
  padding: 7px 13px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74);
  box-shadow:
    3px 3px 0 rgba(7, 19, 63, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.shop-section-tab.is-active {
  border-color: rgba(7, 19, 63, 0.96);
  background: linear-gradient(180deg, #ffe96e, var(--shops-yellow));
  box-shadow:
    4px 4px 0 rgba(99, 217, 202, 0.68),
    6px 6px 0 rgba(7, 19, 63, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transform: translate(-1px, -2px);
}

.shop-section-tab[data-shop-section-target="designer-boutiques"].is-active {
  background: linear-gradient(180deg, #aff7ef, #73ded4);
  box-shadow:
    4px 4px 0 rgba(240, 92, 157, 0.38),
    6px 6px 0 rgba(7, 19, 63, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.shop-section-tab:hover,
.shop-section-tab:focus-visible {
  border-color: rgba(7, 19, 63, 0.96);
  background: rgba(255, 216, 61, 0.32);
  transform: translate(-1px, -2px);
  box-shadow:
    4px 4px 0 rgba(240, 92, 157, 0.28),
    6px 6px 0 rgba(7, 19, 63, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.shop-section-tab[data-shop-section-target="designer-boutiques"]:hover,
.shop-section-tab[data-shop-section-target="designer-boutiques"]:focus-visible {
  background: rgba(143, 233, 223, 0.56);
}

.shop-section-tab:focus-visible {
  outline: 3px solid var(--shops-pink);
  outline-offset: 2px;
}

.shop-card-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  scroll-margin-top: 20px;
}

.shop-card-section[data-shop-section-panel] {
  display: none;
}

.shop-card-section[data-shop-section-panel].is-active {
  display: grid;
}

.shop-card-section + .shop-card-section {
  margin-top: 0;
}

.shop-section-empty {
  margin: 0;
  border: 2px dashed rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  color: rgba(7, 19, 63, 0.62);
  font-weight: 850;
  line-height: 1.25;
  padding: 16px;
  text-align: center;
}

.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.is-designer {
  --shop-accent: var(--shops-aqua);
  --shop-accent-soft: rgba(99, 217, 202, 0.16);
}

.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-poster-frame.is-placeholder {
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(132, 60, 33, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(132, 60, 33, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #f6f0df, #fffaf0);
  background-size: 18px 18px, 18px 18px, auto;
}

.shop-poster-placeholder {
  color: #332015;
  font-family: "Decohead", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.88;
  text-align: center;
}

.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;
}

/* Legacy shop detail and inventory presentation. */
.shop-detail {
  --shop-theme-accent: var(--pink, #f05c9d);
  --shop-theme-accent-2: var(--aqua, #63d9ca);
  --shop-theme-accent-3: var(--yellow, #ffd83d);
  --shop-theme-heading: var(--ink, #07133f);
  --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);
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}

.shop-detail[data-shop-slug="royal-meridian-bank"] {
  --shop-theme-accent: #d7ad5f;
  --shop-theme-accent-2: #264f7f;
  --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-panel: rgba(255, 255, 255, 0.78);
  --shop-theme-shadow: rgba(11, 25, 58, 0.18);
}

.shop-detail[data-shop-slug="deadpixel"] {
  --shop-theme-accent: #63d9ca;
  --shop-theme-accent-2: #b899ff;
  --shop-theme-heading: #152760;
  --shop-theme-soft: rgba(232, 255, 251, 0.74);
  --shop-theme-soft-2: rgba(247, 232, 255, 0.56);
}

.shop-detail[data-shop-slug="levels"] {
  --shop-theme-accent: #ffd83d;
  --shop-theme-accent-2: #63d9ca;
  --shop-theme-heading: #07133f;
  --shop-theme-soft: rgba(255, 250, 217, 0.76);
  --shop-theme-soft-2: rgba(232, 249, 255, 0.6);
}

.shop-detail[data-shop-slug="cherry-static"] {
  --shop-theme-accent: #f05c9d;
  --shop-theme-accent-2: #ff7c6f;
  --shop-theme-heading: #65133c;
  --shop-theme-soft: rgba(255, 231, 242, 0.74);
  --shop-theme-soft-2: rgba(236, 255, 249, 0.58);
}

.shop-detail[data-shop-slug="cut-cloth"] {
  --shop-theme-accent: #2f745f;
  --shop-theme-accent-2: #d7ad5f;
  --shop-theme-heading: #17372f;
  --shop-theme-soft: rgba(232, 248, 241, 0.72);
  --shop-theme-soft-2: rgba(255, 244, 222, 0.56);
}

.shop-detail[data-shop-slug="face-value"] {
  --shop-theme-accent: #101010;
  --shop-theme-accent-2: #d7ad5f;
  --shop-theme-heading: #16121f;
  --shop-theme-soft: rgba(242, 238, 231, 0.72);
  --shop-theme-soft-2: rgba(255, 232, 244, 0.54);
}

.shop-detail[data-shop-slug="blink"] {
  --shop-theme-accent: #7aa8ff;
  --shop-theme-accent-2: #f05c9d;
  --shop-theme-heading: #18326f;
  --shop-theme-soft: rgba(235, 243, 255, 0.76);
  --shop-theme-soft-2: rgba(255, 233, 246, 0.56);
}

.shop-detail[data-shop-slug="fringe-theory"] {
  --shop-theme-accent: #b899ff;
  --shop-theme-accent-2: #f05c9d;
  --shop-theme-heading: #3d2c78;
  --shop-theme-soft: rgba(245, 238, 255, 0.74);
  --shop-theme-soft-2: rgba(255, 232, 246, 0.54);
}

.shop-detail[data-shop-slug="uppercut"] {
  --shop-theme-accent: #5e7fe8;
  --shop-theme-accent-2: #ff6840;
  --shop-theme-heading: #132869;
  --shop-theme-soft: rgba(237, 241, 255, 0.74);
  --shop-theme-soft-2: rgba(255, 237, 229, 0.58);
}

.shop-detail[data-shop-slug="big-paper"] {
  --shop-theme-accent: #ff6840;
  --shop-theme-accent-2: #63d9ca;
  --shop-theme-heading: #6d2417;
  --shop-theme-soft: rgba(255, 237, 229, 0.72);
  --shop-theme-soft-2: rgba(232, 252, 249, 0.58);
}

.shop-detail[data-shop-slug="velvet-relic"] {
  --shop-theme-accent: #8b5bd6;
  --shop-theme-accent-2: #d7ad5f;
  --shop-theme-heading: #321d5f;
  --shop-theme-soft: rgba(246, 239, 255, 0.74);
  --shop-theme-soft-2: rgba(255, 246, 224, 0.56);
}

.shop-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  margin-bottom: 16px;
  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);
  color: var(--ink, #07133f);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  padding: 7px 13px 7px 11px;
  text-decoration: none;
}

.shop-back-link:hover,
.shop-back-link:focus-visible {
  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));
  outline: 0;
  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);
  align-items: start;
  gap: 30px;
  min-width: 0;
  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 {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 220px;
  min-width: 0;
}

.shop-detail-poster > img,
.shop-detail-poster-placeholder {
  display: block;
  width: 100%;
  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 {
  height: auto;
  object-fit: cover;
}

.shop-detail-poster-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted, #4965a8);
  font-size: 0.92rem;
  font-weight: 900;
  padding: 16px;
  text-align: center;
  text-transform: uppercase;
}

.shop-detail-panel {
  min-width: 0;
  min-height: 280px;
  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-inventory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.shop-inventory-head h1 {
  margin: 0;
  color: var(--shop-theme-heading);
  font-family: "Belgium Rounded", Arial, Helvetica, sans-serif;
  font-size: 3rem;
  font-weight: 400;
  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-owner-line {
  margin: 0;
  color: var(--muted, #4965a8);
  font-size: 0.88rem;
  font-weight: 850;
}

.designer-boutique-stats {
  display: grid;
  gap: 8px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 26%, rgba(7, 19, 63, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--shop-theme-accent) 20%, transparent);
  padding: 11px;
}

.designer-boutique-stats > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.designer-boutique-stats small {
  color: var(--muted, #4965a8);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.designer-boutique-stats strong {
  color: var(--shop-theme-heading, var(--ink));
  font-size: 1rem;
  font-weight: 950;
}

.designer-boutique-owner-tabs {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.designer-boutique-owner-tabs button {
  min-height: 36px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 26%, rgba(7, 19, 63, 0.1));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted, #4965a8);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  padding: 0 14px;
}

.designer-boutique-owner-tabs button.is-active {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 62%, #ffffff);
  background: linear-gradient(180deg, #ffffff, var(--shop-theme-soft));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--shop-theme-accent) 24%, transparent);
  color: var(--ink, #07133f);
}

.designer-boutique-upload-form {
  display: grid;
  gap: 18px;
  margin-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--shop-theme-accent) 24%, rgba(7, 19, 63, 0.12));
  padding-top: 20px;
}

.designer-boutique-upload-title {
  display: grid;
  gap: 5px;
}

.designer-boutique-upload-title > span,
.designer-boutique-upload-preview-eyebrow {
  color: var(--shop-theme-accent, var(--pink));
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.designer-boutique-upload-title h2,
.designer-boutique-upload-title p {
  margin: 0;
}

.designer-boutique-upload-title h2 {
  color: var(--shop-theme-heading, var(--ink));
  font-size: 1.55rem;
}

.designer-boutique-upload-title p {
  color: var(--muted, #4965a8);
  font-weight: 800;
}

.designer-boutique-upload-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
  align-items: start;
  gap: 18px;
}

.designer-boutique-upload-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.designer-boutique-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.designer-boutique-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.designer-boutique-field[hidden],
.designer-boutique-item-upload[hidden] {
  display: none;
}

.designer-boutique-field > span:first-child {
  color: var(--muted, #4965a8);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.designer-boutique-field input,
.designer-boutique-field select {
  width: 100%;
  min-height: 42px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 20%, rgba(7, 19, 63, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink, #07133f);
  font: inherit;
  font-weight: 800;
  padding: 8px 10px;
}

.designer-boutique-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 20%, rgba(7, 19, 63, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  padding: 8px 10px;
}

.designer-boutique-toggle input {
  width: 16px;
  min-height: 16px;
}

.designer-boutique-toggle em {
  color: var(--ink, #07133f);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
}

.designer-boutique-item-upload {
  position: relative;
  display: grid;
  border: 2px dashed color-mix(in srgb, var(--shop-theme-accent) 38%, rgba(7, 19, 63, 0.12));
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  overflow: hidden;
}

.designer-boutique-item-upload input {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 0;
}

.designer-boutique-item-upload-copy {
  display: grid;
  gap: 4px;
  min-height: 76px;
  align-content: center;
  padding: 12px 15px;
}

.designer-boutique-item-upload-copy strong {
  color: var(--ink, #07133f);
  font-weight: 950;
  overflow-wrap: anywhere;
}

.designer-boutique-item-upload-copy small {
  color: var(--muted, #4965a8);
  font-weight: 800;
}

.designer-boutique-upload-preview {
  display: grid;
  gap: 10px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 24%, rgba(7, 19, 63, 0.12));
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.8);
  padding: 13px;
}

.designer-boutique-upload-preview-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 200 / 270;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(218, 231, 255, 0.5), #ffffff);
}

.designer-boutique-upload-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.designer-boutique-upload-preview-empty {
  color: var(--muted, #4965a8);
  font-weight: 850;
}

.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);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
  color: var(--muted, #4965a8);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  padding: 8px 18px;
}

.shop-inventory-tab:hover,
.shop-inventory-tab:focus-visible {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 46%, #ffffff);
  color: var(--ink, #07133f);
  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));
  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);
  color: var(--ink, #07133f);
}

.shop-inventory-tab[data-shop-inventory-tab-filter="sale"] {
  border-color: color-mix(in srgb, var(--pink) 46%, rgba(7, 19, 63, 0.12));
  color: var(--pink);
}

.shop-inventory-tab[data-shop-inventory-tab-filter="sale"].is-active {
  background: linear-gradient(180deg, #fff5fb, #ffe5f2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 0 rgba(240, 92, 157, 0.2);
}

.shop-tech-grid,
.shop-color-grid {
  display: grid;
  justify-content: start;
  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 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 18px;
}

.shop-color-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.shop-inventory-tabs .shop-tech-grid,
.shop-inventory-tabs .shop-color-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],
.shop-color-card[hidden] {
  display: none !important;
}

.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,
.shop-item-art-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.shop-item-art-placeholder {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--item-accent) 52%, var(--ink, #07133f));
  font-size: 0.82rem;
  font-weight: 900;
  padding: 12px;
  text-align: 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-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;
  max-height: 33px;
  overflow: hidden;
  color: var(--ink, #07133f);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.05;
  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;
  line-height: 1.1;
}

.shop-price-display {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.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, #f05c9d);
  font-weight: 950;
}

.shop-tech-fame,
.shop-tech-quantity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shop-tech-fame::before,
.shop-tech-quantity::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.28);
}

.shop-tech-fame img {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.shop-tech-quantity.is-sold-out {
  color: #a13018;
}

.shop-tech-description {
  display: block;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  color: rgba(7, 19, 63, 0.78);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.24;
  opacity: 0;
  transform: translateY(5px);
  transition: max-height 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.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: 146px;
  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: 152px;
}

.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.is-sold-out .shop-tech-art {
  filter: grayscale(100%) saturate(0);
  opacity: 0.56;
}

.shop-color-grid > .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);
}

.shop-color-grid > .shop-color-card > .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), transparent 34%), linear-gradient(315deg, rgba(7, 19, 63, 0.16), transparent 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-metallic .shop-color-swatch {
  background: radial-gradient(ellipse 82% 52% at 24% 8%, rgba(255, 255, 255, 0.5), 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%);
  mix-blend-mode: overlay;
  filter: blur(var(--metal-dark-blur, 5px)) contrast(var(--metal-dark-contrast, 1.12));
  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);
}

.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%, transparent 68%);
  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);
}

@keyframes shop-metal-liquid {
  from { transform: translate3d(-9%, -5%, 0) rotate(-9deg) scale(1.04); }
  to { transform: translate3d(8%, 6%, 0) rotate(-2deg) scale(1.07); }
}

@keyframes shop-metal-sheen {
  from { transform: translate3d(-4%, -2%, 0) rotate(-3deg) scale(1.02); }
  to { 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-grid > .shop-color-card > .shop-color-info {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 0;
}

.shop-color-grid > .shop-color-card > .shop-color-info strong {
  display: block;
  overflow: hidden;
  color: var(--ink, #07133f);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.24;
  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, #4965a8);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
}

.shop-color-stat img {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.shop-color-grid > .shop-color-card .shop-color-stat-value {
  color: var(--ink, #07133f);
  font-weight: 900;
}

.shop-detail-placeholder {
  margin-top: 20px;
  border-top: 1px solid rgba(7, 19, 63, 0.12);
  padding-top: 18px;
}

.shop-detail-placeholder p {
  margin: 0;
  color: var(--muted, #4965a8);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
}

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

@media (max-width: 900px) {
  .shop-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
    margin: 0 auto;
  }

  .shop-detail-poster {
    justify-self: center;
  }

  .shop-tech-grid,
  .shop-color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-color-grid > .shop-color-card {
    grid-template-columns: 82px minmax(0, 1fr) 70px;
  }

  .designer-boutique-upload-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .designer-boutique-upload-preview {
    width: min(100%, 260px);
  }
}

@media (max-width: 560px) {
  .shop-detail-layout,
  .shop-detail-panel {
    padding: 14px;
  }

  .shop-inventory-head h1 {
    font-size: 2.25rem;
  }

  .shop-tech-grid,
  .shop-color-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shop-color-grid > .shop-color-card {
    grid-template-columns: 70px minmax(0, 1fr) 66px;
  }

  .designer-boutique-upload-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .designer-boutique-owner-tabs {
    width: 100%;
    margin-left: 0;
  }
}

/* Complete shop commerce and try-on layer. */
.shops-section[hidden],
[data-shops-landing][hidden],
[data-shop-detail][hidden],
.shop-gift-search-panel[hidden] {
  display: none !important;
}

.shop-item-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  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-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 7px;
  text-transform: uppercase;
  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-sale {
  background: linear-gradient(180deg, #ff9dca, #f05c9d);
  color: #fff;
}

.shop-item-badge.is-new {
  background: linear-gradient(180deg, #fff4a9, #ffd83d);
}

.shop-item-badge.is-sold-out {
  background: linear-gradient(180deg, #e24b40, #a13018);
  color: #fff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.2);
}

.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, #4965a8);
  font-size: 0.86rem;
  font-weight: 900;
  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-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, #07133f);
  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, #f05c9d);
  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)), #fff;
  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, #4965a8);
  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, #07133f);
  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, #4965a8);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 950;
  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: #fff;
}

.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;
}

.shop-color-card:has(.shop-admin-sale-control[open]),
.shop-tech-card:has(.shop-admin-sale-control[open]) {
  overflow: visible;
  z-index: 25;
}

.shop-item-badge.is-owned {
  background: linear-gradient(180deg, #dffaf5, #63d9ca);
}

.shop-tech-owned-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(7, 19, 63, 0.68);
}

.shop-tech-owned-count::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.28);
}

.shop-tech-owned-count.is-maxed {
  color: #a13018;
}

.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(--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%, #fff), color-mix(in srgb, var(--shop-action-color) 28%, #fff));
  color: color-mix(in srgb, var(--shop-action-color) 56%, var(--ink));
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  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));
}

.shop-tech-gift-button { --shop-action-color: var(--aqua); }
.shop-tech-try-button { --shop-action-color: var(--yellow); }

.shop-tech-buy-button:hover:not(:disabled),
.shop-tech-gift-button:hover:not(:disabled),
.shop-tech-try-button:hover:not(:disabled),
.shop-tech-buy-button:focus-visible:not(:disabled),
.shop-tech-gift-button:focus-visible:not(:disabled),
.shop-tech-try-button:focus-visible:not(:disabled) {
  transform: translateY(-1px);
}

.shop-tech-buy-button:disabled,
.shop-tech-gift-button:disabled,
.shop-tech-try-button:disabled {
  cursor: not-allowed;
  filter: grayscale(42%);
  opacity: 0.46;
}

.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: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-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-color-card {
  grid-template-columns: 82px minmax(0, 1fr) 74px;
}

.shop-color-grid > .shop-color-card > .shop-buy-button {
  --shop-action-color: 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%, #fff));
  color: color-mix(in srgb, var(--shop-action-color) 56%, var(--ink));
  cursor: pointer;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  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:disabled {
  cursor: not-allowed;
  filter: grayscale(42%);
  opacity: 0.42;
}

.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-avatar-gender-toggle {
  margin-left: auto;
}

.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;
  line-height: 1;
  padding: 0;
  box-shadow: none;
}

.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.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);
}

.shop-avatar-gender-toggle button {
  width: 32px;
  min-width: 32px;
}

.shop-digital-receipt {
  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;
}

.shop-digital-receipt-top {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.shop-digital-receipt-top:not(:has(.shop-digital-receipt-image)) {
  grid-template-columns: 1fr;
}

.shop-digital-receipt-image {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: #fff;
}

.shop-digital-receipt-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop-digital-receipt-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.shop-digital-receipt-copy span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shop-digital-receipt-copy strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 1.34rem;
  font-weight: 950;
  line-height: 1;
}

.shop-digital-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,
.shop-digital-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,
.shop-digital-receipt-total b {
  color: rgba(73, 101, 168, 0.86);
  font-weight: 950;
}

.shop-digital-receipt-lines strong,
.shop-digital-receipt-total strong {
  color: var(--ink);
  font-weight: 950;
  text-align: right;
}

.shop-gift-search-panel,
.shop-custom-panel,
.shop-gift-search,
.shop-gift-note,
.shop-custom-field {
  display: grid;
  gap: 8px;
}

.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 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-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-gift-search > span,
.shop-gift-note > span,
.shop-custom-field > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shop-gift-search input,
.shop-gift-note textarea,
.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-gift-note textarea {
  min-height: 64px;
  line-height: 1.25;
  resize: none;
}

.shop-gift-note small {
  justify-self: end;
  color: rgba(73, 101, 168, 0.76);
  font-size: 0.72rem;
  font-weight: 850;
}

.shop-gift-results {
  display: grid;
  gap: 7px;
  max-height: 188px;
  overflow-y: 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));
  font-size: 0.68rem;
  font-weight: 950;
}

.shop-gift-result-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}

.shop-gift-result strong {
  overflow: hidden;
  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; }

.avatar-try-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.avatar-try-backdrop {
  position: absolute;
  inset: 0;
  border: 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);
  outline: none;
  padding: 24px;
}

.avatar-try-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: 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: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.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-color: #fff;
  background-image: 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%);
  background-size: 24px 24px;
}

.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;
  text-transform: uppercase;
}

.avatar-try-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.12;
}

.avatar-try-copy p {
  margin: 0;
  color: rgba(7, 19, 63, 0.66);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.35;
}

.avatar-try-copy p.is-error { color: #a13018; }

@media (max-width: 600px) {
  .shop-color-card { grid-template-columns: 70px minmax(0, 1fr) 66px; }
  .shop-color-swatch { width: 70px; }
  .shop-buy-button { width: 62px; font-size: 0.82rem; }
  .avatar-try-dialog { grid-template-columns: 1fr; justify-items: center; max-height: calc(100vh - 32px); overflow: auto; }
  .avatar-try-stage { max-width: 190px; }
  .avatar-try-copy { padding-right: 0; text-align: center; }
}

/* Hall of Fame page parity layer. */
.hof-shell {
  margin-bottom: 18px;
}

.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: var(--feature-hero-height);
  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: 18px;
}

.hof-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 10px;
  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-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-empty-state[hidden] {
  display: none;
}

.hof-weekly {
  position: relative;
  min-width: 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;
  overflow: hidden;
  border-radius: 7px;
  background: #d7e8f6;
}

.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;
  margin-bottom: 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;
  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("/assets/carryover/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::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-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-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);
}

.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;
}

.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-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;
}

.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;
}

@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;
  }
}

@media (max-width: 1100px) {
  .hof-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hof-hero-copy {
    max-width: none;
  }

  .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;
  }
}

@media (max-width: 760px) {
  .hof-page .home-shell {
    width: calc(100% - 18px);
    overflow: hidden;
    padding-inline: 8px;
  }

  .hof-page .main-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 132px));
    justify-content: center;
    justify-items: stretch;
    gap: 6px;
    width: min(100%, 276px);
    max-width: calc(100vw - 18px);
    overflow: visible;
  }

  .hof-page .main-tab {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .hof-section {
    max-width: 100%;
    overflow: hidden;
    padding-inline: 8px;
  }

  .hof-hero {
    gap: 14px;
    padding: 12px;
  }

  .hof-hero h1 {
    font-size: 3.05rem;
  }

  .hof-hero-lede,
  .hof-hero-subcopy {
    max-width: 28ch;
  }

  .hof-hero-lede {
    font-size: 1.24rem;
  }

  .hof-hero-subcopy {
    font-size: 0.92rem;
  }

  .hof-grid-top,
  .hof-grid-standard,
  .hof-grid-row-3 {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 230px);
    max-width: 100%;
  }

  .hof-content,
  .hof-main-list {
    width: 100%;
    max-width: 100%;
  }

  .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;
  }
}

@media (max-width: 430px) {
  .hof-page {
    overflow-x: hidden;
  }

  .hof-page .main-tabs {
    grid-template-columns: repeat(2, minmax(0, 132px));
  }

  .hof-page .main-tab {
    min-width: 0;
    min-height: 32px;
    font-size: 0.86rem;
    padding: 5px 10px 5px 8px;
  }

  .hof-page .main-tab img {
    width: 18px;
    height: 18px;
  }

  .hof-grid-top,
  .hof-grid-standard,
  .hof-grid-row-3 {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 230px);
  }
}

/* Play page parity layer. */
.play-shell {
  margin-bottom: 18px;
}

.play-section {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto 60px;
  padding: 8px clamp(4px, 0.8vw, 14px) 0;
}

.hof-heading.play-heading {
  margin: 0 0 12px;
  text-align: center;
}

.play-title-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
}

.play-heading h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: clamp(3.2rem, 7.2vw, 6.1rem);
  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,
    4px 4px 0 rgba(255, 216, 61, 0.72),
    0 12px 18px rgba(7, 19, 63, 0.12);
}

.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-stage[hidden],
[data-play-dashboard][hidden],
[data-play-enroll-view][hidden] {
  display: none;
}

.play-enroll-stage {
  min-width: 0;
}

.play-enroll-view-stage {
  grid-template-columns: 1fr;
  padding-left: 0;
}

.play-heading-link[hidden] {
  display: none;
}

.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:not([hidden])) .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-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[hidden] {
  display: none;
}

.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,
.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-dead {
  --play-tab-accent: #FF0A45;
}

.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-active-table-wrap[hidden] {
  display: none;
}

.play-active-empty {
  width: min(100%, 620px);
  margin: 0;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: rgba(7, 19, 63, 0.58);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.2;
  padding: 22px;
  text-align: center;
}

.play-active-empty[hidden] {
  display: none;
}

.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 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);
  cursor: pointer;
  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,
.play-active-table tbody .play-active-row:focus-visible {
  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:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--play-accent, var(--pink)) 52%, #ffffff);
  outline-offset: 2px;
}

.play-active-table tbody .play-active-row > * {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.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;
  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-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,
.play-active-game-id {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.play-active-game-name {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 950;
}

.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-admin-close {
  border: 1px solid rgba(169, 24, 70, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #a91846;
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  padding: 6px 9px;
}

.play-active-admin-close:hover,
.play-active-admin-close:focus-visible {
  border-color: #a91846;
  background: #a91846;
  color: #ffffff;
  outline: 0;
}

.play-active-admin-close:disabled {
  cursor: wait;
  opacity: 0.58;
}

.play-lobby-admin-status {
  width: min(100%, 620px);
  margin: 0;
  border-radius: 7px;
  background: rgba(7, 19, 63, 0.07);
  color: rgba(7, 19, 63, 0.74);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 9px 11px;
}

.play-lobby-admin-status[hidden] {
  display: none;
}

.play-lobby-admin-status.is-success {
  background: rgba(28, 145, 97, 0.12);
  color: #12633f;
}

.play-lobby-admin-status.is-error {
  background: rgba(169, 24, 70, 0.12);
  color: #8d1239;
}

.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;
}

.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-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-card-grid {
  display: grid;
  gap: 16px;
}

.play-enroll-view .play-card-grid {
  gap: 16px;
}

.play-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 184px));
  justify-content: center;
  gap: 16px;
  align-items: start;
}

.play-enroll-view .play-card-row {
  grid-template-columns: repeat(3, minmax(0, 184px));
  gap: 16px;
}

.play-game-ban-notice {
  justify-self: center;
  width: min(640px, 100%);
  margin: 0 0 12px;
  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-game-ban-notice[hidden] {
  display: none;
}

.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: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 > .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.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 0.98;
  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 > .play-card-variant-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #b1e2bd);
  color: #245d35;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 7px 10px 6px;
  text-shadow: 0 1px 0 #ffffff;
  box-shadow: 0 3px 0 #5b9f6d, 0 8px 14px rgba(16, 33, 58, 0.2);
  transform: rotate(-5deg);
}

.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.is-disabled,
.play-card.is-disabled:hover,
.play-card.is-disabled:focus-within {
  transform: none;
}

.play-card.is-disabled:hover,
.play-card.is-disabled:focus-within {
  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-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);
  }
}

.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-spilled-lite {
  --play-accent: #5BA96D;
  --play-soft: rgba(91, 169, 109, 0.2);
}

.play-game-madhouse {
  --play-accent: #FFE22B;
  --play-soft: rgba(255, 226, 43, 0.22);
}

.play-game-spilled .play-enroll,
.play-game-spilled-lite .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-dead {
  --play-accent: #FF0A45;
  --play-soft: rgba(255, 10, 69, 0.18);
  border-color: color-mix(in srgb, var(--play-accent) 72%, #ffffff);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--play-accent) 16%, #ffffff), rgba(255, 255, 255, 0.86));
  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);
}

.play-game-dead .play-card-media {
  background: transparent;
  padding: 0;
}

.play-game-dead .play-card-media img {
  border-radius: 7px;
  box-shadow: none;
}

.play-game-dead:not(.is-disabled):hover,
.play-game-dead:not(.is-disabled):focus-within,
.play-game-dead.is-open {
  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 18px 30px rgba(7, 19, 63, 0.18);
}

.play-game-dead .play-card-cost {
  border-color: rgba(255, 10, 69, 0.34);
  background: rgba(255, 244, 230, 0.9);
  color: #100E0D;
}

.play-game-dead .play-enroll {
  border-color: #FF0A45;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 244, 230, 0.2), transparent 38%),
    linear-gradient(180deg, #FF174F, #C90030);
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(16, 14, 13, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.26),
    0 3px 0 #6F001E,
    0 10px 16px rgba(16, 14, 13, 0.24);
}

.play-game-dead .play-enroll:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.32),
    0 4px 0 #8D0027,
    0 14px 20px rgba(16, 14, 13, 0.3);
}

.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);
}

.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;
}

.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-member-panel,
.play-enroll-login-panel {
  display: grid;
  gap: 14px;
}

.play-enroll-member-panel[hidden],
.play-enroll-login-panel[hidden],
.play-enroll-confirm-actions[hidden] {
  display: none !important;
}

.play-enroll-player-chip {
  display: grid;
  gap: 4px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(99, 217, 202, 0.18), rgba(255, 255, 255, 0.9)),
    #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 7px 0 rgba(7, 19, 63, 0.07);
  padding: 11px 12px;
}

.play-enroll-player-chip span {
  color: rgba(73, 101, 168, 0.8);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.play-enroll-player-chip strong {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.play-login-form {
  display: grid;
  gap: 12px;
}

.play-login-icon-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 2px;
}

.play-login-image-action {
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  padding: 0;
  text-decoration: none;
  transition: transform 140ms ease, filter 140ms ease;
}

.play-login-image-action img {
  display: block;
  width: auto;
  height: 34px;
  max-width: 132px;
  object-fit: contain;
  filter:
    drop-shadow(3px 3px 0 rgba(99, 217, 202, 0.72))
    drop-shadow(5px 5px 0 rgba(7, 19, 63, 0.14));
}

.play-login-image-action:hover,
.play-login-image-action:focus-visible {
  outline: 0;
  transform: translate(-1px, -2px);
}

.play-enroll-name-label {
  color: rgba(7, 19, 63, 0.7);
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1;
}

.play-enroll-name-input {
  width: 100%;
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 850;
  outline: none;
  padding: 9px 11px;
}

.play-enroll-name-input:focus {
  border-color: rgba(240, 92, 157, 0.54);
  box-shadow: 0 0 0 3px rgba(240, 92, 157, 0.14);
}

.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-confirm-status.is-warning {
  border: 2px solid rgba(240, 92, 157, 0.34);
  border-radius: 8px;
  background: rgba(255, 225, 238, 0.72);
  color: #9f235b;
  padding: 10px 12px;
}

.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);
}

.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)));
}

.shop-purchase-primary:disabled,
.shop-purchase-secondary:disabled {
  cursor: not-allowed;
  filter: grayscale(38%);
  opacity: 0.54;
}

@media (prefers-reduced-motion: reduce) {
  .play-card.is-open .play-enroll {
    animation: none;
  }
}

@media (max-width: 980px) {
  .play-stage {
    grid-template-columns: 1fr;
    justify-content: center;
    padding-left: 0;
  }

  .play-active-games > .play-stage-subheading,
  .play-active-tabs,
  .play-active-table-wrap,
  .play-active-empty {
    align-self: center;
  }

  .play-rail {
    position: static;
    width: min(100%, 620px);
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .play-page {
    overflow-x: hidden;
  }

  .play-page .home-shell {
    width: calc(100% - 18px);
    overflow: hidden;
    padding-inline: 8px;
  }

  .play-page .main-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 132px));
    justify-content: center;
    justify-items: stretch;
    gap: 6px;
    width: min(100%, 276px);
    max-width: calc(100vw - 18px);
    overflow: visible;
  }

  .play-page .main-tab {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .play-section {
    padding-inline: 8px;
  }

  .play-heading h1 {
    font-size: 3.4rem;
  }

  .play-stage-subheading {
    font-size: 1.82rem;
  }

  .play-active-table tbody .play-active-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 8px 0;
  }

  .play-active-table tbody .play-active-row > * {
    width: 100%;
    padding: 5px 12px;
  }

  .play-active-table td:nth-child(2),
  .play-active-table td:nth-child(4) {
    justify-self: stretch;
    text-align: left;
  }

  .play-active-status-cell {
    justify-content: flex-start;
  }

  .play-active-seats {
    width: 100%;
    justify-content: space-between;
  }

  .play-active-seat-bar {
    flex: 1 1 auto;
  }

  .play-active-roster {
    left: 0;
    width: min(420px, calc(100vw - 48px));
    transform: translate(0, -4px) scale(0.98);
  }

  .play-active-roster::before {
    left: 30px;
  }

  .play-active-seats.is-roster-open .play-active-roster {
    transform: translate(0, 0) scale(1);
  }

  .play-enroll-view {
    width: 100%;
    max-width: 100%;
  }

  .play-enroll-view .play-card-grid {
    width: 100%;
  }

  .play-enroll-view .play-card-row {
    grid-template-columns: minmax(0, 184px);
  }
}

@media (max-width: 430px) {
  .play-heading h1 {
    font-size: 3rem;
  }

  .play-section:has(> .play-heading-link:not([hidden])) .play-heading {
    padding-inline: 52px 8px;
  }

  .play-heading-link {
    width: 44px;
    height: 44px;
  }

  .play-heading-link img {
    width: 42px;
    height: 42px;
  }

  .play-rail-card {
    padding: 13px;
  }

  .shop-purchase-actions {
    grid-template-columns: 1fr;
  }
}

.room-list {
  gap: 10px;
}

.room-card {
  grid-template-columns: minmax(0, 1fr) 240px;
  border-color: var(--home-ink);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
  padding: 10px;
}

.room-card h3 {
  font-size: 1.08rem;
}

.room-card form {
  gap: 8px;
}

.room-card input {
  min-height: 34px;
}

.room-card button {
  min-height: 34px;
}

/* Buzz page parity layer. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.main-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pink);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 5px;
}

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

.buzz-shell {
  margin-bottom: 20px;
}

.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;
  overflow-wrap: anywhere;
  padding: 0;
  text-align: center;
  text-shadow: none;
  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-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-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pink);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 5px;
}

.buzz-rail-badge[hidden],
.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-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 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;
  overflow: hidden;
  overflow-wrap: normal;
  padding: 8px 12px;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
  box-shadow: none;
}

.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-hashtag-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 150px;
  border: 1px solid rgba(7, 19, 63, 0.15);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(7, 19, 63, 0.2);
  padding: 4px;
}

.buzz-hashtag-context-menu button {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #b51c66;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  padding: 9px 11px;
  text-align: left;
  white-space: nowrap;
}

.buzz-hashtag-context-menu button:hover,
.buzz-hashtag-context-menu button:focus-visible {
  background: rgba(181, 28, 102, 0.08);
  outline: none;
}

.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);
  font-size: 1.22rem;
  padding: 8px 0;
}

.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-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-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));
  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-status {
  color: #b72562;
}

.buzz-guest-status[hidden] {
  display: none;
}

.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;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  text-decoration: none;
}

.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 {
  filter: drop-shadow(0 4px 8px rgba(7, 19, 63, 0.14));
  transform: translateY(-1px);
}

.buzz-guest-action:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.8);
  outline-offset: 4px;
}

.buzz-composer {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: start;
  padding: 18px 22px 14px;
}

.buzz-composer[hidden] {
  display: none;
}

.buzz-composer-avatar {
  grid-row: 1 / span 3;
  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 {
  grid-column: 2 / 4;
  width: 100%;
  height: 78px;
  min-height: 78px;
  max-height: 78px;
  resize: none;
  overflow-y: auto;
  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::placeholder {
  color: rgba(7, 19, 63, 0.42);
}

.buzz-composer textarea:focus {
  outline: none;
}

.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: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  width: min(100%, 460px);
}

.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-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-composer-tools {
  grid-column: 2 / 3;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  min-height: 42px;
}

.buzz-emoji-control {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.buzz-emoji-picker {
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
  z-index: 1000;
  display: grid;
  grid-template-columns: repeat(auto-fit, 34px);
  justify-content: center;
  gap: 5px;
  width: min(444px, calc(100vw - 24px));
  max-width: none;
  max-height: min(228px, calc(100vh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 12px 28px rgba(7, 19, 63, 0.18);
  padding: 9px;
}

.buzz-emoji-picker[hidden] {
  display: none;
}

.buzz-emoji-option {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  padding: 3px;
}

.buzz-emoji-option:hover,
.buzz-emoji-option:focus-visible {
  background: rgba(99, 217, 202, 0.2);
  outline: 2px solid rgba(73, 101, 168, 0.28);
  outline-offset: 0;
}

.buzz-emoji-option img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  pointer-events: none;
}

.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;
  filter:
    brightness(0)
    saturate(100%)
    invert(58%)
    sepia(18%)
    saturate(946%)
    hue-rotate(188deg)
    brightness(95%)
    contrast(88%);
  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-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-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-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;
}

.profile-section-heading.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;
}

.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;
}

.profile-buzz-list,
.buzz-news-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-menu {
  padding-right: 40px;
}

.buzz-post-menu {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 5;
}

.buzz-post-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(73, 101, 168, 0.82);
  cursor: pointer;
  padding: 0;
}

.buzz-post-menu-toggle span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.buzz-post-menu-toggle:hover,
.buzz-post-menu-toggle:focus-visible,
.buzz-post-menu.is-open .buzz-post-menu-toggle {
  background: rgba(73, 101, 168, 0.1);
  color: var(--ink);
  outline: none;
}

.buzz-post-menu-toggle:focus-visible {
  box-shadow: 0 0 0 2px rgba(73, 101, 168, 0.3);
}

.buzz-post-menu-panel {
  position: absolute;
  top: 0;
  right: calc(100% + 4px);
  min-width: 132px;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(7, 19, 63, 0.16);
  padding: 4px;
}

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

.buzz-post-menu-action {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  padding: 9px 11px;
  text-align: left;
  white-space: nowrap;
}

.buzz-post-menu-action:hover,
.buzz-post-menu-action:focus-visible {
  background: rgba(73, 101, 168, 0.09);
  outline: none;
}

.buzz-post-menu-action.is-delete {
  color: #b51c66;
}

.profile-buzz-avatar,
.profile-buzz-avatar-link {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.profile-buzz-avatar {
  border: 2px solid rgba(255, 255, 255, 0.86);
  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 {
  text-decoration: none;
}

.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,
.profile-buzz-mention {
  color: inherit;
  text-decoration: none;
}

.profile-buzz-author-link:hover,
.profile-buzz-author-link:focus-visible,
.profile-buzz-mention:hover,
.profile-buzz-mention:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.buzz-verified-badge {
  position: relative;
  z-index: 6;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  align-self: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  cursor: help;
  outline: 0;
}

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

.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;
}

.buzz-verified-badge::before {
  content: "";
  top: calc(100% + 3px);
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(21, 23, 36, 0.94);
  border-left: 4px solid transparent;
}

.buzz-verified-badge::after {
  content: attr(data-buzz-verification-tooltip);
  top: calc(100% + 7px);
  width: max-content;
  max-width: min(190px, 62vw);
  border-radius: 4px;
  background: rgba(21, 23, 36, 0.94);
  box-shadow: 0 5px 12px rgba(7, 19, 63, 0.16);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  padding: 5px 7px;
  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.48);
}

.profile-buzz-post-meta time {
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
}

.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-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: 5px;
  font-size: 0.78rem;
  line-height: 1.2;
}

.profile-buzz-post.has-buzz-spoiler:not(.is-spoiler-revealed) {
  min-height: 132px;
}

.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;
  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;
}

.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,
.profile-buzz-media.is-count-3,
.profile-buzz-media.is-count-4 {
  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-label,
.profile-buzz-poll-count {
  position: relative;
  z-index: 1;
}

.profile-buzz-poll-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-buzz-poll-count,
.profile-buzz-poll-status {
  color: rgba(73, 101, 168, 0.78);
  font-size: 0.76rem;
}

.profile-buzz-poll-status {
  margin: 0;
  font-weight: 800;
  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;
  padding: 0;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  transition:
    color 150ms ease,
    filter 150ms ease;
}

.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 {
  overflow: visible;
}

.profile-buzz-action > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 17px;
  max-height: 17px;
  filter:
    brightness(0)
    saturate(100%)
    invert(43%)
    sepia(21%)
    saturate(1280%)
    hue-rotate(188deg)
    brightness(89%)
    contrast(90%)
    drop-shadow(0 0 0 var(--buzz-icon-shadow))
    drop-shadow(0.5px 0 0 var(--buzz-icon-shadow))
    drop-shadow(0 0.45px 0 var(--buzz-icon-shadow));
  object-fit: contain;
}

.profile-buzz-action.is-comment > img {
  max-width: 18px;
  max-height: 18px;
}

.profile-buzz-like-icons,
.profile-buzz-repost-icons {
  position: relative;
  display: block;
  flex: 0 0 auto;
}

.profile-buzz-like-icons {
  width: 20px;
  height: 18px;
}

.profile-buzz-repost-icons {
  width: 19px;
  height: 21px;
}

.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,
.profile-buzz-repost-icon.is-unreposted {
  opacity: 1;
  filter:
    brightness(0)
    saturate(100%)
    invert(43%)
    sepia(21%)
    saturate(1280%)
    hue-rotate(188deg)
    brightness(89%)
    contrast(90%)
    drop-shadow(0 0 0 var(--buzz-icon-shadow))
    drop-shadow(0.5px 0 0 var(--buzz-icon-shadow))
    drop-shadow(0 0.45px 0 var(--buzz-icon-shadow));
  transform: translate(-50%, -50%) scale(1);
}

.profile-buzz-like-icon.is-liked,
.profile-buzz-repost-icon.is-reposted {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6) rotate(-8deg);
}

.profile-buzz-like-icon.is-liked {
  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));
}

.profile-buzz-repost-icon.is-reposted {
  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));
}

.profile-buzz-action.is-like.is-liked {
  --buzz-icon-shadow: rgba(237, 100, 155, 0.38);
  color: #ed649b;
}

.profile-buzz-action.is-like:disabled {
  cursor: default;
  opacity: 0.52;
}

.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 .profile-buzz-like-icon.is-unliked,
.profile-buzz-action.is-repost.is-reposted .profile-buzz-repost-icon.is-unreposted {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.62) rotate(8deg);
}

.profile-buzz-action.is-like.is-liked .profile-buzz-like-icon.is-liked,
.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,
.profile-buzz-action.is-like.is-like-animating [data-buzz-like-count] {
  animation: profileBuzzLikePop 260ms ease;
}

@keyframes profileBuzzLikePop {
  0% { transform: scale(1); }
  52% { transform: scale(1.24); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .profile-buzz-action.is-like.is-like-animating .profile-buzz-like-icons,
  .profile-buzz-action.is-like.is-like-animating [data-buzz-like-count] {
    animation: none;
  }
}

.profile-buzz-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.profile-buzz-share img {
  display: block;
  width: auto;
  height: auto;
  max-width: 15px;
  max-height: 16px;
  object-fit: contain;
}

.profile-buzz-share.is-shared {
  filter: drop-shadow(0 1px 3px rgba(99, 217, 202, 0.42));
}

.buzz-detail-panel {
  width: 100%;
  margin: 0;
}

.buzz-detail-shell {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 248, 253, 0.62)),
    rgba(246, 248, 255, 0.78);
}

.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;
  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-avatar,
.buzz-detail-post .profile-buzz-avatar-link {
  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 .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-loading {
  margin: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  color: rgba(73, 101, 168, 0.74);
  font-weight: 800;
  padding: 14px 22px;
}

.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-guest-reply-callout {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid rgba(7, 19, 63, 0.12);
  padding: 14px 22px 16px;
}

.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-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-avatar,
.buzz-reply-avatar-link {
  position: relative;
  z-index: 1;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.buzz-reply-avatar {
  border: 2px solid rgba(255, 255, 255, 0.86);
  object-fit: cover;
  object-position: center 30%;
  box-shadow: 0 2px 5px rgba(7, 19, 63, 0.12);
}

.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-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-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 8px;
  color: rgba(73, 101, 168, 0.72);
}

@media (max-width: 520px) {
  .buzz-detail-head,
  .buzz-reply-composer {
    padding-inline: 14px;
  }

  .buzz-detail-post .profile-buzz-post {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px 14px;
  }

  .buzz-detail-post .profile-buzz-avatar,
  .buzz-detail-post .profile-buzz-avatar-link {
    width: 44px;
    height: 44px;
  }

  .buzz-reply-composer {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .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-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-rank {
  margin-left: auto;
  color: var(--pink);
  font-weight: 900;
}

.buzz-empty-state {
  margin: 10px 0 0;
  color: rgba(73, 101, 168, 0.78);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.3;
}

.buzz-empty-state[hidden] {
  display: none;
}

.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-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);
}

.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-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,
.buzz-news-image-fallback {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.buzz-news-media img {
  object-fit: cover;
}

.buzz-news-image-fallback {
  display: grid;
  place-items: center;
  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,
.buzz-news-section {
  position: absolute;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #ffffff;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
  line-height: 1;
}

.buzz-news-rank {
  top: 9px;
  right: 9px;
  min-width: 36px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  font-size: 0.78rem;
  padding: 4px 7px;
}

.buzz-news-section {
  left: 9px;
  bottom: 9px;
  max-width: calc(100% - 18px);
  font-size: 0.74rem;
  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;
  background: #303033;
  padding: 13px 14px 14px;
}

.buzz-news-card.is-compact .buzz-news-card-body {
  gap: 5px;
  align-content: center;
  background: transparent;
  padding: 9px 10px;
}

.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.is-compact .buzz-news-meta time {
  color: rgba(73, 101, 168, 0.58);
}

.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;
}

.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;
}

.buzz-news-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.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;
}

.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);
}

.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: var(--ink);
}

.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;
  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-media {
  position: relative;
  height: clamp(150px, 24dvh, 230px);
  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%;
  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;
  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;
}

@media (max-width: 1100px) {
  .home-hero.home-welcome,
  .home-left-zone,
  .home-welcome-row,
  .home-announcement-row,
  .home-side-stack {
    grid-template-columns: 1fr;
  }

  .home-desktop-icons:not([hidden]) {
    min-height: 260px;
  }

  .home-footer-main {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
    align-items: start;
  }

  .home-footer-disclaimer {
    grid-column: 1 / -1;
  }

  .buzz-page-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .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;
  }

  .buzz-top-column,
  .buzz-news-column {
    position: static;
  }
}

@media (max-width: 680px) {
  .home-desktop-icons:not([hidden]) {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-height: 0;
  }

  .home-desktop-game-icon {
    position: static;
    width: 100%;
    min-height: 112px;
    border: 3px solid var(--home-ink);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 4px 4px 0 rgba(7, 19, 63, 0.16);
    padding: 12px 8px;
    transform: none;
  }

  .home-desktop-game-icon:hover,
  .home-desktop-game-icon:focus-visible {
    transform: translate(-2px, -2px);
  }

  .home-retro-footer {
    width: min(100% - 22px, 1500px);
    margin-bottom: 24px;
  }

  .home-footer-main {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .home-footer-brand img {
    width: 82px;
  }

  .site-text-footer {
    width: min(100% - 22px, 1240px);
    margin-bottom: 14px;
    font-size: 0.62rem;
  }

  .buzz-page-panel {
    padding: 6px 10px 12px;
  }

  .buzz-action-bar {
    gap: 14px;
  }

  .buzz-rail-button {
    font-size: 0.92rem;
  }

  .buzz-guest-callout,
  .buzz-follow-topic-form {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .buzz-guest-actions {
    justify-content: flex-start;
  }

  .profile-buzz-post {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 9px 10px;
  }

  .profile-buzz-avatar,
  .profile-buzz-avatar-link {
    width: 36px;
    height: 36px;
  }

  .profile-buzz-post-actions {
    gap: 18px;
  }

  .buzz-news-card.is-compact .buzz-news-card-shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .buzz-news-card.is-compact .buzz-news-media {
    width: 72px;
  }

  .auth-shell,
  .shops-shell {
    width: min(100% - 18px, 1500px);
    padding: 12px;
  }

  .auth-card-head,
  .auth-form {
    padding-inline: 12px;
  }

  .auth-mode-tabs {
    padding-inline: 12px;
  }

  .shops-section {
    padding-inline: 8px;
  }

  .shops-hero {
    gap: 14px;
    padding: 12px;
  }

  .shops-hero h1 {
    font-size: 3.05rem;
  }

  .shops-hero-lede,
  .shops-hero-subcopy {
    max-width: 28ch;
  }

  .shops-hero-lede {
    font-size: 1.24rem;
  }

  .shops-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-tabs {
    justify-content: flex-start;
    min-width: 0;
    width: auto;
  }

  .shop-section-tab {
    min-height: 31px;
    font-size: 0.76rem;
    padding: 6px 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;
  }
}

.profile-page [hidden] {
  display: none !important;
}

/* Buzz timeline layout: compact utilities, continuous center feed, discovery rail. */
.buzz-page-panel {
  padding: 14px 18px 40px;
}

.buzz-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: var(--feature-hero-height);
  overflow: hidden;
  max-width: 1274px;
  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(99, 217, 202, 0.76), rgba(217, 225, 248, 0.64) 48%, rgba(240, 92, 157, 0.42));
  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: 18px;
}

.buzz-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
  max-width: 560px;
}

.buzz-hero-kicker,
.buzz-hero-lede,
.buzz-hero-subcopy {
  margin: 0;
}

.buzz-hero-kicker {
  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;
}

.buzz-hero h1 {
  margin: 0;
  color: var(--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(--yellow),
    5px 5px 0 rgba(99, 217, 202, 0.42),
    0 9px 14px rgba(7, 19, 63, 0.14);
}

.buzz-hero-lede,
.buzz-hero-subcopy {
  max-width: 46ch;
  color: rgba(7, 19, 63, 0.76);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.buzz-hero-lede {
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.52rem;
  font-weight: 950;
  line-height: 1.08;
}

.buzz-hero-subcopy {
  font-size: 0.98rem;
  font-weight: 800;
}

.buzz-page-grid {
  grid-template-areas: "buzz-left buzz-main buzz-right";
  grid-template-columns: minmax(190px, 210px) repeat(2, minmax(0, 520px));
  justify-content: center;
  gap: 12px;
  max-width: 1274px;
}

.buzz-left-column {
  grid-area: buzz-left;
  position: sticky;
  top: 14px;
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.buzz-main-column {
  grid-area: buzz-main;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 24px rgba(7, 19, 63, 0.07);
}

.buzz-news-column {
  min-width: 0;
}

.buzz-right-column {
  grid-area: buzz-right;
  position: sticky;
  top: 14px;
  min-width: 0;
}

.buzz-side-card,
.buzz-top-column,
.buzz-news-column,
.buzz-right-column {
  border: 1px solid rgba(7, 19, 63, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 5px 16px rgba(7, 19, 63, 0.06);
}

.buzz-side-card,
.buzz-news-column {
  position: static;
  padding: 14px;
}

.buzz-right-column {
  padding: 14px;
}

.buzz-right-view-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 12px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 999px;
  background: rgba(73, 101, 168, 0.07);
  padding: 4px;
}

.buzz-right-view-tabs button {
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(7, 19, 63, 0.58);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  padding: 8px 12px;
}

.buzz-right-view-tabs button:hover,
.buzz-right-view-tabs button:focus-visible {
  color: var(--ink);
  outline: 2px solid rgba(73, 101, 168, 0.28);
  outline-offset: 1px;
}

.buzz-right-view-tabs button.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow:
    inset 0 -3px 0 rgba(99, 217, 202, 0.92),
    0 2px 7px rgba(7, 19, 63, 0.1);
}

.buzz-right-panel,
.buzz-news-panel {
  min-width: 0;
}

.buzz-right-panel[hidden] {
  display: none;
}

.buzz-action-bar {
  display: grid;
  gap: 0;
  margin: 0;
  overflow: visible;
  padding: 0;
}

.buzz-rail-button {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  border-top: 1px solid rgba(7, 19, 63, 0.07);
  color: rgba(7, 19, 63, 0.63);
  font-size: 1rem;
  padding: 9px 6px;
  text-align: left;
}

.buzz-rail-button:first-child {
  border-top: 0;
}

.buzz-rail-button::after {
  margin-left: auto;
  color: rgba(73, 101, 168, 0.46);
  content: "›";
  font-size: 1.45rem;
  font-weight: 500;
}

.buzz-rail-button.is-active {
  color: var(--ink);
}

.buzz-rail-button.is-active::after {
  color: var(--pink);
}

.buzz-main-column .buzz-composer-card {
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.13);
  border-radius: 0;
  box-shadow: none;
}

.buzz-main-column .buzz-search-bar {
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.13);
  border-radius: 0;
  box-shadow: none;
}

.buzz-main-column .buzz-column-heading {
  min-height: 54px;
  margin: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.13);
  padding: 14px 16px;
}

.buzz-page-panel .buzz-main-column .buzz-column-heading h1 {
  font-size: 1.3rem;
}

.buzz-feed-list {
  gap: 0;
}

.buzz-feed-list .profile-buzz-post {
  border: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.11);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: none;
  padding: 14px 16px;
}

.buzz-feed-list .profile-buzz-post.has-buzz-menu {
  padding-right: 48px;
}

.buzz-feed-list .profile-buzz-post:last-child {
  border-bottom: 0;
}

.buzz-load-more-row {
  display: grid;
  place-items: center;
  border-top: 1px solid rgba(7, 19, 63, 0.11);
  background: rgba(246, 250, 255, 0.82);
  padding: 16px;
}

.buzz-load-more-row[hidden] {
  display: none;
}

.buzz-load-more {
  min-width: 150px;
  min-height: 42px;
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 999px;
  background: rgba(99, 217, 202, 0.22);
  color: var(--ink);
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 900;
  padding: 9px 18px;
}

.buzz-load-more:hover,
.buzz-load-more:focus-visible {
  background: rgba(99, 217, 202, 0.38);
  outline: 2px solid rgba(73, 101, 168, 0.36);
  outline-offset: 2px;
}

.buzz-feed-list .profile-buzz-post:hover {
  background: rgba(246, 250, 255, 0.94);
}

.buzz-main-column [data-buzz-empty] {
  margin: 0;
  border-top: 0;
  background: rgba(246, 250, 255, 0.68);
  padding: 22px 16px 24px;
}

.buzz-feed-list .profile-buzz-post .profile-buzz-post-text {
  font-size: 1rem;
  line-height: 1.36;
}

.profile-buzz-inline-emoji {
  display: inline-block;
  width: 1.55em;
  height: 1.55em;
  margin: 0 0.08em;
  object-fit: contain;
  vertical-align: -0.38em;
}

.buzz-feed-list .profile-buzz-post-meta {
  font-size: 0.84rem;
}

.buzz-feed-list .profile-buzz-post-meta strong {
  font-size: 1rem;
}

.buzz-top-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 7px;
}

.buzz-top-list .profile-buzz-post {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 0;
  box-shadow: none;
  padding: 10px;
}

.buzz-top-list .profile-buzz-post.has-buzz-menu {
  padding-right: 42px;
}

.buzz-top-list .buzz-post-menu {
  top: 5px;
  right: 5px;
}

.buzz-top-list .profile-buzz-post:last-child {
  border-bottom: 0;
}

.buzz-top-list .profile-buzz-avatar,
.buzz-top-list .profile-buzz-avatar-link {
  width: 34px;
  height: 34px;
}

.buzz-top-list .profile-buzz-post-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.buzz-top-list .profile-buzz-media,
.buzz-top-list .profile-buzz-poll,
.buzz-top-list .profile-buzz-post-tags {
  display: none;
}

.buzz-top-list .profile-buzz-post-actions {
  gap: 14px;
}

@media (max-width: 1180px) {
  .buzz-page-grid {
    grid-template-areas:
      "buzz-left buzz-main"
      "buzz-right buzz-main";
    grid-template-columns: minmax(210px, 250px) minmax(440px, 600px);
  }

  .buzz-left-column,
  .buzz-right-column {
    position: static;
  }
}

@media (max-width: 820px) {
  .buzz-page-panel {
    padding-inline: 10px;
  }

  .buzz-page-grid {
    grid-template-areas:
      "buzz-main"
      "buzz-left"
      "buzz-right";
    grid-template-columns: minmax(0, 600px);
  }

  .buzz-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
  }

  .buzz-hero-copy {
    max-width: none;
  }

  .buzz-left-column {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .buzz-hero {
    gap: 12px;
    padding: 16px;
  }

  .buzz-hero h1 {
    font-size: 3.1rem;
  }

  .buzz-hero-lede {
    font-size: 1.24rem;
  }

  .buzz-hero-subcopy {
    font-size: 0.92rem;
  }

  .buzz-main-column {
    border-radius: 0;
  }

  .buzz-composer {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding-inline: 12px;
  }

  .buzz-composer-avatar {
    width: 42px;
    height: 42px;
  }

  .buzz-feed-list .profile-buzz-post {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .buzz-feed-list .profile-buzz-avatar,
  .buzz-feed-list .profile-buzz-avatar-link {
    width: 38px;
    height: 38px;
  }
}

/* Realtime profile parity with the PHP profile page. */
.profile-page .profile-shell {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 22px;
  width: min(1500px, calc(100% - 28px));
  --profile-narrow-width: 575px;
  --profile-buzz-width: 575px;
}

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

.profile-page .profile-status {
  margin: 0;
  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;
  text-align: center;
  padding: 14px;
}

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

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

.profile-page .profile-portrait {
  display: block;
  width: 100%;
  max-width: 200px;
  min-height: 0;
  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-page .profile-portrait-link {
  color: inherit;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.profile-page .profile-portrait-link:hover,
.profile-page .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);
  outline: 0;
  transform: translateY(-2px);
}

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

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

.profile-page .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-page .profile-presence.is-online {
  color: #0AA652;
}

.profile-page .profile-presence.is-online::before {
  background: #046739;
}

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

.profile-page .profile-presence.is-offline::before {
  background: #9C1C1B;
}

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

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

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

.profile-page .profile-social-link {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  transition:
    filter 170ms ease,
    transform 170ms ease;
}

.profile-page .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));
}

.profile-page img.is-image-missing:not([data-profile-avatar]):not([data-session-avatar]):not([data-current-user-avatar-target]) {
  visibility: hidden;
}

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

.profile-page .profile-social-copy-status {
  display: block;
  min-height: 1.1em;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.profile-page .profile-identity {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
}

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

.profile-page .profile-identity h1,
.profile-page .profile-name-row 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-page .profile-verified-badge {
  flex: 0 0 auto;
  display: inline-grid;
  align-self: center;
  place-items: center;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
}

.profile-page .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-page .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);
  min-width: 0;
  height: var(--profile-site-rank-height);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  transform: translateY(1px);
}

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

.profile-page .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("/assets/carryover/game-assets/badges/normalrank.png") center / contain no-repeat;
  mask: url("/assets/carryover/game-assets/badges/normalrank.png") center / contain no-repeat;
}

.profile-page .profile-site-rank.is-top-five .profile-site-rank-shape {
  -webkit-mask-image: url("/assets/carryover/game-assets/badges/Top5.png");
  mask-image: url("/assets/carryover/game-assets/badges/Top5.png");
}

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

.profile-page .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-page .profile-site-rank.is-top-five .profile-site-rank-number {
  height: 72.3%;
  padding-top: 2px;
}

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

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

.profile-page .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: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  padding: 0;
}

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

.profile-page .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-page .profile-name-row [data-profile-name-tooltip] {
  position: relative;
  cursor: default;
}

.profile-page .profile-name-row [data-profile-name-tooltip]::before,
.profile-page .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-page .profile-name-row .profile-level-card.shop-color-card[data-profile-name-tooltip]::before {
  display: block;
}

.profile-page .profile-name-row [data-profile-name-tooltip]::before {
  content: "";
  top: auto;
  right: auto;
  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;
}

.profile-page .profile-name-row [data-profile-name-tooltip]::after {
  content: attr(data-profile-name-tooltip);
  bottom: calc(100% + 11px);
  max-width: min(260px, 82vw);
  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;
  padding: 7px 9px;
  text-align: center;
  white-space: nowrap;
}

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

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

.profile-page .profile-balance > span,
.profile-page .profile-balance span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  line-height: 1;
  padding: 0;
}

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

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

.profile-page .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-page .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-page .profile-balance [data-profile-stat-label]:hover::before,
.profile-page .profile-balance [data-profile-stat-label]:hover::after,
.profile-page .profile-balance [data-profile-stat-label]:focus-visible::before,
.profile-page .profile-balance [data-profile-stat-label]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.profile-page .profile-balance img {
  display: block;
  width: 34px;
  height: 34px;
  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-page .profile-balance [data-profile-stat-label="Fame"] > img {
  width: 38px;
  height: 38px;
}

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

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

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

.profile-page .profile-mail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition:
    transform 140ms ease,
    filter 140ms ease;
}

.profile-page .profile-mail-link img {
  width: 34px;
  height: auto;
}

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

.profile-page .profile-friend-request img {
  width: 32px;
  height: 32px;
}

.profile-page .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);
}

.profile-page .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-page .profile-bio-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 560px);
  align-items: start;
  margin-top: 24px;
}

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

.profile-page .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-page .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-page .profile-bio-text[data-profile-bio-align="left"] {
  text-align: left;
}

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

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

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

.profile-page .profile-edit-form {
  display: grid;
  width: min(100%, 720px);
  gap: 12px;
  margin-top: 18px;
  border: 1px solid rgba(73, 101, 168, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 248, 255, 0.54)),
    rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(7, 19, 63, 0.08);
  padding: 12px;
}

.profile-page .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-page .profile-left-stack,
.profile-page .profile-right-stack {
  display: grid;
  align-content: start;
  gap: 22px;
  min-width: 0;
}

.profile-page .profile-left-stack {
  grid-column: 1;
  width: min(100%, var(--profile-narrow-width));
}

.profile-page .profile-right-stack {
  grid-column: 2;
  width: 100%;
}

.profile-page .profile-section,
.profile-page .profile-friends-panel {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.profile-page .profile-history-section,
.profile-page .profile-interests-section {
  width: 100%;
}

.profile-page .profile-history-section {
  margin-bottom: 8px;
}

.profile-page .profile-buzz-section {
  align-self: start;
  justify-self: start;
  width: min(100%, var(--profile-buzz-width));
}

.profile-page .profile-friends-panel {
  display: grid;
  gap: 16px;
  align-self: start;
  width: 100%;
}

.profile-page .profile-section-heading {
  margin-bottom: 10px;
}

.profile-page .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-page .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-shadow: none;
  text-transform: none;
}

.profile-page .profile-history-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.profile-page .profile-history-capacity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.profile-page .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-page .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-page .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-page .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-page .profile-history-ticket-strip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.profile-page .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-page .profile-history-ticket.is-fast-ticket {
  width: 16px;
}

.profile-page .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-page .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);
  color: var(--muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 1px 4px rgba(7, 19, 63, 0.06);
  padding: 2px;
}

.profile-page .profile-history-pagination[hidden] {
  display: none;
}

.profile-page .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-page .profile-history-page-items {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.profile-page .profile-history-page-arrow {
  font-size: 0.92rem;
}

.profile-page .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-page .profile-history-pagination button[aria-current="page"] {
  min-width: 21px;
  background: linear-gradient(180deg, #FF7DB8, var(--pink));
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(7, 19, 63, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 1px 3px rgba(240, 92, 157, 0.2);
  padding: 0;
}

.profile-page .profile-history-pagination button:hover:not([aria-current="page"]) {
  background: rgba(99, 217, 202, 0.18);
  color: var(--ink);
  text-decoration: none;
}

.profile-page .profile-history-pagination button:disabled,
.profile-page .profile-history-pagination button:disabled:hover {
  background: transparent;
  color: rgba(73, 101, 168, 0.34);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.profile-page .profile-history-pagination button:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-page .profile-history-pagination button:active {
  transform: translateY(1px);
}

.profile-page .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-page .profile-history-card {
  display: grid;
  grid-template-columns: none;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Keep the two Spilled profile badges independently themed. */
.profile-page .profile-history-card.is-spilled {
  --history-accent: #B1E2BD !important;
  --history-meta: #2F705E !important;
}

.profile-page .profile-history-card.is-spilled-lite {
  --history-accent: #9FD3AC !important;
  --history-meta: #285E50 !important;
}

.profile-page .profile-history-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--history-ink);
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
  transition: filter 150ms ease;
}

.profile-page .profile-history-badge.is-result,
.profile-page .profile-history-badge.is-result.is-win,
.profile-page .profile-history-badge.is-result.is-loss {
  background: transparent;
}

.profile-page .profile-history-badge-shape {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  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-page .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;
}

.profile-page .profile-history-card.is-dead-by-dawn .profile-history-badge:hover,
.profile-page .profile-history-card.is-dead-by-dawn .profile-history-badge:focus-visible {
  transform: translate(1px, 1px) rotate(0.7deg) scale(0.996);
}

.profile-page .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .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));
}

.profile-page .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-page .profile-history-card.is-madhouse .profile-history-badge {
  transition:
    filter 125ms ease,
    transform 125ms ease;
}

.profile-page .profile-history-card.is-madhouse .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .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-page .profile-history-card.is-madhouse .profile-history-badge:hover,
.profile-page .profile-history-card.is-madhouse .profile-history-badge:focus-visible {
  transform: translateY(-1px) rotate(1deg) scale(1.006);
}

.profile-page .profile-history-card.is-madhouse .profile-history-badge:active {
  transform: translateY(1px) rotate(-0.5deg) scale(0.992);
}

.profile-page .profile-history-card.is-madhouse .profile-history-badge::after {
  inset: 0;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(circle at 24% 23%, rgba(255, 255, 255, 0.54) 0 2px, rgba(255, 255, 255, 0) 3px),
    linear-gradient(108deg, rgba(255, 255, 255, 0) 18%, color-mix(in srgb, var(--history-accent) 18%, rgba(255, 255, 255, 0.56)) 38%, rgba(255, 255, 255, 0) 56%);
  opacity: 0.54;
  -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-page .profile-history-card.is-ascension .profile-history-badge::before {
  content: none;
}

.profile-page .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-page .profile-history-card.is-ascension .profile-history-badge-shape::before,
.profile-page .profile-history-card.is-ascension .profile-history-badge-shape::after {
  content: none;
}

.profile-page .profile-history-card.is-ascension .profile-history-badge:hover::before,
.profile-page .profile-history-card.is-ascension .profile-history-badge:focus-visible::before {
  content: none;
}

.profile-page .profile-history-card.is-ascension .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .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-page .profile-history-card.is-ascension .profile-history-badge:hover .profile-history-badge-shape::before,
.profile-page .profile-history-card.is-ascension .profile-history-badge:focus-visible .profile-history-badge-shape::before,
.profile-page .profile-history-card.is-ascension .profile-history-badge:hover .profile-history-badge-shape::after,
.profile-page .profile-history-card.is-ascension .profile-history-badge:focus-visible .profile-history-badge-shape::after {
  content: none;
}

.profile-page .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-page .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-page .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-page .profile-history-card.is-the-magnate .profile-history-badge-shape::before,
.profile-page .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-page .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-page .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-page .profile-history-card.is-the-magnate .profile-history-badge:hover::before,
.profile-page .profile-history-card.is-the-magnate .profile-history-badge:focus-visible::before {
  opacity: 0.86;
  transform: scale(1.12);
}

.profile-page .profile-history-card.is-the-magnate .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .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-page .profile-history-card.is-the-magnate .profile-history-badge:hover .profile-history-badge-shape::before,
.profile-page .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-page .profile-history-card.is-the-magnate .profile-history-badge:hover .profile-history-badge-shape::after,
.profile-page .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-page .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-page .profile-history-card.is-the-magnate .profile-history-badge:hover .profile-history-badge-text,
.profile-page .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-page .profile-history-card.is-frontier .profile-history-badge::before {
  content: none;
}

.profile-page .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-page .profile-history-card.is-frontier .profile-history-badge-shape::before {
  content: none;
}

.profile-page .profile-history-card.is-frontier .profile-history-badge:hover::before,
.profile-page .profile-history-card.is-frontier .profile-history-badge:focus-visible::before {
  content: none;
}

.profile-page .profile-history-card.is-frontier .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .profile-history-card.is-frontier .profile-history-badge:focus-visible .profile-history-badge-shape {
  background: #c88634;
  filter: none;
}

.profile-page .profile-history-card.is-frontier .profile-history-badge:hover .profile-history-badge-shape::before,
.profile-page .profile-history-card.is-frontier .profile-history-badge:focus-visible .profile-history-badge-shape::before {
  content: none;
}

.profile-page .profile-history-card.is-ascension .profile-history-badge::after,
.profile-page .profile-history-card.is-the-magnate .profile-history-badge::after,
.profile-page .profile-history-card.is-frontier .profile-history-badge::after,
.profile-page .profile-history-card.is-palais .profile-history-badge::after {
  display: none;
}

.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge {
  transition:
    filter 120ms ease,
    transform 120ms ease;
}

.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge-shape {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 224, 0.72), rgba(255, 255, 224, 0) 30%),
    radial-gradient(circle at 44% 36%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 66% 76%, rgba(27, 50, 25, 0.34), rgba(27, 50, 25, 0) 39%),
    linear-gradient(145deg, #8aa06d 0%, #61794d 53%, #3a542f 100%);
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.5))
    drop-shadow(0 5px 8px rgba(16, 31, 16, 0.22));
  transition:
    filter 120ms ease,
    background 120ms ease;
}

.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge:hover,
.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge:focus-visible {
  transform: translateY(1px) scale(0.995);
}

.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge:focus-visible .profile-history-badge-shape {
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 222, 0.24), rgba(255, 255, 222, 0) 28%),
    radial-gradient(circle at 58% 64%, rgba(33, 55, 28, 0.34), rgba(33, 55, 28, 0) 42%),
    linear-gradient(145deg, #778c5b 0%, #5c7448 53%, #38522f 100%);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.26))
    drop-shadow(0 2px 4px rgba(16, 31, 16, 0.2));
}

.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge:hover::after,
.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge:focus-visible::after {
  opacity: 0.08;
}

.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge:active {
  transform: translateY(2px) scale(0.99);
}

.profile-page .profile-history-card.is-jungle-hustle .profile-history-badge:active .profile-history-badge-shape {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.2))
    drop-shadow(0 2px 3px rgba(16, 31, 16, 0.22));
}

.profile-page .profile-history-card.is-dead-by-dawn .profile-history-badge {
  transition:
    filter 110ms ease,
    transform 110ms ease;
}

.profile-page .profile-history-card.is-dead-by-dawn .profile-history-badge-shape {
  transition:
    filter 110ms ease,
    background 110ms ease,
    transform 110ms ease;
}

.profile-page .profile-history-card.is-dead-by-dawn .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .profile-history-card.is-dead-by-dawn .profile-history-badge:focus-visible .profile-history-badge-shape {
  transform: translate(-1px, 0);
}

.profile-page .profile-history-card.is-dead-by-dawn .profile-history-badge:active {
  transform: translate(1px, 2px) rotate(0deg) scale(0.988);
}

.profile-page .profile-history-card.is-palais .profile-history-badge {
  overflow: visible;
  transform: rotate(-2deg);
  transition:
    filter 150ms ease,
    transform 150ms ease;
}

.profile-page .profile-history-card.is-palais .profile-history-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 36% 22%, rgba(255, 250, 209, 0.82), rgba(255, 250, 209, 0) 25%),
    linear-gradient(145deg, #fff2bd 0%, #d6a947 35%, #9b6521 72%, #f2d27e 100%);
  filter:
    drop-shadow(0 1px 0 rgba(255, 248, 213, 0.86))
    drop-shadow(0 5px 9px rgba(41, 5, 8, 0.34));
  pointer-events: none;
  -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-page .profile-history-card.is-palais .profile-history-badge::after {
  content: "";
  position: absolute;
  inset: 8px 13px auto;
  z-index: 2;
  display: block;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 235, 0.62) 0 10%, rgba(255, 224, 132, 0.28) 24%, rgba(255, 224, 132, 0) 68%);
  filter: blur(3px);
  opacity: 0.82;
  pointer-events: none;
  transform: rotate(-9deg);
}

.profile-page .profile-history-card.is-palais .profile-history-badge-shape {
  inset: 1.5px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 232, 151, 0.28), rgba(255, 232, 151, 0) 30%),
    radial-gradient(circle at 62% 76%, rgba(13, 1, 2, 0.52), rgba(13, 1, 2, 0) 42%),
    linear-gradient(145deg, #9f1422 0%, #710a13 48%, #230306 100%);
  filter:
    drop-shadow(0 0 1px rgba(255, 241, 190, 0.78))
    drop-shadow(0 2px 4px rgba(29, 4, 7, 0.42));
}

.profile-page .profile-history-card.is-palais .profile-history-badge:hover,
.profile-page .profile-history-card.is-palais .profile-history-badge:focus-visible {
  transform: translateY(-1px) rotate(-3deg);
}

.profile-page .profile-history-card.is-palais .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .profile-history-card.is-palais .profile-history-badge:focus-visible .profile-history-badge-shape {
  background:
    radial-gradient(circle at 36% 23%, rgba(255, 239, 172, 0.34), rgba(255, 239, 172, 0) 30%),
    radial-gradient(circle at 62% 76%, rgba(13, 1, 2, 0.44), rgba(13, 1, 2, 0) 42%),
    linear-gradient(145deg, #b2192a 0%, #86101c 48%, #2f0408 100%);
  filter:
    drop-shadow(0 0 1px rgba(255, 244, 204, 0.88))
    drop-shadow(0 2px 5px rgba(29, 4, 7, 0.38));
}

.profile-page .profile-history-card.is-palais .profile-history-badge-text {
  z-index: 3;
  color: #fff4d4;
  font-family: "Silvestern", "Baserock", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-shadow:
    0 1px 0 rgba(45, 3, 7, 0.92),
    0 2px 0 rgba(45, 3, 7, 0.72),
    0 0 5px rgba(255, 218, 116, 0.32);
}

.profile-page .profile-history-card.is-palais .profile-history-badge.is-ongoing .profile-history-badge-text {
  font-size: 1rem;
}

.profile-page .profile-history-card.is-palais .profile-history-badge:hover .profile-history-badge-text,
.profile-page .profile-history-card.is-palais .profile-history-badge:focus-visible .profile-history-badge-text {
  color: #fff8e4;
}

.profile-page .profile-history-card.is-the-magnate .profile-history-badge::after,
.profile-page .profile-history-card.is-madhouse .profile-history-badge::after {
  display: block;
}

.profile-page .profile-history-card.is-the-magnate .profile-history-badge::after {
  inset: 0;
  height: auto;
  border-radius: 0;
  background:
    radial-gradient(circle at 24% 23%, rgba(255, 255, 255, 0.68) 0 2px, rgba(255, 255, 255, 0) 3px),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 16%, color-mix(in srgb, var(--history-accent) 24%, rgba(255, 255, 255, 0.66)) 38%, rgba(255, 255, 255, 0) 54%);
  opacity: 0.68;
  -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-page .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-page .profile-edit-counter {
  justify-self: end;
  color: rgba(73, 101, 168, 0.76);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.profile-page .profile-history-badge-text strong {
  font-size: 1.52rem;
  font-weight: 700;
  line-height: 0.82;
}

.profile-page .profile-history-badge.is-result .profile-history-badge-text {
  align-items: center;
}

.profile-page .profile-history-badge.is-result .profile-history-badge-text strong {
  font-size: 1.85rem;
  line-height: 0.9;
}

.profile-page .profile-history-badge-text small {
  margin-left: 1px;
  font-size: 0.56rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-0.42em);
}

.profile-page .profile-history-badge.is-ongoing .profile-history-badge-text {
  color: var(--history-ink);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1;
}

.profile-page .profile-history-meta {
  position: relative;
  display: block;
  justify-items: initial;
  width: 84px;
  min-width: 0;
  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-page .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-page .profile-history-meta strong,
.profile-page .profile-history-meta span,
.profile-page .profile-history-meta time {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page .profile-history-meta strong {
  color: inherit;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-page .profile-history-meta span {
  margin-top: 1px;
  font-size: 0.8rem;
  font-weight: 900;
}

.profile-page .profile-history-meta time {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 800;
  opacity: 0.86;
}

.profile-page .profile-friends-heading,
.profile-page .profile-all-friends-heading,
.profile-page .profile-bulletin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 9px;
}

.profile-page .profile-interests-heading {
  display: block;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 9px;
}

.profile-page .profile-interests-table {
  display: grid;
  gap: normal;
  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-page .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-page .profile-interest-row:nth-child(even) {
  background: rgba(246, 248, 255, 0.52);
}

.profile-page .profile-interest-row:last-child {
  border-bottom: 0;
}

.profile-page .profile-interest-row dt,
.profile-page .profile-interest-row dd {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.profile-page .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-page .profile-interest-row dt:nth-of-type(2) {
  border-left: 1px solid rgba(73, 101, 168, 0.12);
}

.profile-page .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-page .profile-top-friends,
.profile-page .profile-all-friends-list,
.profile-page .profile-bulletin-list,
.profile-page .profile-buzz-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-page .profile-top-friends {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 12px;
  align-items: start;
  justify-content: center;
}

.profile-page .profile-top-friends li {
  flex: 0 0 104px;
  min-width: 0;
}

.profile-page .profile-friends-empty,
.profile-page .profile-history-empty,
.profile-page .profile-buzz-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-page .profile-friends-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.profile-page .profile-buzz-view-all,
.profile-page .profile-top-friends-edit,
.profile-page .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-page .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;
  width: 100%;
  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);
  padding: 12px;
}

.profile-page .profile-top-friends-picker[hidden] {
  display: none;
}

.profile-page .profile-top-friends-picker-head,
.profile-page .profile-top-friends-picker-tools,
.profile-page .profile-top-friends-picker-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-page .profile-top-friends-picker-head {
  justify-content: space-between;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding-bottom: 8px;
}

.profile-page .profile-top-friends-picker-head h3 {
  margin: 0;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
}

.profile-page .profile-top-friends-picker-head > span,
.profile-page .profile-top-friend-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 999px;
  background: rgba(255, 216, 61, 0.3);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 7px;
}

.profile-page .profile-top-friends-picker-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.profile-page .profile-top-friends-picker.is-reordering .profile-top-friends-picker-tools {
  grid-template-columns: auto;
  justify-content: end;
}

.profile-page .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-weight: 800;
  outline: 0;
  padding: 7px 10px;
}

.profile-page .profile-top-friends-search[hidden],
.profile-page .profile-top-friend-rank[hidden] {
  display: none;
}

.profile-page .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-page .profile-top-friends-picker.is-reordering .profile-top-friends-picker-list {
  grid-template-columns: minmax(0, 1fr);
}

.profile-page .profile-top-friend-choice,
.profile-page .profile-top-friend-reorder-card {
  display: grid;
  grid-template-columns: auto 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid var(--profile-friends-border);
  border-radius: 8px;
  background: var(--profile-friends-surface-strong);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 6px 8px;
}

.profile-page .profile-top-friend-choice {
  cursor: pointer;
}

.profile-page .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);
}

.profile-page .profile-top-friend-choice input {
  width: 16px;
  height: 16px;
  accent-color: var(--pink);
}

.profile-page .profile-top-friend-choice img,
.profile-page .profile-top-friend-reorder-card img {
  display: block;
  width: 30px;
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  object-fit: cover;
  object-position: center 18%;
}

.profile-page .profile-top-friend-choice span,
.profile-page .profile-top-friend-reorder-card span:not(.profile-top-friend-drag-handle) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile-page .profile-top-friend-drag-handle {
  border-radius: 999px;
  background: rgba(99, 217, 202, 0.22);
  cursor: grab;
  font-size: 0.68rem;
  padding: 5px 8px;
}

.profile-page [data-profile-top-friends-reorder-item] {
  cursor: grab;
}

.profile-page [data-profile-top-friends-reorder-item].is-dragging {
  opacity: 0.48;
}

.profile-page [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);
}

.profile-page .profile-top-friends-picker-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  padding-top: 10px;
}

.profile-page .profile-top-friends-save,
.profile-page .profile-top-friends-secondary {
  min-height: 30px;
  border: 1px solid var(--profile-friends-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 7px 12px;
}

.profile-page .profile-top-friends-save {
  border-color: rgba(240, 92, 157, 0.3);
  background: var(--pink);
  color: #fff;
}

.profile-page .profile-top-friends-secondary[aria-pressed="true"] {
  background: rgba(99, 217, 202, 0.24);
}

.profile-page .profile-top-friends-status {
  min-height: 1em;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-page .profile-friend-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  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-page .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%;
}

.profile-page .profile-friend-card span,
.profile-page .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-page .profile-all-friends-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  justify-content: center;
}

.profile-page .profile-all-friends-list li {
  flex: 0 0 86px;
  min-width: 0;
}

.profile-page .profile-all-friend-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  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;
}

.profile-page .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-page .profile-friends-list-section {
  display: grid;
  gap: 10px;
  width: 100%;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  padding-top: 14px;
}

.profile-page .profile-bulletin-section {
  width: 100%;
  min-width: 0;
}

.profile-page .profile-bulletin-form {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-bottom: 0;
}

.profile-page .profile-bulletin-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.profile-page .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-page .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;
}

.profile-page .profile-bulletin-underline-label,
.profile-page .profile-bulletin-underline {
  text-decoration-line: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.14em;
}

.profile-page .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-page .profile-bulletin-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(73, 101, 168, 0.62);
  pointer-events: none;
}

.profile-page .profile-bulletin-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-page .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-page .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-page .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-page .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-page .profile-bulletin-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.profile-page .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-page .profile-bulletin-comment-avatar-link {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

.profile-page .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-page .profile-bulletin-comment-content {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.profile-page .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-page .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-page .profile-bulletin-comment-author-link {
  color: inherit;
  text-decoration: none;
}

.profile-page .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-page .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;
}

@media (max-width: 1120px) {
  .profile-page .profile-content-grid {
    grid-template-columns: minmax(0, var(--profile-narrow-width));
  }

  .profile-page .profile-left-stack,
  .profile-page .profile-right-stack {
    grid-column: 1;
    grid-row: auto;
    width: min(100%, var(--profile-narrow-width));
  }
}

@media (max-width: 680px) {
  .profile-page .profile-content-grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
  }

  .profile-page .profile-left-stack,
  .profile-page .profile-right-stack,
  .profile-page .profile-friends-panel {
    width: min(100%, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
  }

  .profile-page .profile-friends-heading,
  .profile-page .profile-all-friends-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-page .profile-friends-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    width: 100%;
  }

  .profile-page .profile-friends-see-all {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .profile-page .profile-shell {
    gap: 16px;
  }

  .profile-page .profile-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 0 4px 18px;
  }

  .profile-page .profile-portrait-column {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-portrait {
    width: min(100%, 210px);
  }

  .profile-page .profile-identity h1,
  .profile-page .profile-name-row h1 {
    font-size: 1.95rem;
    line-height: 0.95;
  }

  .profile-page .profile-name-row {
    justify-content: center;
    gap: 9px;
    margin-inline: auto;
  }

  .profile-page .profile-balance {
    justify-content: center;
    gap: 10px 14px;
  }

  .profile-page .profile-bio {
    width: min(100%, 420px);
    margin-inline: auto;
  }

  .profile-page .profile-history-pagination {
    max-width: 100%;
    justify-self: start;
    overflow-x: auto;
  }

  .profile-page .profile-history-title-row {
    width: 100%;
  }

  .profile-page .profile-history-capacity {
    width: 100%;
    justify-content: flex-start;
  }

  .profile-page .profile-history-list {
    grid-template-columns: repeat(3, minmax(76px, 1fr));
  }

  .profile-page .profile-interest-row {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-interest-row dt {
    border-right: 0;
    border-bottom: 1px solid rgba(7, 19, 63, 0.08);
    padding-bottom: 5px;
  }

  .profile-page .profile-interest-row dd {
    padding-top: 7px;
  }
}

/* Restore the interaction layer and typography details from the legacy profile. */
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;
}

.profile-page .profile-presence {
  font-family: "Kimoru", "Barlow", Arial, Helvetica, sans-serif;
}

.profile-page .profile-social-link img {
  transition:
    filter 170ms ease,
    transform 170ms ease;
}

.profile-page .profile-social-link:hover img,
.profile-page .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-page .profile-social-link.is-copied img {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.82))
    drop-shadow(0 0 8px rgba(99, 217, 202, 0.52));
  transform: scale(1.08);
}

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

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

.profile-page .profile-social-links[hidden],
.profile-page .profile-social-copy-status[hidden],
.profile-page .profile-friends-list-section[hidden],
.profile-page .profile-bulletin-form[hidden],
.profile-page .profile-bulletin-closed[hidden],
.profile-page .profile-history-empty[hidden],
.profile-page .profile-buzz-empty[hidden],
.profile-page .profile-friends-empty[hidden] {
  display: none;
}

.profile-page .profile-mail-link:hover,
.profile-page .profile-mail-link:focus-visible {
  filter:
    drop-shadow(0 4px 8px rgba(240, 92, 157, 0.2))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
  transform: translateY(-1px);
}

.profile-page .profile-mail-link:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--aqua);
  outline-offset: 4px;
}

.profile-page .profile-bio-edit:hover,
.profile-page .profile-bio-edit:focus-visible,
.profile-page .profile-bio-edit[aria-expanded="true"] {
  border-color: rgba(240, 92, 157, 0.38);
  color: var(--ink);
}

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

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

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

.profile-page .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-page .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-page .profile-friend-request:hover,
.profile-page .profile-friend-request:focus-visible {
  filter: saturate(1.08) brightness(1.02);
  transform: translateY(-1px);
}

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

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

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

.profile-page .profile-friend-request.is-pending {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0) 34%),
    linear-gradient(145deg, #79e7d8, #38bca9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 3px 8px rgba(7, 19, 63, 0.12);
}

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

.profile-page .profile-friend-request.is-pending .profile-friend-request-status::before {
  content: "";
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.profile-page .profile-friend-request {
  display: inline-grid;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin-left: -4px;
  align-self: center;
  padding: 0;
}

.profile-page .profile-friend-request img {
  width: 36px;
  height: 36px;
}

.profile-page .profile-friend-request-label {
  display: none;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.profile-page .profile-friend-request.is-remove {
  border: 0;
  background: transparent;
  color: var(--ink);
}

.profile-page .profile-friend-request.is-remove img {
  filter: grayscale(0.15) hue-rotate(120deg);
  transform: rotate(45deg);
}

.profile-page .profile-friend-request.is-outgoing {
  cursor: default;
  opacity: 0.78;
}

.settings-top-friends-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.settings-top-friend-option {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  padding: 8px;
  color: var(--ink);
  cursor: pointer;
}

.settings-top-friend-option:has(input:checked) {
  border-color: var(--pink);
  background: rgba(255, 236, 246, 0.94);
}

.settings-top-friend-option:has(input:disabled) {
  cursor: default;
  opacity: 0.55;
}

.settings-top-friend-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--pink);
}

.settings-top-friend-option img {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 8px;
  object-fit: cover;
}

.settings-top-friend-option span {
  min-width: 0;
  overflow: hidden;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page .profile-history-ticket-strip .profile-history-ticket:nth-child(3n+2) {
  transform: rotate(5deg) translateY(-1px);
}

.profile-page .profile-history-ticket-strip .profile-history-ticket:nth-child(3n) {
  transform: rotate(-2deg);
}

.profile-page .profile-history-heading h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.profile-page .profile-history-card[hidden] {
  display: none;
}

.profile-page .profile-history-badge:hover,
.profile-page .profile-history-badge:focus-visible,
.profile-page .profile-history-badge:active {
  text-decoration: none;
}

.profile-page .profile-history-badge:hover,
.profile-page .profile-history-badge:focus-visible {
  z-index: 2;
}

.profile-page .profile-history-badge:focus-visible {
  border-radius: 999px;
  outline: 2px solid var(--pink);
  outline-offset: 5px;
}

.profile-page .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .profile-history-badge:focus-visible .profile-history-badge-shape {
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.62))
    drop-shadow(0 5px 8px rgba(7, 19, 63, 0.16));
}

.profile-page .profile-history-badge:hover::after,
.profile-page .profile-history-badge:focus-visible::after {
  opacity: 0.16;
}

.profile-page .profile-history-badge:active {
  filter: saturate(1.08) brightness(0.98);
}

.profile-page .profile-interest-row dd:nth-of-type(2) {
  border-right: 0;
}

.profile-page .profile-interest-empty {
  background: rgba(255, 255, 255, 0.22) !important;
}

.profile-page dt.profile-interest-empty,
.profile-page dd.profile-interest-empty {
  border-left: 1px solid rgba(73, 101, 168, 0.08);
}

.profile-page dt.profile-interest-empty {
  border-right: 1px solid rgba(73, 101, 168, 0.08);
}

.profile-page .profile-buzz-view-all:hover,
.profile-page .profile-buzz-view-all:focus-visible,
.profile-page .profile-top-friends-edit:hover,
.profile-page .profile-top-friends-edit:focus-visible,
.profile-page .profile-friends-see-all:hover,
.profile-page .profile-friends-see-all:focus-visible {
  background: rgba(99, 217, 202, 0.18);
  color: var(--ink);
  text-decoration: none;
}

.profile-page .profile-buzz-view-all:focus-visible,
.profile-page .profile-top-friends-edit:focus-visible,
.profile-page .profile-friends-see-all:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-page .profile-buzz-post:hover,
.profile-page .profile-buzz-post:focus-within {
  z-index: 5;
}

.profile-page .profile-buzz-avatar-link:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.72);
  outline-offset: 3px;
}

.profile-page .profile-buzz-spoiler-reveal:hover,
.profile-page .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-page .profile-buzz-poll-choice:hover,
.profile-page .profile-buzz-poll-choice:focus-visible,
.profile-page .profile-buzz-poll-choice.is-selected {
  border-color: rgba(99, 217, 202, 0.5);
  background: rgba(99, 217, 202, 0.16);
}

.profile-page .profile-buzz-poll-choice:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.48);
  outline-offset: 2px;
}

.profile-page .profile-buzz-poll-choice:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.profile-page .profile-buzz-poll-choice:disabled:hover {
  border-color: rgba(7, 19, 63, 0.12);
  background: rgba(255, 255, 255, 0.66);
}

.profile-page .profile-buzz-hashtag:hover,
.profile-page .profile-buzz-hashtag:focus-visible,
.profile-page .profile-buzz-mention:hover,
.profile-page .profile-buzz-mention:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.profile-page .profile-buzz-hashtag:focus-visible,
.profile-page .profile-buzz-mention:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.48);
  outline-offset: 2px;
}

.profile-page .profile-buzz-action:hover:not(:disabled),
.profile-page .profile-buzz-action:focus-visible:not(:disabled) {
  color: var(--ink);
}

.profile-page .profile-buzz-action:focus-visible,
.profile-page .profile-buzz-share:focus-visible {
  outline: 2px solid rgba(99, 217, 202, 0.48);
  outline-offset: 2px;
}

.profile-page .profile-buzz-action:active:not(:disabled) {
  filter: brightness(0.98);
}

.profile-page .profile-buzz-share:hover,
.profile-page .profile-buzz-share:focus-visible {
  filter: drop-shadow(0 1px 2px rgba(7, 19, 63, 0.16));
}

.profile-page .profile-buzz-share:active {
  transform: translateY(1px);
}

.profile-page .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-page .profile-friends-see-all:disabled {
  cursor: not-allowed;
  filter: grayscale(0.25);
  opacity: 0.48;
}

.profile-page .profile-friend-card img {
  transition:
    box-shadow 170ms ease,
    transform 170ms ease;
}

.profile-page .profile-friend-card:hover,
.profile-page .profile-friend-card:focus-visible {
  background: rgba(255, 255, 255, 0.36);
  color: var(--muted);
  text-decoration: none;
  transform: translateY(-2px);
}

.profile-page .profile-friend-card:hover img,
.profile-page .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-page .profile-all-friend-card {
  transition:
    background 170ms ease,
    color 170ms ease,
    transform 170ms ease;
}

.profile-page .profile-all-friend-card span {
  width: 100%;
  text-align: center;
}

.profile-page .profile-all-friend-card:hover,
.profile-page .profile-all-friend-card:focus-visible {
  background: rgba(255, 255, 255, 0.34);
  color: var(--muted);
  text-decoration: none;
  transform: translateY(-1px);
}

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

.profile-page .profile-friend-card:active,
.profile-page .profile-all-friend-card:active {
  transform: translateY(0) scale(0.98);
}

.profile-page .profile-bulletin-tool:hover,
.profile-page .profile-bulletin-tool:focus-visible {
  border-color: rgba(240, 92, 157, 0.36);
  color: var(--ink);
}

.profile-page .profile-bulletin-tool:focus-visible,
.profile-page .profile-bulletin-submit:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-page .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-page .profile-bulletin-comment-avatar-link:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-page .profile-bulletin-comment-author-link:hover,
.profile-page .profile-bulletin-comment-author-link:focus-visible {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-page .profile-bulletin-comment-author-link:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-page .profile-edit-field input:focus-visible,
.profile-page .profile-edit-field textarea:focus-visible {
  border-color: rgba(99, 217, 202, 0.72);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(99, 217, 202, 0.13);
}

.profile-page .profile-bio-save:hover,
.profile-page .profile-bio-save:focus-visible,
.profile-page .profile-bio-cancel:hover,
.profile-page .profile-bio-cancel:focus-visible {
  border-color: rgba(99, 217, 202, 0.72);
  transform: translateY(-1px);
}

.profile-page .profile-bio-save:focus-visible,
.profile-page .profile-bio-cancel:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

@media (max-width: 1120px) {
  .profile-page .profile-top-friends {
    grid-template-columns: none;
    justify-content: center;
  }

  .profile-page .profile-friend-card {
    max-width: 148px;
    margin-inline: auto;
  }
}

@media (max-width: 620px) {
  .profile-page .profile-all-friends-list li {
    flex-basis: 62px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-page .profile-portrait-link,
  .profile-page .profile-social-link,
  .profile-page .profile-friend-request,
  .profile-page .profile-history-badge,
  .profile-page .profile-friend-card,
  .profile-page .profile-friend-card img,
  .profile-page .profile-all-friend-card {
    transition: none;
  }
}

/* Realtime mailbox page. */
.mailbox-shell {
  display: grid;
  gap: 16px;
  width: min(1260px, calc(100% - 28px));
  margin-top: 14px;
}

.mailbox-status {
  margin: 0;
  border: 2px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(7, 19, 63, 0.68);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  padding: 16px;
  text-align: center;
}

.mailbox-status.is-error {
  border-color: rgba(240, 92, 157, 0.38);
  background: rgba(255, 240, 248, 0.92);
  color: #9c164e;
}

.mailbox-status[hidden],
.mailbox-surface[hidden] {
  display: none;
}

.mailbox-surface {
  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,
.mailbox-owner-avatar-inner {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mailbox-owner-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  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-inner {
  width: 100%;
  height: 100%;
}

.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;
  line-height: 1;
  text-transform: uppercase;
}

.mailbox-owner-copy h1 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 3.4rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.94;
  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;
  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: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,
.mailbox-message-avatar,
.mailbox-friend-request-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px 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-weight: 950;
}

.mailbox-list-avatar {
  width: 38px;
  height: 38px;
  font-size: 0.74rem;
}

.mailbox-message-avatar {
  width: 46px;
  height: 46px;
  font-size: 0.8rem;
}

.mailbox-friend-request-avatar {
  width: 58px;
  height: 58px;
  font-size: 0.82rem;
}

.mailbox-list-avatar img,
.mailbox-message-avatar img,
.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-list-avatar.is-shop-poster,
.mailbox-message-avatar.is-shop-poster {
  background: #fff;
}

.mailbox-list-avatar.is-shop-poster img,
.mailbox-message-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],
.mailbox-compose[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-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;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
}

.mailbox-message-actions,
.mailbox-compose-actions,
.mailbox-friend-request-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-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;
  overflow-wrap: anywhere;
  padding: 18px;
  white-space: pre-wrap;
}

.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-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;
  letter-spacing: 0;
  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;
  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;
  flex-wrap: wrap;
  gap: 12px;
}

.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-friend-request-card,
.mailbox-receipt-card {
  display: grid;
  gap: 14px;
  overflow: hidden;
  white-space: normal;
  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-receipt-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 252, 249, 0.78)),
    #fff;
}

.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,
.mailbox-receipt-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.mailbox-receipt-head {
  grid-template-columns: 74px minmax(0, 1fr);
}

.mailbox-receipt-image {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.16);
  border-radius: 8px;
  background: #fff;
}

.mailbox-receipt-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mailbox-friend-request-copy,
.mailbox-receipt-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.mailbox-friend-request-copy span,
.mailbox-receipt-copy span {
  color: var(--pink);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.mailbox-friend-request-copy h3,
.mailbox-receipt-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-receipt-lines {
  display: grid;
  gap: 8px;
  border-top: 1px dashed rgba(7, 19, 63, 0.2);
  padding-top: 12px;
}

.mailbox-receipt-total {
  display: grid;
  grid-template-columns: minmax(90px, 0.45fr) minmax(5.8em, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 950;
}

.mailbox-receipt-total strong {
  color: var(--ink);
}

.mailbox-receipt-lines a,
.mailbox-receipt-intro a {
  color: var(--pink);
  text-decoration: none;
}

.mailbox-receipt-lines a:hover,
.mailbox-receipt-lines a:focus-visible,
.mailbox-receipt-intro a:hover,
.mailbox-receipt-intro a:focus-visible {
  text-decoration: underline;
}

.mailbox-receipt-lines [data-receipt-row="note"] strong {
  line-height: 1.35;
  white-space: pre-wrap;
}

.mailbox-receipt-lines > span {
  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;
}

.mailbox-receipt-lines b {
  color: rgba(73, 101, 168, 0.86);
  font-weight: 950;
}

.mailbox-receipt-lines strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 950;
}

.mailbox-receipt-intro {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .mailbox-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .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;
  }
}

@media (max-width: 640px) {
  .mailbox-shell {
    width: min(100% - 20px, 1260px);
  }

  .mailbox-owner-avatar {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }

  .mailbox-owner-copy h1 {
    font-size: 2rem;
  }

  .mailbox-stats span {
    min-height: 54px;
    padding: 7px;
  }

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

  .mailbox-list-heading,
  .mailbox-list-item,
  .mailbox-message-head,
  .mailbox-message-body,
  .mailbox-compose {
    padding: 12px;
  }

  .mailbox-message-subject-row {
    grid-template-columns: 1fr;
  }

  .mailbox-message-actions {
    justify-content: flex-start;
  }
}

/* MadHouse legacy port styles */
@font-face {
  font-family: "Lakon Rokum";
  src: url("/assets/carryover/fonts/Lakon%20Rokum%20Regular.ttf") format("truetype");
  font-display: swap;
}

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

body.madhouse-page {
  --page-zoom: 0.9;
  background: url("/assets/carryover/game-assets/madhouse/background.png") center top / 1254px 1254px repeat fixed #f4ead8;
}
body.madhouse-page .site-header {
  background: transparent;
  box-shadow: none;
}

.madhouse-game {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(100% - 28px, 1540px);
  height: max(1350px, calc(100vh - 80px));
  min-height: 0;
  margin: 48px auto 22px;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 250, 231, 0.72), rgba(255, 255, 255, 0.44)),
    rgba(255, 255, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 24px 54px rgba(52, 29, 12, 0.16);
  padding: clamp(14px, 2vw, 28px);
  -webkit-backdrop-filter: blur(8px) saturate(118%);
  backdrop-filter: blur(8px) saturate(118%);
  zoom: var(--page-zoom);
}

.madhouse-game.is-complete {
  height: auto;
  min-height: max(720px, calc(100vh - 80px));
}

.madhouse-loading-notice {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  border: 2px solid rgba(255, 104, 21, 0.74);
  border-radius: 12px;
  background: rgba(255, 248, 205, 0.94);
  box-shadow: 0 6px 18px rgba(112, 53, 10, 0.12);
  color: #6e2d08;
  padding: 8px 16px;
  text-align: center;
}

.madhouse-loading-title {
  color: #ff5a16;
  font-family: "Lakon Rokum", Impact, sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.madhouse-loading-copy {
  font-weight: 800;
}

.madhouse-stage {
  --madhouse-memory-card-width: clamp(92px, 8.2vw, 134px);
  --madhouse-memory-wall-gap: clamp(10px, 1vw, 14px);
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  align-items: start;
  justify-content: center;
  gap: clamp(22px, 3vw, 46px);
}

.madhouse-stage.is-complete {
  min-height: 0;
}

.madhouse-stage.is-complete .madhouse-side-rail {
  position: static;
  z-index: auto;
}

.madhouse-side-rail {
  align-self: stretch;
  display: grid;
  justify-self: end;
  justify-items: center;
  width: min(100%, 430px);
  min-width: 0;
}

.madhouse-player-card {
  box-sizing: border-box;
  align-self: start;
  display: grid;
  justify-items: center;
  gap: 17px;
  width: 100%;
  height: calc(100% - 18px);
  grid-template-rows: auto minmax(0, 1fr);
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: rgba(255, 252, 239, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    0 16px 30px rgba(52, 29, 12, 0.1);
  padding: 18px 24px 23px;
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

.madhouse-player-brand {
  display: grid;
  justify-items: center;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 9px 14px -15px rgba(52, 29, 12, 0.45);
}

.madhouse-wordmark {
  display: block;
  width: min(100%, 226px);
  height: auto;
  filter:
    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.78))
    drop-shadow(0 10px 18px rgba(52, 29, 12, 0.16));
}

.madhouse-wordmark-text {
  display: block;
  max-width: 100%;
  color: #D83E00;
  font-family: "Lakon Rokum", Arial, Helvetica, sans-serif;
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 400;
  line-height: 0.92;
  overflow-wrap: anywhere;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.78),
    0 10px 18px rgba(52, 29, 12, 0.16);
  -webkit-text-stroke: 0.55px #7A2200;
}

.madhouse-player-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(124px, auto);
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
}

.madhouse-player-status.is-spectator-view {
  grid-template-columns: 1fr;
  justify-items: center;
}

.madhouse-player-avatar {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.madhouse-player-avatar-frame {
  width: 126px;
  height: 126px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 10px 18px rgba(52, 29, 12, 0.14);
}

.madhouse-player-avatar-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.madhouse-player-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #d83e00;
  font-family: "Lakon Rokum", Arial, sans-serif;
  font-size: 1.22rem;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  -webkit-text-stroke: 0.45px #7a2200;
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 3px 5px rgba(52, 29, 12, 0.14);
}

.madhouse-player-card.is-complete {
  gap: 10px;
  grid-template-rows: auto minmax(0, 1fr);
  height: auto;
  box-shadow: none;
  padding: 14px 20px 16px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.madhouse-player-card.is-complete .madhouse-player-brand {
  padding-bottom: 8px;
  box-shadow: none;
}

.madhouse-player-card.is-complete .madhouse-wordmark {
  width: min(100%, 150px);
}

.madhouse-winner-reveal {
  display: grid;
  align-self: start;
  justify-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding-top: 5px;
}

.madhouse-winner-frame {
  display: block;
  width: 150px;
  height: 203px;
  overflow: hidden;
  border: 4px solid #ee4201;
  border-radius: 12px;
  background: rgba(255, 252, 239, 0.86);
  box-shadow: none;
}

.madhouse-winner-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.madhouse-winner-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #ff4400;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
  text-shadow: none;
}

.madhouse-final-jury-results {
  width: min(100%, 282px);
  margin-top: 0;
}

.madhouse-final-jury-results .madhouse-prior-eviction-row {
  min-height: 32px;
  padding: 6px 10px;
}

.madhouse-final-jury-results .madhouse-prior-eviction-title {
  font-size: 0.78rem;
}

.madhouse-time-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.madhouse-clock {
  position: relative;
  width: min(100%, 86px);
  aspect-ratio: 1272 / 731;
  filter: drop-shadow(0 6px 10px rgba(52, 29, 12, 0.16));
}

.madhouse-status-row {
  display: grid;
  grid-template-columns: minmax(78px, 88px) minmax(48px, 58px);
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.madhouse-clock-stack {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.madhouse-clock img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.madhouse-clock-time {
  position: absolute;
  inset: 19% 10% 23%;
  display: grid;
  place-items: center;
  color: #d83e00;
  font-family: "Lakon Rokum", Arial, sans-serif;
  font-size: clamp(0.86rem, 1.22vw, 1.12rem);
  line-height: 1;
  text-align: center;
  -webkit-text-stroke: 0.45px #7a2200;
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 3px 4px rgba(52, 29, 12, 0.22);
}

.madhouse-week-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 21px;
  border: 2px solid rgba(216, 62, 0, 0.58);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #ffe127;
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.24),
    0 4px 7px rgba(52, 29, 12, 0.14);
  color: #d83e00;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  padding: 3px 9px;
  text-align: center;
  white-space: nowrap;
}

.madhouse-calendar {
  position: relative;
  width: 100%;
  max-width: 58px;
  aspect-ratio: 1031 / 1296;
  color: #d83e00;
  font-family: "Lakon Rokum", Arial, sans-serif;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 6px 10px rgba(52, 29, 12, 0.16));
}

.madhouse-calendar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.madhouse-calendar-week,
.madhouse-calendar-day {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 9%;
  right: 9%;
  -webkit-text-stroke: 0.45px #7a2200;
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 3px 4px rgba(52, 29, 12, 0.2);
}

.madhouse-calendar-week {
  top: 16%;
  height: 15.6%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  paint-order: normal;
  text-shadow: none;
  white-space: nowrap;
}

.madhouse-calendar-day {
  top: 35.6%;
  bottom: 13%;
}

.madhouse-calendar-day-number {
  display: block;
  font-size: 1.72rem;
  line-height: 0.84;
}

.madhouse-calendar-day-number.is-seat-count {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.madhouse-memory-wall {
  display: grid;
  justify-self: center;
  justify-items: center;
  gap: var(--madhouse-memory-wall-gap);
  align-items: start;
  align-content: start;
  margin-inline: auto;
  width: 100%;
  max-width: calc((var(--madhouse-memory-card-width) * 7) + (var(--madhouse-memory-wall-gap) * 6));
  overflow-x: visible;
  padding-bottom: 0;
}

.madhouse-memory-row {
  display: flex;
  justify-content: center;
  gap: var(--madhouse-memory-wall-gap);
  width: 100%;
}

.madhouse-memory-card {
  --status-color: #b8aa92;
  --status-shadow: rgba(88, 66, 38, 0.2);
  --avatar-border-top: #ffffff;
  --avatar-border-right: #ffffff;
  --avatar-border-bottom: #ffffff;
  --avatar-border-left: #ffffff;
  --name-border-top: color-mix(in srgb, var(--status-color) 58%, rgba(52, 29, 12, 0.2));
  --name-border-right: var(--name-border-top);
  --name-border-bottom: var(--name-border-top);
  --name-border-left: var(--name-border-top);
  display: grid;
  flex: 0 0 var(--madhouse-memory-card-width);
  gap: 6px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.madhouse-memory-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-color: var(--avatar-border-top) var(--avatar-border-right) var(--avatar-border-bottom) var(--avatar-border-left);
  border-style: solid;
  border-width: 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow:
    0 2px 0 rgba(52, 29, 12, 0.16),
    0 10px 18px rgba(52, 29, 12, 0.14);
  transition:
    box-shadow 180ms ease,
    filter 180ms ease;
  text-decoration: none;
}

.madhouse-competition-throbber {
  --madhouse-throbber-size: clamp(22px, 1.45vw, 28px);
  --madhouse-throbber-bar-width: calc(var(--madhouse-throbber-size) * 0.14);
  --madhouse-throbber-bar-height: calc(var(--madhouse-throbber-size) * 0.32);
  --madhouse-throbber-inset: calc(var(--madhouse-throbber-size) * 0.04);
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: block;
  width: var(--madhouse-throbber-size);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(52, 29, 12, 0.34));
  pointer-events: none;
}

.madhouse-competition-throbber-bar {
  position: absolute;
  top: var(--madhouse-throbber-inset);
  left: 50%;
  width: var(--madhouse-throbber-bar-width);
  height: var(--madhouse-throbber-bar-height);
  margin-left: calc(var(--madhouse-throbber-bar-width) / -2);
  border-radius: 999px;
  background: #ffe127;
  opacity: 0.24;
  animation: madhouse-competition-throb 920ms linear infinite;
  animation-delay: var(--madhouse-throbber-delay, 0ms);
  transform: rotate(calc(var(--madhouse-throbber-step) * 30deg));
  transform-origin: 50% calc((var(--madhouse-throbber-size) / 2) - var(--madhouse-throbber-inset));
}

.madhouse-competition-throbber-bar:nth-child(1) {
  --madhouse-throbber-step: 0;
  --madhouse-throbber-delay: 0ms;
  background: #fff8d2;
}

.madhouse-competition-throbber-bar:nth-child(2) {
  --madhouse-throbber-step: 1;
  --madhouse-throbber-delay: -843ms;
  background: #ffe971;
  opacity: 0.96;
}

.madhouse-competition-throbber-bar:nth-child(3) {
  --madhouse-throbber-step: 2;
  --madhouse-throbber-delay: -767ms;
  background: #ffe127;
  opacity: 0.9;
}

.madhouse-competition-throbber-bar:nth-child(4) {
  --madhouse-throbber-step: 3;
  --madhouse-throbber-delay: -690ms;
  background: #ffc326;
  opacity: 0.84;
}

.madhouse-competition-throbber-bar:nth-child(5) {
  --madhouse-throbber-step: 4;
  --madhouse-throbber-delay: -613ms;
  background: #ff991f;
  opacity: 0.76;
}

.madhouse-competition-throbber-bar:nth-child(6) {
  --madhouse-throbber-step: 5;
  --madhouse-throbber-delay: -537ms;
  background: #ff6b13;
  opacity: 0.68;
}

.madhouse-competition-throbber-bar:nth-child(7) {
  --madhouse-throbber-step: 6;
  --madhouse-throbber-delay: -460ms;
  background: #d83e00;
  opacity: 0.6;
}

.madhouse-competition-throbber-bar:nth-child(8) {
  --madhouse-throbber-step: 7;
  --madhouse-throbber-delay: -383ms;
  background: #d83e00;
  opacity: 0.5;
}

.madhouse-competition-throbber-bar:nth-child(9) {
  --madhouse-throbber-step: 8;
  --madhouse-throbber-delay: -307ms;
  background: #ff6b13;
  opacity: 0.42;
}

.madhouse-competition-throbber-bar:nth-child(10) {
  --madhouse-throbber-step: 9;
  --madhouse-throbber-delay: -230ms;
  background: #ff991f;
  opacity: 0.34;
}

.madhouse-competition-throbber-bar:nth-child(11) {
  --madhouse-throbber-step: 10;
  --madhouse-throbber-delay: -153ms;
  background: #ffc326;
  opacity: 0.28;
}

.madhouse-competition-throbber-bar:nth-child(12) {
  --madhouse-throbber-step: 11;
  --madhouse-throbber-delay: -77ms;
  background: #ffe127;
  opacity: 0.22;
}

.madhouse-competition-throbber[hidden],
.madhouse-memory-card:not(.has-pending-competition) .madhouse-competition-throbber {
  display: none;
}

@keyframes madhouse-competition-throb {
  0%,
  8% {
    opacity: 1;
  }

  100% {
    opacity: 0.18;
  }
}

.madhouse-memory-name a {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-memory-card.is-hoh {
  --avatar-border-top: #3EA2E8;
  --avatar-border-right: #3EA2E8;
  --avatar-border-bottom: #3EA2E8;
  --avatar-border-left: #3EA2E8;
  --status-color: #3EA2E8;
  --status-shadow: rgba(31, 104, 155, 0.24);
}

.madhouse-memory-card.is-nominee {
  --avatar-border-top: #D11149;
  --avatar-border-right: #D11149;
  --avatar-border-bottom: #D11149;
  --avatar-border-left: #D11149;
  --status-color: #D11149;
  --status-shadow: rgba(120, 0, 31, 0.24);
}

.madhouse-memory-card.is-veto {
  --avatar-border-top: #E6C229;
  --avatar-border-right: #E6C229;
  --avatar-border-bottom: #E6C229;
  --avatar-border-left: #E6C229;
  --status-color: #C9A316;
  --status-shadow: rgba(143, 108, 0, 0.24);
}

.madhouse-memory-card.is-hoh.is-veto {
  --avatar-border-top: #3EA2E8;
  --avatar-border-right: #E6C229;
  --avatar-border-bottom: #E6C229;
  --avatar-border-left: #3EA2E8;
  --name-border-top: #3EA2E8;
  --name-border-right: #E6C229;
  --name-border-bottom: #E6C229;
  --name-border-left: #3EA2E8;
  --status-color: #3EA2E8;
}

.madhouse-memory-card.is-nominee.is-veto {
  --avatar-border-top: #D11149;
  --avatar-border-right: #E6C229;
  --avatar-border-bottom: #E6C229;
  --avatar-border-left: #D11149;
  --name-border-top: #D11149;
  --name-border-right: #E6C229;
  --name-border-bottom: #E6C229;
  --name-border-left: #D11149;
  --status-color: #D11149;
}

.madhouse-memory-card.is-evicted {
  --avatar-border-top: #b8aa92;
  --avatar-border-right: #b8aa92;
  --avatar-border-bottom: #b8aa92;
  --avatar-border-left: #b8aa92;
  --name-border-top: rgba(110, 96, 78, 0.34);
  --name-border-right: rgba(110, 96, 78, 0.34);
  --name-border-bottom: rgba(110, 96, 78, 0.34);
  --name-border-left: rgba(110, 96, 78, 0.34);
  --status-color: #8d8170;
  --status-shadow: rgba(88, 66, 38, 0.14);
}

.madhouse-memory-card.is-winner {
  --avatar-border-top: #ee4201;
  --avatar-border-right: #ee4201;
  --avatar-border-bottom: #ee4201;
  --avatar-border-left: #ee4201;
  --status-color: #d83e00;
  --status-shadow: rgba(216, 62, 0, 0.18);
}

.madhouse-memory-card.is-winner .madhouse-memory-name {
  color: #ff4400;
}

.madhouse-memory-card.is-runner-up {
  --avatar-border-top: #b8aa92;
  --avatar-border-right: #b8aa92;
  --avatar-border-bottom: #b8aa92;
  --avatar-border-left: #b8aa92;
  --name-border-top: rgba(110, 96, 78, 0.34);
  --name-border-right: rgba(110, 96, 78, 0.34);
  --name-border-bottom: rgba(110, 96, 78, 0.34);
  --name-border-left: rgba(110, 96, 78, 0.34);
  --status-color: #8d8170;
  --status-shadow: rgba(88, 66, 38, 0.14);
}

.madhouse-memory-card.is-evicted .madhouse-memory-frame img {
  filter: grayscale(87%);
}

.madhouse-memory-card.is-runner-up .madhouse-memory-frame img {
  filter: grayscale(85%);
}

.madhouse-memory-card.is-bottom-evicted .madhouse-memory-frame img {
  filter: grayscale(100%);
}

.madhouse-memory-card.is-evicted .madhouse-memory-name,
.madhouse-memory-card.is-runner-up .madhouse-memory-name {
  opacity: 0.58;
}

.madhouse-memory-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center 18%;
  transition: transform 220ms ease;
}

.madhouse-memory-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 25px;
  overflow: hidden;
  border-color: var(--name-border-top) var(--name-border-right) var(--name-border-bottom) var(--name-border-left);
  border-style: solid;
  border-width: 1.5px;
  border-radius: 6px;
  background: rgba(255, 252, 239, 0.82);
  color: color-mix(in srgb, var(--status-color) 76%, #2f2416);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.04;
  padding: 4px 5px 5px;
  text-align: center;
  box-shadow:
    0 2px 0 var(--status-shadow),
    0 4px 8px rgba(52, 29, 12, 0.1);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.madhouse-memory-name span {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-memory-tag {
  --status-mark-size: clamp(1.36rem, 1.06vw, 1.68rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: calc(var(--status-mark-size) + 4px);
}

.madhouse-status-badge {
  --tag-color: #78C3FB;
  --tag-stroke: #2f79ac;
  --tag-shadow: rgba(52, 29, 12, 0.22);
  position: relative;
  display: grid;
  place-items: center;
  width: auto;
  max-width: 100%;
  min-height: var(--status-mark-size);
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--tag-color);
  line-height: 1;
  box-shadow: none;
}

.madhouse-status-badge.is-hoh {
  --tag-color: #3EA2E8;
  --tag-stroke: #1f689b;
}

.madhouse-status-badge.is-nominee {
  --tag-color: #D11149;
  --tag-stroke: #78001f;
}

.madhouse-status-badge.is-evicted {
  --tag-color: #8d8170;
  --tag-stroke: #6e604e;
  --tag-shadow: rgba(88, 66, 38, 0.16);
  min-height: var(--status-mark-size);
}

.madhouse-status-badge.is-winner {
  --tag-color: #ff4400;
  --tag-stroke: #9b2500;
  --tag-shadow: rgba(255, 68, 0, 0.22);
  min-height: var(--status-mark-size);
}

.madhouse-status-badge.is-runner-up {
  --tag-color: #8d8170;
  --tag-stroke: #6e604e;
  --tag-shadow: rgba(88, 66, 38, 0.16);
  min-height: var(--status-mark-size);
}

.madhouse-memory-card.is-bottom-evicted .madhouse-status-badge.is-evicted {
  --tag-color: #6f6558;
  --tag-stroke: #584d40;
  --tag-shadow: rgba(62, 48, 32, 0.18);
}

.madhouse-status-text {
  grid-area: 1 / 1;
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 0 1px 2px;
  font-size: var(--status-mark-size);
  line-height: 0.92;
  letter-spacing: 0;
  filter: saturate(1.06) contrast(1.04);
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
}

.madhouse-status-suffix {
  display: inline-block;
  margin-left: 1px;
  font-size: 0.46em;
  line-height: 1;
  transform: translateY(-0.58em);
}

.madhouse-status-shadow {
  display: none;
}

.madhouse-status-text {
  color: var(--tag-color);
  font-family: "Lakon Rokum", Arial, sans-serif;
  -webkit-text-stroke: 0.45px var(--tag-stroke);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 var(--tag-stroke),
    0 3px 4px var(--tag-shadow);
}

.madhouse-status-tag-image,
.madhouse-veto-tag {
  display: block;
  width: auto;
  height: var(--status-mark-size);
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 1px 0 #8f6c00)
    drop-shadow(0 3px 4px rgba(52, 29, 12, 0.2));
}

.madhouse-status-tag-image.is-hoh {
  filter:
    drop-shadow(0 1px 0 #1f689b)
    drop-shadow(0 3px 4px rgba(52, 29, 12, 0.2));
}

.madhouse-status-tag-image.is-nominee {
  filter:
    drop-shadow(0 1px 0 #78001f)
    drop-shadow(0 3px 4px rgba(52, 29, 12, 0.2));
}

@media (hover: hover) and (pointer: fine) {
  .madhouse-memory-frame:hover {
    box-shadow:
      0 2px 0 rgba(52, 29, 12, 0.18),
      0 13px 22px rgba(52, 29, 12, 0.18);
    filter: saturate(1.03);
  }

  .madhouse-memory-frame:hover img {
    transform: scale(1.045);
  }

  .madhouse-memory-card:not(.is-evicted) .madhouse-memory-frame:hover + .madhouse-memory-name {
    background: rgba(255, 252, 239, 0.94);
    box-shadow:
      0 2px 0 var(--status-shadow),
      0 6px 11px rgba(52, 29, 12, 0.13);
  }
}

@media (prefers-reduced-motion: reduce) {
	        .madhouse-memory-frame,
	        .madhouse-memory-frame img,
	        .madhouse-memory-name,
	        .madhouse-competition-throbber,
	        .madhouse-competition-throbber-bar,
	        .madhouse-chat-tab.has-unread-private .madhouse-private-unread-badge {
	          transition: none;
	          animation: none;
	        }

  .madhouse-memory-frame:hover img {
    transform: none;
  }
}

.madhouse-lower-row {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  align-items: stretch;
  gap: clamp(22px, 3vw, 46px);
  min-height: 0;
}

.madhouse-lower-row.is-console-hidden {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
}

.madhouse-voting-history {
  --mh-history-sticky-width: clamp(176px, 10.5vw, 206px);
  --mh-history-column-width: calc((100% - var(--mh-history-sticky-width)) / var(--mh-vote-col-count, 1));
  --mh-history-final-column-width: 120px;
  --mh-history-photo-height: clamp(58px, 5.6vw, 82px);
  --mh-history-grid: rgba(119, 101, 72, 0.28);
  --mh-history-grid-strong: rgba(70, 56, 38, 0.52);
  --mh-history-paper: rgba(255, 251, 240, 0.98);
  --mh-history-paper-soft: rgba(250, 242, 224, 0.88);
  --mh-history-vote: #f7ecd1;
  --mh-history-muted: #5f513d;
  --mh-history-hoh: #2b70aa;
  --mh-history-nominee: #9f271f;
  --mh-history-jury-vote: #4f9365;
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  overflow-x: visible;
  padding: 0 2px 16px;
}

.madhouse-voting-history-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0 2px 8px;
}

.madhouse-voting-history-head h2,
.madhouse-voting-history-final h3 {
  margin: 0;
  color: #d83e00;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}

.madhouse-voting-history-head span {
  color: var(--mh-history-muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.madhouse-voting-history-empty {
  margin: 0;
  color: var(--mh-history-muted);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.25;
}

.madhouse-voting-history-table,
.madhouse-voting-history-final-table {
  justify-self: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: #3f321f;
  background: rgba(255, 251, 240, 0.12);
}

.madhouse-voting-history-table th,
.madhouse-voting-history-table td,
.madhouse-voting-history-final-table th,
.madhouse-voting-history-final-table td {
  border: 1px solid var(--mh-history-grid);
  vertical-align: middle;
}

.madhouse-voting-history-sticky {
  position: sticky;
  left: 0;
  z-index: 3;
  width: var(--mh-history-sticky-width);
  min-width: var(--mh-history-sticky-width);
  max-width: var(--mh-history-sticky-width);
  background: var(--mh-history-paper);
  box-shadow: none;
}

.madhouse-voting-history-label-cell,
.madhouse-voting-history-week-cell,
.madhouse-voting-history-count-cell {
  height: 28px;
  background: var(--mh-history-vote);
  color: var(--mh-history-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.madhouse-voting-history-week-cell,
.madhouse-voting-history-count-cell,
.madhouse-voting-history-hoh-cell,
.madhouse-voting-history-nominee-cell,
.madhouse-voting-history-veto-cell,
.madhouse-voting-history-boot-cell,
.madhouse-voting-history-cell {
  width: var(--mh-history-column-width);
}

.madhouse-voting-history-hoh-cell,
.madhouse-voting-history-nominee-cell,
.madhouse-voting-history-veto-cell {
  height: 34px;
  background: var(--mh-history-vote);
  color: var(--mh-history-muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  text-align: center;
  text-transform: none;
}

.madhouse-voting-history-hoh-cell span,
.madhouse-voting-history-nominee-cell span,
.madhouse-voting-history-veto-cell span {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 0 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.madhouse-voting-history-table thead .madhouse-voting-history-nominee-cell span {
  overflow: visible;
  line-height: 1.12;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.madhouse-voting-history-hoh-cell {
  background: var(--mh-history-vote);
  color: var(--mh-history-muted);
}

.madhouse-voting-history-nominee-cell {
  background: var(--mh-history-vote);
  color: var(--mh-history-muted);
}

.madhouse-voting-history-veto-cell {
  background: var(--mh-history-vote);
  color: var(--mh-history-muted);
}

.madhouse-voting-history-table thead .madhouse-voting-history-hoh-cell,
.madhouse-voting-history-table thead .madhouse-voting-history-nominee-cell,
.madhouse-voting-history-table thead .madhouse-voting-history-veto-cell {
  background: var(--mh-history-vote);
  color: var(--mh-history-muted);
}

.madhouse-voting-history-table thead .madhouse-voting-history-break-row th,
.madhouse-voting-history-table thead .madhouse-voting-history-break-row td {
  border-bottom-color: #000;
  border-bottom-width: 4px;
}

.madhouse-voting-history-boot-cell {
  height: calc(var(--mh-history-photo-height) + 22px);
  background: var(--mh-history-paper-soft);
  padding: 0;
  text-align: center;
  vertical-align: top;
}

.madhouse-voting-history-boot-cell a {
  display: grid;
  grid-template-rows: var(--mh-history-photo-height) 22px;
  height: 100%;
  color: #3f321f;
  text-decoration: none;
}

.madhouse-voting-history-boot-cell img {
  display: block;
  width: 100%;
  height: var(--mh-history-photo-height);
  object-fit: cover;
  object-position: center 28%;
}

.madhouse-voting-history-boot-cell span:not(.madhouse-voting-history-empty-mark) {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  align-self: center;
  padding: 0 3px;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.madhouse-voting-history-empty-mark {
  display: grid;
  place-items: center;
  height: 100%;
  color: rgba(110, 96, 78, 0.42);
  font-weight: 900;
}

.madhouse-voting-history-player-cell {
  width: var(--mh-history-sticky-width);
  min-width: var(--mh-history-sticky-width);
  max-width: var(--mh-history-sticky-width);
  height: 38px;
  background: var(--mh-history-paper);
  padding: 0;
  text-align: left;
}

.madhouse-voting-history-player-cell a,
.madhouse-voting-history-final-player a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #3f321f;
  text-decoration: none;
}

.madhouse-voting-history-player-cell a {
  padding: 3px 9px;
}

.madhouse-voting-history-player-cell img,
.madhouse-voting-history-final-player img {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(216, 62, 0, 0.34);
  border-radius: 6px;
  object-fit: cover;
  object-position: center 28%;
}

.madhouse-voting-history-player-cell strong,
.madhouse-voting-history-player-cell small,
.madhouse-voting-history-final-player span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.madhouse-voting-history-player-cell strong {
  color: #3f321f;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
}

.madhouse-voting-history-player-cell small {
  margin-top: 2px;
  color: #8a7a61;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.madhouse-voting-history-cell {
  height: 32px;
  background: var(--mh-history-paper-soft);
  color: var(--mh-history-muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}

.madhouse-voting-history-cell span {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 0 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.madhouse-voting-history-cell.is-vote {
  background: var(--mh-history-vote);
  color: var(--mh-history-muted);
}

.madhouse-voting-history-cell.is-boot-vote {
  background: var(--mh-history-vote);
  color: var(--mh-history-muted);
}

.madhouse-voting-history-cell.is-hoh-vote {
  background: var(--mh-history-hoh);
  color: #fffcef;
  font-style: italic;
  box-shadow: none;
}

.madhouse-voting-history-cell.is-standby-vote span {
  opacity: 0.74;
}

.madhouse-voting-history-cell.is-auto-vote span {
  font-style: italic;
}

.madhouse-voting-history-cell.is-nominee {
  background: var(--mh-history-nominee);
  color: #fffcef;
  font-style: italic;
}

.madhouse-voting-history-cell.is-hoh {
  background: var(--mh-history-hoh);
  color: #fffcef;
  font-style: italic;
}

.madhouse-voting-history-cell.is-hoh span {
  max-width: 100%;
  margin: 0 auto;
  overflow: visible;
  line-height: 1.05;
  text-overflow: clip;
  white-space: normal;
}

.madhouse-voting-history-cell.is-no-vote {
  background: var(--mh-history-vote);
  color: rgba(110, 96, 78, 0.66);
  font-style: italic;
}

.madhouse-voting-history-cell.is-empty,
.madhouse-voting-history-cell.is-out-before {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: transparent;
  outline: 0;
}

.madhouse-voting-history-cell.is-empty span,
.madhouse-voting-history-cell.is-out-before span {
  padding: 0;
  visibility: hidden;
}

.madhouse-voting-history-cell.is-voted-out {
  outline: 0;
}

.madhouse-voting-history-final {
  display: grid;
  justify-items: start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mh-history-grid-strong);
}

.madhouse-voting-history-final-table {
  width: max-content;
  max-width: 100%;
  table-layout: fixed;
}

.madhouse-voting-history-final-player,
.madhouse-voting-history-final-vote {
  box-sizing: border-box;
  height: 38px;
  background: var(--mh-history-paper);
  color: #3f321f;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.madhouse-voting-history-final-player {
  width: var(--mh-history-sticky-width);
  min-width: var(--mh-history-sticky-width);
  max-width: var(--mh-history-sticky-width);
  padding: 4px 9px;
  text-align: left;
}

.madhouse-voting-history-finalist,
.madhouse-voting-history-final-vote {
  width: var(--mh-history-final-column-width);
  min-width: var(--mh-history-final-column-width);
  max-width: var(--mh-history-final-column-width);
}

.madhouse-voting-history-final-table .madhouse-voting-history-final-spacer {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: transparent;
  outline: 0;
  padding: 0;
}

.madhouse-voting-history-finalist {
  box-sizing: border-box;
  background: var(--mh-history-paper-soft);
  padding: 0;
  text-align: center;
}

.madhouse-voting-history-finalist a {
  display: grid;
  grid-template-rows: var(--mh-history-final-column-width) 26px;
  color: #3f321f;
  text-decoration: none;
}

.madhouse-voting-history-finalist img {
  display: block;
  width: 100%;
  height: var(--mh-history-final-column-width);
  object-fit: cover;
  object-position: center 28%;
}

.madhouse-voting-history-finalist span {
  min-width: 0;
  overflow: hidden;
  align-self: center;
  padding: 4px 5px;
  color: #3f321f;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.madhouse-voting-history-finalist.is-winner span,
.madhouse-voting-history-final-vote.is-vote {
  color: #d83e00;
}

.madhouse-voting-history-final-vote {
  background: rgba(255, 252, 239, 0.58);
  font-size: 1rem;
}

.madhouse-voting-history-final-vote.is-vote {
  background: var(--mh-history-jury-vote);
  color: #fffcef;
}

.madhouse-chat {
  display: grid;
  position: relative;
  grid-template-columns: minmax(142px, 188px) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  margin-top: 0;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 252, 239, 0.82), rgba(255, 255, 255, 0.58)),
    rgba(255, 255, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 14px 28px rgba(52, 29, 12, 0.12);
}

.madhouse-game-console {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 252, 239, 0.72), rgba(255, 255, 255, 0.44)),
    rgba(255, 255, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 14px 28px rgba(52, 29, 12, 0.12);
  padding: 12px;
}

.madhouse-console-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  margin-bottom: 12px;
}

.madhouse-console-tab {
  min-width: 0;
  min-height: 34px;
  border: 2px solid rgba(184, 170, 146, 0.36);
  border-radius: 7px;
  background: rgba(255, 252, 239, 0.76);
  color: #6e604e;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 9px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(88, 66, 38, 0.1);
}

.madhouse-console-tab.is-active {
  border-color: rgba(216, 62, 0, 0.58);
  background: rgba(255, 225, 39, 0.74);
  color: #d83e00;
  box-shadow: 0 2px 0 rgba(216, 62, 0, 0.22);
}

.madhouse-console-panel {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 10px;
}

.madhouse-console-panel[hidden] {
  display: none;
}

.madhouse-day-event-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 288px);
  min-height: 38px;
  border: 2px solid rgba(216, 62, 0, 0.58);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #ffe127;
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.24),
    0 6px 10px rgba(52, 29, 12, 0.12);
  color: #d83e00;
  font-size: clamp(0.9rem, 0.98vw, 1.06rem);
  font-weight: 900;
  line-height: 1;
  padding: 8px 12px;
  text-align: center;
  white-space: nowrap;
}

.madhouse-console-body {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
  width: 100%;
  min-height: 0;
}

.madhouse-compete-button,
.madhouse-results-button,
.madhouse-nomination-save,
.madhouse-veto-choice,
.madhouse-eviction-choice,
.madhouse-do-not-use,
.madhouse-decision-save,
.madhouse-flash-exit,
.madhouse-score-button,
.madhouse-admin-day-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(216, 62, 0, 0.62);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #ffe127;
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.24),
    0 6px 10px rgba(52, 29, 12, 0.12);
  color: #d83e00;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.madhouse-nomination-card:disabled,
.madhouse-veto-choice:disabled,
.madhouse-eviction-choice:disabled,
.madhouse-do-not-use:disabled {
  cursor: default;
}

.madhouse-compete-button {
  min-width: 132px;
  min-height: 38px;
  font-size: 1.06rem;
  padding: 8px 18px;
}

.madhouse-results-button {
  min-width: 158px;
  min-height: 34px;
  border-color: rgba(184, 170, 146, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #fff8d2;
  color: #6e604e;
  font-size: 0.92rem;
  padding: 8px 14px;
}

.madhouse-lobby-leave-button {
  border-color: rgba(216, 62, 0, 0.62);
  color: #a92f00;
}

.madhouse-lobby-leave-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.madhouse-admin-day-form {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
}

.madhouse-admin-day-button {
  min-width: 158px;
  min-height: 34px;
  border-color: rgba(184, 170, 146, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #fff8d2;
  color: #6e604e;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  padding: 8px 14px;
}

.madhouse-admin-day-button:disabled {
  cursor: default;
  opacity: 0.56;
}

.madhouse-admin-day-status {
  width: min(100%, 220px);
  margin: 0;
  color: rgba(255, 248, 210, 0.86);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 7px rgba(43, 22, 11, 0.36);
}

.madhouse-admin-day-status.is-success {
  color: #7bd1b8;
}

.madhouse-admin-day-status.is-error {
  color: #ffd2c1;
}

.madhouse-prior-eviction {
  display: grid;
  gap: 7px;
  width: min(100%, 288px);
  margin-top: 14px;
}

.madhouse-prior-eviction-title {
  display: block;
  color: #6e604e;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.madhouse-prior-eviction-table {
  display: grid;
  gap: 6px;
  width: 100%;
}

.madhouse-prior-eviction-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 76px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 2px solid rgba(184, 170, 146, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 50%),
    #fff8d2;
  color: #6e604e;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  padding: 8px 10px;
  box-shadow: 0 2px 0 rgba(88, 66, 38, 0.1);
}

.madhouse-prior-eviction-row.is-evicted {
  border-color: rgba(216, 62, 0, 0.66);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #ffe127;
  color: #d83e00;
  box-shadow: 0 2px 0 rgba(216, 62, 0, 0.22);
}

.madhouse-prior-eviction-row.is-winner {
  border-color: rgba(238, 66, 1, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #ffe127;
  color: #ff4400;
  box-shadow: 0 2px 0 rgba(238, 66, 1, 0.22);
}

.madhouse-prior-eviction-row[data-vote-tooltip]::after {
  content: attr(data-vote-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 5;
  width: max-content;
  max-width: min(300px, 92vw);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  border: 2px solid rgba(216, 62, 0, 0.36);
  border-radius: 8px;
  background: rgba(255, 252, 239, 0.98);
  color: #6e604e;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.15;
  padding: 7px 9px;
  text-align: center;
  white-space: normal;
  box-shadow: 0 9px 18px rgba(52, 29, 12, 0.16);
}

.madhouse-prior-eviction-row[data-vote-tooltip]:hover::after,
.madhouse-prior-eviction-row[data-vote-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.madhouse-prior-eviction-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-prior-eviction-votes {
  display: block;
  text-align: right;
  white-space: nowrap;
}

.madhouse-prior-eviction-status {
  display: block;
  text-align: left;
  white-space: nowrap;
}

.madhouse-prior-eviction-note {
  margin: 0;
  color: #6e604e;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-align: right;
}

.madhouse-nomination-builder {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
}

.madhouse-nomination-instructions {
  width: min(100%, 296px);
  margin: 0;
  color: #6e604e;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.16;
  text-align: center;
}

.madhouse-nomination-grid {
  display: grid;
  gap: 13px;
  width: 100%;
}

.madhouse-nomination-row {
  --nom-row-count: 4;
  display: grid;
  grid-template-columns: repeat(var(--nom-row-count), minmax(0, 64px));
  justify-content: center;
  gap: 11px;
}

.madhouse-nomination-card {
  appearance: none;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #6e604e;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.madhouse-nomination-photo {
  width: 64px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 2px 0 rgba(88, 66, 38, 0.12),
    0 5px 9px rgba(52, 29, 12, 0.12);
}

.madhouse-nomination-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.madhouse-nomination-card strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-nomination-card.is-selected .madhouse-nomination-photo {
  border-color: rgba(216, 62, 0, 0.82);
  background: rgba(255, 225, 39, 0.62);
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.24),
    0 7px 12px rgba(52, 29, 12, 0.16);
}

.madhouse-nomination-card.is-selected strong {
  color: #d83e00;
}

.madhouse-nomination-save {
  min-width: 154px;
  min-height: 36px;
  font-size: 0.94rem;
  padding: 8px 14px;
}

.madhouse-nomination-save:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.madhouse-pov-builder,
.madhouse-eviction-builder,
.madhouse-jury-ranking-builder,
.madhouse-replacement-builder {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
}

.madhouse-decision-prompt {
  width: min(100%, 296px);
  margin: 0;
  color: #6e604e;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.17;
  text-align: center;
}

.madhouse-veto-options,
.madhouse-eviction-options {
  display: flex;
  justify-content: center;
  gap: 15px;
  width: 100%;
}

.madhouse-veto-card,
.madhouse-eviction-card {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.madhouse-veto-photo,
.madhouse-eviction-photo {
  width: 86px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 2px 0 rgba(88, 66, 38, 0.12),
    0 5px 9px rgba(52, 29, 12, 0.12);
}

.madhouse-veto-photo img,
.madhouse-eviction-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.madhouse-veto-name,
.madhouse-eviction-name {
  display: block;
  max-width: 92px;
  overflow: hidden;
  color: #6e604e;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-veto-choice,
.madhouse-eviction-choice {
  min-width: 68px;
  min-height: 34px;
  border-color: rgba(184, 170, 146, 0.46);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #fff8d2;
  color: #6e604e;
  font-size: 0.9rem;
  padding: 7px 12px;
}

.madhouse-eviction-note,
.madhouse-eviction-lockout {
  width: min(100%, 296px);
  margin: 0;
  color: #6e604e;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.17;
  text-align: center;
}

.madhouse-eviction-card.is-selected .madhouse-eviction-photo {
  border-color: rgba(216, 62, 0, 0.82);
  background: rgba(255, 225, 39, 0.62);
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.24),
    0 7px 12px rgba(52, 29, 12, 0.16);
}

.madhouse-eviction-card.is-selected .madhouse-eviction-name,
.madhouse-eviction-choice.is-selected {
  color: #d83e00;
}

.madhouse-eviction-choice.is-selected {
  border-color: rgba(216, 62, 0, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #ffe127;
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.24),
    0 7px 12px rgba(52, 29, 12, 0.16);
}

.madhouse-veto-card.is-selected .madhouse-veto-photo {
  border-color: rgba(201, 163, 22, 0.86);
  background: rgba(255, 225, 39, 0.62);
}

.madhouse-veto-card.is-selected .madhouse-veto-name {
  color: #C9A316;
}

.madhouse-veto-choice.is-selected {
  border-color: rgba(201, 163, 22, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 50%),
    #ffe127;
  color: #C9A316;
  box-shadow:
    0 2px 0 rgba(201, 163, 22, 0.24),
    0 7px 12px rgba(52, 29, 12, 0.16);
}

.madhouse-do-not-use.is-selected {
  color: #d83e00;
  border-color: rgba(216, 62, 0, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #ffe127;
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.24),
    0 7px 12px rgba(52, 29, 12, 0.16);
}

.madhouse-do-not-use {
  min-width: 148px;
  min-height: 36px;
  border-color: rgba(184, 170, 146, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 50%),
    #fff8d2;
  color: #6e604e;
  font-size: 0.92rem;
  padding: 8px 14px;
}

.madhouse-decision-save {
  min-width: 148px;
  min-height: 36px;
  font-size: 0.92rem;
  padding: 8px 14px;
}

.madhouse-decision-save:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.madhouse-jury-ranking-scale {
  display: grid;
  gap: 8px;
  width: min(100%, 304px);
}

.madhouse-jury-ranking-scale-label {
  display: block;
  color: #6e604e;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.madhouse-jury-ranking-list {
  display: grid;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.madhouse-jury-ranking-card {
  display: grid;
  grid-template-columns: 28px 44px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  border: 2px solid rgba(184, 170, 146, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 50%),
    #fff8d2;
  color: #6e604e;
  cursor: grab;
  padding: 6px 8px;
  box-shadow: 0 2px 0 rgba(88, 66, 38, 0.1);
  user-select: none;
}

.madhouse-jury-ranking-card:active {
  cursor: grabbing;
}

.madhouse-jury-ranking-card.is-dragging {
  opacity: 0.44;
}

.madhouse-jury-ranking-builder.is-locked .madhouse-jury-ranking-card {
  cursor: default;
}

.madhouse-jury-ranking-builder.is-locked .madhouse-jury-ranking-handle {
  opacity: 0.34;
}

.madhouse-jury-ranking-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  aspect-ratio: 1;
  border: 2px solid rgba(216, 62, 0, 0.48);
  border-radius: 999px;
  background: rgba(255, 225, 39, 0.72);
  color: #d83e00;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.madhouse-jury-ranking-photo {
  width: 44px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 2px 0 rgba(88, 66, 38, 0.12),
    0 5px 9px rgba(52, 29, 12, 0.12);
}

.madhouse-jury-ranking-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.madhouse-jury-ranking-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-jury-ranking-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(110, 96, 78, 0.72);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.madhouse-jury-ranking-status {
  min-height: 1em;
  margin: 0;
  color: #6e604e;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.madhouse-jury-ranking-status.is-error {
  color: #d83e00;
}

body.madhouse-results-mode {
  min-height: 100vh;
  overflow: hidden;
}

body.madhouse-compete-mode {
  min-height: 100vh;
  overflow: auto;
}

.madhouse-flash-page,
.madhouse-results-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: clamp(10px, 2vw, 24px);
  zoom: var(--page-zoom);
}

.madhouse-flash-page {
  place-items: start center;
}

.madhouse-flash-shell {
  --host-mini-game-frame-width: 1200px;
  --host-mini-game-frame-height: 820px;
  --host-mini-game-frame-ratio: 1200 / 820;
  --host-mini-game-score-width: 520px;
  display: grid;
  grid-template-rows: auto auto;
  width: min(100%, calc(var(--host-mini-game-frame-width) + 8px));
  min-height: 0;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: 16px;
  background: #25190d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 26px 56px rgba(52, 29, 12, 0.24);
}

.madhouse-flash-shell.is-mini-game {
  width: min(100%, var(--host-mini-game-frame-width));
  border: 0;
  border-radius: 12px;
  background: #050704;
  box-shadow: 0 26px 56px rgba(5, 7, 4, 0.34);
}

.madhouse-flash-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 3px solid rgba(216, 62, 0, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 52%),
    #ffe127;
  padding: 10px 12px;
}

.madhouse-flash-title {
  min-width: 0;
  overflow: hidden;
  color: #d83e00;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 900;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-flash-exit {
  flex: 0 0 auto;
  min-height: 30px;
  border-color: rgba(122, 34, 0, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 50%),
    #fff8d2;
  font-size: 0.86rem;
  padding: 6px 12px;
}

.madhouse-score-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  background:
    radial-gradient(circle at 52% 34%, rgba(255, 236, 147, 0.22), transparent 34%),
    radial-gradient(circle at 74% 72%, rgba(87, 181, 159, 0.18), transparent 30%),
    linear-gradient(135deg, #2b160b 0%, #7a2200 54%, #d99c13 100%);
  padding: clamp(18px, 4vw, 46px);
}

.madhouse-score-stage.is-mini-game {
  place-items: center;
  background: #20130c;
  padding: 0;
  overflow: hidden;
}

.madhouse-score-panel {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(100%, 560px);
  padding: clamp(18px, 5vw, 34px);
  text-align: center;
}

.madhouse-score-kicker {
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
  color: #fff0b8;
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: clip;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(43, 22, 11, 0.45);
}

.madhouse-score-body {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
}

.madhouse-score-readout {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 100%;
}

.madhouse-score-readout-label {
  display: block;
  color: rgba(255, 248, 210, 0.74);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.madhouse-score-value {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #ffed7a;
  font-size: clamp(5rem, 12vw, 7.4rem);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 0.88;
  text-align: center;
  text-shadow:
    0 3px 0 #d83e00,
    0 10px 24px rgba(43, 22, 11, 0.34),
    0 0 26px rgba(255, 237, 122, 0.18);
  white-space: nowrap;
}

.madhouse-score-unit {
  display: block;
  color: rgba(255, 248, 210, 0.82);
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.madhouse-score-message {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding-top: 4px;
  text-align: center;
}

.madhouse-score-label,
.madhouse-score-status {
  color: rgba(255, 248, 210, 0.88);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 2px 7px rgba(43, 22, 11, 0.36);
}

.madhouse-score-status {
  margin: 0;
}

.madhouse-score-status[data-tone="success"] {
  color: #7bd1b8;
}

.madhouse-score-status[data-tone="error"] {
  color: #ffd2c1;
}

.madhouse-score-button {
  min-width: 178px;
  min-height: 42px;
  font-size: 1rem;
  padding: 9px 18px;
}

.madhouse-score-button:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.madhouse-score-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.madhouse-mini-game-shell {
  display: grid;
  grid-template-rows: auto auto;
  min-height: 0;
  width: 100%;
  height: auto;
  background: #050704;
}

.madhouse-mini-game-viewport {
  width: 100%;
  aspect-ratio: var(--host-mini-game-frame-ratio);
  min-height: 0;
  overflow: hidden;
  background: #050704;
}

.madhouse-mini-game-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #050704;
}

.madhouse-mini-game-statusbar {
  display: grid;
  grid-template-columns: minmax(112px, auto) minmax(0, 1fr) auto;
  align-items: center;
  justify-self: center;
  gap: 12px;
  width: min(100%, var(--host-mini-game-score-width));
  min-height: 58px;
  margin: 10px 0 12px;
  border: 2px solid rgba(255, 225, 39, 0.5);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 56%),
    #1b100a;
  color: #fff8d2;
  padding: 9px 12px;
}

.madhouse-mini-game-score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 2px solid rgba(255, 225, 39, 0.38);
  border-radius: 9px;
  background: rgba(17, 11, 8, 0.78);
  padding: 8px 10px;
}

.madhouse-mini-game-score span {
  color: rgba(255, 248, 210, 0.72);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.madhouse-mini-game-score strong {
  min-width: 0;
  overflow: hidden;
  color: #ffe127;
  font-size: 1.42rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-mini-game-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.madhouse-mini-game-statusbar span,
.madhouse-mini-game-statusbar p {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-mini-game-statusbar [data-score-label] {
  color: #fff8d2;
}

.madhouse-mini-game-statusbar [data-score-status] {
  color: rgba(255, 248, 210, 0.68);
}

.madhouse-mini-game-statusbar p[data-tone="success"] {
  color: #7bd1b8;
}

.madhouse-mini-game-statusbar p[data-tone="error"] {
  color: #ff875c;
}

.madhouse-results-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100%, 720px);
  max-height: calc(100vh - 72px);
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 252, 239, 0.88), rgba(255, 255, 255, 0.7)),
    rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 26px 56px rgba(52, 29, 12, 0.22);
}

.madhouse-results-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}

.madhouse-result-row {
  display: grid;
  grid-template-columns: 40px 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border: 2px solid rgba(184, 170, 146, 0.3);
  border-radius: 9px;
  background: rgba(255, 252, 239, 0.78);
  box-shadow: 0 2px 0 rgba(88, 66, 38, 0.1);
  padding: 6px 10px;
}

.madhouse-result-rank {
  color: #d83e00;
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
}

.madhouse-result-avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 3px 7px rgba(52, 29, 12, 0.14);
}

.madhouse-result-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.madhouse-result-name {
  min-width: 0;
  overflow: hidden;
  color: #4f4335;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-result-score {
  min-width: 68px;
  color: #d83e00;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.madhouse-chat-nav {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-right: 2px solid rgba(184, 170, 146, 0.3);
  background: rgba(255, 249, 225, 0.62);
  padding: 10px;
}

.madhouse-chat-tabs {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.madhouse-chat-tab {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 2px solid rgba(184, 170, 146, 0.36);
  border-radius: 7px;
  background: rgba(255, 252, 239, 0.78);
  color: #6e604e;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  padding: 6px 8px 7px;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(88, 66, 38, 0.12);
}

.madhouse-chat-tab.starts-section {
  margin-top: 12px;
}

.madhouse-chat-tab.starts-section::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: -8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(184, 170, 146, 0.36);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.64);
}

.madhouse-chat-tab-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.madhouse-private-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 252, 239, 0.92);
  border-radius: 999px;
  background: #d83e00;
  color: #fffcef;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 5px;
  box-shadow: 0 2px 4px rgba(52, 29, 12, 0.18);
}

.madhouse-private-unread-badge[hidden] {
  display: none;
}

.madhouse-group-chat-create {
  display: inline-grid;
  place-items: center;
  justify-self: center;
  width: 38px;
  height: 38px;
  border: 2px solid rgba(216, 62, 0, 0.54);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 44%),
    #ffe127;
  color: #d83e00;
  cursor: pointer;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 0 3px;
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.22),
    0 7px 12px rgba(52, 29, 12, 0.12);
}

.madhouse-group-chat-create:hover,
.madhouse-group-chat-create:focus-visible {
  border-color: rgba(216, 62, 0, 0.72);
  background: #fff04d;
}

.madhouse-group-chat-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(47, 36, 22, 0.32);
  padding: 16px;
}

.madhouse-group-chat-modal[hidden] {
  display: none;
}

.madhouse-group-chat-dialog {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
  max-height: min(520px, 100%);
  overflow: hidden;
  border: 3px solid rgba(216, 62, 0, 0.42);
  border-radius: 12px;
  background: rgba(255, 252, 239, 0.98);
  box-shadow: 0 18px 34px rgba(52, 29, 12, 0.24);
  padding: 12px;
}

.madhouse-group-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.madhouse-group-chat-head h3 {
  margin: 0;
  color: #d83e00;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.madhouse-group-chat-close {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(184, 170, 146, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: #6e604e;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 0 2px;
}

.madhouse-group-chat-selected {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}

.madhouse-group-chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  border: 2px solid rgba(216, 62, 0, 0.38);
  border-radius: 999px;
  background: rgba(255, 225, 39, 0.5);
  color: #d83e00;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  padding: 5px 7px;
}

.madhouse-group-chat-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-group-chat-chip button {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 252, 239, 0.86);
  color: #d83e00;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 0 1px;
}

.madhouse-group-chat-field {
  display: grid;
  gap: 5px;
  color: #7b6c58;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.madhouse-group-chat-field input {
  width: 100%;
  min-height: 36px;
  border: 2px solid rgba(184, 170, 146, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: #2f2416;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  padding: 8px 10px;
  text-transform: none;
}

.madhouse-group-chat-options {
  display: grid;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  padding-right: 2px;
}

.madhouse-group-chat-option {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  border: 2px solid rgba(184, 170, 146, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: #6e604e;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
  padding: 4px 8px 5px 4px;
  text-align: left;
}

.madhouse-group-chat-option:hover,
.madhouse-group-chat-option:focus-visible,
.madhouse-group-chat-option.is-selected {
  border-color: rgba(216, 62, 0, 0.52);
  background: rgba(255, 225, 39, 0.42);
  color: #d83e00;
}

.madhouse-group-chat-option img {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}

.madhouse-group-chat-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-group-chat-status {
  margin: 0;
  color: #d83e00;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.15;
}

.madhouse-group-chat-status[hidden] {
  display: none;
}

.madhouse-group-chat-submit {
  justify-self: end;
  min-height: 36px;
  border: 2px solid rgba(216, 62, 0, 0.54);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 42%),
    #ffe127;
  color: #d83e00;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 14px;
  box-shadow: 0 2px 0 rgba(216, 62, 0, 0.24);
}

.madhouse-group-chat-submit:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.madhouse-chat-tab.is-active {
  border-color: rgba(216, 62, 0, 0.64);
  background: rgba(255, 225, 39, 0.76);
  color: #d83e00;
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.22),
    0 6px 10px rgba(52, 29, 12, 0.1);
}

.madhouse-chat-tab.is-active .madhouse-private-unread-badge {
  border-color: rgba(255, 252, 239, 0.98);
  background: #2f2416;
  color: #ffe127;
}

.madhouse-chat-tab.has-unread-private:not(.is-active) {
  border-color: rgba(216, 62, 0, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 62%),
    rgba(255, 225, 39, 0.42);
  color: #d83e00;
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.18),
    0 6px 10px rgba(52, 29, 12, 0.1);
}

.madhouse-chat-tab.has-unread-private .madhouse-private-unread-badge {
  animation: madhouse-private-unread-pop 220ms ease;
}

@keyframes madhouse-private-unread-pop {
  0% {
    transform: scale(0.72);
  }

  70% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

.madhouse-chat-tab.is-locked {
  opacity: 0.62;
}

.madhouse-chat-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.madhouse-chat-head {
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid rgba(184, 170, 146, 0.22);
  padding: 10px 12px 8px;
}

.madhouse-chat-heading {
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
}

.madhouse-chat-title {
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  color: #d83e00;
  font-size: 1.14rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-chat-members {
  max-width: 100%;
  margin: 0;
  color: #7b6c58;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.madhouse-chat-members[hidden] {
  display: none;
}

.madhouse-chat-scope {
  flex: 0 0 auto;
  color: #7b6c58;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.madhouse-chat-weeks {
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  border-bottom: 2px solid rgba(184, 170, 146, 0.18);
  padding: 8px 12px;
}

.madhouse-chat-weeks[hidden] {
  display: none;
}

.madhouse-week-tab {
  min-height: 28px;
  border: 2px solid rgba(184, 170, 146, 0.36);
  border-radius: 7px;
  background: rgba(255, 252, 239, 0.76);
  color: #6e604e;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 11px;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(88, 66, 38, 0.1);
}

.madhouse-week-tab.is-active {
  border-color: rgba(216, 62, 0, 0.58);
  background: rgba(255, 225, 39, 0.74);
  color: #d83e00;
  box-shadow: 0 2px 0 rgba(216, 62, 0, 0.22);
}

.madhouse-chat-messages {
  grid-row: 3;
  display: grid;
  align-content: start;
  gap: 12px;
  grid-auto-rows: max-content;
  min-height: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 16px;
  scrollbar-gutter: stable;
}

.madhouse-chat-message {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.madhouse-chat-message.has-continuation {
  position: relative;
  min-height: 0;
}

.madhouse-chat-message.has-continuation .madhouse-chat-avatar {
  position: absolute;
  top: 0;
  left: 0;
}

.madhouse-chat-message.is-continuation {
  margin-top: -10px;
  min-height: 0;
}

.madhouse-chat-message.is-continuation:not(.has-reactions) {
  min-height: 0;
}

.madhouse-chat-message.is-continuation.has-reactions {
  min-height: 0;
}

.madhouse-chat-message.is-continuation .madhouse-chat-avatar {
  width: 54px;
  height: 0;
  min-height: 0;
  border: 0;
  box-shadow: none;
  visibility: hidden;
}

.madhouse-chat-message.is-continuation .madhouse-chat-meta {
  display: none;
}

.madhouse-chat-message.is-continuation .madhouse-chat-content {
  gap: 0;
}

.madhouse-chat-message.is-continuation .madhouse-chat-body-row {
  gap: 3px;
}

.madhouse-chat-avatar {
  grid-column: 1;
  grid-row: 1;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 3px 7px rgba(52, 29, 12, 0.14);
}

.madhouse-chat-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.madhouse-chat-content {
  grid-column: 2;
  display: grid;
  position: relative;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.madhouse-chat-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.madhouse-chat-author {
  overflow: hidden;
  color: #d83e00;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.18;
  padding-bottom: 2px;
  text-overflow: clip;
  white-space: nowrap;
}

.madhouse-chat-time {
  color: #7b6c58;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.madhouse-chat-message p,
.madhouse-chat-empty {
  margin: 0;
  color: #4f4335;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.madhouse-chat-body-row {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  column-gap: 6px;
  row-gap: 3px;
  justify-self: start;
  max-width: 100%;
}

.madhouse-chat-body-row > p {
  display: block;
  grid-column: 1;
  min-width: 0;
}

.madhouse-chat-empty {
  align-self: center;
  justify-self: center;
  color: #7b6c58;
}

.madhouse-chat-body-link {
  color: #d83e00;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.madhouse-chat-media {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.madhouse-chat-media-item {
  display: inline-flex;
  max-width: min(100%, 320px);
  max-height: 240px;
  overflow: hidden;
  border: 2px solid rgba(184, 170, 146, 0.34);
  border-radius: 9px;
  background: rgba(255, 252, 239, 0.78);
  box-shadow:
    0 2px 0 rgba(88, 66, 38, 0.1),
    0 8px 14px rgba(52, 29, 12, 0.12);
}

.madhouse-chat-media-item img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
}

.madhouse-chat-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  position: relative;
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  min-height: 24px;
  max-width: 100%;
  width: fit-content;
}

.madhouse-chat-message:not(.has-reactions) .madhouse-chat-actions {
  position: static;
  z-index: 5;
  min-height: 24px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  visibility: hidden;
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    visibility 120ms ease;
}

.madhouse-chat-message:not(.has-reactions):hover .madhouse-chat-actions,
.madhouse-chat-message:not(.has-reactions).is-reacting .madhouse-chat-actions,
.madhouse-chat-message:not(.has-reactions):focus-within .madhouse-chat-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.madhouse-chat-message.has-reactions .madhouse-chat-actions {
  display: flex;
  position: relative;
  grid-column: 1 / -1;
  grid-row: auto;
  margin-top: 1px;
}

.madhouse-chat-reactions {
  display: contents;
}

.madhouse-chat-reaction-chip,
.madhouse-chat-react-trigger,
.madhouse-chat-reaction-option {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(184, 170, 146, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: #6e604e;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 2px 0 rgba(88, 66, 38, 0.1);
}

.madhouse-chat-reaction-chip {
  gap: 5px;
  min-width: 44px;
  height: 32px;
  padding: 3px 7px 3px 5px;
  font-size: 0.86rem;
  font-weight: 900;
}

.madhouse-chat-react-trigger,
.madhouse-chat-reaction-option {
  width: 24px;
  height: 24px;
  padding: 2px;
}

.madhouse-chat-react-trigger {
  font-size: 0.78rem;
  font-weight: 900;
}

.madhouse-chat-react-trigger:hover,
.madhouse-chat-reaction-chip:hover,
.madhouse-chat-reaction-option:hover {
  border-color: rgba(216, 62, 0, 0.52);
  background: rgba(255, 225, 39, 0.66);
}

.madhouse-chat-reaction-chip.is-mine {
  border-color: rgba(216, 62, 0, 0.64);
  background: rgba(255, 225, 39, 0.76);
  color: #d83e00;
  box-shadow:
    0 2px 0 rgba(216, 62, 0, 0.22),
    0 5px 10px rgba(52, 29, 12, 0.12);
}

.madhouse-chat-reaction-chip img,
.madhouse-chat-react-trigger img,
.madhouse-chat-reaction-option img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.madhouse-chat-reaction-picker {
  position: absolute;
  left: 0;
  bottom: calc(100% + 2px);
  z-index: 4;
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  border: 2px solid rgba(216, 62, 0, 0.32);
  border-radius: 10px;
  background: rgba(255, 252, 239, 0.98);
  box-shadow: 0 8px 18px rgba(52, 29, 12, 0.18);
  padding: 7px;
  white-space: nowrap;
}

.madhouse-chat-reaction-picker[hidden] {
  display: none;
}

.madhouse-chat-compose {
  grid-row: 4;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 8px;
  border-top: 2px solid rgba(184, 170, 146, 0.22);
  padding: 10px;
}

.madhouse-chat-compose.is-dragging {
  background: rgba(255, 225, 39, 0.22);
  box-shadow: inset 0 0 0 2px rgba(216, 62, 0, 0.28);
}

.madhouse-chat-compose.is-disabled {
  background: rgba(255, 252, 239, 0.38);
}

.madhouse-chat-pending {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 86px;
  overflow-y: auto;
}

.madhouse-chat-pending[hidden] {
  display: none;
}

.madhouse-chat-pending-item {
  position: relative;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border: 2px solid rgba(184, 170, 146, 0.36);
  border-radius: 8px;
  background: rgba(255, 252, 239, 0.86);
  box-shadow: 0 2px 0 rgba(88, 66, 38, 0.1);
}

.madhouse-chat-pending-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.madhouse-chat-pending-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(216, 62, 0, 0.62);
  border-radius: 999px;
  background: rgba(255, 252, 239, 0.94);
  color: #d83e00;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.madhouse-chat-status {
  grid-column: 1 / -1;
  margin: 0;
  color: #d83e00;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.15;
}

.madhouse-chat-status[hidden] {
  display: none;
}

.madhouse-chat-emoji-panel {
  position: absolute;
  right: 10px;
  bottom: calc(100% - 1px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: min(370px, calc(100% - 20px));
  max-height: 222px;
  overflow-y: auto;
  border: 2px solid rgba(216, 62, 0, 0.36);
  border-radius: 10px;
  background: rgba(255, 252, 239, 0.98);
  box-shadow: 0 10px 24px rgba(88, 66, 38, 0.18);
  padding: 8px;
}

.madhouse-chat-emoji-panel[hidden] {
  display: none;
}

.madhouse-chat-emoji-option {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0;
}

.madhouse-chat-emoji-option:hover,
.madhouse-chat-emoji-option:focus-visible {
  border-color: rgba(216, 62, 0, 0.3);
  background: rgba(255, 225, 39, 0.24);
}

.madhouse-chat-emoji-option img,
.madhouse-chat-emoji-toggle img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
}

.madhouse-chat-emoji-option img {
  width: 35px;
  height: 35px;
}

.madhouse-chat-custom-emoji {
  display: inline-block;
  width: 2.08em;
  height: 2.08em;
  margin: 0 0.06em;
  object-fit: contain;
  vertical-align: -0.58em;
}

.madhouse-chat-input {
  min-width: 0;
  min-height: 36px;
  max-height: 88px;
  border: 2px solid rgba(184, 170, 146, 0.42);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: #2f2416;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.18;
  overflow-y: auto;
  padding: 8px 10px;
  resize: none;
}

.madhouse-chat-input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.madhouse-chat-emoji-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d83e00;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
}

.madhouse-chat-emoji-toggle:hover,
.madhouse-chat-emoji-toggle:focus-visible,
.madhouse-chat-emoji-toggle.is-active {
  background: rgba(255, 225, 39, 0.24);
}

.madhouse-chat-emoji-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.madhouse-chat-send {
  min-height: 36px;
  border: 2px solid rgba(216, 62, 0, 0.54);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 42%),
    #ffe127;
  color: #d83e00;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 14px;
  box-shadow: 0 2px 0 rgba(216, 62, 0, 0.24);
}

.madhouse-chat-send:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.madhouse-chat-tab:focus-visible,
.madhouse-group-chat-create:focus-visible,
.madhouse-group-chat-close:focus-visible,
.madhouse-group-chat-field input:focus-visible,
.madhouse-group-chat-chip button:focus-visible,
.madhouse-group-chat-option:focus-visible,
.madhouse-group-chat-submit:focus-visible,
.madhouse-console-tab:focus-visible,
.madhouse-week-tab:focus-visible,
.madhouse-chat-input:focus-visible,
.madhouse-chat-emoji-toggle:focus-visible,
.madhouse-chat-send:focus-visible,
.madhouse-chat-reaction-chip:focus-visible,
.madhouse-chat-react-trigger:focus-visible,
.madhouse-chat-reaction-option:focus-visible,
.madhouse-chat-emoji-option:focus-visible,
.madhouse-chat-pending-remove:focus-visible,
.madhouse-nomination-card:focus-visible,
.madhouse-nomination-save:focus-visible,
.madhouse-veto-choice:focus-visible,
.madhouse-eviction-choice:focus-visible,
.madhouse-jury-ranking-card:focus-visible,
.madhouse-do-not-use:focus-visible,
.madhouse-decision-save:focus-visible,
.madhouse-admin-day-button:focus-visible {
  outline: 3px solid rgba(216, 62, 0, 0.34);
  outline-offset: 2px;
}

@media (max-width: 1240px) {
  .madhouse-stage {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .madhouse-stage.is-complete .madhouse-side-rail {
    position: static;
  }

  .madhouse-side-rail {
    align-self: auto;
    justify-self: center;
    width: min(100%, 520px);
  }

  .madhouse-player-card {
    height: auto;
  }
}

@media (max-width: 700px) {
  .madhouse-game {
    width: min(100% - 16px, 1540px);
    height: auto;
    min-height: max(560px, calc(100vh - 190px));
    margin-top: 22px;
    border-width: 2px;
    border-radius: 14px;
    padding: 10px;
  }

  .madhouse-stage {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .madhouse-player-card {
    gap: 14px;
    border-width: 3px;
    border-radius: 18px;
    padding: 14px 13px 17px;
  }

  .madhouse-wordmark {
    width: min(100%, 178px);
  }

  .madhouse-player-status {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .madhouse-player-avatar-frame {
    width: 104px;
    height: 104px;
  }

  .madhouse-player-name {
    font-size: 0.98rem;
  }

  .madhouse-status-row {
    grid-template-columns: minmax(60px, 68px) minmax(40px, 46px);
    gap: 5px;
  }

  .madhouse-clock {
    width: min(100%, 68px);
  }

  .madhouse-week-pill {
    min-width: 52px;
    min-height: 18px;
    border-radius: 6px;
    font-size: 0.54rem;
    padding: 2px 7px;
  }

  .madhouse-calendar {
    max-width: 44px;
  }

  .madhouse-calendar-week {
    font-size: 0.39rem;
  }

  .madhouse-calendar-day-number {
    font-size: 1.36rem;
  }

  .madhouse-memory-wall {
    --madhouse-memory-card-width: 72px;
    --madhouse-memory-wall-gap: 8px;
    gap: var(--madhouse-memory-wall-gap);
    max-width: calc((var(--madhouse-memory-card-width) * 7) + (var(--madhouse-memory-wall-gap) * 6));
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-gutter: stable;
  }

  .madhouse-memory-name {
    min-height: 22px;
    font-size: 0.68rem;
    padding: 3px 4px 4px;
  }

  .madhouse-voting-history {
    --mh-history-sticky-width: 138px;
    --mh-history-photo-height: 54px;
    flex: none;
    max-width: 100%;
  }

  .madhouse-voting-history-head {
    width: max-content;
    min-width: 0;
  }

  .madhouse-lower-row {
    flex: none;
    grid-template-columns: 1fr;
    gap: 10px;
    height: auto;
  }

  .madhouse-chat {
    grid-template-columns: 112px minmax(0, 1fr);
    width: 100%;
    height: min(56vh, 460px);
    min-height: 380px;
  }

  .madhouse-game-console {
    min-height: 112px;
    padding: 10px;
  }

  .madhouse-day-event-pill {
    width: min(100%, 260px);
    min-height: 34px;
    font-size: 0.88rem;
  }

  .madhouse-compete-button {
    min-width: 122px;
    min-height: 36px;
    font-size: 0.98rem;
  }

  .madhouse-results-button {
    min-width: 146px;
    min-height: 32px;
    font-size: 0.86rem;
  }

  .madhouse-prior-eviction {
    margin-top: 10px;
  }

  .madhouse-prior-eviction-row {
    gap: 6px;
    font-size: 0.8rem;
    padding: 7px;
  }

  .madhouse-console-tab {
    min-height: 32px;
    font-size: 0.78rem;
  }

  .madhouse-nomination-row {
    grid-template-columns: repeat(var(--nom-row-count), minmax(0, 56px));
    gap: 8px;
  }

  .madhouse-nomination-photo {
    width: 56px;
  }

  .madhouse-nomination-card strong {
    font-size: 0.58rem;
  }

  .madhouse-nomination-instructions {
    font-size: 0.84rem;
  }

  .madhouse-nomination-save {
    min-width: 140px;
    min-height: 34px;
    font-size: 0.88rem;
  }

  .madhouse-decision-prompt {
    font-size: 0.8rem;
  }

  .madhouse-veto-options,
  .madhouse-eviction-options {
    gap: 10px;
  }

  .madhouse-veto-photo,
  .madhouse-eviction-photo {
    width: 72px;
  }

  .madhouse-veto-name,
  .madhouse-eviction-name {
    max-width: 76px;
    font-size: 0.58rem;
  }

  .madhouse-veto-choice,
  .madhouse-eviction-choice {
    min-width: 60px;
    min-height: 32px;
    font-size: 0.82rem;
    padding: 6px 10px;
  }

  .madhouse-do-not-use,
  .madhouse-decision-save {
    min-width: 136px;
    min-height: 34px;
    font-size: 0.86rem;
  }

  .madhouse-flash-page,
  .madhouse-results-page {
    padding: 8px;
  }

  .madhouse-flash-shell {
    width: 100%;
    height: auto;
    min-height: 0;
    border-radius: 12px;
  }

  .madhouse-flash-bar {
    padding: 8px;
  }

  .madhouse-score-stage {
    padding: 12px;
  }

  .madhouse-score-panel {
    gap: 12px;
    padding: 18px 10px;
  }

  .madhouse-score-kicker {
    font-size: 0.76rem;
  }

  .madhouse-score-body {
    gap: 12px;
  }

  .madhouse-score-value {
    font-size: 4rem;
  }

  .madhouse-score-unit {
    font-size: 0.78rem;
  }

  .madhouse-mini-game-statusbar {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: 0;
  }

  .madhouse-mini-game-score {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .madhouse-results-shell {
    width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 12px;
  }

  .madhouse-results-list {
    padding: 8px;
  }

  .madhouse-result-row {
    grid-template-columns: 34px 38px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 6px 8px;
  }

  .madhouse-result-avatar {
    width: 38px;
    height: 38px;
  }

  .madhouse-result-name {
    font-size: 0.84rem;
  }

  .madhouse-result-score {
    min-width: 52px;
    font-size: 0.88rem;
  }

  .madhouse-chat-nav {
    padding: 8px;
  }
}

.profile-buzz-inline-image {
  display: block;
  width: min(100%, 520px);
  margin: 10px 0 4px;
}

.profile-buzz-inline-image img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 12px;
}

.profile-moderation-primary {
  text-decoration: none;
}

/* Public Shops directory: poster art is the entire card. */
.shop-poster-grid {
  grid-template-columns: repeat(4, 112px);
  gap: 18px;
  align-items: start;
  justify-content: center;
}

.shop-poster-card {
  display: block;
  width: 112px;
  min-height: 0;
  aspect-ratio: 527 / 738;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.shop-poster-card .shop-poster-frame {
  width: 100%;
  height: 100%;
  border: 3px solid #fff;
  box-shadow:
    6px 6px 0 var(--shop-accent),
    0 14px 26px rgba(7, 19, 63, 0.16);
}

.shop-poster-card:hover,
.shop-poster-card:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.shop-poster-card:hover .shop-poster-frame,
.shop-poster-card:focus-visible .shop-poster-frame {
  box-shadow:
    8px 8px 0 var(--shop-accent),
    0 20px 34px rgba(7, 19, 63, 0.22);
}

@media (max-width: 480px) {
  .shop-poster-grid {
    grid-template-columns: repeat(3, 96px);
    gap: 14px;
  }

  .shop-poster-card {
    width: 96px;
    min-height: 0;
    aspect-ratio: 527 / 738;
    padding: 0;
  }

  .shop-poster-card .shop-poster-frame {
    width: 100%;
  }
}

@media (max-width: 350px) {
  .shop-poster-grid {
    grid-template-columns: repeat(2, 96px);
  }
}