/*
 * Baseball Project UI Polish V2
 * Direction: premium console-style sports dashboard.
 * This file intentionally loads last and refines the existing components
 * without changing their data bindings or JavaScript behavior.
 */

:root {
  color-scheme: dark;
  --canvas: #07090d;
  --surface: #12161d;
  --surface-raised: #171c24;
  --surface-hover: #1d2530;
  --surface-soft: #0d1117;
  --white: #f7f8fa;
  --muted: #9aa3b2;
  --mint: #69d9b6;
  --mint-border: #2b8e72;
  --violet: #0070d1;
  --violet-rule: rgba(83, 177, 255, .32);
  --blue-hover: #53b1ff;
  --yellow: #f5c451;
  --orange: #ff9a52;
  --pink: #ff709f;
  --red: #ff626d;
  --green: #45d483;
  --ui-primary: #0070d1;
  --ui-primary-hover: #147fdb;
  --ui-primary-pressed: #0064b7;
  --ui-primary-soft: rgba(0, 112, 209, .16);
  --ui-focus: #53b1ff;
  --ui-border: rgba(255, 255, 255, .13);
  --ui-border-strong: rgba(255, 255, 255, .23);
  --ui-text-secondary: rgba(247, 248, 250, .66);
  --ui-text-tertiary: rgba(247, 248, 250, .46);
  --ui-radius-input: 4px;
  --ui-radius-card: 8px;
  --ui-radius-feature: 16px;
  --ui-radius-pill: 999px;
  --radius-card: var(--ui-radius-card);
  --radius-feature: var(--ui-radius-feature);
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--canvas);
}

body {
  min-width: 320px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 112, 209, .10), transparent 30rem),
    radial-gradient(circle at 92% 18%, rgba(105, 217, 182, .05), transparent 26rem),
    var(--canvas);
  color: var(--white);
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ui-focus) !important;
  outline-offset: 3px !important;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed !important;
  opacity: .44;
}

::selection {
  background: rgba(83, 177, 255, .34);
  color: #fff;
}

.shell {
  width: min(1280px, calc(100% - 64px));
}

section[id] {
  scroll-margin-top: 88px;
}

.mono,
.eyebrow,
.ticker-label,
.status-label,
.date,
.nav-link {
  letter-spacing: .09em;
}

.eyebrow {
  color: var(--blue-hover);
  font-size: 10px;
  font-weight: 750;
}

/* Header and navigation */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 72px;
  border-bottom: 0;
  isolation: isolate;
}

.topbar::before {
  position: absolute;
  inset: 0 50% 0 auto;
  z-index: -1;
  width: 100vw;
  border-bottom: 1px solid var(--ui-border);
  background: rgba(7, 9, 13, .88);
  content: "";
  transform: translateX(50%);
  backdrop-filter: blur(18px) saturate(135%);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
}

.brand span {
  margin: 0 2px;
  color: var(--blue-hover);
}

.nav {
  gap: 6px;
}

.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ui-radius-pill);
  padding: 0 14px;
  color: var(--ui-text-secondary);
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 650;
  text-transform: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.nav-link:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.nav-link.active {
  background: var(--ui-primary-soft);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(83, 177, 255, .34);
}

.button {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-pill);
  padding: 0 22px;
  font: 750 13px/1 Inter, "Noto Sans TC", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.button-primary {
  background: var(--ui-primary);
  color: #fff;
}

.button-primary:hover {
  border-color: transparent;
  background: var(--ui-primary-hover);
  color: #fff;
  box-shadow: none;
}

.button-primary:active {
  background: var(--ui-primary-pressed);
  transform: translateY(1px);
}

/* Masthead and live ticker */
.masthead {
  position: relative;
  min-height: 310px;
  padding: 64px 0 32px;
  align-items: end;
}

.masthead h1 {
  max-width: 900px;
  font-family: "Arial Black", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: clamp(64px, 9.25vw, 124px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .88;
  text-wrap: balance;
}

.masthead .meta {
  min-width: 232px;
  margin: 0 0 4px;
  border-left: 2px solid var(--ui-primary);
  padding: 12px 0 12px 16px;
  color: var(--ui-text-secondary);
  font-size: 13px;
  text-align: left;
}

.masthead .meta strong {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--blue-hover);
}

