:root{
  --sign:#FFC93C; --ink:#2D2A26; --paper:#FFF6DF; --wood:#C8894B; --cone:#FF7A2F; --sky:#8FD3F4;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* ダークモードには対応しない ( 本人の指定 2026-09-26 )。OS の設定に関係なく同じ色で表示する。ブラウザの自動ダークは index.html の color-scheme で止める */
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
/* fixed 要素・ボタン上も明示してダブルタップ拡大を抑止する。 */
html,body,body *{touch-action:manipulation}
/* 拡大を検知した時点で、次のピンチ開始前に全領域の縮小を許可する。
   等倍へ戻ると変数が消え、各領域のスクロール・ゲーム操作の制限に戻る。 */
html.zoom-recovery{--touch-action-override:manipulation}
body{margin:0;height:100%;overflow:hidden;background:#8FD3F4;color:var(--ink);
  font-family:'M PLUS Rounded 1c',system-ui,-apple-system,'Hiragino Maru Gothic ProN',sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
canvas#c{position:fixed;top:0;left:0;width:100%;height:100%;display:block;touch-action:var(--touch-action-override,none)}
.disp{font-family:'Dela Gothic One','M PLUS Rounded 1c',sans-serif;font-weight:400}
.hidden{display:none!important}
.layer{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;touch-action:var(--touch-action-override,none)}
.screen{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-right,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px) calc(env(safe-area-inset-left,0px) + 16px)}
.stroke{text-shadow:
  3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),
  2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),
  0 7px 0 var(--ink)}

/* buttons */
.btn{font:800 18px/1 'M PLUS Rounded 1c',sans-serif;color:var(--ink);background:var(--sign);border:3px solid var(--ink);
  border-radius:12px;padding:14px 26px;box-shadow:0 5px 0 var(--ink);cursor:pointer;transition:transform .07s,box-shadow .07s;pointer-events:auto}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn.sub{background:var(--paper)}
.btn.big{font-size:24px;padding:18px 44px}
.btn:focus-visible,.card:focus-visible,.seg button:focus-visible,.iconbtn:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* title */
#title{justify-content:center;gap:30px}
.logoWrap{text-align:center;transform:rotate(-3deg)}
.logoSub{margin-top:4px;display:inline-block;background:var(--ink);color:var(--paper);font-weight:800;font-size:clamp(15px,3.4vw,22px);padding:6px 16px;border-radius:6px;letter-spacing:.12em}
/* タイトルロゴ：image/logo-title.svg を js/logo.js がパーツごとに並べて動かす。読み込めないときは文字で出す */
.tlogo{--lw:min(88vw,620px,70vh);position:relative;width:var(--lw);aspect-ratio:1027.41/558.11;margin:0 auto;font-weight:400}
.tlTxt{display:grid;place-items:center;height:100%;font-size:calc(var(--lw)*.17);line-height:1.1;color:var(--sign)}
/* 文字のロゴは、SVG が読み込めなかったとき ( .fail ) だけ見せる。ふだんは読み上げ用に残す */
.tlogo:not(.fail) .tlTxt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tl-stage{position:absolute;inset:0}
.tl-defs{position:absolute;width:0;height:0;overflow:hidden}
.tl-part{position:absolute;overflow:visible;transform-origin:50% 100%}
.tl-part[data-p^="p"]{transform-origin:50% 0}
.tl-part[data-p^="n"]{transform-origin:50% 50%}
.tl-hammer{position:absolute;left:0;top:0;width:16%;overflow:visible;transform-origin:90% 35%;opacity:0;pointer-events:none}
.tl-spark{position:absolute;width:11%;aspect-ratio:1;overflow:visible;pointer-events:none;transform:translate(-50%,-50%)}
.tl-ton{position:absolute;font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:calc(var(--lw)*.046);line-height:1;color:var(--paper);white-space:nowrap;pointer-events:none;
  text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 4px 0 var(--ink)}
.tl-ton.last{font-size:calc(var(--lw)*.062);color:var(--sign)}
.tlogo.idle{animation:tlFloat 3.8s ease-in-out infinite}
@keyframes tlFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.8%) rotate(.7deg)}}
@media (prefers-reduced-motion: reduce){.tlogo.idle{animation:none}}
@media (max-height:520px){.cupBtns{flex-wrap:nowrap}.cupBtn b{font-size:18px}#title{gap:10px}.tlogo{--lw:min(88vw,620px,58vh)}.logoSub{font-size:14px;padding:4px 12px}#title .btn.big{font-size:20px;padding:12px 36px}#title .btn.sub{padding:10px 20px;font-size:16px}#btnTut{margin-top:4px}}
/* タイトルの SOUND ON/OFF（開始前に音の設定が分かり、切り替えられる：GAME_AUDIO_RULES 2.5）。主操作より控えめに */
.soundBtn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);display:flex;align-items:center;gap:6px;
  font:800 12px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:.06em;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:999px;
  padding:7px 12px 7px 9px;box-shadow:0 3px 0 var(--ink);cursor:pointer;pointer-events:auto;transition:transform .07s,box-shadow .07s}
