/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ============================================
   Warp Core Shutdown Easter Egg
   ============================================ */

/* Klickbarer Warp Core */
#warp-core-status {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

#warp-core-status:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(255, 153, 0, 0.3);
}

#warp-core-status:active {
  transform: scale(0.98);
}

/* Klickbare Crew-Karte */
#crew-status {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

#crew-status:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(204, 68, 68, 0.3);
}

#crew-status:active {
  transform: scale(0.98);
}

/* Crew Count Animation */
#crew-count {
  transition: color 0.3s;
}

#crew-count.crew-danger {
  color: #cc4444;
  animation: crew-pulse 0.5s infinite;
}

@keyframes crew-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Crew Message Popup */
.crew-message {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  right: 0;
  padding: 12px 15px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 8px;
  animation: crew-message-in 0.3s ease-out;
  z-index: 100;
  white-space: normal;
  line-height: 1.4;
}

.crew-message-warning {
  background: rgba(204, 68, 68, 0.95);
  color: #ffffff;
  border: 1px solid #ff6666;
}

.crew-message-success {
  background: rgba(68, 204, 68, 0.95);
  color: #000000;
  border: 1px solid #66ff66;
}

/* ============================================
   Klingon Console Mode
   Aktiviert wenn Lebenserhaltung auf Klingonisch umgestellt wird.
   Design: kantig, kriegerisch, dunkelrot - kein gerundetes LCARS mehr.
   ============================================ */

/* --- Farbpalette: Klingonisches Blutrot und Bernstein --- */
body.klingon-mode {
  --lcars-orange:      #cc2200;
  --lcars-orange-dark: #880000;
  --lcars-peach:       #ff6644;
  --lcars-tan:         #7a1a00;
  --lcars-violet:      #cc8800;
  --lcars-lavender:    #aa6600;
  --lcars-blue:        #773300;
  --lcars-sky:         #ff4400;
  --lcars-bg:          #050000;
  --lcars-text:        #cc2200;
  --lcars-text-dark:   #1a0000;
  --lcars-radius:      0px;   /* Keine runden LCARS-Ecken mehr */
  --lcars-gap:         4px;
  background-color:    #050000;
}

/* === ELBOW / CAP ECKEN: Diagonalschnitte statt Halbkreise === */

