Cannot Type += and Can't Work

Can’t use += & + Types me for me us think about me? - -= * *= =
See this code I cannot use this thing:

let number = 2;
number = 8;

console.log(number);

Oh no! It makes 2 only.
Number can’t work 2 to 10

When use the thing!
HTML:

<div class="funko-container">
  <punko-fop number="404"
             name="ManzDev"
             subname="Twitch Code Streamer">
  </punko-fop>
</div>

<div class="created">
  <span>Created by</span>
  <a href="https://manz.dev/"><h2>Manz.dev</h2></a>
  <p>on <a href="https://twitch.tv/ManzDev">Twitch</a> / <a href="https://youtube.com/c/ManzDev">Youtube</a></p>
</div>

PostCSS:

@use postcss-nested;

@font-face {
  font-family: "Bebas Neue";
  src:
    url("https://manzdev.github.io/twitch-punko-fop/fonts/bebas-neue.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-punko-fop/fonts/bebas-neue.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Heroes Legend";
  src:
    url("https://manzdev.github.io/twitch-punko-fop/fonts/heroes-legend.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-punko-fop/fonts/heroes-legend.woff") format("woff"),
    url("https://manzdev.github.io/twitch-punko-fop/fonts/heroes-legend.ttf") format("truetype");
  font-display: swap;
}

body {
  background: #224;
}

.funko-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80vw;
  height: 80vh;
}

.box-back {
  --width: 350px;
  --height: 450px;
  --inner-color: gold;

  width: var(--width);
  height: var(--height);
  box-sizing: border-box;
  position: relative;
  background: #fff;
  padding: 10px;
  overflow: hidden;

  & .inner-box {
    height: 100%;
    background: var(--inner-color);
  }
}

.box-bottom {
  --width: 350px;
  --height: 225px;
  --inner-color: #E1E1E1;

  width: var(--width);
  height: var(--height);
  box-sizing: border-box;
  position: relative;
  background: #fff;
  padding: 10px;

  & .inner-box {
    height: 100%;
    background: var(--inner-color);
    overflow: hidden;
  }

}

