/* ============================================================
   THE MESSAGE FROM DEEP SPACE - Dark Comedy Edition
   happystoner5420 Games
   Retro 1973 NASA-terminal aesthetic. Amber phosphor + cold cyan.
   ============================================================ */

:root{
  --void:        #060706;
  --panel:       #0c1210;
  --panel-2:     #101915;
  --amber:       #ffb000;
  --amber-dim:   #a56f00;
  --amber-glow:  rgba(255,176,0,0.55);
  --cyan:        #4dfff0;
  --cyan-dim:    #1c9a90;
  --green:       #6dff8f;
  --red:         #ff4d4d;
  --red-dim:     #a52626;
  --paper:       #e9dfc4;
  --line:        #26332c;
  --font-mono: "Courier New", "Consolas", monospace;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background: var(--void);
  color: var(--amber);
  font-family: var(--font-mono);
  overflow: hidden;
  -webkit-font-smoothing: none;
}

button, input, select{
  font-family: var(--font-mono);
}

/* ---------- CRT / noise overlays ---------- */
#crt-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 9998;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.0) 0px,
    rgba(0,0,0,0.14) 1px,
    rgba(0,0,0,0.0) 3px
  );
  mix-blend-mode: multiply;
}
#crt-overlay::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
#noise-overlay{
  position: fixed; inset:0; pointer-events:none; z-index:9997;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: noiseShift 0.4s steps(2) infinite;
}
@keyframes noiseShift{
  0%{ transform: translate(0,0); }
  100%{ transform: translate(-2px,1px); }
}

/* ---------- Screens ---------- */
.screen{
  position: fixed; inset:0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.screen.active{ display: flex; }

/* ---------- Boot screen ---------- */
#screen-boot{ background: var(--void); align-items: flex-start; justify-content: flex-start; }
.boot-log{
  padding: 40px; font-size: 15px; line-height: 1.7;
  color: var(--green); text-shadow: 0 0 6px rgba(109,255,143,0.6);
  white-space: pre-wrap;
}

/* ---------- Main Menu ---------- */
#screen-menu{ background: radial-gradient(ellipse at 50% 30%, #10130f 0%, #050605 70%); }
.stars-canvas-wrap{ position:absolute; inset:0; z-index:0; }
#canvas-stars{ width:100%; height:100%; display:block; }
.menu-wrap{ position:relative; z-index:1; text-align:center; }

.logo-eyebrow{
  letter-spacing: 4px; font-size: 12px; color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan); margin-bottom: 18px;
}
.logo-title{
  font-size: 54px; line-height: 1.1; margin: 0 0 6px 0;
  color: var(--amber); text-shadow: 0 0 18px var(--amber-glow), 0 0 40px rgba(255,176,0,0.25);
  letter-spacing: 3px;
}
.logo-title span{ color: var(--paper); text-shadow: 0 0 14px rgba(233,223,196,0.5); }
.logo-sub{ color: var(--amber-dim); letter-spacing: 2px; font-size: 13px; margin-bottom: 50px; }

