@font-face{font-family:Pop;src:url(lilita.ttf) format('truetype');font-display:swap}
@font-face{font-family:Condensed;src:url(barlow-condensed.ttf) format('truetype');font-weight:800;font-display:swap}
:root{--bg:#F8C5DA;--paper:#FFF9ED;--ink:#182D58;--accent:#B81551;--edge:#eadfce;--shade:#71384928;--display:Condensed,'Arial Narrow',sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{font-family:var(--display)}button{font:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:7px}svg{fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.game{height:100dvh;min-height:100svh;max-width:490px;margin:auto;display:flex;flex-direction:column;padding:max(28px,env(safe-area-inset-top)) 28px max(26px,env(safe-area-inset-bottom));isolation:isolate}
.brand{font:clamp(34px,8.5vw,46px)/1 Pop,sans-serif;letter-spacing:-1.5px;color:var(--ink);margin:0 0 12px;flex:none;text-align:left;user-select:none}
.screen{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.screen[hidden]{display:none}
.deck{width:min(77vw,350px,44svh);aspect-ratio:.7;position:relative;isolation:isolate;perspective:1000px}
.card,.back{background:var(--paper);border-radius:clamp(18px,5vw,27px);border:1px solid #fffdf8;box-shadow:0 15px 22px -10px #71384950,0 3px 3px #7138490a}
.back{position:absolute;inset:0;pointer-events:none}.back-two{transform:rotate(7deg) translate(8px,13px);background:#ede4d5;z-index:-2}.back-one{transform:rotate(3deg) translate(2px,7px);background:#f7efdf;z-index:-1}
.start{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:12% 6% 16%;transform:rotate(-6deg);color:var(--ink);transition:transform .2s,box-shadow .2s;container-type:size}
.question{font:900 min(80cqw,72cqh)/1 Arial,sans-serif;color:var(--accent);flex:1;display:flex;align-items:center;justify-content:center;width:100%;letter-spacing:-.05em}
.start-label{display:flex;align-items:center;justify-content:center;gap:10px;font:800 clamp(22px,6.4vw,32px)/1 var(--display);white-space:nowrap;width:100%;padding-top:12px}.start-label svg{width:29px;height:29px;flex:none}
@media(hover:hover){.start:hover{transform:rotate(-3deg) translateY(-5px);box-shadow:0 21px 28px -11px #71384960}}
.start:active{transform:rotate(-3deg) translateY(3px) scale(.985);box-shadow:0 8px 15px -9px #71384960}
.waiting{width:100%;height:100%;position:relative;display:flex;align-items:center;flex-direction:column;padding:12% 7% 10%;container-type:size}.ready{font:800 clamp(26px,8vw,40px)/1 var(--display);margin:0}.number{font:900 min(80cqw,64cqh)/1 Arial,sans-serif;color:var(--accent);flex:1;display:flex;align-items:center;justify-content:center;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.dots{display:flex;gap:13px;padding-top:10px}.dot{display:block;width:12px;height:12px;border-radius:50%;background:#182d5829}.dot.filled{background:var(--accent)}.beat{animation:beat .22s ease-out}@keyframes beat{from{transform:translateY(4px) scale(.97)}to{transform:translateY(0) scale(1)}}
.challenge{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:20px;padding-top:20px;align-items:stretch;justify-content:stretch}
.result{position:relative;display:flex;align-items:center;flex-direction:column;padding:clamp(32px,6svh,50px) 22px 30px;min-height:0;max-height:650px;width:100%}
.prompt{font:800 clamp(34px,9.5vw,48px)/.99 var(--display);text-align:center;text-wrap:balance;margin:0 0 20px;width:100%;letter-spacing:-.5px;flex:none}.prompt.long{font-size:clamp(29px,8.5vw,42px)}
.with{font:800 clamp(17px,4.8vw,22px)/1 var(--display);margin:0;flex:none}
.letter-area{flex:1;min-height:0;width:100%;display:grid;place-items:center;container-type:size}.letter{font:900 min(89cqh,88cqw)/.9 Arial,sans-serif;color:var(--accent);margin:0;letter-spacing:-.06em;transform:translateX(-.025em)}
.corner{position:absolute;width:23px;height:23px;border-color:var(--accent);border-style:solid;pointer-events:none}.corner-top{top:15px;left:15px;border-width:7px 0 0 7px}.corner-bottom{bottom:15px;right:15px;border-width:0 7px 7px 0}
.again{border:0;border-radius:100px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;gap:19px;min-height:64px;width:100%;padding:14px 24px;box-shadow:0 5px 0 #101f40,0 10px 15px -10px #182d5855;font:800 clamp(27px,7.2vw,35px)/1 var(--display);transition:transform .15s,box-shadow .15s;margin-bottom:5px}.again svg{width:30px;height:30px;flex:none;stroke-width:2.7}.again:active{transform:translateY(4px);box-shadow:0 1px 0 #101f40}.again:focus:not(:focus-visible){outline:none}
@media(hover:hover){.again:hover{background:#213b6c}.again:hover svg{transform:rotate(-15deg);transition:transform .2s}}
.reveal .result{animation:reveal .38s cubic-bezier(.2,.75,.3,1)}@keyframes reveal{from{opacity:0;transform:perspective(800px) rotateY(-12deg) translateY(8px)}to{opacity:1;transform:none}}
.site-footer{max-width:650px;margin:auto;padding:35px 24px 45px;font:16px/1.5 system-ui,sans-serif;text-align:center;color:var(--ink)}.site-footer p{margin:0 0 15px}.site-footer a{color:inherit;text-underline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.question{font-size:min(135cqw,95cqh);min-height:0}
.letter{font-size:min(94cqh,112cqw)}
.start-label{font-size:clamp(24px,8vw,36px);flex-shrink:0}
@media(min-width:850px){.game{padding-top:32px;padding-bottom:32px}.brand{font-size:44px}.challenge{padding-top:24px}.prompt{font-size:48px}.prompt.long{font-size:42px}}
@media(max-height:650px){.game{padding:18px 24px 20px}.brand{font-size:32px;margin-bottom:6px}.deck{width:min(70vw,39svh)}.start-label{font-size:23px;gap:7px}.start-label svg{width:23px;height:23px}.challenge{padding-top:14px;gap:15px}.result{padding:32px 18px 26px}.prompt{font-size:33px;margin-bottom:12px}.prompt.long{font-size:29px}.with{font-size:17px}.again{min-height:52px;font-size:27px;padding:11px 22px}.again svg{width:25px;height:25px}.corner{width:18px;height:18px}.corner-top{border-width:5px 0 0 5px;top:12px;left:12px}.corner-bottom{border-width:0 5px 5px 0;bottom:12px;right:12px}.ready{font-size:26px}.dots{gap:10px}.dot{width:10px;height:10px}}
@media(max-height:480px) and (min-width:600px){.game{max-width:900px;padding:18px 28px}.brand{font-size:30px}.deck{width:39svh}.start-label{font-size:17px;gap:4px}.start-label svg{width:18px;height:18px}.challenge{grid-template-columns:minmax(0,1fr) 180px;grid-template-rows:minmax(0,1fr);gap:22px;padding-top:12px}.result{height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;column-gap:12px;padding:25px 20px}.prompt,.prompt.long{grid-column:1;grid-row:1;font-size:clamp(26px,4vw,36px);margin:0;align-self:center}.with{grid-column:1;grid-row:2;align-self:start;justify-self:center;font-size:15px}.letter-area{grid-column:2;grid-row:1/3;height:100%}.again{align-self:end;font-size:27px;min-height:58px;padding:13px;gap:12px}.ready{font-size:20px}.dots{gap:7px}.dot{width:7px;height:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-height:650px) and (min-height:481px){.start-label{font-size:27px}}

.brand-group{flex:none;margin-bottom:12px}.brand-group .brand{margin-bottom:0}.brand-claim{font:500 14px/1.3 system-ui,sans-serif;letter-spacing:.1px;margin:7px 0 0;color:var(--ink)}
@media(max-height:650px){.brand-group{margin-bottom:6px}.brand-claim{font-size:12px;margin-top:5px}}