/* ============================================================
   STYLES.CSS —— Control Europe 专属皮肤（策略 HUD 风）
   设计语言来源：DESIGN-BRIEF.md（官方商店截图逐张观察）
   关键词：地图夜色底 / 黑面板 / 金黄标题 / 绿红语义数值 /
           2px 硬描边 / 3px 小圆角 / 硬偏移阴影 / 国旗色块 chip
   ============================================================ */
:root{
  --bg:#0b1118;            /* 地图夜色 */
  --bg-2:#0e1620;
  --panel:#111a24;         /* 游戏内黑面板 */
  --panel-2:#16202c;
  --ink:#eef3f8;
  --muted:#93a3b4;
  --accent:#f2b63c;        /* 游戏提示条金黄 */
  --accent-2:#4ea3ff;      /* Logo 里的 EUROPE 蓝 */
  --good:#46d17a;          /* 收入绿 */
  --danger:#ff5a52;        /* 军费红 */
  --border:#24303e;
  --hard:#060a0f;
  --radius:3px;
  --radius-sm:2px;
  --maxw:1140px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Barlow Condensed","Inter",system-ui,sans-serif;
  --shadow:4px 4px 0 var(--hard);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font:16px/1.68 var(--font);-webkit-font-smoothing:antialiased;
  /* 地图网格底纹：纯 CSS 细线，不引图 */
  background:
    linear-gradient(rgba(78,163,255,.035) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(78,163,255,.035) 1px,transparent 1px) 0 0/44px 44px,
    var(--bg);
}
img{max-width:100%;height:auto}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px dashed var(--accent);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px 12px;z-index:50}

