/* === About Screen === */
body.about-screen {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background: #0a0f16;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.about-panel {
  background: #1a1f27;
  border: 3px solid #444;
  border-radius: 12px;
  box-shadow: inset 0 0 15px #000, 0 0 25px rgba(0,0,0,.7);
  padding: 18px;
  width: 100%;
  max-width: 340px;
  text-align: center;

  /* ✅ Scroll only inside the panel */
  max-height: 80vh;           /* keep it contained within viewport */
  overflow-y: auto;           /* vertical scroll inside */
  scrollbar-width: thin;      /* Firefox */
  scrollbar-color: #555 #111; /* custom colors */

  /* optional: smooth feel */
  scroll-behavior: smooth;
}


/* Fluid typography for better scaling */
.about-title {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  color: #ffd76a; /* softer gold */
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  margin-bottom: 16px;
  text-align: center;
  letter-spacing: 0.2px;
  font-weight: 700;
}

.about-panel .about-text-wrap h2 { font-size: 1.4rem; margin: 0 0 10px; color: #ffd76a; }
.about-panel .about-text-wrap h3 { font-size: 1.2rem; margin: 10px 0; color: #f0e0a0; }
.about-panel .about-text-wrap p  { margin: 0 0 12px; line-height: 1.7; color: #d8dee9; }
.about-panel .about-text-wrap ul,
.about-panel .about-text-wrap ol { padding-left: 1.2rem; margin: 0 0 12px; }
.about-panel .about-text-wrap blockquote {
  margin: 10px 0; padding: 10px 12px; border-left: 3px solid #ffd76a; background: rgba(255,215,0,0.07);
  color: #dcdcdc; border-radius: 6px;
}
.about-panel .about-text-wrap a { color: #72b9ff; text-decoration: underline; }


.about-text {
  margin: 0 0 14px;
  line-height: 1.7;
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.05rem);
  color: #d8dee9;
}

.about-text.highlight {
  background: rgba(255, 215, 0, 0.08);
  padding: 12px 14px;
  border-left: 3px solid #ffd76a;
  font-style: italic;
  border-radius: 8px;
}

/* --- Responsive: scale panel size & spacing on wider screens --- */
@media (min-width: 640px) {
  .about-panel {
    padding: 28px;
    max-width: 720px; /* larger on small-desktop/tablet */
  }
}

@media (min-width: 960px) {
  .about-panel {
    padding: 32px;
    max-width: 860px; /* comfortably bigger on desktop */
  }
}

/* Make sure very small screens don’t feel cramped */
@media (max-width: 360px) {
  body.about-screen { padding: 16px; }
  .about-panel { padding: 18px; }
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}