/* ===== 全体 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#10151c;
  --bg2:#1a212b;
  --panel:#1e2733;
  --panel2:#27313f;
  --line:#3a4859;
  --text:#d8dee6;
  --dim:#8b98a8;
  --gold:#c9a84c;
  --gold2:#e8cd7a;
  --red:#c0504a;
  --green:#5e9e62;
  --blue:#5b86b8;
  --sea:#16283c;
}
html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:14px;
  overflow:hidden;
}
.hidden{ display:none !important; }
button{ font-family:inherit; }
.btn{
  background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:3px;
  padding:6px 14px; cursor:pointer; font-size:13px;
}
.btn:hover{ background:#334052; border-color:var(--gold); }
.btn:disabled{ opacity:.4; cursor:default; }
.btn:disabled:hover{ background:var(--panel2); border-color:var(--line); }
.btn-primary{
  background:#5a4a1e; border-color:var(--gold); color:var(--gold2);
  font-weight:bold;
}
.btn-primary:hover{ background:#6e5a24; }
.btn-small{ padding:4px 10px; font-size:12px; }
.btn-danger{ border-color:var(--red); color:#e8a09c; }
.btn-danger:hover{ background:#4a2a28; }

/* ===== タイトル画面 ===== */
#screen-title{
  height:100%; overflow-y:auto;
  background:
    radial-gradient(ellipse at 50% -20%, #2a3548 0%, var(--bg) 60%),
    var(--bg);
}
.title-inner{ max-width:1100px; margin:0 auto; padding:48px 24px 60px; text-align:center; }
#screen-title h1{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:52px; letter-spacing:.12em; color:var(--gold2);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.title-year{ color:#fff; }
.subtitle{ margin-top:8px; color:var(--dim); letter-spacing:.3em; }
.title-desc{ margin:28px 0 8px; color:var(--text); line-height:2; font-size:14px; }
.select-label{
  margin:36px 0 18px;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:20px; color:var(--gold); letter-spacing:.2em;
}
#nation-cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px; text-align:left;
}
.nation-card{
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:14px 16px; cursor:pointer; transition:transform .1s, border-color .1s;
  position:relative; overflow:hidden;
}
.nation-card:hover{ transform:translateY(-3px); border-color:var(--gold); }
.nation-card .nc-flag{
  position:absolute; top:0; left:0; width:6px; height:100%;
}
.nation-card h3{ font-size:17px; margin-bottom:2px; padding-left:8px; }
.nation-card .nc-leader{ color:var(--dim); font-size:12px; padding-left:8px; }
.nation-card .nc-diff{ color:var(--gold); font-size:12px; padding-left:8px; margin-top:4px; }
.nation-card .nc-goal{
  margin-top:8px; padding:8px; background:var(--bg2); border-radius:4px;
  font-size:12px; line-height:1.6; color:#bcc8d6;
}
#title-footer{ margin-top:30px; }

/* ===== ゲーム画面 ===== */
#screen-game{ height:100%; display:flex; flex-direction:column; }
#topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(#222d3c,#1a222e);
  border-bottom:1px solid var(--line);
  padding:6px 14px; min-height:48px; flex-shrink:0;
}
#tb-nation{ display:flex; align-items:center; gap:8px; font-weight:bold; font-size:15px; }
#tb-nation .flagchip{ width:18px; height:13px; border:1px solid #000; display:inline-block; }
#tb-date{
  font-family:"Hiragino Mincho ProN",serif; font-size:17px; color:var(--gold2);
  min-width:120px;
}
#tb-res{ display:flex; gap:12px; flex:1; font-size:12px; flex-wrap:wrap; min-width:300px; }
#tb-res .res{ white-space:nowrap; }
#tb-res .res b{ color:#fff; margin-left:3px; }
#tb-res .res .delta{ font-size:11px; color:var(--dim); margin-left:2px; }
#tb-res .res .neg{ color:#e08884; }
#tb-buttons{ display:flex; gap:8px; }

#main-area{ flex:1; display:flex; min-height:0; }
#map-container{ flex:1; position:relative; background:var(--sea); overflow:hidden; }
#map{ position:absolute; inset:0; cursor:grab; }
#map.dragging{ cursor:grabbing; }
#map-hint{
  position:absolute; left:10px; bottom:8px; color:#7b8aa0; font-size:11px;
  pointer-events:none; text-shadow:0 1px 2px #000;
}
#tooltip{
  position:absolute; pointer-events:none; z-index:30;
  background:rgba(14,19,26,.94); border:1px solid var(--gold);
  border-radius:4px; padding:8px 10px; font-size:12px; line-height:1.7;
  max-width:280px; box-shadow:0 4px 14px rgba(0,0,0,.5);
}
#tooltip h4{ color:var(--gold2); font-size:13px; margin-bottom:2px; }
#tooltip .tt-row{ color:#c3cdd9; }