body.klingon-mode .lcars-header-elbow {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
body.klingon-mode .lcars-header-elbow::after {
  border-radius: 0;
}

body.klingon-mode .lcars-footer-elbow {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
body.klingon-mode .lcars-footer-elbow::after {
  border-radius: 0;
}

body.klingon-mode .lcars-header-cap {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

body.klingon-mode .lcars-footer-cap {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

/* === HEADER/FOOTER BALKEN: Keine Pillenform === */
body.klingon-mode .lcars-bar-segment {
  border-radius: 0;
  min-width: 30px;
}

/* === SIDEBAR === */

/* Sidebar-Top: "tlhIngan" als Label ueber der Nummer, eckiger Schnitt */
body.klingon-mode .lcars-sidebar-top {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
body.klingon-mode .lcars-sidebar-top::before {
  content: 'tlhIngan';
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  font-style: italic;
  color: rgba(26, 0, 0, 0.6);
  margin-bottom: 4px;
}

/* Sidebar-Bottom: diagonaler Schnitt oben-rechts */
body.klingon-mode .lcars-sidebar-bottom {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

/* Nav-Buttons: Diagonalschnitt + Klingon-Bezeichnung darueber */
body.klingon-mode .lcars-sidebar-block {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  padding-bottom: 9px;
  min-height: 72px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  border-left: 3px solid rgba(0, 0, 0, 0.35);
}
body.klingon-mode .lcars-sidebar-block::before {
  content: attr(data-klingon);
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(26, 0, 0, 0.72);
  font-style: italic;
  margin-bottom: 3px;
}

/* Sidebar-Spacer: Dunkler Hintergrund fuer scrollende Taktikdaten */
body.klingon-mode .lcars-sidebar-spacer {
  background: #060000;
  position: relative;
  overflow: hidden;
}

/* Taktische Statusmeldungen: scrollend von oben nach unten */
body.klingon-mode .lcars-sidebar-spacer::after {
  content:
    "\25B8 SCAN...\A"
    "\25B8 ZIEL-ID: B47\A"
    "\25B8 KLASSE: Negh'Var\A"
    "\25B8 DIST: 47.000 km\A"
    "\25B8 WARP: 6.2\A"
    "\25B8 SCHILDE: 87%\A"
    "\25B8 LOCK: 0%\A"
    "\25B8 LOCK: 31%\A"
    "\25B8 LOCK: 64%\A"
    "\25B8 ZIEL ERFASST\A"
    "\25B8 HIvbeH!\A"
    "\25B8 Qa'pla!\A"
    "\25B8 SCAN...\A"
    "\25B8 ZIEL-ID: B47\A"
    "\25B8 KLASSE: Negh'Var\A"
    "\25B8 DIST: 47.000 km\A"
    "\25B8 WARP: 6.2\A"
    "\25B8 SCHILDE: 87%\A"
    "\25B8 LOCK: 0%\A"
    "\25B8 LOCK: 31%\A"
    "\25B8 LOCK: 64%\A"
    "\25B8 ZIEL ERFASST\A"
    "\25B8 HIvbeH!\A"
    "\25B8 Qa'pla!\A";
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  font-size: 9px;
  color: rgba(204, 34, 0, 0.65);
  font-family: 'Courier New', monospace;
  text-align: center;
  line-height: 1.75;
  white-space: pre;
  animation: klingon-tac-scroll 20s linear infinite;
  pointer-events: none;
}

/* === CONTENT-BEREICH === */
body.klingon-mode .lcars-content {
  border-width: 3px;
  box-shadow: inset 0 0 60px rgba(204, 34, 0, 0.07),
              0 0 30px rgba(204, 34, 0, 0.1);
}

/* === DATA CARDS === */
body.klingon-mode .lcars-data-card {
  position: relative;
  border-left: 4px solid #cc2200;
  background: rgba(204, 34, 0, 0.08);
  box-shadow: 0 0 14px rgba(204, 34, 0, 0.15);
}
/* Roter Streifen oben an jeder Karte */
body.klingon-mode .lcars-data-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #cc2200 0%, transparent 75%);
}

/* === HEADER-TITEL: Roter Schimmer === */
body.klingon-mode .lcars-title {
  text-shadow: 0 0 15px rgba(204, 34, 0, 0.55),
               0 0 35px rgba(204, 34, 0, 0.25);
}

/* === SCROLLBAR: Klingon-Rot === */
body.klingon-mode .lcars-content::-webkit-scrollbar-track {
  border-color: #7a1a00;
}
body.klingon-mode .lcars-content::-webkit-scrollbar-thumb {
  background: #cc2200;
  border-radius: 0;
}

/* === LINKS === */
body.klingon-mode .lcars-content a {
  color: #ff4400;
  border-bottom-color: #ff4400;
}
body.klingon-mode .lcars-content a:hover {
  color: #ff6644;
}

@keyframes klingon-tac-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* === FLASH-EFFEKT BEI MODUSWECHSEL === */
@keyframes klingon-power-surge {
  0%   { opacity: 1; }
  12%  { opacity: 0.1; }
  28%  { opacity: 0.85; }
  42%  { opacity: 0.25; }
  58%  { opacity: 1; }
  72%  { opacity: 0.55; }
  100% { opacity: 1; }
}

.klingon-mode-transition {
  animation: klingon-power-surge 0.55s ease-out;
}

/* ============================================
   Benzit Console Mode
   Aktiviert wenn Lebenserhaltung auf Benzit umgestellt wird.
   Design: praezise blau, duenne Linien, scrollende Formelzeile,
   filigrane Schaltflaechen. Vollstaendig blaue Farbpalette.
   ============================================ */

/* --- Farbpalette: Vollstaendig blau --- */
body.benzite-mode {
  --lcars-orange:      #1a44cc;   /* Primaerblau */
  --lcars-orange-dark: #0022aa;
  --lcars-peach:       #5588ff;   /* Helles Blau fuer Text */
  --lcars-tan:         #001a6e;   /* Dunkles Marineblau */
  --lcars-violet:      #3366ee;   /* Koenigsblau (heller) - fuer Header-Cap, About-Button */
  --lcars-lavender:    #0088cc;   /* Azurblau - fuer Footer-Cap, Projects-Button */
  --lcars-blue:        #0044bb;   /* Mittleres Blau - Skills-Button */
  --lcars-sky:         #00aaff;   /* Cyanblau - Impressum-Button, Highlights */
  --lcars-bg:          #000511;
  --lcars-text:        #3366ff;
  --lcars-text-dark:   #00001a;
  --lcars-radius:      2px;
  --lcars-gap:         5px;
  background-color:    #000511;
}

/* Scanlines-Effekt im Content-Bereich - wie ein wissenschaftliches Display */
body.benzite-mode .lcars-content {
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(26, 68, 204, 0.04) 3px,
    rgba(26, 68, 204, 0.04) 4px
  );
  border-width: 2px;
  box-shadow: inset 0 0 80px rgba(26, 68, 204, 0.06),
              0 0 40px rgba(26, 68, 204, 0.15);
}

/* Elbow/Cap-Ecken: rechtwinklig, kein Clip-Path - Praezision statt Aggression */
body.benzite-mode .lcars-header-elbow,
body.benzite-mode .lcars-footer-elbow {
  border-radius: 0;
}
body.benzite-mode .lcars-header-elbow::after,
body.benzite-mode .lcars-footer-elbow::after {
  border-radius: 0;
}
body.benzite-mode .lcars-header-cap,
body.benzite-mode .lcars-footer-cap {
  border-radius: 0;
}

/* Balken-Segmente: praezise Rechtecke mit feinen Trennlinien */
body.benzite-mode .lcars-bar-segment {
  border-radius: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.22);
}

/* Sidebar-Top: kompakter + math. Operatoren als Dekoration */
/* Sidebar-Top: atmende math. Operatoren als Dekoration */
body.benzite-mode .lcars-sidebar-top {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  height: 80px;
  padding-bottom: 8px;
  border-radius: 0;
}
body.benzite-mode .lcars-sidebar-top::before {
  content: '∑  ∂  ∫  ∇';
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(0, 0, 26, 0.48);
  margin-bottom: 3px;
  animation: benzite-symbol-breathe 5s ease-in-out infinite;
}

/* Sidebar-Bottom: kompakter + animierte Formelzeile */
body.benzite-mode .lcars-sidebar-bottom {
  height: 65px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 8px;
  border-radius: 0;
}
body.benzite-mode .lcars-sidebar-bottom::before {
  content: '∇ · B = 0';
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(0, 0, 26, 0.4);
  margin-bottom: 3px;
  text-transform: none;
  animation: benzite-symbol-breathe 7.3s ease-in-out infinite;
}

/* Nav-Buttons: filigran */
body.benzite-mode .lcars-sidebar-block {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  padding: 0 12px 6px;
  min-height: 44px;
  font-size: 12px;
  border-radius: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
body.benzite-mode .lcars-sidebar-block::before {
  content: attr(data-benzite);
  display: block;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: rgba(0, 0, 26, 0.55);
  font-family: 'Courier New', monospace;
  font-style: normal;
  margin-bottom: 2px;
}

/* -------------------------------------------------------
   Sidebar-Spacer: zwei gegenlaeulige Animationsstroeme
   Strom 1 (::before): dichte Formelzeilen, nach OBEN
   Strom 2 (::after):  einzelne Symbole,   nach UNTEN
   Unterschiedliche Geschwindigkeiten -> Parallax-Effekt
   ------------------------------------------------------- */
body.benzite-mode .lcars-sidebar-spacer {
  position: relative;
  overflow: hidden;
  /* Feines blaues Gitter als Hintergrundstruktur */
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(68,136,255,0.05) 14px, rgba(68,136,255,0.05) 15px),
    repeating-linear-gradient(0deg,  transparent 0, transparent 14px, rgba(68,136,255,0.05) 14px, rgba(68,136,255,0.05) 15px),
    #001264;
}

/* Strom 1: Formeln, nach oben, 32s */
body.benzite-mode .lcars-sidebar-spacer::before {
  /* Doppelt fuer nahtlosen Loop (translateY -50%) */
  content: 'E=mc² · F=ma · ΔE=hν · PV=nRT · ∑∫∂∇ · ∇²ψ=(2m/h²)(V-E)ψ · S=-kΣpi·ln(pi) · ΔG=ΔH-TΔS · F=-∇V · λ=h/p · ω=2πν · Δx·Δp≥h/2 · ∇×E=-∂B/∂t · n=c/v · σ=εE · μ=qd · ρ=m/V · ∮E·dl=0 · ∇·D=ρ · H=E+PV · E=mc² · F=ma · ΔE=hν · PV=nRT · ∑∫∂∇ · ∇²ψ=(2m/h²)(V-E)ψ · S=-kΣpi·ln(pi) · ΔG=ΔH-TΔS · F=-∇V · λ=h/p · ω=2πν · Δx·Δp≥h/2 · ∇×E=-∂B/∂t · n=c/v · σ=εE · μ=qd · ρ=m/V · ∮E·dl=0 · ∇·D=ρ · H=E+PV';
  position: absolute;
  top: 0;
  left: 5px;
  right: 5px;
  font-size: 7.5px;
  color: rgba(80, 140, 255, 0.55);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0.3px;
  word-break: break-word;
  pointer-events: none;
  animation: benzite-stream-up 32s linear infinite;
}

/* Strom 2: einzelne Symbole, nach unten, 21s + Flackern */
body.benzite-mode .lcars-sidebar-spacer::after {
  /* Doppelt fuer nahtlosen Loop (translateY 0 → -50% umgekehrt) */
  content: 'α ∞ β Δ ∑ ε ∂ η ∇ λ π ∫ μ ℏ ν ∀ ξ ≈ ρ ∈ σ √ τ ∏ φ ≤ χ ∃ ψ ℝ ω Γ ≥ Θ ⊕ Λ ∧ Ξ ⊗ Π ¬ Σ ℂ Φ ℕ Ψ Ω ∂ ≠ α ∞ β Δ ∑ ε ∂ η ∇ λ π ∫ μ ℏ ν ∀ ξ ≈ ρ ∈ σ √ τ ∏ φ ≤ χ ∃ ψ ℝ ω Γ ≥ Θ ⊕ Λ ∧ Ξ ⊗ Π ¬ Σ ℂ Φ ℕ Ψ Ω ∂ ≠';
  position: absolute;
  top: 0;
  left: 5px;
  right: 5px;
  font-size: 9px;
  color: rgba(120, 180, 255, 0.28);
  line-height: 2.0;
  text-transform: none;
  letter-spacing: 3px;
  word-break: break-word;
  pointer-events: none;
  /* Nach unten scrollen: startet bei -50%, endet bei 0 */
  animation: benzite-stream-down 21s linear infinite,
             benzite-flicker 11.7s ease-in-out infinite;
}

@keyframes benzite-stream-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes benzite-stream-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* Flackern - Primzahl-Periode (11.7s) sorgt fuer scheinbare Zufaelligkeit */
@keyframes benzite-flicker {
  0%   { opacity: 0.28; }
  19%  { opacity: 0.12; }
  31%  { opacity: 0.35; }
  47%  { opacity: 0.08; }
  58%  { opacity: 0.32; }
  73%  { opacity: 0.18; }
  89%  { opacity: 0.38; }
  100% { opacity: 0.28; }
}

/* Atmen - fuer Sidebar-Top/Bottom Symbole */
@keyframes benzite-symbol-breathe {
  0%, 100% { opacity: 0.48; letter-spacing: 4px; }
  50%       { opacity: 0.72; letter-spacing: 5px; }
}

/* Data Cards: Doppelrahmen (Outline) + blauer Kopfstreifen + ID-Annotation */
body.benzite-mode .lcars-data-card {
  position: relative;
  background: rgba(26, 68, 204, 0.08);
  border-left: 3px solid #1a44cc;
  outline: 1px solid rgba(26, 68, 204, 0.22);
  outline-offset: -4px;
  box-shadow: 0 0 12px rgba(26, 68, 204, 0.12);
}
body.benzite-mode .lcars-data-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #1a44cc 0%, transparent 85%);
}
/* System-ID Annotation unten-rechts */
body.benzite-mode .lcars-data-card::after {
  content: attr(id);
  position: absolute;
  bottom: 5px;
  right: 8px;
  font-size: 7px;
  color: rgba(51, 102, 255, 0.32);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
  pointer-events: none;
}

/* Header-Titel: blauer Schimmer */
body.benzite-mode .lcars-title {
  text-shadow: 0 0 15px rgba(26, 68, 204, 0.6),
               0 0 35px rgba(26, 68, 204, 0.3);
}

/* Scrollbar: Blau */
body.benzite-mode .lcars-content::-webkit-scrollbar-track {
  border-color: #001264;
}
body.benzite-mode .lcars-content::-webkit-scrollbar-thumb {
  background: #1a44cc;
  border-radius: 0;
}

/* Links */
body.benzite-mode .lcars-content a {
  color: #4488ff;
  border-bottom-color: #4488ff;
}
body.benzite-mode .lcars-content a:hover {
  color: #66aaff;
}

/* ============================================
   Android (Data) Console Mode
   Aktiviert wenn Lebenserhaltung auf Android umgestellt wird.

   Design-Philosophie: Data, Lt. Cmdr., USS Enterprise NCC-1701-D
   - Kein Emotions-Prozessor => keine dekorativen Elemente, nur Daten
   - 60 Billionen Operationen/Sek => Amber-Phosphor Terminals (PDP-11 Aera)
   - Positronisches Netz => Hex-Dumps und Binary-Streams
   - Monospace ueberall: Data ist case-sensitiv und literal
   - "Emotion ist irrelevant" => kein Glow, kein Gradient, kein Radius
   ============================================ */

/* --- Farbpalette: Amber-Phosphor (Data's Augenfarbe) auf Schwarz --- */
body.android-mode {
  --lcars-orange:      #ccaa00;   /* Amber - Data's Augenfarbe */
  --lcars-orange-dark: #886600;
  --lcars-peach:       #ddbb33;   /* Helles Amber fuer Text */
  --lcars-tan:         #554400;   /* Dunkelbraun */
  --lcars-violet:      #aaaa00;   /* Gelb-Amber */
  --lcars-lavender:    #888800;   /* Gedaempftes Olivgelb */
  --lcars-blue:        #666600;   /* Sehr dunkles Olive */
  --lcars-sky:         #ffdd00;   /* Helles Gelb fuer Highlights */
  --lcars-bg:          #000000;   /* Reines Schwarz - keine Atmosphaere */
  --lcars-text:        #ccaa00;
  --lcars-text-dark:   #000000;
  --lcars-radius:      0px;       /* Emotion ist irrelevant. Kurven sind ineffizient. */
  --lcars-gap:         3px;
  background-color:    #000000;
  font-family: 'Courier New', Courier, monospace;
}

/* Monospace-Font fuer alle Seitenelemente */
body.android-mode .lcars-sidebar-block,
body.android-mode .lcars-title,
body.android-mode .lcars-content,
body.android-mode .lcars-content h1,
body.android-mode .lcars-content h2 {
  font-family: 'Courier New', Courier, monospace;
}

/* === ELBOW/CAP/BALKEN: absolut rechteckig === */
body.android-mode .lcars-header-elbow,
body.android-mode .lcars-footer-elbow {
  border-radius: 0;
}
body.android-mode .lcars-header-elbow::after,
body.android-mode .lcars-footer-elbow::after {
  border-radius: 0;
}
body.android-mode .lcars-header-cap,
body.android-mode .lcars-footer-cap {
  border-radius: 0;
}
body.android-mode .lcars-bar-segment {
  border-radius: 0;
  border-right: 1px solid #000;
}

/* === SIDEBAR-TOP: Binary-Kodierung von "DATA" ===
   D=01000100 A=01000001 T=01010100 A=01000001 */
body.android-mode .lcars-sidebar-top {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  height: 80px;
  padding-bottom: 8px;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}
body.android-mode .lcars-sidebar-top::before {
  content: '01000100 01000001';
  display: block;
  font-size: 7px;
  letter-spacing: 0;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 1px;
  text-transform: none;
}
body.android-mode .lcars-sidebar-top::after {
  content: '01010100 01000001';
  display: block;
  font-size: 7px;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 3px;
  text-transform: none;
}

/* === SIDEBAR-BOTTOM: Terminal-Prompt mit blinkender Einfügemarke === */
body.android-mode .lcars-sidebar-bottom {
  height: 65px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 8px;
  border-radius: 0;
  font-family: 'Courier New', monospace;
}
body.android-mode .lcars-sidebar-bottom::before {
  content: 'DATA@positronic:~$';
  display: block;
  font-size: 8px;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: 0;
}
body.android-mode .lcars-sidebar-bottom::after {
  content: '_';
  display: block;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.6);
  height: 0;
  margin-bottom: 20px;
  animation: android-cursor-blink 1.1s step-end infinite;
  text-transform: none;
}

/* === NAV-BUTTONS: Hex-Adressen, Monospace, filigran === */
body.android-mode .lcars-sidebar-block {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0;
  padding: 0 10px 5px;
  min-height: 44px;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  border-radius: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 0;
}
body.android-mode .lcars-sidebar-block::before {
  content: attr(data-android);
  display: block;
  font-size: 8px;
  color: rgba(0, 0, 0, 0.5);
  font-family: 'Courier New', monospace;
  font-style: normal;
  margin-bottom: 1px;
  letter-spacing: 0;
}
/* Status-Punkt: quadratisch, nicht rund */
body.android-mode .lcars-status-dot {
  border-radius: 0;
}

/* -------------------------------------------------------
   Sidebar-Spacer: zwei Terminal-Datenstroeme
   Strom 1 (::before): Hex-Dump, nach OBEN,  28s
   Strom 2 (::after):  Binary-Stream, nach UNTEN, 19s
   ------------------------------------------------------- */
body.android-mode .lcars-sidebar-spacer {
  position: relative;
  overflow: hidden;
  background: #000000;
  border-top: 1px solid rgba(204, 170, 0, 0.2);
  border-bottom: 1px solid rgba(204, 170, 0, 0.2);
}

/* Strom 1: Hex-Prozess-Log, nach oben */
body.android-mode .lcars-sidebar-spacer::before {
  content: '0xA200: 4D41 4420 | PROC.OK 0xA210: 414E 4420 | SYNC.OK 0xA220: 4441 5441 | NOMINAL 0xA230: NEURAL[0..47] ONLINE 0xA240: 60E12 OPS/SEC 0xA250: EMOT.PROC: NULL 0xA260: LOGIC.GATE: OPEN 0xA270: MEM.FREE: 799PB 0xA280: STARDATESTAMP: LIVE 0xA290: ETHICS.ROM: ACTIVE 0xA2A0: HOLO.MASK: OFF 0xA2B0: DREAM.SIM: NULL 0xA2C0: 4D41 4420 | PROC.OK 0xA2D0: 414E 4420 | SYNC.OK 0xA200: 4D41 4420 | PROC.OK 0xA210: 414E 4420 | SYNC.OK 0xA220: 4441 5441 | NOMINAL 0xA230: NEURAL[0..47] ONLINE 0xA240: 60E12 OPS/SEC 0xA250: EMOT.PROC: NULL 0xA260: LOGIC.GATE: OPEN 0xA270: MEM.FREE: 799PB 0xA280: STARDATESTAMP: LIVE 0xA290: ETHICS.ROM: ACTIVE 0xA2A0: HOLO.MASK: OFF 0xA2B0: DREAM.SIM: NULL 0xA2C0: 4D41 4420 | PROC.OK 0xA2D0: 414E 4420 | SYNC.OK';
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  font-size: 7px;
  font-family: 'Courier New', monospace;
  color: rgba(204, 170, 0, 0.6);
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0;
  word-break: break-word;
  pointer-events: none;
  animation: android-stream-up 28s linear infinite;
}

/* Strom 2: Binary-Zeichen, nach unten, versetzt */
body.android-mode .lcars-sidebar-spacer::after {
  content: '01000100 01000001 01010100 01000001 00100000 01001110 01000101 01010100 00111010 00100000 01001111 01001110 01001100 01001110 00100000 00111010 00100000 01001111 01001011 00100000 01000100 01000001 01010100 01000001 00100000 01000110 01010010 01000101 01000101 00111010 00100000 01000100 01000001 01010100 01000001 00100000 01001110 01000101 01010100 00111010 00100000 01001111 01001110 01001100 01001110 00100000 00111010 00100000 01001111 01001011';
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  font-size: 7px;
  font-family: 'Courier New', monospace;
  color: rgba(204, 170, 0, 0.18);
  line-height: 1.7;
  text-transform: none;
  letter-spacing: 0;
  word-break: break-word;
  pointer-events: none;
  animation: android-stream-down 19s linear infinite;
}

@keyframes android-stream-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes android-stream-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
@keyframes android-cursor-blink {
  0%, 49% { opacity: 0.6; }
  50%, 100% { opacity: 0; }
}

/* === CONTENT-BEREICH: minimal, sachlich === */
body.android-mode .lcars-content {
  border-width: 1px;
  border-style: solid;
}

/* === DATA CARDS: duenne 1px Box, kein Glow, Hex-ID === */
body.android-mode .lcars-data-card {
  position: relative;
  background: transparent;
  border-left: 2px solid #ccaa00;
  box-shadow: none;
  outline: 1px solid rgba(204, 170, 0, 0.25);
  outline-offset: -3px;
}
body.android-mode .lcars-data-card h3,
body.android-mode .lcars-data-card .value {
  font-family: 'Courier New', monospace;
}
/* Hex-Prozess-ID oben links */
body.android-mode .lcars-data-card::before {
  content: 'PID:' attr(id);
  position: absolute;
  top: 4px;
  left: 10px;
  font-size: 7px;
  font-family: 'Courier New', monospace;
  color: rgba(204, 170, 0, 0.35);
  letter-spacing: 0;
  text-transform: uppercase;
  pointer-events: none;
}

/* === HEADER-TITEL: kein Glow - Data mag keine Effekte === */
body.android-mode .lcars-title {
  text-shadow: none;
  letter-spacing: 0;
}

/* === SCROLLBAR: Amber === */
body.android-mode .lcars-content::-webkit-scrollbar-track {
  border-color: #554400;
}
body.android-mode .lcars-content::-webkit-scrollbar-thumb {
  background: #ccaa00;
  border-radius: 0;
}

/* === LINKS: Amber, kein Schnickschnack === */
body.android-mode .lcars-content a {
  color: #ddbb33;
  border-bottom-color: #886600;
}
body.android-mode .lcars-content a:hover {
  color: #ffdd00;
}

/* ============================================
   Life Support Mode Easter Egg
   ============================================ */

/* Klickbare Life Support Karte */
#life-support-status {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

#life-support-status:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(68, 204, 68, 0.3);
}

