/* 17-0 · 手机优先。
   **排版**照 38-0：草坪竖条纹是整页背景而不是一个小部件，首页是竖向堆叠的大卡片
   菜单，logo 是巨大加粗数字，主 CTA 是满宽大圆角按钮。
   **配色**换成《足一把》的墨绿主题(它 style.css 里的 html.bg-green)：
   近黑墨绿 + 中绿强调 + 暖赭点缀。原来的 #22c55e 亮绿在整页深底上太跳，
   而墨绿那套是按"强调色只出现在主按钮和选中态"调过的，长时间看不刺眼。 */
:root {
  --bg: #0e100f;          /* 足一把 --ink */
  --bg-2: #151816;        /* --panel */
  /* 卡片底色务必是 6 位十六进制。写成 8 位(#16203551)会被当成带 alpha，
     整页所有卡片只剩 32% 不透明度，看着像蒙了层灰 —— 踩过一次。 */
  --card: #151816;        /* --surface */
  --card-2: #1a1e1b;      /* --panel-2 */
  --line: #333a34;
  --line-soft: #1d211e;
  --line-strong: #414a42;
  --fg: #edefea;
  --dim: #9ca49d;
  --faint: #848c85;
  --accent: #4fb56a;
  --accent-2: #6cc884;    /* 悬停态，比 accent 亮一档 */
  --accent-on: #0e1a10;   /* 压在亮绿块上的字，别再散写 #04240f */
  --gold: #d9a63f;        /* --y */
  --win: #4fb56a;
  /* 平局用中性灰绿(足一把的 --x)而不是暗黄：黄和橙挨着会分不清平和负 */
  --draw: #7e877f;
  --loss: #e08a4e;        /* --warn */
  --pitch: #16291d;
  --pitch-2: #1a3123;
  --r: 16px;
  --r-lg: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* 草坪竖条纹 + 顶部的球场灯光。整页背景就是球场，这是 38-0 视觉的核心。 */
body {
  background-image:
    radial-gradient(760px 420px at 50% -8%, #17301f 0%, transparent 68%),
    repeating-linear-gradient(90deg, #0c0e0d 0 40px, #101413 40px 80px);
  background-attachment: fixed;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
}

.screen { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 首页 ---------- */

.hero { text-align: center; padding: 30px 0 20px; }

/* 巨大加粗数字，破折号用主色 —— 38-0 的 logo 就是这个做法，辨识度全靠它 */
.logo {
  margin: 0;
  font-size: 82px;
  font-weight: 900;
  letter-spacing: -5px;
  line-height: .95;
  color: var(--fg);
}
.logo span { color: var(--accent); }

.tagline { color: var(--dim); margin: 12px 0 0; font-size: 14px; }
.tagline.strong { color: var(--fg); font-weight: 600; margin-top: 10px; }

/* ---------- 首页菜单：竖向堆叠的大卡片 ---------- */

.menu { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }

.menu-item {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px;
  color: var(--fg); font-family: inherit; transition: .15s;
}
.menu-item:hover { border-color: var(--accent); background: var(--card-2); }
.menu-item .ico { font-size: 22px; width: 26px; text-align: center; }
.menu-item .txt { flex: 1; min-width: 0; }
/* .t / .d 是 span，默认 inline 会挤在同一行，必须显式转块级 */
.menu-item .t { display: block; font-size: 16px; font-weight: 700; }
.menu-item .d { display: block; font-size: 12px; color: var(--faint); margin-top: 3px; }
.menu-item .go { color: var(--faint); font-size: 18px; }

.menu-item.feature {
  background: linear-gradient(150deg, #1d3a26, var(--card));
  border-color: #35563d;
}
.menu-item.feature .t { color: var(--accent-2); }
.menu-item.done { opacity: .55; }
.menu-item:disabled { cursor: default; opacity: .4; }

.stats-strip {
  display: flex; gap: 8px; margin: 4px 0 18px;
}
.stats-strip div {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 6px; text-align: center;
}
.stats-strip b { display: block; font-size: 19px; }
.stats-strip small { color: var(--faint); font-size: 11px; }

.field { margin: 18px 0; }
.field-label {
  display: block; font-size: 12px; color: var(--faint);
  letter-spacing: 1px; margin-bottom: 8px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  appearance: none; cursor: pointer;
  background: var(--card); color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 14px; font-family: inherit;
  transition: .15s;
}
.chip:hover { border-color: var(--faint); }
.chip[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-on); border-color: var(--accent);
  font-weight: 700;
}
.chip small { opacity: .7; margin-left: 5px; font-size: 11px; }

.hint { color: var(--faint); font-size: 12px; margin: 8px 0 0; min-height: 1em; }

/* ---------- 按钮 ---------- */

.btn {
  appearance: none; cursor: pointer; width: 100%;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px; font-size: 15px; font-family: inherit;
  margin-top: 10px; transition: .15s;
}
.btn:hover:not(:disabled) { border-color: var(--faint); }
.btn:disabled { opacity: .45; cursor: default; }
/* 主 CTA：满宽、亮绿、深色字、带箭头前缀 —— 抄 38-0 的做法，
   在深色页面上这是唯一的高饱和色块，视线一定先落在它上面 */
.btn.primary {
  background: var(--accent); border-color: transparent;
  color: var(--accent-on); font-weight: 800; border-radius: var(--r-lg);
}
.btn.primary:hover:not(:disabled) { background: var(--accent-2); }
.btn.primary::before { content: "→ "; }
.btn.big { padding: 17px; font-size: 17px; }
.btn.ghost { background: none; color: var(--dim); border-color: transparent; }
.btn.tiny { width: auto; padding: 6px 12px; font-size: 13px; margin: 0; }

/* ---------- 抽卡 ---------- */

.draft-top { margin-bottom: 12px; }

.progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.progress span { font-size: 12px; color: var(--faint); white-space: nowrap; }
.bar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }

.wheel-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; text-align: center;
}
.wheel-card.spinning .wheel-club { opacity: .45; filter: blur(1px); }
.wheel-season { font-size: 12px; color: var(--gold); letter-spacing: 1px; }
.wheel-club {
  font-size: 22px; font-weight: 700; margin-top: 3px;
  transition: opacity .12s, filter .12s;
}

/* ---------- 球场 ---------- */

.pitch-wrap { margin: 14px 0; }

.pitch {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    repeating-linear-gradient(0deg, var(--pitch) 0 8%, var(--pitch-2) 8% 16%);
  border: 1px solid #2b5c3c; border-radius: var(--r);
  overflow: hidden;
}
/* 中圈和禁区，纯装饰 */
.pitch::before, .pitch::after {
  content: ""; position: absolute; border: 1px solid #ffffff22;
}
.pitch::before {
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  left: 37%; top: 50%; transform: translateY(-50%);
}
.pitch::after { left: 22%; width: 56%; height: 13%; bottom: -1px; border-bottom: 0; }

.slot {
  position: absolute; transform: translate(-50%, 50%);
  width: 72px; text-align: center; cursor: default;
}
.slot .badge {
  width: 34px; height: 34px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 13px; font-weight: 700;
  background: #0e100fcc; border: 1.5px dashed #ffffff44; color: #ffffff77;
}
.slot.filled .badge {
  border-style: solid; border-color: #fff; background: #0e100fee; color: #fff;
}
.slot.filled.hi .badge { border-color: var(--gold); color: var(--gold); }
/* 允许折两行：球员名(尤其中文名+外文姓)一行放不下，
   截成 "László Köt…" 比换行难认得多 */
.slot .nm {
  font-size: 10px; margin-top: 2px; line-height: 1.15;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.slot .ps { font-size: 9px; color: #ffffff99; }
.slot.target .badge { border-color: var(--accent-2); box-shadow: 0 0 0 3px #4fb56a55; }

/* ---------- 评分分档 ---------- */
/* 照 D:\coporo 那套：铜 / 银 / 金 / 白金。最高一档是**暖白金**不是冰蓝白 ——
   在 30px 的小徽章里眼睛只认冷暖不认明度，冷色看着像从金掉回银，明明是升了一档。 */

.t-bronze { --tier-a: #c98a45; --tier-b: #8f5a22; --tier-ink: #2a1a08; }
.t-silver { --tier-a: #cfd8de; --tier-b: #8d9aa6; --tier-ink: #1c2429; }
.t-gold   { --tier-a: #ffd75e; --tier-b: #d99b1c; --tier-ink: #2b1f02; }
.t-plat   { --tier-a: #fffaea; --tier-b: #e8ac3c; --tier-ink: #16110a; }

.cand .ov.t-bronze, .cand .ov.t-silver, .cand .ov.t-gold, .cand .ov.t-plat {
  background: linear-gradient(155deg, var(--tier-a), var(--tier-b));
  border-color: transparent; color: var(--tier-ink);
}
.cand .ov.t-plat { box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 10px rgba(255,213,120,.35); }

.slot.t-gold .badge { border-color: #ffd75e; color: #ffd75e; }
.slot.t-plat .badge {
  border-color: #fffaea; color: #fffaea;
  box-shadow: 0 0 10px rgba(255, 213, 120, .45);
}
.power .total b.t-gold { color: #ffd75e; }
.power .total b.t-plat { color: #fff6dd; text-shadow: 0 0 10px rgba(255,213,120,.5); }

/* ---------- 羁绊连线（照 FUT 的阵容页）---------- */
/* **抽卡途中一条都不画**，定稿之后才画。抽的时候给等于让人照着线点最大值，
   知道哈维和伊涅斯塔是巴萨队友的人那份优势就没了；定稿了再给，
   玩家才看得到"我这套凑出了什么"。详见 engine/chemistry.js 开头。 */

.chem-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.chem-link { stroke: var(--accent); vector-effect: non-scaling-stroke; }
.chem-link.s1 { stroke-width: 1; opacity: .30; }
.chem-link.s2 { stroke-width: 1.7; opacity: .55; }
.chem-link.s3 { stroke-width: 2.6; opacity: .85; }

.slot { z-index: 2; }

.power { display: flex; gap: 6px; margin-top: 10px; }
.power div {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 4px; text-align: center;
}
.power b { display: block; font-size: 17px; }
.power small { color: var(--faint); font-size: 10px; }
.power .total b { color: var(--gold); }

/* ---------- 候选球员 ---------- */

.cand-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 4px 0 8px; font-size: 12px; color: var(--faint);
}
/* 一支球队最多 25 人，全铺开的话手机上要滑很久才看得到"放弃"按钮。
   限高 + 内部滚动，让球场和候选列表能同屏看见。 */
.cand-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.cand {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px;
  cursor: pointer; font-family: inherit; color: var(--fg); text-align: left;
  transition: .12s;
}
.cand:hover { border-color: var(--accent); background: var(--card-2); }
.cand .ov {
  min-width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  background: var(--bg); border: 1px solid var(--line);
}
.cand .ov.hi { color: var(--gold); border-color: #6b5a24; }
.cand .info { flex: 1; min-width: 0; }
.cand .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand .sub { font-size: 11px; color: var(--faint); }
.cand .to { text-align: right; font-size: 11px; color: var(--dim); white-space: nowrap; }
.cand .to b { display: block; font-size: 15px; color: var(--accent-2); }

.draft-actions { margin-top: 14px; }

/* ---------- 赛程 ---------- */

.season-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 10px;
}
.season-record { font-size: 14px; }
.season-record b { font-size: 20px; }

.fixtures { display: flex; flex-direction: column; gap: 5px; }

.fx {
  display: flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--line);
  border-left-width: 3px; border-radius: 8px; padding: 8px 10px;
  font-size: 13px;
}
.fx.pending { opacity: .38; }
.fx.W { border-left-color: var(--win); }
.fx.D { border-left-color: var(--draw); }
.fx.L { border-left-color: var(--loss); }
.fx .rd { font-size: 10px; color: var(--faint); min-width: 52px; }
.fx .opp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx .opp em { font-style: normal; color: var(--gold); font-size: 11px; opacity: .75; }
.fx .ha { font-size: 10px; color: var(--faint); }
.fx .sc { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 40px; text-align: right; }
.fx .note { font-size: 10px; color: var(--gold); }
.fixtures.compact .fx { padding: 6px 9px; font-size: 12px; }

.new-result { animation: pop .35s ease; }
@keyframes pop { from { transform: scale(.94); opacity: .4; } }

/* ---------- 赛前 / 结算 ---------- */

.screen-title { font-size: 18px; margin: 6px 0 0; }
.sub { font-size: 14px; color: var(--dim); margin: 22px 0 8px; }

.odds {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 12px; margin: 12px 0; font-size: 13px;
}
.odds div { display: flex; justify-content: space-between; padding: 3px 0; }
.odds span:last-child { font-weight: 600; }

.verdict-card {
  background: linear-gradient(160deg, #1d3a26, var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 16px; text-align: center; margin-bottom: 14px;
}
.verdict-card.perfect { border-color: var(--gold); box-shadow: 0 0 30px #d9a63f22; }
.verdict-card h2 { margin: 0 0 8px; font-size: 30px; letter-spacing: -1px; }
.verdict-card.perfect h2 { color: var(--gold); }
.verdict-card p { margin: 0; color: var(--dim); font-size: 14px; }

.badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.badge-pill {
  background: #1d3a26; border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; font-size: 12px;
}
.badge-pill b { color: var(--gold); }

.result-table {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.result-table div {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 4px; text-align: center;
}
.result-table b { display: block; font-size: 18px; }
.result-table small { color: var(--faint); font-size: 10px; }

.awards { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.award {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 13px;
}
.award .t { color: var(--faint); font-size: 11px; }
.award .v { font-weight: 600; }
.award .v small { color: var(--dim); font-weight: 400; margin-left: 6px; }

.player-stats { display: flex; flex-direction: column; gap: 4px; }
.pstat {
  display: flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
.pstat .pos { font-size: 10px; color: var(--faint); min-width: 30px; }
.pstat .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstat .ga { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 12px; }
.pstat .ga b { color: var(--fg); }

.share-row { display: flex; gap: 8px; margin-top: 16px; }
.share-row .btn { margin-top: 0; }

/* ---------- 杂项 ---------- */

/* ---------- 排行榜 ---------- */

.rank-list { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }

.rank-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 13px;
}
.rank-row.me { border-color: var(--accent); background: var(--card-2); }
.rank-row.perfect { border-color: var(--gold); }
.rank-row .no {
  min-width: 34px; font-variant-numeric: tabular-nums;
  color: var(--faint); font-weight: 700;
}
.rank-row .who { flex: 1; min-width: 0; }
.rank-row .who .nm { display: block; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .who .sub { display: block; font-size: 11px; color: var(--faint); }
.rank-row .res { font-weight: 700; white-space: nowrap; }
.rank-row .res.gold { color: var(--gold); }

.rank-me { margin-top: 14px; }
.rank-me-label { font-size: 12px; color: var(--faint); margin-bottom: 5px; }

.name-row { display: flex; gap: 8px; align-items: center; }
.text-input {
  flex: 1; background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 11px 13px; font-size: 15px; font-family: inherit;
}
.text-input:focus { outline: none; border-color: var(--accent); }

.submit-row { margin-top: 16px; }
.submit-done {
  text-align: center; color: var(--dim); font-size: 13px;
  padding: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
}
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-2); font: inherit; text-decoration: underline;
}

.help-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px;
}
.help-item h4 { margin: 0 0 6px; font-size: 14px; color: var(--accent-2); }
.help-item p {
  margin: 0; font-size: 13px; color: var(--dim); line-height: 1.7;
  white-space: pre-line;               /* 难度那段用 \n 分行 */
}

.history { margin-top: 20px; }
.history summary { cursor: pointer; color: var(--dim); font-size: 13px; }
.history-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px;
}
.history-row b { color: var(--gold); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #1a1e1bee; border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px; font-size: 13px;
  z-index: 20; animation: fade .2s;
}

.legal {
  margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 10px; line-height: 1.6; text-align: center;
}

.loading { text-align: center; color: var(--faint); padding: 30px 0; font-size: 13px; }

/* ---------- 联机杯赛 ---------- */

/* 房间码用和 logo 同一套路：巨大字符当视觉锚点。
   房间码要靠嘴念进群里，所以字距拉开、用等宽数字，别让 8/B 挨着看不清。 */
.code-card {
  background: linear-gradient(150deg, #1d3a26, var(--card));
  border: 1px solid #35563d; border-radius: var(--r-lg);
  padding: 20px 16px; text-align: center; margin-bottom: 14px;
}
.code-card .lbl { font-size: 11px; color: var(--faint); letter-spacing: 2px; }
.code-card .code {
  font-size: 52px; font-weight: 900; letter-spacing: .18em;
  line-height: 1.1; margin: 4px 0 0; color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-indent: .18em;                  /* 字距是加在右边的，补一格才真居中 */
}
.code-card .meta { font-size: 12px; color: var(--dim); margin-top: 6px; }

.seats { display: flex; flex-direction: column; gap: 5px; }

.seat {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 13px;
}
.seat.me { border-color: var(--accent); background: var(--card-2); }
.seat.empty { border-style: dashed; opacity: .5; }
.seat .no {
  min-width: 22px; color: var(--faint); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.seat .nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.seat .st { font-size: 11px; color: var(--faint); white-space: nowrap; }
.seat .st.ready { color: var(--accent-2); }

/* ---------- 联赛阶段总表 ---------- */

.league-box { margin-top: 16px; }
.league-box summary {
  cursor: pointer; color: var(--dim); font-size: 13px; padding: 4px 0;
}
.league-box summary::marker { color: var(--faint); }

.ltable { margin-top: 8px; }

.lrow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 12px;
  border: 1px solid transparent; border-radius: 8px;
}
.lrow:nth-child(odd) { background: var(--card); }
/* 前 8 和第 24 名两条分界线：上面是直进 16 强，中间打附加赛，下面回家。
   画在行的下边框上，比插一个分隔元素省事，也不会打乱奇偶底色 */
.lrow.cut { border-bottom-color: var(--line-strong); border-radius: 8px 8px 0 0; }
.lrow.human { color: var(--fg); }
.lrow.human .nm { font-weight: 700; }
.lrow.me { border-color: var(--accent); background: var(--card-2); }
.lrow .no {
  min-width: 22px; text-align: right; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.lrow .nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.lrow.human .nm, .lrow.me .nm { color: var(--fg); }
.lrow .wd, .lrow .gd {
  color: var(--faint); font-variant-numeric: tabular-nums;
  min-width: 40px; text-align: right;
}
.lrow .pt {
  font-weight: 700; min-width: 24px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- 联机抢人 ---------- */

/* 轮次时钟。抢人屏上最重要的一行 —— 玩家进来第一眼要知道"是不是轮到我" */
.live-clock {
  margin: 12px 0 10px; padding: 10px 14px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line);
  text-align: center; font-size: 14px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.live-clock:empty { display: none; }
.live-clock.mine {
  background: linear-gradient(150deg, #1d3a26, var(--card));
  border-color: var(--accent); color: var(--fg); font-weight: 700;
}
/* 最后 10 秒才闪。一直闪的话玩家会忽略它，真到关头就没有提示效果了 */
.live-clock.urgent { color: var(--loss); animation: clockpulse 1s ease-in-out infinite; }
@keyframes clockpulse { 50% { opacity: .5; } }

.seat.onclock { border-color: var(--accent); }

/* 我的阵容：抢人时用紧凑的格子，不用球场 —— 球场在手机上太高，
   一屏里塞不下"候选 + 球场 + 席位"，而抢人时最该占屏幕的是候选列表 */
.board-title { font-size: 12px; color: var(--faint); margin: 12px 0 6px; }
.board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 5px;
}
.board-cell {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 7px; font-size: 11px;
  border-left-width: 3px; border-left-color: var(--line);
}
.board-cell.on { border-left-color: var(--accent); }
.board-cell .pos { display: block; color: var(--faint); font-size: 10px; }
.board-cell .who {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-cell.on .who { color: var(--fg); font-weight: 600; }

/* ---------- 对阵树 ---------- */

.bracket { display: flex; flex-direction: column; gap: 14px; }
.bracket-round > .rd-name {
  font-size: 12px; color: var(--faint); letter-spacing: 1px; margin-bottom: 6px;
}
.bracket-round.final > .rd-name { color: var(--gold); }

.tie {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px; margin-bottom: 6px;
}
.tie .side {
  display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: 13px;
}
/* 输的一方压暗而不是给红色：一屏最多 7 场对阵，全上判定色会花 */
.tie .side.out { color: var(--faint); }
.tie .side.won .nm { font-weight: 700; }
.tie .side .nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tie .side.human .nm::before {
  content: "●"; color: var(--accent); font-size: 9px; margin-right: 5px;
  vertical-align: middle;
}
.tie .side.me .nm { color: var(--accent-2); }
.tie .side .sc { font-variant-numeric: tabular-nums; font-weight: 700; }
.tie .note { font-size: 10px; color: var(--gold); margin-top: 3px; }

@media (max-width: 380px) {
  .logo { font-size: 56px; }
  .code-card .code { font-size: 42px; }
  .slot { width: 50px; }
  .slot .badge { width: 30px; height: 30px; font-size: 12px; }
}