.historia { max-width: 900px; font-size: 20px; }
.historia .screen { margin-top: 8px; }
.historia .intro { font-size: 1.08rem; max-width: 68ch; }
.historia .eyebrow { color: #4d6966; font-size: .92rem; font-weight: 900; letter-spacing: .035em; margin: 0 0 8px; }
.story-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.story-choice { display: flex; min-width: 0; min-height: 170px; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 20px; border: 3px solid #d7e5df; border-radius: 20px; background: #f4faf7; color: #203c38; font: inherit; font-weight: 900; text-align: center; cursor: pointer; }
.story-choice:hover, .story-choice:focus-visible { border-color: #3f8f8a; outline: 4px solid #f4b942; outline-offset: 2px; }
.story-choice .choice-emoji { font-size: 2.6rem; }
.scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0 24px; }
.scene-card { position: relative; display: flex; min-height: 180px; min-width: 0; align-items: center; justify-content: center; overflow: hidden; border: 3px solid #e4e4dd; border-radius: 20px; background: var(--scene-bg, #edf4ed); }
.scene-card .scene-emoji { font-size: clamp(3rem, 11vw, 6rem); line-height: 1.1; text-align: center; filter: drop-shadow(0 4px 3px #59431a22); }
.scene-card .scene-number { position: absolute; top: 10px; left: 12px; display: grid; place-items: center; min-width: 38px; min-height: 38px; border-radius: 50%; background: #fff; color: #303638; font-size: 1rem; font-weight: 900; }
.story-grid .scene-card { transition: transform .35s ease, opacity .35s ease, border-color .2s ease; }
.story-grid .scene-card.current { border-color: #c17b00; outline: 4px solid #f4b942; outline-offset: 2px; transform: scale(1.025); }
.scene-card.dimmed { opacity: .48; }
.scene-count { margin: 4px 0; font-weight: 800; color: #3f5f5b; }
.narration { min-height: 170px; margin: 20px 0; padding: 22px; border-radius: 18px; background: #fff8e7; border: 2px solid #ead9ad; text-align: center; }
.narration p { max-width: 38em; margin: 0 auto 18px; font-size: clamp(1.25rem, 3.5vw, 1.65rem); font-weight: 700; line-height: 1.55; }
.historia .btn { min-height: 60px; }
.historia .btn.big { min-height: 64px; }
.historia button:focus-visible, .historia a:focus-visible, .historia summary:focus-visible { outline: 4px solid #d99800; outline-offset: 4px; }
.save-grid { transition: transform .5s ease, opacity .6s ease; }
.save-grid.saving { transform: scale(.25) translateY(130px); opacity: 0; }
.save-grid .scene-card { min-height: 125px; }
.envelope { min-height: 65px; font-size: 3rem; opacity: 0; transform: scale(.7); transition: opacity .5s ease, transform .5s ease; }
.envelope.visible { opacity: 1; transform: scale(1); }
.feedback { margin: 14px 0; }
.answer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.answer-option { min-width: 0; min-height: 68px; padding: 14px 16px; border: 3px solid #ded9cf; border-radius: 16px; background: #fff; color: #292a30; font: inherit; font-weight: 800; line-height: 1.35; text-align: left; cursor: pointer; }
.answer-option:hover { border-color: #3f8f8a; background: #f2faf8; }
.answer-option[aria-pressed="true"] { border-color: #236b66; background: #e2f3ed; box-shadow: inset 0 0 0 2px #236b66; }
.answer-option.right, .answer-option.right:disabled { border-color: var(--ok); background: #e6f5ea; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ok); }
.answer-option.wrong, .answer-option.wrong:disabled { border-color: var(--bad); background: #fbe9e6; color: var(--ink); box-shadow: inset 0 0 0 1px var(--bad); }
.answer-option:disabled { cursor: default; }
.option-emoji { display: inline-block; min-width: 1.7em; margin-right: 5px; font-size: 1.3em; vertical-align: middle; }
.question-actions { margin-top: 12px; }
.order-list { display: grid; gap: 10px; margin: 22px 0; padding-left: 2.4em; }
.order-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 2px solid var(--line); border-radius: 14px; background: #fff; }
.order-item > span:first-child { min-width: 0; }
.order-controls { display: flex; flex: 0 0 auto; gap: 8px; }
.order-move { min-width: 56px; min-height: 56px; border: 2px solid #357a76; border-radius: 12px; background: #e6f5f1; color: #183b37; font: inherit; font-weight: 900; cursor: pointer; }
.order-move:disabled { opacity: .45; cursor: default; }
.order-move:focus-visible { outline: 4px solid #d99800; outline-offset: 3px; }
.order-actions { margin-top: 12px; }
.time-result { font-weight: 900; color: #365c56; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.historia table.results { min-width: 600px; font-size: .95rem; }
.results-actions { margin-top: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 650px) {
  .story-choices { grid-template-columns: 1fr; }
  .story-choice { min-height: 96px; flex-direction: row; }
}
@media (max-width: 480px) {
  .historia { font-size: 20px; padding-left: 12px; padding-right: 12px; }
  .historia .card { padding: 18px 14px; }
  .scene-grid { gap: 9px; }
  .scene-card { min-height: 132px; border-width: 2px; }
  .scene-card .scene-emoji { font-size: clamp(2.8rem, 16vw, 4.3rem); }
  .scene-card .scene-number { top: 6px; left: 6px; min-width: 30px; min-height: 30px; }
  .answer-options { grid-template-columns: 1fr; gap: 9px; }
  .answer-option { min-height: 60px; }
  .order-list { padding-left: 1.8em; }
  .order-item { align-items: flex-start; padding: 10px; gap: 8px; }
  .order-controls { flex-direction: column; }
  .narration { padding: 18px 13px; }
  .historia .row > .btn { width: 100%; }
}