/* /css/trick3d.css：技の3D図解（/js/trick3d.js）の見た目。.t3d 配下に限定し、サイトの配色（ネイビー×ゴールド）に合わせる */
.t3d {
  --t3d-bg: #f6f8fc; --t3d-surface: #fff; --t3d-navy: #062656; --t3d-gold: #dba52b;
  --ink: #14213d; --muted: #6c7688; --line: #e7ebf2; --surface: #fff;
  --accent: #d0451f; --support: #0b3470; --trail: #dba52b; --grid: rgba(6, 38, 86, .10); --shadow: rgba(6, 38, 86, .14); --target: #8a6d4b;
  --arm-right: #138a72; --arm-left: #8a4fc7; --spine: #a0662a;
  display: grid; gap: 12px; color: var(--ink);
}
.t3d .t3d-stage { position: relative; background: var(--t3d-surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; }
.t3d .t3d-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: block; }
.t3d .t3d-stage canvas.dragging { cursor: grabbing; }
.t3d .t3d-hud { position: absolute; left: 12px; top: 10px; pointer-events: none; display: grid; gap: 2px; }
.t3d .t3d-phase { font-weight: 950; font-size: 17px; color: var(--t3d-navy); }
.t3d .t3d-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.t3d .t3d-hint { position: absolute; right: 12px; bottom: 10px; font-size: 11.5px; color: var(--muted); pointer-events: none; text-align: right; font-weight: 700; }
.t3d .t3d-legend { position: absolute; right: 12px; top: 10px; display: grid; gap: 2px; font-size: 12px; color: var(--muted); pointer-events: none; font-weight: 700; }
.t3d .t3d-legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: var(--c); }
.t3d .t3d-controls { display: grid; gap: 10px; background: var(--t3d-bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.t3d .t3d-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.t3d button { font: inherit; font-size: 13.5px; font-weight: 900; color: var(--t3d-navy); background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 12px; cursor: pointer; min-height: 36px; }
.t3d button[aria-pressed="true"] { background: var(--t3d-navy); color: #fff; border-color: var(--t3d-navy); }
.t3d button.t3d-play { min-width: 92px; }
.t3d button:focus-visible, .t3d input:focus-visible { outline: 3px solid var(--t3d-gold); outline-offset: 2px; }
.t3d .t3d-label { font-size: 12px; color: var(--muted); font-weight: 800; margin-right: 2px; }
.t3d .t3d-slider { display: grid; gap: 4px; }
.t3d input[type="range"] { width: 100%; accent-color: var(--accent); }
.t3d .t3d-ticks { position: relative; height: 22px; }
.t3d .t3d-ticks button { position: absolute; transform: translateX(-50%); top: 0; min-height: 0; padding: 0 4px; font-size: 11px; background: transparent; border: 0; color: var(--muted); white-space: nowrap; }
.t3d .t3d-ticks button.on { color: var(--accent); }
.t3d .t3d-ticks .short { display: none; }
.t3d .t3d-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.t3d .t3d-explain { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.t3d .t3d-explain h4 { margin: 0 0 6px; font-size: 16px; color: var(--t3d-navy); font-weight: 950; }
.t3d .t3d-explain ul { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.8; }
.t3d .t3d-explain li + li { margin-top: 4px; }
@media (max-width: 680px) {
  .t3d .t3d-stage { aspect-ratio: 1 / 1; }
  .t3d .t3d-hint { left: 12px; right: auto; text-align: left; }
  .t3d .t3d-ticks .full { display: none; }
  .t3d .t3d-ticks .short { display: inline; font-size: 14px; }
}