/* ===== 创建比赛 ===== */
/* 改队伍卡片高度：.team-pick padding�?avatar-circle 宽高 */
/* 改队�?头像：HTML �?#name-home / #avatar-home */

.team-pick {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 4px;
}

.team-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 112px;
}

.avatar-upload {
  position: relative;
  cursor: pointer;
}

.avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background-size: cover;
  background-position: center;
}

.avatar-circle.has-img {
  color: transparent;
}

.avatar-circle.home {
  background-color: var(--home-avatar);
}

.avatar-circle.away {
  background-color: var(--color-accent-red);
}

.avatar-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-brand-dark);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px #fff;
}

.avatar-cam svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.team-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 22px;
}

.team-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.team-name-input {
  width: 72px;
  height: 22px;
  border: 1px solid var(--color-brand);
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-text);
  outline: none;
}

.icon-edit {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--color-neutral-400);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.icon-edit svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vs-mark {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-neutral-300);
  letter-spacing: 1px;
}

/* 局�?时间并排。改下拉高度�?select-trigger height */
.limit-card {
  padding: 12px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.limit-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.limit-row > .select {
  flex: 1;
  min-width: 0;
}

.duration-row > .select {
  flex: 1;
}

.schedule-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schedule-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-500, #6b7280);
}

.schedule-unit {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--color-neutral-500, #6b7280);
}

#planned-end-hint {
  margin: 0;
  padding: 0 2px;
}

.time-inline {
  flex: 1.4;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.time-inline .select {
  flex: 1;
  min-width: 0;
}

/* 规则模板并排。改成单列：grid-template-columns: 1fr */
.rule-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
}

.select {
  position: relative;
}

.select-trigger {
  width: 100%;
  height: 40px;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 14px;
  color: var(--color-primary-text);
  cursor: pointer;
}

.select-trigger svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-neutral-400);
  fill: none;
  stroke-width: 2;
}

.select-trigger[aria-expanded="true"] {
  border-color: var(--color-brand);
}

.select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-neutral-200);
  z-index: 8;
  overflow: hidden;
}

.select-menu button {
  width: 100%;
  height: 40px;
  border: none;
  background: #fff;
  text-align: left;
  padding: 0 12px;
  font-size: 14px;
  cursor: pointer;
  color: var(--color-primary-text);
}

.select-menu button:active,
.select-menu button:hover {
  background: var(--color-brand-soft);
}

.time-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.wheel-col {
  flex: 1;
  max-width: 120px;
}

.wheel-window {
  position: relative;
  height: 108px;
  overflow: hidden;
}

.wheel {
  position: relative;
  z-index: 1;
  height: 108px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  list-style: none;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
}

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

.wheel li {
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-primary-text);
  scroll-snap-align: center;
}

.wheel-pad {
  height: 36px;
}

.wheel-highlight {
  pointer-events: none;
  position: absolute;
  left: 8px;
  right: 8px;
  top: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-brand-soft);
  box-shadow: inset 0 0 0 1px var(--selected-border);
}

.wheel-unit {
  text-align: center;
  font-size: 12px;
  color: var(--color-neutral-500);
  margin-top: 4px;
}

.wheel-colon {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-neutral-300);
  margin-top: -16px;
}

.rule-card {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: inherit;
}

.rule-card.active {
  border-color: var(--selected-border);
  background: var(--selected-bg);
}

.rule-row .rule-icon {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.rule-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-neutral-100);
  display: grid;
  place-items: center;
  font-size: 16px;
}

.rule-card .txt {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}

.check-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-neutral-300);
}

.rule-card.active .check-dot {
  border: none;
  background: var(--color-accent-red);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4.5 9.2l3 3L13.5 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.innings-box {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
}

.mode-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mode-item {
  height: 40px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  color: var(--color-neutral-500);
  font-size: 13px;
  cursor: pointer;
}

.mode-item.active {
  background: var(--color-brand);
  color: #fff;
  font-weight: 500;
}

/* ===== 安排打线 ===== */
/* 列宽：棒�?背号 姓名 位置 —�?�?.lineup-row �?grid-template-columns */

.lineup-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 0;
  flex: 0 0 auto;
  align-items: center;
}

.lineup-tabs.has-flip {
  grid-template-columns: 1fr 36px 1fr;
}

.lineup-tabs button {
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-neutral-500);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.lineup-tabs button.active {
  background: var(--color-brand);
  color: #fff;
}

.lineup-tabs .lineup-flip {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-brand-dark);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lineup-tabs .lineup-flip svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 280ms ease;
}

.lineup-tabs .lineup-flip.is-flipped svg {
  transform: rotate(180deg);
}

.lineup-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lineup-row {
  display: grid;
  grid-template-columns: 32px 44px 1fr 72px;
  gap: 6px;
  align-items: center;
}

.lineup-row[hidden] {
  display: none !important;
}

.cell {
  height: 28px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--color-primary-text);
}

.cell.order {
  background: var(--color-brand-dark);
  color: #fff;
  font-weight: 600;
}

.cell.name {
  justify-content: flex-start;
  padding: 0 10px;
}

.cell.pos {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--color-neutral-200);
  font-size: 12px;
  color: var(--color-neutral-700);
}

.lineup-row .cell input,
.lineup-row .cell select {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  padding: 0 4px;
  outline: none;
  box-sizing: border-box;
}

.lineup-row .cell select {
  cursor: pointer;
}

.lineup-row .cell.name input,
.lineup-row .cell.name select {
  text-align: left;
  text-align-last: left;
  padding: 0 6px 0 10px;
}

.lineup-row .cell input:focus,
.lineup-row .cell select:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--color-brand);
  border-radius: inherit;
}

.lineup-head .cell.head {
  height: 24px;
  background: transparent;
  color: var(--color-neutral-500);
  font-size: 11px;
  font-weight: 500;
  box-shadow: none;
}

.lineup-head .cell.head.name {
  justify-content: flex-start;
  padding: 0 10px;
}

.sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 600;
}

/* 打线 DH：开�?+ 投手不打击行（不改原 lineup-row 结构�?*/
.lineup-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.lineup-meta-text {
  font-size: 12px;
  color: var(--color-neutral-500);
}

.away-fill-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.away-fill-bar .ph-rule {
  flex: 1;
  min-width: 0;
}

.away-fill-bar .mini-btn {
  flex-shrink: 0;
}

.dh-switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.dh-switch[hidden] {
  display: none !important;
}

.dh-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dh-switch-ui {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-neutral-300);
  position: relative;
  transition: background 160ms ease;
}

.dh-switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 160ms ease;
}

.dh-switch input:checked + .dh-switch-ui {
  background: var(--color-brand);
}

.dh-switch input:checked + .dh-switch-ui::after {
  transform: translateX(14px);
}

.dh-switch-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-text);
}

.cell.pos.is-dh {
  background: var(--color-brand-soft);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  color: var(--color-brand-dark);
  font-weight: 700;
}

.pitcher-nonbat {
  margin-top: 8px;
  padding: 8px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
}

.pitcher-nonbat[hidden] {
  display: none !important;
}

.pitcher-nonbat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-neutral-500);
  margin-bottom: 4px;
}

.pitcher-nonbat-row .cell.order {
  background: var(--color-neutral-500);
}

.add-sub {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-brand);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.sub-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.add-temp {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.add-temp[hidden] {
  display: none !important;
}

.cell.pos.is-temp {
  color: var(--color-brand-dark);
  font-weight: 700;
  font-size: 11px;
}

.temp-opt-card {
  padding: 12px 14px;
}

.temp-opt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.temp-opt-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-text);
}

.temp-opt-row .dh-switch {
  margin-left: 0;
  flex-shrink: 0;
}

.temp-player-card .temp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutral-500);
}

.temp-player-card .temp-field .field {
  font-weight: 500;
  color: var(--color-primary-text);
}

.temp-form-err {
  margin: 0 0 10px;
  font-size: 12px;
  color: #c0392b;
}

.temp-form-err[hidden] {
  display: none !important;
}

.temp-add-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.temp-add-plus {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.temp-add-meta {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.75;
}

.def-pick-empty {
  margin: 0;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.def-pick-num.is-temp,
.ph-pick-num.is-temp {
  background: var(--color-brand-dark);
}

.hidden {
  display: none !important;
}

/* ===== 比赛开�?/ 守备 Bar ===== */
/* 球场只做背景。跑垒坐标只�?field-coords.js，不要在 CSS �?left/top */

.defense-bar {
  position: relative;
  background: #2f6b3a;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 0;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.flow-screen .page-body.compact > .defense-bar {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.field-container {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 180px;
  max-height: 320px;
  overflow: hidden;
  background: #2f6b3a;
  --player-shift-y: 16px; /* 守备卡整体下移，改这个数即可 */
}

.field-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  pointer-events: none;
  user-select: none;
}

.overlay-layer {
  position: absolute;
  inset: 0;
}

/* 守备卡整体下移：改上�?--player-shift-y */
.player-card {
  position: absolute;
  transform: translate(-50%, calc(-50% + var(--player-shift-y)));
  min-width: 58px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.player-card .pos {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-brand-dark);
}

.player-card .who {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-primary-text);
  white-space: nowrap;
}

