/* ============================================================
   未来科学研究所 FSI — レトロ研究サイト風スタイル
   通常ページ + ターミナル（ゲート） + ツール + フロアマップ
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "MS Gothic", sans-serif;
  background: #f5f0e1;
  color: #222;
  line-height: 1.8;
}

a { color: #0044cc; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- ヘッダー ---------- */
.topbar {
  background: #1a3a5c;
  color: #fff;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.logo { font-size: 20px; font-weight: bold; letter-spacing: 2px; }
.logo-en { font-size: 11px; font-weight: normal; color: #9fc3e8; margin-left: 8px; }
.topbar nav { display: flex; gap: 16px; flex-wrap: wrap; }
.topbar nav a { color: #cfe0f2; font-size: 14px; padding: 4px 8px; border-bottom: 2px solid transparent; }
.topbar nav a:hover { color: #fff; text-decoration: none; }
.topbar nav a.active { color: #fff; border-bottom-color: #ffcc33; }

/* ---------- メイン ---------- */
main { max-width: 760px; margin: 0 auto; padding: 32px 20px 48px; }

.notice-banner {
  background: #fff3cd;
  border: 1px solid #e0b84c;
  border-left: 6px solid #e0a800;
  padding: 14px 16px;
  margin-bottom: 32px;
  font-size: 15px;
}
.notice-banner.success { background: #d4edda; border-color: #7ac490; border-left-color: #28a745; }

h1 { font-size: 24px; margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 3px double #1a3a5c; display: inline-block; }
h2 { font-size: 18px; margin: 28px 0 10px; color: #1a3a5c; }

section p { margin-bottom: 12px; }

.record-box { background: #fff; border: 1px solid #d8cfb8; padding: 18px 20px; margin-top: 28px; }
.record-box ul { margin-left: 20px; }

.record-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
.record-table th, .record-table td { border: 1px solid #d8cfb8; padding: 8px 12px; text-align: left; }
.record-table th { background: #e8e0cc; white-space: nowrap; }

.btn {
  display: inline-block;
  background: #1a3a5c;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: bold;
}
.btn:hover { background: #2c5580; text-decoration: none; }

.small { font-size: 12px; color: #666; }

/* 暗号メモの表示 */
.cipher-memo {
  font-family: "SF Mono", "Menlo", "Consolas", "MS Gothic", monospace;
  background: #0e141b;
  color: #3ce06a;
  padding: 14px 16px;
  display: inline-block;
  border: 1px solid #2a4a35;
  letter-spacing: 1px;
  word-break: break-all;
  font-size: 15px;
}

/* ---------- フッター ---------- */
footer { background: #1a3a5c; color: #cfe0f2; font-size: 12px; margin-top: 40px; }
.footer-inner { max-width: 760px; margin: 0 auto; padding: 16px 20px; }
.footer-inner p { margin-bottom: 4px; }

/* ============================================================
   ターミナルモード（ゲート・サーバールーム）
   ============================================================ */
body.terminal {
  background: #0a0e12;
  color: #3ce06a;
  font-family: "SF Mono", "Menlo", "Consolas", "MS Gothic", monospace;
  min-height: 100vh;
}

.terminal-main { max-width: 720px; margin: 0 auto; padding: 48px 20px; }

.terminal-box, .terminal-doc {
  background: #0e141b;
  border: 1px solid #1f3a2a;
  padding: 28px 30px;
  box-shadow: 0 0 24px rgba(60, 224, 106, 0.08);
}

.terminal-title {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #7ef0a0;
  border-bottom: 1px solid #1f3a2a;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.terminal-text { font-size: 14px; line-height: 1.9; margin-bottom: 20px; }

.terminal-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.terminal-form label { color: #7ef0a0; font-weight: bold; }
.terminal-form input {
  background: #0a0e12;
  border: 1px solid #2a4a35;
  color: #3ce06a;
  font-family: inherit;
  font-size: 16px;
  padding: 8px 12px;
  letter-spacing: 3px;
  min-width: 220px;
}
.terminal-form input:focus { outline: none; border-color: #3ce06a; box-shadow: 0 0 8px rgba(60, 224, 106, 0.3); }
.terminal-form button {
  background: #1f3a2a;
  border: 1px solid #2a4a35;
  color: #7ef0a0;
  font-family: inherit;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 8px 18px;
  cursor: pointer;
}
.terminal-form button:hover { background: #2a4a35; }

.terminal-error { color: #ff6b6b; margin-top: 14px; font-weight: bold; }
.terminal-hint { color: #8a93a0; margin-top: 10px; font-size: 13px; }
.terminal-clear { color: #ffcc33; font-size: 22px; font-weight: bold; text-align: center; letter-spacing: 8px; margin: 20px 0 12px; }
.terminal-attempts { color: #ffcc33; font-size: 13px; margin-top: 12px; }

/* ============================================================
   復号ツール室
   ============================================================ */
.tools-main { max-width: 820px; margin: 0 auto; padding: 32px 20px 48px; }
.tools-form { background: #fff; border: 1px solid #d8cfb8; padding: 20px; }
.tools-form label { font-weight: bold; font-size: 14px; display: block; margin: 10px 0 4px; }
.tools-form select, .tools-form input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #b8ae92;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
}
.tools-form textarea {
  width: 100%;
  min-height: 90px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #b8ae92;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
}
.tools-run {
  margin-top: 14px;
  background: #1a3a5c;
  color: #fff;
  border: none;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.tools-run:hover { background: #2c5580; }

.morse-table { border-collapse: collapse; background: #fff; font-size: 12px; font-family: monospace; }
.morse-table th, .morse-table td { border: 1px solid #d8cfb8; padding: 3px 8px; text-align: center; }

/* ============================================================
   フロアマップ
   ============================================================ */
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }
.map-card {
  background: #fff;
  border: 2px solid #d8cfb8;
  padding: 16px;
  text-align: center;
}
.map-card.locked { border-style: dashed; background: #f0ece0; }
.map-card.open { border-color: #28a745; background: #e9f7ee; }
.map-card .floor-no { font-size: 12px; color: #666; letter-spacing: 1px; }
.map-card .floor-name { font-size: 16px; font-weight: bold; margin: 6px 0; }
.map-card .floor-icon { font-size: 28px; }

/* 調査記録 */
.case-file { background: #fff; border: 1px solid #d8cfb8; padding: 18px 20px; margin-top: 20px; font-family: monospace; font-size: 13px; }

@media (max-width: 600px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 20px; }
  .terminal-form input { min-width: 100%; }
}