/* ============================================================================
   app.css — 只做布局容器。
   界面图形（面板、图标、圆角、配色）全部来自官方 SVG 素材（assets/），
   坐标来自官方运行时实测（js/layout.js）。这里**不重画任何面板**。
   ========================================================================== */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; overflow: hidden;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
img { display: block; }

/* 地图：由 js/mapcam.js 按图块表动态生成
   层序（官方同款）：
     #mapocean  海洋轮廓（allocean，仅世界模式）
     #mapworld  世界陆地（outsvg*）
     #mapview   日本精细图（nb*）—— 官方【任何时候都盖在最上面】
     #mappins   震中标记（不参与图集缩放，屏幕尺寸恒定）
   ⚠️ 地图整体必须【在 UI 层之下】：官方把地図画在 pen 层，面板精灵永远盖住它。
      之前 #mapview 写了 z-index:2 而 #art 是 auto → 地图压在侧栏上（用户报的「穿透左侧信息栏」）。 */
/* 底色 = 自建地图的深海基色（kondz-map 的 SEA_RAMP[0] ≈ #09101C）。
   自建瓦片模式下官方图层全部隐藏，瓦片没到时露的就是这个色 → 不会黑屏。 */
#map { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: #0a1119; }
#mapview, #mapwlg, #mapworld, #mapocean, #mapsea, #mapcoast { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* ★ #maptiles = 自建瓦片金字塔（js/qvtiles.js）—— 【屏幕空间】层，不走 transform，
   所以不需要官方的 reRaster 重栅格化；放大时直接换更高级别的瓦片 = 永远不会糊。
   层序：盖在所有官方海/陆底图之上、官方 nb/nf 之下（nb/nf 一关就完全接管）。 */
#maptiles { position: absolute; left: 0; top: 0; overflow: hidden; }
/* 层序（官方同款：海洋 → 世界陆地(wlg，自带日本) → 震中标记）
   #mapview = 日本视图用的官方 nb（含都道府県境，只在日本视图显示）
   #mapwlg  = 官方广域档的全世界图（自带日本，无县境、海岸线一致）
   #mapworld= 保留（outsvg 极缩档，当前不用） */
#mapocean { z-index: 1; }
#mapsea   { z-index: 1; }
#mapworld { z-index: 2; }
#mapwlg   { z-index: 3; }
/* 自建瓦片（自带陆地 + 海底地形 + 行政区划线）：盖在官方底图之上 */
#maptiles { z-index: 4; }
/* 日本精细图（官方 nb）+ 海岸线（官方 nf）：任何模式都盖在世界图之上 */
#mapview  { z-index: 5; }
#mapcoast { z-index: 6; }
/* ★ 我们自己的地图叠加层（震度色块 / 观测点）：与 #mapview 同一套 transform，
   但**独立存在** —— 官方图层被隐藏时它不动。 */
#mapoverlay { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 7; }
/* 震中标记：官方是 pen 层最后盖章 → 必须在所有图块【之上】，但仍在 #map 内部（底下是 UI 层） */
#mappins  { z-index: 8; }

/* ★ UI 大小（设置页）= 给 #stage 套一层 #wrap，按视口中心缩放。
   这样 app.js 里那套「居中 + 等比缩放」不用改，两者相乘即可。 */
#wrap {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
}

/* 舞台：逻辑尺寸 = ceil(窗口/k)，**不小于设计尺寸 960x720**（由 app.js 的 layout() 实时写入）
   ★★ 2026-10-11 官方同款自适应：不再「等比缩进窗口 + 居中信箱」，
      而是把舞台拉大到窗口大小、整体 scale(k)、原点钉左上 →
      多出来的宽/高全部给地图（#map 是 inset:0），永远不露黑边。 */
