/* style.css — Gotham Archive Terminal Theme v2 */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap');

:root {
  --bg       : #0b0f14;
  --bg2      : #0f1520;
  --bg3      : #131c28;
  --green    : #33ff88;
  --green-dim: #1d7a45;
  --green-dk : #0d2d1a;
  --blue     : #7ecfff;
  --blue-dim : #3a7a99;
  --red      : #ff4455;
  --yellow   : #ffd700;
  --white    : #ddeedd;
  --gray     : #5a6a5a;
  --mono     : 'Share Tech Mono', monospace;
  --display  : 'Orbitron', monospace;
}

/* ── NOIR theme overrides ────────────────────────────────────── */
body.noir {
  --bg       : #f0ebe0;
  --bg2      : #e4ddd0;
  --bg3      : #d8d0c0;
  --green    : #1a6e3c;
  --green-dim: #2e8a52;
  --green-dk : #b0c8b8;
  --blue     : #2a5a8a;
  --blue-dim : #5a7a9a;
  --red      : #c0392b;
  --yellow   : #8a6a00;
  --white    : #1a1a2e;
  --gray     : #7a7060;
  background : #f0ebe0;
  color      : #1a6e3c;
}

body.noir::after { display: none; }

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

html, body { height: 100%; overflow: hidden; }

body {
  background : var(--bg);
  color      : var(--green);
  font-family: var(--mono);
}

/* Scanlines */
body::after {
  content        : '';
  position       : fixed;
  inset          : 0;
  background     : repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.07) 2px, rgba(0,0,0,.07) 4px);
  pointer-events : none;
  z-index        : 9999;
}

/* ── Screens ─────────────────────────────────────────────────── */
.screen { display: none; position: fixed; inset: 0; animation: fadeIn .5s ease; }
.screen.active { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── INTRO ───────────────────────────────────────────────────── */
#intro-screen {
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 1.5rem;
  gap            : 1.2rem;
  overflow-y     : auto;
}

.intro-header { text-align: center; }

.batman-logo {
  width        : 72px;
  height       : auto;
  margin-bottom: .6rem;
  filter       : drop-shadow(0 0 12px rgba(51,255,136,.4));
}

.intro-title {
  font-family   : var(--display);
  font-size     : clamp(1.3rem, 4vw, 2.2rem);
  letter-spacing: .18em;
  color         : var(--green);
  text-shadow   : 0 0 24px rgba(51,255,136,.5);
}

.intro-subtitle {
  font-size     : .7rem;
  letter-spacing: .25em;
  color         : var(--gray);
  margin-top    : .3rem;
}

.cutscene-box {
  background   : var(--bg2);
  border       : 1px solid var(--green-dim);
  border-radius: 4px;
  padding      : 1.4rem 1.8rem;
  max-width    : 560px;
  width        : 100%;
  min-height   : 220px;
}

.ct-label {
  display       : block;
  font-size     : .65rem;
  letter-spacing: .2em;
  color         : var(--blue);
  margin-bottom : .9rem;
}

.cutscene-line {
  color      : var(--white);
  font-size  : .84rem;
  line-height: 1.85;
  min-height : 1.5em;
}

.cutscene-line:last-child { color: var(--green); font-style: italic; }

.intro-form {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : .7rem;
  width         : 100%;
  max-width     : 340px;
  transition    : opacity .6s ease;
}

.intro-form label {
  font-size     : .65rem;
  letter-spacing: .18em;
  color         : var(--gray);
}

.intro-form input {
  background   : var(--bg2);
  border       : 1px solid var(--green-dim);
  color        : var(--green);
  font-family  : var(--mono);
  font-size    : .95rem;
  padding      : .55rem 1rem;
  width        : 100%;
  border-radius: 3px;
  outline      : none;
  text-align   : center;
}

.intro-form input:focus {
  border-color: var(--green);
  box-shadow  : 0 0 10px rgba(51,255,136,.2);
}

#skip-intro-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: 1px solid var(--gray);
  color: var(--gray);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .15em;
  padding: .4rem .9rem;
  cursor: pointer;
  border-radius: 2px;
  transition: all .2s;
  z-index: 100;
}
#skip-intro-btn:hover { border-color: var(--green); color: var(--green); }