/* ---- 顶部公告条（游戏内黄字提示条） ---- */
.ribbon{background:#0a0f15;border-bottom:2px solid var(--hard)}
.ribbon .wrap{padding-top:7px;padding-bottom:7px;color:var(--accent);font-size:13.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}

/* ---- topbar / nav ---- */
.topbar{position:sticky;top:0;z-index:30;background:var(--panel);border-bottom:2px solid var(--hard);
  box-shadow:0 3px 0 var(--hard)}
.topbar .bar{display:flex;align-items:center;gap:14px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-family:var(--display);
  font-size:21px;letter-spacing:.02em;text-transform:uppercase}
.brand:hover{text-decoration:none}
.brand img{width:40px;height:40px;border-radius:var(--radius-sm);border:2px solid var(--accent)}
.nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav ul{display:flex;gap:14px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.nav a{color:var(--ink);font-weight:600;font-size:15px}
.nav .active > a{color:var(--accent)}
.nav .kids{display:none;position:absolute;top:100%;min-width:210px;background:var(--panel-2);
  border:2px solid var(--border);box-shadow:var(--shadow);padding:8px;border-radius:var(--radius);flex-direction:column}
.nav li{position:relative}
/* 下拉父项与面板之间禁止留「死区」：只要把面板下移（top:calc(100%+Npx)、margin-top 等），
   就必须同时给父项加一条透明 hover 桥覆盖那段空隙 —— 否则鼠标经过空隙时 :hover 断掉、菜单消失。
   这条被用户多次打回，任何站点改成有间距的下拉都要保留这段。 */
.nav li.has-kids::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:12px;z-index:39}
.nav li.has-kids > a::after{content:" ▾";color:var(--accent);opacity:.85}
.nav li.has-kids:hover .kids,.nav li.has-kids:focus-within .kids{display:flex}
.nav .kids a{padding:6px 10px;border-left:2px solid transparent}
.nav .kids a:hover{background:var(--panel);border-left-color:var(--accent);text-decoration:none}
.nav .cta{border:2px solid var(--accent);background:var(--accent);color:#0b1118;padding:7px 14px;
  border-radius:var(--radius);font-weight:800;box-shadow:3px 3px 0 var(--hard);white-space:nowrap}
.nav .cta:hover{text-decoration:none;transform:translate(1px,1px);box-shadow:2px 2px 0 var(--hard)}
@media (max-width:820px){
  .topbar .bar{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .nav{margin-left:0;width:100%;overflow-x:auto}
  .nav ul{flex-wrap:nowrap;white-space:nowrap}
  .nav .kids{position:static;display:flex;border:0;padding:0;box-shadow:none;background:transparent}
}

/* ---- hero ---- */
/* cover 会把 16:9 源图上下切掉（南欧被裁），改 contain 完整显示欧洲。
   文字块锚在 maxw:1140 的居中 wrap 上，图若贴视口右边缘，宽屏下两者之间
   会空出一大片（2552 宽时达 597px）、图显得甩在最右。
   改为图随视口居中回移：50% 是图在容器内居中，+350px 把图右移让位给左侧文字，
   使"文字右→图左"恒定 60px，整组内容（文字+图）在页面里居中；
   min(...,100%) 在窄屏兜底为贴右，避免图右侧溢出被裁。
   无 repeat 防止 contain 留白处出现平铺 */
.hero{position:relative;background:#0a0f15;border-bottom:2px solid var(--hard);
  background-image:linear-gradient(105deg,rgba(6,10,15,.94) 0%,rgba(6,10,15,.78) 45%,rgba(6,10,15,.42) 100%),var(--hero);
  background-size:cover,contain;
  background-position:center,min(50% + 350px,100%) center;
  background-repeat:no-repeat,no-repeat}
.hero-in{padding:64px 18px}
.hero .eyebrow{display:inline-block;background:var(--accent);color:#0b1118;font-weight:800;font-size:12.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-sm);
  margin:0 0 16px;box-shadow:3px 3px 0 var(--hard)}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(42px,8vw,86px);line-height:.94;margin:0 0 14px}
.hero h1 span{color:var(--accent-2)}
.hero .lead{color:#cfdae6;font-size:19px;max-width:58ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;background:var(--accent);color:#0b1118;border:2px solid var(--hard);padding:11px 18px;
  border-radius:var(--radius);font-weight:800;box-shadow:var(--shadow)}
.btn:hover{text-decoration:none;transform:translate(2px,2px);box-shadow:2px 2px 0 var(--hard)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
/* 跟随 hero 背景图右边缘，而不是贴视口右边框：图用 min(50% + 350px,100%) 定位，
   反推出图右缘 = 50% + 704px，标签保持在其内侧 22px；
   max(22px,…) 在窄屏（图被 min 夹到贴右）时兜底回原来的 22px */
@media (max-width:700px){}
/* 手机窄屏：hero 文字占满，图贴右会被文字压碎。改为图整条沉到 hero 底部
   （contain 390×219），下面留出等高的空白让它完整显示，文字在上半区 */
@media (max-width:700px){
  .hero{background-position:center,center calc(100% - 14px)}
  .hero-in{padding-bottom:250px}
}

/* ---- facts strip（游戏内 key→value 面板行） ---- */
.facts-strip{background:var(--panel);border-bottom:2px solid var(--hard)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0}
.fact{padding:16px 18px;border-right:1px solid var(--border)}
.fact:last-child{border-right:0}
.fact-k{display:block;color:var(--accent);font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase}
.fact-v{display:block;font-family:var(--display);font-size:27px;font-weight:700;line-height:1.2}
@media (max-width:700px){.fact{border-right:0;border-bottom:1px solid var(--border)}}

/* ---- section head / 网格（flex wrap：末行自动拉伸填满，不留孤卡） ---- */
.section-head{margin:38px 0 4px}
.section-head .overline{color:var(--accent-2);font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase}
.section-head h2{font-family:var(--display);text-transform:uppercase;font-size:31px;line-height:1.05;margin:4px 0 0;
  border-bottom:3px solid var(--accent);padding-bottom:8px;display:flex;align-items:center;gap:10px}
.count-pill{background:var(--panel-2);border:2px solid var(--border);color:var(--muted);font-size:14px;
  font-family:var(--font);font-weight:700;border-radius:999px;padding:1px 10px}
.grid{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 30px}
.card{display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--border);
  border-radius:var(--radius);overflow:hidden;color:var(--ink);flex:1 1 260px;box-shadow:var(--shadow);
  transition:border-color .12s ease}
.card:hover{text-decoration:none;border-color:var(--accent);transform:translate(1px,1px);
  box-shadow:3px 3px 0 var(--hard)}
.card .thumb{display:block;position:relative;border-bottom:2px solid var(--border);background:#0a0f15}
.card .thumb img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}
.pill-tag{position:absolute;left:8px;top:8px;background:var(--accent);color:#0b1118;font-size:11px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-sm);
  border:1px solid var(--hard)}
.card-body{padding:13px 15px 16px;display:flex;flex-direction:column;flex:1}
.card h3{margin:4px 0 6px;font-family:var(--display);font-size:21px;text-transform:uppercase;letter-spacing:.01em}
.card p{margin:0 0 10px;color:var(--muted);font-size:14.5px;flex:1}
.card .go{color:var(--accent);font-weight:800;font-size:14px}
.card .stamp{display:block;color:#8fa1b3;font-size:12px;margin-top:6px}
.card.sm{flex:1 1 190px;box-shadow:3px 3px 0 var(--hard)}
.card.sm h3{font-size:18px}

/* ---- article ---- */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:34px;align-items:start}
.article-grid > *{min-width:0}
/* 1fr 的最小尺寸默认是 auto：宽表格会把整列撑到 min-content，整页跟着横向溢出 */
@media (max-width:960px){.article-grid{grid-template-columns:minmax(0,1fr)}}
/* 窄屏宽表格：容器内横滑，右缘给渐隐提示（不占 HTML 字节） */
@media (max-width:760px){
  .tbl-wrap{position:relative;background:
    linear-gradient(to left, rgba(11,17,24,.92) 0, rgba(11,17,24,0) 34px) right/34px 100% no-repeat local,
    linear-gradient(to right, rgba(11,17,24,.92) 0, rgba(11,17,24,0) 34px) left/34px 100% no-repeat local,
    repeating-linear-gradient(to right, transparent 0 2px, rgba(0,0,0,.012) 2px 4px)}
}
.crumb{font-size:13px;color:var(--muted);padding-top:22px}
.crumb a{color:var(--muted)}
.crumb .sep{color:#8fa1b3;margin:0 5px}
.crumb .here{color:var(--accent);overflow-wrap:anywhere}
article{background:var(--panel);border:2px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 28px 40px;margin-bottom:36px}
article h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,5vw,46px);line-height:1.02;
  margin:0 0 14px}
