:root {
  --ink: #253c32;
  --muted: #61776b;
  --line: #cbded1;
  --green: #26874d;
  --pink: #c94f79;
  --red: #b93445;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { background: #f5faf7; color: var(--ink); font: 16px/1.45 system-ui, "Microsoft YaHei", sans-serif; }
button, input, select { font: inherit; letter-spacing: 0; }
button, a, select { touch-action: manipulation; }
button, .mode-nav, .icon-button { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid #e292b0; outline-offset: 3px;
}
button:not(:disabled):active, .icon-button:active { transform: scale(.97); }
button svg, a svg { width: 20px; height: 20px; flex-shrink: 0; }
[hidden] { display: none !important; }
.challenge-app { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
.challenge-header {
  position: absolute; inset: 0 0 auto; z-index: 4; min-height: 58px;
  padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 12px; background: #f5faf7; border-bottom: 1px solid var(--line);
}
.challenge-header h1 { font-size: 23px; line-height: 1.2; margin: 0 12px 0 0; white-space: nowrap; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  flex-shrink: 0; color: var(--ink); background: #fff; border: 1px solid var(--line);
  border-radius: 6px; text-decoration: none; transition: transform 100ms ease-out;
}
.mode-nav { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.mode-nav a, .mode-nav span {
  display: grid; place-items: center; min-width: 58px; height: 42px; padding: 0 12px;
  color: var(--muted); text-decoration: none; font-size: 14px;
}
.mode-nav span { background: var(--green); color: #fff; }
#character-select { margin-left: auto; height: 44px; max-width: 132px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.world-stage { position: absolute; top: 58px; right: 0; left: 0; bottom: 226px; overflow: hidden; background: #d9eee0; }
#challenge-world { display: block; width: 100%; height: 100%; touch-action: none; }
.stage-caption { position: absolute; top: 12px; left: 20px; display: flex; align-items: baseline; gap: 12px; color: #234333; pointer-events: none; }
.stage-caption strong { font-size: 22px; }
.stage-caption span { font-size: 14px; font-variant-numeric: tabular-nums; }
.challenge-panel { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: #f5faf7; border-top: 1px solid var(--line); padding: 14px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); max-height: 58%; overflow: auto; overscroll-behavior: contain; }
.panel-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.panel-top h2 { margin: 0; font-size: 18px; }
.panel-top .code { margin-left: auto; }
.code { font: 13px/1.4 ui-monospace, Consolas, monospace; color: var(--muted); white-space: nowrap; }
.primary, .command {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink);
  background: #fff; transition: transform 100ms ease-out;
}
.primary { color: #fff; background: var(--green); border-color: var(--green); font-weight: 650; }
.danger { color: var(--red); border-color: #e1b6bc; }
.hub-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.code-form { display: flex; flex: 1; min-width: 270px; gap: 8px; }
.code-form input { min-width: 0; flex: 1; height: 44px; font-size: 16px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.hub-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 14px; }
.subheading { margin: 0 0 7px; font-size: 14px; font-weight: 650; color: var(--muted); }
.record-list { display: grid; gap: 4px; max-height: 108px; overflow: auto; overscroll-behavior: contain; }
.record {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 5px 8px;
  text-align: left; background: transparent; border: 0; border-bottom: 1px solid #dce8df;
}
.record .code { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.record .value { font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.map-list { display: flex; flex-wrap: wrap; gap: 4px 12px; max-height: 96px; overflow: auto; font-size: 13px; color: #788c7d; }
.map-list .seen { color: var(--green); font-weight: 600; }
.teams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.team {
  position: relative; width: 100%; min-height: 94px; padding: 10px 12px; border: 2px solid var(--line);
  background: #fff; border-radius: 8px; text-align: left; transition: border-color 100ms ease-out;
}
.team[aria-checked="true"] { border-color: var(--green); background: #edf8f0; }
.team-title { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 650; }
.team-title svg { color: var(--green); }
.team-members { display: flex; align-items: center; justify-content: space-around; margin-top: 5px; gap: 8px; }
.team-member { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; }
.avatar { width: 38px; height: 38px; flex-shrink: 0; }
.draft-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.is-playing .challenge-header, .is-playing .challenge-panel, .is-playing .stage-caption { display: none; }
.is-playing .world-stage { inset: 0; }
.challenge-hud {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 4px 14px;
  background: #f5faf7; border-top: 1px solid var(--line); color: var(--ink); min-height: 50px;
}
.hud-progress { min-width: 92px; font-size: 14px; line-height: 1.3; }
.hud-progress strong { font-size: 17px; }
.hud-lives { display: flex; gap: 4px; color: var(--pink); }
.hud-lives svg { width: 15px; height: 15px; }
.hud-score { min-width: 64px; font-size: 14px; font-variant-numeric: tabular-nums; }
.hud-score strong { display: block; font-size: 19px; }
.hud-stars { display: flex; align-items: center; gap: 4px; color: #997316; min-width: 44px; font-size: 14px; }
.hud-stars svg { width: 18px; height: 18px; }
.members { display: flex; justify-content: center; gap: 6px; margin-left: auto; }
.member {
  min-width: 48px; min-height: 48px; padding: 2px 4px; border: 2px solid transparent;
  border-radius: 6px; background: transparent; position: relative; color: var(--ink);
}
.member[aria-pressed="true"] { background: #e0f2e4; border-color: var(--green); }
.member.used { opacity: .35; }
.member.used.active { opacity: 1; }
.member .avatar { width: 38px; height: 38px; display: block; margin: auto; }
.member-name { display: block; font-size: 12px; }
.hud-actions { display: flex; gap: 6px; }
.dialog-host { position: absolute; inset: 0; z-index: 20; background: rgba(22,43,31,.43); display: grid; place-items: center; padding: 16px; }
.dialog { width: min(490px, 100%); max-height: calc(100% - 12px); overflow: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px; box-shadow: 0 12px 44px rgba(14,34,23,.2); }
.dialog h2 { margin: 0 0 16px; font-size: 24px; }
.dialog p { margin: 10px 0; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.summary-grid span { font-size: 13px; color: var(--muted); display: block; }
.summary-grid strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.round-rows { margin: 12px 0; }
.round-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.notice { position: absolute; z-index: 40; top: 12px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 9px 16px; color: #fff; background: #28553b; border-radius: 6px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.storage-warning { margin-top: 8px; color: var(--red); font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .command:hover, .icon-button:hover { background: #edf4ee; }
  .team:hover { border-color: #6ea77e; }
  .record:hover { background: #e7f1e9; }
}
@media (max-width: 650px) {
  .challenge-header { gap: 6px; padding-left: 8px; padding-right: 8px; flex-wrap: wrap; }
  .challenge-header h1 { font-size: 19px; margin-right: 0; flex: 1; }
  .mode-nav { order: 4; margin-left: 50px; }
  .mode-nav a, .mode-nav span { min-width: 42px; padding: 0 8px; }
  #character-select { max-width: 90px; padding: 0 4px; }
  .challenge-panel { padding: 12px; max-height: 64%; }
  .teams { grid-template-columns: 1fr; gap: 6px; }
  .team { min-height: 72px; padding: 6px 10px; }
  .team-members { margin-top: 0; }
  .team-title { font-size: 13px; }
  .team-member { font-size: 13px; }
  .team-member .avatar { width: 30px; height: 30px; }
  .hub-bottom { grid-template-columns: 1fr; gap: 10px; }
  .map-list { max-height: 42px; }
  .code-form { min-width: 100%; }
  .panel-top { flex-wrap: wrap; gap: 6px; }
  .panel-top .code { margin-left: 0; flex-basis: 100%; }
}
@media (max-height: 460px) {
  .challenge-header { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .challenge-header h1 { font-size: 19px; }
  .world-stage { top: 48px; }
  .challenge-panel { padding-top: 8px; padding-bottom: 8px; max-height: 52%; }
  .hub-bottom { margin-top: 6px; }
  .map-list { max-height: 32px; }
  .record-list { max-height: 46px; }
  .team { min-height: 74px; padding: 5px 8px; }
  .team-member { gap: 2px; }
  .team-member .avatar { width: 28px; height: 28px; }
  .panel-top { margin-bottom: 6px; }
  .draft-actions { margin-top: 6px; }
  .stage-caption { top: 7px; left: 10px; }
  .stage-caption strong { font-size: 18px; }
  .challenge-hud { gap: 8px; padding-left: 8px; padding-right: 8px; }
  .hud-progress { min-width: 76px; font-size: 12px; }
  .hud-progress strong { font-size: 14px; }
  .hud-score { min-width: 48px; font-size: 12px; }
  .hud-score strong { font-size: 16px; }
  .member-name { display: none; }
  .member { min-height: 44px; min-width: 44px; }
  .member .avatar { width: 32px; height: 32px; }
  .dialog { padding: 16px; }
  .dialog h2 { font-size: 21px; margin-bottom: 10px; }
  .dialog-actions { margin-top: 12px; }
}
@media (orientation: portrait) and (pointer: coarse) {
  .challenge-app.is-playing {
    left: 100vw; top: 0; right: auto; bottom: auto;
    width: 100vh; width: 100dvh; height: 100vw;
    transform-origin: top left; transform: rotate(90deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  button, .team, .icon-button { transition: none; }
  button:not(:disabled):active, .icon-button:active { transform: none; }
}

/* ---- 面板入场：phase 切换时播一次（challenge-ui 挂 phase-in 类） ---- */
.challenge-panel.phase-in > * { animation: panel-slide 340ms var(--ease-slide, cubic-bezier(0.32, 0.72, 0, 1)) backwards; }
.challenge-panel.phase-in > *:nth-child(2) { animation-delay: 45ms; }
.challenge-panel.phase-in > *:nth-child(3) { animation-delay: 90ms; }
.challenge-panel.phase-in > *:nth-child(4) { animation-delay: 135ms; }
@keyframes panel-slide { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) {
  .challenge-panel.phase-in > * { animation: none; }
}

/* ---- 主角分段滑块（替换原 select 下拉；全站「N 选一」统一件） ---- */
.char-seg {
  display: inline-flex; gap: 4px; margin-left: auto;
  padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  --seg-thumb: rgba(63, 196, 123, 0.22);
  --seg-thumb-shadow: none;
}
.char-seg > button {
  border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink); padding: 6px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: color 120ms var(--ease-out, ease-out), transform 120ms var(--ease-out, ease-out);
}
.char-seg > button:active { transform: scale(0.96); }
.char-seg > button.on { color: #1E7A44; }
@media (prefers-reduced-motion: reduce) {
  .char-seg .seg-thumb { transition: none; }
}

/* 滑块基础层（挑战页不引 site.css，这里自包含一份；与 site.css 保持同值） */
[data-seg] { position: relative; }
[data-seg] .seg-thumb {
  position: absolute; left: 0; top: 0; border-radius: 999px; pointer-events: none;
  background: var(--seg-thumb, rgba(63, 196, 123, 0.22));
  box-shadow: var(--seg-thumb-shadow, none);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
              width 320ms cubic-bezier(0.32, 0.72, 0, 1),
              height 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
[data-seg] > button, [data-seg] > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-seg] .seg-thumb { transition: none; }
}