/* Norse mythology lesson. All rules scoped under .nrs-* */
.nrs-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* 0. the names fall into the book */
.nrs-names { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 330px; }
.nrs-name { padding: 5px 12px; border-radius: 999px; background: rgba(252,192,80,.14); border: 1px solid rgba(252,192,80,.55); color: var(--gold); font: 800 15px var(--serif); }
.nrs-book { position: relative; margin: 0; width: 100%; max-width: 320px; }
.nrs-book img { display: block; width: 100%; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.5); transition: box-shadow .6s; }
.nrs-book.lit img { box-shadow: 0 0 0 2px rgba(252,192,80,.6), 0 0 34px rgba(252,192,80,.45); }
.nrs-book figcaption, .nrs-pic figcaption { margin-top: 6px; font: 600 12.5px var(--sans); color: var(--dim); text-align: center; }

/* 1 and 2. the timeline */
.nrs-frame { width: 100%; display: flex; justify-content: center; min-height: 170px; }
.nrs-pic { margin: 0; display: flex; flex-direction: column; align-items: center; animation: nrsIn .45s ease-out both; }
.nrs-pic img { display: block; max-width: 100%; max-height: 170px; width: auto; border-radius: 10px; }
.nrs-sc > .nrs-pic img { max-height: 230px; }
@keyframes nrsIn { from { opacity: 0; translate: 0 8px; } }
.nrs-line { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.nrs-l-bar { stroke: var(--line-strong); stroke-width: 4; stroke-linecap: round; }
.nrs-l-tick { stroke: var(--dim); stroke-width: 1.5; }
.nrs-l-yr { font: 600 12px var(--sans); fill: var(--dim); text-anchor: middle; }
.nrs-l-dot { fill: var(--gold); stroke: var(--bg); stroke-width: 3; }
.nrs-l-mk { opacity: 0; transition: opacity .4s; }
.nrs-l-mk circle { fill: var(--violet-bright); stroke: var(--bg); stroke-width: 2.5; }
.nrs-l-1000 circle { fill: #f0f0f0; }
.on-1000 .nrs-l-1000, .on-1220 .nrs-l-1220, .on-1270 .nrs-l-1270 { opacity: 1; }
.nrs-l-br { opacity: 0; transition: opacity .5s; }
.nrs-l-br path { fill: none; stroke: var(--gold); stroke-width: 2; }
.nrs-l-br text { font: 800 12.5px var(--sans); fill: var(--gold); text-anchor: middle; }
.on-br .nrs-l-br { opacity: 1; }
.nrs-tags { display: flex; gap: 10px; justify-content: center; }
.nrs-tags span { padding: 5px 10px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line-strong); font: 700 13px var(--sans); color: var(--text); }
.nrs-tags span:last-child { color: var(--violet-bright); }

/* 5. the fishing trip */
.nrs-shake img { animation: nrsShake .45s ease-in-out 2; }
@keyframes nrsShake { 25% { translate: -4px 2px; } 75% { translate: 4px -2px; } }

/* 6. the stone: hollow rings so the carving shows through */
.nrs-stone { position: relative; margin: 0; }
.nrs-stone img { display: block; height: min(420px, 48vh); width: auto; border-radius: 8px; }
.nrs-stone .spot i { background: transparent; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(10,14,26,.7), 0 0 10px rgba(0,0,0,.6); }
.nrs-stone .spot.right i { background: transparent; border-color: var(--mint); }
.nrs-stone .spot.wrong i { background: transparent; border-color: var(--red); }
.nrs-foot { position: absolute; left: 47%; top: 61%; width: 24%; height: 12%; border: 3px solid var(--gold); border-radius: 40%; box-shadow: 0 0 14px rgba(252,192,80,.7); opacity: 0; transition: opacity .4s; pointer-events: none; }
.nrs-found .nrs-foot { opacity: 1; }

/* 7. Ragnarok */
.nrs-full { position: relative; flex: 1; width: 100%; min-height: 240px; padding: 8px 16px 16px; display: flex; }
.nrs-world { display: block; width: 100%; flex: 1; min-height: 220px; border-radius: 22px; }

/* 8. two copies */
.nrs-page { display: flex; gap: 14px; justify-content: center; }
.nrs-copy { position: relative; width: 120px; height: 150px; border-radius: 6px 10px 10px 6px; background: linear-gradient(90deg, #b99a6b, #e4cfa4 18%, #d8bf90); box-shadow: 0 10px 22px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #3a2a18; }
.nrs-copy::before { content: ''; position: absolute; left: 18px; right: 14px; top: 18px; bottom: 18px; background: repeating-linear-gradient(#3a2a1833 0 2px, transparent 2px 9px); }
.nrs-copy b { position: relative; font: 800 16px var(--serif); background: #e4cfa4; padding: 0 6px; }
.nrs-copy span { position: relative; font: 700 12.5px var(--sans); background: #e4cfa4; padding: 0 6px; }
.nrs-copy i { position: absolute; bottom: -12px; right: -10px; padding: 4px 9px; border-radius: 999px; background: var(--gold); color: #2b1d05; font: 800 12.5px var(--sans); font-style: normal; box-shadow: 0 4px 12px rgba(0,0,0,.4); }

@media (max-height: 700px) {
  .nrs-frame { min-height: 140px; }
  .nrs-pic img { max-height: 140px; }
  .nrs-sc > .nrs-pic img { max-height: 190px; }
  .nrs-book { max-width: 280px; }
  .nrs-copy { height: 130px; }
}