#github-link {
  position: fixed;
  bottom: 4rem;
  right: 1.5rem;
  background: transparent;
  border: 1px solid var(--gray);
  color: var(--gray);
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .15em;
  padding: .4rem .9rem;
  cursor: pointer;
  border-radius: 2px;
  transition: all .2s;
  z-index: 100;
  text-decoration: none;
}
#github-link:hover { border-color: var(--green); color: var(--green); }

/* ── Theme toggle ────────────────────────────────────────────── */
#theme-toggle {
  position     : fixed;
  top          : .1rem;
  left         : .7rem;
  background   : transparent;
  border       : none;
  padding      : .3rem .45rem;
  cursor       : pointer;
  border-radius: 2px;
  transition   : border-color .2s;
  z-index      : 200;
  display      : flex;
  align-items  : center;
  padding-top  : 0;
  padding-bottom: 0;
  gap          : .4rem;
}
#theme-toggle:hover { border-color: var(--green); }

.theme-icon {
  width     : 20px;
  height    : 20px;
  transition: opacity .2s, filter .2s;
}

#theme-icon-bat {
  width : 28px;
  height: auto;
}

.active-icon   { opacity: 1;   filter: none; }
.inactive-icon { opacity: 0.3; filter: grayscale(1); }

body:not(.noir) .active-icon   { filter: none; }
body:not(.noir) .inactive-icon { filter: none; opacity: 0.35; }

body.noir .active-icon   { filter: none; }
body.noir .inactive-icon { filter: none; opacity: 0.35; }

.theme-divider {
  color      : var(--gray);
  font-size  : .75rem;
  opacity    : 0.4;
  line-height: 1;
}
body:not(.noir) .theme-divider { color: var(--white); }

/* Toast */
#theme-toast {
  position      : fixed;
  bottom        : 5rem;
  left          : 1.2rem;
  background    : var(--bg2);
  border        : 1px solid var(--green-dim);
  color         : var(--green);
  font-family   : var(--mono);
  font-size     : .65rem;
  letter-spacing: .12em;
  padding       : .4rem .9rem;
  border-radius : 2px;
  z-index       : 300;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity .3s ease;
}
#theme-toast.visible { opacity: 1; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  background    : transparent;
  border        : 1px solid var(--green);
  color         : var(--green);
  font-family   : var(--display);
  font-size     : .68rem;
  letter-spacing: .2em;
  padding       : .65rem 1.8rem;
  cursor        : pointer;
  border-radius : 3px;
  transition    : all .2s;
  width         : 100%;
}
.btn-primary:hover {
  background: var(--green);
  color     : var(--bg);
  box-shadow: 0 0 18px rgba(51,255,136,.35);
}

.btn-secondary {
  background    : transparent;
  border        : 1px solid var(--gray);
  color         : var(--gray);
  font-family   : var(--display);
  font-size     : .68rem;
  letter-spacing: .2em;
  padding       : .65rem 1.8rem;
  cursor        : pointer;
  border-radius : 3px;
  transition    : all .2s;
  width         : 100%;
}
.btn-secondary:hover {
  border-color: var(--blue);
  color       : var(--blue);
}

/* ── TERMINAL + REPAIR SCREENS ───────────────────────────────── */
#terminal-screen,
#repair-screen { flex-direction: row; }

/* Terminal panel — left */
.terminal-panel {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  min-width     : 0;
  border-right  : 1px solid var(--green-dk);
}

.terminal-header {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : .55rem 1rem;
  background     : var(--bg2);
  border-bottom  : 1px solid var(--green-dk);
  flex-shrink    : 0;
  gap            : .5rem;
}

