/* LABO — サイト共通の部品と動き。各頁の <style> の後に読む。 */
:root{--朱:#c9563f}
@keyframes 引線{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes 引縦{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes 呼吸{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes 降{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
@keyframes 菱回{0%{transform:rotate(45deg)}100%{transform:rotate(405deg)}}
@keyframes 漂{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-6px)}}
@keyframes 判押{0%{transform:rotate(-4deg) scale(1.25);opacity:0}60%{transform:rotate(-4deg) scale(.96);opacity:1}100%{transform:rotate(-4deg) scale(1);opacity:.9}}
@keyframes 字浮{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes 描く{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes 影浮{0%,100%{letter-spacing:.05em;opacity:.6}50%{letter-spacing:.09em;opacity:1}}
@keyframes 縁光{0%,100%{box-shadow:0 30px 60px rgba(0,0,0,.45)}50%{box-shadow:0 34px 70px rgba(0,0,0,.6),0 0 0 1px rgba(214,169,74,.25)}}
@keyframes 点々{from{width:0}to{width:1.5em}}
@keyframes 揺欄{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* 現れる: JS が html.動く を付けたときだけ隠す（JS 無しでも読める） */
.動く .現れ:not(.生){opacity:0;transform:translateY(16px)}
.現れ{transition:opacity .7s ease,transform .7s ease}
.現れ.生{opacity:1;transform:none}

/* 押し物 */
.押{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:none;color:var(--白);border:1px solid var(--紙);font:600 12px/1 var(--和);letter-spacing:.3em;padding:15px 22px;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:border-color .3s,color .3s,letter-spacing .3s}
.押::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.押:hover{border-color:var(--黄);color:var(--黄);letter-spacing:.36em;filter:none} .押:hover::after{transform:scaleX(1)}
.押:disabled{border-color:var(--線);color:var(--案内);cursor:not-allowed;opacity:1}
.押.金{border-color:var(--黄);color:var(--黄)} .押.金:hover{background:var(--黄);color:var(--墨)}
.押.薄{border-color:var(--線);color:var(--紙);font-weight:400} .押.薄:hover{border-color:var(--紙);color:var(--白)}
.押.小{padding:9px 14px;font-size:11px;letter-spacing:.22em}
.印{display:inline-flex;align-items:center;gap:10px;font:600 11px/1.3 var(--和);letter-spacing:.22em;color:var(--紙);text-decoration:none;transition:color .3s,gap .3s}
.印:hover{color:var(--黄);gap:16px}
.丸押{width:44px;height:44px;border-radius:50%;border:1px solid var(--紙);background:none;color:var(--紙);display:inline-grid;place-items:center;cursor:pointer;transition:border-color .3s,color .3s,transform .3s}
.丸押:hover{border-color:var(--黄);color:var(--黄);transform:scale(1.06)} .丸押 svg{width:16px;height:16px}
svg.線画{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}

/* 札 */
.札小{display:inline-flex;align-items:center;gap:8px;font:11px/1 var(--和);letter-spacing:.2em;color:var(--淡灰);border:1px solid var(--線);padding:7px 12px;white-space:nowrap}
.札小::before{content:"";width:5px;height:5px;border:1px solid currentColor;transform:rotate(45deg)}
.札小.動::before{background:var(--数);border-color:var(--数);animation:菱回 4s linear infinite}
.札小.式::before{background:var(--語);border-color:var(--語)}
.札小.音::before{border-radius:50%;transform:none;animation:呼吸 1.2s ease-in-out infinite}
.札小.署{color:var(--黄);border-color:rgba(94,234,212,.4)} .札小.署::before{background:var(--黄);border-color:var(--黄)}

/* 線と案内 */
.生 .案内 i,.案内.生 i{transform-origin:top;animation:引縦 1s .2s cubic-bezier(.2,.7,.2,1) both}
.案内 s,.線菱 s{animation:菱回 6s linear infinite}
.生 .表 > *,.生 .罫 > *{animation:字浮 .6s both}
.生 .表 > :nth-child(3),.生 .表 > :nth-child(4){animation-delay:.12s} .生 .表 > :nth-child(5),.生 .表 > :nth-child(6){animation-delay:.24s} .生 .表 > :nth-child(7),.生 .表 > :nth-child(8){animation-delay:.36s} .生 .表 > :nth-child(n+9){animation-delay:.48s}

/* 柱 */
.生 .柱 > div,.柱 > div.生{animation:字浮 .8s both} .柱 > div:nth-child(2).生{animation-delay:.12s} .柱 > div:nth-child(3).生{animation-delay:.24s}
.柱 .浮.生{animation:字浮 .8s .12s both,縁光 4s 1s ease-in-out infinite}

/* 判・影字 */
.判{width:78px;height:78px;border:1.5px solid var(--朱);color:var(--朱);display:grid;place-items:center;font:600 22px/1 var(--和);letter-spacing:.05em;transform:rotate(-4deg);border-radius:3px;position:relative;opacity:.9}
.判::after{content:"";position:absolute;inset:4px;border:.5px solid rgba(201,86,63,.45)}
.判.金{border-color:var(--黄);color:var(--黄)} .判.金::after{border-color:rgba(214,169,74,.45)}
.判.小{width:44px;height:44px;font-size:13px}
.生 .判,.判.生{animation:判押 .7s cubic-bezier(.2,.8,.2,1) both}
.影字{animation:影浮 8s ease-in-out infinite}

/* 待ち・報せ */
.待{color:var(--灰);font-size:12.5px;letter-spacing:.06em;display:inline-flex;align-items:center;gap:12px}
.待::before{content:"";width:5px;height:5px;border:1px solid var(--灰);transform:rotate(45deg);animation:呼吸 1.4s ease-in-out infinite}
.報{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border:1px solid var(--線);font-size:12.5px;color:var(--淡灰);background:var(--墨);animation:字浮 .6s both}
.報::before{content:"";width:5px;height:5px;border:1px solid var(--灰);transform:rotate(45deg);margin-top:9px;flex:none}
.報.誤{border-color:rgba(201,86,63,.5)} .報.誤::before{background:var(--朱);border-color:var(--朱);animation:呼吸 1s ease-in-out 3}
.報.吉{border-color:rgba(127,201,182,.4)} .報.吉::before{background:var(--数);border-color:var(--数)}
.欄.誤{border-color:var(--朱);animation:揺欄 .5s both}

/* 落とし場 */
.落,.落とし{border:1px dashed var(--案内) !important;display:grid;place-items:center;gap:8px;color:var(--灰);text-align:center;transition:border-color .3s,color .3s;cursor:pointer}
.落:hover,.落.上,.落とし:hover,.落とし.上{border-color:var(--黄) !important;color:var(--紙)}
.落 svg,.落とし svg{width:22px;height:22px;animation:漂 2.2s ease-in-out infinite}

/* 頭のナビにも部品の頁 */
.頁頭 nav a,.頭 nav a{position:relative}
.頁頭 nav a::after,.頭 nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--黄);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.頁頭 nav a:hover::after,.頭 nav a:hover::after,.頁頭 nav a[aria-current]::after{transform:scaleX(1)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}.動く .現れ:not(.生){opacity:1;transform:none}}