/* ============================================================
   OPENFRONT クローン ─ HUD
   v0.1のシアン系サイバー調は踏襲しつつ、情報密度を上げる方向で作り直し
   ============================================================ */
:root {
  --bg: #02060c;
  --accent: #00f2ff;
  --兵: #ff9d4d;
  --労: #7fe0b0;
  --金: #ffe45c;
  --征: #ff6b8a;
  --panel: rgba(4, 14, 26, 0.86);
  --line: rgba(0, 242, 255, 0.28);
  --text: #dff3f8;
}

* { box-sizing: border-box; }
/* ブラウザ標準の部品（チェック・選択欄の開いた一覧）を暗い画面に合わせる（2026-10-21 K90）。
   チェックは既定の青白のままで浮いていた。color-scheme で選択欄の一覧も暗くなる */
:root { color-scheme: dark; }
input[type=checkbox], input[type=radio] { accent-color: #00c8d6; }
/* スクロールバーを暗い画面に合わせる（2026-10-21 K84）。施設・ヘルプ・設定・部屋一覧で白い既定のバーが浮いていた */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 242, 255, 0.32) rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.25); }
::-webkit-scrollbar-thumb { background: rgba(0, 242, 255, 0.32); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 242, 255, 0.55); }
::-webkit-scrollbar-corner { background: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', 'Yu Gothic UI', 'Meiryo', sans-serif;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
}

canvas {
  display: block;
  position: absolute;
  inset: 0;
  cursor: crosshair;
}
#game, #ミニマップ { touch-action: none; }   /* 指の操作は 400_入力.js が受ける（ブラウザのスクロール・拡大にしない。2026-10-20） */

.ui { position: absolute; z-index: 10; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, .7);
  padding: 14px 16px;
  border-radius: 3px;
}

.panel h1 {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

/* ---- 上部 ---- */
#hud上 {
  top: 14px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
/* 上部の文字の後ろに薄い暗がり（2026-10-21 K83）: 地図の国名と重なっても占有率と時計が読めるように。押す操作は下へ通す */
#hud上::before {
  content: ''; position: absolute; left: 50%; top: -14px; width: 340px; height: 150px; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(ellipse at 50% 30%, rgba(2, 8, 16, .62) 0%, rgba(2, 8, 16, .35) 45%, rgba(2, 8, 16, 0) 72%);
  pointer-events: none;
}
#占有率 {
  font-size: 40px; font-weight: 800; line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 24px rgba(0, 242, 255, .65);
  font-variant-numeric: tabular-nums;
}
.小見出し { font-size: 10px; letter-spacing: 5px; opacity: .55; margin-top: 4px; }
/* 勝利までの進み具合（2026-10-20）: 幅いっぱい＝勝利の割合。水色＝自分、縦線＝1位の国 */
#勝利帯 { position: relative; width: 160px; height: 4px; margin: 6px auto 0; background: rgba(255,255,255,.12); border-radius: 2px; display: none; }
#勝利帯_自分 { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); border-radius: 2px; }
#勝利帯_首位 { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: #fff; border-radius: 1px; box-shadow: 0 0 4px rgba(0,0,0,.8); }
#フェーズ表示 { margin-top: 8px; font-size: 13px; color: #ffe45c; min-height: 18px;
  /* 地図の国名ラベルと重なっても読めるよう、外交の札と同じ半透明の下地（2026-10-20） */
  display: inline-block; padding: 1px 10px; border-radius: 9px; background: rgba(0,0,0,.5); text-shadow: 0 1px 2px #000; }
