/* HUD の面（layouts/hud.html）の骨組み（Life #389）。正本の見た目は Claude Design の板「vell HUD」
 * （デスクトップ 1440・スマホ 390）。色・字・余白は tokens.css の変数。 */

html, body { margin: 0; overflow-x: clip; }
html { scrollbar-gutter: stable; }   /* モーダルで overflow: hidden にしても幅がずれない */
body.hud { background: var(--c-ground); color: var(--c-text); font-family: var(--f-sans);
  font-size: var(--t-body-size); line-height: var(--t-body-line); -webkit-text-size-adjust: 100%; }
body.hud a { color: var(--c-accent); }
body.hud a:hover { color: var(--c-accent-soft); }

/* 格子と光（モードで分岐するのはここだけ・README「ライト／ダークの切替」）。
 * 暗（既定）: 格子は accent 4%・上部の放射の光・glow あり。明: 格子は hairline 6%・放射の光と glow は無し。
 * 画面側はこの --hud-* と tokens の --c-* / --sh-* だけを使い、data-mode で分岐しない。 */
:root[data-theme="hud"] {
  --hud-grid: rgba(91, 227, 255, 0.04);
  --hud-radial: radial-gradient(ellipse at 50% 0%, rgba(91, 227, 255, 0.10), transparent 55%);
  --hud-radial-gate: radial-gradient(ellipse at 50% 30%, rgba(91, 227, 255, 0.14), transparent 50%);
  --hud-panel-bg: rgba(6, 14, 22, 0.75);
  --hud-gate-bg: rgba(6, 14, 22, 0.8);
  --hud-field-bg: rgba(4, 8, 13, 0.9);
  --hud-adm-bg: rgba(4, 8, 13, 0.6);
  --hud-talk-bg: rgba(10, 8, 22, 0.8);
  --hud-talk-inset: inset 0 0 60px rgba(180, 140, 255, 0.06);
  --hud-talk-input-glow: 0 0 18px rgba(180, 140, 255, 0.15);
  --hud-talk-send-glow: 0 0 18px rgba(180, 140, 255, 0.45);
  --hud-on-purple: #0B0616;
  --hud-core-filter: drop-shadow(0 0 14px rgba(91, 227, 255, 0.45));
  --hud-bar-glow-accent: 0 0 8px rgba(91, 227, 255, 0.4);
  --hud-bar-glow-orange: 0 0 8px rgba(255, 138, 61, 0.4);
  --hud-login-glow: 0 0 18px rgba(255, 138, 61, 0.45);
  --hud-gate-inset: inset 0 0 60px rgba(91, 227, 255, 0.05);
  --hud-backdrop: rgba(2, 4, 8, 0.62);
}
:root[data-theme="hud"][data-mode="light"] {
  --hud-grid: color-mix(in srgb, var(--c-hairline-strong) 6%, transparent);
  --hud-radial: linear-gradient(transparent, transparent);
  --hud-radial-gate: linear-gradient(transparent, transparent);
  --hud-panel-bg: var(--c-surface);
  --hud-gate-bg: var(--c-surface);
  --hud-field-bg: var(--c-surface);
  --hud-adm-bg: var(--c-surface);
  --hud-talk-bg: var(--c-surface);
  --hud-talk-inset: none;
  --hud-talk-input-glow: none;
  --hud-talk-send-glow: none;
  --hud-on-purple: #FFFFFF;
  --hud-core-filter: none;
  --hud-bar-glow-accent: none;
  --hud-bar-glow-orange: none;
  --hud-login-glow: none;
  --hud-gate-inset: none;
  --hud-backdrop: color-mix(in srgb, var(--c-text-strong) 45%, transparent);
  --sh-glow-accent: none; --sh-glow-orange: none; --sh-glow-purple: none; --sh-glow-ok: none; --sh-glow-danger: none;
  --sh-panel-inset: none; --sh-header-line: none;
}

