/* ==========================================================================
   Sakibot 站专用样式（配合 assets/css/style.css）
   ========================================================================== */

/* --------------------------------------------------------------------------
   配色：出雲咲姫 / Photon Maiden —— 直接取自游戏 Master，不是自己配的
     CharacterMaster[31] 出雲咲姫  ColorCode     = #e6ffed   ← 角色个人色
     UnitMaster[3]  Photon Maiden  MainColorCode = #16ffeb   ← 单位主色
     UnitMaster[3]  Photon Maiden  SubColorCode  = #dbffed   ← 单位副色

   「调色」做的是：把 #16ffeb 当**强调色**而不是铺满整页，底色压到深蓝青，
   避免荧光 / 赛博朋克感；正文用 #e6ffed 系（咲姫个人色）保证可读。
   整个 Sakibot 站在 <body> 上挂 class="saki" 即生效；摘掉就回到全站紫色。
   -------------------------------------------------------------------------- */
body.saki {
  --brand:        #16ffeb;
  --brand-soft:   #7ff7ec;
  --brand-deep:   #0d8f8c;
  --accent:       #a8fff3;
  --accent-2:     #16ffeb;

  --bg:           #05141a;
  --bg-2:         #071d26;
  --surface:      rgba(22, 255, 235, .045);
  --surface-2:    rgba(22, 255, 235, .09);
  --border:       rgba(22, 255, 235, .16);
  --border-2:     rgba(22, 255, 235, .34);

  --text:         #e6fbf8;
  --text-dim:     #a9cbc9;
  --text-mute:    #6f8f8f;

  --shadow:       0 20px 60px -24px rgba(0, 180, 170, .5);
}

/* 星云底换青色（原来那套是紫的） */
body.saki::before {
  background:
    radial-gradient(60vw 60vw at 12% -8%, rgba(22, 255, 235, .20), transparent 62%),
    radial-gradient(52vw 52vw at 92% 6%, rgba(20, 150, 200, .20), transparent 60%),
    radial-gradient(70vw 60vw at 50% 118%, rgba(10, 110, 130, .26), transparent 66%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* style.css 里写死的紫色补丁，一并换成青色 */
body.saki .nav { background: rgba(5, 20, 26, .74); }
body.saki .note {
  background: rgba(22, 255, 235, .09);
  border-left-color: var(--brand);
}
body.saki ::selection { background: rgba(22, 255, 235, .30); }

/* ---------- 站点头部横幅 ---------- */
.sb-hero {
  position: relative; overflow: hidden;
  padding: 64px 22px 44px;
  border-bottom: 1px solid var(--border);
}
.sb-hero::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 380px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(139,108,246,.30), transparent 70%);
  pointer-events: none;
}
.sb-hero-inner { position: relative; max-width: var(--max); margin: 0 auto; }
.sb-logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-size: 30px; font-weight: 700; letter-spacing: 1px;
  color: var(--text); margin-bottom: 10px;
}
.sb-logo .glyph {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand));
  box-shadow: 0 10px 30px -8px rgba(139,108,246,.9);
}
.sb-tag { color: var(--text-dim); font-size: 16px; max-width: 640px; }
.sb-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.pill {
  font-size: 12.5px; padding: 4px 12px; border-radius: 999px;
  color: var(--brand-soft); background: rgba(139,108,246,.12);
  border: 1px solid var(--border-2);
}

/* ---------- 命令速查表 ---------- */
/* ---------- 命令速查表（/commands/ 用） ---------- */
.cmd-table td:first-child { white-space: nowrap; }
.cmd-table td:first-child code {
  /* 早先写死了紫色 rgba(139,108,246,.18) —— 那是全站紫主题的残留，
     在咲姫青主题下会显脏。跟着 --brand 走。 */
  background: rgba(22, 255, 235, .18);
  background: color-mix(in srgb, var(--brand) 18%, transparent);
}

/* ---------- 功能卡片 ---------- */
.feature-list { display: grid; gap: 16px; }
.feature { padding: 22px 24px; }
.feature h3 { margin-top: 0; }
.feature p { font-size: 14.5px; }
.example { margin: 10px 0 0; font-size: 13.5px; }
.example span {
  display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 6px;
  background: rgba(139,108,246,.16); color: var(--brand-soft); font-size: 12px;
}
.example code { background: transparent; padding: 0; color: var(--text); }

