/* ======================================================================
   【ファイル】css/hud.css
   【概要】ゲーム中の表示（HUD）の見た目：上部の情報（ステージ・スコア・ノルマ）、お題の字と連鎖、タイピングのお題の箱、仲間の一覧と体力、
     履歴、知らせ、入力欄と案内、ボスのHP、自分のHPとハート（炎上を含む）、奥義・ダッシュのボタン、ボスの呪いの札、動かし方の案内、ポーズ画面。
     前半はもとの落ち着いた見た目、後半の「.hud …」が枠なし・縁取り文字・派手めの見た目で上書きする。
   【主な内容】
     ・.hud / .top / .bottom … 画面の四隅に貼りつく配置
     ・.needk / .combo / .turn / .chain / .qbar … お題・連鎖・番・履歴・ノルマ
     ・.typebox / .hearts / .heal-gauge / .mode-typing … タイピングモードのお題・ハート・回復ゲージ
     ・.party / #myhp / .hpc-hi・mid・lo … 体力のゲージ（残りで色が変わる）
     ・#bar / #word / #preview / .skill-btn / .dash-btn / #fire … 入力欄まわり
     ・#bossbar / .curse / .cchip … ボスのHPと呪いの札
     ・.pause-ov / .pz-* … ポーズ画面と再開のカウントダウン
     ・@media (max-width:640px) … スマホなど、画面がせまいときは小さく・並びを変える
     ・@media (prefers-reduced-motion:reduce) … 動きを減らす設定の端末では、アニメーションを止める
   ====================================================================== */
