.mood-fx{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s ease}.mood-fx.on{opacity:1}.stage #app{position:relative;z-index:1}.mood-fx.fire,.mood-fx.warm{background:radial-gradient(120% 45% at 50% 108%,rgba(255,120,0,.75),rgba(255,60,0,.35) 40%,transparent 70%);animation:flicker 3.2s ease-in-out infinite alternate;transform-origin:bottom}.mood-fx.warm.on{opacity:.55;animation-duration:2.4s}.mood-fx.fire:before,.mood-fx.fire:after{content:"";position:absolute;inset:auto 0 0 0;height:70%;background-image:radial-gradient(circle,#ffd166 0 2px,transparent 3px),radial-gradient(circle,#ff8c42 0 1.5px,transparent 2.5px),radial-gradient(circle,#fff3b0 0 1px,transparent 2px);background-size:90px 120px,60px 90px,130px 150px;animation:embers 6s linear infinite;opacity:.9;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent);mask-image:linear-gradient(to top,#000 10%,transparent)}.mood-fx.fire:after{background-size:70px 100px,110px 130px,50px 80px;animation-duration:4.4s;animation-delay:-1.5s}@keyframes flicker{0%{opacity:.85}to{opacity:1}}@keyframes embers{0%{background-position:0 0,30px 0,60px 0}to{background-position:10px -240px,20px -270px,70px -300px}}.mood-fx.ice{background:radial-gradient(140% 100% at 50% 50%,transparent 55%,rgba(170,225,255,.55) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg stroke='%23e6f7ff' stroke-width='1.4' stroke-linecap='round' opacity='.28' fill='none'%3E%3Cpath d='M20 4v32M4 20h32M9 9l22 22M31 9 9 31M84 70v28M70 84h28M74 74l20 20M94 74 74 94'/%3E%3C/g%3E%3C/svg%3E");box-shadow:inset 0 0 80px 18px #c8eeff8c;animation:frost 5s ease-in-out infinite alternate}@keyframes frost{0%{opacity:.85}to{opacity:1}}body.stage.mood-ice{background:radial-gradient(1200px 600px at 10% -10%,#2b5b9c 0%,transparent 60%),radial-gradient(900px 500px at 110% 110%,#1f6a8a 0%,transparent 55%),#12203f}body.stage.mood-fire{background:radial-gradient(1200px 600px at 10% -10%,#6a2a9c 0%,transparent 60%),radial-gradient(900px 500px at 110% 110%,#a8321a 0%,transparent 55%),var(--stage)}.mood-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.04em;white-space:nowrap}.mood-badge.fire{color:#fff;background:linear-gradient(135deg,#ff9f1c,#ff3d00);box-shadow:0 0 14px #ff6e00bf;animation:badgeGlow 2.4s ease-in-out infinite alternate}.mood-badge.warm{color:#fff;background:linear-gradient(135deg,#ffb703,#fb8500)}.mood-badge.ice{color:#08304d;background:linear-gradient(135deg,#e0f7ff,#8fd8ff);box-shadow:0 0 12px #8fd8ffcc}@keyframes badgeGlow{to{box-shadow:0 0 20px #ff8c00e6}}.player-options .opt{transition:transform .12s ease,filter .2s ease,opacity .2s ease}.player-options .opt:active{transform:scale(.95)}.player-options .opt .shape{transition:transform .25s var(--pop)}.player-options .opt:hover .shape{transform:rotate(-8deg) scale(1.08)}.answer-sent{font-size:clamp(64px,20vw,96px);animation:popIn .5s var(--pop)}.answer-sent-opt{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:16px;font-weight:900;font-size:18px;background:var(--c);box-shadow:0 0 0 3px #fff;animation:popIn .5s var(--pop) .1s both}.answer-sent-opt .shape{width:26px;height:26px}.result-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 18px 28px;text-align:center;position:relative;overflow:hidden}.result-hero.ok{background:radial-gradient(90% 60% at 50% 30%,rgba(18,183,106,.35),transparent 70%)}.result-hero.bad{background:radial-gradient(90% 60% at 50% 30%,rgba(240,68,56,.28),transparent 70%)}.result-hero .verdict{font-size:clamp(30px,9vw,52px);font-weight:900;line-height:1;margin:0;animation:popIn .5s var(--pop)}.result-hero.ok .verdict{color:#7ef0b5;text-shadow:0 6px 30px rgba(18,183,106,.6)}.result-hero.bad .verdict{color:#ffb4ab;animation:softIn .5s ease both}.xp-big{font-size:clamp(64px,24vw,132px);font-weight:900;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#ffe08a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 24px rgba(255,200,60,.45));animation:popIn .6s var(--pop) .1s both}.xp-big.neg{background:linear-gradient(180deg,#fff,#9fd9ff);-webkit-background-clip:text;background-clip:text}.xp-big small{font-size:.32em;letter-spacing:0;margin-left:6px}.right-answer{margin:0;font-size:17px}.right-answer b{color:#fff}.rank-line{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap}.rank-big{font-size:clamp(44px,14vw,76px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}.rank-big small{font-size:.4em;opacity:.75;margin-left:4px}.climb{font-weight:900;font-size:18px;padding:6px 14px;border-radius:999px;animation:softIn .6s ease .5s both}.climb.up{background:#12b76a40;color:#7ef0b5}.climb.down{background:#f0443833;color:#ffb4ab}.climb.same{background:#ffffff1f}.climb.lead{background:linear-gradient(135deg,#ffd166,#ff9f1c);color:#3b2300}@keyframes climbIn{0%{opacity:0;transform:translateY(26px) scale(.6)}}@keyframes shake{20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.perk-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.perk-row .chip{animation:softIn .5s ease both;font-size:15px}.perk-row .chip:nth-child(2){animation-delay:.12s}.perk-row .chip:nth-child(3){animation-delay:.24s}.mood-banner{width:min(420px,100%);padding:12px 16px;border-radius:18px;font-weight:900;font-size:19px;line-height:1.2;animation:softIn .6s ease .35s both}.mood-banner small{display:block;font-weight:700;font-size:13px;opacity:.9;margin-top:2px}.mood-banner.fire{background:linear-gradient(135deg,#ff9f1c,#ff3d00);box-shadow:0 10px 40px #ff50008c}.mood-banner .flame{display:inline-block;animation:flame 2s ease-in-out infinite alternate}.mood-banner.warm{background:linear-gradient(135deg,#ffb703,#fb8500)}.mood-banner.ice{color:#08304d;background:linear-gradient(135deg,#f0fbff,#9fdcff);box-shadow:0 10px 40px #78c8ff73}.mood-banner.thaw{background:linear-gradient(135deg,#8fd8ff,#7ef0b5);color:#08304d}@keyframes flame{0%{transform:translateZ(0)}to{transform:translate3d(0,-2px,0)}}.shards,.sparks{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.shards i{position:absolute;left:50%;top:38%;width:18px;height:18px;background:linear-gradient(135deg,#fff,#9fdcff);clip-path:polygon(50% 0,100% 60%,30% 100%);animation:burst .9s cubic-bezier(.2,.7,.3,1) forwards}.sparks i{position:absolute;left:50%;top:40%;width:10px;height:10px;border-radius:50%;background:var(--c, #ffe08a);box-shadow:0 0 12px var(--c, #ffe08a);animation:burst .85s ease-out forwards}@keyframes burst{0%{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r, 0deg)) scale(.3);opacity:0}}.tip-card{position:relative;text-align:left;width:min(460px,100%);margin:0 auto;padding:16px 18px 16px 74px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#ffffff29,#ffffff0f);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:tipIn .6s var(--pop) both}.tip-card .tip-icon{position:absolute;left:16px;top:16px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:var(--grad);animation:tipBob 5s ease-in-out infinite}.tip-card .tip-kicker{font-size:12px;font-weight:900;letter-spacing:.12em;color:#ffe08a}.tip-card b{display:block;font-size:17px;margin:2px 0 4px}.tip-card p{margin:0;font-size:14px;line-height:1.4;color:#ffffffe0}.tip-card a{display:inline-block;margin-top:8px;color:#fff;font-weight:800;font-size:13px}.tip-card.tv{width:min(980px,calc(100% - 40px));padding:28px 34px 28px 128px;border-radius:28px}.tip-card.tv .tip-icon{width:80px;height:80px;font-size:46px;left:26px;top:26px;border-radius:24px}.tip-card.tv .tip-kicker{font-size:clamp(14px,1.4vw,18px)}.tip-card.tv b{font-size:clamp(24px,2.6vw,38px)}.tip-card.tv p{font-size:clamp(17px,1.7vw,24px)}@keyframes tipIn{0%{opacity:0;transform:translateY(24px) scale(.96)}}@keyframes tipBob{50%{transform:translate3d(0,-3px,0)}}.dist.big{height:clamp(220px,40vh,440px)}.dist.big .col{width:clamp(70px,13vw,170px)}.dist.big .bar{transform-origin:bottom;animation:barGrow .9s var(--pop) both}.dist.big .col:nth-child(2) .bar{animation-delay:.08s}.dist.big .col:nth-child(3) .bar{animation-delay:.16s}.dist.big .col:nth-child(4) .bar{animation-delay:.24s}.dist.big .n{font-size:clamp(30px,4vw,58px)}.dist.big .shape-chip svg{width:34px;height:34px}.dist.big .col.right .bar{box-shadow:0 0 0 4px #fff,0 0 40px var(--c)}@keyframes barGrow{0%{transform:scaleY(0)}}.hero-stat{display:flex;align-items:baseline;justify-content:center;gap:14px;margin:4px 0 10px;flex-wrap:wrap}.hero-stat .num{font-size:clamp(56px,8vw,120px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff,#c9f7df);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-stat .lbl{font-size:clamp(18px,2vw,28px);font-weight:800;opacity:.85}.fire-strip{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 20px 6px}.fire-strip .who{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-weight:900;font-size:clamp(15px,1.6vw,22px);background:linear-gradient(135deg,#ff9f1c,#ff3d00);box-shadow:0 0 22px #ff5a0099;animation:popIn .5s var(--pop) both}.board.big{width:min(1000px,calc(100% - 32px));gap:12px}.board.big .board-row{font-size:clamp(20px,2.8vw,38px);padding:clamp(12px,1.6vw,22px) clamp(16px,2vw,28px);border-radius:22px;position:relative;overflow:hidden}.board.big .board-row .pos{width:clamp(40px,4vw,58px);height:clamp(40px,4vw,58px);font-size:clamp(18px,2vw,28px);border-radius:14px}.board-row.flip{animation:none;transition:transform .9s var(--pop)}.board-row.fire{background:linear-gradient(90deg,#fff4e0,#ffe0c2);box-shadow:0 0 0 3px #ff8c1a,0 0 32px #ff6e008c}.board-row.fire:after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to top,rgba(255,120,0,.35),transparent);animation:flicker 3s ease-in-out infinite alternate;pointer-events:none}.board-row.ice{background:linear-gradient(90deg,#eef9ff,#d6f0ff);box-shadow:0 0 0 3px #8fd8ff}.board-row .climb-tag{font-size:.55em;font-weight:900;padding:2px 10px;border-radius:999px;background:#dff7ea;color:#0d7a48}.board-row .mood-badge{font-size:.45em}.board-row .score{display:inline-flex;align-items:baseline;gap:6px}.board-row .score small{font-size:.5em;opacity:.6}.lobby-tips{margin:10px auto 20px;min-height:150px}.result-hero.compact{flex:none;gap:8px;padding:10px 14px 14px;border-radius:22px}.result-hero.compact .verdict{font-size:clamp(26px,6vw,38px)}.result-hero.compact .xp-big{font-size:clamp(48px,13vw,80px)}.result-hero.compact .mood-banner{font-size:17px;padding:10px 14px}.study-stage{position:relative;overflow:hidden;transition:background .6s ease}.study-stage>.mood-fx{position:absolute}.study-stage>.narrow{position:relative;z-index:1}body.mood-fire .study-stage{background:radial-gradient(900px 500px at 10% -10%,#6a2a9c 0%,transparent 60%),radial-gradient(700px 400px at 110% 110%,#a8321a 0%,transparent 55%),var(--stage)}body.mood-ice .study-stage{background:radial-gradient(900px 500px at 10% -10%,#2b5b9c 0%,transparent 60%),radial-gradient(700px 400px at 110% 110%,#1f6a8a 0%,transparent 55%),#12203f}.study-fb{margin-top:14px;color:#fff;border:1px solid rgba(255,255,255,.14)}.study-fb.ok{background:radial-gradient(90% 80% at 50% 0%,#12b76a66,#12b76a1f 70%)}.study-fb.bad{background:radial-gradient(90% 80% at 50% 0%,#f0443857,#f044381a 70%)}.study-fb .right-answer{font-size:19px}.study-why{margin:0;max-width:520px;font-size:16px;line-height:1.45;color:#ffffffeb}.mastery-tag{display:inline-block;padding:6px 14px;border-radius:999px;font-weight:900;font-size:15px;background:#ffffff24;animation:softIn .6s ease .2s both}@keyframes softIn{0%{opacity:0;transform:translateY(6px)}}.mastery-tag.good{background:linear-gradient(135deg,#12b76a,#7ef0b5);color:#06331d}.mastery-tag.mid{background:linear-gradient(135deg,#ffb703,#ffe08a);color:#3b2300}.mastery-tag.bad{background:#f044384d;box-shadow:inset 0 0 0 2px #ffb4ab99}html.reduce-motion .mood-fx,html.reduce-motion .mood-fx:before,html.reduce-motion .mood-fx:after,html.reduce-motion .mood-badge,html.reduce-motion .board-row.fire:after,html.reduce-motion .tip-card .tip-icon{animation:none!important}html.reduce-motion .shards,html.reduce-motion .sparks{display:none}
