:root{--ink:#101738;--cream:#fff8df;--yellow:#ffd83d;--pink:#ff5b9b;--cyan:#3dd9e7;--green:#72e08f;--red:#ff6572}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0d1430;font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink)}body{display:flex;justify-content:center}.app{width:min(100%,430px);min-height:100dvh;background:radial-gradient(circle at 85% 4%,#5650ae 0 12%,transparent 35%),linear-gradient(160deg,#182152,#111733 68%);overflow:hidden}.screen{min-height:100dvh;padding:22px 18px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-x:hidden}.hidden{display:none!important}.brand{color:white;padding:32px 9px 20px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:1.6px;color:var(--yellow)}h1{font-size:56px;line-height:.84;letter-spacing:-3px;margin:15px 0 19px;text-transform:uppercase}h1 em{font-style:normal;color:var(--cyan)}.brand p{font-size:16px;line-height:1.4;max-width:330px;margin:0;color:#d9ddff}.panel{margin-top:auto;background:var(--cream);border:3px solid var(--ink);border-radius:25px;padding:19px 16px 15px;box-shadow:0 10px 0 var(--pink)}.panel h2{margin:0 0 13px;font-size:21px}.levels{display:grid;gap:9px}.levels button{font:inherit;text-align:left;border:2px solid var(--ink);background:white;border-radius:13px;padding:12px 14px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;box-shadow:0 3px 0 var(--ink);cursor:pointer}.levels button:active,.restart:active{transform:translateY(3px);box-shadow:none}.levels button:nth-child(1){background:#dcffe4}.levels button:nth-child(2){background:#dffbff}.levels button:nth-child(3){background:#ffe3ee}.levels b{font-size:17px}.levels small{font-size:11px;font-weight:700;max-width:158px;text-align:right}.micro{font-size:10px;text-align:center;margin:14px 0 0;font-weight:700;color:#657}.top{height:49px;display:flex;align-items:center;justify-content:space-between;color:white}.top>div:nth-child(2){display:flex;flex-direction:column;align-items:center;gap:2px}.top strong{font-size:11px;letter-spacing:1px}.iconbtn{width:38px;height:38px;border:2px solid white;border-radius:50%;background:transparent;color:white;font-size:22px}.pill{font-size:9px;letter-spacing:1.4px;font-weight:900;color:var(--yellow)}.score{font-weight:900;color:var(--yellow)}.cluebox{background:var(--cream);border:3px solid var(--ink);border-radius:18px;padding:12px 15px;margin:13px 0 14px;box-shadow:0 5px 0 var(--pink);min-height:105px;display:flex;flex-direction:column;justify-content:center}.cluebox span{font-size:9px;letter-spacing:1.2px;font-weight:900;color:#695b75}.cluebox h2{font-size:19px;line-height:1.25;margin:6px 0 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.candidate{appearance:none;padding:0;overflow:hidden;min-height:230px;background:#d7eef1;border:3px solid #0c1330;border-radius:17px;box-shadow:0 6px 0 rgba(0,0,0,.28);position:relative;color:inherit;font:inherit;cursor:pointer}.candidate:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.28)}.candidate svg{display:block;width:100%;height:180px}.camtag{position:absolute;top:7px;left:7px;background:#11182f;color:white;padding:4px 7px;border-radius:8px;font-size:9px;font-weight:900;letter-spacing:1px}.code{position:absolute;right:7px;top:7px;background:var(--yellow);border:2px solid var(--ink);border-radius:8px;padding:3px 6px;font-size:12px;font-weight:1000}.traits{height:45px;background:white;border-top:2px solid var(--ink);display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;font-size:17px}.traits small{font-size:9px;line-height:1.05;font-weight:900}.candidate.correct{outline:4px solid #73ef9b;background:#a8f5bd}.candidate.wrong{outline:4px solid var(--red);filter:saturate(.65)}.candidate.dim{opacity:.58}.feedback{margin:10px 0 0;min-height:25px;color:white;text-align:center;font-size:15px;font-weight:900}.result-screen{justify-content:center}.result-card{text-align:center;background:var(--cream);border:3px solid var(--ink);border-radius:27px;padding:25px 20px;box-shadow:0 11px 0 var(--cyan)}.result-icon{width:78px;height:78px;margin:-66px auto 15px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);border:3px solid var(--ink);font-size:42px;box-shadow:0 5px 0 var(--ink)}.result-card h2{font-size:34px;margin:9px 0 3px}.result-card>p{margin:0;color:#596;line-height:1.4}.stars{font-size:38px;letter-spacing:7px;margin:19px 0}.reward-note{font-size:11px;line-height:1.4;background:#e8eaff;border:2px solid var(--ink);padding:10px;border-radius:12px;margin-bottom:17px}.restart,.change{width:100%;font:900 16px inherit;border-radius:13px;padding:13px;cursor:pointer}.restart{background:var(--pink);border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);color:white}.change{margin-top:10px;border:0;background:transparent;color:var(--ink);font-size:12px}@media(max-height:760px){.screen{padding-top:12px}.cluebox{min-height:86px;margin:8px 0 10px}.candidate{min-height:202px}.candidate svg{height:155px}.top{height:40px}.feedback{margin-top:7px}.brand{padding-top:10px}h1{font-size:50px}.panel{padding-top:14px}}