#フェーズ表示:empty { background: none; padding: 0; }
/* 残り30秒から時計を赤く（2026-10-20 K66） */
#フェーズ表示.残りわずか { color: #ff8a9c; animation: 残り脈 1s ease-in-out infinite; }
@keyframes 残り脈 { 50% { background: rgba(120, 0, 20, .65); } }
@media (prefers-reduced-motion: reduce) { #フェーズ表示.残りわずか { animation: none; background: rgba(120, 0, 20, .55); } }
/* 一時停止（K28）。上部は押せない層なので、このボタンだけ押せるようにする */
#一時停止ボタン { pointer-events: auto; margin-left: 6px; vertical-align: 1px; }
/* 同盟・停戦・攻めてきている国を常に出す（2026-10-10 本人指摘「右クリックしないと状況がつかめない」） */
/* 国が滅んだ時の帯（2026-10-20 K55）。3秒出して消える */
#滅亡帯 { margin-top: 6px; font-size: 13px; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; height: 0; overflow: visible; }
#滅亡帯.出 { opacity: 1; transform: none; height: auto; }
#滅亡帯 .名 { display: inline-block; padding: 2px 12px; border-left: 4px solid #fff; border-radius: 3px; background: rgba(40, 0, 8, .72); color: #ffd6dc; font-weight: 700; text-shadow: 0 1px 2px #000; }
#滅亡帯 .残り { display: inline-block; padding: 2px 10px 2px 4px; border-radius: 0 3px 3px 0; background: rgba(40, 0, 8, .72); color: #ffe45c; font-weight: 700; text-shadow: 0 1px 2px #000; }
#滅亡帯 .残り:empty { display: none; }
@media (prefers-reduced-motion: reduce) { #滅亡帯 { transition: none; transform: none; } }
#外交表示 { margin-top: 4px; font-size: 12px; line-height: 1.6; color: #cfe; min-height: 0; }
#外交表示 .札 { display: inline-block; margin: 0 3px; padding: 0 6px; border-radius: 9px; background: rgba(0,0,0,.45); white-space: nowrap; }
#外交表示 .同盟 { border: 1px solid #5fd38a; }
/* 同盟が残り60秒を切った札（2026-10-20）: 上部は押せない層なので、この札だけ押せる（押すと延長） */
#外交表示 .まもなく { pointer-events: auto; cursor: pointer; animation: 同盟点滅 1.2s ease-in-out infinite; }
@keyframes 同盟点滅 { 50% { background: rgba(95, 211, 138, .35); } }
@media (prefers-reduced-motion: reduce) { #外交表示 .まもなく { animation: none; background: rgba(95, 211, 138, .25); } } #外交表示 .停戦 { border: 1px solid #ffd34d; } #外交表示 .交戦 { border: 1px solid #ff6b8a; }

/* ---- 左右パネル ---- */
/* 左列は 国力(固定) + 施設(可変・スクロール) を縦に積む。画面高に自動追従する */
#左列 {
  left: 14px; top: 14px; bottom: 96px; width: 250px;
  display: flex; flex-direction: column; gap: 10px;
}
#左パネル { flex: 0 0 auto; }
/* 兵器・艦船は施設の右にもう1列。縦に積むと画面が低い時にスクロールしないと発射できなくなる */
#兵器列 {
  left: 274px; top: 14px; bottom: 96px; width: 230px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
}
#兵器パネル { padding: 0; }   /* 2026-10-10 から施設パネルの中（下側）に入れている */
#兵器パネル h1 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; padding-bottom: 6px; }
.連続行 { margin-top: 8px; }
.連続行 input { width: auto; margin: 0; }
#右パネル { top: 14px; right: 14px; width: 252px; max-height: calc(100vh - 28px - var(--ミニ高, 0px)); overflow: hidden; }
/* 広い画面（1920×1080 級）では左右の列を広げ、施設の効き目・国名を切らずに見せる（2026-10-21。ミニマップの「広」と同じ境目） */
@media (min-width: 1700px) and (min-height: 950px) {
  #左列 { width: 300px; }
  #右パネル, #外交パネル { width: 290px; }
}
/* 全体図（2026-10-20）。大きさは 250_ミニマップ.js が地図の縦横比で決める */
#ミニマップ { inset: auto 14px 14px auto; display: none; cursor: crosshair; border: 1px solid var(--line); border-radius: 6px;
  background: #02060c; box-shadow: 0 4px 18px rgba(0,0,0,.55); }

.行 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 12px; }
.行 > span:first-child { opacity: .62; }
.値 { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.値.兵 { color: var(--兵); }
.値.労 { color: var(--労); }
.値.金 { color: var(--金); }
.値.征 { color: var(--征); }
.キャプション { font-size: 10px; opacity: .45; margin-top: 3px; line-height: 1.4; }
/* 国ごとの特性（v0.10.17）は見出しの横に名前だけ。説明はヘルプへ */
.特性札:not(:empty) { font-size: 10px; font-weight: normal; letter-spacing: .06em; margin-left: 8px;
  padding: 2px 7px; border: 1px solid rgba(0, 242, 255, .35); color: #7fe6ff; vertical-align: middle; }
.区切り { height: 1px; background: var(--line); margin: 12px 0; }
.ラベル { cursor: default; }

.バー枠 { height: 5px; background: rgba(255, 255, 255, .09); margin-top: 8px; overflow: hidden; }
.バー { height: 100%; width: 0%; background: linear-gradient(90deg, #00f2ff, #7fe0b0); transition: width .2s; }

input[type=range] {
  width: 100%; height: 20px; margin: 4px 0 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 4px; background: rgba(255, 255, 255, .16);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
}

/* ---- ランキング ---- */
.順位行 {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; padding: 3px 4px; border-radius: 2px;
}
.順位行.自分 { background: rgba(0, 242, 255, .12); outline: 1px solid rgba(0, 242, 255, .3); }
.順位行.死亡 { opacity: .3; text-decoration: line-through; }
.順位行 { cursor: pointer; }   /* 押すとその国へ移る（2026-10-20） */
.順位行:hover { background: rgba(255, 255, 255, .06); }
.色札 { width: 4px; height: 14px; flex: 0 0 4px; }
.色札.模様札 { width: 14px; flex: 0 0 14px; background-size: 14px 14px; image-rendering: pixelated; border-radius: 2px; }   /* 領土の模様（K101）*/
.模様欄 { display: flex; align-items: center; gap: 8px; }
.模様欄 select { width: auto; min-width: 96px; margin: 0; background: rgba(0, 0, 0, .45); border: 1px solid var(--line);
  color: var(--text); padding: 3px 8px; font-family: inherit; font-size: 12px; border-radius: 2px; }
#模様見本 { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; background-size: 20px 20px; image-rendering: pixelated; border-radius: 3px; }
.国名 { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.占有 { font-variant-numeric: tabular-nums; opacity: .9; }
.交戦 { color: var(--征); font-size: 10px; }

/* ---- 作戦パネル ---- */
#下段 {
  bottom: 14px; left: 50%; transform: translateX(-50%); width: 420px;
  display: flex; flex-direction: column; gap: 8px;
}
#攻撃パネル, #侵攻パネル { width: 100%; }
/* 攻め込まれている相手（2026-09-06）。押すと取り返しに向かう */
#侵攻パネル { border-color: rgba(255, 107, 138, .55); box-shadow: 0 0 22px rgba(255, 107, 138, .18); }
#侵攻パネル h1 { color: #ff6b8a; }
.侵攻行 {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font-size: 12px; margin-bottom: 5px; padding: 4px 6px;
  background: rgba(255, 107, 138, .10); border: 1px solid rgba(255, 107, 138, .28);
  color: inherit; font-family: inherit; text-align: left; cursor: pointer;
}
.侵攻行:hover { background: rgba(255, 107, 138, .24); }
.侵攻行:disabled { opacity: .5; cursor: default; }
.侵攻行 .国名 { flex: 1 1 auto; font-weight: 700; }
.侵攻行 .兵 { font-variant-numeric: tabular-nums; color: var(--征); font-weight: 700; }
.侵攻行 .減 { font-variant-numeric: tabular-nums; color: #ff6b8a; font-size: 11px; min-width: 34px; text-align: right; }
.侵攻行 .反撃 { font-size: 10px; opacity: .8; border: 1px solid rgba(255,255,255,.25); padding: 1px 6px; }
.作戦行 { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 5px; }
.作戦行 { cursor: pointer; border-radius: 4px; }   /* 押すとその前線へ（2026-10-20） */
.作戦行:hover { background: rgba(255, 255, 255, .05); }
.作戦行 .対象 { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.撤退ボタン {
  background: rgba(255, 107, 138, .16); border: 1px solid rgba(255, 107, 138, .5);
  color: #ffb3c2; font-size: 10px; padding: 2px 8px; cursor: pointer; border-radius: 2px;
}
.撤退ボタン:hover { background: rgba(255, 107, 138, .34); }
.撤退ボタン:disabled { opacity: .4; cursor: default; }

/* ---- ログ ---- */
#ログ {
  left: 14px; bottom: 14px; width: 330px; max-height: 74px;
  overflow: hidden; display: flex; flex-direction: column-reverse;
  pointer-events: none; font-size: 11px; line-height: 1.55;
  text-shadow: 0 1px 3px #000;
  /* 2026-10-21 K86: 74px は4.35行ぶんで、5行目が上半分だけ見えて文字が崩れていた。ちょうど4行にし、古い行ほど薄く */
  max-height: 6.2em;
  -webkit-mask-image: linear-gradient(to top, #000 55%, rgba(0, 0, 0, .35));
  mask-image: linear-gradient(to top, #000 55%, rgba(0, 0, 0, .35));
}
#ログ div { opacity: .85; }

/* ---- ツールチップ ---- */
#吹き出し {
  position: absolute; z-index: 30; display: none; pointer-events: none;
  background: rgba(2, 10, 20, .94); border: 1px solid var(--line);
  padding: 6px 10px; font-size: 11.5px; line-height: 1.6; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .8);
}

/* ---- 通知 ---- */
/* z-index はロビー（60）と窓（86）より上（2026-10-20: 40 だとロビーの裏に隠れ、「合言葉が違います」などロビーでの知らせが見えなかった）。押す操作は下へ通す */
#通知欄 { position: absolute; z-index: 95; pointer-events: none; top: 120px; left: 50%; transform: translateX(-50%); text-align: center; }
.通知 {
  background: rgba(2, 12, 24, .92); border: 1px solid var(--line);
  padding: 7px 18px; margin-bottom: 6px; font-size: 12.5px;
  animation: 浮上 .25s ease-out;
}
@keyframes 浮上 { from { opacity: 0; transform: translateY(8px); } }

/* ---- オーバーレイ ---- */
#覆い {
  position: absolute; inset: 0; z-index: 50; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px);
  pointer-events: none; text-align: center;
}
/* 勝った時の紙吹雪（2026-10-20 K67）。覆いの奥（文字の後ろ）に降らせる */
#覆い > .紙吹雪 { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#覆い > :not(.紙吹雪) { position: relative; z-index: 1; }
.紙吹雪 span { position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 1px; opacity: .9; animation-name: 紙落ち; animation-timing-function: cubic-bezier(.25, .35, .55, 1); animation-fill-mode: both; }
@keyframes 紙落ち { from { transform: translate(0, 0) rotate(0); opacity: 1; } 80% { opacity: 1; } to { transform: translate(var(--横), 105vh) rotate(var(--回)); opacity: 0; } }
#覆い見出し { font-size: 62px; font-weight: 800; letter-spacing: 6px; text-shadow: 0 0 44px currentColor; }
#覆い本文 { margin-top: 12px; font-size: 16px; opacity: .85; }
#覆いタイマー { margin-top: 22px; font-size: 15px; color: var(--accent); letter-spacing: 2px; }
#覆い戦績 { margin-top: 18px; max-height: 46vh; overflow-y: auto; pointer-events: auto; }
/* 国を持たずに見ている間は左の国力・施設・兵器（全部0）を出さない（2026-10-21 K95。300_UI.js が body に付ける） */
body.国なし観戦 #左列, body.国なし観戦 #切替帯 [data-開="左列"] { display: none !important; }
#覆い戦績 table { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; margin: 0 auto; }   /* 2026-10-21: 表だけ左に寄ってグラフとずれていた */
#覆い戦績 th { font-weight: 600; opacity: .55; padding: 3px 10px; border-bottom: 1px solid rgba(255,255,255,.18); }
/* 2026-10-21 K88: 表を送っても見出しが残るように。低い画面（820px以下）は見出しと余白を詰めて表の行を多く見せる
   （1280×720 では推移のグラフの下に2行しか見えなかった） */
#覆い戦績 thead th { position: sticky; top: 0; z-index: 1; background: #07121c; opacity: 1; color: rgba(223, 243, 248, .6); }
.戦績要約 .印 { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
@media (max-height: 820px) {
  #覆い見出し { font-size: 40px; letter-spacing: 3px; }
  #覆い本文 { margin-top: 4px; font-size: 14px; }
  #覆い戦績 { margin-top: 10px; max-height: calc(100vh - 290px); }
  #覆いタイマー { margin-top: 10px; }
  #覆い退出 { margin-top: 12px; }
  #覆いリプレイ { margin-top: 6px; }
}
#覆い戦績 td { padding: 3px 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
#覆い戦績 td.名 { text-align: left; }
#覆い戦績 tr.自分 td { background: rgba(0,242,255,.12); color: #dff; }
#覆い戦績 .印 { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
#覆い戦績 .敗 { opacity: .5; }
/* 領土の推移（2026-10-20）。canvas 全体の absolute を打ち消して表の上に置く */
.推移枠 { margin: 0 auto 12px; width: 560px; max-width: 100%; position: relative; }
.結果保存行 { display: flex; justify-content: flex-end; margin-bottom: 6px; }   /* 📷 画像で保存（K100） */
.結果保存行 .小ボタン { font-size: 11px; padding: 2px 10px; pointer-events: auto; }
.推移切替 { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 4px; }   /* 領土／兵力（v0.10.219） */
.推移切替 .小ボタン { padding: 1px 10px; font-size: 11px; pointer-events: auto; }
.推移切替 .選択中 { background: rgba(0, 242, 255, .25); border-color: var(--accent); color: #fff; }
.推移札 { position: absolute; top: 6px; display: none; pointer-events: none; z-index: 2; min-width: 120px; text-align: left;
  font-size: 11px; line-height: 1.5; padding: 5px 8px; border-radius: 4px; background: rgba(2, 6, 12, .9); border: 1px solid var(--line); }
.推移図 { position: static; inset: auto; display: block; cursor: default; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; }
.推移凡例 { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 6px; font-size: 11px; opacity: .85; }
.推移凡例 i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* ---- ヘルプ ---- */
/*  説明文は画面に出さない（グローバルルール: UIに無駄な表示をしない）。
    ここに書いたものは「？」ボタン→「操作」章がまとめて拾って見せる。 */
.説明 { display: none !important; }
/*  UIの大きさ（設定→画面）。canvas は対象外なので座標計算に影響しない */
.panel, #ログ { zoom: var(--ui倍率, 1); }
.ヘルプ見出し風 { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.パッド確認 { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.パッド玉 {
  width: 26px; height: 26px; border-radius: 50%; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #2b4356; color: #7fa; opacity: .45;
}
.パッド玉.押 { background: #00f2ff; color: #012; opacity: 1; border-color: #00f2ff; }
.割当行 { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.割当行 .名 { flex: 1; }
.割当行 .番 { width: 64px; text-align: right; color: #9cf; }
.割当行.待ち .番 { color: #ffd34d; }
.軸ラベル {
  display: flex; justify-content: space-between;
  font-size: 10px; opacity: .45; margin-top: 2px;
}


/* ---- 施設ウインドウ ---- */
#施設パネル { flex: 0 1 auto; min-height: 140px; padding: 10px 12px; }   /* 2026-10-21: 1 1 auto だと高い画面で中身の下に大きな空きが出た。中身の高さで止め、低い画面では縮んで送る */
#施設パネル h1 { display: flex; justify-content: space-between; align-items: baseline; }
.金額 { color: var(--金); font-size: 15px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.金額 .収入 { font-size: 10px; opacity: .7; margin-right: 4px; }
.施設行 {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text); padding: 4px 7px; margin-bottom: 4px; cursor: pointer;
  font-family: inherit; font-size: 11px; line-height: 1.5;
  transition: background .12s, border-color .12s;
}
.施設行:hover { background: rgba(0, 242, 255, .13); }
.施設行.建設可 { border-color: rgba(0, 242, 255, .55); background: rgba(0, 242, 255, .09); }
.施設行.不足 { opacity: .42; cursor: default; }
.施設行.選択中 { border-color: var(--accent); background: rgba(0, 242, 255, .26); box-shadow: 0 0 12px rgba(0, 242, 255, .35) inset; }
.施設行 .名 { font-weight: 700; flex: 0 0 56px; }
.施設行 .効 { flex: 1 1 auto; font-size: 9.5px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.施設行 .数 { font-size: 10px; opacity: .55; flex: 0 0 auto; }
.施設行 .数.止まってる { color: #ff6b8a; opacity: .95; }
.施設行 .費 { color: var(--金); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
/* 兵器ごとの「サイロが要る」「再装填◯秒」。空文字なら幅も取らない */
.施設行 .兵状態 { font-size: 9.5px; flex: 0 0 auto; opacity: .9; }
.施設行 .兵状態:empty { display: none; }

/* ---- ボタン ---- */
.小ボタン {
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 10px; padding: 2px 9px; cursor: pointer; border-radius: 2px;
  letter-spacing: 0; font-weight: 400;
}
.小ボタン:hover { background: rgba(0, 242, 255, .22); }
.大ボタン {
  display: block; width: 100%; margin-top: 14px; padding: 12px;
  background: rgba(0, 242, 255, .12); border: 1px solid var(--accent); color: var(--accent);
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 2px;
  cursor: pointer; border-radius: 2px;
}
.大ボタン:hover { background: rgba(0, 242, 255, .28); }
#覆い退出 { width: 240px; margin-top: 26px; pointer-events: auto; }
#覆いリプレイ { width: 240px; margin-top: 10px; pointer-events: auto; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .25); font-size: 13px; }
.戦績要約 { margin-bottom: 10px; font-size: 15px; color: #dff; }
.戦績要約 b { color: #00f2ff; }
/* 決着の表の見出しで並べ替え（2026-10-20 K68） */
#覆い戦績 th.並べ替え { cursor: pointer; user-select: none; }
#覆い戦績 th.並べ替え:hover { color: #00f2ff; }
/* 部門ごとの1位（2026-10-20 K61） */
.部門一位 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: -2px 0 10px; }
.部門一位 .部門 { padding: 2px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; color: #cfe; white-space: nowrap; }
.部門一位 .部門 .印 { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 3px 0 4px; vertical-align: 0; }
.部門一位 .部門.自分 { border-color: #00f2ff; background: rgba(0, 242, 255, .12); color: #fff; box-shadow: 0 0 8px rgba(0, 242, 255, .35); }

/* ---- ロビー ---- */
#ロビー {
  position: absolute; inset: 0; z-index: 60; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 20%, #06182c 0%, #02060c 70%);
  display: flex; justify-content: center; padding: 40px 20px;
}
#ロビー背景 {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; opacity: .44; z-index: 0;
  mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.30) 0%, #000 55%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.30) 0%, #000 55%);
}
#ロビー中身 { width: 100%; max-width: 620px; position: relative; z-index: 1; }
#題字 {
  font-size: 52px; font-weight: 800; letter-spacing: 12px; text-align: center;
  color: var(--accent); text-shadow: 0 0 40px rgba(0, 242, 255, .5);
}
#副題 { text-align: center; font-size: 12px; letter-spacing: 6px; opacity: .5; margin: 6px 0 30px; }
/* マップの見本（2026-10-20）。canvas 共通の absolute を打ち消す */
#マップ見本 { position: static; inset: auto; display: none; margin: 0 auto 12px; cursor: default; border: 1px solid var(--line); border-radius: 4px; }

/* ---- タイトルロゴの演出（2026-10-20 自走の仮採用 K2）----
   ①開くと字間を詰めながら浮かび上がる ②7秒ごとに光が字の上を走る ③後ろで「門」の目盛り環が2重にゆっくり逆回転する。
   文字と色は今のまま。動きを減らす設定（prefers-reduced-motion）では全部止める */
#題字 {
  position: relative; isolation: isolate;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 42%, #f2feff 50%, var(--accent) 58%, var(--accent) 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 18px rgba(0, 242, 255, .45));
  animation: 題字_登場 1.4s cubic-bezier(.2, .7, .2, 1) both, 題字_光 7s ease-in-out 1.6s infinite;
}
#題字::before, #題字::after {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none; border-radius: 50%;
}
#題字::before {   /* 外の環: 目盛り */
  width: 168px; height: 168px; margin: -84px 0 0 -84px;
  background: repeating-conic-gradient(rgba(0, 242, 255, .5) 0deg 1.6deg, transparent 1.6deg 7.5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 79px, #000 80px 84px, transparent 85px);
  mask: radial-gradient(circle, transparent 0 79px, #000 80px 84px, transparent 85px);
  opacity: .55; animation: 題字_環 90s linear infinite, 題字_環出 2s ease-out .3s both;
}
#題字::after {    /* 内の環: 切れ目のある細い線 */
  width: 140px; height: 140px; margin: -70px 0 0 -70px;
  background: conic-gradient(rgba(255, 228, 92, .55) 0deg 70deg, transparent 70deg 90deg, rgba(0, 242, 255, .45) 90deg 160deg, transparent 160deg 180deg,
    rgba(255, 228, 92, .55) 180deg 250deg, transparent 250deg 270deg, rgba(0, 242, 255, .45) 270deg 340deg, transparent 340deg);
  -webkit-mask: radial-gradient(circle, transparent 0 68px, #000 68.5px 70px, transparent 70.5px);
  mask: radial-gradient(circle, transparent 0 68px, #000 68.5px 70px, transparent 70.5px);
  opacity: .5; animation: 題字_環 60s linear infinite reverse, 題字_環出 2s ease-out .5s both;
}
#副題 { animation: 副題_登場 1.2s ease-out .7s both; }
@keyframes 題字_登場 { from { opacity: 0; letter-spacing: 26px; transform: translateY(8px); } to { opacity: 1; letter-spacing: 12px; transform: none; } }
@keyframes 題字_光 { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes 題字_環 { to { transform: rotate(360deg); } }
@keyframes 題字_環出 { from { opacity: 0; scale: .7; } }
@keyframes 副題_登場 { from { opacity: 0; letter-spacing: 14px; } to { opacity: .5; letter-spacing: 6px; } }
@media (prefers-reduced-motion: reduce) {
  #題字, #題字::before, #題字::after, #副題 { animation: none; }
}

.ロビー行 { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 12.5px; }
.ロビー行 label { flex: 0 0 150px; opacity: .72; display: flex; justify-content: space-between; }
.ロビー行 input[type=text], .ロビー行 select {
  flex: 1 1 auto; background: rgba(0, 0, 0, .45); border: 1px solid var(--line);
  color: var(--text); padding: 7px 10px; font-family: inherit; font-size: 13px; border-radius: 2px;
}
.ロビー行 input[type=range] { flex: 1 1 auto; width: auto; }

.ロビー枠 {
  border: 1px solid var(--line); background: rgba(4, 14, 26, .7);
  padding: 14px 16px; margin: 22px 0 0; border-radius: 3px;
}
.ロビー行 > .小ボタン { flex: 0 0 auto; white-space: nowrap; }   /* 保存した設定の「保存」「消す」（2026-10-20） */
#設定プリセット { min-width: 0; }
#作成パネル {
  border: 1px solid var(--line); background: rgba(4, 14, 26, .7);
  padding: 14px 16px; margin-top: 14px; border-radius: 3px;
}
.枠見出し {
  font-size: 11px; letter-spacing: 3px; color: var(--accent);
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}

.部屋行 {
  display: flex; align-items: center; gap: 12px; padding: 9px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 12px;
}
.部屋行:last-child { border-bottom: none; }
/* 観戦専用で入るボタン（2026-10-20）。参加より控えめに */
.部屋行 .観戦ボタン { margin-left: 4px; opacity: .7; }
/* 鍵付きの部屋の合言葉（2026-10-20） */
.部屋行 .合言葉欄 { width: 96px; padding: 4px 6px; font-size: 12px; background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(0,242,255,.5); }
.部屋名 { flex: 1 1 auto; font-weight: 700; }
/* 部屋一覧の小さなマップの絵（2026-10-20） */
.部屋行 > button { flex: 0 0 auto; white-space: nowrap; }   /* 絵を足した分で「参加」が2行に折れないように */
.部屋見本 { flex: 0 0 48px; width: 48px; height: 30px; margin-right: -4px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,.12); background: #0c2242; }
.部屋見本.無 { display: inline-block; background: repeating-linear-gradient(45deg, #0c2242 0 6px, #102a4c 6px 12px); }
.部屋詳細 { flex: 0 0 auto; font-size: 10.5px; opacity: .6; text-align: right; line-height: 1.5; }
.部屋状態 { flex: 0 0 62px; font-size: 10px; text-align: center; padding: 2px 0; border-radius: 2px; }
.部屋状態.wait { background: rgba(255, 228, 92, .16); color: var(--金); }
.部屋状態.spawn { background: rgba(0, 242, 255, .16); color: var(--accent); }
.部屋状態.battle { background: rgba(255, 107, 138, .16); color: var(--征); }
.部屋状態.over { background: rgba(255, 255, 255, .1); opacity: .7; }

/* ---- 開始待ちパネル ---- */
#待機パネル {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 420px; z-index: 45; pointer-events: auto;
}
#待機パネル h1 { display: flex; justify-content: space-between; align-items: baseline; }
#待機設定 .ロビー行 { margin-bottom: 8px; font-size: 12px; }
#待機設定 .ロビー行 label { flex: 0 0 132px; }
#待機プレイヤー {
  margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.8;
}
.待機者 { display: inline-block; margin-right: 10px; }
.待機者.ホスト::after { content: ' ★'; color: var(--金); }

/* ---- 兵器 ---- */
.施設行.兵器 { border-color: rgba(255, 107, 138, .2); }
.施設行.兵器:hover { background: rgba(255, 107, 138, .16); }
.施設行.兵器.建設可 { border-color: rgba(255, 107, 138, .65); background: rgba(255, 107, 138, .12); }
.施設行.兵器.選択中 { border-color: #ff6b8a; background: rgba(255, 107, 138, .3); box-shadow: 0 0 12px rgba(255, 107, 138, .4) inset; }
#施設パネル { overflow-y: auto; }
#施設パネル h1 { margin-bottom: 8px; padding-bottom: 6px; }
#施設パネル .区切り { margin: 8px 0; }

/* ---- 外交パネル ---- */
#外交パネル { right: 14px; top: 50%; transform: translateY(-45%); width: 252px; max-height: 46vh; overflow-y: auto; }
#外交パネル h1 { display: flex; justify-content: space-between; align-items: baseline; }
.外交行 { display: flex; align-items: center; gap: 6px; font-size: 11.5px; margin-bottom: 5px; }
.外交行 .国名 { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.外交行 button { flex: 0 0 auto; }
.外交見出し { font-size: 10px; opacity: .5; letter-spacing: 2px; margin: 8px 0 5px; }
.外交見出し:first-child { margin-top: 0; }
.同盟印 { color: #7fe0b0; }
.人印 { font-size: 10px; opacity: .8; }   /* 人が遊んでいる国（2026-10-21 K97） */
.裏切印 { color: #ff6b8a; }
.承認ボタン { background: rgba(127,224,176,.16); border: 1px solid rgba(127,224,176,.55); color: #b6f0d6;
  font-family: inherit; font-size: 10px; padding: 2px 8px; cursor: pointer; border-radius: 2px; }
.承認ボタン:hover { background: rgba(127,224,176,.34); }
#右パネル h1 > span { display: flex; gap: 5px; }

.施設行.艦 { border-color: rgba(127,224,176,.22); }
.施設行.艦:hover { background: rgba(127,224,176,.14); }
.施設行.艦.建設可 { border-color: rgba(127,224,176,.6); background: rgba(127,224,176,.1); }
.施設行.艦.選択中 { border-color: #7fe0b0; background: rgba(127,224,176,.28); box-shadow: 0 0 12px rgba(127,224,176,.35) inset; }

/* ---- 設定モーダル（BGMジャンル・音量）---- */
#設定覆い {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .66); backdrop-filter: blur(2px);
}
#設定窓 {
  position: relative; width: min(560px, 92vw); max-height: 86vh; overflow-y: auto;
  pointer-events: auto; padding: 16px 18px;
}
#設定窓 h1 { display: flex; justify-content: space-between; align-items: center; }
.設定節 {
  font-size: 10.5px; letter-spacing: 3px; color: var(--accent);
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 14px 0 10px;
}
#BGM一覧 { display: flex; flex-direction: column; gap: 6px; }
.BGM札 {
  display: flex; align-items: baseline; gap: 10px; text-align: left;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); font-family: inherit; padding: 8px 10px; cursor: pointer;
}
.BGM札:hover { background: rgba(0, 242, 255, .12); }
.BGM札.選択中 {
  border-color: var(--accent); background: rgba(0, 242, 255, .2);
  box-shadow: 0 0 12px rgba(0, 242, 255, .3) inset;
}
.BGM札 .札名 { font-weight: 700; font-size: 13px; flex: 0 0 108px; }
.BGM札 .札説明 { flex: 1 1 auto; font-size: 10.5px; opacity: .62; }
.BGM札 .札容量 { flex: 0 0 auto; font-size: 10px; opacity: .5; font-variant-numeric: tabular-nums; }
#設定窓 .ロビー行 label { flex: 0 0 120px; }
#ロビー設定 { width: 100%; padding: 8px 0; }

/* ---- 攻略マニュアル（ヘルプ）---- */
#ヘルプ覆い {
  position: fixed; inset: 0; z-index: 85; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px);
}
#ヘルプ窓 {
  position: relative; width: min(760px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column; pointer-events: auto; padding: 16px 18px;
}
#ヘルプ窓 h1 { display: flex; justify-content: space-between; align-items: center; }
#ヘルプ見出し { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.ヘルプ札 {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text); font-family: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer;
}
.ヘルプ札:hover { background: rgba(0, 242, 255, .12); }
.ヘルプ札.選択中 {
  border-color: var(--accent); background: rgba(0, 242, 255, .2); color: #dff;
  box-shadow: 0 0 12px rgba(0, 242, 255, .3) inset;
}
/* マニュアルを言葉で探す（2026-10-20） */
#ヘルプ検索 { width: 100%; box-sizing: border-box; margin: 10px 0 0; padding: 6px 10px; font-size: 12.5px; font-family: inherit;
  background: rgba(0,0,0,.45); color: var(--text); border: 1px solid var(--line); border-radius: 3px; }
#ヘルプ検索:focus { outline: none; border-color: var(--accent); }
.検索行 { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.07);
  color: inherit; font: inherit; font-size: 12px; line-height: 1.6; padding: 7px 4px; cursor: pointer; }
.検索行:hover { background: rgba(0, 242, 255, .08); }
.検索所 { display: block; font-size: 10.5px; color: var(--accent); opacity: .8; }
#ヘルプ中身 mark { background: rgba(255, 228, 92, .35); color: #fff; border-radius: 2px; padding: 0 1px; }
.検索当たり { outline: 2px solid #ffe45c; outline-offset: 2px; background: rgba(255, 228, 92, .12); transition: background .3s; }
#ヘルプ中身 { overflow-y: auto; padding: 4px 2px 8px; font-size: 12.5px; line-height: 1.85; }
#ヘルプ中身 p { margin: 0 0 8px; }
#ヘルプ中身 b { color: #dff; }
.ヘルプ導入 { opacity: .9; border-left: 2px solid var(--accent); padding-left: 10px; }
.ヘルプ節 {
  font-size: 10.5px; letter-spacing: 2px; color: var(--accent);
  border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 16px 0 10px;
}
.ヘルプ表 { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.ヘルプ表 th {
  font-weight: 600; opacity: .55; padding: 4px 8px; text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.18); white-space: nowrap;
}
.ヘルプ表 th:first-child { text-align: left; }
.ヘルプ表 td { padding: 4px 8px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.06); }
.ヘルプ表 td.左 { text-align: left; }
.ヘルプ注 { font-size: 11px; opacity: .6; margin-top: 6px; line-height: 1.7; }
.ヘルプ箇条 { margin: 0 0 8px; padding-left: 20px; }
.ヘルプ箇条 li { margin-bottom: 5px; }
#ロビーヘルプ { width: 100%; padding: 8px 0; }
/* 進行中の作戦が「狙い撃ち」か「全周へ均等」か */
.作戦行 .狙い印 { font-size: 9.5px; flex: 0 0 auto; color: #ffe45c; opacity: .95; }
.作戦行 .狙い印.なし { color: var(--text); opacity: .45; }
/* 補給の細さ（首都・都市・港から離れるほど占領が遅い） */
.作戦行 .補給印 { font-size: 9.5px; flex: 0 0 auto; color: #ffb24d; }
.作戦行 .補給印.危険 { color: var(--征); font-weight: 700; }

/* ---- 右クリックのメニュー（2026-09-06）---------------------------------
   「敵国を選択して右クリックしたときに何もない」への対応。
   外交・侵攻・建設・兵器を常に同じ並びで出す（使えないものは淡く出すだけで消さない）。 */
#右メニュー {
  position: absolute; z-index: 45; width: 226px; padding: 8px 0 6px;
  max-height: 74vh; overflow-y: auto; pointer-events: auto;
}
#右メニュー .見出し {
  font-size: 11px; padding: 3px 12px 6px; display: flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
#右メニュー .節 {
  font-size: 9.5px; letter-spacing: 2px; opacity: .42; padding: 7px 12px 3px;
}
#右メニュー .項 {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 12px; font-size: 11.5px; background: none; border: 0; color: inherit;
  text-align: left; cursor: pointer; font-family: inherit;
}
#右メニュー .項:hover:not(:disabled) { background: rgba(0, 242, 255, .14); }
#右メニュー .項:disabled { opacity: .34; cursor: default; }
#右メニュー .項 .名 { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#右メニュー .項 .付 { font-size: 10px; opacity: .7; font-variant-numeric: tabular-nums; }
#右メニュー .項 .付.金 { color: var(--金); opacity: .9; }
#右メニュー .警告 {
  color: #ff6b8a; font-size: 10.5px; padding: 4px 12px 2px; line-height: 1.5;
}
/* 合図（2026-10-20）: 3つを1行に並べてメニューを縦に伸ばしすぎない */
#右メニュー .合図行 { display: flex; padding: 0 6px; }
#右メニュー .合図行 .項 { flex: 1 1 0; width: auto; padding: 5px 4px; justify-content: center; }
#右メニュー .合図行 .項 .名 { flex: 0 1 auto; }
#右メニュー .合図行 .項 .付 { display: none; }
/* 絵文字（2026-10-20）: 8つを1行に */
#右メニュー .絵文字行 { display: grid; grid-template-columns: repeat(8, 1fr); padding: 0 6px 4px; gap: 2px; }
#右メニュー .絵文字行 .項 { width: auto; padding: 4px 0; justify-content: center; font-size: 17px; line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

/* ---- リプレイ（v0.11）---- */
#ロビーリプレイ { width: 100%; padding: 8px 0; }
/* これまでの戦績（2026-10-20 K23）。リプレイ一覧と同じ窓の作り */
#ロビー戦績 { width: 100%; padding: 8px 0; }
#戦績覆い { position: fixed; inset: 0; z-index: 86; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); }
#戦績窓 { position: relative; width: min(620px, 94vw); max-height: 84vh; overflow-y: auto; pointer-events: auto; padding: 16px 18px; }
#戦績窓 h1 { display: flex; justify-content: space-between; align-items: center; }
.戦績まとめ { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; font-size: 12.5px; }
.戦績まとめ b { color: var(--accent); font-size: 15px; }
/* 決着画面の実績の解除（K82） */
.実績解除 { margin: -4px auto 10px; padding: 4px 14px; display: table; border-radius: 12px; background: rgba(255, 211, 77, .14); border: 1px solid rgba(255, 211, 77, .6); color: #fff3c4; font-size: 13px; animation: 浮上 .4s ease-out; }
/* 実績（2026-10-21 K79）。取ったものは明るく、まだのものは暗く */
.実績欄 { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.実績見出し { width: 100%; font-size: 12px; color: #ffd34d; margin-bottom: 2px; }
.実績札 { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 10px; font-size: 13px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); filter: grayscale(1); opacity: .35; cursor: default; }
.実績札 .名 { font-size: 11px; }
.実績札.取得 { filter: none; opacity: 1; border-color: rgba(255, 211, 77, .55); background: rgba(255, 211, 77, .1); color: #fff3c4; }
.戦績推移 { position: static; display: block; margin: -4px 0 10px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .08); border-radius: 3px; }   /* 順位の推移（K71） */
.戦績表 { width: 100%; }
.戦績表 th:nth-child(-n+2) { text-align: left; }
.戦績表 tr.勝 td { color: #ffe45c; }
/* リプレイ一覧の絞り込み（2026-10-20） */
.リプレイ絞り { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.リプレイ絞り .選択中 { background: rgba(0, 242, 255, .25); border-color: var(--accent); color: #fff; }
/* これまでの戦績の窓に週替わりの自己最高（2026-10-20） */
.戦績週 { margin: 0 0 10px; padding: 5px 9px; border-left: 3px solid #ffd25a; background: rgba(255, 210, 90, .07); color: #ffe08a; font-size: 12px; }
.戦績週 span { display: inline-block; margin-right: 14px; }
.戦績週 b { color: #fff3c4; }
/* ロビーの行の時間（2026-10-20） */
.部屋残り { color: #9fd8e8; }
.部屋残り .途中可 { color: #7dffb0; font-weight: 600; }
/* 週替わりの挑戦（E・2026-10-20） */
/* ロビーの補助ボタンを2列に（2026-10-20 K70）。縦に5つ並んで、高さ800pxの画面でリプレイと戦績が下に隠れていた */
.ロビー補助 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.ロビー補助 > button { margin: 0; }
@media (max-width: 480px) { .ロビー補助 { grid-template-columns: 1fr; } }
#ロビー週替わり { width: 100%; padding: 8px 0; border-color: rgba(255, 210, 90, .55); color: #ffe08a; }
#週覆い { position: fixed; inset: 0; z-index: 86; display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); }
#週窓 { position: relative; width: min(560px, 94vw); max-height: 84vh; overflow-y: auto; pointer-events: auto; padding: 16px 18px; }
#週窓 h1 { display: flex; justify-content: space-between; align-items: center; }
.週盤面 { margin: 2px 0 8px; padding: 8px 10px; border-left: 3px solid #ffd25a; background: rgba(255, 210, 90, .07); display: flex; gap: 12px; align-items: center; }
.週見本 { position: static; cursor: default; flex: 0 0 auto; border: 1px solid rgba(255, 210, 90, .35); border-radius: 3px; }
.週見本[width="0"] { display: none; }
.週マップ { font-size: 18px; font-weight: bold; color: #ffe08a; letter-spacing: .05em; }
.週表 { width: 100%; margin-top: 6px; }
.週表 th:nth-child(2) { text-align: left; }
.週表 tr.上位 td:first-child { color: #ffd25a; font-weight: bold; }
.週表 tr.自分 td { background: rgba(80, 200, 255, .12); color: #bfefff; }
.週表 tr.区切り td { text-align: center; opacity: .5; padding: 0; }
.週表 .週再生 { padding: 1px 8px; }
.週注意 { color: #ffc98a; }
#週挑戦 { width: 100%; margin-top: 10px; }
.週結果 { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #ffd25a; background: rgba(255, 210, 90, .08); color: #ffe08a; font-size: 13px; }
.週結果 b { color: #fff3c4; }
.週結果 .週更新 { color: #7dffb0; }
#リプレイ覆い {
  position: fixed; inset: 0; z-index: 86; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px);
}
#リプレイ窓 {
  position: relative; width: min(620px, 94vw); max-height: 84vh; overflow-y: auto;
  pointer-events: auto; padding: 16px 18px;
}
#リプレイ窓 h1 { display: flex; justify-content: space-between; align-items: center; }
#リプレイ一覧中身 { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.リプレイ行 {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 3px;
  padding: 8px 10px; cursor: pointer; text-align: left;
}
.リプレイ行:hover { background: rgba(0, 242, 255, .12); border-color: var(--accent); }
.リプレイ行.自分 { border-left: 3px solid var(--accent); background: rgba(0, 242, 255, .06); }   /* 自分の名前で遊んだ試合（2026-10-20） */
.リプレイ行::after { content: ''; display: block; clear: both; }
.リプレイ行 .部屋見本 { float: left; width: 72px; height: 44px; margin: 1px 12px 0 0; }   /* 小さなマップの絵（2026-10-21 K87） */
.リプレイ題 { font-weight: 700; font-size: 13px; }
.リプレイ細 { font-size: 10.5px; opacity: .62; margin-top: 2px; font-variant-numeric: tabular-nums; }
#リプレイバー {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 60;
  display: none; align-items: center; gap: 8px; padding: 8px 12px; pointer-events: auto;
}
#リプレイバー #rpシーク { width: min(340px, 40vw); }
#リプレイバー .値 { font-variant-numeric: tabular-nums; font-size: 12px; }
/* シークバーの上の滅亡の印（2026-10-20 K69）。バーは枠の幅いっぱい、印はその上端に並ぶ */
#rpシーク枠 { position: relative; display: inline-flex; align-items: center; width: min(340px, 40vw); }
#リプレイバー #rpシーク枠 #rpシーク { width: 100%; }
#rp印 { position: absolute; left: 0; right: 0; top: -7px; height: 8px; pointer-events: none; }
.rp滅亡 { position: absolute; top: 0; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; pointer-events: auto; cursor: pointer; opacity: .85; box-shadow: 0 0 2px #000; }
.rp滅亡.人 { width: 4px; margin-left: -2px; height: 10px; top: -2px; opacity: 1; }
.rp滅亡:hover { transform: scaleY(1.6); opacity: 1; }
/* 観戦中（リプレイ再生）は操作用のUIを消す。情報（国力・順位表・地図）だけ残す */
body.リプレイ観戦 #施設パネル,
body.リプレイ観戦 #兵器列,
body.リプレイ観戦 #外交パネル,
body.リプレイ観戦 #下段,
body.リプレイ観戦 #退出ボタン,
body.リプレイ観戦 #覆い退出,
body.リプレイ観戦 #覆いリプレイ,
body.リプレイ観戦 #覆いタイマー { display: none !important; }   /* 「次のマッチまで」は録画には無関係 */
body.リプレイ観戦 #左パネル input[type=range] { pointer-events: none; opacity: .45; }


/* ---- 狭い画面（スマホ。2026-10-20 自走の仮採用 K16）----
   パネルを並べると地図が見えなくなるので、左列・勢力図・外交は隠し、下の切替で押した1つだけを重ねて開く。
   地図に触れると閉じる（400_入力.js）。広い画面は今までどおり */
#切替帯 { display: none; }
/* 新しい相手に攻め込まれた瞬間の赤い縁（2026-10-20 K19）。0.9秒で消える。動きを減らす設定では出さない */
#被侵攻の縁 { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 90px 18px rgba(255, 50, 80, .55); }
#被侵攻の縁.光 { animation: 被侵攻_光 .9s ease-out; }
@keyframes 被侵攻_光 { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #被侵攻の縁.光 { animation: none; } }
/* ひとりの部屋の一時停止（2026-10-20 K28）。地図を少し沈めて中央に札。押せない（地図の移動・拡大はできる） */
#一時停止幕 { position: fixed; inset: 0; z-index: 8; pointer-events: none; align-items: center; justify-content: center;
  background: rgba(2, 6, 12, .38); }
#一時停止幕 span { padding: 10px 26px; border: 1px solid var(--accent); border-radius: 6px; background: rgba(2, 6, 12, .82);
  color: var(--accent); font-size: 20px; letter-spacing: .3em; text-shadow: 0 0 10px rgba(0, 242, 255, .6);
  animation: 一時停止_息 2.4s ease-in-out infinite; }
@keyframes 一時停止_息 { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #一時停止幕 span { animation: none; } }
@media (max-width: 760px) {
  #切替帯 { display: flex; gap: 6px; left: 8px; bottom: 8px; }
  #切替帯 button { padding: 7px 10px; font-size: 12px; background: rgba(2, 6, 12, .82); }
  #切替帯 button.開 { background: rgba(0, 242, 255, .25); border-color: var(--accent); }
  #左列, #右パネル { display: none; }
  body:not([data-開="外交パネル"]) #外交パネル { display: none !important; }
  body[data-開="左列"] #左列 { display: flex; left: 8px; top: 64px; bottom: 52px; width: min(260px, calc(100vw - 16px)); z-index: 20; overflow-y: auto; }
  body[data-開="右パネル"] #右パネル { display: block; right: 8px; top: 64px; width: min(260px, calc(100vw - 16px)); max-height: calc(100vh - 124px); overflow-y: auto; z-index: 20; }
  body[data-開="外交パネル"] #外交パネル { right: 8px; top: 64px; transform: none; width: min(260px, calc(100vw - 16px)); max-height: calc(100vh - 124px); z-index: 20; }
  #ログ { display: none; }
  #下段 { width: calc(100vw - 16px); bottom: 50px; }
  #ミニマップ { inset: auto 8px 8px auto; }
  #hud上 { top: 6px; }
  #占有率 { font-size: 26px; }
  .小見出し { display: none; }
  #フェーズ表示 { font-size: 11px; margin-top: 4px; }
  #覆い見出し { font-size: 34px; letter-spacing: 2px; }
  .推移枠 { width: calc(100vw - 24px); }
  .推移図 { width: 100% !important; height: auto !important; }
  /* ロビー: 部屋の行を2段（上＝絵・状態・名前・ボタン／下＝詳細）にして横にはみ出さない */
  #ロビー { padding: 24px 10px; }
  #題字 { font-size: 30px; }
  .ロビー行 label { flex: 0 0 96px; }
  .部屋行 { flex-wrap: wrap; gap: 6px 8px; }
  .部屋名 { flex: 1 1 0; min-width: 0; }
  .部屋詳細 { order: 5; flex: 1 1 100%; text-align: left; padding-left: 56px; }
  .部屋状態 { flex-basis: 52px; }
  /* リプレイ: 操作帯を画面幅に収め、切替と全体図はその上へ逃がす */
  #リプレイバー { left: 8px; right: 8px; transform: none; bottom: 8px; gap: 5px; padding: 6px 8px; flex-wrap: wrap; justify-content: center; }
  #リプレイバー #rpシーク { width: auto; flex: 1 1 120px; }
  #リプレイバー #rpシーク枠 { width: auto; flex: 1 1 120px; }
  body.リプレイ観戦 #切替帯 { bottom: 104px; }
  body.リプレイ観戦 #ミニマップ { bottom: 104px; }
  /* 決着画面: 表は折らずに枠の中で横へ送る（1文字ずつ折れて読めなかった） */
  #覆い戦績 { max-width: 100vw; overflow-x: auto; padding: 0 8px; box-sizing: border-box; max-height: calc(100vh - 340px); }   /* 2026-10-21: 表が3行しか見えなかった */
  #覆い戦績 table { font-size: 11px; }
  #覆い戦績 th, #覆い戦績 td { white-space: nowrap; padding: 3px 6px; }
  .戦績要約 { font-size: 13px; }
  /* 開始待ち: 420px 固定だと左右にはみ出していた */
  #待機パネル { width: calc(100vw - 16px); box-sizing: border-box; max-height: calc(100vh - 140px); overflow-y: auto; }
  #待機設定 .ロビー行 label { flex: 0 0 96px; }
}

/* すぐに遊ぶ（2026-10-20） */
#すぐ遊ぶ { border-color: rgba(125, 255, 176, .7); color: #b9ffd6; }