/* 守备换人：仅编辑态显示铅笔角标，不改默认守备卡外�?*/
.player-card .pc-edit {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-brand-dark);
  color: #fff;
  place-items: center;
  box-shadow: 0 0 0 2px #fff;
  z-index: 1;
}

.player-card .pc-edit svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
}

.defense-bar.is-def-edit .player-card {
  cursor: pointer;
  box-shadow: 0 0 0 1.5px var(--color-brand), 0 1px 3px rgba(0, 0, 0, 0.18);
}

.defense-bar.is-def-edit .player-card .pc-edit {
  display: grid;
}

.defense-bar.is-def-edit .player-card.is-picking {
  background: var(--color-brand-soft);
  box-shadow: 0 0 0 2px var(--color-brand-dark), 0 1px 3px rgba(0, 0, 0, 0.18);
}

.def-edit-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 88px;
  z-index: 18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.def-edit-bar[hidden] {
  display: none !important;
}

.def-edit-tip {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-text);
}

.def-edit-done {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-brand-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.def-pick-sheet {
  max-height: 320px;
}

.def-pick-sub {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--color-neutral-500);
}

.def-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 240px;
  padding-bottom: 2px;
}

.def-pick-label {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-neutral-500);
}

.def-pick-label:first-child {
  margin-top: 0;
}

.def-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-primary-text);
  text-align: left;
  cursor: pointer;
}

.def-pick-item:active {
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
}

.def-pick-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-brand-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.def-pick-num.is-field {
  background: var(--color-accent-red);
}

.def-pick-name {
  font-size: 13px;
  font-weight: 600;
}

.def-pick-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-neutral-500);
}

/* 守备 9 位置：相对球场百分比。换背景图时优先改这�?*/
.pos-cf {
  top: 24%;
  left: 50%;
  /* 上移一个卡片自身高度 */
  transform: translate(-50%, calc(-150% + var(--player-shift-y)));
}
.pos-lf { top: 32%; left: 18%; }
.pos-rf { top: 32%; left: 82%; }
.pos-ss { top: 42%; left: 38%; }
.pos-2b { top: 42%; left: 64%; }
.pos-p  { top: 58%; left: 50%; }
.pos-3b { top: 58%; left: 28%; }
.pos-1b { top: 58%; left: 74%; }
.pos-c  { top: 80%; left: 50%; }
.pos-rv { top: 34%; left: 50%; display: none; }

.defense-bar.has-rover .player-card.pos-rv {
  display: flex;
}

/* 专业模式：几垒安打示意球轨迹（坐标见 field-coords.js HitFlightCoordinates） */
.hit-flight-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.hit-flight-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hit-flight-trail path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
  opacity: 0;
}

.hit-flight-trail path.is-drawn {
  opacity: 1;
  transition: opacity 120ms ease-out;
}

.hit-flight-layer.is-hr .hit-flight-trail path {
  stroke: rgba(255, 214, 120, 0.75);
  stroke-width: 4.8;
}

.hit-flight-layer.is-dp .hit-flight-trail path {
  stroke: rgba(180, 220, 255, 0.7);
  stroke-width: 2.2;
  stroke-dasharray: 4 5;
}

.hit-ball {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0 38%, #f3f0e8 55%, #e4dfd2 100%);
  box-shadow:
    0 0 0 1px rgba(180, 40, 40, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%) scale(0.65);
  opacity: 0;
  z-index: 6;
  will-change: left, top, transform, opacity;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}

.hit-ball.is-flying {
  opacity: 1;
  transition: none;
}

.hit-ball.is-hr {
  box-shadow:
    0 0 0 1px rgba(210, 150, 40, 0.45),
    0 0 10px rgba(255, 200, 80, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.35);
}

.hit-ball.is-dp {
  box-shadow:
    0 0 0 1px rgba(70, 130, 200, 0.45),
    0 0 8px rgba(120, 180, 255, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 跑垒员外观。left/top 由 field-coords.js 的 FIRST/SECOND/THIRD 写入，不要在这里写死 */
.runner-indicator {
  position: absolute;
  transform: translate(calc(-50% + var(--stack, 0) * 10px), -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent-red);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px #fff;
  z-index: 4;
  cursor: pointer;
}

.runner-indicator::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.runner-indicator.is-batter {
  background: var(--color-accent-red);
}

/* 左下比赛用时 / 剩余时间：局数制橙 pill；时间制白底单行 */
.game-duration {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 3;
  color: #111827;
  font-size: 11px;
  font-weight: 500;
  background: #F5A524;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.game-duration.is-time {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--color-neutral-200, #e5e7eb);
  box-shadow: none;
  font-size: 12px;
  font-weight: 700;
}

.game-duration .gd-primary {
  line-height: 1.2;
}

.game-duration.is-time .gd-primary {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

/* 真超时（≥1min）红字 */
.game-duration.is-time.is-overtime-alert .gd-primary {
  color: #dc2626;
}

/* 右下紧凑局面条：队名比分 + 垒包/局数/Out，叠在球场底 */
.game-status-panel {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 5px;
  width: auto;
  max-width: calc(100% - 110px);
  padding: 5px 6px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
}

.game-status-panel .score-list {
  flex: 0 1 auto;
  min-width: 64px;
  max-width: 88px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-status-panel .score-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.game-status-panel .score-team {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(17, 24, 39, 0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-status-panel .score-row.batting .score-team {
  font-weight: 700;
  color: #111827;
}

.game-status-panel .score-num {
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
}

.game-status-panel .gsp-board {
  flex: 0 0 auto;
  width: 76px;
}

.gsp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.base-diamond {
  --pad: 15.4px; /* 11px * 1.4 */
  --gap-side: 0.5px; /* �?1px 缩短 50% */
  --gap-mid: 6.5px; /* �?13px 缩短 50% */
  --ext: calc(var(--pad) * 0.2071); /* 旋转 45° 后向外伸�?*/
  position: relative;
  width: calc(var(--pad) * 2 + var(--gap-mid) + var(--ext) * 2);
  height: calc(var(--pad) * 2 + var(--gap-side) + var(--ext) * 2);
}

.base-pad {
  position: absolute;
  width: var(--pad);
  height: var(--pad);
  border-radius: 2px;
  border: 1.5px solid #9CA3AF;
  background: #fff;
  box-sizing: border-box;
  transform: rotate(45deg);
  transform-origin: center center;
}

.base-pad.on {
  background: #F5A524;
  border-color: #F5A524;
  cursor: pointer;
}

.base-pad.b2 {
  top: var(--ext);
  left: calc(var(--ext) + (var(--pad) + var(--gap-mid)) / 2);
}

.base-pad.b3 {
  top: calc(var(--ext) + var(--pad) + var(--gap-side));
  left: var(--ext);
}

.base-pad.b1 {
  top: calc(var(--ext) + var(--pad) + var(--gap-side));
  left: calc(var(--ext) + var(--pad) + var(--gap-mid));
}

.inning-dir {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18px;
  line-height: 1;
}

.inning-dir .inning-num {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  line-height: 16px;
}

.arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.arrow.up {
  border-bottom: 7px solid #D1D5DB;
}

.arrow.up.on {
  border-bottom-color: #374151;
}

.arrow.down {
  border-top: 7px solid #D1D5DB;
}

.arrow.down.on {
  border-top-color: #374151;
}

.out-row,
.count-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.out-label {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

.out-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #9CA3AF;
  background: #fff;
  box-sizing: border-box;
}

.out-dot.on {
  background: #F5A524;
  border-color: #F5A524;
}

.count-board {
  display: none;
}

/* 专业模式：局数在队名下，右侧仅垒包 + B/S/Out */
.game-status-panel.is-pro {
  padding: 5px 6px 5px;
}

.game-status-panel .score-list .inning-dir {
  display: none;
  margin-top: 2px;
}

.game-status-panel.is-pro .score-list {
  align-items: center;
}

.game-status-panel.is-pro .score-list .inning-dir {
  display: flex;
}

.game-status-panel.is-pro .gsp-top {
  justify-content: center;
  margin-bottom: 3px;
}

.game-status-panel.is-pro .inning-dir-simple {
  display: none;
}

.game-status-panel.is-pro .inning-dir {
  width: 14px;
}

.game-status-panel.is-pro .inning-num {
  font-size: 11px;
  line-height: 12px;
}

.game-status-panel.is-pro .arrow {
  border-left-width: 4px;
  border-right-width: 4px;
}

.game-status-panel.is-pro .arrow.up { border-bottom-width: 5px; }
.game-status-panel.is-pro .arrow.down { border-top-width: 5px; }

.game-status-panel.is-pro .count-board {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 2px;
}

.game-status-panel.is-pro .count-row,
.game-status-panel.is-pro .out-row {
  gap: 3px;
}

.count-label {
  width: 10px;
  font-size: 10px;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.game-status-panel.is-pro .out-label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.count-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid #9CA3AF;
  background: #fff;
  box-sizing: border-box;
}

.count-dot.on {
  background: #F5A524;
  border-color: #F5A524;
}

.count-b .count-label {
  color: var(--color-accent-red);
}

.count-b .count-dot {
  border-color: var(--color-accent-red);
}

.count-b .count-dot.on {
  background: var(--color-accent-red);
  border-color: var(--color-accent-red);
}

.count-s .count-label {
  color: var(--color-brand);
}

.count-s .count-dot {
  border-color: var(--color-brand);
}

.count-s .count-dot.on {
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.game-status-panel.is-pro .out-dot {
  width: 6px;
  height: 6px;
}

.dots {
  display: flex;
  gap: 4px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neutral-300);
}

.dot.on {
  background: var(--color-accent-red);
}

.base {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: var(--color-neutral-300);
}

.base.on {
  background: var(--color-accent-red);
}

.pair-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.mini-field {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 6px 10px;
  min-height: 0;
}

.mini-field .k {
  font-size: 11px;
  color: var(--color-neutral-500);
}

.mini-field .v {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}

.extra-runner-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--selected-bg);
  border: 1px solid var(--selected-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin: 0;
  flex: 0 0 auto;
}

.extra-runner-bar[hidden] {
  display: none !important;
}

.extra-runner-copy {
  flex: 1;
  min-width: 0;
}

.extra-runner-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-text);
}

.extra-runner-hint {
  font-size: 11px;
  color: var(--color-neutral-500);
  margin-top: 1px;
}

.extra-runner-bar .btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}

.extra-runner-bar .btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* 动作卡：模式�?+ 可左右滑的按钮页，替代原「简�?专业」双按钮 */
.action-deck {
  position: relative;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 6px 8px 8px;
  margin-bottom: 0;
  overflow: hidden;
  flex: 0 0 auto;
}

.action-deck.is-pro-gate-open {
  overflow: visible;
  z-index: 6;
}

/* 极薄模式条：只占用约 28px 高度 */
.mode-strip {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  height: 28px;
  margin-bottom: 6px;
}

.mode-chev {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-neutral-400);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.mode-chev svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mode-chev:active {
  color: var(--color-brand-dark);
}

.mode-label-wrap {
  overflow: hidden;
  height: 28px;
}

.mode-label-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translateX(0);
  will-change: transform;
}

.mode-label {
  flex: 0 0 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-brand-dark);
  letter-spacing: 0.02em;
}

