/* 相撲の手助け（bout-guide.js・bout-tutorial.js）：手の面のふちの言葉・今の手の形・ヒント・キーの一覧・練習の一番の札と指 */

/* ---------- 手の面 ---------- */
.b-pad::before{content:none}
.b-pad{gap:0;overflow:hidden}
.b-pad .p-name{font-size:11px;font-weight:800;opacity:.8;line-height:1.2}
.b-pad .p-st{font-style:normal;font-size:19px;font-weight:800;line-height:1.25;color:#cfd6d3;transition:color .15s}
.b-pad .p-op{font-size:10.5px;font-weight:700;opacity:.85;line-height:1.3}
.b-pad .p-auto{display:none;font-size:10px;font-weight:800;color:#9fe3a0}
.b-pad[data-hs="thrust"] .p-st{color:#ff9a4a}
.b-pad[data-hs="inside"] .p-st{color:#5fd0e6}
.b-pad[data-hs="shitate"] .p-st{color:#6fa6ff}
.b-pad[data-hs="uwate"] .p-st{color:#ffd24a}
.b-pad[data-os="inside"] .p-op,.b-pad[data-os="shitate"] .p-op,.b-pad[data-os="uwate"] .p-op{color:#ff8a6a;opacity:1}
/* ふちの言葉：上＝上手、下＝離す、内（まん中の側）＝差す、外＝投げ（つかんでいるときだけ濃く）、上の角＝タップ・長押し */
.b-pad .pe{position:absolute;font-size:11px;font-weight:800;line-height:1.1;white-space:nowrap;padding:3px 6px;border-radius:8px;background:rgba(0,0,0,.28);opacity:.9;transition:opacity .15s,background .15s,color .15s}
.b-pad .pe-up{top:4px;left:50%;transform:translateX(-50%);color:#ffd24a}
.b-pad .pe-down{bottom:4px;left:50%;transform:translateX(-50%);color:#cfd6d3}
.b-pad .pe-in,.b-pad .pe-out{top:50%;transform:translateY(-50%)}
.b-pad .pe-in{color:#5fd0e6}
.b-pad .pe-out{color:#ffb38a;opacity:.38}
.b-pad.grip .pe-out{opacity:1;background:rgba(224,82,58,.35);color:#fff}
.b-pad-l .pe-in{right:4px}.b-pad-l .pe-out{left:4px}
.b-pad-r .pe-in{left:4px}.b-pad-r .pe-out{right:4px}
.b-pad .pe-tap,.b-pad .pe-hold{bottom:4px;font-size:10px;color:#fff;opacity:.7;background:none}
.b-pad-l .pe-tap{left:4px}.b-pad-l .pe-hold{right:4px}
.b-pad-r .pe-tap{right:4px}.b-pad-r .pe-hold{left:4px}
/* ヒント・練習が指す向きの言葉を光らせる */
.b-pad.cue{border-color:#fff;border-style:solid}
.b-pad.cue[data-cue="up"] .pe-up,.b-pad.cue[data-cue="in"] .pe-in,.b-pad.cue[data-cue="down"] .pe-down,.b-pad.cue[data-cue="out"] .pe-out,
.b-pad.cue[data-cue="tap"] .pe-tap,.b-pad.cue[data-cue="hold"] .pe-hold{opacity:1;background:#fff;color:#1b1512;animation:cuePulse .5s ease-in-out infinite alternate}
@keyframes cuePulse{to{box-shadow:0 0 12px 3px rgba(255,255,255,.75)}}
.b-pull.cue,.b-stick.cue{border-color:#ffe08a;box-shadow:0 0 0 4px #ffe08a,0 0 22px 8px rgba(255,224,138,.75);animation:cueRing .5s ease-in-out infinite alternate}
@keyframes cueRing{to{box-shadow:0 0 0 7px #ffe08a,0 0 30px 12px rgba(255,224,138,.9)}}
/* おまかせ：手の形は自動。外へはじく（投げ）と長押し（寄る）だけ */
body.is-assist .b-pad .pe-up,body.is-assist .b-pad .pe-in,body.is-assist .b-pad .pe-down,body.is-assist .b-pad .pe-tap{opacity:.18}
body.is-assist .b-pad .p-auto{display:block}
/* 横持ちの低い画面：言葉を少し小さく */
@media (max-height:460px),(max-width:700px) and (orientation:portrait){
  .b-pad .p-st{font-size:17px}
  .b-pad .pe{font-size:10.5px;padding:2px 5px}
  /* スマホ：手の面の文字を減らす。角の「タップ 突き・長押し 寄る」と「相手の右手 …」は出さない（相手の手は上のまん中の図と文字に同じものがある。タップ・長押しは準備の画面と練習の一番で） */
  .b-pad .pe-tap,.b-pad .pe-hold,.b-pad .p-op{display:none}
  .b-pad.cue[data-cue="tap"] .pe-tap,.b-pad.cue[data-cue="hold"] .pe-hold{display:block}
}

/* ---------- 次の一手のヒント（下のまん中。小さく） ---------- */
.b-hint{position:absolute;left:50%;bottom:calc(76px + var(--sab));transform:translateX(-50%);display:flex;align-items:center;gap:8px;max-width:min(440px,60vw);padding:6px 14px;border-radius:99px;background:rgba(20,14,10,.82);border:2px solid rgba(255,224,138,.75);font-size:15px;font-weight:800;line-height:1.3;white-space:nowrap;pointer-events:none;animation:hintIn .25s ease-out}
.b-hint b{overflow:hidden;text-overflow:ellipsis}
.b-hint .h-g{display:flex;gap:3px;flex:none}
.b-hint .h-g i{font-style:normal;padding:1px 8px;border-radius:8px;background:#ffe08a;color:#1b1512;font-size:13px}
.b-hint.p8,.b-hint.p9{border-color:#ff7a5a}
.b-hint.p1,.b-hint.p2{border-color:rgba(255,255,255,.35);font-size:13px}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,8px)}}
body.is-touch .b-hint{bottom:calc(112px + var(--sab));max-width:min(310px,calc(100vw - 2 * min(250px,29vw) - 32px));font-size:14px;padding:5px 10px}
/* 試合の短い知らせ（bout-hud.js の message）はヒントと同じ場所に出し、その間はヒントを隠す（取組中の言葉は1つ） */
body:not(.is-easy) .r-msg{top:auto;bottom:calc(112px + var(--sab));font-size:clamp(15px,2.4vw,20px);max-width:calc(100vw - 2 * min(250px,29vw) - 32px);overflow:hidden;text-overflow:ellipsis}
body:not(.is-touch):not(.is-easy) .r-msg{bottom:calc(var(--keysH,60px) + 70px + var(--sab));max-width:min(560px,90vw)}
#bMsg.on ~ #bHint{visibility:hidden}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.7em;height:1.6em;padding:0 5px;border-radius:5px;background:#f4ecdc;color:#1b1512;border-bottom:2px solid #b49c78;font:800 12px/1 "LINE Seed JP",sans-serif;text-shadow:none;margin:0 1px}
/* 仕切り：立ち合いのヒントは呼吸のメーターの下の文字に */
#breath small.b-hint-cap{font-size:13px;font-weight:800;color:#ffe08a;opacity:1}

/* ---------- パソコンのキーの一覧（今使えるキーを光らせる） ---------- */
.r-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 12px;max-width:min(980px,96vw);white-space:normal;border-radius:14px;padding:4px 12px;font-size:11.5px}
.r-keys>span{display:inline-flex;align-items:center;gap:2px;opacity:.85;transition:opacity .15s}
.r-keys>span.dim{opacity:.32}
.r-keys>span.on{opacity:1;color:#ffe08a}
.r-keys>span.on kbd{background:#ffe08a;border-bottom-color:#c19a2e;box-shadow:0 0 8px rgba(255,224,138,.8)}
.r-keys small{opacity:.7;font-size:10px}
.r-keys em{font-style:normal;font-weight:800;margin-left:2px;color:#cfd6d3}
.r-keys em.ks-thrust{color:#ff9a4a}.r-keys em.ks-inside{color:#5fd0e6}.r-keys em.ks-shitate{color:#6fa6ff}.r-keys em.ks-uwate{color:#ffd24a}
body:not(.is-touch) .b-breath,body:not(.is-touch) .b-hint{bottom:calc(var(--keysH,60px) + 16px + var(--sab))}

/* ---------- 取組中の切りかえ（ヒント・おまかせ） ---------- */
.b-tools-l{right:auto;left:calc(10px + var(--sal))}
.b-tools .b-toggle{opacity:.75}
.b-tools .b-toggle::before{content:'';display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:#8a8f96;vertical-align:1px}
.b-tools .b-toggle.on::before{background:#7fd46a}
.b-tools .b-toggle.on{opacity:1;background:rgba(127,212,106,.35);box-shadow:inset 0 0 0 2px #7fd46a}
body.is-touch .b-tools .r-mini{min-height:44px}
.b-help .b-lesson-btn{min-height:44px;font-size:14px;margin-top:4px}

/* ---------- 結果：なぜ勝った・負けたか ---------- */
.b-why{margin:6px 0 0;padding:6px 10px;border-radius:12px;background:#f7eee3;font-size:14px;font-weight:700;line-height:1.45;text-align:left}
.b-why b{display:inline-block;margin-right:8px;padding:0 8px;border-radius:6px;background:#7a4a20;color:#fff;font-size:13px}
.b-why.lose b{background:#4b5560}
.b-why.lesson .ok{display:inline-block;margin:0 2px;color:#2f7a3a;font-weight:800}
.b-tip{margin:4px 0 0;font-size:13px;line-height:1.45;text-align:left;color:#3a2a1a}
.b-tip b{display:inline-block;margin-right:8px;padding:0 8px;border-radius:6px;background:#2f7a3a;color:#fff;font-size:13px}
.b-lesson-again{margin-top:6px}

/* ---------- 練習の一番：上のまん中の札と、手の面の上の指 ---------- */
body.is-lesson .b-tools .b-toggle{display:none}
.b-lesson{position:fixed;left:calc(12px + var(--sal));top:calc(84px + var(--sat));width:min(380px,32vw);z-index:7;padding:6px 12px 8px;border-radius:14px;background:rgba(255,253,248,.96);color:#221a14;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:background .2s,box-shadow .2s}
.b-lesson .lz-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.b-lesson .lz-top small{font-size:11px;font-weight:800;letter-spacing:.1em;color:#8a5a2b}
.b-lesson .lz-quit{min-height:44px;padding:0 12px;border-radius:99px;border:0;background:rgba(0,0,0,.08);font-weight:800;font-size:12px;cursor:pointer}
.b-lesson h3{margin:-4px 0 0;font-size:17px;line-height:1.3}
.b-lesson p{margin:2px 0 0;font-size:13.5px;font-weight:700;line-height:1.45}
.b-lesson .lz-keys{display:flex;align-items:center;gap:6px;margin-top:4px}
.b-lesson .lz-keys:empty{display:none}
.b-lesson .lz-keys kbd{font-size:18px;height:1.7em;min-width:2.2em;animation:cuePulse .5s ease-in-out infinite alternate;background:#ffe08a}
.b-lesson .lz-keys span{font-size:12px;opacity:.7}
.b-lesson .lz-note{color:#7a4a20}
.b-lesson .lz-note:empty{display:none}
.b-lesson.ok{box-shadow:0 0 0 3px #4fbf5a,0 8px 24px rgba(0,0,0,.4)}
.b-lesson.ok .lz-note{color:#2f7a3a;font-size:15px}
.b-lesson.warn{box-shadow:0 0 0 3px #e8a03a,0 8px 24px rgba(0,0,0,.4)}
.b-lesson.warn .lz-note{color:#b5651d}
body.is-intro .b-lesson,body.is-result .b-lesson,body.is-replay .b-lesson{display:none}
/* 指：丸い指先が、なぞる向きへ動く（--dx・--dy）／トンとたたく／押したまま */
.lz-finger{position:fixed;z-index:8;width:0;height:0;pointer-events:none}
.lz-finger i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 0 3px rgba(255,180,60,.9),0 4px 12px rgba(0,0,0,.5)}
.lz-finger u{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:3px solid #fff;opacity:0}
.lz-finger.g-in i,.lz-finger.g-out i,.lz-finger.g-up i,.lz-finger.g-down i{animation:lzSwipe 1.1s ease-in-out infinite}
.lz-finger.g-out i{animation-duration:.8s}
.lz-finger.g-tap i{animation:lzTap .9s ease-in-out infinite}
.lz-finger.g-tap u{animation:lzRing .9s ease-out infinite}
.lz-finger.g-hold i{animation:lzHold 1.6s ease-in-out infinite}
.lz-finger.g-hold u{animation:lzHoldRing 1.6s ease-out infinite}
@keyframes lzSwipe{0%{transform:translate(0,0) scale(1.15);opacity:0}15%{transform:translate(0,0) scale(1);opacity:1}75%{transform:translate(var(--dx),var(--dy));opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes lzTap{0%,100%{transform:scale(1.1)}40%{transform:scale(.8)}}
@keyframes lzRing{0%,35%{transform:scale(.6);opacity:0}45%{opacity:1}100%{transform:scale(2);opacity:0}}
@keyframes lzHold{0%{transform:scale(1.1)}20%,85%{transform:scale(.82)}100%{transform:scale(1.1)}}
@keyframes lzHoldRing{0%,20%{transform:scale(.8);opacity:0}30%{opacity:1}85%{transform:scale(1.9);opacity:.6}100%{opacity:0}}
@media (max-height:460px){
  .b-lesson{left:50%;transform:translateX(-50%);top:calc(6px + var(--sat));width:min(310px,37vw);padding:4px 10px 6px}
  .b-lesson h3{font-size:15px}
  .b-lesson p{font-size:12.5px;line-height:1.4}
  body.is-lesson .b-center{display:none}
}
/* スマホ縦：練習の札は上の帯いっぱいに（細い列で何行にも折れないように）。その間は上のまん中の図を隠す */
@media (max-width:700px) and (orientation:portrait){
  /* ヒント・知らせは、まん中のスティックと「引く」の上（手の面の間は狭いので） */
  body.is-touch .b-hint,body.is-touch:not(.is-easy) .r-msg{bottom:calc(280px + var(--sab));max-width:calc(100vw - 24px - var(--sal) - var(--sar))}
  .b-lesson{left:calc(10px + var(--sal));right:calc(10px + var(--sar));width:auto;top:calc(112px + var(--sat))} /* 切りかえのボタン（64〜108px）の下 */
  body.is-lesson .b-center{display:none}
}
@media (prefers-reduced-motion:reduce){.lz-finger i,.lz-finger u,.b-pad.cue .pe,.b-lesson .lz-keys kbd{animation-duration:2.4s}}