/* Rabbit 5 trivia — shared styles. Tokens from rabbit-brand-kit/rabbit-tokens.css. */
:root{
  --lime:#E0FF17; --forest:#063C2D; --forest-deep:#0A2A20; --teal:#61ABB5; --sage:#D8E6D8;
  --ink:#1A1A1A; --paper:#F5F3EE; --success:#1F8A5B; --error:#E5484D; --warning:#F5A524;
  --font:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --r-card:20px; --r-pill:999px; --ease:cubic-bezier(.2,.8,.2,1); --pop:cubic-bezier(.34,1.56,.64,1);
  --o0:#E0FF17; --o1:#61ABB5; --o2:#F5A524; --o3:#E5484D;   /* answer colours */
  --o0-ink:#063C2D; --o1-ink:#062a2f; --o2-ink:#2b1a00; --o3-ink:#fff;
  --grain:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22180%22%20height=%22180%22%3E%3Cfilter%20id=%22g%22%3E%3CfeTurbulence%20type=%22fractalNoise%22%20baseFrequency=%220.9%22%20numOctaves=%222%22%20stitchTiles=%22stitch%22/%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22/%3E%3C/filter%3E%3Crect%20width=%22100%25%22%20height=%22100%25%22%20filter=%22url(%23g)%22%20opacity=%220.55%22/%3E%3C/svg%3E');
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{background:#063C2D}
body{font-family:var(--font);background:var(--forest);color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-attachment:fixed;background-image:radial-gradient(1200px 700px at 15% -10%,rgba(97,171,181,.28),transparent 60%),radial-gradient(900px 600px at 110% 110%,rgba(224,255,23,.12),transparent 60%);}
body::after{content:"";position:fixed;inset:0;background:var(--grain);opacity:.07;pointer-events:none;mix-blend-mode:overlay;z-index:100}
button{font:inherit;cursor:pointer;border:0;color:inherit;background:none}
input,select{font:inherit}
.mono{font-variant-numeric:tabular-nums}
h1,h2,h3{font-weight:900;letter-spacing:-.02em;line-height:1.04}
.hidden{display:none!important}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--r-pill);padding:16px 28px;font-weight:800;font-size:18px;
  background:var(--lime);color:var(--forest);transition:transform .15s var(--ease),filter .15s}
.btn:active{transform:scale(.96)}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff}
.btn[disabled]{opacity:.5}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);padding:6px 14px;font-weight:700;font-size:14px;background:rgba(255,255,255,.12)}
.pill.lime{background:var(--lime);color:var(--forest)}

/* Tape label — brand's torn-paper tag */
.tape{display:inline-block;background:var(--lime);color:var(--forest);font-weight:900;padding:.18em .7em;transform:rotate(-2deg);
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.28));-webkit-mask:var(--tape-edge,none);}

/* Twist badges */
.twist{display:inline-flex;align-items:center;gap:.4em;font-weight:900;text-transform:uppercase;letter-spacing:.04em;border-radius:12px;padding:.35em .8em;
  background:var(--lime);color:var(--forest);transform:rotate(-3deg);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.twist.t-wager{background:var(--warning);color:#2b1a00}
.twist.t-steal{background:var(--error);color:#fff}
.twist.t-mystery{background:linear-gradient(90deg,#E0FF17,#61ABB5,#F5A524,#E5484D);color:var(--forest)}
.twist.t-underdog{background:var(--teal);color:var(--forest-deep)}
.twist.t-lightning{background:#fff;color:var(--forest)}

.shape{display:inline-block;width:1em;height:1em;flex:none}
.shape.s0{clip-path:polygon(50% 4%,96% 92%,4% 92%);background:currentColor}
.shape.s1{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:currentColor}
.shape.s2{border-radius:50%;background:currentColor}
.shape.s3{border-radius:3px;background:currentColor;transform:scale(.88)}

@keyframes pop-in{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes slam{0%{transform:scale(3) rotate(-12deg);opacity:0}60%{transform:scale(.92) rotate(-3deg);opacity:1}100%{transform:scale(1) rotate(-3deg)}}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.pop-in{animation:pop-in .45s var(--pop) both}
.rise{animation:rise .5s var(--ease) both}
.slam{animation:slam .6s var(--pop) both}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- fact card (phone base; host overrides in index.html) ---- */
.fcard{position:relative;background:#F5F3EE;color:var(--forest);border-radius:22px;padding:18px 18px 16px;box-shadow:0 14px 40px rgba(0,0,0,.35);
  opacity:0;transform:translateY(26px) scale(.96);transition:opacity .5s var(--ease),transform .7s var(--pop);overflow:hidden}
.fcard::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--lime),var(--teal))}
.fcard.go{opacity:1;transform:none}
.fc-head{display:flex;align-items:center;gap:10px}
.fc-emoji{font-size:34px;line-height:1;display:inline-block}
.fcard.go .fc-emoji{animation:fc-bounce 1s var(--pop) .2s both, wobble 2.4s ease-in-out 1.4s infinite}
.fc-kicker{background:var(--lime);color:var(--forest);font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px;transform:rotate(-2deg)}
.fc-main{margin-top:10px}
.fc-hero{font-size:52px;font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--forest)}
.fc-hero.landed{animation:pulse .5s ease 1}
.fc-label{font-weight:700;font-size:16px;color:#3c5a50;margin-top:4px}
.fc-bars{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px;align-items:end;height:120px;margin-top:14px}
.fc-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.fc-bar i{display:block;width:100%;height:var(--h);background:#cfdccf;border-radius:7px 7px 3px 3px;transform-origin:bottom;transform:scaleY(0)}
.fc-bar.hot i{background:var(--forest)}
.fc-bar b{font-size:11px;font-weight:800;color:var(--forest);opacity:0;margin-bottom:3px;white-space:nowrap}
.fc-bar span{font-size:11px;font-weight:700;color:#5e7a70;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fcard.go .fc-bar i{animation:fc-grow .8s var(--pop) calc(.5s + var(--i) * .14s) both}
.fcard.go .fc-bar b{animation:rise .4s ease calc(.9s + var(--i) * .14s) both}
.fc-line{margin-top:12px;font-size:17px;line-height:1.4;font-weight:700;color:var(--forest)}
.fc-line span{opacity:0;display:inline-block;white-space:pre}
.fcard.go .fc-line span{animation:fc-word .35s ease calc(.9s + var(--i) * .06s) both}
@keyframes fc-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fc-word{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fc-bounce{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fcard,.fc-bar i,.fc-line span,.fc-bar b{opacity:1!important;transform:none!important}}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:90}