.box-front {
  --width: 350px;
  --height: 450px;
  --inner-height: 75px;
  --inner-color: gold;

  width: var(--width);
  height: var(--height);
  background: #fff3;
  position: relative;

  & .inner-box {
    width: 90%;
    height: calc(var(--inner-height) - 30%);
    background: var(--inner-color);
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  & .front-top {
    background: #fff;
    width: 100%;
    height: var(--inner-height);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & .front-side {
    background: linear-gradient(transparent 75px, #fff 75px calc(100% - 100px), transparent calc(100% - 100px));
    width: 75px;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;

    & .inner-box {
      width: 70%;
      height: 95%;
    }
  }

  & .front-bottom {
    --extra-space: 25px;

    background: #fff;
    width: 100%;
    height: calc(var(--inner-height) + var(--extra-space));
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    & .inner-box {
      height: calc(var(--inner-height) - 30% + var(--extra-space));
      transform: translateY(4px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

}

.box-left {
  --width: 225px;
  --height: 450px;
  --inner-color: gold;

  width: var(--width);
  height: var(--height);
  box-sizing: border-box;
  position: relative;
  background: #fff;
  padding: 10px;
  overflow: hidden;

  & .inner-box {
    height: 100%;
    background: var(--inner-color);
  }
}

.box-right {
  --width: 225px;
  --height: 450px;
  --inner-height: 75px;
  --inner-color: gold;

  width: var(--width);
  height: var(--height);
  background: #fff3;
  position: relative;

  & .front-top {
    background: #fff;
    width: 100%;
    height: var(--inner-height);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  & .front-side {
    background: linear-gradient(transparent 75px, #fff 75px calc(100% - 100px), transparent calc(100% - 100px));
    width: 75px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }

  & .front-bottom {
    --extra-space: 25px;

    background: #fff;
    width: 100%;
    height: calc(var(--inner-height) + var(--extra-space));
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

}

.box-top {
  --width: 350px;
  --height: 225px;
  --inner-color: #E1E1E1;

  width: var(--width);
  height: var(--height);
  box-sizing: border-box;
  position: relative;
  background: #fff;
  padding: 10px;

  & .inner-box {
    height: 100%;
    background: var(--inner-color);
    overflow: hidden;
  }

}

.pop-logo {
  display: inline-block;

  & .globe {
    background: #fff;
    border-radius: 50%;
    width: 205px;
    height: 150px;
    border: 4px solid #111;

    & .pop-title {
      display: flex;
      transform: translateY(-10px);

      & .font {
        font-family: "Heroes Legend";
        padding-right: 10px;
        font-size: 64px;
        background:
          radial-gradient(#fff4 20%, transparent 80%),
          linear-gradient(to bottom, #FCAE19 0 40%, #FDE8A3 60% 100%);
        background-size: 8px 8px, 100% 100%;
        -webkit-text-stroke: 5px #111;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      & .first.p {
        transform: rotate(-15deg) scale(1);
      }

      & .o {
        background: linear-gradient(150deg, #FCAE19 0 40%, #FDE8A3 60% 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transform: translate(-32px, 1px) rotate(25deg) scale(0.9);
        z-index: 5;
      }

      & .second.p {
        transform: translate(-65px, -3px);
        z-index: 1;
      }

      & .exclamation {
        transform: translate(-81px, 0) rotate(5deg);
      }

    }

    & .pop-subtitle {
      background: #D41C10;
      max-width: 125px;
      height: 27px;
      color: #fff;
      transform: translate(44px, -40px);
      border-radius: 12px;
      text-align: center;

      & span {
        display: inline-block;
        font-family: "Bebas Neue";
        font-size: 24px;
        letter-spacing: 1px;
        transform: translateY(-1px);
      }
    }

  }

  & .triangle-container {
    --triangle-shape: polygon(0 -5%, 100% -5%, 50% 100%);

    width: 55px;
    height: 55px;
    background: #111;
    clip-path: var(--triangle-shape);
    transform: translate(35px, -10px) scale(0.7, 1) rotate(15deg);
  }

  & .triangle {
    width: 50px;
    height: 50px;
    background: white;
    clip-path: var(--triangle-shape);
    transform: translate(3px, -8px);
  }

}

.manzdev-container {
  height: 260px;
}

.manzdev {
  height: 17px;
  width: 17px;
  box-shadow:
    64px 0px #FFFFFF,
    80px 0px #FFFFFF,
    96px 0px #FFFFFF,
    112px 0px #FFFFFF,
    128px 0px #FFFFFF,
    144px 0px #FFFFFF,
    160px 0px #FFFFFF,
    176px 0px #FFFFFF,
    48px 16px #FFFFFF,
    64px 16px #FFFFFF,
    80px 16px #000000,
    96px 16px #000000,
    112px 16px #000000,
    128px 16px #000000,
    144px 16px #000000,
    160px 16px #000000,
    176px 16px #FFFFFF,
    192px 16px #FFFFFF,
    208px 16px #FFFFFF,
    32px 32px #FFFFFF,
    48px 32px #FFFFFF,
    64px 32px #000000,
    80px 32px #000000,
    96px 32px #000000,
    112px 32px #000000,
    128px 32px #000000,
    144px 32px #000000,
    160px 32px #000000,
    176px 32px #000000,
    192px 32px #000000,
    208px 32px #FFFFFF,
    32px 48px #FFFFFF,
    48px 48px #000000,
    64px 48px #000000,
    80px 48px #000000,
    96px 48px #CC984F,
    112px 48px #CC984F,
    128px 48px #CC984F,
    144px 48px #CC984F,
    160px 48px #1A1A1A,
    176px 48px #000000,
    192px 48px #000000,
    208px 48px #FFFFFF,
    32px 64px #FFFFFF,
    48px 64px #000000,
    64px 64px #000000,
    80px 64px #1A1A1A,
    96px 64px #FFCC80,
    112px 64px #FFCC80,
    128px 64px #FFCC80,
    144px 64px #FFCC80,
    160px 64px #EBB267,
    176px 64px #EBB267,
    192px 64px #FFFFFF,
    208px 64px #FFFFFF,
    32px 80px #FFFFFF,
    48px 80px #000000,
    64px 80px #1A1A1A,
    80px 80px #FFCC80,
    96px 80px #FFCC80,
    112px 80px #000000,
    128px 80px #FFCC80,
    144px 80px #FFCC80,
    160px 80px #000000,
    176px 80px #FFCC80,
    192px 80px #FFFFFF,
    32px 96px #FFFFFF,
    48px 96px #000000,
    64px 96px #1A1A1A,
    80px 96px #FFCC80,
    96px 96px #FFCC80,
    112px 96px #000000,
    128px 96px #FFCC80,
    144px 96px #FFCC80,
    160px 96px #000000,
    176px 96px #FFCC80,
    192px 96px #FFFFFF,
    32px 112px #FFFFFF,
    48px 112px #000000,
    64px 112px #000000,
    80px 112px #FFCC80,
    96px 112px #FFCC80,
    112px 112px #FFCC80,
    128px 112px #EBB267,
    144px 112px #EBB267,
    160px 112px #EBB267,
    176px 112px #FFCC80,
    192px 112px #FFFFFF,
    32px 128px #FFFFFF,
    48px 128px #000000,
    64px 128px #000000,
    80px 128px #CC984F,
    96px 128px #FFCC80,
    112px 128px #FFCC80,
    128px 128px #FFCC80,
    144px 128px #FFCC80,
    160px 128px #FFCC80,
    176px 128px #FFCC80,
    192px 128px #FFFFFF,
    32px 144px #FFFFFF,
    48px 144px #FFFFFF,
    64px 144px #000000,
    80px 144px #000000,
    96px 144px #CC984F,
    112px 144px #CC984F,
    128px 144px #CC984F,
    144px 144px #000000,
    160px 144px #000000,
    176px 144px #FFCC80,
    192px 144px #FFFFFF,
    48px 160px #FFFFFF,
    64px 160px #FFFFFF,
    80px 160px #000000,
    96px 160px #000000,
    112px 160px #000000,
    128px 160px #CC984F,
    144px 160px #CC984F,
    160px 160px #000000,
    176px 160px #CC984F,
    192px 160px #FFFFFF,
    32px 176px #FFFFFF,
    48px 176px #FFFFFF,
    64px 176px #000000,
    80px 176px #1A1A1A,
    96px 176px #000000,
    112px 176px #000000,
    128px 176px #000000,
    144px 176px #000000,
    160px 176px #000000,
    176px 176px #000000,
    192px 176px #FFFFFF,
    32px 192px #FFFFFF,
    48px 192px #000000,
    64px 192px #1A1A1A,
    80px 192px #000000,
    96px 192px #000000,
    112px 192px #000000,
    128px 192px #000000,
    144px 192px #000000,
    160px 192px #000000,
    176px 192px #000000,
    192px 192px #FFFFFF,
    32px 208px #FFFFFF,
    48px 208px #000000,
    64px 208px #1A1A1A,
    80px 208px #000000,
    96px 208px #000000,
    112px 208px #000000,
    128px 208px #17FFFF,
    144px 208px #000000,
    160px 208px #000000,
    176px 208px #1A1A1A,
    192px 208px #FFFFFF,
    32px 224px #FFFFFF,
    48px 224px #1A1A1A,
    64px 224px #000000,
    80px 224px #000000,
    96px 224px #000000,
    112px 224px #CC2554,
    128px 224px #0D2061,
    144px 224px #0D2061,
    160px 224px #000000,
    176px 224px #1A1A1A,
    192px 224px #FFFFFF,
    32px 240px #FFFFFF,
    48px 240px #CC984F,
    64px 240px #CC984F,
    80px 240px #000000,
    96px 240px #000000,
    112px 240px #0D2061,
    128px 240px #E65100,
    144px 240px #17FFFF,
    160px 240px #000000,
    176px 240px #1A1A1A,
    192px 240px #FFFFFF;
  transform: rotate(-5deg) translate(-10px, 22px);
  /* filter: drop-shadow(2px 2px 10px #0007); */
}

.created {
  background: 
    url(https://assets.codepen.io/154065/internal/avatars/users/default.png),
    linear-gradient(to bottom, #884ced, #ec1cce);
  background-size: 75px 75px, cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 2em;
  
  & span,
  & h2,
  & p,
  & a {
    font-family: Montserrat;
    margin: 0;
  }
  
  & a,
  & p,
  & span {
    color: #fff;    
  }
  
  & h2 {
    font-weight: 700;
    transform: translate(0, -4px);    
  }
  
  & a {
    text-decoration-color: rgba(255,255,255,0.4);
  }
  
  & a:hover {
    color: #e6e82a;
  }
}

Babel:

class FunkoLogo extends HTMLElement {
  connectedCallback() {
    this.type = this.getAttribute("type") ?? "FIGURE";
    this.render();
  }

  render() {
    this.innerHTML = /* html */`
    <div class="pop-logo">
      <div class="globe">
        <div class="pop-title">
          <div class="first p font">F</div>
          <div class="o font">o</div>
          <div class="second p font">P</div>
          <div class="exclamation font">!</div>
        </div>
        <div class="pop-subtitle">
          <span>${this.type}</span>
        </div>
      </div>
      <div class="triangle-container">
        <div class="triangle"></div>
      </div>
    </div>`;
  }
}

customElements.define("funko-logo", FunkoLogo);


class FunkoName extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  static get styles() {
    return /* css */`
      :host {
      }

      .box-data {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateX(60px);
      }

      .box-name {
        font-family: "Bebas Neue";
        font-size: 42px;
        font-weight: bold;
        color: #000;
        line-height: 90%;
      }

      .box-subname {
        font-family: "Bebas Neue";
        font-size: 20px;
        color: #000;
        line-height: 90%;
      }
    `;
  }

  connectedCallback() {
    this.name = this.getAttribute("name");
    this.subname = this.getAttribute("subname");
    this.render();
  }

  showSubname() {
    return this.hasAttribute("subname") ? /* html */`<div class="box-subname">${this.subname}</div>` : "";
  }

  render() {
    this.shadowRoot.innerHTML = /* html */`
    <style>${FunkoName.styles}</style>
    <div class="box-data">
      <div class="box-name">${this.name}</div>
      ${this.showSubname()}
    </div>`;
  }
}

customElements.define("funko-name", FunkoName);


class FunkoNumber extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  static get styles() {
    return /* css */`
      :host {

      }

      .box-number {
        width: 50px;
        height: 50px;
        background: #000;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      span {
        font-family: "Bebas Neue";
        font-weight: bold;
        font-size: 36px;
        color: #fff;
        transform: translate(0, 3px);
      }
    `;
  }

  connectedCallback() {
    this.number = this.getAttribute("number");
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = /* html */`
    <style>${FunkoNumber.styles}</style>
    <div class="box-number">
      <span>${this.number}</span>
    </div>`;
  }
}

customElements.define("funko-number", FunkoNumber);


class ManzDev extends HTMLElement {
  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = /* html */`
    <div class="manzdev-container">
      <div class="manzdev"></div>
    </div>`;
  }
}

customElements.define("manz-dev", ManzDev);



class BoxTop extends HTMLElement {
  static get styles() {
    return /* css */`
      .box-top .inner-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .box-top funko-logo {
        transform: scale(0.6) translate(125px, 175px);
      }

      .box-top manz-dev {
        transform: scale(0.8) translate(-200px, -25px) rotate(5deg);
      }
    `;
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = /* html */`
    <style>${BoxTop.styles}</style>
    <div class="box-top">
      <div class="inner-box">
        <funko-logo type="STREAMERS"></funko-logo>
        <manz-dev></manz-dev>
      </div>
    </div>`;
  }
}

customElements.define("box-top", BoxTop);

class BoxRight extends HTMLElement {
  static get styles() {
    return /* css */`
      .box-right {
        position: relative;
        overflow: hidden;
      }

      .box-right funko-logo {
        position: absolute;
        top: 0;
        z-index: 10;
        transform-origin: 10px 25px;
        transform: scale(0.35) translate(250px, -40px);
      }

      .box-right manz-dev {
        transform: scale(0.6) translate(0, -10px) rotate(5deg);
        position: absolute;
        bottom: -125px;
        z-index: 10;
      }

      .box-right funko-number {
        position: absolute;
        bottom: 15px;
        right: 15px;
      }

      .box-right funko-name {
        transform-origin: 50% 50%;
        transform: rotate(90deg) translateX(-75px) scale(1.1);
      }
    `;
  }

  connectedCallback() {
    this.name = this.getAttribute("name");
    this.number = this.getAttribute("number") ?? "01";
    this.subname = this.getAttribute("subname");
    this.render();
  }

  render() {
    this.innerHTML = /* html */`
    <style>${BoxRight.styles}</style>
    <div class="box-right">
      <div class="front-top"></div>
      <div class="front-side">
        <funko-name name="${this.name}"></funko-name>
      </div>
      <div class="front-bottom">
        <funko-number number="${this.number}"></funko-number>
      </div>
      <funko-logo type="STREAMERS"></funko-logo>
      <manz-dev></manz-dev>
    </div>`;
  }
}

customElements.define("box-right", BoxRight);

class BoxLeft extends HTMLElement {
  static get styles() {
    return /* css */`
      .box-left .inner-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .box-left funko-logo {
        transform: scale(0.6) translateY(50px);
      }

      .box-left manz-dev {
        transform: scale(0.6) translate(-110px, -125px) rotate(5deg);
      }

      .box-left funko-name {
        transform: scale(0.8) translate(-55px, -100px);
      }

      .box-left funko-number {
        transform: scale(0.8) translate(0, -100px);
      }
    `;
  }

  connectedCallback() {
    this.name = this.getAttribute("name");
    this.number = this.getAttribute("number") ?? "01";
    this.render();
  }

  render() {
    this.innerHTML = /* html */`
    <style>${BoxLeft.styles}</style>
    <div class="box-left">
      <div class="inner-box">
        <funko-logo type="STREAMERS"></funko-logo>
        <manz-dev></manz-dev>
        <funko-name name="${this.name}"></funko-name>
        <funko-number number="${this.number}"></funko-number>
      </div>
    </div>`;
  }
}

customElements.define("box-left", BoxLeft);

class BoxFront extends HTMLElement {
  static get styles() {
    return /* css */`
      .box-front {
        position: relative;
        overflow: hidden;
      }

      .box-front funko-logo {
        position: absolute;
        top: 0;
        z-index: 10;
        transform-origin: 10px 25px;
        transform: scale(0.6);
      }

      .box-front .funko-logo-globe {
        width: 140px;
        height: 100px;
        clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
        border-radius: 50%;
        background: white;
        position: absolute;
        top: 0;
        z-index: 0;
        transform: translate(0, 15px);
      }

      .box-front manz-dev {
        position: absolute;
        bottom: 0;
        left: -85px;
        z-index: 10;
      }
    `;
  }

  connectedCallback() {
    this.name = this.getAttribute("name");
    this.number = this.getAttribute("number") ?? "01";
    this.subname = this.getAttribute("subname");
    this.render();
  }

  render() {
    this.innerHTML = /* html */`
    <style>${BoxFront.styles}</style>
    <div class="box-front">
      <div class="front-top">
        <div class="inner-box">
          <funko-number number="${this.number}"></funko-number>
        </div>
      </div>
      <div class="front-side">
        <div class="inner-box"></div>
      </div>
      <div class="front-bottom">
        <div class="inner-box">
          <funko-name name="${this.name}" subname="${this.subname}"></funko-name>
        </div>
      </div>
      <funko-logo type="STREAMERS"></funko-logo>
      <div class="funko-logo-globe"></div>
      <manz-dev></manz-dev>
    </div>`;
  }
}

customElements.define("box-front", BoxFront);

class BoxBottom extends HTMLElement {
  static get styles() {
    return /* css */`
      .box-bottom .inner-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .box-bottom funko-logo {
        transform: scale(0.6) translate(125px, 175px);
      }

      .box-bottom manz-dev {
        transform: scale(0.8) translate(-300px, -25px) rotate(5deg);
      }
    `;
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = /* html */`
    <style>${BoxBottom.styles}</style>
    <div class="box-bottom">
      <div class="inner-box">
        <funko-logo type="STREAMERS"></funko-logo>
        <manz-dev></manz-dev>
      </div>
    </div>`;
  }
}

customElements.define("box-bottom", BoxBottom);

class BoxBack extends HTMLElement {
  static get styles() {
    return /* css */`
      .box-back {
        position: relative;
      }

      .box-back .inner-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
      }

      .box-back funko-logo {
        transform: scale(0.6) translateY(-20px);
      }

      .box-back manz-dev {
        transform: scale(1) translate(0px, -40px) rotate(5deg);
      }

      .box-back funko-number {
        transform: scale(0.8) translate(-20px, 20px);
        position: absolute;
        top: 0;
        right :0;
      }
    `;
  }

  connectedCallback() {
    this.number = this.getAttribute("number") ?? "01";
    this.render();
  }

  render() {
    this.innerHTML = /* html */`
    <style>${BoxBack.styles}</style>
    <div class="box-back">
      <div class="inner-box">
        <funko-logo type="STREAMERS"></funko-logo>
        <manz-dev></manz-dev>
        <funko-number number="${this.number}"></funko-number>
      </div>
    </div>`;
  }
}

customElements.define("box-back", BoxBack);

class PunkoFop extends HTMLElement {
  static get styles() {
    return /* css */`
      .container {
        width: 350px;
        height: 250px;
        perspective: 1500px;
        position: relative;
      }

      .punko-fop {
        display: flex;
        width: 350px;
        margin: auto;
        gap: 10px;
        transform-style: preserve-3d;
        transform-origin: 50% 50% -100px;
        transform: rotateY(-22deg) rotateX(360deg);
        animation: spin 5s linear infinite;
      }

      box-right,
      box-left,
      box-back,
      box-front,
      box-top,
      box-bottom {
        position: absolute;
      }

      box-left {
        transform-origin: 0% 100%;
        transform: rotateY(-90deg) translateX(-100%);
      }

      box-right {
        transform-origin: 350px 0%;
        transform: rotateY(90deg) translateX(350px);
      }

      box-back {
        transform-origin: 50% 50%;
        transform: scaleX(-1) translateZ(-225px);
      }

      box-top {
        transform-origin: 100% 100%;
        transform: translateZ(0) translateY(-225px) rotateX(90deg) scaleY(1);
        animation: open 160s ease infinite;
      }

      box-bottom {
        transform-origin: 0% 0%;
        transform: rotateX(270deg) translateZ(450px);
      }

      @keyframes spin {
        0% {
          transform: rotateY(0deg);
        }

        100% {
          transform: rotateY(360deg);
        }
      }

      @keyframes open {
        0%, 90%, 100% {
          transform: translateZ(0) translateY(-225px) rotateX(90deg) scaleY(1);
        }

        95% {
          transform: translateZ(0) translateY(-225px) rotateX(-100deg) scaleY(1);
        }
      }
    `;
  }

  connectedCallback() {
    this.name = this.getAttribute("name");
    this.number = this.getAttribute("number") ?? "01";
    this.subname = this.getAttribute("subname");
    this.render();
  }

  render() {
    this.innerHTML = /* html */`
    <style>${PunkoFop.styles}</style>
    <div class="container">
      <div class="punko-fop">
        <box-top></box-top>
        <box-bottom></box-bottom>
        <box-right number="${this.number}" name="${this.name}"></box-right>
        <box-front number="${this.number}" name="${this.name}" subname="${this.subname}"></box-front>
        <box-left number="${this.number}" name="${this.name}"></box-left>
        <box-back number="${this.number}"></box-back>
      </div>
    </div>`;
  }
}

customElements.define("punko-fop", PunkoFop);