.soundBtn svg{width:18px;height:18px;flex:none}
.soundBtn b{font-weight:800;color:#1f5fa8}
.soundBtn.off{background:#e9e1cc}.soundBtn.off b{color:#8a8175}
.soundBtn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.soundBtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.credit{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);margin:0;text-align:center;font-size:12px;font-weight:800;color:#fff;letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.credit a{color:inherit;text-decoration:none;pointer-events:auto}
.credit .credit-more{display:inline-block;white-space:nowrap}
.credit a:hover{text-decoration:underline;text-underline-offset:3px}
.credit a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:3px}

/* select */
#select{justify-content:space-between}
.selHead{text-align:center}
.selHead h2{margin:4px 0 0;font-size:clamp(26px,6vw,40px);color:var(--sign)}
.selBottom{width:100%;max-width:900px;display:flex;flex-direction:column;gap:12px;align-items:center}
#cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%}
@media (max-width:680px){#cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.card{font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:10px 12px 11px;text-align:left;cursor:pointer;
  box-shadow:0 3px 0 var(--ink);transition:transform .1s,box-shadow .1s,background .1s;pointer-events:auto}
.card.on{background:var(--sign);transform:translateY(-4px);box-shadow:0 7px 0 var(--ink)}
.card .nm{display:flex;align-items:center;gap:7px;font-size:18px;font-weight:800;line-height:1.2}
.card .nm i{width:14px;height:14px;border-radius:50% 50% 3px 3px;border:2px solid var(--ink);flex:none}
.card .tp{font-size:12px;font-weight:800;margin:2px 0 6px}
.stat{display:grid;grid-template-columns:4.6em 1fr;align-items:center;gap:6px;font-size:11px;font-weight:800;margin-top:3px}
.bar{display:flex;gap:2px}
.bar b{flex:1;height:8px;border:2px solid var(--ink);border-radius:2px}
.bar b.f{background:var(--ink)}
.card .ds{font-size:11.5px;line-height:1.45;margin-top:7px;font-weight:500}
@media (max-width:680px){.card .ds{display:none}.card{padding:8px 10px}}
.selRow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.seg{display:flex;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--paper);box-shadow:0 3px 0 var(--ink)}
.seg button{font:800 14px/1 'M PLUS Rounded 1c',sans-serif;color:var(--ink);background:transparent;border:0;padding:12px 13px;cursor:pointer;pointer-events:auto}
.seg button+button{border-left:2px solid var(--ink)}
.seg button.on{background:var(--ink);color:var(--sign)}
.howto{margin:0;font-size:11.5px;line-height:1.6;font-weight:800;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.45);max-width:60em}

/* panels */
.panel{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:0 7px 0 var(--ink);
  padding:30px 22px 20px;width:min(460px,100%);margin:auto;text-align:center;overflow:hidden;pointer-events:auto}
.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;border-bottom:3px solid var(--ink);
  background:repeating-linear-gradient(-45deg,var(--sign) 0 12px,var(--ink) 12px 24px)}
.panel h3{margin:6px 0 2px;font-size:clamp(32px,9vw,52px);line-height:1.15;color:var(--sign);overflow-wrap:anywhere}
#resTitle{display:block;text-align:center;margin:10px auto 14px;position:relative}
#resTitle small{display:block;text-align:center;font-size:.48em;line-height:1.35;margin-bottom:4px}
.panel .subt{font-weight:800;font-size:14px;margin:10px 0 12px}
.btnCol{display:flex;flex-direction:column;gap:12px;margin-top:16px;align-items:stretch}
#resPhoto{margin:8px auto 4px;background:#fff;padding:8px 8px 10px;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);transform:rotate(-2deg);width:min(78vw,300px)}
#resPhoto img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#cfe8f3}
#resPhoto figcaption{display:block;margin-top:6px;font-weight:800;text-align:left}
#resPhoto b{display:block;font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:17px;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere}
#resPhoto span{display:block;font-size:11px;opacity:.7;text-align:right;margin-top:2px}
#resList{list-style:none;margin:6px 0 0;padding:0;text-align:left}
#resList li{display:grid;grid-template-columns:2.2em 1fr auto;grid-template-areas:'rk who pt' 'rk tm tm';column-gap:8px;row-gap:3px;align-items:center;padding:9px 8px;border-bottom:2px dashed rgba(45,42,38,.25);font-weight:800;font-size:15px}
#resList li.me{background:rgba(255,201,60,.45);border-radius:8px}
#resList .rk{grid-area:rk;font-family:'Dela Gothic One',sans-serif;font-size:22px;text-align:center}
#resList .tm{grid-area:tm;font-size:12px;line-height:1.5;opacity:.78}
#resList .tm b{display:block;font-weight:800}
#resList .pt{grid-area:pt;font-size:15px;text-align:right;white-space:nowrap}
#resList .pt em{font-style:normal;color:#b07800;margin-left:2px}
#resList .tm em.neg{font-style:normal;color:#d8322b}
#resList .who{grid-area:who;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:16px}
#resList .who i{width:12px;height:12px;border-radius:50% 50% 3px 3px;border:2px solid var(--ink)}

