/* Game feel: motion for the home mystery, rounds, reveals, the summary and the collection.
   All motion is skipped under prefers-reduced-motion. */
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.foot-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--muted-fg); text-decoration: underline; cursor: pointer; min-height: 32px; }

/* Home */
.home-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mystery { display: flex; gap: 8px; align-items: center; margin: 4px 0 18px; }
.mtile {
  width: 52px; height: 60px; display: grid; place-items: center; border-radius: 10px;
  font: 600 30px var(--font-display); color: var(--primary-fg);
  background: linear-gradient(150deg, var(--blue), var(--indigo));
  box-shadow: none;
}
.mdash { font: 600 34px var(--font-display); color: var(--muted-fg); }
.streak-pill {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px;
  padding: 4px 12px; border-radius: 99px; background: var(--tone-blue); color: var(--primary-deep);
}
.streak-pill::before { content: ""; width: 10px; height: 13px; background: currentColor; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
:root[data-theme="dark"] .streak-pill { color: var(--tone-blue-fg); }

/* Ranks and toast */
.rank-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.rank-badge {
  display: inline-block; font: 600 22px var(--font-display); color: var(--primary-fg);
  background: linear-gradient(150deg, var(--teal), var(--primary)); padding: 8px 18px; border-radius: 12px;
}
.rank-badge.small { font-size: 15px; padding: 2px 10px; border-radius: 8px; vertical-align: 2px; }
.toast {
  position: fixed; left: 50%; top: 76px; transform: translateX(-50%); z-index: 20; pointer-events: none;
  font-weight: 700; padding: 8px 16px; border-radius: 99px; background: var(--indigo); color: var(--white); opacity: 0;
}
:root[data-theme="dark"] .toast { background: var(--teal); color: var(--indigo); }
.spark {
  position: fixed; z-index: 30; pointer-events: none; font: 700 20px var(--font-display); color: var(--teal);
  transform: translate(-50%, -50%);
}
.spark:nth-child(3n) { color: var(--primary); }
.spark:nth-child(3n+1) { color: var(--ink); }

/* Collection */
.meter { height: 12px; border-radius: 99px; background: var(--muted); overflow: hidden; margin: 0 0 14px; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--primary)); border-radius: 99px; }
.fams { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.fam { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.fam.locked { opacity: .7; }
.fam-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.fam-root { font: 600 22px var(--font-display); }
.fam-count { margin-left: auto; font-weight: 700; color: var(--muted-fg); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 32px; min-width: 64px; padding: 4px 12px; border-radius: 99px; font-weight: 600; font-size: 15px; }
.chip mark { background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.chip.new { border: 2px dashed var(--border); color: var(--muted-fg); justify-content: center; }
.chip.learning { border: 2px solid var(--teal); color: var(--fg); }
.chip.strong { background: var(--teal); color: var(--white); border: 2px solid var(--teal); }
.legend { margin-top: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--muted-fg); }
.legend .chip { min-width: 0; min-height: 26px; font-size: 13px; }
.map-word.strong { border-color: var(--teal); }
.collect { margin: 18px 0 0; font-weight: 600; }

/* Motion: short, ease-out, no overshoot. Only on something the player did or earned. */
@media (prefers-reduced-motion: no-preference) {
  main.enter > * { animation: enter .24s var(--ease) both; }
  .mtile { animation: enter .3s var(--ease) both; animation-delay: calc(var(--i) * .05s); }
  .slot.pop { animation: pop .2s var(--ease); }
  .tile, .choice, .btn { transition: transform .1s var(--ease), box-shadow .1s var(--ease), border-color .15s; }
  .tile:active, .choice:active:not(:disabled) { transform: scale(.97); }
  .sentence.is-right, .sentence.is-wrong { animation: flip .26s var(--ease); }
  .sentence.is-right { border-color: var(--good); }
  .choice.right { animation: pop .22s var(--ease); }
  .shake { animation: shake .28s var(--ease); }
  .word-row.lit mark { animation: glow .7s var(--ease) both; }
  .word-row.lit .word-chip:nth-child(2) mark { animation-delay: .1s; }
  .word-row.lit .word-chip:nth-child(3) mark { animation-delay: .2s; }
  .toast.show { animation: toast 1.3s var(--ease); }
  .spark { animation: spark .8s var(--ease) forwards; }
  .rank-badge:not(.small) { animation: stamp .32s var(--ease) .1s both; }
  .map-word { animation: enter .28s var(--ease) both; animation-delay: calc(.25s + var(--i) * .07s); }
  .meter span { animation: grow .7s var(--ease) both; }
}
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes flip { 0% { transform: translateY(3px); opacity: .55; } 100% { transform: none; opacity: 1; } }
@keyframes shake { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 45%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -4px); } 15%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
@keyframes spark { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.8); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); } }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes grow { from { width: 0; } }

.oops { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--miss-bg); color: var(--miss); font-weight: 600; }