/* Shot Practice guide in the Drills topic (drills-shp.js). Classes start with shp-.
   Builds on drills.css (dr-ta, dr-film, dr-fact, dr-scr, dr-seg) and drills-stt.css (st-head, st-sec, st-taps,
   st-pin, st-legend, st-after, st-four, st-tips), so the drill guides look alike. */

/* One guide at a time: #drills[data-guide] is set by drills-stt.js from the hash. The drill picker stays. */
#drills[data-guide="shp"] #drills-root > section:not(.dr-pick) { display: none; }
#drills:not([data-guide="shp"]) #drills-shp-root { display: none; }
#drills[data-guide="shp"] .dr-dcard[href="#dr-target"] { border-color: transparent; box-shadow: var(--shadow); }
#drills[data-guide="shp"] .dr-dcard[href="#shot-practice"] { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft), var(--shadow); }

/* screenshot or LED still with numbered pins + legend side by side */
.shp-split { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
.shp-pinfig .st-pair img { display: block; width: 100%; height: auto; }
.dr-scr.shp-pinfig .st-pair img { border-radius: 15px; aspect-ratio: 720 / 1010; }
.st-led.shp-pinfig .st-pair img { border-radius: 9px; }
.shp-pinfig .st-pin { width: 30px; height: 30px; line-height: 30px; font-size: 14px; }
.shp-split--inv .st-legend button { background: rgba(255,255,255,.07); border-color: transparent; box-shadow: none; }
.shp-split--inv .st-legend button strong { color: #fff; }
.shp-split--inv .st-legend button small { color: var(--inv-muted); }
.shp-split--inv .st-legend button.is-on { border-color: var(--inv-primary); background: rgba(255,255,255,.12); }
@media (max-width: 760px) { .shp-split { grid-template-columns: minmax(0, 1fr); } .shp-split > .shp-pinfig { max-width: 360px; width: 100%; justify-self: center; } }

/* link to the Target areas guide */
.shp-tlink { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--primary-soft); color: var(--ink); text-decoration: none; }
.shp-tlink img { width: 64px; height: 64px; border-radius: 12px; display: block; object-fit: cover; }
.shp-tlink > span { display: grid; gap: 4px; font-size: 14.5px; }
.shp-tlink b { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; }
.shp-tlink svg, .shp-tip__go svg { width: 16px; height: 16px; }
[dir="rtl"] .shp-tlink svg, [dir="rtl"] .shp-tip__go svg { transform: scaleX(-1); }
.shp-tlink:hover { background: #dde8ff; }

/* 03 panel */
.shp-panel__main { display: grid; gap: 18px; }
.shp-depth { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 18px; display: grid; gap: 8px; }
.shp-depth b { font: 700 16px/1.25 var(--f-display); color: var(--ink); }
.shp-depth > span { color: var(--muted); font-size: 14.5px; }
.shp-depth__svg { width: 100%; height: auto; display: block; }
.shp-d-court { fill: #e7eef9; }
.shp-d-line { stroke: #7f9cc7; stroke-width: 3; }
.shp-d-net { stroke: var(--ink); stroke-width: 5; }
.shp-d-lbl { fill: var(--ink); font: 600 14px/1 var(--f-body); text-anchor: middle; }
.shp-d-m { fill: var(--muted); font: 400 13px/1 var(--f-mono); text-anchor: middle; }
.shp-d-ball { fill: #d7f64a; stroke: #6c8a00; stroke-width: 2; }
.shp-d-arrow { stroke: var(--primary); stroke-width: 3; stroke-dasharray: 6 5; fill: none; }
.shp-note { grid-template-columns: 170px minmax(0, 1fr); }
.shp-note .st-led { padding: 4px; border-radius: 12px; box-shadow: none; }
.shp-note .st-led img { border-radius: 8px; }
@media (max-width: 480px) { .shp-note { grid-template-columns: 120px minmax(0, 1fr); } }

/* 04 rally */
.shp-play { display: grid; gap: 34px; }
.shp-play__clip { max-width: 760px; }
.shp-play__clip video, .shp-four__clip video { aspect-ratio: 880 / 426; }
.shp-play__clip figcaption { color: #cdd8ea; font-size: 13px; padding: 10px 6px 4px; }
.shp-split--inv .dr-scr { background: #fff; }

/* 05 practice rally */
.shp-game { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 320px); gap: clamp(18px, 3vw, 36px); align-items: start; }
.shp-g-court { background: #000; border-radius: 22px; padding: 12px; box-shadow: var(--shadow-lg); }
#shp-court { width: 100%; height: auto; display: block; border-radius: 12px; cursor: crosshair; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.shp-c-court { fill: #06345e; }
.shp-c-in { fill: #0a4a86; }
.shp-c-near { fill: #04213f; }
#shp-court .st-c-lines path { stroke: #cfe0f7; stroke-width: 4; opacity: .85; }
.shp-c-pl circle { fill: var(--p1); stroke: #fff; stroke-width: 3; }
.shp-c-pl text { fill: #fff; font: 700 22px/1 var(--f-display); text-anchor: middle; }
.shp-mark { fill: #d7f64a; stroke: #2a3a00; stroke-width: 2; }
.shp-mark--out { fill: none; stroke: #ff6b6b; stroke-width: 3; }
.shp-mark.is-last { stroke-width: 4; }
.shp-mark.is-last:not(.shp-mark--out) { stroke: #fff; }
.shp-fb { position: absolute; top: 10px; inset-inline: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 12px; padding: 10px 14px; border-radius: 12px; background: rgba(2,14,30,.86); color: #fff; pointer-events: none; animation: shp-fb 1.4s ease forwards; }
.shp-fb strong { font: 700 22px/1 var(--f-display); }
.shp-fb--in strong { color: #19c37d; }
.shp-fb--out strong { color: #ff6b6b; }
.shp-fb span { font: 600 15px/1.2 var(--f-body); color: var(--inv-text); }
@keyframes shp-fb { 0% { opacity: 0; transform: translateY(-6px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
.shp-g-side { display: grid; gap: 14px; }
.shp-g-led { border-radius: 18px; background: #000; padding: 10px; box-shadow: var(--shadow-lg); }
.shp-mled { position: relative; aspect-ratio: 1.15 / 1; display: grid; grid-template-rows: auto 1fr 1fr 1fr; align-items: center; padding: 0 12px 16px; color: #fff; font-family: var(--f-display); direction: ltr; }
.shp-mled__h { background: #1d1d1d; text-align: center; font: 700 16px/30px var(--f-display); margin: 0 -2px 4px; }
.shp-mled__r { display: flex; justify-content: space-between; align-items: baseline; }
.shp-mled__r span { font: 700 17px/1 var(--f-display); }
.shp-mled__r b { font: 700 clamp(26px, 3vw, 34px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.shp-mled__bar { position: absolute; left: 12px; bottom: 6px; height: 5px; max-width: calc(100% - 24px); background: #2fb24c; transition: width .3s; }
.shp-mled--end { display: grid; grid-template-rows: none; place-items: center; padding: 16px; }
.shp-mled--end span { font: 700 clamp(22px, 2.6vw, 30px)/1.1 var(--f-display); text-align: center; letter-spacing: .02em; }
.shp-g-prog { height: 8px; border-radius: 8px; background: rgba(255,255,255,.14); overflow: hidden; }
.shp-g-prog i { display: block; height: 100%; background: var(--green); border-radius: 8px; transition: width .3s; }
.shp-g-meter { background: linear-gradient(90deg, #8fb3e6, #19c37d 50%, #f6c344); }
.shp-game__note { color: var(--inv-muted); font-size: 13.5px; margin-top: 18px; }
.shp-gameband { padding-bottom: 56px; }
@media (max-width: 760px) {
  .shp-game { grid-template-columns: minmax(0, 1fr); }
  .shp-g-court { max-width: 420px; width: 100%; justify-self: center; }
  .shp-g-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); order: -1; }
  .shp-g-side .shp-g-led { grid-row: span 2; }
  .shp-g-side .st-g-serve { grid-column: span 2; }
  .shp-mled { padding: 0 6px 14px; }
  .shp-g-side .st-g-speed { font-size: 21px; white-space: nowrap; }
  .shp-mled__r b { font-size: clamp(15px, 4.4vw, 22px); white-space: nowrap; }
  .shp-mled__r span { font-size: 12px; }
}

/* 06 after */
.shp-after .st-after__card > figure.st-led--wide { max-width: none; }
.shp-after .st-after__card > figure.st-led--wide img { aspect-ratio: 1100 / 532; }

/* 07 three or four players */
.shp-seg { justify-self: start; margin-bottom: 4px; }
#shp-group-led { display: grid; gap: 8px; }
.shp-group__cap { color: var(--muted); font-size: 14px; }
.shp-four__clip figcaption { color: #cdd8ea; }
.shp-group__side { display: grid; gap: 18px; align-content: start; }
.shp-res4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .shp-res4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* tips: the Target areas tip is a link */
.shp-tip--link { text-decoration: none; color: inherit; border: 2px solid transparent; }
.shp-tip--link:hover { border-color: var(--primary); }
.shp-tip__go { display: inline-flex; align-items: center; gap: 6px; color: var(--primary) !important; font-weight: 700; font-size: 14.5px; margin-top: 4px; }
.shp-g-side .st-g-speed { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .shp-g-side .st-g-speed { text-align: right; }