/* HUD */
#topbar{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 10px);display:flex;justify-content:space-between;align-items:flex-start}
#stageSign{background:var(--sign);border:3px solid var(--ink);border-radius:10px;padding:5px 12px 6px;box-shadow:0 3px 0 var(--ink);display:flex;gap:12px;align-items:baseline}
#stageName{font-weight:800;font-size:13px}
#timer{font-family:'Dela Gothic One',sans-serif;font-size:18px;font-variant-numeric:tabular-nums}
#timer.hurry{color:#d8322b}
/* 音・一時停止のボタンは常に右上 ( 式の3分割でステージ名の札を隠すと左へ寄り、1枚目の小窓の名札の裏に入っていた ) */
#topBtns{display:flex;gap:8px;margin-left:auto}
/* 早送り・わたり初め式のスキップ：長押しで飛ばす ( うっかりタップで飛ばない )。押している間だけ左から黄色が満ち、離すと戻る */
.holdSkip{position:relative;display:none;overflow:hidden;align-items:center;gap:6px;pointer-events:auto;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:5px 16px;font:inherit;font-weight:800;font-size:14px;letter-spacing:.04em;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:var(--touch-action-override,none)}
.holdSkip.show{display:inline-flex}
.holdSkip .fill{position:absolute;inset:0;background:var(--sign);transform-origin:left center;transform:scaleX(var(--p,0))}
.holdSkip .lb,.holdSkip kbd{position:relative}
.holdSkip kbd{font-family:inherit;font-weight:800;font-size:11px;line-height:1.4;background:var(--ink);color:var(--paper);border-radius:5px;padding:0 5px}
body.touch .holdSkip kbd{display:none}
#msgs>#holdSkip{max-width:100%}
/* スキップ中は画面を暗くして「スキップ中」。そのあいだ見えないところで一気に進める */
#skipCover{position:absolute;inset:0;display:none;place-items:center;background:rgba(45,42,38,.6);pointer-events:none;z-index:6}
#skipCover.on{display:grid}
#skipCover b{color:var(--paper);font-size:clamp(24px,6vw,40px);letter-spacing:.12em;animation:ffBlink 1s steps(2) infinite}
/* ゴールしたあとは操作しないので、操作ボタンと操作ガイドをしまい、お知らせの列を下へ ( スキップのボタンを押しやすく ) */
body.touch.playing.pdone #touch,body.pdone #keyGuide{display:none!important}
.iconbtn{width:42px;height:42px;border-radius:10px;border:3px solid var(--ink);background:var(--paper);box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;cursor:pointer;pointer-events:auto;padding:0;color:var(--ink)}
.iconbtn svg{width:20px;height:20px}
#board{position:absolute;top:calc(env(safe-area-inset-top,0px) + 58px);left:calc(env(safe-area-inset-left,0px) + 10px);display:flex;flex-direction:column;gap:3px}
#board .row{display:flex;align-items:center;gap:6px;background:rgba(255,246,223,.88);border:2px solid var(--ink);border-radius:7px;padding:3px 8px 3px 5px;font-size:12px;font-weight:800;min-width:150px}
#board .row.me{background:var(--sign)}
#board .row i{width:12px;height:12px;border-radius:50% 50% 3px 3px;border:2px solid var(--ink);flex:none}
#board .row .nm{width:4.4em;white-space:nowrap;overflow:hidden;text-overflow:clip}
#board .bar{flex:1;height:9px;border:1.5px solid var(--ink);border-radius:3px;background:rgba(255,255,255,.6);overflow:visible;min-width:56px;position:relative}
#board .bar b{display:block;height:100%;border-radius:2px}
#board .ev{position:absolute;right:-2px;top:-9px;font-style:normal;font-size:9.5px;line-height:1;background:var(--ink);color:#fff;border-radius:4px;padding:2px 4px}
#board .ev:empty{display:none}#board .ev.bad{background:#d8322b}#board .ev.ok{background:#1f9a4a}#board .ev.rush{background:#ff7a1f;animation:evRush .5s steps(2) infinite}
@keyframes evRush{50%{opacity:.6}}
@media (prefers-reduced-motion: reduce){#board .ev.rush{animation:none}}
#board .bar b{display:block;height:100%;width:0;transition:width .25s;border-right:1.5px solid var(--ink)}
#pip{position:absolute;top:calc(env(safe-area-inset-top,0px) + 66px);right:calc(env(safe-area-inset-right,0px) + 10px);width:clamp(130px,34vw,230px);aspect-ratio:4/3;border:3px solid var(--ink);border-radius:5px;box-shadow:0 3px 0 var(--ink);opacity:0;transform:scale(.8);transform-origin:top right;transition:opacity .15s,transform .15s;pointer-events:none}
#pip.show{opacity:1;transform:none}
#react{position:fixed;z-index:8;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 10px);width:clamp(130px,36vw,220px);aspect-ratio:4/3;border:4px solid var(--ink);border-radius:8px;box-shadow:0 4px 0 var(--ink);opacity:0;transform:scale(.6) rotate(6deg);transform-origin:top right;transition:opacity .15s,transform .25s cubic-bezier(.2,1.6,.4,1);pointer-events:none}
#react.show{opacity:1;transform:rotate(-2deg)}
#react b{position:absolute;left:-6px;bottom:-14px;background:var(--sign);color:var(--ink);border:2px solid var(--ink);border-radius:8px;padding:2px 8px;font-weight:800;font-size:12px;white-space:nowrap}
/* わたり初め式のあいだは右下へ ( 右上だと3分割で右のレーンの札が隠れ、音と一時停止のボタンも重なっていた。出ている途中で3分割とスローが切り替わっても動かないよう、出すときに決める。長押しスキップと名前の札の分だけ上げる ) */
#react.low{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);transform-origin:bottom right}
#ticker{position:absolute;left:calc(env(safe-area-inset-left,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 150px);display:flex;flex-direction:column;gap:3px;pointer-events:none;max-width:52vw}
#ticker .tk{display:flex;align-items:center;gap:6px;background:rgba(45,42,38,.78);color:#fff;font-weight:800;font-size:11.5px;padding:3px 9px;border-radius:7px;animation:tkIn .25s ease-out;transition:opacity .4s,transform .4s;white-space:nowrap}
#ticker .tk i{width:8px;height:8px;border-radius:50%;flex:none}
#ticker .tk.out{opacity:0;transform:translateX(-10px)}
@keyframes tkIn{0%{opacity:0;transform:translateX(-12px)}100%{opacity:1;transform:none}}
.pop.far{transform-origin:center;font-size:.72em;opacity:.85}
body.splitting #ticker,body.cer #ticker{display:none}
#tut{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 58px);transform:translateX(-50%);width:min(92vw,520px);background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);padding:8px 12px;display:none;pointer-events:none;text-align:center}
#tut.show{display:block}
#tut b{display:block;font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:14px;color:#1f5fa8}
#tut span{display:block;font-weight:800;font-size:14px;line-height:1.5;margin-top:2px}
body.tut #board,body.tut #timer{visibility:hidden}
#btnTut,#btnCoop{margin-top:10px}
/* タイトルのカップ選び：2つのボタン。どきどきカップは色を変えて見分けやすく */
.cupBtns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px)}
#title .btn.cupBtn{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:11em;padding:14px 22px}
.cupBtn b{font-size:22px;line-height:1.1;font-weight:800}
.cupBtn small{font-size:12px;font-weight:800;letter-spacing:.04em;opacity:.78}
.cupBtn[data-cup="1"]{background:#FF9A4D}
.selCup{margin:6px 0 0;display:inline-block;background:var(--ink);color:var(--paper);font-weight:800;font-size:13px;padding:4px 12px;border-radius:6px;letter-spacing:.08em}
.selCup:empty{display:none}
@media (max-height:520px){#title .btn.cupBtn{padding:9px 18px;gap:3px}}
#btnCoop[hidden]{display:none!important}
#split{position:fixed;inset:0;display:none;pointer-events:none;z-index:2}
#split.show{display:block}
#split{z-index:7}
body.cer #board{display:none!important}
body.splitting #board,body.splitting #combo,body.splitting #bpChip,body.splitting #stageSign,body.splitting #pip,body.splitting #wind,body.splitting #ffChip,body.cer #touch,body.cer #hint,body.cer #pip,body.cer #combo{display:none!important}
#split .pane{position:fixed;box-sizing:border-box;overflow:hidden}
#split .pane:not(.first){border-left:3px solid var(--ink)}#split .pane.port:not(.first){border-left:0;border-top:3px solid var(--ink)}
#split .hd{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:6px;background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:2px 9px;font-weight:800;font-size:13px}
#split .pane.me .hd{background:var(--sign)}
#split .pane.first.port .hd{top:calc(env(safe-area-inset-top,0px) + 8px)}
#split .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);flex:none}
#split .chips{position:absolute;left:8px;top:40px;display:flex;flex-wrap:wrap;gap:4px;max-width:calc(100% - 16px)}
#split .pane.first.port .chips{top:calc(env(safe-area-inset-top,0px) + 40px)}
#split .chips span{background:rgba(255,248,230,.94);border:2px solid var(--ink);border-radius:999px;padding:1px 8px;font-weight:800;font-size:11.5px;white-space:nowrap}
#split .chips span:empty{display:none}
#split .chips span.neg{background:#ffd9d3;color:#b0231c}
#split .flash{position:absolute;inset:0;background:#e0302a;opacity:0}
#split .flash.go{animation:paneFlash .6s ease-out}@keyframes paneFlash{0%{opacity:.35}100%{opacity:0}}
#ffChip{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 60px);transform:translateX(-50%);background:var(--sign);color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:4px 16px;font-weight:800;font-size:15px;letter-spacing:.08em;opacity:0;transition:opacity .2s;pointer-events:none}
#ffChip.show{opacity:1;animation:ffBlink 1s steps(2) infinite}
@keyframes ffBlink{50%{opacity:.6}}
#bpChip{position:absolute;right:calc(env(safe-area-inset-right,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 176px);background:#1f5fa8;color:#fff;border:3px solid var(--ink);border-radius:10px;padding:3px 10px;font-weight:800;opacity:0;transition:opacity .2s;pointer-events:none}
#bpChip.show{opacity:1}
#bpChip span{font-size:11px;margin-right:6px}
#bpChip b{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:20px}
#cine{position:absolute;inset:0;pointer-events:none;z-index:5}
#cine::before,#cine::after{content:"";position:absolute;left:0;right:0;height:11vh;background:#111;transition:transform .25s ease-out}
#cine::before{top:0;transform:translateY(-100%)}#cine::after{bottom:0;transform:translateY(100%)}
#cine.on::before,#cine.on::after{transform:none}
#cine span{position:absolute;left:calc(env(safe-area-inset-left,0px) + 14px);bottom:calc(11vh + 10px);color:#fff;font-weight:800;font-size:13px;letter-spacing:.12em;padding:3px 10px;border-radius:8px;opacity:0;transition:opacity .2s;text-shadow:0 2px 0 #000}
#cine.on span{opacity:.9;animation:cineBlink 1s steps(2) infinite}
/* スーパースローの間は、下の黒帯に半分隠れてしまう「長押しでスキップ」をしまう ( 2〜4秒。Enter の長押しはそのまま使える ) */
#cine.on~#msgs>#holdSkip{visibility:hidden}
/* スーパースローの下の帯に、落ちた理由を字幕で */
#cine .why{position:absolute;z-index:1;left:0;right:0;bottom:0;height:11vh;display:flex;align-items:center;justify-content:center;padding:0 16px env(safe-area-inset-bottom,0px);box-sizing:border-box;color:#fff;font-weight:800;font-size:clamp(14px,1.6vh + 8px,22px);letter-spacing:.06em;opacity:0;transition:opacity .2s}
#cine.on .why{opacity:1;transition-delay:.2s}
#cine .why:empty{display:none}
@keyframes cineBlink{50%{opacity:.35}}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}
#flash.go{animation:flashGo .45s ease-out}
@keyframes flashGo{0%{opacity:.85}100%{opacity:0}}
#wipe{position:fixed;inset:-10%;z-index:9;pointer-events:none;background:repeating-linear-gradient(-45deg,var(--sign) 0 46px,var(--ink) 46px 92px);transform:translateX(-120%);display:grid;place-items:center}
#wipe span{font-family:'Dela Gothic One',sans-serif;font-size:clamp(34px,10vw,64px);color:var(--paper);background:var(--ink);padding:6px 24px;border-radius:10px;border:4px solid var(--paper)}
#wipe.in{transform:translateX(0);transition:transform .38s cubic-bezier(.6,0,.4,1)}
#wipe.out{transform:translateX(120%);transition:transform .42s cubic-bezier(.6,0,.4,1)}
#combo{position:absolute;left:calc(env(safe-area-inset-left,0px) + 10px);top:calc(env(safe-area-inset-top,0px) + 232px);background:var(--ink);color:var(--paper);border-radius:10px;padding:4px 10px 6px;font-weight:800;opacity:0;transform:scale(.7);transform-origin:left top;transition:opacity .15s,transform .18s;pointer-events:none;min-width:84px}
#combo.show{opacity:1;transform:scale(1)}
#combo.pop{transform:scale(1.18)}
#combo b{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:22px;color:var(--sign);margin-right:4px}
#combo span{font-size:11px}
#combo i{display:block;height:4px;border-radius:2px;background:var(--sign);margin-top:3px;transform-origin:left;transform:scaleX(0)}
/* 号外は3分割の札・区切り線 ( #split z-index:7 ) やあちゃーワイプより手前。横向きの低い画面では高さに合わせて小さく ( 2026-09-25 スマホの3分割で札と線が重なっていた ) */
#news{position:absolute;left:50%;top:44%;width:min(80vw,340px,76vh);background:#f2ece0;color:#231f1a;border:2px solid #231f1a;box-shadow:0 10px 0 rgba(0,0,0,.25);padding:10px 12px 12px;transform:translate(-50%,-50%) rotate(-900deg) scale(.05);opacity:0;pointer-events:none;z-index:8}
#news.show{animation:newsIn .75s cubic-bezier(.2,.9,.3,1.1) forwards}
@keyframes newsIn{0%{opacity:1;transform:translate(-50%,-50%) rotate(-900deg) scale(.05)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-4deg) scale(1)}}
#news .mast{display:flex;justify-content:space-between;align-items:center;border-bottom:3px double #231f1a;padding-bottom:4px;font-weight:800;font-size:12px;letter-spacing:.12em}
#news .mast b{background:#d8322b;color:#fff;font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:15px;padding:0 8px;letter-spacing:.1em;transform:rotate(3deg)}
#news h2{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(20px,6.4vw,28px);line-height:1.15;margin:8px 0 4px}
#news .sub{font-weight:800;font-size:12px;margin-bottom:6px}
#news img{display:block;width:100%;aspect-ratio:3/2;border:1px solid #231f1a;filter:contrast(1.05)}
#news .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 8px;margin-top:7px}
#news .cols i{height:4px;background:repeating-linear-gradient(90deg,#9a938a 0 70%,transparent 70% 100%);background-size:26px 4px;border-radius:2px}
#news .meta{font-size:10px;opacity:.65;margin-top:6px;text-align:right}
/* 号外が出ているあいだは吹き出しを隠す ( 吹き出しは別の層なので号外の上に出てしまう ) */
#pops{transition:opacity .2s}
body.newsOn #pops{opacity:0}
@media (max-height:520px){#news{top:50%}}
#wind{position:absolute;top:calc(env(safe-area-inset-top,0px) + 60px);left:50%;transform:translateX(-50%) scale(.8);background:var(--ink);color:#fff;font-weight:800;font-size:14px;letter-spacing:.06em;padding:4px 14px;border-radius:999px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}
#wind.show{opacity:1;transform:translateX(-50%) scale(1)}
#wind.warn{background:#ffc93c;color:var(--ink);animation:windblink .4s steps(2) infinite}
@keyframes windblink{50%{opacity:.55}}
#pip span[data-st=ok]{background:#3ddc6b}
#pip span[data-st=loose]{background:#ffd23c}
#pip span[data-st=none]{background:#ff7a6b}
#pip span{position:absolute;left:5px;top:5px;background:var(--sign);color:var(--ink);font-weight:800;font-size:11px;line-height:1.4;padding:0 7px;border-radius:5px;border:2px solid var(--ink)}
#select .selRow{flex-wrap:wrap;justify-content:center}
#select{overflow-y:auto;touch-action:var(--touch-action-override,pan-y);overscroll-behavior:contain}
#select *{touch-action:var(--touch-action-override,pan-y)}
#select .selBottom{flex-shrink:0;margin-top:auto;padding-bottom:6px}
.card .ds{font-size:11px;line-height:1.45}
@media (max-width:480px){.selRow{gap:8px}.seg button{font-size:12px;padding:8px 9px}#select .btn{padding:12px 18px}}
/* キャラ選択：スマホはカルーセル */
.carWrap{position:relative;width:100%}.carBtn{display:none}#carDots{display:none}
@media (max-width:680px){
  #cards{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:4px 9%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #cards::-webkit-scrollbar{display:none}
  #cards,#cards *{touch-action:var(--touch-action-override,pan-x pan-y)!important}
  #cards .card{flex:0 0 82%;scroll-snap-align:center;opacity:.55;transform:scale(.94);transition:opacity .2s,transform .2s}
  #cards .card.on{opacity:1;transform:none}
  .carBtn{display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;border:3px solid var(--ink);background:var(--paper);font:800 24px/1 'M PLUS Rounded 1c',sans-serif;color:var(--ink);box-shadow:0 3px 0 var(--ink);padding:0 0 3px;pointer-events:auto}
  #carPrev{left:2px}#carNext{right:2px}
  #carDots{display:flex;justify-content:center;gap:8px;margin-top:-4px}
  #carDots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:var(--paper)}
  #carDots i.on{background:var(--c)}
}
/* ステージ選び ( キャラ選択の画面 )：紙と墨の札。キャラのカードと見分けがつくよう横長にして、番号は丸い印。
   選んでいるものは黄色で少し浮く。クリア済みは右上に「クリア」の札、まだ選べないものは鍵と点線 */
.stLabel{margin:2px 0 -4px;font-size:12px;font-weight:800;letter-spacing:.14em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.stagePick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;width:100%;max-width:820px}
.stBtn{position:relative;display:flex;align-items:center;gap:9px;min-width:0;font:inherit;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:6px 14px 6px 6px;text-align:left;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .1s,box-shadow .1s,background .1s;pointer-events:auto}
.stBtn .no{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--sign);font-family:'Dela Gothic One','M PLUS Rounded 1c',sans-serif;font-weight:400;font-size:17px;line-height:1}
.stBtn .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.stBtn .nm{font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stBtn .bt{display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:800;opacity:.7;white-space:nowrap;overflow:hidden;max-width:100%}
.stBtn .lk{width:11px;height:11px;flex:none}
.stBtn .ok{position:absolute;top:-10px;right:12px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.08em;line-height:1;background:var(--ink);color:var(--sign);border-radius:999px;padding:4px 8px}
.stBtn.on{background:var(--sign);transform:translateY(-3px);box-shadow:0 6px 0 var(--ink)}
.stBtn.on .bt{opacity:.85}
.stBtn.lock{cursor:not-allowed;background:#e9e1cc;color:#6f675c;border-style:dashed;border-color:#8a8175;box-shadow:none}
.stBtn.lock .no{background:#b3aa9b;color:#f3ecdb}
.stBtn:not(.lock):hover{transform:translateY(-2px)}
.stBtn.on:hover{transform:translateY(-3px)}
.stBtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:680px){.stagePick{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}.stBtn{border-radius:16px;padding:6px 10px 6px 6px}.stBtn .nm{font-size:12px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}}
#board .row{transition:transform .38s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
#board .row.up{box-shadow:0 0 0 2px #fff}
#board .row.pass{box-shadow:0 0 0 3px #fff,0 0 16px 4px var(--sign)}
#board .row.up .bar{box-shadow:0 0 0 2px #fff,0 0 12px 3px var(--sign)}
#board .st{font-size:11px;min-width:2.4em;text-align:right}
#toast{position:absolute;top:calc(env(safe-area-inset-top,0px) + 98px);left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);font-weight:800;font-size:14px;padding:7px 14px;border-radius:8px;opacity:0;transition:opacity .2s;white-space:nowrap}
#toast.show{opacity:1}
/* お知らせは長い文でも画面に収める ( 折り返す ) */
#toast{white-space:normal;width:max-content;max-width:min(92vw,560px);text-align:center;line-height:1.45}
/* お知らせ類 ( ヒント・お知らせ・風/大波/潮の予告・早送り ) は、1本の列に下から積む ( 同時に出ても重ならない )。見えていないものは場所を取らない。
   PC は操作ガイドのすぐ上、タッチ操作はボタンの上。以前は位置が固定で、タルの警告とヒント、風の予告と順位表・早送りが重なっていた */
#msgs{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 48px);display:flex;flex-direction:column-reverse;align-items:center;gap:6px;pointer-events:none;padding:0 10px}
#msgs>#hint,#msgs>#toast,#msgs>#wind,#msgs>#ffChip{position:static;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin:0;max-width:100%}
#msgs>#wind.show{transform:none}
#msgs>#toast:not(.show),#msgs>#wind:not(.show),#msgs>#ffChip:not(.show){display:none}
body.touch #msgs{bottom:calc(env(safe-area-inset-bottom,0px) + 212px)}
/* 設計図の札は、釘を打つときに右上に出る手元ワイプの下へ */
#bpChip{top:calc(env(safe-area-inset-top,0px) + 74px + clamp(130px,34vw,230px) * .75)}
/* スマホ横：高さが足りないので、お知らせの列は下端の「左の順位表の列」と「右のボタン群」の間に置く。
   手元ワイプは小さく、設計図の札は上の段へ ( 右のボタン群と重ならないように ) */
@media (orientation:landscape) and (max-height:520px){
  body.touch #msgs{bottom:calc(env(safe-area-inset-bottom,0px) + 10px);left:calc(env(safe-area-inset-left,0px) + 200px);right:calc(env(safe-area-inset-right,0px) + 226px);padding:0}
  body.touch #pip{width:clamp(110px,32vh,200px)}
  body.touch #bpChip{top:calc(env(safe-area-inset-top,0px) + 10px);right:auto;left:calc(env(safe-area-inset-left,0px) + 232px)}
}
#hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:rgba(45,42,38,.82);color:#fff;font-weight:800;font-size:15px;padding:7px 14px;border-radius:9px;white-space:normal;text-align:center;line-height:1.5;width:max-content;max-width:min(90vw,560px);box-sizing:border-box}
#hint:empty{display:none}
#hint .k{display:inline-block;background:var(--sign);color:var(--ink);border-radius:5px;padding:1px 7px;margin:0 2px;font-size:13px}
body.touch #hint{bottom:calc(env(safe-area-inset-bottom,0px) + 212px);font-size:13px}
/* PC：プレイ中は画面下に操作ガイド（タッチ端末・式・画面分割の間は出さない）。ヒントはその上へ */
#keyGuide{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);transform:translateX(-50%);display:none;gap:6px;white-space:nowrap;pointer-events:none;max-width:calc(100% - 16px)}
body.playing:not(.touch) #keyGuide{display:flex}
body.cer #keyGuide,body.splitting #keyGuide{display:none!important}
#keyGuide span{display:flex;align-items:center;gap:4px;padding:3px 10px 3px 5px;border-radius:999px;background:rgba(45,42,38,.72);color:#fff;font-size:12px;font-weight:800;line-height:1.4}
#keyGuide kbd{font-family:inherit;font-weight:800;font-size:11px;line-height:1.4;background:var(--sign);color:var(--ink);border-radius:5px;padding:0 5px;min-width:1.6em;text-align:center}
#keyGuide b{font-weight:800}
body.playing:not(.touch) #hint{bottom:calc(env(safe-area-inset-bottom,0px) + 48px)}
@media (max-width:900px){#keyGuide{gap:4px}#keyGuide span{font-size:11px;padding:2px 8px 2px 4px}#keyGuide .kg-esc{display:none}}
@media (max-width:640px){#keyGuide .kg-move{display:none}}
#gauge{position:absolute;left:0;top:0;width:96px;height:14px;border:2.5px solid var(--ink);border-radius:5px;background:var(--paper);overflow:hidden;opacity:0;transition:opacity .12s}
#gauge.show{opacity:1}
#gauge .zone{position:absolute;top:0;bottom:0;left:40%;width:20%;background:var(--sign);border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
#gauge .needle{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:var(--cone);border:1px solid var(--ink)}
.pop{position:absolute;left:0;top:0;font-weight:800;font-size:17px;color:#fff;white-space:nowrap;will-change:transform,opacity;
  text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}
.pop.big{font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:26px;color:var(--sign)}
.pop.warn{color:#ffd0c8}
/* 落ちた理由のひとこと：ほかの吹き出しより長めに残し、札にして読みやすく */
.pop.why{z-index:1;font-size:15px;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:3px 12px;text-shadow:none;box-shadow:0 3px 0 rgba(0,0,0,.25)}
#banner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 16px}
#bannerText{font-size:clamp(40px,11vw,100px);line-height:1.12;color:var(--sign);white-space:pre-line;text-align:center}
#bannerSub{font-weight:800;font-size:clamp(14px,3.6vw,20px);background:var(--ink);color:var(--paper);padding:6px 14px;border-radius:8px}
#bannerSub:empty{display:none}
.bump{animation:bump .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{from{transform:scale(.35) rotate(-6deg)}to{transform:scale(1) rotate(0)}}

/* touch */
#touch{position:fixed;left:0;right:0;bottom:0;height:52%;pointer-events:none;display:none}
/* スティックやボタンの上では、ブラウザのスクロール判定を完全に止める ( 途中で操作が切れないように ) */
#touch,#touch *,#hud,#hud *{touch-action:var(--touch-action-override,none)}
body.touch.playing #touch{display:block}
#joyZone{position:absolute;left:0;bottom:0;width:52%;height:100%;pointer-events:auto}
/* 指を置いた場所に出す。座標は画面基準なので fixed ( 以前は absolute で、操作エリアの上端ぶん下にずれて画面の外に描かれていた ) */
#joyBase{position:fixed;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;border:3px solid rgba(45,42,38,.7);background:rgba(255,246,223,.28);display:none}
#joyKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--sign);border:3px solid var(--ink)}
#btns{position:absolute;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:200px;height:186px}
.tb{position:absolute;pointer-events:auto;border-radius:50%;border:3px solid var(--ink);background:var(--paper);box-shadow:0 4px 0 var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:800 11px/1 'M PLUS Rounded 1c',sans-serif;color:var(--ink);padding:0}
.tb svg{width:44%;height:44%}
.tb.down{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
#tbAct{right:0;bottom:0;width:88px;height:88px;background:var(--sign)}
#tbHam{right:96px;bottom:10px;width:80px;height:80px;background:var(--sign)}
#tbRot{right:12px;bottom:100px;width:62px;height:62px}
#result,#pause{overflow-y:auto;overflow-x:hidden;touch-action:var(--touch-action-override,pan-y);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;pointer-events:auto}
#result *,#pause *{touch-action:var(--touch-action-override,pan-y)}
#result .btnCol.lock{pointer-events:none;opacity:.55}
.skipBtn{display:block;margin:0 0 6px auto;font:800 13px/1 'M PLUS Rounded 1c',sans-serif;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:6px 14px;box-shadow:0 2px 0 var(--ink);opacity:0;pointer-events:none;transition:opacity .2s}
.skipBtn.show{opacity:1;pointer-events:auto}
.ffI{width:1.15em;height:.7em;vertical-align:-.02em}
#resPhoto.slam{animation:slam .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slam{0%{transform:scale(2.2) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(-3deg)}}
#resList li{transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .25s}
#resList li.pre{opacity:0;transform:translateX(-30px)}
#resList li.bump .pt em{animation:ptUp .4s ease}#resList li.drop .pt em{animation:ptDn .4s ease}
@keyframes ptUp{40%{transform:scale(1.5);color:#1a9a4a}}@keyframes ptDn{40%{transform:scale(1.4);color:#d8322b}}
#resList .pt em{display:inline-block;font-style:normal}
#resList .rk.flip{animation:rkFlip .36s ease}@keyframes rkFlip{50%{transform:rotateX(90deg)}}
#resList .bd .tag{display:inline-block;font-style:normal;margin-right:6px;animation:tagIn .3s cubic-bezier(.2,1.6,.4,1)}#resList .bd .tag.neg{color:#d8322b}
#resList .bd .tag.tot{color:#1f5fa8}
#resList .rk{white-space:nowrap}
@keyframes tagIn{0%{transform:scale(0);opacity:0}100%{transform:none;opacity:1}}
#resTitle.pop{animation:tPop .55s cubic-bezier(.2,1.8,.4,1)}@keyframes tPop{0%{transform:scale(.3)}100%{transform:none}}
#result .panel,#pause .panel{margin:auto auto 24px;flex-shrink:0}
@media (max-width:480px){.panel{padding:28px 16px 18px}}
.panel .subt small{display:block;font-size:12px;opacity:.8;margin-top:2px}
/* 読み込み中：金づちが釘を打つたびに「トン・テン・かん・てん！」 */
#loading{position:fixed;inset:0;display:grid;place-items:center;z-index:50;color:var(--ink);font-weight:800;transition:opacity .35s;
  background:radial-gradient(120% 80% at 50% 0%,#c8ecfb 0%,#8fd3f4 55%,#79c6ea 100%)}
#loading.out{opacity:0;pointer-events:none}
.ld{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 24px;text-align:center}
.ldArt{width:min(58vw,230px);height:auto;overflow:visible}
.ldArt .ldHamR{transform-box:view-box;transform-origin:141px 45px;animation:ldSwing .8s cubic-bezier(.5,0,.75,.6) infinite}
.ldArt .ldSink{animation:ldSink 3.2s linear infinite}
.ldArt .ldHead{transform-box:fill-box;transform-origin:50% 100%;animation:ldSquash .8s infinite}
.ldArt .ldSpark{transform-box:fill-box;transform-origin:50% 50%;animation:ldSpark .8s infinite}
.ldArt .ldBoard{transform-box:fill-box;transform-origin:50% 100%;animation:ldBoard .8s infinite}
@keyframes ldSwing{0%{transform:rotate(44deg)}38%{transform:rotate(-2deg);animation-timing-function:ease-out}48%{transform:rotate(8deg);animation-timing-function:ease-in-out}100%{transform:rotate(44deg)}}
@keyframes ldSquash{0%,37%{transform:none}42%{transform:scale(1.25,.6)}60%,100%{transform:none}}
@keyframes ldSpark{0%,37%{transform:scale(.3);opacity:0}41%{transform:scale(.9);opacity:1}62%{transform:scale(1.3);opacity:0}100%{opacity:0}}
@keyframes ldBoard{0%,37%{transform:none}42%{transform:scaleY(.94)}56%,100%{transform:none}}
/* 釘は4回で打ち込まれ、少し消えてから元に戻る ( 金づちも一緒に下がる ) */
@keyframes ldSink{0%,9.5%{transform:translateY(0)}10.5%,34.5%{transform:translateY(4px)}35.5%,59.5%{transform:translateY(8px)}60.5%,84.5%{transform:translateY(12px);opacity:1}
  85.5%,93%{transform:translateY(15px);opacity:1}96%{transform:translateY(15px);opacity:0}97%{transform:translateY(0);opacity:0}100%{transform:translateY(0);opacity:1}}
.ldWords{position:relative;height:1.3em;width:10em;font-family:'Dela Gothic One',sans-serif;font-weight:400;font-size:clamp(24px,7vw,34px);line-height:1.3}
.ldWords span{position:absolute;left:0;right:0;top:0;opacity:0;color:var(--sign);animation:ldWord 3.2s infinite;
  text-shadow:3px 0 0 var(--ink),-3px 0 0 var(--ink),0 3px 0 var(--ink),0 -3px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 5px 0 var(--ink)}
.ldWords span:nth-child(1){animation-delay:.3s}.ldWords span:nth-child(2){animation-delay:1.1s}.ldWords span:nth-child(3){animation-delay:1.9s;color:#6fcaf2}.ldWords span:nth-child(4){animation-delay:2.7s;color:#6fcaf2}
@keyframes ldWord{0%{opacity:0;transform:translateY(40%) scale(.5)}4%{opacity:1;transform:translateY(-8%) scale(1.12)}9%{transform:none}20%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-30%)}}
.ldTxt{margin:0;font-size:13px;letter-spacing:.12em}
.ldBar{width:min(52vw,190px);height:14px;border:3px solid var(--ink);border-radius:999px;overflow:hidden;box-shadow:0 3px 0 var(--ink);
  background:repeating-linear-gradient(-45deg,var(--sign) 0 10px,var(--ink) 10px 20px);background-size:28.28px 28.28px;animation:ldBar .8s linear infinite}
@keyframes ldBar{to{background-position:28.28px 0}}
.ldMsg{margin:4px 0 0;font-size:13px;line-height:1.7;max-width:22em}
@media (prefers-reduced-motion: reduce){.ld *{animation:none!important}.ldWords span:nth-child(1){opacity:1}}
@media (prefers-reduced-motion: reduce){.bump{animation:none}}
/* ゴール後と、わたり初め式のあいだは、お知らせの列 ( スキップのボタン ) を下端へ。タッチ操作の位置指定より後に置く */
body.pdone #msgs,body.cer #msgs{bottom:calc(env(safe-area-inset-bottom,0px) + 22px)}
/* 横向きなど背の低い画面では、ポーズのボタンを2列にして1画面に収める ( 画質ボタンを足して5つになったため。以前も4つで少しはみ出してスクロールが要った ) */
@media (max-height:520px){#pause .panel{padding:14px 18px}#pause .panel h3{font-size:26px;margin:0}#pause .btnCol{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}#pause .btnCol .btn{padding:10px 12px;font-size:14px;white-space:nowrap}#pause #btnResume{grid-column:1/-1}}
/* 横向きなど背の低い画面：選択画面の説明文とキャラの紹介文をしまい、「スタート」まで1画面に収める ( 以前は下が切れてスクロールが要った ) */
@media (max-height:520px){#select .howto{display:none}#select .card .ds{display:none}}
/* 横向きなど背の低い画面：ステージ選びは1列4つの細い札に ( 番号と名前だけ ) */
@media (max-height:520px){.stLabel{display:none}.stagePick{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.stBtn{gap:6px;padding:3px 10px 3px 3px}.stBtn .bt{display:none}.stBtn .no{width:24px;height:24px;font-size:13px}.stBtn .nm{font-size:11.5px}.stBtn .ok{top:-8px;font-size:9px;padding:3px 6px}}
/* 背の低い画面の選択画面：見出しを小さく、段の間を詰めて、ステージ選びを足しても「スタート」まで1画面に収める */
@media (max-height:520px){#select .selHead h2{font-size:24px;margin:0}#select .selCup{margin-top:2px;font-size:11px;padding:2px 10px}#select .selBottom{gap:8px}}