.ticker {
  min-height: 48px;
  margin-bottom: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: #eef4f8;
  color: #14263a;
  scrollbar-width: none;
}

.ticker::-webkit-scrollbar {
  display: none;
}

.ticker-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  background: var(--ui-primary);
  color: #fff;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: none;
}

.ticker-track {
  min-width: max-content;
  gap: 48px;
  padding: 0 24px;
  color: #14263a;
  font-size: 13px;
}

.ticker-track span {
  color: #14263a;
}

.ticker-track b {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f5c451;
  color: #14263a;
  font-weight: 850;
}
}

/* Hero */
.hero-grid {
  grid-template-columns: minmax(0, 1.58fr) minmax(310px, .82fr);
  gap: 16px;
}

.card,
.profile-panel,
.roster-panel,
.active-player-panel {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface);
}

.card {
  padding: 24px;
}

.feature {
  min-height: 430px;
  grid-template-columns: minmax(0, 1.08fr) minmax(230px, .72fr);
  gap: 24px;
  border: 1px solid rgba(83, 177, 255, .32);
  border-left: 3px solid var(--ui-primary);
  border-radius: var(--ui-radius-feature);
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(0, 112, 209, .22), transparent 48%),
    var(--surface);
}

.feature h2 {
  max-width: 660px;
  margin: 18px 0;
  font-size: clamp(36px, 3.6vw, 54px);
  font-weight: 780;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.feature p {
  max-width: 590px;
  color: var(--ui-text-secondary);
  font-size: 15px;
}

.feature-footer {
  border-top: 1px solid var(--ui-border);
  padding-top: 16px;
}

.date {
  color: var(--ui-text-tertiary);
}

.score-chip {
  border: 1px solid rgba(83, 177, 255, .55);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary-soft);
  color: #fff;
  padding: 8px 13px;
}

.avatar-stage {
  border: 1px solid var(--ui-border-strong);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 28%, rgba(83, 177, 255, .16), transparent 34%),
    linear-gradient(180deg, #111722, #080a0e);
}

.avatar-stage::after {
  color: var(--blue-hover);
}

.avatar-profile {
  top: 16px;
  right: 16px;
}

.avatar-profile span {
  color: var(--ui-text-tertiary);
}

.side-stack {
  gap: 16px;
}

.pitcher-card,
.leaderboard,
.calendar-card {
  background: var(--surface);
  color: var(--white);
}

.section-title {
  align-items: center;
  margin-bottom: 18px;
}

.section-title h3 {
  font-size: 19px;
  font-weight: 720;
}

.section-title a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ui-radius-pill);
  padding: 0 10px;
  color: var(--blue-hover);
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

.section-title a:hover {
  background: var(--ui-primary-soft);
  color: #fff;
}

.pitcher {
  min-height: 62px;
  border-top: 1px solid var(--ui-border);
}

.status-light {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 4px rgba(69, 212, 131, .10);
}

.status-light.warn {
  box-shadow: 0 0 0 4px rgba(245, 196, 81, .10);
}

.status-light.stop {
  box-shadow: 0 0 0 4px rgba(255, 98, 109, .10);
}

.status-label.ok {
  color: var(--green);
}

.leaderboard {
  border: 1px solid var(--ui-border);
}

.leaderboard .section-title a {
  color: var(--blue-hover);
}

.leaders {
  gap: 8px;
}

.leader {
  min-width: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  padding: 14px 12px;
  background: var(--surface-raised);
}

.leader b {
  color: var(--blue-hover);
  font-size: clamp(24px, 2.3vw, 32px);
}

.leader span {
  color: var(--ui-text-secondary);
}

.leader small {
  color: var(--white);
}

/* Player profile */
.player-dashboard,
.player-data-center,
.character-lab {
  margin-top: 24px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-feature);
  background: var(--surface-soft);
}

.player-dashboard {
  padding: 32px;
}

.player-dashboard-head {
  gap: 32px;
  border-bottom: 1px solid var(--ui-border);
  padding-bottom: 28px;
}

.player-dashboard-head h2 {
  margin: 12px 0 20px;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 760;
  letter-spacing: -.045em;
  line-height: .95;
}

.player-dashboard-head h2 small {
  color: var(--ui-text-tertiary);
  font-size: 12px;
}

