/* comic.css — styles specific to comic.html. css/style.css supplies the
   shared header/theme-variable/credits-panel/attribution-block rules; this
   file only adds what's unique to the comic-creator page. */

#back-to-map {
  display: inline-block;
  margin: 6px 0 0;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
}
#back-to-map:hover { text-decoration: underline; }

#no-path-message {
  margin: 16px 20px;
  padding: 14px 16px;
  border: 1px dashed var(--panel-border);
  border-radius: 8px;
  color: var(--muted);
}

#comic-setup {
  margin: 12px 20px;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mode-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#mode-fieldset legend {
  font-weight: 600;
  padding: 0 0 4px;
}

#mode-fieldset label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.mode-disabled { color: var(--muted); }

.soon-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid var(--muted);
  border-radius: 999px;
  padding: 1px 8px;
}

#autogen-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

#autogen-options label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}

#build-comic-btn {
  background: var(--accent);
  color: var(--paper);
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.9rem;
  cursor: pointer;
  margin: 4px 0 0;
}

#generate-status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1em;
}

#manual-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manual-hint {
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 4px 0;
}

#manual-panel-editors {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manual-editor-row {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}

.manual-editor-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 6px;
  background: #ccc;
}

.manual-editor-fields {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.manual-editor-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.manual-editor-controls select {
  font-size: 0.8rem;
}

.manual-caption-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 6px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

.manual-feel-input {
  width: 100%;
  font-size: 0.8rem;
  font-style: italic;
  padding: 4px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

/* ---- Panels: each one is a fixed-aspect-ratio "page" - background image
   (cropped + filtered), a character bounding-box placeholder, and a
   typewriter textbox, stacked with CSS position rather than canvas
   compositing so the text stays real DOM text (selectable, accessible,
   animatable with plain JS/CSS - see js/comic.js's typewriter()). ---- */
#comic-panels {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 20px 20px;
}

.comic-panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.comic-panel img.panel-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comic-panel .panel-index {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Shown when stylizePhoto() fell back to css-fallback (WebGL unavailable
   this session) — see js/comic.js buildPanel()/buildVNPanel() and the
   changelog at the top of js/stylize.js. Visible on purpose: a silently
   downgraded panel next to fully-stylized ones would read as a bug. */
.comic-panel[data-stylize-fallback="true"]::after {
  content: "basic style (WebGL unavailable)";
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Character bounding-box placeholder - swap this out for real character
   art later; positioning/sizing logic lives in js/comic.js's
   renderCharacterPlaceholder() so it's one place to change. */
.character-sprite {
  position: absolute;
  bottom: 14%;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  opacity: 0;
  animation: character-fade-in 0.6s ease-out forwards;
}

/* One-shot entrance fade (was an infinite loop that spent most of every
   cycle at opacity 0 - fine for a placeholder box, but made the real
   character art read as "not showing up"). */
@keyframes character-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Outgoing panel's character, applied by showPanelAt() in js/comic.js
   just before the panel is removed on "next" - see CHARACTER_TRANSITION_MS
   there, which is how long this animation is given to finish before the
   removal actually happens, so the fade-out is visible instead of the
   panel just vanishing. */
.character-sprite.leaving {
  animation: character-fade-out 0.35s ease-in forwards;
}

@keyframes character-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .character-sprite {
    animation: none;
    opacity: 1;
  }
  .character-sprite.leaving {
    animation: none;
    opacity: 0;
  }
}

/* Kitsch sticker caption card: a floating rounded card instead of the old
   full-width dark gradient scrim, in W&M green/gold, per request - applies
   only to the comic caption, not the rest of the app's chrome. */
.comic-textbox {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 12px 16px 14px;
  background: #fdfaf3;
  color: #183028;
  border: 3px solid #004e38;
  border-radius: 18px;
  box-shadow: 4px 4px 0 #fdb714;
  font-family: "Lilita One", -apple-system, sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  min-height: 3.2em;
}

.comic-textbox .feel-line {
  display: block;
  margin-top: 4px;
  font-family: -apple-system, sans-serif;
  font-style: italic;
  font-size: 0.78rem;
  color: #4b5f57;
  opacity: 0.9;
}

.comic-textbox .caption-cursor {
  display: inline-block;
  width: 0.5em;
  animation: comic-caret-blink 0.9s steps(1) infinite;
}

@keyframes comic-caret-blink {
  50% { opacity: 0; }
}

/* ---- Save & Share bar: reuses the .attribution-copy-header button look
   from css/style.css (same border/pill/accent-color styling as the
   "Copy" button on the credits panel) rather than inventing a new one. ---- */
#save-share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 20px 20px;
  padding: 12px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}

#save-share-bar button {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.8rem;
  cursor: pointer;
}

#save-share-bar button:hover {
  background: var(--accent);
  color: var(--paper);
}

#save-share-status {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

body[data-page="viewer"] #save-share-bar { display: none; }