.terminal-dots span {
  display      : inline-block;
  width        : 10px;
  height       : 10px;
  border-radius: 50%;
  margin-right : 4px;
}
.terminal-dots span:nth-child(1) { background: #ff5f57; }
.terminal-dots span:nth-child(2) { background: #ffbd2e; }
.terminal-dots span:nth-child(3) { background: #28c840; }

.terminal-title {
  font-family   : var(--display);
  font-size     : .6rem;
  letter-spacing: .15em;
  color         : var(--green);
  flex          : 1;
  text-align    : center;
}

.stage-progress {
  font-size     : .6rem;
  letter-spacing: .08em;
  color         : var(--gray);
  white-space   : nowrap;
}

.terminal-output {
  flex      : 1;
  overflow-y: auto;
  padding   : 1rem;
  font-size : .82rem;
  line-height: 1.7;
  min-height: 0;
}

.terminal-output::-webkit-scrollbar { width: 4px; }
.terminal-output::-webkit-scrollbar-thumb { background: var(--green-dk); }

.terminal-input-row {
  display    : flex;
  align-items: center;
  padding    : .55rem 1rem;
  background : var(--bg2);
  border-top : 1px solid var(--green-dk);
  gap        : .5rem;
  flex-shrink: 0;
}

.input-prompt { color: var(--green-dim); font-size: .82rem; white-space: nowrap; }

.terminal-input-row input {
  flex       : 1;
  background : transparent;
  border     : none;
  color      : var(--green);
  font-family: var(--mono);
  font-size  : .82rem;
  outline    : none;
  caret-color: var(--green);
  min-width  : 0;
}

.hint-btn {
  background    : transparent;
  border        : 1px solid var(--gray);
  color         : var(--gray);
  font-family   : var(--mono);
  font-size     : .6rem;
  padding       : .28rem .65rem;
  cursor        : pointer;
  border-radius : 2px;
  letter-spacing: .1em;
  transition    : all .2s;
  white-space   : nowrap;
  flex-shrink   : 0;
}
.hint-btn:hover { border-color: var(--blue); color: var(--blue); }

/* Terminal lines */
.t-line { margin-bottom: .35rem; animation: lineIn .18s ease; }
@keyframes lineIn {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.t-prompt   { color: var(--green); }
.prompt-sym { color: var(--green-dim); margin-right: .5rem; }
.t-output   {
  color        : var(--white);
  white-space  : pre-wrap;
  word-break   : break-all;
  margin-left  : 1rem;
  border-left  : 2px solid var(--green-dk);
  padding-left : .8rem;
  margin-bottom: .6rem;
}
.t-error  { color: var(--red); margin-left: 1rem; white-space: pre-wrap; word-break: break-word; }
.t-system { color: var(--blue); text-align: center; margin: .6rem 0; font-size: .72rem; letter-spacing: .08em; }

/* Alfred panel — right */
.alfred-panel {
  width         : 340px;
  flex-shrink   : 0;
  display       : flex;
  flex-direction: column;
  background    : var(--bg2);
  border-left   : 1px solid var(--green-dk);
  min-height    : 0;
}

.alfred-header {
  display    : flex;
  align-items: center;
  gap        : .7rem;
  padding    : .6rem .9rem;
  border-bottom: 1px solid var(--green-dk);
  flex-shrink: 0;
}

.alfred-avatar-img {
  width        : 42px;
  height       : 42px;
  border-radius: 50%;
  object-fit   : cover;
  border       : 1px solid var(--blue-dim);
}

.alfred-name   { font-family: var(--display); font-size: .65rem; letter-spacing: .2em; color: var(--blue); }
.alfred-status { font-size: .58rem; color: var(--gray); letter-spacing: .1em; margin-top: .15rem; }

/* Alfred body: two persistent sections */
.alfred-body {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  min-height    : 0;
  overflow      : hidden;
}

.alfred-dialogue {
  flex      : 1;
  overflow-y: auto;
  padding   : .9rem;
  font-size : .8rem;
  line-height: 1.85;
  color     : var(--blue);
  min-height: 0;
}

.alfred-dialogue::-webkit-scrollbar { width: 3px; }
.alfred-dialogue::-webkit-scrollbar-thumb { background: var(--blue-dim); opacity: .4; }

.alfred-divider {
  height    : 1px;
  background: var(--green-dk);
  flex-shrink: 0;
  margin    : 0 .9rem;
}

.alfred-instruction {
  padding   : .8rem .9rem;
  font-size : .78rem;
  line-height: 1.75;
  color     : var(--green);
  flex-shrink: 0;
  min-height : 80px;
  overflow-y : auto;
  word-break : break-all;       /* prevents long commands from overflowing */
}

.alfred-instruction::-webkit-scrollbar { width: 3px; }
.alfred-instruction::-webkit-scrollbar-thumb { background: var(--green-dk); }

/* Alfred animated lines — shared */
.alfred-spacer { display: block; height: .75rem; }

.alfred-line {
  opacity  : 0;
  transform: translateY(5px);
  transition: opacity .4s ease, transform .4s ease;
  min-height: 1.4em;
}
.alfred-line.visible { opacity: 1; transform: translateY(0); }

.instruction-line { color: var(--green); }

/* ── QUIZ SCREEN ─────────────────────────────────────────────── */
#quiz-screen {
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 2rem;
}

.quiz-header { text-align: center; margin-bottom: 1.8rem; }

.quiz-title {
  font-family   : var(--display);
  font-size     : 1.1rem;
  letter-spacing: .22em;
  color         : var(--green);
  margin-bottom : .4rem;
}

#quiz-container { width: 100%; max-width: 600px; }

.quiz-card {
  background   : var(--bg2);
  border       : 1px solid var(--green-dim);
  border-radius: 6px;
  padding      : 2rem;
  opacity      : 0;
  transform    : translateY(10px) scale(.98);
  transition   : all .4s ease;
}
.quiz-card.visible { opacity: 1; transform: translateY(0) scale(1); }
.quiz-card.exit    { opacity: 0; transform: translateY(-10px) scale(.98); }

body.noir .quiz-card        { background: #e4ddd0; border-color: #2e8a52; }
body.noir .quiz-question    { color: #1a1a2e; }
body.noir .quiz-option      { background: #d8d0c0; border-color: #7a7060; color: #1a1a2e; }
body.noir .quiz-explanation { background: #d8d0c0; color: #7a7060; }

.quiz-question {
  font-size    : .98rem;
  color        : var(--white);
  line-height  : 1.65;
  margin-bottom: 1.4rem;
}

.quiz-options { display: flex; flex-direction: column; gap: .55rem; }

.quiz-option {
  background   : var(--bg3);
  border       : 1px solid var(--gray);
  color        : var(--white);
  font-family  : var(--mono);
  font-size    : .83rem;
  padding      : .65rem 1rem;
  cursor       : pointer;
  border-radius: 3px;
  text-align   : left;
  display      : flex;
  align-items  : center;
  gap          : .8rem;
  transition   : all .15s;
}
.quiz-option:hover:not(:disabled) { border-color: var(--green); background: var(--green-dk); color: var(--green); }
.quiz-option.correct   { border-color: var(--green); background: var(--green-dk); color: var(--green); }
.quiz-option.incorrect { border-color: var(--red); background: rgba(255,68,85,.1); color: var(--red); }

.opt-letter { font-family: var(--display); font-size: .65rem; color: var(--green-dim); width: 16px; flex-shrink: 0; }

.quiz-explanation {
  margin-top : 1rem;
  padding    : .75rem;
  background : var(--bg3);
  border-left: 3px solid var(--green);
  font-size  : .78rem;
  color      : var(--gray);
  line-height: 1.65;
  animation  : fadeIn .3s ease;
}

/* ── RESULTS SCREEN ──────────────────────────────────────────── */
#results-screen {
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 2rem;
}

.results-inner {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 1.1rem;
  max-width     : 520px;
  width         : 100%;
}

.results-title {
  font-family   : var(--display);
  font-size     : .85rem;
  letter-spacing: .22em;
  color         : var(--green);
}

.restoration-block { text-align: center; }

.restoration-label {
  font-size     : .7rem;
  letter-spacing: .15em;
  color         : var(--gray);
  margin-bottom : .3rem;
}

.restoration-pct {
  font-family: var(--display);
  font-size  : 3.5rem;
  color      : var(--green);
  text-shadow: 0 0 20px rgba(51,255,136,.4);
  line-height: 1;
}

.quiz-score-small { font-size: .75rem; color: var(--gray); margin-top: .3rem; }

.alfred-results-report {
  color      : var(--blue);
  font-size  : .85rem;
  line-height: 1.9;
  text-align : center;
}

.results-meme {
  max-width    : 280px;
  width        : 100%;
  border-radius: 6px;
  border       : 1px solid var(--green-dim);
  object-fit   : cover;
}

/* ── CERTIFICATE SCREEN ──────────────────────────────────────── */
#certificate-screen {
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 2rem;
  overflow-y     : auto;
}

.certificate-box {
  border        : 2px solid var(--green);
  border-radius : 6px;
  padding       : 2.5rem 2rem;
  text-align    : center;
  max-width     : 580px;
  width         : 100%;
  background    : var(--bg2);
  box-shadow    : 0 0 40px rgba(51,255,136,.12), inset 0 0 60px rgba(51,255,136,.03);
  position      : relative;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : .7rem;
}

.certificate-box::before {
  content      : '';
  position     : absolute;
  inset        : 10px;
  border       : 1px solid var(--green-dk);
  border-radius: 4px;
  pointer-events: none;
}

.cert-logo-img {
  width : 52px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(51,255,136,.3));
}

.cert-system {
  font-size     : .6rem;
  letter-spacing: .25em;
  color         : var(--green-dim);
}

.cert-title {
  font-family   : var(--display);
  font-size     : clamp(.95rem, 2.5vw, 1.3rem);
  color         : var(--white);
  letter-spacing: .08em;
}

.cert-awarded { font-size: .72rem; color: var(--gray); letter-spacing: .12em; }

.cert-name {
  font-family: var(--display);
  font-size  : 1.7rem;
  color      : var(--green);
  text-shadow: 0 0 14px rgba(51,255,136,.4);
}

.cert-role {
  font-family   : var(--display);
  font-size     : .68rem;
  letter-spacing: .22em;
  color         : var(--yellow);
  border        : 1px solid rgba(255,215,0,.3);
  padding       : .28rem 1rem;
  border-radius : 2px;
}

.cert-meta {
  display       : flex;
  flex-direction: column;
  gap           : .25rem;
  font-size     : .68rem;
  color         : var(--gray);
  line-height   : 1.8;
}
.cert-meta em { color: var(--green-dim); font-style: normal; }

.cert-signature {
  font-size  : .65rem;
  color      : var(--gray);
  border-top : 1px solid var(--green-dk);
  padding-top: .9rem;
  width      : 100%;
  letter-spacing: .08em;
}

.cert-buttons {
  display  : flex;
  flex-direction: column;
  gap      : .6rem;
  width    : 100%;
  max-width: 280px;
  margin-top: .4rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 680px) {
  #terminal-screen, #repair-screen { flex-direction: column; }
  .alfred-panel { width: 100%; height: 220px; border-left: none; border-top: 1px solid var(--green-dk); }
  .alfred-dialogue { font-size: .74rem; }
  .alfred-instruction { font-size: .72rem; }
}

/* Scrollbar global */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--green-dk); }

/* ── RESOURCE HUB SCREEN ─────────────────────────────────────── */
#resources-screen {
  flex-direction : column;
  align-items    : center;
  justify-content: flex-start;
  padding        : 2rem 1.5rem;
  overflow-y     : auto;
}

.resources-inner {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 1.5rem;
  max-width     : 640px;
  width         : 100%;
  padding-bottom: 2rem;
}

.resources-header { text-align: center; }

.resources-title {
  font-family   : var(--display);
  font-size     : clamp(1rem, 3vw, 1.3rem);
  letter-spacing: .2em;
  color         : var(--green);
  margin-bottom : .7rem;
  text-shadow   : 0 0 16px rgba(51,255,136,.3);
}

.resources-subtitle {
  font-size  : .78rem;
  color      : var(--blue);
  line-height: 1.8;
}

.resources-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : .8rem;
  width                : 100%;
}