/* ---------- 准度分析计算器 ---------- */
.calc-grid { display: grid; gap: 16px; grid-template-columns: 1.15fr .85fr; align-items: start; }
@media (max-width: 780px) { .calc-grid { grid-template-columns: 1fr; } }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--text-mute); margin-bottom: 5px; letter-spacing: .3px; }
.field input, .field select {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 15px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(0,0,0,.20); color: var(--text);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); }
.field small { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 4px; }

.calc-actions { margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.result-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14.5px;
}
.result-row:last-of-type { border-bottom: none; }
.result-row .k { color: var(--text-mute); }
.result-row .v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.result-row .v.big { font-size: 19px; color: var(--brand-soft); }

.verdict {
  margin-top: 16px; padding: 14px 18px; border-radius: var(--radius-sm);
  background: rgba(139,108,246,.12); border: 1px solid var(--border-2);
  color: var(--text); font-size: 14.5px;
}
.rank-badge {
  display: inline-block; min-width: 34px; text-align: center;
  padding: 2px 10px; border-radius: 8px; font-weight: 700;
  background: linear-gradient(135deg, var(--brand-deep), var(--brand)); color: #fff;
}
.err { color: #ff9b9b; font-size: 14px; margin-top: 10px; }

/* 曲库同步（可选） */
.sync-status { min-height: 22px; margin-top: 10px; font-size: 13.5px; color: var(--text-mute); }
.sync-status.ready { color: var(--brand-soft); }
.sync-status.error { color: #ff9b9b; }

/* ---------- 判定权重表（用游戏原版判定图标） ----------
   图标来自游戏解包（Tap_A_*.png），已裁透明边、按字形高度归一化到统一画布
   （112px 高，字形 52px）。整表内容居中，图标才不会歪歪扭扭。 */
.judge-table th, .judge-table td { text-align: center; }
.judge-table th:first-child, .judge-table td:first-child { width: 190px; }
.judge-icon {
  height: 40px; width: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 0 10px rgba(139,108,246,.35));
}
.judge-table td { vertical-align: middle; }
/* 小图例（用在说明文字里） */
.judge-inline {
  height: 22px; width: auto; display: inline-block; vertical-align: -5px;
  margin: 0 2px;
}
/* 一排判定图标（功能卡里） */
.judge-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px;
  margin: 4px 0 14px;
}
.judge-strip .judge-inline { height: 20px; vertical-align: middle; }

/* ---------- 准度分析页：曲目选择 ---------- */
.robot-hint {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: var(--radius-sm);
  background: rgba(139,108,246,.12);
  border: 1px solid var(--border-2);
  color: var(--text); font-size: 14.5px;
  margin: 0 0 28px;
}
.robot-hint .ico { font-size: 17px; }
.robot-hint code {
  font: 13px/1.5 ui-monospace, "SF Mono", Consolas, monospace;
  background: rgba(139,108,246,.22); color: var(--brand-soft);
  padding: 1.5px 7px; border-radius: 5px;
}

.auto-note {
  font-weight: 600; font-style: italic;
  color: var(--brand-soft); font-size: 14px;
  margin: -4px 0 14px;
}

/* 标签 + 控件并排成一行 */
.song-row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr);
  align-items: center; gap: 12px 16px; margin-bottom: 12px;
}
.song-row label { color: var(--text-dim); font-size: 14px; }
.song-row input, .song-row select {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(0,0,0,.20); color: var(--text);
}
.song-row input:focus, .song-row select:focus { outline: none; border-color: var(--brand); }
.song-row input:disabled, .song-row select:disabled { opacity: .5; }

/* 判定输入：每行一个判定类型 + 它的文本框 */
.judge-inputs { margin-top: 4px; }
.judge-row {
  display: grid; grid-template-columns: 145px minmax(0, 1fr);
  align-items: center; gap: 12px 16px; margin-bottom: 10px;
}
.judge-row .judge-label {
  height: 36px; width: auto; max-width: 100%; justify-self: center;
}
.judge-row input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(0,0,0,.20); color: var(--text);
}
.judge-row input:focus { outline: none; border-color: var(--brand); }
@media (max-width: 560px) {
  .judge-row { grid-template-columns: 116px minmax(0, 1fr); }
  .judge-row .judge-label { height: 28px; }
}

/* Back Spin Assist + 计算按钮 */
.bsa-row {
  display: flex; align-items: center; gap: 9px;
  margin: 18px 0 14px; font-size: 14px; color: var(--text-dim);
}
.btn-block { display: flex; width: 100%; justify-content: center; }