.action-viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.action-viewport:active {
  cursor: grabbing;
}

.action-pages {
  display: flex;
  width: 200%;
  transform: translateX(0);
  will-change: transform;
}

.action-page {
  flex: 0 0 50%;
  padding: 0 2px;
  box-sizing: border-box;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.action-grid.dense .action-btn {
  height: 34px;
  font-size: 12px;
}

.action-deck.no-steal .steal-btn {
  display: none;
}

.action-btn {
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  color: var(--color-primary-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.action-btn:active {
  transform: scale(0.96);
  background: var(--color-brand-soft);
}

.action-btn.hot {
  background: var(--color-accent-red);
  color: #fff;
}

.mode-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 6px;
  height: 6px;
}

.mode-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-neutral-300);
}

.mode-dots span.on {
  width: 14px;
  border-radius: 999px;
  background: var(--color-brand);
}

.live-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 0;
}

.live-actions .btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.undo-hint {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-neutral-500);
}

.undo-hint[hidden] {
  display: none !important;
}

/* 更多悬浮窗：贴底栏上方，宽高 �?200px */
.more-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.more-layer.is-open {
  pointer-events: auto;
}

.more-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(22, 53, 40, 0.28);
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.more-layer.is-open .more-backdrop {
  opacity: 1;
}

.more-sheet {
  position: absolute;
  left: 12px; /* �?compact 页左右对�?*/
  right: 12px;
  bottom: 88px; /* 贴底栏：tabbar 64 + 外边�?12 + �?12 */
  width: auto;
  height: 200px;
  max-height: 200px;
  padding: 8px;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: translateY(10px) scale(0.92);
  transform-origin: 50% 100%;
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.more-layer.is-open .more-sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.more-head {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  margin-bottom: 6px;
}

.more-title {
  grid-column: 2;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutral-500);
  text-align: center;
}

.more-help-btn {
  grid-column: 3;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--color-neutral-100);
  color: var(--color-brand-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  cursor: pointer;
  justify-self: end;
}

.more-help-btn[aria-pressed="true"] {
  background: var(--color-brand);
  color: #fff;
}

.more-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  flex: 1 1 auto;
  align-content: start;
}

.more-grid.trio {
  grid-template-columns: 1fr 1fr 1fr;
}

.dp-pick-list {
  gap: 8px;
  padding-bottom: 12px;
}

.dp-pick-list .ph-pick-item {
  min-height: 48px;
  padding: 10px 12px;
}

.dp-pick-list .ph-pick-num {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.dp-pick-list .ph-pick-name {
  font-size: 15px;
}

.dp-score-list {
  padding-bottom: 4px;
}

.dp-score-list .ph-pick-item.is-on {
  box-shadow: inset 0 0 0 1px var(--color-brand-400, #3b82f6);
}

.more-grid .action-btn {
  height: 32px;
  font-size: 12px;
}

.more-grid .action-btn.is-off {
  opacity: 0.42;
  cursor: not-allowed;
}

.more-sheet.is-help .more-grid .action-btn {
  box-shadow: inset 0 0 0 1px var(--color-neutral-200);
}

/* 说明条：默认收起；点 ? 后在按键下方展开 */
.more-hint {
  display: none;
  margin: 8px 0 0;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  color: var(--color-primary-text);
  font-size: 11px;
  line-height: 1.45;
  max-height: 64px;
  overflow: auto;
}

.more-sheet.is-help .more-hint,
.more-hint.is-show {
  display: block;
}

/* 野选确认：居中卡片，简单模式从「更多」点�?*/
.fc-layer {
  z-index: 22;
}

.fc-dialog {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 46%;
  transform: translateY(-50%) scale(0.96);
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.fc-layer.is-open .fc-dialog {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}

.fc-card {
  position: relative;
  padding: 14px 14px 14px;
  background: var(--color-bg-page);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.fc-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  background: var(--color-brand-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 4px;
}

.fc-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary-text);
  line-height: 1.3;
}

.fc-sub {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--color-neutral-500);
}

.fc-outs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.fc-out {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 84px;
  padding: 0;
  background: #fff;
  border: 2px solid var(--color-brand-dark);
  border-radius: var(--radius-md);
  color: var(--color-primary-text);
  cursor: pointer;
}

.fc-out b {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.fc-out span {
  font-size: 12px;
  font-weight: 500;
}

.fc-out.is-on {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-dark);
  box-shadow: inset 0 0 0 1px var(--color-brand-dark);
}

.fc-out:active {
  transform: scale(0.97);
}

.fc-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  margin-top: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-brand-dark);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.fc-confirm:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* 本机试用：专业模式小弹窗（点开显示，点外部收起） */
.pro-gate-pop {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 36px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-neutral-200);
  box-shadow: 0 8px 24px rgba(28, 28, 46, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms ease-out;
}

.pro-gate-pop.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.pro-gate-pop__text {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-primary-text);
}

.pro-gate-pop__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--color-brand-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pro-gate-pop__link:active {
  opacity: 0.9;
}

.runner-move-outs {
  grid-template-columns: 1fr 1fr;
}

.runner-move-outs.is-one {
  grid-template-columns: 1fr;
}

/* 专业模式野选：打者上�?+ 跑者处�?*/
.fc-pro-layer {
  z-index: 22;
}

.fc-pro-dialog {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 48px;
  bottom: 80px;
  width: auto;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.fc-pro-layer.is-open .fc-pro-dialog {
  transform: none;
  opacity: 1;
}

.fc-pro-dialog > .fc-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-bottom: 8px;
}

.fc-pro-card {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.fc-pro-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 12px 0;
  box-sizing: border-box;
}

.fcp-result {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.fcp-result-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fcp-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  display: grid;
  place-items: center;
}

.fcp-check svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.fcp-result-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-text);
}

.fcp-result-sub,
.fcp-meta {
  font-size: 11px;
  color: var(--color-neutral-500);
}

.fcp-meta {
  flex: 0 0 auto;
  padding-top: 2px;
  white-space: nowrap;
}

.fcp-batter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
}

.fcp-k {
  font-size: 12px;
  color: var(--color-neutral-500);
}

.fcp-who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-text);
}

.fcp-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.fcp-num.is-batter {
  background: var(--color-brand-dark);
}

.fcp-arrow {
  margin-left: auto;
  color: var(--color-neutral-400);
  font-size: 14px;
}

.fcp-dest {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-brand-dark);
}

.fcp-h {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-text);
  margin-bottom: 8px;
}

.fcp-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid var(--color-neutral-200);
  box-sizing: border-box;
}

.fcp-h + .fcp-row {
  border-top: none;
  padding-top: 0;
}

.fcp-row.is-empty {
  opacity: 0.4;
}

.fcp-row.is-empty .fcp-seg {
  pointer-events: none;
}

.fcp-row-who {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fcp-base {
  flex: 0 0 auto;
  width: 28px;
  font-size: 11px;
  color: var(--color-neutral-500);
}

.fcp-player {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-text);
}

.fcp-seg {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: 4px;
  box-sizing: border-box;
}

