/* hero-card.css — the live demo card in a landing page's hero, with the
 * mascot standing on it. Shared by the home page (a word to explain) and
 * mischak-lemosdot/ (a definition to read aloud); hero-card.js drives it.
 * Moved here verbatim from index.html so both pages use one copy. */
/* word card */
.card-stage { position: relative; display: grid; place-items: center; padding: 20px 0; }
.wcard {
  width: min(320px, 100%); aspect-ratio: 3 / 4; border-radius: 26px; padding: 22px;
  background: linear-gradient(160deg, #1b2550, #0c1330);
  border: 1px solid rgba(252,196,25,.35);
  box-shadow: 0 30px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  display: flex; flex-direction: column; justify-content: space-between;
  transform: rotate(-3deg);
}
.wcard-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }
.timer { font-family: var(--font-display); font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; border: 2px solid var(--blue); border-radius: 999px; padding: 2px 10px; }
.word { text-align: center; }
.word small { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.word span { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 5vw, 46px); color: #fff; transition: opacity .25s; }
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.act { border-radius: 12px; padding: 8px 0; text-align: center; font: 700 14px var(--font-body); border: 1px solid; cursor: pointer; transition: transform .12s, box-shadow .2s, filter .2s; }
.act:hover { transform: translateY(-2px); filter: brightness(1.25); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.act:active { transform: scale(.92); }
.act:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wcard { position: relative; transition: box-shadow .3s, border-color .3s; }
.wcard.glow-ok { border-color: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.35), 0 30px 70px rgba(0,0,0,.5); }
.wcard.glow-foul { border-color: #f87171; box-shadow: 0 0 0 4px rgba(248,113,113,.35), 0 30px 70px rgba(0,0,0,.5); animation: shake .4s; }
@keyframes shake { 0%,100% { transform: rotate(-3deg) translateX(0); } 20% { transform: rotate(-3deg) translateX(-10px); } 40% { transform: rotate(-3deg) translateX(9px); } 60% { transform: rotate(-3deg) translateX(-6px); } 80% { transform: rotate(-3deg) translateX(4px); } }
.word span { display: inline-block; transition: opacity .25s, transform .3s; }
.word span.out-up { opacity: 0; transform: translateY(-40px) scale(1.15); }
.word span.out-side { opacity: 0; transform: translateX(-60px); }
.pop { position: absolute; inset-inline: 0; top: 42%; text-align: center; font: 900 40px var(--font-display); pointer-events: none; opacity: 0; }
.pop.go { animation: pop .8s ease-out; }
@keyframes pop { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 25% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-50px) scale(1); } }
.mini { width: min(320px, 100%); margin-top: 26px; display: grid; gap: 8px; text-align: center; font-size: 14px; color: var(--muted); }
.mini-bar { position: relative; height: 10px; border-radius: 999px; background: var(--line); }
.mini-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--gold)); transition: width .5s cubic-bezier(.3,1.5,.5,1); }
.mini-bar b { position: absolute; top: -9px; inset-inline-start: 0; font-size: 20px; line-height: 1; transform: translateX(50%); transition: inset-inline-start .5s cubic-bezier(.3,1.5,.5,1); }
.spark { position: absolute; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; animation: spark .7s ease-out forwards; }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) rotate(260deg); opacity: 0; } }
.ok { color: #86efac; background: rgba(74,222,128,.14); border-color: rgba(74,222,128,.35); }
.skip { color: #cbd5e1; background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.35); }
.foul { color: #fca5a5; background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.35); }
.tag-own { position: absolute; z-index: 2; top: 6px; inset-inline-start: 4%; background: var(--gold); color: #1a1102; font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 999px; transform: rotate(4deg); opacity: 0; transition: opacity .25s; }
.tag-own.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) { .word span, .tag-own, .act, .mini-bar i, .mini-bar b { transition: none; } .wcard.glow-foul, .pop.go, .spark { animation: none; } }
/* mascots: standing on a surface, with a ground shadow and a gentle breathing motion */
.m-stand { position: absolute; z-index: 3; display: block; pointer-events: none; }
.m-stand img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: breathe 3.8s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.m-stand::after, .m-sent::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -9px; height: 20px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.85) 0 38%, rgba(129,140,248,.22) 62%, transparent); z-index: -1; }
.m-stand img.jump { animation: hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes breathe { 0%,100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .975); } }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(0) scale(1.06, .9); } 55% { transform: translateY(-30px) scale(.97, 1.05); } 80% { transform: translateY(0) scale(1.05, .93); } 100% { transform: translateY(0) scale(1); } }
.m-hero { width: 128px; inset-inline-end: -58px; bottom: 96px; transform: rotate(8deg); transform-origin: 50% 100%; }
.m-hero img { animation-name: lean; animation-duration: 4.2s; }
@keyframes lean { 0%,100% { transform: rotate(0) scale(1, 1); } 50% { transform: rotate(2.5deg) scale(1.015, .985); } }