/* HUD 全体：画面いっぱいに重ね、マウスは下の3D画面に通す。四辺は安全領域ぶん空ける */
.hud{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;gap:12px;
    padding-top:max(12px,env(safe-area-inset-top,0px));padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
    padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* 上の段：左に情報、真ん中にお題、右に仲間 */
.top{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start}
/* パネルの下地 */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* ステージ・スコア */
.stats{display:flex;gap:18px;align-items:flex-end;justify-self:start;flex-wrap:wrap}
.stat b{display:block;font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.05;font-variant-numeric:tabular-nums}
/* 部屋の表示と、控えめなボタン */
.roomtag{font-size:12px;color:var(--mute);width:100%}
.roomtag strong{color:var(--gold);letter-spacing:.1em}
.ghost{pointer-events:auto;font:inherit;font-size:12px;color:var(--mute);background:none;border:1px solid var(--line);border-radius:4px;padding:3px 8px;cursor:pointer}
.ghost:hover,.ghost:focus-visible{color:var(--paper);border-color:var(--gold);outline:none}

/* お題・連鎖のまとまり */
.chaincard{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:min(560px,100%)}
/* お題の字（丸い札。.pop で弾む） */
.need{display:flex;align-items:center;gap:10px}
.needk{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-size:42px;color:var(--ink);background:radial-gradient(circle at 40% 35%,#fff3c4,var(--gold) 60%,#b9862a);box-shadow:0 0 24px rgba(242,193,78,.55)}
.needk.pop{animation:pop .45s ease-out}
@keyframes pop{0%{transform:scale(1.5)}100%{transform:scale(1)}}
/* しりとりの履歴（最後の言葉は目立たせ、切れた言葉は取り消し線） */
.chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;font-size:13px}
.chain li{display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.chain li.last{background:rgba(242,193,78,.16);border-color:var(--line)}
.chain li.broken{text-decoration:line-through;color:var(--shu)}
.chain .dot,.party .dot{width:8px;height:8px;border-radius:50%;flex:none}
.chain .arrow{color:var(--mute);font-size:10px}
/* 連鎖の表示 */
.combo{display:flex;align-items:center;gap:8px;font-size:13px;min-height:18px}
.combo b{font-family:var(--f-display);font-weight:400;color:var(--gold);font-size:18px}
.combo .track{width:120px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.combo .fill{height:100%;background:var(--gold);width:0;transition:width .15s linear}

/* 仲間の一覧と体力（倒れた人は灰色・赤） */
.party{justify-self:end;list-style:none;margin:0;display:flex;flex-direction:column;gap:6px;min-width:150px}
.party li{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;font-size:13px}
.party li.down{color:var(--mute)}
.party small{color:var(--mute)}

/* 下の段：知らせ・ボスのHP・自分のHP・入力欄 */
.bottom{display:flex;flex-direction:column;align-items:center;gap:8px}
#toasts{display:flex;flex-direction:column;align-items:center;gap:6px}
/* 知らせ（.bad は赤いふち） */
.toast{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:14px;animation:tin .25s ease-out}
.toast.bad{border-color:rgba(229,83,59,.6)}
@keyframes tin{from{opacity:0;transform:translateY(6px)}}
/* 入力欄の行（ここだけマウスを受け付ける） */
#bar{pointer-events:auto;display:flex;gap:8px;width:min(620px,100%)}
#bar .field{flex:1;min-width:0;position:relative}
/* 言葉の入力欄 */
#word{width:100%;box-sizing:border-box;font:inherit;font-size:22px;padding:12px 14px;border-radius:6px;border:1px solid var(--line);background:rgba(10,8,26,.85);color:var(--paper);outline:none}
#word:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,193,78,.18)}
#word::placeholder{color:#6f6994}
/* 入力欄の上の案内（.ok 緑 / .ng 赤 / .gold 金） */
#preview{position:absolute;left:12px;bottom:calc(100% + 4px);font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px)}
#preview .ok{color:var(--jade)}#preview .ng{color:var(--shu)}
/* タイピングモード（body の .mode-typing）では、しりとり用の表示を隠して、案内を出す */
.typehint{display:none}
.mode-typing .hud .turn,.mode-typing .hud .combo .odai,.mode-typing .hud .combo .len,.mode-typing .hud .combo .lgauge{display:none}
/* タイピングでは「つぎは○から」の文字は出さず、何連鎖！！だけ同じ場所に出す */
.mode-typing .hud .need>.lbl{display:none}
.mode-typing .hud .needk{visibility:hidden}
.mode-typing .hud .needwrap{height:0}
.mode-typing .hud .typehint{display:block;font-family:var(--f-pop);font-size:14px;color:#6ff2ff;text-shadow:var(--ol3)}
/* タイピングモードのお題：上にローマ字、下にひらがな。打ったところまで金色 */
.typebox{display:none}
.mode-typing .hud .typebox{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1}
.tb-ro{font-family:var(--f-pop);font-size:24px;letter-spacing:.06em;color:#6ff2ff;text-shadow:var(--ol3);min-height:1.1em}
.tb-kana{font-family:var(--f-pop);font-size:20px;color:#fff;text-shadow:var(--ol2);letter-spacing:.06em;min-height:1.1em}
/* 漢字は Dela Gothic One にない字があるので、漢字の多い太字のゴシックで出す */
.tb-kj{font-family:"Zen Kaku Gothic New",var(--f-ui);font-weight:900;font-size:52px;color:#fff;text-shadow:var(--ol3);letter-spacing:.03em;line-height:1.2;text-align:center}
.typebox.long .tb-kj{font-size:clamp(24px,3.6vw,40px);letter-spacing:.01em}
.typebox.xlong .tb-kj{font-size:clamp(20px,2.8vw,32px);letter-spacing:0}
.typebox.xlong .tb-kana{font-size:clamp(13px,1.9vw,17px)}
.typebox.long .tb-ro{font-size:22px}
.typebox.xlong .tb-ro{font-size:clamp(17px,2.4vw,21px)}
/* 敵の輪が出るまでは打てないので、お題は出さない */
.typebox.wait{visibility:hidden}
.tb-done{color:#ffe14d}
.tb-fog{color:#b9b4c9;font-size:16px}
.typebox.chant .tb-kana{color:#ff9a8a}
.hud .combo .tm{font-size:14px;color:#fff}
/* 打ちまちがいのとき入力欄を赤く揺らす */
#word.miss{border-color:#ff4d4d;box-shadow:0 0 0 3px rgba(255,77,77,.35);animation:hpshake .2s}
/* 番の表示（.wait は相手の番） */
.turn{font-size:13px;font-weight:700;padding:2px 12px;border-radius:999px;background:rgba(95,211,181,.18);color:var(--jade);border:1px solid rgba(95,211,181,.45)}
.turn.wait{background:rgba(255,255,255,.06);color:var(--mute);border-color:rgba(255,255,255,.14)}
/* お題の文字数 */
.combo .len{color:var(--mute)}
.combo .odai{font-weight:700;color:var(--ink);background:var(--gold);border-radius:4px;padding:1px 8px}
#preview .gold{color:var(--gold);font-weight:700}
/* ボスのHP：画面上部の真ん中、「つぎは」の上。幅は中央の列を広げすぎないよう控えめに */
#bossbar{width:min(400px,90vw);display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
#bossbar.off{visibility:hidden}
#bossbar .nm{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--f-display);font-size:20px;color:#ffb3a6;text-shadow:0 2px 8px #000}
#bossbar .nm small{font-family:var(--f-ui);font-size:12px;color:var(--paper)}
#bossbar .track{height:12px;border-radius:6px;background:rgba(0,0,0,.6);border:1px solid rgba(229,83,59,.6);overflow:hidden}
#bossbar .fill{height:100%;width:100%;background:linear-gradient(90deg,#8f1f12,var(--shu),#ff9a6b);transition:width .2s}
/* 2本のゲージのボス：1本目は緑。下に2本目（赤）が控えているのが見えるよう、溝を赤くする */
#bossbar.g1 .track{background:linear-gradient(90deg,#5a0a06,#a3140c)}
#bossbar.g1 .fill{background:linear-gradient(90deg,#1f6a2a,#3fbf5a,#9cf0a0)}
/* 呼ばれたボス（えんさ）：ステージのボスのバーの下に、名前と細いバー */
#bossbar .sub{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#ffd2c8;text-shadow:0 1px 4px #000}
#bossbar .sub[hidden]{display:none}
#bossbar .strack{flex:1;height:7px;border-radius:4px;background:rgba(0,0,0,.6);box-shadow:0 0 0 1px #000;overflow:hidden}
#bossbar .sfill{height:100%;width:100%;background:linear-gradient(90deg,#8f1f12,var(--shu),#ff9a6b);transition:width .2s}
#bossbar .sub.rage .sfill{background:linear-gradient(90deg,#2a0505,#8f0f0a 45%,#ff2a10)}
/* 怒っている間：バーが暗い赤と黒に変わって脈打ち、名前の横に赤い「怒り」の札 */
#bossbar.rage .fill{background:linear-gradient(90deg,#2a0505,#8f0f0a 45%,#ff2a10);animation:ragefill .7s ease-in-out infinite alternate}
@keyframes ragefill{to{filter:brightness(1.6)}}
@media (prefers-reduced-motion:reduce){#bossbar.rage .fill{animation:none}}
/* ここから「.hud …」：枠なし・縁取り文字・派手めの見た目で上書きする */
.hud .panel{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0}
.hud{text-shadow:var(--ol2),0 3px 0 #000;color:#fff}
.hud .lbl{font-family:var(--f-pop);font-size:12px;letter-spacing:.12em;color:#fff;text-shadow:var(--ol2)}
/* 数（弾む .bump） */
.hud .stat b{display:inline-block;transform-origin:left center;font-family:var(--f-pop);font-size:40px;color:#fff;line-height:1;text-shadow:var(--ol3)}
.hud .stat.score b{color:#ffe14d}
/* スコアの下に、いまの連鎖の数をいつも出す */
.hud .schain{display:block;width:max-content;margin-top:4px;white-space:nowrap;font-family:var(--f-pop);font-size:18px;line-height:1;color:#ff7ad1;text-shadow:var(--ol2),0 0 14px rgba(255,122,209,.8);transform-origin:left center}
.hud .schain.bump{animation:bump .45s cubic-bezier(.2,1.6,.4,1)}
.hud .stat b.bump,.hud .cnum.bump{animation:bump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{0%{transform:scale(1.6) rotate(-4deg)}100%{transform:none}}
/* 波を越えるまでのメーター（倒した数 / 必要な数）：HPバーと同じ黒ふちで、金色が左から満ちる */
.hud .quota{min-width:180px}
.hud .quota.off{visibility:hidden}
/* STAGE の数字の桁が増えても（9-4 → 10-1）、右のメーターとスコアが動かないよう幅を取っておく */
.hud .stat.wave b{min-width:2.4em}
/* ノルマのバー（.tick で弾み、.full で光る） */
.hud .qbar{position:relative;height:22px;margin-top:6px;border-radius:11px;background:#2a2a2a;box-shadow:0 0 0 3px #000,0 4px 0 #000;overflow:hidden}
.hud .qfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:11px;background:linear-gradient(90deg,#ff8a1f,#ffd23f 70%,#fff3a0);transition:width .3s cubic-bezier(.2,1.4,.4,1)}
.hud .qfill::after{content:"";position:absolute;inset:3px 6px auto;height:5px;border-radius:3px;background:rgba(255,255,255,.55)}
.hud .qnum{position:relative;display:block;text-align:center;font-family:var(--f-pop);font-size:14px;line-height:22px;font-variant-numeric:tabular-nums;text-shadow:var(--ol2)}
.hud .qbar.tick{animation:qtick .3s ease-out}
.hud .qbar.full{box-shadow:0 0 0 3px #000,0 4px 0 #000,0 0 18px #ffd23f;animation:qfull .5s ease-in-out infinite alternate}
@keyframes qtick{40%{transform:scaleY(1.25)}}
@keyframes qfull{to{filter:brightness(1.3)}}
@media (prefers-reduced-motion:reduce){.hud .qbar.tick,.hud .qbar.full{animation:none}}
.hud .roomtag{font-size:12px;color:#fff}
.hud .ghost{text-shadow:none;color:#fff;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.35)}
/* 左上（STAGE・とっぱまで・SCORE・連鎖中・部屋の札とボタン）は、遊びながら読めるよう一回り大きく */
.hud .stats .lbl{font-size:14px}
.hud .stats{column-gap:14px}
.hud .stats .stat b{font-size:38px}
.hud .stats .stat.wave b{min-width:2.2em}
.hud .stats .quota{min-width:200px}
.hud .stats .qbar{height:26px;border-radius:13px}
.hud .stats .qfill{border-radius:13px}
.hud .stats .qnum{font-size:16px;line-height:26px}
.hud .stats .schain{font-size:22px;margin-top:5px}
.hud .stats .roomtag{font-size:14px}
.hud .stats .ghost{font-size:14px;padding:4px 10px}
/* 左上の「ホームへ・BGM・設定」：黒ふちの丸いボタン。ホームと設定にはしるしをつけ、BGM オフは暗く */
.hud .stats .roomtag{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hud .stats .ghost{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-pop);font-weight:400;font-size:14px;letter-spacing:.04em;color:#fff;
    background:linear-gradient(#3b2a7a,#22164a);border:2px solid rgba(255,255,255,.85);border-radius:999px;padding:6px 14px;box-shadow:0 0 0 2px #000,0 4px 0 #000;transition:transform .12s,box-shadow .12s,filter .12s}
.hud .stats .ghost:hover,.hud .stats .ghost:focus-visible{color:#fff;border-color:#ffe14d;filter:brightness(1.15);box-shadow:0 0 0 2px #000,0 4px 0 #000,0 0 12px rgba(255,225,77,.6)}
.hud .stats .ghost:active{transform:translateY(3px);box-shadow:0 0 0 2px #000,0 1px 0 #000}
.hud .stats #leaveBtn::before{content:"⌂";font-size:1.25em;line-height:1;color:#ffe14d}
.hud .stats .settings-btn{font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:900;letter-spacing:.08em} /* 「設定」の漢字がつぶれて見えないよう、丸ゴシックで */
.hud .stats .settings-btn::before{content:"⚙";font-size:1.15em;line-height:1;color:#6ff2ff}
.hud .stats .tag-pair{display:inline-flex;gap:8px} /* 「ポーズ」と「設定」は、折り返すときもいっしょに動く */
.hud .stats .pause-btn{font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;font-weight:900;letter-spacing:.08em}
.hud .stats .pause-btn::before{content:"❚❚";font-size:.8em;letter-spacing:-.12em;line-height:1;color:#ffe14d}
.hud .stats .bgm-btn{background:linear-gradient(#ff5fa8,#c8237a)}
.hud .stats .bgm-btn[aria-pressed="false"]{background:linear-gradient(#55507a,#2e2a48);color:#cfcbe6}
.hud .chaincard{gap:4px}
/* ボスがいないとき（HPバーの場所が空いているとき）は、「つぎは○から」とお題を少し上へ寄せる */
.hud .chaincard:has(> #bossbar.off){margin-top:-42px}
/* お題の字：大きく金色に光り、ゆらぐ */
.hud .needk{width:auto;height:auto;background:none;box-shadow:none;border-radius:0;font-family:var(--f-pop);font-size:88px;line-height:1;color:#ffe14d;
    text-shadow:var(--ol3),0 0 28px rgba(255,225,77,.85);animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.08) rotate(2deg)}}
.hud .need .lbl{font-size:16px}
/* 番の表示：水色で跳ねる */
.hud .turn{background:none;border:0;padding:0;font-family:var(--f-pop);font-size:22px;color:#6ff2ff;animation:hop .9s ease-in-out infinite}
.hud .turn.wait{background:none;color:#e6e6e6;animation:none;font-size:16px}
@keyframes hop{50%{transform:translateY(-5px)}}
/* 連鎖の数と威力 */
.hud .combo{gap:10px;flex-wrap:wrap;justify-content:center;font-size:15px;font-weight:900}
.hud .cnum{display:inline-block;font-family:var(--f-pop);font-size:46px;line-height:1;color:#ff7ad1;text-shadow:var(--ol3),0 0 22px rgba(255,122,209,.8)}
.hud .combo .odai{background:none;border-radius:0;padding:0;font-family:var(--f-ui);font-weight:700;font-size:26px;color:#7dff9a}
.hud .combo .len{color:#fff;font-size:13px}
/* 何連鎖の数は、言葉を放ってから1.5秒ほどで消える（すぐ次の言葉で出し直す）。お題の右上に重ねる */
/* 何連鎖・倍率は一旦すべて非表示（戻すときは display:inline-flex にする） */
.hud .cflash{display:none;animation:cfade 1.5s linear forwards}
.hud .combo .ofirst{position:relative}
.hud .combo .ofirst .cflash{position:absolute;right:-16px;top:-34px;pointer-events:none}
@keyframes cfade{0%,80%{opacity:1}100%{opacity:0}}
/* お題の文字数の目盛り：光っている数字の言葉が連鎖する（5+ は5文字以上） */
.hud .lgauge{display:inline-flex;gap:4px;align-items:center}
.hud .lgauge i{font-style:normal;min-width:34px;padding:3px 6px;border-radius:6px;text-align:center;font-size:17px;font-weight:900;background:rgba(255,255,255,.14);color:var(--mute);text-shadow:none}
.hud .lgauge i.on{background:#ffe14d;color:var(--ink)}
.hud .lgauge.sumi i{background:#0a080e;color:transparent;box-shadow:0 0 8px rgba(0,0,0,.7)}
/* 履歴（右下・小さく） */
/* 履歴（右下に小さく） */
.history{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 132px);
    display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:min(320px,42vw);pointer-events:none}
/* 見出し「つないだ言葉」：濃い紫のリボンに白い字、左に光る星 */
.history .lbl{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-pop);font-size:16px;letter-spacing:.08em;color:#fff;opacity:1;text-shadow:none;
    background:linear-gradient(#3b2a7a,#22164a);border:2px solid rgba(255,255,255,.85);border-radius:999px;padding:4px 14px 4px 10px;box-shadow:0 0 0 2px #000,0 3px 0 #000;margin-bottom:4px}
.history .lbl::before{content:"✦";color:#ffe14d;font-size:1.1em;line-height:1;text-shadow:0 0 8px rgba(255,225,77,.9)}
.hud .chain{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:16px;font-weight:900}
.hud .chain li{background:rgba(10,8,26,.55);border:0;border-radius:999px;padding:2px 12px;color:#fff;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hud .chain li.last{background:rgba(10,8,26,.75);opacity:1;color:#ffe14d;font-size:22px;padding:3px 14px;box-shadow:0 0 0 2px #ffe14d}
.hud .chain li.broken{color:#ff8a7a}
/* みんなで遊ぶとき：言葉の前に、打った人の名前の札（その人の色・黒ふち）。自分の言葉は「あなた」 */
.hud .chain li{display:flex;align-items:center;gap:8px}
.hud .chain .who{flex:none;font-family:var(--f-pop);font-weight:400;font-size:12px;letter-spacing:.02em;color:#1a1030;text-shadow:none;background:var(--wc,#fff);border:2px solid #000;border-radius:999px;padding:1px 8px;max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud .chain li.last .who{font-size:14px;padding:2px 10px;box-shadow:0 0 8px var(--wc,#fff)}
.hud .chain li.miss{color:#ffb0a4;opacity:.9;background:rgba(60,8,12,.6)}
.hud .chain li.miss.last{color:#ff8a7a;box-shadow:0 0 0 2px #ff4d4d;font-size:18px}
.hud .chain li.miss .x{font-family:var(--f-pop);font-weight:400;color:#ff4d4d}
.hud .chain li.miss .why{font-size:11px;font-weight:900;color:#fff;background:#d4140a;border-radius:4px;padding:0 6px;text-shadow:none}
.hud .chain .who.me{background:#fff;box-shadow:0 0 0 2px var(--wc,#ffe14d)}
.hud .chain .dot{display:inline-block;width:7px;height:7px;box-shadow:0 0 0 1.5px #000}
/* 体力ゲージ */
/* 仲間の体力ゲージ */
.hud .party{gap:10px;min-width:170px}
.hud .party li{font-size:19px;font-weight:900;white-space:nowrap}
.hud .party small{color:#ffb3a6}
/* 揺れのアニメーション */
@keyframes hpshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* 自分の体力（画面下の真ん中）：残りに合わせて緑→黄→赤 */
/* 体力の色：多い（緑）・半分くらい（黄）・少ない（赤で点滅） */
.hpc-hi{background:linear-gradient(90deg,#2fd36a,#9dff6a)!important}
.hpc-mid{background:linear-gradient(90deg,#ffb000,#ffe14d)!important}
.hpc-lo{background:linear-gradient(90deg,#ff2a2a,#ff6b5a)!important;animation:hpblink .6s steps(2) infinite}
@keyframes hpblink{50%{filter:brightness(1.6)}}
/* 自分のHP（白いバーが遅れて減る .lag と、本当の値 .fill。.hit で揺れる） */
#myhp{display:flex;align-items:center;gap:10px;width:min(620px,100%)}
#myhp .lbl{font-size:16px}
#myhp .bar{position:relative;flex:1;height:18px;border-radius:9px;background:#2a2a2a;box-shadow:0 0 0 3px #000,0 4px 0 #000;overflow:hidden}
#myhp .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:9px}
#myhp .lag{background:#fff;transition:width .6s ease .25s}
#myhp .fill{transition:width .12s ease}
/* たまよせ中：このまま終わったら減るHPの分を、バーの右はしに赤いしま模様で点滅させる */
#myhp .pred{border-radius:0 9px 9px 0;background:repeating-linear-gradient(-45deg,#ff2a40 0 6px,#8a0a1a 6px 12px);box-shadow:inset 0 0 0 2px #fff;transition:left .2s ease,width .2s ease;animation:hppred .45s ease-in-out infinite alternate}
@keyframes hppred{to{opacity:.45}}
@media (prefers-reduced-motion:reduce){#myhp .pred{animation:none}}
#myhp b{font-family:var(--f-pop);font-size:22px;min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
#myhp.hit .bar{animation:hpshake .25s}
/* タイピングモード：HP はハートで出す（バーと数字は隠す） */
#myhp .hearts{display:none;gap:6px;font-size:30px;line-height:1}
#myhp .heart{font-style:normal;color:#ff4d6d;text-shadow:2px 2px 0 #000,-2px 2px 0 #000,2px -2px 0 #000,-2px -2px 0 #000}
#myhp .heart.lost{color:#3a3a3a}
/* ノーミスでもらった追加ハートは金色。戻ったハート・追加ハートは、ぽんとはずむ */
#myhp .heart.extra{color:#ffd23a;filter:drop-shadow(0 0 6px rgba(255,210,58,.8))}
#myhp .heart.gain{animation:heartgain .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes heartgain{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.7) rotate(8deg)}100%{transform:none}}
/* 条件：動きを減らす設定なら、ハートが増える動きを止める */
@media (prefers-reduced-motion:reduce){#myhp .heart.gain{animation:none}}
#myhp .heart.broke{animation:heartbreak .7s ease-out}
@keyframes heartbreak{0%{color:#ff4d6d;transform:scale(1.9) rotate(-12deg)}40%{color:#ff4d6d;transform:scale(1.3) rotate(8deg)}100%{color:#3a3a3a;transform:none}}
/* 条件：動きを減らす設定なら、ハートが割れる動きを止める */
@media (prefers-reduced-motion:reduce){#myhp .heart.broke{animation:none}}
#myhp.hit .hearts{animation:hpshake .25s}
/* タイピングモードでは、ハートを真ん中にそろえる */
.mode-typing #myhp{justify-content:center}
.mode-typing #myhp .bar,.mode-typing #myhp b{display:none}
.mode-typing #myhp .hearts{display:flex}
/* タイピングモードは奥義とダッシュを使わない */
.mode-typing #skillBtn,.mode-typing #dashBtn{display:none}
/* 炎上中：HPの文字の後ろに「炎上」の札、バーがオレンジに揺らめく */
/* 炎上中 */
#myhp.burn .bar{box-shadow:0 0 0 3px #000,0 4px 0 #000,0 0 14px #ff7a1a;animation:burnglow .5s ease-in-out infinite alternate}
#myhp.burn .lbl::after{content:"炎上";margin-left:6px;font-size:11px;color:#1a0a00;background:#ff9a3c;border-radius:4px;padding:0 4px;text-shadow:none}
@keyframes burnglow{to{filter:brightness(1.25) saturate(1.3)}}
/* 知らせ・ボスのHP・入力欄の縁取り */
.hud .toast{background:none;border:0;padding:0;font-size:18px;font-weight:900}
.hud .toast.bad{color:#ffb0a4}
/* 敵・ボスの技の知らせは、ふつうの知らせより大きく（js の toast(…,'foe')） */
/* 暗い札に白い字で、見出し（最初の「！」まで）は赤みの大きい字、説明はその下にふつうの太さで出す。幅を決めて折り返す */
.hud .toast.foe{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:min(720px,92vw);padding:10px 18px;border-radius:10px;
  background:rgba(14,6,8,.82);border:2px solid rgba(229,83,59,.85);box-shadow:0 4px 0 rgba(0,0,0,.5),0 0 18px rgba(229,83,59,.35);
  font-size:clamp(16px,1.7vw,22px);font-weight:700;line-height:1.5;text-align:center;color:#fff;text-shadow:0 1px 0 #000;line-break:strict;word-break:normal;overflow-wrap:anywhere}
.hud .toast.foe b{font-size:clamp(20px,2.2vw,30px);font-weight:900;line-height:1.3;color:#ffd0c4;text-shadow:0 2px 0 #000,0 0 12px rgba(229,83,59,.8)}
.hud .toast.foe span{color:#f4ece8}
.hud #bossbar .nm{font-family:var(--f-pop);color:#ffb3a6}
.hud #bossbar .track{height:16px;box-shadow:0 0 0 2px #000}
.hud #bossbar.rage .track{box-shadow:0 0 0 2px #000,0 0 18px rgba(255,42,16,.9)}
.hud #bossbar.rage .nm{color:#ff6a4a}
.hud #bossbar.rage .nm small{font-family:var(--f-pop);font-size:14px;color:#fff;background:#d4140a;border-radius:4px;padding:1px 8px;box-shadow:0 0 0 2px #000;text-shadow:var(--ol2)}
.hud #word,.hud #fire{text-shadow:none}
.hud #preview{text-shadow:var(--ol2)}
/* 打った言葉（入力欄の左上）：大きく、白い太字で。HPバーにかぶらないよう入力欄を少し下げる */
.hud #bar{margin-top:22px}
.hud #preview{left:4px;bottom:calc(100% + 6px);font-size:20px;font-weight:900;color:#fff;line-height:1.3;letter-spacing:.02em}
.hud #preview .ok{color:#7dff9a}.hud #preview .ng{color:#ffb0a4}.hud #preview .gold{color:#ffe14d}
/* みんなで遊ぶとき：右上の仲間の名前の下に体力のゲージ */
.hud .party .pbar{grid-column:2;display:flex;align-items:center;gap:6px;margin-top:2px;min-width:180px}
.hud .party .pb-hp{font-family:var(--f-pop);font-weight:400;font-size:11px;color:#ffe14d;text-shadow:var(--ol2)}
.hud .party .pb-tr{position:relative;flex:1;height:14px;border-radius:7px;background:#2a2a2a;box-shadow:0 0 0 2px #000,0 3px 0 #000;overflow:hidden}
.hud .party .pb-tr i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:7px}
.hud .party .pb-lag{background:#fff;transition:width .6s ease .25s}
.hud .party .pb-fill{transition:width .15s ease}
.hud .party .pb-fill::after{content:"";position:absolute;left:4px;right:4px;top:2px;height:4px;border-radius:2px;background:rgba(255,255,255,.5)}
.hud .party .pb-num{font-family:var(--f-pop);font-weight:400;font-size:15px;min-width:2.2em;text-align:right;color:#fff;font-variant-numeric:tabular-nums;text-shadow:var(--ol2)}
.hud .party .pbar.low .pb-num{color:#ff6b5a}
.hud .party li.down .pbar{opacity:.45}
/* 放つボタン：自分の番は光って脈打つ。番が回ってきた瞬間は大きくはじける。仲間の番は暗く */
.hud #fire{position:relative;transition:filter .2s}
.hud #fire.myturn{background:linear-gradient(#ff6a4a,#e5333b);box-shadow:0 0 0 3px #ffe14d;animation:fireturn 1.1s ease-in-out infinite}
.hud #fire.turnin{animation:fireturnin .5s cubic-bezier(.3,1.6,.5,1),fireturn 1.1s ease-in-out .5s infinite}
.hud #fire.wait{filter:grayscale(.85) brightness(.7)}
@keyframes fireturn{50%{box-shadow:0 0 0 3px #ffe14d,0 0 22px 6px rgba(255,210,58,.85);transform:scale(1.06)}}
@keyframes fireturnin{0%{transform:scale(1)}40%{transform:scale(1.25);box-shadow:0 0 0 4px #fff,0 0 34px 12px rgba(255,225,77,1)}100%{transform:scale(1)}}
.mode-typing .hud #fire{animation:none;box-shadow:none;filter:none;background:var(--shu)}
/* 条件：動きを減らす設定なら、放つボタンの脈打ちを止める */
@media (prefers-reduced-motion:reduce){.hud #fire.myturn,.hud #fire.turnin{animation:none;box-shadow:0 0 0 3px #ffe14d,0 0 16px 4px rgba(255,210,58,.7)}}
/* 条件：画面がせまいときは、お題を下の段に回す */
@media (max-width:640px){
    .hud .stat b,.hud .stats .stat b{font-size:30px}
    .hud .stats .quota{min-width:170px}
    .hud .needk{font-size:64px}
    .hud .cnum{font-size:34px}
    .hud .turn{font-size:18px}
    .history{bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 150px);max-width:46vw}
}
/* 条件：動きを減らす設定なら、お題と番のアニメーションを止める */
@media (prefers-reduced-motion:reduce){.hud .needk,.hud .turn{animation:none}}
/* 条件：画面がせまいとき（640px 以下）は文字を小さくする */
@media (max-width:640px){
    .top{grid-template-columns:1fr auto}
    .chaincard{grid-column:1/-1;order:3;justify-self:center}
    .party{min-width:120px;padding:8px 10px}
    .stat b{font-size:22px}
    .needk{width:52px;height:52px;font-size:34px}
}
/* 条件：動きを減らす設定なら、弾みと知らせのアニメーションを止める */
@media (prefers-reduced-motion:reduce){.needk.pop,.toast{animation:none}}

/* 必殺技ボタン（入力欄の左） */
#bar{align-items:stretch}
/* 奥義のボタン（変数 --job = ジョブの色。下からゲージ .sk-fill が満ちる） */
.skill-btn{--job:#ffd23f;position:relative;overflow:hidden;flex:none;width:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
    font:inherit;font-weight:900;color:#fff;background:#1d1636;border:3px solid #000;border-radius:12px;padding:4px 6px;cursor:pointer;text-shadow:var(--ol2);box-shadow:0 4px 0 #000}
.skill-btn .sk-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--job);opacity:.55;transition:height .2s linear}
.skill-btn span,.skill-btn kbd{position:relative}
.skill-btn .sk-name{font-size:14px;line-height:1.2;text-align:center}
.skill-btn .sk-sub{font-size:11px}
.skill-btn .sk-key{font-family:inherit;font-size:10px;border:1px solid rgba(255,255,255,.6);border-radius:4px;padding:0 4px;margin-top:2px;text-shadow:none}
/* たまったとき（.ready）は光り、倒れているとき（.off）は灰色 */
.skill-btn.ready{border-color:var(--job);animation:skready 1s ease-in-out infinite}
.skill-btn.ready .sk-fill{opacity:.85}
.skill-btn.off{filter:grayscale(1) opacity(.6);cursor:not-allowed}
/* 押したとき・キーボードで選んだとき */
.skill-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.skill-btn:focus-visible{outline:3px solid #6ff2ff;outline-offset:2px}
@keyframes skready{50%{box-shadow:0 4px 0 #000,0 0 18px var(--job)}}
.hud .party .jobtag{display:inline-block;font-size:12px;font-weight:900;color:#1a1030;text-shadow:none;border-radius:4px;padding:1px 6px;margin-right:4px;vertical-align:1px}
/* ダッシュボタン（必殺技ボタンの左）。いつも使えるものなので、たまったときの点滅はしない */
.dash-btn{--job:#6ff2ff;width:84px}
.dash-btn.ready{animation:none}
/* 条件：画面がせまいときはボタンを小さく */
@media (max-width:640px){.skill-btn{width:88px}.skill-btn .sk-name{font-size:12px}.dash-btn{width:68px}}
/* 条件：動きを減らす設定なら、たまったときの点滅を止める */
@media (prefers-reduced-motion:reduce){.skill-btn.ready{animation:none}}
/* ボスの呪い・技の札（お題の下） */
.curse{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;max-width:100%;margin-top:4px}
.curse:empty{display:none}
/* 2段：上に技名（大きく）、下にやること。いちばん下に残り時間のバー（減っていく） */
/* 字は丸ゴシック（M PLUS Rounded 1c）の太字で、小さくても読みやすく。ゲームのボタンとそろえた札：濃い藍の板に黒いふちと下の影。左に技名の色札（札ごとの色 --cc にポップな字）、右に一言の説明。いちばん下に残り時間のバー */
.cchip{--cc:#ffc857;position:relative;display:inline-flex;flex-direction:row;align-items:stretch;min-width:0;padding:0;border-radius:10px;overflow:hidden;
    color:#fff;background:#1d1830;border:0;box-shadow:0 0 0 2px #000,0 4px 0 #000,0 0 14px color-mix(in srgb,var(--cc) 35%,transparent);animation:pop .35s ease-out}
.cchip .cc-nm{display:flex;align-items:center;padding:6px 12px 9px;font-family:"M PLUS Rounded 1c",var(--f-ui);font-weight:900;font-size:20px;line-height:1.1;letter-spacing:.04em;white-space:nowrap;
    color:#1a0a14;background:var(--cc);border-right:2px solid #000;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.cchip .cc-sub{align-self:center;padding:6px 14px 9px;font-family:"M PLUS Rounded 1c",var(--f-ui);font-size:15px;font-weight:800;line-height:1.45;letter-spacing:.02em;max-width:360px;text-align:left;line-break:strict;color:#f4ece8;text-shadow:0 1px 0 #000}
.cchip .cc-fuda{display:flex;align-items:center;gap:4px;padding:0 12px 4px 0}
.cchip .cc-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.45)}
.cchip .cc-bar>i{display:block;height:100%;width:100%;background:var(--cc);transition:width .15s linear}
/* 残り CURSE_SOON 秒を切ったら、ゆっくり点滅（もうすぐ切れる） */
.cchip.soon{animation:ccsoon .5s ease-in-out infinite alternate}
@keyframes ccsoon{to{box-shadow:0 0 0 2px #000,0 4px 0 #000,0 0 22px var(--cc);border-color:#fff}} /* 字は薄くせず、枠を光らせる */
/* 条件：動きを減らす設定なら、札の点滅を止める（もうすぐ切れる札は点線の枠で知らせる） */
@media (prefers-reduced-motion:reduce){.cchip,.cchip.soon{animation:none}.cchip.soon{outline:3px dashed var(--cc);outline-offset:-6px}}
/* 条件：画面がせまいときは、札を小さくする */
@media (max-width:640px){.cchip .cc-nm{font-size:15px;padding:5px 9px 8px}.cchip .cc-sub{font-size:12px;padding:5px 10px 8px;max-width:200px}}
.cchip.c-eat,.cchip.c-ch,.cchip.c-mm{--cc:#ff7a5c}
.cchip.c-sm{--cc:#c9bfd6}
.cchip.c-it,.cchip.c-bk{--cc:#c8a2ff}
.cchip.c-ec,.cchip.c-mu,.cchip.c-kd{--cc:#7cc8ff}
.cchip.c-st{--cc:#d8cfbf}
.cchip.c-bo,.cchip.c-te{--cc:#ffd23a}
.cchip.c-tm,.cchip.c-ab{--cc:#ff6a8a}
.cchip.c-foe{--cc:#ff7a5c} /* 技の知らせ（js の foeTip） */
.cchip .fuda{display:inline-grid;place-items:center;width:24px;height:28px;font-size:17px;background:#fff8e8;border:1px solid #c0402a;color:#c0402a;border-radius:2px}
.cchip .fuda.cut{opacity:.35;text-decoration:line-through}
/* 煤煙：お題の字が墨で塗られる */
.combo .odai.sumi{color:transparent;background:#0a080e;box-shadow:0 0 14px rgba(0,0,0,.7);text-shadow:none} /* 煤煙：お題の文字数を墨で隠す */
.combo .len.nolong{color:#fff;background:#c81e10;border-radius:4px;padding:1px 8px;font-weight:900;text-shadow:none;box-shadow:0 0 0 2px #000} /* 煤煙：連鎖しないことを赤い札で */
/* 化かし題：偽物の字の札には、狐の尻尾がのぞく */
.needk{position:relative}
/* 何連鎖！！：つぎは○の文字の右上に、右下がりの斜めに出る。言葉を放つと出て、1.5秒ほどで消える */
.needwrap{position:relative;display:inline-block}
.cpop{position:absolute;left:100%;top:-16px;margin-left:2px;white-space:nowrap;font-family:var(--f-pop);font-size:44px;line-height:1;color:#ff7ad1;text-shadow:var(--ol3),0 0 22px rgba(255,122,209,.8);transform:rotate(14deg);transform-origin:left top;opacity:0;pointer-events:none}
.cpop.show{animation:cpop 1.5s ease-out forwards}
@keyframes cpop{0%{opacity:0;transform:rotate(14deg) scale(.5)}12%{opacity:1;transform:rotate(14deg) scale(1.12)}22%{transform:rotate(14deg) scale(1)}80%{opacity:1}100%{opacity:0}}
/* 条件：動きを減らす設定なら、連鎖の文字はゆっくり消すだけにする */
@media (prefers-reduced-motion:reduce){.cpop.show{animation:cfade 1.5s linear forwards}}
.needk.tail::after{content:'';position:absolute;right:-12px;bottom:2px;width:22px;height:12px;border-radius:12px 12px 12px 2px;background:linear-gradient(90deg,#ffb02a 60%,#fff 60%);transform:rotate(-30deg);box-shadow:0 1px 2px rgba(0,0,0,.4)}

/* タイピングモード：ノーミスの連続で回復するまでのゲージ（ハートの横） */
.heal-gauge{display:none;position:relative;align-items:center;justify-content:center;width:150px;height:18px;margin-left:10px;border-radius:999px;background:#1d1830;box-shadow:0 0 0 2px #000,0 3px 0 #000;overflow:visible}
.mode-typing #myhp .heal-gauge{display:inline-flex}
.heal-gauge i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#ff6f91,#ffb3c6 60%,#ffe14d);box-shadow:0 0 10px rgba(255,111,145,.7);transition:width .25s ease}
.heal-gauge.full i{background:linear-gradient(90deg,#ffe14d,#fff6b0 50%,#ffd23a);box-shadow:0 0 12px rgba(255,226,90,.9);animation:healpulse 1s ease-in-out infinite alternate}
.heal-gauge small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;white-space:nowrap;font:900 12px/1 var(--f-ui,sans-serif);color:#fff;text-shadow:0 1px 0 #000,0 -1px 0 #000,1px 0 0 #000,-1px 0 0 #000}
@keyframes healpulse{from{filter:brightness(1)}to{filter:brightness(1.35)}}
/* 条件：動きを減らす設定なら、満タンのゲージの光を止める */
@media (prefers-reduced-motion:reduce){.heal-gauge.full i{animation:none}}

/* ゲーム開始時に、自分のキャラの少し下へ「十字キーで うごく」を数秒だけ出す（矢印キーを押したら、すぐ消える） */
#moveHint{position:fixed;left:50%;top:62%;transform:translate(-50%,6px);z-index:5;margin:0;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;background:rgba(20,12,40,.55);color:#fff;font-size:13px;font-weight:800;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s,transform .5s,visibility 0s .5s}
#moveHint.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .4s,transform .4s}
#moveHint .xkeys i,#moveHint kbd{text-shadow:none;color:#2b1a5a}
#moveHint kbd{font-family:inherit;font-size:11px;font-weight:900;color:#2b1a5a;background:#fff;border:1px solid rgba(43,26,90,.35);border-bottom-width:2px;border-radius:4px;padding:0 4px}
#moveHint .pztx::before{content:"・ "}
.mode-typing #moveHint{padding-left:14px}
.mode-typing #moveHint .xkeys,.mode-typing #moveHint .mvtx,.mode-typing #moveHint .pztx::before{display:none}

/* タイピングモード：ハートと追加ハートのゲージは、お題のすぐ下（画面上部）に置く。startGame で #myhp をお題の下へ動かす */
.chaincard #myhp{width:auto;justify-content:center;margin-top:2px}
.chaincard #myhp .heal-gauge{margin-left:12px}

/* ===== ポーズ画面（Esc） ===== */
body.paused .hud .typebox,body.paused .hud .need,body.paused .hud #preview,body.paused .hud #word,body.paused #moveHint{visibility:hidden} /* お題は見せない */
.pause-ov{position:fixed;inset:0;z-index:38;display:grid;place-items:center;padding:16px;
    background:radial-gradient(ellipse at 50% 40%,rgba(60,36,120,.55),rgba(8,5,22,.92) 70%);backdrop-filter:blur(12px) saturate(.7);-webkit-backdrop-filter:blur(12px) saturate(.7);animation:pzIn .25s ease-out}
.pause-ov[hidden]{display:none}
@keyframes pzIn{from{opacity:0}to{opacity:1}}
/* ポーズのカード */
.pz-card{position:relative;display:grid;place-items:center;text-align:center;min-width:min(420px,100%);padding:38px 34px 30px;color:#fff7ec}
.pz-card::before,.pz-card::after{content:"";position:absolute;left:50%;width:min(360px,80vw);height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.pz-card::before{top:0}.pz-card::after{bottom:0}
.pz-en{margin:0;font-family:var(--f-pop);font-size:15px;letter-spacing:.6em;padding-left:.6em;color:var(--gold);opacity:.9}
.pz-ttl{margin:4px 0 6px;font-family:var(--f-display);font-weight:400;font-size:clamp(44px,9vw,76px);letter-spacing:.12em;line-height:1.1;text-shadow:0 0 24px rgba(160,120,255,.6),0 4px 0 #000;animation:pzFloat 3s ease-in-out infinite}
@keyframes pzFloat{50%{transform:translateY(-5px)}}
/* 止めた人の表示 */
.pz-by{margin:0 0 4px;min-height:1.4em;font-size:14px;font-weight:800;color:#d9ccff}
.pz-go{margin-top:14px;font:inherit;font-size:18px;font-weight:900;color:#2b1a5a;background:linear-gradient(#fff,#f1e8ff);border:0;border-radius:999px;padding:12px 30px;cursor:pointer;box-shadow:0 0 0 3px var(--gold),0 6px 0 #000,0 0 30px rgba(242,193,78,.45);animation:pzPulse 1.6s ease-in-out infinite}
.pz-go:focus-visible{outline:2px solid #fff;outline-offset:6px}
@keyframes pzPulse{50%{box-shadow:0 0 0 3px var(--gold),0 6px 0 #000,0 0 46px rgba(242,193,78,.75)}}
.pause-ov kbd{font-family:inherit;font-size:.8em;font-weight:900;color:#2b1a5a;background:#fff;border:1px solid rgba(43,26,90,.35);border-bottom-width:3px;border-radius:5px;padding:0 6px;margin-right:2px}
.pz-go kbd{background:#2b1a5a;color:#fff;border-color:#2b1a5a}
.pz-sub{margin:14px 0 0;font-size:12px;font-weight:700;color:#bfb3e6}
.pz-home{margin-top:18px;font:inherit;font-size:14px;font-weight:800;color:#e9e0ff;background:rgba(255,255,255,.08);border:2px solid rgba(217,204,255,.55);border-radius:999px;padding:8px 22px;cursor:pointer;transition:background .15s,border-color .15s}
.pz-home:hover{background:rgba(255,255,255,.18);border-color:#fff}
.pz-home:focus-visible{outline:2px solid #fff;outline-offset:4px}
.pz-count{display:none;place-items:center}
.pause-ov.cd .pz-rest{display:none}
.pause-ov.cd .pz-count{display:grid}
.pause-ov.cd{background:radial-gradient(ellipse at 50% 45%,rgba(60,36,120,.4),rgba(8,5,22,.85) 70%)}
/* 再開までのカウントの数字 */
.pz-num{font-family:var(--f-pop);font-size:clamp(110px,22vw,190px);line-height:1;color:#fff;text-shadow:0 0 40px rgba(242,193,78,.8),0 8px 0 #000,var(--ol3)}
.pz-num.pop{animation:pzPop .9s cubic-bezier(.2,1.4,.4,1)}
@keyframes pzPop{0%{transform:scale(1.9);opacity:0}25%{transform:scale(1);opacity:1}80%{opacity:1}100%{transform:scale(.85);opacity:.4}}
.pz-ready{margin:6px 0 0;font-size:16px;font-weight:900;letter-spacing:.3em;color:var(--gold)}
/* 条件：動きを減らす設定なら、ポーズ画面の動きを止める */
@media (prefers-reduced-motion:reduce){.pz-ttl,.pz-go,.pz-num.pop,.pause-ov{animation:none}}
/* 観戦の札（みんなで遊ぶとき、自分が倒れている間）：「観戦中」「◀ 名前 ▶」と切り替え方の案内 */
.spec-bar{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 14px 7px;border-radius:14px;background:rgba(10,6,20,.78);box-shadow:0 0 0 2px #000,0 0 0 4px rgba(255,210,58,.55);color:#fff;white-space:nowrap;pointer-events:auto}
.spec-bar[hidden]{display:none}
.spec-ttl{font-family:var(--f-pop);font-size:12px;letter-spacing:.3em;color:var(--gold)}
.spec-row{display:flex;align-items:center;gap:10px}
.spec-who{display:flex;align-items:baseline;gap:4px;min-width:7em;justify-content:center}
.spec-nm{font-family:var(--f-pop);font-size:20px;text-shadow:var(--ol2)}
.spec-no{font-size:12px;opacity:.85}
.spec-btn{width:40px;height:40px;border-radius:50%;border:2px solid #000;background:var(--gold);color:#3a2400;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #8a6a10;animation:specPulse 1.2s ease-in-out infinite alternate}
.spec-btn:hover{filter:brightness(1.1)}
.spec-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8a6a10}
.spec-btn:disabled{opacity:.35;cursor:default;animation:none}
.spec-hint{font-size:11px;opacity:.8}
@keyframes specPulse{from{transform:scale(1)}to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.spec-btn{animation:none}}