/* engine.css — base reset + canvas + top control bar (lang menu).
   Theme via CSS vars: override :root values in the game's own stylesheet. */
:root {
  --eng-bg: #dff1ff;
  --eng-ctl-text: #3a6480;
  --eng-ctl-bg: rgba(255, 255, 255, 0.6);
  --eng-ctl-btn-bg: rgba(255, 255, 255, 0.75);
  --eng-ctl-border: rgba(140, 185, 215, 0.4);
  --eng-ctl-shadow: rgba(120, 170, 200, 0.28);
  --eng-menu-bg: rgba(255, 255, 255, 0.92);
  --eng-menu-hover: rgba(140, 185, 215, 0.18);
  --eng-menu-sel-bg: rgba(0, 229, 255, 0.16);
  --eng-menu-sel-text: #0091a7;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; background: var(--eng-bg); overflow: hidden; }
body {
  display: flex; justify-content: center; align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* respect device safe areas (notch) */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
canvas { display: block; touch-action: none; }

#controls {
  position: fixed;
  /* --sat/--sar 是**测试钩子**（headless 里 env() 恒 0，注入变量才能模拟刘海）；真机走 env */
  top: calc(8px + var(--sat, env(safe-area-inset-top)));
  right: calc(8px + var(--sar, env(safe-area-inset-right)));
  z-index: 20;
  display: flex; gap: 6px; align-items: center;
  padding: 5px 8px; border-radius: 18px;
  background: var(--eng-ctl-bg); backdrop-filter: blur(6px);
  box-shadow: 0 3px 12px var(--eng-ctl-shadow);
  font-size: 11px; color: var(--eng-ctl-text); user-select: none;
}
#controls .ctl-btn {
  padding: 3px 8px; border-radius: 12px; cursor: pointer;
  background: var(--eng-ctl-btn-bg); border: 1px solid var(--eng-ctl-border);
  white-space: nowrap;
}
#controls .ctl-btn.lang { display: flex; align-items: center; gap: 3px; }
#controls .ctl-btn.lang .caret { font-size: 9px; opacity: 0.6; }

/* language dropdown menu — anchored inside the fixed #controls, opens down-left
   (right:0; left:0 would push past the screen edge on narrow bars) */
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 120px; max-height: 60vh; overflow-y: auto;
  padding: 5px; border-radius: 14px;
  background: var(--eng-menu-bg); backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px var(--eng-ctl-shadow);
  display: flex; flex-direction: column; gap: 2px;
}
.lang-menu[hidden] { display: none; }
.lang-menu .lang-item {
  padding: 8px 12px; border-radius: 9px; cursor: pointer;
  font-size: 13px; color: var(--eng-ctl-text); white-space: nowrap;
}
.lang-menu .lang-item:hover { background: var(--eng-menu-hover); }
.lang-menu .lang-item.sel { background: var(--eng-menu-sel-bg); color: var(--eng-menu-sel-text); font-weight: 600; }

/* ── 共享 UI 图标(engine/ui-icons.js + engine/assets/ui/)──
   UIIcon.img() 产出的 <img class="uic">。默认铺满容器,`.inl` 用于夹在文字里。
   ⚠ img 的 alt 是对应 emoji ⇒ 图缺了浏览器直接显示 emoji(天然回退),别改成空 alt。 */
.uic { width: 88%; height: 88%; object-fit: contain; display: block; }
.uic.inl { width: 1.35em; height: 1.35em; display: inline-block; vertical-align: -.32em; }
.uic.fill { width: 100%; height: 100%; }

/* ⭐ 字号缩放的 DOM 那一半（2026-08-04）。canvas 侧在 canvas.js 的 sfont() 里做，
   但 snake 的主界面 #home、以及 snake/abyssshoot 的面板 #panel-card 全是 DOM ——
   不覆盖它们的话，那些游戏调了字号会「看起来没反应」。
   ⚠ 用 zoom 而不是改 font-size：各游戏 CSS 里的字号是写死的 px（不是 em/rem），
     改 root font-size 对它们无效；zoom 连间距一起放大，观感更接近系统级「显示缩放」。
   ⚠ #home 本身就是竖向可滚动的（见 snake/css/game.css 的注释）⇒ 放大后变高也没问题。
   ⛔ 别 zoom #panel（它是全屏遮罩，缩放遮罩会露边）—— 只 zoom 里面那张卡。 */
:root { --eng-font-k: 1; }
#home, #panel-card, #toasts { zoom: var(--eng-font-k, 1); }
/* ⚠ zoom 把**宽度也一起放大**了 ⇒ 不补偿就横向溢出（snake 实拍:右边的 0/300、0.0% 被切掉，
   左边的文字也顶出屏幕）。把宽度先除以 k,zoom 之后正好铺满一屏。
   ⚠ #panel-card 自带 width: min(92vw, 420px) 之类 ⇒ 同样要除回去,否则卡片比屏幕还宽。 */
#home, #toasts { width: calc(100vw / var(--eng-font-k, 1)); }
#panel-card { max-width: calc(100vw / var(--eng-font-k, 1)); max-height: calc(100vh / var(--eng-font-k, 1)); }