.fcp-seg button {
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  background: var(--color-neutral-100);
  color: var(--color-neutral-500);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-sizing: border-box;
}

.fcp-seg button.is-on {
  background: var(--color-brand-dark);
  color: #fff;
}

.fcp-preview {
  display: grid;
  grid-template-columns: minmax(0, 108px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 12px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-neutral-200);
  min-width: 0;
}

.fcp-mini {
  position: relative;
  width: 100%;
  max-width: 108px;
  height: 108px;
  justify-self: center;
}

.fcp-mini-shape {
  position: absolute;
  left: 22px;
  top: 18px;
  width: 64px;
  height: 64px;
  background: var(--color-brand-soft);
  transform: rotate(45deg);
  border-radius: 8px;
}

.fcp-spot {
  position: absolute;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fcp-spot.s2 { top: 6px; left: 43px; }
.fcp-spot.s3 { top: 43px; left: 6px; }
.fcp-spot.s1 { top: 43px; left: 80px; }

.fcp-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px #fff;
}

.fcp-chip.is-batter {
  background: var(--color-brand-dark);
}

.fcp-chip + .fcp-chip {
  margin-left: -8px;
}

.fcp-summary {
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  min-height: 88px;
  min-width: 0;
  box-sizing: border-box;
}

.fcp-summary .fcp-h {
  font-size: 12px;
  margin-bottom: 6px;
}

.fcp-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fcp-summary li {
  font-size: 12px;
  color: var(--color-primary-text);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.fcp-confirm {
  flex: 0 0 auto;
  width: auto;
  margin: 8px 12px 12px;
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

/* 当前棒次 DH 角标 */
.dh-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-brand-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.dh-badge[hidden] {
  display: none !important;
}

/* 代打弹层 */
.ph-layer {
  z-index: 22;
}

.ph-dialog {
  position: absolute;
  left: 12px;
  right: 12px;
  top: auto;
  bottom: 80px;
  height: calc((100% - 132px) * 0.6);
  width: auto;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transform: translateY(8px) scale(0.98);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.ph-layer.is-open .ph-dialog {
  transform: none;
  opacity: 1;
}

.ph-dialog > .fc-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-bottom: 8px;
}

.ph-card {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.ph-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 12px 0;
  box-sizing: border-box;
}

.ph-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-text);
}

.ph-rule {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-neutral-500);
}

.ph-batter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 8px 10px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
  min-width: 0;
  box-sizing: border-box;
}

.ph-k {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.ph-who {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-text);
}

.ph-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.ph-role {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-size: 11px;
  font-weight: 700;
}

.ph-role.is-dh {
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
}

.ph-dh-opts {
  margin-bottom: 12px;
  padding: 10px;
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  min-width: 0;
}

.ph-dh-opts[hidden] {
  display: none !important;
}

.ph-dh-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-brand-dark);
  margin-bottom: 8px;
}

.ph-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-primary-text);
  cursor: pointer;
}

.ph-radio input {
  margin-top: 2px;
  accent-color: var(--color-brand-dark);
}

.ph-pick-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-text);
  margin-bottom: 8px;
}

.ph-pick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  min-width: 0;
}

.ph-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-primary-text);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.ph-pick-item.is-on {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-dark);
  box-shadow: inset 0 0 0 1px var(--color-brand-dark);
}

.ph-pick-item:active {
  background: var(--color-brand-soft);
}

.ph-pick-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-brand-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.ph-pick-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ph-pick-meta {
  flex: 0 0 auto;
  margin-left: 0;
  font-size: 11px;
  color: var(--color-neutral-500);
}

/* 盗垒弹层：复用代打卡�?+ 野选分段键 */
#steal-opts[hidden] {
  display: none !important;
}

.steal-seg {
  margin-bottom: 12px;
}

.steal-seg button:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

#steal-double-btn {
  margin: 0 0 10px;
  height: 36px;
  font-size: 13px;
}

#steal-double-btn[hidden],
#steal-dest-wrap[hidden],
#steal-preview-wrap[hidden],
#steal-cs-who-wrap[hidden] {
  display: none !important;
}

.steal-preview {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.ph-confirm {
  flex: 0 0 auto;
  width: auto;
  align-self: stretch;
  margin: 8px 12px 12px;
  border-radius: var(--radius-lg);
  box-sizing: border-box;
}

.ph-confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 记分记录弹层：高度参考代打，列表可滚 */
.log-layer {
  z-index: 22;
}

.log-dialog {
  position: absolute;
  left: 12px;
  right: 12px;
  top: auto;
  bottom: 80px;
  height: calc((100% - 132px) * 0.6);
  width: auto;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transform: translateY(8px) scale(0.98);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.log-layer.is-open .log-dialog {
  transform: none;
  opacity: 1;
}

.log-dialog > .fc-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-bottom: 8px;
}

.log-card {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.log-head {
  flex: 0 0 auto;
  padding: 12px 12px 8px;
}

.log-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-text);
}

.log-rule {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--color-neutral-500);
}

.log-list {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.log-empty {
  margin: 0;
  padding: 28px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--color-neutral-500);
}

.log-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--color-neutral-200);
}

.log-main {
  min-width: 0;
}

.log-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-neutral-500);
}

.log-ops {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

.log-ops button {
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-neutral-100);
  color: var(--color-primary-text);
}

.log-ops .log-edit {
  background: var(--color-brand);
  color: var(--color-white);
}

/* ===== 比赛结算 ===== */
.page-body.result-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  padding-bottom: 88px;
}

body.flow-screen .page-body.result-body {
  padding-bottom: 16px;
}

.result-hero {
  flex: 0 0 auto;
  padding: 8px 10px 6px;
}

.result-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.result-team {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.result-team .avatar-circle {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.result-team .name {
  font-size: 11px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-nums {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.result-nums b {
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-brand-dark);
}

.result-nums b.away {
  color: var(--color-accent-red);
}

.result-nums i {
  font-style: normal;
  color: var(--color-neutral-400);
  font-size: 14px;
}

.result-meta {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.result-meta span {
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
}

.result-linescore {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--color-neutral-200);
  overflow-x: auto;
}

.result-linescore table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.result-linescore th,
.result-linescore td {
  padding: 3px 2px;
  min-width: 18px;
}

.result-linescore th {
  color: var(--color-neutral-500);
  font-weight: 500;
}

.result-linescore td.team {
  text-align: left;
  font-weight: 600;
  min-width: 44px;
  padding-right: 6px;
}

.result-linescore td.r {
  font-weight: 700;
  color: var(--color-brand-dark);
}

.result-board {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  flex: 0 0 auto;
}

.result-tabs button {
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-neutral-500);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.result-tabs button.active {
  background: var(--color-brand);
  color: #fff;
}

.result-panels {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
}

.result-panel {
  grid-area: 1 / 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  visibility: hidden;
  pointer-events: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.result-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.result-panel.is-on {
  visibility: visible;
  pointer-events: auto;
}

.result-stat-card {
  position: relative;
  padding: 8px 8px 10px;
  flex: 0 0 auto;
}

.result-stat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 0 4px;
}

.result-stat-head .tag {
  height: 22px;
  font-size: 11px;
}

.result-stat-head .sub {
  font-size: 11px;
  color: var(--color-neutral-500);
}

.result-stat-help {
  margin-left: auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-neutral-100);
  color: var(--color-brand-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 22px;
  cursor: pointer;
}

.result-stat-help.is-on {
  background: var(--color-brand);
  color: #fff;
}

.result-abbr-layer {
  position: absolute;
  inset: 0;
  z-index: 24;
  pointer-events: none;
}

.result-abbr-layer.is-open {
  pointer-events: auto;
}

.result-abbr-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(22, 53, 40, 0.28);
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.result-abbr-layer.is-open .result-abbr-backdrop {
  opacity: 1;
}

.result-abbr-pop {
  position: absolute;
  top: 120px;
  right: 20px;
  width: 196px;
  max-width: calc(100% - 40px);
  padding: 10px 12px 8px;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: translateY(6px) scale(0.96);
  transform-origin: 100% 0;
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.result-abbr-layer.is-open .result-abbr-pop {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.result-abbr-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutral-500);
  margin-bottom: 8px;
}

.result-abbr-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-abbr-list > div {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  gap: 8px;
}

.result-abbr-list dt {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-brand-dark);
  font-variant-numeric: tabular-nums;
}

.result-abbr-list dd {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-text);
}

.result-abbr-list dd span {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-neutral-500);
}

.result-stat-wrap {
  overflow-x: hidden;
}

.result-stat-wrap table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.result-stat-wrap th,
.result-stat-wrap td {
  padding: 5px 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-stat-wrap th {
  color: var(--color-neutral-500);
  font-weight: 500;
  border-bottom: 1px solid var(--color-neutral-200);
}

.result-stat-wrap th:first-child,
.result-stat-wrap td:first-child {
  width: 7%;
}

.result-stat-wrap th:nth-child(2),
.result-stat-wrap td.name {
  width: 26%;
  text-align: left;
  font-weight: 600;
  min-width: 0;
}

.result-pitch-card .result-stat-wrap th:first-child,
.result-pitch-card .result-stat-wrap td.name {
  width: 22%;
}

.result-pitch-card .result-stat-wrap th:first-child {
  text-align: left;
}

.result-pitch-empty {
  margin: 0 4px 8px;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.result-plays {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.result-scorecard-link {
  display: block;
  margin: 10px 0 0;
  text-align: center;
  text-decoration: none;
}

.result-play {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 8px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}

.result-play .inn {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-brand-dark);
}

.result-play .who {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
}

.result-play .who small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-neutral-500);
}

