/* Terminal Renkleri */
:root {
  --bg: #000;
  --fg: #00ff00;
  --fg-dim: #00aa00;
  --error: #ff5555;
  --info: #5fd7ff;
  --warn: #ffaa00;
  --success: #33ff33; /* Yeni Başarı Rengi */
}

html,
body {
  height: 100%;
}

body[data-theme="dark"] {
  --bg: #000;
  --fg: #00ff00;
  --fg-dim: #00aa00;
  --error: #ff5555;
  --info: #5fd7ff;
  --warn: #ffaa00;
  --success: #33ff33;
}

body[data-theme="light"] {
  --bg: #f8f9fb;
  --fg: #0c5132;
  --fg-dim: #5d6e63;
  --error: #c62828;
  --info: #0065d1;
  --warn: #9d5b00;
  --success: #0f7b3e;
}

/* reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  animation: none !important;
  text-shadow: none !important;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: clamp(15px, 0.28vw + 12px, 19px);
  line-height: 1.4;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: clamp(8px, 2vh, 24px);
}

/* Terminal Kapsayıcısı ve Merkezleme */
.terminal {
  width: min(98vw, 1520px);
  max-width: 1520px;
  height: clamp(500px, 66vh, 780px);
  height: clamp(500px, 66dvh, 780px);
  margin: 0 auto;
  padding: 20px 10px; /* Üst/Alt padding'i artırarak kenardan uzaklaştır */
  display: flex;
  flex-direction: column;
}

.terminal-body {
  flex-grow: 1; /* Mevcut alanı doldur */
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 15px; /* Yatay padding artırıldı */
  overflow: hidden;
  overflow-x: hidden;
  border: 1px solid var(--fg-dim); /* Daha tutarlı sınır rengi */
}

.output {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Çıktı ve Giriş Satırları */
.output-line {
  margin: 0;
  padding: 0;
  line-height: 1.4;
  white-space: pre-wrap; /* Metinlerin alt satıra inmesini sağlar */
}

.snake-host {
  margin-top: 8px;
  margin-bottom: 4px;
}

.snake-game-panel {
  display: inline-block;
  border: 1px solid var(--fg-dim);
  padding: 8px;
}

.snake-game-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.snake-score strong {
  color: var(--success);
}

.snake-status {
  color: var(--info);
}

.snake-canvas {
  display: block;
  width: 320px;
  max-width: 100%;
  image-rendering: pixelated;
}

.snake-hint {
  margin-top: 6px;
  color: var(--fg-dim);
}

.command-line {
  color: var(--fg-dim);
}

.section-title {
  font-weight: bold;
  margin: 6px 0 4px;
  border-bottom: 1px solid var(--fg-dim); /* Daha tutarlı alt çizgi rengi */
  padding-bottom: 2px;
}

.info-label {
  color: var(--fg-dim); /* Daha uyumlu renk */
  margin-top: 4px;
  margin-bottom: 4px; /* Altına boşluk eklendi */
  display: block;
}

/* Banner, ascii vs varsa minimal */
.ascii-art {
  font-size: clamp(10px, 0.6vw, 13px);
  line-height: 1.1; /* Daha kompakt görünüm */
  margin: 4px 0;
}

.prompt {
  margin-right: 6px;
  white-space: nowrap;
}

.input-line {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--fg-dim);
  padding-top: 10px;
  margin-top: 8px;
  background: var(--bg);
}

.input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: inherit;
  font-size: inherit;
  flex: 1;
  min-width: 0;
  caret-color: var(--fg);
  font-variant-ligatures: none;
}

/* colors */
.error {
  color: var(--error);
}
.info {
  color: var(--info);
}
.warn {
  color: var(--warn);
}
.dim {
  color: var(--fg-dim);
}
.success {
  color: var(--success);
} /* Yeni Tanım */

::selection {
  background: var(--fg);
  color: var(--bg);
}

/* hide scrollbar */
.output::-webkit-scrollbar {
  display: none;
}

.noscript {
  color: var(--fg);
  background: #000;
  padding: 20px;
  font-family: monospace;
}

@media (min-width: 1800px) {
  body {
    font-size: clamp(16px, 0.22vw + 12px, 20px);
  }

  .terminal {
    width: min(98vw, 1700px);
    max-width: 1700px;
    height: clamp(560px, 65dvh, 820px);
  }
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  body {
    font-size: 14px; /* Slightly larger text for readability */
    align-items: stretch;
    padding-top: 0;
  }

  .terminal {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    padding: 10px 4px; /* Reduce padding to maximize width */
    max-width: none;
  }

  .terminal-body {
    padding: 5px; /* Minimal padding */
  }

  .ascii-art {
    font-size: 8px; /* Shrink ASCII art to fit */
    white-space: pre; /* Keep formatting */
    overflow-x: hidden; /* Prevent horizontal scroll just for logo */
  }
}