@media (max-width: 520px) {
  .resources-grid { grid-template-columns: 1fr; }
}

.resource-card {
  display        : flex;
  align-items    : flex-start;
  gap            : .8rem;
  background     : var(--bg2);
  border         : 1px solid var(--green-dk);
  border-radius  : 5px;
  padding        : 1rem;
  text-decoration: none;
  transition     : border-color .2s, box-shadow .2s;
  position       : relative;
}

.resource-card:hover {
  border-color: var(--green-dim);
  box-shadow  : 0 0 14px rgba(51,255,136,.12);
}

.resource-icon {
  font-size  : 1.4rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top : .1rem;
}

.resource-info { flex: 1; min-width: 0; }

.resource-name {
  font-family   : var(--display);
  font-size     : .65rem;
  letter-spacing: .12em;
  color         : var(--green);
  margin-bottom : .35rem;
}

.resource-desc {
  font-size  : .72rem;
  color      : var(--gray);
  line-height: 1.65;
}

.resource-arrow {
  font-size  : .85rem;
  color      : var(--green-dim);
  flex-shrink: 0;
  transition : transform .2s;
}

.resource-card:hover .resource-arrow { transform: translate(2px, -2px); }

/* GitHub card */
.github-card {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : 1rem;
  background     : var(--bg2);
  border         : 1px solid var(--blue-dim);
  border-radius  : 5px;
  padding        : 1rem 1.2rem;
  width          : 100%;
  flex-wrap      : wrap;
}

