/* ═══════════════════════════════════════════════════════════════
   AETHELGAARD MUD — WEB-HOSTED TELNET CLIENT STYLES
   ═══════════════════════════════════════════════════════════════ */

#view-terminal {
  display: none;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #090a0f;
  color: #e2e8f0;
  font-family: 'Share Tech Mono', 'Fira Code', monospace;
}

#view-terminal.active {
  display: flex;
}

/* Header bar */
.term-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(12, 14, 20, 0.95);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.term-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.term-title {
  font-family: 'IM Fell English', serif;
  font-size: 1.25rem;
  color: #d4af37;
  letter-spacing: 0.08em;
  margin: 0;
}

.term-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  background: rgba(0, 200, 255, 0.15);
  border: 1px solid rgba(0, 200, 255, 0.4);
  color: #00c8ff;
  border-radius: 3px;
  font-weight: bold;
}

.term-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-mode-toggle {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(160, 100, 30, 0.3));
  border: 1px solid #d4af37;
  color: #fff;
  font-size: 0.8rem;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
}

.btn-mode-toggle:hover {
  background: #d4af37;
  color: #000;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

.btn-term-settings {
  background: rgba(30, 35, 50, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-term-settings:hover {
  background: rgba(50, 60, 85, 0.8);
  color: #fff;
}

/* Hybrid Layout Grid */
.term-hybrid-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  flex: 1;
  overflow: hidden;
  position: relative;
}

@media (max-width: 900px) {
  .term-hybrid-grid {
    grid-template-columns: 1fr;
  }
  .term-hybrid-drawer {
    display: none; /* Collapsed on mobile, toggleable */
  }
}

/* Main Terminal Panel */
.term-main-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #06070a;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* Output Buffer */
.term-output-buffer {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  font-family: 'Fira Code', 'Share Tech Mono', monospace;
  scrollbar-width: thin;
}

.term-line {
  margin-bottom: 0.15rem;
}

.term-line.echo-input {
  color: #a0aec0;
  font-weight: bold;
}

/* Split-screen Input Bar */
.term-input-bar {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.85rem;
  background: #0d0f17;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.6);
}

.term-prompt-symbol {
  color: #d4af37;
  font-size: 1.1rem;
  font-weight: bold;
  margin-right: 0.6rem;
  font-family: monospace;
}

.term-cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #00ffcc;
  font-size: 1rem;
  font-family: 'Fira Code', monospace;
  outline: none;
}

.term-btn-send {
  background: #d4af37;
  color: #000;
  border: none;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 0.5rem;
}

/* Hybrid Side Drawer */
.term-hybrid-drawer {
  background: #0b0d14;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  border-left: 1px solid rgba(212, 175, 55, 0.2);
}

.drawer-section-title {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #d4af37;
  font-weight: bold;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  padding-bottom: 0.25rem;
}

/* Mini Bar Track */
.term-bar-row {
  margin-bottom: 0.5rem;
}

.term-bar-row label {
  display: block;
  font-size: 0.7rem;
  color: #a0aec0;
  margin-bottom: 0.15rem;
}

.term-bar-track {
  width: 100%;
  height: 14px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.term-bar-fill {
  height: 100%;
  width: 100%;
  transition: width 0.3s ease;
}

.term-bar-hp { background: linear-gradient(90deg, #800, #f33); }
.term-bar-mana { background: linear-gradient(90deg, #008, #39f); }

.term-bar-text {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  text-align: center;
  font-size: 0.65rem;
  line-height: 14px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

/* Touch Action Grid */
.term-touch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.term-action-btn {
  background: rgba(20, 25, 40, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #e2e8f0;
  font-size: 0.75rem;
  padding: 0.4rem 0.2rem;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.term-action-btn:hover {
  background: rgba(212, 175, 55, 0.2);
  color: #fff;
  border-color: #d4af37;
}

/* ═══════════════════════════════════════════════════════════════
   TERMINAL PREFERENCE THEMES
   ═══════════════════════════════════════════════════════════════ */

/* 1. Amber CRT Theme */
.term-theme-amber .term-main-panel {
  background: #140a00;
}
.term-theme-amber .term-output-buffer {
  color: #ffb000;
  text-shadow: 0 0 3px rgba(255, 176, 0, 0.4);
}
.term-theme-amber .term-cmd-input {
  color: #ffb000;
}

/* 2. Matrix Green Theme */
.term-theme-matrix .term-main-panel {
  background: #001005;
}
.term-theme-matrix .term-output-buffer {
  color: #00ff66;
  text-shadow: 0 0 3px rgba(0, 255, 102, 0.4);
}
.term-theme-matrix .term-cmd-input {
  color: #00ff66;
}

/* 3. Cyberpunk Neon Theme */
.term-theme-cyberpunk .term-main-panel {
  background: #0b0314;
}
.term-theme-cyberpunk .term-output-buffer {
  color: #00f3ff;
  text-shadow: 0 0 4px rgba(0, 243, 255, 0.5);
}
.term-theme-cyberpunk .term-cmd-input {
  color: #ff0055;
}

/* ═══════════════════════════════════════════════════════════════
   TELNET PREFERENCES MODAL
   ═══════════════════════════════════════════════════════════════ */
#modal-terminal-settings {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

#modal-terminal-settings.active {
  display: flex !important;
}