.player-tag {
  min-height: 32px;
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text-secondary);
  padding: 7px 11px;
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 11px;
  letter-spacing: .02em;
}

.player-tag.accent {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}

.player-tag.status {
  border-color: rgba(69, 212, 131, .45);
  background: rgba(69, 212, 131, .08);
  color: var(--green);
}

.player-facts,
.performance-stats,
.active-player-metrics,
.wiki-preview-summary {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: rgba(255, 255, 255, .02);
}

.player-facts div,
.performance-stats > div,
.active-player-metrics div,
.wiki-preview-summary div {
  border-color: var(--ui-border);
}

.player-facts dt,
.performance-stats span {
  color: var(--ui-text-tertiary);
}

.profile-panel {
  padding: 24px;
  background: var(--surface);
}

.panel-heading {
  align-items: center;
  margin-bottom: 20px;
}

.panel-heading h3 {
  font-size: 24px;
  font-weight: 720;
}

.sample-badge,
.level-badge,
.honor-count,
.overall-score {
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-text-secondary);
  padding: 8px 11px;
}

.sample-badge {
  border-color: rgba(245, 196, 81, .45);
  background: rgba(245, 196, 81, .09);
  color: var(--yellow);
}

.level-badge {
  border-color: rgba(83, 177, 255, .45);
  background: var(--ui-primary-soft);
  color: var(--blue-hover);
}

.honor-count,
.overall-score {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}

.performance-panel {
  border-color: rgba(83, 177, 255, .30);
}

.performance-stats strong {
  color: var(--blue-hover);
}

.current-team-row {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface-raised);
}

.recent-summary {
  color: var(--ui-text-secondary);
}

.radar-panel {
  border-color: rgba(83, 177, 255, .28);
  background:
    radial-gradient(circle at 50% 60%, rgba(0, 112, 209, .17), transparent 58%),
    var(--surface);
}

.radar-panel .eyebrow {
  color: var(--blue-hover);
}

.radar-grid polygon,
.radar-grid path {
  stroke: rgba(255, 255, 255, .19);
}

.radar-grid .radar-value {
  fill: rgba(83, 177, 255, .22);
  stroke: var(--blue-hover);
}

.radar-points circle {
  fill: var(--blue-hover);
  stroke: var(--surface);
}

.career-timeline::before {
  background: rgba(83, 177, 255, .28);
}

.career-timeline li::before {
  background: var(--ui-primary);
  box-shadow: 0 0 0 4px var(--ui-primary-soft);
}

.career-timeline time {
  color: var(--blue-hover);
}

.career-timeline span {
  color: var(--ui-text-tertiary);
}

.honor-item,
.honor-item.gold,
.honor-item.mint,
.honor-item.violet,
.honor-item.pink {
  min-height: 84px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface-raised);
  color: var(--white);
}

.honor-item.gold { border-left: 3px solid var(--yellow); }
.honor-item.mint { border-left: 3px solid var(--green); }
.honor-item.violet { border-left: 3px solid var(--blue-hover); }
.honor-item.pink { border-left: 3px solid var(--pink); }
.honor-item > span { color: var(--ui-text-tertiary); }
.honor-item small { color: var(--ui-text-secondary); }

