/* ══════════════════════════════════════
   code-mode.css — Terminal / code view
   ══════════════════════════════════════ */
#code-mode { background-color: var(--code-bg); color: var(--code-text); font-family: "JetBrains Mono", monospace; }

#code-mode::before {
  content: " "; display: block; position: fixed; inset: 0;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%),
              linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
  z-index: 2; background-size: 100% 2px, 3px 100%; pointer-events: none; opacity: 0.3;
}
#code-mode::after {
  content: " "; display: block; position: fixed; inset: 0;
  background: rgba(18,16,16,0.1); opacity: 0; z-index: 2;
  pointer-events: none; animation: flicker 0.15s infinite;
}
@keyframes flicker {
  0%{opacity:0.27861}5%{opacity:0.34769}10%{opacity:0.23604}15%{opacity:0.10626}
  20%{opacity:0.18128}25%{opacity:0.33896}30%{opacity:0.15383}35%{opacity:0.12185}
  40%{opacity:0.27287}45%{opacity:0.20666}50%{opacity:0.19478}55%{opacity:0.1241}
  60%{opacity:0.17382}65%{opacity:0.21974}70%{opacity:0.33436}75%{opacity:0.13736}
  80%{opacity:0.38418}85%{opacity:0.17992}90%{opacity:0.23897}95%{opacity:0.14261}
  100%{opacity:0.32737}
}

.container-code { max-width: 1000px; margin: 0 auto; padding: 72px 30px 100px; position: relative; z-index: 3; }
.terminal-header { margin-bottom: 3.5rem; border-bottom: 1px dashed var(--code-dim); padding-bottom: 2.5rem; }
.glow-text { color: var(--code-green); text-shadow: 0 0 10px var(--code-green), 0 0 20px var(--code-green); }
.cmd-line   { margin-bottom: 15px; font-size: 0.95rem; }
.code-h1    { font-size: 3rem; font-weight: 800; color: #fff; margin-bottom: 1.5rem; letter-spacing: -1px; text-transform: uppercase; }
.typing-cursor::after { content: "█"; animation: blink 1s infinite; margin-left: 5px; color: var(--code-green); }
@keyframes blink { 50% { opacity: 0; } }

.code-block-styled {
  background: #111; padding: 20px; border-radius: 6px;
  border-left: 4px solid var(--code-green); margin: 20px 0;
  color: #a9b7c6; font-size: 1rem; overflow-x: auto;
  box-shadow: inset 0 0 20px #000, 0 4px 15px rgba(0,0,0,0.5);
  border: 1px solid #333; transition: all 0.3s var(--ease-smooth);
}
.code-block-styled:hover { border-left-color: var(--code-green); box-shadow: inset 0 0 20px rgba(0,40,20,0.3), 0 0 20px rgba(0,224,160,0.2); }

.kwd     { color: #cc7832; font-weight: bold; }
.str     { color: #6a8759; }
.func    { color: #ffc66d; }
.comment { color: #666; font-style: italic; }

.code-project { margin-bottom: 3.5rem; padding-left: 25px; border-left: 2px solid #333; transition: border-color 0.3s var(--ease-smooth); }
.code-project:hover { border-left-color: var(--code-green); }
.code-project--red { border-left-color: #550000; }
.code-project--red:hover { border-left-color: #ff3333; }

.code-h2 { font-size: 1.6rem; color: var(--code-green); margin-bottom: 1rem; font-weight: 700; text-shadow: 0 0 10px rgba(0,255,0,0.5); }
.code-h2--red { color: #ff3333; text-shadow: 0 0 15px #ff3333; }

/* 一句話描述 */
.code-desc { color: #a9b7c6; margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.7; }

/* 補充說明 */
.code-meta { font-size: 0.88rem; color: #888; margin: 12px 0 16px; line-height: 1.6; }
.code-meta--red { color: #ff3333; font-style: italic; }

/* 連結按鈕群 */
.code-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px; }

/* 子模組 */
.code-submodule { margin-top: 24px; padding-top: 16px; border-top: 1px dashed #444; }
.code-submodule__title { font-size: 1rem; color: #aaa; margin-bottom: 10px; }

.code-link {
  color: var(--code-text); text-decoration: none;
  border: 1px solid var(--code-dim); padding: 10px 25px;
  display: inline-block; margin-top: 15px; margin-right: 12px;
  transition: all 0.3s var(--ease-pop); font-size: 0.95rem;
  background: #1a1a1a; font-weight: bold; letter-spacing: 1px; border-radius: 6px;
}
.code-link:hover { background: var(--code-green); color: #000; border-color: var(--code-green); box-shadow: 0 0 25px var(--code-green); transform: translateY(-3px); }

/* 紅色按鈕變體（遊戲區塊） */
.code-link-red {
  color: #ff3333;
  border-color: #ff3333;
}
.code-link-red:hover {
  background: #ff3333;
  color: #000;
  border-color: #ff3333;
  box-shadow: 0 0 25px rgba(255,51,51,0.7);
  transform: translateY(-3px);
}

.footer-code { margin-top: 4rem; padding-top: 2rem; border-top: 1px dashed #333; color: #444; font-size: 0.85rem; }

/* ══════════════════════════════════════
   Code Section Template — 終端機區塊模板
   新增區塊複製 .code-project 結構即可
   ══════════════════════════════════════ */

/* ── 區塊 header：標題 + badge 同行 ── */
.code-project-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.code-project-header .code-h2 { margin-bottom: 0; }

/* ── Type badge ── */
.code-badge {
  font-family: "Orbitron", monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--code-green);
  color: var(--code-green);
  background: rgba(0,224,160,0.07);
  flex-shrink: 0;
}
.code-badge--red {
  border-color: #ff3333;
  color: #ff3333;
  background: rgba(255,51,51,0.07);
}

/* ── 描述文字 ── */
.code-desc {
  color: #a9b7c6;
  font-size: 0.92rem;
  margin-bottom: 14px;
  line-height: 1.7;
}
.code-desc--red { color: #ff6666; font-style: italic; }

/* ── 補充說明 ── */
.code-note {
  font-size: 0.85rem;
  margin-top: 10px;
  margin-bottom: 0;
  font-family: "JetBrains Mono", monospace;
}

/* ── 按鈕列 ── */
.code-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* ── 子模組 ── */
.code-submodule {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed #333;
}
.code-submodule-title {
  font-size: 1rem;
  color: #aaa;
  margin-bottom: 10px;
  font-family: "JetBrains Mono", monospace;
}

/* ── 紅色區塊變體 ── */
.code-project--red { border-left-color: #ff3333; }
.code-project--red:hover { border-left-color: #ff3333; }
.code-h2--red {
  color: #ff3333 !important;
  text-shadow: 0 0 15px #ff3333 !important;
}