#life-support-status:active {
  transform: scale(0.98);
}

/* Status Dot Farben fuer verschiedene Modi */
.lcars-status-dot.life-support-klingon {
  background: #cc4444;
  box-shadow: 0 0 8px #cc4444;
}

.lcars-status-dot.life-support-benzite {
  background: #44aacc;
  box-shadow: 0 0 8px #44aacc;
}

.lcars-status-dot.life-support-android {
  background: #cccc44;
  box-shadow: 0 0 8px #cccc44;
  animation: none;
}

/* Life Support Nachrichten */
.life-support-message {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  right: 0;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 8px;
  animation: crew-message-in 0.3s ease-out;
  z-index: 100;
  white-space: normal;
  line-height: 1.3;
}

.life-support-message-klingon {
  background: rgba(204, 68, 68, 0.95);
  color: #ffffff;
  border: 1px solid #ff6666;
}

.life-support-message-benzite {
  background: rgba(68, 170, 204, 0.95);
  color: #000000;
  border: 1px solid #66ddff;
}

.life-support-message-android {
  background: rgba(204, 204, 68, 0.95);
  color: #000000;
  border: 1px solid #ffff66;
}

/* ============================================
   Shields Attack Easter Egg
   ============================================ */

/* Klickbare Shields Karte */
#shields-status {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