/* Honors must remain legible regardless of legacy color classes. */
.honors-panel .honor-item,
.honors-panel .honor-item.gold,
.honors-panel .honor-item.mint,
.honors-panel .honor-item.violet,
.honors-panel .honor-item.pink {
  min-height: 88px;
  border-color: #dbe5ef;
  background: linear-gradient(135deg, #ffffff, #f4f8fc);
  box-shadow: 0 8px 18px rgba(20, 52, 82, .08);
  color: #1f3a56;
}
.honors-panel .honor-item b { color: #1f3a56; font-weight: 800; }
.honors-panel .honor-item small { color: #64788d; font-weight: 700; }
.honors-panel .honor-item .honor-badge { display: grid; place-items: center; align-content: center; gap: 1px; width: 42px; min-height: 52px; border-radius: 14px; background: #edf3f8; color: #1f3a56; font-style: normal; }
.honors-panel .honor-badge i { font-size: 20px; line-height: 1; font-style: normal; }
.honors-panel .honor-badge em { color: #64788d; font: 800 10px/1 var(--ui-mono); letter-spacing: .08em; }
.honors-panel .honor-item.gold { border-left-color: #d7a800; }.honors-panel .honor-item.gold .honor-badge { background: #fff4c9; }
.honors-panel .honor-item.mint { border-left-color: #1eaa7a; }.honors-panel .honor-item.mint .honor-badge { background: #dff8ee; }
.honors-panel .honor-item.violet { border-left-color: #3d7fd1; }.honors-panel .honor-item.violet .honor-badge { background: #e5f0ff; }
.honors-panel .honor-item.pink { border-left-color: #d95d8d; }.honors-panel .honor-item.pink .honor-badge { background: #ffe8f0; }

/* Player data manager */
.player-data-center {
  padding: 32px;
  color: var(--white);
}

.data-center-head {
  align-items: center;
  border-bottom: 1px solid var(--ui-border);
  padding-bottom: 24px;
}

.data-center-head h2 {
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1;
}

.data-center-head p {
  color: var(--ui-text-secondary);
}

.data-center-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.data-action,
.record-add,
.record-remove,
.media-remove,
.creator-action,
.game-import-bar label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--white);
  padding: 9px 15px;
  font: 700 11px/1.2 Inter, "Noto Sans TC", sans-serif;
  letter-spacing: .015em;
  text-transform: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.data-action:hover,
.record-add:hover,
.record-remove:hover,
.media-remove:hover,
.creator-action:hover,
.game-import-bar label:hover {
  border-color: rgba(83, 177, 255, .62);
  background: var(--ui-primary-soft);
  color: #fff;
}

.data-action:active,
.record-add:active,
.record-remove:active,
.media-remove:active,
.creator-action:active {
  transform: translateY(1px);
}

.data-action.primary,
.data-action.violet,
.record-add,
.creator-action[data-avatar-save],
.game-import-bar label {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}

.data-action.primary:hover,
.data-action.violet:hover,
.record-add:hover,
.creator-action[data-avatar-save]:hover,
.game-import-bar label:hover {
  border-color: var(--ui-primary-hover);
  background: var(--ui-primary-hover);
}

.data-action.google {
  border-color: rgba(255, 255, 255, .84);
  background: #fff;
  color: #11141a;
}

.data-action.google:hover {
  border-color: #fff;
  background: #e9edf3;
  color: #11141a;
}

.data-action.danger,
.record-remove,
.media-remove {
  border-color: rgba(255, 98, 109, .52);
  background: rgba(255, 98, 109, .05);
  color: #ff7a83;
}

.data-action.danger:hover,
.record-remove:hover,
.media-remove:hover {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.data-center-grid {
  grid-template-columns: minmax(270px, .64fr) minmax(0, 1.36fr);
  gap: 16px;
  padding-top: 16px;
}

.roster-panel,
.active-player-panel {
  padding: 20px;
  background: var(--surface);
}

.roster-search input,
.cloud-auth-actions input,
.wiki-url-field input,
.wiki-url-field textarea,
.editor-field input,
.editor-field select,
.editor-field textarea,
.conflict-row select {
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-input);
  background: #0b0f15;
  color: var(--white);
}

.roster-search input {
  border-radius: var(--ui-radius-card);
}

.roster-search::before {
  color: var(--blue-hover);
}

.roster-search input:focus,
.cloud-auth-actions input:focus,
.wiki-url-field input:focus,
.wiki-url-field textarea:focus,
.editor-field input:focus,
.editor-field select:focus,
.editor-field textarea:focus {
  border-color: var(--ui-focus);
  outline: 2px solid rgba(83, 177, 255, .28);
  outline-offset: 1px;
}

.roster-count {
  border-radius: var(--ui-radius-card);
  background: var(--ui-primary);
}

.roster-list {
  scrollbar-color: var(--ui-primary) var(--surface-soft);
}

.roster-empty {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-card);
  color: var(--ui-text-tertiary);
}

.roster-card {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface-soft);
}

.roster-card:hover {
  border-color: rgba(83, 177, 255, .50);
  background: var(--surface-hover);
}

.roster-card[aria-current="true"] {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
}

.roster-number {
  background: var(--ui-primary);
  color: #fff;
}

.roster-card small,
.active-player-english,
.data-status-row,
.cloud-sync-panel > p,
.cloud-sync-panel > small,
.wiki-import-preview > p,
.wiki-batch-results > p,
.batch-result span,
.conflict-row small,
.media-card-text small,
.media-limit-note,
.game-import-bar small {
  color: var(--ui-text-tertiary);
}

.roster-card-meta span {
  border-color: var(--ui-border);
  color: var(--ui-text-secondary);
}

.active-player-panel {
  border-color: rgba(83, 177, 255, .36);
}

.active-id,
.active-player-metrics strong,
.db-indicator,
.cloud-auth-summary strong,
.wiki-import-head > a,
.wiki-import-preview a,
.wiki-preview-summary strong,
.wiki-batch-panel summary,
.ability-control output {
  color: var(--blue-hover);
}

.cloud-sync-panel,
.wiki-importer {
  margin-top: 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface);
}

.cloud-sync-panel {
  border-left: 3px solid var(--green);
}

.wiki-importer {
  border-left: 3px solid var(--ui-primary);
}

.cloud-state,
.cloud-state[data-state="online"],
.cloud-state[data-state="syncing"],
.cloud-state[data-state="error"] {
  border-radius: var(--ui-radius-pill);
}

.cloud-state[data-state="online"] {
  border-color: rgba(69, 212, 131, .50);
  background: rgba(69, 212, 131, .08);
  color: var(--green);
}

.cloud-state[data-state="syncing"] {
  border-color: rgba(245, 196, 81, .50);
  background: rgba(245, 196, 81, .08);
  color: var(--yellow);
}

.cloud-state[data-state="error"] {
  border-color: rgba(255, 98, 109, .50);
  background: rgba(255, 98, 109, .08);
  color: var(--red);
}

.cloud-auth-panel,
.wiki-import-preview,
.wiki-batch-panel,
.wiki-conflict-panel {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface-soft);
}

.wiki-tag-list span {
  border-color: rgba(83, 177, 255, .36);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary-soft);
}

.batch-result {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
}

.batch-result.ok {
  border-color: rgba(69, 212, 131, .46);
}

.batch-result.error {
  border-color: rgba(255, 98, 109, .52);
}

.record-row,
.empty-editor,
.upload-zone,
.game-import-bar {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface);
  color: var(--white);
}

.record-index {
  background: var(--ui-primary);
}

.media-remove {
  min-height: 38px;
  background: transparent;
}

.ability-control {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface-soft);
}

.ability-control input,
.slider-control input[type="range"] {
  accent-color: var(--ui-primary);
}

.upload-zone,
.game-import-bar {
  border-style: dashed;
  border-color: rgba(83, 177, 255, .48);
}

.media-card {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface-soft);
}