.result-play .act {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary-text);
}

.result-empty {
  text-align: center;
  font-size: 12px;
  color: var(--color-neutral-500);
  padding: 16px 8px;
  margin: auto;
}

.result-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* 记分流程无底栏：悬浮层略抬离屏幕底，便于点按 */
body.flow-screen .more-sheet,
body.flow-screen .def-edit-bar {
  bottom: 56px;
}

body.flow-screen .fc-pro-dialog,
body.flow-screen .log-dialog {
  bottom: 12px;
}

body.flow-screen .log-dialog {
  height: calc((100% - 64px) * 0.6);
}

body.flow-screen .ph-dialog {
  bottom: 12px;
  height: calc((100% - 64px) * 0.6);
}

@media (max-width: 520px) {
  body.flow-screen .more-sheet,
  body.flow-screen .def-edit-bar {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  body.flow-screen .fc-pro-dialog,
  body.flow-screen .log-dialog,
  body.flow-screen .ph-dialog {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===== 主入口：比赛 / 球队 / 数据 / 我的 ===== */
.match-card {
  position: relative;
  padding: 12px;
}

.match-card.has-close .match-card-top {
  padding-right: 28px;
}

.match-card-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-neutral-100);
  color: var(--color-neutral-500);
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
}

.match-card-close:active {
  background: var(--color-neutral-200);
  color: var(--color-primary-text);
}

.match-card + .match-card {
  margin-top: 8px;
}

.match-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.match-card-meta {
  font-size: 11px;
  color: var(--color-neutral-500);
}

.match-card-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
}

.match-card-score .vs {
  color: var(--color-neutral-400);
  font-size: 12px;
  font-weight: 600;
}

.match-card-score b {
  font-variant-numeric: tabular-nums;
}

.stats-past-card + .stats-past-card {
  margin-top: 10px;
}

.stats-past-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.stats-past-actions .btn {
  flex: 1;
  text-align: center;
}

.stats-export-wrap {
  position: relative;
  flex: 1;
}

.stats-export-wrap .stats-export-btn {
  width: 100%;
}

.stats-export-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(22, 53, 40, 0.12);
  overflow: hidden;
}

.stats-export-menu[hidden] {
  display: none;
}

.stats-export-menu a {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1f2937);
  text-align: center;
  text-decoration: none;
}

.stats-export-menu a + a {
  border-top: 1px solid var(--line, #e5e7eb);
}

.stats-history-card {
  padding-bottom: 12px;
}

.stats-cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-neutral-500);
  cursor: pointer;
}

.stats-cal-btn:active {
  background: var(--color-neutral-100);
  color: var(--color-brand-dark);
}

.stats-cal-btn svg {
  width: 20px;
  height: 20px;
}

.phone-screen:has(.stats-cal-layer) {
  position: relative;
}

.stats-cal-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.stats-cal-layer[hidden] {
  display: none !important;
}

.stats-cal-layer.is-open {
  pointer-events: auto;
}

.stats-cal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(22, 53, 40, 0.28);
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.stats-cal-layer.is-open .stats-cal-backdrop {
  opacity: 1;
}

.stats-cal-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 76px;
  padding: 14px 12px 12px;
  background: var(--color-bg-card, #fff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: translateY(12px);
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.stats-cal-layer.is-open .stats-cal-sheet {
  transform: translateY(0);
  opacity: 1;
}

.stats-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.stats-cal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-text);
}

.stats-cal-head button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-0, #fff);
  color: var(--color-neutral-700);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.stats-cal-head button:disabled {
  opacity: 0.35;
  cursor: default;
}

.stats-cal-week,
.stats-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.stats-cal-week {
  margin-bottom: 4px;
  font-size: 11px;
  color: var(--color-neutral-400);
}

.stats-cal-cell {
  position: relative;
  height: 36px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-neutral-400);
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}

.stats-cal-cell.is-empty {
  pointer-events: none;
}

.stats-cal-cell.is-today:not(.is-on) {
  box-shadow: inset 0 0 0 1px var(--color-neutral-300);
}

.stats-cal-cell.has-match {
  font-weight: 700;
  color: #111;
}

.stats-cal-cell.is-on {
  background: var(--color-brand);
  color: #fff;
  font-weight: 700;
}

.stats-cal-cell.is-disabled {
  opacity: 0.28;
  cursor: default;
}

.stats-cal-tip {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--color-neutral-400);
  text-align: center;
}

.stats-day-meta {
  font-size: 12px;
  color: var(--color-neutral-400);
  margin-bottom: 8px;
}

.stats-history-empty {
  padding: 8px 0 4px;
  margin: 0;
  font-size: 13px;
  color: var(--color-neutral-500);
  text-align: center;
}

.card .stats-past-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hub-empty {
  text-align: center;
  padding: 20px 12px;
}

.hub-empty p {
  font-size: 13px;
  color: var(--color-neutral-500);
  margin-bottom: 12px;
}

.hub-soon-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hub-soon-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
}

.hub-soon-item .t {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-text);
}

.hub-soon-item .d {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-neutral-500);
}

.hub-soon-item .soon {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-neutral-400);
}

a.hub-soon-item {
  cursor: pointer;
}

.hub-soon-item .go {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--color-neutral-400);
}

.hub-soon-item .go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.me-screen .page-body,
body.event-board-screen .page-body,
body.mp-demo .page-body,
body.stats-screen .page-body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body.me-screen .page-body::-webkit-scrollbar,
body.event-board-screen .page-body::-webkit-scrollbar,
body.mp-demo .page-body::-webkit-scrollbar,
body.stats-screen .page-body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.hub-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

a.hub-profile {
  cursor: pointer;
}

.hub-profile .who {
  font-size: 16px;
  font-weight: 700;
}

.hub-profile .sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.theme-current .who {
  font-size: 16px;
  font-weight: 700;
}

.theme-current .sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--color-neutral-200);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
}

.theme-card.is-on {
  border-color: var(--selected-border);
  background: var(--selected-bg);
  box-shadow: inset 0 0 0 1px var(--selected-border);
}

.theme-dots {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.theme-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.theme-code {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-neutral-400);
  letter-spacing: 0.04em;
}

.theme-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-text);
}

.theme-blurb {
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-neutral-500);
}

/* ===== 球员名单 ===== */
.top-nav .add-sub {
  width: 28px;
  height: 28px;
  font-size: 18px;
  background: var(--color-brand);
  color: #fff;
}

.roster-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  padding: 12px 8px;
}

.roster-summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roster-summary b {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-brand-dark);
  font-variant-numeric: tabular-nums;
}

.roster-summary span {
  font-size: 11px;
  color: var(--color-neutral-500);
}

.roster-tabs {
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 12px;
}

.roster-card {
  padding: 10px 12px 12px;
}

.roster-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roster-row {
  display: grid;
  grid-template-columns: 40px 1fr 52px 40px;
  gap: 6px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

button.roster-row {
  min-height: 36px;
}

.roster-head {
  margin-bottom: 4px;
  cursor: default;
  min-height: 24px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-neutral-500);
}

.roster-head span:last-child {
  text-align: right;
}

.roster-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-brand-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.roster-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-pos {
  font-size: 12px;
  color: var(--color-neutral-700);
  text-align: center;
}

.roster-status {
  justify-self: end;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
}

.roster-status.is-out {
  background: var(--color-neutral-200);
  color: var(--color-neutral-500);
}

.roster-row.is-out .roster-num {
  background: var(--color-neutral-400);
}

.roster-row.is-out .roster-name {
  color: var(--color-neutral-500);
}

.roster-empty {
  margin: 16px 0 8px;
  text-align: center;
  font-size: 13px;
  color: var(--color-neutral-500);
}

.roster-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: auto;
  max-height: min(72%, 420px);
  padding: 8px 8px 12px;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: translateY(10px) scale(0.96);
  transform-origin: 50% 100%;
  opacity: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.more-layer.is-open .roster-sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.roster-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px 4px;
}

.roster-form .field-label {
  margin-top: 6px;
}

.roster-form .field {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-200);
}

.roster-out-switch {
  margin: 10px 0 4px;
  margin-left: 0;
}

.roster-form-hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-accent-red);
}

.roster-del {
  color: var(--color-accent-red);
}

/* ===== 入队 / 训练赛报�?===== */
.tag.open {
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
  font-weight: 600;
}

.tag.warn {
  background: #fff4e5;
  color: #b36b00;
  font-weight: 600;
}

.role-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.role-seg button {
  height: 36px;
  border: 1px solid var(--color-neutral-200);
  background: var(--color-white);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-text);
  cursor: pointer;
}