#stage {
  position: absolute; left: 0; top: 0;
  width: 960px; height: 720px;       /* 初始值；实际尺寸由 layout() 写 */
  /* ★★ 2026-10-11 用官方素材本身的原色：
     官方那层页面底 `bgsq`（assets/eb20c9da….svg）= 纯 **#12151a**，
     而且它的框只有 left:-408 / 648x728 → **只铺到 x≈240**：
     官方面板（8..232）之外、地图之外的区域本来就是这种**近黑**。
     以前我们写 #252f43（偏蓝灰），夹在深色底板和地图之间就是「黑了一块」
     且和官方不一样。现按官方原色对齐。 */
  background: #12151a;
  transform-origin: 0 0;
  overflow: hidden;
}
/* ★★ 官方同款自适应：左栏（x<240）在页面底片 `bgsq` 下沿（y=724）以下，
   官方是**把 bgsq 竖向拉伸到整个舞台高度**（实测 960x720→728 / 1280x640→645 / 1440x900→908）。
   我们的 #map 是 inset:0，窗口一高就会在左栏下方露出地图 → 这里补一条纯色盖住它。
   z-index 2：在地图（0）之上、图形层（3）之下。 */
#stage::before {
  content: ''; position: absolute; left: 0; top: 724px; width: 240px; height: 100%;
  background: #12151a; z-index: 2; pointer-events: none;
}
/* 横屏画面布局（把左栏让给地图）→ 左栏本身不存在了，遮罩也要关掉 */
#stage.ls::before { display: none; }
#art, #txt, #zh {
  position: absolute; left: 0; top: 0;
  width: 960px; height: 720px;
}
/* 面板/文字永远在地图之上（#txt 必须在 #zh 之上：履历徽章本体画在 #txt 层） */
#art { z-index: 3; }
#zh  { z-index: 4; }
#txt { z-index: 5; }
#txt, #zh { pointer-events: none; }

/* ★★ 顶栏层：左侧 4 个视图图标(tabB/tabBs/tabBb*) + 时钟底(timebg0) + 地图 +/−/适配(FlZom0/FlFit0)
   ⚠️ 用户报「第二、第三、第四页全部遮住了按钮」= 设置页的面板宽 291px，
      把 242..274 的图标和 250..290 的缩放按钮全盖住了。
      解决：这些「按钮类」元素从 #art 里搬出来，单独一层且 z-index 高于所有视图版面。 */
#chrome { z-index: 7; }
/* 视图版面层（调试页 / 设置页）：在图形层之上、顶栏层之下 */
#view1, #view3 { z-index: 6; }
#art, #zh, #txt { }
#chrome, #view1, #view3 {
  position: absolute; left: 0; top: 0;
  width: 960px; height: 720px;
}
#chrome, #view1, #view3 { pointer-events: none; }

/* 设置页（自己排版的中文版式：三档字号 head 22 / row 18 / note 15.5 由 JS 写入） */
#view3 .qvrow { position: absolute; white-space: nowrap; line-height: 1; }
#view3 .qvdim { color: #7d97b4; }
#view1 .qvhead, #view3 .qvhead { color: #eaf0fa; }

/* 轻提示（设置页动作反馈） */
#qvtoast {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 20; padding: 8px 16px; border-radius: 6px;
  background: rgba(20,30,48,.94); color: #dce3ff;
  font: 15px/1.2 "Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  border: 1px solid #31476d; opacity: 0; transition: opacity .18s;
  pointer-events: none; white-space: nowrap;
}
#qvtoast.on { opacity: 1; }

/* 设置导出・导入 对话框 / 关于・素材授权 对话框（共用一套外观） */
#qvdialog, #qvabout {
  position: absolute; left: 0; top: 0; width: 960px; height: 720px;
  z-index: 21; display: none; background: rgba(4,8,16,.66);
}
#qvdialog.on, #qvabout.on { display: block; }
#qvdialog .box, #qvabout .box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 620px; padding: 18px; border-radius: 8px;
  background: #1d2a41; border: 1px solid #31476d;
  font: 15px/1.4 "Microsoft YaHei UI","Microsoft YaHei",sans-serif; color: #dce3ff;
}
#qvabout .box h3 { margin: 0 0 10px; font-size: 18px; color: #eaf0fa; font-weight: 600; }
#qvabout .box p { margin: 0 0 8px; }
#qvabout .box ul { margin: 0 0 8px; padding-left: 20px; color: #a9bcd4; font-size: 14px; }
#qvabout .box code { color: #dce3ff; font-family: Consolas, monospace; font-size: 13px; }
#qvdialog textarea {
  margin-top: 10px; width: 100%; height: 240px; box-sizing: border-box;
  background: #101a2b; color: #dce3ff; border: 1px solid #31476d; border-radius: 6px;
  font: 13px/1.45 Consolas, monospace; padding: 8px; resize: none;
}
#qvdialog .btns, #qvabout .btns { margin-top: 12px; text-align: right; }
#qvdialog button, #qvabout button {
  margin-left: 8px; padding: 7px 16px; border-radius: 6px; cursor: pointer;
  background: #31476d; color: #eaf0fa; border: 1px solid #456; font-size: 14px;
}
#qvdialog button:hover, #qvabout button:hover { background: #3d5580; }