/* Character creator */
.character-lab {
  grid-template-columns: minmax(230px, .50fr) minmax(0, 1.50fr);
  gap: 32px;
  align-items: start;
  padding: 32px;
  background:
    linear-gradient(135deg, rgba(0, 112, 209, .10), transparent 26rem),
    var(--surface-soft);
  color: var(--white);
}

.character-lab > div:first-child {
  position: sticky;
  top: 104px;
}

.character-lab .eyebrow {
  color: var(--blue-hover);
}

.character-lab h2 {
  margin: 14px 0;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 760;
  letter-spacing: -.04em;
  line-height: 1;
}

.character-lab p {
  color: var(--ui-text-secondary);
  font-size: 14px;
}

.character-note {
  border: 1px solid rgba(83, 177, 255, .42);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary-soft);
  color: var(--blue-hover);
  padding: 9px 12px;
}

.creator-workbench {
  gap: 16px;
}

.creator-preview {
  min-height: 420px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
}

.creator-preview .avatar-stage {
  min-height: 386px;
}

.creator-summary strong {
  color: var(--blue-hover);
}

.creator-summary span,
.creator-summary small {
  color: var(--ui-text-tertiary);
}

.creator-status {
  color: var(--green);
}

.creator-controls {
  gap: 18px 20px;
}

.creator-label {
  color: var(--ui-text-secondary);
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 11px;
  letter-spacing: .035em;
}

.creator-label > span {
  color: #fff;
}

.creator-label em {
  color: var(--blue-hover);
  opacity: 1;
}