.menu-nav{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.menu-btn{
  background: transparent; border: 1px solid var(--amber-dim);
  color: var(--amber); padding: 12px 34px; font-size: 15px;
  letter-spacing: 3px; cursor: pointer; width: 320px;
  text-align:left; position: relative;
  transition: all 0.15s ease;
}
.menu-btn-index{ color: var(--cyan-dim); margin-right: 14px; font-size: 12px; }
.menu-btn:hover{
  background: rgba(255,176,0,0.08); border-color: var(--amber);
  box-shadow: 0 0 20px rgba(255,176,0,0.2) inset;
  color: #fff2cf;
}
.menu-footer{ margin-top: 50px; color: var(--line); font-size: 11px; letter-spacing: 2px; }

/* ---------- Doc panels (how to play / credits) ---------- */
.panel-doc{
  width: min(760px, 92vw); max-height: 86vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
  padding: 34px 40px; position: relative;
}
.panel-doc-header{ margin-bottom: 20px; border-bottom: 1px dashed var(--line); padding-bottom: 14px; }
.stamp{
  display:inline-block; border:2px solid var(--red); color: var(--red);
  padding: 2px 10px; font-size:11px; letter-spacing:3px; transform: rotate(-3deg);
  margin-bottom: 10px;
}
.panel-doc-header h2{ color: var(--amber); letter-spacing: 2px; margin:0; font-size: 22px; }
.panel-doc-body h3{ color: var(--cyan); font-size: 13px; letter-spacing: 2px; margin: 22px 0 6px; }
.panel-doc-body p{ color: var(--paper); font-size: 14px; line-height: 1.7; margin: 0 0 8px; }
.btn-back{
  margin-top: 22px; background: transparent; border: 1px solid var(--amber-dim);
  color: var(--amber); padding: 10px 20px; cursor: pointer; letter-spacing: 2px;
}
.btn-back:hover{ background: rgba(255,176,0,0.1); }

.credits-body{ text-align:center; }
.credits-game-title{ color: var(--amber); font-size: 20px; letter-spacing: 3px; }
.credits-sub{ color: var(--cyan); font-size: 12px; letter-spacing: 3px; margin-top:-6px;}
.credits-divider{ width: 60px; height:1px; background: var(--line); margin: 18px auto; }
.credits-studio{ font-size: 22px; color: var(--paper); letter-spacing: 2px; }
.credits-studio-small{ font-size: 14px; color: var(--paper); }
.credits-thanks{ font-style: italic; color: var(--amber-dim) !important; }
.credits-year{ font-size: 11px; color: var(--line) !important; margin-top: 20px; }

/* ---------- Briefing / Intro ---------- */
.briefing-wrap{ width: min(700px, 92vw); text-align:left; }
.briefing-text{
  color: var(--green); font-size: 15px; line-height: 1.8;
  white-space: pre-wrap; min-height: 220px;
  text-shadow: 0 0 5px rgba(109,255,143,0.4);
}
.btn-continue{
  margin-top: 30px; background: transparent; border: 1px solid var(--amber);
  color: var(--amber); padding: 12px 24px; letter-spacing: 2px; cursor: pointer;
  display:block;
}
.btn-continue:hover{ background: rgba(255,176,0,0.1); }

/* ---------- Main Game Layout ---------- */
#screen-game{ align-items: stretch; justify-content: stretch; }
.game-grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: 52px 1fr;
  grid-template-areas:
    "topbar topbar"
    "meters main";
  width: 100%; height: 100%;
  background: var(--void);
}

.topbar{
  grid-area: topbar;
  display:flex; align-items:center; justify-content: space-between;
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 0 16px;
}
.topbar-left{ display:flex; align-items:center; gap: 14px; }
.topbar-title{ color: var(--amber); letter-spacing: 2px; font-size: 13px; }
.topbar-day{ color: var(--cyan); font-size: 12px; border: 1px solid var(--cyan-dim); padding: 2px 8px; }
.topbar-tabs{ display:flex; gap: 4px; }
.tab-btn{
  background: transparent; border: 1px solid transparent; color: var(--amber-dim);
  padding: 7px 14px; font-size: 12px; letter-spacing: 1px; cursor: pointer;
}
.tab-btn.active, .tab-btn:hover{ color: var(--amber); border-color: var(--line); background: rgba(255,176,0,0.06); }
.btn-menu-exit{
  background: transparent; border: 1px solid var(--red-dim); color: var(--red);
  padding: 6px 12px; font-size: 11px; letter-spacing: 1px; cursor: pointer;
}
.btn-menu-exit:hover{ background: rgba(255,77,77,0.1); }

