/* Power Words and Hero Checks, as they look. SC-11 and SC-12.
 *
 * A Power Word has to say "tap me" without shouting over the sentence it
 * is sitting in. So it gets a soft gold underline and a slow breath of
 * light — enough that a seven-year-old's eye lands on it, not so much
 * that the paragraph becomes a fairground. Once he owns it the glow stops
 * and a small tick takes its place: the page remembers what he has done,
 * which is the whole reward.
 */

/* --- a word worth having ----------------------------------------------- */

.sc-powerword {
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 2px;
  background: linear-gradient(transparent 62%, rgba(255, 210, 31, .55) 62%);
  animation: sc-pw-breathe 2.8s ease-in-out infinite alternate;
}
.sc-powerword::after {
  content: '';
  position: absolute; left: 2px; right: 2px; bottom: -2px; height: 2px;
  background: var(--sc-yellow, #ffd21f);
  border-radius: 2px;
}

@keyframes sc-pw-breathe {
  from { box-shadow: 0 0 0 0 rgba(255, 210, 31, 0); }
  to   { box-shadow: 0 0 0 4px rgba(255, 210, 31, .32); }
}

/* FOUND: he has met it. The glow stops, because it is no longer asking
 * to be tapped, but nothing green appears — green is for owning, and a
 * page that hands out ticks for tapping is the thing being fixed here. */
.sc-powerword.is-found {
  animation: none;
  background: linear-gradient(transparent 62%, rgba(120, 130, 150, .3) 62%);
}
.sc-powerword.is-found::after { background: #7c8698; }
.sc-powerword.is-found::before {
  content: '\00B7';
  font-family: var(--font-ui, system-ui), sans-serif;
  font-weight: 800;
  font-size: .8em;
  color: #7c8698;
  margin-right: 2px;
}

/* OWNED: proved in the drill. This is the only tick on the site. */
.sc-powerword.is-owned {
  animation: none;
  background: linear-gradient(transparent 62%, rgba(46, 139, 87, .34) 62%);
}
.sc-powerword.is-owned::after { background: #2e8b57; }
.sc-powerword.is-owned::before {
  content: '\2713';
  font-family: var(--font-ui, system-ui), sans-serif;
  font-weight: 800;
  font-size: .62em;
  color: #2e8b57;
  margin-right: 2px;
}

/* the moment of collecting */
.sc-powerword.is-caught { animation: sc-pw-caught 640ms cubic-bezier(.2,1.5,.4,1); }
@keyframes sc-pw-caught {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-powerword, .sc-powerword.is-caught { animation: none; }
}

/* --- what the word means ------------------------------------------------
 * A card at the bottom of the screen, because that is where he is
 * already looking and because it must never cover the word he just
 * tapped. It says itself out loud at the same time; this is for reading
 * along with that. */

.word-card {
  position: fixed; left: 12px; right: 12px; z-index: 60;
  bottom: calc(150px + env(safe-area-inset-bottom));
  margin: 0 auto; max-width: 460px;
  padding: 14px 18px 16px;
  background: var(--sc-paper, #fdf6e3);
  border: 4px solid var(--sc-ink, #0b0b0e);
  border-radius: 18px;
  box-shadow: 0 10px 0 rgba(0,0,0,.35);
  transform: translateY(14px);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,1.2,.4,1);
  pointer-events: none;
}
.word-card.is-up { opacity: 1; transform: translateY(0); pointer-events: auto; }
.word-card[hidden] { display: none; }

.word-card h3 {
  margin: 0 0 4px;
  font-family: var(--font-display, sans-serif);
  font-size: 30px; letter-spacing: 1px; color: var(--sc-ink, #0b0b0e);
}
.word-card p {
  margin: 0;
  font-family: var(--font-balloon, sans-serif);
  font-size: 17px; line-height: 1.4; color: #2a2f38;
}
.word-card .word-new {
  display: inline-block; margin-left: 8px; vertical-align: 3px;
  padding: 2px 10px;
  background: var(--sc-yellow, #ffd21f);
  border: 3px solid var(--sc-ink, #0b0b0e); border-radius: 999px;
  font-family: var(--font-display, sans-serif); font-size: 14px; letter-spacing: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .word-card { transition: none; }
}

/* --- the Hero Check ----------------------------------------------------
 * One question, three answers, all of them big, and one go. A wrong
 * answer is amber rather than red and the way back in is a button that
 * reads the page to him again: the cost of being wrong is the lesson,
 * not a buzzer. Nothing here scolds, and nothing here is free. */

.hero-check {
  margin: 18px auto 0;
  width: min(100% - 8px, 640px);
  padding: 16px 18px 18px;
  background: #fff8e1;
  border: 4px dashed var(--sc-orange, #ef6c00);
  border-radius: 16px;
}
.hero-check__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-ui, sans-serif); font-weight: 800;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sc-orange, #ef6c00);
}
.hero-check__ask {
  margin: 0 0 14px;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(21px, 5vw, 27px); line-height: 1.15;
  color: var(--sc-ink, #0b0b0e);
}
.hero-check__options { display: grid; gap: 10px; }
.hero-check__opt {
  min-height: 56px; padding: 10px 16px;
  border: 4px solid var(--sc-ink, #0b0b0e); border-radius: 14px;
  background: #fff; color: var(--sc-ink, #0b0b0e);
  font-family: var(--font-display, sans-serif); font-size: 21px; letter-spacing: .5px;
  text-align: left; cursor: pointer;
  box-shadow: 0 5px 0 var(--sc-ink, #0b0b0e);
}
.hero-check__opt:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sc-ink, #0b0b0e); }
.hero-check__opt:focus-visible { outline: 4px solid var(--sc-yellow, #ffd21f); outline-offset: 3px; }
.hero-check__opt.is-right {
  background: #2e8b57; color: #fff;
  animation: sc-check-yes 520ms cubic-bezier(.2,1.4,.4,1);
}
/* a near miss steps back rather than being marked wrong */
.hero-check__opt.is-near { opacity: .45; }
/* the one he picked, when it was not the one. Amber, not red: this is a
 * "not that one", not a failure, and the difference is worth a colour. */
.hero-check__opt.is-wrong {
  background: #fff1d6; border-color: var(--sc-orange, #ef6c00);
  box-shadow: 0 5px 0 var(--sc-orange, #ef6c00);
  color: #8a4b00;
}
.hero-check__opt:disabled { cursor: default; }
.hero-check__opt:disabled:not(.is-right):not(.is-wrong):not(.is-answer) { opacity: .5; }
/* in the drill only: the word it actually was, shown after a miss */
.hero-check__opt.is-answer { background: #eaf7ee; border-color: #2e8b57; box-shadow: 0 5px 0 #2e8b57; }

.hero-check.is-locked { border-color: var(--sc-orange, #ef6c00); background: #fff6e8; }
.hero-check.is-locked .hero-check__options { opacity: .75; }

/* the way back in */
.hero-check__again {
  display: block; width: 100%; min-height: 56px; margin: 12px 0 0;
  padding: 10px 16px;
  border: 4px solid var(--sc-ink, #0b0b0e); border-radius: 14px;
  background: var(--sc-yellow, #ffd21f); color: var(--sc-ink, #0b0b0e);
  font-family: var(--font-display, sans-serif); font-size: 19px; letter-spacing: .5px;
  cursor: pointer; box-shadow: 0 5px 0 var(--sc-ink, #0b0b0e);
}
.hero-check__again:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sc-ink, #0b0b0e); }
.hero-check__again:focus-visible { outline: 4px solid var(--sc-orange, #ef6c00); outline-offset: 3px; }
.hero-check__again[hidden] { display: none; }

@keyframes sc-check-yes {
  0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); }
}

.hero-check__say {
  margin: 12px 0 0;
  font-family: var(--font-balloon, sans-serif); font-size: 16px; line-height: 1.4;
  color: #5a4a20;
}
.hero-check.is-done { border-style: solid; border-color: #2e8b57; background: #f0fbf3; }
.hero-check.is-done .hero-check__options { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-check__opt.is-right { animation: none; }
  .hero-check__opt:active { transform: none; }
}

/* --- the vault itself --------------------------------------------------- */

.vault {
  width: min(100% - 28px, var(--page-max, 820px));
  margin: 8px auto 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  list-style: none; padding: 0;
}
.vault li {
  padding: 12px 14px 14px;
  background: var(--sc-paper, #fdf6e3);
  border: 4px solid var(--sc-ink, #0b0b0e); border-radius: 14px;
  box-shadow: 0 5px 0 rgba(0,0,0,.3);
  cursor: pointer;
}
.vault li:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.vault h3 {
  margin: 0 0 4px;
  font-family: var(--font-display, sans-serif); font-size: 26px; letter-spacing: 1px;
  color: var(--sc-ink, #0b0b0e);
}
.vault p {
  margin: 0; font-family: var(--font-balloon, sans-serif);
  font-size: 15px; line-height: 1.35; color: #3a4048;
}
.vault-empty {
  width: min(100% - 28px, 560px); margin: 30px auto;
  text-align: center;
  font-family: var(--font-balloon, sans-serif); font-size: 17px; line-height: 1.5;
  color: var(--ui-fg, #14181f);
}
.vault-empty strong {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display, sans-serif); font-size: 26px; letter-spacing: 1px;
}

/* --- the drill, and the two numbers ---------------------------------------
 * The tally is the honest scoreboard: what he owns, and how far off the
 * rest is. Putting the gap on the screen is the point — a counter with
 * nothing behind it was the old bug. */

.vault-tally {
  width: min(100% - 28px, var(--page-max, 820px));
  margin: 4px auto 10px; text-align: center;
  font-family: var(--font-ui, sans-serif); font-weight: 700;
  font-size: 17px; color: var(--ui-fg, #14181f);
}
.vault-tally strong {
  font-family: var(--font-display, sans-serif); font-size: 30px;
  letter-spacing: 1px; color: #2e8b57; vertical-align: -2px; margin-right: 4px;
}
.vault-tally span { color: #7c8698; }

.vault-prove { display: block; margin: 0 auto 16px; }
.vault-soon {
  width: min(100% - 28px, 520px); margin: 0 auto 16px; text-align: center;
  font-family: var(--font-balloon, sans-serif); font-size: 16px; color: #5a6270;
}

.vault li { position: relative; padding-top: 26px; }
.vault-tag {
  position: absolute; top: 8px; right: 10px;
  padding: 2px 9px;
  border: 3px solid #7c8698; border-radius: 999px;
  background: #eef1f5; color: #55606f;
  font-family: var(--font-ui, sans-serif); font-weight: 800;
  font-size: 11px; letter-spacing: 1px;
}
.vault li.is-owned { background: #f0fbf3; border-color: #2e8b57; }
.vault li.is-owned .vault-tag { border-color: #2e8b57; background: #2e8b57; color: #fff; }

/* the question itself: the meaning is the big thing on the screen,
 * because the word is what he is being asked to supply */
.drill {
  width: min(100% - 28px, 620px); margin: 10px auto 0;
  padding: 18px 18px 20px;
  background: #fff8e1;
  border: 4px solid var(--sc-orange, #ef6c00); border-radius: 18px;
  box-shadow: 0 8px 0 rgba(0,0,0,.25);
}
.drill__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-ui, sans-serif); font-weight: 800;
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--sc-orange, #ef6c00);
}
.drill__ask {
  margin: 0 0 16px;
  font-family: var(--font-balloon, sans-serif);
  font-size: clamp(19px, 4.6vw, 24px); line-height: 1.3;
  color: var(--sc-ink, #0b0b0e);
}
.drill__opt { text-align: center; letter-spacing: 1px; }
.drill__say {
  min-height: 24px; margin: 14px 0 0;
  font-family: var(--font-balloon, sans-serif); font-size: 17px; line-height: 1.4;
  color: #5a4a20;
}
.drill__done {
  margin: 6px 0 4px;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(30px, 8vw, 46px); letter-spacing: 1px;
  color: var(--sc-ink, #0b0b0e);
}
.drill .big-btn { margin-top: 16px; }

/* the card's small print: what FOUND is worth, said plainly */
.word-card__foot {
  margin: 8px 0 0;
  font-family: var(--font-ui, sans-serif); font-weight: 700;
  font-size: 13px; letter-spacing: .3px; color: #7c6a3a;
}
.word-card__foot[hidden] { display: none; }
.word-card .word-new--owned { background: #2e8b57; color: #fff; }

/* the words button knows when something is waiting to be proved */
.kid-icon.has-due::after {
  content: ''; position: absolute; top: 6px; right: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sc-orange, #ef6c00);
  border: 2px solid var(--sc-ink, #0b0b0e);
}

/* the run, while it is happening */
.drill__streak {
  width: min(100% - 28px, 620px); margin: 0 auto 10px; min-height: 26px;
  text-align: center; letter-spacing: 1px;
  font-family: var(--font-ui, sans-serif); font-weight: 800;
  font-size: 15px; text-transform: uppercase; color: #7c8698;
}
.drill__streak.is-hot { color: var(--sc-orange, #ef6c00); font-size: 17px; }

.drill { position: relative; }
/* Over the question, never over the answers: he has just been told which
   one was right and the celebration must not be the thing that hides it. */
.drill__pow {
  position: absolute; left: 0; right: 0; top: -46px; height: 80px;
  display: grid; place-items: center;
  pointer-events: none; z-index: 5;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(34px, 9.5vw, 56px); letter-spacing: 2px;
  color: var(--sc-yellow, #ffd21f);
  -webkit-text-stroke: 3px var(--sc-ink, #0b0b0e);
  text-shadow: 0 6px 0 rgba(0,0,0,.35);
  animation: sc-pow 900ms cubic-bezier(.2,1.5,.4,1) forwards;
}
@keyframes sc-pow {
  0%   { transform: scale(.3) rotate(-8deg); opacity: 0; }
  35%  { transform: scale(1.12) rotate(-4deg); opacity: 1; }
  70%  { transform: scale(1) rotate(-4deg); opacity: 1; }
  100% { transform: scale(1.04) rotate(-4deg); opacity: 0; }
}

.drill__stars {
  margin: 0 0 6px; text-align: center;
  font-size: 30px; letter-spacing: 4px; line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .drill__pow { animation: none; opacity: 1; }
}