/* ============================================================
   hud.atmosphere.css — 氛围层五件套
   全部由 hud.js 注入 DOM；JS 挂了页面只是「素」一点，不缺内容。
   ============================================================ */

.hud-atmo {
  position: fixed;
  inset: 0;
  pointer-events: none;      /* 必须 */
  z-index: 0;
  overflow: hidden;
}
.hud-atmo > * { position: absolute; }

/* 内容必须盖在氛围层上 */
.hud-content { position: relative; z-index: 1; }

/* ---------- 1. 网格 ---------- */
.hud-atmo__grid {
  inset: 0;
  background-image:
    linear-gradient(to right,  var(--hud-a04) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hud-a04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, #000 30%, transparent 78%);
  opacity: .5;
}

/* ---------- 2. 扫描带 ---------- */
.hud-atmo__scan {
  left: 0; right: 0;
  height: 90px;              /* 不低于 60px，否则像一根线在跳 */
  background: linear-gradient(180deg, transparent, var(--hud-a08), transparent);
  animation: hud-scan 9s linear infinite;
  opacity: .6;
}

/* ---------- 3. 暗角（唯一允许用 rgba(0,0,0) 的地方：光学现象，不是设计色） ---------- */
.hud-atmo__vignette {
  inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 45%, transparent 45%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- 4. 噪点（静态，不做动画） ---------- */
.hud-atmo__noise {
  inset: 0;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ---------- 5. 角部短划（只做对角两个） ---------- */
.hud-atmo__corners::before,
.hud-atmo__corners::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--hud-a52);
}
.hud-atmo__corners::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.hud-atmo__corners::after  { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* ---------- 5b. 四角标记变体 ----------
   默认只做对角两个。大屏投影 / 答辩是唯一例外：投影仪常裁掉画面边缘，
   对角标记可能只剩一个可见，这时用属性显式开四角（见 references/atmosphere.md 第 6 节）。 */
[data-hud-corners="four"] .hud-atmo__corners {
  inset: 14px;
  border: 1px solid var(--hud-a52);
  /* 整体描一圈，再用 mask 只留四角 22x22，擦掉四边中段 */
  -webkit-mask:
    linear-gradient(#000 0 0) left  top    / 22px 22px no-repeat,
    linear-gradient(#000 0 0) right top    / 22px 22px no-repeat,
    linear-gradient(#000 0 0) left  bottom / 22px 22px no-repeat,
    linear-gradient(#000 0 0) right bottom / 22px 22px no-repeat;
          mask:
    linear-gradient(#000 0 0) left  top    / 22px 22px no-repeat,
    linear-gradient(#000 0 0) right top    / 22px 22px no-repeat,
    linear-gradient(#000 0 0) left  bottom / 22px 22px no-repeat,
    linear-gradient(#000 0 0) right bottom / 22px 22px no-repeat;
}
[data-hud-corners="four"] .hud-atmo__corners::before,
[data-hud-corners="four"] .hud-atmo__corners::after { display: none; }

/* ---------- 降级 ---------- */
@media (max-width: 640px) {
  .hud-atmo { display: none; }
  .hud-atmo__grid { background-size: 64px 64px; }
}
@media print {
  .hud-atmo { display: none !important; }
}