.crk-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.crk-canvas {
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 3px var(--color-border);
  background: #6fb7e0;
  cursor: pointer;
  touch-action: none;
}

.crk-mode-row {
  display: flex;
  gap: 8px;
}

.crk-mode-btn {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.crk-mode-btn.is-active {
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-color: var(--color-primary);
}

.crk-field-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.crk-field-canvas {
  max-width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 2px var(--color-border);
  background: #2e7d32;
}

.crk-field-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-text-soft);
}

.crk-aim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.crk-aim-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.crk-zone-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.crk-zone-btn {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.crk-zone-btn.is-active {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}

.crk-loft-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  position: sticky;
  bottom: 10px;
  z-index: 5;
  background: var(--color-surface);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}

.crk-loft-toggle {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.crk-loft-toggle.is-active {
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-color: var(--color-primary);
}

.crk-run-btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--color-success);
  color: #0e0f13;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  animation: crk-run-pulse 0.6s ease-in-out infinite;
}

@keyframes crk-run-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---------- 3D version (game.js); the rules above still style the shared controls ---------- */
.crk3-stage, .crk3-loading { width: 100%; }
.crk3-stage .sim-stage { cursor: pointer; }
.crk3 .sim-result[hidden] { display: none; }
.crk3-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.crk3-chip {
  position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 10px; line-height: 1.15;
  background: rgba(8, 16, 28, .62); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.crk3-chip b { display: block; font-size: 14px; }
.crk3-chip small { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.crk3-field { position: absolute; right: 10px; top: 10px; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.crk3-field canvas { position: static; inset: auto; width: 100%; height: auto; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); display: block; }
.crk3-field span { font-size: 10px; font-weight: 700; text-shadow: 0 1px 3px #000; opacity: .9; }
.crk3-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  background: rgba(8, 16, 28, .66); font-size: 13px; font-weight: 700; transition: opacity .4s;
}
.crk3-hint kbd { background: rgba(255, 255, 255, .16); border-radius: 4px; padding: 0 5px; font: 700 12px ui-monospace, monospace; }
.crk3-hint.is-gone { opacity: 0; }
.crk3-tele {
  position: absolute; left: 50%; top: 10px; transform: translate(-50%, -6px); opacity: 0; transition: opacity .2s, transform .2s; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; background: rgba(8, 16, 28, .7); border: 1px solid rgba(255, 213, 79, .6); font-size: 13px; font-weight: 800;
}
.crk3-tele.is-on { opacity: 1; transform: translate(-50%, 0); }
.crk3 .sim-banner { top: 26%; }
.crk3-final { font-size: 18px; font-weight: 800; }
/* phones: a square stage (not the kit's tall 3:4) so the whole pitch fits above the sticky swing bar */
@media (max-width: 560px) { .crk3 .sim-stage, .crk3-loading { aspect-ratio: 1 / 1; } }
@container (max-width: 480px) {
  .crk3-tele { top: 88px; font-size: 12px; }
  .crk3-field { width: 108px; }
  .crk3-field span { display: none; }
  .crk3-chip b { font-size: 12px; }
  .crk3-hint { font-size: 11px; }
}