* {
  user-select: none
}/* Base dark theme */
body {
  background: #181a1b;
  color: #f5f6fa;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-image: url('img/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-top: 70px; 
  background-attachment: fixed;
  background-position: center 0;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (pointer: fine) {
  body {
    background-attachment: fixed;
    background-position: center 0;
    background-size: cover;
    will-change: background-position;
  }
}
html, body {
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge */
  overflow-y: scroll;            /* Always show vertical space, but no bar */
}


html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;                 /* Chrome/Safari/Opera */
}

/* Header */
header {
  text-align: center;
  margin-top: 4rem;
}

h1, h2 {
  color: #fff;
  margin: 0.5em 0;
}
h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  margin: 0.5em 0;
}

/* Main container */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 900px;
  margin: auto;
  padding: 0rem;
}
#main {
  margin-bottom: 0;
}

section:last-of-type {
  margin-bottom: 0;
}

/* Full-width grey section for description */
.section-sec {
  background: rgba(35, 39, 42, 0.8);
  padding: 0;
  margin: 0;
  border-top: 2px solid #31353b;
  border-bottom: 2px solid #31353b;
  box-shadow: 0 -2px 16px #0007;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 5;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 5rem;
}

.sec-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 0 3.5rem 0;
  max-width: 900px;
  margin: 0 auto;
  gap: 2.5rem;
  position: relative;
}

.sec-row.left {
  flex-direction: row;
}

.sec-row.right {
  flex-direction: row-reverse;
}

.sec-img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 180px;
  transition: transform 0.2s, box-shadow 0.2s;
  border: #0005 solid 2.5px;
}
@media (max-width: 900px) {
  .sec-img {
    width: 140px !important;
    height: 140px !important;
  }
}
.sec-img:hover {
  transform: scale(1.04) rotate(-2deg);
  box-shadow: 0 8px 32px #000c, 0 1.5px 0 #e2ba5b inset;
}

.sec-text {
  flex: 1;
  color: #f5f6fa;
  background: rgba(35, 39, 42, 0.85);
  border-radius: 14px;
  padding: 2rem 2.5rem;
  box-shadow: 0 2px 8px #0005;
  border: 1.5px solid #31353b;
  text-align: left;
  min-width: 0;
}
.sec-row.right .sec-text {
  text-align: right;
}

.sec-text h3 {
  color: #e2ba5b;
  margin-top: 0;
  margin-bottom: 0.7em;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 8px #0007;
}
.sec-text p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.7;
  color: #b0b3b8;
  text-shadow: 0 1px 4px #0006;
}

@media (max-width: 900px) {
  .sec-row {
    flex-direction: column !important;
    gap: 1.5rem;
    padding: 2rem 0 2rem 0;
  }
  .sec-img {
    width: 100%;
    max-width: 320px;
    height: 180px;
  }
  .sec-text {
    padding: 1.2rem 1rem;
    text-align: center !important;
  }
}

.scp-logo-inline {
  height: 2.4em;
  width: 2.4em;
  vertical-align: middle;
  transition: transform 0.2s;
  filter: drop-shadow(0 3px 5px #0007);
  border-radius: 50%;
  background: #181a1b;
  padding: 0.1em;
}

/* Main section container for text only */
.main-container {
  background: rgba(35, 39, 42, 0.80);
  border-radius: 18px;
  padding: 1.2rem 2rem 1.2rem 2rem;
  margin: 4rem auto 3rem auto;
  box-shadow: 0 4px 24px #0008, 0 1.5px 0 #e2ba5b inset;
  max-width: 520px;
  text-align: center;
  border: 1.5px solid #23272a;
  transition: box-shadow 0.2s, background 0.2s;
  
}
.main-container h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5em;
  color: #e2ba5b;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 8px #0007;
}
.main-container p {
  color: #f5f6fa;
  font-size: 1.18rem;
  line-height: 1.7;
  margin: 0.5em 0 0 0;
  text-shadow: 0 1px 4px #0006;
}

/* BUTTONS: improved style, same colors */
.button-group {
  display: flex;
  gap: 1.2rem;
  margin: 1.5rem 0 2.5rem 0;
  justify-content: center;
}

.main-btn {
  display: inline-block;
  padding: 0.85em 2.4em;
  border-radius: 10px;
  background: #23272a;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 16px #0005, 0 1.5px 0 #e2ba5b inset;
  transition: 
    background 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    transform 0.13s;
  border: 2px solid #31353b;
  cursor: pointer;
  letter-spacing: 0.5px;
  font-size: 1.1em;
  position: relative;
  overflow: hidden;
}

.main-btn.discord,
.main-btn.ssuh,
.main-btn.join {
  background: #23272a;
}

.main-btn:hover, .main-btn:focus {
  background: #31353b;
  color: #e2ba5b;
  transform: translateY(-2px) scale(1.06);
  outline: none;
}

.main-btn:active {
  background: #181a1b;
  color: #fff;
  box-shadow: 0 2px 8px #0003;
  transform: scale(0.98);
}

/* CMD CONSOLE STYLE */
.console-box {
  background: rgba(24, 26, 27, 0.8);
  border: 1.5px solid #23272a;
  border-radius: 10px;
  margin-top: 4.5rem;
  font-size: 1.25rem;
  padding: 2.5em 2.5em 2em 2.5em;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Fira Mono', 'Consolas', monospace;
  color: #e2ba5b;
  box-shadow: 0 4px 24px #000a;
  position: relative;
  overflow-x: auto;
}

.console-box::before {
  content: '';
  display: block;
  height: 32px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px 10px 0 0;
  background: #23272a;
  z-index: 1;
}

.console-controls {
  position: absolute;
  top: 8px;
  left: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.console-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0;
  border: 1.5px solid #111;
}