.github-card-left {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  flex: 1;
  min-width: 0;
}

.github-icon {
  font-size  : 1.4rem;
  flex-shrink: 0;
}

.github-info { min-width: 0; }

.github-title {
  font-family   : var(--display);
  font-size     : .65rem;
  letter-spacing: .12em;
  color         : var(--blue);
  margin-bottom : .3rem;
}

.github-desc {
  font-size  : .72rem;
  color      : var(--gray);
  line-height: 1.6;
}

.btn-github {
  background    : transparent;
  border        : 1px solid var(--blue-dim);
  color         : var(--blue);
  font-family   : var(--display);
  font-size     : .62rem;
  letter-spacing: .15em;
  padding       : .55rem 1.1rem;
  border-radius : 3px;
  text-decoration: none;
  white-space   : nowrap;
  transition    : all .2s;
  flex-shrink   : 0;
}

.btn-github:hover {
  background  : var(--blue);
  color       : var(--bg);
  border-color: var(--blue);
}

/* GLOBAL PAGE */

body {
    margin: 0;
    padding: 0;
    background: #0d1117;
    color: #c9d1d9;
    font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
}

/* HEADINGS */

h1, h2 {
    color: #58a6ff;
}

/* INTRO STORY */

.story {
    max-width: 700px;
    margin: 20px auto;
    line-height: 1.6;
}