/* 地: 40px の細い格子と上部の放射の光 */
.hud-ground { min-height: 100vh; display: flex; flex-direction: column;
  background:
    var(--hud-radial),
    repeating-linear-gradient(0deg, var(--hud-grid) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--hud-grid) 0 1px, transparent 1px 40px),
    var(--c-ground); }

/* ヘッダ: コアの小さな円環・VELL・読み出し */
.hud-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding: 16px 36px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent); box-shadow: var(--sh-header-line); }
.hud-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hud-brand-mark { flex: none; display: block; }
/* マークが TALK を開くボタンのとき（Life #397・hud_brand_action = "talk"）。当たりは 44px・紫の細い輪・開いている間は光る */
.hud-brand-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: -5px; padding: 0; border: 1px solid color-mix(in srgb, var(--c-purple) 55%, transparent); border-radius: var(--r-round);
  background: transparent; cursor: pointer; }
.hud-brand-btn:hover { border-color: var(--c-purple); }
.hud-brand-btn[aria-expanded="true"] { border-color: var(--c-purple); box-shadow: var(--sh-glow-purple);
  background: color-mix(in srgb, var(--c-purple) 12%, transparent); }
.hud-brand-name { margin: 0; font-family: var(--f-display); font-weight: var(--t-brand-weight);
  font-size: var(--t-brand-size); line-height: var(--t-brand-line); letter-spacing: var(--t-brand-spacing);
  color: var(--c-accent); text-shadow: var(--sh-glow-accent); }
.hud-brand-sub { font-family: var(--f-mono); font-size: var(--t-label-size); letter-spacing: 0.18em;
  color: var(--c-text-muted); }
.hud-readouts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 26px; min-width: 0; }
.hud-head .hud-mode { background: transparent; border-color: color-mix(in srgb, var(--c-accent) 35%, transparent); color: var(--c-accent); }
.hud-head .hud-mode:hover { color: var(--c-text-strong); }

/* 管理のバーとタブ（/admin/* の行き先・nav.json の admin 系統） */
.hud-adm { display: flex; align-items: stretch; gap: 4px; padding: 0 28px; overflow-x: auto;
  border-bottom: 1px solid var(--c-hairline); background: var(--hud-adm-bg); scrollbar-width: none; }
.hud-adm::-webkit-scrollbar { display: none; }
body.hud .hud-adm a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; white-space: nowrap;
  font-family: var(--f-mono); font-size: var(--t-readout-small-size); letter-spacing: 0.12em;
  color: var(--c-text-muted); text-decoration: none; border-bottom: 2px solid transparent; }
body.hud .hud-adm a:hover { color: var(--c-text-strong); }
body.hud .hud-adm a.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.hud-adm .hud-adm-sp { flex: 1; }
.hud-adm .hud-adm-icon { padding: 0 10px; }
.hud-adm svg { display: block; }

/* 本文: 12 列（最大幅 1380px） */
.hud-main { flex: 1; width: 100%; max-width: 1380px; margin: 0 auto; box-sizing: border-box; padding: 28px 36px 44px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-content: start; }
.hud-main > * { grid-column: span 12; min-width: 0; }
.hud-flash { grid-column: span 12; display: flex; flex-direction: column; gap: 6px; }
.hud-flash div { padding: 10px 14px; border: 1px solid var(--c-hairline); border-radius: var(--r-md);
  background: var(--c-surface); }

@media (max-width: 1023px) {
  .hud-head { padding: 14px 20px; }
  .hud-adm { padding: 0 12px; }
  .hud-main { padding: 20px; gap: var(--s-4); }
  .hud-main > * { grid-column: span 12 !important; }
}
@media (max-width: 640px) {
  .hud-head { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; }
  .hud-head { position: relative; }
  .hud-head .hud-mode { position: absolute; top: 11px; right: 16px; }
  .hud-brand { gap: 10px; }
  .hud-brand-name { font-size: 22px; }
  .hud-readouts { margin-left: 0; gap: 4px 16px; }
  .hud-readouts .p-readout { font-size: var(--t-readout-small-size); }
  .hud-main { padding: 16px; gap: 14px; }
}