/* Whose tale is this? (reading, grades 3–5): Sora's tale card beside her three-slot tale book, inside the 520×268 field.
   Same two columns and paper look as the story bag (story.css). Text on a fill keeps 4.5:1 or better:
   ink on paper, lantern and reading blue; paper on the finish green. */
.tales-field { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 140px; gap: 8px; width: 100%; height: 100%; box-sizing: border-box; font-family: var(--font-read); color: var(--ink); }

.tales-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; padding: 7px 10px 8px; box-sizing: border-box;
  background: none; border: 3px solid transparent; border-left: 10px solid transparent;
  overflow-x: hidden; overflow-y: auto; transition: background-color 200ms;
}
.tales-card-cover {
  position: absolute; inset: 0 148px 0 0; z-index: -1; pointer-events: none;
  border: 1px solid var(--ink); background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink), inset 1px 1px 0 var(--white), inset -2px -2px 0 #d5bd91, inset -3px -4px 0 var(--paper-shade), inset 0 -5px 0 var(--white);
}
/* The blue binding stays in the original 10px margin; the page never loses text width. */
.tales-card-cover::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; pointer-events: none;
  background: var(--reading); box-shadow: inset 2px 1px 0 #acd9ff, inset -2px -3px 0 #3977b8, 1px 0 0 var(--ink);
}
.tales-card-cover::after {
  content: ''; position: absolute; left: 3px; top: 6px; width: 2px; height: 2px; pointer-events: none;
  background: var(--paper); box-shadow: 0 6px 0 var(--paper), 0 238px 0 var(--paper), 0 244px 0 var(--paper);
}
.tales-head { margin: 0; font-family: var(--font-pixel); font-size: var(--text-small); line-height: 1.2; color: var(--ink-soft); }
.tales-card--done .tales-head { color: var(--finish); }

/* The name falls back onto the card once the proof is found. */
.tales-named { display: flex; flex: none; align-items: center; gap: 10px; animation: tales-drop 320ms ease-out; }
.tales-named[hidden] { display: none; }
.tales-named__pic { display: block; flex: none; width: 32px; height: 32px; }
.tales-named__name { font-family: var(--font-pixel); font-size: var(--text-body); line-height: 1.1; color: var(--ink); }
@keyframes tales-drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

.tales-lines { display: flex; flex: none; flex-direction: column; gap: 4px; }
.tales-line {
  --line-light: var(--white); --line-shade: var(--paper-shade);
  position: relative; isolation: isolate;
  display: flex; flex: none; align-items: flex-start; gap: 6px; width: 100%; margin: 0; padding: 3px 6px 3px 3px; box-sizing: border-box;
  background: var(--paper); border: 2px solid transparent; border-radius: 0; box-shadow: none;
  font: inherit; font-size: var(--text-field); line-height: 1.2; color: var(--ink); text-align: left; cursor: pointer;
  transition: background-color 150ms;
}
.tales-line::before {
  content: ''; position: absolute; inset: -2px; pointer-events: none;
  border: 1px solid var(--ink); box-shadow: inset 1px 1px 0 var(--line-light), inset -1px -2px 0 var(--line-shade);
}
.tales-line[hidden] { display: none; }
.tales-line:hover { background: var(--paper-shade); }
.tales-line:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; box-shadow: none; }
.tales-line__tag {
  position: relative;
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 24px; height: 24px; padding: 0 3px; box-sizing: border-box;
  font-family: var(--font-pixel); font-size: var(--text-small); line-height: 1; color: var(--ink); background: var(--reading); border: 2px solid transparent;
}
.tales-line__tag::before {
  content: ''; position: absolute; inset: -2px; pointer-events: none;
  border: 1px solid var(--ink); box-shadow: inset 1px 1px 0 #acd9ff, inset -1px -2px 0 #3977b8;
}
.tales-line__who { display: none; }
.tales-line__text { min-width: 0; overflow-wrap: break-word; }

