/* /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; --com: #d6336c;
  display: grid; gap: 8px; 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: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23fff' stroke='%23fff' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='9.6' y='5.5' width='3.6' height='13' rx='1.8'/%3E%3Crect x='14.0' y='3.5' width='3.6' height='15' rx='1.8'/%3E%3Crect x='18.4' y='4.5' width='3.6' height='14' rx='1.8'/%3E%3Crect x='22.8' y='7.5' width='3.6' height='11' rx='1.8'/%3E%3Crect x='9.6' y='14' width='16.8' height='13.5' rx='5'/%3E%3Crect x='6.2' y='13' width='4' height='12' rx='2' transform='rotate(-38 8.2 19)'/%3E%3C/g%3E%3Cg fill='%23111'%3E%3Crect x='9.6' y='5.5' width='3.6' height='13' rx='1.8'/%3E%3Crect x='14.0' y='3.5' width='3.6' height='15' rx='1.8'/%3E%3Crect x='18.4' y='4.5' width='3.6' height='14' rx='1.8'/%3E%3Crect x='22.8' y='7.5' width='3.6' height='11' rx='1.8'/%3E%3Crect x='9.6' y='14' width='16.8' height='13.5' rx='5'/%3E%3Crect x='6.2' y='13' width='4' height='12' rx='2' transform='rotate(-38 8.2 19)'/%3E%3C/g%3E%3C/svg%3E") 16 15, grab; display: block; } /* カーソル：白い手は白い背景に溶けるので、白ふち付きの黒い手（ドラッグ中は握った手） */
.t3d .t3d-stage canvas.dragging { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23fff' stroke='%23fff' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='9.6' y='10.5' width='3.6' height='8' rx='1.8'/%3E%3Crect x='14.0' y='9.8' width='3.6' height='8.7' rx='1.8'/%3E%3Crect x='18.4' y='10.2' width='3.6' height='8.3' rx='1.8'/%3E%3Crect x='22.8' y='11.5' width='3.6' height='7' rx='1.8'/%3E%3Crect x='9.6' y='14' width='16.8' height='13.5' rx='5'/%3E%3Crect x='7.2' y='15' width='4' height='10' rx='2' transform='rotate(-60 9.2 20)'/%3E%3C/g%3E%3Cg fill='%23111'%3E%3Crect x='9.6' y='10.5' width='3.6' height='8' rx='1.8'/%3E%3Crect x='14.0' y='9.8' width='3.6' height='8.7' rx='1.8'/%3E%3Crect x='18.4' y='10.2' width='3.6' height='8.3' rx='1.8'/%3E%3Crect x='22.8' y='11.5' width='3.6' height='7' rx='1.8'/%3E%3Crect x='9.6' y='14' width='16.8' height='13.5' rx='5'/%3E%3Crect x='7.2' y='15' width='4' height='10' rx='2' transform='rotate(-60 9.2 20)'/%3E%3C/g%3E%3C/svg%3E") 16 15, 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-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-legend span.t3d-dash::before { background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 5px); }
.t3d .t3d-controls { display: grid; gap: 4px; background: var(--t3d-bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 4px; }
.t3d .t3d-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.t3d .t3d-group { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.t3d button { font: inherit; font-size: 12.5px; font-weight: 900; color: var(--t3d-navy); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 3px 7px; cursor: pointer; min-height: 30px; }
.t3d button[aria-pressed="true"] { background: var(--t3d-navy); color: #fff; border-color: var(--t3d-navy); }
.t3d button.t3d-play { min-width: 76px; }
.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: 0; }
.t3d input[type="range"] { width: 100%; margin: 2px 0; accent-color: var(--accent); }
.t3d .t3d-ticks { position: relative; height: 18px; }
.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: 4px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.t3d .t3d-explain { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.t3d .t3d-explain h4 { margin: 0 0 4px; font-size: 15px; color: var(--t3d-navy); font-weight: 950; }
.t3d .t3d-explain ul { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.65; }
.t3d .t3d-explain li + li { margin-top: 2px; }
/* PC：説明は図の中の左上（局面名・％の下）に重ねる（js で .t3d-hud の中へ移す）。局面名は上に出ているので見出しは隠す。ドラッグの邪魔をしない */
.t3d .t3d-hud { max-width: min(40%, 440px); }
.t3d .t3d-hud .t3d-explain { margin-top: 6px; background: rgba(255, 255, 255, .86); border: 0; border-radius: 10px; padding: 6px 10px 6px 0; }
.t3d .t3d-hud .t3d-explain h4 { display: none; }
.t3d .t3d-hud .t3d-explain ul { font-size: 12.5px; line-height: 1.55; color: var(--ink); font-weight: 500; }
@media (max-width: 680px) {
  .t3d .t3d-stage { aspect-ratio: 1 / 1; }
  .t3d .t3d-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; } /* スマホは操作ボタンを1行にして横にスクロール（画面の高さを使わない） */
  .t3d .t3d-group { flex-wrap: nowrap; flex: none; }
  .t3d button, .t3d .t3d-label, .t3d .t3d-toggle { white-space: nowrap; }
  .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; }
}