/* ═══ Imahe — Story Studio (STORY 🎬) ═══ */

/* mobile: the spread stacks as one column */
@media (max-width: 1023.98px) {
  .story-spread { display: flex; flex-direction: column; gap: 14px; }
}

.shake-now { animation: shake 0.35s; }

/* step number stamp */
.step-no {
  width: 20px; height: 20px; flex: none;
  background: var(--ink); color: var(--paper);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 12px;
}

/* ─── Step 1: one flat, paginated grid ─── */
/* Ten to a page. The old accordion of generation sets meant scrolling past
   everything you had ever made to reach a picture from last week. */
.pick-tools { gap: 8px; flex-wrap: wrap; }
.pick-all, .pick-clear, .pick-nav { flex: none; font-size: 11px; padding: 4px 10px; box-shadow: none; }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 2px dashed var(--ink-line); padding-top: 9px;
}
.pick-page { color: var(--newsprint-mute); letter-spacing: 0.08em; }
.pick-nav:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

/* pickable cell + ink ✓ stamp + sequence badge */
.set-cell {
  position: relative; aspect-ratio: 1; padding: 0;
  border: 2px solid var(--ink-line); border-radius: 10px;
  overflow: hidden; background: var(--paper-sunk); cursor: pointer;
}
.set-cell img { width: 100%; height: 100%; object-fit: cover; }
.set-cell.is-picked { border-color: var(--riso-pink); box-shadow: 0 0 0 2px var(--riso-pink); }
.cell-stamp {
  position: absolute; right: 4px; bottom: 4px;
  width: 24px; height: 24px;
  background: var(--ink); color: #fff;
  border: 2px solid #fff; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 15px; transform: rotate(-8deg);
}
.set-cell.is-picked .cell-stamp { display: flex; animation: pow 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.cell-seq {
  position: absolute; top: 4px; left: 4px;
  min-width: 20px; height: 20px; padding: 0 4px;
  background: var(--credit-gold); border: 2px solid var(--ink-line);
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center;
}
.set-cell.is-picked .cell-seq { display: inline-flex; }
/* which studio drew it — the flat grid mixes every feature together */
.cell-feat {
  position: absolute; right: 4px; top: 4px;
  font-size: 12px; line-height: 1;
  background: var(--paper); border: 1.5px solid var(--ink-line);
  border-radius: 6px; padding: 1px 3px;
}

/* ─── selected filmstrip preview (mobile) ─── */
.filmstrip-picks {
  position: relative;
  background: var(--ink);
  border: var(--border-ink); border-radius: 12px;
  padding: 16px 10px;
}
.filmstrip-picks::before, .filmstrip-picks::after {
  content: ''; position: absolute; left: 8px; right: 8px; height: 6px;
  background-image: radial-gradient(var(--paper) 1.6px, transparent 1.9px);
  background-size: 13px 6px; background-position: center;
  opacity: 0.85; pointer-events: none;
}
.filmstrip-picks::before { top: 5px; }
.filmstrip-picks::after { bottom: 5px; }
.strip-frames { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.strip-frame {
  position: relative; flex: none;
  width: 64px; height: 64px; padding: 0;
  border: 2px solid var(--paper-2); border-radius: 6px;
  overflow: hidden; background: var(--ink-soft); cursor: pointer;
}
.strip-frame img { width: 100%; height: 100%; object-fit: cover; }
.strip-frame .frame-no {
  position: absolute; left: 3px; bottom: 3px;
  min-width: 18px; height: 18px; padding: 0 3px;
  background: var(--credit-gold); border: 1.5px solid var(--ink-line);
  border-radius: 6px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.strip-frame .frame-x {
  position: absolute; right: 2px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 9px; line-height: 16px; text-align: center;
  opacity: 0; transition: opacity 0.12s;
}
.strip-frame:hover .frame-x, .strip-frame:focus-visible .frame-x { opacity: 1; }
@media (hover: none) { .strip-frame .frame-x { opacity: 1; } }
.strip-empty { color: var(--paper-sunk); font-family: var(--f-head); font-size: 12px; text-align: center; padding: 12px 0; }

/* ─── Step 2: mode flip cards ─── */
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; perspective: 700px; }
.mode-card {
  border: var(--border-ink); border-radius: var(--radius);
  background: var(--speech-fill);
  box-shadow: var(--shadow-hard);
  padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.12s, background 0.12s;
}
.mode-card .mc-emoji { font-size: 30px; }
.mode-card .mc-label { font-size: 19px; letter-spacing: 0.03em; }
.mode-card .mc-sub { font-family: var(--f-head); font-size: 11px; color: var(--newsprint-mute); }
.mode-card.is-on { background: var(--riso-pink); color: #fff; transform: rotate(-1deg) scale(1.02); }
.mode-card--song.is-on { background: var(--riso-blue); transform: rotate(1deg) scale(1.02); }
.mode-card.is-on .mc-sub { color: rgba(255, 255, 255, 0.85); }
.mode-card.flip-in { animation: mode-flip 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes mode-flip {
  0% { transform: rotateY(88deg); }
  100% { transform: rotateY(0); }
}
.mode-blurb { margin-top: 2px; }
.mood-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ─── generate bar (lives inside .wiz-nav, which is the sticky ink frame) ─── */
.story-genbar { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.story-genbar .genbar-count { flex: none; }
.story-genbar .bubble-btn { flex: 1; min-width: 0; }
.story-genbar .bubble-btn::after { display: none; } /* no bubble tail inside the bar */
.story-genbar .bubble-btn .cost-badge { margin-left: 2px; }
/* On a phone the nav holds BACK + the frame count + the action, and the count
   pushed "BUILD IT!" onto two lines. The review step already states it. */
@media (max-width: 1023.98px) {
  .wiz-nav .genbar-count { display: none; }
}

/* ─── progress panel ─── */
.story-progress .speech { font-size: 14px; }
.stg-row { display: flex; align-items: center; gap: 6px; }
.stg-chip {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 2px solid var(--ink-line); border-radius: 999px;
  background: var(--paper-sunk);
  padding: 4px 6px;
  font-family: var(--f-head); font-weight: 700; font-size: 11px;
  color: var(--newsprint-mute);
  opacity: 0.55; transition: opacity 0.2s, background 0.2s, transform 0.2s;
}
.stg-chip .stg-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-chip.is-done { opacity: 1; background: var(--riso-teal); color: #fff; }
.stg-chip.is-on {
  opacity: 1; background: var(--riso-blue); color: #fff;
  transform: scale(1.04); box-shadow: 2px 2px 0 var(--panel-shadow);
}
.prog-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.prog-thumbs img {
  width: 42px; height: 42px; object-fit: cover;
  border: 2px solid var(--ink-line); border-radius: 8px;
  animation: inky-bob 1.6s ease-in-out infinite;
}

/* ─── mga kwento mo ─── */
.stories-list { gap: 10px; }
.story-row {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--ink-line); border-radius: 12px;
  background: var(--speech-fill);
  padding: 8px 10px;
  box-shadow: 2px 2px 0 var(--panel-shadow);
}
.story-row:nth-child(odd) { transform: rotate(-0.4deg); }
.story-row:nth-child(even) { transform: rotate(0.4deg); }
.story-row.is-playable { cursor: pointer; }
.story-row.is-playable:hover { background: var(--paper-2); transform: rotate(0) scale(1.01); }
.sr-cover {
  width: 52px; height: 52px; flex: none;
  border: 2px solid var(--ink-line); border-radius: 8px;
  object-fit: cover; background: var(--paper-sunk);
}
.sr-cover--ph { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.sr-info { min-width: 0; }
.sr-title {
  font-family: var(--f-head); font-weight: 700; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-err { color: var(--danger-ink); }
.st-chip {
  flex: none;
  font-family: var(--f-display); font-size: 13px;
  padding: 3px 10px;
  border: 2px solid var(--ink-line); border-radius: 999px;
}
.st-chip--running {
  background: repeating-linear-gradient(-45deg, var(--paper-sunk), var(--paper-sunk) 5px, var(--halftone) 5px, var(--halftone) 10px);
  background-size: 200% 200%;
  animation: hatch-drift 1.2s linear infinite;
}
.st-chip--done { background: var(--riso-teal); color: #fff; }
.st-chip--failed { background: var(--riso-pink); color: #fff; }
.sr-x {
  flex: none; width: 24px; height: 24px;
  border: 2px solid var(--ink-line); border-radius: 50%;
  background: transparent; color: var(--ink-soft);
  font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sr-x:hover { background: var(--danger); border-color: var(--danger-ink); color: #fff; }

/* ─── desktop: two-page spread — picker left, timeline right ─── */
.timeline-panel { display: none; }

@media (min-width: 1024px) {
  .filmstrip-picks { display: none; }
  .timeline-panel { display: flex; }
  .pick-grid { grid-template-columns: repeat(5, 1fr); } /* 10 = two clean rows */

  .tl-list { display: flex; flex-direction: column; gap: 18px; position: relative; padding: 4px 0 4px 6px; }
  .tl-list::before {
    content: ''; position: absolute; left: 19px; top: 8px; bottom: 8px;
    border-left: 3px dotted var(--ink-line); opacity: 0.35;
  }
  .tl-frame { display: flex; gap: 14px; align-items: flex-start; position: relative; }
  .tl-no {
    width: 28px; height: 28px; flex: none; z-index: 1;
    background: var(--riso-yellow); border: 2px solid var(--ink-line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
  }
  .tl-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .tl-body img {
    width: 170px; border: var(--border-ink); border-radius: 10px;
    box-shadow: var(--shadow-hard); transform: rotate(-1deg);
    animation: develop 0.5s ease-out both;
  }
  .tl-frame--r .tl-body img { transform: rotate(1.2deg); }
  .tl-when {
    font-size: 11px; color: var(--newsprint-mute); letter-spacing: 0.08em;
  }
  .tl-empty { padding: 26px 0; }
}

/* ─── video render controls (under a finished story row) ─── */
.story-entry { display: flex; flex-direction: column; }
.vr-toggle {
  flex: none; font-size: 11px; padding: 4px 10px; box-shadow: none;
  white-space: nowrap;
}
.vr-badge {
  flex: none; font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  background: var(--riso-teal); color: #fff;
  border: 2px solid var(--ink-line); border-radius: 6px;
  padding: 1px 5px; transform: rotate(-3deg);
}
.vr-box {
  border: 2px dashed var(--riso-blue); border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--paper-2);
  margin: -6px 10px 0; padding: 12px;
  animation: page-in 0.22s ease-out both;
}
.vr-box .mood-row { margin: 8px 0 10px; }
.vr-progress .filmstrip-progress { margin-top: 8px; }

/* ─── per-picture script + hold timing (STORY-TELLING) ─── */
.script-rows { gap: 10px; }
.script-row {
  border: 2px solid var(--ink-line); border-radius: 12px;
  background: var(--speech-fill);
  box-shadow: 2px 2px 0 var(--panel-shadow);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 7px;
}
.sr-head { display: flex; align-items: center; gap: 9px; }
.sr-thumb {
  width: 46px; height: 46px; flex: none; object-fit: cover;
  border: 2px solid var(--ink-line); border-radius: 8px;
  background: var(--paper-sunk);
}
.sr-meta { display: flex; align-items: baseline; gap: 8px; }
.sr-no {
  width: 20px; height: 20px; flex: none;
  background: var(--ink); color: var(--paper); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.sr-at { font-size: 12px; color: var(--newsprint-mute); letter-spacing: 0.06em; }
.script-row .sr-line { min-height: 52px; }
.sr-hold { display: flex; align-items: center; gap: 7px; }
.sr-hold .sr-secs { width: 76px; flex: none; text-align: center; }
.script-total { padding: 0 2px; }

/* ─── style note: what this mode/theme actually sounds like ─── */
.style-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--paper-sunk);
  border: 2.5px solid var(--riso-blue); border-radius: var(--radius);
  padding: 9px 11px;
}
.style-note .sn-tag {
  flex: 0 0 auto; font-size: 14px; letter-spacing: 0.05em;
  background: var(--riso-blue); color: #fff;
  border: 2px solid var(--ink-line); border-radius: 8px;
  padding: 2px 9px;
}
.style-note--tell { border-color: var(--riso-pink); }
.style-note--tell .sn-tag { background: var(--riso-pink); }
.theme-block, .mood-block, .lang-block { gap: 6px; }