/* Axcended games: animation layer and the arcade games */
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:950}
.fx-shake{animation:fxShake .42s cubic-bezier(.36,.07,.19,.97) both}
@keyframes fxShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

/* Page entrance and hover life */
.games-hero{isolation:isolate}
.fx-sym{position:absolute;bottom:-40px;color:rgba(192,152,72,.22);font:700 1.5rem 'Playfair Display',serif;z-index:0!important;animation:symRise linear infinite;pointer-events:none}
@keyframes symRise{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translateY(-360px) rotate(40deg);opacity:0}}
.subject-card,.game-type-card{animation:cardIn .45s cubic-bezier(.2,.9,.3,1.2) both}
.subject-card:nth-child(2),.game-type-card:nth-child(2){animation-delay:.05s}
.subject-card:nth-child(3),.game-type-card:nth-child(3){animation-delay:.1s}
.subject-card:nth-child(4),.game-type-card:nth-child(4){animation-delay:.15s}
.subject-card:nth-child(5),.game-type-card:nth-child(5){animation-delay:.2s}
.game-type-card:nth-child(n+6){animation-delay:.25s}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.game-type-card:hover .gt-icon{animation:iconHop .5s ease}
.subject-card:hover .subject-icon{animation:iconHop .5s ease}
@keyframes iconHop{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-7px) rotate(-8deg)}70%{transform:translateY(1px) rotate(5deg)}}
.game-type-card.feature{border-color:#c09848;background:linear-gradient(160deg,#fff 55%,#faf4e6)}
.feature-tag{position:absolute;top:10px;right:10px;background:var(--navy);color:#e3c68a;font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:50px;padding:2px 8px}

/* Axi the mascot, drawn from the Axcended mark */
.axi{display:block;overflow:visible}
.axi .orb{transform-box:fill-box;transform-origin:center;animation:axiBob 1.6s ease-in-out infinite}
.axi .eye{transform-box:fill-box;transform-origin:center;animation:axiBlink 4s infinite}
@keyframes axiBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes axiBlink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.axi-wrap.jump{animation:axiJump .5s ease}
.axi-wrap.sad{animation:axiSad .6s ease}
@keyframes axiJump{0%,100%{transform:translateY(0) scale(1)}15%{transform:scale(1.15,.85)}50%{transform:translateY(-34px) scale(.95,1.08)}}
@keyframes axiSad{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}}
.pl-axi{width:44px;flex-shrink:0}

/* Results */
.fx-stars{display:flex;justify-content:center;gap:10px;margin:8px 0 6px}
.fx-star{width:46px;height:46px;color:#e6dfd0}
.fx-star.on{color:#c09848;animation:starPop .55s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 4px 8px rgba(192,152,72,.5))}
.fx-star:nth-child(2).on{animation-delay:.22s}.fx-star:nth-child(3).on{animation-delay:.44s}
.fx-star:nth-child(2):not(.on),.fx-star:not(.on){opacity:.7}
@keyframes starPop{0%{transform:scale(0) rotate(-120deg);opacity:0}100%{transform:none;opacity:1}}
.rs-xp .pl-track i{animation:xpFill 1s ease both}
@keyframes xpFill{from{width:0}}

/* Level up and badge moments */
#lvlUp{position:fixed;inset:0;z-index:960;display:flex;align-items:center;justify-content:center;background:rgba(11,25,48,.78);animation:lvlFade 2.4s ease both;pointer-events:none}
@keyframes lvlFade{0%,100%{opacity:0}10%,82%{opacity:1}}
.lvl-rays{position:absolute;width:520px;height:520px;background:repeating-conic-gradient(rgba(192,152,72,.2) 0 12deg,transparent 12deg 30deg);border-radius:50%;animation:raySpin 6s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%)}
@keyframes raySpin{to{transform:rotate(360deg)}}
.lvl-card{position:relative;text-align:center;color:#fff;animation:lvlPop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes lvlPop{from{transform:scale(.3)}to{transform:none}}
.lvl-card small{display:block;font:800 .8rem 'Inter',sans-serif;letter-spacing:.3em;color:#e3c68a}
.lvl-card b{display:block;font:800 7rem/1 'Playfair Display',serif;color:#c09848}
.lvl-card span{font:700 1.3rem 'Playfair Display',serif}
.bd-toast{position:fixed;right:18px;bottom:90px;z-index:970;display:flex;align-items:center;gap:12px;background:var(--navy);color:#fff;border:1px solid #c09848;border-radius:14px;padding:12px 16px;box-shadow:0 14px 34px rgba(0,0,0,.35);animation:toastSlide 4s cubic-bezier(.2,1,.3,1) both;max-width:300px}
@keyframes toastSlide{0%{transform:translateX(130%)}10%,88%{transform:none}100%{transform:translateX(130%)}}
.bd-toast svg{width:34px;height:34px;color:#c09848;flex-shrink:0}
.bd-toast small{display:block;color:#e3c68a;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

/* Quest Map */
.qm{position:relative;overflow-x:auto;padding:8px 0 12px;margin-bottom:6px;-webkit-overflow-scrolling:touch}
.qm-track{position:relative;height:168px}
.qm-line{position:absolute;left:0;top:0}
.qm-line path{fill:none;stroke:#c09848;stroke-width:4;stroke-linecap:round;stroke-dasharray:2 12;animation:qmFlow 1.2s linear infinite}
@keyframes qmFlow{to{stroke-dashoffset:-14}}
.qm-node{position:absolute;width:112px;text-align:center;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;color:var(--navy)}
.qm-dot{width:58px;height:58px;margin:0 auto 4px;border-radius:50%;background:#fff;border:3px solid #d8cfbc;display:flex;align-items:center;justify-content:center;font:800 1.1rem 'Playfair Display',serif;color:#8d8471;transition:transform .2s;position:relative}
.qm-node:hover .qm-dot{transform:scale(1.12)}
.qm-node.done .qm-dot{background:var(--navy);border-color:#c09848;color:#c09848}
.qm-node.next .qm-dot{border-color:#c09848;color:var(--navy);animation:qmPulse 1.6s ease-out infinite}
@keyframes qmPulse{0%{box-shadow:0 0 0 0 rgba(192,152,72,.55)}100%{box-shadow:0 0 0 18px rgba(192,152,72,0)}}
.qm-node.on .qm-dot{background:#c09848;color:var(--navy);border-color:#c09848}
.qm-stars{color:#c09848;font-size:.76rem;letter-spacing:1px;height:13px;line-height:13px}
.qm-stars i{color:#d8cfbc;font-style:normal}
.qm-name{font-size:.74rem;font-weight:700;line-height:1.2;margin-top:2px}

/* Meteor Rush dressing */
.rush-field{background:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 90px 80px,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 150px 140px,#fff,transparent),radial-gradient(1.5px 1.5px at 40px 170px,rgba(255,255,255,.6),transparent),radial-gradient(circle at 80% 110%,rgba(181,83,45,.55),transparent 50%),linear-gradient(180deg,#071222 0%,#14304f 100%);background-size:200px 200px,200px 200px,200px 200px,200px 200px,100% 100%,100% 100%;animation:starDrift 9s linear infinite}
@keyframes starDrift{to{background-position:0 200px,0 200px,0 200px,0 200px,0 0,0 0}}
.rush-ground{height:14px;background:linear-gradient(90deg,#b5532d,#c09848,#b5532d);background-size:200% 100%;animation:lavaFlow 2.4s linear infinite;box-shadow:0 -6px 22px rgba(192,152,72,.55)}
@keyframes lavaFlow{to{background-position:200% 0}}
.rush-tile{box-shadow:0 -10px 16px -4px rgba(192,152,72,.75),0 -22px 26px -8px rgba(181,83,45,.5);transition:background .12s,border-color .12s}
.rush-tile.hit{animation:tileBlast .36s ease-out both}
.rush-tile.miss,.rush-tile.landed{animation:wrongShake .4s ease both}
@keyframes tileBlast{to{scale:1.5;opacity:0}}

/* Shared arcade answers */
.ax-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 16px 18px}
.ax-opt{padding:13px 10px;min-height:54px;border-radius:12px;border:2px solid #d8cfbc;background:#fff;color:var(--navy);font:700 .9rem/1.25 'Inter',sans-serif;cursor:pointer;transition:transform .12s,background .12s,border-color .12s;word-break:break-word}
.ax-opt:hover:not(:disabled){transform:translateY(-2px);border-color:#c09848;background:#faf4e6}
.ax-opt.ok{background:#2f7d4f;border-color:#2f7d4f;color:#fff}
.ax-opt.no{background:#b42318;border-color:#b42318;color:#fff;animation:wrongShake .4s ease both}
.ax-q{font-weight:800;color:var(--navy);padding:14px 18px 0;font-size:1.05rem;line-height:1.35;animation:slideInUp .25s ease both}

/* Boss Battle */
.boss-arena{position:relative;height:230px;overflow:hidden;background:radial-gradient(ellipse at 75% 35%,var(--boss-glow,rgba(181,83,45,.5)),transparent 60%),linear-gradient(180deg,#0b1930,#1a3a5c 78%,#0a1526 78%)}
.boss-arena::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22%;background:repeating-linear-gradient(90deg,rgba(192,152,72,.14) 0 2px,transparent 2px 46px)}
.boss-hp{position:absolute;top:10px;width:42%;z-index:3;color:#fff;font:700 .72rem 'Inter',sans-serif}
.boss-hp.you{left:12px}.boss-hp.them{right:12px;text-align:right}
.boss-bar{height:11px;background:rgba(255,255,255,.16);border-radius:8px;overflow:hidden;margin-top:4px}
.boss-bar i{display:block;height:100%;border-radius:8px;transition:width .35s cubic-bezier(.3,1.3,.5,1)}
.boss-hp.you i{background:#2f9e5b}.boss-hp.them i{background:#c09848}
.boss-axi{position:absolute;left:11%;bottom:14%;width:92px;z-index:2}
.boss-mon{position:absolute;right:9%;bottom:12%;width:150px;z-index:2;animation:monIdle 2.2s ease-in-out infinite}
@keyframes monIdle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.03,.97)}}
.boss-mon.hit svg{animation:monHit .42s ease}
@keyframes monHit{0%{filter:brightness(4)}30%{transform:translateX(16px) rotate(7deg)}70%{transform:translateX(-7px) rotate(-3deg)}100%{filter:none;transform:none}}
.boss-mon.lunge{animation:monLunge .55s cubic-bezier(.5,0,.3,1)}
@keyframes monLunge{40%{transform:translateX(-46%) scale(1.14)}100%{transform:none}}
.boss-mon.dead{animation:monDie .9s ease-in both}
@keyframes monDie{20%{transform:rotate(-6deg) scale(1.08)}100%{transform:translateY(40px) rotate(24deg) scale(.1);opacity:0}}
.boss-shot{position:absolute;left:24%;bottom:40%;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe6b0,#c09848 55%,#b5532d);box-shadow:0 0 22px 7px rgba(192,152,72,.8);z-index:4;animation:shotFly .34s cubic-bezier(.4,0,1,1) both}
@keyframes shotFly{to{left:72%;bottom:44%;scale:1.5}}
.boss-dmg{position:absolute;right:20%;top:22%;z-index:5;color:#fff;font:800 2rem 'Playfair Display',serif;text-shadow:0 2px 0 #b5532d,0 0 16px rgba(192,152,72,.9);animation:dmgUp .9s ease-out both}
.boss-dmg.bad{left:15%;right:auto;text-shadow:0 2px 0 #7a1a12}
@keyframes dmgUp{0%{opacity:0;transform:translateY(16px) scale(.5)}20%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:translateY(-52px)}}
.boss-time{height:7px;background:#ebe6db}
.boss-time i{display:block;height:100%;background:#c09848;transition:width .1s linear}
.boss-time i.low{background:#b42318}
.boss-flash{position:absolute;inset:0;background:#fff;z-index:6;animation:flashOut .35s ease-out both;pointer-events:none}
@keyframes flashOut{from{opacity:.85}to{opacity:0}}

/* Summit Climb */
.climb{display:grid;grid-template-columns:190px minmax(0,1fr)}
.climb-scene{position:relative;height:400px;overflow:hidden;background:linear-gradient(180deg,#14304f 0%,#3b6a86 55%,#d9b070 100%);border-bottom-left-radius:16px}
.climb-sun{position:absolute;top:26px;right:22px;width:44px;height:44px;border-radius:50%;background:#f1d59a;box-shadow:0 0 40px 12px rgba(241,213,154,.55)}
.climb-peak{position:absolute;bottom:0;left:-30%;width:160%;height:82%;background:linear-gradient(180deg,#203a55,#0f2238);clip-path:polygon(0 100%,18% 52%,32% 68%,52% 8%,70% 56%,84% 40%,100% 100%)}
.climb-world{position:absolute;left:0;right:0;bottom:0;height:0;transition:transform .45s cubic-bezier(.3,1.2,.5,1)}
.climb-ledge{position:absolute;width:88px;height:12px;border-radius:7px;background:linear-gradient(180deg,#c09848,#7f6530);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.climb-flag{position:absolute;width:34px}
.climb-axi{position:absolute;width:50px;transition:left .4s ease,bottom .4s cubic-bezier(.3,1.5,.5,1)}
.climb-water{position:absolute;left:-10px;right:-10px;bottom:0;height:0;background:linear-gradient(180deg,rgba(47,124,150,.92),rgba(14,46,74,.97));z-index:5}
.climb-water::before{content:'';position:absolute;left:0;right:0;top:-9px;height:18px;background:radial-gradient(circle at 12px 16px,transparent 12px,rgba(47,124,150,.92) 13px) repeat-x;background-size:26px 18px;animation:waveMove 1.3s linear infinite}
@keyframes waveMove{to{background-position:26px 0}}
.climb-panel{min-width:0}
.climb-note{padding:10px 18px 0;font-size:.78rem;color:#6b7280}

@media(max-width:620px){
  .climb{grid-template-columns:1fr}
  .climb-scene{height:210px;border-radius:0}
  .ax-opts{grid-template-columns:1fr}
  .boss-arena{height:190px}.boss-mon{width:112px}.boss-axi{width:70px}
  .lvl-card b{font-size:5rem}
}
@media(prefers-reduced-motion:reduce){
  .fx-sym,.axi .orb,.axi .eye,.qm-line path,.qm-node.next .qm-dot,.rush-field,.rush-ground,.boss-mon,.climb-water::before,.lvl-rays{animation:none!important}
  .subject-card,.game-type-card{animation:none}
}

/* Endless Summit Climb */
.climb-ledge.cp{background:linear-gradient(180deg,#ffe6b0,#c09848);width:100px;box-shadow:0 0 14px rgba(255,217,138,.8)}
.climb-scene{transition:background 1.2s}
.climb-scene.zone-mountain{background:linear-gradient(180deg,#2a4a6b 0%,#6f8ea6 60%,#c9a877 100%)}
.climb-scene.zone-snow{background:linear-gradient(180deg,#7fa8c9 0%,#c9dcea 60%,#f3f7fb 100%)}
.climb-scene.zone-snow .climb-peak{background:linear-gradient(180deg,#f3f7fb,#9db6cb)}
.climb-scene.zone-space{background:radial-gradient(1.5px 1.5px at 30px 40px,#fff,transparent),radial-gradient(1.5px 1.5px at 120px 90px,#fff,transparent),radial-gradient(1px 1px at 70px 150px,#fff,transparent),linear-gradient(180deg,#050b18,#14304f);background-size:180px 180px,180px 180px,180px 180px,100% 100%}
.climb-scene.zone-space .climb-sun{background:#e9edf2;box-shadow:0 0 30px 8px rgba(233,237,242,.45)}
.climb-scene.danger::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;box-shadow:inset 0 0 44px 12px rgba(181,35,24,.7);animation:dangerBeat .55s ease-in-out infinite}
@keyframes dangerBeat{50%{opacity:.45}}
.climb-gain{position:absolute;left:0;right:0;top:44%;z-index:7;text-align:center;font:800 1.25rem Inter,sans-serif;color:#fff;text-shadow:0 2px 0 #0b1930,0 0 12px #c09848;opacity:0;pointer-events:none}
.climb-gain.go{animation:dmgUp .9s ease-out both}
.climb-gain.big{color:#ffe6b0;font-size:1.45rem}
.sp-wrap{padding:12px 18px 0}
.sp-lbl{font-size:.74rem;font-weight:700;color:#9a7830;margin-bottom:4px}
.sp-bar{height:10px;background:#ebe6db;border-radius:8px;overflow:hidden}
.sp-bar i{display:block;height:100%;width:100%;border-radius:8px;background:linear-gradient(90deg,#e3c68a,#c09848)}
.sp-bar i.over{background:#b6c0ca}
#musicBtn{position:fixed;left:14px;bottom:14px;z-index:520;background:#0b1930;color:#e3c68a;border:1px solid #c09848;border-radius:50px;padding:7px 14px;font:700 .78rem Inter,sans-serif;cursor:pointer}
.fast-pop{position:fixed;top:12%;left:50%;transform:translateX(-50%);z-index:945;background:#0b1930;color:#ffe6b0;border:2px solid #c09848;border-radius:50px;padding:7px 18px;font:800 1rem Inter,sans-serif;pointer-events:none;animation:comboIn .9s ease both}
@media(max-width:620px){.climb-gain{font-size:1rem}.climb-gain.big{font-size:1.15rem}}