.console-dot.red { background: #ff5f56; border-color: #b03a2e; }
.console-dot.yellow { background: #ffbd2e; border-color: #b38600; }
.console-dot.green { background: #27c93f; border-color: #1e824c; }

.console-content {
  position: relative;
  z-index: 3;
  padding-top: 18px;
  display: block;
}

.console-input-line {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-size: 1.25rem; /* Match .console-box font-size */
  margin-top: 1em;
  color: #e2ba5b;
}

/* Responsive */
@media (max-width: 700px) {
  main {
    padding: 1rem;
  }
    nav {
    padding: 0 0.5rem;
  }
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
  .button-group {
    flex-direction: column;
    gap: 0.7rem;
  }
  .main-container {
    padding: 1.2rem 0.7rem;
  }
  .console-box {
    padding: 1.2em 0.7em 1em 0.7em;
  }
}
.console-cursor {
  display: inline-block;
  width: 0.7em;
  height: 1.25rem; /* Match .console-box font-size */
  background: none;
  color: #e2ba5b;
  font-weight: bold;
  font-family: inherit;
  animation: blink-cursor 1.5s steps(1) infinite;
  margin-left: 0.1em;
  font-size: 1em;
}

@keyframes blink-cursor {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0; }
}
.custom-scroll-zone {
  position: fixed;
  top: 0;
  right: 0;
  width: 5vw;
  min-width: 32px;
  height: 100vh;
  z-index: 9999;
  cursor: grab;
  background: transparent;
  /* Optional: show a faint overlay on hover */
  transition: background 0.2s;
}
.custom-scroll-zone:hover {
  background: rgba(141, 140, 139, 0.1);
}
.custom-scroll-zone:active {
  cursor: grabbing;
  background: rgba(141, 140, 139, 0.06);
}

.console-box::-webkit-scrollbar {
  display: none;                 /* Chrome/Safari/Opera */
}
.site-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: #23272a;
  color: #b0b3b8;
  box-shadow: 0 -2px 16px #0007;
  padding: 0;
  font-size: 1.08rem;
  border-top: 2px solid #31353b;
  position: relative;
  z-index: 10;
  user-select: none;
  margin-top: -20px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.2rem 2rem 1.2rem 2rem;
  gap: 2rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: 1.35rem;
  font-weight: 700;
  color: #e2ba5b;
  letter-spacing: 1px;
}
.scanline-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0.10;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    #fff 3px,
    transparent 2px,
    transparent 8px
  );
  mix-blend-mode: lighten;
  animation: scanlines-move 2.5s linear infinite;
}
@keyframes scanlines-move {
  0% { background-position-y: 0; }
  100% { background-position-y: 8px; }
}

.footer-logo img {
  width: 2.5em;
  height: 2.5em;
  filter: drop-shadow(0 5px 8px #0007);
  border-radius: 50%;
  background: #181a1b;
  padding: 0.2em;
}
#scanline-toggle {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 10001;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  width: 60px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-switch {
  display: inline-block;
}

.toggle-track {
  position: relative;
  width: 65px;
  height: 35px;
  background: #bbb;
  border-radius: 16px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
  box-sizing: border-box;
}

.toggle-label {
  font-size: 1.05em;
  color: #fff;
  font-weight: 600;
  user-select: none;
  z-index: 2;
  transition: color 0.2s;
}

.toggle-label.on {
  color: #23272a;
}

.toggle-label.off {
  color: #fff;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 2px;
  width: 28px;
  height: 28px;
  background: #e2ba5b;
  border-radius: 50%;
  transition: left 0.22s cubic-bezier(.4,1.7,.7,1.01);
  box-shadow: 0 2px 8px #0004;
  z-index: 3;
}

/* ON state */
#scanline-toggle[aria-pressed="true"] .toggle-track {
  background: #e2ba5b;
}

#scanline-toggle[aria-pressed="true"] .toggle-label.on {
  color: #23272a;
}

#scanline-toggle[aria-pressed="true"] .toggle-label.off {
  color: #fff;
}

#scanline-toggle[aria-pressed="true"] .toggle-thumb {
  left: 31px;
  background: #23272a;
}

/* OFF state */
#scanline-toggle[aria-pressed="false"] .toggle-track {
  background: #23272a;
}

#scanline-toggle[aria-pressed="false"] .toggle-label.on {
  color: #fff;
}

#scanline-toggle[aria-pressed="false"] .toggle-label.off {
  color: #ffffff;
}

#scanline-toggle[aria-pressed="false"] .toggle-thumb {
  left: 3px;
  background: #e2ba5b;
}
.scanline-overlay.off {
  display: none !important;
}
#scanline-toggle[aria-pressed="true"] .toggle-label.off {
  display: none;
}
#scanline-toggle[aria-pressed="false"] .toggle-label.on {
  display: none;
}
button, nav a {
  transition: transform 0.13s cubic-bezier(.4,1.7,.7,1.01);
}
button:active, nav a:active {
  transform: scale(0.96);
}
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(.4,1.7,.7,1.01), transform 0.7s cubic-bezier(.4,1.7,.7,1.01);
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

nav {
    background: rgba(35, 39, 42, 0.75);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 2px 16px #0005;
  border-bottom: 1.5px solid rgba(255,255,255,0.06);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 1.5rem;
  backdrop-filter: blur(18px);
  transition: opacity 0.25s, background 0.25s;
  opacity: 0.85;
  font-family: 'Segoe UI', Arial, sans-serif;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
}

nav a {
  position: relative;
  color: #f5f6fa;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.08rem;
  padding: 0.6em 1.1em 0.6em 1.1em;
  border-radius: 7px;
  background: transparent;
  transition:
    color 0.18s,
    background 0.18s,
    box-shadow 0.18s,
    transform 0.13s;
  overflow: hidden;
  letter-spacing: 0.02em;
  display: inline-block;
}

nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.32em;
  width: 0;
  height: 3px;
  background: #e2ba5b;
  border-radius: 2px;
  transition:
    width 0.32s cubic-bezier(.4,1.7,.7,1.01),
    left 0.32s cubic-bezier(.4,1.7,.7,1.01);
  pointer-events: none;
  z-index: 1;
}

nav a:hover,
nav a:focus {
  color: #e2ba5b;
  background: #23272a;
  outline: none;
  transform: translateY(-2px) scale(1.06);
}

nav a.active {
  color: #e2ba5b;
  background: #23272a;
}

nav a:hover::after,
nav a:focus::after,
nav a.active::after {
  width: 90%;
  left: 5%;
}

