:root{color-scheme:dark;--green:#103d32;--mint:#79f5ab;--orange:#fa792e;--cream:#f6f4e9;--ink:#123e33}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:var(--green)}
body{margin:0;color:var(--cream);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
button:focus-visible{outline:3px solid white;outline-offset:6px}
button:disabled{cursor:default}
[hidden]{display:none!important}
.game{container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;width:min(100%,calc(100svh * .745));max-width:1640px;min-height:100svh;margin:auto;background:var(--green)}
.game>*{flex-shrink:0}
.topbar{height:10cqw;display:flex;align-items:center;justify-content:flex-end;margin:0 6cqw;position:relative;z-index:3;border-bottom:1px solid #ffffff21}
.brand{font-weight:900;letter-spacing:.45cqw;font-size:2.8cqw;transform:scaleX(1.12);transform-origin:left}
.top-label{font-size:1.12cqw;letter-spacing:.17cqw;font-weight:700;display:flex;align-items:center;gap:1cqw;margin-left:7cqw}
.top-label>span{height:.8cqw;width:.8cqw;background:var(--mint);border-radius:50%}
.icon-button{background:transparent;border:1px solid #ffffff35;border-radius:50%;width:4.7cqw;height:4.7cqw;min-width:36px;min-height:36px;color:var(--cream);display:grid;place-items:center}
.icon-button svg{width:45%}
.hero{position:relative;text-align:center;padding:7.2cqw 0 2.8cqw}
.eyebrow{font-size:1.18cqw;font-weight:700;letter-spacing:.25cqw;margin:0 0 1.7cqw}
h1{position:relative;z-index:1;font-family:Arial,Helvetica,sans-serif;font-size:12.3cqw;font-weight:950;letter-spacing:-.8cqw;line-height:.87;margin:0;transform:rotate(-3deg)}
.epiq-title{color:var(--mint)}
.or{display:inline-block;font-size:4cqw;letter-spacing:-.16cqw;font-style:italic;font-weight:500;vertical-align:middle;transform:rotate(8deg);margin-left:1.2cqw}
.kamu-title{display:inline-block;margin-top:1.1cqw}
.intro{font-size:1.85cqw;line-height:1.5;margin:2.5cqw 0 0;color:#d3e0d7}
.clay-shape{position:absolute;box-shadow:inset 1cqw 1cqw 1.4cqw #ffffff20,inset -.7cqw -.9cqw 1.3cqw #00000015,.4cqw 1.2cqw 1.5cqw #001e2829}
.blue-shape{width:17cqw;height:21cqw;left:-8cqw;top:2.4cqw;background:#52afd2;transform:rotate(-34deg);border-radius:43% 57% 62% 38% / 40% 43% 57% 60%}
.orange-shape{width:12cqw;height:21cqw;right:-5.8cqw;top:2.5cqw;background:var(--orange);transform:rotate(-28deg);border-radius:63% 37% 46% 54% / 41% 53% 47% 59%}
.mint-shape{width:4.3cqw;height:7cqw;right:14cqw;top:7cqw;border-radius:50%;background:var(--mint);transform:rotate(30deg)}
.yellow-sticker{left:9cqw;top:21cqw;background:#f7ba41;color:var(--ink);padding:1.65cqw 2cqw;border-radius:45% 53% 46% 39%;font-size:1.1cqw;font-weight:900;letter-spacing:.03cqw;transform:rotate(-16deg)}
.play-area{position:relative;z-index:2;margin:0 8cqw}
.progress-row{display:flex;align-items:center;justify-content:space-between;height:5.7cqw;gap:3cqw;margin-bottom:1cqw}
.question-count{font-size:2cqw;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.question-count span{font-size:1.35cqw;font-weight:400;color:#a6c3b6;margin-left:.5cqw}
.progress{display:flex;gap:.8cqw;list-style:none;padding:0;margin:0;width:36cqw}
.progress li{height:.65cqw;min-height:4px;flex:1;background:#ffffff24;border-radius:2cqw;transition:background .3s}
.progress li.current{background:var(--cream)}
.progress li.correct{background:var(--mint)}
.progress li.wrong{background:var(--orange)}
.score-mini{font-size:1.3cqw;font-weight:700;letter-spacing:.1cqw;white-space:nowrap}
.sparkle{color:var(--mint);font-size:2cqw;margin-right:.5cqw}
.question-card{position:relative;background:var(--cream);color:var(--ink);border-radius:3.1cqw 3.6cqw 3cqw 3.9cqw / 3.5cqw 3cqw 3.8cqw 3.1cqw;min-height:23cqw;padding:3cqw 4cqw 3.5cqw;display:flex;flex-direction:column;justify-content:center;text-align:center;box-shadow:0 .7cqw 0 #cdd6bb,0 1.2cqw 2cqw #001d2125;transform:rotate(-.7deg)}
.card-category{font-size:1.1cqw;letter-spacing:.2cqw;font-weight:700;color:#5b7765;margin-bottom:1.6cqw}
.question-card h2{font-size:3.85cqw;line-height:1.2;letter-spacing:-.12cqw;font-weight:750;margin:0;outline:none;text-wrap:balance}
.card-spark{position:absolute;right:2.2cqw;top:1.6cqw;font-size:2.8cqw;color:#6f936d}
.answer-area{display:flex;gap:3cqw;margin-top:3.1cqw;padding:0 .7cqw}
.clay-button{position:relative;display:flex;align-items:center;justify-content:center;gap:2cqw;color:var(--ink);border:0;box-shadow:inset .35cqw .5cqw .7cqw #ffffff48,inset -.4cqw -.6cqw .8cqw #00000012,0 .8cqw 0 var(--shadow),0 1.1cqw 1.6cqw #001b2950;transition:filter .2s,opacity .2s,translate .15s,box-shadow .15s}
.clay-button::after{content:"";position:absolute;inset:.6cqw;border:1px solid #ffffff13;border-radius:inherit;pointer-events:none}
.clay-button:active:not(:disabled){translate:0 .55cqw;box-shadow:inset .2cqw .3cqw .6cqw #00000020,0 .25cqw 0 var(--shadow)}
.true-button,.false-button{width:50%;height:13cqw;font-size:4.8cqw;font-weight:900;letter-spacing:-.17cqw}
.true-button{--shadow:#3eb67d;background:var(--mint);border-radius:42% 36% 35% 31% / 31% 40% 33% 40%;transform:rotate(-2deg)}
.false-button{--shadow:#b8461f;background:var(--orange);border-radius:34% 42% 29% 39% / 38% 39% 35% 31%;transform:rotate(2deg)}
.choice-icon{font-size:4.6cqw;line-height:1;font-weight:400}
.clay-button small{display:block;font-size:1cqw;letter-spacing:.17cqw;margin-top:.5cqw;font-weight:750}
.clay-button.unchosen{opacity:.36;filter:saturate(.55)}
.clay-button.selected{outline:2px solid #ffffffb0;outline-offset:5px}
.tap-hint{text-align:center;color:#b4ccbf;font-size:1.3cqw;margin:2.8cqw 0 0}
.feedback{margin-top:2.8cqw;display:flex;gap:2cqw;align-items:center;min-height:8cqw;animation:reveal .3s ease both}
.feedback-copy{flex:1}
.feedback strong{font-size:2.2cqw;letter-spacing:-.06cqw;color:var(--mint)}
.feedback.is-wrong strong{color:#ffb678}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.feedback.is-correct{display:grid;grid-template-columns:1fr auto;gap:1.5cqw 2cqw;margin-top:2.5cqw}
.feedback.is-correct .feedback-copy{display:contents}
.feedback.is-correct strong{grid-column:1/-1;display:flex;align-items:baseline;justify-content:center;gap:1.9cqw;padding:1cqw 0 1.2cqw;font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;font-size:5.7cqw;font-weight:900;letter-spacing:-.2cqw;line-height:1.25}
.clay-word{display:inline-flex;white-space:nowrap}
.clay-word-0{font-size:1.34em}
.clay-letter{position:relative;display:inline-block;color:#d3d7bf;-webkit-text-stroke:.14cqw currentColor;text-shadow:0 .12cqw #d3d7bf,0 .25cqw #b6c6ac,0 .4cqw #829f80,.1cqw .55cqw .12cqw #092e2680,.15cqw .9cqw .6cqw #001b2680;transform:rotate(var(--tilt));transform-origin:50% 85%;animation:letter-pop .85s cubic-bezier(.2,.7,.3,1.2) both,letter-squish 2.8s ease-in-out 1.8s 2;animation-delay:calc(var(--letter-index) * 45ms),calc(1.8s + var(--letter-index) * 65ms)}
.clay-letter::after{content:attr(data-letter);position:absolute;inset:0;color:transparent;-webkit-text-stroke:.08cqw transparent;background:linear-gradient(165deg,#fff 8%,#fffef3 32%,#e8eddb 62%,#b0c4a6 100%);background-clip:text;-webkit-background-clip:text;text-shadow:none;filter:drop-shadow(0 -.07cqw .04cqw #ffffff90)}
.clay-word-2 .clay-letter{color:#54c58b;text-shadow:0 .12cqw #54c58b,0 .25cqw #36aa73,0 .4cqw #25895c,.1cqw .55cqw .12cqw #092e2680,.15cqw .9cqw .6cqw #001b2680}
.clay-word-2 .clay-letter::after{background-image:linear-gradient(165deg,#d0ffe2 8%,#9affc1 32%,#73efa4 62%,#3eaf75 100%)}
.feedback.is-correct p{margin:0;align-self:center}
.feedback.is-correct .next-button{grid-column:2;grid-row:2}
.game.answer-revealed.correct-revealed .car-scene{height:15.8cqw}
.game.answer-revealed.correct-revealed .car-scene img{width:49%;left:46%;bottom:-7.87cqw}
.game.correct-revealed .scene-caption{top:3cqw}
.game.correct-revealed .scene-note{display:none}
@keyframes letter-pop{0%{opacity:0;transform:translateY(2cqw) rotate(calc(var(--tilt) - 12deg)) scale(.5,1.4)}35%{opacity:1;transform:translateY(-1.3cqw) rotate(calc(var(--tilt) + 8deg)) scale(1.08,.92)}60%{transform:translateY(.5cqw) rotate(var(--tilt)) scale(1.16,.8)}80%{transform:translateY(-.3cqw) rotate(var(--tilt)) scale(.95,1.07)}100%{opacity:1;transform:translateY(0) rotate(var(--tilt)) scale(1)}}
@keyframes letter-squish{0%,65%,100%{transform:translateY(0) rotate(var(--tilt)) scale(1)}76%{transform:translateY(.25cqw) rotate(var(--tilt)) scale(1.08,.9)}86%{transform:translateY(-.5cqw) rotate(calc(var(--tilt) + 3deg)) scale(.96,1.07)}}
.feedback p{font-size:1.65cqw;line-height:1.4;margin:.65cqw 0 0;color:#dde9de;text-wrap:pretty}
.next-button{--shadow:#3eb67d;color:var(--ink);background:var(--mint);border-radius:38% 45% 34% 42% / 42% 35% 45% 38%;padding:1.8cqw 2.8cqw;min-height:48px;min-width:18cqw;white-space:nowrap;font-size:1.6cqw;font-weight:900;letter-spacing:-.03cqw;transform:rotate(-2deg);justify-content:center}
.car-scene{height:34cqw;flex-grow:1;position:relative;overflow:hidden;margin-top:1.4cqw;isolation:isolate}
.car-scene img{width:83%;height:auto;position:absolute;left:17%;bottom:-8.34cqw;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse at 53% 52%,#000 44%,transparent 73%);mask-image:radial-gradient(ellipse at 53% 52%,#000 44%,transparent 73%);z-index:-1;transform-origin:55% 70%}
.game.answer-revealed .car-scene{height:26cqw}
.game.answer-revealed .car-scene img{width:70%;left:27%;bottom:-8.67cqw}
.game.result-view .car-scene{height:30cqw}
.game.result-view .car-scene img{width:78%;left:22%;bottom:-9cqw}
.scene-caption{position:absolute;left:8cqw;top:7cqw;transform:rotate(-9deg);line-height:.9}
.scene-caption>span{font-size:6.9cqw;font-weight:950;letter-spacing:-.5cqw}
.caption-dot{color:var(--mint)}
.scene-caption small{display:block;font-size:2.5cqw;text-align:right;margin-top:.7cqw;letter-spacing:-.13cqw}
.scene-caption b{font-weight:500;font-size:3.8cqw}
.scene-note{position:absolute;left:8cqw;bottom:4cqw;font-size:.95cqw;font-weight:700;letter-spacing:.1cqw;line-height:1.6;color:#b7cdbf}
footer{position:relative;display:flex;justify-content:space-between;align-items:center;padding:2.4cqw 0;margin:0 6cqw;border-top:1px solid #ffffff25;font-size:1cqw;letter-spacing:.12cqw;font-weight:700;color:#b4ccbf}
.result{text-align:center;padding:3cqw 8cqw 0;position:relative;z-index:2;animation:reveal .5s both}
.result>.eyebrow{color:var(--mint)}
.result-score{font-size:17cqw;letter-spacing:-1.1cqw;font-weight:900;line-height:1.1;position:relative;display:inline-block}
.score-divider{font-size:8cqw;color:#88a799;letter-spacing:-.6cqw}
.result-star{font-size:7cqw;position:absolute;right:-10cqw;top:1cqw;color:#f7ba41;transform:rotate(15deg)}
.result h2{font-size:5.5cqw;line-height:1;letter-spacing:-.2cqw;margin:1.3cqw 0;outline:none}
.result>p:not(.eyebrow){font-size:1.9cqw;line-height:1.5;color:#cee0d3;margin:1.5cqw auto;max-width:60cqw}
.result-dots{display:flex;justify-content:center;gap:1.3cqw;margin:2cqw 0 3cqw}
.result-dot{width:4.3cqw;height:4.3cqw;background:var(--mint);border-radius:43% 50% 40% 47%;display:grid;place-items:center;font-size:2.3cqw;color:var(--ink)}
.result-dot.wrong{background:var(--orange)}
.restart-button{background:var(--mint);--shadow:#3eb67d;min-height:60px;height:9cqw;font-weight:900;font-size:2.4cqw;width:47cqw;margin:auto;border-radius:6cqw 5cqw 7cqw 4cqw;transform:rotate(-1deg)}
.restart-button span{font-size:4cqw}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:8}
.confetti i{position:absolute;width:var(--size);height:calc(var(--size) * 1.4);left:var(--left);top:38%;border-radius:42% 55% 35% 46%;background:var(--color);animation:confetti-pop 1.5s ease-out forwards;box-shadow:inset 2px 2px 4px #ffffff50;animation-delay:var(--delay)}
.game.celebrate .clay-shape{animation:clay-bounce .75s ease-in-out}
.game.celebrate .car-scene img{animation:car-hop .8s ease-in-out}
.game.wobble .question-card{animation:clay-wobble .55s ease-in-out}
.game.wobble .car-scene img{animation:car-wiggle .6s ease-in-out}
.question-card.entering{animation:reveal .3s ease both}
@keyframes reveal{from{opacity:0;translate:0 1.4cqw}to{opacity:1;translate:0 0}}
@keyframes clay-bounce{0%,100%{scale:1;translate:0 0}35%{scale:1.15 .85;translate:0 1cqw}65%{scale:.9 1.1;translate:0 -2cqw}}
@keyframes car-hop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-2.5cqw) rotate(-3deg)}70%{transform:translateY(.5cqw) rotate(1deg)}}
@keyframes clay-wobble{0%,100%{translate:0 0}20%,60%{translate:-1cqw 0}40%,80%{translate:1cqw 0}}
@keyframes car-wiggle{0%,100%{rotate:0deg}30%{rotate:-2deg}60%{rotate:2deg}}
@keyframes confetti-pop{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin))}}
@media(hover:hover){.clay-button:hover:not(:disabled){filter:brightness(1.07)}.next-button:hover{background:var(--mint)}.icon-button:hover{background:#ffffff12}}
@media(max-width:600px){.game{width:100%;min-height:100svh}.topbar{height:14cqw}.top-label{font-size:1.65cqw;margin-left:0}.brand{font-size:3.8cqw}.hero{padding-top:9.8cqw}.eyebrow{font-size:1.8cqw}.intro{font-size:2.6cqw}.progress-row{height:8cqw}.question-count{font-size:2.8cqw}.question-count span,.score-mini{font-size:2cqw}.question-card{min-height:30cqw}.card-category{font-size:1.65cqw}.question-card h2{font-size:4.6cqw}.true-button,.false-button{height:17cqw;font-size:5.8cqw}.clay-button small{font-size:1.65cqw}.tap-hint{font-size:2cqw;margin-top:4cqw}.feedback{align-items:stretch;flex-direction:column;gap:3cqw}.feedback strong{font-size:3.3cqw}.feedback p{font-size:2.6cqw}.next-button{font-size:2.3cqw;justify-content:center}.next-button span{font-size:4cqw}.car-scene{height:37cqw;margin-top:3cqw}footer{font-size:1.45cqw;padding:4cqw 0}.scene-note{font-size:1.5cqw}.result>p:not(.eyebrow){font-size:2.8cqw}.result-dot{min-width:25px;min-height:25px;font-size:16px}.restart-button{font-size:3cqw;width:60cqw}.result{padding-top:6cqw}.result h2{font-size:6cqw}.yellow-sticker{font-size:1.5cqw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition:none!important}.confetti{display:none}}