.creator-option,
.editor-tab {
  min-height: 44px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-text-secondary);
  padding: 9px 13px;
  font: 650 12px/1.2 Inter, "Noto Sans TC", sans-serif;
  letter-spacing: .015em;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.creator-option:hover,
.editor-tab:hover {
  border-color: rgba(83, 177, 255, .58);
  background: var(--ui-primary-soft);
  color: #fff;
}

.creator-option[aria-pressed="true"],
.editor-tab[aria-selected="true"] {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
}

.swatch {
  border-color: rgba(255, 255, 255, .42);
}

.editor-tabs {
  gap: 6px;
  padding: 2px 0 8px;
}

.editor-pane {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface);
  color: var(--white);
  padding: 20px;
}

.editor-field > span,
.editor-pane-title span,
.team-id-field > span,
.wiki-url-field > span {
  color: var(--ui-text-secondary);
}

.editor-field small {
  color: var(--ui-text-tertiary);
}

.appearance-extra {
  border-top-color: var(--ui-border);
}

.equipment-chip {
  border: 1px solid rgba(83, 177, 255, .35);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary-soft);
  color: var(--blue-hover);
}

.editor-toggle {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface-soft);
  color: var(--ui-text-secondary);
}

.editor-toggle:hover {
  border-color: rgba(83, 177, 255, .52);
  background: var(--surface-hover);
  color: #fff;
}

.editor-toggle:has(input:checked) {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  color: #fff;
}

.editor-toggle input {
  accent-color: var(--ui-primary);
}

.advanced-section {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface);
}

.advanced-section summary {
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-weight: 700;
}

.advanced-section summary small,
.slider-meta output {
  color: var(--blue-hover);
}

.advanced-help,
.slider-scale {
  color: var(--ui-text-tertiary);
}

.slider-grid {
  border-color: var(--ui-border);
  background: var(--ui-border);
}

.slider-control {
  background: var(--surface-soft);
}

.avatar-json-panel {
  border-top-color: var(--ui-border);
}

.avatar-json-panel pre {
  border: 1px solid var(--ui-border);
  background: #080b10;
}

/* Activity stream and schedule */
.main-grid {
  gap: 32px;
  padding: 64px 0 80px;
}

.stream-heading {
  border-bottom: 1px solid var(--ui-border);
}

.stream-heading h2 {
  font-size: 32px;
  font-weight: 730;
  letter-spacing: -.025em;
}

.story-stream {
  border-left-color: rgba(83, 177, 255, .30);
}

.stream-card,
.stream-card.mint,
.stream-card.orange {
  min-height: 140px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--surface);
  color: var(--white);
}

.stream-card.mint {
  border-left: 3px solid var(--green);
}

.stream-card.orange {
  border-left: 3px solid var(--orange);
}

.stream-card:hover {
  border-color: rgba(83, 177, 255, .42);
  background: var(--surface-hover);
}

.stream-card:hover h3 {
  color: var(--blue-hover);
}

.stream-card p,
.stream-card.mint p,
.stream-card.orange p {
  color: var(--ui-text-secondary);
}

.stream-card .eyebrow,
.stream-card.mint .eyebrow,
.stream-card.orange .eyebrow {
  color: var(--blue-hover);
}

.calendar-card {
  border-color: var(--ui-border);
}

.next-game {
  border-top-color: var(--ui-border);
}

.next-game time {
  color: var(--blue-hover);
}

.next-game p,
.vs {
  color: var(--ui-text-tertiary);
}

.quick-link {
  min-height: 48px;
  align-items: center;
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text-secondary);
  font-family: Inter, "Noto Sans TC", sans-serif;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.quick-link:hover {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  color: #fff;
}

footer {
  border-top-color: var(--ui-border);
  color: var(--ui-text-tertiary);
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
  }

  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(210px, .65fr);
  }

  .data-center-grid {
    grid-template-columns: 1fr;
  }

  .roster-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: none;
  }
}