.role-seg button.active {
  border-color: var(--selected-border);
  background: var(--selected-bg);
  color: var(--color-brand-dark);
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack-form .field-label {
  margin: 4px 0 0;
}

/* 发起报名：紧凑表单（手填开赛/截止，无大段标题区） */
body.event-create-screen .page-body {
  padding-top: 10px;
  gap: 10px;
}

.event-create-tip {
  margin: 0;
  padding: 0 2px;
  font-size: 12px;
  color: var(--color-neutral-400);
  line-height: 1.4;
}

.stack-form--compact {
  gap: 6px;
  padding: 12px 14px;
}

.stack-form--compact .field-label {
  margin: 2px 0 0;
  font-size: 12px;
}

.stack-form--compact .field {
  height: 36px;
  padding: 6px 10px;
  font-size: 14px;
}

.stack-form--compact .form-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.stack-form--compact .form-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stack-form--compact .form-col--type {
  flex: 0 0 108px;
}

.stack-form--compact .form-col .field-label {
  margin: 0;
}

.stack-form--compact .event-create-switch {
  margin-top: 4px;
  margin-bottom: 2px;
}

.stack-form--compact .btn-block {
  margin-top: 4px;
}

.field-hint {
  margin: -2px 0 0;
  font-size: 12px;
  color: var(--color-neutral-400);
  line-height: 1.4;
}

.hint-ok {
  font-size: 12px;
  color: var(--color-brand-dark);
}

.hint-err {
  font-size: 12px;
  color: var(--color-accent-red);
}

.person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.person-row + .person-row {
  border-top: 1px solid var(--color-neutral-200);
}

.person-main {
  flex: 1;
  min-width: 0;
}

.person-main .t {
  font-size: 13px;
  font-weight: 600;
}

.person-main .d {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-neutral-500);
}

.person-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.mini-btn {
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
}

.mini-btn.ghost {
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
}

.badge-link {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
}

.badge-link.is-guest {
  background: #fff4e5;
  color: #b36b00;
}

.event-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 12px;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.event-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-text);
}

.share-box {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  font-size: 11px;
  color: var(--color-neutral-700);
  word-break: break-all;
}

.roster-name .bind {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-neutral-400);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--color-neutral-200);
}

.check-row:first-child {
  border-top: none;
}

.check-row input {
  width: 16px;
  height: 16px;
}

.check-row .grow {
  flex: 1;
  min-width: 0;
}

.invite-code {
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-brand-dark);
}

.scan-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.scan-frame {
  position: relative;
  width: 168px;
  height: 168px;
  background: var(--color-neutral-100);
  border-radius: var(--radius-md);
}

.scan-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--color-brand);
  border-style: solid;
}

.scan-corner.tl {
  top: 12px;
  left: 12px;
  border-width: 3px 0 0 3px;
}

.scan-corner.tr {
  top: 12px;
  right: 12px;
  border-width: 3px 3px 0 0;
}

.scan-corner.bl {
  bottom: 12px;
  left: 12px;
  border-width: 0 0 3px 3px;
}

.scan-corner.br {
  bottom: 12px;
  right: 12px;
  border-width: 0 3px 3px 0;
}

/* WeChat mini-program chrome */
body.mp-demo .phone {
  border-color: #1f1f1f;
}

.mp-status {
  background: #ededed;
  color: #111;
}

.mp-nav {
  height: 44px;
  padding: 0 12px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ededed;
  color: #111;
  flex-shrink: 0;
}

.mp-nav-left {
  display: flex;
  align-items: center;
  gap: 2px;
}

.mp-nav-left svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.mp-nav .nav-title {
  font-size: 15px;
  font-weight: 600;
}

.mp-capsule {
  width: 87px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.6);
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
}

.mp-capsule i {
  height: 16px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #333;
}

.mp-capsule b {
  width: 1px;
  height: 18px;
  background: rgba(0, 0, 0, 0.12);
  justify-self: center;
}

body.mp-demo .page-body {
  padding-bottom: 16px;
  background: #f7f7f7;
}

.mp-hero {
  padding-bottom: 4px;
}

.mp-count {
  font-size: 12px;
  color: var(--color-neutral-500);
}

.wx-personas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.wx-personas button {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--color-neutral-200);
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}

.wx-personas button.active {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  color: var(--color-brand-dark);
  font-weight: 600;
}

.mp-list .person-row {
  cursor: default;
  padding: 7px 0;
}

.mp-list .person-pos {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.mp-list .person-row.is-guest .roster-num {
  background: var(--color-neutral-400);
}

.auth-hero {
  margin: 12px 0 8px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-brand-dark);
}

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  font-size: 13px;
}

.auth-links a {
  color: var(--color-brand);
  text-decoration: none;
}

.captcha-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.captcha-row .field {
  flex: 1;
  min-width: 0;
}

.captcha-canvas {
  width: 88px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-300);
  background: #eef4ea;
  cursor: pointer;
}

.auth-send {
  flex-shrink: 0;
  height: 40px;
  padding: 0 12px;
  font-size: 13px;
}

/* ===== 数据分享面（编辑式海报） ===== */

body.share-page .phone-screen {
  position: relative;
}

body.share-page .page-body.share-surface {
  padding: 16px 16px 28px;
  scrollbar-width: none;
}

body.share-page .page-body.share-surface::-webkit-scrollbar {
  display: none;
}

body.share-page.mp-demo .page-body {
  background: var(--color-bg-page);
}

button.nav-icon {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.share-panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.share-panel + .share-panel,
.share-head + .share-panel {
  margin-top: 12px;
}

#board-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.share-head {
  padding: 4px 4px 12px;
}

.share-kicker {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-neutral-400);
  font-weight: 500;
}

.share-title {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-neutral-900);
}

.share-tabs {
  display: flex;
  gap: 20px;
  margin: 0 0 12px;
  padding: 0 4px;
  border-bottom: 1px solid var(--color-neutral-200);
}

.share-tabs button {
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-neutral-400);
  cursor: pointer;
  box-shadow: inset 0 -1px 0 transparent;
}

.share-tabs button.is-on {
  color: var(--color-brand-dark);
  font-weight: 600;
  box-shadow: inset 0 -1.5px 0 var(--color-brand);
}

.share-lead {
  position: relative;
  z-index: 1;
  padding: 4px 0 2px;
}

.share-lead-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 3px 0 0 var(--color-brand);
}

.share-lead-mark {
  position: absolute;
  inset: 0;
  width: 110%;
  height: 110%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: translateX(20%) translateY(-5%);
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.share-lead-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* 夜赛深底：去色相 + soft-light，避免 screen 把队徽饱和色提成色块 */
[data-theme="night"] .share-lead-mark {
  filter: grayscale(1) contrast(1.05) brightness(1.15);
  mix-blend-mode: soft-light;
  opacity: 0.18;
}

.share-lead-rank {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-neutral-400);
}

.share-lead-stat {
  margin: 6px 0 8px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-brand-dark);
  font-variant-numeric: tabular-nums;
}

.share-lead-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary-text);
}

.share-lead-name span {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-400);
}

.share-lead-meta {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-neutral-500);
}

.share-place {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
}

.share-place + .share-place,
.share-rank-list .share-place + .share-row,
.share-split {
  box-shadow: inset 0 1px 0 var(--color-neutral-200);
}

.share-split {
  height: 8px;
  margin: 4px 0;
}

.share-place .rk {
  width: 18px;
  font-size: 13px;
  color: var(--color-neutral-400);
  font-variant-numeric: tabular-nums;
}

.share-place .who {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
}

.share-place .who span {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-neutral-400);
}

.share-place .val {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-text);
}

.share-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  font-size: 14px;
}

.share-row + .share-row {
  box-shadow: inset 0 1px 0 var(--color-neutral-200);
}

.share-row .rk {
  width: 18px;
  color: var(--color-neutral-400);
  font-variant-numeric: tabular-nums;
}

.share-row .who {
  flex: 1;
  min-width: 0;
}

.share-row .who span {
  margin-left: 6px;
  font-size: 12px;
  color: var(--color-neutral-400);
}

.share-row .val {
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-text);
  font-weight: 600;
}

.share-foot {
  margin-top: 16px;
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-neutral-400);
}

.share-hero-date {
  position: relative;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-neutral-400);
  margin-bottom: 14px;
}

.share-hero-date .share-swap {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  letter-spacing: 0.08em;
}

.share-match-picker {
  display: none;
  margin: 0 0 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-0, #fff);
  overflow: hidden;
}

.share-match-picker.is-open {
  display: block;
}

.share-match-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--color-neutral-200);
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.share-match-pick:last-child {
  border-bottom: 0;
}

.share-match-pick.is-on {
  background: var(--color-neutral-100);
}

.share-match-pick .d {
  font-size: 12px;
  color: var(--color-neutral-400);
}

.share-match-pick .s {
  font-size: 14px;
  font-weight: 600;
}

