.guesswhat-app{max-width:680px;margin:2rem auto;padding:1rem;color:#16120f;font-family:inherit}.guesswhat-card{background:#dbd5ad;border:1px solid #b8b28e;border-radius:20px;padding:clamp(1.25rem,4vw,2.5rem);box-shadow:0 12px 35px #16120f14}.guesswhat-kicker,.guesswhat-progress{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#16120f;font-weight:700}.guesswhat-card h1,.guesswhat-card h2{line-height:1.12;margin:.7rem 0 1rem}.guesswhat-card h1{font-size:clamp(2rem,7vw,3.5rem)}.guesswhat-card h2{font-size:clamp(1.45rem,4vw,2.25rem)}.guesswhat-options{display:grid;gap:.75rem;margin-top:1.5rem}.guesswhat-option,.guesswhat-primary,.guesswhat-next{border:0;border-radius:12px;padding:1rem 1.1rem;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s,background .15s}.guesswhat-option{background:#eeead3;text-align:left;color:#16120f}.guesswhat-option:hover:not(:disabled){background:#e5e3ff;transform:translateY(-1px)}.guesswhat-option.is-correct{background:#eeead3;color:#16120f}.guesswhat-option.is-wrong{background:#c7c19b;color:#16120f}.guesswhat-option:disabled{cursor:default}.guesswhat-primary,.guesswhat-next{background:#16120f;color:#dbd5ad;margin-top:1.5rem}.guesswhat-next{margin-top:1rem}.guesswhat-feedback{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #b8b28e}.guesswhat-feedback a{color:#0610ff}.guesswhat-error{border-left:4px solid #0610ff;background:#eeead3;padding:1rem 1.25rem;border-radius:8px}.guesswhat-error strong{color:#16120f}@media (max-width:600px){.guesswhat-app{margin:1rem auto;padding:.5rem}.guesswhat-card{border-radius:14px;padding:1.25rem}}

.guesswhat-app{background:#dbd5ad}.guesswhat-card h1,.guesswhat-card h2,.guesswhat-card p{color:#16120f}.guesswhat-number{display:block;color:#0610ff;font-size:clamp(4.2rem,18vw,7.8rem);line-height:1.05;margin:.75rem 0 1.25rem;font-weight:700}.guesswhat-option.is-correct{outline:2px solid #16120f}.guesswhat-option.is-correct::after{content:" ✓"}.guesswhat-option.is-wrong::after{content:" ✕"}.guesswhat-app button:focus-visible,.guesswhat-app a:focus-visible{outline:3px solid #0610ff;outline-offset:4px}

.guesswhat-number{text-align:center;white-space:nowrap;overflow-wrap:normal}.guesswhat-question{display:block;text-align:center}.guesswhat-instruction{text-align:center;font-weight:700}.guesswhat-feedback:empty{display:none}.guesswhat-card{overflow-wrap:break-word}

.guesswhat-feedback{font-size:115%;line-height:1.5}.guesswhat-card .guesswhat-feedback-title{text-align:center;color:#0610ff;font-size:2em;font-weight:700;line-height:1.25;margin:0 0 .6em}.guesswhat-feedback p{font-size:1em}.guesswhat-feedback .guesswhat-next{font-size:1em}

.guesswhat-app{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 1rem);padding-bottom:max(1rem,env(safe-area-inset-bottom,0px))}.guesswhat-result .guesswhat-feedback{border-top:0;padding-top:0;margin-top:0}.guesswhat-result .guesswhat-next{width:100%}.guesswhat-result .guesswhat-feedback-title:focus{outline:none}

.guesswhat-feedback .guesswhat-answer-text{font-size:1.2em;line-height:1.5}

/* Center every game button and its label. */
.guesswhat-app .guesswhat-options{justify-items:center}.guesswhat-app .guesswhat-option{width:100%;text-align:center}.guesswhat-app .guesswhat-primary,.guesswhat-app .guesswhat-next{display:block;margin-left:auto;margin-right:auto;text-align:center}

.guesswhat-round-actions{display:grid;gap:.75rem;margin-top:1.5rem}.guesswhat-round-actions .guesswhat-primary{width:100%;margin-top:0}

/* Question entrance: pixels 800 ms, question 1500 ms, answer labels 400 ms. */
.guesswhat-hero-stage{display:block;position:relative}.guesswhat-hero-stage .guesswhat-number{margin:0;padding:.75rem 0 1.25rem}.guesswhat-hero-stage .is-question-mark{font-size:clamp(6.93rem,29.7vw,12.87rem)}.guesswhat-pixels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.guesswhat-option-label{display:inline-block}.guesswhat-app .guesswhat-option:disabled{opacity:1;cursor:default}

/* One heartbeat after the result card fades in; transform keeps the layout still. */
@keyframes guesswhat-heartbeat{0%,100%{transform:scale(1)}18%{transform:scale(1.16)}36%{transform:scale(1)}54%{transform:scale(1.09)}76%{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){.guesswhat-result .guesswhat-number{transform-origin:center;animation:guesswhat-heartbeat 650ms ease-in-out 240ms 1}}

/* Portrait stage: 9:16 on larger screens, available viewport on phones.
   Minimum heights deliberately allow long copy and larger text to grow. */
.guesswhat-app{box-sizing:border-box;width:100%;max-width:480px;margin:1.5rem auto;padding:0;background:transparent;container-type:inline-size}
.guesswhat-app *{box-sizing:border-box}
.guesswhat-app .guesswhat-card{display:flex;flex-direction:column;min-height:800px;min-height:177.778cqw;padding:clamp(20px,6cqw,32px);gap:0}
.guesswhat-progress,.guesswhat-kicker{flex-shrink:0;line-height:1.5}
.guesswhat-task>h2{margin:0 0 1rem;font-size:clamp(1.35rem,5.5cqw,1.85rem)}
.guesswhat-hero-stage{display:flex;align-items:center;justify-content:center;min-height:220px}
.guesswhat-hero-stage .guesswhat-number{width:100%;padding:1rem 0;font-size:clamp(4.2rem,25cqw,7.5rem)}
.guesswhat-hero-stage .is-question-mark{font-size:clamp(6.93rem,41.25cqw,12.375rem)}
.guesswhat-app .guesswhat-options{margin-top:auto;padding-top:1rem;flex-shrink:0}
.guesswhat-app .guesswhat-option{min-height:48px}
.guesswhat-task .guesswhat-instruction{margin:0 0 1rem}
.guesswhat-result>.guesswhat-number{display:flex;align-items:center;justify-content:center;min-height:220px;margin:0;font-size:clamp(4.2rem,25cqw,7.5rem);flex-shrink:0}
.guesswhat-result .guesswhat-feedback{display:flex;flex-direction:column;flex:1;min-width:0}
.guesswhat-result .guesswhat-feedback-title{font-size:clamp(1.8rem,7cqw,2.4rem)}
.guesswhat-result .guesswhat-next{margin-top:auto;min-height:48px}
.guesswhat-result .guesswhat-feedback>p:last-of-type{padding-bottom:1rem}
.guesswhat-start h1,.guesswhat-finish h1{margin-top:auto;font-size:clamp(2rem,9cqw,3rem)}
.guesswhat-start>.guesswhat-primary,.guesswhat-finish>.guesswhat-round-actions{margin-top:auto;width:100%}
@media(max-width:600px){
 .guesswhat-app{margin:.5rem auto;max-width:480px;scroll-margin-top:env(safe-area-inset-top,0px)}
 .guesswhat-app .guesswhat-card{min-height:calc(100vh - 1rem);min-height:calc(100svh - 1rem);padding:20px;padding-top:max(20px,env(safe-area-inset-top,0px));padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
 .guesswhat-hero-stage,.guesswhat-result>.guesswhat-number{min-height:180px;min-height:clamp(140px,25svh,200px)}
}

.guesswhat-app .guesswhat-instruction{font-size:.9rem;font-weight:400;text-align:center;line-height:1.4}