@media (max-width: 760px) {
  .card-stage { padding-top: 78px; }
  .tag-own { top: 64px; }
  .m-hero { width: 88px; bottom: auto; top: 6px; inset-inline-end: 34px; transform: rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .m-stand img, .m-stand img.jump, .m-sent img { animation: none; } }
.m-stand { pointer-events: auto; cursor: pointer; }
.m-stand:hover img { animation: wiggle .7s ease-in-out; }
@keyframes wiggle { 0%,100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-7deg) translateY(-6px); } 50% { transform: rotate(5deg) translateY(-10px); } 75% { transform: rotate(-3deg) translateY(-4px); } }
.m-stand img.oops { animation: oops .8s ease-in-out; }
@keyframes oops {
  0%   { transform: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
  15%  { transform: translateY(6px) scale(1.03, .92) rotate(-4deg); filter: drop-shadow(0 0 10px rgba(248,113,113,.6)); }
  30%  { transform: translateX(-7px) rotate(-8deg); }
  45%  { transform: translateX(6px) rotate(6deg); }
  60%  { transform: translateX(-4px) rotate(-4deg); filter: drop-shadow(0 0 6px rgba(248,113,113,.4)); }
  80%  { transform: translateX(2px) rotate(2deg); }
  100% { transform: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
}
.m-oops { position: absolute; top: -22px; inset-inline-start: 50%; font-size: 26px; pointer-events: none; opacity: 0; }
.m-oops.go { animation: oopsPop .9s ease-out; }
@keyframes oopsPop { 0% { opacity: 0; transform: translateY(8px) scale(.5); } 25% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-18px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .m-stand img.oops, .m-oops.go { animation: none; } }

.m-stand img.shrug { animation: shrug .75s ease-in-out; }
@keyframes shrug {
  0%   { transform: none; }
  20%  { transform: translateY(-6px) scale(1.04, .97) rotate(-6deg); }
  40%  { transform: translateY(0) rotate(5deg); }
  60%  { transform: translateY(-3px) rotate(-3deg); }
  80%  { transform: rotate(1.5deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .m-stand img.shrug { animation: none; } }

#mascot { aspect-ratio: 500 / 430; object-fit: contain; object-position: 50% 100%; }

/* Clue variant (mischak-lemosdot/): the card holds a sentence read aloud,
   and "✓ ניחשו" turns it into the answer for a moment. */
.wcard.is-clue .word span { font-size: clamp(18px, 2.3vw, 22px); font-weight: 700; line-height: 1.45; }
.wcard.is-clue .word span.answer { font-size: clamp(30px, 4.4vw, 40px); font-weight: 900; color: var(--gold); }
.wcard.show-answer .word small { visibility: hidden; }

/* A content page's head with the card beside it (same split as the home hero). */
.page-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.page-hero > * { min-width: 0; }
@media (max-width: 760px) { .page-hero { grid-template-columns: 1fr; gap: 8px; } }