/* Competition presentation follows the racing concept while keeping existing results and actions. */
.race-competition {
  --race-border: rgba(174, 195, 211, .18);
  --race-panel: #111c29;
  --race-panel-deep: #0b151f;
  --race-cyan: #3bd9ed;
  --race-orange: #ff742e;
}

.race-competition .competition-masthead {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 218px;
  margin: -12px 0 14px;
  padding: 32px clamp(22px, 3vw, 44px);
  overflow: hidden;
  border: 1px solid var(--race-border);
  background: linear-gradient(90deg, rgba(5, 10, 16, .98) 0%, rgba(6, 13, 21, .86) 47%, rgba(7, 15, 22, .34) 100%),
    url('/assets/racing-hero.png') 50% 60% / cover no-repeat;
}
.race-competition .competition-masthead::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--race-orange) 0 22%, var(--race-cyan) 22% 48%, transparent 76%);
}
.race-competition .competition-masthead .page-header {
  position: relative;
  z-index: 1;
  align-items: end;
  margin: 0;
  padding: 0;
  border: 0;
}
.race-competition .competition-masthead .kicker,
.race-competition .competition-eyebrow {
  color: var(--race-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}
.race-competition .competition-masthead h1 {
  margin: 8px 0 10px;
  color: #f8fafc;
  font-size: clamp(46px, 5vw, 76px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: .045em;
  line-height: .98;
  text-shadow: 0 5px 24px rgba(0, 0, 0, .5);
}
.race-competition .competition-masthead .page-subtitle { color: #d3dce5; font-size: 13px; }
.race-competition .competition-masthead-deco {
  position: absolute;
  right: 30px;
  top: 24px;
  color: rgba(237, 246, 250, .28);
  font-size: 12px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .25em;
  pointer-events: none;
}
.race-competition .competition-masthead .page-header-actions .btn { background: rgba(7, 17, 25, .82); backdrop-filter: blur(8px); }

.race-competition .config-strip {
  min-height: 70px;
  margin-bottom: 14px;
  padding: 14px 20px;
  border: 1px solid var(--race-border);
  border-left: 4px solid var(--race-orange);
  border-radius: 0;
  background: linear-gradient(90deg, #1c2b3a, #101b27);
}
.race-competition .config-strip strong { color: #f3f6f8; font-size: 14px; }
.race-competition .config-strip span { color: #b5c2ce; font-size: 12px; }
.race-competition .config-strip .status-chip { color: #ddf7fb; }
.race-competition .admin-tip { border-radius: 4px; }
.race-competition .admin-action-bar { padding: 2px 0 8px; }

.race-competition .competition-stage {
  margin-top: 16px;
  border-top: 1px solid var(--race-border);
}
.race-competition .competition-stage-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 2px 18px;
}
.race-competition .competition-stage-head h2 {
  margin: 5px 0;
  color: #f6f8fa;
  font-size: clamp(24px, 2.5vw, 34px);
  font-style: italic;
  font-weight: 900;
  line-height: 1.1;
}
.race-competition .competition-stage-head p { margin: 0; color: #9cabb9; font-size: 12px; }
.race-competition .round-tabs {
  position: sticky;
  top: 64px;
  z-index: 9;
  display: flex;
  gap: 7px;
  margin: 0 0 18px;
  padding: 8px 0;
  overflow-x: auto;
  background: #0a141e;
  scrollbar-width: thin;
}
.race-competition .round-flow-item { flex: 1 0 156px; min-width: 0; }
.race-competition .round-flow-connector { display: none; }
.race-competition .round-tab {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  padding: 13px 21px 13px 25px;
  border: 1px solid var(--race-border);
  border-radius: 0;
  background: #17232f;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
  color: #a9b7c4;
  transition: background .18s ease, color .18s ease;
}
.race-competition .round-flow-item:first-child .round-tab { clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); }
.race-competition .round-tab strong { font-size: 18px; font-weight: 900; letter-spacing: .01em; }
.race-competition .round-tab span { color: inherit; font-size: 11px; opacity: .8; }
.race-competition .round-flow-complete .round-tab { background: #49301f; color: #ffc29a; }
.race-competition .round-tab.active,
.race-competition .round-flow-complete .round-tab.active { background: #144457; color: #73f3ff; box-shadow: inset 0 3px 0 var(--race-cyan); }
.race-competition .round-tab:hover { background: #203b4b; color: #fff; }
.race-competition .round-tab:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

.race-competition .competition-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 27%);
  align-items: start;
  gap: 18px;
}
.race-competition .competition-main { min-width: 0; }
.race-competition .competition-round-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  margin-bottom: 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--race-border);
}
.race-competition .competition-round-heading h2 {
  position: relative;
  margin: 3px 0 0;
  padding-left: 12px;
  color: #f7f9fa;
  font-size: clamp(23px, 2vw, 30px);
  font-weight: 900;
}
.race-competition .competition-round-heading h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 2px; width: 5px; background: var(--race-orange); transform: skewX(-14deg); }
.race-competition .competition-round-heading .section-note { margin: 7px 0 0 12px; }
.race-competition .round-summary-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.race-competition .round-summary-controls .btn { border-radius: 4px; }
.race-competition .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.race-competition .group-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--race-border);
  border-radius: 4px;
  background: #0e1924;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.race-competition .group-head {
  min-height: 70px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--race-border);
  background: linear-gradient(90deg, #192a39, #12212d);
}
.race-competition .competition-group-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.race-competition .competition-group-mark { color: rgba(222, 234, 242, .6); font-size: 25px; font-style: italic; font-weight: 950; line-height: 1; }
.race-competition .group-head h3 { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 850; }
.race-competition .group-head .section-note { display: block; margin-top: 4px; color: #97aaba; font-size: 11px; }
.race-competition .group-head .status-chip { min-height: 25px; padding-inline: 7px; border-radius: 3px; font-size: 10px; }
.race-competition .group-head .round-summary-controls .btn { min-height: 28px; padding-inline: 8px; }
.race-competition .competition-entrant-list { overflow-x: auto; scrollbar-width: thin; }
.race-competition .entrant-table-head,
.race-competition .entrant-row {
  display: grid;
  grid-template-columns: minmax(90px, 1.45fr) repeat(var(--score-count, 1), minmax(33px, .45fr)) 44px 40px minmax(55px, .55fr);
  align-items: center;
  gap: 5px;
  min-width: max(100%, calc(275px + var(--score-count, 1) * 48px));
  padding-inline: 10px;
}
.race-competition .entrant-table-head {
  min-height: 30px;
  color: #9bafbe;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.race-competition .entrant-table-head span:first-child { text-align: left; }
.race-competition .entrant-table-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-competition .entrant-row { min-height: 52px; padding-block: 6px; border-top: 1px solid rgba(172, 194, 209, .1); background: rgba(10, 20, 29, .32); }
.race-competition .entrant-row:nth-child(odd) { background: rgba(34, 50, 63, .25); }
.race-competition .entrant-podium { box-shadow: inset 3px 0 0 rgba(255, 186, 80, .55); }
.race-competition .entrant-podium-2 { box-shadow: inset 3px 0 0 rgba(199, 218, 230, .5); }
.race-competition .entrant-podium-3 { box-shadow: inset 3px 0 0 rgba(230, 158, 108, .5); }
.race-competition .entrant-player { min-width: 0; display: flex; align-items: center; gap: 5px; }
.race-competition .entrant-player .player-avatar-small { flex: none; width: 27px; height: 27px; }
.race-competition .entrant-player-copy { min-width: 0; }
.race-competition .entrant-player strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eef5fa; font-size: 11px; }
.race-competition .entrant-player span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.race-competition .score-cell label { display: none; }
.race-competition .score-box { color: #e4eef4; font-size: 12px; }
.race-competition .entrant-total { color: #f5f8fa; font-size: 13px; }
.race-competition .entrant-place { color: #aec0ce; font-size: 13px; font-style: italic; }
.race-competition .entrant-podium-1 .entrant-place { color: #f9cd5e; }
.race-competition .entrant-podium-2 .entrant-place { color: #d8e7f1; }
.race-competition .entrant-podium-3 .entrant-place { color: #e7a773; }
.race-competition .entrant-actions { flex-direction: column; align-items: end; gap: 3px; }
.race-competition .entrant-actions .status-chip { min-height: 21px; padding-inline: 5px; border-radius: 3px; font-size: 9px; }
.race-competition .entrant-actions .btn { min-height: 24px; padding-inline: 6px; font-size: 10px; }
.race-competition .manual-group-actions { border-top: 1px solid var(--race-border); background: #111f2b; }

.race-competition .competition-side { display: grid; gap: 12px; min-width: 0; }
.race-competition .competition-overview,
.race-competition .competition-final-panel { overflow: hidden; border: 1px solid var(--race-border); background: #101c28; }
.race-competition .competition-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 72px; padding: 14px 16px; }
.race-competition .competition-panel-heading h2 { margin: 3px 0 0; font-size: 20px; font-weight: 850; }
.race-competition .competition-panel-heading p { margin: 3px 0 0; color: #9cabb9; font-size: 11px; }
.race-competition .competition-panel-heading .status-chip { flex: none; }
.race-competition .competition-overview-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--race-border); }
.race-competition .competition-overview-stats div { padding: 13px 8px; text-align: center; border-right: 1px solid var(--race-border); }
.race-competition .competition-overview-stats div:last-child { border-right: 0; }
.race-competition .competition-overview-stats strong { display: block; color: #edf7fa; font-size: 22px; font-style: italic; }
.race-competition .competition-overview-stats span { display: block; margin-top: 3px; color: #9db0bd; font-size: 10px; }
.race-competition .competition-group-summary { padding: 4px 14px; }
.race-competition .competition-group-summary div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(174, 195, 211, .12); font-size: 11px; }
.race-competition .competition-group-summary div:last-child { border-bottom: 0; }
.race-competition .competition-group-summary strong { color: #e1edf3; }
.race-competition .competition-group-summary span { color: #9cb1bf; text-align: right; }
.race-competition .competition-live-box { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 15px; border-top: 1px solid var(--race-border); background: #142532; font-size: 11px; }
.race-competition .competition-live-box strong { color: #e6f2f8; }
.race-competition .competition-live-box span { color: #a7b6c2; }
.race-competition .competition-live-box a { padding: 7px 10px; border: 1px solid rgba(59, 217, 237, .45); color: #71e6f4; font-weight: 750; text-decoration: none; }
.race-competition .competition-live-box a:hover { background: rgba(59, 217, 237, .1); }
.race-competition .competition-live-box a span { color: inherit; }
.race-competition .final-ranking { display: grid; gap: 0; padding: 0 10px 10px; }
.race-competition .final-rank-row { grid-template-columns: 28px minmax(0, 1fr) auto; min-height: 54px; gap: 7px; padding: 8px 6px; border: 0; border-top: 1px solid rgba(174, 195, 211, .13); border-radius: 0; background: transparent; }
.race-competition .final-rank-row:first-child { border-top-color: rgba(255, 185, 66, .48); }
.race-competition .final-rank-row .rank-number { width: 25px; height: 25px; border-radius: 3px; font-size: 12px; }
.race-competition .final-rank-row .player-with-avatar { min-width: 0; }
.race-competition .final-rank-row .player-with-avatar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.race-competition .final-rank-row .player-with-avatar small { display: none; }
.race-competition .final-rank-row > strong { white-space: nowrap; font-size: 11px; }
.race-competition .competition-panel-footnote { margin: 0; padding: 11px 15px; border-top: 1px solid var(--race-border); color: #94a9b8; font-size: 10px; }

@media (max-width: 1500px) {
  .race-competition .group-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1180px) {
  .race-competition .competition-board { grid-template-columns: minmax(0, 1fr); }
  .race-competition .competition-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .race-competition .competition-side > :only-child { grid-column: 1 / -1; }
  .race-competition .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .race-competition .group-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .race-competition .competition-masthead { min-height: 185px; margin-top: 0; padding: 22px; }
  .race-competition .competition-masthead h1 { font-size: 48px; }
  .race-competition .round-tabs { top: 58px; }
  .race-competition .competition-side { grid-template-columns: 1fr; }
  .race-competition .competition-side > :only-child { grid-column: auto; }
  .race-competition .entrant-table-head { display: none; }
  .race-competition .entrant-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; min-width: 0; padding: 11px 13px; }
  .race-competition .entrant-place { order: -1; flex: 0 0 31px; text-align: left; font-size: 18px; }
  .race-competition .entrant-place::before { display: none; }
  .race-competition .entrant-player { order: 0; flex: 1 1 calc(100% - 115px); }
  .race-competition .entrant-player .player-avatar-small { width: 36px; height: 36px; }
  .race-competition .entrant-player strong { font-size: 13px; }
  .race-competition .entrant-total { order: 1; flex: 0 0 48px; font-size: 15px; text-align: right; }
  .race-competition .entrant-total::before { content: '总分'; display: block; color: #8fa8ba; font-size: 9px; font-weight: 500; }
  .race-competition .score-cell { order: 2; flex: 1 1 65px; display: flex; gap: 4px; align-items: baseline; text-align: left; }
  .race-competition .score-cell label { display: block; font-size: 9px; }
  .race-competition .score-box { font-size: 11px; }
  .race-competition .entrant-actions { order: 3; flex: 0 1 auto; flex-direction: row; align-items: center; margin-left: auto; }
}
@media (max-width: 560px) {
  .race-competition .competition-masthead { min-height: 0; margin: -4px 0 10px; padding: 18px 14px; background: #0d1822; }
  .race-competition .competition-masthead .page-header { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .race-competition .competition-masthead h1 { margin: 4px 0; font-size: 30px; font-style: normal; }
  .race-competition .competition-masthead .page-subtitle { font-size: 11px; }
  .race-competition .competition-masthead-deco { display: none; }
  .race-competition .competition-masthead .page-header-actions { display: flex; justify-content: center; width: 100%; max-width: none; }
  .race-competition .config-strip { flex-wrap: wrap; min-height: 0; gap: 7px; padding: 12px 14px; }
  .race-competition .competition-stage-head { align-items: start; padding: 14px 0 11px; }
  .race-competition .competition-stage-head h2 { font-size: 22px; }
  .race-competition .competition-stage-head .status-chip { margin-top: 14px; }
  .race-competition .round-tabs { gap: 4px; margin-bottom: 12px; padding: 4px 0; }
  .race-competition .round-flow-item { flex: 0 0 113px; }
  .race-competition .round-tab { min-height: 57px; padding: 9px 16px; }
  .race-competition .round-tab strong { font-size: 12px; }
  .race-competition .round-tab span { font-size: 9px; }
  .race-competition .competition-round-heading { align-items: start; flex-direction: column; gap: 8px; }
  .race-competition .competition-round-heading h2 { font-size: 21px; }
  .race-competition .competition-round-heading .round-summary-controls { justify-content: flex-start; }
  .race-competition .competition-panel-heading h2 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .race-competition .round-tab { transition: none; }
}

/* One group at a time; stable colors identify groups without changing their order. */
.race-competition .competition-group-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 14px; }
.race-competition .competition-group-toolbar { display: flex; align-items: flex-start; gap: 12px; }
.race-competition .competition-group-toolbar > .competition-group-tabs { flex: 1; min-width: 0; }
.race-competition #edit-group-time { flex: none; margin-top: 10px; }
.race-competition .competition-group-tab { display: flex; align-items: center; gap: 10px; min-width: 130px; min-height: 58px; padding: 9px 18px 9px 12px; border: 1px solid rgba(var(--match-accent), .25); border-radius: 4px 15px 4px 4px; color: #afc3ce; background: rgba(var(--match-accent), .07); cursor: pointer; text-align: left; }
.race-competition .competition-group-tab > span:last-child { display: grid; gap: 4px; min-width: 0; }
.race-competition .competition-group-tab strong { font-size: 14px; overflow-wrap: anywhere; }
.race-competition .competition-group-tab small { font-size: 10px; color: #9db2be; line-height: 1.5; }
.race-competition .competition-group-tab-number { color: rgba(var(--match-accent), .72); font-size: 22px; font-weight: 900; font-style: italic; }
.race-competition .competition-group-tab.active { border-color: rgba(var(--match-accent), .85); background: rgba(var(--match-accent), .2); color: #f4fcff; box-shadow: inset 3px 0 0 rgb(var(--match-accent)); }
.race-competition .competition-group-tab:hover { border-color: rgba(var(--match-accent), .7); color: #fff; }
.race-competition .competition-group-tab:focus-visible { outline: 2px solid #f1faff; outline-offset: 3px; }
.race-competition .competition-group-tab:disabled { cursor: wait; opacity: .6; }
.race-competition .group-grid.competition-single-group { grid-template-columns: minmax(0, 1fr); }
.race-competition .competition-single-group > .group-card { border-color: rgba(var(--match-accent), .35); background: linear-gradient(rgba(var(--match-accent), .045), rgba(var(--match-accent), .025)), #0e1924; }
.race-competition .competition-single-group .group-head { background: rgba(var(--match-accent), .13); }
.race-competition .competition-group-time { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; color: #b4ccd7; font-size: 12px; }
.race-competition .competition-group-time time { color: #e4f3fa; font-weight: 700; }
.race-competition .competition-group-time > span { color: #849ca9; font-size: 10px; }
.race-competition .competition-schedule-note { margin: -5px 0 18px; padding: 10px 13px; border-left: 2px solid rgba(67, 191, 210, .45); background: rgba(31, 78, 94, .1); color: #96afbc; font-size: 11px; line-height: 1.7; }
.race-competition .competition-schedule-note p { margin: 0; }
.race-competition .competition-schedule-note .competition-schedule-warning { margin: 5px 0 0; color: #e4b485; }
.race-competition .competition-schedule-note ul { padding-left: 18px; }
.race-competition .round-tab time { display: block; overflow: hidden; margin-top: 6px; color: inherit; font-size: 11px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.race-competition .round-flow-projected .round-tab { border-style: dashed; background: rgba(34, 48, 61, .6); color: #91a7b5; cursor: default; opacity: .8; }
@media (min-width: 561px) {
  .race-competition .round-flow-item { flex: 0 0 calc((100% - var(--round-gap-total, 35px)) / var(--round-slots, 6)); max-width: calc((100% - var(--round-gap-total, 35px)) / var(--round-slots, 6)); min-width: 0; }
  .race-competition .round-flow .round-tab { min-width: 0; min-height: 89px; padding: 12px clamp(4px, 1.15vw, 21px); }
  .race-competition .round-tab strong, .race-competition .round-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .race-competition .round-tab strong { font-size: clamp(12px, 1.2vw, 18px); }
}
@media (max-width: 560px) {
  .race-competition .competition-group-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 3px 2px 7px; }
  .race-competition .competition-group-tab { flex: 0 0 auto; min-width: 128px; min-height: 56px; padding: 8px 13px 8px 10px; }
  .race-competition .round-tab { min-height: 78px; }
  .race-competition .round-tab time { font-size: 10px; }
}