/* 色の組（2026-10-23 水色の地＋黄のボタンをやめた）: 地は教室の赤い表紙のノートを淡くした朱鷺色、盤は黒板にチョークの字。主なボタンは黒板の緑に白い字
   地 #E0B9AE（HSL 14/45%/78%）、ウィンドウの紙 #EBD0C7（15/50%/85%）、盤 #26543D（150/38%/24%）、ボタン #26543D に白（8.7）。文字と地のコントラストはどれも 4.5 以上 */
/* 書体は 2 つだけ（2026-10-24）: 題字・数字・盤の語は DotGothic16、本文は共通の Zen Kaku Gothic New */
:root{--hf-title:"DotGothic16","Zen Kaku Gothic New",sans-serif;--bg:#E0B9AE;--card:#EBD0C7;--pane:#26543D;--line:#d0a294;--line2:#b4887a;--ink:#1b2a44;--dim:#3f4d60;--amber:#1f4d45;--red:#861c30;--soft:#E7C8BE;--tint:#F1DDD5;--sub2:#2e3a4c;--rule:#d0a294}
/* 共通部品（帯・結果・ウィンドウ）もホームと同じ組に。部屋の中（.hf-party）でも同じ */
.hf{--ui-red:#26543D;--ui-red-ink:#ffffff;--ui-card:#E0B9AE;--ui-ink:#1b2a44;--ui-sub:#3f4d60;--ui-paper:#EBD0C7;--ui-soft:#b4887a;--ui-chip:#F1DDD5;--ui-shade:rgba(224,185,174,.96)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;color:var(--ink);overflow:hidden}
body{-webkit-text-size-adjust:100%;touch-action:manipulation}
.hf{color:var(--ink);background:var(--bg);-webkit-user-select:none;user-select:none}
.hf-view,.hf-party{position:absolute;inset:0}
.hf-party{width:100%;height:100%;overflow:hidden;background:var(--bg)}
.hf-party.land{width:1080px;height:720px}.hf-party.port{width:720px;height:1080px}
.hf-in{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;border:0;padding:0;font-size:16px;background:transparent;color:transparent;caret-color:transparent;z-index:0}
.hf small{font-size:.65em;color:var(--dim);margin-left:.4em}
/* 主ボタン（地が緑青）の上のキー表記は地の色に負けない白に */
.hf .ui-btn:not(.sub) small{color:inherit;opacity:.9;font-size:.6em;border:1px solid currentColor;border-radius:4px;padding:1px 5px;vertical-align:middle}

/* 盤（語は題材のドット書体）: 教室の黒板。字は白いチョーク、打った所は黄色いチョーク、攻撃は桃色のチョーク
   盤の中だけ色の変数を黒板用に置き換える（白/盤 7.6・薄い字/盤 5.0・黄/盤 6.0・桃/盤 5.0）。罫線・模様は置かない */
.hf-field{--ink:#F2F0E6;--dim:#B9C9BF;--sub2:#DCE5DF;--amber:#F2D66B;--red:#F7B2B5;--tint:#336B50;--line:#1b3a2b;--line2:#1b3a2b;position:absolute;background:var(--pane);border:1px solid var(--line2);border-radius:6px;overflow:hidden;font-family:var(--hf-title);color:var(--ink)}
.hf-field .floor{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red);opacity:.4}
.hf-field.danger{border-color:var(--red)}
.hf-field.danger .floor{opacity:1}
.hf-field.missed{animation:miss .18s}
@keyframes miss{0%{border-color:var(--red)}100%{border-color:var(--line)}}
.hf-w{position:absolute;left:0;top:0;white-space:nowrap;line-height:1;will-change:transform}
.hf-w .in{display:flex;flex-direction:column;align-items:flex-start}
.hf-w .k{display:block}
.hf-w .r{display:block;font-size:.5em;color:var(--dim);margin-top:.25em;letter-spacing:.04em}
/* 打ち終えた所は色の帯（白抜き）、次の 1 字は太い下線。狙っている語は淡い下地で囲む */
.hf-w b{color:#26543D;background:var(--amber);font-weight:normal;border-radius:2px}
.hf-w i{font-style:normal;color:var(--ink);text-decoration:underline 3px var(--amber);text-underline-offset:.18em}
.hf-w.tgt .in{background:var(--tint);outline:4px solid var(--tint);border-radius:3px}
.hf-w.tgt .r{color:var(--sub2)}
.hf-w .en .r{letter-spacing:.18em}
.hf-w.atk .k{color:var(--red)}
.hf-w.atk .k b{color:#26543D}
.hf-w.lv2 .k{text-decoration:underline 2px var(--red)}
.hf-w.lv3 .k{background:#1d3f2e;padding:2px 4px;border-radius:4px}
.hf-w.pop .in{animation:pop .3s forwards}
.hf-w.hit .in{animation:hit .3s forwards}
@keyframes pop{0%{color:var(--amber)}100%{transform:scale(1.5);opacity:0}}
@keyframes hit{0%{opacity:1;color:var(--red)}100%{transform:translateY(8px);opacity:0}}
.hf-field.mini .hf-w .k{color:var(--dim)}
.hf-field.mini .hf-w.atk .k{color:var(--red)}

/* 遊ぶ画面 */
.hf-battle{position:absolute;inset:0}
.hf-hud{position:absolute;left:16px;right:16px;top:8px;height:48px;display:flex;align-items:center;gap:22px}
.hf-hud .hb{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.hf-hud small{font-size:14px;color:var(--dim);margin:0}
.hf-hud b{font-size:28px;font-family:var(--hf-title);font-weight:normal}
.hf-hud .life b{color:var(--amber);font-size:22px;letter-spacing:2px}
.hf-hud .chain{position:relative;min-width:96px}
.hf-hud .chain .cbar{position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:2px;background:var(--amber);transform-origin:0 50%;transform:scaleX(0)}
.hf-hud .chain.hot b{color:var(--amber)}
.hf-hud .sub b{font-size:20px;color:var(--sub2)}
.hf-hud .pause{margin-left:auto}
.port .hf-hud{gap:14px}
.port .hf-hud b{font-size:24px}
.port .hf-hud .sub small{font-size:12px}
.port .hf-hud .sub b{font-size:17px}
.port .hf-hud .chain{min-width:70px}
.hf-fieldbox{position:absolute}
.hf-inc{position:absolute;left:8px;right:8px;top:6px;display:flex;gap:6px;flex-wrap:wrap;z-index:3;pointer-events:none}
/* 盤の中では --red が淡い桃のチョークになるので、白字にせず濃い字にする（2026-10-24 桃に白が読めない） */
.hf-inc span{font-size:16px;color:#3a0f18;background:var(--red);padding:3px 8px;border-radius:4px}
.hf-inc span.lv3{outline:2px solid var(--red);outline-offset:2px}
.hf-msgs{position:absolute;left:0;right:0;top:34%;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:4;pointer-events:none}
/* 連続の吹き出しは盤（黒板）の中に出る。地は桃色の紙ではなく濃い黒板色にし、黄・桃のチョークの字を太く見せる（2026-10-24） */
.hf-msg{font-size:30px;background:#1b3a2b;border:2px solid currentColor;border-radius:4px;padding:4px 14px;animation:msg 1.3s forwards;white-space:nowrap;font-family:var(--hf-title)}
.hf-msg.good{color:var(--amber)}
.hf-msg.bad{color:var(--red)}
@keyframes msg{0%{transform:translateY(8px);opacity:0}10%{transform:none;opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
.hf-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:72px;color:var(--amber);z-index:5;pointer-events:none;background:rgba(224,185,174,.6);font-family:var(--hf-title)}
.hf-battle.out .hf-fieldbox{filter:grayscale(1) opacity(.6)}
.hf-rivals{position:absolute}
/* 相手の盤: 名前の帯の下を 1 本の線で区切る */
.hf-panel{position:absolute;border:1px solid var(--line2);border-radius:6px;background:var(--card);overflow:hidden}
.hf-panel .ph{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:14px;border-bottom:1px solid var(--line2);background:var(--bg);gap:8px}
.hf-panel .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-panel .st{color:var(--amber);font-size:13px;white-space:nowrap}
.hf-panel .pb{position:relative}
.hf-panel .pb .hf-field{position:relative;border:0;border-radius:0;left:-1px;top:-1px}
.hf-panel .pinc{position:absolute;right:6px;top:4px;color:var(--red);font-size:13px;z-index:2}
.hf-panel .rstack{position:absolute;left:12px;right:12px;bottom:10px;display:flex;flex-direction:column-reverse;gap:3px}
.hf-panel .rstack i{display:block;height:10px;border-radius:3px;background:var(--line2)}
.hf-panel .rn{position:absolute;left:10px;top:8px;font-size:14px;color:var(--dim)}
.hf-panel.ko .pb{opacity:.25}
.hf-panel.ko::after{content:"KO";position:absolute;inset:26px 0 0;display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--red)}
.hf-pflash{position:absolute;left:0;right:0;top:40%;text-align:center;font-size:24px;color:var(--red);z-index:3;animation:msg .9s forwards;pointer-events:none}

/* かぶせる箱（一時停止など） */
.hf-over{position:absolute;inset:0;background:rgba(224,185,174,.85);display:flex;align-items:center;justify-content:center;z-index:20}
.o-box{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-width:360px;max-width:620px;text-align:center}
.o-box .hf-rules{text-align:left}
.hf-toast{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:var(--card);border:1px solid var(--line2);border-radius:6px;color:var(--ink);font-size:17px;padding:8px 18px;z-index:30;max-width:90%;text-align:center;pointer-events:none;transition:opacity .4s}

/* ミニゲーム（部屋から呼ばれる 1 回）: 相手の盤の場所に説明と残り時間 */
.mn-box{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:6px;background:var(--card);text-align:center;padding:16px}
.mn-rule{font-size:18px;color:var(--sub2);line-height:1.6}
.mn-rule b{color:var(--amber);font-weight:normal}
.mn-t{font-size:96px;line-height:1;color:var(--amber);font-family:var(--hf-title);font-weight:normal}
.mn-box.low .mn-t{color:var(--red)}
.mn-st{font-size:15px;color:var(--dim)}

/* ホーム（共通の shell.home）。絵は CPU 同士の勝負のデモ（本番の盤を縮めて流す。押しても何も起きない） */
.hf-home .sh-art{background:var(--bg);border:0}
/* 題字: キーボードの刻印（1 字 1 キー） */
.hf-logo{display:block;height:76px;width:auto}
/* 2026-10-23 ホーム・帯・盤・ウィンドウ・結果を同じ明るい紙の組に。ボタン（.ui-btn）は共通の見た目のまま（色は --ui-red などの変数だけで渡す）
   遊んでいる最中の帯: 紙の地と、下に 1 本の線 */
.hf .sh-bar{background:var(--bg);border-bottom:1px solid var(--line2)}
.hf-demo{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hf-demo .hf-droot{transform-origin:0 0}
.hf-droot .hf-hud .sub{display:none}
.hf-home .sh-foot{flex-wrap:wrap;row-gap:8px}
/* ランキングの上の 4 つの記録（最高点・最速・正確さ・勝ち数）。縦の枠では 2 つずつ。枠で囲まず上の線で区切る */
.hf-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:6px}
.sh-port .hf-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.hf-tiles div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-top:1px solid var(--line2);min-width:0}
.hf-tiles small{font-size:15px;color:var(--dim);white-space:nowrap}
.hf-tiles b{font:32px/1.1 var(--hf-title);color:var(--amber)}
.hf-tiles i{font-style:normal;font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hf-rules{list-style:none;font-size:17px;color:var(--sub2);line-height:1.65}
.hf-rules li::before{content:"・";color:var(--amber)}
.hf-rules b{color:var(--amber);font-weight:normal}

/* 遊ぶ画面: 点などの行は共通の帯（上 64px）の下に */
.hf-hud.under{top:64px;height:44px}

/* 結果（共通の shell.result に、打鍵などの 1 行を足す） */
.hf-res h2{font-family:var(--hf-title);color:var(--amber)}
.hf-rhead{font-size:16px;color:var(--dim)}
.hf-rhead b{color:var(--amber);font-weight:normal}
.hf-rsub{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:17px;color:var(--dim);max-width:900px;text-align:center}
.hf-rsub b{color:var(--sub2);font-weight:normal}
.hf-wrong{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}
.hf-wrong b{color:var(--red);font-family:var(--hf-title)}
.sh-port .hf-rsub{max-width:640px}
.hf-over .rule{font-size:17px;color:var(--sub2);line-height:1.7}
.hf-over .rule b{color:var(--amber)}
.hf h3{font-size:18px;margin-bottom:8px}
.hf-list{list-style:none;font-size:18px}
.hf-list li{display:flex;gap:12px;padding:5px 4px;border-bottom:1px solid var(--line)}
.hf-list li .n{width:3em;color:var(--dim)}
.hf-list li .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-list li .v{color:var(--amber)}
.hf-list li.me{background:var(--tint);border-radius:4px}
.hf-list li.best{color:var(--amber);background:var(--tint);border-radius:4px;justify-content:center;border:0}
.hf-list .empty{color:var(--dim);font-size:16px;border:0}

/* ランキング・設定・復習・一時停止（どれも小さなウィンドウ shell.panel の中） */
.hf-rec h3{font-size:18px;margin:14px 0 6px}
.hf-rec h3:first-child{margin-top:0}
.hf-rec .tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.hf-rec .tabs .ui-btn,.hf-rec .js-rev{white-space:nowrap}
.hf-pmenu{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.rec-best{width:100%;border-collapse:collapse;font-size:18px;margin-bottom:10px}
.rec-best td{padding:5px 4px;border-bottom:1px solid var(--line)}
.rec-best td.v{color:var(--amber);text-align:right}
.rec-best th{font-weight:normal;color:var(--dim);text-align:right;font-size:14px;padding:3px 4px}
.rec-sum{font-size:15px;color:var(--sub2);margin-bottom:14px;line-height:1.6}
.rec-sum b{color:var(--amber)}
.rec-hist{width:100%;border-collapse:collapse;font-size:15px}
.rec-hist th{font-weight:normal;color:var(--dim);text-align:right;padding:3px 4px}
.rec-hist td{text-align:right;padding:4px;border-bottom:1px solid var(--line)}
.rec-hist th:first-child,.rec-hist td:first-child{text-align:left}
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.hf-set{display:flex;flex-direction:column;gap:14px}
.hf-srow{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.hf-srow .lab{width:170px;font-size:18px;line-height:1.3}
.hf-srow .lab small{display:block;font-size:13px;margin:2px 0 0}
.hf-srow .opts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1;min-width:0}
/* 復習 */
.hf-rv{display:flex;flex-direction:column;gap:10px}
.hf-rvbtns{display:flex;gap:10px}
.hf-rvbtns .js-play{flex:2}
.hf-rvbtns .js-clear{flex:1}
.hf-rvlist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:4px 16px}
.hf-rvlist li{display:flex;gap:8px;align-items:baseline;padding:4px 2px;border-bottom:1px solid var(--line);font-size:16px;min-width:0}
.hf-rvlist b{font-family:var(--hf-title);font-weight:normal;font-size:19px}
.hf-rvlist span{flex:1;color:var(--sub2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-rvlist i{font-style:normal;color:var(--red);font-size:14px}

/* 部屋の待合 */
.w-box{position:absolute;left:40px;top:36px;right:40px;bottom:36px;display:flex;flex-direction:column;gap:16px}
.w-box .rule{font-size:17px;color:var(--sub2);line-height:1.7}
.w-box .rule b{color:var(--amber)}
.w-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.w-list li{background:var(--soft);border-radius:6px;padding:8px 12px;font-size:20px;display:flex;justify-content:space-between}
.w-list li.ok{background:var(--tint)}
.w-list li .r{color:var(--dim);font-size:16px}
.w-list li.ok .r{color:var(--amber)}
.w-box .js-ready{align-self:flex-start;min-width:320px}
.w-res{list-style:none;font-size:22px;text-align:left}
.w-res li{display:flex;gap:16px;padding:6px 0;border-bottom:1px solid var(--line)}
.w-res li .n{width:3em;color:var(--amber)}
.w-res li.me{color:var(--amber)}
/* 遊び方の図（本番と同じ盤の部品で描いた場面。赤い丸・矢印で指す） */
.hf-pic{position:relative;width:260px;height:160px;margin:0 auto;overflow:hidden;font-family:var(--hf-title);color:var(--ink)}
.hf-pic svg{position:absolute;left:0;top:0;width:260px;height:160px;z-index:3;pointer-events:none;overflow:visible}
/* 指す丸・矢印は黒板の上で見える珊瑚色のチョーク */
.hf-pic svg ellipse,.hf-pic svg circle{fill:none;stroke:#F58A6E;stroke-width:3}
.hf-pic svg circle.dot{fill:#F58A6E;stroke:none}
.hf-pic svg line{stroke:#F58A6E;stroke-width:3;stroke-linecap:round}
.hf-pic svg polygon{fill:#F58A6E}
.hf-pic-tag{position:absolute;z-index:2;font-size:15px;line-height:1;white-space:nowrap;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:4px 7px}
.hf-pic-tag b{font-weight:normal;color:var(--amber)}
.hf-pic-tag.am{color:var(--amber);border-color:var(--line2)}
.hf-pic-lbl{position:absolute;z-index:2;font-size:13px;line-height:16px;color:var(--dim);white-space:nowrap}
.hf-pic-key{position:absolute;z-index:2;min-width:26px;height:26px;padding:0 7px;box-sizing:border-box;border:1px solid var(--line2);border-bottom-width:3px;border-radius:5px;background:var(--card);font-size:15px;line-height:21px;color:var(--ink);text-align:center;white-space:nowrap}
.hf-pic-kb{position:absolute;left:0;right:0;bottom:0;height:52px;z-index:1;background:var(--soft);border-top:1px solid var(--line2);display:grid;grid-template-columns:repeat(10,1fr);gap:3px;padding:4px;box-sizing:border-box}
.hf-pic-kb i{font-size:12px;line-height:19px;text-align:center;background:var(--card);border-radius:3px;color:var(--ink)}
.hf-pic-ko{filter:grayscale(1) opacity(.45)}
.hf-pic-kot{position:absolute;z-index:2;left:136px;top:18px;width:124px;height:142px;display:flex;align-items:center;justify-content:center;font-size:36px;color:#7a1428;pointer-events:none}
.hf-pic-pause{position:absolute;z-index:2;right:6px;top:4px;width:28px;height:28px;border:1px solid var(--line2);border-radius:6px;background:var(--card);font-size:15px;line-height:26px;text-align:center;color:var(--ink)}