.alfred {
    max-width: 700px;
    margin: 30px auto;
    background: #161b22;
    padding: 20px;
    border-left: 4px solid #d29922;
    text-align: left;
}

/* BUTTONS */

button {
    background: transparent;
    color: #58a6ff;
    border: 1px solid #58a6ff;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 0px;
    transition: all 0.2s ease;
}

button:hover {
    background: #58a6ff;
    color: #0d1117;
}

/* TERMINAL WINDOW */

.terminal {
    max-width: 900px;
    height: 70vh;
    margin: 40px auto;
    background: #161b22;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
}

/* TERMINAL OUTPUT AREA */

#terminalOutput {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    text-align: left;
    font-size: 14px;
}

/* TERMINAL INPUT */

.terminal-input {
    display: flex;
    border-top: 1px solid #30363d;
    padding: 12px;
}

.prompt {
    color: #3fb950;
    margin-right: 10px;
}

/* INPUT FIELD */

#terminalInput {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #c9d1d9;
    font-family: inherit;
    font-size: 14px;
}

/* ALFRED HINT */

.alfred-hint {
    max-width: 900px;
    margin: 20px auto;
    background: #161b22;
    padding: 15px;
    border-left: 4px solid #d29922;
    text-align: left;
}

/* QUIZ SECTION */

#quizContainer {
    max-width: 700px;
    margin: 30px auto;
    text-align: left;
}

.quiz-card {
    background: #161b22;
    padding: 20px;
    margin-bottom: 20px;
    border-left: 4px solid #58a6ff;
}

/* QUIZ OPTIONS */

.quiz-card label {
    display: block;
    margin: 8px 0;
    cursor: pointer;
}

/* RESULT SCREEN */

#scoreText {
    font-size: 22px;
    margin: 20px 0;
}

/* MEME IMAGE */

#memeImage {
    max-width: 400px;
    margin-top: 20px;
}

/* CERTIFICATE */

#certificateStage {
    padding-top: 80px;
}

#certificateStage h1 {
    font-size: 40px;
}

#certificateStage h2 {
    font-size: 28px;
    margin-bottom: 30px;
}