.share-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 8px;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-neutral-200);
  position: relative;   /* 让背景图相对这块定位 */
  overflow: hidden;     /* 图超出时裁掉 */
  isolation: isolate;   /* 限制 z-index / 混合模式在本层内 */
}
/*  */
.share-score-bg {
  position: absolute;
  top: 50%;
  height: 120%;
  width: 46%;
  object-fit: contain;
  transform: translateY(-50%);
  opacity: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.share-score-bg.left {
  left: 16px;
  object-position: left center;
}
.share-score-bg.right {
  right: 0;
  object-position: 20%;
}
/* 夜赛：队徽作暗底水印，去色相；其它主题仍全彩 opacity:1 */
[data-theme="night"] .share-score-bg {
  opacity: 0.28;
  filter: grayscale(0.85) brightness(0.9);
}
.share-scoreboard > .side,
.share-scoreboard > span {
  position: relative;
  z-index: 1;           /* 队名、比分始终在图上面 */
}
.share-vs {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -58%) skewX(-12deg);
  z-index: 1;
  font-size: 28px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--color-neutral-900);
  opacity: 1;
  pointer-events: none;
  user-select: none;
}


/*  */


.share-scoreboard .side {
  min-width: 0;
}

.share-scoreboard .side.away {
  text-align: right;
}

.share-scoreboard .tn {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-neutral-500);
  margin-bottom: 4px;
}

.share-scoreboard .sc {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-brand-dark);
  font-variant-numeric: tabular-nums;
}

.share-scoreboard .sc.away {
  color: var(--color-accent-red);
}

.share-linescore {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.share-linescore th,
.share-linescore td {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  padding: 8px 0;
  color: var(--color-neutral-500);
}

.share-linescore th {
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-neutral-200);
}

.share-linescore tbody tr + tr td {
  border-top: 1px solid var(--color-neutral-200);
}

.share-linescore td.team {
  text-align: left;
  width: 28px;
  color: var(--color-primary-text);
  font-weight: 500;
}

.share-linescore td.team,
.share-linescore th:first-child {
  border-right: 1px solid var(--color-neutral-200);
  padding-left: 8px;
  padding-right: 8px;
}

.share-inning-nav {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  margin: 0 0 8px;
  padding: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-neutral-400);
  scrollbar-width: none;
  border-bottom: 1px solid var(--color-neutral-200);
}

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

.share-inning-nav button {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0 0 4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.share-inning-nav button.is-on {
  color: var(--color-brand-dark);
  font-weight: 600;
  box-shadow: inset 0 -1.5px 0 var(--color-brand);
}

.share-half {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}

.share-half:first-child {
  margin-top: 4px;
}

.share-half-title {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-neutral-400);
  margin-bottom: 4px;
}

.share-play {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
}

.share-play + .share-play {
  box-shadow: inset 0 1px 0 var(--color-neutral-200);
}

.share-play .act {
  color: var(--color-neutral-500);
  font-size: 14px;
}

.share-poster {
  padding: 16px 16px 18px;
}

.share-poster-bar {
  height: 3px;
  width: 100%;
  background: var(--color-brand);
  margin: 0 0 18px;
  border-radius: 2px;
}

.share-poster-meta {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-neutral-500);
}

.share-block {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-neutral-200);
}

.share-block-title {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-neutral-400);
  margin-bottom: 12px;
}

.share-spots {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  text-align: center;
}

.share-spots > div {
  padding: 10px 4px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}

.share-spots b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-brand-dark);
  font-variant-numeric: tabular-nums;
}

.share-spots i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
}

.share-mini {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.share-mini th {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-neutral-400);
  text-align: right;
  padding: 8px 6px;
  background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-neutral-200);
}

.share-mini th.name,
.share-mini td.name {
  text-align: left;
  border-right: 1px solid var(--color-neutral-200);
}

.share-mini td {
  font-size: 14px;
  padding: 8px 6px;
  text-align: right;
}

.share-mini td.name {
  font-weight: 500;
}

.share-mini tr + tr td {
  box-shadow: inset 0 1px 0 var(--color-neutral-200);
}

.share-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
}

.share-actions .ghost {
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--color-neutral-200);
  background: transparent;
  font-size: 13px;
  color: var(--color-primary-text);
  cursor: pointer;
}

.share-actions .text {
  border: none;
  background: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-brand-dark);
  cursor: pointer;
}

.share-swap {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--color-neutral-400);
  cursor: pointer;
}

.share-hub-list {
  display: flex;
  flex-direction: column;
}

.share-hub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  color: inherit;
}

.share-hub-item.is-title-only {
  padding: 13px 0;
}

.share-hub-item + .share-hub-item {
  box-shadow: inset 0 1px 0 var(--color-neutral-200);
}

.card .share-hub-item:first-child {
  padding-top: 0;
}

.card .share-hub-item:last-child {
  padding-bottom: 0;
}

.share-hub-item .t {
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
}

.share-hub-item .d {
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.share-hub-item .go {
  flex: 0 0 auto;
  color: var(--color-neutral-400);
}

.share-hub-item .go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.share-hub-item .share-hub-meta {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 12px;
  color: var(--color-neutral-500);
  font-variant-numeric: tabular-nums;
}

.share-hub-item .share-hub-meta:empty {
  display: none;
}

.share-hub-item .share-hub-meta.invite-code {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-brand-dark, #0b6b3a);
}

.share-hub-item .soon {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  color: var(--color-neutral-400);
}

.share-hub-item .share-hub-meta + .go,
.share-hub-item .soon + .go {
  margin-left: 8px;
}

/* —— 个人赛季卡 / 本场 box（数据 Tab · 紧凑） —— */
.stats-screen .section {
  margin-bottom: 10px;
}

.stats-screen .section-head {
  margin-bottom: 6px;
}

.stats-screen .section-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.stats-screen .section-ico {
  width: 14px;
  height: 14px;
  color: var(--color-brand-dark, #0b6b3a);
  flex: 0 0 auto;
}

.stats-screen .section-hint {
  font-size: 11px;
}

a.me-season-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.me-season-card {
  position: relative;
  overflow: hidden;
  padding: 10px 12px;
}

.me-season-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-brand);
}

.me-season-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.me-season-jersey {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-brand-dark);
  background-color: color-mix(in srgb, var(--color-brand) 14%, transparent);
  background-size: cover;
  background-position: center;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

.me-season-jersey.has-img {
  color: transparent;
  background-color: var(--color-neutral-200, #e5e7eb);
}

.me-season-id {
  flex: 1;
  min-width: 0;
}

.me-season-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.me-season-sub {
  margin-top: 1px;
  font-size: 10px;
  color: var(--color-neutral-500);
  line-height: 1.2;
}

.me-season-avg {
  flex: 0 0 auto;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-brand-dark);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.me-season-avg span {
  display: block;
  margin: 2px 0 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-neutral-400);
}

.me-season-share {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: var(--color-brand-dark);
}

.me-season-share-ico {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.me-season-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line, #e5e7eb);
  text-align: center;
}

.me-season-grid b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-text);
}

.me-season-grid i {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--color-neutral-500);
}

.me-season-foot {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--color-neutral-400);
  line-height: 1.2;
}

.me-season-sep {
  display: inline-block;
  width: 1px;
  height: 9px;
  margin: 0 8px;
  background: var(--line, #e5e7eb);
  flex: 0 0 auto;
}

.me-season-empty {
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
}

/* 本场：紧凑票据 */
.me-box-card {
  padding: 8px 12px 10px;
  overflow: hidden;
}

.me-box-card.is-empty {
  padding: 10px 12px;
}

.me-box-spine {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}

.me-box-side {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28%;
}

.me-box-side.away {
  text-align: right;
}

.me-box-score-num {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.me-box-score-num b {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brand-dark);
  line-height: 1;
}

.me-box-score-num i {
  font-style: normal;
  font-size: 11px;
  color: var(--color-neutral-400);
}

.me-box-meta {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--color-neutral-500);
  white-space: nowrap;
}

.me-box-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary-text);
  line-height: 1.2;
}

.me-box-who-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-brand-dark);
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 16px;
}

.me-box-who-avg {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-neutral-500);
  font-variant-numeric: tabular-nums;
}

.me-box-dots {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-top: 6px;
  padding: 5px 0 2px;
  border-top: 1px dashed var(--line, #e5e7eb);
}

.me-box-cell {
  text-align: center;
  min-width: 0;
  position: relative;
}

.me-box-cell + .me-box-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--line, #e5e7eb);
}

.me-box-cell b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary-text);
  font-variant-numeric: tabular-nums;
}

.me-box-cell i {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--color-neutral-500);
}

.me-box-card .stats-past-actions {
  margin-top: 8px;
  gap: 6px;
}

.me-box-card .stats-past-actions .btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

/* —— 个人分享海报 —— */
.me-share-poster .me-share-kicker {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-neutral-400);
}

.me-share-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.me-share-identity.compact {
  margin-top: 0;
  margin-bottom: 12px;
}

.me-share-jersey {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-brand-dark);
  background: color-mix(in srgb, var(--color-brand) 16%, transparent);
  font-variant-numeric: tabular-nums;
}

.me-share-name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.me-share-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-neutral-500);
}

.me-share-hero {
  margin: 18px 0 8px;
  text-align: center;
}

.me-share-avg {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-brand-dark);
  font-variant-numeric: tabular-nums;
}

.me-share-avg-label {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-neutral-400);
}

.me-share-spots {
  margin-top: 8px;
  grid-template-columns: repeat(4, 1fr);
}

