/* ============================================================
   KASADAM - Cockpit UI Prototype
   カラートークン: 深紺ベース + レッド/マゼンタのアクセント + シアン文字
   ============================================================ */
:root{
  --ink:        #04060d;
  --panel:      #0b1224;
  --panel-2:    #131c33;
  --line:       #2a3a5c;
  --red:        #e0344f;
  --red-dim:    #7c1c30;
  --magenta:    #ff5f8a;
  --cyan:       #7fe9ff;
  --cyan-dim:   #2f7f96;
  --amber:      #ffb648;
  --green:      #6ef2a5;
  --mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--ink);
  color:var(--cyan);
  font-family:var(--mono);
  overflow:hidden;
  cursor:crosshair;
  -webkit-font-smoothing:antialiased;
}

#cockpit{ position:fixed; inset:0; overflow:hidden; }

/* --- 外界 / HUD --- */
#view,#hud{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#hud{ pointer-events:none; }

/* --- キャノピー構造 --- */
#frame{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}

/* --- 通信ウィンドウ --- */
#comms{
  position:absolute; top:2.2vh; left:0; right:0;
  display:flex; justify-content:space-between;
  padding:0 4.5vw;
  pointer-events:none;
}
.comm{
  width:min(210px, 15vw);
  opacity:.35;
  transition:opacity .25s ease, transform .25s ease;
  transform:translateY(-6px);
}
.comm[data-state="active"]{ opacity:1; transform:translateY(0); }
.comm-frame{
  position:relative;
  aspect-ratio:4/3;
  background:linear-gradient(160deg,#0d1730,#060a14);
  border:1px solid var(--cyan-dim);
  clip-path:polygon(0 12%, 8% 0, 100% 0, 100% 88%, 92% 100%, 0 100%);
  overflow:hidden;
}
.comm-frame::after{ /* 走査線 */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom, rgba(127,233,255,.07) 0 1px, transparent 1px 3px);
}
.comm-face{ width:100%; height:100%; display:block; }
.comm-face .helmet{ fill:#16253f; stroke:var(--cyan-dim); stroke-width:1.5; }
.comm-face .visor { fill:#0a1526; stroke:var(--cyan); stroke-width:1.2; opacity:.9; }
.comm-face .suit  { fill:#3a1220; stroke:var(--red-dim); stroke-width:1.5; }
.comm[data-state="active"] .comm-face .visor{ fill:#123a4d; }
.comm-meta{
  display:flex; justify-content:space-between; gap:6px;
  font-size:9px; letter-spacing:.08em; padding-top:3px;
}
.callsign{ color:var(--cyan-dim); }
.comm-line{ color:var(--amber); }
#comm-r{ text-align:right; }

/* --- 下部コンソール --- */
#console{
  position:absolute; left:0; bottom:0;
  width:100%; height:46vh;
  pointer-events:none;
}

/* --- 起動シーケンス --- */
#boot{
  position:absolute; inset:0;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  z-index:50;
  transition:opacity .6s ease;
}
#boot.done{ opacity:0; pointer-events:none; }
.boot-inner{ text-align:left; }
#boot-text{
  font-size:12px; line-height:1.55; color:var(--green);
  text-shadow:0 0 8px rgba(110,242,165,.45);
  margin:0; white-space:pre;
}
#boot-prompt{
  margin-top:18px; text-align:center;
  font-size:13px; letter-spacing:.12em;
  color:var(--amber); text-shadow:0 0 10px rgba(255,182,72,.5);
  opacity:0; transition:opacity .2s ease;
}
#boot-prompt.ready{ opacity:1; animation:bootblink 1s steps(2,start) infinite; }
@keyframes bootblink{ 50%{ opacity:.25; } }

@media (max-width:820px){
  #boot-text{ font-size:9px; }
  #boot-prompt{ font-size:10px; }
}

/* --- ヘルプ --- */
#help{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:.6vh; z-index:20;
  font-size:clamp(7px, 0.8vw, 10px); letter-spacing:.06em;
  white-space:nowrap;
  color:#5d7391;
  background:rgba(4,6,13,.65);
  border:1px solid rgba(45,60,92,.6);
  padding:4px 12px;
  transition:opacity .3s ease;
}
#help b{ color:var(--amber); font-weight:600; }
#help.hidden{ opacity:0; }

/* --- CRT演出 --- */
#scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:30;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
#vignette{
  position:absolute; inset:0; pointer-events:none; z-index:31;
  background:radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(2,4,10,.75) 100%);
}

/* 被弾フラッシュ */
#cockpit.hit::before{
  content:""; position:absolute; inset:0; z-index:40; pointer-events:none;
  background:rgba(224,52,79,.22);
}

@media (max-width:900px){
  #comms{ padding:0 2vw; }
  .comm{ width:26vw; }
  #help{ font-size:8px; }
}