*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% -10%,#32206b 0,transparent 42%),radial-gradient(ellipse at 0 55%,#101b48 0,transparent 38%),#09091d;color:#f8f6ff;font-family:system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}#app{max-width:780px;margin:auto;padding:18px}header{display:flex;justify-content:space-between;align-items:center}.logo{font-weight:1000;letter-spacing:1px;direction:ltr}.logo b{color:#27cfff}select,input{font:inherit}select,.fields input,.auth input,.inline input{background:#0b0a20;border:1px solid #464076;border-radius:10px;color:#fff;padding:11px;min-width:0}.hero{text-align:center;padding:30px 0 12px}.eyebrow{color:#27cfff;font-size:12px;font-weight:900;letter-spacing:2px}.hero h1{font-size:clamp(34px,8vw,56px);line-height:1.08;margin:13px 0}.hero h1 span{background:linear-gradient(90deg,#27cfff,#b28aff,#ff62c0);background-clip:text;color:transparent}.hero p,.muted{color:#aaa7cb;line-height:1.65;font-size:13px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.stats div,.panel{background:linear-gradient(145deg,#1a1738f2,#111027f5);border:1px solid #393364;border-radius:19px;padding:15px}.stats div{text-align:center}.stats b{display:block;color:#27cfff;font-size:23px}.stats small{color:#aaa7cb}.panel{margin:13px 0;box-shadow:0 12px 40px #0002}.panel h2{font-size:18px;margin:0 0 14px}.profile{display:flex;align-items:center;gap:12px}.avatar{width:55px;height:55px;border-radius:17px;background:linear-gradient(135deg,#27cfff,#9c5cff,#ff62c0);display:grid;place-items:center;font-size:23px;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.fields{flex:1;min-width:0}.fields label{display:block;color:#aaa7cb;font-size:12px;margin-bottom:5px}.fields input{width:100%}.upload,button{cursor:pointer}.upload{font-size:12px;background:#242047;border:1px solid #51478a;padding:10px;border-radius:11px}.auth{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.buttons{display:flex;gap:9px;margin:12px 0}.buttons button{flex:1}.primary,button{border:0;border-radius:13px;padding:12px 14px;color:#fff;font-weight:800;background:linear-gradient(100deg,#9b4fff,#5d69ff);box-shadow:0 6px 25px #7949ff2b}.alt{background:#211c44!important;border:1px solid #504582!important;box-shadow:none!important}.primary{width:100%;margin-top:8px}.hidden{display:none!important}.inline{display:flex;gap:8px;margin:10px 0}.inline input{flex:1;width:50%}.gamehead{display:flex;justify-content:space-between;background:#211d45;border-radius:12px;padding:10px}.progress{height:6px;background:#302a53;border-radius:99px;overflow:hidden;margin:14px 0}.progress div{height:100%;background:linear-gradient(90deg,#27cfff,#9c5cff,#ff62c0);transition:width .2s}.word{direction:ltr;text-align:center;font-size:clamp(30px,7vw,42px);margin:25px 0 8px}.center{text-align:center}.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.answer{background:#211d45;border:1px solid #484078;min-height:60px}.answer.correct{background:#123a39;border-color:#42f5b0}.answer.wrong{background:#47203a;border-color:#ff648f}.answer:disabled{opacity:.9}.feedback{text-align:center;font-weight:800;min-height:24px}.good{color:#42f5b0}.bad{color:#ff8cac}.reviewrow{padding:10px;border-bottom:1px solid #393364}.reviewrow b{direction:ltr;display:inline-block}footer{text-align:center;color:#79759d;font-size:11px;line-height:1.7;margin:24px 0}@media(max-width:520px){#app{padding:13px}.auth{grid-template-columns:1fr}.stats{gap:6px}.stats div{padding:10px 4px}.stats b{font-size:20px}.panel{padding:13px}.answers{gap:8px}.answer{font-size:14px;padding:10px 6px}.profile{gap:8px}}h3{font-size:14px;margin:16px 0 8px;color:#cfcbf0}.wide{width:100%;margin-top:8px}.small{padding:8px 11px;font-size:12px;border-radius:10px}button:disabled{opacity:.55;cursor:default}.upload.disabled{opacity:.5;pointer-events:none}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:min(92vw,520px);background:#211d45;border:1px solid #504582;color:#fff;padding:12px 16px;border-radius:14px;font-weight:700;font-size:14px;z-index:50;transition:opacity .2s,transform .2s;text-align:center;box-shadow:0 10px 40px #0008}.toast.show{opacity:1;transform:translate(-50%)}.toast.bad{border-color:#ff648f;background:#47203a}.toast.good{border-color:#42f5b0;background:#123a39}.codebox{display:flex;align-items:center;gap:10px;background:#0b0a20;border:1px dashed #51478a;border-radius:12px;padding:9px 12px;margin:10px 0;color:#aaa7cb;font-size:12px}.codebox code{direction:ltr;font-size:18px;letter-spacing:3px;font-weight:900;color:#27cfff;flex:1;text-align:center;user-select:all}.codebox.big code{font-size:26px}.notice{background:#1c1840;border:1px solid #51478a;border-radius:15px;padding:12px;margin:12px 0}.notice p{margin:0 0 8px}.notice h3{margin-top:0}.searching{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.searching p{flex:1;min-width:150px;margin:0}.spinner{width:20px;height:20px;border-radius:50%;border:3px solid #393364;border-top-color:#27cfff;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 4px;border-bottom:1px solid #393364}.row:last-child{border-bottom:0}.who{display:flex;align-items:center;gap:9px;min-width:0}.who span,.who b{overflow:hidden;text-overflow:ellipsis}.act{display:flex;gap:6px;flex-shrink:0}.act button{margin:0}.avatar.mini{width:34px;height:34px;border-radius:11px;font-size:15px;flex-shrink:0}.rank{width:24px;text-align:center;color:#27cfff;font-weight:900}.meRow{background:#241f4f;border-radius:10px}.versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;background:#211d45;border-radius:14px;padding:10px}.pl{display:flex;align-items:center;gap:8px;min-width:0}.pl.opp{justify-content:flex-end;flex-direction:row-reverse}.pl b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}.score{color:#27cfff;font-weight:900;font-size:18px}.mid{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;font-weight:800}.tm b{color:#ff62c0;font-size:18px}.answer.sel{border-color:#9c5cff;background:#2d2760}.bigscore{text-align:center;font-size:44px;font-weight:900;margin:8px 0;direction:ltr}.bigscore span{color:#79759d}.panel.hidden,.hidden{display:none!important}input:focus,select:focus,button:focus-visible{outline:2px solid #27cfff;outline-offset:2px}@media(max-width:520px){.pl b{max-width:80px}.act{flex-direction:column}.bigscore{font-size:36px}}.earned b{color:#27cfff}.auth .buttons,.auth #forgot,.auth label{grid-column:1/-1}#forgot{justify-self:start}.row.clickable{cursor:pointer}.row.clickable:hover{background:#ffffff0d}.modal{position:fixed;inset:0;background:#000a;display:grid;place-items:center;z-index:50;padding:16px}.sheet{background:#15122e;border:1px solid #484078;border-radius:20px;padding:20px;width:min(380px,100%)}.pmhead{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}.pmhead h3{margin:0}.avatar.big{width:84px;height:84px;font-size:34px;border-radius:24px}.pmstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.pmstats div{background:#211d45;border-radius:12px;padding:10px 4px;text-align:center}.pmstats b{display:block;color:#27cfff;font-size:19px}.pmstats small{color:#aaa7cb;font-size:11px}.sheet .wide{width:100%;margin-top:8px}#app{max-width:1120px;padding:20px clamp(14px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}#app>header,#app>.hero,#app>.stats,#app>#game,#app>#result,#app>#leaderPanel,#app>footer{grid-column:1/-1}#app>.panel{margin:0}#app>#game,#app>#result{max-width:760px;width:100%;justify-self:center}@media(max-width:860px){#app{grid-template-columns:1fr}}header{padding:4px 0}.hright{display:flex;gap:8px;align-items:center}.iconbtn{padding:0;width:44px;height:44px;border-radius:14px;font-size:20px;display:grid;place-items:center}select{min-height:44px;padding:0 12px;border-radius:12px}.logo{font-size:clamp(18px,3vw,24px)}.hero{padding:34px 0 16px}.hero h1{font-size:clamp(38px,7vw,68px)}.hero p{font-size:clamp(14px,2vw,18px)}.stats{gap:14px}.stats div{padding:20px 10px}.stats b{font-size:clamp(26px,4vw,38px)}.stats small{font-size:clamp(12px,1.8vw,15px)}.panel{padding:clamp(16px,2.4vw,26px);border-radius:24px}.panel h2{font-size:clamp(19px,2.6vw,24px)}button,.upload{min-height:48px;font-size:15px}.avatar{width:clamp(72px,10vw,96px);height:clamp(72px,10vw,96px);border-radius:26px;font-size:clamp(30px,4vw,40px)}.avatar.mini{width:44px;height:44px;border-radius:14px;font-size:19px}.fields input,.auth input,.inline input{min-height:48px;font-size:16px}.row{padding:12px 6px;border-radius:14px}.word{font-size:clamp(34px,8vw,56px)}.answer{min-height:76px;font-size:clamp(16px,2.6vw,20px);border-radius:16px}.gamehead,.versus{font-size:clamp(14px,2vw,17px)}body{background:radial-gradient(ellipse at 80% -10%,#3b2480 0,transparent 45%),radial-gradient(ellipse at 0 55%,#122060 0,transparent 42%),radial-gradient(ellipse at 100% 100%,#4a1d6b 0,transparent 40%),#09091d;background-attachment:fixed}.panel,.stats div{animation:rise .5s ease both}.hero h1 span{background-size:200% 100%;animation:shine 6s linear infinite}button:not(:disabled):hover{filter:brightness(1.12);transform:translateY(-1px)}button:not(:disabled):active{transform:translateY(1px)}button{transition:transform .12s,filter .12s}.answer.sel{outline:2px solid #27cfff}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes shine{0%{background-position:0 0}to{background-position:200% 0}}.opt{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid #393364;font-size:16px}.opt.col{flex-direction:column;align-items:stretch;gap:10px}.opt input[type=checkbox]{width:24px;height:24px;accent-color:#9b4fff}.opt input[type=range]{width:100%;accent-color:#9b4fff}#installHint{font-size:13px}.sheet h3{margin:0 0 6px;font-size:20px}.mascot{text-align:center;font-size:clamp(46px,9vw,72px);line-height:1;margin:14px 0 0;min-height:1em;user-select:none}.mascot.think{animation:bob 1.2s ease-in-out infinite}.mascot.pop{animation:popin .45s cubic-bezier(.2,1.6,.4,1) both}.feedback.good{animation:popin .4s ease both}.feedback.bad{animation:shake .4s ease both}.answer.correct{animation:popin .4s ease both;box-shadow:0 0 22px #42f5b055}.answer.wrong{animation:shake .4s ease both}.answer{transition:transform .12s,background .2s}.answer:not(:disabled):active{transform:scale(.96)}.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}.fxe{position:absolute;bottom:-40px;animation:floatup 2s ease-out forwards;opacity:0}@keyframes floatup{0%{transform:translate(0) scale(.5);opacity:0}15%{opacity:1}to{transform:translate(var(--dx,0),-92vh) scale(1.2) rotate(25deg);opacity:0}}@keyframes popin{0%{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}@keyframes bob{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}.word.qin{animation:wordin .45s cubic-bezier(.2,1.4,.4,1) both}.answers.qin .answer{animation:rise .35s ease both}.answers.qin .answer:nth-child(2){animation-delay:.07s}.answers.qin .answer:nth-child(3){animation-delay:.14s}.answers.qin .answer:nth-child(4){animation-delay:.21s}@keyframes wordin{0%{transform:scale(.4) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}.answer.tap{animation:tapp .35s ease both}@keyframes tapp{0%{transform:scale(1)}40%{transform:scale(1.07);box-shadow:0 0 26px #27cfff88}to{transform:scale(1)}}.tm.low b,.tm.low{color:#ff8cac}.tm.low{animation:beat .5s ease-in-out infinite}#bar.low{background:linear-gradient(90deg,#ff648f,#ffb347)}@keyframes beat{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}body.flash-good:after,body.flash-bad:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:55;animation:flashfade .7s ease-out forwards}body.flash-good:after{background:radial-gradient(circle at 50% 45%,#42f5b055,transparent 65%)}body.flash-bad:after{background:radial-gradient(circle at 50% 45%,#ff648f44,transparent 65%)}@keyframes flashfade{0%{opacity:1}to{opacity:0}}.scorepop{position:absolute;left:50%;top:38%;transform:translate(-50%);font-size:clamp(40px,12vw,76px);font-weight:1000;color:#42f5b0;text-shadow:0 4px 24px #000a,0 0 30px #42f5b0aa;white-space:nowrap;animation:spop 1.5s cubic-bezier(.2,1.4,.4,1) forwards}.scorepop.big{color:#ffb347;text-shadow:0 4px 24px #000a,0 0 30px #ff8a3daa}@keyframes spop{0%{transform:translate(-50%,40px) scale(.3);opacity:0}25%{transform:translate(-50%) scale(1.15);opacity:1}70%{transform:translate(-50%,-20px) scale(1);opacity:1}to{transform:translate(-50%,-90px) scale(.9);opacity:0}}.bgfx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.16}.bgfx span{position:absolute;bottom:-60px;animation:bgup linear infinite}@keyframes bgup{0%{transform:translateY(0) rotate(0)}to{transform:translateY(-115vh) rotate(40deg)}}#app{position:relative;z-index:1}.bigscore{animation:popin .6s cubic-bezier(.2,1.6,.4,1) both}.mascot.pop{animation:popin .45s cubic-bezier(.2,1.6,.4,1) both,bob 1.4s .5s ease-in-out infinite}.leave{background:#211c44!important;border:1px solid #504582!important;box-shadow:none!important;font-size:13px;padding:8px 12px;margin-bottom:8px}