#shields-status:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(153, 153, 255, 0.3);
}

#shields-status:active {
  transform: scale(0.98);
}

/* Shields Wert Farben */
#shields-value {
  transition: color 0.3s;
}

#shields-value.shields-caution {
  color: #ffcc00;
}

#shields-value.shields-warning {
  color: #ff9900;
}

#shields-value.shields-critical {
  color: #ff4444;
  animation: shields-critical-pulse 0.5s infinite;
}

@keyframes shields-critical-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Shields Nachrichten */
.shields-message {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  right: 0;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: 8px;
  animation: crew-message-in 0.3s ease-out;
  z-index: 100;
  white-space: normal;
  line-height: 1.3;
}

.shields-message-attack {
  background: rgba(204, 68, 68, 0.95);
  color: #ffffff;
  border: 1px solid #ff6666;
}

.shields-message-worf {
  background: rgba(153, 102, 51, 0.95);
  color: #ffffff;
  border: 1px solid #cc9966;
}

.shields-message-critical {
  background: rgba(255, 0, 0, 0.95);
  color: #ffffff;
  border: 2px solid #ff6666;
  font-weight: bold;
  text-align: center;
  animation: critical-flash 0.3s infinite;
}

.shields-message-info {
  background: rgba(68, 136, 204, 0.95);
  color: #ffffff;
  border: 1px solid #6699cc;
}

