/* ===================================================================
   手筋の詳しいページの冒頭の盤を「動く問題」にする（2026-10-28 松原さん）＝tesuji-q.js の見た目
   手筋の一覧（/tesuji/index.html）の盤の打ち込み・札・〇成功・ボタンと同じ見た目。
   全部 tesuji-q.js が付ける印（.tq-on など）の下だけに効く＝tesuji-q.js が動かない時は、今のままの冒頭の盤。
   =================================================================== */
:root{--tesuji-q:1}   /* tesuji-q.js が「この CSS が効いている」と見る印 */
#yurai .sbwrap.tq-on{position:relative;overflow-x:clip}   /* 端の筋の光で横スクロールを出さない（縦は切らない。手筋の一覧と同じ） */
/* 問題の盤（#tq-board）は冒頭の盤の上に重ねる。問題の場面は冒頭の盤と矢印・金色の印を隠し、最後の場面は問題の盤を隠す */
#yurai .sbwrap.tq-on>#tq-board{position:absolute;margin:0}
#yurai .sbwrap.tq-q>table.sb:not(#tq-board),#yurai .sbwrap.tq-q>svg{visibility:hidden}
#yurai .sbwrap.tq-f>#tq-board{visibility:hidden}
/* 冒頭の盤の升に付けたページの赤い升・金色の枠（升の場所で書いてある）を、問題の盤には付けない */
#yurai #tq-board td[data-x][data-y]{background-color:transparent!important;box-shadow:none!important}
#yurai #tq-board td[data-x][data-y]::after{content:none!important}
#yurai #tq-board td.tq-hl[data-x][data-y]{background-color:var(--study-highlight,#e0392b35)!important}   /* 赤い升（data-q の hl） */
#yurai #tq-board td.tq-frm[data-x][data-y]{box-shadow:inset 0 0 0 3px #e0392b!important}   /* 赤い枠（data-q の frm） */
/* 手筋の手＝上から打ち込み（パチン）・着地で光の輪・そのあと金色に光る（手筋の一覧と同じ。駒 .pc は真ん中に置く transform を足す） */
#yurai #tq-board .tqdrop{transform-origin:50% 88%}
#yurai #tq-board td.dropgo .tqdrop.pc{animation:tqDropP .72s both,tqLift .34s}
#yurai #tq-board td.dropgo .tqdrop.kp{animation:tqDropK .72s both,tqLift .34s}
#yurai #tq-board .drophalo{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:12%;pointer-events:none;opacity:0;
 background:radial-gradient(ellipse farthest-side,#fff8c0 0,#ffe066 55%,#ffc400 85%,#ffb300a0 100%)}
#yurai #tq-board td.dropgo .drophalo{animation:tqHalo 1.5s ease-in-out .72s infinite alternate}
#yurai #tq-board td.dropon .drophalo{animation:tqHalo 1.5s ease-in-out infinite alternate}
#yurai #tq-board td.dropon .tqdrop{filter:drop-shadow(1.5px 2.5px 1px #000a) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #ffe14d) brightness(1.12)}
#yurai #tq-board .dropfx{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}
#yurai #tq-board .dropfx::before,#yurai #tq-board .dropfx::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0}
#yurai #tq-board .dropfx::before{border:3px solid #fff;box-shadow:0 0 10px 3px #ffd23f,inset 0 0 10px 2px #ffd23f}
#yurai #tq-board .dropfx::after{background:radial-gradient(circle,#fff 0 22%,#ffe680c0 40%,#ffc40000 68%)}
#yurai #tq-board td.dropgo .dropfx::before{animation:tqRing .5s cubic-bezier(.2,.7,.3,1) .34s}
#yurai #tq-board td.dropgo .dropfx::after{animation:tqFlash .42s ease-out .34s}
@keyframes tqDropP{
 0%{opacity:0;transform:translate(-50%,-50%) translateY(14%) scale(1.75);filter:drop-shadow(10px 18px 6px #0005)}
 20%{opacity:1;transform:translate(-50%,-50%) translateY(14%) scale(1.75);filter:drop-shadow(10px 18px 6px #0005);animation-timing-function:cubic-bezier(.6,0,1,.6)}
 47%{transform:translate(-50%,-50%) translateY(0) scale(1);filter:drop-shadow(1.5px 2.5px 1px #000a)}
 57%{transform:translate(-50%,-50%) scale(1.12,.86)}
 70%{transform:translate(-50%,-50%) scale(.95,1.05)}
 84%{transform:translate(-50%,-50%) scale(1.02,.98)}
 100%{opacity:1;transform:translate(-50%,-50%);filter:drop-shadow(1.5px 2.5px 1px #000a) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #ffe14d) brightness(1.12)}}
@keyframes tqDropK{
 0%{opacity:0;transform:translateY(14%) scale(1.75);filter:drop-shadow(10px 18px 6px #0005)}
 20%{opacity:1;transform:translateY(14%) scale(1.75);filter:drop-shadow(10px 18px 6px #0005);animation-timing-function:cubic-bezier(.6,0,1,.6)}
 47%{transform:translateY(0) scale(1);filter:drop-shadow(1.5px 2.5px 1px #000a)}
 57%{transform:scale(1.12,.86)}
 70%{transform:scale(.95,1.05)}
 84%{transform:scale(1.02,.98)}
 100%{opacity:1;transform:none;filter:drop-shadow(1.5px 2.5px 1px #000a) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #ffe14d) brightness(1.12)}}
@keyframes tqLift{0%,99%{z-index:9}}
@keyframes tqHalo{from{opacity:.4}to{opacity:1}}
@keyframes tqRing{0%{opacity:1;transform:scale(.45)}100%{opacity:0;transform:scale(2.3)}}
@keyframes tqFlash{0%{opacity:1;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}
@media (prefers-reduced-motion:reduce){
 #yurai #tq-board td.dropgo .tqdrop{animation:none;filter:drop-shadow(1.5px 2.5px 1px #000a) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px #ffe14d) brightness(1.12)}
 #yurai #tq-board .dropfx{display:none}
 #yurai #tq-board td.dropgo .drophalo,#yurai #tq-board td.dropon .drophalo{animation:none;opacity:.7}}
/* 着地までの間だけ残す、指す前の見えない駒（駒の音 koma-oto.js が着地の時に1手と数えるため） */
#yurai #tq-board .tq-prev{position:absolute;inset:0;opacity:0!important;pointer-events:none}
#yurai #tq-board .tq-prev.pc{inset:auto;left:50%;top:50%}
/* 札（「取ると」など）・〇成功・ボタン（手筋の一覧と同じ） */
#yurai .sbwrap.tq-on>.uchilab{position:absolute;z-index:20;display:none;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;
 background:#101b30e6;color:#fff;font-size:14px;font-weight:800;line-height:1.5;padding:3px 10px;border-radius:999px;border:1px solid #ffffff4d}
#yurai .sbwrap.tq-on>.uchilab.on{display:block}
#yurai .sbwrap.tq-on>.splash.ok{left:25%;right:25%;top:55%}   /* 全幅のままだと大きくなる時に横スクロールが出る */
@media (prefers-reduced-motion:reduce){#yurai .sbwrap.tq-on>.splash.ok.show{animation:none;opacity:1}}
#yurai .pctl.tq-ctl button.uchi{background:#3b5273;flex:1;max-width:170px}
#yurai .pctl.tq-ctl button.uchi[aria-disabled="true"]{opacity:.35;cursor:default;transform:none}   /* 押せないボタン（指す前の「最初から」「◀戻る」・最後の「次へ▶」）は薄く */