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

@font-face {
  font-family: "TAY Dumpling";
  src: url("/assets/site/fonts/TAYDumplingRegular.otf") format("opentype");
  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-transfer-shell {
  width: min(100%, 660px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-top: 3px solid var(--shop-theme-accent);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(7, 19, 63, 0.1);
}

.bank-transfer-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--shop-theme-soft) 72%, #fff));
  padding: 18px 20px;
}

.bank-transfer-intro-copy {
  display: grid;
  gap: 3px;
}

.bank-transfer-kicker {
  color: var(--shop-theme-accent-2);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.bank-transfer-intro h2,
.bank-transfer-intro p {
  margin: 0;
}

.bank-transfer-intro h2 {
  color: var(--shop-theme-heading);
  font: 800 1.55rem/1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.bank-transfer-intro p {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.bank-transfer-fee-badge {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--shop-theme-accent) 55%, #fff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--shop-theme-soft) 78%, #fff);
  color: var(--shop-theme-heading);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 7px 11px;
}

.bank-service-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 14px 10px;
  align-items: end;
  padding: 20px;
}

.bank-transfer-recipient,
.bank-transfer-fee-line,
.bank-transfer-submit,
.bank-action-status {
  grid-column: 1 / -1;
}

.bank-transfer-arrow {
  display: grid;
  place-items: center;
  min-height: 42px;
  color: var(--shop-theme-accent);
  font-size: 1.35rem;
  font-weight: 900;
}

.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(--shop-theme-accent-2);
  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: linear-gradient(180deg, #f468a7, #e64e92);
  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-transfer-fee-line {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
  padding-top: 11px;
}

.bank-transfer-fee-line strong {
  color: var(--ink);
}

.bank-transfer-submit {
  width: 100%;
  min-height: 46px !important;
  border-color: #dc3f84 !important;
  border-radius: 10px !important;
  font-size: 1.06rem !important;
  font-weight: 900 !important;
  box-shadow: 0 7px 16px rgba(230, 78, 146, 0.22) !important;
}

.bank-action-status {
  margin: 0;
  border: 1px solid rgba(21, 124, 109, 0.16);
  border-radius: 8px;
  background: rgba(99, 217, 202, 0.12);
  color: #157c6d;
  font-weight: 800;
  padding: 9px 11px;
}

.bank-action-status:empty {
  display: none;
}

.bank-action-status.is-error {
  border-color: rgba(181, 43, 87, 0.16);
  background: rgba(240, 92, 157, 0.1);
  color: #b52b57;
}

.bank-market-browser {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 410px), 1fr));
  align-items: start;
  gap: 16px;
}