.meters-panel{
  grid-area: meters; background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 14px; overflow-y: auto;
  display:flex; flex-direction: column; gap: 14px;
}
.meter-block{}
.meter-label{ font-size: 10px; letter-spacing: 2px; color: var(--cyan-dim); margin-bottom: 4px; }
.meter-bar{
  height: 10px; background: #1a1a15; border: 1px solid var(--line);
  position: relative; overflow:hidden;
}
.meter-fill{ height: 100%; background: var(--green); transition: width 0.4s ease; }
.meter-bar-danger .meter-fill{ background: var(--red); }
.meter-bar-warn .meter-fill{ background: var(--amber); }
.meter-bar-good .meter-fill{ background: var(--cyan); }

.mood-face{ font-size: 28px; text-align:center; color: var(--amber); text-shadow: 0 0 10px var(--amber-glow); }
.mood-name{ text-align:center; font-size: 11px; letter-spacing: 2px; color: var(--paper); }

.scope-block canvas{
  width: 100%; background: #030402; border: 1px solid var(--line);
  display:block;
}

/* ---------- Main panel ---------- */
.main-panel{
  grid-area: main; overflow: hidden; position: relative;
  display:flex; flex-direction: column;
}
.tab-content{ display:none; flex:1; overflow:hidden; flex-direction:column; }
.tab-content.active{ display:flex; }

/* Terminal tab */
.transmission-log{
  flex:1; overflow-y: auto; padding: 18px 24px;
  display:flex; flex-direction:column; gap: 12px;
}
.msg{
  max-width: 78%; padding: 10px 14px; border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; animation: fadeIn 0.25s ease;
}
@keyframes fadeIn{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }
.msg-player{ align-self: flex-end; background: rgba(77,255,240,0.06); border-color: var(--cyan-dim); color: var(--cyan); }
.msg-alien{ align-self: flex-start; background: rgba(255,176,0,0.05); border-color: var(--amber-dim); color: var(--amber); }
.msg-system{ align-self: center; color: var(--paper); font-style: italic; font-size: 12px; border: none; background:none; text-align:center; }
.msg-alert{ align-self: center; color: var(--red); border-color: var(--red-dim); font-size:12px; text-align:center; }
.msg-tag{ font-size: 10px; letter-spacing: 2px; opacity:0.6; display:block; margin-bottom: 4px; }

.decode-zone{
  border-top: 1px dashed var(--line); padding: 12px 24px; background: rgba(255,176,0,0.03);
}
.decode-header{ font-size: 11px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 6px; }
.decode-raw{
  font-size: 17px; letter-spacing: 3px; color: var(--amber); margin-bottom: 8px;
  word-break: break-all;
}
.decode-hint{ font-size: 11px; color: var(--paper); margin-bottom: 8px; opacity: 0.7; }
.btn-decode{
  background: transparent; border: 1px solid var(--amber); color: var(--amber);
  padding: 8px 16px; cursor: pointer; letter-spacing: 1px;
}
.btn-decode:hover{ background: rgba(255,176,0,0.12); }

.composer{ border-top: 1px solid var(--line); padding: 14px 24px 18px; background: var(--panel); }
.composer-header{ font-size: 11px; letter-spacing: 2px; color: var(--cyan-dim); margin-bottom: 8px; }
.composer-controls{ display:flex; gap: 20px; margin-bottom: 10px; flex-wrap: wrap; }
.composer-controls label{ font-size: 10px; color: var(--paper); letter-spacing: 1px; display:flex; flex-direction:column; gap:4px; }
.composer-controls select{ background: #111; color: var(--amber); border: 1px solid var(--line); padding: 4px; }
.composer-input-row{ display:flex; gap: 10px; margin-bottom: 8px; }
#composer-input{
  flex:1; background: #0a0d0a; border: 1px solid var(--line); color: var(--paper);
  padding: 10px 12px; font-size: 13px;
}
#composer-input:focus{ outline: none; border-color: var(--amber-dim); }
#btn-send-message{
  background: var(--amber); color: #1a1000; border: none; padding: 10px 22px;
  font-weight: bold; letter-spacing: 1px; cursor: pointer;
}
#btn-send-message:hover{ background: #ffc94d; }
.composer-word-bank{ display:flex; flex-wrap: wrap; gap: 6px; max-height: 70px; overflow-y:auto; }
.word-chip{
  background: rgba(77,255,240,0.05); border: 1px solid var(--cyan-dim); color: var(--cyan);
  font-size: 11px; padding: 3px 9px; cursor: pointer;
}
.word-chip:hover{ background: rgba(77,255,240,0.15); }

