/* Masters' Dojo mini-games (bag, pads, stick drill, ensō). Builds on .dgame / .dg-* in style.css */
.dgx [hidden]{display:none!important}
.dgx{padding:12px 12px max(12px,env(safe-area-inset-bottom));gap:10px}
.dgx .dg-hud{margin-bottom:0;flex-wrap:wrap;justify-content:center;gap:16px}
.dgx-stage{position:relative;z-index:2;width:min(94vw,560px);height:min(60vh,560px);flex:0 1 auto}
.dgx-ctl{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:min(94vw,560px)}
.dgx-ctl:empty{display:none}
.dgx-ctl .btn{padding:12px 16px;min-width:92px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.dgx-ctl .btn small{opacity:.7;font-size:12px;margin-left:4px;letter-spacing:1px}
.dgx-call{position:relative;z-index:3;min-height:1.2em;line-height:1.2;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  font-size:clamp(24px,5vw,40px);color:#f2be1a;text-shadow:0 3px 16px rgba(0,0,0,.85);pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap}
.dgx-call.on{opacity:1}.dgx-call.bad{color:#ff6b5e}.dgx-call.ok{color:#ffe07a}
.dgx .dg-res{max-height:86vh;overflow:auto}
.dgx .dg-res p{color:#e9e3d8}
.dgx-tok{font-family:"Barlow Condensed",sans-serif;font-size:18px;letter-spacing:.5px;padding:8px 10px;border-radius:4px;margin:10px 0 14px!important}
.dgx-tok.yes{background:rgba(242,190,26,.16);color:#f2be1a!important;border:1px solid rgba(242,190,26,.6)}
.dgx-tok.no{background:rgba(255,255,255,.06);color:#d8d1c5!important}

/* ---- heavy bag: leather bag on chains ---- */
.bag-wrap{position:absolute;inset:0 0 64px 0}
.bag-beam{position:absolute;left:18%;right:18%;top:0;height:16px;background:linear-gradient(#5a3a24,#2e1c11);border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,.6)}
.bag-pend{position:absolute;left:50%;top:10px;width:40%;height:94%;margin-left:-20%;transform-origin:50% 0;will-change:transform}
.bag-chains{position:absolute;left:50%;top:0;width:60%;height:14%;margin-left:-30%}
.bag-chains b{position:absolute;top:0;bottom:0;left:50%;width:3px;background:repeating-linear-gradient(#bdb6aa 0 5px,#5f5a52 5px 8px);transform-origin:50% 0}
.bag-chains b:nth-child(1){transform:rotate(26deg)}.bag-chains b:nth-child(3){transform:rotate(-26deg)}
.bag-swivel{position:absolute;left:50%;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:3px solid #8f897e;background:#2a2622}
.bag{position:absolute;left:10%;right:10%;top:12%;bottom:0;border:0;padding:0;cursor:pointer;transform-origin:50% 0;border-radius:18% 18% 14% 14%/5% 5% 6% 6%;
  background:linear-gradient(90deg,#1c0f08 0%,#4a2716 14%,#7a4527 30%,#93573280 40%,#8a4f2d 48%,#6b3a20 66%,#3a1f10 86%,#170b05 100%),
  radial-gradient(ellipse at 40% 30%,#a0653b,#5b301a 70%);
  box-shadow:inset 0 -24px 34px rgba(0,0,0,.55),inset 0 20px 24px rgba(0,0,0,.35),0 22px 32px rgba(0,0,0,.6);-webkit-tap-highlight-color:transparent}
.bag-cap{position:absolute;left:-2%;right:-2%;top:-1%;height:9%;border-radius:40% 40% 12% 12%/60% 60% 20% 20%;background:linear-gradient(90deg,#120804,#3d2112 35%,#5a321b 50%,#2c170b 80%,#0e0603);box-shadow:0 3px 4px rgba(0,0,0,.6)}
.bag-seam{position:absolute;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,rgba(230,200,160,.35) 0 6px,transparent 6px 11px)}
.bag-seam.s1{top:12%}.bag-seam.s2{top:50%}.bag-seam.s3{bottom:9%}
.bag-scuff{position:absolute;left:32%;top:28%;width:30%;height:34%;border-radius:50%;background:radial-gradient(ellipse,rgba(40,18,8,.55),transparent 70%)}
.bag-foot{position:absolute;left:-1%;right:-1%;bottom:0;height:7%;border-radius:10% 10% 40% 40%/20% 20% 60% 60%;background:linear-gradient(90deg,#120804,#3a1f10 40%,#241208 80%,#0e0603)}
.bag.hit{animation:baghit .2s ease-out}
@keyframes baghit{0%{filter:brightness(1.35);transform:scale(.96,1.02)}100%{filter:none}}
.bag-dust{position:absolute;left:50%;top:45%;width:60%;aspect-ratio:1;margin-left:-30%;border-radius:50%;background:radial-gradient(rgba(230,210,180,.55),transparent 65%);opacity:0;pointer-events:none}
.bag-dust.on{animation:bagdust .45s ease-out}
@keyframes bagdust{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
.bag-shadow{position:absolute;left:30%;right:30%;bottom:-8px;height:14px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.65),transparent 70%)}
.bag-meter{position:absolute;left:6%;right:6%;bottom:14px;height:28px;border:2px solid rgba(255,255,255,.35);border-radius:14px;background:rgba(0,0,0,.55);overflow:hidden}
.bm-zone{position:absolute;top:0;bottom:0;background:rgba(242,190,26,.33);transition:left .2s,width .2s}
.bm-sweet{position:absolute;top:0;bottom:0;background:rgba(242,190,26,.9);transition:left .2s,width .2s}
.bm-mid{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;opacity:.6}
.bm-mark{position:absolute;top:-2px;bottom:-2px;width:6px;margin-left:-3px;background:#fff;box-shadow:0 0 10px #fff;border-radius:3px}

/* ---- focus pads: a coach holds the mitts ---- */
.pad-scene{position:absolute;inset:0}
.pad-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pad-svg .coach{animation:coachbob 2.4s ease-in-out infinite;transform-origin:100px 230px}
@keyframes coachbob{50%{transform:translateY(1.5px)}}
.pad-svg .mitt.lit .mitt-in,.pad-svg .thigh.lit{filter:drop-shadow(0 0 5px #f2be1a) drop-shadow(0 0 2px #f2be1a)}
.pad-svg .mitt-in.hit,.pad-svg .thigh.hit{animation:mitthit .16s ease-out}
@keyframes mitthit{0%{transform:scale(.86);filter:brightness(1.8)}100%{transform:none}}
.pad-tap{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;border-radius:40%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pad-tap:focus-visible{outline:3px solid #f2be1a}
.pad-btn.lit{background:#f2be1a;border-color:#f2be1a;color:#111}

/* ---- stick angle wheel ---- */
.dgx-rack .dgx-stage{height:auto;aspect-ratio:1;width:min(92vw,60vh,500px)}
.rk-wheel{position:absolute;inset:0}
.rk-lines{position:absolute;inset:0;width:100%;height:100%}
.rk-lines line,.rk-lines circle{stroke:rgba(255,255,255,.18);stroke-width:.6;fill:none;stroke-dasharray:2 2}
.rk-stick{position:absolute;left:50%;top:50%;width:3%;height:46%;margin:-23% 0 0 -1.5%;transform-origin:50% 50%;border-radius:4px;
  background:repeating-linear-gradient(#b98a4c 0 10px,#8a6131 10px 12px);box-shadow:0 0 10px rgba(0,0,0,.6);transition:transform .18s}
.rk-t{position:absolute;width:15%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(20,16,14,.75);
  color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:clamp(18px,4.5vw,28px);cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0}
.rk-t.c{border-style:dashed}
.rk-t.lit{background:#f2be1a;color:#111;border-color:#fff;box-shadow:0 0 26px rgba(242,190,26,.9)}
.rk-t.ok{background:#3c8f4f;border-color:#bff0c9}
.rk-t.no{background:#c82f22;border-color:#ffb3aa}
/* stick drill on phones: big targets, no scroll or zoom, landscape keeps the wheel large */
.dgx-rack{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.dgx-rack .dg-res{touch-action:pan-y}
.dgx-rack .rk-t{width:clamp(44px,15%,84px);touch-action:none}
.dgx-rack .rk-t.lit{z-index:2}
.dgx-rack .dg-x{min-width:48px;min-height:48px}
@media (orientation:landscape) and (max-height:520px){
.dgx-rack .dg-hud{position:absolute;left:max(12px,env(safe-area-inset-left));top:50%;transform:translateY(-50%);flex-direction:column;align-items:flex-start;gap:6px;max-width:26vw}
.dgx-rack .dgx-call{position:absolute;right:max(14px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);max-width:24vw}
.dgx-rack .dgx-stage{width:min(calc(100vh - 32px),48vw,500px);width:min(calc(100dvh - 32px),48vw,500px)}
}

/* ---- ensō ---- */
.dgx-enso .dgx-stage{height:auto;aspect-ratio:1;width:min(92vw,60vh,520px)}
.en-paper{position:absolute;inset:0;border-radius:6px;background:radial-gradient(circle at 30% 25%,#fbf6ea,#efe5cf 70%,#e2d4b4);box-shadow:0 12px 40px rgba(0,0,0,.6)}
.en-cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.en-fb{position:absolute;left:0;right:0;bottom:6px;margin:0;text-align:center;color:#3b2f25;font-family:"Barlow",sans-serif;font-size:14px;pointer-events:none;padding:0 8px}
.en-fb b{color:#a3261b;font-size:18px}

@media (max-width:520px){.dgx-stage{height:min(52vh,460px)}.dgx-ctl .btn{min-width:72px;padding:12px 10px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.bag.hit,.bag-dust.on,.pad-svg .mitt-in.hit,.pad-svg .coach{animation:none}.rk-stick{transition:none}}

/* ---- bō-shuriken throwing ---- */
.th-scene{position:absolute;inset:0;overflow:hidden;border-radius:8px}
.th-wall{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#3b2416 0 46px,#2e1c11 46px 49px);box-shadow:inset 0 0 80px rgba(0,0,0,.7)}
.th-post{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,#24160d,#5a3a24 40%,#3a2516);box-shadow:0 0 18px rgba(0,0,0,.6)}
.th-board{position:absolute;border-radius:50%;background:radial-gradient(circle,#efe2c4 0 18%,#2a1a10 18% 20%,#d9c39a 20% 43%,#2a1a10 43% 45%,#c9ae80 45% 68%,#2a1a10 68% 70%,#b8986a 70% 97%,#3a2414 97%);box-shadow:0 10px 26px rgba(0,0,0,.6),inset 0 0 18px rgba(60,30,10,.5)}
.th-board .r{display:none}
.th-board::after{content:"";position:absolute;left:50%;top:50%;width:9%;height:9%;transform:translate(-50%,-50%);border-radius:50%;background:#a3261b}
.th-stuck{position:absolute;inset:0}
.th-pin{position:absolute;width:5px;height:22px;margin:-20px 0 0 -2px;transform-origin:50% 100%;background:linear-gradient(90deg,#6f747a,#e9edf1 45%,#8a9096);border-radius:2px 2px 1px 1px;box-shadow:2px 3px 3px rgba(0,0,0,.5)}
.th-pin::after{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:rgba(0,0,0,.45)}
.th-pin.bounce{opacity:0;animation:thbounce .6s ease-out}
@keyframes thbounce{0%{opacity:1;transform:rotate(0)}100%{opacity:0;transform:translate(30px,90px) rotate(160deg)}}
.th-ret{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid rgba(255,255,255,.9);border-radius:50%;pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.7)}
.th-ret::before,.th-ret::after{content:"";position:absolute;background:rgba(255,255,255,.9)}
.th-ret::before{left:50%;top:-8px;bottom:-8px;width:2px;margin-left:-1px}.th-ret::after{top:50%;left:-8px;right:-8px;height:2px;margin-top:-1px}
.th-fly{position:absolute;left:0;top:0;width:6px;height:64px;margin:-60px 0 0 -3px;display:none;pointer-events:none;transform-origin:50% 94%}
.th-fly.on{display:block}
.th-fly i{position:absolute;inset:0;clip-path:polygon(50% 0,100% 12%,100% 100%,0 100%,0 12%);background:linear-gradient(90deg,#6f747a,#f4f6f8 45%,#8a9096)}
.th-fly i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:repeating-linear-gradient(#2a2a2a 0 3px,#4a3a2a 3px 5px)}
.th-dist{position:absolute;left:10px;bottom:8px;font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;letter-spacing:1px;color:#f2be1a;text-shadow:0 2px 6px #000}
.th-btn{min-width:150px!important}