.bank-market-card {
  display: grid;
  gap: 18px;
  min-height: 0;
  border: 1px solid rgba(7,19,63,.13);
  border-top: 2px solid rgba(240,92,157,.72);
  border-radius: 16px;
  background: linear-gradient(145deg,#fff 0%,#fff 62%,#fff9fc 100%);
  cursor: pointer;
  padding: 18px;
  box-shadow: 0 9px 24px rgba(7,19,63,.07);
  transition: border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}

.bank-market-card:hover,
.bank-market-card:focus-visible {
  border-color: rgba(240,92,157,.62);
  outline: 0;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(7,19,63,.11);
}

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

.bank-market-card-head {
  display: grid;
  gap: 9px;
  padding: 0;
}

.bank-market-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.bank-market-card-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bank-market-card-identity > strong { overflow: hidden; color: #596071; font-size: .76rem; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.bank-market-card-series { overflow: hidden; color: #959aa6; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }

.bank-market-card-icon {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
}

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

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

.bank-market-card-status { display: flex; align-items: center; gap: 7px; min-height: 20px; color: #8a8f9b; font-size: .78rem; }
.bank-market-card-status i { width: 7px; height: 7px; border-radius: 999px; background: #9aa0ac; }
.bank-market-card-status strong { color: #6d7380; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.bank-market-card-status.is-live i { background: #ff4f7b; box-shadow: 0 0 0 3px rgba(255,79,123,.1); }
.bank-market-card-status.is-live strong { color: #ed3d6d; }
.bank-market-card-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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

.bank-market-card-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 48px 62px 62px;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  min-width: 0;
  color: var(--ink);
  font-size: .86rem;
}

.bank-market-card-row.is-heading {
  min-height: 20px;
  color: #898f9c;
  font-size: .72rem;
  font-weight: 700;
  text-transform: none;
}

.bank-market-card-row.is-heading span:nth-child(n+2) { text-align: center; }
.bank-market-card-row > span:first-child { min-width: 0; }
.bank-market-card-row strong { text-align: right; }
.bank-market-card-row b { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid rgba(7,19,63,.16); border-radius: 9px; background: #fff; font-size: .84rem; padding-inline: 6px; box-shadow: inset 0 -1px 0 rgba(7,19,63,.04); }
.bank-market-card-row b.is-yes { color: #168f82; }
.bank-market-card-row b.is-no { color: #eb3467; }
.bank-market-preview-person { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; min-width: 0; }
.bank-market-preview-avatar { display: block; width: 34px; height: 34px; overflow: hidden; border: 1px solid rgba(7,19,63,.09); border-radius: 9px; background: #f2f4f8; }
.bank-market-preview-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.bank-market-preview-person > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.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: #676e7c;
  border-top: 1px solid rgba(7,19,63,.08);
  margin-top: 2px;
  font-size: .78rem;
  font-weight: 600;
  padding-top: 13px;
}

.bank-panel[data-bank-panel="market"] {
  border: 1px solid rgba(7,19,63,.08);
  border-radius: 14px;
  background: linear-gradient(145deg,#f8f9fb,#fffafc);
  box-shadow: none;
}

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

.bank-portfolio-shell,
.bank-position-list {
  display: grid;
  min-width: 0;
}

.bank-portfolio-shell {
  gap: 16px;
}

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

.bank-portfolio-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 42%, rgba(7, 19, 63, 0.1));
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--shop-theme-soft) 84%, #fff));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 4px 0 color-mix(in srgb, var(--shop-theme-accent) 20%, transparent);
}

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

.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: 700 1.72rem/1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
}

.bank-portfolio-metrics {
  display: contents;
  margin: 0;
}

.bank-portfolio-metrics > div {
  display: grid;
  align-content: center;
  gap: 5px;
  border-left: 1px solid color-mix(in srgb, var(--shop-theme-accent) 22%, rgba(7, 19, 63, 0.1));
  padding: 14px 16px;
}

.bank-portfolio-metrics dd {
  margin: 0;
  color: var(--ink);
  font-size: 1.15rem;
  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;
  min-width: 0;
}

.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(180px, 1fr) minmax(120px, .65fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.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: flex;
  justify-content: flex-end;
  gap: 7px;
}

.bank-position-actions button {
  min-width: 68px;
  min-height: 34px;
  border: 2px solid color-mix(in srgb, var(--shop-theme-accent) 28%, rgba(7, 19, 63, 0.12));
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), color-mix(in srgb, var(--shop-theme-soft) 86%, #fff));
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  padding: 7px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 3px 0 color-mix(in srgb, var(--shop-theme-accent) 18%, transparent);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.bank-position-actions button:hover,
.bank-position-actions button:focus-visible {
  border-color: color-mix(in srgb, var(--shop-theme-accent) 62%, #fff);
  outline: 0;
  transform: translateY(-1px);
}

.bank-position-actions button:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 color-mix(in srgb, var(--shop-theme-accent) 20%, transparent);
  transform: translateY(2px);
}

.bank-position-actions button.is-buy { color: #087d70; }
.bank-position-actions button.is-sell { color: #c52d5a; }
.bank-position-actions button:disabled { cursor: not-allowed; filter: grayscale(.45); opacity: .5; }

.bank-position-list {
  overflow: hidden;
  border: 1px solid rgba(7,19,63,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.bank-position-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--shop-theme-soft) 56%, rgba(255,255,255,.7));
  padding: 10px 14px;
}

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

.bank-position-list-head span {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 700;
}

.bank-position-card {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 22px;
  position: relative;
  min-width: 0;
  border: 0;
  border-top: 1px solid rgba(7,19,63,.09);
  background: transparent;
  box-shadow: none;
  padding: 12px 14px 12px 17px;
}

.bank-position-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #4acbbb; content: ""; }
.bank-position-card.is-no::before { background: #ed5f89; }
.bank-position-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-position-copy strong { font-size: .9rem; }
.bank-position-value { text-align: right; }
.bank-position-value strong { color: var(--ink); font-size: 1rem; }

.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-trade-select { width: 100%; min-height: 42px; border: 2px solid rgba(7,19,63,.1); border-radius: 8px; background: rgba(255,255,255,.82); color: var(--ink); font: 800 1rem/1.1 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; padding: 8px 10px; }
.bank-limit-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.bank-order-options { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; }
.bank-order-check { display: flex !important; align-items: center; gap: 8px; min-height: 42px; color: var(--muted); font-weight: 800; }
.bank-order-check input { width: auto; min-height: auto; }
.bank-market-orders { display: grid; gap: 10px; grid-column: 1 / -1; border: 1px solid rgba(7,19,63,.1); border-radius: 8px; background: rgba(255,255,255,.66); padding: 14px; }
.bank-market-orders h2 { margin: 0; color: var(--ink); }
.bank-market-order { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; border-top: 1px solid rgba(7,19,63,.1); padding-top: 10px; }
.bank-market-order div { display: grid; gap: 3px; }
.bank-market-order span { color: var(--muted); font-size: .9rem; font-weight: 700; }
.bank-market-order button { border: 1px solid rgba(240,92,157,.3); border-radius: 8px; background: rgba(240,92,157,.1); color: #ad315f; cursor: pointer; font: inherit; font-weight: 900; padding: 8px 12px; }
.bank-market-card-foot small { grid-column: 1 / -1; color: var(--muted); line-height: 1.35; }
.bank-market-chart { display: grid; gap: 8px; border-top: 1px solid rgba(7,19,63,.08); border-bottom: 1px solid rgba(7,19,63,.08); background: rgba(255,255,255,.36); padding: 10px 14px; }
.bank-market-chart > strong { color: var(--muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.bank-market-chart svg { display: block; width: 100%; height: 120px; overflow: visible; }
.bank-market-chart polyline { stroke: #f05c9d; stroke-width: 3; vector-effect: non-scaling-stroke; }
.bank-market-chart polyline.is-series-2 { stroke: #4965a8; }
.bank-market-chart polyline.is-series-3 { stroke: var(--aqua); }
.bank-market-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--muted); font-size: .82rem; font-weight: 800; }
.bank-market-chart-legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 999px; background: #f05c9d; content: ""; }
.bank-market-chart-legend span.is-series-2::before { background: #4965a8; }
.bank-market-chart-legend span.is-series-3::before { background: var(--aqua); }
.bank-market-history time { color: var(--muted); font-size: .78rem; white-space: nowrap; }

.bank-marketplace.market-detail-view { display: grid; gap: 14px; min-width: 0; }
.market-detail-toolbar { display: flex; justify-content: flex-start; }
.market-back-link { min-height: 34px; border: 1px solid rgba(7,19,63,.13); border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; font: 800 .9rem/1 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; padding: 7px 13px; box-shadow: 0 4px 12px rgba(7,19,63,.05); }
.market-back-link::before { content: "← "; color: var(--pink); }
.market-hero { display: grid; }
.market-title-block { border: 1px solid rgba(7,19,63,.12); border-top: 2px solid rgba(240,92,157,.72); border-radius: 14px; background: #fff; padding: 16px 18px; box-shadow: 0 8px 22px rgba(7,19,63,.06); }
.market-title-block p,.market-title-block h1,.market-board-head p,.market-board-head h2,.market-panel-heading p,.market-panel-heading h2 { margin: 0; }
.market-title-block p,.market-board-head p,.market-panel-heading p { color: #8a909d; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.market-title-block h1 { color: var(--ink); font: 700 clamp(1.55rem,3vw,2.7rem)/1.02 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; }
.market-badge-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.market-badge-row span { border: 1px solid rgba(7,19,63,.1); border-radius: 999px; background: #f8f9fb; color: #6e7481; font-size: .74rem; font-weight: 800; padding: 5px 10px; }
.market-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,330px); align-items: start; gap: 14px; }
.market-detail-main,.market-side { display: grid; gap: 14px; min-width: 0; }
.market-chart-panel { overflow: hidden; border: 1px solid rgba(7,19,63,.11); border-radius: 14px; background: #fff; padding: 14px; box-shadow: 0 8px 22px rgba(7,19,63,.05); }
.market-chart-panel.bank-market-chart { border-top: 1px solid rgba(7,19,63,.11); border-bottom: 1px solid rgba(7,19,63,.11); }
.market-chart-panel.bank-market-chart svg { height: 210px; }
.market-chart-panel.bank-market-chart > strong { color: var(--ink); font-size: .86rem; }
.market-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.market-chart-head strong { color: var(--ink); }
.market-range-tabs { display: flex; justify-content: flex-end; gap: 4px; border-top: 1px solid rgba(7,19,63,.08); padding-top: 8px; }
.market-range-tabs button { border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: 900 .76rem/1 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; padding: 5px 7px; }
.market-range-tabs button.is-active { background: rgba(255,240,191,.7); color: var(--ink); }
.market-board-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; border-top: 2px solid rgba(7,19,63,.08); padding-top: 12px; }
.market-board-head h2,.market-panel-heading h2 { color: var(--ink); font: 700 1.3rem/1 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; }
.market-search input { width: min(240px,100%); min-height: 38px; border: 2px solid rgba(7,19,63,.1); border-radius: 8px; background: rgba(255,255,255,.78); color: var(--ink); font: inherit; padding: 7px 10px; }
.market-filter-row { display: flex; flex-wrap: wrap; gap: 7px; }
.market-filter { min-height: 32px; border: 1px solid rgba(7,19,63,.12); border-radius: 9px; background: #fff; color: #747b89; cursor: pointer; font: 800 .82rem/1 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; padding: 5px 12px; }
.market-filter.is-active { border-color: rgba(240,92,157,.4); background: rgba(240,92,157,.12); color: var(--ink); }
.market-contract-list { display: grid; }
.market-contract-row { display: grid; grid-template-columns: minmax(190px,1fr) 72px minmax(86px,108px) minmax(86px,108px); align-items: center; gap: 10px; min-width: 0; border-top: 2px solid rgba(7,19,63,.08); padding: 9px 0; }
.market-contract-row.is-heading { color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.market-contract-row.is-heading span:nth-child(n+2) { text-align: center; }
.market-contract-row.is-active { background: linear-gradient(90deg,rgba(255,240,191,.18),transparent); }
.market-contract-person { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 10px; min-width: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 800 1rem/1.1 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; padding: 0; text-align: left; }
.market-contract-person > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-outcome-avatar { display: block; width: 44px; height: 52px; overflow: hidden; border-radius: 8px; background: rgba(7,19,63,.08); }
.market-outcome-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.market-contract-chance { color: var(--ink); font-size: 1.28rem; font-weight: 900; text-align: center; }
.market-contract-row .market-price-button { display: grid; grid-template-columns: auto auto; width: 100%; min-height: 40px; padding: 5px 8px; }
.market-contract-row .market-price-button span { font-size: .72rem; text-transform: uppercase; }
.market-contract-row .market-price-button strong { font-size: .84rem; }
.market-price-button.is-selected { border-color: rgba(7,19,63,.32); background: rgba(255,240,191,.7); box-shadow: 0 3px 0 rgba(7,19,63,.08); }
.market-contract-row.is-resolved { opacity: .65; }
.market-contract-person:disabled,.market-price-button:disabled,.market-submit:disabled { cursor: not-allowed; opacity: .55; }
.market-ticket,.market-positions,.market-rules { border: 1px solid rgba(7,19,63,.12); border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(7,19,63,.05); }
.market-ticket { overflow: hidden; }
.market-ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(7,19,63,.09); background: #f8f9fb; padding: 10px 12px; }
.market-ticket-top > strong { color: var(--pink); font-size: 1.1rem; }
.market-side-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.market-side-toggle button { min-height: 32px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 900; padding: 5px 13px; }
.market-side-toggle button.is-active { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(7,19,63,.1); }
.market-ticket-body { display: grid; gap: 12px; padding: 13px; }
.market-ticket-market { margin: 0; color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.market-ticket-head { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 10px; }
.market-ticket-avatar { display: block; width: 46px; height: 56px; overflow: hidden; border-radius: 8px; background: rgba(7,19,63,.08); }
.market-ticket-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.market-ticket-head h2 { margin: 0; color: var(--ink); font: 700 1.12rem/1.05 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; }
.market-contract-toggle { margin: 0; }
.market-contract-toggle button { display: flex; align-items: center; justify-content: space-between; cursor: pointer; padding: 7px 9px; }
.market-contract-toggle button strong { color: inherit; }
.market-trade-form { display: grid; gap: 10px; }
.market-ticket-input-row { display: grid; gap: 5px; color: var(--muted); font-size: .8rem; font-weight: 900; }
.market-ticket-input-row > input,.market-ticket-input-row > select,.market-ticket-input-row .bank-trade-select { width: 100%; min-height: 38px; border: 2px solid rgba(7,19,63,.1); border-radius: 8px; background: rgba(255,255,255,.82); color: var(--ink); font: 800 .92rem/1 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; padding: 7px 9px; }
.market-money-input { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 7px; border: 2px solid rgba(7,19,63,.1); border-radius: 8px; background: rgba(255,255,255,.82); padding: 0 9px; }
.market-money-input > span { color: var(--pink); font-weight: 900; }
.market-money-input input { width: 100%; min-height: 36px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; }
.market-limit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.market-resting-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .8rem; font-weight: 800; }
.market-resting-row input { width: auto; }
.market-ticket-summary { display: grid; gap: 6px; margin: 0; }
.market-ticket-summary div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid rgba(7,19,63,.08); padding-bottom: 5px; }
.market-ticket-summary dt { color: var(--muted); font-size: .78rem; font-weight: 800; }
.market-ticket-summary dd { margin: 0; color: var(--ink); font-size: .82rem; font-weight: 900; text-align: right; }
.market-submit { width: 100%; min-height: 40px; border: 1px solid #dc3f84; border-radius: 9px; background: linear-gradient(180deg,#f468a7,#e64e92); color: #fff; cursor: pointer; font: 900 .94rem/1 "Barlow Semi Condensed",Arial,Helvetica,sans-serif; padding: 8px 12px; box-shadow: 0 5px 13px rgba(230,78,146,.2); }
.market-ticket-message { min-height: 1.1em; margin: 0; color: #157c6d; font-size: .8rem; font-weight: 800; }
.market-ticket-message.is-error { color: #b52b57; }
.market-review-ticket { display: grid; gap: 12px; }
.market-review-title { margin: 0; color: var(--pink); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.market-review-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.market-review-back { border: 2px solid rgba(7,19,63,.12); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; font-weight: 900; padding: 7px 10px; }
.market-positions { display: grid; gap: 10px; padding: 13px; }
.market-position-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; border-top: 1px solid rgba(7,19,63,.1); padding-top: 9px; }
.market-position-item div { display: grid; gap: 2px; }
.market-position-item strong { color: var(--ink); font-size: .86rem; }
.market-position-item span,.market-empty-state { color: var(--muted); font-size: .78rem; font-weight: 700; }
.market-position-item button { border: 1px solid rgba(7,19,63,.12); border-radius: 7px; background: rgba(99,217,202,.15); color: var(--ink); cursor: pointer; font-weight: 900; padding: 6px 9px; }
.market-empty-state { margin: 0; padding: 6px 0; }
.market-detail-activity { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.market-detail-activity .bank-market-orders { min-width: 0; border: 1px solid rgba(7,19,63,.11); border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(7,19,63,.05); }
.market-rules { display: grid; gap: 8px; padding: 14px; }
.market-rules > p { margin: 0; color: var(--muted); font-weight: 700; line-height: 1.45; }

@media (max-width: 1180px) {
  .market-layout { grid-template-columns: 1fr; }
  .market-side { grid-template-columns: minmax(280px,360px) minmax(0,1fr); }
}

@media (max-width: 760px) {
  .market-side,.market-detail-activity { grid-template-columns: 1fr; }
  .market-board-head { align-items: stretch; flex-direction: column; }
  .market-search input { width: 100%; }
  .market-contract-row { grid-template-columns: minmax(0,1fr) 68px 68px; }
  .market-contract-row.is-heading span:nth-child(2),.market-contract-chance { display: none; }
  .market-contract-person { grid-template-columns: 38px minmax(0,1fr); }
  .market-outcome-avatar { width: 38px; height: 46px; }
  .market-contract-row .market-price-button { grid-template-columns: 1fr; }
  .bank-market-card-row { grid-template-columns: minmax(0,1fr) 58px 66px 66px; }
  .bank-market-card { padding: 16px; }
}

/* Prediction market detail: light sportsbook layout. */
.shop-detail[data-shop-slug="royal-meridian-bank"] .shop-detail-layout:has(.market-detail-view) {
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 22px;
  max-width: none;
  overflow: visible;
  padding: 16px;
}

.shop-detail[data-shop-slug="royal-meridian-bank"] .shop-detail-layout:has(.market-detail-view) > .shop-detail-poster {
  display: grid;
  position: sticky;
  top: 18px;
  max-width: 190px;
}

.shop-detail[data-shop-slug="royal-meridian-bank"] .shop-detail-panel:has(.market-detail-view) {
  min-height: 0;
  padding: 18px;
}

.shop-detail[data-shop-slug="royal-meridian-bank"] .shop-detail-panel:has(.market-detail-view) .bank-heading-row,
.shop-detail[data-shop-slug="royal-meridian-bank"] .shop-detail-panel:has(.market-detail-view) .bank-tabs {
  font-family: Arial, Helvetica, sans-serif;
}

.shop-detail[data-shop-slug="royal-meridian-bank"] .shop-detail-panel:has(.market-detail-view) .bank-panel[data-bank-panel="market"] {
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 0;
}

.bank-marketplace.market-detail-view {
  gap: 18px;
  max-width: none;
  margin: 0 auto;
  color: #141923;
  font-family: Arial, Helvetica, sans-serif;
}

.market-detail-toolbar {
  min-height: 28px;
}

.market-back-link {
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #68707d;
  font: 700 .8rem/1 Arial, Helvetica, sans-serif;
  padding: 4px 0;
}

.market-back-link:hover,
.market-back-link:focus-visible {
  color: #111827;
  outline: 0;
}

.market-back-link::before {
  color: var(--pink);
  content: "←  ";
}

.market-hero.bank-market-hero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 0 14px;
}

.market-hero-logo {
  display: block;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  padding: 0;
  object-fit: contain;
}

.market-title-block {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.market-title-block p {
  margin-bottom: 7px;
  color: #8a909a;
  font: 700 .74rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .1em;
}

.market-title-block h1 {
  color: #111827;
  font: 700 clamp(1.8rem, 3vw, 2.65rem)/1.04 Arial, Helvetica, sans-serif;
  letter-spacing: -.035em;
}

.market-badge-row {
  align-items: center;
  gap: 9px;
  margin-top: 11px;
}

.market-badge-row span {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7d8490;
  font: 600 .76rem/1 Arial, Helvetica, sans-serif;
  padding: 0;
}

.market-badge-row span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #e63365;
  font-weight: 800;
  text-transform: uppercase;
}

.market-badge-row span:first-child::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4f7b;
  content: "";
}

.market-layout {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 300px);
  gap: 18px;
}

.market-detail-main,
.market-side {
  gap: 18px;
}

.market-chart-panel,
.market-chart-panel.bank-market-chart {
  gap: 14px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  padding: 0;
}

.market-chart-panel.bank-market-chart svg {
  height: auto;
  min-height: 250px;
}

.bank-market-chart-legend {
  gap: 10px 24px;
  min-height: 28px;
  color: #68707d;
  font: 600 .85rem/1.2 Arial, Helvetica, sans-serif;
}

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

.bank-market-chart-legend span::before {
  width: 9px;
  height: 9px;
  margin-right: 8px;
}

.market-chart-plot {
  width: 100%;
  min-width: 0;
}

.bank-market-chart polyline {
  stroke: #f05c9d;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.market-chart-gridline {
  stroke: #dfe3e8;
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}

.market-chart-axis-label {
  fill: #8a909a;
  font: 11px Arial, Helvetica, sans-serif;
}

.market-chart-endpoint {
  fill: #f05c9d;
}

.market-chart-endpoint.is-series-2 { fill: #4965a8; }
.market-chart-endpoint.is-series-3 { fill: var(--aqua); }

.market-chart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #dfe3e8;
  padding: 2px 0 14px;
}

.market-chart-foot > strong {
  color: #4d5562;
  font-size: .83rem;
  font-weight: 600;
}

.market-range-tabs {
  align-items: center;
  gap: 4px;
  border: 0;
  padding: 0;
}

.market-range-tabs button {
  min-width: 38px;
  border-radius: 6px;
  color: #8a909a;
  font: 700 .74rem/1 Arial, Helvetica, sans-serif;
  padding: 7px 8px;
}

.market-range-tabs button.is-active {
  background: #eef1f4;
  color: #111827;
}

.market-contract-list {
  border-bottom: 1px solid #dfe3e8;
}

.market-contract-row {
  grid-template-columns: minmax(220px, 1fr) 82px minmax(94px, 120px) minmax(94px, 120px);
  gap: 16px;
  min-height: 76px;
  border-top: 1px solid #e3e6ea;
  padding: 10px 0;
}

.market-contract-row.is-heading {
  min-height: 38px;
  border-top: 0;
  color: #858c97;
  font: 600 .76rem/1 Arial, Helvetica, sans-serif;
  text-transform: none;
}

.market-contract-row.is-active {
  background: transparent;
}

.market-contract-person {
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  color: #202630;
  font: 600 1rem/1.15 Arial, Helvetica, sans-serif;
}

.market-outcome-avatar {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 10px;
  background: #f0f2f5;
}

.market-contract-chance {
  color: #111827;
  font: 700 1.28rem/1 Arial, Helvetica, sans-serif;
}

.market-contract-row .market-price-button,
.market-price-button {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 42px;
  border: 1px solid #d2d6dc;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 0 rgba(7,19,63,.06);
  padding: 7px 12px;
}

.market-contract-row .market-price-button span,
.market-contract-row .market-price-button strong {
  font: 700 .86rem/1 Arial, Helvetica, sans-serif;
  text-transform: none;
}

.market-price-button.is-yes { color: #087d70; }
.market-price-button.is-no { color: #d82c5d; }
.market-price-button:hover { border-color: #aeb6c1; background: linear-gradient(180deg, #ffffff, #eef4fb); }
.market-price-button.is-selected { border-color: #43cbbb; background: linear-gradient(180deg, #effffc, #dff7f2); box-shadow: inset 3px 0 0 #19a493, inset 0 1px 0 #fff, 0 2px 0 rgba(7,19,63,.06); }
.market-price-button.is-no.is-selected { border-color: #f0678d; background: linear-gradient(180deg, #fff8fb, #ffe7ef); box-shadow: inset 3px 0 0 #e43d70, inset 0 1px 0 #fff, 0 2px 0 rgba(7,19,63,.06); }

.market-ticket,
.market-positions,
.market-rules,
.market-detail-activity .bank-market-orders {
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.market-ticket {
  position: sticky;
  top: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
}

.market-ticket-top {
  min-height: 50px;
  border-bottom: 1px solid #e1e4e8;
  background: #ffffff;
  padding: 7px 15px;
}

.market-ticket-top > strong {
  color: #7d8490;
  font: 700 .72rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .1em;
}

.market-side-toggle {
  display: flex;
  gap: 20px;
}

.market-side-toggle button {
  min-height: 34px;
  border-radius: 0;
  color: #9298a2;
  font: 800 .8rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  padding: 5px 0;
  text-transform: uppercase;
}

.market-side-toggle button.is-active {
  background: transparent;
  color: #111827;
  box-shadow: inset 0 -2px 0 #111827;
}

.market-ticket-body {
  gap: 12px;
  padding: 15px;
}

.market-ticket-market {
  color: #858c97;
  font: 700 .7rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.market-ticket-head {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
}

.market-ticket-avatar {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.market-ticket-head h2 {
  color: #111827;
  font: 700 1rem/1.1 Arial, Helvetica, sans-serif;
}

.market-contract-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #edf1f6, #f6f8fb);
  padding: 4px;
  border-radius: 10px;
}

.market-contract-toggle button {
  min-height: 40px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #59616d;
  font-family: Arial, Helvetica, sans-serif;
  padding: 8px 11px;
}

.market-contract-toggle button span {
  color: inherit;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.market-contract-toggle button strong {
  font-size: .95rem;
  font-weight: 800;
}

.market-contract-toggle button.is-active:first-child {
  background: linear-gradient(180deg, #ffffff, #e8fbf7);
  color: #137a70;
  box-shadow: 0 1px 4px rgba(7,19,63,.12), inset 0 -2px 0 #40cbbb;
}

.market-contract-toggle button.is-active:last-child {
  background: linear-gradient(180deg, #ffffff, #fff0f5);
  color: #c42956;
  box-shadow: 0 1px 4px rgba(7,19,63,.12), inset 0 -2px 0 #eb4f79;
}

.market-trade-form {
  gap: 10px;
  border-top: 1px solid #e5e8ec;
  padding-top: 13px;
}

.market-ticket-input-row {
  color: #68707d;
  font: 700 .76rem/1 Arial, Helvetica, sans-serif;
}

.market-order-type-toggle,
.market-expiration-toggle {
  display: grid;
  gap: 3px;
  border: 1px solid #d8dde3;
  border-radius: 9px;
  background: linear-gradient(180deg, #e9edf3, #f5f7fa);
  padding: 3px;
}

.market-order-type-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.market-order-type-toggle:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.market-expiration-toggle { grid-template-columns: 1.35fr .75fr .9fr; }

.market-order-type-toggle button,
.market-expiration-toggle button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #727a86;
  cursor: pointer;
  font: 700 .75rem/1 Arial, Helvetica, sans-serif;
  padding: 7px 8px;
}

.market-order-type-toggle button.is-active,
.market-expiration-toggle button.is-active {
  background: linear-gradient(180deg, #ffffff, #f8f3fa);
  color: #111827;
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 4px rgba(7,19,63,.14);
}

.market-ticket-input-row > input,
.market-ticket-input-row > select,
.market-ticket-input-row .bank-trade-select,
.market-money-input {
  min-height: 41px;
  border: 1px solid #d6dae0;
  border-radius: 10px;
  background: #ffffff;
  color: #111827;
  font: 600 .9rem/1 Arial, Helvetica, sans-serif;
}

.market-money-input { padding: 0 12px; }
.market-money-input input { min-height: 39px; font-family: Arial, Helvetica, sans-serif; }
.market-money-input input::-webkit-inner-spin-button,
.market-money-input input::-webkit-outer-spin-button,
.market-ticket-input-row > input::-webkit-inner-spin-button,
.market-ticket-input-row > input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.market-money-input input[type="number"],
.market-ticket-input-row > input[type="number"] { appearance: textfield; }

.market-ticket-summary { gap: 0; }

.market-ticket-summary div {
  min-height: 34px;
  align-items: center;
  border-bottom: 1px solid #e4e7eb;
  padding: 7px 0;
}

.market-ticket-summary dt,
.market-ticket-summary dd {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .78rem;
}

.market-ticket-summary dt { color: #69717d; }
.market-ticket-summary dd { color: #111827; }

.market-submit {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #ff76b5 0%, #e94f96 100%);
  color: #ffffff;
  font: 800 .92rem/1 Arial, Helvetica, sans-serif;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 #c93b7b, 0 7px 14px rgba(226,61,137,.16);
}

.market-submit:hover,
.market-submit:focus-visible { background: linear-gradient(180deg, #ff83bd, #e34890); outline: 0; }
.market-submit:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 #c93b7b; }

.market-positions { gap: 8px; padding: 16px; }
.market-detail-activity { gap: 12px; }
.market-detail-activity.is-single { grid-template-columns: minmax(0, 1fr); }
.market-detail-activity .bank-market-orders { grid-column: auto; gap: 8px; padding: 13px 15px; }
.market-detail-activity.is-single .bank-market-orders { grid-column: 1 / -1; }
.market-detail-activity .bank-market-orders h2 { font: 700 1.15rem/1.1 "Barlow Semi Condensed", Arial, Helvetica, sans-serif; }
.market-detail-activity .bank-market-order { padding-top: 8px; }
.market-rules { gap: 5px; padding: 13px 15px; }
.market-rules .market-panel-heading h2 { font-size: 1.12rem; }
.market-rules > p { color: #68717f; font: 600 .86rem/1.45 Arial, Helvetica, sans-serif; }

@media (max-width: 1150px) {
  .market-layout { grid-template-columns: minmax(0, 1fr); }
  .market-ticket { position: static; }
  .market-side { grid-template-columns: minmax(0, 1fr); }
  .market-contract-row { grid-template-columns: minmax(180px, 1fr) 70px 92px 92px; gap: 10px; }
}

@media (max-width: 900px) {
  .shop-detail[data-shop-slug="royal-meridian-bank"] .shop-detail-layout:has(.market-detail-view) { grid-template-columns: minmax(0,1fr); max-width: 620px; margin-inline: auto; }
  .shop-detail[data-shop-slug="royal-meridian-bank"] .shop-detail-layout:has(.market-detail-view) > .shop-detail-poster { position: static; justify-self: center; }
  .shop-detail[data-shop-slug="royal-meridian-bank"] .shop-detail-panel:has(.market-detail-view) { padding-inline: 14px; }
}

@media (max-width: 560px) {
  .market-hero.bank-market-hero { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
  .market-hero-logo { width: 54px; height: 54px; }
  .market-title-block h1 { font-size: 1.55rem; }
  .market-chart-panel.bank-market-chart svg { min-height: 190px; }
  .market-contract-row { grid-template-columns: minmax(0, 1fr) 76px 76px; }
  .market-contract-row.is-heading span:nth-child(2), .market-contract-chance { display: none; }
  .market-contract-person { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; font-size: .9rem; }
  .market-outcome-avatar { width: 42px; height: 42px; }
  .market-contract-row .market-price-button { display: grid; gap: 2px; min-height: 46px; padding: 5px; }
  .market-limit-fields { grid-template-columns: minmax(0, 1fr); }
  .market-expiration-toggle { grid-template-columns: minmax(0, 1fr); }
  .market-detail-activity { grid-template-columns: minmax(0, 1fr); }
}

.admin-market-create { margin-bottom: 18px; }
.admin-market-form { display: grid; gap: 18px; }
.admin-market-outcomes { display: grid; gap: 12px; }
.admin-market-outcome { display: grid; gap: 12px; min-width: 0; border: 1px solid rgba(73,101,168,.16); border-radius: 10px; background: rgba(255,255,255,.55); padding: 14px; }
.admin-market-outcome legend { color: var(--ink); font-weight: 900; padding: 0 7px; }
.admin-market-card { margin-top: 18px; }
.admin-market-card .admin-panel-head { align-items: flex-start; }
.admin-market-card .admin-panel-head p { margin: 2px 0; }
.admin-market-contract-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.admin-market-contract-summary span { border: 1px solid rgba(73,101,168,.14); border-radius: 999px; background: rgba(99,217,202,.1); color: var(--ink); font-size: .86rem; padding: 6px 9px; }
.admin-market-contract-summary span.is-resolved { background: rgba(240,92,157,.1); color: #8a2f58; }
.admin-page [data-admin-view]:has(.admin-market-create) { width: 100%; max-width: 1180px; margin-inline: auto; }
.admin-market-create,.admin-market-card { max-width: 1180px; margin-inline: auto; }
.admin-market-create { padding: 20px; }
.admin-market-form { gap: 20px; }
.admin-market-form > .admin-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.admin-market-form textarea.admin-input { min-height: 86px; }
.admin-market-settings { overflow: hidden; border: 1px solid rgba(7,19,63,.14); border-radius: 10px; background: rgba(247,249,252,.8); }
.admin-market-settings > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; color: var(--ink); font-weight: 900; padding: 14px 16px; }
.admin-market-settings > summary small { color: rgba(7,19,63,.58); font-size: .78rem; text-align: right; }
.admin-market-settings[open] > summary { border-bottom: 1px solid rgba(7,19,63,.1); }
.admin-market-settings > .admin-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; }
.admin-market-chance-summary { margin: -4px 0 0; border-left: 3px solid #1aa88e; color: rgba(7,19,63,.68); font-size: .84rem; font-weight: 800; padding: 3px 0 3px 10px; }
.admin-market-bulk-add { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,360px); align-items: center; gap: 18px; border: 2px dashed rgba(7,19,63,.2); border-radius: 10px; background: rgba(99,217,202,.08); padding: 15px; }
.admin-market-bulk-add > div { display: grid; gap: 5px; }
.admin-market-bulk-add strong { color: var(--ink); font-size: 1.05rem; }
.admin-market-bulk-add span,.admin-market-bulk-add small,.admin-market-bulk-add p { color: rgba(7,19,63,.68); font-weight: 800; }
.admin-market-bulk-add p { grid-column: 1/-1; min-height: 1em; margin: 0; font-size: .82rem; }
.admin-market-dropzone { position: relative; display: grid; place-items: center; gap: 4px; min-height: 92px; border: 2px solid var(--ink); border-radius: 9px; background: #fff; cursor: pointer; padding: 14px; text-align: center; transition: background .15s ease,transform .15s ease; }
.admin-market-dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.admin-market-dropzone > span { color: var(--ink); font-size: .92rem; }
.admin-market-dropzone.is-dragging,.admin-market-dropzone:hover { background: #eafbf7; transform: translateY(-1px); }
.admin-market-outcomes { gap: 10px; }
.admin-market-outcome { gap: 10px; border-color: rgba(7,19,63,.14); background: #fff; padding: 12px; }
.admin-market-outcome legend { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.admin-market-outcome-main { display: grid; grid-template-columns: 58px minmax(190px,1fr) 118px 160px auto; align-items: end; gap: 10px; min-width: 0; }
.admin-market-outcome-preview { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border: 1px solid rgba(7,19,63,.14); border-radius: 9px; background: #f1f4f7; color: rgba(7,19,63,.5); }
.admin-market-outcome-preview img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.admin-market-outcome-main .admin-field { min-width: 0; }
.admin-market-percent-input { position: relative; display: block; }
.admin-market-percent-input .admin-input { padding-right: 30px; }
.admin-market-percent-input > b { position: absolute; top: 50%; right: 11px; color: rgba(7,19,63,.55); transform: translateY(-50%); }
.admin-market-remove-outcome { align-self: end; min-height: 42px; }
.admin-market-outcome-advanced { border-top: 1px solid rgba(7,19,63,.1); padding-top: 9px; }
.admin-market-outcome-advanced > summary { color: rgba(7,19,63,.68); cursor: pointer; font-size: .8rem; font-weight: 900; }
.admin-market-outcome-advanced[open] > summary { margin-bottom: 10px; }
.admin-market-outcome-advanced .admin-form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.admin-market-delete-feedback { margin: 9px 0 0; border-radius: 7px; background: rgba(99,217,202,.13); color: #146c60; font-weight: 900; padding: 9px 11px; }
.admin-market-delete-feedback.is-error { background: rgba(240,92,157,.12); color: #98234f; }

@media (max-width: 980px) {
  .admin-market-outcome-main { grid-template-columns: 50px minmax(170px,1fr) 105px 140px; }
  .admin-market-outcome-preview { width: 50px; height: 50px; }
  .admin-market-remove-outcome { grid-column: 2/-1; justify-self: end; }
  .admin-market-outcome-advanced .admin-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .admin-market-form > .admin-form-grid,.admin-market-settings > .admin-form-grid,.admin-market-bulk-add { grid-template-columns: minmax(0,1fr); }
  .admin-market-settings > summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .admin-market-settings > summary small { text-align: left; }
  .admin-market-bulk-add p { grid-column: auto; }
  .admin-market-outcome-main { grid-template-columns: 50px minmax(0,1fr); align-items: center; }
  .admin-market-outcome-main .admin-field,.admin-market-remove-outcome { grid-column: 1/-1; }
  .admin-market-outcome-main .admin-field:first-of-type { grid-column: 2; grid-row: 1; }
  .admin-market-remove-outcome { justify-self: stretch; }
  .admin-market-outcome-advanced .admin-form-grid { grid-template-columns: minmax(0,1fr); }
}
.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: minmax(0, 1fr) 34px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .bank-heading-row,
  .bank-service-form { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .bank-portfolio-overview { grid-template-columns: minmax(0, 1fr); }
  .bank-portfolio-metrics > div { border-top: 1px solid color-mix(in srgb, var(--shop-theme-accent) 22%, rgba(7,19,63,.1)); border-left: 0; }
  .bank-position-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bank-position-card-body { grid-template-columns: minmax(0, 1fr); gap: 10px; border-top: 1px solid rgba(7,19,63,.08); padding-top: 11px; }
  .bank-position-actions { justify-content: stretch; }
  .bank-position-actions button { flex: 1; }
  .bank-position-value { text-align: left; }
  .bank-transfer-arrow { min-height: auto; transform: rotate(90deg); }
  .bank-transfer-intro { align-items: flex-start; padding: 16px; }
  .bank-market-browser { grid-template-columns: minmax(0, 1fr); }
  .bank-market-card-row { grid-template-columns: minmax(0, 1fr) 56px 56px; }
  .bank-market-card-row.is-heading span:nth-child(2),
  .bank-market-preview-chance { display: none; }
  .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: 760px), (max-height: 640px) and (max-width: 1024px) {
  .socipic-mini-game-viewport {
    aspect-ratio: auto;
    height: clamp(600px, calc(100dvh - 96px), 760px);
  }

  .arcade-play-stage,
  .madhouse-flash-shell.is-mini-game {
    width: 100%;
  }

  .arcade-play-stage {
    border-radius: 10px;
  }
}

@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-sidecar-slot {
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.profile-page .profile-media-player {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color: #fff7df;
}

.profile-page .profile-media-player-cabinet {
  position: relative;
  width: 100%;
  aspect-ratio: 700 / 444;
  filter: drop-shadow(0 12px 14px rgba(7, 19, 63, 0.2));
}

.profile-page .profile-media-player-cabinet::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: url("/assets/site/general-icons/profile-music-player-frame.png?v=profile-framington-20260916") center / 100% 100% no-repeat;
  content: "";
  pointer-events: none;
}

.profile-page .profile-media-player-screen {
  position: absolute;
  z-index: 1;
  top: 24.77%;
  left: 11.29%;
  width: 68.86%;
  height: 56.76%;
  overflow: hidden;
  border-radius: 7% / 12%;
  background: #05091b;
}

.profile-page .profile-media-player-screen::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(rgba(255, 255, 255, 0.045) 50%, rgba(0, 0, 0, 0.04) 50%);
  background-size: 100% 4px;
  content: "";
  pointer-events: none;
}

.profile-page .profile-media-player-frame {
  width: 100%;
  height: 100%;
  background: #05091b;
}

.profile-page .profile-media-player-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.profile-page .profile-media-player-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 25%, rgba(141, 99, 255, 0.42), transparent 42%),
    #07133f;
  padding: 18px;
  text-align: center;
}

.profile-page .profile-media-player-empty a {
  color: #8eebe0;
  font-weight: 850;
}

.profile-page .profile-referral-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(7, 19, 63, 0.42);
  border-radius: 10px;
  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: 9px 10px 10px;
  box-shadow: 0 7px 15px rgba(7, 19, 63, 0.12);
}

.profile-page .profile-referral-card-title {
  grid-column: 1 / -1;
  padding: 4px 7px;
  font-size: 0.75rem;
}

.profile-page .profile-referral-card strong {
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.1;
}

.profile-page .profile-referral-card button {
  justify-self: end;
  min-height: 31px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 0 9px;
  box-shadow: 3px 3px 0 rgba(7, 19, 63, 0.16);
}

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

.profile-page .profile-donation-card {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 14px;
}

.profile-page .profile-donation-copy {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.profile-page .profile-donation-copy > strong {
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.12;
}

.profile-page .profile-donation-copy > small {
  margin: 0;
  color: #526080;
  font-size: 0.69rem;
  font-weight: 750;
  line-height: 1.2;
}

.profile-page .profile-donation-sites {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .profile-page .profile-donation-card {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-donation-card button {
    justify-self: start;
  }
}

body.has-profile-donation-modal {
  overflow: hidden;
}

.profile-donation-modal {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.profile-donation-modal[hidden] {
  display: none;
}

.profile-donation-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 19, 63, 0.72);
  backdrop-filter: blur(5px);
}

.profile-donation-dialog {
  position: relative;
  width: min(460px, calc(100vw - 36px));
  box-sizing: border-box;
  overflow: hidden;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background:
    radial-gradient(circle at 16px 16px, rgba(238, 78, 155, 0.1) 0 3px, transparent 3.5px) 0 0 / 32px 32px,
    linear-gradient(145deg, #fff9d9, #e9fffb 58%, #fff0f7);
  color: var(--ink);
  text-align: center;
  padding: 42px 34px 36px;
  box-shadow: 12px 12px 0 rgba(238, 78, 155, 0.72);
}

.profile-donation-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.profile-donation-spark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 16px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--pink);
  font-size: 1.7rem;
  font-weight: 1000;
  transform: rotate(-7deg);
  box-shadow: 5px 5px 0 var(--mint);
}

.profile-donation-kicker {
  margin: 0 0 8px;
  color: var(--pink);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profile-donation-dialog h2 {
  margin: 0;
  font-size: clamp(1.55rem, 5vw, 2.25rem);
  line-height: 1.05;
}

.profile-donation-dialog > p:not(.profile-donation-kicker) {
  margin: 14px 0 20px;
  font-size: 1.05rem;
  font-weight: 800;
}

.profile-donation-register {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-weight: 950;
  padding: 0 22px;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
}

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

.auth-verification-note {
  margin: 0;
  border: 2px solid rgba(240, 92, 157, 0.3);
  background: rgba(255, 216, 61, 0.18);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.3;
  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: 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-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.admin-bulk-tools .admin-panel {
  margin: 0;
}

.admin-users-section-tabs {
  margin-bottom: 16px;
}

.admin-users-tool-view {
  max-width: 980px;
}

.admin-users-tool-view .admin-panel {
  margin: 0;
}

.admin-user-directory-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.admin-user-directory-stats {
  color: rgba(42, 79, 144, 0.82) !important;
}

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

.admin-filtered-words-form .admin-form-actions {
  grid-column: 1 / -1;
}

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

@media (max-width: 860px) {
  .admin-bulk-tools,
  .admin-filtered-words-form {
    grid-template-columns: 1fr;
  }

  .admin-filtered-words-form .admin-form-actions {
    grid-column: auto;
  }
}

.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-default-designs,
.admin-default-design-stock {
  display: grid;
  gap: 18px;
}

.admin-default-design-stock {
  border-top: 2px solid rgba(7, 19, 63, .14);
  padding-top: 16px;
}

.admin-default-design-card .admin-shop-item-body > details {
  margin-top: 2px;
}

.admin-default-design-path {
  overflow-wrap: anywhere;
  color: rgba(7, 19, 63, .45) !important;
  font: 700 .68rem/1.3 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.is-female-skin-preview::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: url("/assets/site/avatar-overlays/skinbar.png") center / contain no-repeat;
  content: "";
  pointer-events: 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 { position: relative; 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 img.female-skin-modesty-overlay { position: absolute; inset: 0; pointer-events: none; }
.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 {
  box-sizing: border-box;
  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-funnel {
  margin-bottom: 14px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 5px 5px 0 rgba(7, 19, 63, 0.12);
}

.admin-funnel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 12px;
  border-bottom: 2px solid rgba(7, 19, 63, 0.14);
  background: linear-gradient(100deg, rgba(240, 92, 157, 0.18), rgba(99, 217, 202, 0.2));
}

.admin-funnel-head span,
.admin-funnel-head p,
.admin-funnel-stage p,
.admin-funnel-stage small,
.admin-funnel-periods button {
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 850;
}

.admin-funnel-head span {
  display: block;
  margin-bottom: 3px;
  color: #b42467;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.admin-funnel-head h2,
.admin-funnel-head p,
.admin-funnel-stage p {
  margin: 0;
}

.admin-funnel-head h2 {
  color: var(--ink);
  font-family: "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1;
}

.admin-funnel-head p {
  color: rgba(7, 19, 63, 0.62);
  font-size: 0.86rem;
}

.admin-funnel-controls {
  display: grid;
  justify-items: end;
  gap: 6px;
}

.admin-funnel-periods {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 4px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.58);
  padding: 4px;
}

.admin-funnel-periods button {
  min-height: 31px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(7, 19, 63, 0.68);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 5px 9px;
}

.admin-funnel-periods button:hover,
.admin-funnel-periods button:focus-visible {
  background: rgba(99, 217, 202, 0.18);
  color: var(--ink);
  outline: 0;
}

.admin-funnel-periods button:focus-visible {
  box-shadow: 0 0 0 2px var(--ink);
}

.admin-funnel-periods button.is-active {
  background: var(--pink);
  color: #fff;
  box-shadow: 2px 2px 0 rgba(7, 19, 63, 0.16);
}

.admin-funnel-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-funnel-stage {
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 15px 22px 15px 15px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 238, 247, 0.62));
}

.admin-funnel-stage:nth-child(even) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(226, 250, 247, 0.66));
}

.admin-funnel-stage:not(:last-child) {
  border-right: 2px solid rgba(7, 19, 63, 0.13);
}

.admin-funnel-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -7px;
  width: 12px;
  height: 12px;
  border-top: 2px solid rgba(7, 19, 63, 0.28);
  border-right: 2px solid rgba(7, 19, 63, 0.28);
  background: #fff9fc;
  transform: translateY(-50%) rotate(45deg);
}

.admin-funnel-stage-label {
  color: rgba(7, 19, 63, 0.68);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-funnel-value {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.62);
  padding: 9px;
}

.admin-funnel-value small {
  color: rgba(7, 19, 63, 0.54);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-funnel-value strong {
  overflow: hidden;
  color: var(--ink);
  font-family: "Easy Pixel", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 0.9;
  text-overflow: ellipsis;
}

.admin-funnel-stage p {
  min-height: 2.2em;
  color: rgba(7, 19, 63, 0.62);
  font-size: 0.78rem;
  line-height: 1.1;
}

.admin-funnel-stage small {
  width: fit-content;
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.07);
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.7rem;
  padding: 5px 8px;
}

.admin-funnel-stage small b {
  color: #b42467;
}

.admin-funnel-stage small i {
  color: rgba(7, 19, 63, 0.32);
  font-style: normal;
}

.registration-recommendation-modal[hidden] {
  display: none;
}

.registration-recommendation-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.registration-recommendation-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(7, 19, 63, 0.7);
  cursor: default;
}

.registration-recommendation-dialog {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: calc(100vw - 40px);
  max-width: 520px;
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 230, 242, 0.94)),
    #fff;
  box-shadow: 9px 9px 0 rgba(99, 217, 202, 0.72);
  padding: clamp(22px, 5vw, 38px);
  text-align: center;
}

.registration-recommendation-dialog:focus {
  outline: 0;
}

.registration-recommendation-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
}

.registration-recommendation-kicker {
  border-radius: 999px;
  background: var(--mint);
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  padding: 7px 11px;
  text-transform: uppercase;
}

.registration-recommendation-dialog > img {
  display: block;
  width: min(190px, 50vw);
  max-height: 105px;
  object-fit: contain;
}

.registration-recommendation-dialog h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Froople", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.registration-recommendation-capacity,
.registration-recommendation-duration,
.registration-recommendation-copy,
.registration-recommendation-status {
  margin: 0;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 850;
}

.registration-recommendation-capacity {
  color: #b42467;
  font-size: 1.1rem;
}

.registration-recommendation-duration {
  color: var(--ink);
  font-size: 0.96rem;
}

.registration-recommendation-copy {
  max-width: 410px;
  color: rgba(7, 19, 63, 0.68);
  font-size: 0.9rem;
  line-height: 1.25;
}

.registration-recommendation-status {
  min-height: 1.2em;
  color: #b42467;
  font-size: 0.86rem;
}

.registration-recommendation-action {
  width: min(100%, 330px);
  min-height: 52px;
  border: 3px solid var(--ink);
  border-radius: 9px;
  background: var(--pink);
  color: #fff;
  cursor: pointer;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.08rem;
  font-weight: 950;
  padding: 11px 18px;
  box-shadow: 5px 5px 0 rgba(7, 19, 63, 0.18);
}

.registration-recommendation-action:hover,
.registration-recommendation-action:focus-visible {
  background: #d93685;
  outline: 0;
  transform: translate(-1px, -1px);
}

.registration-recommendation-action:disabled {
  cursor: wait;
  opacity: 0.65;
  transform: none;
}

.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-lookup-form {
  display: grid;
  grid-template-columns: minmax(180px, 320px) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
}

.admin-game-lookup-form .admin-primary-button {
  min-height: 44px;
}

.admin-game-lookup-result {
  grid-template-columns: minmax(0, 1fr);
}

.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.is-deranked {
  border-color: rgba(86, 91, 111, 0.46);
}

.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-list-live {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  border-block: 2px solid rgba(7, 19, 63, 0.1);
  background: rgba(58, 132, 214, 0.08);
  padding: 9px 11px;
}

.admin-game-list-live span {
  border: 1px solid rgba(58, 132, 214, 0.24);
  border-radius: 999px;
  background: #fff;
  color: #255b98;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 4px 8px;
}

.admin-game-detail-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-spilled-state {
  border-top: 2px solid rgba(7, 19, 63, 0.1);
  background: linear-gradient(145deg, rgba(237, 99, 142, 0.12), rgba(255, 255, 255, 0.9));
  padding: 13px;
}

.admin-spilled-state > header,
.admin-spilled-block > header,
.admin-spilled-challenge > header,
.admin-spilled-stat-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-spilled-state > header > div,
.admin-spilled-block > header > div,
.admin-spilled-challenge > header > div {
  display: grid;
  gap: 2px;
}

.admin-spilled-state > header strong,
.admin-spilled-block > header strong,
.admin-spilled-challenge > header strong {
  color: var(--ink);
  font-weight: 950;
}

.admin-spilled-state > header span,
.admin-spilled-block > header span,
.admin-spilled-challenge > header span {
  color: rgba(7, 19, 63, 0.62);
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-spilled-state > header > b,
.admin-spilled-block > header > b,
.admin-spilled-challenge > header > b {
  border-radius: 999px;
  background: #b42f60;
  color: #fff;
  font-size: 0.78rem;
  padding: 5px 9px;
  white-space: nowrap;
}

.admin-spilled-messaging-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  border: 2px solid rgba(180, 47, 96, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  padding: 10px;
}

.admin-spilled-messaging-control.is-active {
  border-color: #b42f60;
  background: rgba(255, 225, 235, 0.96);
}

.admin-spilled-messaging-control > div {
  display: grid;
  gap: 2px;
}

.admin-spilled-messaging-control strong {
  color: var(--ink);
  font-weight: 950;
}

.admin-spilled-messaging-control span {
  color: rgba(7, 19, 63, 0.66);
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-spilled-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.admin-spilled-facts > div,
.admin-spilled-power-grid > article {
  border: 2px solid rgba(180, 47, 96, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  padding: 9px;
}

.admin-spilled-facts dt,
.admin-spilled-power-grid > article > span {
  color: rgba(7, 19, 63, 0.55);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-spilled-facts dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-weight: 950;
}

.admin-spilled-power-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-spilled-power-grid > article {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.admin-spilled-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-weight: 950;
  text-decoration: none;
}

.admin-spilled-person img {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 2px solid rgba(7, 19, 63, 0.72);
  border-radius: 50%;
  object-fit: cover;
}

.admin-spilled-person span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-spilled-pending {
  color: rgba(7, 19, 63, 0.52);
  font-weight: 850;
}

.admin-spilled-nominees {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-spilled-nominees span {
  border-radius: 999px;
  background: rgba(180, 47, 96, 0.1);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 850;
  padding: 4px 7px;
}

.admin-spilled-block {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  border-top: 2px solid rgba(7, 19, 63, 0.12);
  padding-top: 12px;
}

.admin-spilled-standings,
.admin-spilled-challenges {
  display: grid;
  gap: 8px;
}

.admin-spilled-stat-card,
.admin-spilled-challenge {
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.13);
  border-radius: 9px;
  background: #fff;
}

.admin-spilled-stat-card.is-overridden {
  border-color: rgba(180, 47, 96, 0.7);
  box-shadow: 3px 3px 0 rgba(180, 47, 96, 0.12);
}

.admin-spilled-stat-card.is-eliminated {
  filter: grayscale(35%);
  opacity: 0.72;
}

.admin-spilled-stat-card > header,
.admin-spilled-challenge > header {
  padding: 9px 11px;
}

.admin-spilled-stat-card > header > b {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
}

.admin-spilled-stat-card > header > .admin-spilled-person {
  margin-right: auto;
}

.admin-spilled-stat-card > header > span:last-child {
  display: grid;
  justify-items: end;
  color: #b42f60;
}

.admin-spilled-stat-card > header > span:last-child strong {
  font-size: 1.1rem;
  font-weight: 950;
}

.admin-spilled-stat-card > header > span:last-child small {
  color: rgba(7, 19, 63, 0.55);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-spilled-score-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  border-block: 1px solid rgba(7, 19, 63, 0.1);
  background: rgba(237, 99, 142, 0.06);
  color: rgba(7, 19, 63, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
  padding: 7px 11px;
}

.admin-spilled-stat-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
  padding: 10px 11px;
}

.admin-spilled-stat-fields label {
  display: grid;
  gap: 4px;
}

.admin-spilled-stat-fields label > span {
  color: rgba(7, 19, 63, 0.58);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-spilled-stat-fields .admin-input {
  min-width: 0;
}

.admin-spilled-stat-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  padding: 8px 11px;
}

.admin-spilled-stat-card > footer > small {
  color: rgba(7, 19, 63, 0.58);
  font-weight: 800;
}

.admin-spilled-stat-card > footer > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.admin-spilled-challenge.is-current {
  border-color: rgba(180, 47, 96, 0.55);
}

.admin-spilled-challenge .admin-table-wrap {
  border: 0;
  border-radius: 0;
}

.admin-palais-state {
  border-top: 2px solid rgba(7, 19, 63, 0.1);
  background: linear-gradient(145deg, rgba(58, 132, 214, 0.12), rgba(255, 255, 255, 0.88));
  padding: 13px;
}

.admin-palais-state > header,
.admin-palais-block > header,
.admin-palais-competition > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-palais-state > header > div,
.admin-palais-competition > header > div {
  display: grid;
  gap: 2px;
}

.admin-palais-state > header strong,
.admin-palais-block > header strong,
.admin-palais-competition > header strong {
  color: var(--ink);
  font-weight: 950;
}

.admin-palais-state > header span,
.admin-palais-block > header span,
.admin-palais-competition > header span {
  color: rgba(7, 19, 63, 0.62);
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-palais-state > header > b,
.admin-palais-competition > header > b {
  border-radius: 999px;
  background: #255b98;
  color: #fff;
  font-size: 0.78rem;
  padding: 5px 9px;
  white-space: nowrap;
}

.admin-palais-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}

.admin-palais-facts > div,
.admin-palais-power-grid > article {
  border: 2px solid rgba(58, 132, 214, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  padding: 9px;
}

.admin-palais-facts dt,
.admin-palais-power-grid > article > span {
  color: rgba(7, 19, 63, 0.55);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-palais-facts dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-weight: 950;
}

.admin-palais-power-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-palais-power-grid > article {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.admin-palais-power-grid > article > strong {
  overflow-wrap: anywhere;
  color: var(--ink);
}

.admin-palais-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-weight: 950;
  text-decoration: none;
}

.admin-palais-person img {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 2px solid rgba(7, 19, 63, 0.72);
  border-radius: 50%;
  object-fit: cover;
}

.admin-palais-person span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-palais-pending {
  color: rgba(7, 19, 63, 0.52);
  font-weight: 850;
}

.admin-palais-block {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  border-top: 2px solid rgba(7, 19, 63, 0.12);
  padding-top: 12px;
}

.admin-palais-competition {
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.13);
  border-radius: 9px;
  background: #fff;
}

.admin-palais-competition.is-current {
  border-color: rgba(58, 132, 214, 0.58);
  box-shadow: 3px 3px 0 rgba(58, 132, 214, 0.12);
}

.admin-palais-competition > header {
  padding: 9px 11px;
}

.admin-palais-competition-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  background: rgba(58, 132, 214, 0.06);
  color: rgba(7, 19, 63, 0.68);
  font-size: 0.75rem;
  font-weight: 900;
  padding: 7px 11px;
}

.admin-palais-competition .admin-table-wrap {
  border: 0;
  border-radius: 0;
}

.admin-palais-score-form {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 150px;
}

.admin-palais-score-form label { min-width: 0; }

.admin-palais-score-form .admin-input {
  width: 104px;
  min-height: 34px;
  padding: 6px 8px;
  font-weight: 950;
}

.admin-game-deranked {
  display: grid;
  gap: 3px;
  border-top: 2px solid rgba(7, 19, 63, 0.1);
  background: rgba(86, 91, 111, 0.1);
  color: #555a6e;
  padding: 11px;
}

.admin-game-deranked strong { font-weight: 950; text-transform: uppercase; }
.admin-game-deranked span { font-weight: 850; }
.admin-game-deranked small { color: rgba(7, 19, 63, 0.58); font-weight: 800; }

.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-jungle-schedule {
  border-top: 2px solid rgba(7, 19, 63, 0.1);
  background: linear-gradient(135deg, rgba(34, 148, 111, 0.12), rgba(245, 197, 66, 0.09));
  padding: 11px;
}

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

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

.admin-jungle-schedule-event {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 2px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  padding: 9px 10px;
}

.admin-jungle-schedule-event > i {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(7, 19, 63, 0.28);
  border-radius: 50%;
  background: #fff;
}

.admin-jungle-schedule-event > span { display: grid; min-width: 0; }
.admin-jungle-schedule-event strong { color: var(--ink); font-weight: 950; }
.admin-jungle-schedule-event small { color: rgba(7, 19, 63, 0.66); font-weight: 850; }
.admin-jungle-schedule-event em { overflow: hidden; color: #12826f; font-size: 0.75rem; font-style: normal; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.admin-jungle-schedule-event > b { color: var(--ink); font-size: 0.82rem; font-weight: 950; text-align: right; }
.admin-jungle-schedule-event.is-active { border-color: rgba(34, 148, 111, 0.5); background: rgba(229, 250, 240, 0.98); }
.admin-jungle-schedule-event.is-active > i { border-color: #137c5b; background: #2dbb8c; box-shadow: 0 0 0 3px rgba(45, 187, 140, 0.16); }
.admin-jungle-schedule-event.is-completed { opacity: 0.68; }
.admin-jungle-schedule-event.is-completed > i { border-color: #137c5b; background: #137c5b; }

.admin-jungle-live {
  border-top: 2px solid rgba(7, 19, 63, 0.1);
  background: rgba(34, 148, 111, 0.08);
  padding: 11px;
}

.admin-jungle-live > header,
.admin-jungle-block > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-jungle-live > header > div { display: grid; gap: 2px; }
.admin-jungle-live > header strong,
.admin-jungle-block > header strong { color: var(--ink); font-weight: 950; }
.admin-jungle-live > header span,
.admin-jungle-block > header span { color: rgba(7, 19, 63, 0.58); font-size: 0.75rem; font-weight: 850; }
.admin-jungle-live > header > b { color: #137c5b; font-weight: 950; white-space: nowrap; }

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

.admin-jungle-facts > div {
  display: grid;
  gap: 2px;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  padding: 8px 10px;
}

.admin-jungle-facts dt { color: rgba(7, 19, 63, 0.58); font-size: 0.7rem; font-weight: 900; text-transform: uppercase; }
.admin-jungle-facts dd { margin: 0; color: var(--ink); font-weight: 950; }

.admin-jungle-block { margin-top: 10px; }
.admin-jungle-block > header { margin-bottom: 7px; }
.admin-jungle-block .admin-table-wrap { background: #fff; }

.admin-jungle-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
}

.admin-jungle-person img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.admin-jungle-pending { color: rgba(7, 19, 63, 0.48); font-weight: 850; }
.admin-jungle-member-scores { display: flex; flex-wrap: wrap; gap: 4px; min-width: 210px; }
.admin-jungle-member-scores span,
.admin-jungle-tally span { border-radius: 999px; background: rgba(34, 148, 111, 0.1); padding: 3px 7px; color: var(--ink); font-size: 0.72rem; font-weight: 800; }
.admin-jungle-member-scores b,
.admin-jungle-tally b { color: #137c5b; font-weight: 950; }
.admin-jungle-tally { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 7px; }

.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.is-deranked { filter: grayscale(50%); opacity: 0.72; }
.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: #e99e9a; }
.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-funnel-head {
    display: grid;
    align-items: start;
  }

  .admin-funnel-controls {
    justify-items: stretch;
  }

  .admin-funnel-periods {
    width: 100%;
    box-sizing: border-box;
  }

  .admin-funnel-track {
    grid-template-columns: 1fr;
  }

  .admin-funnel-stage:not(:last-child) {
    border-right: 0;
    border-bottom: 2px solid rgba(7, 19, 63, 0.13);
  }

  .admin-funnel-stage:not(:last-child)::after {
    top: auto;
    right: 24px;
    bottom: -7px;
    transform: rotate(135deg);
  }

  .admin-funnel-stage p {
    min-height: 0;
  }

  .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; }
  .admin-jungle-schedule > header { display: grid; gap: 2px; }
  .admin-jungle-schedule-event { grid-template-columns: 11px minmax(0, 1fr); }
  .admin-jungle-schedule-event > b { grid-column: 2; text-align: left; }
  .admin-jungle-live > header,
  .admin-jungle-block > header { display: grid; gap: 2px; }
  .admin-jungle-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-game-detail-nav { justify-content: flex-start; }
  .admin-palais-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-palais-power-grid { grid-template-columns: 1fr; }
  .admin-spilled-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-spilled-power-grid,
  .admin-spilled-stat-fields { grid-template-columns: 1fr; }
  .admin-spilled-stat-card > footer { align-items: start; flex-direction: column; }
  .admin-spilled-stat-card > footer > div { justify-content: flex-start; }
  .admin-spilled-messaging-control { align-items: stretch; flex-direction: column; }
  .admin-spilled-state > header,
  .admin-spilled-block > header,
  .admin-spilled-challenge > header { align-items: start; }
  .admin-palais-state > header,
  .admin-palais-block > header,
  .admin-palais-competition > header { align-items: start; }
}

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

/* Levels inventory: compact cards with readable names and quiet state controls. */
.shop-detail[data-shop-slug="levels"] .shop-color-grid {
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 12px;
}

.shop-detail[data-shop-slug="levels"] .shop-color-grid > .shop-color-card {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 11px;
  min-height: 96px;
  padding: 11px 12px;
}

.shop-detail[data-shop-slug="levels"] .shop-color-grid > .shop-color-card > .shop-color-swatch {
  width: 64px;
  min-height: 72px;
  border-width: 3px;
  border-radius: 7px;
}

.shop-detail[data-shop-slug="levels"] .shop-color-grid > .shop-color-card > .shop-color-info {
  gap: 7px;
  padding: 2px 76px 2px 0;
}

.shop-detail[data-shop-slug="levels"] .shop-color-grid > .shop-color-card > .shop-color-info strong {
  overflow: visible;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.08;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: normal;
}

.shop-detail[data-shop-slug="levels"] .shop-color-stats {
  gap: 5px;
}

.shop-detail[data-shop-slug="levels"] .shop-color-stat {
  grid-template-columns: 18px minmax(0, auto);
  gap: 6px;
  min-height: 19px;
  font-size: 0.72rem;
}

.shop-detail[data-shop-slug="levels"] .shop-color-stat img {
  width: 17px;
  height: 17px;
}

.shop-detail[data-shop-slug="levels"] .shop-color-grid > .shop-color-card > .shop-buy-button {
  position: absolute;
  right: 11px;
  bottom: 11px;
  width: auto;
  min-width: 66px;
  min-height: 27px;
  border: 1px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 6px 9px;
}

.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="buy"],
.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="log-in"] {
  border-color: color-mix(in srgb, var(--pink) 55%, rgba(7, 19, 63, 0.12));
  background: var(--pink);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(154, 28, 84, 0.18);
}

.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="buy"]:hover,
.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="buy"]:focus-visible,
.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="log-in"]:hover,
.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="log-in"]:focus-visible {
  transform: translateY(-1px);
  outline: 0;
}

.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button:disabled {
  cursor: default;
  filter: none;
  opacity: 1;
}

.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="enabled"] {
  border-color: rgba(34, 161, 137, 0.26);
  background: rgba(99, 217, 202, 0.2);
  color: #147768;
}

.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="enabled"]::before {
  content: "✓";
  margin-right: 4px;
}

.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="locked"],
.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="need-fame"],
.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="need-fortune"],
.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="sold-out"],
.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-buy-button[data-level-state="limit-reached"] {
  border-color: rgba(83, 107, 145, 0.18);
  background: rgba(83, 107, 145, 0.08);
  color: rgba(7, 19, 63, 0.58);
}

.shop-detail[data-shop-slug="levels"] .shop-color-card > .shop-admin-sale-control {
  top: 8px;
  right: 8px;
}

.shop-detail[data-shop-slug="levels"] .shop-admin-sale-control summary {
  min-height: 23px;
  border: 0;
  border-radius: 999px;
  background: rgba(7, 19, 63, 0.06);
  box-shadow: none;
  color: rgba(7, 19, 63, 0.62);
  font-size: 0.64rem;
  padding: 5px 8px;
}

@media (max-width: 1080px) {
  .shop-detail[data-shop-slug="levels"] .shop-color-grid {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}

@media (max-width: 620px) {
  .shop-detail[data-shop-slug="levels"] .shop-color-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@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: "BSL";
  src: url("/assets/carryover/fonts/BSL.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  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;
}

@font-face {
  font-family: "Westerion";
  src: url("/assets/carryover/game-assets/gunsmoke-and-garters/Westerion.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Robicheaux";
  src: url("/assets/carryover/game-assets/robicheaux/Robicheaux.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;
}

/* Reusable show community page. The layout is shared across individual shows;
   show-specific color and artwork are selected with data-show-slug. */
.show-hub-page {
  --show-accent: #ee2857;
  --show-accent-dark: #8f0929;
  --show-accent-soft: #ffe4eb;
  --show-hero-image: url("/assets/carryover/Assets-By-Page/Big%20Brother/background.jpeg");
}

.show-hub-page[data-show-slug="survivor"] {
  --show-accent: #e9762f;
  --show-accent-dark: #5a2b16;
  --show-accent-soft: #fff0dd;
  --show-hero-image: url("/assets/carryover/Assets-By-Page/Survivor/background.png");
}

.show-hub-shell {
  width: min(1420px, calc(100% - 32px));
  margin: 8px auto 48px;
}

.show-hub-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: clamp(210px, 25vw, 330px);
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.92);
  border-radius: 22px;
  background-image:
    linear-gradient(90deg, rgba(20, 3, 11, 0.86) 0%, rgba(20, 3, 11, 0.34) 58%, rgba(20, 3, 11, 0.08) 100%),
    var(--show-hero-image);
  background-position: center;
  background-size: cover;
  box-shadow: 0 20px 46px rgba(7, 19, 63, 0.22);
  padding: clamp(24px, 4vw, 56px);
}

.show-hub-hero::after {
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 7px;
  background: linear-gradient(90deg, var(--show-accent), var(--yellow), var(--aqua));
  content: "";
}

.show-hub-hero-copy {
  max-width: 740px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
}

.show-identity-label,
.show-community-eyebrow {
  display: block;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.show-hub-hero h1 {
  margin: 0;
  font-family: "TAY Dumpling", "Barlow Semi Condensed", Arial, sans-serif;
  font-size: clamp(3.2rem, 8vw, 7.4rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.75;
}

.show-hub-layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 20px;
}

.show-hub-sidebar,
.show-community {
  min-width: 0;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 34px rgba(7, 19, 63, 0.13);
  -webkit-backdrop-filter: blur(10px) saturate(118%);
  backdrop-filter: blur(10px) saturate(118%);
}

.show-hub-sidebar {
  overflow: hidden;
}

.show-identity-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.09);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), var(--show-accent-soft));
  padding: 18px;
}

.show-identity-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 46px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.show-identity-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.show-identity-label {
  margin-bottom: 5px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.show-identity-card h2 {
  margin: 0;
  font: 900 1.38rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-page-moderator {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.09);
  background: rgba(255, 255, 255, 0.62);
  padding: 12px 15px;
}

.show-page-moderator-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 2px solid rgba(7, 19, 63, 0.18);
  background: var(--show-accent-soft);
  color: var(--show-accent-dark);
  font: 900 1rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-page-moderator > div:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.show-page-moderator span {
  color: var(--show-accent);
  font: 900 0.67rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.show-page-moderator strong {
  color: var(--ink);
  font: 900 0.9rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-sidebar-note {
  margin: 0 12px 12px;
  border: 1px solid rgba(7, 19, 63, 0.08);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(255, 216, 61, 0.19), rgba(255, 255, 255, 0.6));
  padding: 15px;
}

.show-cast-status,
.show-daily-rankings {
  border-top: 1px solid rgba(7, 19, 63, 0.09);
}

.show-sidebar-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 15px 10px;
}

.show-sidebar-section-heading span {
  color: var(--muted);
  font: 900 0.68rem/1.1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.show-sidebar-section-heading h3 {
  margin: 0;
  color: var(--ink);
  font: 900 1.08rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-cast-status {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 228, 235, 0.66)),
    #fff;
  padding-bottom: 12px;
}

.show-cast-status .show-sidebar-section-heading h3 {
  color: var(--ink);
}

.show-cast-status-grid {
  display: grid;
  gap: 7px;
  padding: 0 10px;
}

.show-cast-status-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 50px));
  justify-content: center;
  gap: 5px;
}

.show-cast-status-row.has-4 {
  grid-template-columns: repeat(4, minmax(0, 50px));
}

.show-cast-status-card {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.show-cast-status-photo {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 0;
  background: rgba(217, 227, 255, 0.5);
  box-shadow: 0 4px 9px rgba(7, 19, 63, 0.13);
  line-height: 0;
}

.show-cast-status-card.is-hoh .show-cast-status-photo { border-color: #53b3cb; }
.show-cast-status-card.is-nominated .show-cast-status-photo { border-color: #ef315f; }
.show-cast-status-card.is-veto .show-cast-status-photo { border-color: #f1cc2b; }
.show-cast-status-card.is-evicted .show-cast-status-photo { border-color: #6b7280; }
.show-cast-status-card.is-jury .show-cast-status-photo { border-color: #9a7047; }

.show-cast-status-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.035);
}

.show-cast-status-card.is-evicted img {
  filter: grayscale(1) brightness(0.63);
}

.show-cast-status-card.is-jury img {
  filter: sepia(1) saturate(0.88) brightness(0.8) contrast(1.02);
}

.show-cast-status-card > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 900 0.61rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.show-status-edit {
  position: absolute;
  z-index: 3;
  top: 9px;
  right: 10px;
  min-height: 28px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 999px;
  background: var(--show-accent);
  color: #fff;
  cursor: pointer;
  font: 900 0.72rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  opacity: 0;
  padding: 5px 10px;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateY(-3px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.show-cast-status:hover .show-status-edit,
.show-status-edit:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.show-status-editor {
  position: fixed;
  z-index: 250;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.show-status-editor[hidden] {
  display: none !important;
}

.show-status-editor-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(7, 19, 63, 0.54);
  cursor: default;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.show-status-editor-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(620px, calc(100vw - 28px));
  max-height: min(780px, calc(100dvh - 36px));
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, var(--show-accent-soft));
  box-shadow: 0 26px 70px rgba(7, 19, 63, 0.3);
  outline: none;
}

.show-status-editor-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  padding: 18px 20px;
}

.show-status-editor-dialog > header span {
  display: block;
  margin-bottom: 4px;
  color: var(--show-accent);
  font: 900 0.7rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.show-status-editor-dialog h2 {
  margin: 0;
  font: 900 1.65rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-status-editor-dialog > header > button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.4rem;
}

.show-status-editor-dialog form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-height: 0;
  overflow: hidden;
}

.show-status-editor-grid {
  display: grid;
  gap: 7px;
  overflow-y: auto;
  padding: 14px 16px;
}

.show-status-editor-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(280px, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.72);
  padding: 7px 9px;
}

.show-status-editor-row > span {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.show-status-editor-row img {
  display: block;
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 0;
  object-fit: cover;
  box-shadow: 0 3px 7px rgba(7, 19, 63, 0.12);
}

.show-status-editor-row strong {
  min-width: 0;
  overflow: hidden;
  font: 900 0.92rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.show-status-editor-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.show-status-editor-badges legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.show-status-editor-badges label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  border: 2px solid rgba(7, 19, 63, 0.13);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: 800 0.75rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 5px 7px;
}

.show-status-editor-badges label:has(input:checked) {
  border-color: var(--show-accent);
  background: var(--show-accent-soft);
}

.show-status-editor-badges input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--show-accent);
}

.show-status-editor-message {
  min-height: 16px;
  margin: 0;
  color: #b51c66;
  font: 800 0.82rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 0 18px;
}

.show-status-editor-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  padding: 13px 16px 16px;
}

.show-status-editor-dialog footer button {
  min-height: 39px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 999px;
  cursor: pointer;
  font: 900 0.9rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 8px 16px;
}

.show-status-editor-cancel {
  background: #fff;
  color: var(--muted);
}

.show-status-editor-save {
  background: var(--show-accent);
  color: #fff;
}

.show-status-editor-save:disabled {
  cursor: wait;
  opacity: 0.58;
}

body.is-show-status-editor-open {
  overflow: hidden;
}

@media (hover: none) {
  .show-status-edit {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

@media (max-width: 560px) {
  .show-status-editor-row {
    grid-template-columns: 1fr;
  }
}

.show-cast-status-badge {
  position: absolute;
  top: 1px;
  left: 1px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 0;
  background: #fff;
  color: #42000e;
  font: 900 0.58rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.show-cast-status-badge.is-slot-2 {
  top: auto;
  bottom: 1px;
}

.show-cast-status-badge.is-slot-3 {
  right: 1px;
  left: auto;
}

.show-cast-status-badge.is-hoh { background: #53b3cb; }
.show-cast-status-badge.is-nominated { background: #ef315f; color: #fff; }
.show-cast-status-badge.is-veto { background: #f1cc2b; }

.show-cast-status-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 10px;
  margin: 11px 0 0;
  padding: 0 10px;
}

.show-cast-status-key div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.show-cast-status-key dt {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 0;
  color: #260006;
  font: 900 0.54rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-cast-status-key dt.is-hoh { background: #53b3cb; }
.show-cast-status-key dt.is-nominated { background: #ef315f; color: #fff; }
.show-cast-status-key dt.is-veto { background: #f1cc2b; }
.show-cast-status-key dt.is-evicted { background: #6b7280; }
.show-cast-status-key dt.is-jury { background: #9a7047; }

.show-cast-status-key dd {
  margin: 0;
  color: var(--muted);
  font: 800 0.64rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-daily-rankings {
  background: rgba(255, 255, 255, 0.42);
  padding-bottom: 8px;
}

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

.show-daily-ranking-item {
  display: grid;
  grid-template-columns: 22px 39px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  border-top: 1px solid rgba(7, 19, 63, 0.07);
  padding: 5px 10px 5px 7px;
}

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

.show-daily-ranking-item:nth-child(-n + 3) > b {
  color: var(--show-accent);
}

.show-daily-ranking-item > b {
  color: var(--ink);
  font: 900 0.84rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-align: center;
}

.show-daily-ranking-item > img {
  display: block;
  width: 39px;
  height: 39px;
  border: 2px solid #fff;
  border-radius: 8px;
  background: var(--show-accent-soft);
  object-fit: cover;
  box-shadow: 0 3px 7px rgba(7, 19, 63, 0.13);
}

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

.show-daily-ranking-item.is-jury > img {
  filter: sepia(1) saturate(0.88) brightness(0.8) contrast(1.02);
}

.show-daily-ranking-item > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.show-daily-ranking-item > span strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font: 900 0.8rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.show-daily-ranking-item > span small {
  color: var(--muted);
  font: 800 0.65rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-ranking-score {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.show-ranking-score > strong {
  color: var(--ink);
  font: 900 0.76rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

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

.show-ranking-histogram i {
  display: block;
  width: 100%;
  min-height: 1px;
  height: max(1px, calc(var(--frequency) * 6px));
  border-radius: 2px 2px 0 0;
  background: var(--show-accent);
}

.show-ranking-scale {
  display: flex;
  justify-content: space-between;
  width: 70px;
  color: color-mix(in srgb, var(--muted) 70%, #fff);
  font: 800 0.52rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-sidebar-note h3 {
  margin: 0 0 5px;
  font: 900 1.03rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-sidebar-note p {
  margin: 0;
  color: var(--muted);
  font: 700 0.89rem/1.35 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-sidebar-note a {
  display: inline-block;
  margin-top: 10px;
  color: var(--show-accent-dark);
  font: 900 0.86rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-community {
  overflow: hidden;
}

.show-community-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(20px, 3vw, 30px);
}

.show-community-eyebrow {
  margin-bottom: 7px;
  color: var(--show-accent);
  letter-spacing: 0.08em;
}

.show-community-header h2 {
  margin: 0;
  font: 900 clamp(2rem, 4vw, 3.2rem)/0.9 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-community-header p {
  margin: 8px 0 0;
  color: var(--muted);
  font: 700 1rem/1.3 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-new-post,
.show-empty-state button,
.show-placeholder-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 2px solid rgba(7, 19, 63, 0.2);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--show-accent) 78%, #fff), var(--show-accent));
  color: #fff;
  cursor: pointer;
  font: 900 0.94rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 0 rgba(7, 19, 63, 0.18), 0 8px 16px rgba(7, 19, 63, 0.12);
  padding: 8px 17px;
}

.show-section-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
  background: rgba(217, 227, 255, 0.38);
  padding: 8px 12px 0;
  scrollbar-width: thin;
}

.show-section-tabs button {
  min-height: 46px;
  border: 0;
  border-bottom: 4px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 900 1rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 10px 16px 8px;
  white-space: nowrap;
}

.show-section-tabs button:hover,
.show-section-tabs button:focus-visible {
  color: var(--ink);
  outline: 0;
}

.show-section-tabs button.is-active {
  border-bottom-color: var(--show-accent);
  color: var(--ink);
}

.show-panel {
  min-height: 440px;
  background: rgba(255, 255, 255, 0.48);
}

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

.show-rankings-panel {
  min-width: 0;
  background: rgba(255, 255, 255, 0.72);
}

.show-rankings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.12);
  background: linear-gradient(90deg, rgba(255, 228, 235, 0.72), rgba(255, 255, 255, 0.74));
  padding: 18px 20px;
}

.show-rankings-header span,
.show-rankings-header time {
  color: var(--muted);
  font: 900 0.7rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.show-rankings-header h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font: 900 1.55rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

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

.show-rankings-toggle {
  min-height: 34px;
  margin-top: 5px;
  border: 2px solid var(--show-accent);
  border-radius: 0;
  background: #fff;
  color: var(--show-accent-dark);
  cursor: pointer;
  font: 900 0.76rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 7px 12px;
}

.show-rankings-form[hidden] {
  display: none !important;
}

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

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

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

.show-rankings-grid th,
.show-rankings-grid td {
  width: 54px;
  min-width: 54px;
  height: 38px;
  border: 0;
  border-right: 1px solid rgba(7, 19, 63, 0.055);
  border-bottom: 1px solid rgba(7, 19, 63, 0.055);
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.show-rankings-grid thead th {
  height: 75px;
  background: rgba(217, 227, 255, 0.48);
  vertical-align: bottom;
  padding: 6px 2px 7px;
}

.show-rankings-grid thead th:first-child,
.show-rankings-grid tbody th {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 50px;
  min-width: 50px;
  background: #fff8fd;
  color: var(--ink);
  font: 900 0.78rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-rankings-grid thead th:first-child {
  z-index: 4;
  padding-bottom: 11px;
}

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

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

.show-ranking-player {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
}

.show-ranking-player img {
  display: block;
  width: 46px;
  height: 43px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 0;
  object-fit: cover;
}

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

.show-ranking-player.is-jury img {
  filter: sepia(1) saturate(0.88) brightness(0.8) contrast(1.02);
}

.show-ranking-player strong {
  display: block;
  width: 50px;
  overflow: hidden;
  color: var(--ink);
  font: 900 0.54rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

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

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

.show-ranking-choice span {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
}

.show-ranking-choice input:checked + span {
  border-color: var(--show-accent);
  background: var(--show-accent);
  box-shadow: inset 0 0 0 5px #fff;
}

.show-ranking-choice input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--show-accent) 28%, transparent);
  outline-offset: 2px;
}

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

.show-rankings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  background: rgba(255, 248, 253, 0.76);
  padding: 14px 18px;
}

.show-rankings-footer > span {
  color: var(--muted);
  font: 800 0.82rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-rankings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.show-rankings-actions button {
  min-height: 38px;
  border: 2px solid var(--show-accent);
  border-radius: 0;
  background: var(--show-accent);
  color: #fff;
  cursor: pointer;
  font: 900 0.86rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 8px 15px;
}

.show-rankings-actions .show-rankings-secondary-button {
  border-color: rgba(7, 19, 63, 0.18);
  background: #fff;
  color: var(--ink);
}

.show-rankings-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.show-rankings-message {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font: 800 0.78rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 0 18px 10px;
  text-align: right;
}

.show-rankings-results {
  border-top: 5px solid rgba(217, 227, 255, 0.72);
  background: rgba(255, 255, 255, 0.58);
  padding-top: 13px;
}

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

.show-rankings-results > header h3 {
  margin: 0;
  color: var(--ink);
  font: 900 1.15rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-rankings-results > header span {
  color: var(--muted);
  font: 900 0.68rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.show-rankings-results-grid th,
.show-rankings-results-grid td {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border: 0;
  border-right: 1px solid rgba(7, 19, 63, 0.055);
  border-bottom: 1px solid rgba(7, 19, 63, 0.07);
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.show-rankings-results-grid thead th {
  height: 32px;
  background: rgba(217, 227, 255, 0.52);
  color: var(--ink);
  font: 900 0.82rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-rankings-results-grid thead th:first-child,
.show-rankings-results-grid tbody th {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 50px;
  min-width: 50px;
  background: #fff8fd;
  color: var(--ink);
  font: 900 0.75rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-rankings-results-grid thead th:first-child {
  z-index: 4;
}

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

.show-ranking-result-player {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
}

.show-ranking-result-player > img {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid rgba(7, 19, 63, 0.15);
  border-radius: 0;
  object-fit: cover;
}

.show-ranking-result-player > strong {
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  display: block;
  overflow: hidden;
  padding: 3px 2px;
  background: rgba(0, 0, 0, 0.86);
  color: #fff;
  font: 900 0.46rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.015em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.show-ranking-result-player.is-jury > img {
  filter: sepia(1) saturate(0.88) brightness(0.8) contrast(1.02);
}

.show-rankings-results-empty {
  margin: 0;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  color: var(--muted);
  font: 800 0.86rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 18px;
  text-align: center;
}

.discussion-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.08);
  padding: 12px 16px;
}

.discussion-filters {
  display: flex;
  gap: 5px;
}

.discussion-search-control {
  margin-left: auto;
}

.discussion-search-control label {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 34px;
  align-items: center;
  border: 2px solid rgba(7, 19, 63, 0.16);
  background: #fff;
}

.discussion-search-control label[hidden] {
  display: none !important;
}

.discussion-search-control label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.discussion-search-control input {
  width: 100%;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 800 0.9rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  outline: 0;
  padding: 7px 10px;
}

.discussion-search-control label > button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.15rem;
}

.discussion-filters button,
.discussion-search {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 800 0.9rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 8px 11px;
}

.discussion-filters button:hover,
.discussion-filters button:focus-visible,
.discussion-search:hover,
.discussion-search:focus-visible {
  border-color: rgba(7, 19, 63, 0.1);
  background: #fff;
  color: var(--ink);
  outline: 0;
}

.discussion-filters button.is-active {
  background: var(--ink);
  color: #fff;
}

.show-topic-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.show-topic-search-empty {
  margin: 0;
  color: var(--muted);
  font: 800 0.9rem/1.25 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 34px 18px;
  text-align: center;
}

.show-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.09);
  padding: 17px 18px;
  transition: background 150ms ease;
}

.show-topic:hover {
  background: rgba(255, 255, 255, 0.64);
}

.show-topic.is-pinned {
  background: linear-gradient(90deg, color-mix(in srgb, var(--show-accent-soft) 70%, #fff), rgba(255, 255, 255, 0.42));
  box-shadow: inset 4px 0 0 var(--show-accent);
}

.topic-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 13px;
  color: var(--ink);
  font: 900 1.18rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  box-shadow: 0 4px 10px rgba(7, 19, 63, 0.13);
}

.topic-avatar-pink { background: #ff97c6; }
.topic-avatar-aqua { background: #63d9ca; }
.topic-avatar-yellow { background: #ffd83d; }
.topic-avatar-blue { background: #a8c0ff; }
.topic-avatar-orange { background: #ff9a68; }
.topic-avatar-green { background: #8cdda8; }
.topic-avatar-purple { background: #c2a2ff; }
.topic-avatar-red { background: #ff8c9a; }

.show-topic article {
  min-width: 0;
}

.topic-flags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 5px;
  color: var(--muted);
  font: 800 0.72rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-transform: uppercase;
}

.topic-badge {
  border-radius: 999px;
  background: var(--show-accent);
  color: #fff;
  padding: 5px 7px;
}

.topic-badge.is-live { background: #148678; }
.topic-badge.is-episode { background: #7354c6; }
.topic-badge.is-cast { background: #315fbf; }
.topic-badge.is-strategy { background: #d85b2a; }
.topic-badge.is-alliance { background: #267f4a; }
.topic-badge.is-question { background: #7252b8; }
.topic-badge.is-off-topic { background: #b33b57; }
.topic-badge.is-custom { background: var(--thread-tag-color, #315fbf); }

.show-topic h3 {
  margin: 0;
  font: 900 1.08rem/1.16 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-topic h3 a {
  color: var(--ink);
  text-decoration: none;
}

.show-topic h3 a:hover,
.show-topic h3 a:focus-visible {
  color: var(--show-accent-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.show-topic article > p {
  margin: 5px 0 0;
  color: var(--muted);
  font: 700 0.91rem/1.28 "Barlow Semi Condensed", Arial, sans-serif;
}

.topic-byline {
  margin-top: 8px;
  color: color-mix(in srgb, var(--muted) 82%, #fff);
  font: 700 0.78rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
}

.topic-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(54px, 1fr));
  gap: 7px;
  margin: 0;
}

.topic-stats div {
  text-align: center;
}

.topic-stats dt {
  color: var(--ink);
  font: 900 1rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.topic-stats dd {
  margin: 4px 0 0;
  color: var(--muted);
  font: 700 0.7rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-transform: uppercase;
}

.show-pagination {
  display: flex;
  gap: 6px;
  padding: 16px 18px 20px;
}

.show-pagination button {
  min-width: 36px;
  height: 36px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font: 900 0.86rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 0 11px;
}

.show-pagination button.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.show-thread-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.12);
  background: linear-gradient(90deg, rgba(255, 228, 235, 0.76), rgba(255, 255, 255, 0.82));
  padding: 20px 22px;
}

.show-thread-heading > a {
  color: var(--show-accent-dark);
  font: 900 0.9rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;
}

.show-thread-heading > div {
  min-width: 0;
}

.show-thread-heading > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--show-accent);
  font: 900 0.7rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.show-thread-heading > div > .show-thread-heading-tag {
  display: inline-block;
  width: fit-content;
  margin-bottom: 8px;
  background: var(--thread-tag-color, var(--show-accent));
  color: #fff;
  padding: 5px 8px;
}

.show-thread-heading h2 {
  margin: 0;
  color: var(--ink);
  font: 900 clamp(1.6rem, 3vw, 2.25rem)/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-thread-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font: 700 0.82rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-thread-heading-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.show-thread-heading-actions button {
  min-height: 38px;
  border: 2px solid var(--show-accent);
  border-radius: 0;
  background: var(--show-accent);
  color: #fff;
  cursor: pointer;
  font: 900 0.86rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 8px 16px;
}

.show-thread-post-list {
  display: grid;
  gap: 12px;
  background: rgba(217, 227, 255, 0.5);
  padding: 12px;
}

.show-thread-post {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 310px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.92);
}

.show-thread-post.is-original {
  border-color: var(--show-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--show-accent) 16%, transparent);
}

.show-thread-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid rgba(7, 19, 63, 0.13);
  background: rgba(255, 248, 253, 0.82);
  padding: 22px 16px;
  text-align: center;
}

.show-thread-author-avatar {
  display: block;
  width: 124px;
  height: 168px;
  border: 3px solid rgba(7, 19, 63, 0.15);
  border-radius: 0;
  background: var(--show-accent-soft);
  overflow: hidden;
}

.show-thread-author-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.show-thread-author-identity {
  display: grid;
  gap: 4px;
  margin-top: 14px;
}

.show-thread-author-identity a {
  color: var(--ink);
  font: 900 1.06rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-decoration: none;
}

.show-thread-author-identity span {
  color: var(--show-accent);
  font: 800 0.76rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-transform: uppercase;
}

.show-thread-author-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  margin: 24px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
}

.show-thread-author-stats div {
  display: grid;
  gap: 4px;
}

.show-thread-author-stats dt {
  color: var(--muted);
  font: 800 0.66rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-transform: uppercase;
}

.show-thread-author-stats dd {
  margin: 0;
  color: var(--ink);
  font: 900 0.9rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-thread-post-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  padding: 20px 24px 16px;
}

.show-thread-post-body > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.show-thread-post-body time {
  color: var(--muted);
  font: 700 0.82rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-thread-post-body > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.show-thread-moderator-badge {
  background: var(--show-accent);
  color: #fff;
  font: 900 0.68rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.04em;
  padding: 6px 9px;
  text-transform: uppercase;
}

.show-thread-post-body > header button {
  width: 34px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 900 1rem/1 Arial, sans-serif;
}

.show-thread-post-copy {
  color: #31456f;
  font: 700 1rem/1.55 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 24px 0;
}

.show-thread-post-copy p {
  margin: 0 0 1.2em;
}

.show-thread-post-copy blockquote {
  margin: 0 0 20px;
  border-left: 5px solid rgba(7, 19, 63, 0.14);
  background: rgba(217, 227, 255, 0.3);
  padding: 16px 18px;
}

.show-thread-post-copy blockquote strong {
  display: block;
  margin-bottom: 9px;
  color: var(--ink);
  font-size: 0.9rem;
}

.show-thread-post-copy blockquote p {
  margin: 0;
}

.show-thread-inline-image {
  display: block;
  width: auto;
  max-width: min(100%, 760px);
  max-height: 680px;
  margin: 14px 0;
  border: 2px solid rgba(7, 19, 63, 0.14);
  object-fit: contain;
}

.show-thread-post-copy details,
.show-full-reply-preview details {
  margin: 12px 0;
  border: 2px solid rgba(7, 19, 63, 0.12);
  background: rgba(217, 227, 255, 0.25);
  padding: 10px 12px;
}

.show-thread-post-copy summary,
.show-full-reply-preview summary {
  color: var(--show-accent-dark);
  cursor: pointer;
  font-weight: 900;
}

.show-thread-post-copy pre,
.show-full-reply-preview pre {
  max-width: 100%;
  overflow-x: auto;
  background: #07133f;
  color: #fff;
  padding: 13px;
}

.show-thread-post-copy .is-centered,
.show-full-reply-preview .is-centered {
  text-align: center;
}

.show-thread-post-copy .is-right-aligned,
.show-full-reply-preview .is-right-aligned {
  text-align: right;
}

.show-thread-post-body > footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  padding-top: 12px;
}

.show-thread-post-body > footer button,
.show-thread-post-body > footer a {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 900 0.75rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 5px 7px;
  text-decoration: none;
}

.show-thread-post-body > footer button:hover,
.show-thread-post-body > footer button:focus-visible,
.show-thread-post-body > footer a:hover,
.show-thread-post-body > footer a:focus-visible {
  color: var(--show-accent-dark);
  outline: 0;
  text-decoration: underline;
}

.show-thread-pagination {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.72);
  padding: 16px 18px 20px;
}

.show-thread-pagination button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 900 0.82rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-thread-pagination button.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.show-thread-reply {
  border-top: 5px solid rgba(217, 227, 255, 0.72);
  background: rgba(255, 248, 253, 0.9);
  padding: 20px 22px 24px;
}

.show-thread-reply > header {
  margin-bottom: 12px;
}

.show-thread-reply h3 {
  margin: 0;
  color: var(--ink);
  font: 900 1.25rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-thread-reply form {
  display: grid;
  gap: 0;
}

.show-thread-reply label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.show-thread-reply textarea {
  display: block;
  width: 100%;
  min-height: 116px;
  resize: vertical;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 700 1rem/1.5 "Barlow Semi Condensed", Arial, sans-serif;
  outline: 0;
  padding: 15px 16px;
}

.show-thread-reply textarea:focus {
  border-color: var(--show-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--show-accent) 16%, transparent);
}

.show-thread-reply textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 68%, #fff);
}

.show-thread-reply footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 10px;
}

.show-thread-reply footer > span {
  flex: 1 1 auto;
}

.show-thread-reply footer button {
  min-height: 38px;
  border: 2px solid rgba(7, 19, 63, 0.17);
  border-radius: 0;
  cursor: pointer;
  font: 900 0.86rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 8px 16px;
}

.show-thread-reply-cancel {
  background: #fff;
  color: var(--muted);
}

.show-thread-full-reply-button {
  background: #fff;
  color: var(--show-accent-dark);
}

.show-thread-reply-submit {
  border-color: var(--show-accent) !important;
  background: var(--show-accent);
  color: #fff;
}

.show-full-reply-editor {
  position: fixed;
  z-index: 280;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.show-full-reply-editor[hidden] {
  display: none !important;
}

.show-full-reply-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(7, 19, 63, 0.62);
  cursor: default;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.show-full-reply-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(940px, calc(100vw - 28px));
  max-height: min(880px, calc(100dvh - 36px));
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 0;
  background: #fff8fd;
  box-shadow: 0 28px 80px rgba(7, 19, 63, 0.34);
  outline: 0;
}

.show-full-reply-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(7, 19, 63, 0.12);
  background: linear-gradient(90deg, var(--show-accent-soft), #fff);
  padding: 17px 20px;
}

.show-full-reply-dialog > header span {
  display: block;
  margin-bottom: 4px;
  color: var(--show-accent);
  font: 900 0.68rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.show-full-reply-dialog h2 {
  margin: 0;
  color: var(--ink);
  font: 900 1.65rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-full-reply-dialog > header > button {
  width: 38px;
  height: 38px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.35rem;
}

.show-full-reply-dialog > form {
  display: block;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 18px;
}

.show-full-reply-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
  border: 1px solid rgba(7, 19, 63, 0.12);
  background: rgba(217, 227, 255, 0.34);
  padding: 7px;
}

.show-full-reply-toolbar button {
  min-width: 34px;
  min-height: 34px;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: 850 0.78rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 6px 9px;
}

.show-full-reply-toolbar button:hover,
.show-full-reply-toolbar button:focus-visible {
  border-color: var(--show-accent);
  color: var(--show-accent-dark);
  outline: 0;
}

.show-full-reply-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font: 900 0.8rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 0;
}

.show-full-reply-dialog textarea {
  display: block;
  width: 100%;
  min-height: 280px;
  resize: vertical;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 700 1rem/1.5 "Barlow Semi Condensed", Arial, sans-serif;
  outline: 0;
  padding: 15px 16px;
}

.show-new-thread-title-input {
  width: 100%;
  min-height: 46px;
  margin-bottom: 12px;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 900 1.05rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  outline: 0;
  padding: 10px 12px;
}

.show-new-thread-title-input:focus {
  border-color: var(--show-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--show-accent) 16%, transparent);
}

.show-new-thread-tag-fields {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}

.show-new-thread-tag-fields label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font: 900 0.78rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-new-thread-tag-fields input[type="text"],
.show-new-thread-tag-fields input:not([type]) {
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 850 0.95rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  outline: 0;
  padding: 8px 10px;
}

.show-new-thread-tag-fields input[type="text"]:focus,
.show-new-thread-tag-fields input:not([type]):focus {
  border-color: var(--show-accent);
}

.show-new-thread-tag-fields input[type="color"] {
  width: 64px;
  height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  padding: 3px;
}

.show-new-thread-message {
  min-height: 18px;
  margin: 8px 0 0;
  color: #b51c66;
  font: 800 0.78rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-full-reply-dialog textarea:focus {
  border-color: var(--show-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--show-accent) 16%, transparent);
}

.show-full-reply-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font: 800 0.74rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 8px 1px 10px;
}

.show-full-reply-meta output {
  color: var(--ink);
  white-space: nowrap;
}

.show-full-reply-preview {
  margin-top: 4px;
  border: 2px solid rgba(7, 19, 63, 0.12);
  background: #fff;
  padding: 14px 16px;
}

.show-full-reply-preview[hidden] {
  display: none;
}

.show-full-reply-preview h3 {
  margin: 0 0 12px;
  color: var(--show-accent);
  font: 900 0.72rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.show-full-reply-preview > div {
  color: #31456f;
  font: 700 1rem/1.5 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-full-reply-dialog form > footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid rgba(7, 19, 63, 0.08);
  margin-top: 12px;
  padding-top: 12px;
}

.show-full-reply-dialog form > footer button {
  min-height: 40px;
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 0;
  cursor: pointer;
  font: 900 0.88rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 8px 17px;
}

.show-full-reply-cancel {
  background: #fff;
  color: var(--muted);
}

.show-full-reply-submit {
  border-color: var(--show-accent) !important;
  background: var(--show-accent);
  color: #fff;
}

body.is-show-full-reply-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .show-thread-heading {
    grid-template-columns: 1fr auto;
  }

  .show-thread-heading > a {
    grid-column: 1 / -1;
  }

  .show-thread-post {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .show-thread-author {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(7, 19, 63, 0.13);
    padding: 12px;
    text-align: left;
  }

  .show-thread-author-avatar {
    width: 62px;
    height: 84px;
  }

  .show-thread-author-identity {
    margin: 0;
  }

  .show-thread-author-stats {
    width: auto;
    margin: 0;
    padding: 0 0 0 12px;
    border-top: 0;
    border-left: 1px solid rgba(7, 19, 63, 0.1);
  }

  .show-thread-post-body {
    min-height: 260px;
    padding: 16px;
  }

  .show-thread-reply {
    padding: 16px;
  }

  .show-thread-heading-actions {
    align-self: start;
    flex-direction: column;
  }

  .show-thread-heading-actions button {
    width: 100%;
  }

  .show-thread-reply footer {
    flex-wrap: wrap;
  }

  .show-thread-reply footer > span {
    display: none;
  }

  .show-thread-full-reply-button {
    margin-right: auto;
  }

  .show-full-reply-editor {
    padding: 8px;
  }

  .show-full-reply-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .show-full-reply-dialog > form {
    padding: 12px;
  }

  .show-full-reply-dialog textarea {
    min-height: 230px;
  }

  .show-full-reply-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .show-new-thread-tag-fields {
    grid-template-columns: minmax(0, 1fr) 64px;
  }
}

.show-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}

.show-placeholder-card {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  align-items: flex-start;
  border: 2px solid rgba(7, 19, 63, 0.08);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, var(--show-accent-soft));
  padding: 20px;
  box-shadow: 0 8px 18px rgba(7, 19, 63, 0.08);
}

.show-placeholder-card > span {
  color: var(--show-accent);
  font: 900 0.75rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.show-placeholder-card h3 {
  margin: 14px 0 8px;
  font: 900 1.45rem/1.05 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-placeholder-card p {
  margin: 0 0 22px;
  color: var(--muted);
  font: 700 0.94rem/1.35 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-placeholder-card button {
  margin-top: auto;
}

.show-poll-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}

.show-poll-card {
  border: 2px solid rgba(7, 19, 63, 0.11);
  border-radius: 14px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 8px 18px rgba(7, 19, 63, 0.06);
}

.show-poll-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.show-poll-card > header span {
  color: var(--show-accent);
  font: 900 0.74rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.show-poll-card > header time,
.show-poll-card > p,
.show-poll-card form > footer,
.show-poll-card output {
  color: var(--muted);
  font: 750 0.78rem/1.25 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-poll-card h3 {
  margin: 14px 0 18px;
  color: var(--ink);
  font: 900 1.4rem/1.08 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-poll-card > p {
  margin: 0 0 16px;
}

.show-poll-card > p strong {
  color: var(--show-accent-dark);
}

.show-poll-card fieldset {
  display: grid;
  gap: 7px;
  margin: 0;
  border: 0;
  padding: 0;
}

.show-poll-card legend.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.show-poll-vote-option {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.14);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: 850 0.95rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-poll-vote-option:hover,
.show-poll-vote-option:focus-within {
  border-color: var(--poll-color);
  background: color-mix(in srgb, var(--poll-color) 8%, #fff);
}

.show-poll-vote-option:has(input:checked) {
  border-color: var(--poll-color);
  box-shadow: inset 0 0 0 2px var(--poll-color);
}

.show-poll-vote-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.show-poll-vote-letter {
  display: grid;
  align-self: stretch;
  place-items: center;
  margin-right: 13px;
  background: var(--poll-color);
  color: #fff;
  font: 900 1.05rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-poll-results {
  display: grid;
  gap: 9px;
}

.show-poll-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
}

.show-poll-result-bar {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  min-height: 46px;
  overflow: hidden;
  border: 2px solid var(--poll-color);
  border-radius: 10px;
  background: color-mix(in srgb, var(--poll-color) 9%, #f7f8fc);
  box-shadow: 0 2px 0 rgba(7, 19, 63, 0.14);
}

.show-poll-result-body {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-self: stretch;
  align-items: center;
  overflow: hidden;
  background: #f3f2f6;
  padding-right: 17px;
}

.show-poll-result-fill {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: var(--poll-percent, 0%);
  background: color-mix(in srgb, var(--poll-color) 23%, #fff);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.show-poll-result-row.is-full .show-poll-result-fill {
  clip-path: none;
}

.show-poll-result-letter {
  position: relative;
  z-index: 2;
  display: grid;
  align-self: stretch;
  place-items: center;
  width: 54px;
  background: var(--poll-color);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  font: 900 1rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-poll-result-label {
  position: relative;
  padding: 0 11px 0 24px;
  color: var(--ink);
  font: 900 0.9rem/1.15 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-poll-result-check {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--poll-color);
  color: #fff;
  font: 900 0.8rem/1 Arial, sans-serif;
  box-shadow: 0 2px 5px rgba(7, 19, 63, 0.2);
}

.show-poll-result-row > strong {
  color: var(--poll-color);
  font: 900 1.05rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  text-align: right;
}

.show-poll-results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  color: var(--muted);
  font: 800 0.78rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-poll-results-footer strong {
  color: var(--show-accent-dark);
}

.show-poll-card form > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.show-poll-card form > footer button,
.show-poll-builder > button {
  min-height: 38px;
  border: 2px solid var(--show-accent);
  border-radius: 0;
  background: var(--show-accent);
  color: #fff;
  cursor: pointer;
  font: 900 0.86rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 8px 15px;
}

.show-poll-card form > footer button:disabled,
.show-poll-builder > button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.show-poll-card output {
  display: block;
  min-height: 16px;
  margin-top: 7px;
  color: #b51c66;
  text-align: right;
}

.show-polls-empty {
  margin: 0;
  color: var(--muted);
  font: 850 1rem/1.3 "Barlow Semi Condensed", Arial, sans-serif;
  padding: 54px 20px;
  text-align: center;
}

.show-poll-builder {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 0;
  padding: 0;
}

.show-poll-builder legend {
  margin-bottom: 8px;
  color: var(--ink);
  font: 900 0.8rem/1.2 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-poll-builder > div {
  display: grid;
  gap: 8px;
}

.show-poll-builder-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 7px;
}

.show-poll-builder-choice input {
  min-height: 42px;
  border: 2px solid rgba(7, 19, 63, 0.18);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 800 0.95rem/1 "Barlow Semi Condensed", Arial, sans-serif;
  outline: 0;
  padding: 8px 10px;
}

.show-poll-builder-choice input:focus {
  border-color: var(--show-accent);
}

.show-poll-builder-choice button {
  border: 2px solid rgba(7, 19, 63, 0.16);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: 900 1.1rem/1 Arial, sans-serif;
}

.show-poll-builder > button {
  justify-self: start;
  border-color: rgba(7, 19, 63, 0.18);
  background: #fff;
  color: var(--show-accent-dark);
}

@media (max-width: 760px) {
  .show-poll-list {
    grid-template-columns: 1fr;
    padding: 14px;
  }
}

.show-empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 440px;
  padding: 36px;
  text-align: center;
}

.show-empty-state > span {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  background: var(--show-accent-soft);
  color: var(--show-accent);
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(7, 19, 63, 0.1);
}

.show-empty-state h3 {
  margin: 18px 0 6px;
  font: 900 2rem/1 "Barlow Semi Condensed", Arial, sans-serif;
}

.show-empty-state p {
  max-width: 480px;
  margin: 0 0 20px;
  color: var(--muted);
  font: 700 1rem/1.4 "Barlow Semi Condensed", Arial, sans-serif;
}

@media (max-width: 900px) {
  .show-hub-layout {
    grid-template-columns: 1fr;
  }

  .show-hub-sidebar {
    position: static;
  }

  .show-sidebar-note {
    display: none;
  }

  .show-placeholder-grid {
    grid-template-columns: 1fr;
  }

  .show-placeholder-card {
    min-height: 190px;
  }
}

@media (max-width: 680px) {
  .bank-limit-fields,
  .bank-order-options { grid-template-columns: minmax(0,1fr); }
  .show-hub-shell {
    width: min(100% - 18px, 1420px);
    margin-top: 0;
  }

  .show-hub-hero {
    min-height: 220px;
    border-radius: 16px;
    padding: 24px 20px 28px;
  }

  .show-hub-layout {
    gap: 12px;
    margin-top: 12px;
  }

  .show-community-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .show-topic {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 15px 13px;
  }

  .topic-avatar {
    width: 38px;
    height: 38px;
  }

  .topic-stats {
    display: none;
  }

  .discussion-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .discussion-search-control {
    width: 100%;
    margin-left: 0;
  }

  .discussion-search-control > .discussion-search {
    width: 100%;
  }

  .discussion-search-control label {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .discussion-filters {
    overflow-x: auto;
  }

  .discussion-search {
    align-self: flex-start;
  }
}

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: -10px 0 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;
}

.dbd-ready-check-overlay.is-gunsmoke {
  background: rgba(20, 11, 7, 0.86);
  backdrop-filter: blur(7px) sepia(0.16);
}

.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-card {
  border-color: rgba(199, 146, 78, 0.92);
  background:
    radial-gradient(circle at 50% 0%, rgba(160, 60, 51, 0.27), transparent 50%),
    linear-gradient(180deg, #352015, #140c08);
  color: #fff0cf;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 224, 171, 0.12);
}

.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-eyebrow {
  color: #dca257;
}

.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-title,
.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-countdown {
  color: #fff0cf;
  font-family: "Westerion", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: 0.025em;
}

.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-copy,
.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-progress {
  color: rgba(255, 232, 190, 0.82);
}

.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-countdown {
  color: #d98c42;
}

.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-button {
  border-color: #d5a15d;
  background: linear-gradient(180deg, #b64b40, #7d2923);
  color: #fff0cf;
  font-family: "Westerion", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: 0.035em;
  box-shadow: 0 8px 0 #461712, 0 16px 30px rgba(0, 0, 0, 0.4);
}

.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-button:hover,
.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-button:focus-visible {
  border-color: #efc47e;
  background: linear-gradient(180deg, #c65a4d, #8c3028);
}

.dbd-ready-check-overlay.is-gunsmoke .dbd-ready-check-button:disabled {
  border-color: rgba(211, 160, 93, 0.4);
  background: #3b2a20;
  color: rgba(255, 232, 190, 0.68);
  box-shadow: 0 5px 0 #17100b;
}

.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-first-dead {
  margin-top: 12px;
}

.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-gng-game-view {
  --dbd-red: #d99a3d;
  --dbd-cream: #fff1d2;
  --dbd-muted: #c9a36a;
  --dbd-panel: rgba(35, 22, 13, 0.9);
  --dbd-line: rgba(255, 225, 174, 0.25);
  --dbd-panel-strong: rgba(34, 21, 12, 0.94);
  --dbd-panel-soft: rgba(63, 39, 21, 0.88);
  --dbd-border: rgba(185, 130, 66, 0.62);
  --dbd-border-hot: rgba(224, 157, 60, 0.9);
  background:
    linear-gradient(180deg, rgba(24, 13, 7, 0.34), rgba(24, 13, 7, 0.84)),
    url("/assets/carryover/game-assets/gunsmoke-and-garters/background.png") center center / cover fixed no-repeat,
    #20140c;
}

body.is-gng-game-view .game-title-logo {
  width: min(410px, 48vw);
  max-height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}

.gng-role-lineup {
  display: none;
}

body.is-gng-game-view .gng-role-lineup:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.62vw, 10px);
  width: max-content;
  max-width: calc(100% - 24px);
  margin: -11px auto 17px;
  border: 1px solid rgba(198, 142, 73, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 229, 177, 0.07), rgba(255, 229, 177, 0.01)),
    rgba(27, 16, 10, 0.78);
  padding: 6px 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 188, 0.08),
    0 5px 14px rgba(0, 0, 0, 0.24);
}

body.is-gng-game-view .gng-role-lineup-slot {
  position: relative;
  display: grid;
  width: clamp(29px, 2.5vw, 39px);
  height: clamp(29px, 2.5vw, 39px);
  place-items: center;
}

body.is-gng-game-view .gng-role-lineup-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 3px rgba(224, 157, 60, 0.52))
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.72));
  transition: filter 180ms ease, opacity 180ms ease;
}

body.is-gng-game-view .gng-role-lineup-slot.is-eliminated .gng-role-lineup-icon {
  opacity: 0.24;
  filter: grayscale(1) contrast(0.72) brightness(0.7);
}

body.is-gng-game-view .gng-role-lineup-slot.is-eliminated::after {
  content: "×";
  position: absolute;
  inset: 50% auto auto 50%;
  color: #b94b3e;
  font-family: "Westerion", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  line-height: 1;
  text-shadow: 0 2px 2px rgba(10, 5, 3, 0.94);
  transform: translate(-50%, -54%);
}

body.is-gng-game-view .gng-role-lineup-vs {
  margin: 0 3px;
  color: #e2a34c;
  font-family: "Westerion", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.22rem, 1.8vw, 1.7rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(12, 6, 3, 0.9);
}

@media (max-width: 640px) {
  body.is-gng-game-view .gng-role-lineup:not([hidden]) {
    gap: 3px;
    margin-top: -4px;
    padding: 5px 9px;
  }

  body.is-gng-game-view .gng-role-lineup-slot {
    width: 28px;
    height: 28px;
  }
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 0.52vw, 8px);
  width: max-content;
  max-width: calc(100% - 24px);
  margin: -10px auto 18px;
  border: 1px solid rgba(255, 10, 69, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.055), transparent),
    rgba(18, 12, 13, 0.84);
  padding: 6px 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 230, 0.07),
    0 5px 16px rgba(0, 0, 0, 0.28);
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup .gng-role-lineup-slot {
  position: relative;
  display: grid;
  width: clamp(27px, 2.35vw, 37px);
  height: clamp(27px, 2.35vw, 37px);
  place-items: center;
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup .gng-role-lineup-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 3px rgba(255, 10, 69, 0.44))
    drop-shadow(0 2px 1px rgba(0, 0, 0, 0.76));
  transition: filter 180ms ease, opacity 180ms ease;
  transform-origin: center;
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup [data-role="camper"] .gng-role-lineup-icon {
  transform: scale(0.88);
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup [data-role="cop"] .gng-role-lineup-icon {
  transform: scale(0.96);
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup [data-role="psychic"] .gng-role-lineup-icon {
  transform: scale(1.02);
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup [data-role="tabloid-reporter"] .gng-role-lineup-icon {
  transform: scale(0.97);
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup [data-role="slasher"] .gng-role-lineup-icon {
  transform: scale(1.08);
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup .gng-role-lineup-slot.is-eliminated .gng-role-lineup-icon {
  opacity: 0.2;
  filter: grayscale(1) contrast(0.7) brightness(0.62);
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup .gng-role-lineup-slot.is-eliminated::after {
  content: "×";
  position: absolute;
  inset: 50% auto auto 50%;
  color: #ff0a45;
  font-family: "You Are Scared", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.75rem, 2.5vw, 2.3rem);
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
  transform: translate(-50%, -53%);
}

body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup .gng-role-lineup-vs {
  margin: 0 4px;
  color: #ff0a45;
  font-family: "You Are Scared", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: clamp(1.18rem, 1.72vw, 1.62rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.92);
}

@media (max-width: 640px) {
  body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup:not([hidden]) {
    gap: 2px;
    max-width: calc(100% - 12px);
    margin-top: -3px;
    padding: 5px 7px;
  }

  body.is-dbd-game-view:not(.is-gng-game-view) .gng-role-lineup.is-dbd-lineup .gng-role-lineup-slot {
    width: 25px;
    height: 25px;
  }
}

body.is-gng-game-view .panel {
  border-color: rgba(198, 142, 73, 0.54);
  background:
    linear-gradient(180deg, rgba(255, 232, 187, 0.08), rgba(255, 232, 187, 0.01)),
    rgba(38, 23, 13, 0.94);
}

body.is-gng-game-view .role-icon.is-revealed,
body.is-gng-game-view .role-icon.is-user-marked {
  object-fit: cover;
  object-position: center 28%;
}

body.is-gng-game-view .gng-action-field + .gng-action-field {
  margin-top: 12px;
}

body.is-gng-game-view .gng-action-field > .night-action-menu {
  position: static;
  width: min(100%, 260px);
  margin-top: 7px;
  max-height: 190px;
}

body.is-gng-game-view .gng-action-field .night-action-control::after {
  top: 18px;
}

body.is-dbd-game-view.is-gng-game-view .target-grid.has-night-action-dropdown {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 6px 18px 0;
}

body.is-dbd-game-view.is-gng-game-view .gng-action-field {
  position: relative;
  z-index: 1;
}

body.is-dbd-game-view.is-gng-game-view .gng-action-field:has(.night-action-menu:not([hidden])) {
  z-index: 3;
}

body.is-dbd-game-view.is-gng-game-view .gng-action-field .night-action-control {
  display: grid;
  width: min(100%, 260px);
  height: auto;
  align-content: start;
}

body.is-dbd-game-view.is-gng-game-view .gng-action-field > .night-action-menu {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  width: min(100%, 260px);
  margin-top: 7px;
}

body.is-dbd-game-view .night-faction-vote-log {
  margin-top: 18px;
}

body.is-dbd-game-view .night-faction-vote-row {
  grid-template-columns: max-content max-content minmax(0, 1fr);
  justify-content: start;
  width: min(100%, 520px);
}

body.is-dbd-game-view .night-faction-vote-row.is-pending {
  grid-template-columns: max-content max-content;
}

body.is-dbd-game-view .night-faction-vote-row .vote-ledger-name {
  overflow: visible;
  text-overflow: clip;
}

body.is-dbd-game-view .night-faction-vote-row .vote-ledger-target.is-waiting {
  color: var(--dbd-muted);
  font-style: italic;
}

body.is-dbd-game-view .night-role-action-log {
  width: 100%;
  margin: 8px 0 18px;
}

body.is-dbd-game-view .gng-action-field > .night-action-menu {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  width: min(100%, 260px);
  margin-top: 7px;
  max-height: 190px;
}

body.is-gng-game-view .gng-gun-inventory {
  margin: 0 0 10px;
  color: #ffe0a5;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.is-gng-game-view .gng-action-shoot-gun .vote-action-select {
  border-color: #d44d2d;
  background: linear-gradient(180deg, #9d331e, #5e1d13);
  color: #fff1d2;
}

body.is-gng-game-view .gng-action-shoot-gun + .vote-ledger {
  margin-top: 16px;
}

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 .mafia-kick-notice,
body.is-dbd-game-view .mafia-veg-notice {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 14px;
  border: 2px solid var(--dbd-border-hot);
  border-radius: 10px;
  background: rgba(18, 13, 13, 0.78);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.28);
}

body.is-dbd-game-view .mafia-kick-title,
body.is-dbd-game-view .mafia-kick-copy,
body.is-dbd-game-view .mafia-kick-count {
  margin: 0;
}

body.is-dbd-game-view .mafia-kick-title {
  color: var(--dbd-cream);
  font-size: 1.15rem;
}

body.is-dbd-game-view .mafia-kick-copy,
body.is-dbd-game-view .mafia-kick-count,
body.is-dbd-game-view .mafia-kick-help {
  color: var(--dbd-muted);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 750;
}

body.is-dbd-game-view .mafia-kick-button {
  min-height: 42px;
  border: 2px solid var(--dbd-border-hot);
  border-radius: 8px;
  background: var(--dbd-button, var(--dbd-red));
  color: var(--dbd-cream);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

body.is-dbd-game-view .mafia-kick-button:disabled {
  cursor: default;
  opacity: 0.5;
}

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-row.night-faction-vote-row {
  grid-template-columns: minmax(0, max-content) max-content minmax(0, 1fr);
  column-gap: clamp(8px, 1.2vw, 14px);
  width: min(100%, 520px);
}

body.is-dbd-game-view .vote-ledger-row.night-faction-vote-row.is-pending {
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
}

body.is-dbd-game-view .vote-ledger-row.night-faction-vote-row .vote-ledger-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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;
  align-items: flex-end;
  gap: 12px;
  margin-top: 6px;
}

.home-guest-discovery-actions[hidden] {
  display: none;
}

.home-guest-discovery-actions .home-guest-game-link {
  display: grid;
  grid-template-rows: 62px auto;
  justify-items: center;
  width: 82px;
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.home-guest-game-link img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(3px 3px 0 rgba(7, 19, 63, 0.16));
}

.home-guest-game-link span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 3px;
  border: 2px solid var(--home-ink);
  background: var(--home-yellow);
  padding: 3px 6px;
  white-space: nowrap;
}

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

.home-guest-discovery-actions .home-guest-game-link:hover,
.home-guest-discovery-actions .home-guest-game-link:focus-visible {
  background: transparent;
  color: var(--home-ink);
  transform: translate(-2px, -2px);
}

.home-guest-game-link:hover span,
.home-guest-game-link:focus-visible span {
  background: var(--home-pink);
  color: var(--home-white);
}

.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-setup-form {
  max-width: 720px;
}

.designer-boutique-setup-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.9fr);
  align-items: stretch;
  gap: 14px;
}

.designer-boutique-setup-fields .designer-boutique-field,
.designer-boutique-setup-fields .designer-boutique-item-upload {
  min-height: 82px;
}

.designer-boutique-setup-form > .shop-primary-action {
  justify-self: start;
}

.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-tech-art img.female-skin-modesty-overlay {
  position: absolute;
  inset: 7px 7px 86px;
  width: calc(100% - 14px);
  height: calc(100% - 93px);
  pointer-events: none;
}

.shop-tech-card:hover .shop-tech-art img.female-skin-modesty-overlay,
.shop-tech-card:focus .shop-tech-art img.female-skin-modesty-overlay,
.shop-tech-card:focus-within .shop-tech-art img.female-skin-modesty-overlay {
  bottom: 152px;
  height: calc(100% - 159px);
}

.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-setup-fields {
    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 {
  position: relative;
  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-image img.female-skin-modesty-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shop-digital-receipt-image.has-female-skin-modesty {
  height: 100px;
}

.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-mafia-rankings {
  width: min(100%, var(--hof-row-width));
  margin: 28px auto 0;
}

.hof-mafia-list {
  display: grid;
  grid-template-columns: repeat(var(--hof-mafia-count, 8), minmax(0, 120px));
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hof-mafia-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 2px solid rgba(7, 19, 63, 0.09);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 248, 253, 0.96)),
    rgba(255, 255, 255, 0.76);
  box-shadow:
    0 3px 0 rgba(7, 19, 63, 0.1),
    0 6px 10px rgba(7, 19, 63, 0.08);
  padding: 4px;
}

.hof-mafia-rank {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 27px;
  min-height: 19px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 6px 3px 6px 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(217, 227, 255, 0.94));
  box-shadow: 0 4px 8px rgba(7, 19, 63, 0.16);
  color: #07133f;
  font-family: "Froople", Arial, Helvetica, sans-serif;
  font-size: 0.55rem;
  font-weight: 750;
  line-height: 1;
  padding-top: 1px;
  transform: rotate(-3deg);
}

.hof-mafia-avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.04;
  overflow: hidden;
  border: 2px solid rgba(240, 92, 157, 0.28);
  border-radius: 5px 5px 2px 2px;
  background: #d7e8f6;
}

.hof-mafia-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.hof-mafia-player {
  min-width: 0;
  padding: 6px 2px 0;
  text-align: center;
}

.hof-mafia-player strong {
  display: block;
  overflow: hidden;
  color: #07133f;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hof-mafia-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: auto 0 0;
  color: rgba(7, 19, 63, 0.64);
  padding: 5px 2px 3px;
  white-space: nowrap;
}

.hof-mafia-score img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.hof-mafia-score strong {
  display: block;
  color: #d54083;
  font-size: 0.65rem;
  font-weight: 600;
}

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

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

  .hof-mafia-list {
    grid-template-columns: repeat(var(--hof-mafia-count, 8), 108px);
    justify-content: start;
    width: max-content;
    margin-inline: 0;
  }

  .hof-mafia-rankings {
    overflow-x: auto;
    padding-bottom: 6px;
  }

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

.play-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 24px;
  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(99, 217, 202, 0.72), rgba(217, 227, 255, 0.74) 45%, rgba(240, 92, 157, 0.46));
  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);
}

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

.play-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 10px;
  max-width: 600px;
  transition: padding 160ms ease;
}

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

.play-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;
}

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

.play-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;
}

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

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

.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: 18px;
  left: 18px;
  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-hero:has(.play-heading-link:not([hidden])) .play-hero-copy {
  padding-left: 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: #e99e9a;
}

.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 {
  display: grid;
  gap: 9px;
  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 > strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.play-active-empty > span {
  font-weight: 700;
  line-height: 1.45;
}

.play-active-empty nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 4px;
}

.play-active-empty a {
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
  padding: 7px 10px;
  text-decoration: none;
}

.play-active-empty a:hover,
.play-active-empty a:focus-visible {
  background: var(--pink);
  color: #fff;
}

.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-row.is-completed .play-active-status {
  color: #666b7e;
}

.play-active-row.is-completed .play-active-status::before {
  background: #777c8d;
  box-shadow: 0 0 0 3px rgba(119, 124, 141, 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(900px, 100%);
}

.play-enroll-view > .play-stage-subheading {
  display: none;
}

.play-card-grid {
  display: grid;
  gap: 16px;
}

.play-enroll-groups {
  display: grid;
  gap: 12px;
}

.play-enroll-group {
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.play-enroll-group.is-mafia {
  border-color: rgba(7, 19, 63, 0.12);
  background: transparent;
}

.play-enroll-group[open] {
  border-color: rgba(7, 19, 63, 0.16);
  box-shadow: none;
}

.play-enroll-group.is-mafia[open] {
  border-color: rgba(7, 19, 63, 0.16);
}

.play-enroll-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  list-style: none;
  cursor: pointer;
  padding: 13px 16px 13px 14px;
  transition: background 150ms ease;
}

.play-enroll-group-heading::-webkit-details-marker {
  display: none;
}

.play-enroll-group-heading:hover,
.play-enroll-group-heading:focus-visible {
  background: rgba(99, 217, 202, 0.09);
}

.play-enroll-group.is-mafia .play-enroll-group-heading:hover,
.play-enroll-group.is-mafia .play-enroll-group-heading:focus-visible {
  background: rgba(99, 217, 202, 0.09);
}

.play-enroll-group-heading:focus-visible {
  outline: 3px solid rgba(99, 217, 202, 0.5);
  outline-offset: -3px;
}

.play-enroll-group[open] .play-enroll-group-heading {
  border-bottom: 1px solid rgba(7, 19, 63, 0.09);
}

.play-enroll-group-body {
  background: transparent;
  padding: 18px 0 20px;
}

.play-enroll-group-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.45rem;
  font-weight: 950;
  line-height: 1;
}

.play-enroll-group-title img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(7, 19, 63, 0.16));
}

.play-enroll-group.is-mafia .play-enroll-group-title {
  color: var(--ink);
}

.play-enroll-group-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.play-enroll-group-count {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(73, 101, 168, 0.1);
  color: rgba(7, 19, 63, 0.66);
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  padding: 6px 9px;
  text-transform: uppercase;
}

.play-enroll-group.is-mafia .play-enroll-group-count {
  background: rgba(73, 101, 168, 0.1);
  color: rgba(7, 19, 63, 0.66);
}

.play-enroll-group-chevron {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.play-enroll-group-chevron::before {
  content: "+";
  transform: translateY(-1px);
}

.play-enroll-group[open] .play-enroll-group-chevron::before {
  content: "\2212";
}

.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(var(--play-card-columns, 3), minmax(0, var(--play-card-width, 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: #e99e9a;
  --play-soft: rgba(233, 158, 154, 0.2);
}

.play-active-row.play-game-palais {
  border-color: rgba(202, 120, 108, 0.72);
  background:
    linear-gradient(90deg, rgba(233, 158, 154, 0.38), rgba(255, 241, 212, 0.9)),
    #fff1d4;
  box-shadow:
    inset 5px 0 0 #ca786c,
    0 8px 16px rgba(102, 35, 43, 0.1);
}

.play-active-row.play-game-palais .play-active-status {
  color: #8b2634;
}

.play-active-row.play-game-palais .play-active-status::before {
  background: #e99e9a;
  box-shadow: 0 0 0 3px rgba(202, 120, 108, 0.2);
}

.play-active-row.play-game-palais .play-active-admin-close {
  border-color: rgba(139, 38, 52, 0.42);
  color: #8b2634;
}

.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-gunsmoke {
  --play-accent: #a03c33;
  --play-soft: rgba(160, 60, 51, 0.18);
  border-color: #a03c33;
}

.play-game-gunsmoke .play-enroll {
  border-color: #a03c33;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 239, 219, 0.2), transparent 38%),
    linear-gradient(180deg, #b94d43, #a03c33);
  color: #fff7e9;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 225, 0.25),
    0 3px 0 #63211d,
    0 10px 16px rgba(73, 24, 21, 0.24);
}

.play-game-gunsmoke .play-enroll:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 225, 0.32),
    0 4px 0 #762822,
    0 14px 20px rgba(73, 24, 21, 0.3);
}

.play-game-robicheaux {
  --play-accent: #5B214F;
  --play-soft: rgba(91, 33, 79, 0.2);
  border-color: #7A356C;
}

.play-game-robicheaux .play-card-media img {
  object-fit: contain;
  object-position: center;
  transform: none;
}

.play-game-robicheaux:not(.is-disabled):hover .play-card-media img,
.play-game-robicheaux:not(.is-disabled):focus-within .play-card-media img,
.play-game-robicheaux.is-open .play-card-media img {
  filter: saturate(1.06) contrast(1.04);
  transform: scale(1.012);
}

.play-game-robicheaux .play-enroll {
  border-color: #6E2B61;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 225, 246, 0.22), transparent 38%),
    linear-gradient(180deg, #7A356C, #4A193F);
  color: #FFF4FB;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 3px 0 #2C0D25,
    0 10px 16px rgba(44, 13, 37, 0.24);
}

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

.play-enroll-modal.is-gunsmoke-enrollment .play-enroll-dialog {
  border-color: #a03c33;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 0 3px rgba(160, 60, 51, 0.12),
    0 24px 56px rgba(65, 22, 19, 0.3);
}

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

  .admin-game-lookup-form {
    grid-template-columns: 1fr;
  }

  .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-hero {
    grid-template-columns: minmax(0, 1fr) 92px;
    min-height: 0;
    padding: 22px 18px;
  }

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

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

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

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

  .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-group {
    padding: 0;
  }

  .play-enroll-view .play-card-row {
    grid-template-columns: minmax(0, 184px);
  }
}

@media (max-width: 430px) {
  .play-hero {
    grid-template-columns: minmax(0, 1fr) 64px;
    padding: 20px 14px;
  }

  .play-hero h1 {
    font-size: 2.72rem;
  }

  .play-hero-icon {
    width: 58px;
    height: 66px;
  }

  .play-hero:has(.play-heading-link:not([hidden])) .play-hero-copy {
    padding-left: 42px;
  }

  .play-heading-link {
    top: 14px;
    left: 10px;
    width: 44px;
    height: 44px;
  }

  .play-heading-link img {
    width: 42px;
    height: 42px;
  }

  .play-enroll-group-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .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,
.buzz-composer-media-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.buzz-composer-media-item video {
  background: #000000;
}

.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-youtube,
.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-item video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #000000;
}

.profile-buzz-media.is-count-1 .profile-buzz-media-item img {
  height: auto;
  object-fit: contain;
}

.profile-buzz-media.is-count-1 .profile-buzz-media-item.is-video {
  aspect-ratio: 16 / 9;
  max-height: none;
}

.profile-buzz-youtube {
  overflow: hidden;
  width: min(100%, 520px);
  aspect-ratio: 16 / 9;
  margin-top: 8px;
  border: 1px solid rgba(7, 19, 63, 0.1);
  border-radius: 8px;
  background: #000000;
}

.profile-buzz-youtube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.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: 64px;
  height: 64px;
  max-height: 64px;
  width: 100%;
  resize: none;
  overflow-y: auto;
  border: 1px solid rgba(73, 101, 168, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font: inherit;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 13px 15px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 5px 14px rgba(7, 19, 63, 0.06);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.buzz-reply-composer textarea::placeholder {
  color: rgba(7, 19, 63, 0.42);
}

.buzz-reply-composer textarea:focus {
  outline: none;
  border-color: rgba(99, 217, 202, 0.82);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 3px rgba(99, 217, 202, 0.14),
    0 7px 16px rgba(7, 19, 63, 0.07);
}

.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.is-system-notice {
  display: block;
  margin-left: 0;
  background: rgba(99, 217, 202, 0.1);
  padding: 10px 22px;
}

.buzz-reply.is-system-notice::before,
.buzz-reply.is-system-notice::after {
  display: none;
}

.buzz-payout-system-notice {
  margin: 0;
  color: rgba(7, 19, 63, 0.76);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
}

.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 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  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:
    1.5px 0 0 rgba(255, 255, 255, 0.96),
    -1.5px 0 0 rgba(255, 255, 255, 0.96),
    0 1.5px 0 rgba(255, 255, 255, 0.96),
    0 -1.5px 0 rgba(255, 255, 255, 0.96),
    3px 3px 0 rgba(99, 217, 202, 0.52);
}

.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-balance .profile-mafia-rating-stat {
  gap: 7px;
}

.profile-page .profile-balance .profile-mafia-rating-stat > img {
  width: 38px;
  height: 38px;
}

.profile-page .profile-balance .profile-mafia-rating-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.profile-page .profile-balance .profile-mafia-rating-copy strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.profile-page .profile-balance .profile-mafia-rating-copy small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.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-history-group {
  display: block;
  min-width: 0;
  border-bottom: 1px solid rgba(7, 19, 63, 0.1);
}

.profile-page .profile-history-group + .profile-history-group {
  margin-top: 4px;
}

.profile-page .profile-history-group.is-mafia {
  border-color: rgba(7, 19, 63, 0.1);
  background: transparent;
  padding: 0;
}

.profile-page .profile-history-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 4px;
}

.profile-page .profile-history-group-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.profile-page .profile-history-mafia-capacity {
  display: flex;
  align-items: center;
  min-width: 0;
}

.profile-page .profile-history-mafia-capacity .profile-history-capacity-item {
  min-height: 34px;
  padding-block: 3px;
}

.profile-page .profile-history-reality-capacity .profile-history-capacity-item {
  min-height: 34px;
  padding-block: 3px;
}

.profile-page .profile-history-group-body {
  padding: 10px 0 16px;
}

.profile-page .profile-history-group.is-mafia .profile-history-group-body {
  padding-bottom: 6px;
}

.profile-page .profile-history-group-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  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.06em;
  line-height: 1;
  text-transform: uppercase;
}

.profile-page .profile-history-group-title img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(7, 19, 63, 0.16));
}

.profile-page .profile-history-group.is-mafia .profile-history-group-title {
  color: rgba(7, 19, 63, 0.68);
}

.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-item.is-mafia {
  border-color: color-mix(in srgb, #C39138 42%, 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, #5B214F 18%, #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: 28px;
  height: 24px;
  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: 29px;
}

.profile-page .profile-history-ticket.is-mafia-ticket {
  width: 32px;
  height: 27px;
  transform: rotate(-4deg);
}

.profile-page .profile-history-mafia-pass-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #5B214F;
  white-space: nowrap;
}

.profile-page .profile-history-mafia-pass-count strong {
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1;
}

.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-list.is-mafia {
  grid-template-columns: repeat(8, minmax(56px, 1fr));
  gap: 9px 4px;
}

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

/* Keep every Mafia result on one baseline regardless of its game-specific badge art. */
.profile-page .profile-history-card.is-mafia-game .profile-history-badge {
  width: 66px;
  height: 66px;
  aspect-ratio: auto;
}

.profile-page .profile-history-card.is-mafia-game {
  grid-template-rows: 66px auto;
}

.profile-page .profile-history-card.is-mafia-game.is-deranked {
  filter: grayscale(100%) saturate(0) contrast(0.82);
  opacity: 0.72;
}

.profile-page .profile-history-card.is-mafia-game.is-deranked .profile-history-badge,
.profile-page .profile-history-card.is-mafia-game.is-deranked .profile-history-badge:hover,
.profile-page .profile-history-card.is-mafia-game.is-deranked .profile-history-badge:focus-visible,
.profile-page .profile-history-card.is-mafia-game.is-deranked .profile-history-badge:active {
  filter: none;
}

.profile-page .profile-history-card.is-mafia-game.is-deranked .profile-history-meta {
  border-color: #8f8f8f;
  background: #e2e2e2;
  color: #444444;
  box-shadow: none;
}

.profile-page .profile-history-card.is-mafia-game.is-deranked .profile-history-meta::before {
  background: #777777;
  opacity: 1;
}

.profile-page .profile-history-card.is-mafia-game .profile-history-badge-text strong {
  font-size: 1.3rem;
}

.profile-page .profile-history-card.is-mafia-game .profile-history-badge.is-result .profile-history-badge-text strong {
  font-size: 1.5rem;
}

.profile-page .profile-history-card.is-mafia-game .profile-history-badge.is-ongoing .profile-history-badge-text {
  font-size: 0.8rem;
}

.profile-page .profile-history-card.is-mafia-game .profile-history-meta {
  width: 68px;
  height: auto;
  min-height: 0;
  box-sizing: border-box;
  padding: 4px;
}

.profile-page .profile-history-card.is-mafia-game .profile-history-meta strong {
  font-size: 0.59rem;
}

.profile-page .profile-history-card.is-mafia-game .profile-history-meta span {
  font-size: 0.72rem;
}

.profile-page .profile-history-card.is-mafia-game .profile-history-meta time {
  font-size: 0.62rem;
}

.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, 255, 255, 0.94), rgba(255, 255, 255, 0) 25%),
    linear-gradient(145deg, #fffaf0 0%, #fff1d4 46%, #eed6ad 78%, #fff7e4 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, 241, 218, 0.4), rgba(255, 241, 218, 0) 30%),
    radial-gradient(circle at 62% 76%, rgba(92, 25, 35, 0.38), rgba(92, 25, 35, 0) 42%),
    linear-gradient(145deg, #e99e9a 0%, #ca786c 52%, #873a3e 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, 246, 225, 0.48), rgba(255, 246, 225, 0) 30%),
    radial-gradient(circle at 62% 76%, rgba(92, 25, 35, 0.32), rgba(92, 25, 35, 0) 42%),
    linear-gradient(145deg, #f0ada7 0%, #d68178 52%, #98464a 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: "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-meta {
  border-color: color-mix(in srgb, #7a0f18 14%, #ffffff);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.5)),
    color-mix(in srgb, #7a0f18 10%, #eef4ff);
  color: #6b1f2b;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  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-card.is-palais .profile-history-meta::before {
  background: #ca786c;
  opacity: 0.9;
}

.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-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: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.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: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.profile-page .profile-all-friends-list {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px 6px;
  align-items: start;
  justify-content: stretch;
}

.profile-page .profile-all-friends-list li {
  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-friends-pagination {
  justify-self: end;
  margin-top: 4px;
}

.profile-page .profile-buzz-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-page .profile-buzz-pagination {
  flex: 0 1 auto;
  max-width: calc(100% - 110px);
  margin: 0;
  overflow-x: auto;
}

.profile-page .profile-buzz-post-meta strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-page .profile-buzz-author-link {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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,
.profile-page .profile-bulletin-tool.is-emoji 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-emoji-control {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.profile-page .profile-bulletin-emoji-picker {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(auto-fit, 34px);
  justify-content: center;
  gap: 5px;
  width: min(420px, calc(100vw - 64px));
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(7, 19, 63, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 30px rgba(7, 19, 63, 0.2);
  padding: 9px;
}

.profile-page .profile-bulletin-emoji-picker[hidden] {
  display: none;
}

.profile-page .profile-bulletin-emoji-option {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  padding: 3px;
}

.profile-page .profile-bulletin-emoji-option:hover,
.profile-page .profile-bulletin-emoji-option:focus-visible {
  background: rgba(99, 217, 202, 0.2);
  outline: 2px solid rgba(73, 101, 168, 0.28);
  outline-offset: 0;
}

.profile-page .profile-bulletin-emoji-option img {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  pointer-events: none;
}

.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.has-bulletin-comment-menu {
  padding-right: 42px;
}

.profile-page .profile-bulletin-comment.is-bulletin-menu-open {
  z-index: 20;
}

.profile-page .profile-bulletin-comment-menu {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 5;
}

.profile-page .profile-bulletin-comment-menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(73, 101, 168, 0.76);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  opacity: 0.52;
  padding: 0 0 5px;
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.profile-page .profile-bulletin-comment:hover .profile-bulletin-comment-menu-toggle,
.profile-page .profile-bulletin-comment:focus-within .profile-bulletin-comment-menu-toggle,
.profile-page .profile-bulletin-comment-menu.is-open .profile-bulletin-comment-menu-toggle {
  opacity: 1;
}

.profile-page .profile-bulletin-comment-menu-toggle:hover,
.profile-page .profile-bulletin-comment-menu-toggle:focus-visible,
.profile-page .profile-bulletin-comment-menu.is-open .profile-bulletin-comment-menu-toggle {
  background: rgba(99, 217, 202, 0.17);
  color: var(--ink);
}

.profile-page .profile-bulletin-comment-menu-toggle:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

.profile-page .profile-bulletin-comment-menu-popover {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  display: grid;
  min-width: 132px;
  border: 1px solid rgba(7, 19, 63, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 20px rgba(7, 19, 63, 0.16);
  padding: 4px;
}

.profile-page .profile-bulletin-comment-menu-popover[hidden] {
  display: none;
}

.profile-page .profile-bulletin-comment-menu-item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 8px 9px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.profile-page .profile-bulletin-comment-menu-item:hover,
.profile-page .profile-bulletin-comment-menu-item:focus-visible {
  background: rgba(99, 217, 202, 0.16);
  outline: none;
}

.profile-page .profile-bulletin-comment-menu-item.is-danger,
.profile-page .profile-bulletin-comment-menu-item.is-report {
  color: #b72562;
}

.profile-page .profile-bulletin-comment-menu-item.is-danger:hover,
.profile-page .profile-bulletin-comment-menu-item.is-danger:focus-visible,
.profile-page .profile-bulletin-comment-menu-item.is-report:hover,
.profile-page .profile-bulletin-comment-menu-item.is-report:focus-visible {
  background: rgba(237, 100, 155, 0.12);
}

.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 {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: 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;
}

.profile-page .profile-bulletin-custom-emoji {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: -4px 2px -6px;
  object-fit: contain;
  vertical-align: baseline;
}

@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-history-list.is-mafia {
    grid-template-columns: repeat(4, minmax(56px, 1fr));
  }

  .profile-page .profile-history-group-heading {
    align-items: center;
    flex-direction: row;
  }

  .profile-page .profile-history-group.is-mafia .profile-history-group-heading,
  .profile-page .profile-history-group-actions {
    flex-wrap: wrap;
  }

  .profile-page .profile-history-group-actions {
    margin-left: auto;
  }

  .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.1), rgba(218, 227, 252, 0.24)),
    var(--profile-background-image),
    var(--bg);
  min-height: 100svh;
  background-attachment: fixed, fixed, fixed;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover;
}

body.profile-page.has-profile-background .site-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(242, 246, 255, 0.68), rgba(224, 233, 255, 0.52)),
    rgba(218, 227, 252, 0.42);
  box-shadow: 0 10px 28px rgba(7, 19, 63, 0.1);
  -webkit-backdrop-filter: blur(14px) saturate(122%);
  backdrop-filter: blur(14px) saturate(122%);
}

body.profile-page.has-profile-background .profile-shell {
  background:
    linear-gradient(180deg, rgba(255, 250, 253, 0.84), rgba(255, 255, 255, 0.72)),
    rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(12px) saturate(108%);
  backdrop-filter: blur(12px) saturate(108%);
}

.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: "TAY Dumpling", "Barlow Semi Condensed", 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);
}

/* Mafia history badges use game-specific light instead of the generic gloss. */
.profile-page .profile-history-card.is-robicheaux .profile-history-badge,
.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge {
  transition:
    filter 180ms ease,
    transform 180ms cubic-bezier(0.2, 0.78, 0.28, 1);
}

.profile-page .profile-history-card.is-robicheaux .profile-history-badge {
  width: 66px;
  height: 66px;
}

.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge {
  width: 66px;
  height: 66px;
}

.profile-page .profile-history-card.is-robicheaux .profile-history-badge::before,
.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge::before {
  content: "";
  position: absolute;
  inset: 14%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  transition:
    filter 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.profile-page .profile-history-card.is-robicheaux .profile-history-badge::before {
  background: radial-gradient(circle, rgba(190, 111, 207, 0.48) 0 18%, rgba(91, 33, 79, 0.3) 42%, rgba(91, 33, 79, 0) 72%);
  filter: blur(4px);
  opacity: 0.72;
  transform: scale(0.88);
}

.profile-page .profile-history-card.is-robicheaux .profile-history-badge-shape {
  background: radial-gradient(circle at 50% 48%, #e8c8ec 0%, #bd7fc1 25%, #7a376b 58%, #32122d 100%);
  filter:
    drop-shadow(0 1px 0 rgba(255, 245, 255, 0.92))
    drop-shadow(0 3px 3px rgba(50, 18, 45, 0.42))
    drop-shadow(0 0 5px rgba(151, 78, 155, 0.4));
  -webkit-mask-size: 97%;
  mask-size: 97%;
}

.profile-page .profile-history-card.is-robicheaux .profile-history-badge::after {
  display: none;
}

.profile-page .profile-history-card.is-robicheaux .profile-history-badge:hover,
.profile-page .profile-history-card.is-robicheaux .profile-history-badge:focus-visible {
  transform: translateY(-2px) scale(1.045);
}

.profile-page .profile-history-card.is-robicheaux .profile-history-badge:hover::before,
.profile-page .profile-history-card.is-robicheaux .profile-history-badge:focus-visible::before {
  filter: blur(3px);
  opacity: 0.92;
  transform: scale(1.02);
}

.profile-page .profile-history-card.is-robicheaux .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .profile-history-card.is-robicheaux .profile-history-badge:focus-visible .profile-history-badge-shape {
  background: radial-gradient(circle at 50% 47%, #f5e2f7 0%, #d394d5 25%, #884578 58%, #3b1735 100%);
  filter:
    drop-shadow(0 1px 0 rgba(255, 248, 255, 0.96))
    drop-shadow(0 4px 4px rgba(50, 18, 45, 0.46))
    drop-shadow(0 0 7px rgba(172, 92, 179, 0.58));
}

.profile-page .profile-history-card.is-robicheaux .profile-history-badge:focus-visible {
  outline-color: #a660a7;
}

.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge::before {
  background: radial-gradient(circle, rgba(235, 151, 67, 0.5) 0 16%, rgba(160, 60, 51, 0.28) 43%, rgba(160, 60, 51, 0) 73%);
  filter: blur(4px);
  opacity: 0.68;
  transform: scale(0.86);
}

.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge-shape {
  background: linear-gradient(118deg, #421b1a 0%, #742a26 17%, #b65738 31%, #dfa15d 40%, #fff0c4 46%, #d18a49 52%, #8b312a 67%, #c26a3e 82%, #54211e 100%);
  background-position: 72% 68%;
  background-size: 165% 165%;
  filter:
    drop-shadow(0 1px 0 rgba(255, 226, 170, 0.88))
    drop-shadow(0 3px 3px rgba(84, 33, 30, 0.42))
    drop-shadow(0 0 5px rgba(211, 123, 55, 0.38));
  transition:
    filter 180ms ease,
    background-position 260ms cubic-bezier(0.2, 0.78, 0.28, 1);
}

.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge::after {
  display: none;
}

.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge:hover,
.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge:focus-visible {
  transform: translateY(-2px) rotate(-1.25deg) scale(1.04);
}

.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge:hover::before,
.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge:focus-visible::before {
  filter: blur(3px);
  opacity: 0.92;
  transform: scale(1.03);
}

.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge:hover .profile-history-badge-shape,
.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge:focus-visible .profile-history-badge-shape {
  background-position: 28% 32%;
  filter:
    drop-shadow(0 1px 0 rgba(255, 235, 194, 0.94))
    drop-shadow(0 4px 4px rgba(84, 33, 30, 0.46))
    drop-shadow(0 0 7px rgba(226, 143, 63, 0.56));
}

.profile-page .profile-history-card.is-gunsmoke-and-garters .profile-history-badge:focus-visible {
  outline-color: #c56f3f;
}

.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-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-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-post {
  cursor: pointer;
}

.profile-page .profile-buzz-post:focus-visible {
  z-index: 5;
  outline: 2px solid rgba(99, 217, 202, 0.72);
  outline-offset: 2px;
}

.profile-page .profile-buzz-post.is-expanded {
  z-index: 4;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(7, 19, 63, 0.1);
}

.profile-page .profile-buzz-inline-detail {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  min-width: 0;
  margin-top: 4px;
  border-top: 1px solid rgba(7, 19, 63, 0.1);
  cursor: default;
  padding: 11px 0 2px 52px;
}

.profile-page .profile-buzz-inline-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-page .profile-buzz-inline-detail-head > strong {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.profile-page .profile-buzz-inline-collapse {
  border: 1px solid rgba(7, 19, 63, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 5px 9px;
}

.profile-page .profile-buzz-inline-collapse:hover,
.profile-page .profile-buzz-inline-collapse:focus-visible {
  border-color: rgba(99, 217, 202, 0.5);
  background: rgba(99, 217, 202, 0.14);
  color: var(--ink);
}

.profile-page .profile-buzz-inline-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.profile-page .profile-buzz-inline-replies {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-page .profile-buzz-inline-reply {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  border-radius: 7px;
  background: rgba(217, 227, 255, 0.24);
  padding: 9px 10px;
}

.profile-page .profile-buzz-inline-reply.is-system-notice {
  display: block;
  background: rgba(99, 217, 202, 0.1);
  padding: 9px 12px;
}

.profile-page .profile-buzz-inline-reply-avatar,
.profile-page .profile-buzz-inline-reply-avatar img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.profile-page .profile-buzz-inline-reply-avatar img {
  object-fit: cover;
  object-position: center 20%;
}

.profile-page .profile-buzz-inline-reply-body {
  min-width: 0;
}

.profile-page .profile-buzz-inline-reply-body .profile-buzz-post-text {
  margin-top: 4px;
}

.profile-page .profile-buzz-inline-replying {
  color: rgba(73, 101, 168, 0.72);
}

@media (max-width: 600px) {
  .profile-page .profile-buzz-inline-detail {
    padding-left: 0;
  }
}

.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: transparent;
  color: var(--ink);
  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 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

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

.profile-hero {
  position: relative;
}

.profile-page .profile-balance {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 14px;
}

.profile-page .profile-primary-stats,
.profile-page .profile-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: "TAY Dumpling", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

.profile-page .profile-primary-stats *,
.profile-page .profile-secondary-actions * {
  font-family: inherit;
}

.profile-page .profile-primary-stats {
  gap: 20px;
}

.profile-page .profile-primary-stats > [data-profile-stat-label] {
  gap: 7px;
}

.profile-page .profile-primary-stats > [data-profile-stat-label] > img,
.profile-page .profile-primary-stats > .profile-games-played > img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.profile-page .profile-primary-stats > .profile-ban-indicator {
  display: inline-flex;
}

.profile-page .profile-primary-stats > .profile-ban-indicator[hidden] {
  display: none;
}

.profile-page .profile-primary-stats > .profile-ban-indicator > img {
  width: auto;
  height: 30px;
}

.profile-page .profile-primary-stats > [data-profile-stat-label="Fame"] > img {
  width: 45px;
  height: 45px;
}

.profile-page .profile-primary-stats > .profile-games-played > img {
  width: auto;
  height: 40px;
}

.profile-page .profile-primary-stats strong {
  font-size: 1.48rem;
}

.profile-page .profile-secondary-actions {
  min-height: 32px;
  gap: 8px;
}

.profile-page .profile-secondary-actions .profile-mafia-rating-stat {
  gap: 5px;
  margin-right: 2px;
}

.profile-page .profile-secondary-actions .profile-mafia-rating-stat > img {
  width: 30px;
  height: 30px;
}

.profile-page .profile-secondary-actions .profile-mafia-rating-copy {
  gap: 2px;
}

.profile-page .profile-secondary-actions .profile-mafia-rating-copy strong {
  font-size: 0.78rem;
}

.profile-page .profile-secondary-actions .profile-mafia-rating-copy small {
  font-size: 0.61rem;
}

.profile-page .profile-secondary-actions .profile-mail-link,
.profile-page .profile-secondary-actions .profile-friend-request,
.profile-page .profile-secondary-actions .profile-report-trigger,
.profile-page .profile-secondary-actions .profile-gifts-stat {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.profile-page .profile-secondary-actions .profile-mail-link img,
.profile-page .profile-secondary-actions .profile-friend-request img,
.profile-page .profile-secondary-actions .profile-report-trigger img,
.profile-page .profile-secondary-actions .profile-gifts-stat > img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.profile-page .profile-secondary-actions .profile-friend-request.is-remove img {
  filter: none;
  transform: none;
}

.profile-page .profile-gifts-stat {
  position: relative;
  display: inline-grid;
  place-items: center;
  cursor: default;
}

.profile-page .profile-secondary-actions .profile-gifts-stat {
  width: 30px;
  min-width: 30px;
  padding: 0;
}

.profile-report-trigger {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  color: inherit;
  text-decoration: none;
  transition:
    filter 140ms ease,
    transform 140ms ease;
}

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

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

.profile-report-trigger[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .profile-page .profile-balance {
    justify-items: center;
  }

  .profile-page .profile-primary-stats,
  .profile-page .profile-secondary-actions {
    justify-content: center;
  }
}

/* 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);
  }
}

/* Gunsmoke & Garters keeps the Dead by Dawn layout with its own saloon finish. */
body.is-dbd-game-view.is-gng-game-view .panel {
  border-color: rgba(198, 142, 73, 0.54);
  background:
    linear-gradient(180deg, rgba(255, 232, 187, 0.08), rgba(255, 232, 187, 0.01)),
    rgba(38, 23, 13, 0.94);
}

body.is-dbd-game-view.is-gng-game-view .main-tab.is-active,
body.is-dbd-game-view.is-gng-game-view .main-tab:hover,
body.is-dbd-game-view.is-gng-game-view .account-link:hover {
  border-color: var(--dbd-border-hot);
  background: linear-gradient(180deg, rgba(124, 75, 30, 0.98), rgba(42, 25, 14, 0.98));
}

body.is-dbd-game-view.is-gng-game-view .panel-heading h2,
body.is-dbd-game-view.is-gng-game-view .phase-strip h2,
body.is-dbd-game-view.is-gng-game-view .phase-role-title,
body.is-dbd-game-view.is-gng-game-view .role-card-name {
  font-family: "Westerion", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: 0.025em;
}

body.is-dbd-game-view.is-gng-game-view .panel-heading h2 {
  font-size: clamp(1.7rem, 2.35vw, 2.35rem);
  line-height: 0.9;
}

body.is-dbd-game-view.is-gng-game-view .phase-role-title {
  max-width: 52%;
  color: #e4a34d;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: 0.92;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 0 rgba(16, 8, 4, 0.72);
}

body.is-dbd-game-view.is-gng-game-view .gng-outlaw-vote-log {
  display: grid;
  gap: 8px;
  width: min(100%, 520px);
  margin-top: 14px;
  border: 2px solid rgba(178, 112, 44, 0.76);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(113, 39, 32, 0.24), transparent 52%),
    rgba(20, 12, 8, 0.76);
  padding: 11px 13px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 158, 0.09),
    0 4px 0 rgba(10, 5, 3, 0.52);
}

body.is-dbd-game-view.is-gng-game-view .gng-outlaw-vote-log h3 {
  margin: 0;
  color: #e4a34d;
  font-family: "Westerion", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1;
}

body.is-dbd-game-view.is-gng-game-view .gng-outlaw-vote-rows {
  display: grid;
  gap: 5px;
}

body.is-dbd-game-view.is-gng-game-view .gng-outlaw-vote-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto minmax(82px, 1fr);
  align-items: center;
  gap: 9px;
  color: #fff0cf;
  font-family: "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.96rem;
  line-height: 1.1;
}

body.is-dbd-game-view.is-gng-game-view .gng-outlaw-vote-role {
  color: rgba(226, 163, 77, 0.76);
  font-family: "Westerion", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  text-align: center;
}

body.is-dbd-game-view.is-gng-game-view .gng-outlaw-vote-target {
  overflow: hidden;
  color: #f0b46b;
  font-weight: 900;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-dbd-game-view.is-gng-game-view .gng-outlaw-vote-target::before {
  content: "→ ";
  color: rgba(255, 232, 185, 0.48);
}

body.is-dbd-game-view.is-gng-game-view .gng-outlaw-vote-target.is-waiting {
  color: rgba(255, 232, 185, 0.48);
  font-style: italic;
}

body.is-dbd-game-view.is-gng-game-view .gng-night-history {
  display: grid;
  gap: 10px;
  width: min(100%, 520px);
  border: 2px solid rgba(178, 112, 44, 0.76);
  border-radius: 10px;
  background: rgba(20, 12, 8, 0.76);
  padding: 13px 15px;
  box-shadow: 0 4px 0 rgba(10, 5, 3, 0.52);
}

body.is-dbd-game-view.is-gng-game-view .gng-night-history h3 {
  margin: 0;
  color: #e4a34d;
  font-family: "Westerion", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
}

body.is-dbd-game-view.is-gng-game-view .gng-night-history-rows {
  display: grid;
  gap: 7px;
}

body.is-dbd-game-view.is-gng-game-view .gng-night-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #fff0cf;
}

body.is-dbd-game-view.is-gng-game-view .gng-night-history-row span {
  color: #f0b46b;
  font-weight: 900;
}

body.is-dbd-game-view.is-gng-game-view .message.is-camp-notice .message-body {
  border-color: #a03c33;
  background:
    linear-gradient(180deg, rgba(160, 60, 51, 0.42), rgba(77, 31, 25, 0.34)),
    rgba(35, 20, 13, 0.95);
  color: #fff0cf;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 174, 0.1),
    0 2px 0 rgba(12, 6, 3, 0.52),
    0 0 14px rgba(160, 60, 51, 0.12);
}

body.is-dbd-game-view.is-gng-game-view .message.is-gun-receipt .message-media {
  width: 86px;
  height: 86px;
  margin: 0 auto 5px;
  object-fit: contain;
}

body.is-dbd-game-view.is-gng-game-view .role-icon {
  width: 36px;
  height: 38px;
}

body.is-dbd-game-view.is-gng-game-view .role-icon.is-townie-aligned,
body.is-dbd-game-view.is-gng-game-view .role-mark-button.is-marked .role-icon.is-townie-aligned {
  filter:
    drop-shadow(0 0 3px rgba(236, 145, 55, 0.82))
    drop-shadow(0 0 1px rgba(255, 210, 128, 0.5))
    drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.42));
}

body.is-dbd-game-view.is-gng-game-view .role-icon.is-outlaw-aligned,
body.is-dbd-game-view.is-gng-game-view .role-mark-button.is-marked .role-icon.is-outlaw-aligned {
  filter:
    drop-shadow(0 0 3px rgba(8, 4, 3, 0.98))
    drop-shadow(0 0 1px rgba(67, 22, 17, 0.9))
    drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.72));
}

body.is-dbd-game-view.is-gng-game-view .role-mark-option {
  font-family: "Westerion", "Barlow Semi Condensed", Arial, Helvetica, sans-serif;
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

body.is-dbd-game-view.is-gng-game-view .dbd-lobby-leave-button {
  border: 3px solid #a97535;
  background:
    linear-gradient(180deg, rgba(255, 225, 166, 0.08), rgba(255, 225, 166, 0) 46%),
    linear-gradient(180deg, #432c1b, #24160e);
  color: #ffe8b9;
  text-shadow: 0 1px 0 #100904;
  box-shadow:
    inset 0 0 0 1px rgba(255, 222, 158, 0.1),
    0 3px 0 #120a05,
    0 8px 20px rgba(0, 0, 0, 0.3);
}

body.is-dbd-game-view.is-gng-game-view .dbd-lobby-leave-button:hover,
body.is-dbd-game-view.is-gng-game-view .dbd-lobby-leave-button:focus-visible {
  border-color: #d4a45f;
  background:
    linear-gradient(180deg, rgba(255, 231, 180, 0.13), rgba(255, 231, 180, 0.02) 46%),
    linear-gradient(180deg, #5b3b20, #2c1a0f);
  color: #fff2d4;
  box-shadow:
    inset 0 0 0 1px rgba(255, 229, 177, 0.15),
    0 3px 0 #120a05,
    0 0 0 3px rgba(197, 139, 62, 0.16),
    0 9px 24px rgba(0, 0, 0, 0.34);
}

/* Robicheaux: candlelit New Orleans occult styling over the shared deduction layout. */
body.is-robicheaux-game-view {
  --dbd-red: #a66b99;
  --dbd-cream: #f0e9f1;
  --dbd-muted: #b7aabb;
  --dbd-panel: rgba(28, 13, 29, 0.91);
  --dbd-line: rgba(191, 153, 190, 0.25);
  --dbd-panel-strong: rgba(27, 12, 27, 0.95);
  --dbd-panel-soft: rgba(55, 27, 54, 0.88);
  --dbd-border: rgba(123, 91, 122, 0.72);
  --dbd-border-hot: rgba(176, 103, 158, 0.92);
  background:
    linear-gradient(180deg, rgba(20, 6, 22, 0.38), rgba(12, 4, 13, 0.86)),
    url("/assets/carryover/game-assets/robicheaux/background.png") center center / cover fixed no-repeat,
    #160918;
}

body.is-dbd-game-view.is-robicheaux-game-view .panel {
  border-color: rgba(119, 84, 119, 0.72);
  background:
    linear-gradient(180deg, rgba(137, 78, 129, 0.1), transparent 34%),
    rgba(29, 13, 29, 0.94);
  box-shadow: inset 0 1px 0 rgba(237, 215, 237, 0.07), 0 12px 34px rgba(7, 1, 8, 0.48);
}

body.is-robicheaux-game-view .player-row {
  border-color: rgba(107, 75, 110, 0.78);
  background: linear-gradient(180deg, rgba(72, 39, 72, 0.12), transparent 48%), rgba(25, 17, 25, 0.94);
  box-shadow: inset 0 1px 0 rgba(235, 215, 236, 0.045), 0 2px 0 rgba(7, 2, 8, 0.34);
}

body.is-robicheaux-game-view .player-row.is-witch-aligned {
  border-color: rgba(113, 50, 143, 0.9);
  box-shadow: inset 0 1px 0 rgba(211, 163, 226, 0.07), 0 2px 0 rgba(7, 2, 8, 0.36);
}

body.is-robicheaux-game-view .player-row.is-witch-hunter-aligned {
  border-color: rgba(105, 29, 38, 0.94);
  box-shadow: inset 0 1px 0 rgba(203, 92, 101, 0.065), 0 2px 0 rgba(7, 2, 8, 0.38);
}

body.is-robicheaux-game-view .player-avatar {
  border-color: rgba(125, 77, 127, 0.9);
  background: rgba(62, 34, 63, 0.55);
}

body.is-robicheaux-game-view .player-avatar.is-online {
  border-color: #8a4a8c;
  box-shadow: 0 0 9px rgba(116, 55, 127, 0.28), 0 2px 0 rgba(0, 0, 0, 0.34);
}

body.is-robicheaux-game-view .role-card.has-role-card {
  border-color: rgba(108, 76, 112, 0.84);
  box-shadow: inset 0 1px 0 rgba(235, 215, 236, 0.06), 0 3px 0 rgba(7, 2, 8, 0.46), 0 0 14px rgba(83, 38, 88, 0.11);
}

body.is-robicheaux-game-view .role-card {
  margin-top: 14px;
  border-color: rgba(104, 65, 111, 0.9);
  background:
    radial-gradient(circle at 50% -18%, rgba(111, 47, 119, 0.2), transparent 52%),
    linear-gradient(180deg, rgba(50, 27, 52, 0.98), rgba(22, 12, 24, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(235, 215, 236, 0.06),
    0 3px 0 rgba(7, 2, 8, 0.48),
    0 10px 22px rgba(7, 2, 8, 0.24);
}

body.is-robicheaux-game-view .role-card.has-role-card.is-witch-aligned {
  border-color: rgba(113, 50, 143, 0.94);
}

body.is-robicheaux-game-view .role-card.has-role-card.is-witch-hunter-aligned {
  border-color: rgba(105, 29, 38, 0.96);
}

body.is-robicheaux-game-view .role-card.has-role-card::after {
  background: linear-gradient(180deg, rgba(8, 3, 10, 0) 55%, rgba(8, 3, 10, 0.58)), radial-gradient(circle at 82% 82%, rgba(100, 44, 116, 0.13), transparent 42%);
}

body.is-robicheaux-game-view .chat-phase-tab {
  border-color: rgba(101, 72, 105, 0.78);
  background: rgba(25, 17, 26, 0.9);
  color: #a99eac;
  box-shadow: inset 0 1px 0 rgba(235, 215, 236, 0.04), 0 2px 0 rgba(7, 2, 8, 0.34);
}

body.is-robicheaux-game-view .chat-phase-tab:hover,
body.is-robicheaux-game-view .chat-phase-tab.is-active {
  border-color: rgba(151, 72, 139, 0.94);
  background: rgba(107, 42, 96, 0.28);
  color: #d2a9cc;
}

body.is-robicheaux-game-view .private-chat-strip {
  display: none !important;
}

body.is-robicheaux-game-view .game-title-logo-heading [data-room-title-text] {
  color: #eadfea;
  font-family: "Robicheaux", Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 4vw, 4rem);
  font-variant: small-caps;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #241025, 0 0 18px rgba(174, 105, 158, 0.3);
}

body.is-robicheaux-game-view .panel-heading h2,
body.is-robicheaux-game-view .phase-strip h2,
body.is-robicheaux-game-view .phase-role-title,
body.is-robicheaux-game-view .role-card-name,
body.is-robicheaux-game-view .role-mark-option {
  font-family: "Robicheaux", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.035em;
}

body.is-robicheaux-game-view .vote-action-select,
body.is-robicheaux-game-view .vote-action-option,
body.is-robicheaux-game-view .night-action-label,
body.is-robicheaux-game-view .dbd-lobby-leave-button,
body.is-robicheaux-game-view .chat-phase-tab {
  font-family: "Robicheaux", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.025em;
}

body.is-robicheaux-game-view .gng-action-shoot-gun + .vote-ledger {
  margin-top: 16px;
}

body.is-robicheaux-game-view .phase-role-title {
  max-width: 58%;
  color: #c99abd;
  font-size: clamp(1.6rem, 2.2vw, 2.15rem);
  text-shadow: 0 2px 0 #160718;
}

body.is-robicheaux-game-view .gng-role-lineup.is-robicheaux-lineup:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.34vw, 6px);
  width: max-content;
  max-width: calc(100% - 24px);
  margin: -10px auto 18px;
  border: 1px solid rgba(145, 99, 140, 0.62);
  border-radius: 999px;
  background: rgba(25, 10, 26, 0.88);
  padding: 6px 13px;
  box-shadow: inset 0 1px 0 rgba(238, 215, 237, 0.07), 0 5px 18px rgba(8, 1, 9, 0.48);
}

body.is-robicheaux-game-view .gng-role-lineup-faction-icon {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 3px rgba(129, 57, 160, 0.56));
}

body.is-robicheaux-game-view .gng-role-lineup-faction-icon.is-witch-hunters {
  filter: drop-shadow(0 0 3px rgba(83, 12, 21, 0.78));
}

body.is-robicheaux-game-view .gng-role-lineup-faction-icon.is-eliminated {
  opacity: 0.22;
  filter: grayscale(1) brightness(0.56) drop-shadow(0 0 2px rgba(10, 3, 11, 0.72));
}

body.is-robicheaux-game-view .gng-role-lineup-slot {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
}

body.is-robicheaux-game-view .gng-role-lineup-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 4px rgba(190, 132, 181, 0.42));
}

body.is-robicheaux-game-view .gng-role-lineup-vs {
  margin: 0 4px;
  color: #a982a7;
  font: 400 1.12rem/1 "Robicheaux", Georgia, "Times New Roman", serif;
}

body.is-robicheaux-game-view .gng-role-lineup-slot.is-eliminated .gng-role-lineup-icon {
  opacity: 0.22;
  filter: grayscale(1) brightness(0.62);
}

body.is-robicheaux-game-view .gng-role-lineup-slot.is-eliminated::after {
  content: "×";
  position: absolute;
  inset: 50% auto auto 50%;
  color: #b65d78;
  font: 400 2rem/1 "Robicheaux", Georgia, serif;
  transform: translate(-50%, -54%);
}

body.is-robicheaux-game-view .role-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

body.is-robicheaux-game-view .role-icon.is-witch-aligned {
  filter: drop-shadow(0 0 2px rgba(112, 37, 151, 0.86)) drop-shadow(0 0 1px rgba(161, 74, 195, 0.56));
}

body.is-robicheaux-game-view .role-icon.is-witch-hunter-aligned {
  filter: drop-shadow(0 0 2px rgba(74, 7, 14, 0.98)) drop-shadow(0 0 1px rgba(112, 19, 27, 0.78));
}

body.is-robicheaux-game-view .role-mark-button.is-marked .role-icon.is-witch-aligned,
body.is-robicheaux-game-view .role-mark-option img.is-witch-aligned {
  filter: drop-shadow(0 0 2px rgba(112, 37, 151, 0.86)) drop-shadow(0 0 1px rgba(161, 74, 195, 0.56));
}

body.is-robicheaux-game-view .role-mark-button.is-marked .role-icon.is-witch-hunter-aligned,
body.is-robicheaux-game-view .role-mark-option img.is-witch-hunter-aligned {
  filter: drop-shadow(0 0 2px rgba(74, 7, 14, 0.98)) drop-shadow(0 0 1px rgba(112, 19, 27, 0.78));
}

body.is-robicheaux-game-view .role-mark-menu {
  border-color: rgba(103, 56, 112, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(106, 45, 113, 0.18), transparent 48%),
    linear-gradient(180deg, rgba(43, 22, 46, 0.99), rgba(19, 10, 21, 0.99));
  box-shadow:
    0 4px 0 rgba(7, 2, 8, 0.62),
    0 0 22px rgba(74, 27, 82, 0.24);
}

body.is-robicheaux-game-view .role-mark-option:hover,
body.is-robicheaux-game-view .role-mark-option:focus-visible,
body.is-robicheaux-game-view .role-mark-option.is-selected {
  border-color: rgba(147, 76, 157, 0.78);
  background: rgba(111, 44, 120, 0.2);
  color: #eadfea;
}

body.is-robicheaux-game-view .gng-outlaw-vote-log,
body.is-robicheaux-game-view .gng-night-history {
  display: grid;
  gap: 8px;
  width: min(100%, 540px);
  margin-top: 14px;
  border: 2px solid rgba(126, 84, 121, 0.78);
  border-radius: 11px;
  background: rgba(20, 8, 21, 0.82);
  padding: 12px 14px;
  box-shadow: 0 4px 0 rgba(8, 2, 9, 0.56);
}

body.is-robicheaux-game-view .gng-outlaw-vote-log h3,
body.is-robicheaux-game-view .gng-night-history h3 {
  margin: 0;
  color: #c69abd;
  font: 400 1.35rem/1.1 "Robicheaux", Georgia, "Times New Roman", serif;
}

body.is-robicheaux-game-view .gng-outlaw-vote-rows,
body.is-robicheaux-game-view .gng-night-history-rows { display: grid; gap: 6px; }

body.is-robicheaux-game-view .gng-outlaw-vote-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto minmax(90px, 1fr);
  align-items: center;
  gap: 9px;
  color: #f0e9f1;
}

body.is-robicheaux-game-view .gng-outlaw-vote-role { color: #b991b2; font-size: 0.84rem; text-align: center; }
body.is-robicheaux-game-view .gng-outlaw-vote-target { overflow: hidden; color: #d5b9d0; font-weight: 900; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
body.is-robicheaux-game-view .gng-outlaw-vote-target::before { content: "→ "; opacity: 0.46; }
body.is-robicheaux-game-view .gng-outlaw-vote-target.is-waiting { opacity: 0.5; font-style: italic; }
body.is-robicheaux-game-view .gng-night-history-row { display: flex; justify-content: space-between; gap: 14px; color: #f0e9f1; }
body.is-robicheaux-game-view .gng-night-history-row span { color: #d5b9d0; font-weight: 900; }

body.is-robicheaux-game-view .message.is-camp-notice .message-body {
  border-color: #7e416e;
  background: linear-gradient(180deg, rgba(108, 43, 91, 0.48), rgba(47, 18, 45, 0.5)), rgba(24, 9, 25, 0.96);
  color: #f0e9f1;
  box-shadow: inset 0 1px 0 rgba(237, 215, 237, 0.08), 0 2px 0 rgba(7, 2, 8, 0.6);
}

body.is-dbd-game-view.is-robicheaux-game-view .dbd-lobby-leave-button {
  border-color: #706575;
  background: linear-gradient(180deg, #28222b, #151217);
  color: #eee7ef;
  text-shadow: 0 1px 0 #080609;
  box-shadow: inset 0 0 0 1px rgba(231, 219, 233, 0.07), 0 3px 0 #09070a, 0 8px 20px rgba(0, 0, 0, 0.34);
}

body.is-dbd-game-view.is-robicheaux-game-view .dbd-lobby-leave-button:hover,
body.is-dbd-game-view.is-robicheaux-game-view .dbd-lobby-leave-button:focus-visible {
  border-color: #9b8ca1;
  background: linear-gradient(180deg, #37303b, #1b171e);
  color: #fffaff;
  box-shadow: inset 0 0 0 1px rgba(237, 226, 239, 0.1), 0 3px 0 #09070a, 0 0 0 3px rgba(116, 102, 122, 0.14), 0 9px 24px rgba(0, 0, 0, 0.38);
}

.dbd-ready-check-overlay.is-robicheaux {
  background: rgba(14, 4, 16, 0.88);
  backdrop-filter: blur(7px);
}

.dbd-ready-check-overlay.is-robicheaux .dbd-ready-check-card {
  border-color: rgba(146, 98, 140, 0.92);
  background: radial-gradient(circle at 50% 0%, rgba(116, 48, 98, 0.34), transparent 53%), linear-gradient(180deg, #30142f, #120714);
  color: #f0e9f1;
}

.dbd-ready-check-overlay.is-robicheaux .dbd-ready-check-eyebrow,
.dbd-ready-check-overlay.is-robicheaux .dbd-ready-check-countdown { color: #c691bb; }
.dbd-ready-check-overlay.is-robicheaux .dbd-ready-check-title,
.dbd-ready-check-overlay.is-robicheaux .dbd-ready-check-countdown,
.dbd-ready-check-overlay.is-robicheaux .dbd-ready-check-button {
  font-family: "Robicheaux", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.035em;
}
.dbd-ready-check-overlay.is-robicheaux .dbd-ready-check-title { color: #f0e9f1; }
.dbd-ready-check-overlay.is-robicheaux .dbd-ready-check-button { border-color: #b67faa; background: linear-gradient(180deg, #82446f, #4a1c43); box-shadow: 0 8px 0 #260d22, 0 16px 30px rgba(0, 0, 0, 0.4); }

.play-enroll-modal.is-robicheaux-enrollment .play-enroll-dialog {
  border-color: #7a356c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 0 0 3px rgba(122, 53, 108, 0.12), 0 24px 56px rgba(45, 12, 41, 0.34);
}

@media (max-width: 720px) {
  body.is-robicheaux-game-view .gng-role-lineup.is-robicheaux-lineup:not([hidden]) { gap: 1px; padding: 5px 8px; }
  body.is-robicheaux-game-view .gng-role-lineup-slot { width: 29px; height: 29px; }
  body.is-robicheaux-game-view .gng-role-lineup-faction-icon { width: 30px; height: 30px; }
}

/* Profile retro music TV layout — 2026-09-15. */
.profile-page .profile-hero.has-profile-sidecar {
  grid-template-columns: minmax(150px, 214px) minmax(320px, 1fr) minmax(330px, 420px);
}

@media (max-width: 1180px) {
  .profile-page .profile-hero.has-profile-sidecar {
    grid-template-columns: minmax(150px, 214px) minmax(0, 1fr);
  }

  .profile-page .profile-hero.has-profile-sidecar .profile-sidecar-slot {
    grid-column: 2;
    width: min(100%, 520px);
  }
}

@media (max-width: 640px) {
  .profile-page .profile-hero.has-profile-sidecar {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-hero.has-profile-sidecar .profile-sidecar-slot {
    grid-column: 1;
    width: 100%;
  }
}