/* ---- Visual-novel presentation (comic-view.html only): one full-frame
   panel on screen at a time, click-through dialogue, choice buttons - see
   presentVisualNovel()/buildVNPanel() in js/comic.js. Only #comic-panels
   switches layout (via the .comic-panels--vn modifier class); the strip
   view used by comic.html's editor is untouched.

   The whole page is a single non-scrolling stage (see body[data-page=
   "viewer"] in css/style.css): #comic-main fills the viewport and centers
   one panel at a time. Every panel shares the SAME aspect ratio - the
   recipe's chosen ratio, matching the editor's preview - not each photo's
   own natural shape; .vn-panel--landscape/--portrait (set in
   buildVNPanel()) just cap width vs. height differently so a wide ratio
   reads as a wide frame and a tall ratio reads as a tall frame, both
   always fitting fully inside the viewport with no scrolling. Each
   panel's own background-color (its sampled median color, set inline by
   buildVNPanel()) shows through behind any rounding gaps at the frame's
   edges. ---- */
#comic-panels.comic-panels--vn {
  display: contents; /* #comic-main (style.css) does the centering; this just lets .vn-panel act as a direct flex child of it */
}

#comic-panels.comic-panels--vn .comic-panel.vn-panel {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  animation: vn-panel-in 0.2s ease-out;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* Wide selected ratio (16:9, 4:3, 1:1...): frame is as wide as the
   viewport allows, height follows from the recipe's chosen ratio (set as
   --vn-ratio inline by buildVNPanel(), same for every panel). */
.vn-panel--landscape {
  width: min(94vw, 94dvh * var(--vn-ratio, 1.5), 1100px);
  aspect-ratio: var(--vn-ratio, 16 / 9);
  max-height: 90dvh;
}

/* Tall selected ratio (9:16) - or a landscape viewport that's short/wide,
   i.e. most phones on their side: frame is as tall as the viewport allows
   instead, width follows from the same fixed ratio. */
.vn-panel--portrait {
  height: min(90dvh, 90vw / var(--vn-ratio, 0.75), 1100px);
  aspect-ratio: var(--vn-ratio, 3 / 4);
  max-width: 96vw;
}

@media (orientation: landscape) and (max-height: 500px) {
  /* Short landscape phone viewport (rotated phone): cap by height more
     aggressively so a portrait photo's frame can't push past the top/
     bottom edges even with on-screen browser chrome eating into dvh. */
  .vn-panel--portrait { height: min(86dvh, 90vw / var(--vn-ratio, 0.75), 1100px); }
}

.vn-panel img.panel-bg {
  display: block;
  width: 100%;
  height: 100%;
  /* The image is already cropped to this exact ratio by cropToAspect() in
     buildVNPanel(), same as the editor - cover (not contain) so it fills
     the frame edge-to-edge instead of leaving letterbox bars around an
     image that no longer needs them. */
  object-fit: cover;
}

@keyframes vn-panel-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Textbox is capped well short of the panel's own height so even a long
   caption can never grow the page past the viewport (the outer page is
   non-scrolling - see body[data-page="viewer"] in css/style.css); the
   overflow-y is a safety net for a pathologically long caption, not the
   expected case. */
#comic-panels.comic-panels--vn .comic-textbox {
  font-size: 1.05rem;
  max-height: 34%;
  overflow-y: auto;
  padding: 16px 18px 20px;
  background: rgba(253, 250, 243, 0.97);
}

/* Nested inside .comic-textbox (see showAdvanceUI() in js/comic.js) rather
   than floating over the panel image, so it reads as part of the textbox
   instead of a separate overlay. position: absolute here is relative to
   .comic-textbox (itself position: absolute), not the panel. */
.vn-advance-hint {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 0.8rem;
  color: #4b5f57;
  opacity: 0.85;
  animation: vn-hint-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vn-hint-pulse {
  50% { opacity: 0.4; }
}

.vn-choices {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vn-choice-btn {
  text-align: left;
  border: 1px solid rgba(253, 183, 20, 0.7);
  background: rgba(0, 0, 0, 0.55);
  color: #fdfaf3;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}

.vn-choice-btn:hover,
.vn-choice-btn:focus-visible {
  background: rgba(0, 0, 0, 0.8);
  border-color: #fdb714;
}

/* ---- End-of-story credits screen: the VN's final "page" (see
   buildCreditsScreen() in js/comic.js), styled as its own panel rather
   than the raw #credits-panel look used on comic.html - dark card, same
   width cap as a landscape photo panel, scrolls internally if the credit
   list is long rather than growing past the (non-scrolling) viewport. ---- */
.vn-credits-screen {
  width: min(94vw, 640px);
  height: min(90dvh, 780px);
  max-height: 90dvh;
  background: #14110f;
  color: #fdfaf3;
  cursor: default;
  display: flex;
}

.vn-credits-inner {
  width: 100%;
  padding: 28px 24px;
  overflow-y: auto;
}

.vn-credits-inner strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.vn-credits-inner ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.6;
}

.vn-credits-inner a { color: #fdb714; }

.vn-credits-nav {
  margin: 0 0 16px;
  font-weight: bold;
}

.vn-credits-inner .attribution-copy-block {
  margin-top: 16px;
  border-color: rgba(253, 250, 243, 0.25);
}

.vn-credits-inner .attribution-copy-header {
  background: rgba(255, 255, 255, 0.06);
}

.vn-credits-inner #attribution-plaintext {
  color: #fdfaf3;
}