:root{--bg:#0d0f0c;--pane:#11140f;--line:#2c2e26;--line2:#454739;--ink:#e8e2c8;--dim:#8a866f;--amber:#f2b233;--red:#e2552e}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);overflow:hidden}
body{font-family:"DotGothic16",ui-monospace,monospace;-webkit-text-size-adjust:100%;touch-action:manipulation}
.hf{font-family:"DotGothic16",ui-monospace,monospace;color:var(--ink);background:var(--bg);-webkit-user-select:none;user-select:none}
.hf b{font-weight:normal}
.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-btn{font:inherit;font-size:22px;color:var(--ink);background:transparent;border:2px solid var(--line2);padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:12px;line-height:1.1}
.hf-btn:hover,.hf-btn:focus-visible{border-color:var(--amber);outline:none}
.hf-btn small{font-size:14px;color:var(--dim)}
.hf-btn.pri{background:var(--amber);border-color:var(--amber);color:#14110a}
.hf-btn.pri small{color:#5a4510}
.hf-btn.pri:hover{background:#ffc54a}
.hf-btn.big{font-size:30px;padding:16px 22px}
.hf-btn.on{border-color:var(--amber);color:var(--amber)}
.hf-btn:disabled{opacity:.4;cursor:default}
.hf-text{font:inherit;font-size:24px;background:#000;color:var(--amber);border:2px solid var(--line2);padding:8px 12px;outline:none;letter-spacing:.15em;width:100%;min-width:0;-webkit-user-select:text;user-select:text}
.hf-text:focus{border-color:var(--amber)}
.hf-text::placeholder{color:#5c5a4b;letter-spacing:0;font-size:18px}

/* 盤 */
.hf-field{position:absolute;background:var(--pane);border:2px solid var(--line);overflow:hidden}
.hf-field .floor{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--red);opacity:.55}
.hf-field.danger{border-color:#6a3020}
.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}
.hf-w b{color:var(--amber)}
.hf-w.tgt .k{border-bottom:2px solid var(--amber)}
.hf-w.tgt .r{color:#c9c2a2}
.hf-w.atk .k{color:var(--red)}
.hf-w.atk .k b{color:var(--amber)}
.hf-w.lv2 .k,.hf-w.lv3 .k{text-shadow:0 0 0 currentColor,2px 2px 0 #3a160c}
.hf-w.lv3 .k{background:#2a120b;padding:2px 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:#bdb79c}
.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)}
.hf-hud b{font-size:28px}
.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;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:#c9c2a2}
.hf-hud .pause{margin-left:auto;font-size:18px;padding:6px 14px}
.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}
.hf-inc span{font-size:16px;color:#14110a;background:var(--red);padding:3px 8px}
.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}
.hf-msg{font-size:28px;background:#0d0f0ccc;padding:4px 12px;animation:msg 1.3s forwards;white-space:nowrap}
.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:#0d0f0c88}
.hf-battle.out .hf-fieldbox{filter:grayscale(1) brightness(.6)}
.hf-rivals{position:absolute}
.hf-panel{position:absolute;border:2px solid var(--line);background:#0f110d;overflow:hidden}
.hf-panel .ph{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;font-size:15px;border-bottom:2px solid var(--line);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;left:-2px;top:-2px}
.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;background:#3c3e32}
.hf-panel .rn{position:absolute;left:10px;top:8px;font-size:14px;color:var(--dim)}
.hf-panel.ko{border-color:#1f211b}
.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:#0d0f0cdd;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:20}
.hf-over h2{font-size:44px;font-weight:normal;margin-bottom:8px}
.hf-over .hf-btn{min-width:280px}
.hf-toast{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:#000;border:2px solid var(--amber);color:var(--ink);font-size:17px;padding:8px 14px;z-index:30;max-width:90%;text-align:center;pointer-events:none;transition:opacity .4s}

/* タイトル */
.t-head{position:absolute;left:40px;top:34px;width:520px}
.t-head .logo{display:flex;flex-direction:column;line-height:1.05}
.t-head .l1{font-size:34px;color:var(--amber)}
.t-head .l2{font-size:56px}
.t-head .lead{margin-top:14px;font-size:18px;color:#c9c2a2;line-height:1.6}
.t-demo{position:absolute;left:40px;top:248px}
.t-demo .demo{position:relative}
.t-demo .demo.hf-field{position:relative}
.t-demo .hint{margin-top:12px;font-size:20px;color:#c9c2a2}
.t-demo .hint b{color:var(--amber);font-size:24px;letter-spacing:.05em}
.t-menu{position:absolute;left:600px;top:40px;width:440px;display:flex;flex-direction:column;gap:12px}
.t-menu .note{font-size:15px;color:var(--dim);margin-top:-4px}
.t-menu .t-sep{margin-top:10px;font-size:15px;color:var(--dim);border-bottom:2px solid var(--line);padding-bottom:6px}
.t-room label{display:block;font-size:18px;margin-bottom:6px}
.t-room .row{display:flex;gap:8px}
.t-room .row .hf-btn{flex:none}
.t-menu .count{font-size:16px;color:var(--dim)}
.t-menu .count b{color:var(--ink)}
.t-menu .row2{display:flex;gap:8px}
.t-menu .row2 .hf-btn{flex:1}
.t-menu .best{font-size:16px;color:var(--dim)}
.t-menu .best b{color:var(--amber)}
.port .t-head{width:640px}
.port .t-head .l2{font-size:58px}
.port .t-demo{top:230px}
.port .t-menu{left:40px;top:572px;width:640px;gap:10px}
.port .t-menu .hf-btn.big{font-size:28px;padding:12px 20px}

/* 結果 */
.r-box{position:absolute;left:40px;top:36px;width:560px}
.r-box h2{font-size:32px;font-weight:normal;color:var(--dim)}
.r-score{display:flex;align-items:baseline;gap:10px;margin:6px 0 14px}
.r-score b{font-size:96px;color:var(--amber);line-height:1}
.r-score small{font-size:26px}
.r-score .new{font-size:18px;color:#14110a;background:var(--amber);padding:3px 8px;align-self:center}
.r-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.r-stats div{border:2px solid var(--line);padding:8px 12px}
.r-stats dt{font-size:14px;color:var(--dim)}
.r-stats dd{font-size:30px}
.r-stats dd small{font-size:15px;color:var(--dim);margin-left:4px}
.r-btns{display:flex;gap:10px;margin-top:20px}
.r-btns .hf-btn{flex:1}
.r-rank{position:absolute;left:640px;top:40px;width:400px}
.port .r-box{width:640px}
.port .r-rank{left:40px;top:590px;width:640px}
.hf-over .rule{font-size:18px;color:#c9c2a2;text-align:center;line-height:1.7}
.hf-over .rule b{color:var(--amber)}
.hf-over .w-res{min-width:360px}
.hf h3{font-size:18px;font-weight:normal;color:var(--dim);border-bottom:2px solid var(--line);padding-bottom:6px;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 #1d1f19}
.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:#1d1a0e}
.hf-list li.best{color:var(--amber);border:2px solid var(--amber);justify-content:center}
.hf-list .empty{color:var(--dim);font-size:16px;border:0}
.shell-share{gap:8px}
.shell-share button{font-family:"DotGothic16",ui-monospace,monospace;font-size:16px;border-radius:0;border:2px solid var(--line2);color:var(--ink);padding:6px 14px}
.shell-share button:hover{border-color:var(--amber)}
.shell-share .shell-done{color:var(--dim)}

/* 記録・設定・さがす */
.p-head{position:absolute;left:40px;top:30px;right:40px;display:flex;align-items:center;justify-content:space-between}
.p-head h2{font-size:40px;font-weight:normal}
.p-head .hf-btn{font-size:18px;padding:8px 14px}
.rec-l{position:absolute;left:40px;top:110px;width:480px}
.rec-r{position:absolute;left:560px;top:110px;width:480px}
.port .rec-l{width:640px}
.port .rec-r{left:40px;top:600px;width:640px}
.rec-best{width:100%;border-collapse:collapse;font-size:20px;margin-bottom:12px}
.rec-best td{padding:6px 4px;border-bottom:1px solid #1d1f19}
.rec-best td.v{color:var(--amber);text-align:right}
.rec-sum{font-size:16px;color:#c9c2a2;margin-bottom:18px;line-height:1.6}
.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 #1d1f19}
.rec-hist th:first-child,.rec-hist td:first-child{text-align:left}
.tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tabs .hf-btn{font-size:16px;padding:6px 12px}
.set-list{position:absolute;left:40px;top:120px;right:40px;display:flex;flex-direction:column;gap:22px}
.set-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.set-row .lab{width:220px;font-size:22px}
.set-row .lab small{display:block;font-size:14px;color:var(--dim);margin-top:4px}
.set-row .opts{display:flex;gap:8px;flex-wrap:wrap}
.set-row .opts .hf-btn{font-size:20px;padding:8px 16px}
.set-row .nick{font-size:24px;color:var(--amber);min-width:8em}
.set-help{position:absolute;left:40px;right:40px;bottom:40px;font-size:16px;color:var(--dim);line-height:1.8;border-top:2px solid var(--line);padding-top:14px}
.port .set-row .lab{width:100%}
.f-box{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.f-box h2{font-size:36px;font-weight:normal}
.f-box .left{font-size:96px;color:var(--amber);line-height:1}
.f-box .wait{font-size:22px}
.f-box .note{font-size:16px;color:var(--dim)}
.f-box .dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"・"}50%{content:"・・"}75%{content:"・・・"}}

/* 部屋の待合 */
.w-box{position:absolute;left:40px;top:36px;right:40px;bottom:36px;display:flex;flex-direction:column;gap:16px}
.w-box h2{font-size:38px;font-weight:normal}
.w-box .rule{font-size:17px;color:#c9c2a2;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{border:2px solid var(--line);padding:8px 12px;font-size:20px;display:flex;justify-content:space-between}
.w-list li.ok{border-color:var(--amber)}
.w-list li .r{color:var(--dim);font-size:16px}
.w-list li.ok .r{color:var(--amber)}
.w-box .hf-btn.pri{align-self:flex-start;min-width:320px}
.w-res{list-style:none;font-size:24px}
.w-res li{display:flex;gap:16px;padding:6px 0;border-bottom:1px solid #1d1f19}
.w-res li .n{width:3em;color:var(--amber)}
.w-res li.me{color:var(--amber)}