/* ===== サイドバー ===== */
#sidebar{
  width:360px; flex-shrink:0; background:var(--panel);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
}
#tabs{ display:flex; border-bottom:1px solid var(--line); flex-shrink:0; }
.tab{
  flex:1; background:none; border:none; color:var(--dim);
  padding:9px 0; cursor:pointer; font-size:13px;
  border-bottom:2px solid transparent;
}
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--gold2); border-bottom-color:var(--gold); font-weight:bold; }
#panel{ flex:1; overflow-y:auto; padding:12px; }
#panel h3{
  font-size:14px; color:var(--gold2); margin:14px 0 8px;
  border-bottom:1px solid var(--line); padding-bottom:4px;
}
#panel h3:first-child{ margin-top:0; }
.kv{ display:flex; justify-content:space-between; padding:2px 0; font-size:13px; }
.kv .k{ color:var(--dim); }
.section-box{
  background:var(--bg2); border:1px solid var(--line); border-radius:4px;
  padding:10px; margin-bottom:10px; font-size:13px;
}
.unit-row{ display:flex; gap:12px; padding:3px 0; font-size:13px; }
.action-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.bar-outer{
  height:8px; background:#0d1117; border-radius:4px; overflow:hidden; margin-top:3px;
}
.bar-inner{ height:100%; background:var(--gold); }
.bar-inner.green{ background:var(--green); }
.bar-inner.red{ background:var(--red); }
.bar-inner.blue{ background:var(--blue); }

.list-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--bg2); border:1px solid var(--line); border-radius:4px;
  padding:7px 9px; margin-bottom:6px; font-size:13px;
}
.list-item .li-main{ flex:1; }
.list-item .li-sub{ color:var(--dim); font-size:11px; margin-top:2px; }
.flagchip{ width:16px; height:12px; border:1px solid #000; display:inline-block; flex-shrink:0; }

.tech-field{ margin-bottom:12px; }
.tech-field .tf-head{ display:flex; justify-content:space-between; align-items:center; }
.alloc-btns{ display:flex; gap:4px; }
.alloc-btns button{
  width:24px; height:22px; background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:3px; cursor:pointer;
}
.alloc-btns button:hover{ border-color:var(--gold); }

#panel table{ width:100%; border-collapse:collapse; font-size:12px; }
#panel th{ color:var(--dim); text-align:left; padding:3px 4px; border-bottom:1px solid var(--line); }
#panel td{ padding:4px; border-bottom:1px solid #2a3442; }

.log-entry{ padding:5px 7px; border-left:3px solid var(--line); margin-bottom:5px; font-size:12px; line-height:1.6; background:var(--bg2); }
.log-entry.battle{ border-left-color:var(--red); }
.log-entry.event{ border-left-color:var(--gold); }
.log-entry.diplo{ border-left-color:var(--blue); }
.log-entry .log-date{ color:var(--dim); font-size:11px; }

/* ===== モーダル ===== */
#modal-root{
  position:fixed; inset:0; z-index:100;
  background:rgba(5,8,12,.72);
  display:flex; align-items:center; justify-content:center;
}
#modal-box{
  background:var(--panel); border:1px solid var(--gold); border-radius:6px;
  width:560px; max-width:92vw; max-height:86vh; overflow-y:auto;
  box-shadow:0 10px 50px rgba(0,0,0,.8);
  padding:22px 26px;
}
#modal-box h2{
  font-family:"Hiragino Mincho ProN",serif; color:var(--gold2);
  font-size:21px; margin-bottom:4px; letter-spacing:.06em;
}
#modal-box .modal-date{ color:var(--dim); font-size:12px; margin-bottom:12px; }
#modal-box .modal-body{ line-height:1.9; font-size:14px; margin-bottom:18px; white-space:pre-line; }
#modal-box .modal-choices{ display:flex; flex-direction:column; gap:8px; }
#modal-box .modal-choices .btn{ text-align:left; padding:10px 14px; }
#modal-box .modal-choices .btn small{ display:block; color:var(--dim); margin-top:3px; }
.battle-result{ display:flex; gap:14px; margin:12px 0; }
.battle-side{ flex:1; background:var(--bg2); border-radius:4px; padding:10px; font-size:13px; }
.battle-side h4{ margin-bottom:6px; }
.battle-vs{ align-self:center; color:var(--gold); font-weight:bold; }
.win-banner{ text-align:center; font-size:26px; color:var(--gold2); font-family:serif; margin:10px 0 16px; }
.lose-banner{ text-align:center; font-size:26px; color:var(--red); font-family:serif; margin:10px 0 16px; }

/* スクロールバー */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg2); }
::-webkit-scrollbar-thumb{ background:#3c4a5c; border-radius:5px; }
::-webkit-scrollbar-thumb:hover{ background:#4c5d73; }