/* Robin is silly: cream paper, banana yellow, hot pink, electric blue, navy outlines. */
:root{--cream:#FFF4DB;--yellow:#FFD23F;--pink:#FF5D8F;--blue:#3A86FF;--ink:#1B1B3A;--disp:"Bagel Fat One","Fredoka",system-ui,sans-serif;--body:"Fredoka",system-ui,sans-serif;--r:22px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--cream)}
body{margin:0;font:400 1.1rem/1.5 var(--body);color:var(--ink);background:var(--cream) url(img/pattern.webp) center top/900px;background-blend-mode:soft-light;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
.btn{background:#fff;border:3px solid var(--ink);border-radius:999px;padding:.7rem 1.3rem;font-weight:600;box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .2s}
.btn:hover{background:var(--yellow)}.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn.big{background:var(--pink);color:#fff;font-size:1.2rem;padding:.8rem 1.6rem}.btn.big:hover{background:#ff3d78}
.btn.huge{background:var(--blue);color:#fff;font:400 clamp(1.4rem,4vw,2rem)/1 var(--disp);padding:1.1rem 2rem;box-shadow:0 8px 0 var(--ink)}.btn.huge:hover{background:#1f6fff}
.row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
/* ticker */
.ticker{overflow:hidden;background:var(--ink);color:var(--yellow);border-bottom:4px solid var(--ink);white-space:nowrap}
.track{display:inline-block;padding:.5rem 0;font:600 1rem var(--body);animation:run 60s linear infinite}
.track span{margin-right:.4rem}.track i{color:var(--pink);font-style:normal}
@keyframes run{to{transform:translateX(-50%)}}
/* hero */
.hero{display:grid;gap:1rem;align-items:center;padding:clamp(1.4rem,5vw,3.4rem) clamp(1rem,5vw,4rem) 2rem;max-width:1200px;margin:0 auto}
@media (min-width:860px){.hero{grid-template-columns:minmax(260px,.8fr) 1.2fr}}
.mascot{width:min(70vw,420px);margin:0 auto;animation:wob 3.2s ease-in-out infinite;transform-origin:50% 90%;filter:drop-shadow(0 14px 0 rgba(27,27,58,.12))}
@keyframes wob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg) translateY(-8px)}}
.stage{text-align:center}
.kicker{font:600 1rem var(--body);color:var(--pink);letter-spacing:.04em}
h1{font:400 clamp(3rem,11vw,7rem)/.95 var(--disp);margin:.3rem 0 1.2rem}
h1 .name{color:var(--blue);display:inline-block;transform:rotate(-3deg)}
h1 .is{color:var(--ink);font-size:.5em}
h1 .silly{color:var(--pink);display:inline-block;transform:rotate(2deg)}
.card{background:#fff;border:4px solid var(--ink);border-radius:var(--r);padding:1.2rem 1.2rem 1.4rem;box-shadow:8px 8px 0 var(--ink);max-width:640px;margin:0 auto}
.card.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.9) rotate(-2deg)}100%{transform:scale(1)}}
.lang{display:inline-flex;gap:.5rem;align-items:center;background:var(--yellow);border:3px solid var(--ink);border-radius:999px;padding:.2rem .9rem;font-weight:600}
.flag{font-size:1.4rem}
.phrase{font:400 clamp(1.9rem,6vw,3.2rem)/1.15 var(--disp);margin:.8rem 0 .3rem;word-break:break-word}
.roman{min-height:1.5em;color:#5a5a85;font-style:italic;margin-bottom:.6rem}
/* sections */
main{max-width:1000px;margin:0 auto;padding:0 clamp(1rem,5vw,2rem)}
section{margin:3.2rem 0;text-align:center}
h2{font:400 clamp(1.9rem,6vw,3rem)/1.05 var(--disp);margin-bottom:1rem;color:var(--ink)}
h2::after{content:"";display:block;width:120px;height:10px;margin:.5rem auto 0;border-radius:99px;background:repeating-linear-gradient(90deg,var(--pink) 0 14px,transparent 14px 22px)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:.8rem}
.chip{background:#fff;border:3px solid var(--ink);border-radius:999px;padding:.5rem 1rem;font-weight:600;box-shadow:0 4px 0 var(--ink);transition:transform .12s,background .2s}
.chip:hover{transform:translateY(-2px) rotate(-1.5deg)}.chip.on{background:var(--yellow);transform:rotate(-2deg)}
.hint{color:#5a5a85;min-height:1.6em;margin-bottom:1.2rem}
.live{display:block;min-height:1.8em;margin-top:1rem;font:600 1.1rem var(--body);color:var(--blue);word-break:break-all;letter-spacing:.06em}
/* meter */
.gauge{position:relative;height:56px;background:#fff;border:4px solid var(--ink);border-radius:999px;overflow:hidden;max-width:560px;margin:1rem auto 1.4rem}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--yellow),var(--pink),var(--blue))}
.gauge span{position:absolute;inset:0;display:grid;place-items:center;font:400 1.6rem var(--disp);text-shadow:0 2px 0 #fff}
.gauge.shake{animation:shake .12s linear infinite}
@keyframes shake{25%{transform:translate(3px,-2px) rotate(.6deg)}75%{transform:translate(-3px,2px) rotate(-.6deg)}}
.verdict{min-height:2em;margin-top:1.2rem;font:400 1.5rem/1.2 var(--disp);color:var(--pink)}
#hold{user-select:none;-webkit-user-select:none;touch-action:none}
/* certificate */
.cert canvas{width:100%;max-width:820px;height:auto;border-radius:12px;box-shadow:8px 8px 0 var(--ink);margin-bottom:1.4rem;border:4px solid var(--ink)}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.9rem;text-align:left}
.tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.7rem;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:18px;padding:.7rem .9rem;box-shadow:0 5px 0 var(--ink);text-align:left;transition:transform .12s}
.tile:hover{transform:translateY(-3px) rotate(-1deg);background:#fff9e8}.tile.on{background:var(--yellow)}
.tf{grid-row:1/3;font-size:2rem}.tn{font-weight:700;font-size:.95rem}.tt{font-size:.9rem;color:#4b4b78;line-height:1.25}
.roll .big{font:400 clamp(1.8rem,6vw,3rem)/1.15 var(--disp);color:var(--blue);margin:.6rem 0 1.2rem}
footer{text-align:center;padding:1rem 1rem 4rem}
.mascot2{width:min(60vw,320px);margin:0 auto .6rem;animation:wob 4s ease-in-out infinite reverse}
footer p{font-weight:600}
/* confetti */
.rain{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.rain span{position:absolute;top:-3rem;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}