@media (max-width: 900px) {
  nav {
    padding: 0 0.5rem;
    min-height: 56px;
  }
  nav ul {
    gap: 0.7rem;
  }
  nav a {
    font-size: 1rem;
    padding: 0.7em 0.8em;
  }
}

.footer-social {
  display: flex;
  gap: 1.1em;
  align-items: center;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: #23272a;
  color: #b0b3b8;
  font-size: 1.4em;
  transition: 
    background 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    transform 0.13s;
  border: 2px solid #31353b;
  box-shadow: 0 2px 8px #0004;
}
.footer-social a:hover,
.footer-social a:focus {
  background: #31353b;
  color: #e2ba5b;
  transform: translateY(-2px) scale(1.13);
  box-shadow: 0 4px 16px #0007;
  outline: none;
}

.footer-social svg {
  width: 1.3em;
  height: 1.3em;
  display: block;
}

.footer-bottom {
  border-top: 1.5px solid #31353b;
  margin-top: 1.2rem;
  padding: 1.1rem 2rem 1.2rem 2rem;
  text-align: center;
  font-size: 0.98em;
  color: #b0b3b8;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  background: #23272a;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 2rem 1rem 1rem 1rem;
  }
  .footer-bottom {
    padding: 1.1rem 1rem 1.2rem 1rem;
  }
}
/* Department Main Container */
.department-main-container {
  justify-content: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: rgba(35, 39, 42, 0.90);
  border-radius: 24px;
  padding: 3.5rem 3.5rem 2.5rem 3.5rem;
  margin: 3rem auto 3rem auto;
  box-shadow: 0 8px 32px #000a, 0 2px 0 #e2ba5b inset;
  max-width: 1900px;
  min-height: 700px;
  min-width: 1000px;
  color: #f5f6fa;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.department-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.department-header h2 {
  color: #e2ba5b;
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.03em;
}

.department-search {
  position: relative;
  display: flex;
  align-items: center;
}

#department-search-input {
  padding: 0.5em 2.2em 0.5em 1em;
  border-radius: 8px;
  border: 1.5px solid #e2ba5b;
  background: #23272a;
  color: #fffbe6;
  font-size: 1.08rem;
  outline: none;
  transition: border 0.2s;
  width: 220px;
}
#department-search-input:focus {
  border-color: #fffbe6;
}
.search-icon {
  position: absolute;
  right: 0.8em;
  color: #e2ba5b;
  font-size: 1.2em;
  pointer-events: none;
}

/* Department List - vertical layout */
.department-list {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  max-height: 600px;
  overflow-y: auto;
  padding: 1rem 0.5rem 1rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #e2ba5b #23272a;
  align-items: center;
}
.department-list::-webkit-scrollbar {
  width: 10px;
}
.department-list::-webkit-scrollbar-thumb {
  background: #e2ba5b;
  border-radius: 5px;
}

/* Department Card - horizontal card, image left, content right */
.department-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #23272a;
  border: 2.5px solid #31353b;
  border-radius: 18px;
  box-shadow: 0 4px 16px #0009;
  min-height: 160px;
  max-width: 700px;
  cursor: pointer;
  transition: transform 0.18s, border 0.18s, box-shadow 0.18s;
  padding: 1.2em 1.5em;
  gap: 2.2em;
  position: relative;
  margin: 0 auto;
}

.department-card img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}

.department-card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.department-card-title {
  color: #e2ba5b;
  font-weight: 800;
  font-size: 1.35em;
  margin-bottom: 0.3em;
  text-align: left;
  letter-spacing: 0.03em;
}

.department-card-desc {
  color: #b0b3b8;
  font-size: 1.08em;
  text-align: left;
  margin-top: 0.2em;
  line-height: 1.5;
}



/* Department Details */
.department-details {
  background: rgba(24, 26, 27, 0.96);
  border-radius: 18px;
  padding: 2.5em 3em;
  margin-top: 1.8em;
  min-height: 180px;
  box-shadow: 0 4px 16px #000a;
  border: 2px solid #e2ba5b;
  color: #fffbe6;
  transition: background 0.2s, border 0.2s;
  font-size: 1.18em;
}
.department-details h3 {
  color: #e2ba5b;
  margin-top: 0;
  margin-bottom: 0.7em;
  font-size: 1.5em;
}
.department-details p {
  margin: 0;
  color: #fffbe6;
  font-size: 1.08em;
  line-height: 1.6;
}
.department-details a {
  color: #e2ba5b;
  text-decoration: underline;
  font-weight: 600;
  margin-top: 0.7em;
  display: inline-block;
}

/* Responsive for mobile */
@media (max-width: 900px) {
  .department-main-container {
    padding: 1.2rem 0.5rem;
    max-width: 98vw;
  }
  .department-details {
    padding: 1.2em 0.7em;
  }
}

@media (max-width: 700px) {
  .department-card {
    flex-direction: column;
    align-items: center;
    gap: 1.2em;
    padding: 1em 0.7em;
    min-height: 0;
    max-width: 98vw;
  }
  .department-card-content {
    align-items: center;
    text-align: center;
  }
  .department-list {
    max-height: 400px;
    gap: 1.2rem;
  }
  .department-main-container {
    padding: 0.5rem 0.2rem;
  }
}
/* Department Modal Overlay */
.department-modal {
  position: fixed;
  z-index: 2000;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(24, 26, 27, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.department-modal-content {
  background: #23272a;
  border: 2.5px solid #e2ba5b;
  border-radius: 18px;
  box-shadow: 0 8px 32px #000c;
  padding: 2.5em 2.5em 2em 2.5em;
  min-width: 300px;
  max-width: 700px;
  min-height: 350px;
  max-height: 90vh;
  color: #fffbe6;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
}
.department-modal-close {
  position: absolute;
  top: 1.1em;
  right: 1.3em;
  background: none;
  border: none;
  color: #e2ba5b;
  font-size: 2.1em;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  transition: color 0.18s;
}
.department-modal-close:hover {
  color: #fffbe6;
}
#department-modal-details img {
  display: block;
  margin-bottom: 1em;
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
#department-modal-details h3 {
  color: #e2ba5b;
  margin-top: 0;
  margin-bottom: 0.5em;
}
#department-modal-details p {
  color: #fffbe6;
  margin-bottom: 0.7em;
}
#department-modal-details a {
  color: #e2ba5b;
  text-decoration: underline;
  font-weight: 600;
  margin-top: 0.7em;
  display: inline-block;
}
/* Only style the Discord button inside the department modal */
.department-modal .main-btn.discord {
  background: #23272a;
  color: #0476F2 !important;
  border: 2px solid #0476F2;
  border-radius: 8px;
  padding: 0.7em 1.6em;
  font-weight: 700;
  font-size: 1.08em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 8px #0003;
  text-decoration: none !important;
}

