/* =========================================================
   basketball.css — 篮球常识页专属部分
   版式（栏目条、卡片、搜索、空态、收藏）都在 handbook.css 里，这里只放这一页多出来的三样：
   半场跑位示意图、训练单生成器、热身与放松清单。
   页面在 <body style> 上给了 --a1 橙 / --a2 琥珀 / --a3 青 / --a4 紫，示意图的三种线就靠这四色区分：
   虚线跑位、实线传球、点线运球。
   ========================================================= */

/* ---------- 半场示意图（20 像素 = 1 米，画面上方是篮筐） ---------- */
.court{display:block;width:100%;height:auto}
.court__lines rect,.court__lines path,.court__lines circle{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.3}
.court__box{stroke:rgba(255,255,255,.34);stroke-width:2}
.court__rim{stroke:var(--a1);stroke-width:2.2}
.court__ra{stroke:rgba(255,255,255,.24);stroke-dasharray:3 3}
.ln{fill:none;stroke-width:2.2;stroke-linecap:round}
.ln--run{stroke:var(--a2);stroke-dasharray:6 4.5}
.ln--pass{stroke:var(--a3)}
.ln--drib{stroke:var(--a4);stroke-dasharray:.5 5}
.ln--hint{stroke:rgba(255,255,255,.26);stroke-width:1.2;stroke-dasharray:2 4}
.mk path{stroke:none}
.mk--run path{fill:var(--a2)}
.mk--pass path{fill:var(--a3)}
.mk--drib path{fill:var(--a4)}
.sp circle{stroke-width:1.6}
.sp--o circle{fill:rgba(255,138,61,.2);stroke:var(--a1)}
.sp--d circle{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.34)}
.sp__t{font-family:var(--font-mono);font-size:9.5px;font-weight:600}
.sp--o .sp__t{fill:#ffdcc4}
.sp--d .sp__t{fill:var(--ink-2)}
.ball{fill:var(--a2);stroke:#2a1a05;stroke-width:1}

/* ---------- 训练单生成器 ---------- */
.gen{
  margin:0 0 4px;padding:18px 20px;border-radius:var(--radius);
  background:rgba(255,255,255,.035);border:1px solid var(--line-2);
  display:grid;gap:14px;
}
.gen__row{display:grid;grid-template-columns:5.4em 1fr;gap:14px;align-items:center}
.gen__row--wide{align-items:start}
.gen__label{font-size:.78rem;letter-spacing:.02em;color:var(--muted)}
.gen__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:2px}
.gen__go{flex:1 1 200px;min-height:60px;font-size:1.05rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}

.gen__sum{margin:22px 0 0;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.02em;color:var(--a2)}
.plan{margin-top:12px}
.plan__empty{margin:14px 0 0;font-size:.86rem;color:var(--muted)}
.plan__note{margin:14px 0 0;font-size:.82rem;line-height:1.8;color:var(--muted)}
.plan__note b{color:var(--ink-2)}
.gen .chip:focus-visible,.plan .ck:focus-visible{outline:2px solid var(--a2);outline-offset:3px}

/* ---------- 热身与放松清单 ---------- */
.cklist{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ck{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:14px 16px;border-radius:var(--radius-sm);cursor:pointer;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.ck:hover{border-color:var(--line-2)}
.ck__box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-2);display:grid;place-items:center;color:#04140d;font-size:.72rem;margin-top:2px}
.ck__box::after{content:"✓";opacity:0;transform:scale(.5);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.ck.is-on{background:rgba(255,196,107,.06);border-color:rgba(255,196,107,.3)}
.ck.is-on .ck__box{background:var(--a2);border-color:var(--a2)}
.ck.is-on .ck__box::after{opacity:1;transform:none}
.ck__txt b{font-size:.94rem;font-weight:620;color:var(--ink)}
.ck.is-on .ck__txt b{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.24)}
.ck__t{font-style:normal;font-family:var(--font-mono);font-size:.72rem;color:var(--a2);margin-left:8px}
.ck__txt em{display:block;font-style:normal;font-size:.82rem;line-height:1.75;color:var(--muted);margin-top:4px}
.plan .ck__txt em.is-tip{color:var(--a2)}
.plan .ck__txt em.is-how{color:var(--muted)}

/* ---------- 页内跳转链接 ---------- */
.view__link{color:var(--a2);text-decoration:none;border-bottom:1px solid rgba(255,196,107,.32)}
.view__link:hover{color:#fff;border-bottom-color:#fff}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .gen{padding:16px 15px;gap:12px}
  .gen__row{grid-template-columns:1fr;gap:7px}
  .gen__go{min-height:54px}
  .ck{padding:12px 13px;gap:11px}
  .ck__box{width:20px;height:20px}
}

/* ---------- 打印：半场示意图改成黑白，跑位/传球/运球靠线型区分 ---------- */
@media print{
  .court{max-width:100%!important}
  .court__lines rect,.court__lines path,.court__lines circle{stroke:#bbb!important}
  .court__box{stroke:#888!important}
  .court__rim{stroke:#000!important}
  .court__ra{stroke:#999!important}
  .ln--run{stroke:#333!important;stroke-dasharray:6 4!important}
  .ln--pass{stroke:#000!important}
  .ln--drib{stroke:#666!important}
  .ln--hint{stroke:#ccc!important}
  .mk--run path{fill:#333!important}
  .mk--pass path{fill:#000!important}
  .mk--drib path{fill:#666!important}
  .sp--o circle{fill:#fff!important;stroke:#000!important}
  .sp--d circle{fill:#f2f2f2!important;stroke:#777!important}
  .sp__t{fill:#000!important}
  .ball{fill:#000!important}
  .gen,.cklist,.plan{break-inside:avoid}
}