/* =========================================================
   includes/cong-inc.css — CONG-INC episode reader chrome.
   Only the shell AROUND the panels. The panels keep their own inline
   styling, staged exactly as drawn — including the 16:9 aspect, left alone.

   Single-screen like the section landing pages: the fit-to-viewport shell
   (body -> 100dvh flex column) comes from adventure.css, loaded first. Here
   we just centre the reader on the page and cap the panel's CONTAINER so it
   lands on one screen without ever touching the panel's aspect.

   Violet accent — the SecureLynx-cyan original swapped to --violet-bright.
   ========================================================= */

/* ---- fill + centre inside the single-screen shell ---- */
.cong-ep {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;   /* centred on page */
  padding: clamp(16px, 3vh, 32px) 0;            /* override .section's tall padding */
}
.cong-ep .container {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(12px, 2vh, 22px);
}

.episode-header { text-align: center; flex: 0 0 auto; }
.episode-header h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--mist);
  letter-spacing: -.015em; margin-top: 4px;
}

/* ---- reader row: panel centred, buttons down the right ---- */
.episode-reader {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 2.2vw, 28px); width: 100%;
}

/* Panel aspect is left ALONE (16:9 lives in each panel's own inline style).
   We only cap the CONTAINER width so the centred panel fits one screen.
   --reader-reserve = vertical room kept for header + footer + title + padding
   (and the Field Note on the last panel). It's a dial — tune by watching. */
.comic-reader {
  width: min(100%, calc((100dvh - var(--reader-reserve, 260px)) * 16 / 9));
  min-width: 0;
}
.comic-reader .panel { border-radius: var(--radius-md); }   /* soften corners only */

/* ---- right-side buttons: Previous, Next, Back to Adventure ---- */
.panel-sidebar {
  flex: 0 0 auto; display: flex; flex-direction: column;
  gap: .7rem; min-width: 172px;
}
.panel-counter {
  display: flex; align-items: baseline; justify-content: center; gap: .35rem;
  border: 1px solid var(--border-secondary); border-radius: var(--radius-sm);
  padding: .55rem .5rem; margin-bottom: .2rem; color: var(--haze);
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
}
.panel-counter .pc-now { font-size: 1.15rem; font-weight: 700; color: var(--violet-bright); }
.panel-counter .pc-div { opacity: .5; }

.reader-btn { width: 100%; justify-content: center; }
.reader-btn-back { margin-top: .3rem; opacity: .85; }
.reader-btn.is-disabled {
  opacity: .3; pointer-events: none; cursor: default;
  transform: none; box-shadow: none;
}

.field-note {
  margin-top: clamp(12px, 2vh, 20px); padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--border-secondary); border-left: 3px solid var(--violet-bright);
  border-radius: var(--radius-md); background: var(--bg-panel-strong);
  max-width: 60ch; text-align: left;
}
.field-note h2 {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--haze); margin-bottom: 5px;
}
.field-note p { color: var(--text-secondary); font-size: .95rem; line-height: 1.55; }

.panel-missing { color: var(--haze); padding: 2rem; text-align: center; }

/* ---- phone: buttons become a row under the panel ---- */
@media (max-width: 720px) {
  .episode-reader { flex-direction: column; }
  .comic-reader { width: 100%; }
  .panel-sidebar {
    flex-direction: row; flex-wrap: wrap; width: 100%;
    min-width: 0; justify-content: center;
  }
  .panel-counter { width: 100%; }
  .reader-btn { flex: 1 1 auto; width: auto; }
}