* { box-sizing: border-box; }
:root {
  /* Semantic design tokens: components consume meaning, not theme colors. */
  --surface-page: #f5f7fb;
  --surface-card: #ffffff;
  --surface-elevated: rgba(255, 255, 255, .95);
  --surface-soft: #f8fafc;
  --surface-muted: #f3f4f6;
  --surface-input: #ffffff;
  --surface-disabled: #eef2f7;
  --surface-overlay: rgba(255, 255, 255, .86);
  --surface-inverse: #0f172a;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-disabled: #596579;
  --text-placeholder: #6b7280;
  --text-on-accent: #ffffff;
  --text-inverse: #ffffff;
  --text-inverse-muted: #d1d5db;
  --border-default: #e5e7eb;
  --border-strong: #cbd5e1;
  --focus-ring: #2563eb;
  --accent: #1d4ed8;
  --accent-strong: #0f172a;
  --accent-soft: #eff6ff;
  --positive: #047857;
  --warning: #b45309;
  --negative: #b91c1c;
  --info-surface: #eff6ff;
  --info-text: #1d4ed8;
  --info-border: #bfdbfe;
  --success-surface: #ecfdf5;
  --success-text: #047857;
  --success-border: #bbf7d0;
  --warning-surface: #fffbeb;
  --warning-text: #b45309;
  --warning-border: #fde68a;
  --danger-surface: #fef2f2;
  --danger-text: #b91c1c;
  --danger-border: #fecaca;

  /* Compatibility aliases for existing components during staged migration. */
  --bg: var(--surface-page);
  --card: var(--surface-card);
  --surface: var(--surface-card);
  --soft-bg: var(--surface-soft);
  --soft: var(--surface-muted);
  --panel: var(--surface-card);
  --text: var(--text-primary);
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --muted-color: var(--text-muted);
  --muted-text: var(--text-muted);
  --line: var(--border-default);
  --border: var(--border-default);
  --border-color: var(--border-default);
  --brand: var(--accent);
  --brand2: var(--accent-strong);
  --ok: var(--positive);
  --warn: var(--warning);
  --danger: var(--negative);
}
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--accent) 16%, transparent) 0, transparent 35%), var(--surface-page);
  color: var(--text-primary);
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
.topbar {
  position: sticky; top: 0; z-index: 2500; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px min(5vw, 56px);
  background: var(--surface-overlay); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-default);
}
.brand { font-weight: 900; letter-spacing: -.04em; font-size: 24px; color: var(--accent-strong); }
.navlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; }
.navlinks a { padding: 8px 10px; border-radius: 10px; color: var(--text-secondary); }
.navlinks a:hover, .navlinks .nav-cta { background: var(--accent-soft); color: var(--accent); }
.language-switch { border-left: 1px solid var(--border-default); padding-left: 8px; }
.lang.active { background: var(--accent-strong); color: var(--text-on-accent); }
.container { width: min(1180px, 92vw); margin: 34px auto; }
body.home-page .container { margin-top: 0; }
.hero.modern, .page-head {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin-bottom: 22px;
}
.hero.modern h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.05; max-width: 760px; margin: 8px 0 16px; letter-spacing: -.05em; }
.hero.modern p, .page-head p { color: var(--text-muted); line-height: 1.6; max-width: 760px; }
.eyebrow { display: inline-block; color: var(--accent); font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.hero-actions { display: flex; gap: 10px; margin-top: 22px; }
.hero-panel { min-width: 280px; background: var(--surface-inverse); color: var(--text-inverse); padding: 24px; border-radius: 24px; box-shadow: 0 20px 60px rgba(15,23,42,.22); }
.hero-panel ul { margin: 12px 0 0; padding-left: 18px; color: var(--text-inverse-muted); line-height: 1.8; }
.card, .hero-panel {
  border: 1px solid color-mix(in srgb, var(--border-default) 90%, transparent);
}
.card {
  background: var(--surface-elevated);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(15,23,42,.06);
  padding: 22px;
  margin-bottom: 18px;
}
.card h1, .card h2, .page-head h1 { margin: 0 0 12px; letter-spacing: -.03em; }
.narrow { max-width: 520px; margin-inline: auto; }
.wide { width: 100%; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.contest-card { display: flex; flex-direction: column; gap: 14px; }
.card-top { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.pill { display: inline-block; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 800; background: var(--accent-soft); color: var(--accent); }
.pill.muted { background: var(--surface-muted); color: var(--text-secondary); }
.pill.ok { background: var(--success-surface); color: var(--positive); }
.pill.warn { background: var(--warning-surface); color: var(--warning); }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.meta-grid div { background: var(--surface-soft); border: 1px solid var(--border-default); border-radius: 14px; padding: 12px; }
.meta-grid span { display: block; color: var(--text-muted); font-size: 12px; margin-bottom: 5px; }
.big-number { background: var(--surface-inverse); color: var(--text-inverse); padding: 12px 16px; border-radius: 18px; font-size: 20px; font-weight: 900; white-space: nowrap; }
.form-stack { display: grid; gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.span2 { grid-column: 1 / -1; }
label { display: grid; gap: 7px; color: var(--text-secondary); font-weight: 700; font-size: 14px; }
input, textarea, select {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; padding: 12px 14px; font: inherit; background: var(--surface-input); color: var(--text-primary);
}
input:disabled, textarea:disabled, select:disabled {
  background: var(--surface-disabled);
  color: var(--text-disabled);
  -webkit-text-fill-color: var(--text-disabled);
  border-color: var(--border-strong);
  opacity: 1;
  cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--text-placeholder); opacity: 1; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
textarea { resize: vertical; }
button, .button {
  border: 0; border-radius: 12px; padding: 12px 16px; background: var(--accent); color: var(--text-on-accent); font-weight: 800; cursor: pointer; display: inline-flex; justify-content: center; align-items: center;
}
button:hover, .button:hover { filter: brightness(.96); color: var(--text-on-accent); }
.button.secondary { background: var(--surface-card); color: var(--accent-strong); border: 1px solid var(--border-default); }
.search-row, .trade-form { display: flex; gap: 10px; align-items: center; }
.trade-form select { max-width: 110px; }
.trade-form input { min-width: 110px; }
.hint { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin-top: 10px; }
.flash-wrap { display: grid; gap: 10px; margin-bottom: 16px; }
.flash { padding: 12px 14px; border-radius: 14px; background: var(--info-surface); color: var(--info-text); border: 1px solid var(--info-border); }
.flash.success { background: var(--success-surface); color: var(--success-text); border-color: var(--success-border); }
.flash.danger { background: var(--danger-surface); color: var(--danger-text); border-color: var(--danger-border); }
.flash.warning { background: var(--warning-surface); color: var(--warning-text); border-color: var(--warning-border); }
.flash.info { background: var(--info-surface); color: var(--info-text); border-color: var(--info-border); }
.layout-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border-default); vertical-align: top; }
th { color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-soft); }
.rules-box { white-space: pre-wrap; background: var(--surface-soft); border: 1px solid var(--border-default); border-radius: 14px; padding: 14px; color: var(--text-secondary); line-height: 1.6; }
.check { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.check input { width: auto; }
code { background: var(--surface-muted); padding: 2px 5px; border-radius: 6px; }
@media (max-width: 820px) {
  .topbar, .hero.modern, .page-head, .layout-2, .search-row, .trade-form { flex-direction: column; align-items: stretch; }
  .layout-2, .form-grid { grid-template-columns: 1fr; }
  .navlinks { justify-content: flex-end; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
}
.button.small { padding: 8px 12px; font-size: 13px; }
button.danger, .button.danger { background: var(--negative); color: var(--text-on-accent); }
.admin-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* 2026-07-03: Admin dashboard top action row and maintenance spacing. */
.admin-actions-row {
  margin-top: 4px;
  justify-content: flex-start;
  gap: 8px;
}
.admin-actions-row .button {
  white-space: nowrap;
}
.maintenance-sensitive-notice {
  margin-bottom: 34px;
}
.muted-text { color: var(--text-disabled); font-size: 12px; }
.top-gap { margin-top: 14px; }
.positive { color: var(--positive); font-weight: 900; }
.negative { color: var(--negative); font-weight: 900; }
.highlight-row { background: var(--accent-soft); }
.mini-metric { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mini-metric span { color: var(--text-muted); }
button:disabled { opacity: .45; cursor: not-allowed; }
.trade-panel { border-top: 4px solid var(--brand); }

.quote-preview {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-soft);
}
.quote-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 1.05rem;
}
.chart-box {
  margin-top: 12px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-card);
  height: 170px;
  padding: 8px;
  color: #2f5bea;
}
.chart-box svg {
  width: 100%;
  height: 100%;
  display: block;
}
.chart-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.chart-range.active {
  background: var(--accent-strong);
  color: var(--text-on-accent);
}
.trade-form #order-type { max-width: 120px; }
.trade-form #limit-price { min-width: 130px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 34px; height: 34px; display: block; }
.hero-logo { width: 76px; height: 76px; margin-bottom: 16px; }
.contest-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.contest-card:hover { transform: translateY(-2px); border-color: #bfdbfe; box-shadow: 0 22px 60px rgba(29,78,216,.10); }
.contest-title-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-strong); }
.contest-title-link span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 16px; transition: transform .16s ease, background .16s ease; }
.contest-title-link:hover span { transform: translateX(3px); background: color-mix(in srgb, var(--accent) 18%, var(--surface-card)); }
.contest-open-link { margin-top: auto; align-self: flex-start; gap: 8px; }
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.member-info-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.member-info-grid strong { line-height: 1.35; }
.table-nowrap { white-space: nowrap; }

.consent-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-soft);
}
.consent-box a { color: var(--brand); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.legal-page { max-width: 880px; margin-inline: auto; }
.legal-page h2 { margin-top: 24px; margin-bottom: 8px; font-size: 18px; }
.legal-page p { color: var(--text-secondary); line-height: 1.75; }
.legal-notice-box { margin: 18px 0 24px; padding: 14px 16px; border: 1px solid var(--warning-border); background: var(--warning-surface); border-radius: 14px; color: var(--warning-text); }
.legal-notice-box p { margin: 6px 0 0; color: var(--warning-text); }
.site-footer {
  width: min(1180px, 92vw);
  margin: 24px auto 34px;
  padding-top: 14px;
  border-top: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.site-footer a:hover { color: var(--brand); }


.cookie-notice {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 70px rgba(15,23,42,.18);
  backdrop-filter: blur(10px);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 4px 0 0; color: var(--muted); line-height: 1.45; }
.cookie-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
/* Admin system health spacing */
.page-head + .metric-grid { margin-top: 34px; }

/* Admin/System health: add clear separation between metric cards and the next content row. */
.metric-grid + .layout-2 {
  margin-top: 34px;
}
.metric-card small { display: block; margin-top: 6px; }

.metric-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: #f8fafc; }
.metric-card span { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.metric-card strong { font-size: 28px; color: var(--ink); }
.analytics-header { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 14px; }
@media (max-width: 820px) {
  .cookie-notice, .analytics-header { flex-direction: column; align-items: stretch; }
  .cookie-actions { justify-content: flex-start; flex-wrap: wrap; }
}


.return-up { color: #dc2626; font-weight: 900; }
.return-down { color: #2563eb; font-weight: 900; }
.return-flat { color: var(--ink); font-weight: 800; }
.contest-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.contest-card-title-row h2 { margin: 0; }
.contest-title-link.no-arrow { color: var(--ink); }
.contest-title-link.no-arrow span { display: none; }
.contest-open-inline { white-space: nowrap; flex-shrink: 0; }
.guide-head { align-items: center; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.guide-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 20px; box-shadow: 0 16px 45px rgba(15,23,42,.06); }
.guide-illustration { width: 100%; aspect-ratio: 360 / 220; object-fit: contain; margin-bottom: 14px; }
.guide-step { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--brand2); color: #fff; font-weight: 900; margin-bottom: 10px; }
.guide-card h2 { font-size: 20px; margin: 0 0 8px; }
.guide-card p, .guide-note p { color: var(--muted); line-height: 1.65; }
@media (max-width: 680px) {
  .contest-card-title-row { flex-direction: column; }
  .contest-open-inline { align-self: flex-start; }
}


/* Compact top navigation dropdowns */
.nav-menu { position: relative; display: inline-flex; align-items: center; }
.nav-menu-button {
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
}
.nav-menu-button:hover { background: #eff6ff; color: var(--brand); filter: none; }
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15,23,42,.14);
  z-index: 50;
}
.nav-menu-right { left: auto; right: 0; }
.nav-menu:hover .nav-menu-panel, .nav-menu:focus-within .nav-menu-panel { display: flex; }
.nav-menu-panel a { display: block; white-space: nowrap; }

/* Keep the contest open button close to the title, not at the far right of the card. */
.contest-card-title-row { justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; }
.contest-card-title-row h2 { flex: 0 1 auto; }
.contest-open-inline { padding: 6px 10px; }

/* Make the guide safety notice slimmer and visually separate it from the four steps. */
.guide-note { margin-top: 30px; padding: 14px 18px; }
.guide-note h2 { margin: 0 0 6px; font-size: 22px; }
.guide-note p { margin: 0; line-height: 1.5; }

@media (max-width: 820px) {
  .nav-menu { width: 100%; display: block; }
  .nav-menu-button { width: 100%; justify-content: space-between; }
  .nav-menu-panel, .nav-menu-right { position: static; margin-top: 6px; box-shadow: none; width: 100%; }
}


/* Public activity strip between logo and navigation */
.topbar { gap: 18px; }
.service-pulse {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
.service-pulse span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  white-space: nowrap;
}
.service-pulse strong, .service-pulse b { color: var(--brand2); font-weight: 900; }
.pulse-winners { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.nav-menu-panel .active-menu-item { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); font-weight: 900; }

/* Theme modes. The original bright design is kept as theme-bright/default. */
.theme-bright {
  --bg: #f5f7fb; --card: #ffffff; --text: #111827; --ink: #111827; --muted: #6b7280; --line: #e5e7eb;
  --brand: #1d4ed8; --brand2: #0f172a; --ok: #047857; --warn: #b45309; --danger: #b91c1c;
  background: radial-gradient(circle at top left, #dbeafe 0, transparent 35%), var(--bg);
}
.theme-balanced {
  --bg: #eef2f7; --card: #ffffff; --text: #172033; --ink: #172033; --muted: #586174; --line: #d6dce8;
  --brand: #155e75; --brand2: #111827; --ok: #166534; --warn: #9a3412; --danger: #b91c1c;
  background: radial-gradient(circle at 20% 0%, #cbd5e1 0, transparent 34%), linear-gradient(180deg, #eef2f7 0%, #e9edf4 100%);
}
.theme-professional {
  --bg: #f3f4f1; --card: #ffffff; --text: #16231d; --ink: #16231d; --muted: #5c675f; --line: #d7ded5;
  --brand: #0f766e; --brand2: #1f2937; --ok: #047857; --warn: #92400e; --danger: #991b1b;
  background: linear-gradient(135deg, #f3f4f1 0%, #e8eee8 100%);
}
.theme-modern {
  --bg: #f8fafc; --card: #ffffff; --text: #0f172a; --ink: #0f172a; --muted: #64748b; --line: #e2e8f0;
  --brand: #7c3aed; --brand2: #111827; --ok: #059669; --warn: #d97706; --danger: #dc2626;
  background: radial-gradient(circle at 85% 0%, #ede9fe 0, transparent 32%), #f8fafc;
}
.theme-casino {
  --bg: #17120b; --card: #fff8e8; --text: #1f1608; --ink: #1f1608; --muted: #6f5d3f; --line: #e2c77a;
  --brand: #b45309; --brand2: #3b2204; --ok: #15803d; --warn: #a16207; --danger: #b91c1c;
  background: radial-gradient(circle at top left, rgba(234,179,8,.26), transparent 30%), radial-gradient(circle at bottom right, rgba(185,28,28,.18), transparent 34%), #17120b;
}
.theme-casino .topbar, .theme-casino .card, .theme-casino .guide-card, .theme-casino .cookie-notice { box-shadow: 0 20px 70px rgba(0,0,0,.16); }
.theme-casino .topbar { background: rgba(255,248,232,.92); }
.theme-balanced .hero-panel, .theme-professional .hero-panel { background: var(--brand2); }
.theme-modern .hero-panel { background: linear-gradient(135deg, #111827, #4c1d95); }
.theme-casino .hero-panel { background: linear-gradient(135deg, #3b2204, #7f1d1d); border-color: #e2c77a; }

@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; }
  .service-pulse { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
}
@media (max-width: 820px) {
  .service-pulse { justify-content: flex-start; }
  .pulse-winners { max-width: none; }
}


/* Refinements: stable dropdown hover bridge and more distinct visual modes. */
.nav-menu-panel { top: 100%; margin-top: 0; }
.nav-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.nav-menu:hover .nav-menu-button, .nav-menu:focus-within .nav-menu-button { background: #eff6ff; color: var(--brand); }

.theme-bright .card,
.theme-bright .guide-card {
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(15,23,42,.06);
}

.theme-balanced {
  --bg: #101827; --card: #162033; --text: #e5edf7; --ink: #f8fafc; --muted: #a8b3c7; --line: #2b3a52;
  --brand: #38bdf8; --brand2: #e0f2fe; --ok: #22c55e; --warn: #f59e0b; --danger: #fb7185;
  background:
    radial-gradient(circle at 8% 0%, rgba(56,189,248,.16), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(99,102,241,.12), transparent 32%),
    #101827;
}
.theme-balanced .topbar { background: rgba(12,18,31,.86); border-bottom-color: #26364d; }
.theme-balanced .brand, .theme-balanced .navlinks a, .theme-balanced .nav-menu-button, .theme-balanced .service-pulse strong, .theme-balanced .service-pulse b { color: #f8fafc; }
.theme-balanced .navlinks a:hover, .theme-balanced .nav-menu-button:hover, .theme-balanced .nav-menu:hover .nav-menu-button { background: rgba(56,189,248,.13); color: #7dd3fc; }
.theme-balanced .card, .theme-balanced .guide-card, .theme-balanced .cookie-notice, .theme-balanced .nav-menu-panel {
  background: rgba(22,32,51,.94);
  border-color: #2b3a52;
  box-shadow: 0 26px 80px rgba(0,0,0,.34);
}
.theme-balanced .hero-panel { background: linear-gradient(135deg, #0f172a, #075985); border-color: #1e3a5f; }
.theme-balanced input, .theme-balanced textarea, .theme-balanced select { background: #0f172a; color: #f8fafc; border-color: #334155; }
.theme-balanced .meta-grid div, .theme-balanced th, .theme-balanced .rules-box, .theme-balanced .quote-preview, .theme-balanced .metric-card, .theme-balanced .consent-box { background: #111827; border-color: #2b3a52; }
.theme-balanced .button.secondary { background: #111827; color: #f8fafc; border-color: #334155; }
.theme-balanced .lang.active, .theme-balanced .big-number, .theme-balanced .guide-step { background: #e0f2fe; color: #0f172a; }
.theme-balanced .legal-page p, .theme-balanced label { color: #d8e2f0; }

.theme-professional {
  --bg: #f2f3ef; --card: #ffffff; --text: #17211b; --ink: #101914; --muted: #58635d; --line: #cfd8d1;
  --brand: #0f766e; --brand2: #101914; --ok: #047857; --warn: #92400e; --danger: #991b1b;
  background: linear-gradient(180deg, #f7f8f5 0%, #ecefea 100%);
}
.theme-professional .topbar { background: rgba(255,255,255,.94); border-bottom: 2px solid #0f766e; }
.theme-professional .brand-mark { border-radius: 4px; }
.theme-professional .card, .theme-professional .guide-card, .theme-professional .cookie-notice {
  border-radius: 10px;
  border-color: #c7d2cc;
  box-shadow: 0 10px 28px rgba(16,25,20,.08);
}
.theme-professional .hero-panel { border-radius: 10px; background: linear-gradient(135deg, #0f2f2b, #14534d); }
.theme-professional button, .theme-professional .button, .theme-professional input, .theme-professional textarea, .theme-professional select { border-radius: 6px; }
.theme-professional .pill, .theme-professional .big-number, .theme-professional .guide-step { border-radius: 4px; }
.theme-professional h1, .theme-professional h2, .theme-professional .brand { letter-spacing: -.015em; }
.theme-professional .nav-menu-panel { border-radius: 8px; box-shadow: 0 12px 36px rgba(16,25,20,.13); }
.theme-professional th { background: #edf4f1; color: #0f3f39; }

.theme-modern {
  --bg: #eef3f8; --card: #ffffff; --text: #0f172a; --ink: #0b1220; --muted: #66758a; --line: #d8e2ee;
  --brand: #2563eb; --brand2: #0b1220; --ok: #0891b2; --warn: #d97706; --danger: #dc2626;
  background:
    linear-gradient(120deg, rgba(219,234,254,.85), transparent 42%),
    linear-gradient(180deg, #f8fbff 0%, #e9eff6 100%);
}
.theme-modern .topbar { background: rgba(248,251,255,.82); border-bottom-color: #d8e2ee; box-shadow: 0 10px 30px rgba(15,23,42,.04); }
.theme-modern .card, .theme-modern .guide-card, .theme-modern .cookie-notice {
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 44px rgba(31,41,55,.07);
}
.theme-modern .hero-panel { background: linear-gradient(135deg, #0b1220, #1e40af); }
.theme-modern .button, .theme-modern button { border-radius: 999px; }
.theme-modern input, .theme-modern textarea, .theme-modern select { border-radius: 14px; background: #fbfdff; }
.theme-modern .pill, .theme-modern .service-pulse span { background: rgba(219,234,254,.68); }
.theme-modern .guide-step { background: #2563eb; }
.theme-modern .meta-grid div, .theme-modern .metric-card { background: #f8fbff; }

.theme-casino .card, .theme-casino .guide-card {
  border-width: 1px;
  background: linear-gradient(180deg, #fff8e8 0%, #f6e6bd 100%);
}
.theme-casino .button, .theme-casino button { box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 24px rgba(180,83,9,.18); }
.theme-casino .service-pulse span { background: rgba(255,248,232,.78); border-color: #d8b65d; }
.theme-casino .guide-step, .theme-casino .big-number { background: linear-gradient(135deg, #3b2204, #92400e); color: #fffbeb; }


/* Avatar display */
.user-avatar { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; font-weight: 800; flex-shrink: 0; box-shadow: 0 6px 16px rgba(15,23,42,.14); }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-avatar-small { width: 30px; height: 30px; font-size: 13px; }
.user-avatar-large { width: 96px; height: 96px; font-size: 34px; }
.profile-menu-button { display: inline-flex; gap: 8px; align-items: center; }
.avatar-preview-row { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.avatar-settings-card input[type="file"] { padding: 11px; background: var(--panel); }

/* Golden Play readability improvements */
.theme-casino { --text: #fff7df; --muted: #f3d88d; --line: rgba(245,202,96,.34); --panel: #24170a; --card: #2b1a0b; --brand: #f7c948; --brand2: #ef8f2f; --danger: #ffb4a2; background: radial-gradient(circle at top left, rgba(234,179,8,.22), transparent 28%), radial-gradient(circle at bottom right, rgba(185,28,28,.18), transparent 34%), #120b05; color: var(--text); }
.theme-casino .topbar { background: rgba(28,18,8,.94); border-bottom-color: rgba(245,202,96,.38); }
.theme-casino .brand, .theme-casino .navlinks a, .theme-casino .nav-menu-button, .theme-casino .service-pulse strong, .theme-casino .service-pulse b { color: #fff7df; }
.theme-casino .service-pulse span, .theme-casino .lang, .theme-casino .pill { background: rgba(255,244,214,.10); color: #ffe8a3; border-color: rgba(245,202,96,.32); }
.theme-casino .lang.active, .theme-casino .navlinks a:hover, .theme-casino .nav-menu-button:hover, .theme-casino .nav-menu:hover .nav-menu-button { background: rgba(247,201,72,.18); color: #fff7df; }
.theme-casino .card, .theme-casino .guide-card, .theme-casino .cookie-notice, .theme-casino .nav-menu-panel { background: linear-gradient(180deg, rgba(48,31,14,.98), rgba(36,22,9,.98)); color: #fff7df; border-color: rgba(245,202,96,.35); }
.theme-casino .card p, .theme-casino .guide-card p, .theme-casino .hint, .theme-casino .muted, .theme-casino .page-head p, .theme-casino .hero.modern p, .theme-casino label { color: #f3d88d; }
.theme-casino input, .theme-casino textarea, .theme-casino select { background: #160d05; color: #fff7df; border-color: rgba(245,202,96,.35); }
.theme-casino input::placeholder, .theme-casino textarea::placeholder { color: #c9a85d; }
.theme-casino th { background: rgba(247,201,72,.16); color: #fff3c4; }
.theme-casino td { color: #fff7df; }
.theme-casino .button.secondary { background: rgba(255,247,223,.08); color: #fff7df; border-color: rgba(245,202,96,.35); }
.theme-casino .flash.success { color: #dbfce7; background: rgba(22,101,52,.35); }
.theme-casino .flash.danger { color: #ffe4e6; background: rgba(159,18,57,.35); }
.theme-casino .flash.warning { color: #fef3c7; background: rgba(146,64,14,.38); }
.theme-casino a { color: #ffe08a; }

/* Professional Edge: colder metallic look */
.theme-professional { --bg: #e7ebf0; --panel: #f5f7fa; --card: #f9fafb; --text: #111827; --muted: #4b5563; --brand: #334155; --brand2: #64748b; --line: #c7ced8; background: linear-gradient(135deg, #cfd6df 0%, #f7f9fb 42%, #d5dbe4 100%); }
.theme-professional .topbar { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(223,230,238,.96)); border-bottom: 1px solid #aeb8c5; box-shadow: 0 12px 28px rgba(15,23,42,.08); }
.theme-professional .brand-mark { border-radius: 3px; filter: saturate(.85) contrast(1.08); }
.theme-professional .card, .theme-professional .guide-card, .theme-professional .cookie-notice { background: linear-gradient(180deg, #ffffff, #eef2f6); border: 1px solid #b8c2cf; border-radius: 6px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 44px rgba(51,65,85,.10); }
.theme-professional .hero-panel { border-radius: 6px; background: linear-gradient(135deg, #1f2937, #64748b 52%, #111827); border-color: #94a3b8; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 22px 60px rgba(15,23,42,.18); }
.theme-professional button, .theme-professional .button { border-radius: 4px; background: linear-gradient(180deg, #475569, #1f2937); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.theme-professional .button.secondary { background: linear-gradient(180deg, #f8fafc, #dbe3ec); color: #1f2937; border-color: #aeb8c5; }
.theme-professional input, .theme-professional textarea, .theme-professional select { border-radius: 4px; background: linear-gradient(180deg, #ffffff, #f1f5f9); border-color: #aeb8c5; }
.theme-professional th { background: linear-gradient(180deg, #e5eaf0, #cfd8e3); color: #1f2937; border-bottom-color: #b8c2cf; }
.theme-professional .nav-menu-panel { border-radius: 6px; background: linear-gradient(180deg, #ffffff, #e7edf4); border-color: #aeb8c5; box-shadow: 0 16px 40px rgba(51,65,85,.16); }


/* Navigation readability: parent dropdown buttons should look like text links, not filled action buttons. */
.navlinks .nav-menu-button,
.navlinks .nav-menu-button:hover,
.navlinks .nav-menu:hover .nav-menu-button,
.navlinks .nav-menu:focus-within .nav-menu-button {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  color: var(--text) !important;
  filter: none !important;
}
.theme-balanced .navlinks .nav-menu-button,
.theme-balanced .navlinks .nav-menu-button:hover,
.theme-balanced .nav-menu:hover .nav-menu-button,
.theme-balanced .nav-menu:focus-within .nav-menu-button,
.theme-casino .navlinks .nav-menu-button,
.theme-casino .navlinks .nav-menu-button:hover,
.theme-casino .nav-menu:hover .nav-menu-button,
.theme-casino .nav-menu:focus-within .nav-menu-button {
  color: #f8fafc !important;
}
.theme-casino .mode-nav-menu .nav-menu-button { color: #fff7df !important; }
.nav-menu-panel a:hover { background: rgba(37,99,235,.10); }
.theme-balanced .nav-menu-panel a,
.theme-casino .nav-menu-panel a { color: #fff7df; }
.theme-balanced .nav-menu-panel a:hover { background: rgba(125,211,252,.16); color: #ffffff; }
.theme-casino .nav-menu-panel a:hover { background: rgba(247,201,72,.18); color: #ffffff; }

/* Golden Play stronger contrast pass. */
.theme-casino,
.theme-casino main,
.theme-casino .container { color: #fff8dc; }
.theme-casino .card,
.theme-casino .guide-card,
.theme-casino .cookie-notice,
.theme-casino .nav-menu-panel,
.theme-casino .hero.modern,
.theme-casino .page-head,
.theme-casino .table-wrap,
.theme-casino .legal-page,
.theme-casino .rules-box,
.theme-casino .quote-preview,
.theme-casino .metric-card,
.theme-casino .consent-box,
.theme-casino .meta-grid div {
  background: linear-gradient(180deg, #34200d, #211307) !important;
  color: #fff8dc !important;
  border-color: rgba(255,213,103,.48) !important;
}
.theme-casino h1,
.theme-casino h2,
.theme-casino h3,
.theme-casino strong,
.theme-casino b,
.theme-casino .label,
.theme-casino .eyebrow,
.theme-casino .brand span,
.theme-casino .topbar a,
.theme-casino .ranking-table td,
.theme-casino .ranking-table th,
.theme-casino table td,
.theme-casino table th {
  color: #fffbe8 !important;
}
.theme-casino p,
.theme-casino li,
.theme-casino label,
.theme-casino .hint,
.theme-casino .muted,
.theme-casino .page-head p,
.theme-casino .hero.modern p,
.theme-casino .guide-card p,
.theme-casino .legal-page p {
  color: #ffe6a7 !important;
}
.theme-casino input,
.theme-casino textarea,
.theme-casino select {
  background: #0f0904 !important;
  color: #fffbe8 !important;
  border-color: rgba(255,213,103,.55) !important;
}
.theme-casino input:disabled,
.theme-casino textarea:disabled,
.theme-casino select:disabled { color: #cdbd95 !important; background: #231609 !important; }
.theme-casino .button.secondary,
.theme-casino a.button.secondary { background: #2a1a0a !important; color: #fffbe8 !important; }
.theme-casino .service-pulse span,
.theme-casino .lang,
.theme-casino .pill { color: #fff2bf !important; background: rgba(255,213,103,.13) !important; }
.theme-casino .lang.active { background: #ffd567 !important; color: #241303 !important; }
.theme-casino .flash { border-color: rgba(255,255,255,.16); }
.theme-casino .danger-button { background: linear-gradient(180deg, #991b1b, #7f1d1d) !important; color: #fff7ed !important; }

.danger-zone-card { border-color: rgba(220,38,38,.25); }
.danger-button { background: #b91c1c; color: #fff; }
.danger-button:hover { background: #991b1b; }

/* Golden Play contest title readability fix.
   Contest titles are links, so the global hover/link styles can otherwise
   make them too dark on the Golden Play background. Keep them high-contrast
   in all link states. */
.theme-casino .contest-title-link,
.theme-casino .contest-title-link:link,
.theme-casino .contest-title-link:visited,
.theme-casino .contest-title-link:hover,
.theme-casino .contest-title-link:focus,
.theme-casino .contest-title-link:active,
.theme-casino .contest-title-link.no-arrow,
.theme-casino .contest-title-link.no-arrow:link,
.theme-casino .contest-title-link.no-arrow:visited,
.theme-casino .contest-title-link.no-arrow:hover,
.theme-casino .contest-title-link.no-arrow:focus,
.theme-casino .contest-title-link.no-arrow:active {
  color: #fffbe8 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.theme-casino .contest-title-link:hover,
.theme-casino .contest-title-link.no-arrow:hover {
  color: #ffd567 !important;
}


/* Homepage: simple, premium landing page inspired by modern fintech layouts. */
.landing-hero {
  min-height: calc(100vh - 128px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .8fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: center;
  padding: clamp(18px, 3.6vw, 46px) 0 clamp(30px, 5vw, 64px);
}
.landing-copy h1 {
  max-width: 820px;
  margin: 12px 0 18px;
  font-size: clamp(40px, 6.7vw, 78px);
  line-height: 1.03;
  letter-spacing: -.068em;
}
.landing-copy p {
  max-width: 680px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
}
.landing-card {
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 30px;
  padding: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 80%, transparent));
  box-shadow: 0 30px 90px rgba(15,23,42,.12);
  color: var(--brand);
}
.landing-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; color: var(--text); font-weight: 900; }
.landing-card-head strong { color: var(--ok); font-size: 28px; }
.landing-chart { margin: 28px 0; color: var(--brand); }
.landing-chart svg { width: 100%; height: auto; display: block; }
.landing-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.landing-card-grid div, .landing-feature {
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  background: color-mix(in srgb, var(--panel, var(--card)) 78%, transparent);
  border-radius: 18px;
  padding: 14px;
}
.landing-card-grid span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.landing-card-grid strong { color: var(--text); font-size: 22px; }
.landing-section {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 28px;
  align-items: start;
  padding: 30px 0;
}
.landing-section h2 { font-size: clamp(30px, 4vw, 54px); line-height: 1.02; letter-spacing: -.055em; margin: 10px 0 0; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.landing-feature strong { color: var(--text); font-size: 18px; }
.landing-feature p { color: var(--muted); line-height: 1.6; margin-bottom: 0; }
.landing-note { margin: 28px 0 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--card) 90%, transparent); }
.landing-note p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }
.contest-action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.contest-action-row form { margin: 0; }
.contest-title-link span { transform: none; }
.contest-title-link:hover span { transform: translateX(-3px); }
.theme-casino .container .button:not(.secondary):not(.danger),
.theme-casino .container button:not(.secondary):not(.danger):not(.nav-menu-button),
.theme-casino main .button:not(.secondary):not(.danger),
.theme-casino main button:not(.secondary):not(.danger):not(.nav-menu-button) {
  background: linear-gradient(180deg, #ffe083 0%, #f7c948 50%, #d89016 100%) !important;
  color: #221100 !important;
  text-shadow: none !important;
  border: 1px solid rgba(255,231,148,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 12px 26px rgba(216,144,22,.22) !important;
}
.theme-casino .container .button:not(.secondary):not(.danger):hover,
.theme-casino .container button:not(.secondary):not(.danger):not(.nav-menu-button):hover,
.theme-casino main .button:not(.secondary):not(.danger):hover,
.theme-casino main button:not(.secondary):not(.danger):not(.nav-menu-button):hover {
  color: #160a00 !important;
  filter: brightness(1.04) contrast(1.05) !important;
}
.theme-casino .landing-card,
.theme-casino .landing-feature,
.theme-casino .landing-note,
.theme-casino .landing-card-grid div { background: linear-gradient(180deg, #34200d, #211307) !important; border-color: rgba(255,213,103,.48) !important; }
.theme-casino .landing-card-head,
.theme-casino .landing-card-grid strong,
.theme-casino .landing-feature strong,
.theme-casino .landing-note strong { color: #fffbe8 !important; }
.theme-casino .landing-copy p,
.theme-casino .landing-feature p,
.theme-casino .landing-note p,
.theme-casino .landing-card-grid span { color: #ffe6a7 !important; }
.theme-casino .landing-chart { color: #ffd567 !important; }
@media (max-width: 900px) {
  .landing-hero, .landing-section { grid-template-columns: 1fr; }
  .landing-feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .landing-card-grid { grid-template-columns: 1fr; }
}


/* Natural-language homepage typography: keep long German/Korean copy from breaking awkwardly. */
.landing-copy h1 { text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
html[lang="de"] .landing-copy h1 {
  max-width: 1040px;
  font-size: clamp(36px, 4.9vw, 66px);
  line-height: 1.08;
  letter-spacing: -.048em;
}
html[lang="ko"] .landing-copy h1 {
  max-width: 900px;
  font-size: clamp(36px, 5.6vw, 70px);
  line-height: 1.18;
  letter-spacing: -.05em;
  word-break: keep-all;
}
html[lang="de"] .landing-copy p,
html[lang="ko"] .landing-copy p { max-width: 760px; }
html[lang="de"] .landing-hero { grid-template-columns: minmax(0, 1.18fr) minmax(320px, .72fr); }
@media (max-width: 1100px) {
  html[lang="de"] .landing-copy h1 { font-size: clamp(32px, 5.8vw, 58px); }
}
@media (max-width: 900px) {
  html[lang="de"] .landing-copy h1,
  html[lang="ko"] .landing-copy h1 { max-width: 100%; }
}


/* High-visibility links in authentication forms */
.auth-link {
  color: var(--brand) !important;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.auth-link:hover { color: var(--brand2) !important; }
.theme-casino .auth-link { color: #ffd567 !important; }
.theme-casino .auth-link:hover { color: #fff7df !important; }


/* Homepage first-screen balance and authentication link refinement */
.auth-link-plain {
  color: var(--text) !important;
  font-weight: 900;
  text-decoration: none !important;
  text-underline-offset: 0;
}
.auth-link-plain:hover { color: var(--brand) !important; text-decoration: none !important; }
.theme-casino .auth-link-plain { color: #fffbe8 !important; }
.theme-casino .auth-link-plain:hover { color: #ffd567 !important; }
body.home-page .landing-hero { margin-top: 0; }
body.home-page .landing-card { transform: translateY(-8px); }
body.home-page .landing-copy .eyebrow { margin-top: 0; }
@media (max-width: 900px) {
  body.home-page .landing-card { transform: none; }
}

/* League list leader summary */
.leader-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8fafc;
}
.leader-label { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.leader-person { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.leader-person strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-placeholder { color: var(--muted); font-weight: 800; }
.guide-cta { white-space: nowrap; flex-shrink: 0; min-width: max-content; }
.theme-casino .leader-summary { background: #2a1a0a; border-color: rgba(245,202,96,.35); }
.theme-casino .leader-label,
.theme-casino .leader-placeholder { color: #f3d88d; }

/* Preserve auto-generated league condition paragraph spacing. */
.pre-line { white-space: pre-line; }

/* Simulation and risk notices */
.notice-card {
  border: 1px solid rgba(14, 165, 233, .22);
  background: #f0f9ff;
  color: #075985;
  border-radius: 18px;
  padding: 14px 18px;
  font-weight: 800;
  line-height: 1.55;
  margin-bottom: 18px;
}
.performance-chart-box { margin-top: 16px; color: var(--brand); min-height: 170px; height: 170px; flex: 0 0 170px; }
.soft-danger-zone {
  border-color: rgba(220, 38, 38, .20);
  background: #fff7f7;
}
.button.danger, button.danger {
  background: #b42318 !important;
  color: #fff !important;
  border-color: #b42318 !important;
}
.theme-casino .notice-card {
  background: #221607;
  color: #ffe6a7;
  border-color: rgba(255, 213, 103, .45);
}
.theme-casino .soft-danger-zone {
  background: #28140f;
  border-color: rgba(255, 120, 120, .35);
}

.button.disabled,
a.button.disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Operational/admin additions */
.inline-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.notice-list{display:grid;gap:.75rem;margin-top:1rem}.notice-item{border:1px solid var(--border);border-radius:14px;padding:1rem;background:rgba(255,255,255,.55)}.notice-item p{margin:.35rem 0}.notice-item small{color:var(--muted)}.log-viewer{max-height:320px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:rgba(15,23,42,.04);border-radius:14px;padding:1rem;font-size:.82rem}.log-card{min-width:0}.button.disabled,button.disabled{opacity:.55;cursor:not-allowed}.top-gap{margin-top:1rem}

.symbol-helper { margin-top: .75rem; }
.symbol-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.symbol-chip, .symbol-result {
  border: 1px solid var(--border-color, #d0d5dd);
  background: var(--card-bg, #fff);
  color: var(--text-color, #111827);
  border-radius: 999px;
  padding: .45rem .7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 100%;
}
.symbol-chip span { font-size: .78rem; color: var(--muted-color, #667085); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.symbol-search-results { display: grid; gap: .4rem; margin-top: .6rem; }
.symbol-result {
  border-radius: .75rem;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}
.symbol-result span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.symbol-result em { font-style: normal; color: var(--muted-color, #667085); font-size: .78rem; white-space: nowrap; }
.market-status.open { color: #067647; }
.market-status.closed, .market-status.after_hours, .market-status.pre_market { color: var(--muted-color, #667085); }

/* 2026-07-01: homepage marketing copy spacing refresh */
.landing-copy h1 {
  line-height: 1.14;
  letter-spacing: -0.052em;
}
.landing-section h2 {
  line-height: 1.16;
  letter-spacing: -0.045em;
}
html[lang="de"] .landing-copy h1 {
  line-height: 1.16;
  letter-spacing: -0.042em;
}
html[lang="ko"] .landing-copy h1 {
  line-height: 1.24;
  letter-spacing: -0.038em;
}
html[lang="ko"] .landing-section h2 {
  line-height: 1.24;
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.notice-box {
  margin: 18px 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.72);
}
.notice-box h2 { margin-top: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.invite-auth-actions .button { text-decoration: none; }

/* 2026-07-01: contest quota and field help UI */
.quota-note { margin-top: .55rem; color: var(--muted); }
.quota-panel { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 1.25rem; }
.quota-panel > div { border: 1px solid var(--border); border-radius: 14px; padding: .75rem 1rem; background: rgba(255,255,255,.55); min-width: 190px; }
.quota-panel span { display: block; color: var(--muted); font-size: .88rem; margin-bottom: .3rem; }
.quota-panel strong { font-size: 1.15rem; }
.field-label-with-help { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .35rem; }
.field-help { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: rgba(37,99,235,.12); color: var(--primary); border: 1px solid rgba(37,99,235,.22); font-weight: 800; font-size: .78rem; cursor: help; line-height: 1; vertical-align: middle; }
.field-help:focus { outline: 3px solid rgba(37,99,235,.18); outline-offset: 2px; }

/* Beginner-friendly guidance blocks: keeps the professional theme but lowers first-use friction. */
.beginner-helper {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 680px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 86%, var(--brand) 8%);
  box-shadow: 0 16px 45px rgba(15,23,42,.06);
}
.beginner-helper-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 88%, #fff 12%);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.beginner-helper-badge {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}
.beginner-helper strong { display: block; color: var(--text); font-size: 18px; }
.beginner-helper p { margin: 6px 0 8px; color: var(--muted); line-height: 1.55; }
.beginner-helper a { font-weight: 900; color: var(--brand); text-decoration: none; }
.beginner-helper a:hover { text-decoration: underline; }

.guide-beginner-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 20px;
  padding: 18px 20px;
  border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
  background: color-mix(in srgb, var(--card) 90%, var(--brand) 5%);
}
.guide-beginner-note h2 { margin: 0 0 6px; font-size: 22px; }
.guide-beginner-note p { margin: 0; color: var(--muted); line-height: 1.6; }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 38px 24px;
}
.empty-state-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--brand) 12%, var(--card));
  color: var(--brand);
  font-size: 24px;
  font-weight: 900;
}
.empty-state h2 { margin: 0 0 8px; font-size: 24px; }
.empty-state p { margin: 0 auto; max-width: 560px; color: var(--muted); line-height: 1.6; }
.empty-state-actions { margin-top: 18px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

.theme-casino .beginner-helper,
.theme-casino .guide-beginner-note,
.theme-casino .empty-state {
  background: linear-gradient(180deg, #34200d, #211307) !important;
  border-color: rgba(255,213,103,.48) !important;
}
.theme-casino .beginner-helper strong,
.theme-casino .guide-beginner-note h2,
.theme-casino .empty-state h2 { color: #fffbe8 !important; }
.theme-casino .beginner-helper p,
.theme-casino .guide-beginner-note p,
.theme-casino .empty-state p { color: #ffe6a7 !important; }
.theme-casino .beginner-helper-badge,
.theme-casino .beginner-helper a,
.theme-casino .empty-state-icon { color: #ffd567 !important; }
.theme-casino .beginner-helper-icon { background: linear-gradient(135deg, #3b2204, #92400e); color: #fffbeb; }

@media (max-width: 720px) {
  .beginner-helper, .guide-beginner-note { border-radius: 18px; }
  .guide-beginner-note { flex-direction: column; }
}

/* 2026-07-02: clearer contest setup flow */
.contest-form-head { margin-bottom: 10px; }
.contest-setup-quota { margin: 0 0 18px; }
.contest-setup-form { display: grid; gap: 16px; }
.setup-section { margin-bottom: 0; }
.setup-section-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.setup-section-head h2 { margin-bottom: 4px; }
.setup-step { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; font-weight: 900; box-shadow: 0 8px 18px rgba(29,78,216,.18); }
.setup-submit-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: 0 -10px 30px rgba(15,23,42,.08); backdrop-filter: blur(14px); }
.setup-submit-bar .hint { margin: 0; }
.mini-hint { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.45; }
.contest-manage-form { align-items: start; }
@media (max-width: 820px) {
  .setup-submit-bar { position: static; flex-direction: column; align-items: stretch; }
  .setup-section-head { gap: 10px; }
}

/* 2026-07-02: homepage first-screen balance and compact activity proof. */
body.home-page .landing-hero {
  align-items: start;
  min-height: auto;
  padding-top: clamp(34px, 4.5vw, 72px);
}
body.home-page .landing-card {
  align-self: start;
  margin-top: clamp(44px, 8vw, 96px);
  transform: none;
}
.activity-pulse {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel, var(--card)) 78%, transparent);
  color: var(--text);
}
.activity-pulse-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}
.activity-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 16%, transparent);
  flex: 0 0 auto;
}
.activity-pulse p {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.activity-pulse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.activity-pulse-grid div {
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 14px;
  padding: 10px;
  background: color-mix(in srgb, var(--card) 76%, transparent);
}
.activity-pulse-grid strong {
  display: block;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  margin-bottom: 6px;
}
.activity-pulse-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}
.theme-casino .activity-pulse,
.theme-casino .activity-pulse-grid div {
  background: linear-gradient(180deg, #34200d, #211307) !important;
  border-color: rgba(255,213,103,.48) !important;
}
.theme-casino .activity-pulse-head,
.theme-casino .activity-pulse-grid strong { color: #fffbe8 !important; }
.theme-casino .activity-pulse p,
.theme-casino .activity-pulse-grid span { color: #ffe6a7 !important; }
.theme-casino .activity-dot { background: #00a36c; box-shadow: 0 0 0 5px rgba(0,163,108,.22); }
@media (max-width: 900px) {
  body.home-page .landing-card { margin-top: 0; }
}
@media (max-width: 640px) {
  .activity-pulse-grid { grid-template-columns: 1fr; }
}


/* 2026-07-02: compact live activity pulse in top navigation. */
.market-pulse {
  flex: 1 1 360px;
  min-width: 260px;
  max-width: 520px;
  overflow: hidden;
  justify-content: flex-start;
  text-align: left;
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.market-pulse-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  gap: 0;
  animation: marketPulseScroll 44s linear infinite;
  will-change: transform;
}
.market-pulse-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  padding-inline: 10px;
}
.market-pulse span {
  gap: 7px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--card) 72%, transparent);
}
.market-pulse b {
  color: var(--muted);
  font-weight: 800;
}
.market-pulse em {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand2);
  font-style: normal;
  font-weight: 900;
}
.market-pulse i { color: var(--line); font-style: normal; }
@keyframes marketPulseScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-25%, 0, 0); }
}
.theme-casino .market-pulse b { color: #ffe6a7 !important; }
.theme-casino .market-pulse em { color: #ffe8a3 !important; background: rgba(255,232,163,.12); }
.theme-casino .market-pulse i { color: rgba(255,232,163,.35); }
body.home-page .landing-card {
  margin-top: clamp(0px, .8vw, 10px);
}
@media (prefers-reduced-motion: reduce) {
  .market-pulse-track { animation: none; }
}
@media (min-width: 1101px) {
  .market-pulse-track {
    animation: marketPulseScroll 44s linear infinite;
  }
}
@media (max-width: 1100px) {
  .market-pulse { max-width: none; flex-basis: 100%; }
  .market-pulse-track { animation-duration: 34s; }
}
@media (max-width: 640px) {
  .market-pulse { display: none; }
}

.translation-admin-intro p {
  margin-top: 0;
  color: var(--muted);
}
.translation-search {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.translation-search input[type="search"] {
  min-width: 280px;
  flex: 1;
}
.translation-admin-head,
.translation-row-meta,
.translation-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.translation-list {
  display: grid;
  gap: 16px;
}
.translation-row {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  background: color-mix(in srgb, var(--card) 96%, transparent);
}
.translation-row.has-override {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
}
.translation-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  margin-right: 8px;
}
.translation-lang-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.translation-lang-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  background: var(--bg-soft);
}
.translation-lang-panel label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 8px;
}
.translation-lang-panel textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
}
.translation-default,
.translation-effective {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.translation-default strong,
.translation-effective strong {
  display: block;
  color: var(--text);
  margin-bottom: 3px;
}
.translation-default span,
.translation-effective span {
  overflow-wrap: anywhere;
}
@media (max-width: 980px) {
  .translation-lang-grid {
    grid-template-columns: 1fr;
  }
}

.translation-build-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 12px 0 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 7%, var(--card));
}
.translation-build-status div {
  display: grid;
  gap: 3px;
}
.translation-build-status span {
  color: var(--muted);
  font-size: 13px;
}
.translation-excel-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px;
  margin: 0 0 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
}
.translation-excel-panel p {
  margin: 5px 0 0;
}
.translation-excel-actions,
.translation-excel-upload-form {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}
.translation-excel-actions {
  justify-content: flex-end;
}
.compact-file-field {
  display: grid;
  gap: 5px;
  min-width: 250px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.compact-file-field input[type="file"] {
  max-width: 340px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
}
@media (max-width: 720px) {
  .translation-build-status {
    align-items: flex-start;
    flex-direction: column;
  }
  .translation-excel-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .translation-excel-actions,
  .translation-excel-upload-form {
    align-items: stretch;
    justify-content: stretch;
    flex-direction: column;
  }
  .compact-file-field,
  .compact-file-field input[type="file"] {
    width: 100%;
    max-width: none;
  }
}

/* Contest announcements and participant comments */
.announcement-card .notice-list.compact{margin-top:.75rem}
.notice-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.notice-item.pinned{border-color:rgba(214,153,0,.42);background:linear-gradient(135deg,rgba(255,248,220,.7),rgba(255,255,255,.58))}
.pin-badge{display:inline-flex;align-items:center;border-radius:999px;padding:.16rem .48rem;background:rgba(214,153,0,.13);color:#8a5b00;font-size:.74rem;font-weight:800;margin-right:.3rem}
.comment-card{overflow:hidden}.comment-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.65rem;align-items:center;margin-top:1rem}.comment-form input{width:100%}.comment-list{display:grid;gap:.65rem;margin-top:1rem}.comment-item{border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.55);padding:.9rem 1rem}.comment-item p{margin:.4rem 0 0;word-break:break-word}.comment-meta{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.comment-meta small{color:var(--muted)}.comment-actions{display:flex;gap:.45rem;margin-top:.55rem;flex-wrap:wrap}
[data-theme="golden"] .comment-item,[data-theme="golden"] .notice-item{background:rgba(255,255,255,.72)}
@media(max-width:640px){.comment-form{grid-template-columns:1fr}.comment-form button{width:100%}}

/* 2026-07-02: compact contest comments near the page bottom. */
.compact-comment-card { padding: 18px 20px; }
.compact-title-row { margin-bottom: 10px; }
.compact-title-row h2 { margin: 0; }
.compact-comment-form { margin-top: 0; }
.compact-comment-list { gap: 6px; margin-top: 12px; }
.comment-row {
  display: grid;
  grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 38px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.comment-row:first-child { border-top: 0; }
.comment-author { color: var(--text); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-body { margin: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-comment-actions { margin: 0; justify-content: flex-end; }
.compact-comment-actions form { margin: 0; }
.comment-action-spacer { display: inline-block; width: 1px; height: 1px; }
@media (max-width: 700px) {
  .comment-row { grid-template-columns: 1fr; gap: 4px; align-items: start; }
  .comment-body { white-space: normal; }
  .compact-comment-actions { justify-content: flex-start; }
}

/* 2026-07-02: compact proof of recently completed contests on the homepage. */
.closed-contest-pulse {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel, var(--card)) 78%, transparent);
  color: var(--text);
}
.closed-contest-pulse p {
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.closed-contest-list { display: grid; gap: 6px; }
.closed-contest-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, auto) minmax(64px, auto);
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 74%, transparent);
}
.closed-contest-row strong,
.closed-contest-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.closed-contest-row span { color: var(--muted); font-size: 12px; font-weight: 800; }
.closed-contest-row em { font-style: normal; font-weight: 900; text-align: right; }
.theme-casino .closed-contest-pulse,
.theme-casino .closed-contest-row {
  background: linear-gradient(180deg, #34200d, #211307) !important;
  border-color: rgba(255,213,103,.48) !important;
}
.theme-casino .closed-contest-pulse .activity-pulse-head,
.theme-casino .closed-contest-row strong { color: #fffbe8 !important; }
.theme-casino .closed-contest-pulse p,
.theme-casino .closed-contest-row span { color: #ffe6a7 !important; }
@media (max-width: 640px) {
  .closed-contest-row { grid-template-columns: 1fr; gap: 4px; }
  .closed-contest-row em { text-align: left; }
}

/* Contest list view switcher */
.contest-view-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
}
.contest-view-toolbar > span { color: var(--muted); font-size: 13px; font-weight: 800; }
.segmented-buttons { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.segmented-buttons .button.active,
.segmented-buttons button.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.contest-list-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.contest-list.view-balanced .contest-list-items { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; }
.contest-list.view-balanced .contest-card { gap: 10px; padding: 16px; }
.contest-list.view-balanced .contest-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contest-list.view-balanced .meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contest-list.view-list .contest-list-items { display: flex; flex-direction: column; gap: 8px; }
.contest-list.view-list .contest-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(190px, .9fr) minmax(260px, 1.15fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.contest-list.view-list .contest-card:hover { transform: none; }
.contest-list.view-list .contest-card-tags { align-self: center; justify-content: flex-start; }
.contest-list.view-list .contest-card-title-row { align-items: center; gap: 8px; }
.contest-list.view-list .contest-card-title-row h2 { font-size: 18px; }
.contest-list.view-list .contest-card-description { display: none; }
.contest-list.view-list .contest-open-inline { padding: 7px 10px; }
.contest-list.view-list .leader-summary { margin: 0; min-width: 0; }
.contest-list.view-list .leader-label { font-size: 11px; }
.contest-list.view-list .leader-person { flex-wrap: nowrap; min-width: 0; }
.contest-list.view-list .leader-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contest-list.view-list .meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.contest-list.view-list .meta-grid div { padding: 7px 9px; border-radius: 10px; }
.contest-list.view-list .meta-grid .meta-deadline,
.contest-list.view-list .meta-grid .meta-capital { display: none; }
.contest-list.view-list .contest-action-row { margin-top: 0; justify-content: flex-end; }
.contest-list.view-list .contest-action-row form { margin: 0; }
.theme-balanced .contest-view-toolbar,
.theme-balanced .segmented-buttons .button.secondary,
.theme-balanced .segmented-buttons button.secondary { background: rgba(17,24,39,.82); border-color: #334155; }
.theme-casino .contest-view-toolbar { background: rgba(255,248,232,.92); border-color: #e2c77a; }
@media (max-width: 980px) {
  .contest-list.view-list .contest-card { grid-template-columns: 1fr; align-items: stretch; }
  .contest-list.view-list .contest-action-row { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .contest-view-toolbar { align-items: stretch; flex-direction: column; }
  .segmented-buttons { justify-content: flex-start; }
  .contest-list.view-balanced .contest-list-items { grid-template-columns: 1fr; }
}

/* Contest customization: custom URL, logo, cover image, accent, and sorting */
.slug-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
}
.slug-input-row span {
  padding: 11px 12px;
  color: var(--muted);
  font-weight: 900;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--line) 28%, transparent);
}
.slug-input-row input { border: 0 !important; border-radius: 0 !important; min-width: 0; }
.contest-sort-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.contest-sort-control select {
  width: auto;
  min-width: 150px;
  padding: 8px 10px;
  border-radius: 12px;
}
.contest-card-media {
  position: relative;
  min-height: 46px;
  margin: -2px 0 4px;
}
.contest-card-media.has-cover {
  height: 94px;
  margin: -6px -6px 6px;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--brand) 14%, var(--card));
}
.contest-card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contest-card-logo {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid var(--card);
  box-shadow: var(--shadow-soft);
  background: var(--card);
}
.contest-card-media.has-cover .contest-card-logo {
  position: absolute;
  left: 14px;
  bottom: -20px;
}
.contest-card-media.has-cover + .contest-card-main { padding-top: 12px; }
.contest-tagline {
  margin: -2px 0 8px;
  color: var(--brand-2);
  font-size: 13px;
  font-weight: 900;
}
.hero-tagline { margin-top: 2px; font-size: 15px; }
.contest-title-with-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.contest-title-with-logo img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: var(--card);
}
.contest-hero {
  background-size: cover;
  background-position: center;
}
.upload-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.upload-current img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.upload-current.cover img { width: 120px; height: 54px; }
.inline-check { margin: 0 !important; font-size: 12px; color: var(--muted); }
.contest-accent-blue { border-top-color: #60a5fa !important; }
.contest-accent-green { border-top-color: #34d399 !important; }
.contest-accent-red { border-top-color: #fb7185 !important; }
.contest-accent-gold { border-top-color: #f59e0b !important; }
.contest-accent-purple { border-top-color: #a78bfa !important; }
.contest-accent-slate { border-top-color: #64748b !important; }
.contest-card[class*="contest-accent-"] { border-top-width: 4px; }
.contest-list.view-list .contest-card-media,
.contest-list.view-list .contest-tagline { display: none; }
.contest-list.view-list .contest-card[class*="contest-accent-"] { border-top-width: 1px; border-left-width: 4px; }
@media (max-width: 720px) {
  .contest-sort-control { align-items: stretch; flex-direction: column; }
  .contest-sort-control select { width: 100%; }
  .contest-title-with-logo img { width: 46px; height: 46px; }
}

/* 2026-07-02: logo aspect ratio and randomized default avatar colors */
.user-avatar.avatar-color-blue { background: linear-gradient(135deg, #2563eb, #1e40af); }
.user-avatar.avatar-color-green { background: linear-gradient(135deg, #059669, #047857); }
.user-avatar.avatar-color-purple { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.user-avatar.avatar-color-rose { background: linear-gradient(135deg, #e11d48, #be123c); }
.user-avatar.avatar-color-amber { background: linear-gradient(135deg, #f59e0b, #b45309); }
.user-avatar.avatar-color-cyan { background: linear-gradient(135deg, #0891b2, #0e7490); }
.user-avatar.avatar-color-slate { background: linear-gradient(135deg, #475569, #1e293b); }
.user-avatar.avatar-color-indigo { background: linear-gradient(135deg, #4f46e5, #3730a3); }
.contest-card-title-row { display: flex; align-items: center; gap: 12px; }
.contest-card-title-row h2 { min-width: 0; }
.contest-card-title-logo {
  width: 100px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 3px;
  flex-shrink: 0;
}
.contest-title-with-logo { margin-top: 14px; }
.contest-title-with-logo img {
  width: 125px;
  height: 50px;
  object-fit: contain;
  border-radius: 12px;
  padding: 4px;
}
.upload-current img {
  width: 125px;
  height: 50px;
  object-fit: contain;
  border-radius: 12px;
  padding: 4px;
}
.contest-list.view-list .contest-card-title-logo { display: none; }
@media (max-width: 720px) {
  .contest-card-title-logo { width: 82px; height: 33px; }
  .contest-title-with-logo img { width: 100px; height: 40px; }
}
.contest-card-title-row h2 { flex: 1 1 auto; }

/* 2026-07-02: clearer ranking requirement blocks and tagline spacing */
.ranking-requirements {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand) 5%, var(--card));
}
.ranking-requirements-title {
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.ranking-requirements ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ranking-requirements li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}
.ranking-requirements li span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.ranking-requirements li strong {
  color: var(--text);
  font-size: 14px;
  text-align: right;
}
.ranking-requirements.compact {
  margin: 12px 0 16px;
  padding: 10px 12px;
}
.ranking-requirements.compact ul {
  grid-template-columns: 1fr;
}
.ranking-requirements.compact li {
  padding: 7px 8px;
}
.hero-requirements {
  max-width: 760px;
}
.contest-card-title-row + .contest-tagline,
.contest-card-main > .contest-tagline {
  margin-top: 16px;
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .ranking-requirements ul { grid-template-columns: 1fr; }
  .ranking-requirements li { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ranking-requirements li strong { text-align: left; }
}

/* 2026-07-02: slimmer cards, clearer top action, and compact list cleanup */
.contest-card-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}
.contest-open-top {
  justify-self: center;
  padding: 7px 12px;
  white-space: nowrap;
}
.contest-card-title-row .contest-open-inline { display: none; }
.contest-list.view-cards .contest-card-title-row h2 { font-size: clamp(22px, 2vw, 28px); }
.contest-list.view-list .contest-card {
  grid-template-columns: minmax(160px, .75fr) minmax(230px, 1.25fr) minmax(190px, .95fr) minmax(260px, 1.25fr) auto;
  gap: 10px;
  padding: 10px 14px;
  min-height: 74px;
}
.contest-list.view-list .contest-card-topbar {
  grid-template-columns: auto auto;
  justify-content: flex-start;
  gap: 8px;
}
.contest-list.view-list .contest-open-top { display: none; }
.contest-list.view-list .contest-card-main { min-width: 0; }
.contest-list.view-list .contest-card-title-row h2 {
  font-size: 18px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.contest-list.view-list .ranking-requirements { display: none; }
.contest-list.view-list .leader-summary {
  padding: 9px 12px;
  border-radius: 13px;
}
.contest-list.view-list .meta-grid {
  grid-template-columns: minmax(145px, 1fr) minmax(90px, .65fr);
  align-items: stretch;
}
.contest-list.view-list .meta-grid div { min-height: 0; }
.contest-list.view-list .meta-grid span { margin-bottom: 2px; }
.contest-list.view-list .meta-grid strong { font-size: 15px; }
.contest-list.view-list .contest-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.contest-list.view-list .contest-action-row .pill.warn {
  max-width: 260px;
  white-space: normal;
  line-height: 1.25;
}
@media (max-width: 1120px) {
  .contest-list.view-list .contest-card {
    grid-template-columns: minmax(190px, 1fr) minmax(230px, 1.3fr) minmax(190px, 1fr);
  }
  .contest-list.view-list .contest-action-row { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 700px) {
  .contest-card-topbar { grid-template-columns: auto auto; justify-content: space-between; }
  .contest-open-top { grid-column: 1 / -1; justify-self: flex-start; }
}


/* 2026-07-02: country flag and denser contest list modes */
.contest-country-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
  border: 1px solid var(--line);
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(15,23,42,.05);
}
.contest-card-topbar { grid-template-columns: auto auto 1fr auto; }
.contest-list.view-balanced .ranking-requirements { display: none; }
.contest-list.view-cards .ranking-requirements.compact {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 10px 0 14px;
}
.contest-list.view-cards .ranking-requirements.compact ul {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}
.contest-list.view-cards .ranking-requirements.compact li {
  padding: 8px 10px;
  background: color-mix(in srgb, var(--brand) 4%, var(--card));
}
.contest-list.view-list .leader-summary { display: none; }
.contest-list.view-list .contest-card {
  grid-template-columns: minmax(165px, .95fr) minmax(280px, 1.6fr) minmax(300px, 1.55fr) auto;
  min-height: 62px;
}
.contest-list.view-list .contest-card-topbar { grid-template-columns: auto auto; }
.contest-list.view-list .contest-country-flag { width: 30px; height: 30px; font-size: 18px; }
.contest-list.view-list .meta-grid {
  grid-template-columns: minmax(150px, 1fr) minmax(90px, .65fr);
  gap: 6px;
}
.contest-list.view-list .meta-grid .meta-period strong { white-space: nowrap; }
.contest-list.view-list .contest-action-row .registration-closed-label .closed-full { display: none; }
.contest-list.view-list .contest-action-row .registration-closed-label .closed-short { display: inline; }
.registration-closed-label .closed-short { display: none; }
@media (max-width: 1120px) {
  .contest-list.view-list .contest-card { grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.45fr) minmax(260px, 1.2fr); }
}
@media (max-width: 700px) {
  .contest-card-topbar { grid-template-columns: auto auto auto; }
  .contest-open-top { grid-column: 1 / -1; }
}

/* 2026-07-02: PNG country flags, compact ranking values, and action-aligned open buttons */
.contest-country-flag {
  width: 34px;
  height: 34px;
  padding: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 92%, transparent);
}
.contest-country-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 999px;
}
.contest-card-topbar {
  grid-template-columns: auto auto 1fr;
}
.contest-card-topbar .pill.muted:last-child {
  justify-self: end;
}
.contest-open-top { display: none !important; }
.contest-action-row {
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 12px;
}
.contest-action-row .contest-open-link,
.contest-action-row .contest-primary-action,
.contest-action-row form.contest-primary-action button {
  padding: 9px 13px;
  font-size: 14px;
  line-height: 1.1;
  white-space: nowrap;
}
.contest-action-row form.contest-primary-action { margin: 0; }
.button.disabled.warn,
button.disabled.warn {
  opacity: 1;
  background: #fef3c7;
  color: var(--warn);
  border-color: #fde68a;
  box-shadow: none;
}
.contest-list.view-list .contest-card {
  grid-template-columns: minmax(190px, .75fr) minmax(260px, 1.35fr) minmax(290px, 1.2fr) auto;
  gap: 10px;
  min-height: 56px;
  padding: 9px 12px;
}
.contest-list.view-list .contest-card-topbar {
  grid-template-columns: auto auto auto;
  gap: 8px;
}
.contest-list.view-list .contest-country-flag {
  width: 28px;
  height: 28px;
  padding: 2px;
}
.contest-list.view-list .contest-card-title-row h2 {
  -webkit-line-clamp: 1;
  font-size: 17px;
}
.contest-list.view-list .contest-tagline,
.contest-list.view-list .contest-card-description,
.contest-list.view-list .ranking-requirements,
.contest-list.view-list .leader-summary,
.contest-list.view-list .meta-deadline,
.contest-list.view-list .meta-capital {
  display: none !important;
}
.contest-list.view-list .meta-grid {
  grid-template-columns: minmax(170px, 1fr) minmax(82px, .55fr);
  gap: 6px;
}
.contest-list.view-list .meta-grid div {
  padding: 6px 8px;
}
.contest-list.view-list .meta-grid strong {
  font-size: 14px;
  white-space: nowrap;
}
.contest-list.view-list .contest-action-row {
  margin-top: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.contest-list.view-list .contest-action-row .contest-open-link,
.contest-list.view-list .contest-action-row .contest-primary-action,
.contest-list.view-list .contest-action-row form.contest-primary-action button {
  padding: 8px 10px;
  font-size: 13px;
}
@media (max-width: 1120px) {
  .contest-list.view-list .contest-card {
    grid-template-columns: minmax(170px, .8fr) minmax(230px, 1.3fr) minmax(245px, 1fr);
  }
  .contest-list.view-list .contest-action-row { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 700px) {
  .contest-card-topbar { grid-template-columns: auto auto auto; }
  .contest-action-row { flex-wrap: wrap; }
}

/* 2026-07-02: square flags, aligned action buttons, and stable card content rhythm */
.contest-country-flag {
  width: 34px;
  height: 34px;
  padding: 2px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 92%, transparent);
}
.contest-country-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}
.contest-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.contest-action-row .contest-open-link,
.contest-action-row .contest-primary-action,
.contest-action-row form.contest-primary-action button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 10px 24px rgba(37,99,235,.16);
}
.contest-action-row .contest-open-link:hover,
.contest-action-row .contest-primary-action:hover,
.contest-action-row form.contest-primary-action button:hover {
  filter: brightness(.96);
  transform: translateY(-1px);
}
.contest-action-row .button.disabled.warn,
.contest-action-row button.disabled.warn {
  min-width: 116px;
  min-height: 42px;
  background: #fef3c7;
  color: var(--warn);
  border-color: #fde68a;
  box-shadow: none;
  transform: none;
}
.contest-list.view-cards .contest-card {
  min-height: 660px;
}
.contest-list.view-cards .contest-card-main {
  display: grid;
  grid-template-rows: auto auto 76px 112px;
  gap: 10px;
  min-height: 270px;
  align-content: start;
}
.contest-list.view-cards .contest-card-title-row h2 {
  min-height: 64px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contest-list.view-cards .contest-tagline {
  min-height: 42px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contest-list.view-cards .ranking-requirements.compact {
  margin: 0;
  overflow: hidden;
}
.contest-list.view-cards .ranking-requirements.compact ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.contest-list.view-cards .ranking-requirements.compact li {
  min-height: 0;
  padding: 7px 9px;
}
.contest-list.view-cards .ranking-requirements.compact li span,
.contest-list.view-cards .ranking-requirements.compact li strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contest-list.view-cards .contest-card-description {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contest-list.view-cards .leader-summary,
.contest-list.view-cards .contest-meta-grid,
.contest-list.view-cards .contest-action-row {
  flex-shrink: 0;
}
.contest-list.view-balanced .contest-card {
  min-height: 430px;
}
.contest-list.view-balanced .contest-card-main {
  display: grid;
  grid-template-rows: auto auto 58px;
  gap: 8px;
  min-height: 150px;
}
.contest-list.view-balanced .contest-card-title-row h2 {
  min-height: 48px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.contest-list.view-balanced .contest-tagline {
  min-height: 22px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contest-list.view-balanced .contest-card-description {
  margin: 0;
  -webkit-line-clamp: 2;
}
.contest-list.view-list .contest-country-flag {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.contest-list.view-list .contest-card {
  align-items: center;
}
.contest-list.view-list .contest-action-row {
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.contest-list.view-list .contest-action-row .contest-open-link,
.contest-list.view-list .contest-action-row .contest-primary-action,
.contest-list.view-list .contest-action-row form.contest-primary-action button,
.contest-list.view-list .contest-action-row .button.disabled.warn,
.contest-list.view-list .contest-action-row button.disabled.warn {
  min-width: 104px;
  min-height: 38px;
  padding: 9px 12px;
  font-size: 13px;
}
@media (max-width: 1120px) {
  .contest-list.view-cards .contest-card { min-height: auto; }
  .contest-list.view-cards .contest-card-main,
  .contest-list.view-balanced .contest-card-main { min-height: 0; }
  .contest-list.view-list .contest-action-row { justify-content: flex-start; }
}


/* 2026-07-02: final card/list alignment polish */
.contest-country-flag {
  border-radius: 6px !important;
  padding: 2px !important;
}
.contest-country-flag img {
  border-radius: 0 !important;
  object-fit: contain !important;
}
.contest-action-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.contest-action-row form.contest-primary-action {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.contest-action-row .contest-primary-action,
.contest-action-row form.contest-primary-action button,
.contest-action-row .contest-open-link,
.contest-action-row .button.disabled.warn,
.contest-action-row button.disabled.warn {
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.contest-action-row .contest-primary-action,
.contest-action-row form.contest-primary-action button {
  background: var(--brand) !important;
  color: #fff !important;
  border: 1px solid var(--brand) !important;
}
.contest-action-row .contest-open-link {
  background: #334155 !important;
  color: #fff !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 10px 24px rgba(51,65,85,.15) !important;
  text-decoration: none !important;
}
.contest-action-row .contest-open-link:hover {
  background: #1e293b !important;
  color: #fff !important;
}
.contest-action-row .button.disabled.warn,
.contest-action-row button.disabled.warn {
  background: #fef3c7 !important;
  color: var(--warn) !important;
  border: 1px solid #fde68a !important;
  box-shadow: none !important;
}
.contest-list.view-cards .contest-card-main {
  grid-template-rows: 72px 42px 76px 112px !important;
  min-height: 322px !important;
}
.contest-list.view-cards .contest-card-title-row { grid-row: 1; }
.contest-list.view-cards .contest-tagline { grid-row: 2; }
.contest-list.view-cards .ranking-requirements.compact { grid-row: 3; }
.contest-list.view-cards .contest-card-description { grid-row: 4; }
.contest-list.view-cards .contest-card-title-row {
  min-height: 72px !important;
  align-items: center !important;
}
.contest-list.view-cards .contest-card-title-row h2 {
  min-height: 0 !important;
  margin: 0 !important;
}
.contest-list.view-cards .contest-tagline {
  min-height: 42px !important;
  max-height: 42px !important;
}
.contest-list.view-cards .ranking-requirements.compact {
  min-height: 76px !important;
  max-height: 76px !important;
}
.contest-list.view-cards .contest-card-description {
  min-height: 112px !important;
  max-height: 112px !important;
  overflow: hidden !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.contest-list.view-balanced .contest-card-description {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.contest-list.view-list .contest-card {
  grid-template-columns: minmax(230px, 1fr) minmax(280px, 1.25fr) minmax(360px, 1.35fr) minmax(245px, auto) !important;
  min-height: 56px !important;
  gap: 10px !important;
}
.contest-list.view-list .contest-card-topbar,
.contest-list.view-list .contest-card-main,
.contest-list.view-list .meta-grid,
.contest-list.view-list .contest-action-row {
  min-width: 0 !important;
}
.contest-list.view-list .meta-grid {
  display: grid !important;
  grid-template-columns: minmax(230px, 1.25fr) minmax(120px, .75fr) !important;
  gap: 8px !important;
  align-items: center !important;
}
.contest-list.view-list .meta-grid div {
  min-height: 40px !important;
  padding: 6px 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
}
.contest-list.view-list .meta-grid span {
  display: inline !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.contest-list.view-list .meta-grid strong {
  display: inline !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
}
.contest-list.view-list .contest-action-row {
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  margin-top: 0 !important;
}
.contest-list.view-list .contest-action-row .contest-primary-action,
.contest-list.view-list .contest-action-row form.contest-primary-action button,
.contest-list.view-list .contest-action-row .contest-open-link,
.contest-list.view-list .contest-action-row .button.disabled.warn,
.contest-list.view-list .contest-action-row button.disabled.warn {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}
@media (max-width: 1220px) {
  .contest-list.view-list .contest-card {
    grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.25fr) minmax(330px, 1.3fr) !important;
  }
  .contest-list.view-list .contest-action-row {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }
}
@media (max-width: 720px) {
  .contest-action-row .contest-primary-action,
  .contest-action-row form.contest-primary-action button,
  .contest-action-row .contest-open-link,
  .contest-action-row .button.disabled.warn,
  .contest-action-row button.disabled.warn {
    width: auto !important;
    max-width: none !important;
    min-width: 104px !important;
  }
  .contest-list.view-cards .contest-card-main,
  .contest-list.view-balanced .contest-card-main {
    min-height: 0 !important;
  }
}

/* 2026-07-02: compact list metadata, clean flags, and reliable description clamps */
.contest-country-flag {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.contest-country-flag img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 10px rgba(15,23,42,.14) !important;
}
.contest-list.view-list .meta-capital,
.contest-list.view-list .meta-participants {
  display: none !important;
}
.contest-list.view-list .meta-grid {
  grid-template-columns: minmax(260px, 1fr) !important;
  max-width: 360px !important;
}
.contest-list.view-list .meta-period strong {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.contest-list.view-balanced .contest-card-description {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: calc(1.45em * 2) !important;
}
.contest-list.view-cards .contest-card-description {
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: calc(1.45em * 4) !important;
}

/* 2026-07-02: final enforce list metadata, description clamps, and flag sizing */
body .contest-list.view-list .contest-card {
  grid-template-columns: minmax(220px, .95fr) minmax(260px, 1.25fr) minmax(330px, 1.2fr) minmax(230px, auto) !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  gap: 12px !important;
}
body .contest-list.view-list .contest-meta-grid > .meta-capital,
body .contest-list.view-list .contest-meta-grid > .meta-participants,
body .contest-list.view-list .contest-meta-grid > .meta-deadline,
body .contest-list.view-list .leader-summary,
body .contest-list.view-list .ranking-requirements,
body .contest-list.view-list .contest-tagline,
body .contest-list.view-list .contest-card-description {
  display: none !important;
}
body .contest-list.view-list .contest-meta-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) !important;
  width: 100% !important;
  max-width: 420px !important;
  gap: 0 !important;
  align-items: center !important;
}
body .contest-list.view-list .contest-meta-grid > .meta-period {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 7px 12px !important;
  overflow: hidden !important;
}
body .contest-list.view-list .contest-meta-grid > .meta-period span,
body .contest-list.view-list .contest-meta-grid > .meta-period strong {
  display: inline-block !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
body .contest-list.view-list .contest-meta-grid > .meta-period span {
  flex: 0 0 auto !important;
}
body .contest-list.view-list .contest-meta-grid > .meta-period strong {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body .contest-list.view-list .contest-card-title-row h2,
body .contest-list.view-list .contest-card-title-row h2 a {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}
body .contest-list.view-cards .contest-card-description {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  line-clamp: 4 !important;
  line-height: 1.45 !important;
  max-height: calc(1.45em * 4) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body .contest-list.view-balanced .contest-card-description {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  line-height: 1.45 !important;
  max-height: calc(1.45em * 2) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body .contest-list.view-cards .contest-country-flag,
body .contest-list.view-balanced .contest-country-flag {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  align-self: center !important;
}
body .contest-list.view-list .contest-country-flag {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body .contest-country-flag img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  box-shadow: 0 3px 8px rgba(15,23,42,.16) !important;
}
@media (max-width: 1220px) {
  body .contest-list.view-list .contest-card {
    grid-template-columns: minmax(200px, .9fr) minmax(240px, 1.2fr) minmax(300px, 1fr) !important;
  }
  body .contest-list.view-list .contest-action-row {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }
}
@media (max-width: 760px) {
  body .contest-list.view-list .contest-card {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  body .contest-list.view-list .contest-meta-grid {
    max-width: none !important;
    grid-template-columns: 1fr !important;
  }
}


/* 2026-07-02: enforce final compact list, four-line descriptions, and smaller raw flags */
body .contest-list.view-list .contest-meta-grid > .meta-capital,
body .contest-list.view-list .contest-meta-grid > .meta-participants,
body .contest-list.view-list .contest-meta-grid > .meta-deadline,
body .contest-list.view-list .meta-capital,
body .contest-list.view-list .meta-participants,
body .contest-list.view-list .meta-deadline {
  display: none !important;
}
body .contest-list.view-list .contest-card {
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.35fr) minmax(300px, 1.25fr) minmax(240px, auto) !important;
}
body .contest-list.view-list .contest-meta-grid {
  grid-template-columns: minmax(280px, 1fr) !important;
  max-width: none !important;
}
body .contest-list.view-list .contest-meta-grid > .meta-period {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
body .contest-list.view-list .contest-meta-grid > .meta-period span,
body .contest-list.view-list .contest-meta-grid > .meta-period strong {
  white-space: nowrap !important;
}
body .contest-list.view-cards .contest-card-description {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  line-clamp: 4 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.42 !important;
  max-height: 5.68em !important;
  min-height: 0 !important;
  white-space: normal !important;
}
body .contest-list.view-balanced .contest-card-description {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.42 !important;
  max-height: 2.84em !important;
  min-height: 0 !important;
  white-space: normal !important;
}
body .contest-list.view-cards .contest-country-flag,
body .contest-list.view-balanced .contest-country-flag {
  width: 31px !important;
  height: 31px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body .contest-list.view-cards .contest-country-flag img,
body .contest-list.view-balanced .contest-country-flag img,
body .contest-list.view-list .contest-country-flag img {
  border-radius: 0 !important;
  box-shadow: 0 2px 7px rgba(15,23,42,.14) !important;
}

/* Admin demo data management */
.demo-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1rem;
}
.demo-admin-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
}
.demo-admin-actions input[type="text"],
.demo-admin-actions input[type="email"],
.stack-form input[type="text"],
.stack-form input[type="email"] {
  max-width: 360px;
}
.stack-form {
  display: grid;
  gap: 0.55rem;
  max-width: 560px;
}
.danger-zone {
  border-color: rgba(220, 38, 38, 0.28);
}
.button.danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.button.warning {
  background: #f59e0b;
  color: #111827;
  border-color: #f59e0b;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* 2026-07-03: archive/private league lists, safer compact buttons, demo admin layout */
.contest-action-row .contest-primary-action,
.contest-action-row form.contest-primary-action button,
.contest-action-row .contest-open-link,
.contest-action-row .button.disabled.warn,
.contest-action-row button.disabled.warn {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.contest-list.view-list .contest-action-row .contest-primary-action,
.contest-list.view-list .contest-action-row form.contest-primary-action button,
.contest-list.view-list .contest-action-row .contest-open-link,
.contest-list.view-list .contest-action-row .button.disabled.warn,
.contest-list.view-list .contest-action-row button.disabled.warn {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  font-size: 13px !important;
}

.archive-compact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.archive-row {
  display: grid;
  grid-template-columns: minmax(250px, 1.05fr) minmax(260px, 1.4fr) minmax(260px, 1.15fr) minmax(120px, .55fr) minmax(220px, .95fr);
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.archive-row-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.archive-row-identity .pill { white-space: nowrap; }
.archive-row-title {
  margin: 0;
  font-size: 18px;
  min-width: 0;
}
.archive-row-title a,
.archive-row-title span {
  color: var(--text);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.past-leagues-list .archive-row-title a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.archive-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft-card);
}
.archive-row-meta span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
}
.archive-row-meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archive-row-winner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 210px;
  max-width: 280px;
}
.archive-row-winner span { color: var(--muted); font-size: 13px; }
.archive-row-winner strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.archive-row-winner em { font-style: normal; font-weight: 900; white-space: nowrap; }
.private-readonly-list .archive-row {
  opacity: .66;
  filter: grayscale(.28);
  background: rgba(248,250,252,.82);
  box-shadow: none;
  cursor: default;
}
.private-readonly-list .archive-row-title span { color: var(--muted); }
.archive-row-note {
  color: var(--muted);
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 1220px) {
  .archive-row { grid-template-columns: 1fr 1.2fr 1fr; }
  .archive-row-winner,
  .archive-row-note { justify-content: flex-start; text-align: left; }
}
@media (max-width: 760px) {
  .archive-row { grid-template-columns: 1fr; align-items: stretch; }
}

.demo-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  margin: 28px 0 30px;
}
.demo-stat-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.demo-stat-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}
.demo-stat-card strong {
  display: block;
  font-size: 26px;
  line-height: 1;
}
.demo-admin-actions.single-line,
.danger-zone .single-line-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.demo-admin-actions.single-line form,
.danger-zone .single-line-form {
  margin: 0;
}
.demo-admin-actions.single-line input,
.danger-zone .single-line-form input {
  height: 44px;
  min-width: 280px;
}
.demo-admin-actions.single-line .button,
.danger-zone .single-line-form .button {
  height: 44px;
  display: inline-flex;
  align-items: center;
}
@media (max-width: 900px) {
  .demo-stats-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
@media (max-width: 560px) {
  .demo-stats-grid { grid-template-columns: 1fr; }
  .demo-admin-actions.single-line input,
  .danger-zone .single-line-form input { min-width: 0; width: 100%; }
}

/* 2026-07-03: demo stats as compact table */
.demo-stats-wrap {
  margin: 30px 0 34px;
  max-width: 520px;
}
.demo-stats-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.demo-stats-table th,
.demo-stats-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.demo-stats-table tr:last-child th,
.demo-stats-table tr:last-child td { border-bottom: 0; }
.demo-stats-table th {
  color: var(--muted);
  font-weight: 800;
  width: 65%;
}
.demo-stats-table td {
  text-align: right;
  font-size: 20px;
  font-weight: 950;
}

/* 2026-07-03: demo admin compact stats, single-row actions, top create CTA, archive polish */
.navlinks .nav-create-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff !important;
  border: 1px solid var(--brand);
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}
.navlinks .nav-create-cta:hover,
.navlinks .nav-create-cta:focus-visible {
  background: #1e40af;
  border-color: #1e40af;
  color: var(--text-primary) !important;
  filter: none;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(30, 64, 175, .24);
}
.demo-stats-wrap.demo-stats-inline {
  max-width: none !important;
  width: min(780px, 100%);
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin: 22px 0 42px !important;
}
.demo-stat-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.demo-stat-mini span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.demo-stat-mini strong {
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  white-space: nowrap;
}
.demo-admin-actions.single-line {
  display: grid !important;
  grid-template-columns: minmax(360px, 520px) auto auto auto;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 22px !important;
}
.demo-admin-actions.single-line form {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  min-width: 0;
}
.demo-admin-actions.single-line form:first-child {
  width: 100%;
}
.demo-admin-actions.single-line input[type="text"] {
  flex: 1 1 auto;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
}
.demo-admin-actions.single-line .button {
  height: 46px !important;
  min-width: 0;
  white-space: nowrap;
}
.danger-zone .single-line-form {
  display: grid !important;
  grid-template-columns: auto minmax(320px, 1fr) auto;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
}
.danger-zone .single-line-form label {
  margin: 0 !important;
  white-space: nowrap;
  font-weight: 900;
}
.danger-zone .single-line-form input[type="text"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 46px !important;
}
.danger-zone .single-line-form .button {
  height: 46px !important;
  white-space: nowrap;
}
.archive-row {
  grid-template-columns: minmax(250px, 1.05fr) minmax(260px, 1.35fr) minmax(290px, 1.05fr) minmax(190px, .72fr) minmax(220px, .9fr) !important;
}
.archive-row-meta {
  min-width: 0;
}
.archive-row-meta strong {
  overflow: visible;
  text-overflow: clip;
}
.archive-row-meta span,
.archive-row-meta strong {
  white-space: nowrap;
}
.private-readonly-list .archive-row {
  grid-template-columns: minmax(250px, 1.05fr) minmax(300px, 1.4fr) minmax(290px, 1.05fr) minmax(190px, .72fr) !important;
}
.private-readonly-list .archive-row-note { display: none !important; }
@media (max-width: 1180px) {
  .demo-admin-actions.single-line,
  .danger-zone .single-line-form {
    grid-template-columns: 1fr !important;
  }
  .demo-admin-actions.single-line form:first-child { width: auto; }
  .archive-row,
  .private-readonly-list .archive-row {
    grid-template-columns: 1fr 1.1fr !important;
  }
}
@media (max-width: 760px) {
  .demo-stats-wrap.demo-stats-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-admin-actions.single-line form { flex-wrap: wrap !important; }
  .archive-row,
  .private-readonly-list .archive-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .demo-stats-wrap.demo-stats-inline { grid-template-columns: 1fr; }
}

/* 2026-07-03: Admin maintenance bundle UI */
.maintenance-grid {
  align-items: stretch;
}
.maintenance-line-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}
.maintenance-line-form input[type="file"] {
  min-height: 44px;
  padding: 9px 12px;
}
.maintenance-line-form .button,
.maintenance-line-form button {
  min-height: 44px;
  white-space: nowrap;
}
.check-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 800;
}
.check-line input {
  width: auto;
}
.muted-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.small { font-size: 13px; }


/* 2026-07-03: friendly homepage illustration section. */
.landing-illustration-section {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: center;
  margin: 8px 0 18px;
  padding: clamp(18px, 3vw, 28px);
}
.landing-illustration-media {
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--panel, var(--card)) 72%, transparent);
  padding: clamp(14px, 2.5vw, 22px);
}
.landing-story-image {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.landing-illustration-copy h2 {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.04em;
  margin: 8px 0 12px;
}
.landing-illustration-copy p {
  color: var(--muted);
  line-height: 1.68;
  margin-bottom: 16px;
}
.landing-story-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.landing-story-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel, var(--card)) 78%, transparent);
  color: var(--text);
  font-weight: 700;
  line-height: 1.55;
}
.landing-story-list li::before {
  content: '✓';
  flex: 0 0 auto;
  color: var(--brand);
  font-weight: 900;
}
@media (max-width: 900px) {
  .landing-illustration-section { grid-template-columns: 1fr; }
}
.theme-casino .landing-illustration-media,
.theme-casino .landing-story-list li {
  background: linear-gradient(180deg, #34200d, #211307) !important;
  border-color: rgba(255,213,103,.48) !important;
}
.theme-casino .landing-illustration-copy p { color: #ffe6a7 !important; }
.theme-casino .landing-story-list li { color: #fffbe8 !important; }


/* 2026-07-03: page-specific service illustrations */
.section-illustration {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.guide-hero-visual,
.invite-hero-visual {
  padding: clamp(14px, 2.5vw, 24px);
}
.guide-hero-visual {
  margin-bottom: 20px;
}
.invite-accept-card .invite-hero-visual {
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel, var(--card)) 76%, transparent);
}
@media (min-width: 900px) {
  .invite-accept-card .invite-hero-visual {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
}
.theme-casino .guide-hero-visual,
.theme-casino .invite-accept-card .invite-hero-visual {
  background: linear-gradient(180deg, #34200d, #211307) !important;
  border-color: rgba(255,213,103,.48) !important;
}


/* 2026-07-03: how-it-works wide illustration and simplified landing copy refinements */
.guide-hero-visual {
  padding: clamp(10px, 1.6vw, 18px);
}
.guide-hero-visual .section-illustration {
  aspect-ratio: 1448 / 799;
  max-height: 520px;
  object-fit: contain;
}
.guide-beginner-note .beginner-helper-icon {
  font-size: 17px;
}
.landing-illustration-copy h2 {
  margin-top: 0;
}
@media (min-width: 980px) {
  .guide-hero-visual {
    margin-top: -4px;
  }
}
@media (max-width: 720px) {
  .guide-hero-visual .section-illustration {
    max-height: none;
  }
}


/* 2026-07-03: balance homepage illustration/text heights across EN/KO/DE. */
.landing-illustration-section {
  grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
}
.landing-illustration-media,
.landing-illustration-copy {
  min-height: 420px;
}
.landing-illustration-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-story-image {
  max-height: 390px;
}
.landing-illustration-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.landing-illustration-copy h2 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  margin-top: 0;
}
.landing-illustration-copy p {
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.55;
  margin-bottom: 12px;
}
.landing-story-list {
  gap: 8px;
}
.landing-story-list li {
  padding: 10px 14px;
  line-height: 1.42;
}
html[lang="de"] .landing-illustration-copy h2 {
  font-size: clamp(28px, 3.35vw, 44px);
  line-height: 1.08;
}
html[lang="de"] .landing-illustration-copy p {
  font-size: clamp(15px, 1.28vw, 18px);
  line-height: 1.5;
}
html[lang="de"] .landing-story-list li {
  font-size: 15px;
  line-height: 1.38;
}
html[lang="ko"] .landing-illustration-copy h2 {
  line-height: 1.16;
}
@media (max-width: 900px) {
  .landing-illustration-section {
    grid-template-columns: 1fr;
  }
  .landing-illustration-media,
  .landing-illustration-copy {
    min-height: auto;
  }
  .landing-story-image {
    max-height: none;
  }
}
/* 1448x799 how-it-works illustration ratio. */
.guide-hero-visual .section-illustration {
  aspect-ratio: 1448 / 799;
  max-height: 560px;
  object-fit: contain;
}

/* 2026-07-03: homepage illustration updated for 724x650 artwork. */
.landing-illustration-section {
  grid-template-columns: minmax(360px, .98fr) minmax(0, 1.02fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: center;
}
.landing-illustration-media,
.landing-illustration-copy {
  min-height: clamp(470px, 42vw, 610px);
}
.landing-illustration-media {
  padding: clamp(12px, 1.8vw, 20px);
}
.landing-story-image {
  aspect-ratio: 724 / 650;
  width: min(100%, 724px);
  max-height: 650px;
  object-fit: contain;
}
.landing-illustration-copy {
  justify-content: center;
}
@media (max-width: 900px) {
  .landing-illustration-section { grid-template-columns: 1fr; }
  .landing-illustration-media,
  .landing-illustration-copy { min-height: auto; }
  .landing-story-image { max-height: none; }
}

/* 2026-07-03: My Leagues use detailed cards only, aligned like a compact two-column card grid. */
.my-contests-sort-toolbar {
  justify-content: flex-end;
}
.my-contests-sort-toolbar > span {
  margin-right: auto;
}
.my-contest-list .contest-list-items {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  max-width: 1120px;
  margin-left: 0;
  margin-right: auto;
  align-items: start;
}
.my-contest-list .contest-card {
  min-width: 0;
}
@media (min-width: 1180px) {
  .my-contest-list .contest-list-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .my-contests-sort-toolbar { align-items: stretch; }
  .my-contests-sort-toolbar > span { margin-right: 0; }
  .my-contest-list .contest-list-items {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

/* 2026-07-03: reduce homepage illustration frame whitespace for 724x650 artwork. */
.landing-illustration-section {
  padding: clamp(8px, 1.2vw, 14px);
  align-items: center;
}
.landing-illustration-media {
  min-height: auto;
  padding: clamp(2px, .55vw, 6px);
  align-self: center;
}
.landing-story-image {
  display: block;
  width: 100%;
  aspect-ratio: 724 / 650;
  max-height: none;
  object-fit: contain;
}
@media (min-width: 901px) {
  .landing-illustration-media {
    max-width: 748px;
  }
  .landing-illustration-copy {
    min-height: auto;
  }
}
@media (max-width: 900px) {
  .landing-illustration-section {
    padding: 8px;
  }
  .landing-illustration-media {
    padding: 2px;
  }
}

/* 2026-07-03: tighten how-it-works illustration frame for 1750x800 artwork and show raw flag PNGs only. */
.guide-hero-visual.card,
.guide-hero-visual {
  padding: clamp(2px, .5vw, 6px) !important;
  overflow: hidden;
}
.guide-hero-visual .section-illustration {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1750 / 800 !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 16px;
}
@media (max-width: 720px) {
  .guide-hero-visual.card,
  .guide-hero-visual {
    padding: 2px !important;
  }
  .guide-hero-visual .section-illustration {
    border-radius: 14px;
  }
}
body .contest-country-flag,
body .contest-list.view-cards .contest-country-flag,
body .contest-list.view-balanced .contest-country-flag,
body .contest-list.view-list .contest-country-flag {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
body .contest-country-flag img,
body .contest-list.view-cards .contest-country-flag img,
body .contest-list.view-balanced .contest-country-flag img,
body .contest-list.view-list .contest-country-flag img {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 2026-07-03: visible local symbol search suggestions; search remains DB/cache-only. */
.symbol-search-results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
}
.symbol-search-results[hidden] { display: none !important; }
.symbol-result-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}
.symbol-result-chip:hover {
  border-color: color-mix(in srgb, var(--brand) 44%, var(--line));
  background: color-mix(in srgb, var(--brand) 8%, var(--card));
}
.symbol-result-chip strong { font-weight: 900; white-space: nowrap; }
.symbol-result-chip span {
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2026-07-03: My Leagues use full-width stacked cards with compact internal layout. */
.my-contest-list .contest-list-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: none;
  width: 100%;
}
.my-contest-list .contest-card {
  width: 100%;
  min-height: 0;
  padding: clamp(16px, 1.8vw, 22px);
  gap: 12px;
}
@media (min-width: 860px) {
  .my-contest-list .contest-card {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) minmax(240px, .9fr);
    grid-template-areas:
      "top top"
      "main leader"
      "meta actions";
    align-items: start;
  }
  .my-contest-list .contest-card-topbar { grid-area: top; }
  .my-contest-list .contest-card-main { grid-area: main; min-width: 0; }
  .my-contest-list .leader-summary { grid-area: leader; margin: 0; align-self: stretch; }
  .my-contest-list .contest-meta-grid { grid-area: meta; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .my-contest-list .contest-action-row { grid-area: actions; align-self: end; justify-content: flex-end; margin: 0; }
  .my-contest-list .ranking-requirements ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-contest-list .contest-card-description { margin-bottom: 0; }
}
@media (max-width: 859px) {
  .my-contest-list .contest-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .my-contest-list .contest-meta-grid { grid-template-columns: 1fr; }
  .symbol-result-chip { width: 100%; justify-content: flex-start; }
}

/* 2026-07-03: keep My Leagues full-width, but compact vertically. */
.my-contest-list.view-cards .contest-card,
.my-contest-list .contest-card {
  min-height: 0 !important;
  padding: clamp(16px, 1.5vw, 22px) !important;
  gap: 12px !important;
}
.my-contest-list.view-cards .contest-card-main,
.my-contest-list .contest-card-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
  grid-template-rows: none !important;
  align-content: initial !important;
}
.my-contest-list.view-cards .contest-card-title-row,
.my-contest-list .contest-card-title-row {
  min-height: 0 !important;
  align-items: center !important;
}
.my-contest-list.view-cards .contest-card-title-row h2,
.my-contest-list .contest-card-title-row h2 {
  min-height: 0 !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}
.my-contest-list.view-cards .contest-tagline,
.my-contest-list .contest-tagline,
.my-contest-list.view-cards .ranking-requirements.compact,
.my-contest-list.view-cards .contest-card-description,
.my-contest-list .contest-card-description {
  min-height: 0 !important;
  max-height: none !important;
}
.my-contest-list .contest-card-description {
  -webkit-line-clamp: 2 !important;
  line-height: 1.5;
}
.my-contest-list .ranking-requirements.compact ul {
  gap: 8px !important;
}
.my-contest-list .ranking-requirements.compact li {
  padding: 8px 10px !important;
}
.my-contest-list .leader-summary {
  min-height: 68px !important;
  align-self: center !important;
  width: 100%;
  padding: 12px 16px;
}
.my-contest-list .contest-meta-grid div {
  min-height: 64px;
  padding: 12px 14px;
}
.my-contest-list .contest-action-row .button {
  min-height: 42px;
}
@media (min-width: 860px) {
  .my-contest-list .contest-card {
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .85fr) !important;
    grid-template-areas:
      "top top"
      "main leader"
      "meta actions" !important;
    align-items: start !important;
  }
  .my-contest-list .leader-summary { align-self: center !important; }
  .my-contest-list .contest-meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .my-contest-list .contest-action-row {
    align-self: center !important;
    justify-content: flex-end !important;
  }
}
@media (max-width: 859px) {
  .my-contest-list .leader-summary { align-self: stretch !important; }
}

/* 2026-07-03: ticker hover hint uses local DB symbol names, not live API. */
.symbol-name-tip {
  cursor: help;
  text-decoration: underline dotted rgba(100, 116, 139, .55);
  text-underline-offset: 3px;
  font-weight: 800;
}
.symbol-name-tip:hover {
  color: var(--brand);
}

/* 2026-07-03: My Leagues header alignment refinements. */
.my-contest-list .contest-card-topbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.my-contest-card-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.my-contest-card-badges {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.my-contest-title-row {
  flex: 1 1 auto;
  min-width: 0;
}
.my-contest-role-pill {
  flex: 0 0 auto;
  margin-left: auto;
}
.my-contest-list .contest-card-main {
  gap: 12px !important;
}
.my-contest-list .contest-card-description {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}
.my-contest-list .leader-summary {
  align-self: start !important;
  margin-top: 0 !important;
}
@media (min-width: 860px) {
  .my-contest-list .contest-card {
    grid-template-areas:
      "top top"
      "main leader"
      "meta actions" !important;
  }
  .my-contest-list .leader-summary {
    align-self: start !important;
  }
}
@media (max-width: 640px) {
  .my-contest-list .contest-card-topbar,
  .my-contest-card-identity {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .my-contest-role-pill {
    margin-left: 0;
  }
}

/* 2026-07-03: My Leagues show the top three ranks in a compact balanced block. */
.my-contest-list .leader-summary-top3 {
  min-height: 126px !important;
  padding: 14px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 9px !important;
}
.my-contest-list .leader-rank-list {
  display: grid;
  gap: 7px;
}
.my-contest-list .leader-rank-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 28px;
}
.my-contest-list .leader-rank-no {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4ff;
  color: var(--brand);
  font-weight: 950;
  font-size: 12px;
}
.my-contest-list .leader-summary-top3 .leader-person {
  justify-content: flex-end;
  min-width: 0;
}
.my-contest-list .leader-summary-top3 .leader-placeholder {
  justify-self: end;
  font-size: 13px;
}
.my-contest-list .leader-summary-top3 .leader-person strong {
  max-width: 130px;
}
@media (min-width: 860px) {
  .my-contest-list .contest-action-row {
    align-self: end !important;
    padding-top: 8px;
  }
}
@media (max-width: 859px) {
  .my-contest-list .leader-summary-top3 .leader-person,
  .my-contest-list .leader-summary-top3 .leader-placeholder {
    justify-self: start;
    justify-content: flex-start;
  }
}
.theme-casino .my-contest-list .leader-rank-no {
  background: rgba(245, 202, 96, .16);
  color: #ffd567;
}

/* 2026-07-03: friendly simplified create-league form with collapsed advanced settings. */
.contest-create-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}
.contest-create-visual {
  width: min(260px, 28vw);
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(135deg, #eff6ff, #ffffff 58%, #fef3c7);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.create-visual-bubble {
  position: absolute;
  left: 22px;
  top: 22px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .22);
}
.create-visual-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .35);
  font-weight: 950;
  color: var(--text);
}
.create-visual-spark {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  color: #15803d;
  font-weight: 950;
}
.contest-create-simple {
  gap: 18px;
}
.contest-create-simple .setup-section {
  border-radius: 28px;
  padding: clamp(20px, 2.4vw, 30px);
}
.friendly-section-head {
  align-items: center;
}
.create-basic-grid {
  align-items: start;
}
.contest-password-field[hidden] {
  display: none !important;
}
.advanced-settings-panel {
  padding: 0 !important;
  overflow: hidden;
}
.advanced-settings-panel summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 28px;
  user-select: none;
}
.advanced-settings-panel summary::-webkit-details-marker { display: none; }
.advanced-settings-panel summary span:first-child {
  display: grid;
  gap: 4px;
}
.advanced-settings-panel summary strong {
  font-size: 18px;
  color: var(--text);
}
.advanced-settings-panel summary em {
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.advanced-chevron {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: var(--brand);
  font-weight: 950;
  transition: transform .18s ease;
}
.advanced-settings-panel[open] .advanced-chevron {
  transform: rotate(180deg);
}
.advanced-settings-body {
  display: grid;
  gap: 18px;
  padding: 0 24px 24px;
}
.setup-subsection {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 18px;
  background: #fbfdff;
}
.setup-section-head.compact-head {
  margin-bottom: 12px;
}
.setup-section-head.compact-head .setup-step {
  width: 28px;
  height: 28px;
  font-size: 13px;
}
.setup-section-head.compact-head h2 {
  font-size: 18px;
}
.compact-quota-panel {
  border-radius: 22px;
}
@media (max-width: 760px) {
  .contest-create-hero {
    grid-template-columns: 1fr;
  }
  .contest-create-visual {
    width: 100%;
  }
  .advanced-settings-panel summary {
    padding: 18px;
  }
  .advanced-settings-body {
    padding: 0 18px 18px;
  }
}
.theme-casino .contest-create-visual,
.theme-casino .setup-subsection {
  background: linear-gradient(135deg, #211307, #34200d) !important;
  border-color: rgba(245,202,96,.35) !important;
}
.theme-casino .create-visual-card {
  background: rgba(255,255,255,.06);
  color: #fffbe8;
  border-color: rgba(245,202,96,.35);
}
.theme-casino .advanced-chevron {
  background: rgba(245,202,96,.16);
  color: #ffd567;
}

/* 2026-07-03: My Leagues rank block label and vertical alignment refinements. */
@media (min-width: 860px) {
  .my-contest-list .contest-card-main:has(.contest-tagline) ~ .leader-summary-top3 {
    margin-top: 24px !important;
  }
  .my-contest-list .contest-card-main:has(.contest-tagline) ~ .contest-action-row {
    padding-top: 8px;
  }
}

/* 2026-07-03: simplified create page header without the decorative step card. */
.contest-create-hero {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* 2026-07-03: create-contest page hero illustration. */
.create-illustration-hero {
  grid-template-columns: minmax(0, .92fr) minmax(320px, .86fr) !important;
  gap: clamp(20px, 3vw, 42px);
  align-items: center;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px) clamp(24px, 3.6vw, 44px) !important;
}
.create-hero-copy {
  position: relative;
  z-index: 1;
}
.create-hero-copy p {
  max-width: 680px;
}
.create-hero-art {
  align-self: stretch;
  min-height: 230px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(239, 246, 255, .72), rgba(255, 255, 255, .88) 58%, rgba(254, 243, 199, .58));
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .07);
}
.create-hero-art img {
  width: 100%;
  height: 100%;
  max-height: 310px;
  object-fit: contain;
  display: block;
  transform: scale(1.08);
}
@media (max-width: 920px) {
  .create-illustration-hero {
    grid-template-columns: 1fr !important;
  }
  .create-hero-art {
    min-height: 210px;
  }
  .create-hero-art img {
    max-height: 280px;
  }
}
@media (max-width: 560px) {
  .create-illustration-hero {
    padding: 20px !important;
    gap: 16px;
  }
  .create-hero-art {
    min-height: 170px;
    border-radius: 24px;
  }
  .create-hero-art img {
    max-height: 220px;
    transform: scale(1.05);
  }
}
.theme-casino .create-hero-art {
  background: linear-gradient(135deg, rgba(33, 19, 7, .92), rgba(52, 32, 13, .9));
  border-color: rgba(245, 202, 96, .35);
}

/* 2026-07-03: balance create-contest hero and match the frame to the 4:3 illustration. */
.create-illustration-hero {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px) !important;
  gap: clamp(22px, 4vw, 58px) !important;
  align-items: center !important;
  padding: clamp(24px, 4vw, 46px) clamp(26px, 4.5vw, 58px) !important;
}
.create-hero-copy {
  align-self: center;
}
.create-hero-copy p {
  max-width: 620px;
}
.create-hero-art {
  justify-self: end;
  align-self: center !important;
  width: min(100%, 520px);
  min-height: 0 !important;
  aspect-ratio: 4 / 3;
  padding: 0 !important;
  border-radius: 28px;
  background: #fffaf7;
}
.create-hero-art img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  transform: none !important;
}
@media (min-width: 1180px) {
  .create-illustration-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, 560px) !important;
  }
  .create-hero-art {
    width: min(100%, 560px);
  }
}
@media (max-width: 920px) {
  .create-illustration-hero {
    grid-template-columns: 1fr !important;
  }
  .create-hero-art {
    justify-self: start;
    width: min(100%, 560px);
  }
}
@media (max-width: 560px) {
  .create-hero-art {
    width: 100%;
    border-radius: 22px;
  }
}


/* 2026-07-03: final create-contest hero layout based on proposed compact header. */
.create-illustration-hero {
  grid-template-columns: minmax(0, .86fr) minmax(340px, 500px) !important;
  align-items: start !important;
  gap: clamp(22px, 3.4vw, 48px) !important;
  padding: clamp(20px, 2.6vw, 34px) clamp(22px, 3.4vw, 46px) !important;
}
.create-hero-copy {
  align-self: start !important;
  padding-top: clamp(4px, .8vw, 12px);
}
.create-hero-copy .eyebrow {
  margin-bottom: 8px;
}
.create-hero-copy h1 {
  margin: 0 0 16px;
}
.create-hero-copy p {
  max-width: 600px;
  margin: 0;
}
.create-hero-art {
  justify-self: end;
  align-self: start !important;
  width: min(100%, 500px) !important;
  aspect-ratio: 4 / 3;
  padding: 0 !important;
  border-radius: 28px;
  overflow: hidden;
  background: #fffaf7;
}
.create-hero-art img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center;
  transform: scale(1.16) !important;
  transform-origin: center center;
}
.contest-setup-quota.compact-quota-panel {
  margin-top: clamp(14px, 2vw, 22px);
}
@media (min-width: 1180px) {
  .create-illustration-hero {
    grid-template-columns: minmax(0, .9fr) minmax(420px, 520px) !important;
  }
  .create-hero-art {
    width: min(100%, 520px) !important;
  }
}
@media (max-width: 920px) {
  .create-illustration-hero {
    grid-template-columns: 1fr !important;
  }
  .create-hero-art {
    justify-self: start;
    width: min(100%, 520px) !important;
  }
}
@media (max-width: 560px) {
  .create-illustration-hero {
    padding: 20px !important;
    gap: 16px !important;
  }
  .create-hero-art {
    width: 100% !important;
    border-radius: 22px;
  }
  .create-hero-art img {
    transform: scale(1.12) !important;
  }
}

/* 2026-07-03: place create-page quota cards inside the left intro block. */
.create-illustration-hero {
  align-items: start !important;
}
.create-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: min(34vw, 390px);
}
.create-hero-copy .create-hero-quota {
  margin: clamp(26px, 5.6vw, 96px) 0 0 !important;
  align-self: flex-start;
  padding: 0;
}
.create-hero-copy .create-hero-quota > div {
  min-width: 200px;
  background: rgba(255, 255, 255, .66);
}
@media (min-width: 1180px) {
  .create-hero-copy .create-hero-quota {
    margin-top: clamp(34px, 7vw, 112px) !important;
  }
}
@media (max-width: 920px) {
  .create-hero-copy {
    min-height: 0;
  }
  .create-hero-copy .create-hero-quota {
    margin-top: 22px !important;
  }
}
@media (max-width: 560px) {
  .create-hero-copy .create-hero-quota > div {
    min-width: 100%;
  }
}

/* 2026-07-04: safer admin layouts for longer translated labels */
.admin-actions .button,
.admin-actions-row .button,
.demo-admin-actions .button,
.danger-zone .button,
.maintenance-line-form .button,
.button-row .button,
.inline-actions .button {
  min-height: 44px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.demo-admin-actions.single-line {
  grid-template-columns: minmax(280px, 1.25fr) repeat(3, minmax(180px, auto)) !important;
  align-items: stretch !important;
}
.demo-admin-actions.single-line form {
  align-items: stretch !important;
}
.demo-admin-actions.single-line .button {
  width: 100%;
  min-width: 180px;
  max-width: none;
  padding-inline: 14px;
}
.demo-admin-actions.single-line form:first-child .button {
  flex: 0 1 230px;
}

.demo-selected-card {
  margin-top: 28px;
  border-top: 4px solid var(--brand);
}
.demo-selected-card h2 {
  margin-bottom: 18px;
}
.demo-user-edit-form {
  max-width: none !important;
  grid-template-columns: repeat(3, minmax(190px, 1fr)) auto;
  align-items: end;
  gap: 14px;
}
.demo-user-edit-form label {
  min-width: 0;
}
.demo-user-edit-form button {
  min-width: 120px;
  height: 46px;
}
.demo-selected-card .compact-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, max-content));
  justify-content: start;
  align-items: stretch;
  gap: 12px;
  margin-top: 18px;
}
.demo-selected-card .compact-actions form {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.demo-selected-card .compact-actions .button {
  min-width: 180px;
  width: 100%;
}
.demo-selected-card .compact-actions form:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(180px, max-content);
}
.demo-selected-card .compact-actions input[type="text"] {
  min-width: 0 !important;
  max-width: none !important;
  height: 46px;
}
.demo-related-contests {
  margin-top: 16px;
  margin-bottom: 30px;
}
.demo-related-contests .card {
  box-shadow: var(--shadow-soft);
}

.danger-zone .single-line-form {
  grid-template-columns: minmax(160px, auto) minmax(260px, 1fr) minmax(220px, max-content) !important;
}
.danger-zone .single-line-form .button {
  min-width: 220px;
  max-width: 100%;
}

@media (max-width: 1260px) {
  .demo-admin-actions.single-line {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
  .demo-admin-actions.single-line form:first-child .button {
    flex: 1 1 220px;
  }
}
@media (max-width: 980px) {
  .demo-user-edit-form {
    grid-template-columns: 1fr 1fr;
  }
  .demo-user-edit-form button {
    width: 100%;
  }
  .demo-selected-card .compact-actions {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }
}
@media (max-width: 720px) {
  .demo-admin-actions.single-line,
  .danger-zone .single-line-form,
  .demo-user-edit-form,
  .demo-selected-card .compact-actions,
  .demo-selected-card .compact-actions form:last-child {
    grid-template-columns: 1fr !important;
  }
  .demo-admin-actions.single-line .button,
  .demo-selected-card .compact-actions .button,
  .danger-zone .single-line-form .button {
    min-width: 0;
    width: 100%;
  }
}

/* 2026-07-04: demo admin German-safe stat cards and tidy selected user editor */
.demo-stats-wrap.demo-stats-inline {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin: 22px 0 42px !important;
}
.demo-stat-mini {
  min-width: 0 !important;
  width: 100% !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
}
.demo-stat-mini span {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.25 !important;
}
.demo-stat-mini strong {
  flex: 0 0 auto !important;
  font-size: clamp(20px, 2.1vw, 28px) !important;
  white-space: nowrap !important;
}

.demo-selected-card {
  overflow: hidden;
}
.demo-user-editor-title {
  margin-bottom: 22px;
}
.demo-user-editor-title h2 {
  margin: 0;
}
.demo-user-editor-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(320px, .72fr);
  gap: 28px;
  align-items: start;
}
.demo-user-edit-form {
  min-width: 0;
}
.demo-user-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  align-items: end;
}
.demo-user-form-grid label {
  display: grid;
  gap: 8px;
  margin: 0;
  font-weight: 900;
  color: var(--text);
  min-width: 0;
}
.demo-user-form-grid label span {
  font-size: 14px;
  line-height: 1.25;
  color: var(--text);
}
.demo-user-form-grid input {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 50px;
}
.demo-user-form-full {
  grid-column: 1 / -1;
}
.demo-user-save-row {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
.demo-user-save-row .button {
  min-width: 180px;
  min-height: 48px;
}
.demo-user-action-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--soft-card);
}
.demo-user-action-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.demo-user-action-grid form,
.demo-user-purge-form {
  margin: 0;
  min-width: 0;
}
.demo-user-action-grid .button,
.demo-user-purge-form .button {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  white-space: normal;
  line-height: 1.2;
}
.demo-user-purge-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.demo-user-purge-form input[type="text"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 48px;
}
.demo-admin-actions.compact-actions {
  display: none !important;
}

@media (max-width: 980px) {
  .demo-user-editor-layout {
    grid-template-columns: 1fr;
  }
  .demo-user-action-panel {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .demo-stats-wrap.demo-stats-inline {
    grid-template-columns: 1fr !important;
  }
  .demo-user-form-grid {
    grid-template-columns: 1fr;
  }
  .demo-user-save-row {
    justify-content: stretch;
  }
  .demo-user-save-row .button {
    width: 100%;
  }
}

/* SystemD demo activity configuration editor */
.systemd-head { align-items: flex-start; gap: 18px; }
.systemd-actions-top { justify-content: flex-end; }
.systemd-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.systemd-help-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 18px;
  align-items: center;
}
.systemd-upload-form {
  display: grid;
  gap: 10px;
  align-items: end;
}
.systemd-upload-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.systemd-upload-form input[type="file"] {
  width: 100%;
  max-width: 100%;
}
.systemd-validation-card .embedded {
  margin: 10px 0;
}
.systemd-validation-card ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.systemd-editor-form {
  display: grid;
  gap: 18px;
}
.systemd-section {
  overflow: hidden;
}
.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.systemd-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.systemd-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.6);
}
.systemd-table-wrap.compact { max-height: 520px; }
.systemd-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.systemd-persona-table { min-width: 1420px; }
.systemd-table th,
.systemd-table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  vertical-align: middle;
}
.systemd-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
.systemd-table tbody tr:last-child td { border-bottom: 0; }
.systemd-table input[type="text"],
.systemd-table input[type="email"],
.systemd-table input[type="number"],
.systemd-table select {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  box-sizing: border-box;
}
.systemd-table input[type="number"] { min-width: 64px; }
.systemd-table .center { text-align: center; }
.systemd-range-cell {
  min-width: 150px;
  vertical-align: middle;
}
.systemd-range-inputs {
  display: grid;
  grid-template-columns: minmax(58px, 1fr) auto minmax(58px, 1fr);
  gap: 6px;
  align-items: center;
  width: 100%;
}
.systemd-range-cell span,
.systemd-range-inputs span { color: #64748b; text-align: center; }
.small-text { font-size: 12px; line-height: 1.35; display: block; margin-top: 3px; }
.systemd-sticky-save {
  position: sticky;
  bottom: 14px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
}
body.casino-mode .systemd-table th { background: rgba(24, 28, 50, 0.98); }
body.casino-mode .systemd-table-wrap,
body.casino-mode .systemd-help-card,
body.casino-mode .systemd-sticky-save { background: rgba(17, 24, 39, 0.82); }
body.casino-mode .systemd-table input,
body.casino-mode .systemd-table select { background: rgba(15, 23, 42, 0.95); color: inherit; }
@media (max-width: 980px) {
  .systemd-help-card,
  .systemd-two-column { grid-template-columns: 1fr; }
  .systemd-actions-top { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .section-title-row,
  .systemd-sticky-save { flex-direction: column; align-items: stretch; }
  .systemd-sticky-save .button { width: 100%; }
}

/* SystemD editor refinement: wide tables are single-column and horizontally scrollable. */
.systemd-section {
  overflow: visible;
}
.systemd-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.systemd-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-bottom: 8px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
.systemd-table-wrap.compact {
  max-height: none;
}
.systemd-table-wrap::-webkit-scrollbar {
  height: 10px;
}
.systemd-table-wrap::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, 0.7);
  border-radius: 999px;
}
.systemd-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.45);
  border-radius: 999px;
}
.systemd-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.65);
}
.systemd-rules-table {
  min-width: 980px;
}
.systemd-table td:first-child,
.systemd-table th:first-child {
  min-width: 150px;
}
.systemd-persona-table td:first-child,
.systemd-persona-table th:first-child {
  min-width: 72px;
}
@media (max-width: 980px) {
  .systemd-stack {
    grid-template-columns: 1fr;
  }
}


/* 2026-07-04: SystemD editor width alignment and safer table scrolling. */
.systemd-editor-form,
.systemd-stack,
.systemd-section,
.systemd-section.card,
.systemd-table-wrap {
  min-width: 0;
  max-width: 100%;
}
.systemd-section {
  overflow: hidden;
}
.systemd-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
}
.systemd-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.systemd-table input[type="text"],
.systemd-table input[type="email"],
.systemd-table input[type="number"],
.systemd-table select {
  min-width: 0;
  max-width: 100%;
}
.systemd-market-table { min-width: 920px; }
.systemd-market-table th:nth-child(1),
.systemd-market-table td:nth-child(1) { width: 27%; }
.systemd-market-table th:nth-child(2),
.systemd-market-table td:nth-child(2) { width: 30%; }
.systemd-market-table th:nth-child(n+3),
.systemd-market-table td:nth-child(n+3) { width: 10.75%; }
.systemd-theme-table { min-width: 880px; }
.systemd-theme-table th:nth-child(1),
.systemd-theme-table td:nth-child(1) { width: 24%; }
.systemd-theme-table th:nth-child(2),
.systemd-theme-table td:nth-child(2) { width: 24%; }
.systemd-theme-table th:nth-child(3),
.systemd-theme-table td:nth-child(3) { width: 12%; }
.systemd-theme-table th:nth-child(4),
.systemd-theme-table td:nth-child(4) { width: 40%; }
.systemd-asset-table { min-width: 1120px; }
.systemd-asset-table th:nth-child(1),
.systemd-asset-table td:nth-child(1) { width: 78px; }
.systemd-asset-table th:nth-child(2),
.systemd-asset-table td:nth-child(2) { width: 190px; }
.systemd-asset-table th:nth-child(3),
.systemd-asset-table td:nth-child(3) { width: 105px; }
.systemd-asset-table th:nth-child(4),
.systemd-asset-table td:nth-child(4) { width: 145px; }
.systemd-asset-table th:nth-child(5),
.systemd-asset-table td:nth-child(5) { width: 145px; }
.systemd-asset-table th:nth-child(6),
.systemd-asset-table td:nth-child(6) { width: 310px; }
.systemd-asset-table th:nth-child(7),
.systemd-asset-table td:nth-child(7) { width: 100px; }
.systemd-rules-table { min-width: 900px; }
.systemd-rules-table th:first-child,
.systemd-rules-table td:first-child { width: 36%; }
.systemd-rules-table th:not(:first-child),
.systemd-rules-table td:not(:first-child) { width: 16%; }
.systemd-persona-table { min-width: 1420px; }
.systemd-table td:first-child,
.systemd-table th:first-child { min-width: 0; }
.systemd-persona-table td:first-child,
.systemd-persona-table th:first-child { width: 72px; min-width: 72px; }
@media (max-width: 1100px) {
  .systemd-market-table,
  .systemd-theme-table,
  .systemd-rules-table {
    min-width: 860px;
  }
}

/* 2026-07-04: SystemD persona preferred theme multi-select. */
.systemd-table select.systemd-multiselect {
  min-height: 108px;
  padding: 7px;
  overflow-y: auto;
}
.systemd-persona-table th:nth-child(9),
.systemd-persona-table td:nth-child(9) { width: 280px; }
.systemd-persona-table { min-width: 1600px; }

.systemd-persona-table th:nth-child(5),
.systemd-persona-table td:nth-child(5) { width: 190px; }

/* 2026-07-04: SystemD scheduler and activity-window editor. */
.systemd-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.systemd-settings-grid label {
  display: grid;
  gap: 7px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}
.systemd-settings-grid input[type="text"],
.systemd-settings-grid input[type="number"] {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 12px;
  padding: 11px 12px;
  background: #fff;
  box-sizing: border-box;
}
.systemd-check-option {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.75);
}
.systemd-check-option input[type="checkbox"] {
  margin-top: 4px;
}
.systemd-check-option span {
  display: grid;
  gap: 4px;
}
.systemd-check-option small {
  color: #64748b;
  line-height: 1.35;
  font-weight: 600;
}
.systemd-time-table { min-width: 980px; }
.systemd-time-table th:nth-child(1),
.systemd-time-table td:nth-child(1) { width: 24%; }
.systemd-time-table th:nth-child(2),
.systemd-time-table td:nth-child(2) { width: 24%; }
.systemd-time-table th:nth-child(3),
.systemd-time-table td:nth-child(3) { width: 30%; }
.systemd-time-table th:nth-child(4),
.systemd-time-table td:nth-child(4) { width: 22%; }
.systemd-persona-table { min-width: 1980px; }
.systemd-persona-table th:nth-child(9),
.systemd-persona-table td:nth-child(9) { width: 190px; }
.systemd-persona-table th:nth-child(10),
.systemd-persona-table td:nth-child(10) { width: 140px; }
.systemd-persona-table th:nth-child(11),
.systemd-persona-table td:nth-child(11) { width: 130px; }
.systemd-persona-table th:nth-child(12),
.systemd-persona-table td:nth-child(12) { width: 280px; }
.systemd-persona-table th:nth-child(13),
.systemd-persona-table td:nth-child(13) { width: 130px; }
body.casino-mode .systemd-settings-grid input,
body.casino-mode .systemd-check-option { background: rgba(15, 23, 42, 0.85); color: inherit; }

/* 2026-07-04: league countdown and compact rank-movement indicators */
.league-countdown-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-left: 5px solid var(--accent, #2563eb);
}
.league-countdown-value {
  display: block;
  margin-top: 4px;
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.league-countdown-card.is-finished {
  opacity: .78;
}
.rank-move {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  margin-right: 6px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
.rank-move-up { color: #d92d20; }
.rank-move-down { color: #175cd3; }
.rank-move-flat { color: #98a2b3; font-weight: 700; }
@media (max-width: 720px) {
  .league-countdown-card { align-items: flex-start; flex-direction: column; }
  .rank-move { min-width: 28px; margin-right: 4px; }
}

/* Privacy retention admin spacing */
.privacy-retention-notice { margin-bottom: 2rem; }

.status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: #eef2ff;
  color: #3730a3;
  text-transform: uppercase;
}
.status-pill.ok { background: #dcfce7; color: #166534; }
.status-pill.warning { background: #fef3c7; color: #92400e; }
.status-pill.danger { background: #fee2e2; color: #991b1b; }
.small-stack p { margin: 0.25rem 0; }
.danger-zone { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(185, 28, 28, 0.35); }

/* 2026-07-04: wider ranking nickname column and compact rank movement display */
.league-ranking-table {
  table-layout: auto;
  width: 100%;
}
.league-ranking-table .rank-col { width: 5%; }
.league-ranking-table .nickname-col { width: 18%; min-width: 180px; }
.league-ranking-table .value-col { width: 12%; }
.league-ranking-table .cash-col { width: 12%; }
.league-ranking-table .return-col { width: 8%; }
.league-ranking-table .symbols-col { width: 25%; }
.league-ranking-table .eligibility-col { width: 14%; }
.league-ranking-table td:nth-child(2),
.league-ranking-table th:nth-child(2) {
  white-space: nowrap;
}
.ranking-nickname {
  display: inline-block;
  white-space: nowrap;
  max-width: 15ch;
  vertical-align: middle;
}
.league-ranking-table td:nth-child(7),
.league-ranking-table th:nth-child(7) {
  width: 14%;
}
@media (max-width: 900px) {
  .league-ranking-table .nickname-col { min-width: 140px; }
  .league-ranking-table td:nth-child(2),
  .league-ranking-table th:nth-child(2) { white-space: normal; }
}


.systemd-dry-run-notice {
  margin-top: 1.1rem;
}

/* SystemD execution result details */
.warning-soft {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}
.warning-text { color: #9a3412; }
.compact-metrics { margin: 1rem 0; }
.systemd-execution-result h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
}
.systemd-result-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.compact-table {
  font-size: 0.88rem;
}
.compact-table th,
.compact-table td {
  padding: 0.55rem 0.6rem;
  vertical-align: top;
}
.compact-table td:last-child {
  max-width: 520px;
  word-break: break-word;
}
@media (min-width: 1200px) {
  .systemd-result-columns {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-05: past league winner label and SystemD/admin announcement refinements */
.archive-row-winner {
  min-width: 260px;
  max-width: 360px;
}
.archive-row-winner span {
  white-space: nowrap;
  flex: 0 0 auto;
}
.archive-row-winner strong {
  flex: 1 1 auto;
}
.past-leagues-list .archive-row {
  grid-template-columns: minmax(230px, 1fr) minmax(260px, 1.25fr) minmax(250px, 1fr) minmax(115px, .48fr) minmax(270px, 1.05fr);
}
.systemd-execute-form {
  align-items: flex-end;
  gap: 14px;
}
.systemd-execute-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.systemd-execute-form input[type="number"] {
  width: 104px;
  height: 54px;
  min-height: 54px;
  box-sizing: border-box;
}
.systemd-execute-form .button,
.systemd-execute-form button {
  height: 54px;
  min-height: 54px;
  box-sizing: border-box;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  overflow-wrap: normal;
}
.systemd-preview-metrics .metric-card:first-child strong {
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.home-announcement-popup {
  position: fixed;
  right: 24px;
  top: 88px;
  z-index: 1200;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.home-announcement-popup[hidden] { display: none; }
.home-announcement-popup-card {
  pointer-events: auto;
  padding: 18px 18px 16px;
  border: 1px solid rgba(239, 68, 68, .28);
  border-top: 5px solid #ef4444;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff7ed, #fff1f2);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .18);
}
.home-announcement-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.home-announcement-close {
  appearance: none;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.home-announcement-close:hover { background: rgba(15, 23, 42, .14); color: var(--ink); }
.home-announcement-copy { min-width: 0; }
.home-announcement-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(239, 68, 68, .12);
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
}
.home-announcement-copy strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 8px;
}
.home-announcement-copy p {
  margin: 0;
  color: var(--text);
  line-height: 1.55;
  white-space: normal;
  max-height: 220px;
  overflow: auto;
}
.home-announcement-popup-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}
@media (max-width: 820px) {
  .home-announcement-popup {
    left: 16px;
    right: 16px;
    top: 78px;
    width: auto;
  }
  .systemd-execute-form { align-items: stretch; }
  .systemd-execute-form .button,
  .systemd-execute-form button { align-self: stretch; width: 100%; }
}
@media (max-width: 1220px) {
  .past-leagues-list .archive-row { grid-template-columns: 1fr 1.2fr 1fr; }
  .archive-row-winner { justify-content: flex-start; text-align: left; max-width: none; }
}
@media (max-width: 760px) {
  .past-leagues-list .archive-row { grid-template-columns: 1fr; align-items: stretch; }
  .archive-row-winner { min-width: 0; }
}

/* 2026-07-06: profile flag avatars and market scope controls */
.user-avatar.avatar-flag-icon {
  border-radius: 7px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .45);
  box-shadow: 0 5px 14px rgba(15,23,42,.10);
  padding: 2px;
}
.user-avatar.avatar-flag-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.user-avatar.avatar-custom-image { border-radius: 999px; }
.user-avatar-large.avatar-flag-icon {
  width: 112px;
  height: 78px;
  border-radius: 13px;
  padding: 4px;
}
.user-avatar-large.avatar-flag-icon img { border-radius: 9px; }
.locked-hint {
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.market-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 12px;
  margin-top: 8px;
}
.market-scope-field > label:first-child { font-weight: 800; }

/* 2026-07-06: profile flag picker from static/flags and separated paid profile image */
.user-avatar.avatar-flag-icon {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 4px !important;
}
.user-avatar.avatar-flag-icon img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 3px !important;
  object-fit: cover;
}
.user-avatar-small.avatar-flag-icon {
  width: 30px;
  height: 21px;
}
.user-avatar-large.avatar-flag-icon {
  width: 56px !important;
  height: 39px !important;
  min-width: 56px;
  min-height: 39px;
}
.user-avatar-large.avatar-custom-image {
  width: 96px;
  height: 96px;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
}
.user-avatar-large.avatar-custom-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}
.profile-country-live-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  width: fit-content;
}
.country-preview-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.country-preview-flag {
  display: inline-flex;
  width: 58px;
  height: 40px;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}
.country-preview-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 800;
}
.checkbox-row input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
}
.profile-image-card .avatar-preview-row,
.avatar-settings-card .avatar-preview-row {
  align-items: center;
}


/* 2026-07-06: participant flags and contest market scope notice */
.ranking-nickname { vertical-align: middle; }
.ranking-country-flag { display: inline-flex; width: 22px; height: 15px; margin-left: 6px; vertical-align: -2px; border-radius: 2px; overflow: hidden; box-shadow: none; background: transparent; }
.ranking-country-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.market-scope-notice { display: flex; flex-direction: column; gap: 10px; }
.market-scope-notice-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.market-scope-notice-head strong { font-size: 16px; }
.market-scope-notice-head span { color: var(--brand); font-weight: 800; }
.market-scope-icons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.market-scope-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 13px; font-weight: 800; color: var(--text); }
.market-scope-badge img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; display: block; }
.market-scope-badge em { font-style: normal; }
.field-inline-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 500; }

/* 2026-07-06: password visibility toggle for signup */
.password-field {
  position: relative;
  display: block;
  width: 100%;
}
.password-field input {
  width: 100%;
  padding-right: 46px;
}
.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 17px;
  line-height: 1;
}
.password-toggle:hover,
.password-toggle:focus-visible,
.password-toggle.is-visible {
  background: var(--soft);
  color: var(--brand);
  outline: none;
}

/* 2026-07-06: create form and advanced preview polish */
.primary-create-button {
  min-width: 180px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 16px;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 14px 28px rgba(29, 78, 216, .22);
}
.setup-submit-bar {
  align-items: center;
  gap: 18px;
}
.advanced-readonly-panel summary {
  cursor: pointer;
}
.readonly-advanced-body input[disabled] {
  background: rgba(148, 163, 184, .12);
  color: var(--text, #111827);
  opacity: .88;
  cursor: not-allowed;
}
.readonly-advanced-body .hint {
  margin-bottom: 14px;
}

/* 2026-07-06: create form paid preview and reward modal */
.readonly-paid-preview-grid input[disabled] {
  background: #f8fafc;
  color: #475467;
  border-color: #d0d5dd;
  font-weight: 600;
}
.contest-hero-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.reward-open-button {
  border-radius: 999px;
  font-weight: 800;
}
.reward-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(15, 23, 42, .52);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.reward-modal-backdrop[hidden] {
  display: none;
}
.reward-modal-card {
  width: min(560px, 100%);
  max-height: 82vh;
  overflow: auto;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
  padding: 1.35rem;
}
.reward-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.reward-modal-head h2 {
  margin: 0;
}
.reward-modal-close {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #101828;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
}
.reward-modal-close::before {
  content: "×";
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}
.reward-modal-close:hover,
.reward-modal-close:focus-visible {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
  outline: none;
}
.reward-modal-body {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e4e7ec;
  color: #344054;
}
body.modal-open {
  overflow: hidden;
}
#symbol-suggestion-caption {
  margin-top: .4rem;
  margin-bottom: .35rem;
}

/* 2026-07-06: clearer league management page and owner actions. */
.manage-settings-card .contest-manage-form {
  display: block;
}
.manage-form-section {
  margin-bottom: 1rem;
}
.manage-form-section h3 {
  margin: 0 0 .8rem;
}
.manage-advanced-panel {
  margin-top: 1rem;
}
.manage-submit-row {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
.danger-zone-card {
  border-color: #fecaca;
  background: #fffafa;
}
.danger-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.danger-action-grid form {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: flex-start;
}
.button.danger, button.danger {
  background: #b42318;
  color: #fff;
  border-color: #b42318;
  white-space: nowrap;
}
.button.danger:hover, button.danger:hover {
  background: #912018;
}
.button.danger-soft, button.danger-soft {
  color: #b42318;
  border-color: #fecdca;
  background: #fff5f5;
  white-space: nowrap;
}
.search-row button,
.inline-actions button,
button.small,
.button.small {
  white-space: nowrap;
  min-width: fit-content;
}

/* Contact page and safer owner actions */
.contact-hero { background: linear-gradient(135deg, rgba(37,99,235,.09), rgba(16,185,129,.08)); border-color: rgba(37,99,235,.18); }
.contact-hero-copy { max-width: 820px; }
.contact-hero h1 { margin: .35rem 0 .5rem; font-size: clamp(2rem, 4vw, 3rem); }
.contact-hero p { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.contact-shell { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .8fr); gap: 1.25rem; align-items: start; }
.contact-card { background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 1.4rem; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06); }
.contact-card textarea { min-height: 180px; resize: vertical; }
.professional-contact-message {
  display: grid;
  gap: 1rem;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--brand) 4%, var(--card));
}
.professional-contact-message h2,
.professional-contact-message p { margin: 0; }
.professional-contact-greeting,
.professional-contact-closing { font-weight: 750; }
.professional-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.professional-contact-field {
  display: grid;
  gap: .45rem;
  min-width: 0;
}
.professional-contact-field > span,
.professional-contact-period legend,
.professional-contact-period label > span {
  font-weight: 750;
  color: var(--text);
}
.professional-contact-field-wide { grid-column: 1 / -1; }
.professional-contact-period {
  margin: 0;
  padding: 0;
  border: 0;
}
.professional-contact-period legend { margin-bottom: .45rem; }
.professional-contact-period-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .75rem;
  align-items: end;
}
.professional-contact-period-grid label {
  display: grid;
  gap: .4rem;
  min-width: 0;
}
.professional-contact-period-separator {
  padding-bottom: .72rem;
  font-weight: 850;
  color: var(--muted);
}
.professional-contact-message textarea { min-height: 110px; }
.contact-privacy-box { padding: 1rem; border-radius: 16px; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.13); }
.contact-submit-row { display: flex; justify-content: flex-end; }
.contact-side-card { position: sticky; top: 88px; }
.contact-bullet-list { margin: .75rem 0 0; padding-left: 1.15rem; color: var(--muted); line-height: 1.75; }
.owner-danger-confirm-grid { align-items: stretch; }
.danger-confirm-form { display: grid; grid-template-columns: minmax(140px, auto) minmax(150px, 1fr); gap: .9rem; align-items: center; padding: 1rem; border: 1px solid rgba(220,38,38,.22); border-radius: 16px; background: rgba(254,242,242,.55); }
.danger-confirm-label { display: grid; gap: .3rem; font-size: .86rem; color: var(--muted); }
.danger-confirm-label input { text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 860px) {
  .contact-shell { grid-template-columns: 1fr; }
  .contact-side-card { position: static; }
  .danger-confirm-form { grid-template-columns: 1fr; }
  .professional-contact-grid { grid-template-columns: 1fr; }
  .professional-contact-field-wide { grid-column: auto; }
}
@media (max-width: 620px) {
  .professional-contact-period-grid { grid-template-columns: 1fr; }
  .professional-contact-period-separator { display: none; }
}

/* 2026-07-06: admin TOTP and tidier owner action layout. */
.auth-security-card .totp-setup-box {
  display: grid;
  gap: .55rem;
  padding: 1rem;
  margin: 1rem 0;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #dbeafe;
}
.totp-secret {
  display: block;
  padding: .8rem 1rem;
  border-radius: 14px;
  background: #0f172a;
  color: #e0f2fe;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
}
.totp-uri-panel {
  margin: .75rem 0 1rem;
  padding: .8rem 1rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
}
.totp-uri-panel summary {
  cursor: pointer;
  font-weight: 800;
}
.totp-uri {
  display: block;
  margin-top: .75rem;
  font-size: .82rem;
  color: var(--muted);
}
.totp-form input {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .14em;
}
.contest-manage-form select {
  min-height: 46px;
  height: 46px;
  line-height: 1.2;
  padding-top: 0;
  padding-bottom: 0;
}
.owner-danger-stack {
  display: grid;
  gap: 1rem;
}
.owner-action-row.danger-confirm-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid rgba(220,38,38,.22);
  border-radius: 16px;
  background: rgba(254,242,242,.55);
}
.owner-action-main-row {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(130px, 220px);
  gap: .75rem;
  align-items: center;
}
.owner-action-main-row input {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
}
.owner-action-help {
  display: grid;
  gap: .25rem;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .owner-action-main-row {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-06: admin member filtering and plan expiry polish. */
.section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.admin-user-filter {
  min-width: min(260px, 100%);
}
.admin-user-filter label {
  margin: 0;
}
.admin-user-filter select {
  min-height: 42px;
}
.member-detail-card {
  display: grid;
  gap: 1.15rem;
}
.member-status-pills {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  flex-wrap: wrap;
}
.member-profile-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 1rem;
  padding: 1rem;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(36,99,235,.08), rgba(20,184,166,.08));
  border: 1px solid rgba(37,99,235,.12);
}
.member-profile-main {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
}
.member-avatar-large {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #0f172a;
  color: #fff;
  font-weight: 900;
  font-size: 1.35rem;
  box-shadow: 0 12px 24px rgba(15,23,42,.12);
}
.member-profile-main h3 {
  margin: 0 0 .18rem;
  font-size: 1.25rem;
}
.member-profile-main p {
  margin: 0;
  color: var(--muted);
}
.member-plan-summary {
  display: grid;
  gap: .25rem;
  align-content: center;
  padding: .75rem .9rem;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
}
.member-plan-summary span,
.member-plan-summary small {
  color: var(--muted);
}
.member-plan-summary strong {
  font-size: 1.15rem;
}
.refined-member-info-grid {
  gap: .75rem;
}
.refined-member-info-grid > div {
  padding: .85rem .95rem;
  border-radius: 16px;
  background: rgba(248,250,252,.78);
  border: 1px solid var(--line);
}
.refined-member-info-grid span {
  display: block;
  margin-bottom: .28rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}
.refined-member-info-grid strong {
  display: block;
  color: var(--text);
}
.plan-admin-panel {
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(37,99,235,.16);
  background: rgba(239,246,255,.55);
}
.plan-admin-header h3 {
  margin: 0 0 .25rem;
}
.plan-admin-grid {
  margin-top: .75rem;
}
.quick-expiry-panel {
  padding: .85rem;
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  border: 1px solid var(--line);
}
.quick-expiry-buttons {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .45rem 0 .25rem;
}
.mini-label {
  display: block;
  font-weight: 800;
  color: var(--text);
}
@media (max-width: 760px) {
  .member-profile-panel {
    grid-template-columns: 1fr;
  }
  .member-plan-summary {
    align-content: start;
  }
}

/* 2026-07-06: compact invitation accept illustration */
.invite-accept-card .invite-hero-visual {
  padding: 6px !important;
  max-width: 420px !important;
  margin: 0 auto 16px !important;
}
.invite-accept-card .invite-illustration {
  max-width: 320px;
  width: min(100%, 320px);
  aspect-ratio: auto;
  margin: 0 auto;
}
@media (max-width: 560px) {
  .invite-accept-card .invite-hero-visual { max-width: 100% !important; }
  .invite-accept-card .invite-illustration { max-width: 240px; }
}


/* 2026-07-06: invite page heading illustration alignment */
.invite-accept-card .invite-accept-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  margin-bottom: 18px;
}
.invite-accept-card .invite-accept-copy h1 {
  margin-top: 0;
}
.invite-accept-card .invite-accept-copy p {
  margin-bottom: 0;
}
.invite-accept-card .invite-hero-visual {
  padding: 2px !important;
  max-width: 210px !important;
  width: 210px;
  margin: 0 !important;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.invite-accept-card .invite-illustration {
  max-width: 198px !important;
  width: 198px !important;
  height: auto;
  aspect-ratio: auto;
  margin: 0 !important;
}
@media (max-width: 720px) {
  .invite-accept-card .invite-accept-heading {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .invite-accept-card .invite-hero-visual {
    width: 180px;
    max-width: 180px !important;
  }
  .invite-accept-card .invite-illustration {
    max-width: 170px !important;
    width: 170px !important;
  }
}

/* 2026-07-07: contact page account-tier comparison. */
.account-tier-comparison {
  margin-top: 1.25rem;
}
.account-tier-comparison table td:first-child,
.account-tier-comparison table th:first-child {
  font-weight: 800;
  color: #344054;
}
.account-tier-comparison table td:nth-child(3) {
  font-weight: 700;
}

/* 2026-07-07: visible account-tier badges beside user identity. */
.account-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  width: fit-content;
  max-width: 100%;
  padding: .16rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid rgba(148, 163, 184, .42);
  background: rgba(241, 245, 249, .92);
  color: #334155;
}
.account-tier-badge.professional {
  border-color: rgba(180, 83, 9, .28);
  background: rgba(255, 251, 235, .96);
  color: #92400e;
}
.account-tier-badge.basic {
  border-color: rgba(37, 99, 235, .18);
  background: rgba(239, 246, 255, .96);
  color: #1d4ed8;
}
.profile-menu-button .account-tier-badge {
  margin-left: .15rem;
}
.identity-with-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
}

/* 2026-07-07: reward levels and stronger modal close hover contrast. */
.reward-modal-close:hover,
.reward-modal-close:focus-visible {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #7c2d12;
}
.level-icon-small,
.ranking-level-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 4px 10px rgba(15,23,42,.08);
  overflow: hidden;
  flex-shrink: 0;
}
.level-icon-small img,
.ranking-level-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.ranking-level-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  vertical-align: middle;
  margin-left: .25rem;
}
.level-icon-large {
  display: inline-flex;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  padding: .3rem;
  background: linear-gradient(135deg, rgba(239,246,255,.95), rgba(255,251,235,.95));
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  flex-shrink: 0;
}
.level-icon-large img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.user-level-summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.level-summary-main { display: flex; align-items: center; gap: 1rem; }
.level-summary-main h2 { margin: .1rem 0 .25rem; }
.level-modal-card { max-width: 780px; }
.level-row-label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; }
.level-row-label img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.level-howto-box {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.reward-points-card { margin-top: 1rem; }
.reward-points-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.reward-points-item {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.reward-points-item strong { display: block; color: #1e293b; }
.reward-points-item span { display: block; font-size: 1.45rem; font-weight: 900; color: #1d4ed8; margin: .2rem 0; }
.reward-points-item small { color: #64748b; }
@media (max-width: 760px) {
  .user-level-summary-card { align-items: flex-start; flex-direction: column; }
  .reward-points-grid { grid-template-columns: 1fr; }
}

/* 2026-07-07: compact winner/leader identity icons. */
.leader-level-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
.winner-profile-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.past-leagues-list .archive-row {
  grid-template-columns: minmax(190px, .8fr) minmax(260px, 1.45fr) minmax(240px, .95fr) minmax(320px, 1.2fr);
}
.past-leagues-list .archive-row-winner {
  min-width: 0;
  max-width: none;
  justify-content: flex-end;
}
.past-leagues-list .archive-row-winner strong {
  max-width: 145px;
}
.private-readonly-list .archive-row {
  grid-template-columns: minmax(150px, .75fr) minmax(260px, 1.35fr) minmax(240px, 1fr) minmax(150px, .7fr);
  max-width: none;
}
@media (max-width: 1220px) {
  .past-leagues-list .archive-row,
  .private-readonly-list .archive-row { grid-template-columns: 1fr 1.25fr; }
  .past-leagues-list .archive-row-winner { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .past-leagues-list .archive-row,
  .private-readonly-list .archive-row { grid-template-columns: 1fr; }
}

/* 2026-07-07: private league direct join actions and richer comparison/level tables. */
.private-readonly-list .archive-row {
  opacity: 1;
  filter: none;
  cursor: default;
}
.private-readonly-list .archive-row-title a {
  color: var(--text);
  text-decoration: none;
}
.private-readonly-list .archive-row-title a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.private-row-action {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
.private-join-button {
  min-width: 96px;
  max-width: 128px;
  padding-inline: .85rem;
  white-space: nowrap;
  text-align: center;
}
.private-readonly-list .archive-row {
  grid-template-columns: minmax(150px, .72fr) minmax(250px, 1.25fr) minmax(230px, .96fr) minmax(140px, .62fr) minmax(108px, .38fr);
}
.level-modal-card { max-width: 980px; }
.level-modal-section + .level-modal-section { margin-top: 1.1rem; }
.level-modal-section h3 {
  margin: .15rem 0 .65rem;
  font-size: 1.05rem;
}
.level-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.reward-rule-table-card {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.reward-rule-table-card h4 {
  margin: 0;
  padding: .78rem .95rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: .95rem;
}
.reward-rule-table { margin: 0; }
.reward-rule-table th,
.reward-rule-table td {
  text-align: center;
  white-space: nowrap;
}
.reward-rule-table th:first-child,
.reward-rule-table td:first-child {
  text-align: left;
  font-weight: 800;
}
.level-howto-box ul { margin: 0; padding-left: 1.1rem; }
.level-howto-box li + li { margin-top: .35rem; }
.pricing-style-comparison { margin-top: 1.25rem; }
.tier-plan-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.tier-plan-card {
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 1.25rem;
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: var(--shadow-soft);
}
.tier-plan-card.professional {
  border-color: rgba(245, 158, 11, .42);
  background: linear-gradient(180deg, #fff, #fffbeb);
}
.tier-plan-card h3 { margin: .25rem 0 .45rem; font-size: 1.35rem; }
.tier-plan-card p { color: var(--muted); margin: 0 0 .85rem; }
.tier-plan-card ul { margin: 0; padding-left: 1.1rem; }
.tier-plan-card li + li { margin-top: .42rem; }
.tier-feature-matrix { margin-top: .75rem; }
.tier-feature-matrix h3 { margin-top: 0; }
.tier-feature-matrix table td:first-child,
.tier-feature-matrix table th:first-child {
  font-weight: 900;
  color: #334155;
  width: 28%;
}
.tier-feature-matrix table td:nth-child(3),
.tier-feature-matrix table th:nth-child(3) {
  background: rgba(255, 251, 235, .58);
}
@media (max-width: 1220px) {
  .private-readonly-list .archive-row { grid-template-columns: 1fr 1.2fr 1fr; }
  .private-row-action { justify-content: flex-start; }
}
@media (max-width: 820px) {
  .level-rules-grid,
  .tier-plan-cards { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .private-readonly-list .archive-row { grid-template-columns: 1fr; }
  .private-join-button { width: 100%; max-width: none; }
}

/* 2026-07-07: theme contrast fixes for Deep Focus/Golden Play and unified user flag badges. */
.theme-balanced .rules-box,
.theme-balanced .contest-rules-card,
.theme-balanced .reward-points-card,
.theme-balanced .reward-points-grid div,
.theme-balanced .level-howto-box {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #3b506e !important;
}
.theme-balanced .rules-box,
.theme-balanced .rules-box p,
.theme-balanced .rules-box li,
.theme-balanced .contest-rules-card p,
.theme-balanced .contest-rules-card .hint,
.theme-balanced .contest-rules-card label,
.theme-balanced .reward-points-card p,
.theme-balanced .reward-points-card span,
.theme-balanced .level-howto-box,
.theme-balanced .level-howto-box li {
  color: #e5eefb !important;
}
.theme-balanced .contest-rules-card input,
.theme-balanced .contest-rules-card textarea,
.theme-balanced .contest-rules-card select {
  background: #0b1220 !important;
  color: #ffffff !important;
  border-color: #cbd5e1 !important;
}
.theme-balanced .contest-rules-card input::placeholder,
.theme-balanced .contest-rules-card textarea::placeholder { color: #94a3b8 !important; }

.theme-casino .private-readonly-list .archive-row,
.theme-casino .archive-compact-list .archive-row,
.theme-casino .past-leagues-list .archive-row {
  background: linear-gradient(180deg, #35210d, #211307) !important;
  border-color: rgba(255,213,103,.48) !important;
  border-top-color: #ffd567 !important;
  color: #fffbe8 !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
}
.theme-casino .private-readonly-list .archive-row-title a,
.theme-casino .private-readonly-list .archive-row-title span,
.theme-casino .archive-compact-list .archive-row-title a,
.theme-casino .archive-compact-list .archive-row-title span,
.theme-casino .past-leagues-list .archive-row-title a,
.theme-casino .past-leagues-list .archive-row-title span {
  color: #fffbe8 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.38);
}
.theme-casino .private-readonly-list .archive-row-title a:hover,
.theme-casino .archive-compact-list .archive-row-title a:hover,
.theme-casino .past-leagues-list .archive-row-title a:hover { color: #ffd567 !important; }
.theme-casino .archive-row-meta,
.theme-casino .archive-row-winner,
.theme-casino .private-row-action {
  color: #fffbe8 !important;
}
.theme-casino .archive-row-meta {
  background: rgba(20, 12, 5, .72) !important;
  border-color: rgba(255,213,103,.38) !important;
}
.theme-casino .archive-row-meta span,
.theme-casino .archive-row-meta strong,
.theme-casino .archive-row-winner span,
.theme-casino .archive-row-winner strong,
.theme-casino .archive-row-note {
  color: #ffe6a7 !important;
}
.theme-casino .private-join-button,
.theme-casino a.private-join-button {
  color: #241303 !important;
  background: linear-gradient(180deg, #ffe08a, #f7c948) !important;
  border-color: rgba(255,213,103,.75) !important;
}
.theme-casino .private-join-button:hover,
.theme-casino a.private-join-button:hover {
  color: #120b05 !important;
  background: linear-gradient(180deg, #fff3c4, #ffd567) !important;
}
.theme-casino .private-join-button.disabled,
.theme-casino button.private-join-button:disabled {
  color: #f3d88d !important;
  background: rgba(255,244,214,.12) !important;
  border-color: rgba(245,202,96,.28) !important;
  opacity: 1 !important;
}

.user-avatar.avatar-flag-icon,
.user-avatar-small.avatar-flag-icon,
.ranking-country-flag,
.winner-profile-icons .ranking-country-flag,
.leader-country-flag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 8px !important;
  padding: 1px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  box-shadow: 0 4px 10px rgba(15,23,42,.08) !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  margin-left: .25rem;
  flex-shrink: 0 !important;
}
.user-avatar.avatar-flag-icon img,
.user-avatar-small.avatar-flag-icon img,
.ranking-country-flag img,
.winner-profile-icons .ranking-country-flag img,
.leader-country-flag img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  display: block !important;
}
.topbar .user-avatar.avatar-flag-icon,
.profile-identity .user-avatar.avatar-flag-icon { margin-left: 0; }
.user-avatar-large.avatar-flag-icon {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  border-radius: 18px !important;
  padding: .3rem !important;
  background: linear-gradient(135deg, rgba(239,246,255,.95), rgba(255,251,235,.95)) !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.10) !important;
}
.user-avatar-large.avatar-flag-icon img {
  border-radius: 13px !important;
  object-fit: cover !important;
}


/* 2026-07-07: private-list join alignment and topbar identity icon normalization. */
.profile-menu-button .user-avatar.avatar-flag-icon,
.profile-menu-button .user-avatar-small.avatar-flag-icon,
.profile-menu-button .level-icon-small {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  padding: 1px !important;
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  box-shadow: 0 4px 10px rgba(15,23,42,.08) !important;
  margin-left: 0 !important;
}
.profile-menu-button .level-icon-small img,
.profile-menu-button .user-avatar.avatar-flag-icon img,
.profile-menu-button .user-avatar-small.avatar-flag-icon img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
}
.private-readonly-list .archive-row {
  align-items: center;
  gap: .85rem;
}
.private-readonly-list .archive-row-title.private-title {
  min-width: 0;
  margin: 0;
}
.private-readonly-list .archive-row-title.private-title span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.private-row-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 92px;
}
.private-join-button,
button.private-join-button,
a.private-join-button {
  width: 86px;
  min-width: 86px;
  max-width: 86px;
  min-height: 42px;
  padding: .65rem .7rem;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
}
button.private-join-button:disabled,
.private-join-button.disabled {
  opacity: .72;
  cursor: not-allowed;
}
.private-gate-shell {
  min-height: min(620px, 72vh);
  display: grid;
  place-items: center;
}
.private-gate-card {
  width: min(520px, 100%);
}
.private-gate-title-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .8rem;
}
.private-gate-title-row h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.private-gate-form .button-row {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
@media (min-width: 860px) {
  .private-readonly-list .archive-row {
    grid-template-columns: 1.05fr minmax(180px, 1.35fr) minmax(230px, .95fr) minmax(150px, .7fr) 100px !important;
  }
}
@media (max-width: 859px) {
  .private-readonly-list .archive-row {
    grid-template-columns: 1fr !important;
  }
  .private-row-action { justify-content: flex-start; }
  .private-join-button,
  button.private-join-button,
  a.private-join-button { width: 100%; max-width: none; }
}
.theme-casino .private-readonly-list .archive-row-title.private-title span {
  color: #fff7df !important;
}

/* 2026-07-07: wider reward level modal, balanced past winners, and Golden Play plan contrast. */
.reward-modal-card.level-modal-card {
  width: min(1160px, calc(100vw - 32px));
  max-width: none;
}
.reward-modal-card.level-modal-card .reward-modal-body {
  overflow-x: auto;
}
.level-rules-grid {
  grid-template-columns: repeat(2, minmax(420px, 1fr));
}
.reward-rule-table {
  width: 100%;
  table-layout: auto;
}
.reward-rule-table th,
.reward-rule-table td {
  padding-left: .8rem;
  padding-right: .8rem;
}
.reward-rule-table th:first-child,
.reward-rule-table td:first-child {
  min-width: 150px;
}

.past-leagues-list .archive-row {
  grid-template-columns: minmax(170px, .7fr) minmax(260px, 1.35fr) minmax(290px, .95fr) minmax(360px, 1.35fr) !important;
}
.past-leagues-list .archive-row-winner {
  min-width: 0;
  max-width: none;
  justify-content: flex-start;
  width: 100%;
}
.past-leagues-list .archive-row-winner strong {
  flex: 1 1 auto;
  min-width: 120px;
  max-width: none;
}
.winner-profile-icons {
  flex: 0 0 auto;
}
.past-leagues-list .archive-row-winner em {
  flex: 0 0 auto;
}

.theme-casino .pricing-style-comparison,
.theme-casino .pricing-style-comparison p,
.theme-casino .pricing-style-comparison li,
.theme-casino .tier-feature-matrix,
.theme-casino .tier-feature-matrix p,
.theme-casino .tier-feature-matrix td,
.theme-casino .tier-feature-matrix th {
  color: #fff2c2 !important;
}
.theme-casino .tier-plan-card {
  background: linear-gradient(180deg, #35210d, #1d1107) !important;
  border-color: rgba(255, 213, 103, .52) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.30) !important;
}
.theme-casino .tier-plan-card.professional {
  background: linear-gradient(180deg, #40270d, #241407) !important;
  border-color: rgba(255, 213, 103, .78) !important;
}
.theme-casino .tier-plan-card h3,
.theme-casino .tier-plan-card strong,
.theme-casino .tier-feature-matrix h3,
.theme-casino .tier-feature-matrix table td:first-child,
.theme-casino .tier-feature-matrix table th:first-child {
  color: #fff7df !important;
}
.theme-casino .tier-plan-card p,
.theme-casino .tier-plan-card li {
  color: #ffe6a7 !important;
}
.theme-casino .tier-feature-matrix table {
  background: #1a1007 !important;
  border-color: rgba(255, 213, 103, .42) !important;
}
.theme-casino .tier-feature-matrix table th {
  background: #2e1b0a !important;
  border-color: rgba(255, 213, 103, .36) !important;
}
.theme-casino .tier-feature-matrix table td {
  background: #201307 !important;
  border-color: rgba(255, 213, 103, .26) !important;
}
.theme-casino .tier-feature-matrix table td:nth-child(3),
.theme-casino .tier-feature-matrix table th:nth-child(3) {
  background: rgba(255, 213, 103, .12) !important;
}

@media (max-width: 1180px) {
  .past-leagues-list .archive-row {
    grid-template-columns: 1fr 1.35fr !important;
  }
  .past-leagues-list .archive-row-winner {
    grid-column: 1 / -1;
  }
  .level-rules-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .past-leagues-list .archive-row {
    grid-template-columns: 1fr !important;
  }
  .reward-modal-card.level-modal-card {
    width: min(100%, calc(100vw - 24px));
    padding: 1rem;
  }
  .reward-rule-table-card {
    min-width: 420px;
  }
}

/* 2026-07-07: private period layout, professional level frame, legal/contact polish. */
.level-icon-small.professional,
.ranking-level-icon.professional,
.leader-level-icon.professional {
  border-color: rgba(245, 158, 11, .95) !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .28), 0 6px 14px rgba(146, 64, 14, .18) !important;
  background: linear-gradient(135deg, #fff7d6, #ffffff) !important;
}
.profile-menu-button .level-icon-small.professional {
  border-color: rgba(245, 158, 11, .98) !important;
}
.private-readonly-list .archive-row {
  opacity: 1 !important;
  filter: none !important;
}
.private-readonly-list .archive-row-meta {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.private-readonly-list .archive-row-meta span,
.private-readonly-list .archive-row-meta strong {
  min-width: 0;
}
.private-readonly-list .archive-row-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.private-readonly-list .private-period-meta {
  gap: 8px;
  padding-inline: 12px;
}
.private-readonly-list .private-period-meta strong {
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: -.01em;
}
.private-readonly-list .private-participants-meta {
  justify-content: space-between;
}
@media (min-width: 980px) {
  .private-readonly-list .archive-row {
    grid-template-columns: minmax(170px, .85fr) minmax(260px, 1.35fr) minmax(330px, 1.25fr) minmax(150px, .62fr) 92px !important;
  }
}
@media (min-width: 1180px) {
  .private-readonly-list .archive-row {
    grid-template-columns: minmax(170px, .78fr) minmax(290px, 1.45fr) minmax(360px, 1.28fr) minmax(150px, .58fr) 92px !important;
  }
}
@media (max-width: 979px) and (min-width: 760px) {
  .private-readonly-list .archive-row {
    grid-template-columns: minmax(150px, .9fr) minmax(260px, 1.35fr) minmax(300px, 1.2fr) 92px !important;
  }
  .private-readonly-list .private-participants-meta { display: none; }
}

/* 2026-07-08: inactive-looking private league information; join remains active. */
.private-readonly-list .archive-row {
  background: linear-gradient(180deg, #f8fafc, #eef2f7) !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}
.private-readonly-list .archive-row-identity,
.private-readonly-list .archive-row-title.private-title span,
.private-readonly-list .archive-row-meta,
.private-readonly-list .archive-row-meta span,
.private-readonly-list .archive-row-meta strong {
  color: #64748b !important;
}
.private-readonly-list .archive-row-title.private-title span,
.private-readonly-list .archive-row-meta strong {
  opacity: .82;
}
.private-readonly-list .archive-row-identity .pill {
  background: #e2e8f0 !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
}
.private-readonly-list .private-row-action,
.private-readonly-list .private-row-action * {
  opacity: 1 !important;
  filter: none !important;
}
.private-readonly-list .private-join-button:not(:disabled) {
  color: #fff !important;
  background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .22) !important;
}
.theme-balanced .private-readonly-list .archive-row {
  background: linear-gradient(180deg, #172033, #111827) !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
.theme-balanced .private-readonly-list .archive-row-title.private-title span,
.theme-balanced .private-readonly-list .archive-row-meta,
.theme-balanced .private-readonly-list .archive-row-meta span,
.theme-balanced .private-readonly-list .archive-row-meta strong { color: #94a3b8 !important; }
.theme-casino .private-readonly-list .archive-row {
  background: linear-gradient(180deg, #2c2218, #1a120b) !important;
  border-color: rgba(190, 149, 75, .42) !important;
  color: #c9b37a !important;
}
.theme-casino .private-readonly-list .archive-row-title.private-title span,
.theme-casino .private-readonly-list .archive-row-meta,
.theme-casino .private-readonly-list .archive-row-meta span,
.theme-casino .private-readonly-list .archive-row-meta strong { color: #c9b37a !important; }
.theme-casino .private-readonly-list .private-join-button:not(:disabled) {
  color: #241303 !important;
  background: linear-gradient(180deg, #ffe08a, #f7c948) !important;
  border-color: rgba(255,213,103,.75) !important;
}

.demo-recent-activity-card {
  margin-top: 24px;
}
.demo-recent-activity-card .table-scroll {
  overflow-x: auto;
}
.demo-recent-activity-table {
  min-width: 920px;
}
.demo-recent-activity-table th,
.demo-recent-activity-table td {
  vertical-align: middle;
}
.demo-recent-activity-table td:nth-child(3) {
  min-width: 240px;
  max-width: 420px;
}
.nowrap {
  white-space: nowrap;
}

/* Refined service notices and private admin access */
.home-announcement-popup {
  left: 50%;
  right: auto;
  top: 86px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 36px));
}
.home-announcement-popup-card {
  border: 1px solid rgba(30, 41, 59, .16);
  border-top: 4px solid #334155;
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .20);
}
.home-announcement-badge {
  background: rgba(51, 65, 85, .10);
  color: #334155;
}
.home-announcement-copy strong { font-size: 20px; color: #0f172a; }
.home-announcement-copy p { color: #334155; }
.private-admin-title-link {
  color: #475569;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}
.private-admin-title-link:hover { color: var(--primary); }
.platform-notice-list-card { padding: 0; overflow: hidden; }
.platform-notice-list-table { width: 100%; border-collapse: collapse; }
.platform-notice-list-table th,
.platform-notice-list-table td { padding: 16px 18px; border-bottom: 1px solid var(--border); text-align: left; }
.platform-notice-list-table th:last-child,
.platform-notice-list-table td:last-child { width: 220px; text-align: right; }
.notice-title-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}
.notice-title-button:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.notice-modal[hidden] { display: none; }
.notice-modal { position: fixed; inset: 0; z-index: 2400; display: grid; place-items: center; padding: 24px; }
.notice-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .46); backdrop-filter: blur(5px); }
.notice-modal-card {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: min(78vh, 760px);
  overflow: auto;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, .30);
  background: #fff;
  box-shadow: 0 34px 90px rgba(15, 23, 42, .30);
  padding: 24px;
}
.notice-modal-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 16px; }
.notice-modal-head h2 { margin: 4px 0 6px; }
.notice-modal-close {
  appearance: none;
  border: 1px solid rgba(15,23,42,.10);
  background: #f8fafc;
  color: #0f172a;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.notice-modal-close:hover { background: #e2e8f0; }
.notice-modal-body { color: var(--text); line-height: 1.7; }
.platform-notice-admin-list { display: grid; gap: 14px; }
.platform-notice-admin-item {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(248,250,252,.78);
}
.platform-notice-admin-item.is-home { border-color: rgba(245, 158, 11, .55); box-shadow: 0 0 0 3px rgba(245, 158, 11, .12); }
.notice-admin-meta, .notice-admin-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.notice-home-radio { font-weight: 800; color: var(--ink); }
.notice-home-save-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.demo-recent-activity-table .quantity-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  .platform-notice-list-table th:last-child,
  .platform-notice-list-table td:last-child { width: auto; text-align: left; }
  .platform-notice-list-table th,
  .platform-notice-list-table td { display: block; }
  .notice-modal { padding: 12px; place-items: start center; }
  .notice-modal-card { margin-top: 56px; }
}

/* Notice popup and admin notice history refinement */
.home-announcement-popup {
  top: 82px !important;
  width: min(620px, calc(100vw - 36px)) !important;
}
.home-announcement-popup-card {
  position: relative;
  border: 2px solid #000 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow: 10px 10px 0 rgba(15, 23, 42, .14), 0 24px 70px rgba(15, 23, 42, .16) !important;
  overflow: hidden;
}
.home-announcement-popup-card::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #111827, #475569 48%, #111827);
}
.home-announcement-popup-head {
  border-bottom: 1px solid rgba(15, 23, 42, .14);
}
.home-announcement-badge {
  border: 1px solid rgba(15, 23, 42, .26) !important;
  border-radius: 0 !important;
  background: #f1f5f9 !important;
  color: #111827 !important;
  letter-spacing: .08em;
}
.home-announcement-close {
  border: 1px solid #111827 !important;
  border-radius: 0 !important;
  color: #111827 !important;
  background: #fff !important;
}
.home-announcement-close:hover {
  background: #111827 !important;
  color: #fff !important;
}

.platform-notice-history-list {
  display: grid;
  gap: 10px;
}
.platform-notice-history-row {
  display: grid;
  grid-template-columns: 132px 36px minmax(260px, 1fr) 190px 160px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: rgba(248, 250, 252, .86);
  border-radius: 14px;
}
.platform-notice-history-row.is-home {
  border-color: rgba(245, 158, 11, .7);
  box-shadow: inset 4px 0 0 #f59e0b, 0 0 0 3px rgba(245, 158, 11, .10);
  background: linear-gradient(180deg, #fffdf6, #ffffff);
}
.platform-notice-history-row.none-option {
  background: rgba(241, 245, 249, .86);
}
.notice-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.notice-row-actions .button.small {
  padding: 7px 10px;
  min-width: 52px;
  justify-content: center;
}
.notice-row-radio {
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice-row-main {
  min-width: 0;
}
.notice-row-main strong {
  display: block;
  color: var(--ink);
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notice-row-main small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.notice-row-date {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.notice-row-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.platform-notice-editor[hidden] { display: none; }
.platform-notice-editor {
  border: 1px dashed rgba(100, 116, 139, .55);
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  padding: 14px;
  margin: -4px 0 8px 180px;
}
.notice-editor-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.button.danger {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.button.danger:hover {
  background: #ef4444;
  color: #fff;
  border-color: #dc2626;
}
.theme-balanced .platform-notice-history-row,
.theme-balanced .platform-notice-editor {
  background: rgba(15, 23, 42, .88);
  border-color: #334155;
}
.theme-balanced .platform-notice-history-row.is-home {
  background: rgba(30, 41, 59, .96);
  border-color: #f59e0b;
}
.theme-balanced .notice-row-main strong,
.theme-balanced .notice-row-date { color: #f8fafc; }
.theme-casino .platform-notice-history-row,
.theme-casino .platform-notice-editor {
  background: rgba(43, 32, 18, .88);
  border-color: rgba(190, 149, 75, .44);
}
.theme-casino .platform-notice-history-row.is-home {
  background: rgba(57, 42, 20, .95);
  border-color: #d4af37;
}
.theme-casino .notice-row-main strong,
.theme-casino .notice-row-date { color: #fff4c2; }
@media (max-width: 980px) {
  .platform-notice-history-row {
    grid-template-columns: 122px 32px minmax(180px, 1fr) 160px;
  }
  .notice-row-status {
    grid-column: 3 / -1;
    justify-content: flex-start;
  }
  .platform-notice-editor { margin-left: 0; }
}
@media (max-width: 700px) {
  .platform-notice-history-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .notice-row-actions,
  .notice-row-radio,
  .notice-row-status { justify-content: flex-start; }
  .notice-row-main strong { white-space: normal; }
  .notice-row-date { white-space: normal; }
}

/* Help / FAQ */
.faq-card { max-width: 980px; margin-left: auto; margin-right: auto; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.74); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 16px 18px; font-weight: 800; color: var(--ink); }
.faq-item[open] summary { border-bottom: 1px solid var(--border); background: rgba(37,99,235,.06); }
.faq-answer { padding: 16px 18px; color: var(--muted); line-height: 1.75; }
.theme-deep-focus .faq-item { background: rgba(15,23,42,.78); }
.theme-casino .faq-item { background: rgba(255,252,242,.95); }

/* Home notice uses the same modal language as the notice board. */
.home-notice-modal[hidden] { display: none; }
.home-notice-modal .notice-modal-card { border: 2px solid #000; border-radius: 0; }
.home-notice-modal .notice-modal-card::before {
  content: '';
  display: block;
  height: 5px;
  margin: -26px -26px 20px;
  background: linear-gradient(90deg, #111827, #2563eb, #111827);
}
.notice-modal-actions { display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--border); padding-top: 16px; margin-top: 18px; flex-wrap: wrap; }
.notice-modal-open body { overflow: hidden; }
@media (max-width: 640px) {
  .notice-modal-actions { justify-content: stretch; }
  .notice-modal-actions .button { width: 100%; }
}

/* 2026-07-08: private league list hides host nickname and shows first-place return next to the period. */
.private-readonly-list .private-period-leader-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}
.private-readonly-list .private-period-leader-meta em {
  font-style: normal;
  font-weight: 900;
  color: var(--brand);
  white-space: nowrap;
  font-size: clamp(13px, 1.05vw, 15px);
}
@media (min-width: 860px) {
  .private-readonly-list .archive-row {
    grid-template-columns: .7fr minmax(180px, 1.4fr) minmax(280px, 1.15fr) minmax(150px, .7fr) 100px !important;
  }
}
@media (max-width: 859px) {
  .private-readonly-list .private-period-leader-meta {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .private-readonly-list .private-period-leader-meta em {
    grid-column: 2;
  }
}

/* 2026-07-09: keep private league leader and period in separate columns. */
.private-readonly-list .private-leader-meta,
.private-readonly-list .private-period-meta {
  min-width: 0;
}
.private-readonly-list .private-leader-meta {
  justify-content: space-between;
  gap: 8px;
  padding-inline: 12px;
}
.private-readonly-list .private-leader-meta strong {
  white-space: nowrap;
  font-weight: 900;
}
.private-readonly-list .private-period-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.private-readonly-list .private-period-meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 980px) {
  .private-readonly-list .archive-row {
    grid-template-columns: minmax(120px, .55fr) minmax(250px, 1.25fr) minmax(105px, .48fr) minmax(260px, 1fr) minmax(140px, .52fr) 92px !important;
  }
}
@media (min-width: 1180px) {
  .private-readonly-list .archive-row {
    grid-template-columns: minmax(130px, .52fr) minmax(300px, 1.35fr) minmax(112px, .42fr) minmax(280px, .95fr) minmax(145px, .5fr) 92px !important;
  }
}
@media (max-width: 979px) and (min-width: 760px) {
  .private-readonly-list .archive-row {
    grid-template-columns: minmax(130px, .65fr) minmax(260px, 1.25fr) minmax(105px, .45fr) minmax(260px, 1fr) 92px !important;
  }
  .private-readonly-list .private-participants-meta { display: none; }
}
@media (max-width: 759px) {
  .private-readonly-list .archive-row {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-07-09: ranking symbol tokens have individual tooltips and stay compact. */
.ranking-symbol-list {
  display: inline;
  line-height: 1.55;
}
.ranking-symbol-token {
  display: inline;
  white-space: nowrap;
}
.ranking-symbol-separator,
.ranking-symbol-more {
  white-space: nowrap;
}
.ranking-symbol-more {
  font-weight: 800;
  cursor: help;
}

/* 2026-07-09: responsive foundation step 1 - mobile navigation and contest lists.
   Desktop rules are intentionally untouched; all layout changes below are scoped to tablet/mobile widths. */
.mobile-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--brand2);
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
}
.mobile-nav-toggle:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--card)); filter: none; }
.mobile-nav-toggle span { font-size: 22px; line-height: 1; }

@media (max-width: 900px) {
  .container { width: min(100% - 28px, 1180px); margin: 24px auto; }
  .page-head,
  .hero.modern { gap: 16px; }
  .card { padding: 18px; border-radius: 18px; }
  .contest-view-toolbar { gap: 10px; }
  .contest-view-toolbar .contest-sort-control { width: 100%; }
  .contest-view-toolbar .contest-sort-control select { width: 100%; }
}

@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
  }
  .brand {
    min-width: 0;
    font-size: 20px;
    letter-spacing: -.035em;
  }
  .brand span {
    display: inline-block;
    max-width: min(58vw, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .brand-mark { width: 30px; height: 30px; }
  .mobile-nav-toggle { display: inline-flex; align-items: center; justify-content: center; justify-self: end; }
  .service-pulse {
    grid-column: 1 / -1;
    order: initial;
    min-width: 0;
    flex-basis: auto;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 0 2px;
    scrollbar-width: none;
  }
  .service-pulse::-webkit-scrollbar { display: none; }
  .service-pulse span { flex: 0 0 auto; }
  .navlinks {
    grid-column: 1 / -1;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    box-shadow: 0 18px 44px rgba(15,23,42,.12);
  }
  body.mobile-nav-open .navlinks { display: flex; }
  .navlinks > a,
  .navlinks .nav-menu-button,
  .language-switch,
  .mode-nav-menu { width: 100%; }
  .navlinks a,
  .nav-menu-button {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
  }
  .nav-create-cta,
  .nav-cta { justify-content: center !important; }
  .nav-menu { width: 100%; display: block; }
  .nav-menu::after { display: none; }
  .nav-menu-panel,
  .nav-menu-right {
    position: static;
    display: none;
    width: 100%;
    margin: 6px 0 0;
    box-shadow: none;
    border-radius: 12px;
    background: color-mix(in srgb, var(--card) 92%, var(--bg));
  }
  .nav-menu:hover .nav-menu-panel,
  .nav-menu:focus-within .nav-menu-panel { display: flex; }
  .language-switch {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 8px 0 0;
    display: flex;
    gap: 6px;
  }
  .language-switch .lang { justify-content: center; flex: 1; }
  .account-tier-badge { margin-left: auto; }

  .container { width: min(100% - 22px, 1180px); margin: 18px auto 26px; }
  .page-head,
  .hero.modern,
  .layout-2,
  .search-row,
  .trade-form,
  .analytics-header { flex-direction: column; align-items: stretch; }
  .page-head h1 { font-size: clamp(28px, 9vw, 38px); }
  .hero-actions,
  .empty-state-actions,
  .admin-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button,
  .empty-state-actions .button,
  .admin-actions .button { width: 100%; }
  .form-grid,
  .layout-2 { grid-template-columns: 1fr !important; }
  input, textarea, select, button, .button { min-height: 44px; }
  table { display: block; overflow-x: auto; white-space: nowrap; }

  .contest-view-toolbar {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 12px;
    padding: 12px;
  }
  .segmented-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .segmented-buttons .button,
  .segmented-buttons button { min-width: 0; padding-inline: 8px; }
  .contest-list-items,
  .contest-list.view-balanced .contest-list-items,
  .contest-list.view-list .contest-list-items { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .contest-list.view-cards .contest-card,
  .contest-list.view-balanced .contest-card,
  .contest-list.view-list .contest-card,
  .my-contest-list .contest-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 16px !important;
  }
  .contest-list.view-cards .contest-card-main,
  .contest-list.view-balanced .contest-card-main,
  .contest-list.view-list .contest-card-main {
    display: block !important;
    min-height: 0 !important;
  }
  .contest-list.view-cards .contest-card-title-row,
  .contest-list.view-balanced .contest-card-title-row,
  .contest-list.view-list .contest-card-title-row {
    min-height: 0 !important;
    align-items: flex-start !important;
  }
  .contest-list.view-cards .contest-card-title-row h2,
  .contest-list.view-balanced .contest-card-title-row h2,
  .contest-list.view-list .contest-card-title-row h2 {
    min-height: 0 !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 3 !important;
    white-space: normal !important;
  }
  .contest-list.view-cards .contest-tagline,
  .contest-list.view-balanced .contest-tagline,
  .contest-list.view-list .contest-tagline,
  .contest-list.view-cards .contest-card-description,
  .contest-list.view-balanced .contest-card-description,
  .contest-list.view-list .contest-card-description,
  .contest-list.view-cards .ranking-requirements.compact,
  .contest-list.view-balanced .ranking-requirements.compact,
  .contest-list.view-list .ranking-requirements.compact {
    min-height: 0 !important;
    max-height: none !important;
  }
  .contest-list.view-list .contest-tagline,
  .contest-list.view-list .contest-card-description,
  .contest-list.view-list .ranking-requirements { display: block !important; }
  .ranking-requirements.compact ul { grid-template-columns: 1fr !important; }
  .contest-meta-grid,
  .contest-list.view-list .meta-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .contest-list.view-list .meta-grid .meta-deadline,
  .contest-list.view-list .meta-grid .meta-capital { display: block !important; }
  .contest-list.view-list .meta-grid div,
  .contest-meta-grid div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
  }
  .contest-list.view-list .meta-grid strong,
  .contest-meta-grid strong {
    white-space: normal !important;
    text-align: right !important;
  }
  .contest-action-row,
  .contest-list.view-list .contest-action-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .contest-action-row form,
  .contest-action-row .contest-primary-action,
  .contest-action-row form.contest-primary-action button,
  .contest-action-row .contest-open-link,
  .contest-action-row .button.disabled.warn,
  .contest-action-row button.disabled.warn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .contest-card-topbar,
  .contest-list.view-list .contest-card-topbar,
  .my-contest-card-identity,
  .my-contest-card-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .leader-summary,
  .contest-list.view-list .leader-summary { display: block !important; }

  .archive-compact-list { gap: 10px; }
  .past-leagues-list .archive-row,
  .private-readonly-list .archive-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 14px !important;
  }
  .archive-row-title,
  .archive-row-title a,
  .private-readonly-list .archive-row-title.private-title span {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .archive-row-identity,
  .archive-row-meta,
  .archive-row-winner,
  .private-row-action { width: 100% !important; justify-content: flex-start !important; }
  .archive-row-meta,
  .private-readonly-list .archive-row-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 42px;
  }
  .archive-row-meta strong,
  .private-readonly-list .archive-row-meta strong {
    white-space: normal !important;
    text-align: right;
  }
  .archive-row-winner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .private-join-button { width: 100% !important; max-width: none !important; }
  .site-footer { flex-wrap: wrap; justify-content: center; padding-inline: 14px; text-align: center; }
}

@media (max-width: 420px) {
  .container { width: min(100% - 16px, 1180px); }
  .card { padding: 15px; }
  .segmented-buttons { grid-template-columns: 1fr; }
  .brand span { max-width: 52vw; }
  .contest-card-media.has-cover { height: 72px; }
}

/* 2026-07-09: Mobile step 2 - ranking tables become readable cards on small screens.
   Desktop/tablet-wide layouts are intentionally untouched. */
@media (max-width: 760px) {
  .league-ranking-table {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .league-ranking-table colgroup,
  .league-ranking-table thead {
    display: none !important;
  }
  .league-ranking-table tbody {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .league-ranking-table tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    background: var(--card) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
  }
  .league-ranking-table tr.highlight-row {
    border-color: rgba(37, 99, 235, 0.35) !important;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.12) !important;
  }
  .league-ranking-table td {
    display: grid !important;
    grid-template-columns: minmax(92px, 36%) minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  .league-ranking-table td:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .league-ranking-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
  }
  .league-ranking-table td:first-child {
    grid-template-columns: 1fr !important;
    padding-top: 0 !important;
  }
  .league-ranking-table td:first-child::before { display: none; }
  .league-ranking-table td:first-child > * ,
  .league-ranking-table td:first-child {
    font-size: 18px;
    font-weight: 900;
    color: var(--brand2);
  }
  .league-ranking-table td:nth-child(2) {
    align-items: center !important;
  }
  .league-ranking-table td:nth-child(2) > *:not(:first-child) {
    margin-left: 4px;
  }
  .league-ranking-table .ranking-nickname {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-weight: 900;
  }
  .league-ranking-table .ranking-symbol-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  .league-ranking-table .ranking-symbol-token,
  .league-ranking-table .ranking-symbol-more {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  .league-ranking-table .ranking-symbol-separator {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    color: var(--muted);
  }
  .league-ranking-table .pill {
    justify-self: end;
    max-width: 100%;
    white-space: normal;
    text-align: right;
    line-height: 1.35;
  }
}

@media (max-width: 420px) {
  .league-ranking-table td {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .league-ranking-table td::before {
    margin-bottom: 2px;
  }
  .league-ranking-table .ranking-symbol-list,
  .league-ranking-table .pill {
    justify-self: start;
    text-align: left;
  }
}

/* 2026-07-09: Mobile step 3 - league play/order usability without affecting desktop. */
@media (max-width: 760px) {
  .contest-hero {
    gap: 14px;
  }
  .contest-hero .big-number {
    align-self: flex-start;
    font-size: clamp(22px, 7vw, 34px);
    word-break: break-word;
  }
  .mobile-summary-card {
    padding: 16px;
  }
  .mobile-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mobile-summary-grid div {
    padding: 10px;
    min-width: 0;
  }
  .mobile-summary-grid strong {
    font-size: 15px;
    overflow-wrap: anywhere;
  }
  .trade-workspace {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .mobile-trade-card,
  .mobile-quote-card,
  .mobile-table-card {
    padding: 16px;
    border-radius: 18px;
  }
  .mobile-order-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
  }
  .mobile-order-form select,
  .mobile-order-form input,
  .mobile-order-form #order-type,
  .mobile-order-form #limit-price {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .mobile-order-form #trade-symbol,
  .mobile-order-form input[name="quantity"],
  .mobile-order-form #limit-price {
    grid-column: 1 / -1;
  }
  .mobile-trade-card #submit-order-button {
    width: 100%;
    min-height: 48px;
    font-size: 15px;
  }
  .symbol-chip-row,
  .symbol-search-results {
    max-width: 100%;
  }
  .symbol-chip-row {
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .symbol-chip {
    min-width: 132px;
    flex: 0 0 auto;
  }
  .quote-preview .chart-range-row,
  .quote-preview .chart-meta,
  .quote-preview .quote-line {
    flex-wrap: wrap;
  }
  .quote-preview canvas,
  .quote-preview svg {
    max-width: 100%;
  }
  .mobile-holdings-history {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  table.mobile-record-table {
    display: block;
    overflow: visible;
    white-space: normal;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  table.mobile-record-table thead {
    display: none;
  }
  table.mobile-record-table tbody,
  table.mobile-record-table tr,
  table.mobile-record-table td {
    display: block;
    width: 100%;
  }
  table.mobile-record-table tr {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
  }
  table.mobile-record-table td {
    border-bottom: 0;
    padding: 7px 0;
    display: grid;
    grid-template-columns: minmax(92px, .55fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  table.mobile-record-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  table.mobile-record-table td[colspan] {
    display: block;
    text-align: center;
    color: var(--muted);
  }
  table.mobile-record-table td[colspan]::before {
    content: none;
  }
  .limit-orders-table form,
  .limit-orders-table button {
    width: 100%;
  }
  .positions-table .positive,
  .positions-table .negative {
    font-weight: 900;
  }
}

@media (max-width: 430px) {
  .mobile-summary-grid {
    grid-template-columns: 1fr;
  }
  .mobile-order-form {
    grid-template-columns: 1fr;
  }
  table.mobile-record-table td {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .mobile-trade-card,
  .mobile-quote-card,
  .mobile-table-card {
    padding: 14px;
  }
}

/* 2026-07-09: Mobile step 4 - account, notice, help and contact screens.
   Desktop layout is intentionally untouched; rules apply only to tablet/mobile widths. */
@media (max-width: 760px) {
  /* Account page */
  .user-level-summary-card {
    padding: 16px;
    gap: 14px;
  }
  .level-summary-main {
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
  }
  .level-summary-main > div {
    min-width: 0;
  }
  .level-icon-large {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }
  .user-level-summary-card .button,
  .user-level-summary-card button {
    width: 100%;
  }
  .avatar-preview-row {
    align-items: flex-start;
    gap: 12px;
  }
  .avatar-preview-row > div {
    min-width: 0;
  }
  .avatar-preview-row .hint {
    overflow-wrap: anywhere;
  }
  .profile-country-form select,
  .profile-image-card input[type="file"] {
    width: 100%;
  }
  .danger-zone-card {
    padding: 16px;
  }
  .danger-zone-card .danger-button,
  .danger-zone-card button {
    width: 100%;
  }

  /* Reward/level popup */
  .reward-modal-backdrop {
    align-items: flex-start;
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .reward-modal-card,
  .reward-modal-card.level-modal-card {
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 44px 0 18px;
    padding: 16px;
    border-radius: 20px;
  }
  .reward-modal-head {
    align-items: flex-start;
  }
  .reward-modal-head h2 {
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.2;
  }
  .reward-modal-close {
    flex: 0 0 auto;
  }
  .level-rules-grid {
    grid-template-columns: 1fr !important;
  }
  .reward-rule-table-card {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .reward-rule-table-card table,
  .level-table {
    min-width: 420px;
  }
  .level-howto-box {
    padding: 12px;
  }

  /* Contact page */
  .contact-hero {
    padding: 18px;
  }
  .contact-hero h1 {
    font-size: clamp(28px, 9vw, 40px);
  }
  .contact-shell {
    gap: 14px;
  }
  .contact-card,
  .contact-side-card {
    padding: 16px;
    border-radius: 18px;
  }
  .contact-card textarea {
    min-height: 150px;
  }
  .contact-submit-row {
    justify-content: stretch;
  }
  .contact-submit-row button {
    width: 100%;
  }
  .contact-privacy-box {
    padding: 12px;
  }
  .contact-bullet-list {
    padding-left: 1rem;
  }
  .tier-plan-cards {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .tier-plan-card {
    padding: 16px;
    border-radius: 20px;
  }
  .tier-feature-matrix {
    padding: 16px;
    border-radius: 20px;
  }
  .tier-feature-matrix .responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tier-feature-matrix table {
    min-width: 620px;
  }

  /* Notices */
  .platform-notice-list-card {
    border-radius: 18px;
  }
  .notice-list-table-wrap {
    overflow: visible;
  }
  .platform-notice-list-table {
    display: block;
    white-space: normal;
  }
  .platform-notice-list-table thead {
    display: none;
  }
  .platform-notice-list-table tbody,
  .platform-notice-list-table tr,
  .platform-notice-list-table td {
    display: block;
    width: 100%;
  }
  .platform-notice-list-table tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .platform-notice-list-table td {
    padding: 0 !important;
    border-bottom: 0 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .platform-notice-list-table td + td {
    margin-top: 6px;
  }
  .notice-title-button {
    width: 100%;
    min-height: 0;
    text-align: left;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .notice-modal {
    padding: 10px;
    place-items: start center;
  }
  .notice-modal-card {
    width: 100%;
    max-height: calc(100vh - 72px);
    margin-top: 42px;
    padding: 16px;
    border-radius: 20px;
  }
  .notice-modal-head {
    gap: 10px;
  }
  .notice-modal-head h2 {
    font-size: clamp(20px, 6vw, 26px);
    overflow-wrap: anywhere;
  }
  .notice-modal-close {
    flex: 0 0 auto;
  }
  .notice-modal-body {
    font-size: 15px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .notice-modal-actions {
    justify-content: stretch;
  }
  .notice-modal-actions .button,
  .notice-modal-actions button {
    width: 100%;
  }

  /* Help/FAQ */
  .faq-card {
    padding: 14px;
    border-radius: 18px;
  }
  .faq-list {
    gap: 10px;
  }
  .faq-item {
    border-radius: 16px;
  }
  .faq-item summary {
    padding: 14px 16px;
    line-height: 1.35;
  }
  .faq-answer {
    padding: 14px 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  .level-summary-main {
    flex-direction: column;
  }
  .avatar-preview-row {
    flex-direction: column;
  }
  .reward-modal-card,
  .reward-modal-card.level-modal-card,
  .notice-modal-card {
    margin-top: 34px;
    padding: 14px;
  }
  .contact-card,
  .contact-side-card,
  .tier-plan-card,
  .tier-feature-matrix,
  .faq-card {
    padding: 14px;
  }
}

/* 2026-07-09: Mobile step 5 - admin screens tablet/mobile readability.
   Desktop layout remains unchanged; all rules are scoped to smaller widths. */
@media (max-width: 1024px) {
  .admin-actions-row,
  .systemd-actions-top,
  .notice-admin-actions,
  .translation-admin-head,
  .translation-row-meta,
  .translation-actions {
    flex-wrap: wrap;
  }

  .admin-actions-row .button,
  .systemd-actions-top .button {
    flex: 1 1 180px;
    min-width: 0;
    text-align: center;
  }

  .metric-grid,
  .systemd-summary-grid,
  .demo-stats-wrap.demo-stats-inline,
  .system-health-grid,
  .analytics-grid,
  .privacy-retention-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .systemd-settings-grid,
  .plan-admin-grid,
  .admin-user-filter,
  .maintenance-line-form,
  .systemd-upload-form,
  .systemd-execute-form {
    align-items: stretch;
  }

  .systemd-stack,
  .systemd-result-columns,
  .health-panels,
  .analytics-panels,
  .privacy-retention-actions {
    grid-template-columns: 1fr !important;
  }

  .card.wide:has(table),
  .systemd-table-wrap,
  .responsive-table,
  .table-scroll,
  .translation-list,
  .platform-notice-admin-list {
    max-width: 100%;
  }

  .card.wide > table,
  .systemd-table-wrap,
  .responsive-table,
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .card.wide > table,
  .systemd-table-wrap table,
  .responsive-table table,
  .table-scroll table,
  .compact-table,
  .systemd-table {
    min-width: 720px;
  }

  .translation-search {
    align-items: stretch;
  }
  .translation-search input[type="search"] {
    min-width: 0;
  }
  .translation-lang-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .page-head .admin-actions,
  .page-head .admin-actions-row,
  .systemd-actions-top {
    margin-top: 12px;
  }

  .admin-actions-row .button,
  .systemd-actions-top .button,
  .notice-admin-actions .button,
  .translation-actions .button,
  .translation-actions button,
  .maintenance-line-form .button,
  .maintenance-line-form button,
  .systemd-upload-form .button,
  .systemd-upload-form button,
  .systemd-execute-form .button,
  .systemd-execute-form button {
    width: 100%;
  }

  .metric-grid,
  .systemd-summary-grid,
  .demo-stats-wrap.demo-stats-inline,
  .system-health-grid,
  .analytics-grid,
  .privacy-retention-grid {
    grid-template-columns: 1fr !important;
  }

  .demo-stat-mini,
  .demo-stat-card,
  .metric-card {
    min-width: 0;
  }

  .section-title-row,
  .translation-admin-head,
  .translation-row-meta,
  .translation-actions,
  .notice-admin-meta,
  .notice-admin-actions,
  .member-profile-panel,
  .member-profile-main,
  .member-status-pills {
    align-items: stretch;
    flex-direction: column;
  }

  .section-title-row > *,
  .translation-admin-head > *,
  .translation-row-meta > *,
  .translation-actions > *,
  .notice-admin-meta > *,
  .notice-admin-actions > * {
    min-width: 0;
  }

  .admin-user-filter,
  .maintenance-line-form,
  .systemd-upload-form,
  .systemd-execute-form,
  .demo-admin-actions,
  .demo-admin-actions.single-line,
  .demo-admin-actions.compact-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .admin-user-filter label,
  .admin-user-filter select,
  .maintenance-line-form label,
  .maintenance-line-form input,
  .maintenance-line-form select,
  .systemd-upload-form input,
  .systemd-upload-form select,
  .systemd-upload-form button,
  .demo-admin-actions form,
  .demo-admin-actions input,
  .demo-admin-actions button,
  .demo-admin-actions .button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .systemd-settings-grid {
    grid-template-columns: 1fr !important;
  }
  .systemd-check-option {
    align-items: flex-start;
    gap: 10px;
  }
  .systemd-check-option input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 3px;
  }
  .systemd-range-cell,
  .systemd-range-inputs {
    min-width: 180px;
  }
  .systemd-multiselect {
    min-width: 180px;
  }

  .systemd-sticky-save {
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border-radius: 18px;
  }
  .systemd-sticky-save .button,
  .systemd-sticky-save button {
    width: 100%;
  }

  .translation-row {
    padding: 14px;
  }
  .translation-key {
    display: block;
    margin: 0 0 6px;
    overflow-wrap: anywhere;
  }
  .translation-lang-grid textarea,
  .translation-lang-grid input {
    min-height: 96px;
  }

  .platform-notice-admin-item {
    padding: 14px;
  }
  .platform-notice-admin-item h3,
  .platform-notice-admin-item p,
  .platform-notice-admin-item code,
  .systemd-help-card code,
  .systemd-validation-card li,
  .member-detail-card p,
  .member-detail-card strong {
    overflow-wrap: anywhere;
  }

  .member-profile-main {
    text-align: left;
  }
  .member-avatar-large {
    flex: 0 0 auto;
  }
  .quick-expiry-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .admin-2fa-card,
  .totp-secret-box,
  .card.wide {
    min-width: 0;
  }

  .card.wide > table,
  .systemd-table-wrap table,
  .responsive-table table,
  .table-scroll table,
  .compact-table,
  .systemd-table {
    min-width: 680px;
  }
}

@media (max-width: 430px) {
  .quick-expiry-buttons {
    grid-template-columns: 1fr;
  }
  .card.wide > table,
  .systemd-table-wrap table,
  .responsive-table table,
  .table-scroll table,
  .compact-table,
  .systemd-table {
    min-width: 620px;
  }
}

/* 2026-07-09: Mobile step 6 - final touch polish and QA safeguards.
   These rules are scoped to mobile/tablet widths or harmless utility classes. */
.mobile-tap-tooltip {
  position: fixed;
  z-index: 3600;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .96);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .28);
  pointer-events: none;
  overflow-wrap: anywhere;
}
.mobile-tap-tooltip[hidden] { display: none; }

@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .symbol-name-tip[title],
  .ranking-symbol-token[title],
  .ranking-symbol-more[title] {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(37, 99, 235, .16);
  }
  .ranking-symbol-token,
  .ranking-symbol-more {
    min-height: 32px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

@media (max-width: 760px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .flash-wrap {
    gap: 8px;
  }
  .flash {
    padding: 11px 12px;
    border-radius: 14px;
    overflow-wrap: anywhere;
  }

  .cookie-notice {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    padding: 12px;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cookie-actions .button,
  .cookie-actions button {
    width: 100%;
  }

  .notice-modal,
  .reward-modal-backdrop {
    padding: 10px;
    align-items: start;
    justify-items: center;
  }
  .notice-modal-card,
  .reward-modal-card,
  .reward-modal-card.level-modal-card {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }
  .notice-modal-body,
  .reward-modal-body,
  .reward-modal-card.level-modal-card .reward-modal-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .notice-modal-head,
  .reward-modal-head {
    flex: 0 0 auto;
  }
  .notice-modal-close,
  .reward-modal-close {
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
  }

  .button,
  button,
  input,
  select,
  textarea,
  .nav-menu-button {
    touch-action: manipulation;
  }

  .button-row,
  .form-actions,
  .notice-editor-actions,
  .contest-actions,
  .page-head-actions {
    gap: 9px;
  }

  .pre-line,
  .notice-item,
  .notice-card,
  .systemd-help-card,
  .card,
  .guide-card,
  .hero-card,
  .member-detail-card {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 430px) {
  .notice-modal-card,
  .reward-modal-card,
  .reward-modal-card.level-modal-card {
    border-radius: 18px;
  }
  .notice-modal-head h2,
  .reward-modal-head h2 {
    font-size: 18px;
    line-height: 1.25;
  }
  .mobile-tap-tooltip {
    font-size: 12px;
    border-radius: 10px;
  }
}

/* Admin demo quality diagnostics */
.demo-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.demo-quality-tile,
.demo-quality-note {
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.28));
  border-radius: 16px;
  background: var(--panel-soft, rgba(248, 250, 252, 0.72));
  padding: 14px;
  min-width: 0;
}
.demo-quality-tile span,
.demo-quality-note strong {
  display: block;
  color: var(--muted-text, #64748b);
  font-size: 0.86rem;
  margin-bottom: 6px;
}
.demo-quality-tile strong {
  display: block;
  font-size: 1.7rem;
  line-height: 1.15;
}
.demo-quality-tile .small-strong {
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.demo-quality-tile small {
  display: block;
  margin-top: 6px;
  color: var(--muted-text, #64748b);
  overflow-wrap: anywhere;
}
.demo-quality-tile.warn {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.08);
}
.demo-quality-tile.muted {
  background: rgba(148, 163, 184, 0.10);
}
.demo-quality-subgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.demo-quality-details {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.demo-quality-details details {
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.28));
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--card-bg, #fff);
}
.demo-quality-details summary {
  cursor: pointer;
  font-weight: 700;
}

@media (max-width: 900px) {
  .demo-quality-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .demo-quality-grid,
  .demo-quality-subgrid {
    grid-template-columns: 1fr;
  }
}

/* Admin valuation diagnostics */
.admin-diagnostics-card .compact-metrics {
  margin: 1rem 0 1.25rem;
}
.admin-diagnostics-card .soft-card {
  background: rgba(248, 250, 252, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: none;
}
.admin-diagnostics-card details.diagnostics-details {
  margin-top: 1rem;
}
.admin-diagnostics-card details.diagnostics-details > summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--text, #111827);
  padding: .8rem 0;
}
.admin-diagnostics-card table small {
  color: var(--muted, #64748b);
}
@media (max-width: 760px) {
  .admin-diagnostics-card .diagnostics-grid {
    grid-template-columns: 1fr !important;
  }
  .admin-diagnostics-card .metric-grid.compact-metrics {
    grid-template-columns: 1fr !important;
  }
}

/* Contest channel hub */
.channel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}
.channel-card h2 { margin-top: 0; }
.channel-card p { color: var(--muted, #64748b); }
.channel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.contest-channel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1rem;
}
@media (max-width: 760px) {
  .channel-grid { grid-template-columns: 1fr; }
  .channel-actions .button { width: 100%; justify-content: center; }
}

/* Contest channel hub and AI participants */
.channel-hub-head { margin-bottom: 1.2rem; }
.channel-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 1.2rem; }
.channel-hub-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; height: 100%; border: 1px solid rgba(129,140,248,.20); border-radius: 24px; padding: 1.35rem; background: linear-gradient(150deg, rgba(255,255,255,.98), rgba(246,247,255,.94)); box-shadow: 0 18px 45px rgba(30,41,59,.08); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.channel-hub-card:hover { transform: translateY(-3px); border-color: rgba(99,102,241,.34); box-shadow: 0 24px 56px rgba(30,41,59,.12); }
.channel-hub-card:before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 92% 4%, rgba(129,140,248,.14), transparent 38%), linear-gradient(120deg, rgba(255,255,255,0), rgba(224,231,255,.28)); pointer-events: none; }
.channel-hub-card:after { content: ''; position: absolute; top: 0; left: 1.35rem; right: 1.35rem; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(79,70,229,.08), rgba(79,70,229,.58), rgba(14,165,233,.18)); pointer-events: none; }
.channel-hub-card > * { position: relative; }
.channel-hub-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: .95rem; }
.channel-emblem { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid rgba(99,102,241,.20); border-radius: 19px; color: #4338ca; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(238,242,255,.94)); box-shadow: 0 12px 30px rgba(79,70,229,.13), inset 0 1px 0 rgba(255,255,255,.92); }
.channel-flag-icon { width: 42px; height: 38px; overflow: visible; }
.channel-flag-pole { fill: none; stroke: #64748b; stroke-width: 2.2; stroke-linecap: round; }
.channel-flag-sheet { stroke: rgba(15,23,42,.20); stroke-width: 1; stroke-linejoin: round; }
.channel-flag-accent, .channel-flag-highlight { pointer-events: none; }
.channel-flag-highlight { fill: rgba(255,255,255,.22); }
.channel-emblem-global .channel-flag-sheet { fill: #3157c8; }
.channel-emblem-global .channel-flag-accent { fill: #4aa8d8; }
.channel-emblem-europe .channel-flag-sheet { fill: #5b56b8; }
.channel-emblem-europe .channel-flag-accent { fill: #8d72cf; }
.channel-emblem-korea .channel-flag-sheet { fill: #c4556f; }
.channel-emblem-korea .channel-flag-accent { fill: #e18478; }
.channel-hub-card:hover .channel-emblem { transform: translateY(-1px) scale(1.02); border-color: rgba(79,70,229,.32); box-shadow: 0 15px 34px rgba(79,70,229,.17), inset 0 1px 0 rgba(255,255,255,.94); }
.channel-emblem { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.channel-scope-badge, .channel-market-note { display: inline-flex; border-radius: 999px; padding: .25rem .55rem; font-size: .78rem; font-weight: 700; background: rgba(15,23,42,.06); color: #475569; }
.channel-hub-body { flex: 1 1 auto; min-width: 0; }
.channel-hub-body h2 { margin: .25rem 0 .75rem; }
.channel-hub-description { margin: 0; color: var(--text, #0f172a); line-height: 1.55; }
.channel-hub-footer { margin-top: auto; padding-top: 1.15rem; }
.channel-market-note { width: 100%; min-height: 2.55rem; align-items: center; justify-content: center; margin: 0 0 1rem; padding: .52rem .9rem; box-sizing: border-box; font-size: clamp(.64rem, .62vw, .73rem); line-height: 1.2; letter-spacing: -.012em; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.channel-hub-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(52px, auto); gap: .6rem; }
.channel-hub-actions .button { width: 100%; min-height: 52px; height: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.25; }
.channel-hub-actions .channel-past-button { grid-column: 1 / -1; }
.ai-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.ai-profile-card { border: 1px solid rgba(148,163,184,.3); border-radius: 18px; padding: 1rem; background: rgba(248,250,252,.76); }
.ai-profile-card h3 { margin-top: 0; }
.ai-profile-card > label + label { margin-top: .72rem; }
.ai-plan-note { align-self: end; color: #64748b; }
.ranking-ai-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin-left: .35rem; border: 1px solid rgba(99,102,241,.35); border-radius: 8px; background: linear-gradient(135deg, #111827, #6366f1); color: #fff; font-size: .68rem; font-weight: 900; line-height: 1; vertical-align: middle; box-shadow: 0 4px 10px rgba(79,70,229,.22); }
.ai-profile-admin-panel { margin-top: 1.2rem; padding: 1rem; border-radius: 18px; border: 1px solid rgba(99,102,241,.22); background: rgba(99,102,241,.06); }
@media (max-width: 1180px) { .channel-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .channel-hub-grid, .ai-profile-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .channel-hub-card { padding: 1.05rem; border-radius: 20px; }
  .channel-hub-actions { grid-template-columns: 1fr; }
  .channel-hub-actions .channel-past-button { grid-column: auto; }
  .channel-market-note { min-height: 0; white-space: normal; overflow: visible; text-overflow: clip; font-size: .72rem; padding-inline: .8rem; }
}

/* Admin API provider management */
.api-management-form {
  display: grid;
  gap: 1.25rem;
}
.api-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.api-provider-card,
.api-routing-card {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  padding: 1rem;
  background: rgba(248, 250, 252, 0.76);
}
.api-provider-card .section-title-row {
  align-items: flex-start;
  gap: .75rem;
}
.api-key-slot {
  display: grid;
  gap: .65rem;
  margin-top: .85rem;
  padding: .9rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}
.api-key-slot > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.api-key-delete-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .7rem;
  margin: 0;
  padding: .75rem .85rem;
  border: 1px solid rgba(220, 38, 38, .22);
  border-radius: 12px;
  background: rgba(254, 242, 242, .8);
  color: #991b1b;
  cursor: pointer;
}
.api-key-delete-control input {
  width: 1rem;
  height: 1rem;
  margin: .18rem 0 0;
}
.api-key-delete-control span {
  display: grid;
  gap: .18rem;
  min-width: 0;
}
.api-key-delete-control strong,
.api-key-delete-control small {
  overflow-wrap: anywhere;
}
.api-key-delete-control small {
  color: #7f1d1d;
  font-weight: 500;
  line-height: 1.4;
}
.api-key-slot input[data-key-replacement]:disabled {
  opacity: .58;
  cursor: not-allowed;
  background: rgba(226, 232, 240, .75);
}
.api-key-mask {
  margin: 0;
  overflow-wrap: anywhere;
}
.api-key-mask code {
  white-space: normal;
}
.api-key-health {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem .8rem;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.045);
  color: var(--muted, #64748b);
  font-size: .82rem;
  line-height: 1.35;
}
.api-key-health span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.api-routing-card h2 {
  margin-top: 0;
}
.api-routing-card .form-grid {
  margin-top: 1rem;
}
.break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 980px) {
  .api-provider-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .api-provider-card,
  .api-routing-card {
    padding: .8rem;
    border-radius: 15px;
  }
  .api-key-health {
    grid-template-columns: 1fr;
  }
  .api-management-form .admin-actions-row button,
  .api-key-slot .button {
    width: 100%;
    justify-content: center;
  }
}

/* Market-specific API provider routing */
.api-provider-disabled {
  border-style: dashed;
  background: rgba(248, 250, 252, 0.52);
}
.api-routing-category + .api-routing-category {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}
.api-routing-category-head h3,
.api-routing-advanced h3 {
  margin: 0 0 .35rem;
}
.api-routing-category-head p {
  margin: 0;
}
.api-market-routing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.api-market-route-card {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 16px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.88);
}
.api-market-route-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
  margin-bottom: .85rem;
}
.api-market-route-head > div {
  min-width: 0;
}
.api-market-route-head h4 {
  margin: 0 0 .25rem;
  font-size: 1.02rem;
}
.api-market-route-head p {
  margin: 0;
}
.api-route-current {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  padding: .5rem .65rem;
  background: rgba(15, 23, 42, 0.055);
  color: var(--muted, #64748b);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
}
.api-route-provider-list {
  display: grid;
  gap: .65rem;
}
.api-route-provider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 110px);
  grid-template-areas:
    "main priority"
    "note note";
  gap: .65rem .8rem;
  align-items: start;
  padding: .75rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 13px;
  background: rgba(248, 250, 252, 0.82);
}
.api-route-provider-main {
  grid-area: main;
  display: grid;
  gap: .55rem;
  min-width: 0;
}
.api-route-provider-heading {
  min-width: 0;
}
.api-route-provider-row.is-global-disabled {
  border-style: dashed;
  background: rgba(248, 250, 252, 0.48);
}
.api-route-provider-row.is-circuit-open {
  box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.7);
}
.api-route-provider-toggle {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  cursor: pointer;
}
.api-route-provider-toggle input {
  flex: 0 0 auto;
}
.api-route-provider-toggle span {
  display: grid;
  gap: .05rem;
  min-width: 0;
}
.api-route-provider-toggle strong,
.api-route-provider-toggle small {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.api-route-provider-toggle small {
  color: var(--muted, #64748b);
  font-size: .72rem;
  overflow-wrap: anywhere;
}
.api-route-provider-status {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  min-width: 0;
}
.api-route-provider-status .pill {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.pill.neutral {
  background: rgba(99, 102, 241, 0.1);
  color: #4338ca;
}
.api-route-priority {
  grid-area: priority;
  display: grid;
  gap: .25rem;
  margin: 0;
  color: var(--muted, #64748b);
  font-size: .78rem;
}
.api-route-priority input {
  width: 100%;
  min-width: 70px;
}
.api-route-provider-note {
  grid-area: note;
  margin: 0;
  color: var(--muted, #64748b);
  font-size: .79rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.api-route-warning {
  margin-top: .75rem;
}
.api-routing-advanced {
  margin-top: 1.35rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(148, 163, 184, 0.25);
}
.api-routing-advanced .form-grid {
  margin-top: .85rem;
}
@media (max-width: 1180px) {
  .api-market-routing-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .api-route-provider-row {
    grid-template-columns: minmax(0, 1fr) minmax(78px, 96px);
  }
  .api-route-priority {
    max-width: 96px;
  }
}
@media (max-width: 520px) {
  .api-route-provider-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "priority"
      "note";
  }
  .api-route-priority {
    width: 100%;
    max-width: none;
  }
  .api-route-priority input {
    max-width: 140px;
  }
}

/* System health navigation and operational actions */
.system-health-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .7rem;
  width: min(100%, 920px);
}
.system-health-nav .button {
  width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.diagnostics-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: .85rem 0 1rem;
}
.diagnostics-action-grid form,
.diagnostics-action-grid button {
  width: 100%;
}
.diagnostics-action-grid button {
  min-height: 48px;
  justify-content: center;
  white-space: normal;
  line-height: 1.3;
}
.diagnostic-window-note {
  margin: .55rem 0 0;
}
.systemd-reason-list {
  display: grid;
  gap: .45rem;
  margin: .65rem 0 0;
  padding: 0;
  list-style: none;
}
.systemd-reason-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
  padding: .55rem .65rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, .045);
}
.systemd-reason-list span {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 1180px) {
  .system-health-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .system-health-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagnostics-action-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .system-health-nav { grid-template-columns: 1fr; }
}


/* Stable layout for routing and execution-price policies in every language */
.api-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: .85rem 1rem;
  margin-top: .85rem;
  align-items: stretch;
}
.api-policy-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: .45rem;
  margin: 0;
  padding: .8rem;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 13px;
  background: rgba(255,255,255,.82);
}
.api-policy-field > span {
  display: block;
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.api-policy-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.api-policy-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
  min-width: 0;
  margin: 0;
  padding: .8rem;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 13px;
  background: rgba(248,250,252,.82);
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: normal;
}
.api-policy-toggle input[type="checkbox"] { margin-top: .2rem; }
@media (max-width: 560px) {
  .api-policy-grid { grid-template-columns: 1fr; }
}

/* Research and market-demand assessment notice */
.research-phase-notice {
  margin: 0 auto 1.1rem;
  max-width: 1180px;
  padding: .9rem 1rem;
  border: 1px solid rgba(37,99,235,.22);
  border-radius: 16px;
  background: rgba(239,246,255,.9);
  color: #1e3a8a;
  line-height: 1.55;
}
.research-phase-notice strong { display: block; margin-bottom: .2rem; }
.research-phase-notice a { color: inherit; font-weight: 700; }
.api-policy-toggle input[type="hidden"] { display: none; }
.api-policy-toggle > span { min-width: 0; overflow-wrap: break-word; word-break: normal; }


/* 2026-07-11 r2: harden API routing cards against global input width rules. */
.api-management-form input[type="checkbox"] {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  flex: 0 0 1rem;
  accent-color: var(--brand, #2563eb);
}
.api-route-provider-row {
  grid-template-columns: minmax(0, 1fr) minmax(92px, 112px);
  grid-template-areas:
    "main priority"
    "status status"
    "note note";
}
.api-route-provider-main {
  align-self: center;
  min-width: 0;
}
.api-route-provider-toggle {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem;
  min-width: 0;
}
.api-route-provider-toggle input[type="checkbox"] {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem;
  flex-basis: 1rem;
}
.api-route-provider-name {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.api-route-provider-name strong {
  display: block;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
  line-height: 1.3;
}
.api-route-provider-status {
  grid-area: status;
}
.api-route-priority {
  min-width: 0;
}
.api-route-priority input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.api-policy-toggle input[type="checkbox"] {
  width: 1rem;
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem;
  padding: 0;
  margin: .2rem 0 0;
}
.legal-operating-notice {
  margin: 1rem 0 1.35rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(37, 99, 235, .22);
  border-radius: 16px;
  background: rgba(239, 246, 255, .72);
}
.legal-operating-notice h2 {
  margin-top: 0;
}
.legal-operating-notice p {
  margin-bottom: 0;
}
@media (max-width: 520px) {
  .api-route-provider-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "priority"
      "status"
      "note";
  }
  .api-route-priority input {
    max-width: 160px;
  }
}

/* 2026-07-11 r4: Imprint administration. */
.admin-imprint-card {
  max-width: 980px;
}
.admin-imprint-form {
  gap: 1.25rem;
}
.admin-imprint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.admin-imprint-grid label {
  min-width: 0;
}
.admin-imprint-grid .span2 {
  grid-column: 1 / -1;
}
.admin-imprint-grid textarea {
  min-height: 140px;
  resize: vertical;
}
.admin-imprint-help {
  display: grid;
  gap: .45rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand) 4%, var(--card));
  color: var(--muted);
}
.admin-imprint-help p {
  margin: 0;
  line-height: 1.55;
  overflow-wrap: break-word;
}
@media (max-width: 760px) {
  .admin-imprint-grid {
    grid-template-columns: 1fr;
  }
  .admin-imprint-grid .span2 {
    grid-column: auto;
  }
}

/* Operational research hardening (migration 57) */
.legal-consent-page .legal-version-grid,
.compact-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}
.legal-version-grid > div,
.compact-summary-grid > div {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .85rem;
  border: 1px solid var(--border-color, #d8dee9);
  border-radius: 12px;
  background: var(--surface-soft, #f7f8fa);
  min-width: 0;
}
.consent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
  padding: .85rem;
  border: 1px solid var(--border-color, #d8dee9);
  border-radius: 12px;
}
.consent-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: .2rem;
}
.market-operations-form label,
.api-management-form label {
  min-width: 0;
}
.market-operations-form input,
.market-operations-form select,
.market-operations-form textarea {
  max-width: 100%;
}
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.compact-table {
  max-height: 32rem;
  overflow: auto;
}
@media (max-width: 760px) {
  .market-operations-form,
  .legal-version-grid,
  .compact-summary-grid {
    grid-template-columns: 1fr;
  }
  .market-operations-form .span2 {
    grid-column: auto;
  }
}

/* Legal-document email administration */
.legal-notice-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.legal-notice-summary-grid > div {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--border, #dbe2ea);
  border-radius: 14px;
  background: var(--surface-soft, #f8fafc);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legal-notice-summary-grid span {
  color: var(--muted, #64748b);
  overflow-wrap: anywhere;
}
.legal-notice-summary-grid strong {
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}
.legal-notice-settings-form .consent-row {
  align-items: flex-start;
}
.legal-notice-settings-form .consent-row input[type="checkbox"] {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  margin-top: .2rem;
}
.legal-notice-settings-form .consent-row span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal-notice-settings-form small {
  color: var(--muted, #64748b);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .legal-notice-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .legal-notice-summary-grid { grid-template-columns: 1fr; }
}

.signup-invite-card code { display:inline-block; padding:.45rem .65rem; border-radius:.5rem; background:#eef2f7; font-weight:700; letter-spacing:.08em; }
.signup-invite-card a { overflow-wrap:anywhere; }
.api-error-legend-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; }
.api-error-legend-grid > div { display:flex; flex-direction:column; gap:.25rem; padding:.8rem; border:1px solid var(--border, #d9e1ec); border-radius:.8rem; background:rgba(247,249,252,.8); }
.admin-research-language-card { margin-top:1rem; }
.market-closed-trading-notice p { margin:.4rem 0 0; }

/* 2026-07-12: keep the public Register CTA readable in Deep Focus and Golden Play. */
.theme-balanced .navlinks a.nav-cta,
.theme-balanced .navlinks a.nav-cta:link,
.theme-balanced .navlinks a.nav-cta:visited {
  background: #e0f2fe !important;
  color: #0f172a !important;
  border: 1px solid #7dd3fc !important;
  box-shadow: 0 8px 20px rgba(14, 165, 233, .18) !important;
}
.theme-balanced .navlinks a.nav-cta:hover,
.theme-balanced .navlinks a.nav-cta:focus,
.theme-balanced .navlinks a.nav-cta:active {
  background: #bae6fd !important;
  color: #082f49 !important;
  border-color: #38bdf8 !important;
}
.theme-casino .navlinks a.nav-cta,
.theme-casino .navlinks a.nav-cta:link,
.theme-casino .navlinks a.nav-cta:visited {
  background: #ffd567 !important;
  color: #241303 !important;
  border: 1px solid #fff0ad !important;
  text-shadow: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.theme-casino .navlinks a.nav-cta:hover,
.theme-casino .navlinks a.nav-cta:focus,
.theme-casino .navlinks a.nav-cta:active {
  background: #ffe49a !important;
  color: #1b0d02 !important;
  border-color: #fff7d1 !important;
}

/* 2026-07-12: semantic ON/OFF lamps for homepage league-category statistics. */
.landing-card-grid .landing-stat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 0 0 6px;
  min-width: 0;
}
.landing-card-grid .landing-stat-label .stat-status-lamp {
  display: inline-block;
  width: 11px;
  min-width: 11px;
  height: 11px;
  margin: 0;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .24);
  flex: 0 0 11px;
  vertical-align: middle;
}
.landing-card-grid .stat-status-lamp-on {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .15), 0 0 10px rgba(34, 197, 94, .72), inset 0 1px 1px rgba(255,255,255,.62);
}
.landing-card-grid .stat-status-lamp-off {
  background: #64748b;
  border-color: rgba(71, 85, 105, .7);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.22), inset 0 -2px 3px rgba(15,23,42,.34);
}
.theme-balanced .landing-card-grid .stat-status-lamp-on {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .16), 0 0 11px rgba(74, 222, 128, .72), inset 0 1px 1px rgba(255,255,255,.58);
}
.theme-casino .landing-card-grid .stat-status-lamp-on {
  background: #6ee7b7 !important;
  border-color: rgba(209, 250, 229, .68) !important;
  box-shadow: 0 0 0 3px rgba(110, 231, 183, .16), 0 0 11px rgba(110, 231, 183, .78), inset 0 1px 1px rgba(255,255,255,.62) !important;
}
.theme-casino .landing-card-grid .stat-status-lamp-off {
  background: #7c6f64 !important;
  border-color: rgba(255, 230, 167, .34) !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.16), inset 0 -2px 3px rgba(0,0,0,.38) !important;
}
@media (prefers-reduced-motion: reduce) {
  .landing-card-grid .stat-status-lamp-on { box-shadow: 0 0 0 3px rgba(34, 197, 94, .14), inset 0 1px 1px rgba(255,255,255,.62); }
}


/* 2026-07-13: keep the public-list approval state compact inside its action cell. */
.contest-action-row .pending-approval-action {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 2026-07-13: channel note consolidation, combined simulation disclosure, and trade success modal. */
.channel-market-note-global {
  display: inline-flex;
  margin-top: .65rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(127, 127, 127, .08);
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
}
.combined-simulation-notice > p:first-child {
  margin-top: 0;
}
.combined-simulation-notice-divider {
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}
.combined-simulation-notice-divider p {
  margin-bottom: 0;
}
.trade-result-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.trade-result-modal-card {
  width: min(420px, 100%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 24px;
  background: var(--card, #fff);
  color: var(--text, #101828);
  box-shadow: 0 28px 90px rgba(15, 23, 42, .30);
  padding: 1.6rem;
  text-align: center;
}
.trade-result-modal-card h2 {
  margin: .8rem 0 .45rem;
}
.trade-result-modal-card p {
  margin: 0 0 1.25rem;
  color: var(--muted, #667085);
}
.trade-result-modal-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ecfdf3;
  color: #027a48;
  font-size: 1.7rem;
  font-weight: 900;
}
.trade-result-modal-error .trade-result-modal-icon {
  background: #fef3f2;
  color: #b42318;
}
.trade-result-modal-error {
  border-color: rgba(240, 68, 56, .35);
}
.trade-result-modal-ok {
  min-width: 110px;
}

/* 2026-07-13: trade input order and post-modal focus return. */
.trade-workspace {
  scroll-margin-top: 90px;
}
.trade-workspace:focus {
  outline: none;
}
.mobile-order-form {
  display: grid;
  grid-template-columns: minmax(105px, .7fr) minmax(125px, .9fr) minmax(120px, 1fr);
  gap: 12px;
  align-items: stretch;
}
.mobile-order-form .trade-side-field,
.mobile-order-form .trade-order-type-field,
.mobile-order-form .trade-quantity-field,
.mobile-order-form .trade-symbol-field,
.mobile-order-form .trade-limit-price-field {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.mobile-order-form .trade-symbol-field {
  grid-column: 1 / -1;
  margin-top: 2px;
}
.mobile-order-form .trade-limit-price-field {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .mobile-order-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mobile-order-form .trade-symbol-field,
  .mobile-order-form .trade-limit-price-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .mobile-order-form {
    grid-template-columns: 1fr 1fr;
  }
  .mobile-order-form .trade-quantity-field {
    grid-column: 1 / -1;
  }
}

/* 2026-07-13: keep the single channel/market clarification sized to its text. */
.channel-market-note.channel-market-note-global {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  justify-content: flex-start;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* 2026-07-14: consent-gated GA4 and administrator environment controls */
.footer-link-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.footer-link-button:hover,
.footer-link-button:focus-visible {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-copy { min-width: 0; }
.cookie-status {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink) !important;
}
.analytics-admin-box {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand) 6%);
}
.analytics-admin-box h3 { margin: 0; }
.analytics-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
}
.analytics-admin-meta code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(15, 23, 42, .08);
}
@media (max-width: 760px) {
  .site-footer { flex-wrap: wrap; }
  .analytics-admin-meta { display: grid; gap: 6px; }
}

/* 2026-07-14: concise consent card and contest market/reward metadata. */
.cookie-notice.cookie-notice-compact {
  width: min(680px, calc(100vw - 28px));
  max-width: 680px;
  padding: 14px 16px;
  gap: 14px;
  align-items: center;
}
.cookie-notice-compact .cookie-copy {
  display: grid;
  gap: 3px;
}
.cookie-notice-compact .cookie-copy strong {
  font-size: 15px;
}
.cookie-notice-compact .cookie-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.cookie-notice-compact .cookie-status {
  display: inline-flex;
  width: fit-content;
  margin-top: 2px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.cookie-notice-compact .cookie-status[hidden] { display: none; }
.cookie-notice-compact .cookie-actions {
  gap: 7px;
  flex-wrap: nowrap;
}
.cookie-notice-compact .cookie-actions .button,
.cookie-notice-compact .cookie-actions button {
  min-width: 72px;
}
.cookie-details-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.cookie-details-link:hover { color: var(--brand); }

.contest-list.view-cards .contest-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contest-list.view-balanced .contest-meta-grid .meta-max-points { display: none; }
.contest-list.view-list .contest-meta-grid .meta-markets,
.contest-list.view-list .contest-meta-grid .meta-max-points { display: none; }
.contest-meta-grid .meta-markets strong,
.contest-meta-grid .meta-max-points strong {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .cookie-notice.cookie-notice-compact {
    width: auto;
    max-width: none;
    padding: 12px;
  }
  .cookie-notice-compact .cookie-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cookie-notice-compact .cookie-actions .cookie-details-link {
    grid-column: 1 / -1;
    min-height: 30px;
  }
  .contest-list.view-cards .contest-meta-grid,
  .contest-list.view-balanced .contest-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* 2026-07-14: balanced market line, global result modal, and GA/flash UI refinements. */
.balanced-market-line {
  display: none;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.balanced-market-line span { margin-right: .45rem; }
.balanced-market-line strong { color: var(--text); }
.contest-list.view-balanced .balanced-market-line {
  display: block;
  order: 3;
  padding: 0 2px;
}
.contest-list.view-balanced .leader-summary { order: 4; }
.contest-list.view-balanced .contest-meta-grid { order: 5; }
.contest-list.view-balanced .contest-action-row { order: 6; }
.contest-list.view-balanced .contest-meta-grid .meta-markets { display: none; }

.global-flash-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.global-flash-modal-card {
  width: min(440px, 100%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 24px;
  background: var(--card, #fff);
  color: var(--text, #101828);
  box-shadow: 0 28px 90px rgba(15, 23, 42, .30);
  padding: 1.6rem;
  text-align: center;
}
.global-flash-modal-card h2 { margin: .8rem 0 .45rem; }
.global-flash-modal-messages { display: grid; gap: .45rem; margin: 0 0 1.25rem; }
.global-flash-modal-messages p { margin: 0; color: var(--muted, #667085); line-height: 1.55; overflow-wrap: anywhere; }
.global-flash-modal-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 1.55rem;
  font-weight: 900;
}
.global-flash-modal-success .global-flash-modal-icon { background: #ecfdf3; color: #027a48; }
.global-flash-modal-warning .global-flash-modal-icon { background: #fffaeb; color: #b54708; }
.global-flash-modal-error { border-color: rgba(240, 68, 56, .35); }
.global-flash-modal-error .global-flash-modal-icon { background: #fef3f2; color: #b42318; }
.global-flash-modal-ok { min-width: 110px; }
@media (max-width: 560px) {
  .global-flash-modal-card { padding: 1.35rem; border-radius: 20px; }
}


/* 2026-07-14: compact-list metadata and authentication feedback refinements. */
body .contest-list.view-list .balanced-market-line,
body .contest-list.view-list .contest-meta-grid > .meta-markets,
body .contest-list.view-list .contest-meta-grid > .meta-max-points {
  display: none !important;
}
.auth-inline-flash {
  margin: 0 0 14px;
}

/* 2026-07-15: integrity monitor and reusable 7/30/90-day log filters. */
.period-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: .75rem 0 1rem;
}
.admin-period-filter { margin: 0 0 1rem; }
.compact-review-form { min-width: 220px; gap: .4rem; }
.compact-review-form input,
.compact-review-form select { width: 100%; min-width: 0; }

/* 2026-07-15 AI investment character cards */
.ai-character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.ai-character-select-card,.ai-character-profile-card{border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--card)}
.ai-character-profile-card{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:start}
.ai-character-profile-card img{width:72px;height:72px;border-radius:18px;object-fit:cover;background:var(--soft-bg)}
.ai-character-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.ai-character-meta span{font-size:.82rem;padding:4px 8px;border-radius:999px;background:var(--soft-bg)}
.behavior-report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.behavior-report-grid div{padding:12px;border-radius:12px;background:var(--soft-bg)}

.human-rank-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--muted-text, #64748b);
  white-space: nowrap;
}
.ai-selection-shell{margin-top:16px;display:grid;gap:18px}
.ai-selection-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
.ai-slot-tabs{display:flex;flex-wrap:wrap;gap:8px}
.ai-slot-tab{border:1px solid var(--border);background:var(--card);color:inherit;border-radius:999px;padding:.55rem .9rem;font-weight:700;cursor:pointer}
.ai-slot-tab.is-active{border-color:var(--brand,#2563eb);box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.ai-slot-config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.ai-slot-config-card{border:1px solid var(--border);border-radius:18px;padding:16px;background:var(--card);display:grid;gap:12px}
.ai-slot-config-card.is-active{border-color:var(--brand,#2563eb);box-shadow:0 14px 28px rgba(15,23,42,.08)}
.ai-slot-config-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ai-slot-config-head h3{margin:0}
.ai-slot-config-head .hint{margin:4px 0 0}
.ai-slot-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:var(--soft-bg);font-size:.8rem;font-weight:700}
.compact-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.ai-slot-preview{min-height:178px}
.ai-preview-examples{margin-top:10px}
.ai-gallery-head h3{margin:0 0 4px}
.ai-character-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.ai-character-gallery-card{width:100%;text-align:left;border:1px solid var(--border);border-radius:18px;padding:16px;background:var(--card);color:inherit;cursor:pointer;display:grid;gap:10px;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.ai-character-gallery-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 28px rgba(15,23,42,.08)}
.ai-character-gallery-card.is-selected{border-color:var(--brand,#2563eb);box-shadow:0 0 0 2px rgba(37,99,235,.16)}
.ai-character-gallery-card.is-disabled,.ai-character-gallery-card:disabled{opacity:.55;cursor:not-allowed}
.ai-character-gallery-top{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:start}
.ai-character-gallery-top img{width:84px;height:84px;border-radius:20px;object-fit:cover;background:var(--soft-bg)}
.ai-character-gallery-top h4{margin:0}
.ai-character-subtitle{margin:.2rem 0 .35rem;color:var(--muted-text,#64748b);font-weight:600}
.ai-character-principle{margin:.1rem 0;font-weight:700}
.ai-character-description{margin:0;color:var(--muted-text,#64748b)}
.ai-character-details{display:grid;gap:8px;margin:0}
.ai-character-details div{padding:10px 12px;border-radius:12px;background:var(--soft-bg)}
.ai-character-details dt{font-size:.78rem;color:var(--muted-text,#64748b);margin-bottom:3px}
.ai-character-details dd{margin:0;font-weight:600}
.ai-card-select-hint{font-size:.85rem;font-weight:700}
.ai-card-disabled-hint{display:none;font-size:.82rem;color:#b91c1c}
.ai-character-gallery-card.is-disabled .ai-card-disabled-hint{display:block}
.ai-character-gallery-card.is-disabled .ai-card-select-hint{display:none}
@media (max-width: 720px){
  .ai-character-gallery,.ai-slot-config-grid{grid-template-columns:1fr}
  .ai-character-gallery-top,.ai-character-profile-card{grid-template-columns:72px 1fr}
}

/* 2026-07-15: dynamic fighting-game style AI character picker. */
body.ai-picker-open { overflow: hidden; }
.ai-fighter-selection-shell { margin-top: 18px; }
.ai-dynamic-slot-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.ai-dynamic-slot-head h3 { margin: 0 0 5px; }
.ai-selected-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 72px;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--brand, #2563eb) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #2563eb) 10%, var(--card));
  font-weight: 800;
}
.ai-dynamic-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 16px;
}
.ai-no-slot-hint {
  margin: 0;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--muted-text, #64748b);
  text-align: center;
  background: color-mix(in srgb, var(--soft-bg, #f8fafc) 82%, transparent);
}
.ai-no-slot-hint[hidden] { display: none !important; }
.ai-dynamic-slot-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 142px 1fr;
  gap: 16px;
  min-height: 250px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 15%, color-mix(in srgb, var(--brand, #2563eb) 18%, transparent), transparent 36%),
    linear-gradient(145deg, var(--card), color-mix(in srgb, var(--soft-bg, #f8fafc) 78%, var(--card)));
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}
.ai-dynamic-slot-card::after {
  content: '';
  position: absolute;
  inset: auto -40px -70px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 26px solid color-mix(in srgb, var(--brand, #2563eb) 7%, transparent);
  pointer-events: none;
}
.ai-dynamic-slot-portrait {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 218px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand, #2563eb) 12%, transparent), transparent 55%),
    var(--soft-bg, #f8fafc);
}
.ai-dynamic-slot-portrait img {
  width: 100%;
  height: 100%;
  max-height: 218px;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.12);
  transform-origin: center bottom;
}
.ai-slot-number {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .76);
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.ai-dynamic-slot-content { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.ai-dynamic-slot-title-row { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ai-dynamic-slot-title-row h4 { margin: 2px 0 0; font-size: 1.25rem; }
.ai-slot-risk {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--soft-bg, #f1f5f9);
  font-size: .76rem;
  font-weight: 800;
}
.ai-slot-principle { margin: 12px 0 8px; font-weight: 700; line-height: 1.48; }
.ai-slot-examples { margin: 0 0 14px; color: var(--muted-text, #64748b); font-size: .87rem; line-height: 1.45; }
.ai-slot-controls { margin-top: auto; display: grid; grid-template-columns: minmax(130px, 1fr) auto; gap: 10px; align-items: end; }
.ai-slot-controls label { margin: 0; }
.ai-slot-controls .ai-open-picker { min-height: 42px; white-space: nowrap; }

.ai-fighter-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 6, 23, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ai-fighter-picker-backdrop[hidden] { display: none !important; }
.ai-fighter-picker {
  width: min(1180px, 100%);
  max-height: min(94vh, 980px);
  overflow: auto;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .97), rgba(30, 41, 59, .98)),
    var(--card);
  color: #f8fafc;
  box-shadow: 0 40px 130px rgba(0, 0, 0, .55);
}
.ai-fighter-picker-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .92);
  backdrop-filter: blur(12px);
}
.ai-fighter-picker-head h2 { margin: 2px 0 4px; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.ai-fighter-picker-head .hint { color: #94a3b8; margin: 0; }
.ai-picker-close {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}
.ai-fighter-arena {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: center;
  padding: 24px;
}
.ai-fighter-nav {
  width: 52px;
  height: 78px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 2.3rem;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.ai-fighter-nav:hover { transform: scale(1.06); background: rgba(255,255,255,.12); }
.ai-fighter-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(310px, 430px) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  min-height: 440px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 45%, rgba(59,130,246,.28), transparent 38%),
    radial-gradient(circle at 75% 12%, rgba(168,85,247,.20), transparent 34%),
    linear-gradient(135deg, rgba(30,41,59,.88), rgba(15,23,42,.96));
}
.ai-fighter-showcase::before {
  content: 'SELECT';
  position: absolute;
  right: -12px;
  bottom: -38px;
  color: rgba(255,255,255,.035);
  font-size: clamp(5rem, 13vw, 11rem);
  font-weight: 1000;
  letter-spacing: -.04em;
  pointer-events: none;
}
.ai-fighter-showcase.is-switching .ai-fighter-portrait-frame,
.ai-fighter-showcase.is-switching .ai-fighter-copy { animation: ai-fighter-swap .28s ease both; }
@keyframes ai-fighter-swap {
  from { opacity: .25; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-fighter-portrait-frame {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: end center;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(15,23,42,.16)),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.025) 34px 35px);
}
.ai-fighter-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  bottom: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96,165,250,.45), rgba(59,130,246,.10) 56%, transparent 72%);
  filter: blur(2px);
}
.ai-fighter-portrait-frame img {
  position: relative;
  z-index: 1;
  width: min(100%, 390px);
  height: 390px;
  object-fit: contain;
  object-position: center bottom;
  transform: scale(1.08);
  transform-origin: center bottom;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.42));
}
.ai-fighter-risk-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .82rem;
  font-weight: 900;
}
.ai-fighter-copy { position: relative; z-index: 1; min-width: 0; }
.ai-fighter-number { margin: 0 0 8px; color: #60a5fa; font-weight: 900; letter-spacing: .16em; }
.ai-fighter-copy h3 { margin: 0 0 16px; color: #fff; font-size: clamp(2rem, 5vw, 4rem); line-height: .98; letter-spacing: -.04em; }
.ai-fighter-principle { margin: 0 0 12px; color: #f8fafc; font-size: 1.08rem; font-weight: 800; line-height: 1.55; }
.ai-fighter-description { margin: 0; color: #cbd5e1; line-height: 1.65; }
.ai-fighter-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.ai-fighter-stat-grid > div { padding: 12px 14px; border: 1px solid rgba(148,163,184,.18); border-radius: 14px; background: rgba(255,255,255,.045); }
.ai-fighter-stat-grid span { display: block; color: #94a3b8; font-size: .76rem; margin-bottom: 4px; }
.ai-fighter-stat-grid strong { color: #fff; overflow-wrap: anywhere; }
.ai-fighter-stat-grid .ai-fighter-examples { grid-column: 1 / -1; }
.ai-fighter-market-warning { margin: 14px 0 0; color: #fca5a5; font-weight: 800; }

.ai-roster-zone {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  padding: 0 24px;
}
.ai-roster-page-button {
  width: 42px;
  height: 70px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
}
.ai-roster-page-button:disabled { opacity: .28; cursor: default; }
.ai-fighter-roster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.ai-roster-character {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 126px auto;
  gap: 8px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  color: #e2e8f0;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.ai-roster-character:hover { transform: translateY(-3px); background: rgba(255,255,255,.10); }
.ai-roster-character.is-active { border-color: #60a5fa; background: rgba(59,130,246,.18); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.ai-roster-character.is-disabled { opacity: .42; }
.ai-roster-character img {
  width: 100%;
  height: 126px;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 11px;
  background: rgba(15,23,42,.36);
}
.ai-roster-character strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; text-align: center; }
.ai-roster-index { position: absolute; z-index: 2; top: 13px; left: 13px; padding: 3px 6px; border-radius: 7px; background: rgba(15,23,42,.70); color: #fff; font-size: .68rem; font-weight: 900; }
.ai-fighter-pagination { display: flex; justify-content: center; gap: 8px; padding: 14px 24px 2px; }
.ai-fighter-page-dot { width: 30px; height: 6px; border: 0; border-radius: 999px; background: rgba(148,163,184,.30); cursor: pointer; }
.ai-fighter-page-dot.is-active { background: #60a5fa; }
.ai-fighter-picker-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 24px 24px; }
.ai-fighter-picker-actions .button { min-width: 140px; }

@media (max-width: 980px) {
  .ai-fighter-showcase { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; }
  .ai-fighter-portrait-frame, .ai-fighter-portrait-frame img { min-height: 330px; height: 330px; }
  .ai-fighter-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ai-dynamic-slot-grid { grid-template-columns: 1fr; }
  .ai-dynamic-slot-card { grid-template-columns: 110px 1fr; min-height: 220px; padding: 13px; }
  .ai-dynamic-slot-portrait { min-height: 190px; }
  .ai-dynamic-slot-portrait img { max-height: 190px; }
  .ai-slot-controls { grid-template-columns: 1fr; }
  .ai-fighter-picker-backdrop { padding: 0; }
  .ai-fighter-picker { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .ai-fighter-picker-head { padding: 16px; }
  .ai-fighter-arena { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 7px; padding: 14px 10px; }
  .ai-fighter-nav { width: 38px; height: 62px; border-radius: 12px; }
  .ai-fighter-showcase { grid-template-columns: 1fr; min-height: 0; padding: 16px; gap: 14px; }
  .ai-fighter-portrait-frame { min-height: 300px; }
  .ai-fighter-portrait-frame img { height: 300px; min-height: 300px; width: min(100%, 330px); }
  .ai-fighter-copy h3 { font-size: 2.2rem; }
  .ai-fighter-stat-grid { grid-template-columns: 1fr 1fr; }
  .ai-roster-zone { grid-template-columns: 34px minmax(0,1fr) 34px; gap: 7px; padding: 0 10px; }
  .ai-roster-page-button { width: 34px; }
  .ai-fighter-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-roster-character { grid-template-rows: 112px auto; }
  .ai-roster-character img { height: 112px; }
  .ai-fighter-picker-actions { position: sticky; bottom: 0; padding: 14px 16px; background: rgba(15,23,42,.94); }
  .ai-fighter-picker-actions .button { flex: 1; min-width: 0; }
}
@media (max-width: 460px) {
  .ai-dynamic-slot-card { grid-template-columns: 1fr; }
  .ai-dynamic-slot-portrait { min-height: 240px; }
  .ai-dynamic-slot-portrait img { max-height: 240px; }
  .ai-dynamic-slot-head { align-items: center; }
  .ai-fighter-stat-grid { grid-template-columns: 1fr; }
  .ai-fighter-stat-grid .ai-fighter-examples { grid-column: auto; }
}

/* 2026-07-15: compact, stable AI fighter picker refinement. */
.ai-character-section-head { margin-bottom: 10px; }
.ai-character-section-head .hint { margin-bottom: 0; }
.ai-character-simple-controls {
  max-width: 260px;
  margin-bottom: 14px;
}
.ai-character-simple-controls label { margin: 0; }
.ai-fighter-selection-shell { margin-top: 10px; }
.ai-dynamic-slot-head { align-items: center; }
.ai-dynamic-slot-head h3 { margin: 0; }
.ai-dynamic-slot-portrait img {
  transform: none;
  object-position: center;
  padding: 6px;
}
.ai-dynamic-slot-content > .ai-open-picker {
  margin-top: auto;
  align-self: flex-start;
  min-height: 42px;
}

.ai-fighter-picker-backdrop {
  background: rgba(2, 6, 23, .86);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  contain: paint;
}
.ai-fighter-picker {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  contain: layout paint;
  transform: translateZ(0);
}
.ai-fighter-picker-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  min-height: 54px;
  background: #0f172a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ai-fighter-picker-head h2 {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.2;
  white-space: nowrap;
}
.ai-picker-slot-label {
  min-width: 0;
  color: #94a3b8;
  font-size: .86rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-picker-close {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 1.45rem;
}
.ai-fighter-arena { padding: 16px 20px; }
.ai-fighter-showcase {
  min-height: 410px;
  grid-template-columns: minmax(330px, 450px) minmax(0, 1fr);
  gap: 26px;
  padding: 18px;
  contain: layout paint;
}
.ai-fighter-showcase.is-switching .ai-fighter-portrait-frame,
.ai-fighter-showcase.is-switching .ai-fighter-copy { animation: none; }
.ai-fighter-portrait-frame {
  width: 100%;
  max-width: 450px;
  min-height: 0;
  aspect-ratio: 1 / 1;
  justify-self: center;
  place-items: center;
  padding: 10px;
  overflow: hidden;
  contain: layout paint;
}
.ai-fighter-portrait-frame img {
  width: 100%;
  height: 100%;
  max-width: 430px;
  max-height: 430px;
  min-height: 0;
  padding: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
  transform-origin: center;
  backface-visibility: hidden;
}
.ai-fighter-glow {
  width: 78%;
  height: 78%;
  bottom: 6%;
}
.ai-roster-zone,
.ai-fighter-roster,
.ai-roster-character,
.ai-roster-character img {
  contain: layout paint;
}
.ai-roster-character {
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
  transform: none !important;
}
.ai-roster-character:hover {
  transform: none;
}
.ai-roster-character[hidden] { display: none !important; }
.ai-fighter-page-dot { transition: background-color .12s ease; }

@media (max-width: 980px) {
  .ai-fighter-showcase { grid-template-columns: minmax(270px, 360px) minmax(0, 1fr); }
  .ai-fighter-portrait-frame { min-height: 0; height: auto; }
  .ai-fighter-portrait-frame img { min-height: 0; height: 100%; max-height: 350px; }
}
@media (max-width: 720px) {
  .ai-character-simple-controls { max-width: none; }
  .ai-fighter-picker-head { grid-template-columns: minmax(0, 1fr) auto; }
  .ai-fighter-picker-head h2 { white-space: normal; }
  .ai-picker-slot-label { grid-column: 1; grid-row: 2; }
  .ai-picker-close { grid-column: 2; grid-row: 1 / span 2; }
  .ai-fighter-showcase { grid-template-columns: 1fr; min-height: 0; }
  .ai-fighter-portrait-frame { width: min(100%, 360px); min-height: 0; height: auto; aspect-ratio: 1 / 1; }
  .ai-fighter-portrait-frame img { width: 100%; height: 100%; min-height: 0; max-height: 340px; }
}
.ai-fighter-picker-actions { background: #0f172a; }
@media (max-width: 720px) {
  .ai-fighter-picker-actions { background: #0f172a; }
}
/* 2026-07-15 compact AI ranking identity */
.ranking-ai-identity{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  vertical-align:middle;
}
.ranking-ai-identity .ranking-nickname{
  display:inline-block;
  max-width:11ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow-wrap:normal;
}
.ranking-ai-identity .ranking-ai-icon{flex:0 0 auto}
@media (max-width:900px){
  .league-ranking-table .ranking-ai-identity .ranking-nickname{
    max-width:12ch !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    text-overflow:ellipsis !important;
  }
}
/* 2026-07-15 AI ranking identity icons */
.ranking-ai-character-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  min-width:24px;
  min-height:24px;
  margin-left:0;
  border:1px solid rgba(99,102,241,.35);
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(135deg,#eef2ff,#dbeafe);
  box-shadow:0 4px 10px rgba(79,70,229,.16);
  vertical-align:middle;
}
.ranking-ai-character-icon img{
  width:145%;
  height:145%;
  max-width:none;
  object-fit:cover;
  object-position:50% 12%;
  display:block;
  transform:translateY(8%);
}
.ranking-ai-identity .ranking-ai-icon,
.ranking-ai-identity .ranking-ai-character-icon{flex:0 0 24px}
/* 2026-07-15 Game Mode */
.theme-game{
  --surface-page: #070b18;
  --surface-card: #111a32;
  --surface-elevated: rgba(17, 26, 50, .98);
  --surface-soft: #101a33;
  --surface-muted: #13213f;
  --surface-input: #080e20;
  --surface-disabled: #111b32;
  --surface-overlay: rgba(5, 8, 22, .94);
  --surface-inverse: #050816;
  --text-primary: #f8fbff;
  --text-secondary: #c5d4ec;
  --text-muted: #9fb0d2;
  --text-disabled: #dce8f9;
  --text-placeholder: #8194b5;
  --text-on-accent: #ffffff;
  --text-inverse: #f8fbff;
  --text-inverse-muted: #c5d4ec;
  --border-default: rgba(101, 246, 255, .22);
  --border-strong: rgba(148, 181, 230, .34);
  --focus-ring: #65f6ff;
  --accent: #65f6ff;
  --accent-strong: #8b5cf6;
  --accent-soft: rgba(101, 246, 255, .10);
  --positive: #6ee7a8;
  --warning: #fde68a;
  --negative: #ff8d8d;
  --info-surface: rgba(37, 99, 235, .18);
  --info-text: #bfe2ff;
  --info-border: rgba(96, 165, 250, .42);
  --success-surface: rgba(22, 163, 74, .16);
  --success-text: #86efac;
  --success-border: rgba(74, 222, 128, .38);
  --warning-surface: rgba(202, 138, 4, .16);
  --warning-text: #fde68a;
  --warning-border: rgba(250, 204, 21, .38);
  --danger-surface: rgba(220, 38, 38, .16);
  --danger-text: #fca5a5;
  --danger-border: rgba(248, 113, 113, .38);

  /* Keep legacy names mapped to the semantic contract. */
  --bg: var(--surface-page);
  --panel: var(--surface-elevated);
  --card: var(--surface-card);
  --surface: var(--surface-card);
  --soft-bg: var(--surface-soft);
  --soft: var(--surface-muted);
  --text: var(--text-primary);
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --muted-color: var(--text-muted);
  --muted-text: var(--text-muted);
  --line: var(--border-default);
  --border: var(--border-default);
  --border-color: var(--border-default);
  --brand: var(--accent);
  --brand2: var(--accent-strong);
  --ok: var(--positive);
  --warn: var(--warning);
  --danger: var(--negative);
  background:
    radial-gradient(circle at 15% 8%,rgba(37,99,235,.28),transparent 30%),
    radial-gradient(circle at 82% 16%,rgba(139,92,246,.23),transparent 28%),
    linear-gradient(180deg,#050816,#0a1022 48%,#050816);
  color:var(--text);
}
.theme-game .topbar{
  background:var(--surface-overlay);
  border-bottom:1px solid var(--border-default);
  box-shadow:0 12px 36px rgba(0,0,0,.32);
}
.theme-game .brand,
.theme-game .navlinks a,
.theme-game .nav-menu-button{color:var(--text-primary)}
.theme-game .navlinks a:hover,
.theme-game .nav-menu-button:hover,
.theme-game .nav-menu:hover .nav-menu-button,
.theme-game .nav-menu:focus-within .nav-menu-button{background:var(--accent-soft);color:var(--accent)}
.theme-game .nav-menu-panel,
.theme-game .card,
.theme-game .guide-card,
.theme-game .cookie-notice,
.theme-game .notice-modal-card{
  color:var(--text-primary);
  background:linear-gradient(180deg,var(--surface-elevated),color-mix(in srgb, var(--surface-page) 82%, var(--surface-card)));
  border-color:var(--border-default);
  box-shadow:0 18px 48px rgba(0,0,0,.30);
}
.theme-game .hint,
.theme-game .muted,
.theme-game p,
.theme-game label{color:var(--text-muted)}
.theme-game input,
.theme-game textarea,
.theme-game select{
  background:var(--surface-input);
  color:var(--text-primary);
  border-color:var(--border-strong);
}
.theme-game .button,
.theme-game button{
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:var(--text-on-accent);
  border-color:rgba(129,140,248,.55);
  box-shadow:0 10px 26px rgba(37,99,235,.24);
}
.theme-game .button.secondary{
  background:color-mix(in srgb, var(--surface-card) 86%, var(--text-primary) 14%);
  color:var(--text-primary);
  border-color:var(--border-default);
}
.theme-game th{background:color-mix(in srgb, var(--accent) 8%, var(--surface-soft));color:var(--text-primary)}
.theme-game td{color:var(--text-primary)}
.theme-game .account-tier-badge.professional{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff}
.theme-game .site-footer{color:var(--text-muted)}

.game-home-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  gap:32px;
  align-items:center;
  min-height:540px;
  padding:52px;
  margin:22px 0 28px;
  border:1px solid rgba(101,246,255,.22);
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(120deg,rgba(8,14,33,.96),rgba(15,25,58,.91)),
    repeating-linear-gradient(90deg,transparent 0 72px,rgba(101,246,255,.035) 72px 73px),
    repeating-linear-gradient(0deg,transparent 0 72px,rgba(101,246,255,.035) 72px 73px);
  box-shadow:0 28px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05);
}
.game-home-hero::before{
  content:"";
  position:absolute;
  inset:-20% auto auto 58%;
  width:440px;
  height:440px;
  border:1px solid rgba(101,246,255,.14);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(101,246,255,.025),0 0 0 110px rgba(139,92,246,.02);
  pointer-events:none;
}
.game-home-hero-copy{position:relative;z-index:1}
.game-live-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 12px;
  border:1px solid rgba(101,246,255,.28);
  border-radius:999px;
  background:rgba(101,246,255,.08);
  color:#aefaff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.12em;
}
.game-live-badge span{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 14px #4ade80}
.game-home-hero h1{
  max-width:760px;
  margin:18px 0 16px;
  color:#fff;
  font-size:clamp(2.4rem,5vw,5.4rem);
  line-height:.96;
  letter-spacing:-.045em;
  text-shadow:0 0 34px rgba(101,246,255,.18);
}
.game-home-hero-copy>p{max-width:700px;font-size:1.08rem;line-height:1.75}
.game-home-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.game-primary-button{background:linear-gradient(135deg,#22d3ee,#2563eb)!important;color:#03111c!important;font-weight:900!important}
.game-secondary-button{background:rgba(139,92,246,.14)!important;color:#f2eaff!important;border-color:rgba(167,139,250,.36)!important}
.game-fair-play-note{font-size:.82rem;margin-top:18px!important;color:#7f96c0!important}
.game-command-card{
  position:relative;
  z-index:1;
  padding:20px;
  border:1px solid rgba(101,246,255,.28);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(12,22,49,.96),rgba(5,11,27,.96));
  box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 0 38px rgba(37,99,235,.08);
  overflow:hidden;
}
.game-command-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid rgba(101,246,255,.16);font-size:.86rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.game-command-head strong{display:inline-flex;align-items:center;gap:7px;color:#86efac;font-size:.72rem}
.game-command-head i{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80}
.game-command-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.game-command-grid article{padding:17px;border:1px solid rgba(148,163,184,.14);border-radius:14px;background:rgba(255,255,255,.035)}
.game-command-grid span{display:block;color:#8fa5cd;font-size:.78rem}
.game-command-grid strong{display:block;margin-top:7px;font-size:1.8rem;color:#fff}
.game-scan-lines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(101,246,255,.018) 5px 6px)}
.game-section-head{display:flex;justify-content:space-between;gap:24px;margin:36px 0 14px}
.game-section-head h2,.game-panel-head h2{margin:3px 0 0;color:#fff}
.game-section-head p{margin:5px 0 0}
.game-section-kicker,.game-panel-head>span{color:#65f6ff;font-size:.72rem;font-weight:900;letter-spacing:.16em}
.game-lobby-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:26px}
.game-lobby-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  min-height:112px;
  padding:18px;
  border:1px solid rgba(101,246,255,.18);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(17,28,58,.96),rgba(7,13,30,.96));
  color:#fff!important;
  text-decoration:none;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.game-lobby-card:hover{transform:translateY(-3px);border-color:rgba(101,246,255,.52);box-shadow:0 18px 38px rgba(0,0,0,.28)}
.game-lobby-icon{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,#0ea5e9,#2563eb);font-size:.72rem;font-weight:900;letter-spacing:.08em;box-shadow:0 0 24px rgba(14,165,233,.28)}
.game-lobby-card.private .game-lobby-icon{background:linear-gradient(135deg,#8b5cf6,#ec4899)}
.game-lobby-card.season .game-lobby-icon{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.game-lobby-card strong{font-size:1.03rem}.game-lobby-card p{margin:4px 0 0;font-size:.82rem}.game-lobby-card>b{font-size:2rem;color:#fff}
.game-home-dashboard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px;margin-bottom:28px}
.game-panel{padding:22px;border:1px solid rgba(101,246,255,.18);border-radius:20px;background:linear-gradient(180deg,rgba(16,25,51,.96),rgba(7,13,29,.96));box-shadow:0 20px 48px rgba(0,0,0,.24)}
.game-panel-head{display:flex;align-items:baseline;gap:12px;margin-bottom:15px}
.game-champion-list{display:grid;gap:9px}
.game-champion-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(148,163,184,.10)}
.game-rank-medal{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:rgba(101,246,255,.10);color:#8ff8ff;font-weight:900}
.game-champion-row div{min-width:0}.game-champion-row strong,.game-champion-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-champion-row small{margin-top:3px;color:#8499bf}
.game-champion-row em{font-style:normal;font-weight:900}
.game-market-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.game-market-columns h3{font-size:.82rem;color:#9fb0d2;text-transform:uppercase;letter-spacing:.08em}
.game-market-token{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;margin-top:8px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(148,163,184,.10)}
.game-market-token strong{color:#fff}.game-market-token span{color:#65f6ff;font-weight:800}.game-market-token.muted{opacity:.55}
.game-empty-state{padding:28px;border:1px dashed rgba(101,246,255,.22);border-radius:14px;text-align:center}
@media(max-width:980px){
  .game-home-hero{grid-template-columns:1fr;padding:34px;min-height:0}
  .game-lobby-grid{grid-template-columns:1fr}
  .game-home-dashboard{grid-template-columns:1fr}
}
@media(max-width:620px){
  .game-home-hero{padding:24px 18px;border-radius:20px}
  .game-home-hero h1{font-size:clamp(2.15rem,12vw,3.4rem)}
  .game-command-grid,.game-market-columns{grid-template-columns:1fr}
  .game-lobby-card{grid-template-columns:auto 1fr auto}
}

/* 2026-07-15 Game Mode refinement: league wording, transparent AI showcase, subtle live board */
.theme-game{
  background:
    radial-gradient(circle at 14% 10%,rgba(37,99,235,.16),transparent 28%),
    radial-gradient(circle at 82% 14%,rgba(139,92,246,.14),transparent 24%),
    linear-gradient(180deg,#050816,#0a1022 48%,#050816);
}
.game-home-hero{
  grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr);
  align-items:stretch;
  min-height:0;
  padding:38px 40px 34px;
  background:
    linear-gradient(135deg,rgba(8,14,33,.96),rgba(13,22,46,.94)),
    repeating-linear-gradient(90deg,transparent 0 96px,rgba(101,246,255,.028) 96px 97px),
    repeating-linear-gradient(0deg,transparent 0 96px,rgba(101,246,255,.024) 96px 97px);
}
.game-home-hero::before{opacity:.55;inset:-22% auto auto 64%;width:360px;height:360px;box-shadow:0 0 0 45px rgba(101,246,255,.02),0 0 0 92px rgba(139,92,246,.018)}
.game-home-hero h1{
  max-width:560px;
  margin:16px 0 14px;
  font-size:clamp(1.55rem,3.3vw,2.8rem);
  line-height:1.12;
  letter-spacing:-.03em;
  text-shadow:0 0 24px rgba(101,246,255,.14);
}
.game-home-hero-copy>p{max-width:580px;font-size:.98rem;line-height:1.7}
.game-home-actions{margin-top:20px}
.game-hero-side{position:relative;z-index:1;display:grid;gap:14px}
.game-command-card{padding:18px 18px 16px}
.game-command-grid article{padding:14px 15px}
.game-command-grid strong{font-size:1.55rem}
.game-character-stage{
  position:relative;
  padding:18px;
  border:1px solid rgba(101,246,255,.24);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(10,18,39,.95),rgba(6,12,27,.97));
  box-shadow:0 22px 48px rgba(0,0,0,.28), inset 0 0 26px rgba(101,246,255,.04);
  overflow:hidden;
}
.game-stage-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.game-stage-head span{color:#b9fbff;font-size:.86rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.game-stage-head strong{padding:5px 10px;border-radius:999px;background:rgba(101,246,255,.08);border:1px solid rgba(101,246,255,.18);color:#dffcff;font-size:.75rem}
.game-stage-featured{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.game-stage-feature-card{position:relative;display:grid;gap:10px;padding:12px;border-radius:18px;border:1px solid rgba(148,163,184,.11);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025))}
.game-stage-portrait{display:flex;align-items:flex-end;justify-content:center;height:124px;padding:6px 6px 0;border-radius:14px;background:radial-gradient(circle at 50% 0%,rgba(101,246,255,.11),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden}
.game-stage-portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}
.game-stage-meta strong{display:block;color:#fff;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-stage-meta span{display:block;margin-top:3px;color:#96accc;font-size:.72rem;line-height:1.35;min-height:2.1em}
.game-character-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:relative;z-index:1}
.game-character-chip{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:14px;border:1px solid rgba(148,163,184,.12);background:rgba(255,255,255,.04);min-width:0}
.game-character-chip img{width:42px;height:42px;object-fit:contain;flex:0 0 42px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.22))}
.game-character-chip span{min-width:0;color:#eaf6ff;font-size:.74rem;font-weight:800;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.game-character-chip.wildcard{border-style:dashed;background:rgba(139,92,246,.09)}
.game-stage-sparkles,
.game-character-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.game-stage-sparkles{
  background:
    radial-gradient(circle at 16% 18%,rgba(255,255,255,.24) 0 1px,transparent 2px),
    radial-gradient(circle at 83% 28%,rgba(101,246,255,.26) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 68% 84%,rgba(255,255,255,.18) 0 1px,transparent 2px),
    radial-gradient(circle at 34% 78%,rgba(139,92,246,.22) 0 1.2px,transparent 2.2px);
  opacity:.6;
  animation:gameSparkle 7.5s ease-in-out infinite;
}
.game-character-stage::after{background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.06) 18%,transparent 36%);transform:translateX(-120%);animation:gameShine 10s linear infinite}
.game-live-board-section{margin:2px 0 28px}
.game-live-board-panel{padding:16px 18px}
.game-live-board-head{align-items:center;margin-bottom:12px}
.game-live-board-head h2{margin-right:auto}
.game-live-clock{display:inline-flex;align-items:center;padding:6px 9px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid rgba(101,246,255,.16);color:#bffaff;font-weight:800;font-size:.78rem;letter-spacing:.08em}
.game-ticker{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(101,246,255,.15);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.025))}
.game-ticker::before,.game-ticker::after{content:"";position:absolute;top:0;bottom:0;width:54px;z-index:1;pointer-events:none}
.game-ticker::before{left:0;background:linear-gradient(90deg,rgba(7,11,24,.96),transparent)}
.game-ticker::after{right:0;background:linear-gradient(270deg,rgba(7,11,24,.96),transparent)}
.game-ticker-track{display:flex;align-items:center;gap:12px;min-width:max-content;padding:12px 0;animation:gameTicker 68s linear infinite}
.game-ticker-item{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;border:1px solid rgba(148,163,184,.14);background:rgba(255,255,255,.05);color:#ddebff;font-size:.84rem;white-space:nowrap}
.game-ticker-item b{color:#7af7ff;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.game-section-head{margin:30px 0 14px}
@keyframes gameTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gameShine{0%{transform:translateX(-120%)}18%,100%{transform:translateX(180%)}}
@keyframes gameSparkle{0%,100%{opacity:.42}50%{opacity:.8}}
@media(max-width:1200px){
  .game-home-hero{grid-template-columns:minmax(0,1fr);padding:34px 32px}
}
@media(max-width:980px){
  .game-stage-featured{grid-template-columns:repeat(3,minmax(0,1fr))}
  .game-character-roster{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .game-stage-featured{grid-template-columns:1fr 1fr}
  .game-character-roster{grid-template-columns:1fr 1fr}
  .game-stage-portrait{height:112px}
}
@media(max-width:620px){
  .game-home-hero{padding:22px 16px;border-radius:20px}
  .game-home-hero h1{font-size:1.42rem;line-height:1.18}
  .game-stage-featured{grid-template-columns:1fr}
  .game-character-roster{grid-template-columns:1fr 1fr}
  .game-command-grid{grid-template-columns:1fr 1fr}
  .game-character-chip img{width:36px;height:36px;flex-basis:36px}
  .game-ticker-track{animation-duration:84s}
}


/* 2026-07-15 readability/date-picker/modal polish */
.theme-game .contest-hero,
.theme-game .page-head{
  position:relative;
  overflow:hidden;
  padding:30px 32px;
  border:1px solid rgba(101,246,255,.18);
  border-radius:26px;
  background-color:rgba(7,12,28,.88);
  box-shadow:0 22px 54px rgba(0,0,0,.28);
}
.theme-game .contest-hero::before,
.theme-game .page-head::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(6,10,24,.82),rgba(9,16,35,.72));
  pointer-events:none;
}
.theme-game .contest-hero > *,
.theme-game .page-head > *{position:relative;z-index:1}
.theme-game .contest-hero h1,
.theme-game .page-head h1,
.theme-game .contest-hero .big-number{color:#f8fbff}
.theme-game .contest-hero p,
.theme-game .contest-hero .hint,
.theme-game .contest-hero .ranking-requirements-title,
.theme-game .page-head p{color:#d7e7ff}
.theme-game .contest-hero .eyebrow,
.theme-game .page-head .eyebrow{color:#7af7ff}
.theme-game .contest-hero .big-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 22px;
  border-radius:18px;
  background:rgba(4,9,23,.58);
  border:1px solid rgba(101,246,255,.16);
  box-shadow:inset 0 0 22px rgba(101,246,255,.04);
}
.theme-game .ranking-requirements.hero-requirements{
  background:rgba(4,9,23,.48);
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px;
}
.theme-game .ranking-requirements.hero-requirements ul li{color:#f8fbff}
.theme-game .contest-list .contest-card-title-row h2,
.theme-game .contest-list .contest-card-title-row h2 a,
.theme-game .contest-list .contest-title-link,
.theme-game .contest-list .contest-title-link.no-arrow,
.theme-game .my-contest-list .contest-card-title-row h2,
.theme-game .my-contest-list .contest-card-title-row h2 a{color:#f8fbff}
.theme-game .contest-list .contest-tagline,
.theme-game .contest-list .leader-label,
.theme-game .contest-list .leader-placeholder,
.theme-game .contest-list .contest-meta-grid span,
.theme-game .contest-list .contest-meta-grid strong,
.theme-game .my-contest-list .contest-tagline,
.theme-game .my-contest-list .contest-meta-grid span,
.theme-game .my-contest-list .contest-meta-grid strong{color:#d7e7ff}
.theme-game .contest-list .contest-title-link span,
.theme-game .my-contest-list .contest-title-link span{background:rgba(101,246,255,.10);color:#bffaff}
.theme-game .my-contest-list .leader-summary,
.theme-game .my-contest-list .leader-summary-top3 {
  background: linear-gradient(180deg, rgba(14,27,50,.98), rgba(9,18,36,.98));
  border-color: rgba(125,211,252,.32);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.theme-game .my-contest-list .leader-label,
.theme-game .my-contest-list .leader-placeholder,
.theme-game .my-contest-list .leader-person strong {
  color: #f7fbff !important;
  text-shadow: none;
}
.theme-game .my-contest-list .leader-rank-no {
  background: rgba(103,232,249,.14);
  color: #bffaff;
  border: 1px solid rgba(103,232,249,.22);
}
.theme-game .my-contest-list .my-contest-role-pill,
.theme-game .my-contest-list .my-contest-card-badges .pill {
  background: rgba(30,52,86,.96);
  color: #f7fbff !important;
  border-color: rgba(148,181,230,.32);
}
.theme-game .my-contest-list .contest-card-description,
.theme-game .my-contest-list .ranking-requirements.compact li,
.theme-game .my-contest-list .ranking-requirements.compact span,
.theme-game .my-contest-list .ranking-requirements.compact strong {
  color: #e6efff !important;
}
.game-ai-popularity{
  max-width:680px;
  margin-top:12px;
  padding:14px 16px;
  border:1px solid rgba(101,246,255,.14);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.025));
}
.game-ai-popularity-title{
  color:#7af7ff;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.game-ai-popularity-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.game-ai-popularity-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(255,255,255,.04);
  min-width:0;
}
.game-ai-popularity-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:11px;
  background:rgba(101,246,255,.10);
  color:#bffaff;
  font-weight:900;
  flex:0 0 34px;
}
.game-ai-popularity-card img{
  width:44px;
  height:44px;
  object-fit:contain;
  flex:0 0 44px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.22));
}
.game-ai-popularity-card strong,
.game-ai-popularity-card span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.game-ai-popularity-card strong{color:#f8fbff;font-size:.82rem}
.game-ai-popularity-card span{margin-top:2px;color:#8fa5cd;font-size:.72rem}
.game-ticker-return{font-size:.78rem;font-weight:900}
.game-ticker-return.up{color:#fb7185}
.game-ticker-return.down{color:#60a5fa}
.game-ticker-return.flat{color:#ddebff}
.date-field{display:flex;align-items:center;gap:8px}
.date-field input{flex:1 1 auto}
.date-field-button{
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.88);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.date-field-button:hover{transform:translateY(-1px)}
.theme-game .date-field-button{
  background:rgba(255,255,255,.08);
  border-color:rgba(101,246,255,.18);
  color:#dffcff;
}
.container.focus-restored:focus{outline:none;box-shadow:none}
@media (max-width: 760px){
  .game-ai-popularity-list{grid-template-columns:1fr}
}


/* 2026-07-15 AI trade transparency and Game Mode battle wallpaper */
.theme-game.home-page{
  background-image:
    linear-gradient(180deg,rgba(3,7,19,.82),rgba(5,8,22,.90) 48%,rgba(3,7,19,.96)),
    url('/static/game_mode_battle_background.webp');
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
}
.theme-game.home-page .container{position:relative}
.ai-trade-history-card{order:98}
.ai-trade-history-table .ai-history-identity{display:inline-flex;align-items:center;gap:9px;min-width:0}
.ai-trade-history-table .ai-history-identity strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-trade-history-table .pill.ai-buy{background:#fee2e2;color:#b91c1c}
.ai-trade-history-table .pill.ai-sell{background:#dbeafe;color:#1d4ed8}
.theme-game .ai-trade-history-table .pill.ai-buy{background:rgba(248,113,113,.14);color:#fda4af}
.theme-game .ai-trade-history-table .pill.ai-sell{background:rgba(96,165,250,.14);color:#93c5fd}
.game-recent-activity-panel{margin:18px 0 28px}
.game-recent-activity-list{display:grid;gap:9px}
.game-recent-trade{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid rgba(148,163,184,.12);background:rgba(255,255,255,.035)}
.game-recent-trade-lamp{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 14px rgba(74,222,128,.72)}
.game-recent-trade strong,.game-recent-trade span{display:block}
.game-recent-trade strong{color:#f8fbff;font-size:.9rem}
.game-recent-trade span{margin-top:4px;color:#91a7cf;font-size:.8rem}
.game-recent-trade time{color:#7af7ff;font-size:.75rem;white-space:nowrap}
@media(max-width:760px){
  .theme-game.home-page{background-attachment:scroll;background-position:center top}
  .game-recent-trade{grid-template-columns:auto minmax(0,1fr)}
  .game-recent-trade time{grid-column:2}
}


/* 2026-07-15 compact live activity and vertical popular-character ranking */
.game-ai-popularity{
  width:100%;
  max-width:680px;
  padding:16px;
  border-radius:20px;
}
.game-ai-popularity-list{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin-top:10px;
}
.game-ai-popularity-card{
  display:grid;
  grid-template-columns:54px 58px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:8px 14px;
  border-radius:16px;
}
.game-ai-popularity-card:nth-child(1){border-color:rgba(250,204,21,.25);background:linear-gradient(90deg,rgba(250,204,21,.08),rgba(255,255,255,.035))}
.game-ai-popularity-card:nth-child(2){border-color:rgba(203,213,225,.22);background:linear-gradient(90deg,rgba(203,213,225,.065),rgba(255,255,255,.035))}
.game-ai-popularity-card:nth-child(3){border-color:rgba(251,146,60,.22);background:linear-gradient(90deg,rgba(251,146,60,.065),rgba(255,255,255,.035))}
.game-ai-popularity-rank{
  width:54px;
  height:38px;
  border-radius:12px;
  font-size:.8rem;
  white-space:nowrap;
}
.game-ai-popularity-card img{
  width:58px;
  height:58px;
  flex-basis:58px;
}
.game-ai-popularity-copy{min-width:0}
.game-ai-popularity-copy strong{font-size:.94rem}
.game-ai-popularity-copy span{margin-top:4px;font-size:.78rem;color:#a8bce0}
.game-recent-activity-list{gap:8px}
.game-recent-trade{min-height:68px;padding:11px 14px}
.game-recent-trade time{font-weight:800}
@media(max-width:620px){
  .game-ai-popularity-card{grid-template-columns:48px 52px minmax(0,1fr);padding-inline:10px}
  .game-ai-popularity-rank{width:48px}
  .game-ai-popularity-card img{width:52px;height:52px}
}

/* 2026-07-15 Game Mode final layout, interaction, and contrast polish */
.theme-game.home-page .container{
  display:flex;
  flex-direction:column;
}
.game-live-board-section{
  order:-20;
  margin:18px 0 20px;
}
.game-home-hero{
  order:-10;
}
.game-home-hero-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.game-ai-popularity{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:390px;
  max-width:none;
  margin-top:16px;
  padding:18px 20px;
}
.game-ai-popularity-list{
  flex:1 1 auto;
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.game-ai-popularity-card{
  grid-template-columns:44px 112px minmax(0,1fr);
  min-height:108px;
  gap:16px;
  padding:12px 18px;
}
.game-ai-popularity-rank{
  display:block;
  width:auto;
  height:auto;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#9fdfff;
  font-size:.9rem;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
}
.game-ai-popularity-card:nth-child(1) .game-ai-popularity-rank{color:#fde68a}
.game-ai-popularity-card:nth-child(2) .game-ai-popularity-rank{color:#dbeafe}
.game-ai-popularity-card:nth-child(3) .game-ai-popularity-rank{color:#fdba74}
.game-ai-popularity-card img{
  width:108px;
  height:108px;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.3));
}
.game-ai-popularity-copy strong{
  color:#fff;
  font-size:1.08rem;
}
.game-ai-popularity-copy span{
  margin-top:7px;
  color:#b8cae9;
  font-size:.86rem;
  line-height:1.45;
}
.game-stage-feature-card,
.game-character-chip{
  position:relative;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
  will-change:transform;
}
.game-stage-feature-card:hover,
.game-stage-feature-card:focus-within{
  z-index:2;
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(101,246,255,.48);
  background:linear-gradient(180deg,rgba(101,246,255,.09),rgba(139,92,246,.055));
  box-shadow:0 16px 32px rgba(0,0,0,.3),0 0 24px rgba(101,246,255,.11);
}
.game-stage-feature-card .game-stage-portrait img,
.game-character-chip img{
  transition:transform .18s ease,filter .18s ease;
}
.game-stage-feature-card:hover .game-stage-portrait img,
.game-stage-feature-card:focus-within .game-stage-portrait img{
  transform:translateY(-4px) scale(1.07);
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.34)) drop-shadow(0 0 10px rgba(101,246,255,.2));
}
.game-character-chip:hover,
.game-character-chip:focus-within{
  z-index:2;
  transform:translateY(-3px) scale(1.025);
  border-color:rgba(101,246,255,.42);
  background:rgba(101,246,255,.085);
  box-shadow:0 10px 24px rgba(0,0,0,.26),0 0 18px rgba(101,246,255,.08);
}
.game-character-chip:hover img,
.game-character-chip:focus-within img{
  transform:scale(1.12);
  filter:drop-shadow(0 9px 16px rgba(0,0,0,.3)) drop-shadow(0 0 8px rgba(101,246,255,.18));
}
.theme-game .game-home-actions .button,
.theme-game .game-home-actions .button:visited{
  opacity:1;
  text-shadow:none;
}
.theme-game .game-primary-button,
.theme-game .game-primary-button:visited{
  color:#03111c!important;
  background:linear-gradient(135deg,#5ee7f3,#2d7ff9)!important;
  border-color:rgba(125,249,255,.65)!important;
  box-shadow:0 12px 28px rgba(37,99,235,.26)!important;
}
.theme-game .game-secondary-button,
.theme-game .game-secondary-button:visited{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(67,56,202,.88),rgba(88,28,135,.9))!important;
  border-color:rgba(196,181,253,.5)!important;
  box-shadow:0 12px 26px rgba(49,46,129,.28)!important;
}
.theme-game .game-secondary-button:hover,
.theme-game .game-secondary-button:focus-visible{
  color:#fff!important;
  background:linear-gradient(135deg,#4f46e5,#7e22ce)!important;
  border-color:#ddd6fe!important;
}
.theme-game .game-section-head p,
.theme-game .game-fair-play-note,
.theme-game .game-stage-meta span,
.theme-game .game-champion-row small,
.theme-game .game-recent-trade span{
  color:#aebfe0!important;
}
.theme-game .site-footer,
.theme-game .site-footer a,
.theme-game .site-footer .footer-link-button{
  color:#a9c1ec!important;
}
.theme-game .site-footer a:hover,
.theme-game .site-footer a:focus-visible,
.theme-game .site-footer .footer-link-button:hover,
.theme-game .site-footer .footer-link-button:focus-visible{
  color:#fff!important;
}
.theme-game .site-footer .footer-link-button,
.theme-game .site-footer .footer-link-button:hover,
.theme-game .site-footer .footer-link-button:focus-visible{
  appearance:none!important;
  display:inline!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  font:inherit!important;
  line-height:inherit!important;
}
@media(max-width:760px){
  .game-ai-popularity{min-height:0;padding:16px}
  .game-ai-popularity-list{grid-template-rows:none}
  .game-ai-popularity-card{grid-template-columns:38px 78px minmax(0,1fr);min-height:88px;padding:10px 12px;gap:11px}
  .game-ai-popularity-card img{width:78px;height:78px}
  .game-ai-popularity-copy strong{font-size:.98rem}
  .game-ai-popularity-copy span{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
  .game-stage-feature-card,
  .game-character-chip,
  .game-stage-feature-card .game-stage-portrait img,
  .game-character-chip img{transition:none!important}
}


/* 2026-07-15 Game Mode equal character panels, contrast, and market data polish */
.theme-game .game-home-actions .button,
.theme-game .game-home-actions .button:link,
.theme-game .game-home-actions .button:visited,
.theme-game .game-home-actions .button:hover,
.theme-game .game-home-actions .button:focus-visible{
  color:#ffffff!important;
  font-weight:900!important;
  -webkit-text-fill-color:#ffffff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.32)!important;
}
.theme-game .game-primary-button,
.theme-game .game-primary-button:link,
.theme-game .game-primary-button:visited{
  background:linear-gradient(135deg,#0284c7,#2563eb)!important;
  border-color:#67e8f9!important;
}
.theme-game .game-secondary-button,
.theme-game .game-secondary-button:link,
.theme-game .game-secondary-button:visited{
  background:linear-gradient(135deg,#4f46e5,#7e22ce)!important;
  border-color:#c4b5fd!important;
}
.theme-game .navlinks .nav-create-cta,
.theme-game .navlinks .nav-create-cta:visited,
.theme-game .navlinks .nav-cta,
.theme-game .navlinks .nav-cta:visited{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:linear-gradient(135deg,#2563eb,#6d28d9)!important;
  border:1px solid rgba(196,181,253,.55)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.28)!important;
}
.theme-game main .button.secondary,
.theme-game main a.button.secondary:visited{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:linear-gradient(135deg,rgba(37,99,235,.82),rgba(109,40,217,.84))!important;
  border-color:rgba(165,180,252,.55)!important;
}
.theme-game .game-home-hero-copy>p,
.theme-game .game-squad-intro,
.theme-game .game-character-feature,
.theme-game .game-stage-meta small,
.theme-game .game-character-chip span,
.theme-game .game-market-empty{
  color:#c6d7f3!important;
}
.game-home-hero{
  min-height:390px;
  align-items:center;
}
.game-character-duo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:0 0 30px;
  align-items:stretch;
}
.game-character-equal-panel{
  width:100%;
  min-width:0;
  min-height:590px;
  height:100%;
  margin:0;
  padding:20px;
  border:1px solid rgba(101,246,255,.24);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(10,18,39,.96),rgba(6,12,27,.98));
  box-shadow:0 22px 48px rgba(0,0,0,.28),inset 0 0 26px rgba(101,246,255,.04);
}
.game-ai-popularity.game-character-equal-panel{
  display:flex;
  max-width:none;
  min-height:590px;
  padding:20px;
}
.game-ai-popularity.game-character-equal-panel .game-ai-popularity-list{
  flex:1 1 auto;
  margin-top:4px;
}
.game-ai-popularity.game-character-equal-panel .game-ai-popularity-card{
  grid-template-columns:54px 130px minmax(0,1fr);
  min-height:154px;
  padding:14px 20px;
}
.game-ai-popularity.game-character-equal-panel .game-ai-popularity-card img{
  width:126px;
  height:126px;
}
.game-squad-intro{
  margin:-3px 0 14px;
  font-size:.83rem;
  line-height:1.5;
}
.game-character-equal-panel .game-stage-featured{
  gap:10px;
  margin-bottom:12px;
}
.game-character-equal-panel .game-stage-feature-card{
  grid-template-rows:136px auto;
  padding:11px;
}
.game-character-equal-panel .game-stage-portrait{
  height:136px;
}
.game-character-equal-panel .game-stage-meta{
  min-width:0;
}
.game-character-feature{
  display:block;
  margin-top:4px;
  min-height:0!important;
  font-size:.75rem!important;
}
.game-character-badges{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
}
.game-character-badges span{
  display:inline-flex!important;
  min-height:0!important;
  margin:0!important;
  padding:4px 7px;
  border:1px solid rgba(101,246,255,.15);
  border-radius:999px;
  background:rgba(101,246,255,.065);
  color:#bffaff!important;
  font-size:.65rem!important;
  line-height:1.2!important;
}
.game-stage-meta small{
  display:block;
  margin-top:7px;
  font-size:.66rem;
  line-height:1.35;
}
.game-character-equal-panel .game-character-roster{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.game-character-equal-panel .game-character-chip{
  min-height:66px;
  padding:8px;
}
.game-character-equal-panel .game-character-chip img{
  width:42px;
  height:42px;
}
.game-character-chip div{
  min-width:0;
}
.game-character-chip div strong,
.game-character-chip div span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
}
.game-character-chip div strong{
  color:#fff;
  font-size:.72rem;
  white-space:nowrap;
}
.game-character-chip div span{
  margin-top:3px;
  font-size:.62rem;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.game-market-empty{
  margin:8px 0 0;
  padding:13px;
  border:1px dashed rgba(101,246,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  font-size:.78rem;
  line-height:1.45;
}
.theme-game .market-pulse span{
  background:rgba(17,26,50,.82);
  border:1px solid rgba(101,246,255,.10);
}
.theme-game .market-pulse b{color:#b8c9e8!important}
.theme-game .market-pulse strong{color:#f8fbff!important}
.theme-game .market-pulse em{color:#7af7ff!important;background:rgba(101,246,255,.08)!important}
@media(max-width:1100px){
  .game-character-duo{grid-template-columns:1fr}
  .game-character-equal-panel,
  .game-ai-popularity.game-character-equal-panel{min-height:0}
}
@media(max-width:760px){
  .game-ai-popularity.game-character-equal-panel .game-ai-popularity-card{
    grid-template-columns:42px 88px minmax(0,1fr);
    min-height:104px;
    padding:10px 12px;
  }
  .game-ai-popularity.game-character-equal-panel .game-ai-popularity-card img{width:86px;height:86px}
  .game-character-equal-panel .game-stage-featured{grid-template-columns:1fr}
  .game-character-equal-panel .game-character-roster{grid-template-columns:1fr 1fr}
}

/* 2026-07-16: simplified league workspace, compact information hierarchy, and Game Mode contrast */
.league-compact-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: start;
  padding: 24px 26px;
  overflow: hidden;
}
.league-hero-main { min-width: 0; }
.league-hero-status-row,
.league-hero-facts,
.league-title-row,
.league-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.league-hero-status-row {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}
.league-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
  color: var(--brand);
  font-weight: 900;
  text-transform: uppercase;
}
.league-status-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.13);
}
.league-title-row {
  justify-content: space-between;
  margin-top: 9px;
}
.league-hero-main-stacked { display: grid; gap: 12px; }
.league-hero-main-stacked > * { margin-block: 2px; }
.league-title-row-stacked { margin-top: 0; }
.league-title-row .contest-title-with-logo { min-width: 0; }
.league-title-row h1 { margin: 0; line-height: 1.12; }
.league-hero-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}
.league-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.league-game-mode-button { white-space: nowrap; }
.league-hero-facts { margin-top: 0; }
.league-hero-marketline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.league-fact {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}
.league-fact strong { color: var(--text); }
.league-hero-markets .market-scope-badge {
  min-height: 31px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}
.league-description-details { margin-top: 11px; max-width: 760px; }
.league-description-inline { max-width: 860px; }
.league-description-label { display: block; margin-bottom: 4px; font-size: .8rem; font-weight: 850; color: var(--brand); }
.league-description-inline p { margin: 0; color: var(--muted); line-height: 1.55; }
.league-description-details summary {
  cursor: pointer;
  color: var(--brand);
  font-size: .82rem;
  font-weight: 850;
}
.league-description-details p { margin: 9px 0 0; color: var(--muted); }
.league-header-countdown {
  min-width: 238px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 17px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
}
.league-countdown-inline { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 8px; width: fit-content; max-width: 100%; margin-left: auto; padding: 8px 11px; border-left-width: 3px; box-shadow: none; }
.league-header-countdown .league-countdown-value {
  margin-top: 5px;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}
.league-countdown-inline .eyebrow { font-size: .8rem; margin: 0; }
.league-countdown-inline .league-countdown-value { margin-top: 0; font-size: clamp(.95rem, 1.45vw, 1.1rem); white-space: nowrap; }
.league-countdown-inline small { display: none; }
.league-header-countdown small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.35; }
.league-hero-metrics {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.league-hero-metrics > div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}
.league-hero-metrics span { display: block; color: var(--muted); font-size: .72rem; font-weight: 750; }
.league-hero-metrics strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font-size: 1rem; }

.league-info-drawer { justify-content: flex-end; padding: 0; background: rgba(15,23,42,.58); }
.league-info-card {
  width: min(650px, 94vw);
  max-height: 100vh;
  height: 100%;
  border-radius: 24px 0 0 24px;
  padding: 22px;
  animation: leagueDrawerIn .18s ease-out;
}
@keyframes leagueDrawerIn { from { transform: translateX(28px); opacity: .72; } to { transform: translateX(0); opacity: 1; } }
.league-info-sections { display: grid; gap: 14px; margin-top: 16px; }
.league-info-sections > section {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--soft);
}
.league-info-sections h3 { margin: 0 0 10px; }
.league-info-requirements { margin: 0; }
.compact-reward-grid { gap: 8px; }
.compact-reward-grid .reward-points-item { padding: 12px; border-radius: 14px; }
.compact-reward-grid .reward-points-item span { font-size: 1.1rem; }
.compact-rules-box { max-height: 220px; margin: 0; white-space: pre-wrap; }

.league-collapsible-card { padding: 0; overflow: hidden; }
.league-collapsible-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.league-collapsible-card > summary::-webkit-details-marker { display: none; }
.league-collapsible-card > summary small { display: block; margin-top: 3px; color: var(--muted); font-weight: 650; }
.league-collapsible-card[open] > summary { border-bottom: 1px solid var(--line); }
.league-collapsible-card .notice-list { padding: 14px 18px 18px; }

.league-overview-strip { padding: 13px; }
.league-overview-strip .mobile-summary-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.league-overview-strip .meta-grid div { padding: 9px 10px; border-radius: 12px; }

.league-workspace { margin-top: 16px; }
.league-tabbar {
  position: sticky;
  top: 72px;
  z-index: 20;
  display: flex;
  gap: 6px;
  padding: 7px;
  margin-bottom: 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  scrollbar-width: thin;
}
.league-tab {
  flex: 1 0 auto;
  min-width: 116px;
  min-height: 42px;
  padding: 9px 13px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-weight: 850;
}
.league-tab span {
  display: inline-flex;
  min-width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--soft);
  color: inherit;
  font-size: .7rem;
}
.league-tab:hover,
.league-tab:focus-visible { background: var(--soft); color: var(--text); transform: none; }
.league-tab.is-active { background: var(--brand); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 28%, transparent); }
.league-tab.is-active span { background: rgba(255,255,255,.2); color: #fff; }
.league-workspace.is-tabbed > .league-panel { display: none; }
.league-workspace.is-tabbed > .league-panel.is-active { display: block; }
.league-primary-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.league-status-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; }
.trade-panel.mobile-trade-card { height: 100%; }
.league-status-panel h2 { margin: 2px 0 0; }
.league-status-nickname { margin: 4px 0 0; color: var(--muted); font-size: .84rem; font-weight: 700; }
.league-status-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.league-status-metrics .mini-metric { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; margin: 0; min-width: 0; min-height: 76px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.league-status-metrics .mini-metric span { display: block; width: 100%; font-size: .72rem; line-height: 1.25; }
.league-status-metrics .mini-metric strong { display: block; width: 100%; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.25; }
.league-progress-card { flex: 1 1 auto; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: var(--soft); }
.league-progress-head { display: flex; justify-content: space-between; gap: 10px; }
.league-progress-head span { color: var(--brand); font-size: .78rem; font-weight: 850; }
.league-progress-list { display: grid; gap: 7px; margin-top: 10px; }
.league-progress-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .8rem; }
.league-progress-list strong { color: var(--text); }
.league-allocation-card {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--soft);
}
.league-allocation-chart {
  --investment-share: 0%;
  position: relative;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: conic-gradient(var(--brand) 0 var(--investment-share), var(--brand2) var(--investment-share) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}
.league-allocation-chart::after {
  content: '';
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
}
.league-allocation-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.league-allocation-center strong { font-size: 1.1rem; color: var(--text); }
.league-allocation-center span { margin-top: 2px; color: var(--muted); font-size: .7rem; font-weight: 800; }
.league-allocation-legend { display: grid; gap: 10px; min-width: 0; }
.league-allocation-legend > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.league-allocation-legend strong { color: var(--text); }
.allocation-dot { width: 10px; height: 10px; border-radius: 50%; }
.allocation-dot.investment { background: var(--brand); }
.allocation-dot.cash { background: var(--brand2); }
.league-status-panel .pill.warn { color: #111827 !important; text-shadow: none !important; }
.league-status-quickinfo { display: grid; gap: 7px; margin-top: auto; }
.league-quickinfo-row {
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  box-shadow: none;
  text-align: left;
  font-size: .78rem;
}
.league-quickinfo-row:hover,
.league-quickinfo-row:focus-visible { border-color: var(--brand); background: var(--soft); transform: none; }
.league-quickinfo-row strong { color: var(--brand); text-align: right; }
.league-quickinfo-row em { font-style: normal; font-size: 1rem; }

.league-inline-help {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  overflow: hidden;
}
.league-inline-help summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-size: .84rem;
  font-weight: 850;
  color: var(--brand);
}
.league-inline-help summary::-webkit-details-marker { display: none; }
.league-inline-help-body { padding: 0 12px 12px; }
.league-inline-help-body .hint:last-child { margin-bottom: 0; }
.league-inline-ranking { grid-column: 1 / -1; width: 100%; min-width: 0; margin-top: 14px; }
.league-inline-ranking .league-ranking-table { width: 100%; }
.league-inline-ranking h2 { margin-top: 0; }
.league-nickname-inline-form { gap: 8px; }
.league-nickname-inline-form label { display: grid; gap: 5px; }

.league-disclosure-note {
  margin: 30px 0 8px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: .75rem;
}
.league-disclosure-note summary { padding: 12px 0 8px; cursor: pointer; color: var(--muted); font-weight: 800; }
.league-disclosure-note > p,
.league-disclosure-note .combined-simulation-notice-divider { margin: 4px 0; }
.league-disclosure-note .combined-simulation-notice-divider { padding-top: 7px; border-top: 1px dashed var(--line); }

/* Game Mode: readable surfaces take priority over decorative backgrounds. */
.theme-game .card,
.theme-game .notice-card,
.theme-game .league-info-card,
.theme-game .game-panel,
.theme-game .game-command-card,
.theme-game .game-lobby-card,
.theme-game .game-character-equal-panel,
.theme-game .game-recent-trade {
  color: #f8fafc;
  background: rgba(8,15,31,.96);
  border-color: rgba(148,181,230,.34);
}
.theme-game .league-compact-hero {
  color: #f8fafc;
  background-color: #0a1225;
  background-blend-mode: multiply;
  border-color: rgba(125,211,252,.38);
}
.theme-game .league-compact-hero h1,
.theme-game .league-compact-hero strong,
.theme-game .card h2,
.theme-game .card h3,
.theme-game .game-panel h2,
.theme-game .game-panel h3 { color: #f8fafc; }
.theme-game .hint,
.theme-game .muted-text,
.theme-game .league-hero-status-row,
.theme-game .league-description-details p,
.theme-game .league-header-countdown small,
.theme-game .league-hero-metrics span,
.theme-game .league-fact,
.theme-game .card p,
.theme-game .card small,
.theme-game .game-empty-state,
.theme-game .game-market-empty { color: #cbd8ec!important; }
.theme-game .league-fact,
.theme-game .league-header-countdown,
.theme-game .league-hero-metrics > div,
.theme-game .league-tabbar,
.theme-game .league-status-metrics .mini-metric,
.theme-game .league-progress-card,
.theme-game .league-info-sections > section,
.theme-game .league-quickinfo-row,
.theme-game .meta-grid div {
  background: rgba(13,24,46,.96);
  border-color: rgba(148,181,230,.32);
  color: #f8fafc;
}
.theme-game .league-tab { color: #c7d7ef; }
.theme-game .league-tab:hover,
.theme-game .league-tab:focus-visible { color: #fff; background: rgba(91,126,180,.24); }
.theme-game .league-tab.is-active { color: #03111c; background: #67e8f9; }
.theme-game .league-tab.is-active span { color: #03111c; background: rgba(3,17,28,.14); }
.theme-game table { color: #f8fafc; }
.theme-game table th { color: #dbeafe; background: rgba(30,52,86,.96); border-color: rgba(148,181,230,.28); }
.theme-game table td { color: #eef4ff; border-color: rgba(148,181,230,.22); }
.theme-game table tr:nth-child(even) td { background: rgba(25,41,68,.42); }
.theme-game table tr.highlight-row td { background: rgba(14,116,144,.28); }
.theme-game input,
.theme-game select,
.theme-game textarea {
  color: #f8fafc;
  background: #111f38;
  border-color: #526b91;
}
.theme-game input::placeholder,
.theme-game textarea::placeholder { color: #a9bad3; opacity: 1; }
.theme-game input:focus,
.theme-game select:focus,
.theme-game textarea:focus { border-color: #67e8f9; box-shadow: 0 0 0 3px rgba(103,232,249,.18); }
.theme-game .quote-preview,
.theme-game .chart-box,
.theme-game .symbol-search-results,
.theme-game .rules-box { color: #eef4ff; background: #0e1b31; border-color: #425d86; }
.theme-game .positive,
.theme-game .return-up { color: #86efac!important; }
.theme-game .negative,
.theme-game .return-down { color: #fca5a5!important; }
.theme-game .return-flat { color: #dbeafe!important; }
.theme-game a:not(.button):focus-visible,
.theme-game button:focus-visible,
.theme-game summary:focus-visible { outline: 3px solid #67e8f9; outline-offset: 3px; }
.theme-game .game-home-hero,
.theme-game .game-live-board-section,
.theme-game .game-character-duo,
.theme-game .game-home-dashboard,
.theme-game .game-recent-activity-panel { isolation: isolate; }
.theme-game .game-home-hero-copy > p,
.theme-game .game-squad-intro,
.theme-game .game-character-feature,
.theme-game .game-stage-meta small,
.theme-game .game-character-chip span,
.theme-game .game-recent-trade span { color: #d4e0f3!important; }
.theme-game .channel-hub-card { background: linear-gradient(145deg, rgba(10,18,37,.96), rgba(14,25,50,.93)); border-color: rgba(125,211,252,.28); }
.theme-game .channel-hub-card:before { background: radial-gradient(circle at 92% 4%, rgba(129,140,248,.20), transparent 38%), linear-gradient(120deg, rgba(255,255,255,0), rgba(30,64,175,.10)); }
.theme-game .channel-emblem { color: #c7d2fe; border-color: rgba(165,180,252,.26); background: linear-gradient(145deg, rgba(22,34,59,.98), rgba(24,33,56,.94)); box-shadow: 0 12px 30px rgba(2,6,23,.30), inset 0 1px 0 rgba(255,255,255,.06); }
.theme-game .channel-hub-body h2,
.theme-game .channel-hub-description,
.theme-game .channel-scope-badge { color: #f8fbff !important; }
.theme-game .channel-hub-description { text-shadow: 0 1px 1px rgba(2,6,23,.45); }
.theme-game .league-countdown-inline,
.theme-game .league-inline-help,
.theme-game .league-status-metrics .mini-metric,
.theme-game .league-progress-card,
.theme-game .league-allocation-card { background: rgba(16,27,48,.92); border-color: rgba(125,211,252,.24); }
.theme-game .league-allocation-chart::after { background: #0e1b31; border-color: rgba(125,211,252,.24); }
.theme-game .league-allocation-center strong,
.theme-game .league-allocation-legend strong { color: #f8fafc; }
.theme-game .league-status-nickname,
.theme-game .league-description-inline p { color: #d7e7ff; }
.theme-game .page-head h1,
.theme-game .page-head p,
.theme-game .page-head .quota-note,
.theme-game .league-status-panel .eyebrow,
.theme-game .league-status-panel h2,
.theme-game .league-status-panel .pill,
.theme-game .league-inline-ranking h2 { color: #f7fbff !important; text-shadow: 0 1px 1px rgba(2,6,23,.45); }
.theme-game .my-contest-role-pill,
.theme-game .leader-label,
.theme-game .meta-grid span { color: #d8e8ff !important; }

@media (max-width: 980px) {
  .league-compact-hero { grid-template-columns: 1fr; }
  .league-header-countdown { width: 100%; min-width: 0; }
  .league-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .league-overview-strip .mobile-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .league-primary-workspace { grid-template-columns: 1fr; }
  .league-status-panel { min-height: 0; }
}
@media (max-width: 720px) {
  .league-compact-hero { padding: 18px 16px; border-radius: 18px; }
  .league-title-row { align-items: flex-start; }
  .league-title-row,
  .league-hero-actions { width: 100%; }
  .league-hero-actions { justify-content: flex-start; }
  .league-hero-actions .button { flex: 1 1 145px; }
  .league-hero-facts { gap: 7px; }
  .league-hero-markets { width: 100%; }
  .league-hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .league-overview-strip { display: none; }
  .league-tabbar { top: 58px; margin-inline: -4px; border-radius: 13px; }
  .league-tab { min-width: 108px; }
  .league-status-metrics { grid-template-columns: 1fr 1fr; }
  .league-info-card { width: 100%; border-radius: 20px 20px 0 0; height: min(92vh, 900px); max-height: 92vh; align-self: flex-end; }
  .league-info-drawer { align-items: flex-end; }
}
@media (max-width: 470px) {
  .league-hero-metrics,
  .league-status-metrics { grid-template-columns: 1fr 1fr; }
  .league-fact { max-width: 100%; }
  .league-header-countdown .league-countdown-value { font-size: .94rem; }
  .league-info-card { padding: 17px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .league-info-card { animation: none; }
}
.league-secondary-card > table { width: calc(100% - 36px); margin: 0 18px 18px; }
.league-secondary-card > .hint { margin-inline: 18px; }
.league-secondary-card > .ai-character-grid { margin: 12px 18px 18px; }

@media (max-width: 720px) {
  .league-hero-action-row { align-items: stretch; flex-direction: column; }
  .league-countdown-inline { width: 100%; margin-left: 0; justify-content: flex-start; gap: 6px 8px; }
  .league-allocation-card { grid-template-columns: 108px minmax(0, 1fr); gap: 12px; }
  .league-allocation-chart { width: 104px; height: 104px; }
  .league-hero-marketline { align-items: stretch; }
  .league-hero-marketline .league-fact { width: 100%; justify-content: flex-start; }
}

.theme-game .league-allocation-card { background: rgba(16,27,48,.92); border-color: rgba(125,211,252,.24); }
.theme-game .league-allocation-chart::after { background: #0e1b31; border-color: rgba(125,211,252,.24); }
.theme-game .league-allocation-center strong, .theme-game .league-allocation-legend strong { color: #f8fafc; }

/* Keep the #9999 eligibility badge readable in every theme. */
.theme-game .league-status-panel .pill.warn,
.league-status-panel .pill.warn {
  color: #111827 !important;
  text-shadow: none !important;
}

/* 2026-07-16 community-first homepage, selected host pilot, and public AI showcase. */
.home-purpose-note,
.home-ai-purpose,
.home-pilot-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
}
.home-purpose-note { display: block; }
.home-purpose-note h2,
.home-audience-section h2,
.home-ai-purpose h2,
.home-pilot-notice h2 { margin: 4px 0 8px; }
.home-purpose-note p,
.home-ai-purpose p,
.home-pilot-notice p { margin: 0; max-width: 900px; color: var(--muted); line-height: 1.65; }
.home-audience-section { margin-top: 26px; }
.home-audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.home-audience-grid article { min-height: 190px; }
.home-audience-grid article > span { display: inline-flex; font-size: 1.8rem; margin-bottom: 8px; }
.home-audience-grid h3 { margin: 0 0 8px; }
.home-audience-grid p { margin: 0; color: var(--muted); line-height: 1.55; }
.home-ai-purpose .button,
.home-pilot-notice .button { flex: 0 0 auto; }
.home-pilot-notice .home-pilot-contact-button {
  align-self: flex-end;
  margin-bottom: .15rem;
}
.theme-game .home-purpose-note,
.theme-game .home-audience-grid .card,
.theme-game .home-ai-purpose,
.theme-game .home-pilot-notice {
  color: var(--text-primary);
  background: rgba(8,15,31,.96);
  border-color: rgba(125,211,252,.30);
}
.theme-game .home-purpose-note p,
.theme-game .home-audience-grid p,
.theme-game .home-ai-purpose p,
.theme-game .home-pilot-notice p { color: #d4e0f3; }

/* 2026-07-16: public AI showcase demo and race presentation. */
.showcase-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
  overflow: hidden;
}
.showcase-hero h1 { margin: 5px 0 10px; }
.showcase-hero p { color: var(--muted); line-height: 1.65; }
.showcase-cycle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.showcase-cycle-meta > span,
.showcase-hero-stats article {
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.22);
  background: #fbfdff;
}
.showcase-cycle-meta > span {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-size: .92rem;
  color: var(--muted);
}
.showcase-cycle-meta strong { color: var(--text); }
.showcase-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.showcase-hero-stats article {
  padding: 14px 24px;
}
.showcase-hero-stats span {
  display: block;
  color: var(--muted);
  font-size: .8rem;
  margin-bottom: 6px;
}
.showcase-hero-stats strong {
  display: block;
  font-size: 1rem;
}
.showcase-ranking-card,
.showcase-race-card,
.showcase-activity-card { margin-top: 18px; }
.showcase-ranking-table td,
.showcase-ranking-table th { vertical-align: middle; }
.showcase-ranking-identity {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.showcase-ranking-identity > span {
  display: grid;
  gap: 4px;
}
.showcase-ranking-identity small {
  color: var(--muted);
  font-size: .82rem;
}
.showcase-ranking-sprite {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: pixelated;
}
.showcase-race-card { overflow: hidden; }
.showcase-race-head { align-items: flex-start; }
.showcase-race-desktop {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.showcase-race-lane {
  display: grid;
  grid-template-columns: 70px minmax(160px, 240px) 110px minmax(0, 1fr) 88px;
  gap: 10px;
  align-items: center;
}
.showcase-lane-rank,
.showcase-lane-return {
  display: flex;
  align-items: center;
  justify-content: center;
}
.showcase-lane-rank {
  font-weight: 800;
  font-size: 1rem;
}
.showcase-rank-value { font-weight: 900; color: var(--brand); }
.showcase-lane-identity {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.showcase-lane-identity strong {
  font-size: 1rem;
  line-height: 1.1;
}
.showcase-lane-identity small,
.showcase-lane-identity em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: .83rem;
  line-height: 1.25;
}
.showcase-return-value {
  font-size: 1rem;
  font-weight: 800;
}
.showcase-track {
  position: relative;
  height: 54px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.28);
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(148,163,184,.18);
}
.showcase-track::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed rgba(59,130,246,.18);
  transform: translateY(-50%);
}
.showcase-track-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.35)),
    repeating-linear-gradient(90deg, rgba(37,99,235,.05) 0 12px, rgba(255,255,255,0) 12px 24px),
    repeating-linear-gradient(180deg, rgba(148,163,184,.05) 0 8px, rgba(255,255,255,0) 8px 16px);
}
.showcase-finish-column {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.14);
  background:
    linear-gradient(180deg, #ffffff 0 18px, transparent 18px),
    conic-gradient(from 90deg, #0f172a 0 25%, #ffffff 0 50%, #0f172a 0 75%, #ffffff 0) 0 18px/16px 16px repeat;
  overflow: hidden;
}
.showcase-finish-column span {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #0f172a;
}
.showcase-racer {
  position: absolute;
  top: 50%;
  left: var(--race-position, 12%);
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: left .9s cubic-bezier(.2,.9,.25,1.05);
}
.showcase-racer-picture {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  animation: showcase-bob 1.15s steps(2, end) infinite;
  animation-delay: var(--runner-delay, 0s);
}
.showcase-racer-animation {
  width: 58px;
  height: 58px;
  object-fit: contain;
  image-rendering: pixelated;
}
.showcase-racer-effect {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  opacity: 0;
  z-index: 1;
}
.showcase-trade-symbol {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  font-size: .68rem;
  font-weight: 800;
  color: #0f172a;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 999px;
  padding: 1px 8px;
  min-width: 30px;
  text-align: center;
  z-index: 3;
}
.showcase-racer.gait-run .showcase-racer-picture,
.showcase-racer.gait-run-strong .showcase-racer-picture { animation-duration: .9s; }
.showcase-racer.gait-step .showcase-racer-picture,
.showcase-racer.gait-step-strong .showcase-racer-picture { animation-duration: 1.3s; }
.showcase-racer.gait-waddle .showcase-racer-picture { animation-duration: 1.55s; }
.showcase-racer.gait-run-strong .showcase-racer-picture { animation-name: showcase-bob-strong; }
.showcase-racer.gait-step-strong .showcase-racer-picture { animation-name: showcase-step-strong; }
.showcase-racer.gait-waddle .showcase-racer-picture { animation-name: showcase-waddle; }
.showcase-racer.is-buying .showcase-racer-effect {
  background: radial-gradient(circle, rgba(34,197,94,.45), rgba(34,197,94,0));
}
.showcase-racer.is-selling .showcase-racer-effect {
  background: radial-gradient(circle, rgba(239,68,68,.45), rgba(239,68,68,0));
}
.showcase-racer.is-event-active .showcase-racer-effect {
  opacity: 1;
  animation: showcase-flash 1.1s ease-out;
}
.showcase-race-mobile { display: none; }
.showcase-race-mobile article {
  display: grid;
  grid-template-columns: 52px 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.showcase-race-mobile article:last-child { border-bottom: 0; }
.showcase-mobile-identity {
  display: grid;
  gap: 4px;
}
.showcase-mobile-identity strong { line-height: 1.1; }
.showcase-mobile-identity small,
.showcase-mobile-identity em {
  color: var(--muted);
  font-size: .8rem;
  font-style: normal;
  line-height: 1.2;
}
.showcase-mobile-sprite,
.showcase-mobile-sprite .showcase-racer-animation {
  width: 56px;
  height: 56px;
}
.showcase-mobile-return { font-weight: 800; }
.showcase-activity-list {
  display: grid;
  gap: 10px;
}
.showcase-activity-list article {
  display: grid;
  grid-template-columns: auto minmax(120px, .8fr) minmax(80px, .5fr) minmax(140px, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.2);
  background: #fbfdff;
}
.showcase-activity-list time { color: var(--muted); font-size: .75rem; text-align: right; }
.showcase-empty-state { text-align: center; }
.theme-game .showcase-hero,
.theme-game .showcase-race-card,
.theme-game .showcase-ranking-card,
.theme-game .showcase-activity-card,
.theme-game .showcase-empty-state {
  color: #f8fbff;
  background: rgba(8,15,31,.96);
  border-color: rgba(125,211,252,.30);
}
.theme-game .showcase-track {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  border-color: rgba(148,163,184,.55);
}
.theme-game .showcase-cycle-meta > span,
.theme-game .showcase-hero-stats article,
.theme-game .showcase-activity-list article { background: rgba(16,27,48,.92); border-color: rgba(125,211,252,.24); }
.theme-game .showcase-hero p,
.theme-game .showcase-activity-list time { color: #d4e0f3; }
@keyframes showcase-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes showcase-bob-strong {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes showcase-step-strong {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-2px) translateX(1px); }
}
@keyframes showcase-waddle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-2px); }
}
@keyframes showcase-flash {
  0% { transform: scale(.4); opacity: .75; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes showcaseRunnerBob {
  from { transform: translateY(1px) rotate(-2deg) scaleY(.98); }
  to { transform: translateY(-5px) rotate(3deg) scaleY(1.02); }
}
@media (max-width: 1100px) {
  .showcase-race-lane {
    grid-template-columns: 62px minmax(150px, 220px) 96px minmax(0, 1fr) 80px;
  }
}
@media (max-width: 980px) {
  .home-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-hero { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .showcase-hero-stats { grid-template-columns: 1fr; }
  .showcase-race-desktop { display: none; }
  .showcase-race-mobile { display: grid; gap: 8px; margin-top: 14px; }
}
@media (max-width: 760px) {
  .home-purpose-note,
  .home-ai-purpose,
  .home-pilot-notice { align-items: stretch; flex-direction: column; }
  .home-pilot-notice .home-pilot-contact-button { align-self: stretch; margin-bottom: 0; text-align: center; }
  .home-audience-grid { grid-template-columns: 1fr; }
  .home-audience-grid article { min-height: 0; }
  .showcase-activity-list article { grid-template-columns: auto 1fr auto; }
  .showcase-activity-list time { grid-column: 2 / -1; text-align: left; }
}
@media (max-width: 640px) {
  .showcase-cycle-meta { display: grid; grid-template-columns: 1fr; }
  .showcase-race-mobile article { grid-template-columns: 44px 52px minmax(0, 1fr); }
  .showcase-mobile-return { grid-column: 2 / span 2; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-racer-picture,
  .showcase-racer-effect,
  .showcase-race-mobile .showcase-racer-animation,
  .landing-showcase-roster img { animation: none !important; }
  .showcase-racer { transition: none !important; }
}

.landing-showcase-card { display: flex; flex-direction: column; gap: 12px; }
.landing-showcase-card h3 { margin: 0; }
.landing-showcase-card > p { margin: 0; color: var(--muted); line-height: 1.5; }
.landing-showcase-roster { display: flex; align-items: flex-end; justify-content: center; min-height: 122px; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(34,197,94,.08)); overflow: hidden; }
.landing-showcase-roster img { width: 68px; height: 86px; margin-inline: -7px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(15,23,42,.18)); animation: showcaseRunnerBob .72s steps(2,end) infinite alternate; }
.landing-showcase-roster img:nth-child(2n) { animation-delay: .18s; }
.landing-showcase-roster img:nth-child(3n) { animation-delay: .36s; }
.game-lobby-grid-showcase { grid-template-columns: minmax(280px, 520px); }
.theme-game .landing-showcase-card > p { color: #d4e0f3; }
@media (max-width: 600px) { .landing-showcase-roster img { width: 54px; height: 70px; } }

/* 2026-07-16: clearer contest creation presets and simpler management layout. */
.contest-preset-panel {
  display: grid;
  gap: 14px;
}
.contest-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.contest-preset-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.28);
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.contest-preset-card strong { font-size: 1rem; }
.contest-preset-card p,
.contest-preset-card ul {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}
.contest-preset-card ul {
  padding-left: 1rem;
}
.contest-preset-card button {
  justify-self: start;
}
.contest-basic-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.contest-basic-pill-row .pill { font-weight: 700; }
.optional-message-details {
  margin-top: 16px;
  border: 1px dashed rgba(148,163,184,.45);
  border-radius: 22px;
  background: #fbfdff;
}
.optional-message-details summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 18px;
  font-weight: 800;
}
.optional-message-details summary::-webkit-details-marker { display: none; }
.optional-message-details .form-grid {
  padding: 0 18px 18px;
}
.manage-overview-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.manage-overview-tile {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.26);
  background: #fbfdff;
}
.manage-overview-tile span {
  display: block;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.manage-overview-tile strong {
  display: block;
  font-size: 1rem;
}
.manage-overview-tile small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.manage-accordion {
  border-radius: 24px;
  overflow: hidden;
  padding: 0 !important;
}
.manage-accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
}
.manage-accordion summary::-webkit-details-marker { display: none; }
.manage-accordion summary strong { font-size: 1rem; }
.manage-accordion summary em {
  font-style: normal;
  color: var(--muted);
  font-size: .9rem;
}
.manage-accordion .manage-accordion-body {
  padding: 0 22px 22px;
}
.manage-settings-card .contest-manage-form {
  display: grid;
  gap: 18px;
}
.manage-form-section {
  margin: 0;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 22px;
  padding: 18px;
  background: #fbfdff;
}
.manage-form-section h3 {
  margin-bottom: .35rem;
}
.manage-form-section .hint { margin-top: 0; }
.manage-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.manage-mini-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.manage-mini-card {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.22);
  background: #fbfdff;
}
.manage-mini-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}
.manage-mini-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
@media (max-width: 760px) {
  .contest-preset-grid,
  .manage-overview-strip,
  .manage-mini-card-grid {
    grid-template-columns: 1fr;
  }
  .manage-accordion summary,
  .manage-accordion .manage-accordion-body,
  .optional-message-details summary,
  .optional-message-details .form-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* 2026-07-17 Game Mode homepage AI illustrations: original character PNG artwork. */
.home-ai-illustration{
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.9), rgba(240,244,255,.96) 58%, rgba(219,234,254,.96));
  border: 1px solid rgba(191,219,254,.72);
  box-shadow: 0 12px 24px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.75);
  object-fit: contain;
  object-position: center;
}
.game-ai-popularity-card .home-ai-illustration{
  width: 72px;
  height: 72px;
  padding: 3px;
  border-radius: 18px;
  object-fit: contain;
  object-position: center;
}
.game-stage-portrait{
  height: 156px;
  padding: 10px;
  background: radial-gradient(circle at 50% 0%, rgba(191,219,254,.36), rgba(255,255,255,.02) 70%), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.game-stage-portrait .home-ai-illustration{
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: contain;
  object-position: center;
}
.game-character-chip{
  gap: 10px;
  align-items: center;
}
.game-character-chip .home-ai-illustration{
  width: 54px;
  height: 54px;
  padding: 2px;
  flex: 0 0 54px;
  border-radius: 16px;
  object-fit: contain;
  object-position: center;
}
.landing-showcase-roster{
  min-height: 132px;
  gap: 6px;
  padding: 14px 12px;
  align-items: center;
}
.landing-showcase-roster .home-ai-illustration{
  width: 78px;
  height: 78px;
  margin-inline: 0;
  border-radius: 16px;
  object-fit: contain;
  object-position: center;
  animation: showcaseRunnerBob .72s steps(2,end) infinite alternate;
}
.landing-showcase-roster .home-ai-illustration:nth-child(2n) { animation-delay: .16s; }
.landing-showcase-roster .home-ai-illustration:nth-child(3n) { animation-delay: .32s; }
.theme-game .home-ai-illustration{
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.96), rgba(230,238,255,.98) 58%, rgba(219,234,254,.98));
  border-color: rgba(147,197,253,.72);
  box-shadow: 0 16px 28px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.8);
}
@media (max-width: 900px){
  .game-stage-portrait{height:138px;padding:8px;}
  .game-ai-popularity-card .home-ai-illustration{width:64px;height:64px;}
}
@media (max-width: 600px){
  .game-stage-portrait{height:124px;}
  .game-character-chip .home-ai-illustration{width:46px;height:46px;flex-basis:46px;}
  .landing-showcase-roster{min-height:116px;}
  .landing-showcase-roster .home-ai-illustration{width:60px;height:60px;border-radius:14px;}
}

/* 2026-07-16 detailed classic-RPG race sprite presentation. */
.showcase-race-lane { min-height: 112px; }
.showcase-track { height: 100px; border-radius: 26px; }
.showcase-racer { width: 104px; height: 104px; bottom: -4px; }
.showcase-racer-sprite { width: 104px; height: 104px; filter: saturate(1.05) contrast(1.04) drop-shadow(0 9px 9px rgba(15,23,42,.24)); }
.showcase-ranking-sprite { width: 48px; height: 48px; flex-basis: 48px; }
@media (max-width: 760px) {
  .showcase-race-mobile article { grid-template-columns: 50px 62px minmax(0,1fr) auto; }
  .showcase-race-mobile .showcase-racer-sprite { width: 62px; height: 62px; }
}

/* 2026-07-16: use browser-decoded APNG race animations instead of CSS sprite offsets.
   This removes frame-coordinate bleed on browsers that interpolate background-position. */
.showcase-racer-picture {
  display: block;
  width: 104px;
  height: 104px;
  overflow: hidden;
  flex: 0 0 104px;
  line-height: 0;
  transform-origin: 50% 88%;
  filter: saturate(1.05) contrast(1.04) drop-shadow(0 9px 9px rgba(15,23,42,.24));
}
.showcase-racer-animation {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.showcase-ranking-sprite {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: saturate(1.04) contrast(1.03) drop-shadow(0 5px 6px rgba(15,23,42,.16));
}
.showcase-race-mobile .showcase-racer-picture {
  width: 62px;
  height: 62px;
  flex-basis: 62px;
}
@media (max-width: 760px) {
  .showcase-race-mobile .showcase-racer-picture {
    width: 72px;
    height: 72px;
  }
}


/* 2026-07-16 APNG v3 final motion correction.
   The old .showcase-racer img rule added translateY/scale animation on top of
   APNG frames, causing a visible jump and apparent size change. */
.showcase-racer .showcase-racer-animation {
  animation: none !important;
  animation-delay: 0s !important;
  transform: none !important;
  filter: none !important;
}
.showcase-race-lane { min-height: 132px; }
.showcase-track { height: 118px; border-radius: 28px; }
.showcase-racer { width: 124px; height: 124px; bottom: -3px; }
.showcase-racer-picture {
  width: 124px;
  height: 124px;
  flex: 0 0 124px;
  transform: none;
  filter: saturate(1.06) contrast(1.04) drop-shadow(0 10px 10px rgba(15,23,42,.24));
}
.showcase-racer-animation { object-position: center bottom; }
.showcase-checkpoint { display: none !important; }
@media (max-width: 760px) {
  .showcase-race-mobile .showcase-racer-picture {
    width: 78px;
    height: 78px;
    flex-basis: 78px;
  }
}


/* 2026-07-16 standalone-frame v4 race renderer.
   Explicit dimensions override the legacy 46px .showcase-racer img rule. */
.showcase-race-lane { min-height: 144px; }
.showcase-track { height: 132px; border-radius: 30px; }
.showcase-racer { width: 132px; height: 132px; bottom: 1px; }
.showcase-racer .showcase-racer-picture {
  display: block;
  width: 132px;
  height: 132px;
  flex: 0 0 132px;
  overflow: visible;
  line-height: 0;
  transform: none !important;
  filter: saturate(1.06) contrast(1.04) drop-shadow(0 10px 10px rgba(15,23,42,.24));
}
.showcase-racer .showcase-racer-animation {
  display: block;
  width: 132px !important;
  height: 132px !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center bottom;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.showcase-checkpoint { display: none !important; }
@media (max-width: 760px) {
  .showcase-race-mobile .showcase-racer-picture,
  .showcase-race-mobile .showcase-racer-animation {
    width: 80px !important;
    height: 80px !important;
    flex-basis: 80px;
  }
}

/* 2026-07-16 standalone-frame v5: working frame swap, track-safe scale, race flag finish. */
.showcase-race-desktop {
  padding-right: 58px;
}
.showcase-race-lane {
  min-height: 128px;
}
.showcase-track {
  height: 116px;
  border-radius: 28px;
  overflow: hidden;
}
.showcase-racer {
  width: 110px;
  height: 110px;
  bottom: 3px;
}
.showcase-racer .showcase-racer-picture {
  width: 110px;
  height: 110px;
  flex: 0 0 110px;
  overflow: hidden;
  filter: saturate(1.06) contrast(1.04) drop-shadow(0 8px 9px rgba(15,23,42,.22));
}
.showcase-racer .showcase-racer-animation {
  width: 110px !important;
  height: 110px !important;
  object-fit: contain;
  object-position: center bottom;
}
.showcase-finish-line {
  top: 12px;
  right: 8px;
  bottom: 10px;
  width: 38px;
  border: 0;
  background: none;
  box-shadow: none;
  pointer-events: none;
}
.showcase-finish-line::after {
  content: '';
  position: absolute;
  top: 30px;
  right: 3px;
  bottom: 0;
  width: 14px;
  border: 2px solid rgba(15,23,42,.72);
  border-radius: 3px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #0f172a 25%, transparent 25%),
    linear-gradient(-45deg, #0f172a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0f172a 75%),
    linear-gradient(-45deg, transparent 75%, #0f172a 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  box-shadow: 0 4px 12px rgba(15,23,42,.16);
}
.showcase-finish-line::before {
  content: '';
  position: absolute;
  top: 28px;
  right: 13px;
  width: 42px;
  height: 28px;
  border: 2px solid rgba(15,23,42,.72);
  border-right: 0;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #0f172a 25%, transparent 25%),
    linear-gradient(-45deg, #0f172a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0f172a 75%),
    linear-gradient(-45deg, transparent 75%, #0f172a 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  clip-path: polygon(0 0, 100% 9%, 84% 52%, 100% 100%, 0 91%);
  filter: drop-shadow(0 5px 6px rgba(15,23,42,.18));
}
.showcase-finish-line span {
  top: 0;
  left: auto;
  right: -1px;
  transform: none;
  padding: 3px 7px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: .58rem;
  letter-spacing: .12em;
  box-shadow: 0 4px 10px rgba(15,23,42,.18);
}
@media (max-width: 760px) {
  .showcase-race-mobile .showcase-racer-picture,
  .showcase-race-mobile .showcase-racer-animation {
    width: 76px !important;
    height: 76px !important;
    flex-basis: 76px;
  }
}


/* --- Race renderer v6: per-character fit, gait polish, and elevated finish flag --- */
.showcase-racer {
  --runner-box: 110px;
  --runner-lift: 0px;
  width: var(--runner-box);
  height: var(--runner-box);
  bottom: calc(3px + var(--runner-lift));
}
.showcase-racer .showcase-racer-picture {
  width: var(--runner-box);
  height: var(--runner-box);
  flex: 0 0 var(--runner-box);
  will-change: transform;
}
.showcase-racer .showcase-racer-animation {
  width: var(--runner-box) !important;
  height: var(--runner-box) !important;
}
.character-retail_ant { --runner-box: 110px; --runner-lift: 0px; }
.character-aggressive_tiger { --runner-box: 106px; --runner-lift: 2px; }
.character-contrarian_fox { --runner-box: 102px; --runner-lift: 2px; }
.character-value_owl { --runner-box: 88px; --runner-lift: 10px; }
.character-growth_hawk { --runner-box: 88px; --runner-lift: 10px; }
.character-momentum_cheetah { --runner-box: 94px; --runner-lift: 10px; }
.character-wealth_whale { --runner-box: 92px; --runner-lift: 10px; }
.character-dividend_turtle { --runner-box: 92px; --runner-lift: 6px; }
.character-conservative_armadillo { --runner-box: 92px; --runner-lift: 6px; }
.character-future_robot { --runner-box: 98px; --runner-lift: 2px; }
.character-leverage_moth { --runner-box: 100px; --runner-lift: 3px; }
.character-random { --runner-box: 100px; --runner-lift: 4px; }
.showcase-racer.gait-run .showcase-racer-picture { animation: showcaseRaceStride .74s steps(1) infinite; animation-delay: var(--runner-delay, 0s); }
.showcase-racer.gait-run-strong .showcase-racer-picture { animation: showcaseRaceRunStrong .68s steps(1) infinite; animation-delay: var(--runner-delay, 0s); }
.showcase-racer.gait-step .showcase-racer-picture { animation: showcaseRaceStep .82s steps(1) infinite; animation-delay: var(--runner-delay, 0s); }
.showcase-racer.gait-step-strong .showcase-racer-picture { animation: showcaseRaceStepStrong .76s steps(1) infinite; animation-delay: var(--runner-delay, 0s); }
.showcase-racer.gait-waddle .showcase-racer-picture { animation: showcaseRaceWaddle .9s steps(1) infinite; animation-delay: var(--runner-delay, 0s); }
@keyframes showcaseRaceStride {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(1px, -1px, 0); }
  50% { transform: translate3d(3px, 0, 0); }
  75% { transform: translate3d(1px, -1px, 0); }
}
@keyframes showcaseRaceStep {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(1px, 0, 0); }
  50% { transform: translate3d(2px, -1px, 0); }
  75% { transform: translate3d(1px, 0, 0); }
}
@keyframes showcaseRaceWaddle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(1px, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(2px, -1px, 0) rotate(1deg); }
  75% { transform: translate3d(1px, 0, 0) rotate(-1deg); }
}
@keyframes showcaseRaceRunStrong {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(2px, -1px, 0); }
  40% { transform: translate3d(5px, -2px, 0); }
  60% { transform: translate3d(3px, 0, 0); }
  80% { transform: translate3d(1px, -1px, 0); }
}
@keyframes showcaseRaceStepStrong {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(1px, 0, 0) rotate(-0.8deg); }
  50% { transform: translate3d(3px, -1px, 0) rotate(0.8deg); }
  75% { transform: translate3d(2px, 0, 0) rotate(-0.5deg); }
}
.showcase-finish-line {
  top: -8px;
  right: 4px;
  bottom: 0;
  width: 44px;
}
.showcase-finish-line::before {
  top: 18px;
  right: 14px;
  width: 46px;
  height: 30px;
  clip-path: polygon(0 0, 100% 6%, 86% 52%, 100% 100%, 0 92%);
}
.showcase-finish-line::after {
  top: 44px;
  right: 8px;
  bottom: 0;
  width: 12px;
}
.showcase-finish-line span {
  top: 0;
  right: 0;
}
@media (max-width: 760px) {
  .showcase-race-mobile .showcase-racer-picture,
  .showcase-race-mobile .showcase-racer-animation {
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px;
  }
}

/* 2026-07-17 action-pose sprites remain limited to the live Showcase race. */
.showcase-racer .showcase-racer-animation,
.showcase-race-mobile .showcase-racer-animation,
.showcase-ranking-sprite{
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.showcase-racer .showcase-racer-animation{
  filter: saturate(1.04) contrast(1.03) drop-shadow(0 10px 10px rgba(15,23,42,.24));
}
.character-retail_ant { --runner-box: 94px; --runner-lift: 2px; }
.character-aggressive_tiger { --runner-box: 98px; --runner-lift: 4px; }
.character-contrarian_fox { --runner-box: 100px; --runner-lift: 5px; }
.character-value_owl { --runner-box: 96px; --runner-lift: 9px; }
.character-growth_hawk { --runner-box: 96px; --runner-lift: 8px; }
.character-momentum_cheetah { --runner-box: 98px; --runner-lift: 7px; }
.character-wealth_whale { --runner-box: 100px; --runner-lift: 5px; }
.character-dividend_turtle { --runner-box: 98px; --runner-lift: 4px; }
.character-conservative_armadillo { --runner-box: 96px; --runner-lift: 3px; }
.character-future_robot { --runner-box: 98px; --runner-lift: 3px; }
.character-leverage_moth { --runner-box: 98px; --runner-lift: 7px; }
.character-random { --runner-box: 98px; --runner-lift: 4px; }
.showcase-racer.gait-run .showcase-racer-picture,
.showcase-racer.gait-run-strong .showcase-racer-picture,
.showcase-racer.gait-step .showcase-racer-picture,
.showcase-racer.gait-step-strong .showcase-racer-picture,
.showcase-racer.gait-waddle .showcase-racer-picture {
  animation-delay: var(--runner-delay, 0s);
  transform-origin: center bottom;
}
.showcase-racer.gait-run .showcase-racer-picture,
.showcase-racer.gait-step .showcase-racer-picture {
  animation: showcasePosePulse .9s steps(1) infinite;
}
.showcase-racer.gait-run-strong .showcase-racer-picture,
.showcase-racer.gait-step-strong .showcase-racer-picture {
  animation: showcasePosePulseStrong .82s steps(1) infinite;
}
.showcase-racer.gait-waddle .showcase-racer-picture {
  animation: showcasePoseFloat 1s steps(1) infinite;
}
@keyframes showcasePosePulse {
  0%,100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(0, -1px, 0) scale(1.01); }
  50% { transform: translate3d(1px, -2px, 0) scale(1.015); }
  75% { transform: translate3d(0, -1px, 0) scale(1.01); }
}
@keyframes showcasePosePulseStrong {
  0%,100% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(1px, -1px, 0) scale(1.02); }
  40% { transform: translate3d(2px, -2px, 0) scale(1.03); }
  60% { transform: translate3d(1px, -1px, 0) scale(1.02); }
  80% { transform: translate3d(0, -1px, 0) scale(1.01); }
}
@keyframes showcasePoseFloat {
  0%,100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0, -2px, 0) rotate(-1deg); }
  50% { transform: translate3d(1px, -3px, 0) rotate(1deg); }
  75% { transform: translate3d(0, -2px, 0) rotate(-1deg); }
}
@media (max-width: 760px) {
  .showcase-race-mobile .showcase-racer-picture,
  .showcase-race-mobile .showcase-racer-animation {
    width: 68px !important;
    height: 68px !important;
    flex-basis: 68px;
  }
}

/* 2026-07-17 V12: browser-native animated PNG presentation. */
.home-pixel-picture,
.showcase-racer-picture {
  display: block;
}
.home-pixel-picture {
  line-height: 0;
}
.showcase-racer-picture {
  overflow: visible;
}

/* 2026-07-17: unified outdoor live race arena for the public AI showcase. */
.showcase-race-card {
  overflow: hidden;
}
.showcase-race-head {
  align-items: flex-start;
}
.showcase-race-arena {
  position: relative;
  margin-top: 18px;
  border-radius: 28px;
  border: 1px solid rgba(148,163,184,.26);
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.92) 0 7%, rgba(255,255,255,0) 8%),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.86) 0 6%, rgba(255,255,255,0) 7%),
    linear-gradient(180deg, #a8dbff 0%, #caebff 32%, #eff8ff 58%, #f7fcff 59%, #eef7ff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 -1px 0 rgba(15,23,42,.08);
}
.showcase-race-arena::before {
  content: '';
  position: absolute;
  left: 18%;
  top: 16px;
  bottom: 78px;
  width: 3px;
  background: repeating-linear-gradient(180deg, rgba(14,116,144,.16) 0 12px, rgba(255,255,255,0) 12px 24px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5);
}
.showcase-race-arena::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 64px;
  height: 2px;
  background: linear-gradient(90deg, rgba(14,165,233,.08), rgba(14,165,233,.24), rgba(14,165,233,.08));
  box-shadow:
    0 -58px 0 rgba(255,255,255,.06),
    0 -116px 0 rgba(255,255,255,.06),
    0 -174px 0 rgba(255,255,255,.06),
    0 -232px 0 rgba(255,255,255,.06),
    0 -290px 0 rgba(255,255,255,.06),
    0 -348px 0 rgba(255,255,255,.06),
    0 -406px 0 rgba(255,255,255,.06),
    0 -464px 0 rgba(255,255,255,.06),
    0 -522px 0 rgba(255,255,255,.06),
    0 -580px 0 rgba(255,255,255,.06),
    0 -638px 0 rgba(255,255,255,.06),
    0 -696px 0 rgba(255,255,255,.06);
  pointer-events: none;
}
.showcase-arena-cloud {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 26px -10px 0 6px rgba(255,255,255,.92), 54px 2px 0 0 rgba(255,255,255,.9), 18px 10px 0 3px rgba(255,255,255,.88);
  opacity: .88;
}
.showcase-arena-cloud-one {
  top: 28px;
  left: 10%;
  width: 62px;
  height: 22px;
}
.showcase-arena-cloud-two {
  top: 54px;
  right: 16%;
  width: 70px;
  height: 24px;
}
.showcase-arena-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 82px;
  background:
    linear-gradient(180deg, rgba(134,239,172,.55), rgba(34,197,94,.55) 16%, rgba(22,163,74,.78) 17%, rgba(22,163,74,.96) 54%, rgba(20,83,45,.98) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 18px, rgba(255,255,255,0) 18px 36px);
  border-top: 4px solid rgba(74,222,128,.72);
}
.showcase-arena-ground::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 24px;
  background: radial-gradient(circle at 12px 18px, #65a30d 0 12px, rgba(0,0,0,0) 13px) 0 0/24px 24px repeat-x;
  opacity: .95;
}
.showcase-arena-finish {
  position: absolute;
  right: 20px;
  bottom: 58px;
  width: 92px;
  height: calc(100% - 86px);
  min-height: 240px;
  pointer-events: none;
}
.showcase-arena-finish i,
.showcase-arena-finish b {
  position: absolute;
  bottom: 0;
  display: block;
}
.showcase-arena-finish i {
  left: 0;
  width: 18px;
  height: 100%;
  border: 2px solid rgba(15,23,42,.76);
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, #f8fafc 0 12px, #0f172a 12px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 6px, rgba(255,255,255,0) 6px 12px);
  box-shadow: 0 8px 16px rgba(15,23,42,.16);
}
.showcase-arena-finish b {
  left: 17px;
  bottom: calc(100% - 68px);
  width: 56px;
  height: 38px;
  border: 2px solid rgba(15,23,42,.76);
  border-left: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.85)),
    linear-gradient(45deg, #0f172a 25%, transparent 25%) 0 0/12px 12px,
    linear-gradient(-45deg, #0f172a 25%, transparent 25%) 0 6px/12px 12px,
    linear-gradient(45deg, transparent 75%, #0f172a 75%) 6px -6px/12px 12px,
    linear-gradient(-45deg, transparent 75%, #0f172a 75%) -6px 0/12px 12px;
  clip-path: polygon(0 0, 100% 8%, 82% 48%, 100% 100%, 0 92%);
  filter: drop-shadow(0 6px 8px rgba(15,23,42,.14));
}
.showcase-arena-finish span {
  position: absolute;
  top: 8px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.86);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 6px 12px rgba(15,23,42,.2);
}
.showcase-racer-unit {
  --runner-box: 92px;
  --runner-lift: 0px;
  position: absolute;
  left: var(--race-position, 18%);
  width: 150px;
  height: 96px;
  transform: translateX(-50%);
  z-index: 3;
  transition: left .9s cubic-bezier(.2,.9,.25,1.05);
}
.showcase-racer-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 18px);
  transform: translateX(-50%);
  min-width: 108px;
  max-width: 148px;
  padding: 7px 10px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 18px rgba(15,23,42,.12);
  text-align: center;
}
.showcase-racer-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.94);
  border-right: 1px solid rgba(148,163,184,.24);
  border-bottom: 1px solid rgba(148,163,184,.24);
  transform: translateX(-50%) rotate(45deg);
}
.showcase-racer-name,
.showcase-racer-return-value {
  display: block;
  line-height: 1.15;
}
.showcase-racer-name {
  font-size: .86rem;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showcase-racer-return-value {
  margin-top: 2px;
  font-size: .8rem;
  font-weight: 900;
}
.showcase-racer-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 40px);
  transform: translateX(-50%) translateY(6px);
  width: 170px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(15,23,42,.92);
  color: #f8fbff;
  box-shadow: 0 12px 24px rgba(15,23,42,.24);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 6;
  pointer-events: none;
}
.showcase-racer-tooltip strong,
.showcase-racer-tooltip span {
  display: block;
  font-size: .78rem;
  line-height: 1.35;
}
.showcase-racer-tooltip strong { font-weight: 800; }
.showcase-racer-tooltip span { margin-top: 3px; color: #dbe7f5; }
.showcase-racer-unit:hover .showcase-racer-tooltip,
.showcase-racer-unit:focus-within .showcase-racer-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.showcase-racer-shell {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: var(--runner-box);
  height: calc(var(--runner-box) + 10px);
  transform: translateX(-50%) translateY(var(--runner-lift));
}
.showcase-racer-effect {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border-radius: 999px;
  opacity: 0;
}
.showcase-racer-picture {
  display: block;
  width: var(--runner-box);
  height: var(--runner-box);
  overflow: visible;
  line-height: 0;
  filter: saturate(1.04) contrast(1.03) drop-shadow(0 10px 10px rgba(15,23,42,.24));
}
.showcase-racer-animation {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.showcase-trade-symbol {
  position: absolute;
  left: 50%;
  top: calc(100% - 6px);
  transform: translateX(-50%);
  min-width: 34px;
  max-width: 110px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(148,163,184,.26);
  color: #0f172a;
  font-size: .7rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showcase-racer-unit.is-buying .showcase-racer-effect {
  background: radial-gradient(circle, rgba(34,197,94,.42), rgba(34,197,94,0));
}
.showcase-racer-unit.is-selling .showcase-racer-effect {
  background: radial-gradient(circle, rgba(239,68,68,.42), rgba(239,68,68,0));
}
.showcase-racer-unit.is-event-active .showcase-racer-effect {
  opacity: 1;
  animation: showcase-flash 1.1s ease-out;
}
.showcase-racer-unit.gait-run .showcase-racer-picture,
.showcase-racer-unit.gait-step .showcase-racer-picture {
  animation: showcasePosePulse .9s steps(1) infinite;
  animation-delay: var(--runner-delay, 0s);
}
.showcase-racer-unit.gait-run-strong .showcase-racer-picture,
.showcase-racer-unit.gait-step-strong .showcase-racer-picture {
  animation: showcasePosePulseStrong .82s steps(1) infinite;
  animation-delay: var(--runner-delay, 0s);
}
.showcase-racer-unit.gait-waddle .showcase-racer-picture {
  animation: showcasePoseFloat 1s steps(1) infinite;
  animation-delay: var(--runner-delay, 0s);
}
.character-retail_ant.showcase-racer-unit { --runner-box: 94px; }
.character-aggressive_tiger.showcase-racer-unit { --runner-box: 98px; --runner-lift: -2px; }
.character-contrarian_fox.showcase-racer-unit { --runner-box: 98px; --runner-lift: -1px; }
.character-value_owl.showcase-racer-unit { --runner-box: 95px; --runner-lift: -6px; }
.character-growth_hawk.showcase-racer-unit { --runner-box: 96px; --runner-lift: -6px; }
.character-momentum_cheetah.showcase-racer-unit { --runner-box: 100px; --runner-lift: -4px; }
.character-wealth_whale.showcase-racer-unit { --runner-box: 104px; --runner-lift: -3px; }
.character-dividend_turtle.showcase-racer-unit { --runner-box: 96px; --runner-lift: -2px; }
.character-conservative_armadillo.showcase-racer-unit { --runner-box: 94px; --runner-lift: -2px; }
.character-future_robot.showcase-racer-unit { --runner-box: 98px; --runner-lift: -2px; }
.character-leverage_moth.showcase-racer-unit { --runner-box: 98px; --runner-lift: -4px; }
.character-random.showcase-racer-unit { --runner-box: 98px; --runner-lift: -2px; }
.showcase-race-mobile {
  display: none;
  margin-top: 14px;
}
.showcase-race-mobile article {
  display: grid;
  grid-template-columns: 52px 62px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(148,163,184,.18);
}
.showcase-race-mobile article:last-child { border-bottom: 0; }
.showcase-mobile-identity { display: grid; gap: 4px; }
.showcase-mobile-identity small,
.showcase-mobile-identity em {
  color: var(--muted);
  font-size: .8rem;
  font-style: normal;
  line-height: 1.22;
}
.showcase-mobile-sprite,
.showcase-mobile-sprite .showcase-racer-animation {
  width: 62px !important;
  height: 62px !important;
}
.theme-game .showcase-race-arena {
  border-color: rgba(125,211,252,.26);
  background: linear-gradient(180deg, #87c8ff 0%, #bde5ff 32%, #e8f5ff 57%, #f2f8ff 58%, #eef4ff 100%);
}
.theme-game .showcase-racer-bubble {
  background: rgba(255,255,255,.97);
}
@media (max-width: 920px) {
  .showcase-race-arena {
    display: none;
  }
  .showcase-race-mobile {
    display: grid;
  }
}
@media (max-width: 640px) {
  .showcase-race-mobile article {
    grid-template-columns: 44px 56px minmax(0, 1fr);
  }
  .showcase-mobile-return {
    grid-column: 2 / span 2;
    justify-self: end;
  }
  .showcase-mobile-sprite,
  .showcase-mobile-sprite .showcase-racer-animation {
    width: 56px !important;
    height: 56px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-racer-unit,
  .showcase-racer-picture,
  .showcase-racer-effect {
    animation: none !important;
    transition: none !important;
  }
}

/* 2026-07-17 round 2: showpiece arena art + overlap reduction for showcase race */
.showcase-race-arena {
  position: relative;
  border-radius: 30px;
  border: 1px solid rgba(148,163,184,.24);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(10,30,60,.08)),
    var(--showcase-bg);
  background-size: cover;
  background-position: center center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 34px rgba(15,23,42,.08);
}
.showcase-race-arena::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 51%, rgba(255,255,255,.12) 51.4%, rgba(255,255,255,0) 51.8%, rgba(255,255,255,0) 63.2%, rgba(255,255,255,.12) 63.6%, rgba(255,255,255,0) 64%, rgba(255,255,255,0) 75.4%, rgba(255,255,255,.12) 75.8%, rgba(255,255,255,0) 76.2%, rgba(255,255,255,0) 87.6%, rgba(255,255,255,.12) 88%, rgba(255,255,255,0) 88.4%),
    linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,0) 28%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.showcase-race-arena::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 19%;
  height: 44%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 18%, rgba(255,255,255,.03) 76%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.showcase-arena-cloud,
.showcase-arena-ground,
.showcase-arena-finish {
  display: none;
}
.showcase-racer-unit {
  width: 156px;
  height: 98px;
  left: clamp(92px, var(--race-position, 18%), calc(100% - 122px));
  transform: translateX(-50%);
  transition: left .95s cubic-bezier(.2,.9,.25,1.02);
}
.showcase-racer-shell {
  bottom: 18px;
}
.showcase-racer-bubble {
  min-width: 112px;
  max-width: 150px;
  bottom: calc(100% - 8px);
}
.showcase-racer-tooltip {
  bottom: calc(100% + 50px);
}
.showcase-racer-unit.anchor-left .showcase-racer-bubble,
.showcase-racer-unit.anchor-left .showcase-racer-tooltip {
  left: 42%;
}
.showcase-racer-unit.anchor-right .showcase-racer-bubble,
.showcase-racer-unit.anchor-right .showcase-racer-tooltip {
  left: 58%;
}
.showcase-racer-unit.anchor-left .showcase-racer-bubble::after,
.showcase-racer-unit.anchor-right .showcase-racer-bubble::after {
  left: 50%;
}
.showcase-racer-unit:nth-child(odd) .showcase-racer-shell {
  transform: translateX(-50%) translateY(var(--runner-lift)) rotate(-1deg);
}
.showcase-racer-unit:nth-child(even) .showcase-racer-shell {
  transform: translateX(-50%) translateY(var(--runner-lift)) rotate(1deg);
}
.showcase-racer-unit:nth-child(3n) .showcase-racer-bubble {
  margin-top: -2px;
}
.showcase-trade-symbol {
  top: calc(100% - 2px);
}
.theme-game .showcase-race-arena {
  border-color: rgba(125,211,252,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 20px 38px rgba(14,116,144,.12);
}
@media (max-width: 920px) {
  .showcase-race-arena {
    display: none;
  }
}

/* 2026-07-17 final showcase race coordinate and collision fix. */
.showcase-race-arena {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(620px, 55vw, 820px);
  margin-top: 18px;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(148,163,184,.24);
  background-image: var(--showcase-bg);
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54), 0 18px 34px rgba(15,23,42,.10);
}
.showcase-race-arena::before,
.showcase-race-arena::after {
  content: none !important;
  display: none !important;
}
.showcase-race-start-guide {
  position: absolute;
  left: 24%;
  top: 51%;
  bottom: 9.5%;
  width: 2px;
  z-index: 2;
  opacity: .42;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.92) 0 9px, rgba(30,41,59,.48) 9px 18px);
  box-shadow: 0 0 0 1px rgba(15,23,42,.10), 0 0 12px rgba(255,255,255,.22);
  pointer-events: none;
}
.showcase-racer-unit {
  --race-position: 24%;
  --race-lane-y: 70.5%;
  --race-scale: .91;
  --race-depth: 22;
  position: absolute;
  left: clamp(120px, var(--race-position), calc(100% - 165px));
  top: var(--race-lane-y);
  width: 156px;
  height: 110px;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  z-index: var(--race-depth);
  transition: left .95s cubic-bezier(.2,.9,.25,1.02), top .65s ease;
}
.showcase-racer-unit:hover,
.showcase-racer-unit:focus-within {
  z-index: 120;
}
.showcase-racer-unit .showcase-racer-shell,
.showcase-racer-unit:nth-child(odd) .showcase-racer-shell,
.showcase-racer-unit:nth-child(even) .showcase-racer-shell {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(var(--runner-lift, 0px)) scale(var(--race-scale)) !important;
  transform-origin: 50% 100%;
}
.showcase-racer-unit .showcase-racer-bubble {
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translateX(-50%);
  min-width: 112px;
  max-width: 150px;
}
.showcase-racer-unit .showcase-racer-tooltip {
  left: 50%;
  bottom: calc(100% + 54px);
  transform: translateX(-50%) translateY(6px);
}
.showcase-racer-unit.anchor-right .showcase-racer-bubble {
  left: 73%;
  transform: translateX(-35%);
}
.showcase-racer-unit.anchor-right .showcase-racer-tooltip {
  left: 73%;
  transform: translateX(-35%) translateY(6px);
}
.showcase-racer-unit.anchor-left .showcase-racer-bubble {
  left: 27%;
  transform: translateX(-65%);
}
.showcase-racer-unit.anchor-left .showcase-racer-tooltip {
  left: 27%;
  transform: translateX(-65%) translateY(6px);
}
.showcase-racer-unit.anchor-right:hover .showcase-racer-tooltip,
.showcase-racer-unit.anchor-right:focus-within .showcase-racer-tooltip {
  transform: translateX(-35%) translateY(0);
}
.showcase-racer-unit.anchor-left:hover .showcase-racer-tooltip,
.showcase-racer-unit.anchor-left:focus-within .showcase-racer-tooltip {
  transform: translateX(-65%) translateY(0);
}
.showcase-racer-unit .showcase-trade-symbol {
  top: calc(100% - 1px);
}
.theme-game .showcase-race-arena {
  background-image: var(--showcase-bg);
  border-color: rgba(125,211,252,.24);
}
@media (max-width: 1080px) {
  .showcase-race-arena {
    display: none;
  }
  .showcase-race-mobile {
    display: grid;
  }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-racer-unit {
    transition: none !important;
  }
}

/* 2026-07-17: showcase sprite edge cleanup and clearer Game Mode race overlays. */
.showcase-trade-symbol,
.showcase-racer-unit .showcase-trade-symbol {
  display: none !important;
}
.showcase-racer-unit .showcase-racer-bubble {
  min-height: 54px;
  padding: 9px 12px 10px;
  background: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.82);
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 8;
}
.showcase-racer-unit .showcase-racer-bubble::after {
  background: rgba(255,255,255,.72);
  border-right-color: rgba(255,255,255,.82);
  border-bottom-color: rgba(255,255,255,.82);
}
.showcase-racer-name {
  color: #0f172a;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.showcase-racer-return-value {
  text-shadow: 0 1px 0 rgba(255,255,255,.58);
}
.showcase-racer-unit .showcase-racer-tooltip {
  width: 184px;
  background: rgba(7,12,22,.74);
  color: #f8fbff;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 14px 28px rgba(15,23,42,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 14;
}
.showcase-racer-tooltip strong,
.showcase-racer-tooltip span {
  text-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.theme-game .showcase-racer-bubble,
.theme-game .showcase-racer-unit .showcase-racer-bubble {
  background: rgba(255,255,255,.64);
  border-color: rgba(255,255,255,.76);
}
.theme-game .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit .showcase-racer-bubble::after {
  background: rgba(255,255,255,.64);
  border-right-color: rgba(255,255,255,.76);
  border-bottom-color: rgba(255,255,255,.76);
}
.theme-game .showcase-racer-name,
.theme-game .showcase-mobile-identity strong,
.theme-game .showcase-mobile-return,
.theme-game .showcase-mobile-rank,
.theme-game .showcase-ranking-table td,
.theme-game .showcase-ranking-table th {
  color: #f8fbff;
  text-shadow: 0 1px 6px rgba(15,23,42,.24);
}
.theme-game .showcase-racer-name {
  color: #10213d;
  text-shadow: 0 1px 0 rgba(255,255,255,.56);
}
.theme-game .showcase-racer-return-value {
  text-shadow: 0 1px 0 rgba(255,255,255,.64);
}
.theme-game .showcase-mobile-identity small,
.theme-game .showcase-mobile-identity em,
.theme-game .showcase-activity-list time,
.theme-game .showcase-ranking-identity small {
  color: #d7e6f8;
  text-shadow: 0 1px 5px rgba(15,23,42,.22);
}
.theme-game .showcase-racer-tooltip,
.theme-game .showcase-racer-unit .showcase-racer-tooltip {
  background: rgba(5,10,20,.80);
}

/* 2026-07-17: keep racer name bubbles centered directly above each character. */
.showcase-racer-unit .showcase-racer-bubble,
.showcase-racer-unit.anchor-left .showcase-racer-bubble,
.showcase-racer-unit.anchor-right .showcase-racer-bubble {
  left: 50% !important;
  bottom: 60px;
  transform: translateX(-50%) !important;
  min-width: 108px;
  max-width: 136px;
  min-height: 50px;
  padding: 8px 12px 9px;
  background: rgba(255,255,255,.46);
  border-color: rgba(255,255,255,.62);
  box-shadow: 0 8px 22px rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.showcase-racer-unit .showcase-racer-bubble::after,
.showcase-racer-unit.anchor-left .showcase-racer-bubble::after,
.showcase-racer-unit.anchor-right .showcase-racer-bubble::after {
  left: 50% !important;
  background: rgba(255,255,255,.46);
  border-right-color: rgba(255,255,255,.62);
  border-bottom-color: rgba(255,255,255,.62);
}
.showcase-racer-name,
.showcase-racer-return-value {
  position: relative;
  z-index: 1;
}
.theme-game .showcase-racer-bubble,
.theme-game .showcase-racer-unit .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-left .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-right .showcase-racer-bubble {
  background: rgba(255,255,255,.40);
  border-color: rgba(255,255,255,.54);
}
.theme-game .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit.anchor-left .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit.anchor-right .showcase-racer-bubble::after {
  background: rgba(255,255,255,.40);
  border-right-color: rgba(255,255,255,.54);
  border-bottom-color: rgba(255,255,255,.54);
}


/* 2026-07-17: align Game Mode arena framing with Normal Mode and soften racer bubbles. */
.showcase-racer-unit .showcase-racer-bubble,
.showcase-racer-unit.anchor-left .showcase-racer-bubble,
.showcase-racer-unit.anchor-right .showcase-racer-bubble {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.44);
  box-shadow: 0 5px 16px rgba(15,23,42,.07);
  backdrop-filter: blur(4px) saturate(1.04);
  -webkit-backdrop-filter: blur(4px) saturate(1.04);
}
.showcase-racer-unit .showcase-racer-bubble::after,
.showcase-racer-unit.anchor-left .showcase-racer-bubble::after,
.showcase-racer-unit.anchor-right .showcase-racer-bubble::after {
  background: rgba(255,255,255,.16);
  border-right-color: rgba(255,255,255,.44);
  border-bottom-color: rgba(255,255,255,.44);
}
.theme-game .showcase-racer-bubble,
.theme-game .showcase-racer-unit .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-left .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-right .showcase-racer-bubble {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.38);
  box-shadow: 0 5px 18px rgba(0,0,0,.08);
}
.theme-game .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit.anchor-left .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit.anchor-right .showcase-racer-bubble::after {
  background: rgba(255,255,255,.12);
  border-right-color: rgba(255,255,255,.38);
  border-bottom-color: rgba(255,255,255,.38);
}
.theme-game .showcase-race-arena {
  background-image: var(--showcase-bg) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* 2026-07-17: transparent label mode for showcase racer bubbles. */
.showcase-racer-unit .showcase-racer-bubble,
.showcase-racer-unit.anchor-left .showcase-racer-bubble,
.showcase-racer-unit.anchor-right .showcase-racer-bubble,
.theme-game .showcase-racer-bubble,
.theme-game .showcase-racer-unit .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-left .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-right .showcase-racer-bubble {
  left: 50% !important;
  bottom: 44px;
  transform: translateX(-50%) !important;
  min-width: 108px;
  max-width: 136px;
  min-height: 40px;
  padding: 2px 8px 0;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.showcase-racer-unit .showcase-racer-bubble::after,
.showcase-racer-unit.anchor-left .showcase-racer-bubble::after,
.showcase-racer-unit.anchor-right .showcase-racer-bubble::after,
.theme-game .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit.anchor-left .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit.anchor-right .showcase-racer-bubble::after {
  left: 50% !important;
  background: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
.showcase-racer-name,
.theme-game .showcase-racer-name {
  color: rgba(255,255,255,.98) !important;
  text-shadow: 0 2px 6px rgba(15,23,42,.72), 0 0 1px rgba(15,23,42,.68) !important;
}
.showcase-racer-return-value,
.theme-game .showcase-racer-return-value {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(15,23,42,.72), 0 0 1px rgba(15,23,42,.68) !important;
}

/* 2026-07-17: outlined transparent racer labels with tighter head spacing. */
.showcase-racer-unit .showcase-racer-bubble,
.showcase-racer-unit.anchor-left .showcase-racer-bubble,
.showcase-racer-unit.anchor-right .showcase-racer-bubble,
.theme-game .showcase-racer-bubble,
.theme-game .showcase-racer-unit .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-left .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-right .showcase-racer-bubble {
  left: 50% !important;
  bottom: 56px;
  transform: translateX(-50%) !important;
  min-width: 110px;
  max-width: 138px;
  min-height: 38px;
  padding: 3px 9px 2px;
  background: transparent !important;
  border: 1.5px solid rgba(0,0,0,.92) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.showcase-racer-unit .showcase-racer-bubble::after,
.showcase-racer-unit.anchor-left .showcase-racer-bubble::after,
.showcase-racer-unit.anchor-right .showcase-racer-bubble::after,
.theme-game .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit.anchor-left .showcase-racer-bubble::after,
.theme-game .showcase-racer-unit.anchor-right .showcase-racer-bubble::after {
  display: none !important;
}
.showcase-racer-name,
.theme-game .showcase-racer-name,
.showcase-racer-return-value,
.theme-game .showcase-racer-return-value {
  color: #ffffff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.86), 0 0 1px rgba(0,0,0,.82) !important;
}

/* 2026-07-17: place each outlined label 4px above its scaled sprite head. */
.showcase-racer-unit .showcase-racer-bubble,
.showcase-racer-unit.anchor-left .showcase-racer-bubble,
.showcase-racer-unit.anchor-right .showcase-racer-bubble,
.theme-game .showcase-racer-bubble,
.theme-game .showcase-racer-unit .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-left .showcase-racer-bubble,
.theme-game .showcase-racer-unit.anchor-right .showcase-racer-bubble {
  bottom: var(--bubble-bottom, 104px) !important;
}

/* 2026-07-17: staged 60-day race layout, ranking sparklines, mode ordering, and crowd cheer. */
.showcase-main-sections {
  display: flex;
  flex-direction: column;
}
.showcase-main-sections .showcase-ranking-card { order: 1; }
.showcase-main-sections .showcase-race-card { order: 2; }
.theme-game .showcase-main-sections .showcase-race-card { order: 1; }
.theme-game .showcase-main-sections .showcase-ranking-card { order: 2; }
.showcase-game-mode-button {
  border-color: rgba(37,99,235,.32);
}
.showcase-sparkline-heading,
.showcase-sparkline-cell {
  width: 142px;
  min-width: 142px;
  text-align: center;
}
.showcase-mini-chart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 38px;
  color: #111827;
}
/* AI showcase uses the same market-direction convention as league rankings:
   up=red, down=blue, flat=black. */
.showcase-mini-chart.is-positive { color: #dc2626; }
.showcase-mini-chart.is-negative { color: #2563eb; }
.showcase-mini-chart.is-flat { color: #111827; }
.showcase-ranking-table .return-up,
.showcase-mobile-return.return-up { color: #dc2626 !important; }
.showcase-ranking-table .return-down,
.showcase-mobile-return.return-down { color: #2563eb !important; }
.showcase-ranking-table .return-flat,
.showcase-mobile-return.return-flat { color: #111827 !important; }
.showcase-mini-chart svg {
  display: block;
  width: 120px;
  height: 34px;
  overflow: visible;
}
.showcase-mini-chart-zero {
  stroke: rgba(100,116,139,.28);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.showcase-mini-chart-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.showcase-mini-chart-dot {
  fill: currentColor;
  stroke: rgba(255,255,255,.88);
  stroke-width: 1.2;
}
.theme-game .showcase-mini-chart-zero { stroke: rgba(203,213,225,.28); }
.theme-game .showcase-mini-chart-dot { stroke: rgba(15,23,42,.72); }
.showcase-crowd-cheer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--showcase-bg);
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  clip-path: inset(29% 0 48% 0 round 0);
  opacity: .16;
  filter: saturate(1.08) brightness(1.03);
  transform-origin: 50% 42%;
  animation: showcaseCrowdCheer 1.05s steps(2, end) infinite alternate;
}
@keyframes showcaseCrowdCheer {
  0% { transform: translateY(0) scaleY(1); opacity: .10; }
  50% { transform: translateY(-1px) scaleY(1.004); opacity: .17; }
  100% { transform: translateY(1px) scaleY(.997); opacity: .13; }
}
@media (max-width: 1080px) {
  .showcase-sparkline-heading,
  .showcase-sparkline-cell {
    width: 126px;
    min-width: 126px;
  }
  .showcase-mini-chart { width: 112px; }
  .showcase-mini-chart svg { width: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-crowd-cheer { animation: none !important; opacity: .08; }
}

/* 2026-07-17: corrected showcase track origin, natural arena ratio, animated crowd sprite, and rank movement. */
.showcase-race-arena,
.theme-game .showcase-race-arena {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1672 / 941;
  background-image: var(--showcase-bg) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.showcase-race-start-guide {
  left: var(--race-start, 10.5%) !important;
}
.showcase-crowd-cheer {
  position: absolute;
  inset: auto !important;
  left: 0 !important;
  top: 27.10% !important;
  width: 86.72% !important;
  height: 26.57% !important;
  z-index: 1;
  display: block;
  object-fit: fill;
  object-position: 0 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none;
}
.showcase-rank-move-heading,
.showcase-rank-move-cell {
  width: 58px;
  min-width: 58px;
  text-align: center;
  white-space: nowrap;
}
.showcase-rank-move-cell .rank-move {
  min-width: 42px;
  margin-right: 0;
}
.theme-game .showcase-rank-move-cell .rank-move-up { color: #ff8a80; }
.theme-game .showcase-rank-move-cell .rank-move-down { color: #8ab4ff; }
.theme-game .showcase-rank-move-cell .rank-move-flat { color: #aab8cf; }
@media (max-width: 1080px) {
  .showcase-rank-move-heading,
  .showcase-rank-move-cell {
    width: 50px;
    min-width: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-crowd-cheer { display: none !important; }
}

/* 2026-07-17: move the showcase start to the far-left track edge and make crowd cheering visible. */
.showcase-racer-unit {
  left: clamp(72px, var(--race-position), calc(100% - 165px));
}
.showcase-race-start-guide {
  left: clamp(72px, var(--race-start, 5.2%), calc(100% - 165px)) !important;
}
.showcase-crowd-cheer {
  animation: showcaseCrowdCheerVisible 1.04s steps(2, end) infinite alternate !important;
  will-change: transform, filter;
}
@keyframes showcaseCrowdCheerVisible {
  0% { transform: translateY(0) scaleY(1); filter: brightness(1) saturate(1.02); }
  50% { transform: translateY(-2px) scaleY(1.006); filter: brightness(1.05) saturate(1.08); }
  100% { transform: translateY(2px) scaleY(.995); filter: brightness(1.01) saturate(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-crowd-cheer {
    animation: none !important;
    transform: none !important;
  }
}

/* 2026-07-17: force visible grandstand motion and cache-busted V3 crowd sprite. */
.showcase-crowd-cheer {
  display: block !important;
  opacity: 1 !important;
  animation: showcaseCrowdBandBounceV3 .78s steps(2, end) infinite !important;
  will-change: transform, filter;
}
@keyframes showcaseCrowdBandBounceV3 {
  0% { transform: translate3d(0, 1px, 0) scaleY(1); filter: brightness(1) saturate(1.03); }
  33% { transform: translate3d(-1px, -5px, 0) scaleY(1.012); filter: brightness(1.07) saturate(1.12); }
  66% { transform: translate3d(1px, -2px, 0) scaleY(1.005); filter: brightness(1.03) saturate(1.08); }
  100% { transform: translate3d(0, 3px, 0) scaleY(.993); filter: brightness(1.01) saturate(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-crowd-cheer {
    display: block !important;
    animation: showcaseCrowdBandBounceV3 1.1s steps(2, end) infinite !important;
  }
}

/* 2026-07-17 V4: use crowd-pose frame animation instead of shaking sliced grandstand. */
.showcase-crowd-cheer {
  position: absolute !important;
  left: 0 !important;
  top: 27.10% !important;
  width: 86.72% !important;
  height: 26.57% !important;
  z-index: 1;
  display: block !important;
  object-fit: fill;
  object-position: 0 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .showcase-crowd-cheer {
    display: block !important;
    animation: none !important;
    transform: none !important;
  }
}

/* 2026-07-17: Showcase illustration ranking, split trade history, and softer race compositing. */
.showcase-ranking-illustration {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto !important;
  filter: saturate(1.02) contrast(.99) drop-shadow(0 5px 7px rgba(15,23,42,.14));
}
.showcase-activity-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.showcase-activity-column {
  min-width: 0;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(248,250,252,.78);
}
.showcase-activity-column > header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.showcase-activity-column > header h3 {
  margin: 0;
  font-size: 1rem;
}
.showcase-activity-column .showcase-activity-list article {
  grid-template-columns: minmax(100px, .85fr) minmax(78px, .55fr) minmax(110px, .8fr);
  padding: 10px 12px;
  background: rgba(255,255,255,.80);
}
.showcase-buy-history { box-shadow: inset 3px 0 0 rgba(34,197,94,.56); }
.showcase-sell-history { box-shadow: inset 3px 0 0 rgba(239,68,68,.52); }
.theme-game .showcase-activity-column {
  background: rgba(10,20,38,.72);
  border-color: rgba(125,211,252,.20);
}
.theme-game .showcase-activity-column .showcase-activity-list article {
  background: rgba(16,27,48,.76);
}
.guide-ai-purpose { margin-top: 22px; }
.showcase-racer-shell::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: calc(var(--runner-box, 98px) * .72);
  height: 13px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(15,23,42,.28) 0%, rgba(15,23,42,.13) 48%, rgba(15,23,42,0) 76%);
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
}
.showcase-racer-unit .showcase-racer-picture {
  position: relative;
  z-index: 1;
  filter: saturate(.99) contrast(.98) drop-shadow(0 6px 5px rgba(15,23,42,.20)) drop-shadow(0 0 1px rgba(255,255,255,.14));
}
.showcase-racer-unit .showcase-racer-animation {
  image-rendering: auto !important;
  filter: saturate(.99) contrast(.985);
  transform: translateZ(0);
}
@media (max-width: 900px) {
  .showcase-activity-columns { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .showcase-activity-column .showcase-activity-list article {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .showcase-activity-column .showcase-activity-list time {
    grid-column: 1 / -1;
    text-align: left;
  }
}


/* 2026-07-17: compact Bright Classic home flow after removing the simulation card. */
body.home-page:not(.theme-game) main.container {
  margin-top: -10px;
}
body.home-page:not(.theme-game) .landing-hero {
  padding-bottom: 8px;
}
body.home-page:not(.theme-game) .home-audience-section {
  margin-top: 0;
}
@media (max-width: 900px) {
  body.home-page:not(.theme-game) main.container { margin-top: -10px; }
  body.home-page:not(.theme-game) .landing-hero { padding-bottom: 4px; }
}

/* 2026-07-17: keep the audience cards directly beneath the primary home CTAs. */
body.home-page:not(.theme-game) .landing-left-stack {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}
body.home-page:not(.theme-game) .landing-left-stack .home-audience-section {
  margin-top: 0;
}
body.home-page:not(.theme-game) .landing-left-stack .home-audience-section .section-title-row {
  margin-bottom: 10px;
}
body.home-page:not(.theme-game) .landing-left-stack .home-audience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
body.home-page:not(.theme-game) .landing-left-stack .home-audience-grid article {
  min-height: 150px;
  padding: 16px;
}
@media (max-width: 900px) {
  body.home-page:not(.theme-game) .landing-left-stack .home-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  body.home-page:not(.theme-game) .landing-left-stack .home-audience-grid {
    grid-template-columns: 1fr;
  }
}


/* 2026-07-17: restore the Bright Classic audience cards to one full-width row. */
body.home-page:not(.theme-game) main.container {
  margin-top: -10px;
}
body.home-page:not(.theme-game) .landing-hero {
  min-height: auto;
  align-items: start;
  row-gap: 22px;
  padding-top: clamp(12px, 2.4vw, 30px);
  padding-bottom: 8px;
}
body.home-page:not(.theme-game) .landing-left-stack {
  display: block;
  min-width: 0;
}
body.home-page:not(.theme-game) .landing-copy h1 {
  font-size: clamp(34px, 4.6vw, 60px);
}
html[lang="ko"] body.home-page:not(.theme-game) .landing-copy h1 {
  font-size: clamp(32px, 4.2vw, 54px);
}
body.home-page:not(.theme-game) .landing-hero > .home-audience-section {
  grid-column: 1 / -1;
  margin-top: 8px;
}
body.home-page:not(.theme-game) .landing-hero > .home-audience-section .section-title-row {
  margin-bottom: 12px;
}
body.home-page:not(.theme-game) .landing-hero > .home-audience-section .home-audience-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
body.home-page:not(.theme-game) .landing-hero > .home-audience-section .home-audience-grid article {
  min-height: 168px;
  padding: 18px;
}
@media (max-width: 820px) {
  body.home-page:not(.theme-game) main.container {
    margin-top: -10px;
  }
  body.home-page:not(.theme-game) .landing-hero > .home-audience-section .home-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  body.home-page:not(.theme-game) .landing-hero > .home-audience-section .home-audience-grid {
    grid-template-columns: 1fr;
  }
}


/* 2026-07-17: homepage vertical alignment, compact story heading, and showcase metadata clarity. */
body.home-page:not(.theme-game) main.container { margin-top: 0; }
@media (max-width: 900px) {
  body.home-page:not(.theme-game) main.container { margin-top: 0; }
}
.landing-illustration-copy h2 {
  font-size: clamp(26px, 3.2vw, 44px);
}
.showcase-cycle-period {
  display: inline-flex !important;
  align-items: baseline;
  gap: .35em;
}
.showcase-ranking-requirements-stat strong {
  font-size: clamp(.82rem, 1.3vw, 1rem);
  line-height: 1.35;
}
@media (min-width: 821px) {
  .showcase-hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* 2026-07-17: keep the Showcase race markup available for instant theme switches. */
.showcase-race-card { display: none; }
body.theme-game .showcase-race-card { display: block; }

/* Give the four Showcase metadata cards comfortable width and visible separation. */
@media (min-width: 821px) {
  .showcase-hero {
    grid-template-columns: minmax(0, 2.15fr) minmax(220px, .85fr);
  }
  .showcase-hero-stats {
    column-gap: 18px;
    row-gap: 14px;
  }
  .showcase-hero-stats article {
    min-width: 0;
    padding-inline: 31.5px;
  }
  .showcase-hero-stats span {
    white-space: nowrap;
  }
}

/* Frame the complete period value while keeping the inner label unframed. */
.showcase-cycle-period > span {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 2026-07-18: Game Mode portfolio deck and non-blocking trade-card feedback. */
.game-portfolio-experience { display: none; }
.theme-game .game-portfolio-experience {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 18px;
  margin: 18px 0 24px;
  color: #f8fbff;
}
.game-deck-shell,
.game-trade-board,
.game-recent-trades-strip {
  border: 1px solid rgba(245, 190, 70, .26);
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .13), transparent 34%),
    linear-gradient(180deg, rgba(8, 15, 31, .98), rgba(5, 10, 23, .98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 38px rgba(0,0,0,.22);
}
.game-deck-shell { min-width: 0; padding: 20px; border-radius: 22px; }
.game-deck-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.game-deck-heading-row h2,
.game-trade-board-head h2 { margin: 4px 0 0; color: #fff8df; }
.game-deck-heading-row p { max-width: 600px; margin: 7px 0 0; color: #aebbd0; line-height: 1.55; }
.game-deck-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 8px;
  min-width: 270px;
}
.game-deck-summary > span {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  background: rgba(15,23,42,.72);
}
.game-deck-summary small { color: #92a3bc; font-size: .72rem; }
.game-deck-summary strong { color: #f8fbff; font-size: .92rem; }
.game-holding-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 14px;
}
.game-holding-card {
  --card-accent: #38bdf8;
  --card-accent-rgb: 56, 189, 248;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 370px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(var(--card-accent-rgb), .58);
  border-radius: 19px;
  background:
    radial-gradient(circle at 78% 24%, rgba(var(--card-accent-rgb), .20), transparent 35%),
    linear-gradient(180deg, rgba(12,22,42,.98), rgba(5,11,24,.99));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 13px 24px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.game-holding-card:hover,
.game-holding-card:focus-within {
  transform: translateY(-2px);
  border-color: rgba(var(--card-accent-rgb), .88);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 16px 30px rgba(0,0,0,.28);
}
.game-card-theme-gold { --card-accent: #f5b942; --card-accent-rgb: 245, 185, 66; }
.game-card-theme-violet { --card-accent: #a78bfa; --card-accent-rgb: 167, 139, 250; }
.game-card-theme-ember { --card-accent: #fb923c; --card-accent-rgb: 251, 146, 60; }
.game-holding-card-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.game-holding-card-head > div { min-width: 0; }
.game-card-symbol {
  display: block;
  color: #fff9e6;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: .025em;
}
.game-holding-card-head strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #aebbd0;
  font-size: .75rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-card-weight {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid rgba(var(--card-accent-rgb), .34);
  border-radius: 999px;
  background: rgba(var(--card-accent-rgb), .10);
  color: var(--card-accent);
  font-size: .68rem;
  font-weight: 800;
}
.game-holding-card-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 176px;
  margin: 9px -4px 7px;
  overflow: hidden;
  border: 1px solid rgba(var(--card-accent-rgb), .26);
  border-radius: 14px;
  background: rgba(3,8,18,.74);
}
.game-holding-card-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(3,8,18,.18) 76%, rgba(3,8,18,.72) 100%);
}
.game-card-light {
  position: absolute;
  z-index: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(var(--card-accent-rgb), .20);
  filter: blur(28px);
}
.game-holding-card-art img,
.game-holding-card-art .game-card-art-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 43%;
  image-rendering: auto;
  filter: saturate(1.05) contrast(1.04);
  transform: none;
}
.game-holding-card-holdings {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 10px;
}
.game-holding-card-holdings span {
  padding: 5px 7px;
  border: 1px solid rgba(var(--card-accent-rgb), .22);
  border-radius: 8px;
  background: rgba(var(--card-accent-rgb), .075);
  color: #aebbd0;
  font-size: .7rem;
}
.game-holding-card-holdings strong { color: #f8fbff; }
.game-holding-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: auto;
}
.game-holding-card-metrics span {
  min-width: 0;
  padding: 8px 6px;
  border-radius: 9px;
  background: rgba(15,23,42,.76);
  text-align: center;
}
.game-holding-card-metrics small { display: block; color: #8191aa; font-size: .64rem; }
.game-holding-card-metrics strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #f8fbff;
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-card-weight-track {
  height: 6px;
  margin: 10px 0 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,.18);
}
.game-card-weight-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--card-accent-rgb), .7), var(--card-accent));
}
.game-card-trade-button { width: 100%; border-color: rgba(var(--card-accent-rgb), .34) !important; }
.game-card-clarity-note { margin: 13px 2px 0; color: #8392aa; font-size: .76rem; }
.game-deck-empty {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 210px;
  padding: 20px;
  border: 1px dashed rgba(148,163,184,.28);
  border-radius: 18px;
  background: rgba(15,23,42,.48);
}
.game-deck-empty img { width: min(260px, 42%); height: auto; aspect-ratio: 12 / 7; object-fit: cover; border: 1px solid rgba(245,185,66,.22); border-radius: 16px; opacity: .9; }
.game-deck-empty strong { display: block; color: #fff8df; font-size: 1.08rem; }
.game-deck-empty p { margin: 7px 0 0; color: #96a6bc; line-height: 1.55; }
.game-trade-board {
  align-self: start;
  padding: 18px;
  border-radius: 22px;
}
.game-trade-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}
.game-trade-board-head .pill { font-size: .67rem; }
.game-trade-event,
.game-trade-board-item {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(148,163,184,.2);
  border-radius: 15px;
  background: rgba(15,23,42,.70);
}
.game-trade-event {
  margin-bottom: 12px;
  padding: 11px;
  opacity: .86;
  transform: translateX(7px);
  transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease;
}
.game-trade-event.is-visible {
  opacity: 1;
  transform: translateX(0);
  box-shadow: 0 0 0 1px rgba(74,222,128,.24), 0 12px 26px rgba(0,0,0,.26);
}
.game-trade-event-buy { border-color: rgba(74,222,128,.35); }
.game-trade-event-sell { border-color: rgba(248,113,113,.35); }
.game-trade-event-pending { border-color: rgba(250,204,21,.34); }
.game-trade-event img,
.game-trade-board-item img {
  width: 70px;
  height: 70px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 42%;
  background: rgba(255,255,255,.025);
}
.game-trade-event span,
.game-trade-board-item span { display: block; color: #f4c85d; font-size: .72rem; font-weight: 850; }
.game-trade-event strong,
.game-trade-board-item strong { display: block; margin-top: 4px; color: #f8fbff; font-size: .88rem; }
.game-trade-event small,
.game-trade-board-item small { display: block; margin-top: 4px; color: #93a3ba; font-size: .73rem; }
.game-trade-board-list { display: grid; gap: 10px; }
.game-trade-board-item { padding: 9px; }
.game-trade-board-item.is-buy { border-color: rgba(74,222,128,.22); }
.game-trade-board-item.is-buy span { color: #86efac; }
.game-trade-board-item.is-sell { border-color: rgba(248,113,113,.22); }
.game-trade-board-item.is-sell span { color: #fca5a5; }
.game-trade-board-item.is-pending { border-color: rgba(250,204,21,.22); }
.game-trade-board-item.is-pending span { color: #fde68a; }
.game-trade-board-empty {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed rgba(148,163,184,.18);
  border-radius: 12px;
}
.game-recent-trades-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 12px 15px;
  border-radius: 17px;
}
.game-recent-trades-strip > strong { flex: 0 0 auto; color: #f6ce6a; }
.game-recent-trades-strip > div {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
}
.game-recent-trade-chip {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 112px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 11px;
  background: rgba(15,23,42,.72);
  color: #f8fbff;
  text-align: left;
  cursor: pointer;
}
.game-recent-trade-chip span { font-weight: 850; }
.game-recent-trade-chip small { color: #91a0b8; }
.game-recent-trade-chip.is-buy { border-color: rgba(74,222,128,.22); }
.game-recent-trade-chip.is-sell { border-color: rgba(248,113,113,.22); }
.game-holding-card.is-card-updated {
  animation: gameCardUpdated 1.1s ease both;
}
@keyframes gameCardUpdated {
  0%, 100% { transform: translateY(0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 13px 24px rgba(0,0,0,.22); }
  38% { transform: translateY(-5px); box-shadow: 0 0 0 2px rgba(var(--card-accent-rgb), .52), 0 0 30px rgba(var(--card-accent-rgb), .28); }
}
@media (max-width: 1080px) {
  .theme-game .game-portfolio-experience { grid-template-columns: 1fr; }
  .game-trade-board { width: 100%; }
}
@media (max-width: 760px) {
  .game-deck-shell,
  .game-trade-board { padding: 14px; border-radius: 17px; }
  .game-deck-heading-row { display: grid; }
  .game-deck-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; width: 100%; }
  .game-holding-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .game-holding-card { min-height: 340px; padding: 11px; }
  .game-holding-card-art { height: 150px; }
  .game-holding-card-art img { width: 100%; height: 100%; }
  .game-holding-card-metrics { grid-template-columns: 1fr; }
  .game-holding-card-metrics span { display: flex; justify-content: space-between; gap: 8px; text-align: left; }
  .game-holding-card-metrics strong { margin-top: 0; }
}
@media (max-width: 520px) {
  .game-holding-card-grid { grid-template-columns: 1fr; }
  .game-holding-card { min-height: 350px; }
  .game-deck-empty { display: grid; justify-items: center; text-align: center; }
  .game-recent-trades-strip { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .game-holding-card,
  .game-trade-event { transition: none !important; }
  .game-holding-card.is-card-updated { animation: none !important; }
}
.game-card-more-note { margin: 12px 2px 0; color: #aab7ca; font-size: .78rem; }

/* 2026-07-19: Game Mode contrast hardening for nested light surfaces.
   Some reusable components were authored for the light themes and kept an
   explicit white/gray background while inheriting Game Mode's pale text.
   Keep their structure, but give every nested surface a dark, readable skin. */
.theme-game {
  /* Compatibility aliases are kept here for old components; source values live
     in the main semantic token contract above. */
  --border: var(--border-default);
  --border-color: var(--border-default);
  --soft-bg: var(--surface-soft);
  --soft: var(--surface-muted);
  --muted-color: var(--text-secondary);
  --muted-text: var(--text-secondary);
}

.theme-game .compact-summary-grid > div,
.theme-game .legal-consent-page .legal-version-grid > div,
.theme-game .quota-panel > div,
.theme-game .leader-summary,
.theme-game .ai-no-slot-hint,
.theme-game .setup-submit-bar,
.theme-game .metric-card,
.theme-game .meta-grid > div,
.theme-game .notice-box,
.theme-game .notice-item,
.theme-game .locked-hint,
.theme-game .profile-country-live-preview,
.theme-game .rules-box,
.theme-game .faq-item,
.theme-game .log-viewer {
  background: linear-gradient(180deg, var(--surface-soft), color-mix(in srgb, var(--surface-page) 76%, var(--surface-card))) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.theme-game .compact-summary-grid > div > span,
.theme-game .legal-consent-page .legal-version-grid > div > span,
.theme-game .quota-panel span,
.theme-game .leader-summary .leader-label,
.theme-game .leader-summary .leader-placeholder,
.theme-game .ai-no-slot-hint,
.theme-game .setup-submit-bar .hint,
.theme-game .metric-card > span,
.theme-game .meta-grid > div > span,
.theme-game .notice-item small,
.theme-game .profile-country-live-preview .country-preview-label {
  color: var(--text-secondary) !important;
  opacity: 1;
}

.theme-game .compact-summary-grid > div > strong,
.theme-game .legal-consent-page .legal-version-grid > div > strong,
.theme-game .quota-panel strong,
.theme-game .leader-summary .leader-person strong,
.theme-game .metric-card > strong,
.theme-game .meta-grid > div > strong {
  color: var(--text-primary) !important;
}

.theme-game .leader-summary .return-up { color: var(--positive) !important; }
.theme-game .leader-summary .return-down { color: var(--negative) !important; }
.theme-game .leader-summary .return-flat { color: var(--text-secondary) !important; }

.theme-game .readonly-advanced-body input[disabled],
.theme-game .readonly-paid-preview-grid input[disabled],
.theme-game input:disabled,
.theme-game textarea:disabled,
.theme-game select:disabled {
  background: var(--surface-disabled) !important;
  color: var(--text-disabled) !important;
  -webkit-text-fill-color: var(--text-disabled) !important;
  border-color: var(--border-strong) !important;
  opacity: 1 !important;
}

.theme-game input::placeholder,
.theme-game textarea::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

.theme-game .advanced-readonly-panel summary,
.theme-game .readonly-advanced-body,
.theme-game .ai-selection-shell,
.theme-game .ai-fighter-selection-shell {
  color: var(--text-primary);
}

.theme-game .ai-dynamic-slot-head h3,
.theme-game .setup-submit-bar strong,
.theme-game .setup-submit-bar b {
  color: var(--text-primary);
}

.theme-game :focus-visible {
  outline-color: var(--focus-ring);
  outline-offset: 3px;
}

.operations-overview-grid .metric-card { min-width: 0; }
.operations-status-list { display: grid; gap: .55rem; margin: 0; }
.operations-status-list > div { display: grid; grid-template-columns: minmax(7rem, .7fr) minmax(0, 1.3fr); gap: .75rem; padding-bottom: .45rem; border-bottom: 1px solid var(--border-default); }
.operations-status-list dt { color: var(--text-secondary); }
.operations-status-list dd { margin: 0; overflow-wrap: anywhere; }

/* Explicit state-changing actions use POST forms; GET page loads stay read-only. */
.inline-action-form {
  display: inline-flex;
  margin: 0;
}

/* Canonical account nickname display inside league join forms. */
.form-readonly-field {
  display: grid;
  gap: .35rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}
.form-readonly-field span { color: var(--text-secondary); font-size: .9rem; }
.form-readonly-field strong { color: var(--text-primary); overflow-wrap: anywhere; }

/* Administrator database backup and storage controls. */
.admin-storage-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.admin-storage-action-grid > form {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: var(--surface-subtle);
}
.admin-storage-action-grid h3 { margin-top: 0; }
.admin-storage-metrics { margin-bottom: 1rem; }
.inline-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.inline-actions form { margin: 0; }
@media (max-width: 760px) {
  .admin-storage-action-grid { grid-template-columns: 1fr; }
}


/* 2026-07-23: directional market pulse, homepage return colors, and Deep Focus contrast. */
.activity-pulse-grid .home-best-return.return-up {
  color: #dc2626;
}
.activity-pulse-grid .home-best-return.return-down {
  color: #2563eb;
}
.activity-pulse-grid .home-best-return.return-flat {
  color: #111827;
}

/* Deep Focus uses dark surfaces, so the homepage must not inherit the default
   light-theme semantic text and panel tokens. Keep every hero/card layer at a
   verified high-contrast pairing without changing the other visual modes. */
.theme-balanced.home-page .landing-copy h1 {
  color: #f8fafc;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .24);
}
.theme-balanced.home-page .landing-copy p {
  color: #d8e2f0;
}
.theme-balanced.home-page .landing-copy .eyebrow {
  color: #7dd3fc;
}
.theme-balanced.home-page .landing-card {
  background: linear-gradient(180deg, rgba(22, 32, 51, .98), rgba(15, 23, 42, .98));
  border-color: #3b506e;
  color: #38bdf8;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
}
.theme-balanced.home-page .landing-card-head {
  color: #f8fafc;
}
.theme-balanced.home-page .landing-card-grid div {
  background: #111827;
  border-color: #3b506e;
}
.theme-balanced.home-page .landing-card-grid span {
  color: #cbd5e1;
}
.theme-balanced.home-page .landing-card-grid strong {
  color: #f8fafc;
}
.theme-balanced.home-page .activity-pulse {
  background: #0f172a;
  border-color: #3b506e;
  color: #f8fafc;
}
.theme-balanced.home-page .activity-pulse-head {
  color: #f8fafc;
}
.theme-balanced.home-page .activity-pulse p {
  color: #cbd5e1;
}
.theme-balanced.home-page .activity-pulse-grid div {
  background: #1e293b;
  border-color: #475569;
}
.theme-balanced.home-page .activity-pulse-grid strong {
  color: #f8fafc;
}
.theme-balanced.home-page .activity-pulse-grid span {
  color: #cbd5e1;
}
.theme-balanced.home-page .activity-pulse-grid .home-best-return.return-up {
  color: #f87171;
}
.theme-balanced.home-page .activity-pulse-grid .home-best-return.return-down {
  color: #60a5fa;
}
.theme-balanced.home-page .activity-pulse-grid .home-best-return.return-flat {
  color: #f8fafc;
}


/* 2026-07-23: runtime UX repair - compact multilingual navigation and contextual identities. */
@media (min-width: 1101px) {
  .topbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    padding-inline: clamp(20px, 2.2vw, 40px);
  }
  .topbar .brand { flex: 0 0 auto; white-space: nowrap; }
  .topbar .market-pulse {
    flex: 1 1 280px;
    min-width: 120px;
    max-width: none;
    margin-inline: clamp(80px, 5.5vw, 100px);
  }
  .topbar .navlinks {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 4px;
    white-space: nowrap;
  }
  .topbar .navlinks > a,
  .topbar .nav-menu-button { padding-inline: 8px; }
  html[lang="de"] .topbar .navlinks { font-size: 13px; }
  html[lang="de"] .topbar .nav-create-cta { padding-inline: 13px; }
}
.profile-menu-panel { min-width: 230px; }
.profile-menu-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-default);
}
.profile-menu-identity-copy { min-width: 0; flex: 1 1 auto; display: block; }
.profile-menu-identity-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.theme-balanced .profile-menu-identity-copy strong,
.theme-casino .profile-menu-identity-copy strong,
.theme-game .profile-menu-identity-copy strong { color: #f8fafc; }

.showcase-ranking-identity-compact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: help;
}
.showcase-ranking-identity-compact:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 8px;
}
.showcase-ranking-identity-compact > strong { white-space: nowrap; }
.showcase-ranking-ai-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-default));
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
}
.showcase-ranking-sprite-small {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-subtle) 88%, transparent);
  border: 1px solid var(--border-default);
}

.ga4-browser-diagnostic {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: 14px;
  background: var(--surface-subtle);
}
.ga4-browser-diagnostic h4 { margin: 0 0 6px; }
.ga4-browser-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.ga4-browser-diagnostic-grid span {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-card);
  color: var(--text-muted);
  font-size: 12px;
}
.ga4-browser-diagnostic-grid strong { color: var(--text-primary); overflow-wrap: anywhere; }

/* 2026-07-23: compact navigation and participant identity follow-up. */
.showcase-ranking-table .showcase-ranking-identity-compact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.showcase-ranking-table .showcase-ranking-identity-compact .ranking-nickname {
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.showcase-ranking-table .showcase-ranking-identity-compact .ranking-ai-icon,
.showcase-ranking-table .showcase-ranking-identity-compact .ranking-ai-character-icon {
  flex: 0 0 24px;
}
.showcase-ranking-table .showcase-ranking-identity-compact .ranking-ai-character-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 2026-07-23: topbar profile sizing, tier badge, identity icon parity, and ticker inset. */
.topbar .navlinks .nav-menu-button {
  box-sizing: border-box;
  min-height: 36px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.2;
  vertical-align: middle;
}
.topbar .profile-menu-button {
  gap: 7px;
  white-space: nowrap;
}
.topbar .profile-menu-label,
.topbar .profile-menu-caret {
  display: inline-flex;
  align-items: center;
  line-height: inherit;
}
.topbar .nav-account-tier-badge {
  flex: 0 0 auto;
  margin-left: 1px;
  padding: 2px 7px;
  font-size: 11px;
  line-height: 1.15;
}
.profile-menu-identity .profile-menu-flag,
.profile-menu-identity .profile-menu-level {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 1px !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 4px 10px rgba(15,23,42,.08) !important;
  box-sizing: border-box !important;
}
.profile-menu-identity .profile-menu-flag img,
.profile-menu-identity .profile-menu-level img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 7px !important;
}
.profile-menu-identity .profile-menu-flag img { object-fit: cover !important; }
.profile-menu-identity .profile-menu-level img {
  object-fit: contain !important;
  transform: scale(1.08);
  transform-origin: center;
}
@media (min-width: 1101px) {
  .topbar .market-pulse {
    margin-inline: clamp(80px, 5.5vw, 100px);
  }
}



/* 2026-07-23: align the contest trigger baseline while keeping the full desktop market ticker span. */
@media (min-width: 1101px) {
  .topbar .contest-nav-menu > .nav-menu-button {
    position: relative;
    top: 2px;
  }
}


/* 2026-07-24: profile identity details, compact icons, and highlighted contest creation action. */
.profile-menu-identity-copy {
  display: grid;
  gap: 3px;
}
.profile-menu-identity-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.theme-balanced .profile-menu-identity-meta,
.theme-casino .profile-menu-identity-meta,
.theme-game .profile-menu-identity-meta {
  color: #cbd5e1;
}
.nav-menu-panel .nav-menu-create-link {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-default));
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
}
.nav-menu-panel .nav-menu-create-link:hover,
.nav-menu-panel .nav-menu-create-link:focus-visible {
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-card));
  color: var(--accent-strong);
}
.theme-balanced .nav-menu-panel .nav-menu-create-link,
.theme-casino .nav-menu-panel .nav-menu-create-link,
.theme-game .nav-menu-panel .nav-menu-create-link {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: #f8fafc;
}

/* 2026-07-28: ranking daily-return charts, compact requirement strip, and unmet rank affordance. */
.league-hero-ranking-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  margin-top: -2px;
}
.league-hero-ranking-title {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
  white-space: nowrap;
}
.league-hero-ranking-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.league-hero-ranking-items > span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 5px 14px rgba(15,23,42,.04);
}
.league-hero-ranking-items small {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 750;
}
.league-hero-ranking-items strong {
  color: var(--text);
  font-size: .76rem;
  font-weight: 900;
}
.league-ranking-table .rank-col { width: 8%; }
.league-ranking-table .nickname-col { width: 18%; }
.league-ranking-table .value-col { width: 12%; }
.league-ranking-table .cash-col { width: 12%; }
.league-ranking-table .return-col { width: 8%; }
.league-ranking-table .daily-return-col { width: 15%; min-width: 126px; }
.league-ranking-table .symbols-col { width: 27%; }
.league-ranking-table td:nth-child(7),
.league-ranking-table th:nth-child(7) { width: auto; }
.ranking-unmet-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, #d97706 42%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 14%, var(--panel));
  color: #92400e;
  font-size: .75rem !important;
  font-weight: 900 !important;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
  user-select: none;
}
.ranking-unmet-badge:focus-visible {
  outline: 3px solid color-mix(in srgb, #f59e0b 34%, transparent);
  outline-offset: 2px;
}
.ranking-daily-return-cell {
  min-width: 126px;
  text-align: center;
}
/* Ranking direction colors follow the Korean market convention requested
   for this product: up=red, down=blue, flat=black.  These ranking-scoped
   rules intentionally override the generic Game Mode positive/negative
   palette so the number and its sparkline always agree. */
.league-ranking-table .return-up { color: #dc2626 !important; }
.league-ranking-table .return-down { color: #2563eb !important; }
.league-ranking-table .return-flat { color: #111827 !important; }
.ranking-daily-return-chart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 36px;
  color: #111827;
}
.ranking-daily-return-chart.is-positive { color: #dc2626; }
.ranking-daily-return-chart.is-negative { color: #2563eb; }
.ranking-daily-return-chart.is-flat { color: #111827; }
.ranking-daily-return-chart svg {
  display: block;
  width: 116px;
  height: 34px;
  overflow: visible;
}
.ranking-daily-return-zero {
  stroke: rgba(100,116,139,.28);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.ranking-daily-return-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ranking-daily-return-dot {
  fill: currentColor;
  stroke: rgba(255,255,255,.9);
  stroke-width: 1.2;
}
.theme-game .league-hero-ranking-title,
.theme-game .league-hero-ranking-items small { color: #b9cbea; }
.theme-game .league-hero-ranking-items > span {
  background: rgba(16,27,48,.9);
  border-color: rgba(125,211,252,.22);
}
.theme-game .league-hero-ranking-items strong { color: #f8fafc; }
.theme-game .ranking-unmet-badge {
  color: #fde68a !important;
  background: rgba(217,119,6,.16);
  border-color: rgba(251,191,36,.36);
  text-shadow: none !important;
}
.theme-game .ranking-daily-return-zero { stroke: rgba(203,213,225,.28); }
.theme-game .ranking-daily-return-dot { stroke: rgba(15,23,42,.72); }
@media (max-width: 980px) {
  .league-hero-ranking-strip { justify-content: flex-start; align-items: flex-start; }
  .league-hero-ranking-items { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .league-hero-ranking-strip { flex-direction: column; gap: 6px; }
  .league-hero-ranking-items { width: 100%; }
  .league-hero-ranking-items > span { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 760px) {
  .league-ranking-table .ranking-daily-return-cell { align-items: center !important; }
  .league-ranking-table .ranking-daily-return-chart { justify-self: end; }
  .league-ranking-table td:first-child .ranking-unmet-badge {
    justify-self: start;
    color: #92400e;
  }
}
@media (max-width: 420px) {
  .league-ranking-table .ranking-daily-return-chart { justify-self: start; }
}

/* 2026-07-29: explicit symbol-search action and centered search progress. */
.trade-symbol-search-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-top: 2px;
}
.mobile-order-form .trade-symbol-search-row .trade-symbol-field {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}
.trade-symbol-search-button {
  min-width: 92px;
  white-space: nowrap;
}
.symbol-search-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--surface-inverse) 18%, transparent);
  backdrop-filter: blur(2px);
}
.symbol-search-progress-overlay[hidden] {
  display: none !important;
}
.symbol-search-progress-card {
  width: min(360px, calc(100vw - 40px));
  padding: 20px;
  border: 1px solid var(--border-default);
  border-radius: 18px;
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
  text-align: center;
}
.symbol-search-progress-card strong {
  display: block;
  margin-bottom: 12px;
}
.symbol-search-progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-muted);
}
.symbol-search-progress-track span {
  position: absolute;
  inset-block: 0;
  left: -45%;
  width: 45%;
  border-radius: inherit;
  background: var(--accent);
  animation: symbolSearchProgress 1.05s ease-in-out infinite;
}
@keyframes symbolSearchProgress {
  0% { transform: translateX(0); }
  100% { transform: translateX(325%); }
}
@media (max-width: 520px) {
  .trade-symbol-search-row {
    grid-template-columns: 1fr;
  }
  .trade-symbol-search-button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .symbol-search-progress-track span {
    animation-duration: 2.2s;
  }
}
.theme-game .symbol-search-progress-card {
  background: #0e1b31;
  color: #f8fafc;
  border-color: #425d86;
}
.theme-game .symbol-search-progress-track {
  background: #1f3150;
}
.theme-game .symbol-search-progress-track span {
  background: #67e8f9;
}

/* 2026-07-31: newest real public-league ticker inside the homepage performance card. */
.home-recent-league-ticker {
  position: relative;
  height: 38px;
  min-height: 38px;
  margin: 0 0 13px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 7%, var(--card));
  color: var(--text);
}
.home-recent-league-ticker::before,
.home-recent-league-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  z-index: 2;
  pointer-events: none;
}
.home-recent-league-ticker::before {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--card) 96%, transparent), transparent);
}
.home-recent-league-ticker::after {
  right: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--card) 96%, transparent), transparent);
}
.home-recent-league-track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: homeRecentLeagueScroll 32s linear infinite;
}
.home-recent-league-track.is-measured-marquee {
  animation: none;
}
.home-recent-league-group {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
  padding: 0 24px 0 12px;
}
.home-recent-league-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: -.01em;
}
.home-recent-league-item::after {
  content: "•";
  margin-left: 16px;
  color: color-mix(in srgb, var(--brand) 42%, var(--line));
}
.home-recent-league-item strong {
  color: var(--text);
  font-size: 12px;
}
.home-recent-league-item em {
  font-style: normal;
}
.home-recent-league-return {
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.home-recent-league-return.up { color: #dc2626; }
.home-recent-league-return.down { color: #2563eb; }
.home-recent-league-return.flat { color: var(--muted); }
.home-recent-league-return.pending {
  color: var(--muted);
  font-weight: 800;
}
@keyframes homeRecentLeagueScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
body.home-page:not(.theme-game) .landing-card .landing-chart {
  margin: 10px 0;
}
body.home-page:not(.theme-game) .landing-card .landing-chart svg {
  width: 100%;
  height: 154px;
}
.theme-balanced.home-page .home-recent-league-ticker {
  background: #111827;
  border-color: #3b506e;
}
.theme-balanced.home-page .home-recent-league-ticker::before {
  background: linear-gradient(90deg, #111827, transparent);
}
.theme-balanced.home-page .home-recent-league-ticker::after {
  background: linear-gradient(270deg, #111827, transparent);
}
.theme-balanced.home-page .home-recent-league-item strong { color: #f8fafc; }
.theme-balanced.home-page .home-recent-league-return.pending,
.theme-balanced.home-page .home-recent-league-return.flat { color: #cbd5e1; }
.theme-casino.home-page .home-recent-league-ticker {
  background: #211307;
  border-color: rgba(255,213,103,.48);
}
.theme-casino.home-page .home-recent-league-ticker::before {
  background: linear-gradient(90deg, #211307, transparent);
}
.theme-casino.home-page .home-recent-league-ticker::after {
  background: linear-gradient(270deg, #211307, transparent);
}
.theme-casino.home-page .home-recent-league-item strong { color: #fffbe8; }
.theme-casino.home-page .home-recent-league-return.pending,
.theme-casino.home-page .home-recent-league-return.flat { color: #ffe6a7; }
@media (max-width: 640px) {
  .home-recent-league-track { animation-duration: 44s; }
  body.home-page:not(.theme-game) .landing-card .landing-chart svg { height: 138px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-recent-league-track { animation-duration: 60s; }
}


/* 2026-07-31: render a single stable fallback when no traded public league exists. */
.home-recent-league-ticker-empty {
  justify-content: center;
}
.home-recent-league-empty {
  position: relative;
  z-index: 3;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

/* Daily database storage history */
.database-storage-history-card .section-title-row { align-items: flex-start; gap: 1rem; }
.database-storage-history-summary { display: grid; gap: .2rem; min-width: 190px; padding: .7rem .9rem; border: 1px solid rgba(99,102,241,.18); border-radius: 14px; background: rgba(238,242,255,.62); text-align: right; }
.database-storage-history-summary span { color: var(--muted, #64748b); font-size: .78rem; }
.database-storage-history-summary strong { font-size: .9rem; }
.admin-storage-history-metrics { margin: 1rem 0; }
.storage-growth-positive { color: #c2410c !important; }
.database-storage-bar-chart { display: flex; align-items: end; gap: .38rem; min-height: 190px; padding: 1rem .75rem .45rem; margin: 1rem 0; overflow-x: auto; border: 1px solid rgba(148,163,184,.22); border-radius: 18px; background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(238,242,255,.5)); }
.database-storage-bar-column { display: grid; grid-template-rows: 1.2rem minmax(90px, 145px) 1.2rem; align-items: end; justify-items: center; flex: 1 0 34px; min-width: 34px; height: 170px; }
.database-storage-bar-value { font-size: .66rem; color: var(--muted, #64748b); white-space: nowrap; }
.database-storage-bar { width: min(24px, 72%); min-height: 7px; max-height: 145px; align-self: end; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #818cf8, #4f46e5); box-shadow: 0 5px 14px rgba(79,70,229,.18); }
.database-storage-bar-column small { font-size: .64rem; color: var(--muted, #64748b); white-space: nowrap; }
@media (max-width: 760px) {
  .database-storage-history-card .section-title-row { display: grid; }
  .database-storage-history-summary { min-width: 0; text-align: left; }
  .database-storage-bar-chart { min-height: 170px; }
}


/* 2026-07-31: keep long symbol candidates inside the trade column and require 3-character searches. */
.trade-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0;
}
.trade-workspace > *,
.trade-panel.mobile-trade-card,
.trade-panel.mobile-trade-card .form-stack,
.trade-panel.mobile-trade-card .symbol-helper {
  min-width: 0;
  max-width: 100%;
}
.trade-panel.mobile-trade-card { overflow-x: hidden; }
.symbol-search-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.symbol-result-chip {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  justify-content: flex-start;
  text-align: left;
}
.symbol-result-chip strong { flex: 0 0 auto; }
.symbol-result-chip span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-symbol-min-hint {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  font-size: 12px;
}
.trade-symbol-min-hint.is-active { color: var(--warning-text); }
@media (max-width: 760px) {
  .trade-workspace { display: flex; }
}


/* 2026-07-31: accessible AI character profile tooltip on ordinary league pages. */
.ai-character-profile-trigger {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  cursor: help;
  vertical-align: middle;
  -webkit-tap-highlight-color: rgba(37, 99, 235, .16);
}
.ai-character-profile-trigger:focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 3px;
  border-radius: 999px;
}
.ai-character-profile-trigger[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
  border-radius: 999px;
}
.ai-character-profile-name-trigger {
  display: inline-block;
  width: auto;
  max-width: 11ch;
  height: auto;
  min-height: 0;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-character-profile-name-trigger:hover,
.ai-character-profile-name-trigger:focus-visible,
.ai-character-profile-name-trigger[aria-expanded="true"] {
  text-decoration: underline dotted currentColor;
  text-underline-offset: .2em;
}
.ai-trade-history-table .ai-character-profile-name-trigger {
  max-width: 18ch;
  font-weight: 800;
}
.mobile-tap-tooltip {
  white-space: pre-line;
}
.theme-game .ai-character-profile-trigger {
  background: transparent;
  color: inherit;
  border: 0;
  box-shadow: none;
}
.theme-game .ai-character-profile-trigger:hover,
.theme-game .ai-character-profile-trigger:focus {
  background: transparent;
  filter: none;
}

/* 2026-07-31: first-screen reassurance that the core league flow is available on a general account. */
.home-free-account-note {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 14px;
  padding: .56rem .84rem;
  border: 1px solid color-mix(in srgb, var(--ok, #07845f) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok, #07845f) 8%, var(--card));
  color: color-mix(in srgb, var(--ok, #07845f) 82%, var(--text));
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.4;
  text-wrap: balance;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}
.home-free-account-note-icon {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ok, #07845f);
  color: #fff;
  font-size: .82rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #07845f) 14%, transparent);
}
.theme-game .home-free-account-note {
  border-color: rgba(80, 232, 190, .34);
  background: rgba(20, 76, 66, .46);
  color: #c9fff0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.12);
}
.theme-game .home-free-account-note-icon {
  background: #37d9aa;
  color: #062b22;
  box-shadow: 0 0 0 3px rgba(55, 217, 170, .14), 0 0 18px rgba(55, 217, 170, .20);
}
@media (max-width: 520px) {
  .home-free-account-note {
    width: 100%;
    align-items: flex-start;
    border-radius: 16px;
    font-size: .88rem;
  }
  .home-free-account-note-icon { margin-top: .04rem; }
}


/* 2026-07-31: explain the rolling maximum-return metric without lengthening the card copy. */
.home-return-metric {
  min-width: 0;
  cursor: help;
  border-radius: 12px;
  outline: none;
}
.home-return-metric > span {
  text-decoration: underline dotted color-mix(in srgb, currentColor 52%, transparent);
  text-underline-offset: .22em;
}
.home-return-metric:hover,
.home-return-metric:focus-visible {
  background: color-mix(in srgb, var(--brand, #2563eb) 6%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #2563eb) 13%, transparent);
}