/* Pennyback — custom CSS layered on the Stitch/Tailwind design system.
   Only what Tailwind utilities don't cover: icon font, the coin-stack meter, animations, the celebration toast. */

:root { --c-primary:#14442E; --c-primary-container:#1E6F4C; --c-primary-fixed-dim:#9ed3ba; --c-secondary:#9a7b16; --c-secondary-container:#C9A227; --c-surface:#F6F1E4; --c-gold:#C9A227; --c-coin-hi:#F0D78A; --c-coin:#C9A227; --c-coin-edge:#9a7b16; }
[data-theme="cool"] { --c-primary:#15507a; --c-primary-container:#1d6fb8; --c-primary-fixed-dim:#8fc0e8; --c-secondary:#3f6212; --c-secondary-container:#65a30d; --c-surface:#f3f8f3; --c-gold:#65a30d; --c-coin-hi:#e6f9b8; --c-coin:#84cc16; --c-coin-edge:#4d7c0f; }
body { font-family: 'Inter', sans-serif; background: var(--c-surface); color: #1b1c19; }
h1, h2, h3, h4, h5, h6, .font-jakarta,
[class*="font-display"], [class*="font-headline"] { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }

/* Material Symbols (the CDN link only ships the @font-face; the helper class is ours) */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
  font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- pig + slider progress meter (a coin drops into the pig on each answer) ---------- */
.pig-meter { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pig-stage { position: relative; width: 92px; height: 92px; display: flex; align-items: flex-end; justify-content: center; }
.pig-img { width: 92px; height: 92px; object-fit: contain; transform-origin: 50% 85%; }
.pig-vid { width: 110px; height: 110px; object-fit: contain; }
.pig-img.wiggle { animation: pigwiggle .6s ease-in-out; }
@keyframes pigwiggle { 0%{transform:rotate(0) translateY(0)} 22%{transform:rotate(-4deg) translateY(-3px)} 50%{transform:rotate(3deg) translateY(0)} 75%{transform:rotate(-1.5deg) translateY(-1px)} 100%{transform:rotate(0) translateY(0)} }
.drop-coin {
  position: absolute; left: 50%; top: -28px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, var(--c-coin-hi), var(--c-coin) 60%, var(--c-coin-edge));
  border: 1px solid var(--c-coin-edge); box-shadow: 0 1px 2px rgba(0,53,39,.25); z-index: 3;
  animation: coindropin .62s cubic-bezier(.4,.05,.6,.95) forwards;
}
@keyframes coindropin { 0%{top:-30px;opacity:0;transform:scale(.85)} 20%{opacity:1} 68%{top:18px;opacity:1;transform:scale(1)} 100%{top:34px;opacity:0;transform:scale(.55)} }
.pig-img.squash { animation: pigsquash .5s ease; }
@keyframes pigsquash { 0%{transform:scaleY(1) scaleX(1)} 30%{transform:scaleY(.9) scaleX(1.05) translateY(3px)} 60%{transform:scaleY(1.03) scaleX(.99)} 100%{transform:scaleY(1) scaleX(1)} }
.pig-img.recoil { animation: pigrecoil .5s ease; }
@keyframes pigrecoil { 0%{transform:translateX(0) rotate(0)} 25%{transform:translateX(5px) rotate(2.5deg)} 60%{transform:translateX(-1px) rotate(-1deg)} 100%{transform:translateX(0) rotate(0)} }
.burp-coin { position: absolute; left: 30%; top: 48%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, var(--c-coin-hi), var(--c-coin) 60%, var(--c-coin-edge)); border: 1px solid var(--c-coin-edge); box-shadow: 0 1px 2px rgba(0,53,39,.25); z-index: 3; animation: burpout .85s ease-out forwards; }
@keyframes burpout { 0%{transform:translate(0,0) scale(.4); opacity:0} 22%{transform:translate(-8px,-12px) scale(1); opacity:1} 100%{transform:translate(-16px,42px) scale(.65); opacity:0} }
.loader-vid { width: 220px; height: 220px; object-fit: contain; }

/* bottom scene: FULL image, FULL BLEED edge-to-edge, sitting directly under the footer text (minimal gap); the top clouds fade into the cream background */
.pagescene {
  position: relative; z-index: 0; display: block; width: 100%; max-width: none; height: auto;
  margin: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 80%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, #000 80%, rgba(0,0,0,0) 100%);
}
.pig-track { position: relative; width: 100%; max-width: 320px; height: 8px; border-radius: 9999px; background: #ffffff; box-shadow: inset 0 0 0 1px #e3e3de; }
.pig-fill { height: 100%; border-radius: 9999px; background: var(--c-primary-container); transition: width .6s cubic-bezier(.2,.8,.3,1); }
.pig-thumb {
  position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, var(--c-coin-hi), var(--c-coin) 60%, var(--c-coin-edge));
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,53,39,.3); transition: left .6s cubic-bezier(.2,.8,.3,1);
}
.pig-cap { font: 600 11px Inter, sans-serif; color: #707974; text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.pig-trust { display: inline-flex; align-items: center; gap: 6px; font: 600 13px Inter, sans-serif; color: var(--c-primary); background: #ffffff; border: 1px solid var(--c-primary-fixed-dim); border-radius: 9999px; padding: 6px 14px; box-shadow: 0 2px 10px -3px rgba(6,78,59,.15); }
.pig-trust .material-symbols-outlined { color: var(--c-primary); }

/* ---------- finish / redirect loader (stuffed pig with coins trickling out) ---------- */
.pb-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 0; min-height: 60vh; }
.loader-pig { position: relative; width: 180px; height: 180px; }
.loader-pig > img { width: 180px; height: 180px; object-fit: contain; }
.loader-pig .fc {
  position: absolute; bottom: 38px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, var(--c-coin-hi), var(--c-coin) 60%, var(--c-coin-edge));
  border: 1px solid var(--c-coin-edge); box-shadow: 0 1px 2px rgba(0,53,39,.25);
  opacity: 0; animation: coinfall 1.8s ease-in infinite;
}
.loader-pig .fc0 { left: 46%; animation-delay: 0s; }
.loader-pig .fc1 { left: 53%; animation-delay: .36s; }
.loader-pig .fc2 { left: 49%; animation-delay: .72s; }
.loader-pig .fc3 { left: 56%; animation-delay: 1.08s; }
.loader-pig .fc4 { left: 43%; animation-delay: 1.44s; }
@keyframes coinfall { 0% { transform: translateY(0) scale(.9); opacity: 0; } 14% { opacity: 1; } 100% { transform: translateY(74px) scale(.78); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .loader-pig .fc { animation: none; opacity: 0; } }

/* ---------- option cards ---------- */
.option-card { transition: all .18s ease-out; }
.option-card:active { transform: scale(.985); }
.option-card.sel { border-color: #14442E !important; background: #efe9d8; }
.opt-sm { transition: all .15s ease-out; border-radius: 0.5rem; }

/* exit-recovery skip control + popup */
.quizx { display: none; position: fixed; top: 72px; right: 12px; z-index: 30; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #1e3060; background: rgba(255,255,255,.85); color: #6b7a99; font-size: 19px; line-height: 27px; text-align: center; cursor: pointer; }
body.ui-v2 .quizx { display: block; }
.exitpop { position: fixed; inset: 0; z-index: 50; background: rgba(20,25,40,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.exitpop[hidden] { display: none; }
.exitpop-card { position: relative; background: var(--c-surface); border-radius: 16px; max-width: 360px; width: 100%; padding: 26px 22px 18px; box-shadow: 0 14px 44px rgba(0,0,0,.28); }
.exitpop-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 22px; color: #99a; line-height: 1; cursor: pointer; }
.exitpop-title { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 600; color: #1b1c19; margin-bottom: 6px; }
.exitpop-body { font-size: 15px; color: #5f5e5a; line-height: 1.45; margin-bottom: 18px; }
.exitpop-go { display: block; width: 100%; text-align: center; background: #C9A227; color: #14442E; font-weight: 700; border: 0; border-radius: 12px; padding: 13px; cursor: pointer; }
.exitpop-stay { display: block; width: 100%; text-align: center; background: none; border: 0; color: #6b7a99; font-weight: 500; padding: 10px; margin-top: 6px; cursor: pointer; }
.opt-sm.sel { border-color: #14442E !important; background: #efe9d8; color: #14442E; font-weight: 600; }

/* primary buttons: bg/text set explicitly here (not via Tailwind utilities) because the in-browser
   Tailwind CDN JIT does not reliably generate utilities for buttons injected mid-quiz (Continue/submit). */
.btn-glow { background: var(--c-primary-container); color: #fff; box-shadow: inset 0 2px 4px rgba(255,255,255,.2); }
.btn-glow:hover { background: var(--c-primary); }

/* live pulse dot */
.pulse-dot { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.15); } }

/* live dot inside the promo bar (rich announce text) */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #36c07a; margin: 0 8px -1px; box-shadow: 0 0 0 3px rgba(54,192,122,.18); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }

@media (prefers-reduced-motion: reduce) {
  .pig-img.squash, .pig-img.recoil, .drop-coin, .burp-coin, .pulse-dot, .animate-bounce { animation: none !important; }
  .pig-fill, .pig-thumb { transition: none; }
}

/* ---------- v2 variation: no top meter; compact header pig; promo bar first-step only; story peeks higher ---------- */
body.ui-v2 #pbmeter { display: none !important; }
body.ui-v2 footer { display: none !important; }
body.ui-v2 main { flex-grow: 0; padding-bottom: 10px; }
body.ui-v2 .pagescene { margin-top: 0; }

/* Game-flip variation: full side-scroller shown as a visible game viewport pinned to the bottom */
body.game-flip main { flex-grow: 0; padding-bottom: 0; }
body.game-flip.ui-v2 .pagescene { margin-top: auto; z-index: 0; width: 100%; border-radius: 14px 14px 0 0; box-shadow: 0 -3px 18px rgba(13,27,62,.16); }

/* compact coin-drop pig in the header (v2 only); must fit the existing 64px header height */
.hdr-pig { display: none; position: relative; width: 46px; height: 46px; align-items: flex-end; justify-content: center; }
body.ui-v2 .hdr-pig { display: inline-flex; }
.hdr-pig img { width: 42px; height: 42px; object-fit: contain; transform-origin: 50% 85%; }
/* header coin-drop: detailed SVG coin spins, falls to the slot, turns edge-on + slides in, with a spark; refined receive-wiggle */
.hdr-pig img.squash { animation: hdrreceive .62s cubic-bezier(.3,.7,.4,1); }
@keyframes hdrreceive { 0%{transform:scaleY(1) scaleX(1) translateY(0)} 48%{transform:scaleY(1.03) scaleX(.99) translateY(-1px)} 72%{transform:scaleY(.86) scaleX(1.09) translateY(3px)} 88%{transform:scaleY(1.05) scaleX(.98) translateY(-1px)} 100%{transform:scaleY(1) scaleX(1) translateY(0)} }
.hdr-coin { position: absolute; left: 55%; top: 9px; width: 14px; height: 14px; margin-left: -7px; z-index: 4; pointer-events: none; animation: hdrfall .6s cubic-bezier(.45,.05,.55,1) forwards; }
.hdr-coin .hc-face { display: block; width: 14px; height: 14px; transform-origin: 50% 50%; animation: hdrspin .6s ease-in forwards; filter: drop-shadow(0 1px 1px rgba(0,53,39,.28)); }
.hdr-coin .hc-spark { position: absolute; left: 50%; top: 6px; width: 11px; height: 11px; margin-left: -5.5px; background: #fff4da; opacity: 0; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation: hdrspark .6s ease-out forwards; }
@keyframes hdrfall { 0%{transform:translate(2px,-22px);opacity:0} 18%{opacity:1;transform:translate(1px,-12px)} 62%{transform:translate(0,-1px);opacity:1} 84%{transform:translate(0,5px);opacity:1} 100%{transform:translate(0,8px);opacity:0} }
@keyframes hdrspin { 0%{transform:scaleX(1)} 20%{transform:scaleX(.16)} 40%{transform:scaleX(.95)} 60%{transform:scaleX(.18)} 78%{transform:scaleX(.9)} 90%{transform:scaleX(.14)} 100%{transform:scaleX(.06)} }
@keyframes hdrspark { 0%,70%{opacity:0;transform:scale(0)} 84%{opacity:.95;transform:scale(1.15) rotate(16deg)} 100%{opacity:0;transform:scale(.4) rotate(24deg)} }

/* end-screen: lying pig with a continuous golden coin waterfall + sparkles (CSS loop; no box, no bounce) */
.coinpour { position: relative; width: 200px; height: 212px; margin: 6px auto 0; }
.coinpour .cp-pig { position: relative; z-index: 2; display: block; width: 168px; height: 168px; margin: 0 auto; object-fit: contain; }
.coinpour .cp-coin { position: absolute; top: 50%; width: 15px; height: 15px; margin-left: -7px; border-radius: 50%; z-index: 1;
  background: radial-gradient(ellipse at 50% 35%, var(--c-coin-hi), var(--c-coin) 60%, var(--c-coin-edge)); border: 1px solid var(--c-coin-edge);
  box-shadow: 0 1px 2px rgba(0,53,39,.2); animation: cppour 1.5s ease-in infinite; }
@keyframes cppour { 0% { transform: translateY(0) scale(.5); opacity: 0; } 12% { opacity: 1; transform: translateY(8px) scale(1); } 100% { transform: translateY(120px) scale(.7); opacity: 0; } }
.coinpour .cp-spark { position: absolute; width: 12px; height: 12px; z-index: 3; opacity: 0; background: var(--c-coin-hi);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation: cptwinkle 1.7s ease-in-out infinite; }
@keyframes cptwinkle { 0%,100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(18deg); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .coinpour .cp-coin, .coinpour .cp-spark { animation: none; opacity: 0; } }