/* Hero Builder (20 Oct 2026): layered hero, armour, weapons, pets, profile frames, titles, arenas. */
.herofig { position: relative; display: inline-grid; place-items: center; width: 130px; height: 120px; }
.herofig.big { width: 230px; height: 210px; }
.herofig.mid { width: 170px; height: 150px; }
.herofig .sprite { position: relative; z-index: 2; font-size: 76px; line-height: 1.1; filter: drop-shadow(0 8px 0 rgba(0,0,0,.35)); }
.herofig.big .sprite { font-size: 120px; }
.herofig.mid .sprite { font-size: 88px; }
.herofig .hw { position: absolute; right: -.42em; bottom: .05em; font-size: .5em; transform: rotate(-20deg); filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); }
.herofig .armour { position: absolute; z-index: 1; width: 78%; aspect-ratio: 1; border-radius: 46% 46% 50% 50% / 40% 40% 60% 60%; top: 4%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--arm, #fff) 55%, transparent), color-mix(in srgb, var(--arm, #fff) 18%, transparent) 70%);
  border: 4px solid var(--arm, #fff); box-shadow: 0 0 18px var(--arm, #fff), inset 0 0 18px color-mix(in srgb, var(--arm, #fff) 40%, transparent); }
.herofig .pet { position: absolute; z-index: 3; left: -6%; bottom: 0; font-size: 40px; animation: petbob 2.4s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(0,0,0,.3)); }
.herofig.big .pet { font-size: 64px; }
.herofig.mid .pet { font-size: 48px; }
@keyframes petbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* animated armour */
.armour.anim-galaxy, .swatch.anim-galaxy { --arm: #b388ff; background: conic-gradient(from 0deg, #3a0ca3, #7209b7, #4cc9f0, #3a0ca3) !important; animation: hspin 6s linear infinite; }
.armour.anim-rainbow, .swatch.anim-rainbow { --arm: #ff5ec4; background: conic-gradient(#ff4d6d, #ffd23f, #2ee87a, #4cc9f0, #b388ff, #ff4d6d) !important; animation: hspin 5s linear infinite; opacity: .85; }
.armour.anim-dragon, .swatch.anim-dragon { --arm: #2ee87a; background: repeating-radial-gradient(circle at 50% 30%, #1b9e5a 0 8px, #ffd23f 9px 11px, #157347 12px 20px) !important; animation: hpulse 2s ease-in-out infinite; }
.armour.anim-phoenix, .swatch.anim-phoenix { --arm: #ff6b00; background: radial-gradient(circle at 50% 70%, #ffe600, #ff6b00 45%, #d00000 80%) !important; animation: hflicker 1.2s ease-in-out infinite; }
@keyframes hspin { to { transform: rotate(360deg); } }
@keyframes hpulse { 0%, 100% { box-shadow: 0 0 14px #2ee87a; } 50% { box-shadow: 0 0 34px #ffd23f; } }
@keyframes hflicker { 0%, 100% { box-shadow: 0 0 18px #ff6b00; filter: brightness(1); } 50% { box-shadow: 0 0 40px #ffd23f; filter: brightness(1.2); } }

/* pet tints: one emoji, many legendary looks */
.glow-green { filter: drop-shadow(0 0 10px #2ee87a) !important; }
.tint-ice { filter: hue-rotate(160deg) saturate(1.4) drop-shadow(0 0 10px #9bf6ff) !important; }
.tint-gold { filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.15) drop-shadow(0 0 12px #ffd23f) !important; }
.tint-fire { filter: sepia(1) saturate(6) hue-rotate(-30deg) brightness(1.05) drop-shadow(0 0 12px #ff6b00) !important; }
.tint-frost { filter: sepia(1) saturate(3) hue-rotate(160deg) brightness(1.2) drop-shadow(0 0 12px #9bf6ff) !important; }

/* profile picture + frames */
.pfp { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--bg); border: 3px solid var(--gold); line-height: 1; }
.pfp.sm { font-size: 20px; border-width: 2px; }
.topbar .avatar.pfp { width: 58px; height: 58px; font-size: 40px; }
.fr-gold { border-color: var(--gold) !important; }
.fr-silver { border-color: #dfe6f0 !important; box-shadow: 0 0 8px #dfe6f0; }
.fr-ocean { border-color: #00b4d8 !important; box-shadow: 0 0 10px #00b4d8; }
.fr-leaf { border-color: #2ee87a !important; border-style: dashed !important; }
.fr-candy { border: 4px solid transparent !important; background: linear-gradient(var(--bg), var(--bg)) padding-box, repeating-linear-gradient(45deg, #ff5ec4 0 6px, #fff 6px 12px) border-box !important; }
.fr-flame { border: 4px solid transparent !important; background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(#ffe600, #ff6b00, #d00000, #ff6b00, #ffe600) border-box !important; box-shadow: 0 0 14px #ff6b00; }
.fr-electric { border-color: #4cc9f0 !important; box-shadow: 0 0 6px #4cc9f0, 0 0 16px #ffe600; animation: hzap 1.4s steps(2) infinite; }
.fr-galaxy { border: 4px solid transparent !important; background: radial-gradient(#1a1f55, #0d1030) padding-box, conic-gradient(#3a0ca3, #7209b7, #4cc9f0, #3a0ca3) border-box !important; box-shadow: 0 0 14px #7209b7; }
.fr-rainbow { border: 4px solid transparent !important; background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(#ff4d6d, #ffd23f, #2ee87a, #4cc9f0, #b388ff, #ff4d6d) border-box !important; box-shadow: 0 0 14px #ff5ec4; }
@keyframes hzap { 50% { box-shadow: 0 0 2px #4cc9f0, 0 0 22px #ffe600; } }
.htitle { display: inline-block; font-size: 13px; font-weight: 700; color: var(--gold); background: rgba(255,210,63,.12); border: 1px solid rgba(255,210,63,.4); border-radius: 999px; padding: 1px 9px; vertical-align: middle; }

/* arenas */
.arena.themed { border-radius: 24px; padding: 16px 10px; position: relative; overflow: hidden; }
.ar-classic { background: radial-gradient(ellipse at 50% 120%, #2d3580, #0d1030 70%); }
.ar-forest { background: linear-gradient(#1b4332, #2d6a4f 60%, #40916c); }
.ar-beach { background: linear-gradient(#48cae4 0 55%, #ffe8a3 55%); }
.ar-snow { background: linear-gradient(#a2d2ff, #e9f5ff 65%, #ffffff); }
.ar-castle { background: linear-gradient(#5a189a, #3c096c 50%, #6c757d 50% 100%); }
.ar-ocean { background: linear-gradient(#0077b6, #023e8a 60%, #03045e); }
.ar-city { background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,210,63,.14) 30px 34px), linear-gradient(#10002b, #240046 55%, #3c096c); }
.ar-volcano { background: linear-gradient(#370617, #6a040f 50%, #dc2f02 85%, #ffba08); }
.ar-space { background: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 65%, #fff, transparent), radial-gradient(ellipse at 30% 60%, #3a0ca3, #03001c 70%); }
.ar-snow .label, .ar-beach .label, .ar-snow .muted, .ar-beach .muted, .ar-snow .vs, .ar-beach .vs { color: #0d1030; }

/* the builder */
.builder { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
.builder > * { min-width: 0; }
.bpreview { border-radius: 20px; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; position: sticky; top: 0; align-self: start; }
.bname { font-family: Fredoka, sans-serif; font-size: 24px; font-weight: 700; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.btitle { font-weight: 700; color: var(--gold); text-shadow: 0 1px 0 rgba(0,0,0,.5); margin-bottom: 4px; }
.bpfp { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 30px; }
.bpfp .muted { font-size: 13px; }
.trying { margin-top: 10px; background: rgba(0,0,0,.45); border: 2px dashed var(--gold); border-radius: 14px; padding: 8px 10px; font-size: 14px; }
.trying .btn { margin-top: 6px; }
.bshop h2 { display: flex; align-items: center; gap: 10px; }
.bshop .coins { margin-left: auto; font-size: 20px; color: var(--gold); }
.btabs { display: flex; flex-wrap: wrap; gap: 6px; }
.btabs button { font: inherit; font-weight: 700; font-size: 14px; color: var(--text); background: var(--bg); border: 2px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 44px; }
.btabs button span { font-size: 18px; }
.btabs button.on { background: var(--gold); color: #1a1f55; border-color: var(--gold); }
.bitems { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.bitem { font: inherit; color: var(--text); background: var(--bg); border: 3px solid color-mix(in srgb, var(--rc) 55%, transparent); border-radius: 16px; padding: 14px 6px 8px; cursor: pointer; position: relative; text-align: center; transition: transform .12s; }
.bitem:hover { transform: translateY(-3px); }
.bitem.r-l { box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 50%, transparent); }
.bitem.wearing { border-color: var(--good); }
.bitem.trying { border-color: var(--gold); border-style: dashed; }
.bitem.locked .look { filter: grayscale(1) brightness(.6); }
.bitem .look { font-size: 40px; height: 54px; display: grid; place-items: center; }
.bitem .look .pfp { font-size: 26px; }
.bitem .nm { font-weight: 700; font-size: 14px; line-height: 1.2; }
.bitem .pr { font-size: 12px; color: var(--gold); margin-top: 3px; }
.bitem .rar { position: absolute; top: 3px; right: 6px; font-size: 10px; font-weight: 800; color: var(--rc); text-transform: uppercase; letter-spacing: .04em; }
.swatch { display: inline-block; width: 40px; height: 40px; border-radius: 46% 46% 50% 50% / 40% 40% 60% 60%; background: var(--arm); border: 3px solid var(--arm); box-shadow: 0 0 10px var(--arm); }
.arsw { display: inline-block; width: 70px; height: 44px; border-radius: 10px; border: 2px solid var(--line); }
.ttl { font-size: 13px; font-weight: 700; color: var(--gold); line-height: 1.2; }
.herocard .hcwrap { border-radius: 18px; display: grid; place-items: center; padding: 6px 0; }

@media (max-width: 760px) {
  .builder { grid-template-columns: 1fr; }
  .bshop h2 { font-size: 22px; flex-wrap: wrap; }
  .bpreview { position: static; }
  .herofig.big { width: 180px; height: 170px; }
  .herofig.big .sprite { font-size: 96px; }
  .herofig.big .pet { font-size: 50px; }
  .bitems { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}
@media (max-width: 600px) {
  .arena .herofig { width: 100px; height: 96px; }
  .arena .herofig .sprite { font-size: 64px; }
  .arena .herofig .pet { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .herofig .pet, .armour, .swatch, .fr-electric { animation: none !important; } }

/* ---------- the Founder set: one-of-a-kind, never sold (20 Oct 2026) ---------- */
@property --fa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes founderSpin { to { --fa: 360deg; } }
@keyframes founderGlow { 0%, 100% { box-shadow: 0 0 10px #ffd23f, 0 0 22px rgba(123, 47, 247, .55); } 50% { box-shadow: 0 0 18px #ff5ec4, 0 0 34px rgba(0, 229, 255, .6); } }
@keyframes founderTwinkle { 0%, 100% { opacity: .3; transform: scale(.7) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(25deg); } }
.fr-founder { position: relative; overflow: visible !important; border: 4px solid transparent !important;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(from var(--fa), #ffd23f, #ff5ec4, #7b2ff7, #00e5ff, #2ee87a, #ffd23f) border-box !important;
  animation: founderSpin 3.5s linear infinite, founderGlow 2.4s ease-in-out infinite; }
.fr-founder::before { content: '👑'; position: absolute; top: -.62em; left: 50%; transform: translateX(-50%) rotate(-8deg); font-size: .55em; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); pointer-events: none; }
.fr-founder::after { content: '✦'; position: absolute; bottom: -.1em; right: -.15em; font-size: .42em; color: #fff; text-shadow: 0 0 6px #ffd23f, 0 0 12px #ff5ec4; animation: founderTwinkle 1.7s ease-in-out infinite; pointer-events: none; }
.fr-founder .art, .fr-founder > img { border-radius: 50%; }
.armour.anim-founder, .swatch.anim-founder { --arm: #ffd23f; background: conic-gradient(from var(--fa), #ffd23f, #ff5ec4, #7b2ff7, #00e5ff, #2ee87a, #ffd23f) !important; animation: founderSpin 4s linear infinite, founderGlow 2.4s ease-in-out infinite; }
.ar-founder { background: radial-gradient(ellipse at 50% 115%, rgba(255, 210, 63, .45), transparent 60%), radial-gradient(ellipse at 20% 10%, rgba(0, 229, 255, .35), transparent 50%), radial-gradient(ellipse at 80% 15%, rgba(255, 94, 196, .35), transparent 50%), linear-gradient(160deg, #1a0b3d, #3c1a78 45%, #0b4f6c 75%, #1a0b3d); }
.htitle.ht-founder, .btitle.ht-founder { color: #1a0b3d; background: linear-gradient(90deg, #ffd23f, #ff9ff3, #9bf6ff, #ffd23f); background-size: 200% 100%; border: 0; text-shadow: none; animation: founderShine 3s linear infinite; border-radius: 999px; padding: 2px 10px; display: inline-block; }
@keyframes founderShine { to { background-position: 200% 0; } }
.bitem.r-x { box-shadow: 0 0 16px rgba(255, 94, 196, .55); }
@media (prefers-reduced-motion: reduce) { .fr-founder, .fr-founder::after, .armour.anim-founder, .swatch.anim-founder, .ht-founder { animation: none !important; } }

/* classmate hero card (tap a leaderboard row) */
.lb[data-mate] { cursor: pointer; border-radius: 10px; transition: background .15s; }
.lb[data-mate]:hover, .lb[data-mate]:focus-visible { background: rgba(255,255,255,.08); }
.matecard { text-align: center; }
.matecard .mhero { border-radius: 20px; display: grid; place-items: center; padding: 10px 0 4px; margin-bottom: 10px; }
.matecard .mname { font-family: Fredoka, sans-serif; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.matecard .mname .pfp { font-size: 22px; }
.mstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mstat { background: var(--bg); border: 2px solid var(--line); border-radius: 14px; padding: 8px 4px; display: flex; flex-direction: column; }
.mstat b { font-size: 22px; color: var(--gold); }
.mstat span { font-size: 13px; color: var(--muted); }
/* the Celestial Qilin (Founder set): a golden unicorn-beast with a teal-and-gold aura, never confused with the Golden Dragon */
@keyframes qilinAura { 0%, 100% { filter: sepia(1) saturate(5) hue-rotate(-15deg) brightness(1.12) drop-shadow(0 0 6px #00e5ff) drop-shadow(0 0 12px #ffd23f); } 50% { filter: sepia(1) saturate(5) hue-rotate(-15deg) brightness(1.2) drop-shadow(0 0 12px #00e5ff) drop-shadow(0 0 20px #ff9ff3); } }
.tint-qilin { animation: qilinAura 2.4s ease-in-out infinite; position: relative; display: inline-block; }
.herofig .pet.tint-qilin { animation: petbob 2.4s ease-in-out infinite, qilinAura 2.4s ease-in-out infinite; }
.tint-qilin::after { content: '✦'; position: absolute; top: -.15em; right: -.25em; font-size: .4em; color: #fff; text-shadow: 0 0 6px #00e5ff; animation: founderTwinkle 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tint-qilin, .herofig .pet.tint-qilin, .tint-qilin::after { animation: none !important; filter: sepia(1) saturate(5) hue-rotate(-15deg) brightness(1.12) drop-shadow(0 0 8px #00e5ff); } }
/* Founder look, v2: gold-and-violet sunburst rays with a gold rim (the rainbow items are rainbow; this one is royal) */
.armour.anim-founder, .swatch.anim-founder {
  --arm: #ffd23f;
  background: radial-gradient(circle at 50% 45%, #fff3b0 0 11%, rgba(255, 210, 63, .9) 12%, transparent 26%),
              repeating-conic-gradient(from var(--fa), #ffd23f 0deg 9deg, #3c1a78 9deg 24deg) !important;
  border: 4px solid #ffd23f !important;
  box-shadow: 0 0 0 3px #7b2ff7, 0 0 22px #ffd23f, 0 0 44px rgba(123, 47, 247, .7) !important;
  animation: founderSpin 12s linear infinite !important;
}
.fr-founder {
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              repeating-conic-gradient(from var(--fa), #ffd23f 0deg 14deg, #7b2ff7 14deg 28deg) border-box !important;
  animation: founderSpin 8s linear infinite, founderGlow 2.4s ease-in-out infinite;
}
/* Founder aura, v3 (Kai: "moving rgb"): a full-spectrum RGB ring that spins, and the shield itself cycles through the colours */
@keyframes rgbHue { from { filter: hue-rotate(0deg) saturate(1.4) drop-shadow(0 0 10px #ff00ff); } to { filter: hue-rotate(360deg) saturate(1.4) drop-shadow(0 0 10px #ff00ff); } }
.armour.anim-founder, .swatch.anim-founder {
  background: conic-gradient(from var(--fa), #ff0040, #ff8a00, #ffe600, #00ff6a, #00e5ff, #2f6bff, #b000ff, #ff0040) !important;
  border-color: transparent !important;
  animation: founderSpin 2.2s linear infinite, rgbHue 4s linear infinite !important;
  box-shadow: 0 0 26px rgba(255, 255, 255, .5) !important;
}
.armour-art.rgb { position: absolute; }
.armour-art.rgb::before { content: ''; position: absolute; inset: -7%; border-radius: 50%; z-index: -1;
  background: conic-gradient(from var(--fa), #ff0040, #ff8a00, #ffe600, #00ff6a, #00e5ff, #2f6bff, #b000ff, #ff0040);
  filter: blur(9px); opacity: .9; animation: founderSpin 2.2s linear infinite; }
.armour-art.rgb .art, .rgbwrap .art { animation: rgbHue 4s linear infinite; }
.rgbwrap { display: inline-block; position: relative; border-radius: 50%; }
.rgbwrap::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; z-index: -1; background: conic-gradient(from var(--fa), #ff0040, #ffe600, #00ff6a, #00e5ff, #b000ff, #ff0040); filter: blur(6px); animation: founderSpin 2.2s linear infinite; }
@media (prefers-reduced-motion: reduce) { .armour-art.rgb::before, .armour-art.rgb .art, .rgbwrap .art, .rgbwrap::before, .armour.anim-founder, .swatch.anim-founder { animation: none !important; } }

/* Founder's Aurora Blade: big, glowing, colour-cycling */
.herofig .hw.hw-rgb { font-size: .85em; right: -.75em; bottom: -.05em; transform: rotate(-8deg); animation: rgbHue 3s linear infinite; }
.herofig .hw.hw-rgb .art { width: 1.25em; height: 1.25em; }
.hw-rgb-tile { display: inline-block; animation: rgbHue 3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .herofig .hw.hw-rgb, .hw-rgb-tile { animation: none !important; } }