/* Judo Gokyo – shared styles for every technique page (colours from theme.css) */
header, main { max-width:1240px; margin:0 auto; padding-left:20px; padding-right:20px; }
header { max-width:none; background:var(--header-bg); border-bottom:3px solid var(--accent); padding:22px max(20px, calc((100% - 1200px) / 2)) 24px; }
h1 { margin:0; font-size:28px; letter-spacing:.5px; color:var(--header-ink); }
h1 span:not([lang]) { font-weight:400; color:var(--header-faint); font-size:18px; margin-left:8px; }
.sub { color:var(--header-muted); margin:6px 0 0; font-size:14px; max-width:820px; }
main { padding-top:18px; padding-bottom:30px; }
.stage { position:relative; background:var(--anthracite); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; aspect-ratio: 16 / 9; container-type: inline-size; }
.stage canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
.stage canvas:active { cursor:grabbing; }
.ov { position:absolute; inset:0; pointer-events:none; font-family:system-ui,sans-serif; }
.ov .rot { position:absolute; right:clamp(6px, 1.4cqi, 14px); bottom:clamp(6px, 1.4cqi, 14px); display:flex; align-items:center; gap:.6em; padding:.45em .9em .45em .6em; border-radius:999px; background:rgba(255,255,255,.86); color:var(--anthracite); font-size:clamp(10px, 1.35cqi, 13px); font-weight:600; box-shadow:0 1px 6px rgba(0,0,0,.15); transition:opacity .6s; }
.ov .rot svg { width:2.3em; height:2.3em; animation:spin 4s ease-in-out infinite; }
@container (max-width: 560px) { .ov .rot { padding:.35em; } .ov .rot span { display:none; } }
.ov.used .rot { opacity:.45; }
.ov.used .rot svg { animation:none; }
@keyframes spin { 0%,60%,100% { transform:rotateY(0); } 30% { transform:rotateY(180deg); } }
.ov .co { position:absolute; left:clamp(6px, 1.4cqi, 14px); top:clamp(6px, 1.4cqi, 14px); display:flex; align-items:center; gap:.65em; max-width:62%; padding:.6em .95em .6em .65em; border-radius:0; background:var(--surface); color:var(--ink); font-size:clamp(10px, 1.55cqi, 15px); font-weight:600; line-height:1.25; border:2px solid var(--accent); box-shadow:0 3px 12px rgba(0,0,0,.25); opacity:0; }
.ov .co i { flex:none; width:1.6em; height:1.6em; border-radius:50%; background:var(--ok); color:var(--white); font-style:normal; font-size:.95em; font-weight:700; display:flex; align-items:center; justify-content:center; }
@container (max-width: 560px) { .ov .co { max-width:75%; border-width:1.5px; box-shadow:0 2px 6px rgba(0,0,0,.2); } }
.ov .hl { position:absolute; border-radius:50%; border:3px solid var(--ok); background:radial-gradient(circle, rgba(78,138,62,.35) 0%, rgba(78,138,62,.12) 60%, rgba(78,138,62,0) 100%); box-shadow:0 0 14px 4px rgba(78,138,62,.45); opacity:0; animation:pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
.ov .fa { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; opacity:0; }
.ov .fa .halo { fill:#fff; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; opacity:.9; }
.ov .fa .shaft { fill:none; stroke:var(--accent); stroke-linecap:round; }
.ov .fa .head { fill:var(--accent); }
.ov .fa .fa-motion .shaft { stroke:var(--accent-hover); stroke-linecap:butt; }
.ov .fa .fa-motion .head { fill:var(--accent-hover); }
.ov .fa .fa-motion .halo { opacity:.6; }
.ov .fa text { fill:var(--accent-hover); stroke:#fff; paint-order:stroke; stroke-linejoin:round; font-weight:700; font-family:inherit; }
.nogl { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px; color:var(--header-muted); }
.phase { display:flex; gap:6px; margin:14px 0 8px; flex-wrap:wrap; }
.phase button { flex:1; min-width:120px; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:10px; padding:8px 10px; text-align:left; cursor:pointer; font:inherit; }
.phase button b { display:block; font-size:14px; color:var(--ink); }
.phase button small { color:var(--muted); font-size:12px; }
.phase button.active { background:var(--accent); border-color:var(--accent); color:var(--white); box-shadow:0 2px 10px rgba(214,51,42,.35); }
.phase button.active b { color:var(--white); }
.phase button.active small { color:var(--white); }
.controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; }
.controls button { border-radius:8px; padding:8px 14px; font:inherit; cursor:pointer; }
.controls button.main { background:var(--anthracite); color:var(--white); border:0; min-width:90px; }
.controls button.sec { background:var(--surface); border:1px solid var(--border); color:var(--ink); }
.controls label { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.controls .js-scrub { flex:1; min-width:200px; }
.hint { font-size:12px; color:var(--muted); }
.desc { margin-top:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; line-height:1.5; font-size:15px; min-height:72px; }
.desc .desc-title { margin:0 0 4px; font-size:16px; font-weight:700; }
.desc .keys { margin:10px 0 0; padding:10px 14px 10px 30px; background:var(--accent-tint); border-left:3px solid var(--accent); border-radius:0 6px 6px 0; }
.desc .keys li { margin:3px 0; }
.desc .keys-title { font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); margin-top:12px; }
.legend { display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; margin:10px 2px 0; font-size:13px; color:var(--muted); }
.legend span { display:flex; align-items:center; gap:7px; }
.legend .sw { width:14px; height:14px; border-radius:4px; border:1.5px solid; display:inline-block; }
.feedback { margin:6px 2px 0; text-align:right; font-size:12px; }
.feedback a { color:var(--faint); text-decoration:none; }
.feedback a:hover { color:var(--accent); text-decoration:underline; }
.about { margin-top:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px 22px 10px; line-height:1.55; font-size:15px; }
.about h2 { margin:0 0 6px; font-size:20px; }
.about h3 { margin:18px 0 4px; font-size:15px; color:var(--accent); }
.about p { margin:4px 0 8px; }
.about ul, .about ol { margin:4px 0 8px; padding-left:22px; }
.about li { margin:3px 0; }
.video { display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:10px; padding:10px 14px; margin:6px 0 4px; background:var(--bg); }
.video:hover { border-color:var(--accent); }
.video .play { flex:none; width:44px; height:44px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; }
.video .play::after { content:""; border-left:14px solid var(--white); border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
.video b { display:block; }
.video small { color:var(--muted); }


/* legend swatches (judogi colours of the 3D figures) */
.legend .sw-tori { background:#F2F2EC; border-color:#3A3A3A; }
.legend .sw-uke  { background:#2A63C4; border-color:#13305E; }

/* breadcrumb back to the overview (in the dark header) */
.crumb { display:inline-block; margin-bottom:8px; font-size:14px; color:var(--header-muted); text-decoration:none; }
.crumb:hover { color:var(--header-ink); text-decoration:underline; }