/* ============================================================
   遗传算法小车 · 游戏专属样式
   只放布局、参数面板和驾驶按钮；公共组件复用 ../../style.css
   ============================================================ */

.game.ga-page{width:min(100%,1180px)}

/* ---------- 双栏：画布 + 参数面板 ---------- */
.ga-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) min(340px,38%);
  gap:14px;
  align-items:start;
}
.ga-main{min-width:0}
/* 画布不拦截纵向滚动；进入赛道编辑时才独占手势 */
#view{touch-action:pan-y}
#view.editing{cursor:crosshair;touch-action:none}
.ga-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
.ga-panel::-webkit-scrollbar{width:8px}
.ga-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}

/* ---------- 卡片 ---------- */
.ga-card{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel-2);
}
.ga-card h2{
  margin:0 0 10px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--muted);
}
.ga-card canvas{
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
}

/* ---------- 数据 ---------- */
.ga-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ga-stat{padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.ga-stat span{display:block;font-size:10px;letter-spacing:.06em;color:var(--muted)}
.ga-stat b{
  display:block;margin-top:2px;
  font-size:16px;font-weight:600;line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.ga-stat b.accent{color:var(--accent)}

.ga-check{
  display:flex;align-items:center;gap:8px;
  margin-top:10px;font-size:12px;color:var(--muted);cursor:pointer;
}
.ga-check input{accent-color:var(--accent)}

/* ---------- 图表说明 ---------- */
.ga-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;font-size:10.5px;color:var(--muted)}
.ga-legend i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px}

/* ---------- 滑杆 ---------- */
.ga-card input[type=range]{width:100%;margin:0 0 2px}
.ga-range{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:10px 0 4px;font-size:12px;color:var(--muted);
}
.ga-range output{color:var(--text);font-variant-numeric:tabular-nums}
.ga-note{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--muted)}
.ga-note:empty{display:none}
.ga-note b{color:var(--text);font-weight:600}

/* ---------- 面板按钮 ---------- */
.ga-card .btn{padding:7px 8px;font-size:12px}
.ga-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.ga-grid2 .btn{min-width:0;padding-left:4px;padding-right:4px}
.ga-actions{margin-top:12px}
.ga-actions .btn{flex:1}

.ga-spd.is-on,
.ga-trk.is-on,
#btn-edit.is-on,
#btn-player.is-on{
  border-color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  color:var(--accent);
  background:var(--panel);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel));
}

/* ---------- 触屏驾驶按钮 ---------- */
.pad.ga-drive{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  max-width:420px;
  margin:12px auto 0;
}
.pad.ga-drive button{min-height:54px;padding:8px 0;touch-action:none}
.pad.ga-drive button.is-on{background:#182231;border-color:var(--accent);color:var(--accent)}
@media (hover:hover) and (pointer:fine){
  .pad.ga-drive{display:none}
}

/* ---------- 展开说明 ---------- */
.ga-card details{font-size:12px;line-height:1.8;color:var(--muted)}
.ga-card summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--text)}
.ga-card details p{margin:8px 0 0}
.ga-card details b{color:var(--text);font-weight:600}

/* ---------- 桌面：面板独立滚动，画布留在视野里 ---------- */
@media (min-width:601px){
  .ga-panel{
    max-height:calc(100vh - 150px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:4px;
  }
}

@media (max-width:600px){
  .ga-layout{grid-template-columns:1fr;gap:12px}
  .ga-panel{overflow:visible}
  .ga-card{padding:11px}
  .ga-card .btn{min-height:44px;padding:8px 10px;font-size:12.5px}
  .ga-card summary{min-height:36px;padding:8px 0}
}

@media (max-width:420px){
  .ga-spd{padding:8px 6px;min-width:36px}
  .ga-stats{gap:6px}
  .ga-stat b{font-size:15px}
  .ga-card h2{letter-spacing:.12em}
}