/* Proving: the lines become choices (lantern fill, ink ring). */
.tales-card--prove .tales-line { --line-light: #ffe69a; --line-shade: #c28b2c; background: var(--lantern); border-color: transparent; }
.tales-card--prove .tales-line:hover { background: #ffd877; }

/* The proof line, once found: finish green with a check after the number. */
.tales-line--proof, .tales-line--proof:hover { --line-light: var(--finish-light); --line-shade: var(--finish-shade); background: var(--finish); border-color: transparent; color: var(--paper); }
.tales-line--proof .tales-line__tag::after { content: '✓'; }

/* All three named: the message centered, then one row per tale with its neighbor (tap to reread). */
.tales-card--ready { background: var(--paper-shade); background-clip: padding-box; justify-content: center; }
.tales-card--ready .tales-head { font-size: calc(var(--text-body) * 1.1); color: var(--ink); text-align: center; }
.tales-line--named { align-items: center; }
.tales-line--named .tales-line__who { display: block; flex: none; width: 32px; height: 32px; }
.tales-line--named .tales-line__text { font-weight: 700; }

/* Bigger words: three 44-character lines wrap to two rows each; number tags keep room for the small-text token. */
.large-text .tales-card { gap: 3px; padding-top: 5px; padding-bottom: 5px; }
.large-text .tales-lines { gap: 2px; }
.large-text .tales-line { padding-top: 1px; padding-bottom: 1px; line-height: 1.15; }
.large-text .tales-line__tag { min-width: 24px; height: 24px; padding: 0 2px; font-size: var(--text-small); }

/* Sora's tale book: a wood frame with three slots that fill in deck order. */
.tales-book { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 4px; min-height: 0; padding: 6px; box-sizing: border-box; background: none; border: 3px solid transparent; box-shadow: 4px 4px 0 var(--ink); }
.tales-book::before {
  content: ''; position: absolute; inset: -3px; z-index: -1; pointer-events: none;
  border: 1px solid var(--ink); background: var(--wood);
  box-shadow: inset 2px 2px 0 #dca372, inset -2px -4px 0 #885036;
}
.tales-book::after {
  content: ''; position: absolute; left: 0; top: 1px; width: 1px; height: 2px; pointer-events: none;
  background: var(--ink); box-shadow: 132px 0 0 var(--ink), 0 252px 0 var(--ink), 132px 252px 0 var(--ink), 2px 56px 0 #885036, 2px 58px 0 #885036, 130px 148px 0 #dca372;
}
.tales-book__title { position: relative; margin: 0; padding: 1px 4px; font-family: var(--font-pixel); font-size: var(--text-small); line-height: 1.2; color: var(--ink); background: var(--paper); border: 2px solid transparent; text-align: center; }
.tales-book__title::before {
  content: ''; position: absolute; inset: -2px; pointer-events: none; border: 1px solid var(--ink);
  box-shadow: inset 1px 1px 0 var(--white), inset -1px -2px 0 var(--paper-shade);
}
.tales-slot { position: relative; isolation: isolate; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3px; margin: 0; padding: 0; font: inherit; color: inherit; background: var(--paper-shade); border: 2px dashed transparent; border-radius: 0; cursor: default; transition: background-color 200ms; }
.tales-slot::before {
  content: ''; position: absolute; inset: -2px; pointer-events: none;
  border: 1px solid var(--ink); box-shadow: inset 1px 1px 0 var(--paper), inset -1px -2px 0 #d5bd91, inset 0 -3px 0 var(--paper), inset 0 -4px 0 #d5bd91;
}
.tales-slot::after {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 5px; pointer-events: none;
  background: var(--ink-soft); box-shadow: inset 1px 1px 0 #777ca5, inset -1px -3px 0 var(--ink), 1px 0 0 var(--ink);
}
.tales-slot__pic { flex: none; }
.tales-slot__pic { display: block; width: 48px; height: 48px; }
.tales-slot__pic:empty { display: none; }
.tales-slot__name { font-size: var(--text-small); line-height: 1.1; color: var(--ink-soft); }
.tales-slot--filled { background: var(--paper); border-style: solid; border-color: transparent; cursor: pointer; }
.tales-slot--filled:hover { background: var(--white); }
.tales-slot[aria-pressed="true"] { outline: 2px solid var(--reading); outline-offset: -5px; }
.tales-slot:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.tales-slot--filled::after { background: var(--reading); box-shadow: inset 1px 1px 0 #acd9ff, inset -1px -3px 0 #3977b8, 1px 0 0 var(--ink); }
.tales-slot--filled .tales-slot__name { color: var(--ink); font-weight: 700; }

.calm .tales-card, .calm .tales-line, .calm .tales-slot { transition: none; }
.calm .tales-named { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .tales-card, .tales-line, .tales-slot { transition: none; }
  .tales-named { animation: none; }
}