:root{--bg:#000b1a;--panel:rgba(2,18,40,0.82);--panel-solid:#0a1628;--border:rgba(0,212,255,0.55);--border-solid:#00d4ff;--glow:rgba(0,212,255,0.6);--glow-faint:rgba(0,212,255,0.12);--text:#e8f8ff;--text2:#5a7a9a;--cyan:#00d4ff;--cyan-dim:#0099cc;--cyan-sel:rgba(0,160,210,0.18);--gold:#ffd700;--red:#ff4466;--green:#4ade80;--purple:#a78bfa;}
    *{margin:0;padding:0;box-sizing:border-box;}
    html,body{background:var(--bg);font-family:'Rajdhani','Segoe UI',sans-serif;color:var(--text);overflow-x:hidden;height:100%;width:100%;}
    #root{min-height:100vh;width:100%;}

    /* ── ANIMATIONS ── */
    /* NUMERO DE PERFORMANCE DO TURNO.
       O estado BASE e visivel de proposito: opacidade 1 e sem deslocamento. A
       animacao so ENFEITA (sobe e apaga no fim). Antes isso era feito com
       <animate> do SVG comecando em opacidade 0 — e o dono nunca via o numero.
       Com o estado base visivel, se a animacao falhar o pior caso e um numero
       parado, e nao um numero invisivel. */
    .perf-num{opacity:1;animation:perf-sobe 3s ease-out forwards}
    @keyframes perf-sobe{
      0%{opacity:0;transform:translateY(6px)}
      8%{opacity:1;transform:translateY(0)}
      75%{opacity:1;transform:translateY(-26px)}
      100%{opacity:0;transform:translateY(-38px)}
    }
    @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
    @keyframes glow-pulse{0%,100%{box-shadow:0 0 12px var(--glow),inset 0 0 8px rgba(0,212,255,0.04);}50%{box-shadow:0 0 24px var(--glow),inset 0 0 14px rgba(0,212,255,0.08);}}
    @keyframes title-glow{0%,100%{text-shadow:0 0 20px rgba(0,212,255,0.6),0 0 40px rgba(0,212,255,0.3);}50%{text-shadow:0 0 35px rgba(0,212,255,0.9),0 0 60px rgba(0,212,255,0.5);}}
    @keyframes twinkle{0%{opacity:0.7;}50%{opacity:1;}100%{opacity:0.6;}}
    @keyframes nebulapulse{0%{opacity:0.6;transform:scaleY(1);}100%{opacity:1;transform:scaleY(1.15);}}
    @keyframes spinCW{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    @keyframes spinCCW{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
    @keyframes blink{50%{opacity:0;}}
    @keyframes fadeIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

    /* ── BACKGROUND LAYERS ── */
    .bg-stars{position:fixed;inset:0;pointer-events:none;z-index:0;
      background-image:
        radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,0.9) 0%,transparent 100%),
        radial-gradient(1px 1px at 25% 8%,rgba(180,230,255,0.8) 0%,transparent 100%),
        radial-gradient(1px 1px at 40% 20%,rgba(255,255,255,0.7) 0%,transparent 100%),
        radial-gradient(1px 1px at 60% 5%,rgba(255,255,255,0.9) 0%,transparent 100%),
        radial-gradient(1px 1px at 75% 18%,rgba(180,230,255,0.6) 0%,transparent 100%),
        radial-gradient(1px 1px at 88% 10%,rgba(255,255,255,0.8) 0%,transparent 100%),
        radial-gradient(1px 1px at 15% 35%,rgba(255,255,255,0.5) 0%,transparent 100%),
        radial-gradient(1px 1px at 55% 28%,rgba(255,255,255,0.6) 0%,transparent 100%),
        radial-gradient(1px 1px at 85% 32%,rgba(180,230,255,0.7) 0%,transparent 100%),
        radial-gradient(2px 2px at 30% 12%,rgba(180,230,255,0.4) 0%,transparent 100%),
        radial-gradient(1px 1px at 45% 3%,rgba(255,255,255,0.9) 0%,transparent 100%),
        radial-gradient(1px 1px at 95% 42%,rgba(255,255,255,0.5) 0%,transparent 100%);
      animation:twinkle 4s ease-in-out infinite alternate;}
    .bg-nebula{position:fixed;inset:0;pointer-events:none;z-index:0;
      background:radial-gradient(ellipse 50% 35% at 50% -5%,rgba(0,160,255,0.22) 0%,transparent 70%);
      animation:nebulapulse 6s ease-in-out infinite alternate;}
    .bg-scanlines{position:fixed;inset:0;pointer-events:none;z-index:99;
      background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);}
    .bg-floor{position:fixed;bottom:0;left:0;right:0;height:35%;pointer-events:none;z-index:0;
      background:linear-gradient(to top,rgba(0,80,160,0.18) 0%,transparent 100%);}
    .bg-floor-grid{position:absolute;inset:0;
      background-image:linear-gradient(rgba(0,180,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,255,0.06) 1px,transparent 1px);
      background-size:60px 60px;mask-image:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 100%);
      transform:perspective(400px) rotateX(55deg);transform-origin:bottom center;}

    /* ── PANEL (clip-path + corner accents) ── */
    .pnl{position:relative;background:var(--panel);border:1.5px solid var(--border);
      clip-path:polygon(0 20px,20px 0,calc(100%) 0,100% 0,100% 100%,0 100%);
      box-shadow:0 0 40px rgba(0,180,255,0.12),inset 0 0 60px rgba(0,60,120,0.3),0 0 0 1px rgba(0,212,255,0.08);
      backdrop-filter:blur(12px);animation:fadeIn 0.8s ease forwards;}
    .pnl::before{content:'';position:absolute;top:-1.5px;left:-1.5px;width:36px;height:36px;
      border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);
      clip-path:polygon(0 100%,0 0,40% 0,0 40%);box-shadow:-2px -2px 12px var(--glow);}
    .pnl::after{content:'';position:absolute;bottom:-1.5px;right:-1.5px;width:36px;height:36px;
      border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);box-shadow:2px 2px 12px var(--glow);}

    /* ── DIVIDER ── */
    .dvd{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--cyan-dim),transparent);opacity:0.6;margin:10px 0;}

    /* ── BEVEL BUTTONS (technique 3) ── */
    .btn-bvl{border-radius:12px;border:none;padding:12px 20px;cursor:pointer;transition:all .18s;position:relative;overflow:hidden;
      background:linear-gradient(160deg,#e8f4ff 0%,#c8dffa 55%,#b8d0f0 100%);
      font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
      color:#3a6090;font-size:11px;
      box-shadow:0 3px 0 rgba(255,255,255,0.90) inset,0 -3px 0 rgba(80,130,200,0.35) inset,
        2px 0 0 rgba(255,255,255,0.60) inset,-2px 0 0 rgba(80,130,200,0.20) inset,
        0 6px 16px rgba(60,100,180,0.18),0 1px 3px rgba(60,100,180,0.12);}
    .btn-bvl::before{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,0.5) 0%,transparent 55%);border-radius:inherit;pointer-events:none;}
    .btn-bvl:active{transform:translateY(1px);
      box-shadow:0 1px 0 rgba(255,255,255,0.55) inset,0 -1px 0 rgba(80,130,200,0.50) inset,0 2px 6px rgba(60,100,180,0.12);}

    /* ── BUY BUTTON (technique 4) ── */
    .btn-buy{padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:all .18s;
      background:linear-gradient(160deg,#48cae4 0%,#0096c7 55%,#0077b6 100%);
      color:#fff;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;
      text-shadow:0 1px 2px rgba(0,40,100,0.4);
      box-shadow:0 3px 0 rgba(255,255,255,0.30) inset,0 -3px 0 rgba(0,40,100,0.40) inset,0 6px 14px rgba(0,100,180,0.30);}
    .btn-buy:active{transform:translateY(1px);
      box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 -1px 0 rgba(0,40,100,0.5) inset;}

    /* ── GOLD BUTTON ── */
    .btn-gold{padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:all .18s;
      background:linear-gradient(160deg,#ffe066 0%,#ffd700 55%,#d4a800 100%);
      color:#1a1000;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;
      text-shadow:0 1px 0 rgba(255,255,255,0.3);
      box-shadow:0 3px 0 rgba(255,255,255,0.50) inset,0 -3px 0 rgba(120,90,0,0.35) inset,0 6px 14px rgba(180,140,0,0.25);}
    .btn-gold:active{transform:translateY(1px);
      box-shadow:0 1px 0 rgba(255,255,255,0.3) inset,0 -1px 0 rgba(120,90,0,0.5) inset;}

    /* ── DANGER BUTTON ── */
    .btn-danger{padding:9px 24px;border-radius:10px;border:none;cursor:pointer;transition:all .18s;
      background:linear-gradient(160deg,#ff6b6b 0%,#ee4444 55%,#cc2222 100%);
      color:#fff;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1.5px;
      text-shadow:0 1px 2px rgba(100,0,0,0.4);
      box-shadow:0 3px 0 rgba(255,255,255,0.25) inset,0 -3px 0 rgba(80,0,0,0.40) inset,0 6px 14px rgba(180,0,0,0.25);}
    .btn-danger:active{transform:translateY(1px);
      box-shadow:0 1px 0 rgba(255,255,255,0.15) inset,0 -1px 0 rgba(80,0,0,0.5) inset;}

    /* ── GHOST BUTTON (outline) ── */
    .btn-ghost{padding:10px 20px;border-radius:10px;cursor:pointer;transition:all .18s;
      background:transparent;border:1.5px solid rgba(0,212,255,0.4);
      color:var(--text);font-family:'Orbitron',sans-serif;font-size:10px;font-weight:600;letter-spacing:2px;}
    .btn-ghost:active{background:var(--cyan-sel);border-color:var(--cyan);}

    /* ── MENU ITEM (like design menu) ── */
    .menu-item{position:relative;padding:10px 18px;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:600;
      letter-spacing:2.5px;color:var(--text);text-align:center;cursor:pointer;transition:all .18s;
      border:1px solid transparent;text-transform:uppercase;}
    .menu-item:active,.menu-item.act{background:var(--cyan-sel);border-color:rgba(0,212,255,0.4);color:var(--cyan);
      text-shadow:0 0 12px var(--glow);box-shadow:inset 0 0 20px rgba(0,180,255,0.08),0 0 12px rgba(0,180,255,0.08);}

    /* ── HP BAR with glow tip (technique 2) ── */
    .bar-track{height:8px;background:rgba(100,150,220,0.18);border-radius:4px;overflow:visible;position:relative;}
    .bar-fill{height:100%;border-radius:4px;position:relative;transition:width 0.4s ease;}
    .bar-fill::after{content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);
      width:12px;height:12px;border-radius:50%;opacity:0.9;filter:blur(4px);}
    .bar-hp{background:linear-gradient(90deg,#059669,#34d399,#6ee7b7);}
    .bar-hp::after{background:#6ee7b7;box-shadow:0 0 8px #6ee7b7;}
    .bar-mp{background:linear-gradient(90deg,#1d4ed8,#3b82f6,#93c5fd);}
    .bar-mp::after{background:#93c5fd;box-shadow:0 0 8px #93c5fd;}
    .bar-xp{background:linear-gradient(90deg,#d97706,#f59e0b,#fde68a);}
    .bar-xp::after{background:#fde68a;box-shadow:0 0 8px #fde68a;}
    .bar-hp-low{background:linear-gradient(90deg,#dc2626,#ef4444,#fca5a5);}
    .bar-hp-low::after{background:#fca5a5;box-shadow:0 0 8px #fca5a5;}

    /* ── ORBITAL RINGS (technique 1) ── */
    .orb-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
    .orb-ring{position:absolute;border-radius:50%;border:1.5px solid transparent;}
    .orb-r1{inset:-6px;border-color:var(--cyan) transparent transparent transparent;animation:spinCW 3s linear infinite;box-shadow:0 0 6px rgba(0,150,200,0.3);}
    .orb-r2{inset:-12px;border-color:transparent #5e60ce transparent transparent;animation:spinCCW 5s linear infinite;opacity:0.5;}

    /* ── CARD ── */
    .card{background:var(--panel);border:1px solid var(--border);border-radius:14px;
      backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(0,60,120,0.15);overflow:hidden;}

    /* ── D-PAD ── */
    .dpad-btn{width:44px;height:44px;background:var(--panel);color:var(--cyan);border:1.5px solid var(--border);
      border-radius:8px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
      font-family:'Rajdhani',sans-serif;font-weight:700;
      box-shadow:0 3px 0 rgba(255,255,255,0.08) inset,0 -2px 0 rgba(0,60,120,0.3) inset,0 4px 10px rgba(0,60,120,0.2);}
    .dpad-btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,0 -1px 0 rgba(0,60,120,0.4) inset;}

    /* ── TAB SYSTEM ── */
    .tab{padding:8px 16px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:600;letter-spacing:1.5px;
      cursor:pointer;border:1px solid transparent;border-radius:8px;color:var(--text2);background:transparent;transition:all .15s;}
    .tab.act{background:var(--cyan-sel);border-color:var(--border);color:var(--cyan);
      box-shadow:0 0 10px rgba(0,180,255,0.15);}

    /* ── BOTTOM BAR ── */
    .bottom-bar{background:rgba(0,130,200,0.2);border:1px solid rgba(0,180,255,0.4);padding:7px 16px;text-align:center;
      font-family:'Rajdhani',sans-serif;font-size:12px;font-weight:600;letter-spacing:2px;color:var(--text);
      box-shadow:0 0 12px rgba(0,160,255,0.15);}

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar{width:4px;}
    ::-webkit-scrollbar-track{background:rgba(0,20,40,0.5);}
    ::-webkit-scrollbar-thumb{background:var(--cyan-dim);border-radius:2px;}

    /* ══════════════════════════════════════════════════════════════════
       DISCO DE TIPO + BICHOS DESENHADOS EM CSS  (2026-08-12)
       Vieram do `playground-poke.html`, onde foram escolhidos. Aqui a versao
       e ENXUTA de proposito: na batalha o disco tem ~70px de largura, e as
       gemas e o aro dourado do playground viram sujeira nesse tamanho. Menos
       elementos tambem importa porque isto e redesenhado durante a animacao.
       ══════════════════════════════════════════════════════════════════ */
    .jd{position:relative;width:100%;height:100%;pointer-events:none}
    .jd .jd-chao{position:absolute;left:-8%;top:22%;width:116%;height:86%;border-radius:50%;
      background:radial-gradient(ellipse at center,var(--jl) 0%,transparent 68%);opacity:.5;filter:blur(3px)}
    .jd .jd-parede{position:absolute;left:2%;top:29%;width:96%;height:38%;
      border-bottom-left-radius:50% 60%;border-bottom-right-radius:50% 60%;
      background:linear-gradient(180deg,color-mix(in srgb,var(--jc) 60%,#08111f),color-mix(in srgb,var(--jc) 22%,#050a12));
      box-shadow:inset 0 -3px 6px rgba(0,0,0,.5)}
    .jd .jd-aro{position:absolute;left:0;top:8%;width:100%;height:62%;border-radius:50%;
      border:2px solid rgba(205,224,245,.7);box-shadow:0 0 6px rgba(180,215,255,.35)}
    /* aro dourado + gemas (2026-08-12): o dono escolheu o estilo "arena" cheio,
       o mesmo do playground, pra TODOS os discos do jogo — cor continua por
       tipo, so o desenho ficou padrao. */
    .jd .jd-aro-ouro{position:absolute;left:7%;top:12.34%;width:86%;height:53.32%;border-radius:50%;
      border:2px solid #d8b45a;box-shadow:0 0 6px rgba(216,180,90,.45),inset 0 1px 4px rgba(255,236,178,.35)}
    .jd .jd-gema{position:absolute;width:7px;height:7px;border-radius:2px;
      background:linear-gradient(135deg,#ffffff 0%,var(--jl) 55%,var(--jc) 100%);
      box-shadow:0 0 6px var(--jl),0 0 1px #fff;border:1px solid rgba(255,255,255,.55)}
    .jd .jd-topo{position:absolute;left:8%;top:14%;width:84%;height:50%;border-radius:50%;
      background:radial-gradient(ellipse at 50% 28%,rgba(255,255,255,.5) 0%,transparent 46%),
                 radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--jc) 72%,#fff) 0%,var(--jc) 46%,
                                 color-mix(in srgb,var(--jc) 58%,#04101f) 100%);
      box-shadow:inset 0 0 8px rgba(0,0,0,.3),0 0 10px var(--jl)}

    /* o bicho em cima do disco: pes no meio da elipse (mesma regra do playground) */
    .jb{position:absolute;left:50%;bottom:38%;transform:translateX(-50%);width:62%;height:71%;
      pointer-events:none}
    .jb div{position:absolute}

    /* ARTE-INICIO — GERADO por npm run sling:arte, nao editar aqui */
    .jb{position:relative;}
    .jb div{position:absolute}
    .jb .sombra{left:12%;bottom:0;width:76%;height:11%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);filter:blur(2px)}
    .jb .corpo,.jb .cabeca{box-shadow:inset -3px -4px 7px rgba(0,0,0,.26), inset 3px 3px 6px rgba(255,255,255,.20)}
    .jb .olho{width:11%;height:11%;background:#14202e;border-radius:50%;z-index:6;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
    .jb .olho::after{content:'';position:absolute;left:20%;top:14%;width:40%;height:40%;background:#fff;border-radius:50%}
    .jb .pata{bottom:6%;width:17%;height:12%;border-radius:26% 26% 40% 40%;z-index:5}
    .jb.bulba{--pele:#7ec87e;--pele2:#59a862;--bulbo:#4fa35a;--mancha:#3d7a4a;--olhos:#d2504f}
    .jb.bulba .bulbo{left:26%;top:16%;width:48%;height:34%;border-radius:52% 52% 42% 42%;z-index:1;
  background:radial-gradient(ellipse at 40% 28%, color-mix(in srgb,var(--bulbo) 70%,#fff) 0%, var(--bulbo) 55%, color-mix(in srgb,var(--bulbo) 65%,#000) 100%);
  box-shadow:inset -3px -3px 6px rgba(0,0,0,.3)}
    .jb.bulba .corpo{left:14%;top:42%;width:72%;height:44%;border-radius:44% 44% 34% 34%;z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 80%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.bulba .cabeca{left:20%;top:30%;width:60%;height:42%;border-radius:46%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 85%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.bulba .olho{top:44%;background:var(--olhos);box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
    .jb.bulba .olho.e{left:31%}
    .jb.bulba .olho.d{left:58%}
    .jb.bulba .orelha{top:26%;width:13%;height:13%;border-radius:50% 50% 20% 20%;background:var(--pele2);z-index:3}
    .jb.bulba .orelha.e{left:22%;transform:rotate(-20deg)}
    .jb.bulba .orelha.d{right:22%;transform:rotate(20deg)}
    .jb.bulba .mancha{background:var(--mancha);border-radius:50%;opacity:.75;z-index:3}
    .jb.bulba .mancha.m1{left:20%;top:52%;width:13%;height:9%}
    .jb.bulba .mancha.m2{right:20%;top:56%;width:11%;height:8%}
    .jb.bulba .pata{background:var(--pele2)}
    .jb.bulba .pata.e{left:19%}
    .jb.bulba .pata.d{right:19%}
    .jb.bulba .boca{left:44%;top:60%;width:12%;height:4%;border-radius:0 0 60% 60%;background:rgba(20,32,46,.7);z-index:6}
    .jb.char{--pele:#ff9f57;--pele2:#e87c2e;--barriga:#ffe0b0}
    .jb.char .rabo{right:2%;top:44%;width:26%;height:12%;border-radius:40% 60% 60% 40%;
  background:linear-gradient(90deg,var(--pele2),var(--pele));transform:rotate(-24deg);z-index:1}
    .jb.char .chama{right:-2%;top:26%;width:20%;height:24%;z-index:1;
  border-radius:52% 52% 44% 44%/62% 62% 34% 34%;
  background:radial-gradient(ellipse at 50% 72%, #fff3b0 0%, #ffd24a 32%, #ff7a2f 72%, rgba(255,90,20,.25) 100%);
  box-shadow:0 0 14px rgba(255,150,50,.75), 0 0 26px rgba(255,110,30,.4)}
    .jb.char .corpo{left:24%;top:44%;width:52%;height:42%;border-radius:42% 42% 34% 34%;z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 82%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.char .barriga{left:33%;top:54%;width:34%;height:28%;border-radius:46% 46% 40% 40%;z-index:3;
  background:linear-gradient(180deg,var(--barriga), color-mix(in srgb,var(--barriga) 78%,#c98b46));opacity:.95}
    .jb.char .cabeca{left:23%;top:12%;width:54%;height:38%;border-radius:44% 44% 40% 40%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 86%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.char .focinho{left:38%;top:33%;width:24%;height:12%;border-radius:40% 40% 50% 50%;z-index:5;
  background:color-mix(in srgb,var(--pele) 88%,#fff)}
    .jb.char .olho{top:22%}
    .jb.char .olho.e{left:31%}
    .jb.char .olho.d{left:58%}
    .jb.char .pata{background:var(--pele2)}
    .jb.char .pata.e{left:26%}
    .jb.char .pata.d{right:26%}
    .jb.squi{--pele:#7fc6e8;--pele2:#4f9fd0;--casco:#b07a4a;--casco2:#8a5c34;--barriga:#f4e3bd}
    .jb.squi .casco{left:12%;top:36%;width:76%;height:50%;border-radius:46% 46% 40% 40%;z-index:1;
  background:radial-gradient(ellipse at 38% 30%, color-mix(in srgb,var(--casco) 75%,#fff) 0%, var(--casco) 52%, var(--casco2) 100%);
  box-shadow:inset -4px -4px 8px rgba(0,0,0,.32)}
    .jb.squi .rabo{right:4%;top:58%;width:20%;height:13%;border-radius:60% 40% 50% 50%;
  background:var(--pele2);transform:rotate(16deg);z-index:0}
    .jb.squi .corpo{left:20%;top:44%;width:60%;height:40%;border-radius:42% 42% 36% 36%;z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 82%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.squi .barriga{left:30%;top:52%;width:40%;height:29%;border-radius:44% 44% 38% 38%;z-index:3;
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(150,110,60,.35) 7px 8px),
    linear-gradient(180deg,var(--barriga), color-mix(in srgb,var(--barriga) 80%,#c9a05a))}
    .jb.squi .cabeca{left:21%;top:10%;width:58%;height:40%;border-radius:46%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 86%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.squi .olho{top:22%;width:12%;height:13%}
    .jb.squi .olho.e{left:30%}
    .jb.squi .olho.d{left:58%}
    .jb.squi .pata{background:var(--pele2)}
    .jb.squi .pata.e{left:22%}
    .jb.squi .pata.d{right:22%}
    .jb.v2 .cabeca{transform:scale(1.18);transform-origin:50% 40%}
    .jb.v2 .corpo{transform:scale(.9);transform-origin:50% 100%}
    .jb.v3 div{border-radius:3px !important}
    .jb.v3 .olho{border-radius:2px !important}
    .jb.v3 .chama{border-radius:4px 4px 2px 2px !important}
    .jb.ivy .bulbo{left:22%;top:12%;width:56%;height:38%;border-radius:50% 50% 40% 40%;z-index:1;
  background:radial-gradient(ellipse at 40% 26%, color-mix(in srgb,var(--bulbo) 70%,#fff), var(--bulbo) 55%, color-mix(in srgb,var(--bulbo) 65%,#000));
  box-shadow:inset -3px -3px 6px rgba(0,0,0,.3)}
    .jb.ivy .broto{left:38%;top:2%;width:24%;height:16%;border-radius:50% 50% 40% 40%;z-index:2;
  background:radial-gradient(ellipse at 40% 30%, #ffb0c8, #e8749a 60%, #b0466e);box-shadow:0 0 6px rgba(255,150,190,.5)}
    .jb.ivy .corpo{left:14%;top:42%;width:72%;height:44%;border-radius:44% 44% 34% 34%;z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 80%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.ivy .cabeca{left:20%;top:32%;width:60%;height:40%;border-radius:46%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 85%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.ivy .olho{top:44%;background:var(--olhos)}
    .jb.ivy .olho.e{left:31%}
    .jb.ivy .olho.d{left:58%}
    .jb.ivy .orelha{top:28%;width:12%;height:12%;border-radius:50% 50% 20% 20%;background:var(--pele2);z-index:3}
    .jb.ivy .orelha.e{left:22%;transform:rotate(-20deg)}
    .jb.ivy .orelha.d{right:22%;transform:rotate(20deg)}
    .jb.ivy .mancha{background:var(--mancha);border-radius:50%;opacity:.7;z-index:3}
    .jb.ivy .mancha.m1{left:20%;top:54%;width:12%;height:8%}
    .jb.ivy .mancha.m2{right:20%;top:58%;width:10%;height:7%}
    .jb.ivy .pata{background:var(--pele2)}
    .jb.ivy .pata.e{left:19%}
    .jb.ivy .pata.d{right:19%}
    .jb.venu{--pele:#8fd058;--pele2:#5fa838;--bulbo:#4a9c52;--mancha:#2d5f3a;--flor:#f5f0e0;--miolo:#e0a038}
    .jb.venu .bulbo{left:20%;top:16%;width:60%;height:36%;border-radius:50% 50% 40% 40%;z-index:1;
  background:radial-gradient(ellipse at 40% 26%, color-mix(in srgb,var(--bulbo) 65%,#fff), var(--bulbo) 55%, color-mix(in srgb,var(--bulbo) 60%,#000));
  box-shadow:inset -3px -3px 7px rgba(0,0,0,.32)}
    .jb.venu .miolo{left:41%;top:8%;width:18%;height:14%;border-radius:50%;z-index:3;
  background:radial-gradient(circle at 40% 30%, color-mix(in srgb,var(--miolo) 60%,#fff), var(--miolo) 70%, color-mix(in srgb,var(--miolo) 60%,#000));
  box-shadow:0 0 8px rgba(224,160,56,.6)}
    .jb.venu .petala{left:50%;top:15%;width:19%;height:15%;border-radius:60% 60% 60% 5%;z-index:2;transform-origin:8% 90%;
  background:linear-gradient(160deg, color-mix(in srgb,var(--flor) 90%,#fff), var(--flor) 60%, color-mix(in srgb,var(--flor) 75%,#c9a));
  box-shadow:inset -2px -2px 4px rgba(0,0,0,.15)}
    .jb.venu .petala.p1{transform:translate(-8%,0) rotate(0deg)}
    .jb.venu .petala.p2{transform:translate(-8%,0) rotate(60deg)}
    .jb.venu .petala.p3{transform:translate(-8%,0) rotate(120deg)}
    .jb.venu .petala.p4{transform:translate(-8%,0) rotate(180deg)}
    .jb.venu .petala.p5{transform:translate(-8%,0) rotate(240deg)}
    .jb.venu .petala.p6{transform:translate(-8%,0) rotate(300deg)}
    .jb.venu .corpo{left:10%;top:46%;width:80%;height:42%;border-radius:42% 42% 32% 32%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 78%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.venu .cabeca{left:22%;top:38%;width:56%;height:36%;border-radius:46%;z-index:5;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 84%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.venu .olho{top:49%;background:#902820}
    .jb.venu .olho.e{left:32%}
    .jb.venu .olho.d{left:57%}
    .jb.venu .mancha{background:var(--mancha);border-radius:50%;opacity:.65;z-index:4}
    .jb.venu .mancha.m1{left:16%;top:58%;width:14%;height:9%}
    .jb.venu .mancha.m2{right:16%;top:62%;width:12%;height:8%}
    .jb.venu .pata{background:var(--pele2);width:19%}
    .jb.venu .pata.e{left:16%}
    .jb.venu .pata.d{right:16%}
    .jb.charml{--pele:#f2793a;--pele2:#d8551c;--barriga:#ffdca0}
    .jb.charml .rabo{right:1%;top:42%;width:28%;height:12%;border-radius:40% 60% 60% 40%;
  background:linear-gradient(90deg,var(--pele2),var(--pele));transform:rotate(-26deg);z-index:1}
    .jb.charml .chama{right:-4%;top:20%;width:24%;height:28%;z-index:1;
  border-radius:54% 54% 44% 44%/64% 64% 32% 32%;
  background:radial-gradient(ellipse at 50% 74%, #fff6c4 0%, #ffcf3f 30%, #ff6a1f 70%, rgba(255,80,20,.2) 100%);
  box-shadow:0 0 16px rgba(255,140,40,.8), 0 0 30px rgba(255,100,25,.45)}
    .jb.charml .corpo{left:26%;top:42%;width:48%;height:44%;border-radius:40% 40% 32% 32%;z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 82%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.charml .barriga{left:34%;top:52%;width:32%;height:30%;border-radius:44% 44% 38% 38%;z-index:3;
  background:linear-gradient(180deg,var(--barriga), color-mix(in srgb,var(--barriga) 78%,#c98b46));opacity:.95}
    .jb.charml .cabeca{left:25%;top:8%;width:50%;height:36%;border-radius:42% 42% 38% 38%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 86%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.charml .corno{left:44%;top:-2%;width:12%;height:14%;z-index:3;background:var(--pele2);
  clip-path:polygon(50% 0%,100% 100%,0% 100%)}
    .jb.charml .focinho{left:37%;top:29%;width:26%;height:12%;border-radius:40% 40% 50% 50%;z-index:5;
  background:color-mix(in srgb,var(--pele) 88%,#fff)}
    .jb.charml .olho{top:19%}
    .jb.charml .olho.e{left:30%}
    .jb.charml .olho.d{left:59%}
    .jb.charml .pata{background:var(--pele2);height:15%}
    .jb.charml .pata.e{left:25%}
    .jb.charml .pata.d{right:25%}
    .jb.charz{--pele:#f39a3f;--pele2:#d97318;--barriga:#ffe7ba;--asa:#c96a20}
    .jb.charz .asa{top:26%;width:34%;height:36%;z-index:0;
  background:linear-gradient(160deg, color-mix(in srgb,var(--asa) 70%,#fff), var(--asa) 55%, color-mix(in srgb,var(--asa) 60%,#000));
  clip-path:polygon(0% 30%,55% 0%,100% 20%,72% 46%,100% 65%,45% 100%,10% 78%)}
    .jb.charz .asa.e{left:-14%;transform:scaleX(-1) rotate(-8deg)}
    .jb.charz .asa.d{right:-14%;transform:rotate(-8deg)}
    .jb.charz .rabo{right:0%;top:46%;width:24%;height:13%;border-radius:40% 60% 60% 40%;
  background:linear-gradient(90deg,var(--pele2),var(--pele));transform:rotate(-20deg);z-index:1}
    .jb.charz .chama{right:-6%;top:24%;width:26%;height:32%;z-index:1;
  border-radius:54% 54% 44% 44%/64% 64% 32% 32%;
  background:radial-gradient(ellipse at 50% 76%, #fff6c4 0%, #ffcf3f 28%, #ff6a1f 66%, rgba(255,80,20,.18) 100%);
  box-shadow:0 0 20px rgba(255,150,45,.85), 0 0 36px rgba(255,100,25,.5)}
    .jb.charz .corpo{left:22%;top:40%;width:56%;height:46%;border-radius:38% 38% 30% 30%;z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 82%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.charz .barriga{left:31%;top:50%;width:38%;height:32%;border-radius:42% 42% 36% 36%;z-index:3;
  background:linear-gradient(180deg,var(--barriga), color-mix(in srgb,var(--barriga) 78%,#c98b46));opacity:.95}
    .jb.charz .cabeca{left:26%;top:6%;width:48%;height:34%;border-radius:40% 40% 36% 36%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 86%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.charz .corno{left:42%;top:-3%;width:14%;height:16%;z-index:3;background:var(--pele2);
  clip-path:polygon(50% 0%,100% 100%,0% 100%)}
    .jb.charz .focinho{left:36%;top:26%;width:28%;height:12%;border-radius:40% 40% 50% 50%;z-index:5;
  background:color-mix(in srgb,var(--pele) 88%,#fff)}
    .jb.charz .olho{top:16%}
    .jb.charz .olho.e{left:31%}
    .jb.charz .olho.d{left:58%}
    .jb.charz .pata{background:var(--pele2);height:16%}
    .jb.charz .pata.e{left:27%}
    .jb.charz .pata.d{right:27%}
    .jb.wartortle{--pele:#7cc4e6;--pele2:#4a95c8;--casco:#a8703f;--casco2:#845a2d;--barriga:#f0e0b8;--fofo:#f5f0e8}
    .jb.wartortle .casco{left:12%;top:34%;width:76%;height:52%;border-radius:46% 46% 40% 40%;z-index:1;
  background:radial-gradient(ellipse at 38% 30%, color-mix(in srgb,var(--casco) 75%,#fff), var(--casco) 52%, var(--casco2));
  box-shadow:inset -4px -4px 8px rgba(0,0,0,.32)}
    .jb.wartortle .rabo{right:2%;top:52%;width:26%;height:20%;border-radius:70% 30% 60% 60%;
  background:linear-gradient(120deg,var(--fofo),var(--pele2));transform:rotate(18deg);z-index:0}
    .jb.wartortle .corpo{left:20%;top:42%;width:60%;height:42%;border-radius:42% 42% 36% 36%;z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 82%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.wartortle .barriga{left:30%;top:50%;width:40%;height:31%;border-radius:44% 44% 38% 38%;z-index:3;
  background:repeating-linear-gradient(180deg, transparent 0 7px, rgba(150,110,60,.35) 7px 8px),
             linear-gradient(180deg,var(--barriga), color-mix(in srgb,var(--barriga) 80%,#c9a05a))}
    .jb.wartortle .cabeca{left:21%;top:8%;width:58%;height:40%;border-radius:46%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 86%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.wartortle .orelha{top:6%;width:16%;height:18%;border-radius:60% 60% 50% 50%;background:var(--fofo);z-index:5;
  box-shadow:inset -2px -2px 4px rgba(150,130,100,.3)}
    .jb.wartortle .orelha.e{left:19%;transform:rotate(-14deg)}
    .jb.wartortle .orelha.d{right:19%;transform:rotate(14deg)}
    .jb.wartortle .olho{top:20%;width:12%;height:13%}
    .jb.wartortle .olho.e{left:30%}
    .jb.wartortle .olho.d{left:58%}
    .jb.wartortle .pata{background:var(--pele2)}
    .jb.wartortle .pata.e{left:22%}
    .jb.wartortle .pata.d{right:22%}
    .jb.blastoise{--pele:#6fb0d8;--pele2:#3d7fb0;--casco:#9c6838;--casco2:#764a20;--barriga:#e8d4a0;--canhao:#5a5a62}
    .jb.blastoise .casco{left:8%;top:28%;width:84%;height:58%;border-radius:44% 44% 38% 38%;z-index:1;
  background:radial-gradient(ellipse at 38% 26%, color-mix(in srgb,var(--casco) 72%,#fff), var(--casco) 52%, var(--casco2));
  box-shadow:inset -5px -5px 9px rgba(0,0,0,.34)}
    .jb.blastoise .canhao{top:20%;width:16%;height:20%;border-radius:30% 30% 15% 15%;z-index:2;
  background:linear-gradient(180deg, color-mix(in srgb,var(--canhao) 70%,#fff), var(--canhao) 60%, color-mix(in srgb,var(--canhao) 50%,#000))}
    .jb.blastoise .canhao::after{content:'';position:absolute;left:22%;top:6%;width:56%;height:30%;border-radius:50%;background:#1a1a1e}
    .jb.blastoise .canhao.e{left:8%;transform:rotate(-8deg)}
    .jb.blastoise .canhao.d{right:8%;transform:rotate(8deg)}
    .jb.blastoise .corpo{left:22%;top:44%;width:56%;height:38%;border-radius:40% 40% 34% 34%;z-index:3;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 80%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.blastoise .barriga{left:31%;top:52%;width:38%;height:27%;border-radius:42% 42% 36% 36%;z-index:4;
  background:linear-gradient(180deg,var(--barriga), color-mix(in srgb,var(--barriga) 80%,#c9a05a))}
    .jb.blastoise .cabeca{left:26%;top:10%;width:48%;height:36%;border-radius:46%;z-index:5;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 85%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.blastoise .olho{top:22%}
    .jb.blastoise .olho.e{left:31%}
    .jb.blastoise .olho.d{left:58%}
    .jb.blastoise .pata{background:var(--pele2);height:11%}
    .jb.blastoise .pata.e{left:26%}
    .jb.blastoise .pata.d{right:26%}
    .jb.pika{--pele:#ffd23f;--pele2:#e8a800;--marrom:#5a3a1a;--bochecha:#ff5060}
    .jb.pika .rabo{right:-6%;top:32%;width:32%;height:44%;z-index:0;background:var(--pele);
  clip-path:polygon(30% 0%,60% 18%,38% 24%,78% 42%,50% 46%,90% 68%,44% 62%,58% 100%,20% 58%,42% 54%,4% 34%,32% 36%);
  filter:drop-shadow(0 0 5px rgba(255,220,80,.4))}
    .jb.pika .corpo{left:22%;top:46%;width:56%;height:42%;border-radius:46% 46% 38% 38%;z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 82%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.pika .cabeca{left:18%;top:8%;width:64%;height:44%;border-radius:50%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 88%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.pika .orelha{top:-14%;width:15%;height:32%;border-radius:50% 50% 10% 10%;background:var(--pele);z-index:3}
    .jb.pika .orelha::after{content:'';position:absolute;left:0;right:0;top:0;height:38%;
  border-radius:50% 50% 0 0;background:var(--marrom)}
    .jb.pika .orelha.e{left:23%;transform:rotate(-14deg)}
    .jb.pika .orelha.d{right:23%;transform:rotate(14deg)}
    .jb.pika .bochecha{top:36%;width:16%;height:13%;border-radius:50%;background:var(--bochecha);z-index:5;
  box-shadow:0 0 7px rgba(255,80,96,.55)}
    .jb.pika .bochecha.e{left:12%}
    .jb.pika .bochecha.d{right:12%}
    .jb.pika .olho{top:24%;width:12%;height:13%}
    .jb.pika .olho.e{left:33%}
    .jb.pika .olho.d{left:56%}
    .jb.pika .pata{background:var(--pele2)}
    .jb.pika .pata.e{left:26%}
    .jb.pika .pata.d{right:26%}
    .jb.raichu{--pele:#ffcc2e;--pele2:#d99400;--marrom:#7a4a1a;--bochecha:#ff4a5a}
    .jb.raichu .rabo{right:-8%;top:28%;width:36%;height:50%;z-index:0;background:var(--pele);
  clip-path:polygon(28% 0%,58% 16%,36% 22%,80% 40%,48% 45%,92% 66%,42% 60%,60% 100%,18% 56%,40% 52%,2% 32%,30% 34%);
  filter:drop-shadow(0 0 7px rgba(255,210,60,.5))}
    .jb.raichu .corpo{left:19%;top:42%;width:62%;height:46%;border-radius:44% 44% 36% 36%;z-index:2;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 80%,#fff), var(--pele) 50%, var(--pele2))}
    .jb.raichu .cabeca{left:20%;top:6%;width:60%;height:40%;border-radius:48%;z-index:4;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pele) 86%,#fff), var(--pele) 55%, var(--pele2))}
    .jb.raichu .orelha{top:-16%;width:16%;height:34%;border-radius:50% 50% 40% 10%;background:var(--pele);z-index:3}
    .jb.raichu .orelha::after{content:'';position:absolute;left:-6%;top:58%;width:112%;height:30%;
  border-radius:0 0 50% 50%;background:var(--marrom);transform:rotate(-4deg)}
    .jb.raichu .orelha.e{left:20%;transform:rotate(-10deg)}
    .jb.raichu .orelha.d{right:20%;transform:rotate(10deg)}
    .jb.raichu .bochecha{top:34%;width:15%;height:12%;border-radius:50%;background:var(--bochecha);z-index:5;
  box-shadow:0 0 8px rgba(255,74,90,.6)}
    .jb.raichu .bochecha.e{left:11%}
    .jb.raichu .bochecha.d{right:11%}
    .jb.raichu .olho{top:22%;width:11%;height:12%}
    .jb.raichu .olho.e{left:33%}
    .jb.raichu .olho.d{left:56%}
    .jb.raichu .pata{background:var(--pele2);height:14%}
    .jb.raichu .pata.e{left:24%}
    .jb.raichu .pata.d{right:24%}
    .jb.lowpoly div{border-radius:0 !important;box-shadow:none !important;filter:none !important}
    .jb.lowpoly .corpo,.jb.lowpoly .cabeca,.jb.lowpoly .bulbo,.jb.lowpoly .chama,
.jb.lowpoly .casco,.jb.lowpoly .asa{clip-path:polygon(16% 0%,84% 0%,100% 30%,100% 70%,84% 100%,16% 100%,0% 70%,0% 30%);
  background:var(--pele,var(--casco,var(--bulbo)));background-image:none}
    .jb.lowpoly .corpo::before,.jb.lowpoly .cabeca::before,.jb.lowpoly .bulbo::before,
.jb.lowpoly .chama::before,.jb.lowpoly .casco::before{content:'';position:absolute;inset:0;
  clip-path:polygon(16% 0%,84% 0%,50% 52%,0% 30%);background:rgba(255,255,255,.30)}
    .jb.lowpoly .corpo::after,.jb.lowpoly .cabeca::after,.jb.lowpoly .bulbo::after,
.jb.lowpoly .chama::after,.jb.lowpoly .casco::after{content:'';position:absolute;inset:0;
  clip-path:polygon(100% 30%,100% 70%,50% 52%,84% 100%,16% 100%);background:rgba(0,0,0,.24)}
    .jb.lowpoly .olho{clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%)}
    .jb.lowpoly .pata{clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
    .jb.lowpoly .mancha,.jb.lowpoly .barriga,.jb.lowpoly .focinho,.jb.lowpoly .orelha,.jb.lowpoly .rabo{clip-path:polygon(14% 0,86% 0,100% 28%,100% 72%,86% 100%,14% 100%,0 72%,0 28%);
  background:var(--pele2);box-shadow:none}
    .jb.lowpoly .sombra{filter:none}
    /* ARTE-FIM */