article h2{margin-top:34px;font-family:var(--display);text-transform:uppercase;font-size:26px;line-height:1.1;
  border-bottom:2px solid var(--border);padding-bottom:7px}
article h2::before{content:"▸ ";color:var(--accent)}
article h3{margin-top:24px;font-size:18.5px;color:var(--accent)}
article p{color:#d7e0ea}
article ul,article ol{padding-left:22px}
article li{margin:5px 0;color:#d7e0ea}
article li::marker{color:var(--accent)}
article strong{color:#fff}
article img.zoom{border:2px solid var(--border);border-radius:var(--radius);cursor:zoom-in;display:block;
  margin:16px 0 6px;box-shadow:var(--shadow)}
article a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
blockquote{margin:16px 0;padding:10px 16px;border-left:4px solid var(--accent-2);background:var(--bg-2);
  color:#c6d2df;font-style:italic}
code{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 6px;
  font-size:14px;color:var(--accent)}

/* ---- 快速结论 ---- */
.quick-answer{background:var(--bg-2);border:2px solid var(--accent);border-radius:var(--radius);
  padding:16px 18px;margin:6px 0 22px;box-shadow:var(--shadow)}
.qa-stamp{display:inline-block;background:var(--accent);color:#0b1118;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-sm);margin-bottom:8px}
.quick-answer p{margin:0;font-size:17px;color:#fff}

/* ---- callout ---- */
.callout{background:var(--bg-2);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:13px 17px;margin:18px 0}
.callout p{margin:0 0 8px}
.callout p:last-child{margin-bottom:0}
.callout.tip{border-left-color:var(--good)}
.callout.warn{border-left-color:var(--danger)}
.callout.note{border-left-color:var(--accent-2)}

/* ---- 表格：黑底表头黄字 + 斑马纹 + 语义色 ---- */
.tbl-wrap{overflow-x:auto;margin:16px 0 22px;border:2px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--panel)}
th{background:#0a0f15;color:var(--accent);font-family:var(--display);text-transform:uppercase;
  letter-spacing:.04em;font-size:15.5px;text-align:left;padding:9px 11px;border-bottom:2px solid var(--accent)}
td{padding:9px 11px;border-bottom:1px solid var(--border);color:#d7e0ea;vertical-align:top}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.022)}
tbody tr:hover td{background:rgba(242,182,60,.07)}
td.good{color:var(--good);font-weight:700}
td.bad{color:var(--danger);font-weight:700}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- 进度条（游戏占领条）——必须挂在 .bar-row 下：顶栏容器也叫 .bar，裸 .bar span 会误伤品牌文字 ---- */
.bar-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.bar-label{min-width:150px;font-size:14px;color:var(--muted)}
.bar-row .bar{flex:1;height:15px;background:#0a0f15;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.bar-row .bar span{display:block;height:100%;background:var(--accent)}
.bar-row .bar.blue span{background:var(--accent-2)}
.bar-val{min-width:58px;text-align:right;font-size:13.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* ---- 目录侧栏 ---- */
.toc{position:sticky;top:88px;background:var(--panel);border:2px solid var(--border);border-radius:var(--radius);
  padding:15px 16px;box-shadow:var(--shadow);margin-top:22px}
.toc .overline{display:block;color:var(--accent-2);font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:8px}
.toc-list{display:flex;flex-direction:column;gap:2px}
.toc-list a{font-size:14px;color:#c6d2df;padding:5px 8px;border-left:2px solid var(--border)}
.toc-list a:hover{color:var(--accent);border-left-color:var(--accent);text-decoration:none;background:rgba(242,182,60,.06)}

/* ---- All guides ---- */
.all-guides{border-top:2px dashed var(--border);padding-top:6px;margin-top:26px}

/* ---- 广告位（Adsterra Native Banner：桌面指针门控；移动端不加载） ---- */
@media (hover: hover) and (pointer: fine){
  .ad-slot{display:block}
}
@media not all and (hover: hover) and (pointer: fine){
  .ad-slot{display:none}
}
.ad-slot{margin:26px auto;max-width:var(--maxw)}
.ad-label{margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ad-inner{min-height:90px;border:1px dashed var(--border);border-radius:var(--radius);background:var(--panel);
  padding:6px;overflow:hidden}

/* ---- footer ---- */
.foot{background:#080d13;border-top:2px solid var(--hard);padding:26px 0 34px;margin-top:10px}
.foot .muted{color:#8fa1b3;font-size:13px}
.foot-links a{color:var(--accent-2)}
.foot-links{font-size:14px}
.disclaimer{color:var(--muted);font-size:13.5px;max-width:90ch}

/* ---- 图片放大态 ---- */
img.zoom.open{cursor:zoom-out}