.department-modal .main-btn.discord:hover,
.department-modal .main-btn.discord:focus {
  background: #23272a;
  color: #0476F2;
  border-color: #0476F2;
  box-shadow: 0 4px 16px #0006;
  transition: shadow 0s !important;
}
.department-modal .main-btn.discord svg path {
  fill: #0476F2 !important;
  transition: fill 0.18s;
}
/* Scientist Department (Blue) */
.department-modal.modal-scientist .main-btn.discord,
.department-modal.modal-scientist .main-btn.discord svg path {
  background: #23272a;
  color: #2196f3 !important;
  border-color: #2196f3;
}
.department-modal.modal-scientist .main-btn.discord svg path {
  fill: #2196f3 !important;
}







/* Credits Section */
.credits-main-container {
  background: rgba(35, 39, 42, 0.92);
  border-radius: 24px;
  padding: 3rem 2rem 2.5rem 2rem;
  margin: 3rem auto;
  box-shadow: 0 8px 32px #000a, 0 2px 0 #e2ba5b inset;
  max-width: 2000px;

  color: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.credits-main-container h2 {
  color: #e2ba5b;
  margin-bottom: 1.5rem;
  font-size: 2.2rem;
  letter-spacing: 0.04em;
}
.credits-category {
  width: 100%;
  margin-bottom: 2rem;
}
.credits-category-title {
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
  padding-left: 0.3em;
}
.credits-category-title.staff { color: #ee7e14; }
.credits-category-title.faction { color: #2bf13c; }
.credits-category-title.dev { color: #9233df; }

.credits-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  justify-items: center;
}
@media (max-width: 1100px) {
  .credits-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .credits-list {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

.credit-card {
  background: #23272a;
  border-radius: 16px;
  border: 2.5px solid #31353b;
  box-shadow: 0 4px 16px #0009;
  min-width: 220px !important;
  max-width: 140px !important;
  padding: 1.2em 1em;
  display: flex;
  align-items: center;
  gap: 1.1em;
  transition: border 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative;
}
@media (max-width: 700px) {
  .credit-card {
    min-width: 0 !important;
    max-width: 98vw !important;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 1em 0.7em;
    min-width: 150px !important;
    max-width: 150px !important;
  }
}
.credit-card.staff { border-color: #ee7e14; }
.credit-card.faction { border-color: #2bf13c; }
.credit-card.dev { border-color: #9233df; }
.credit-card.staff:hover { transform: translateY(-4px) scale(1.03);}
.credit-card.faction:hover { transform: translateY(-4px) scale(1.03);}
.credit-card.dev:hover { transform: translateY(-4px) scale(1.03);}

.credit-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e2ba5b;
  background: #181a1b;
  box-shadow: 0 0 0 4px #e2ba5b22;
}
.credit-card.staff .credit-avatar { border-color: #ee7e14; box-shadow: 0 0 0 4px #2196f322; }
.credit-card.faction .credit-avatar { border-color: #2bf13c;; box-shadow: 0 0 0 4px #e5393522; }
.credit-card.dev .credit-avatar { border-color: #9233df; box-shadow: 0 0 0 4px #43a04722; }

.credit-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2em;
}
.credit-name {
  font-weight: 700;
  font-size: 1.15em;
  color: #fffbe6;
}
.credit-discord {
  color: #e2ba5b;
  font-size: 1em;
  font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
  opacity: 0.92;
  margin-top: 0.2em;
  word-break: break-all;
}
/* Hamburger Toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: left;
  align-items: left;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 100;
  position: relative;
  margin-left: 1em;
}
.nav-toggle .bar {
  width: 28px;
  height: 4px;
  background: #e2ba5b;
  margin: 3px 0;
  border-radius: 2px;
  transition: 0.35s cubic-bezier(.4,1.7,.7,1.01);
  display: block;
}
.nav-toggle.open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open .bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle.open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Responsive nav */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
  }
  nav ul {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100vw;
    background: rgba(35,39,42,0.98);
    flex-direction: column;
    gap: 0.7rem;
    padding: 2.5rem 0 2rem 0;
    box-shadow: 0 8px 32px #000a;
    z-index: 99;
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(.4,1.7,.7,1.01), opacity 0.25s;
  }
  nav ul.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 700px) {
  .department-main-container,
  .credits-main-container {
    padding: 1.2rem 0.5rem;
    min-width: 0;
    max-width: 100vw;
  }
  .department-card,
  .credit-card {
    min-width: 0;
    max-width: 98vw;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 1em 0.7em;
  }
  .department-card-content,
  .credit-info {
    align-items: center;
    text-align: center;
  }
  .credits-list {
    flex-direction: column;
    gap: 1.2rem;
  }
}
.credits-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  justify-items: center;
  width: auto;
  max-width: 100%;
}

@media (max-width: 1100px) {
  .credits-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  .credits-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    max-width: 100%;
  }
}
#explanation {
  margin-top: 48px;
}
/* Department list auto width for menu */
.department-list {
  width: auto;
  max-width: 100%;
}
/* Rules & Links Section */
.rules-links-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 65px;
}
.rules-main-container {
  background: rgba(35, 39, 42, 0.92);
  border-radius: 24px;
  box-shadow: 0 8px 32px #000a, 0 2px 0 #e2ba5b inset;
  padding: 2.5rem 2rem 2rem 2rem;
  max-width: 900px;
  width: 100%;
  color: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.rules-main-container h2 {
  color: #e2ba5b;
  font-size: 2rem;
  margin-bottom: 0.5em;
  letter-spacing: 0.04em;
}
.rules-desc {
  color: #b0b3b8;
  font-size: 1.13rem;
  text-align: center;
  margin-bottom: 0.5em;
}
.rules-warning {
  color: #e53935;
  font-weight: 700;
  display: block;
  margin-top: 0.5em;
}
.rules-divider {
  color: #e2ba5b;
  font-size: 1.1em;
  letter-spacing: 0.1em;
  text-align: center;
  margin: 1em 0 1.5em 0;
  user-select: none;
}
.rules-links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.2rem 2.5rem;
  width: 100%;
}
/* Center the main content vertically and horizontally */
main {
  display: flex;
  flex-direction: column;
  align-items: center;      /* horizontal center */
  justify-content: center;  /* vertical center */
  min-height: 100vh;        /* full viewport height */
  padding: 0;
}

.rules-link-group {
  background: #23272a;
  border-radius: 16px;
  border: 2px solid #31353b;
  box-shadow: 0 2px 8px #0007;
  padding: 1.2em 1.2em 1.2em 1.2em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  align-items: flex-start;
  min-width: 0;
}
.rules-link-group h3 {
  color: #e2ba5b;
  font-size: 1.13em;
  margin: 0 0 0.5em 0;
  font-weight: 800;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.rules-icon {
  font-size: 1.2em;
  vertical-align: middle;
}
.rules-link {
  color: #2196f3;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.08em;
  padding: 0.2em 0;
  border-radius: 6px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  display: inline-block;
  margin-left: 0.2em;
}
.rules-link:hover,
.rules-link:focus {
  background: #23272a;
  text-decoration: underline;
}
@media (max-width: 900px) {
  .rules-main-container {
    padding: 1.2rem 0.5rem;
    max-width: 98vw;
  }
  .rules-links-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .rules-link-group {
    padding: 1em 0.7em;
  }
}


/* Glowing accent bar under section headings - auto width based on text */
.section-heading,
.department-main-container > .department-header h2,
.credits-main-container > h2,
.rules-main-container > h2 {
  position: relative;
  color: #e2ba5b;
  font-size: 2.2rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.5em;
  text-align: center;
  text-shadow: 0 2px 16px #e2ba5b44, 0 0px 2px #000;
  display: inline-block;
}

.section-heading::after,
.department-main-container > .department-header h2::after,
.credits-main-container > h2::after,
.explanation-main-container h2::after,
.rules-main-container > h2::after {
  content: "";
  display: block;
  margin: 0.5em auto 0 auto;
  width: 80%;
  min-width: 60px;
  max-width: 320px;
  height: 4px;
  border-radius: 2px;
  background: #e2ba5b;
  transition: width 0.3s;
}

@media (max-width: 600px) {
  .section-heading,
  .department-main-container > .department-header h2,
  .credits-main-container > h2,
  .rules-main-container > h2 {
    font-size: 1.3rem;
  }
  .section-heading::after,
  .department-main-container > .department-header h2::after,
  .credits-main-container > h2::after,
  .rules-main-container > h2::after {
    width: 90%;
    min-width: 40px;
    max-width: 180px;
  }
}
/* Explanation Section */
.explanation-main-container {
  background: rgba(35, 39, 42, 0.92);
  border-radius: 24px;
  box-shadow: 0 8px 32px #000a, 0 2px 0 #e2ba5b inset;
  padding: 2.5rem 2rem 2rem 2rem;
  max-width: 900px;
  width: 100%;
  color: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin: 3rem auto;
  box-sizing: border-box;
}
.explanation-main-container h2 {
  color: #e2ba5b;
  font-size: 2.2rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.5em;
  text-align: center;
  text-shadow: 0 2px 16px #e2ba5b44, 0 0px 2px #000;
  display: inline-block;
  position: relative;
}

.explanation-content {
  width: 100%;
  text-align: center;
  font-size: 1.18rem;
  color: #b0b3b8;
  position: relative;
}
.explanation-departments {
  margin: 2em 0 1.5em 0;
  background: #23272a;
  border-radius: 16px;
  border: 2px solid #31353b;
  box-shadow: 0 2px 8px #0007;
  padding: 1.2em 1.2em 1.2em 1.2em;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.explanation-departments h3 {
  color: #e2ba5b;
  font-size: 1.13em;
  margin: 0 0 0.5em 0;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.explanation-departments ul {
  padding-left: 1.2em;
  margin: 0;
  color: #fffbe6;
  font-size: 1.08em;
  line-height: 1.7;
}
.explanation-departments li {
  margin-bottom: 0.5em;
  list-style: disc;
}
.explanation-game {
  margin: 2em 0 1.5em 0;
  background: #23272a;
  border-radius: 16px;
  border: 2px solid #31353b;
  box-shadow: 0 2px 8px #0007;
  padding: 1.2em 1.2em 1.2em 1.2em;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.explanation-game h3 {
  color: #e2ba5b;
  font-size: 1.13em;
  margin: 0 0 0.5em 0;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.explanation-shortcuts {
  margin: 2.2em 0 1.5em 0;
  display: flex;
  justify-content: center;
  gap: 1.5em;
  flex-wrap: wrap;
}
.shortcut {
  background: #23272a;
  color: #e2ba5b;
  border: 2px solid #e2ba5b;
  border-radius: 10px;
  padding: 0.5em 1.3em;
  font-weight: 700;
  font-size: 1.18em;
  letter-spacing: 0.04em;
  cursor: pointer;
  position: relative;
  transition: background 0.18s, color 0.18s, border 0.18s, box-shadow 0.18s;
  box-shadow: 0 2px 8px #0005;
  overflow: hidden;
}
.shortcut:hover, .shortcut:focus {
  background: #e2ba5b;
  color: #23272a;
  border-color: #fffbe6;
  z-index: 2;
}
.shortcut::after {
  content: attr(data-explain);
  position: absolute;
  left: 50%;
  top: 110%;
  transform: translateX(-50%);
  background: #23272a;
  color: #e2ba5b;
  border: 1.5px solid #e2ba5b;
  border-radius: 8px;
  padding: 0.5em 1em;
  font-size: 0.98em;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 8px #000a;
  transition: opacity 0.22s, top 0.22s;
  z-index: 10;
}
.shortcut:hover::after, .shortcut:focus::after {
  opacity: 1;
  top: 130%;
}
.explanation-flavor {
  margin-top: 2em;
  font-size: 1.05em;
  color: #b0b3b8;
  font-style: italic;
  opacity: 0.93;
}
@media (max-width: 700px) {
  .explanation-main-container {
    padding: 1.2rem 0.5rem;
    max-width: 98vw;
  }
  .explanation-shortcuts {
    gap: 0.7em;
    flex-wrap: wrap;
  }
  .shortcut {
    font-size: 1em;
    padding: 0.5em 0.8em;
  }
  .explanation-departments,
  .explanation-game {
    padding: 1em 0.5em;
    max-width: 98vw;
  }
}
.shortcut-explanation {
  min-height: 2.2em;
  margin-top: 1em;
  color: #e2ba5b;
  background: #23272a;
  border: 1.5px solid #e2ba5b;
  border-radius: 8px;
  padding: 0.7em 1.2em;
  font-size: 1.08em;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 8px #000a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  position: relative;
  z-index: 2;
}
.shortcut-explanation.active {
  opacity: 1;
  pointer-events: auto;
}
.department-list-explanation b { padding: 2px 7px; border-radius: 6px; color: #fff; font-weight: 700; }
.dept-scientist { background: #3fa7d6; }
.dept-md        { background: #e53935; }
.dept-ttd       { background: #8e44ad; }
.dept-doaf      { background: #c0392b; }
.dept-et        { background: #fbc02d; color: #23272a; }
.dept-raisa     { background: #009688; }
.dept-ec        { background: #43a047; }
.dept-robotics  { background: #607d8b; }
.dept-doa       { background: #ff9800; color: #23272a; }
.dept-ettra     { background: #263238; }
.dept-mtfd      { background: #1976d2; }
.dept-cdd       { background: #795548; }
.dept-aeed      { background: #00bcd4; color: #23272a; }
.dept-ia        { background: #222; }
.dept-isd       { background: #b71c1c; }

/* --- Department Card Styles: All Departments Match the Original 3 --- */
.department-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #23272a;
  border: 2.5px solid #31353b;
  border-radius: 18px;
  box-shadow: 0 4px 16px #0009;
  min-height: 160px;
  max-width: 700px;
  cursor: pointer;
  transition: transform 0.18s, border 0.18s, box-shadow 0.18s;
  padding: 1.2em 1.5em;
  gap: 2.2em;
  position: relative;
  margin: 0 auto;
}
.department-card img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: 0 0 0 4px transparent;
  transition: border 0.18s, box-shadow 0.18s;
}
.department-card-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.department-card-title {
  color: #e2ba5b;
  font-weight: 800;
  font-size: 1.35em;
  margin-bottom: 0.3em;
  text-align: left;
  letter-spacing: 0.03em;

}
.department-card-desc {
  color: #b0b3b8;
  font-size: 1.08em;
  text-align: left;
  margin-top: 0.2em;
  line-height: 1.5;
}

/* --- Department Card Color Accents (border, title, image) --- */
.department-card.dept-scientist,
.department-card.dept-md,
.department-card.dept-ttd,
.department-card.dept-doaf,
.department-card.dept-et,
.department-card.dept-raisa,
.department-card.dept-ec,
.department-card.dept-robotics,
.department-card.dept-doa,
.department-card.dept-ettra,
.department-card.dept-mtfd,
.department-card.dept-cdd,
.department-card.dept-aeed,
.department-card.dept-ia,
.department-card.dept-isd,
.department-card.dept-admin,
.department-card.dept-security {
  /* Default border, will be overridden below */
  border-color: #31353b;
}
.department-card.dept-scientist { border-color: #3fa7d6; }
.department-card.dept-md { border-color: #8cdde7; }
.department-card.dept-ttd { border-color: #ffffff; }
.department-card.dept-doaf { border-color: #ee6455; }
.department-card.dept-et { border-color: #fbc02d; }
.department-card.dept-raisa { border-color: #b4a906; }
.department-card.dept-ec { border-color: #43a047; }
.department-card.dept-robotics { border-color: #b3b3b3; }
.department-card.dept-doa { border-color: #313131; }
.department-card.dept-ettra { border-color: #e43a7b; }
.department-card.dept-mtfd { border-color: #1976d2; }
.department-card.dept-cdd { border-color: #e08216; }
.department-card.dept-aeed { border-color: #ac35e4; }
.department-card.dept-ia { border-color: #e60c0c; }
.department-card.dept-isd { border-color: #e76262; }
.department-card.dept-admin { border-color: #46e037; }
.department-card.dept-security { border-color: #acacac; }

/* Hover/Active: Gold border and highlight */
.department-card:hover, .department-card.active {
  size:1.01;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px #000c;
}



/* Department-specific title and image accent */
.department-card.dept-scientist .department-card-title,
.department-card.dept-scientist img { color: #3fa7d6;  }
.department-card.dept-md .department-card-title,
.department-card.dept-md img { color: #8cdde7;  }
.department-card.dept-ttd .department-card-title,
.department-card.dept-ttd img { color: #ffffff;  }
.department-card.dept-doaf .department-card-title,
.department-card.dept-doaf img { color: #ee6455;  }
.department-card.dept-et .department-card-title,
.department-card.dept-et img { color: #fbc02d;  }
.department-card.dept-raisa .department-card-title,
.department-card.dept-raisa img { color: #b4a906;  }
.department-card.dept-ec .department-card-title,
.department-card.dept-ec img { color: #43a047;  }
.department-card.dept-robotics .department-card-title,
.department-card.dept-robotics img { color: #b3b3b3;  }
.department-card.dept-doa .department-card-title,
.department-card.dept-doa img { color: #313131;  }
.department-card.dept-ettra .department-card-title,
.department-card.dept-ettra img { color: #e43a7b;  }
.department-card.dept-mtfd .department-card-title,
.department-card.dept-mtfd img { color: #1976d2;  }
.department-card.dept-cdd .department-card-title,
.department-card.dept-cdd img { color: #e08216;; }
.department-card.dept-aeed .department-card-title,
.department-card.dept-aeed img { color: #ac35e4; }
.department-card.dept-ia .department-card-title,
.department-card.dept-ia img { color: #e60c0c;  }
.department-card.dept-isd .department-card-title,
.department-card.dept-isd img { color: #e76262;  }
.department-card.dept-admin .department-card-title,
.department-card.dept-admin img { color: #46e037;  }
.department-card.dept-security .department-card-title,
.department-card.dept-security img { color: #acacac;  }

/* Responsive: Stack cards vertically on mobile */
@media (max-width: 700px) {
  .department-card {
    flex-direction: column;
    align-items: center;
    gap: 1.2em;
    padding: 1em 0.7em;
    min-height: 0;
    max-width: 98vw;
  }
  .department-card-content {
    align-items: center;
    text-align: center;
  }
}
.glitch-symbol {
  display: inline-block;
  font-size: 0.8em;
  color: #eaec63;
  text-shadow:
    #ecbb46,
    #ecbb46,
    #ecbb46;
  font-family: 'Consolas', 'monospace', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
  animation: glitch-move 0.01s infinite alternate;
  user-select: none;
  vertical-align: middle;
}
@keyframes glitch-move {
  0% { transform: translate(0, 0) skewX(0deg);}
  20% { transform: translate(0px, 1px) skewX(-2deg);}
  40% { transform: translate(1px, -1px) skewX(2deg);}
  60% { transform: translate(-2px, 2px) skewX(-1deg);}
  80% { transform: translate(2px, -2px) skewX(1deg);}
  100% { transform: translate(0, 0) skewX(0deg);}
}
.info-callout {
  background: #23272a;
  border-left: 5px solid #e2ba5b;
  padding: 1.2em 1.5em;
  margin: 2em 0 1.5em 0;
  border-radius: 12px;
  color: #fffbe6;
}
.info-callout blockquote {
  margin: 0;
  font-size: 1.13em;
  font-style: italic;
}
.info-redacted {
  color: #e53935;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.info-steps {
  margin: 2em 0 1.5em 0;
}
.steps-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1.2em;
  margin-top: 0.7em;
}
.step {
  background: #31353b;
  color: #e2ba5b;
  border-radius: 8px;
  padding: 0.7em 1.2em;
  font-weight: 600;
  font-size: 1.08em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  box-shadow: 0 2px 8px #0005;
  margin: 15px;
}
@media (max-width: 700px) {
  .steps-row {
    flex-direction: column;
    align-items: center;
  }
  .step {
    width: 100%;
    max-width: 400px;
    text-align: center;
  }
}
.step-num {
  background: #e2ba5b;
  color: #23272a;
  border-radius: 50%;
  width: 1.7em;
  height: 1.7em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-right: 0.5em;
}

.info-list {
  background: #23272a;
  border: 1.5px solid #31353b;
  border-radius: 10px;
  padding: 1.2em 1.5em;
  margin: 2em 0 1.5em 0;
  color: #fffbe6;
}
.info-list ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 1.08em;
  line-height: 1.7;
}
.info-list b {
  color: #e2ba5b;
}

.info-features {
  margin: 2em 0 1.5em 0;
}


.feature-title {
  color: #e2ba5b;
  font-weight: 700;
  display: block;
  margin-bottom: 0.2em;
}
.feature-desc {
  font-size: 0.98em;
  opacity: 0.92;
}
/* Center all direct <p>, headings, and lists in info sections */
.info-callout p,
.info-callout blockquote,
.info-callout h3,
.info-steps p,
.info-steps h3,
.info-list p,
.info-list h3,
.info-list ul,
.info-features p,
.info-features h3,
.info-features ul
 .info-features li {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}
/* 2x2 grid for features */


/* Center list dots but left-align text in info-list */
.info-list ul {
  list-style-position: inside;
  padding-left: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-list ul li {
  width: 100%;
  max-width: 420px;
  text-align: left;
  margin-bottom: 0.5em;
  position: relative;
}

/* Remove text centering from info-list, but keep the list in the middle */
.info-list {
  text-align: initial;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-list h3 {
  text-align: center;
}
/* Reduce vertical spacing between info sections for a more connected look */
.info-callout,
.info-steps,
.info-list,
.info-features {
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}

/* Optional: reduce gap between steps */
.steps-row {
  gap: 0.5em;
  margin-top: 0.3em;
}

/* Optional: reduce gap between feature cards in the grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0; /* No gap between cards */
  background: #31353b;
  border-radius: 12px;
  box-shadow: 0 2px 8px #0005;
  overflow: hidden;
}

/* Remove border-radius except for outer corners */
.feature-card {
  background: transparent;
  border-radius: 0;
  min-width: 200px;
  box-shadow: none;
  padding: 1.2em 1.3em;
  border: none;
  color: #fffbe6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* Outer corners only */
.feature-card:nth-child(1) { border-top-left-radius: 12px; }
.feature-card:nth-child(2) { border-top-right-radius: 12px; }
.feature-card:nth-child(3) { border-bottom-left-radius: 12px; }
.feature-card:nth-child(4) { border-bottom-right-radius: 12px; }

/* Optional: add a subtle divider between cards */
.feature-card:not(:nth-child(1)):not(:nth-child(2)) {
  border-top: 1.5px solid #23272a;
}
.feature-card:nth-child(2),
.feature-card:nth-child(4) {
  border-left: 1.5px solid #23272a;
}
/* Explanation section styles */
.explanation-main-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2em 1em;
}
.explanation-content {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}
.explanation-block {
  background: #23272a;
  border-radius: 10px;
  padding: 1.2em 1.5em;
  margin: 0.5em 0;
  color: #fffbe6;
  box-shadow: 0 2px 8px #0003;
}
.explanation-block h3 {
  color: #e2ba5b;
  margin-bottom: 0.5em;
  text-align: center;
}
.explanation-list {
  list-style: disc inside;
  margin: 0.5em 0 0 0;
  padding: 0;
  text-align: left;
}
.explanation-list li {
  margin-bottom: 0.3em;
}
.explanation-block a {
  color: #8cdde7;
  text-decoration: underline;
}
/* Intro overlay: match main page CMD style */
#intro-overlay {
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s;
  opacity: 1;
}

.intro-terminal {
  background: rgba(24, 26, 27, 0.92);
  border: 1.5px solid #23272a;
  border-radius: 10px;
  box-shadow: 0 4px 24px #000a;
  padding: 2.5em 2.5em 2em 2.5em;
  min-width: 700px;
  max-width: 90vw;
  min-height: 260px;
  font-family: 'Fira Mono', 'Consolas', monospace;
  color: #e2ba5b;
  font-size: 1.25rem;
  position: relative;
  overflow-x: auto;
  text-shadow: 0 2px 8px #000a;
}

.intro-terminal::before {
  content: '';
  display: block;
  height: 32px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px 10px 0 0;
  background: #23272a;
  z-index: 1;
}

.intro-terminal-controls {
  position: absolute;
  top: 8px;
  left: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.intro-terminal-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
  border: 1.5px solid #111;
}
.intro-terminal-dot.red { background: #ff5f56; border-color: #b03a2e; }
.intro-terminal-dot.yellow { background: #ffbd2e; border-color: #b38600; }
.intro-terminal-dot.green { background: #27c93f; border-color: #1e824c; }

#intro-terminal-text {
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  z-index: 3;
  padding-top: 18px;
  display: block;
}

@media (max-width: 900px) {
  .intro-terminal {
    min-width: 0;
    max-width: 98vw;
    padding: 1.2em 0.7em 1em 0.7em;
    font-size: 1em;
  }
}
.explanation-block {
  background: #23272a;
  border-radius: 16px;
  border: 2px solid #31353b;
  box-shadow: 0 2px 8px #0007;
  padding: 1.5em 1.5em;
  margin: 1.5em 0;
  color: #fffbe6;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.explanation-block h3 {
  color: #e2ba5b;
  font-size: 1.3em;
  margin: 0 0 0.7em 0;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
}

.explanation-block p {
  margin: 0;
  font-size: 1.08em;
  line-height: 1.6;
  color: #b0b3b8;
}

.explanation-list {
  padding-left: 1.2em;
  margin: 0.5em 0;
  color: #fffbe6;
  font-size: 1.08em;
  line-height: 1.7;
  list-style: disc;
}

.explanation-list li {
  margin-bottom: 0.5em;
}

.explanation-list b {
  color: #e2ba5b;
  font-weight: 700;
}

.explanation-block a {
  color: #3fa7d6;
  text-decoration: underline;
  font-weight: 600;
}

.explanation-block a:hover {
  color: #8cdde7;
}

@media (max-width: 900px) {
  .explanation-main-container {
    width: 95%;
    padding: 2rem 1.5rem;
    margin: 2rem auto;
    border-radius: 20px;
  }
  
  .explanation-main-container h2 {
    font-size: 2rem;
  }
  
  .explanation-content {
    font-size: 1.1rem;
  }
  
  .explanation-block {
    padding: 1.2em 1.2em;
    margin: 1.2em 0;
    border-radius: 14px;
  }
  
  .explanation-block h3 {
    font-size: 1.2em;
  }
  
  .explanation-block p {
    font-size: 1.05em;
  }
  
  .explanation-list {
    font-size: 1.05em;
  }
}

@media (max-width: 768px) {
  .explanation-main-container {
    width: 98%;
    padding: 1.5rem 1rem;
    margin: 1.5rem auto;
    border-radius: 16px;
    gap: 1.5rem;
  }
  
  .explanation-main-container h2 {
    font-size: 1.8rem;
  }
  
  .explanation-content {
    font-size: 1.05rem;
  }
  
  .explanation-block {
    padding: 1em 1em;
    margin: 1em 0;
    border-radius: 12px;
  }
  
  .explanation-block h3 {
    font-size: 1.15em;
  }
  
  .explanation-block p {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  .explanation-list {
    font-size: 1rem;
    line-height: 1.6;
    padding-left: 1em;
  }
}

@media (max-width: 480px) {
  .explanation-main-container {
    width: 98%;
    padding: 1rem 0.75rem;
    margin: 1rem auto;
    border-radius: 12px;
    gap: 1rem;
  }
  
  .explanation-main-container h2 {
    font-size: 1.6rem;
  }
  
  .explanation-content {
    font-size: 1rem;
  }
  
  .explanation-block {
    padding: 0.8em 0.8em;
    margin: 0.8em 0;
    border-radius: 10px;
  }
  
  .explanation-block h3 {
    font-size: 1.1em;
    margin-bottom: 0.5em;
  }
  
  .explanation-block p {
    font-size: 0.95em;
    line-height: 1.4;
  }
  
  .explanation-list {
    font-size: 0.95em;
    line-height: 1.5;
    padding-left: 0.8em;
  }
  
  .explanation-list li {
    margin-bottom: 0.4em;
  }
}
@media (max-width: 480px) {
  .department-card {
    padding: 1em 0.8em;
    margin: 0;
    border-width: 2px;
    gap: 0.8em;
  }
}
@media (max-width: 1200px) {
  .department-main-container {
    max-width: 95vw;
    width: 95%;
    padding: 2.5rem 2rem;
    margin: 2rem auto;
    gap: 2rem;
  }
}

@media (max-width: 900px) {
  .department-main-container {
    max-width: 98vw;
    width: 98%;
    padding: 2rem 1.5rem;
    margin: 1.5rem auto;
    border-radius: 20px;
    gap: 1.8rem;
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  .department-main-container {
    padding: 1.5rem 1rem;
    margin: 1rem auto;
    border-radius: 16px;
    gap: 1.5rem;
    min-height: 450px;
  }
}

@media (max-width: 480px) {
  .department-main-container {
    padding: 1rem 0.75rem;
    margin: 0.5rem auto;
    max-width: 98vw;
    width: 98%;
    border-radius: 12px;
    gap: 1rem;
    min-height: 400px;
  }
}
@media (max-width: 900px) {
  .department-card {
    padding: 1.2em 1.3em;
    gap: 1.8em;
    min-height: 150px;
    border-radius: 16px;
  }
}

@media (max-width: 768px) {
  .department-card {
    padding: 1em 1.2em;
    gap: 1.5em;
    min-height: 140px;
    border-radius: 14px;
  }
}

@media (max-width: 600px) {
  .department-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.2em 1em;
    gap: 1em;
    min-height: auto;
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .department-card {
    padding: 1em 0.8em;
    margin: 0;
    border-width: 2px;
    gap: 0.8em;
  }
}