/* 模拟设置（自制模态框，与导出/关于同一套外观） */
#qvsim {
  position: absolute; left: 0; top: 0; width: 960px; height: 720px;
  z-index: 22; display: none; background: rgba(4,8,16,.66);
}
#qvsim.on { display: block; }
#qvsim .box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 706px; max-height: 702px; overflow: auto; padding: 18px; border-radius: 8px;
  background: #1d2a41; border: 1px solid #31476d;
  font: 15px/1.4 "Microsoft YaHei UI","Microsoft YaHei",sans-serif; color: #dce3ff;
}
#qvsim h3 { margin: 0 0 10px; font-size: 18px; color: #eaf0fa; font-weight: 600; }
#qvsim h3 .sub { font-size: 12.5px; color: #8ea3b8; font-weight: 400; }
#qvsim h4 { margin: 14px 0 8px; font-size: 14px; color: #8fb4e0; border-top: 1px solid #31476d; padding-top: 10px; }
/* ★ 网格必须把每行填满：「控件不居中」就是最后一行只剩半排、左边重右边空造成的 */
#qvsim .grid { display: grid; gap: 7px 12px; align-items: end; }
#qvsim .grid.g4 { grid-template-columns: repeat(4, 1fr); }
#qvsim .grid.g3 { grid-template-columns: repeat(3, 1fr); }
#qvsim label { display: block; font-size: 12.5px; color: #a9bcd4; }
#qvsim label.wide { grid-column: 1 / -1; }
#qvsim input, #qvsim select, #qvsim textarea {
  margin-top: 3px; width: 100%; box-sizing: border-box;
  background: #101a2b; color: #dce3ff; border: 1px solid #31476d; border-radius: 5px;
  padding: 5px 8px; font: 13.5px/1.35 "Microsoft YaHei",sans-serif;
}
#qvsim textarea { height: 104px; font: 12.5px/1.5 Consolas, monospace; resize: vertical; }
#qvsim .btns { margin-top: 10px; text-align: right; }
#qvsim button {
  margin-left: 8px; padding: 7px 16px; border-radius: 6px; cursor: pointer;
  background: #31476d; color: #eaf0fa; border: 1px solid #456; font-size: 14px;
}
#qvsim button:hover { background: #3d5580; }
#qvsim button.pri { background: #2f6d8e; }
#qvsim button.pri:hover { background: #3a7ea3; }

/* 字形零件：SVG 有内边距，放大后不糊 */
#art img, #txt img {
  image-rendering: -webkit-optimize-contrast;
  shape-rendering: geometricPrecision;
}

/* 启动 / 错误层 */
#boot, #err {
  position: absolute; inset: 0; z-index: 99;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #000; color: #fff; text-align: center;
  font-family: "BIZ UDPGothic", "Yu Gothic UI", Meiryo, sans-serif;
}
#boot .t1 { font-size: 42px; letter-spacing: .05em; margin-bottom: 28px; }
#boot .bar { width: 420px; height: 14px; border: 2px solid rgba(255,255,255,.55); }
#boot .bar > i { display: block; height: 100%; width: 0; background: #fff; transition: width .3s; }
#boot .msg { margin-top: 18px; font-size: 22px; color: #9fb0c6; }
#err h1 { font-weight: 400; font-size: 38px; margin: 0 0 16px; }
#errmsg { font: 16px/1.5 monospace; color: #ffb4b4; max-width: 80%; white-space: pre-wrap; text-align: left; }