/* Dictionary tab */
.dictionary-search{ display:flex; justify-content: space-between; align-items:center; padding: 16px 24px; border-bottom: 1px solid var(--line); }
#dict-search{ flex:1; max-width: 320px; background:#0a0d0a; border:1px solid var(--line); color:var(--paper); padding: 8px 10px; }
.dict-count{ color: var(--cyan); font-size: 11px; letter-spacing: 1px; }
.dictionary-grid{
  flex:1; overflow-y:auto; padding: 16px 24px; display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
}
.dict-card{ border:1px solid var(--line); padding: 10px 12px; background: rgba(255,255,255,0.015); }
.dict-word{ color: var(--amber); font-size: 15px; letter-spacing: 1px; }
.dict-symbol{ color: var(--cyan-dim); font-size: 12px; float:right; }
.dict-meaning{ color: var(--paper); font-size: 12px; margin-top: 4px; }
.dict-cat{ color: var(--green); font-size: 10px; letter-spacing: 1px; margin-top: 4px; text-transform: uppercase; }

/* Notebook tab */
.notebook-body{ flex:1; overflow-y:auto; padding: 20px 30px; color: var(--paper); font-size: 13.5px; line-height: 1.8; }
.notebook-body h4{ color: var(--cyan); letter-spacing: 1px; margin-top: 18px; }
.notebook-entry{ border-left: 2px solid var(--line); padding-left: 12px; margin-bottom: 10px; }

/* Team tab */
.team-grid{ display:flex; gap: 10px; padding: 18px 24px 6px; flex-wrap: wrap; }
.team-card{
  border:1px solid var(--line); padding: 10px 14px; cursor:pointer; min-width: 150px;
  background: rgba(255,255,255,0.015);
}
.team-card:hover{ border-color: var(--amber-dim); }
.team-card-name{ color: var(--amber); font-size: 13px; }
.team-card-role{ color: var(--cyan-dim); font-size: 10px; letter-spacing:1px; }
.team-dialogue{ flex:1; overflow-y:auto; padding: 12px 24px 24px; color: var(--paper); font-size: 13.5px; line-height: 1.7; }
.team-dialogue .quote{ border-left: 2px solid var(--amber-dim); padding-left: 12px; margin-bottom: 10px; }
.team-dialogue .speaker{ color: var(--amber); font-size: 11px; letter-spacing: 1px; display:block; margin-bottom: 3px; }

/* ---------- Ending screen ---------- */
.ending-wrap{ width: min(680px, 92vw); text-align:center; }
.ending-badge{ color: var(--red); border: 1px solid var(--red-dim); display:inline-block; padding: 4px 14px; letter-spacing: 3px; font-size: 11px; margin-bottom: 20px; }
.ending-title{ color: var(--amber); font-size: 28px; letter-spacing: 2px; text-shadow: 0 0 16px var(--amber-glow); }
.ending-text{ color: var(--paper); font-size: 14px; line-height: 1.8; margin: 18px 0 26px; }
.ending-stats{ display:flex; justify-content:center; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.ending-stat{ border: 1px solid var(--line); padding: 8px 16px; font-size: 11px; color: var(--cyan); }

/* scrollbars */
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--line); }

@media (max-width: 820px){
  .game-grid{ grid-template-columns: 1fr; grid-template-rows: 52px auto 1fr; grid-template-areas: "topbar" "meters" "main"; }
  .meters-panel{ flex-direction: row; flex-wrap: wrap; border-right:none; border-bottom: 1px solid var(--line); max-height: 160px; }
  .meter-block{ min-width: 120px; }
  .scope-block{ display:none; }
  .logo-title{ font-size: 36px; }
  .menu-btn{ width: 260px; }
}