@keyframes critical-flash {
  0%, 100% { background: rgba(255, 0, 0, 0.95); }
  50% { background: rgba(200, 0, 0, 0.95); }
}

/* Screen Shake bei Treffer */
.shields-hit {
  animation: screen-shake 0.3s ease-out;
}

@keyframes screen-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Red Alert Effekt */
.red-alert {
  animation: red-alert-flash 0.5s infinite;
}

@keyframes red-alert-flash {
  0%, 100% {
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.3);
  }
  50% {
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.1);
  }
}

/* ============================================
   Mobile Status Bar
   ============================================ */

.mobile-status-bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 15px 0;
  padding: 10px;
  background: rgba(255, 153, 0, 0.1);
  border-radius: 12px;
  border: 1px solid var(--lcars-orange);
}

.mobile-status-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 5px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--lcars-tan);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.mobile-status-btn:hover,
.mobile-status-btn:active {
  background: rgba(255, 153, 0, 0.2);
  border-color: var(--lcars-orange);
  transform: scale(1.02);
}

.mobile-status-icon {
  font-size: 20px;
  line-height: 1;
}

.mobile-status-label {
  font-size: 10px;
  color: var(--lcars-peach);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.mobile-status-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lcars-green);
}

.mobile-status-dot.online {
  background: var(--lcars-green);
  animation: pulse 2s infinite;
}