@media (max-width: 1023px) {
  .shell {
    width: min(100% - 40px, 900px);
  }

  .hero-grid,
  .main-grid {
    grid-template-columns: 1fr;
  }

  .feature {
    min-height: 410px;
  }

  .character-lab {
    grid-template-columns: 1fr;
  }

  .character-lab > div:first-child {
    position: static;
  }

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

  .performance-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  section[id] {
    scroll-margin-top: 126px;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding: 10px 0;
  }

  .topbar > .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .topbar > .button {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    justify-self: end;
  }

  .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .masthead {
    min-height: 0;
    grid-template-columns: 1fr;
    padding-top: 48px;
  }

  .masthead .meta {
    max-width: 320px;
  }

  .feature,
  .character-lab {
    grid-template-columns: 1fr;
  }

  .feature .avatar-stage {
    min-height: 360px;
  }

  .data-center-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .data-center-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .cloud-auth-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .shell {
    width: min(100% - 28px, 680px);
  }

  .masthead {
    padding: 40px 0 24px;
  }

  .masthead h1 {
    font-size: clamp(58px, 17vw, 86px);
  }

  .feature,
  .player-dashboard,
  .player-data-center,
  .character-lab {
    padding: 22px;
  }

  .player-dashboard-grid,
  .player-facts,
  .record-fields,
  .ability-editor-grid {
    grid-template-columns: 1fr;
  }

  .performance-panel {
    grid-column: auto;
  }

  .player-facts div,
  .performance-stats > div,
  .active-player-metrics div,
  .wiki-preview-summary div {
    border-right: 0;
  }

  .player-facts div:not(:last-child),
  .wiki-preview-summary div:not(:last-child) {
    border-bottom: 1px solid var(--ui-border);
  }

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

  .wiki-import-controls,
  .cloud-auth-panel {
    grid-template-columns: 1fr;
  }

  .wiki-url-field {
    grid-column: auto;
  }

  .main-grid {
    padding: 48px 0 64px;
  }
}

@media (max-width: 549px) {
  .shell {
    width: min(100% - 24px, 480px);
  }

  .topbar {
    min-height: 0;
  }

  .brand {
    font-size: 12px;
  }

  .button {
    min-height: 44px;
    padding: 0 16px;
    font-size: 12px;
  }

  .nav-link {
    min-height: 40px;
    padding: 0 12px;
    font-size: 11px;
  }

  .masthead h1 {
    font-size: clamp(54px, 19vw, 76px);
  }

  .masthead .meta {
    min-width: 0;
  }

  .ticker {
    margin-bottom: 20px;
  }

  .ticker-label {
    padding: 0 13px;
  }

  .ticker-track {
    gap: 32px;
    padding: 0 16px;
    font-size: 12px;
  }

  .feature,
  .card,
  .player-dashboard,
  .player-data-center,
  .character-lab,
  .profile-panel,
  .roster-panel,
  .active-player-panel,
  .cloud-sync-panel,
  .wiki-importer {
    padding: 18px;
  }

  .feature {
    min-height: 0;
  }

  .feature h2 {
    font-size: clamp(32px, 10vw, 40px);
  }

  .feature .avatar-stage,
  .creator-preview .avatar-stage {
    min-height: 330px;
  }

  .avatar-stage::after {
    z-index: 12;
    left: 10px;
    bottom: 10px;
    border: 1px solid rgba(83, 177, 255, .38);
    border-radius: var(--ui-radius-pill);
    background: rgba(7, 9, 13, .82);
    content: "LIVE PREVIEW";
    padding: 5px 7px;
  }

  .player-dashboard-head h2 {
    font-size: 46px;
  }

  .panel-heading,
  .cloud-sync-head,
  .wiki-import-head,
  .editor-pane-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .performance-stats,
  .active-player-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .honor-list,
  .editor-form-grid,
  .appearance-extra,
  .toggle-grid,
  .media-gallery,
  .cloud-auth-actions,
  .wiki-import-controls,
  .creator-controls,
  .slider-grid {
    grid-template-columns: 1fr;
  }

  .editor-field.wide,
  .record-fields .wide {
    grid-column: auto;
  }

  .data-center-actions,
  .data-pane-actions,
  .wiki-batch-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .data-action,
  .record-add,
  .record-remove,
  .creator-action,
  .quick-link {
    width: 100%;
  }

  .roster-list {
    grid-template-columns: 1fr;
  }

  .creator-preview {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .creator-summary {
    min-width: 0;
  }

  .creator-actions {
    grid-template-columns: 1fr;
  }

  .story-stream {
    margin-left: 32px;
  }

  .stream-item {
    margin-left: 16px;
  }

  .stream-time {
    right: calc(100% + 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}