/* The story screen (stage 2, plan B, task 5). Linked from index.html;
   only this screen's own rules go here. */
.story { display: grid; gap: 14px; }
.story-head { display: grid; gap: 6px; }
.story-title { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1.2; }
.story-sub { margin: 0; font-size: .8rem; letter-spacing: .2em; color: var(--muted); }
.story-prog { height: 8px; border-radius: 999px; background: #1b1e19; border: 1px solid var(--line); overflow: hidden; }
.story-prog-fill { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s ease; }
.story-words { display: flex; flex-wrap: wrap; gap: 6px; }
.story-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold); font-size: .85rem; font-weight: 600; }

.story-body { display: grid; gap: 4px; }
.story-p { margin: 0; padding: 8px 12px; border-left: 4px solid transparent; border-radius: 6px; font-size: 1.08rem; line-height: 1.55; }
.story-p b { color: var(--gold); }
.story-p.hit { border-left-color: var(--gold); background: #2a2416; }
.story-done { margin: 0 0 4px; color: var(--gold); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }

.story-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.story-row > button { min-width: 9rem; }
.story-check { display: grid; }
.story-q { font-weight: 600; }
.story-choice.right { border-color: #5BBF6A; background: #1f3322; opacity: 1; }
.story-choice.wrong { border-color: #D9534F; background: #3a1f1d; opacity: 1; }
.story-choice.right .choice-letter { background: #5BBF6A; color: #1b1e19; }
.story-choice.wrong .choice-letter { background: #D9534F; color: #1b1e19; }

.story-result:empty { display: none; }
.story-why { margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--warn); border-radius: 6px; background: #1b1e19; }
.story-why p { margin: 0; line-height: 1.45; }
.story-why .story-where { margin-top: 6px; color: var(--gold); font-weight: 600; }
.story-yes { margin: 14px 0 0; text-align: center; color: #5BBF6A; font-weight: 700; }
.story-tell { margin: 4px 0 0; text-align: center; color: var(--muted); }

.story-foot { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
.story-msg .story-row { justify-content: flex-start; }

@media (max-width: 420px) {
  .story { padding: 14px; }
  .story-title { font-size: 1.3rem; }
  .story-p { padding: 6px 8px; font-size: 1rem; }
  .story-row > button { flex: 1 1 100%; }
}