/* M4 Eternal — inner pages (classes, systems, news, patch notes, sign in / create account): framed entry cards in the
   style of the client's popups, scenes of the game beside the text, and the M4 Eternal logo on the sign-in art. */

/* ---------- shared card frame ---------- */
.entry, .article, .release {
  position: relative;
  background: linear-gradient(180deg, rgba(24, 34, 49, 0.55), rgba(10, 15, 23, 0.82));
  border: 1px solid var(--gold-hair);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow);
}
.entry::before, .article::before, .release::after {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hi) 50%, var(--gold) 80%, transparent);
  opacity: 0.55;
}
.entry:last-child, .article:last-child { border-bottom: 1px solid var(--gold-hair); }

/* ---------- classes ---------- */
.entry { padding: 34px 36px; margin-bottom: 26px; overflow: hidden; isolation: isolate; }
.entry__figure { align-self: start; }
.entry__figure::before {
  content: ""; position: absolute; inset: 10% -10% 6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(116, 212, 242, 0.16), transparent);
}
.entry h2 { letter-spacing: 0.02em; }
.entry__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.entry__split p { margin-top: 0; }
.entry__clip { position: relative; }
.entry__clip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(210, 171, 103, 0.18), inset 0 -40px 40px -30px rgba(5, 7, 11, 0.8);
}
.entry .entry__clip video { display: block; width: 100%; margin: 0; }

/* ---------- systems ---------- */
.entry--system { grid-template-columns: 64px minmax(0, 1fr) minmax(220px, 36%); gap: 28px; }
.entry--system > div:last-child { grid-column: 2; grid-row: 1; }
.entry__scene {
  grid-column: 3; grid-row: 1; align-self: start; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid var(--gold-line); box-shadow: 0 18px 30px -18px #000;
}
.entry__scene.art--missing { display: none; }
.entry--system .entry__role { margin-bottom: 14px; }

/* ---------- news ---------- */
.article { padding: 32px 36px; margin-bottom: 26px; }
.article .date { padding-top: 8px; text-align: center; }
.article .entry-pic { max-width: none; aspect-ratio: 21 / 8; }

/* ---------- patch notes ---------- */
.timeline { padding-left: 30px; }
.release { padding: 24px 30px 26px; margin: 0 0 22px 18px; }
.release::before { left: -57px; top: 28px; }
.release__meta { flex-wrap: wrap; }
.release:first-child { border-color: var(--gold-line); }
.release ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2px 34px; }

/* ---------- sign in / create account ---------- */
.auth__art > img { z-index: 0; }
.auth__quote { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 520px; }
.auth__art .auth__quote .auth__logo {
  position: static; inset: auto; width: clamp(170px, 15vw, 240px); height: auto; margin: 0 0 4px -12px;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.75));
}
.auth__quote span { position: relative; padding-top: 14px; }
.auth__quote span::before {
  content: ""; position: absolute; left: 0; top: 0; width: 120px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

@media (max-width: 1100px) {
  .entry--system { grid-template-columns: 64px minmax(0, 1fr); }
  .entry__scene { grid-column: 2; grid-row: 2; max-width: 520px; aspect-ratio: 21 / 9; }
}
@media (max-width: 900px) {
  .entry__split { grid-template-columns: 1fr; gap: 18px; }
  .entry__clip { max-width: 520px; }
  .auth__art .auth__quote .auth__logo { width: 150px; }
}
@media (max-width: 640px) {
  .entry, .article { padding: 22px 18px; margin-bottom: 18px; }
  .entry--system { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .entry__scene { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .entry--system > .entry__mark { grid-row: 2; }
  .entry--system > div:last-child { grid-row: 2; }
  .article .date { text-align: left; padding-top: 0; }
  .timeline { padding-left: 18px; }
  .release { padding: 18px 16px 20px; margin-left: 12px; }
  .release::before { left: -39px; top: 22px; }
  .release ul { grid-template-columns: 1fr; }
  .auth__art .auth__quote .auth__logo { width: 120px; margin-left: -8px; }
  .auth__quote { font-size: 19px; }
}