@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#0e1014;--panel:#171a20;--text:#f5f7fa;--muted:#9ca3af;--green:#67b97a;--green2:#8bd39b;--red:#d66b6b;--line:#303641;--shadow:0 22px 60px rgba(0,0,0,.38)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -10%,#28303d 0,transparent 45%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{cursor:pointer}.app,.screen{min-height:100vh}.hidden{display:none!important}
.topbar{width:min(1040px,calc(100% - 32px));margin:auto;padding:24px 0 10px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;font-weight:700}.paw{margin-right:6px}.challenge-status{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.03);transition:.2s}
.hero{width:min(900px,calc(100% - 32px));margin:0 auto;padding:26px 0 50px;text-align:center}.mascot-wrap{position:relative;width:fit-content;margin:0 auto 12px}.mascot{width:92px;height:92px;border-radius:50%;overflow:hidden;border:4px solid #2b313b;box-shadow:var(--shadow);animation:breathe 2.8s ease-in-out infinite;background:#222}.mascot img{width:100%;height:100%;object-fit:cover}.speech{position:absolute;left:72px;top:-4px;white-space:nowrap;background:#f5f7fa;color:#171a20;padding:8px 12px;border-radius:12px;font-size:11px;font-weight:700;transform:rotate(1deg);transition:transform .2s,opacity .2s}
h1{margin:24px 0 8px;font-size:clamp(28px,5vw,46px);letter-spacing:-.04em}.subtitle{color:var(--muted);margin:0 auto 30px;max-width:650px;line-height:1.55}.secret-hint{color:#c5ccd4}
.board{display:flex;flex-direction:column;gap:12px;align-items:center;margin:26px auto 28px}.word-row{display:flex;gap:6px;justify-content:center}.word-spacer{height:3px}.cell{width:clamp(25px,5.5vw,48px);height:clamp(36px,7vw,52px);border:2px solid var(--line);border-radius:8px;display:grid;place-items:center;font-size:clamp(16px,3.5vw,23px);font-weight:800;background:#14171c;transition:transform .18s,border-color .18s,background .18s}.cell.revealed{border-color:#66717f;background:#242a33;animation:pop .22s ease-out}
.status-row{display:flex;justify-content:space-between;gap:24px;text-align:left;width:min(760px,100%);margin:0 auto 20px}.label{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:800;margin-bottom:7px}.wrong{color:var(--red);font-weight:800;letter-spacing:.15em}.hint{text-align:right;color:var(--muted);font-size:12px}
.keyboard{width:min(760px,100%);margin:auto;display:grid;grid-template-columns:repeat(9,1fr);gap:7px}.key{min-height:46px;border:0;border-radius:8px;background:#272c35;color:var(--text);font-weight:800;font-size:14px;transition:transform .1s,background .15s}.key:hover{background:#353c48}.key:active{transform:translateY(2px)}.key.correct{background:var(--green);color:#07100a}.key.wrong{background:#4a2a2d;color:#eaa4a4}
.controls{margin-top:22px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.primary,.secondary,.ghost{border-radius:10px;padding:12px 16px;font-weight:800}.primary{border:0;background:var(--green2);color:#101510}.secondary{border:1px solid #39414c;background:#20252d;color:var(--text)}.ghost{border:0;background:transparent;color:var(--muted)}
.reveal{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(103,185,122,.18),transparent 38%),#0d1110}.reveal-inner{width:min(980px,calc(100% - 28px));margin:auto;padding:70px 0 60px;text-align:center}.eyebrow{color:var(--green2);font-size:12px;font-weight:900;letter-spacing:.16em}.reveal-intro{color:#c4cbd3;font-size:18px;margin:18px 0 12px;min-height:26px}.word-reveal{min-height:230px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;transition:opacity .5s,transform .5s}.reveal-line{font-size:clamp(22px,5vw,42px);font-weight:800;letter-spacing:-.04em;color:#d9dee4;opacity:.92}.big-word{font-size:clamp(64px,15vw,150px);line-height:.82;font-weight:900;letter-spacing:-.08em;color:var(--green2);text-shadow:0 0 0 rgba(139,211,155,0);transform:scale(.55) translateY(20px);opacity:0}.show-first .big-word{animation:wordIn .8s cubic-bezier(.16,1,.3,1) forwards}.show-second .big-word{animation:wordInBig 1s cubic-bezier(.16,1,.3,1) forwards;text-shadow:0 0 50px rgba(139,211,155,.42)}.word-reveal.complete{animation:wordExit .6s ease forwards}.final-message{margin-top:8px}.final-message.final-arrive{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}.final-message h2{font-size:clamp(42px,9vw,82px);line-height:.95;letter-spacing:-.06em;margin:0 0 14px}.final-message h2 span{color:var(--green2)}.reveal-copy{color:#c4cbd3;font-size:18px;margin:0 0 32px}.reveal-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:stretch}.photo-card{position:relative;margin:0;overflow:hidden;border-radius:20px;border:1px solid #353c45;background:#181c21;box-shadow:var(--shadow);animation:rise .75s cubic-bezier(.2,.8,.2,1) both}.photo-card:nth-child(2){animation-delay:.12s}.photo-card img{display:block;width:100%;height:100%;object-fit:cover;min-height:340px}.photo-badge{position:absolute;z-index:2;left:14px;top:14px;padding:8px 11px;border-radius:999px;background:rgba(8,10,12,.78);backdrop-filter:blur(8px);font-size:11px;font-weight:900}.deploy{color:#89939e;font-size:12px;margin:22px 0}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;width:8px;height:15px;background:var(--green2);top:-30px;animation:fall 2.7s linear forwards}.confetti i:nth-child(3n){background:#e0b85e}.confetti i:nth-child(4n){background:#d97878}.confetti i:nth-child(5n){background:#8ca7d8}
dialog{border:1px solid #39414c;border-radius:18px;background:#171a20;color:var(--text);width:min(500px,calc(100% - 28px));padding:26px;box-shadow:var(--shadow)}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}dialog h3{margin:0 0 7px;font-size:22px}dialog p{color:var(--muted);margin:0 0 18px}.dialog-close{position:absolute;right:12px;top:8px;border:0;background:none;color:var(--muted);font-size:25px}#phrase-input{width:100%;border:1px solid #3a424d;border-radius:10px;background:#0f1216;color:var(--text);padding:13px 14px;outline:none}#phrase-input:focus{border-color:var(--green2)}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.guess-error{min-height:18px;color:#e78b8b;font-size:12px;font-weight:700;margin-top:8px}
@keyframes breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}@keyframes pop{0%{transform:scale(.75)}100%{transform:scale(1)}}@keyframes rise{from{opacity:0;transform:translateY(35px) scale(.97)}to{opacity:1;transform:none}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}@keyframes wordIn{0%{opacity:0;transform:scale(.55) translateY(20px)}70%{opacity:1;transform:scale(1.08) translateY(0)}100%{opacity:1;transform:scale(1)}}@keyframes wordInBig{0%{opacity:0;transform:scale(.45) translateY(30px)}55%{opacity:1;transform:scale(1.15) translateY(0)}75%{transform:scale(.97)}100%{opacity:1;transform:scale(1)}}@keyframes wordExit{to{opacity:0;transform:scale(.96) translateY(-12px)}}
@media(max-width:650px){.speech{left:60px;font-size:9px}.keyboard{grid-template-columns:repeat(7,1fr)}.key{min-height:42px}.status-row{flex-direction:column;gap:12px}.hint{text-align:left}.reveal-grid{grid-template-columns:1fr}.photo-card img{min-height:0;max-height:68vh}.word-reveal{min-height:190px}.reveal-line{font-size:22px}.big-word{font-size:76px}}