/* SkillUpBlox game layer: streak, XP ring, heatmap, celebrations, gestures. Delete this file + ui-game.js (and their tags) to revert. */
@keyframes flicker{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12) rotate(2deg)}}
@keyframes flameGlow{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.18)}}
@keyframes flyIn{0%{opacity:0;transform:translate(-55vw,-45vh) scale(.15) rotate(-540deg)}65%{opacity:1;transform:translate(0,12px) scale(1.18) rotate(14deg)}82%{transform:translate(0,-6px) scale(.96) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes celRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes celFade{from{opacity:0}to{opacity:1}}
@keyframes raysSpin{to{transform:rotate(360deg)}}
@keyframes celBg{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes slideOutL{to{opacity:0;transform:translateX(-40px)}}@keyframes slideOutR{to{opacity:0;transform:translateX(40px)}}
@keyframes slideInR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}@keyframes slideInL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes ptrSpin{to{transform:rotate(360deg)}}

/* header chips */
.streak-chip,#fxToggle{width:auto!important;min-width:40px;padding:0 11px!important;gap:5px;display:inline-flex;align-items:center;justify-content:center}
.streak-chip span{display:inline-block;animation:flicker 1.8s ease-in-out infinite;filter:drop-shadow(0 0 6px #f59e0b88)}
.streak-chip.cold span{animation:none;filter:grayscale(1) opacity(.6)}
.streak-chip b{font:800 13px Manrope;color:var(--ink)}
#fxToggle{font-size:16px}#fxToggle.on{background:linear-gradient(135deg,#2563eb22,#7c3aed22)}
.sub-note{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:10200;padding:9px 16px;border-radius:99px;background:#101827;color:#fff;font:700 13px Manrope;box-shadow:0 12px 32px #0006;animation:celRise .3s var(--ease) both;pointer-events:none}

/* game board on XP page */
.sub-gamebar{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(240px,1fr) minmax(300px,1.6fr);gap:14px;margin:0 0 18px}
.sub-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:22px;padding:18px;background:var(--panel,#fff);box-shadow:0 10px 30px #1b2a4410;animation:rise .55s var(--ease) both}
.sub-card:nth-child(2){animation-delay:.07s}.sub-card:nth-child(3){animation-delay:.14s}
.sub-card h4{margin:0 0 12px;font:800 11px Manrope;letter-spacing:.1em;color:var(--muted)}
.sub-ringwrap{display:flex;align-items:center;gap:16px}
.sub-ringbox{position:relative;width:118px;height:118px;flex:0 0 auto}
.sub-ring{width:100%;height:100%;transform:rotate(-90deg)}
.sub-ring-bg{fill:none;stroke:color-mix(in srgb,var(--ink) 10%,transparent);stroke-width:11}
.sub-ring-fg{fill:none;stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset 1.4s var(--ease);filter:drop-shadow(0 0 6px #7c3aed66)}
.sub-ring-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.sub-ring-center small{font:800 9px Manrope;letter-spacing:.14em;color:var(--muted)}
.sub-ring-center b{font:800 34px/1 Manrope;background:linear-gradient(135deg,#2563eb,#7c3aed);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-bottom:.1em}
.sub-ringtext b{display:block;font:800 22px Manrope;color:var(--ink)}.sub-ringtext span{font-size:13px;color:var(--muted);line-height:1.5}
.sub-flamebox{display:flex;align-items:center;gap:14px}
.sub-flame{position:relative;width:64px;height:64px;display:grid;place-items:center;font-size:44px;flex:0 0 auto}
.sub-flame::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,#f59e0b66,transparent 68%);animation:flameGlow 2s ease-in-out infinite}
.sub-flame span{position:relative;animation:flicker 1.6s ease-in-out infinite;transform-origin:50% 90%}
.sub-flame.cold::before{display:none}.sub-flame.cold span{animation:none;filter:grayscale(1) opacity(.55)}
.sub-flame.hot::before{background:radial-gradient(circle,#ef444488,transparent 68%)}
.sub-streaknum b{font:800 38px/1 Manrope;color:var(--ink)}.sub-streaknum span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.sub-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.sub-week div{text-align:center;font:700 10px Manrope;color:var(--muted)}
.sub-week i{display:grid;place-items:center;width:100%;aspect-ratio:1;max-width:34px;margin:4px auto 0;border-radius:11px;font-style:normal;font-size:13px;background:color-mix(in srgb,var(--ink) 8%,transparent);color:transparent;transition:transform .2s var(--ease)}
.sub-week .on i{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;box-shadow:0 6px 14px #ef444444}
.sub-week .today i{outline:2px solid #4f7bff;outline-offset:2px}
.sub-heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(12,1fr);gap:4px}
.sub-heat i{aspect-ratio:1;border-radius:5px;background:color-mix(in srgb,var(--ink) 8%,transparent);animation:celBg .5s var(--ease) both;animation-delay:calc(var(--c)*28ms)}
.sub-heat .l1{background:#93c5fd}.sub-heat .l2{background:#60a5fa}.sub-heat .l3{background:#6366f1}.sub-heat .l4{background:#7c3aed;box-shadow:0 0 8px #7c3aed88}
.sub-heat .f{visibility:hidden}.sub-heat .t{outline:2px solid #ec4899;outline-offset:1px}
[data-theme="dark"] .sub-heat .l1{background:#1e3a8a}[data-theme="dark"] .sub-heat .l2{background:#2563eb}
.sub-heatmeta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:12px;color:var(--muted);gap:8px;flex-wrap:wrap}
.sub-legend{display:inline-flex;gap:3px;align-items:center}.sub-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;background:color-mix(in srgb,var(--ink) 8%,transparent)}
.sub-legend i:nth-child(2){background:#93c5fd}.sub-legend i:nth-child(3){background:#60a5fa}.sub-legend i:nth-child(4){background:#6366f1}.sub-legend i:nth-child(5){background:#7c3aed}

/* celebration */
.sub-celebrate{position:fixed;inset:0;z-index:10100;display:grid;place-items:center;padding:20px;background:radial-gradient(700px 500px at 50% 40%,#4f46e555,transparent 70%),rgba(6,10,22,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:celFade .35s both;overflow:auto}
.sub-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.sub-cel-card{position:relative;z-index:2;text-align:center;color:#fff;max-width:420px;width:100%}
.sub-cel-stage{position:relative;width:240px;height:240px;margin:0 auto 6px;display:grid;place-items:center}
.sub-cel-rays{position:absolute;inset:-40px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffffff2e 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,transparent 24%,#000 26%,transparent 70%);mask:radial-gradient(circle,transparent 24%,#000 26%,transparent 70%);animation:raysSpin 14s linear infinite,celBg .8s both}
.sub-cel-badge{animation:flyIn 1.1s cubic-bezier(.2,.9,.25,1) .1s both;position:relative;z-index:2}
.sub-cel-badge .badge-medallion{width:132px!important;height:132px!important;animation:none!important;box-shadow:0 0 70px color-mix(in srgb,var(--c) 70%,transparent),0 20px 50px #0008,inset 0 0 0 4px #ffffffb0!important}
.sub-cel-badge .badge-medallion strong{font-size:50px}.sub-cel-badge .badge-medallion small{font-size:11px}
.sub-cel-badge .badge-medallion i{width:38px;height:38px;font-size:20px;right:-10px;bottom:-8px}
.sub-cel-kicker{display:inline-block;padding:7px 16px;border-radius:99px;background:linear-gradient(135deg,#f59e0b,#ec4899);font:800 12px Manrope;letter-spacing:.2em;animation:celRise .5s var(--ease) .7s both;box-shadow:0 8px 24px #ec489955}
.sub-cel-card h2{font:800 clamp(28px,7vw,40px)/1.1 Manrope;letter-spacing:-.03em;margin:14px 0 8px;animation:celRise .5s var(--ease) .85s both}
.sub-cel-card p{color:#cbd5e8;line-height:1.6;margin:0 auto 22px;max-width:340px;animation:celRise .5s var(--ease) 1s both}
.sub-cel-card .cta{animation:celRise .5s var(--ease) 1.15s both;min-width:180px;justify-content:center}

/* gestures */
#sub-ptr{position:fixed;top:-48px;left:50%;z-index:10150;width:42px;height:42px;margin-left:-21px;border-radius:50%;display:grid;place-items:center;background:var(--panel,#fff);color:#2563eb;font:800 18px Manrope;box-shadow:0 10px 28px #1b2a4440;border:1px solid var(--line);pointer-events:none;opacity:0;transition:opacity .2s}
#sub-ptr.show{opacity:1}#sub-ptr.ready{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}
#sub-ptr.spin i{animation:ptrSpin .7s linear infinite}#sub-ptr i{font-style:normal;display:block;transition:transform .2s}
.lesson-player.sub-out-l{animation:slideOutL .16s ease-in both}.lesson-player.sub-out-r{animation:slideOutR .16s ease-in both}
.lesson-player.sub-in-r{animation:slideInR .32s var(--ease) both}.lesson-player.sub-in-l{animation:slideInL .32s var(--ease) both}
.sub-swipe-hint{margin:14px 0 0;font-size:12px;color:var(--muted)}
html,body{overscroll-behavior-y:contain}
@media(max-width:1100px){.sub-gamebar{grid-template-columns:1fr 1fr}.sub-gamebar .sub-card:last-child{grid-column:1/-1}}
@media(max-width:760px){.sub-gamebar{grid-template-columns:1fr}.sub-card{padding:16px}.sub-streaknum b{font-size:32px}.streak-chip b{display:inline}.sub-note{top:76px}}