.me-share-box-block .me-share-spots {
  grid-template-columns: repeat(3, 1fr);
}

.me-share-rates {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--color-neutral-500);
  font-variant-numeric: tabular-nums;
}

.me-share-scoreboard {
  margin-top: 8px;
}

.share-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.share-layer.is-open {
  pointer-events: auto;
}

.share-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(18, 40, 29, 0.36);
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.share-layer.is-open .share-backdrop {
  opacity: 1;
}

.share-sheet {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  background: var(--color-bg-card);
  border-radius: 16px;
  overflow: hidden;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

.share-layer.is-open .share-sheet {
  transform: translateY(0);
  opacity: 1;
}

.share-sheet button {
  width: 100%;
  height: 48px;
  border: none;
  background: none;
  font-size: 15px;
  color: var(--color-primary-text);
  cursor: pointer;
}

.share-sheet button + button {
  box-shadow: inset 0 1px 0 var(--color-neutral-200);
}

.share-sheet button.is-cancel {
  color: var(--color-neutral-500);
}

.share-toast {
  position: absolute;
  left: 50%;
  bottom: 72px;
  z-index: 40;
  transform: translateX(-50%) translateY(6px);
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(18, 40, 29, 0.92);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.share-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== 专业记分卡（参考专业记分簿：红蓝符号 / 守备路径 / 局末 //） ===== */
.scorecard-sheet {
  padding-bottom: 12px;
}

.scorecard-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
  padding: 3px;
  border-radius: 10px;
  background: var(--color-neutral-100);
}

.scorecard-sides button {
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-500);
  cursor: pointer;
}

.scorecard-sides button.is-on {
  background: var(--color-surface, #fff);
  color: var(--color-primary-text);
  box-shadow: 0 1px 2px rgba(18, 40, 29, 0.08);
}

.scorecard-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -8px 10px;
  padding: 0 8px 6px;
}

.scorecard-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 11px;
  background: #fff;
  border: 1px solid #cfd8df;
}

[data-theme="night"] .scorecard-table {
  background: rgba(28, 36, 32, 0.95);
  border-color: rgba(160, 180, 168, 0.25);
}

.scorecard-table th,
.scorecard-table td {
  border: 1px solid #cfd8df;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

[data-theme="night"] .scorecard-table th,
[data-theme="night"] .scorecard-table td {
  border-color: rgba(160, 180, 168, 0.22);
}

.sc-pa {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.sc-pa + .sc-pa {
  border-top: 1px dashed #d7e0e7;
}

.scorecard-legend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 8px;
}

.scorecard-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-neutral-600);
  text-align: left;
}

/* —— Pro scorebook chrome —— */
.scorecard-pro {
  padding-left: 12px;
  padding-right: 12px;
}

.sc-pro-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "score inn"
    "meta meta";
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #e8f2ea, #dce9df);
  color: #1d3a28;
}

[data-theme="night"] .sc-pro-bar {
  background: linear-gradient(180deg, #24352a, #1b2820);
  color: #d7e7dc;
}

.sc-pro-score {
  grid-area: score;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.sc-pro-score .lab {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
}

.sc-pro-score b {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.sc-pro-score i {
  font-style: normal;
  font-size: 18px;
  font-weight: 700;
  opacity: 0.45;
}

.sc-pro-inn {
  grid-area: inn;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}

[data-theme="night"] .sc-pro-inn {
  background: rgba(0, 0, 0, 0.25);
}

.sc-pro-meta {
  grid-area: meta;
  font-size: 11px;
  opacity: 0.72;
}

.sc-pro-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-neutral-200);
}

.sc-pro-tabs button {
  border: 0;
  background: transparent;
  padding: 9px 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-400);
  cursor: pointer;
  position: relative;
}

.sc-pro-tabs button.is-on {
  color: #d97706;
}

.sc-pro-tabs button.is-on::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 2.5px;
  border-radius: 2px;
  background: #f59e0b;
}

.sc-pro-view {
  display: none;
}

.sc-pro-view.is-on {
  display: block;
}

.sc-pro-table thead th {
  background: #d9eadc;
  color: #2d4a38;
  font-weight: 700;
  height: 26px;
  min-width: 80px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

[data-theme="night"] .sc-pro-table thead th {
  background: rgba(11, 107, 58, 0.28);
  color: #d7e7dc;
}

.sc-pro-table th.sc-player-h,
.sc-pro-table td.sc-player-c {
  min-width: 108px;
  width: 108px;
  max-width: 118px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #f4f8f5;
  text-align: left;
  vertical-align: top;
}

[data-theme="night"] .sc-pro-table th.sc-player-h,
[data-theme="night"] .sc-pro-table td.sc-player-c {
  background: #1e2a23;
}

.sc-pro-table thead th.sc-player-h {
  z-index: 3;
  background: #d9eadc;
}

[data-theme="night"] .sc-pro-table thead th.sc-player-h {
  background: rgba(11, 107, 58, 0.35);
}

.sc-pro-table td.sc-cell {
  min-width: 80px;
  width: 80px;
  height: auto;
  min-height: 66px;
  padding: 0;
  background: #fff;
}

[data-theme="night"] .sc-pro-table td.sc-cell {
  background: rgba(20, 28, 24, 0.9);
}

.sc-pro-cell {
  width: 79px;
  height: 64px;
  display: block;
  margin: 0 auto;
}

.sc-pro-cell .sc-guide {
  stroke: #b7c4ce;
  stroke-width: 1;
  stroke-dasharray: 2.2 2;
  stroke-linecap: round;
}

.sc-pro-cell .sc-rail {
  stroke: #b7c4ce;
  stroke-width: 1;
  stroke-linecap: square;
}

[data-theme="night"] .sc-pro-cell .sc-guide {
  stroke: rgba(160, 180, 168, 0.4);
}

[data-theme="night"] .sc-pro-cell .sc-rail {
  stroke: rgba(160, 180, 168, 0.4);
}

.sc-pro-player {
  display: flex;
  gap: 6px;
  padding: 6px 6px 4px;
  min-height: 66px;
}

.sc-pro-player .ord {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: #2f8f4e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sc-pro-player .who {
  min-width: 0;
  flex: 1;
}

.sc-pro-player .row1 {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sc-pro-player .row1 b {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sc-pro-player .pos {
  flex: 0 0 auto;
  padding: 1px 4px;
  border-radius: 3px;
  background: #d62828;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.sc-pro-player .num {
  margin-top: 1px;
  font-size: 10px;
  color: var(--color-neutral-400);
}

.sc-pro-subs {
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px dashed #cfd8df;
}

.sc-pro-subs.is-empty {
  opacity: 0.35;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--color-neutral-400);
}

.sc-pro-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.sc-pro-sub .badge {
  flex: 0 0 auto;
  padding: 1px 4px;
  border-radius: 3px;
  background: #f59e0b;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.3;
}

.sc-pro-sub .nm {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-neutral-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sc-pro-plays {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
}

.sc-pro-play {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: var(--color-neutral-100);
}

.sc-pro-play .t {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-neutral-900);
}

.sc-pro-play .d {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-neutral-500);
}

.sc-pro-legend {
  padding: 4px 0 10px;
}

.sc-pro-legend-note {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--color-neutral-500);
  line-height: 1.45;
  margin-bottom: 4px;
}

.sc-pro-legend-item .sc-pro-cell {
  width: 70px;
  height: 56px;
  flex: 0 0 auto;
}

[data-theme="night"] .sc-pro-cell circle[fill="#1a1a1a"] {
  fill: #e8eee9;
}

[data-theme="night"] .sc-pro-cell circle[stroke="#1a1a1a"] {
  stroke: #e8eee9;
}

[data-theme="night"] .sc-pro-cell polygon[stroke="#1a1a1a"] {
  stroke: #e8eee9;
}

[data-theme="night"] .sc-pro-cell .sc-pitch-b,
[data-theme="night"] .sc-pro-cell line[stroke="#1a1a1a"] {
  stroke: #e8eee9;
}

[data-theme="night"] .sc-pro-cell .sc-steal-tick,
[data-theme="night"] .sc-pro-cell circle.sc-steal-tick {
  fill: #e8eee9;
}

[data-theme="night"] .sc-pro-cell polygon[fill="#1a1a1a"] {
  fill: #e8eee9;
}

/* ===== 问题反馈 ===== */
.fb-contact-label {
  font-size: 12px;
  color: var(--color-neutral-400);
}

.fb-contact-value {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-text);
  word-break: break-all;
}

/* ===== 比赛结算 · 本人行高亮（无文字标签） ===== */
.result-stat-wrap tbody tr.is-me td {
  background: var(--color-brand-soft);
}

.result-stat-wrap tbody tr.is-me td:first-child {
  box-shadow: inset 3px 0 0 var(--color-brand);
  border-radius: 4px 0 0 4px;
}

.result-stat-wrap tbody tr.is-me td:last-child {
  border-radius: 0 4px 4px 0;
}

.result-stat-wrap tbody tr.is-me td.name {
  color: var(--color-brand-dark);
  font-weight: 700;
}

[data-theme="night"] .result-stat-wrap tbody tr.is-me td {
  background: rgba(232, 197, 71, 0.12);
}