.mobile-status-dot.warning {
  background: var(--lcars-yellow);
}

.mobile-status-dot.danger {
  background: var(--lcars-red);
  animation: none;
}

.mobile-status-dot.klingon {
  background: #cc4444;
  box-shadow: 0 0 5px #cc4444;
}

.mobile-status-dot.benzite {
  background: #44aacc;
  box-shadow: 0 0 5px #44aacc;
}

.mobile-status-dot.android {
  background: #cccc44;
  box-shadow: 0 0 5px #cccc44;
  animation: none;
}

/* Mobile Shields Farben */
#mobile-shields .mobile-status-label.caution {
  color: #ffcc00;
}

#mobile-shields .mobile-status-label.warning {
  color: #ff9900;
}

#mobile-shields .mobile-status-label.critical {
  color: #ff4444;
  animation: shields-critical-pulse 0.5s infinite;
}

/* Mobile Crew Danger */
#mobile-crew .mobile-status-label.danger {
  color: #ff4444;
  animation: crew-pulse 0.5s infinite;
}

/* Mobile Toast Container */
.mobile-toast-container {
  position: fixed;
  bottom: 80px;
  left: 10px;
  right: 10px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.mobile-toast {
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  animation: toast-in 0.3s ease-out;
  pointer-events: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.mobile-toast.toast-attack {
  background: rgba(204, 68, 68, 0.95);
  color: #ffffff;
  border: 1px solid #ff6666;
}

.mobile-toast.toast-worf {
  background: rgba(153, 102, 51, 0.95);
  color: #ffffff;
  border: 1px solid #cc9966;
}

.mobile-toast.toast-critical {
  background: rgba(255, 0, 0, 0.95);
  color: #ffffff;
  border: 2px solid #ff6666;
  font-weight: bold;
  text-align: center;
  animation: toast-in 0.3s ease-out, critical-flash 0.3s infinite;
}

.mobile-toast.toast-info {
  background: rgba(68, 136, 204, 0.95);
  color: #ffffff;
  border: 1px solid #6699cc;
}

.mobile-toast.toast-warning {
  background: rgba(204, 68, 68, 0.95);
  color: #ffffff;
  border: 1px solid #ff6666;
}

.mobile-toast.toast-success {
  background: rgba(68, 204, 68, 0.95);
  color: #000000;
  border: 1px solid #66ff66;
}

.mobile-toast.toast-klingon {
  background: rgba(204, 68, 68, 0.95);
  color: #ffffff;
  border: 1px solid #ff6666;
}

.mobile-toast.toast-benzite {
  background: rgba(68, 170, 204, 0.95);
  color: #000000;
  border: 1px solid #66ddff;
}

.mobile-toast.toast-android {
  background: rgba(204, 204, 68, 0.95);
  color: #000000;
  border: 1px solid #ffff66;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-toast.toast-out {
  animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

@keyframes crew-message-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Overlay */
.warp-shutdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: warp-overlay-fadein 0.5s ease-out;
}

@keyframes warp-overlay-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.warp-shutdown-overlay.warp-fade-out {
  animation: warp-overlay-fadeout 0.5s ease-in forwards;
}

@keyframes warp-overlay-fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Container */
.warp-shutdown-container {
  width: 90%;
  max-width: 900px;
  height: 85vh;
  background: #0a0a0a;
  border: 2px solid #ff9900;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(255, 153, 0, 0.2);
}

/* Header */
.warp-shutdown-header {
  background: linear-gradient(90deg, #ff9900 0%, #cc6600 100%);
  padding: 10px 20px;
  text-align: center;
}

.warp-shutdown-title {
  color: #000;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 2px;
}

/* Console Output */
.warp-shutdown-console {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.4;
  background: #0a0a0a;
}

.warp-shutdown-console::-webkit-scrollbar {
  width: 8px;
}

.warp-shutdown-console::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.warp-shutdown-console::-webkit-scrollbar-thumb {
  background: #ff9900;
  border-radius: 4px;
}

/* Console Lines */
.warp-console-line {
  color: #33ff33;
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: 0;
}

.warp-console-line.warp-warning {
  color: #ffcc00;
  font-weight: bold;
  text-align: center;
  animation: warp-blink 1s infinite;
}

@keyframes warp-blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.5; }
}

.warp-console-line.warp-info {
  color: #66ccff;
}

.warp-console-line.warp-error {
  color: #ff4444;
  font-weight: bold;
}

.warp-console-line.warp-success {
  color: #44ff44;
  font-weight: bold;
}

.warp-console-line.warp-separator {
  color: #666666;
}

.warp-console-line.warp-command {
  color: #ffffff;
}

.warp-console-line.warp-typewriter {
  color: #ffcc99;
}

/* System Lines */
.warp-system-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.warp-bracket {
  color: #888888;
  font-weight: bold;
}

.warp-system-name {
  color: #cccccc;
  min-width: 280px;
}

.warp-dots {
  flex: 1;
  border-bottom: 1px dotted #444444;
  min-width: 20px;
}

.warp-status-fail {
  color: #ff6666;
  font-weight: bold;
  text-align: right;
  min-width: 180px;
}

.warp-status-ok {
  color: #66ff66;
  font-weight: bold;
  text-align: right;
  min-width: 180px;
}

/* Input Container */
.warp-input-container {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: #1a1a1a;
  border-top: 1px solid #333333;
}

.warp-prompt {
  color: #66ff66;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  white-space: nowrap;
}

.warp-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  outline: none;
  caret-color: #66ff66;
}

.warp-input::placeholder {
  color: #666666;
}

/* Power Fluctuation Effect on Body */
.warp-power-fluctuation {
  animation: power-flicker 0.1s ease-in-out 3;
}

@keyframes power-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .warp-shutdown-container {
    width: 95%;
    height: 90vh;
  }

  .warp-shutdown-title {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .warp-shutdown-console {
    padding: 10px;
    font-size: 11px;
  }

  .warp-system-name {
    min-width: 150px;
  }

  .warp-status-fail,
  .warp-status-ok {
    min-width: 100px;
    font-size: 10px;
  }

  .warp-input-container {
    padding: 10px;
  }

  .warp-prompt,
  .warp-input {
    font-size: 12px;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}