@font-face {
  font-family: "Lilita One";
  src: url("fonts/lilita_one_regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Sniglet";
  src: url("fonts/sniglet_regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Freeman";
  src: url("fonts/freeman_regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}




@keyframes lb-dialog-box-overlay-appearance {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

@keyframes lb-dialog-box-overlay-disappearance {
  0% { opacity: 1 }
  100% { opacity: 0 }
}




@keyframes lb-dialog-box-appearance {
  0% { transform: scale(0) rotateX(90deg) rotateZ(45deg) }
  100% { transform: scale(1) rotateX(0deg) rotateZ(0deg) }
}

@keyframes lb-dialog-box-disappearance {
  0% { transform: scale(1) rotateX(0deg) rotateZ(0deg) }
  100% { transform: scale(0) rotateX(90deg) rotateZ(45deg) }
}




@keyframes screen-appearing {
  0% { transform: var(--hidden-screen-transform) }
  100% { transform: var(--visible-screen-transform) }
}

@keyframes screen-disappearing {
  0% { transform: var(--visible-screen-transform) }
  100% { transform: var(--hidden-screen-transform) }
}




[data-app="com.lexibattle.game"] {
  container-name: lexi_battle;
  container-type: size;

  position: relative;

  overflow: hidden;

  box-sizing: border-box;
  width: 100dvw;
  height: 100dvh;
}




[data-app="com.lexibattle.game"] .VisuallyHidden {
  position: absolute;

  overflow: hidden;

  margin: -1px;

  padding: 0;

  width: 1px;
  height: 1px;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0
}




[data-app="com.lexibattle.game"] > div {
  --hidden-screen-transform: translate3d(-100%, 0, 0) scale(0);
  --visible-screen-transform: translate3d(0, 0, 0) scale(1);

  height: 100%;
}




.LexiBattleArea {
  container-name: lexi_battle_area;
  container-type: size;

  width: 100%;
  height: calc(100% - var(--wages-height));
}




@container lexi_battle (width >= 0px) {
  [data-app="com.lexibattle.game"] > div {
    --wages-width: 320px;
    --wages-height: 32px;
    --wages-height: 0px;

    --container-font-name: Sniglet;
    --container-font-max-size: 16px;
    --container-font-relative-size: 4cqmin;
    --container-font-size:
      min(var(--container-font-relative-size), var(--container-font-max-size));
  }




  [data-app="com.lexibattle.game"] .Wages {
    position: absolute;
    z-index: 999999;
    top: 0%;
    left: 50%;

    transform: translateX(-50%);

    width: var(--wages-width);
    height: var(--wages-height);

    background-color: black;
  }


  [data-app="com.lexibattle.game"] .Overlay:has(.DialogBox) [title] {
    cursor: help;
  }

  [data-app="com.lexibattle.game"] .Overlay:has(.DialogBox) {
    position: absolute;
    z-index: 999998;
    top: 0px;
    left: 0px;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    background: radial-gradient(
      circle at center,
      #2b56ea55 0%,
      #001c7d99 65%,
      #001c7d55 85%,
      #fff57422 100%
    );

    font: var(--container-font-size) var(--container-font-name);
  }

  [data-app="com.lexibattle.game"] .Overlay:has(.DialogBox).Hidden {
    animation:
      lb-dialog-box-overlay-disappearance
      400ms
      linear
      0s
      1
      normal
      forwards;
  }

  [data-app="com.lexibattle.game"] .Overlay:has(.DialogBox).Visible {
    animation:
      lb-dialog-box-overlay-appearance
      400ms
      linear
      0s
      1
      normal
      forwards;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox {
    display: flex;
    flex-direction: column;
    gap: .5em;

    margin: var(--wages-height) 5cqw 0px 5cqw;

    padding: 1.25em;

    background-color: #d9e3ff;

    border-radius: 2.25em;
    border: none;

    filter: drop-shadow(.3em .3em 0px #2b56ea77);
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox.Hidden {
    animation:
      lb-dialog-box-disappearance
      250ms
      ease-in
      0s
      1
      normal
      forwards;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox.Visible {
    animation:
      lb-dialog-box-appearance
      250ms
      ease-in
      0s
      1
      normal
      forwards;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Header {
    color: #154896;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Header::selection,
  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Header ::selection {
    background-color: #154896;

    color: #d9e3ff;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Body {
    overflow: auto;

    scrollbar-color: #154896 transparent;

    border-radius: .5em;

    box-sizing: border-box;

    padding: .2em;

    max-height: 50cqh;

    color: #05185f;
    font-weight: lighter;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Body:focus {
    outline: .125em solid #154896;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Body strong {
    color: #3370cc;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Body a {
    width: max-content;

    border-radius: .25em;

    color: #3370cc;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Body a:focus {
    outline: none;

    text-decoration: none;

    background-color: #fcff4e;

    color: #133a75;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Body::selection,
  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > .Body ::selection {
    background-color: #05185f;

    color: #d9e3ff;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > nav {
    margin-top: 1em;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > nav > ul {
    display: flex;
    gap: .75em;

    list-style-type: none;

    margin: 0px;

    padding: 0px;
  }

  [data-app="com.lexibattle.game"] .Overlay > .DialogBox > nav button {
    padding: .5em 1em;

    font: var(--container-font-size) var(--container-font-name);

    border-radius: .5em;
    border: none;

    background-color: #fffdb0;

    box-shadow: 0px .25em #a3bbff;

    color: #254190;
  }

  [data-app="com.lexibattle.game"] .Overlay
  > .DialogBox > nav button:hover {
    background-color: #eeeeee;
  }

  [data-app="com.lexibattle.game"] .Overlay
  > .DialogBox > nav button:focus {
    outline: .25em solid #a3bbff;
  }

  [data-app="com.lexibattle.game"] .Overlay
  > .DialogBox > nav button:active {
    box-shadow: 0px .125em #a3bbff;
  }
}





@container lexi_battle_area (width >= 0px) {
  .LexiBattleArea > .ScreenStack {
    --container-font-name: Sniglet;
    --container-font-max-size: 16px;
    --container-font-relative-size: 4cqmin;
    --container-font-size:
      min(var(--container-font-relative-size), var(--container-font-max-size));

    position: relative;

    width: 100%;
    height: 100%;
  }




  [data-app="com.lexibattle.game"] .Screen {
    position: absolute;
    top: 0px;
    left: 0px;

    transform: var(--hidden-screen-transform);

    box-sizing: border-box;

    width: 100%;

    font: var(--container-font-size) var(--container-font-name);
  }




  [data-app="com.lexibattle.game"] [title] {
    cursor: help;
  }



  [data-app="com.lexibattle.game"] input,
  [data-app="com.lexibattle.game"] select,
  [data-app="com.lexibattle.game"] button,
  [data-app="com.lexibattle.game"] textarea {
    font: var(--container-font-size) var(--container-font-name);
  }

  [data-app="com.lexibattle.game"] select,
  [data-app="com.lexibattle.game"] ::picker(select) {
    appearance: base-select;
  }

  [data-app="com.lexibattle.game"] select > option::checkmark {
    display: none;
    content: "";
  }

  [data-app="com.lexibattle.game"] button {
    user-select: none;
  }




  [data-app="com.lexibattle.game"] .Screen:not(:first-child).Appearing {
    --duration: 700ms;
    --delay: 0ms;
  }

  [data-app="com.lexibattle.game"] .Screen:first-child.Appearing {
    --duration: 0ms;
    --delay: 0ms;
  }

  [data-app="com.lexibattle.game"] .Screen.Appearing {
    transform: var(--hidden-screen-transform);

    animation:
      screen-appearing var(--duration) ease-out var(--delay) 1 normal forwards;
  }




  [data-app="com.lexibattle.game"] .Screen.Visible {
    transform: var(--visible-screen-transform);
  }




  [data-app="com.lexibattle.game"] .Screen:not(:first-child).Disappearing {
    --duration: 700ms;
    --delay: 0ms;
  }

  [data-app="com.lexibattle.game"] .Screen:first-child.Disappearing {
    --duration: 0ms;
    --delay: 700ms;
  }

  [data-app="com.lexibattle.game"] .Screen.Disappearing {
    transform: var(--visible-screen-transform);

    animation:
      screen-disappearing
      var(--duration)
      ease-out
      var(--delay)
      1
      normal
      forwards;
  }




  [data-app="com.lexibattle.game"] .Screen.Hidden {
    transform: var(--hidden-screen-transform);
  }
}




@container lexi_battle (height < 380px) {
  [data-app="com.lexibattle.game"] > div {
    --wages-width: 0px;
    --wages-height: 0px;
  }

  [data-app="com.lexibattle.game"] .Wages {
    display: none;
  }
}




@container lexi_battle (width >= 320px) and (height >= 456px) {
  [data-app="com.lexibattle.game"] > div {
    --wages-height: 50px;
    --wages-height: 0px;
  }
}




@container lexi_battle (width >= 468px) and (height > 380px) {
  [data-app="com.lexibattle.game"] > div {
    --wages-width: 468px;
    --wages-height: 60px;
    --wages-height: 0px;
  }
}





@container lexi_battle (width >= 728px) and (height > 380px) {
  [data-app="com.lexibattle.game"] > div {
    --wages-width: 728px;
    --wages-height: 90px;
    --wages-height: 0px;
  }
}





@container lexi_battle (height <= 456px) and (height > 380px) {
  [data-app="com.lexibattle.game"] > div {
    --wages-width: 320px;
    --wages-height: 32px;
    --wages-height: 0px;
  }
}@keyframes go-main-screen-button-motion {
  0% { transform: scale(1) }
  100% { transform: scale(1.25) }
}

@keyframes go-main-screen-button-push {
  100% { transform: scale(.5) }
}

@keyframes go-main-screen-button-content-motion {
  0% { transform: scale(1) }
  100% { transform: rotateZ(-8deg) }
}




@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .LoadingScreen {
    padding-top: calc(var(--wages-height) + 2cqh);

    height: calc(100% + var(--wages-height));

    background-image:
      radial-gradient(circle at center, transparent 40%, #001a5570 100%),
      url("images/cyan_zebra_background.svg");
    background-size: contain;
    background-position: center;
  }

  [data-app="com.lexibattle.game"] .LoadingScreen ::selection {
    background-color: #fffc3b;
  }




  [data-app="com.lexibattle.game"] .LoadingScreen > .Body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    height: 100%;
  }




  [data-app="com.lexibattle.game"] .WarningTape {
    position: absolute;
    top: 10cqmax;
    left: -36cqmax;

    transform-origin: center;
    transform: rotateZ(-45deg);

    width: 100cqmax;

    padding: .25em 0px;

    background-image: url("images/warning_tape.svg");
    background-size: contain;

    text-align: center;
    letter-spacing: .12ch;
    font: bold 1.5em Freeman;


    color: #ffffff;

    text-shadow: 0px .06em 0em #1a1b49;

    box-shadow: 0px .125em .25em #00000020;
  }

  [data-app="com.lexibattle.game"] .WarningTape::selection {
    background-color: #17e46c;

    text-shadow: none;
  }




  [data-app="com.lexibattle.game"] .LexiBattleLogo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  [data-app="com.lexibattle.game"] .LexiBattleLogo > img {
    width: min(15vh, 150px);

    filter: drop-shadow(0px .125em .25em #00000060);
  }

  [data-app="com.lexibattle.game"] .LexiBattleLogo > .Title {
    margin: 0px;

    font: 3em Freeman;

    color: #ffffff;

    text-shadow: 0px .075em 0px #005b9770;
  }

  [data-app="com.lexibattle.game"] .LexiBattleLogo > .Title::selection,
  [data-app="com.lexibattle.game"] .LexiBattleLogo > .Title ::selection {
    background-color: #7afbff;
  }

  [data-app="com.lexibattle.game"] .LexiBattleLogo > .URL {
    font-size: 1em;
    font-weight: bold;

    color: #f3f4ff;

    text-shadow: 0px .075em 0px #00000070;
    text-decoration: none;
  }

  [data-app="com.lexibattle.game"] .LexiBattleLogo > .URL:hover {
    color: #3d536d;

    text-shadow: none;
  }

  [data-app="com.lexibattle.game"] .LexiBattleLogo > .URL::selection,
  [data-app="com.lexibattle.game"] .LexiBattleLogo > .URL ::selection {
    background-color: #7afbff;
  }




  [data-app="com.lexibattle.game"] .GoMainScreenButton {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;

    padding: 0px;

    border: 0;

    background-color: transparent;

    font: 1.5em "Lilita One";
    -webkit-text-stroke: .04em #000000;
    text-shadow: 0px .1em #000000;

    animation:
      go-main-screen-button-motion
      1.5s
      ease-in-out
      0s
      infinite
      alternate
      backwards;
  }

  [data-app="com.lexibattle.game"] .GoMainScreenButton > .Background {
    aspect-ratio: 74/84;
    width: 4ch;
  }

  [data-app="com.lexibattle.game"] .GoMainScreenButton > .Background > .Side {
    fill: #ffcd00;
  }

  [data-app="com.lexibattle.game"] .GoMainScreenButton > .Background
  > .Surface {
    fill: #ffeb00;
  }

  [data-app="com.lexibattle.game"] .GoMainScreenButton > .Background > .Border {
    stroke-width: 4px;
    stroke: transparent;

    fill: transparent;
  }

  [data-app="com.lexibattle.game"] .GoMainScreenButton > .Content {
    color: #ffffff;

    animation:
      go-main-screen-button-content-motion
      1.5s
      ease-in-out
      0s
      infinite
      alternate
      backwards;
  }

  [data-app="com.lexibattle.game"] .GoMainScreenButton.Push {
    animation:
      go-main-screen-button-push
      250ms
      ease-in
      0s
      2
      alternate
      forwards;
  }

  [data-app="com.lexibattle.game"] .GoMainScreenButton:focus {
    outline: none;
  }

  [data-app="com.lexibattle.game"] .GoMainScreenButton:focus
  .Background > .Border {
    stroke: #ff6447
  }




  [data-app="com.lexibattle.game"] .AssetsProgressBar {
    position: relative;

    font-size: 1.125em;

    box-sizing: border-box;

    padding: .15em;

    margin-bottom: 4cqh;

    width: 70%;
    max-width: 640px;
    height: 3.5ch;

    border-radius: 1.25em;
    border: .125em solid #1b9dff;

    background-color: #36d0ff70;

    opacity: 0;

    user-select: none;

  }

  [data-app="com.lexibattle.game"] .AssetsProgressBar.Visible {
    transition: 500ms opacity;

    opacity: 1;

    user-select: auto;
  }

  [data-app="com.lexibattle.game"] .AssetsProgressBar > .Label {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    width: 95%;

    font-family: "Lilita One";
    color: #ffffff;

    text-align: center;
  }

  [data-app="com.lexibattle.game"] .AssetsProgressBar > .Label::selection,
  [data-app="com.lexibattle.game"] .AssetsProgressBar > .Label ::selection {
    background-color: #ffffff;

    color: #526cff;
    text-shadow: none;
    -webkit-text-stroke: 0em transparent;
  }

  [data-app="com.lexibattle.game"] .AssetsProgressBar > .Filling {  
    display: block;

    box-sizing: border-box;
    width: var(--progress);
    height: 100%;

    background-color: #1b54ff;
    border-radius: 1.25em;
  }
}@keyframes cloud-button-motion {
  100% { transform: scale(.85) }
}

@keyframes cloud-button-push {
  100% { transform: scale(.6) rotate(var(--cloud-button-rotate)) }
}

@keyframes cloud-button-focus {
  100% { transform: scale(.9); opacity: 50%; }
}




@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .MainScreen {
    overflow: auto;

    padding-top: calc(var(--wages-height) + 2cqh);

    height: calc(100% + var(--wages-height));

    background-image:
      radial-gradient(circle at center, transparent 40%, #001a5570 100%),
      url("images/cyan_zebra_background.svg");
    background-size: contain;
    background-position: center;

    scrollbar-color: rgb(0, 247, 255) transparent;
  }

  [data-app="com.lexibattle.game"] .MainScreen ::selection {
    background-color: #fffc3b;
  }




  [data-app="com.lexibattle.game"] .MainScreen > .Body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100%;
  }




  [data-app="com.lexibattle.game"] .DuelStartForm {
    display: flex;
    flex-direction: column;
    gap: 3em;
  }




  [data-app="com.lexibattle.game"] .DuelStartForm > .DuelStartFormActionList
  > ul {
    margin: 0px;

    padding: 0px;

    list-style-type: none;

    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 1.1em;
  }



  [data-app="com.lexibattle.game"] .CloudButton {
    position: relative;

    display: inline-flex;
    justify-content: center;

    border: 0;

    background-color: transparent;

    padding: 0px;

    margin: 0px;

    filter: drop-shadow(0px 0px .15em #002d3177);
  }

  [data-app="com.lexibattle.game"] .CloudButton:focus {
    outline: none;
  }

  [data-app="com.lexibattle.game"] .CloudButton:focus::before {
    position: absolute;
    top: -.95em;
    left: -.95em;

    display: block;

    width: 100%;
    height: 100%;

    padding: .95em;

    content:"";

    background-image:
      url("images/cloud_button_focus_bl.svg"),
      url("images/cloud_button_focus_tr.svg");
    background-position: 0% 100%, 100% 0%;
    background-repeat: no-repeat;
    background-size: 3em;

    animation: cloud-button-focus 1000ms ease-in-out 0s infinite alternate;
  }

  [data-app="com.lexibattle.game"] .CloudButton > .Background {
    position: absolute;
    left: 0px;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .CloudButton
  > .Background ellipse {
    transform-origin: center;

    animation:
      cloud-button-motion
      1s
      linear
      var(--delay)
      infinite
      alternate;
  }

  [data-app="com.lexibattle.game"] .CloudButton.Push {
    animation: cloud-button-push 250ms ease-in-out 0s 2 alternate forwards;
  }

  [data-app="com.lexibattle.game"] .CloudButton > .Content {
    position: relative;

    display: inline-flex;
    /*flex-direction: row-reverse;*/
    align-items: center;
    gap: .5em;

    box-sizing: border-box;
    width: fit-content;
  }

  [data-app="com.lexibattle.game"] .CloudButton > .Content > .IconFrame
  > img {
    height: 1.5ex;
  }

  [data-app="com.lexibattle.game"] .JoinRandomDuelButton {
    --cloud-button-rotate: 10deg;
  }

  [data-app="com.lexibattle.game"] .CreateDuelButton {
    --cloud-button-rotate: -10deg;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton1 {
    --cloud-button-rotate: -10deg;

    justify-self: end;
  }

  [data-app="com.lexibattle.game"] .JoinRandomDuelButton > .Content {
    padding: 1.8em 3.5em;

    color: #4c493b;
  }

  [data-app="com.lexibattle.game"] .CreateDuelButton > .Content {
    padding: 1.8em 3.5em;

    color: #ffd7d5;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton1 > .Content {
    padding: 1.8em
  }

  [data-app="com.lexibattle.game"] .JoinRandomDuelButton > .Background ellipse {
    fill: #ffe266 
  }

  [data-app="com.lexibattle.game"] .JoinRandomDuelButton > .Background g {
    filter:
      drop-shadow(0px 3px 0px #ffeea4)
      drop-shadow(0px 6px 0px #ffce66)
  }

  [data-app="com.lexibattle.game"] .CreateDuelButton > .Background ellipse {
    fill: #ff6d66
  }

  [data-app="com.lexibattle.game"] .CreateDuelButton > .Background g {
    filter:
      drop-shadow(0px 3px 0px #ff847e)
      drop-shadow(0px 6px 0px #e45049)
  }

  [data-app="com.lexibattle.game"] .GameMenuButton1 > .Background ellipse {
    fill: #d8d8d8
  }

  [data-app="com.lexibattle.game"] .GameMenuButton1 > .Background g {
    filter:
      drop-shadow(0px 3px 0px #e0e0e0)
      drop-shadow(0px 6px 0px #b1b1b1)
  }

  [data-app="com.lexibattle.game"] .JoinRandomDuelButton
  > .Background ellipse:nth-child(1) {
    --delay: 0ms;
  }

  [data-app="com.lexibattle.game"] .JoinRandomDuelButton
  > .Background ellipse:nth-child(2) {
    --delay: 1000ms;
  }

  [data-app="com.lexibattle.game"] .JoinRandomDuelButton
  > .Background ellipse:nth-child(3) {
    --delay: 500ms;
  }

  [data-app="com.lexibattle.game"] .JoinRandomDuelButton
  > .Background ellipse:nth-child(4) {
    --delay: 0ms;
  }

  [data-app="com.lexibattle.game"] .JoinRandomDuelButton
  > .Background ellipse:nth-child(5) {
    --delay: 500ms;
  }

  [data-app="com.lexibattle.game"] .CreateDuelButton
  > .Background ellipse:nth-child(1) {
    --delay: 500ms;
  }

  [data-app="com.lexibattle.game"] .CreateDuelButton
  > .Background ellipse:nth-child(2) {
    --delay: 0ms;
  }

  [data-app="com.lexibattle.game"] .CreateDuelButton
  > .Background ellipse:nth-child(3) {
    --delay: 500ms;
  }

  [data-app="com.lexibattle.game"] .CreateDuelButton
  > .Background ellipse:nth-child(4) {
    --delay: 1000ms;
  }

  [data-app="com.lexibattle.game"] .CreateDuelButton
  > .Background ellipse:nth-child(5) {
    --delay: 0ms;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton1 > .Background
  ellipse:nth-child(1) {
    --delay: 1000ms;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton1 > .Background
  ellipse:nth-child(2) {
    --delay: 0ms;
  }
}@keyframes avatar-selector-focus {
  33.333333333% {
    d: path("m 16.334818,11.114439 c 17.096,-12.464514 42.844998,-9.6599987 52.420638,0 9.575638,9.659999 17.998931,38.509666 0,50.974179 -17.998919,12.464527 -35.354238,11.84838 -52.420638,1.908279 -17.06640194,-9.940085 -17.09600143,-40.417944 0,-52.882458 z")
  }
  66.666666667% {
    d: path("m 14.774371,12.011102 c 17.096001,-12.46451426 36.298831,-12.80196736 52.42065,-3.8165585 16.121818,8.9854095 17.998932,42.3262145 0,54.7907315 -17.998922,12.464525 -35.354248,14.212507 -52.42065,0 -17.0664002,-14.212493 -17.0960006,-38.509658 0,-50.974173 z")
  }
  100% {
    d: path("m 14.774371,12.011102 c 17.096001,-12.46451426 41.832297,-9.9395481 50.505014,-0.95414 8.672719,8.985409 22.958845,42.44171 3.831276,52.882464 -19.127582,10.44074 -45.957434,12.413589 -56.251927,0 C 2.5642434,51.525827 -2.3216296,24.475617 14.774371,12.011102 Z")
  }
}




@keyframes avatar-selector-option-checked {
  0% {
    transform: rotateZ(0deg);
  }
  
  100% {
    transform: rotateZ(10deg) scale(1.125);
  }
}




@keyframes name-field-focus {
  33.333333333% {
    d: path("m 6.4339441,8.1419868 c 61.9862249,-7.1120453 134.6089759,-3.6193032 146.7541659,0 5.71436,1.7028973 8.84892,16.6205202 0,20.2651162 -11.93131,4.914137 -101.021774,7.226259 -146.7541659,0 -5.85159774,-0.924622 -5.87816958,-19.590679 0,-20.2651162 z");
  }

  66.666666667% {
    d: path("m 6.4339441,8.1419868 c 63.6182729,-9.6706739 122.3686559,-6.5190825 146.7541659,0 5.75677,1.538982 9.50036,19.7902432 0,20.2651162 -33.47429,1.673209 -101.021774,7.226259 -146.7541659,0 -5.85159774,-0.924622 -5.85191289,-19.3755611 0,-20.2651162 z");
  }

  100% {
    d: path("m 6.4339441,8.1419868 c 63.1286579,-3.3593899 122.3686559,-6.5190825 146.7541659,0 5.75677,1.538982 9.51032,20.4011992 0,20.2651162 -49.95792,-0.714846 -94.983211,-0.279052 -146.7541659,0 -5.91801485,0.03189 -5.90583281,-19.9508376 0,-20.2651162 z");
  }
}




@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .IdentityFieldset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;

    padding: 0px;

    border: 0;
  }


  [data-app="com.lexibattle.game"] .AvatarSelector,
  [data-app="com.lexibattle.game"] .AvatarSelector > select {
    font-size: 2.25em;
  }

  [data-app="com.lexibattle.game"] .AvatarSelector {
    --drop-shadow-y: min(.7cqh, calc(.7cqw * 1.4));

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    filter: drop-shadow(0px var(--drop-shadow-y) 0px #002d3177);
  }

  [data-app="com.lexibattle.game"] .AvatarSelector > .Background {
    position: absolute;

    width: 100%;
  }

  [data-app="com.lexibattle.game"] .AvatarSelector > .Background > path {
    fill: #ffffff;
  }

  [data-app="com.lexibattle.game"] .AvatarSelector > select {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 169/154;

    margin: 0px;

    padding: 0.3em;

    border: 0;
    border-radius: 50%;

    background-color: transparent;

    scrollbar-color: #f7786b transparent;
  }

  [data-app="com.lexibattle.game"] .AvatarSelector > select:focus {
    outline: none;
  }

  [data-app="com.lexibattle.game"] .AvatarSelector:has(select:focus)
  > .Background path,
  [data-app="com.lexibattle.game"] .AvatarSelector:has(select:open)
  > .Background path {
    stroke-width: 2px;
    stroke: #f7786b;

    animation:
      avatar-selector-focus
      2500ms
      ease-in-out
      infinite
      forwards
      alternate;
  }

  [data-app="com.lexibattle.game"] .AvatarSelector > select::picker-icon {
    display: none;
    content: "";
  }

  [data-app="com.lexibattle.game"] .AvatarSelector ::picker(select) {
    --border-radius: min(2cqh, calc(2cqw * 1.4));

    margin: var(--drop-shadow-y) 0px var(--drop-shadow-y) 0px;

    border: 0;
    border-radius: var(--border-radius) 0px 0px var(--border-radius);
  }

  [data-app="com.lexibattle.game"] .AvatarSelector > select > option {
    display: inline-flex;

    aspect-ratio: 1/1;
    box-sizing: border-box;

    margin: .1em;

    padding: .15em;

    outline: .035em solid transparent;

    border-radius: 50%;

    font-size: .75em;
  }

  [data-app="com.lexibattle.game"] .AvatarSelector > select > option:hover {
    background-color: #f5f5f5;
  }

  [data-app="com.lexibattle.game"] .AvatarSelector > select > option:checked {
    background-color: #ffffff;

    filter: drop-shadow(
      .0em
      .0em
      .035em
      #f7786b
    );

    animation:
      avatar-selector-option-checked
      1000ms
      ease-in-out
      infinite
      forwards
      alternate;
  }

  [data-app="com.lexibattle.game"] .AvatarSelector > select > option:focus {
    background-color: #ffffff;

    outline-color: #f7786b;
  }




  [data-app="com.lexibattle.game"] .NameField {
    --drop-shadow-y: min(.7cqh, calc(.7cqw * 1.4));

    position: relative;

    display: inline-flex;

    width: fit-content;

    filter: drop-shadow(0px var(--drop-shadow-y) 0px #002d3177);
  }

  [data-app="com.lexibattle.game"] .NameField > .Background {
    position: absolute;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .NameField > .Background path {
    fill: #fee8a9;
  }

  [data-app="com.lexibattle.game"] .NameField:has(input:focus)
  .Background path {
    stroke-width: 2px;
    stroke: #f7786b;

    animation: name-field-focus 2500ms ease-in-out infinite forwards alternate;
  }

  [data-app="com.lexibattle.game"] .NameField > input {
    --padding-x: .8em;
    --padding-y: .8em;

    position: relative;

    width: min(30cqh, calc(30cqw * 1.4));
    height: min(4cqh, calc(4cqw * 1.4));

    margin: 0px;

    padding: var(--padding-y) var(--padding-y);

    background-color: transparent;

    border: 0;

    color: #e95d4d;
  }

  [data-app="com.lexibattle.game"] .NameField > input::placeholder {
    color: #645f48;
  }

  [data-app="com.lexibattle.game"] .NameField > input::selection {
    background-color: #e95d4d;

    color: #ffcdcd;
  }

  [data-app="com.lexibattle.game"] .NameField > input:focus {
    outline: none;
  }




  [data-app="com.lexibattle.game"] .GenderSelector {
    padding: 0px;

    width: fit-content;

    border: 0;
  }

  [data-app="com.lexibattle.game"] .GenderSelector > ul {
    display: inline-flex;
    gap: 1em;

    margin: 0px;

    padding: 0px;

    list-style-type: none;
  }

  [data-app="com.lexibattle.game"] .GenderSelector > ul > li {
    display: inline-flex;
  }

  [data-app="com.lexibattle.game"] .GenderRadioButton {
    display: inline-flex;
    border: .2em solid transparent;
    border-radius: 1em;
  }

  [data-app="com.lexibattle.game"] .GenderRadioButton > .Icon {
    --drop-shadow-x: 0px;
    --drop-shadow-y: min(.2cqh, calc(.2cqw * 1.4));
    --drop-shadow-length: min(.07cqh, calc(.07cqw * 1.4));

    width: 4ch;

    filter: drop-shadow(
      var(--drop-shadow-x)
      var(--drop-shadow-y)
      var(--drop-shadow-length)
      #55302b
    );
  }

  [data-app="com.lexibattle.game"] .GenderRadioButton > input:checked + .Icon {
    filter: drop-shadow(
      var(--drop-shadow-x)
      var(--drop-shadow-y)
      var(--drop-shadow-length)
      #cc4637
    );
  }

  [data-app="com.lexibattle.game"] .GenderRadioButton:has(input:focus) {
    background-color: #003ab855;
  }

  [data-app="com.lexibattle.game"] .GenderRadioButton:has(input:checked)
  > .Icon {
    animation: gender-selected 1s ease-in 0s infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .GenderRadioButton
  > input:checked + .Icon > path {
    fill: #f7786b;
  }

  [data-app="com.lexibattle.game"] .GenderSelector {
    display: inline-flex;
    gap: 1em;

    padding: 0px;

    width: fit-content;

    border: 0;
  }
}@keyframes mark-focus {
  100% { transform: scale(1.5, 1.25)  }
}




@keyframes back-button-motion {
  100% { transform: scale(1.5) rotateZ(-10deg) }
}




@keyframes game-menu-screen-button-push {
  100% { transform: scale(.5) }
}




@keyframes language-selector-focus {
  33.333333333% {
    d: path("M 8.3421577,6.0479994 C 24.897455,2.9563819 43.249187,1.1300386 57.736972,4.3873022 62.95803,5.5611436 63.229759,18.833805 57.10138,21.413288 48.403463,25.074311 22.277942,25.826656 6.6896154,22.307509 0.84473929,20.988 1.6937262,7.2895602 8.3421577,6.0479994 Z")
  }

  66.666666667% {
    d: path("M 7.1985793,5.1531738 C 23.753876,2.0615561 43.249676,1.1294346 57.737461,4.3866981 62.958519,5.5605395 61.959061,17.811234 55.830682,20.390715 47.132765,24.05174 22.278431,25.826052 6.6901048,22.306905 0.84522873,20.987396 0.55014792,6.3947345 7.1985793,5.1531738 Z")
  }

  100% {
    d: path("M 9.4862972,5.153761 C 26.041594,2.0621433 41.850952,2.6629731 56.338739,5.9202366 61.559796,7.0940782 62.721355,18.833788 56.592975,21.413271 47.89506,25.074294 22.150894,23.910449 6.5625685,20.391302 0.71769233,19.071793 2.8378657,6.3953217 9.4862972,5.153761 Z")
  }
}



@keyframes keyboard-layout-selector-focus {
  33.333333333% {
    d: path("M 6.7097107,4.7095182 C 13.329122,1.4737753 43.418357,2.4569999 53.659429,6.4264244 58.654646,8.3625643 64.204938,21.993433 57.647387,22.997619 41.075149,25.535406 19.547148,24.614744 7.8491279,21.853014 2.0231805,20.477591 -0.00747131,7.9930536 6.7097107,4.7095182 Z")
  }

  66.666666667% {
    d: path("M 7.5642737,5.9971978 C 14.183685,2.7614551 44.985055,1.3123955 55.22613,5.2818203 60.221348,7.2179601 64.204938,21.993433 57.647387,22.997619 41.075149,25.535406 20.97142,23.040914 9.2733994,20.279184 3.4474519,18.90376 0.84709145,9.2807327 7.5642737,5.9971978 Z")
  }

  100% {
    d: path("M 8.9885451,5.8541222 C 15.607955,2.6183796 43.560784,2.7431509 53.801861,6.7125756 58.797078,8.6487153 63.63523,21.134978 57.077679,22.139166 40.50544,24.676953 20.97142,23.040914 9.2733994,20.279184 3.4474519,18.90376 2.2713629,9.1376574 8.9885451,5.8541222 Z")
  }
}



@keyframes sound-checkbox-focus {
  33.333333333% {
    d: path("M 3.4486606,3.3674672 C 4.7951439,1.9559305 7.2460987,1.7089043 8.9201049,2.7198698 10.594112,3.7308354 11.259642,8.5166529 8.7122411,9.6992921 6.1648404,10.881931 4.522208,11.222075 2.9027888,9.9822109 1.2833695,8.7423474 2.102177,4.7790039 3.4486606,3.3674672 Z")
  }

  66.666666667% {
    d: path("M 4.11286,3.4698307 C 5.4593433,2.0582939 7.2460987,1.7089043 8.9201049,2.7198698 10.594112,3.7308354 11.821657,8.5166529 9.2742559,9.6992921 6.7268554,10.881931 4.522208,11.222075 2.9027888,9.9822109 1.2833695,8.7423474 2.7663765,4.8813673 4.11286,3.4698307 Z")
  }

  100% {
    d: path("M 4.11286,3.4698307 C 5.4593433,2.0582939 7.0417296,2.067176 8.7157359,3.0781416 10.389743,4.0891072 11.46401,7.9024728 8.9166102,9.0851116 6.3692095,10.267751 5.0842229,10.659076 3.4648037,9.4192121 1.8453844,8.1793489 2.7663765,4.8813673 4.11286,3.4698307 Z")
  }
}




@keyframes mark-focus {
  100% { transform: scale(1.5, 1.25)  }
}




@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .GameMenuScreen {
    overflow: auto;

    padding-top: calc(var(--wages-height) + 2cqh);

    height: calc(100% + var(--wages-height));

    background-image:
      radial-gradient(circle at center, transparent 40%, #001a5570 100%),
      url("images/blue_zebra_background.svg");
    background-size: contain;
    background-position: center;

    scrollbar-color: #4adbff transparent;
  }




  [data-app="com.lexibattle.game"] .Screen.GameMenuScreen .NavigationBar {
    position: absolute;
    top: calc(var(--wages-height) + 2cqh + 5cqh);
    left: 0px;

    width: 100%;
  }

  [data-app="com.lexibattle.game"] .Screen.GameMenuScreen .NavigationBar > ul {
    display: flex;
    align-items: center;
    gap: 1em;

    list-style-type: none;

    margin: 0px 4cqw;

    padding: 0px;
  }

  [data-app="com.lexibattle.game"] .Screen.GameMenuScreen .NavigationBar > ul
  > li:nth-child(1) {
    flex: 2;
  }

  [data-app="com.lexibattle.game"] .Screen.GameMenuScreen .NavigationBar > ul
  > li:nth-child(2),
  [data-app="com.lexibattle.game"] .Screen.GameMenuScreen .NavigationBar > ul
  > li:nth-child(3) {
    flex: 0;
  }




  [data-app="com.lexibattle.game"] .GameMenuScreenBackButton {
    aspect-ratio: 36/31;
    width: 2em;

    border: 0;

    background-color: transparent;
    background-image: url("images/blue_back_icon.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

    animation:
      back-button-motion 1500ms ease-in-out infinite forwards alternate;
  }

  [data-app="com.lexibattle.game"] .GameMenuScreenBackButton.Push {
    animation:
      game-menu-screen-button-push 250ms ease-in-out 2 forwards alternate;
  }

  [data-app="com.lexibattle.game"] .GameMenuScreenBackButton:focus,
  [data-app="com.lexibattle.game"] .GameMenuScreenBackButton[disabled].Push {
    outline: none;
    background-image: url("images/blue_back_icon_focus.svg");
  }



  [data-app="com.lexibattle.game"] .ContactMeButton {
    aspect-ratio: 36/29;
    width: 2em;

    border: 0;

    background-color: transparent;
    background-image: url("images/contact_me_icon.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  [data-app="com.lexibattle.game"] .ContactMeButton:focus,
  [data-app="com.lexibattle.game"] .ContactMeButton[disabled].Push {
    outline: none;
    background-image: url("images/contact_me_icon_focus.svg");
  }


  [data-app="com.lexibattle.game"] .ContactMeButton.Push {
    animation:
      game-menu-screen-button-push 250ms ease-in-out 2 forwards alternate;
  }



  [data-app="com.lexibattle.game"] .HelpButton {
    aspect-ratio: 1/1;
    width: 2em;

    border: 0;

    background-color: transparent;
    background-image: url("images/help_icon.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  [data-app="com.lexibattle.game"] .HelpButton:focus,
  [data-app="com.lexibattle.game"] .HelpButton[disabled].Push {
    outline: none;
    background-image: url("images/help_icon_focus.svg");
  }

  [data-app="com.lexibattle.game"] .HelpButton.Push {
    animation:
      game-menu-screen-button-push 250ms ease-in-out 2 forwards alternate;
  }




  [data-app="com.lexibattle.game"] .GameMenuScreen .UIFieldset {
    display: table;

    border-collapse: collapse;

    padding: 0px;

    border: 0;
    border-spacing: .5em;
  }



  [data-app="com.lexibattle.game"] .GameMenuScreen .UIFieldset > .Row {
    display: table-row;
  }

  [data-app="com.lexibattle.game"] .GameMenuScreen .UIFieldset > .Row > * {
    display: table-cell;

    vertical-align: middle;

    border-width: 1em 0px 1em 0px;
    border-style: solid;
    border-color: transparent;
  }

  [data-app="com.lexibattle.game"] .GameMenuScreen
  .UIFieldset > .Row > *:first-child {
    padding-right: 5ch;

    color: #ffffff;
    text-shadow: 0px .15em 0px #3000b477;
  }

  [data-app="com.lexibattle.game"] .GameMenuScreen
  .UIFieldset > .Row > *:first-child::selection,
  [data-app="com.lexibattle.game"] .GameMenuScreen
  .UIFieldset > .Row > *:first-child ::selection {
    background-color: #89c6ff;

    color: #0054d3;

    text-shadow: none;
  }




  [data-app="com.lexibattle.game"] .SettingsForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5cqh;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .LangSelector {
    display: inline-flex;

    position: relative;

    width: fit-content;

    filter: drop-shadow(.2em .35em 0em #002d3177);
  }

  [data-app="com.lexibattle.game"] .LangSelector > .Background {
    position: absolute;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .LangSelector > .Background path {
    fill: #fee8a9
  }

  [data-app="com.lexibattle.game"] .LangSelector > select {
    display: flex;
    align-items: center;

    position: relative;
  
    /*width: min(12cqh, calc(12cqw * 1.4));*/
    /*height: min(4cqh, calc(4cqw * 1.4));*/

    margin: .2em;
   /* margin: .4em .6em;*/
/*
    padding: .7em;
    padding: .8em;*/
    padding: .8em;

    background-color: transparent;

    border: 0;
    color: #e95d4d;
  }

  [data-app="com.lexibattle.game"] .LangSelector > select:focus,
  [data-app="com.lexibattle.game"] .LangSelector > select:open {
    outline: none;

    color: #f7786b;
  }

  [data-app="com.lexibattle.game"] .LangSelector:has(select:focus)
  > .Background path,
  [data-app="com.lexibattle.game"] .LangSelector:has(select:open)
  > .Background path {
    stroke-width: 2px;
    stroke: #f7786b;

    animation:
      language-selector-focus
      2500ms
      ease-in-out
      infinite
      forwards
      alternate;
  }

  [data-app="com.lexibattle.game"] .LangSelector ::picker(select) {
    margin: .4em 0px;

    border: 0;
    border-radius: 1em;

    filter: drop-shadow(0em .35em 0em #002d3177);
  }

  [data-app="com.lexibattle.game"] .LangSelector > select option {
    padding: .5em 1em;

    color: #c92200;
  }

  [data-app="com.lexibattle.game"] .LangSelector
  > select option:hover {
    background-color: #f7786b;

    color: #ffffff;
  }

  [data-app="com.lexibattle.game"] .LangSelector
  > select option::checkmark {
    content: "";
  }

  [data-app="com.lexibattle.game"] .LangSelector > select::picker-icon {
    display: flex;

    content: "➜";

    transform: rotate(90deg);
    transition: transform 500ms;
  }

  [data-app="com.lexibattle.game"] .LangSelector
  > select:open::picker-icon {
    transform: rotate(135deg);
  }



  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector {
    display: inline-flex;

    position: relative;

    width: 12ch;
    width: fit-content;

    filter: drop-shadow(.2em .35em 0em #002d3177);
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector > .Background {
    position: absolute;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector > .Background path {
    fill: #fee8a9
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector > select {
    display: flex;
    align-items: center;

    position: relative;

    margin: .2em;

    /*width: min(12cqh, calc(12cqw * 1.4));*/
    /*height: min(4cqh, calc(4cqw * 1.4));

    margin: 0px;
    margin: .4em .6em;

    padding: .7em;
    padding: .8em;
    padding: 0em;*/

    padding: .8em;

    background-color: transparent;

    border: 0;

    color: #e95d4d;
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector > select:focus,
  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector > select:open {
    outline: none;

    color: #f7786b;
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector:has(select:focus)
  > .Background path,
  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector:has(select:open)
  > .Background path {
    stroke-width: 2px;
    stroke: #f7786b;
    animation:
      keyboard-layout-selector-focus
      2500ms
      ease-in-out
      infinite
      forwards
      alternate;
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector ::picker(select) {
    margin: .4em 0px;

    border: 0;
    border-radius: 1em;

    filter: drop-shadow(0em .35em 0em #002d3177);
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector > select option {
    padding: .5em 1em;

    color: #e95d4d;
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector
  > select option:hover {
    background-color: #f7786b;
    color: #ffffff;
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector
  > select option::checkmark {
    content: "";
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector
  > select::picker-icon {
    display: flex;
    content: "➜";
    transform: rotate(90deg);
    transition: transform 500ms;
  }

  [data-app="com.lexibattle.game"] .KeyboardLayoutSelector
  > select:open::picker-icon {
    transform: rotate(135deg);
  }



  [data-app="com.lexibattle.game"] .SoundCheckbox {
    display: inline-flex;
    gap: .5em;
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox > .Box {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.5ch;
    height: 2.5ch;

    filter: drop-shadow(.2em .35em 0em #002d3177);
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox > .Box > input {
    position: absolute;

    width: 0px;
    height: 0px;
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox > .Box > input:focus {
    outline: none;
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox
  > .Box:has(input:focus) > .Background path {
    stroke-width: 1.75px;
    stroke: #f7786b;
    animation:
      sound-checkbox-focus 2500ms ease-in-out infinite forwards alternate;
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox > .Box > .Background {
    position: absolute;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox > .Box >
  .Background path {
    fill: #fee8a9
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox > .Box > .Icon {
    position: absolute;

    display: none;

    width: 2ch;
    height: 2ch;
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox > .Box > .Icon path {
    fill: #e95d4d
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox
  > .Box:has(input:focus) > .Icon path {
    fill: #f7786b;
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox > .Box:has(input:checked)
  > .Icon {
    display: inline;
    animation: mark-focus 1000ms ease-in-out infinite forwards alternate;
  }

  [data-app="com.lexibattle.game"] .SoundCheckbox > .Label {
    display: inline-flex;
    align-items: center;

    user-select: none;

    color: #ffffff;
    text-shadow: 0px .15em 0px #3000b477;
  }
}@keyframes matchmaking-identity-appearing {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes matchmaking-identity-disappearing {
  0% { opacity: 1; }
  100% { opacity: 0; }
}




@keyframes matchmaking-versus-appearing {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes matchmaking-versus-disappearing {
  0% { opacity: 1; }
  100% { opacity: 0; }
}




@keyframes copy-url-button-push {
  0% { transform: scale(1) }
  100% { transform: scale(.5) }
}


@keyframes url-copied {
  0% { filter: none }
  100% { filter: drop-shadow(0px 0px .5em #c3ffff) }
}




@keyframes stop-matchmaking-button-push {
  100% { transform: scale(.5); }
}




@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .MatchmakingScreen {
    overflow: auto;

    padding-top: calc(var(--wages-height) + 2cqh);

    height: calc(100% + var(--wages-height));

    background-image:
      radial-gradient(circle at center, transparent 40%, #001a5570 100%),
      url("images/blue_zebra_background.svg");
    background-size: contain;
    background-position: center;

    font: min(3cqmin, 16px) var(--container-font-name);

    scrollbar-color: #4adbff transparent;
  }




  [data-app="com.lexibattle.game"] .Screen.MatchmakingScreen > .Body {
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 3cqh;
  }




  [data-app="com.lexibattle.game"] .MatchmakingIdentity {
    visibility: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity.Appearing {
    visibility: visible;

    animation: matchmaking-identity-appearing 1s linear 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity.Visible {
    visibility: visible;
    opacity: 1;
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity.Disappearing {
    visibility: visible;

    animation: matchmaking-identity-disappearing 1s linear 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity.Hidden {
    visibility: hidden;
    opacity: 0;
  }



  [data-app="com.lexibattle.game"] .MatchmakingIdentity > .MatchmakingAvatar {
    display: flex;
    align-items: center;
    justify-content: center;

    aspect-ratio: 169/154;
    height: 1.25em;

    padding: .25em;

    font-size: 5em;

    filter: drop-shadow(0em 0.125em 0em #002d3177);
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity > .MatchmakingAvatar
  > .Background {
    position: absolute;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity
  > .MatchmakingAvatar.OtherClient > .Background {
    transform: rotateZ(65deg);
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity > .MatchmakingAvatar
  > .Background path {
    fill: #ffffff;
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity
  > .MatchmakingAvatar > .Content {
    position: relative;
  }

  [data-app="com.lexibattle.game"] .MatchmakingAvatar > .Content::selection,
  [data-app="com.lexibattle.game"] .MatchmakingAvatar > .Content ::selection {
    background-color: #0089e9;
  }



  [data-app="com.lexibattle.game"] .MatchmakingIdentity > .MatchmakingName {
    display: inline-block;

    color: #ffffff;

    height: 1.2em;

    font-size: 1.2em;

    text-shadow: 0px .05em 0px #000000;
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity
  > .MatchmakingName::selection,
  [data-app="com.lexibattle.game"] .MatchmakingIdentity
  > .MatchmakingName ::selection {
    background-color: #00d9ff;

    color: #00478a;

    text-shadow: none;
  }

  [data-app="com.lexibattle.game"] .MatchmakingIdentity
  > .MatchmakingName.Empty {
    opacity: 0;
  }




  [data-app="com.lexibattle.game"] .Screen.MatchmakingScreen > .Body
  > .MatchInfos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5cqh;
  }

  [data-app="com.lexibattle.game"] .Screen.MatchmakingScreen > .Body
  > .MatchInfos > .Progress {
    position: relative;

    width: fit-content;
  }

  [data-app="com.lexibattle.game"] .MatchmakingHoldOnMessage {
    position: relative;
  }




  [data-app="com.lexibattle.game"] .MatchmakingVersus {
    visibility: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;

    transform: translateY(-50%);

    width: 100%;
    height: 100%;

    font: 4em "Lilita One";
    color: #fffd79;
  }

  [data-app="com.lexibattle.game"] .MatchmakingVersus::selection,
  [data-app="com.lexibattle.game"] .MatchmakingVersus ::selection {
    background-color: #fffd79;

    color: #0089e9;
  }

  [data-app="com.lexibattle.game"] .MatchmakingVersus.Appearing {
    visibility: visible;

    opacity: 0%;

    animation:
      matchmaking-versus-appearing 1000ms ease-in-out 500ms 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .MatchmakingVersus.Visible {
    visibility: visible;

    opacity: 100%;
  }

  [data-app="com.lexibattle.game"] .MatchmakingVersus.Disappearing {
    visibility: visible;

    opacity: 100%;

    animation:
      matchmaking-versus-disappearing
      1000ms
      ease-in-out
      500ms
      1
      normal
      forwards;
  }

  [data-app="com.lexibattle.game"] .MatchmakingVersus.Hidden {
    visibility: hidden;

    opacity: 0%;
  }




  [data-app="com.lexibattle.game"] .DuelURL {
    display: inline-flex;
    gap: .5em;
    align-items: center;

    padding: .6em;

    box-sizing: border-box;
    aspect-ratio: 270/35;
    width: fit-content;

    background-image: url("images/duel_url_background.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    color: #eb1919;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .URL,
  [data-app="com.lexibattle.game"] .DuelURL > .CopyURLButton {
    position: relative;
    top: -.1em;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .URL {
    flex: 2;

    padding: .25em;

    border-radius: .5em;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .URL::selection {
    background-color: #eb1919;

    color: #ffe8a6;
  }

  [data-app="com.lexibattle.game"] .DuelURL:has(.URL.Copied) {
    animation: url-copied 200ms ease-in-out 0s 8 alternate;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .CopyURLButton {
    display: flex;
    box-sizing: border-box;

    width: fit-content;

    padding: .2em;

    background-color: transparent;

    border: 0;
    border-radius: .5em;

    outline: .125em solid transparent;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .CopyURLButton.Push {
    animation: copy-url-button-push 200ms ease-in-out 0s 2 alternate;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .CopyURLButton:hover {
    background-color: #f2c483;
    background-color: #ffcece;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .CopyURLButton:focus,
  [data-app="com.lexibattle.game"] .DuelURL > .CopyURLButton[disabled].Push {
    background-color: #ffb67b;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .CopyURLButton .Content {
    display: inline-flex;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .CopyURLButton .IconFrame {
    display: inline-flex;
  }

  [data-app="com.lexibattle.game"] .DuelURL > .CopyURLButton img {
    height: 2.2ex;
  }





  [data-app="com.lexibattle.game"] .StopMatchmakingButton {
    padding: 1em 2em;

    border: 0;

    background-color: transparent;
    background-image: url("images/give_up_button.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    filter: drop-shadow(0px .07em .2em #006e7a);

    color: #ffe7e4;
    font-size: 1em;
    font-weight: bold;
  }

  [data-app="com.lexibattle.game"] .StopMatchmakingButton.Push {
    animation: stop-matchmaking-button-push 200ms ease-in-out 0s 2 alternate;
  }

  [data-app="com.lexibattle.game"] .StopMatchmakingButton:focus,
  [data-app="com.lexibattle.game"] .StopMatchmakingButton[disabled].Push {
    outline: none;
    background-image: url("images/give_up_button_focus.svg");
  }
}@keyframes hold-on-dot {
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


@keyframes hold-on-message-appearing {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hold-on-message-disappearing {
  0% { opacity: 1; }
  100% { opacity: 0; }
}


@keyframes hold-on-appearing {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hold-on-disappearing {
  0% { opacity: 1; }
  100% { opacity: 0; }
}




@container lexi_battle (width >= 0px) {
  [data-app="com.lexibattle.game"] .HoldOnMessage {
    visibility: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;

    font: 1.5em "Lilita One";
    font: 2em "Lilita One";
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage.Appearing {
    visibility: visible;

    animation: hold-on-appearing 1000ms ease-in-out 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage.Visible {
    visibility: visible;

    opacity: 1;
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage.Disappearing {
    visibility: visible;

    animation: hold-on-disappearing 1000ms ease-in-out 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage.Hidden {
    visibility: hidden;

    opacity: 0;
  }


  [data-app="com.lexibattle.game"] .HoldOnMessage > .Message {
    color: #fffd79;

    animation:
      hold-on-message-appearing 1000ms ease-in-out 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage > .Message::selection,
  [data-app="com.lexibattle.game"] .HoldOnMessage > .Message ::selection {
    background-color: #fffd79;

    color: #0089e9;
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage > .Message.Hidden {
    animation: hold-on-message-disappearing 1000ms ease-in-out 0s forwards;
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage > .Animation > img {
    user-select: none;

    height: .75em;

    opacity: 20%;

    transform-origin: center;
    transform: scale(.5);

    animation:
      hold-on-dot 1000ms ease-in-out var(--delay) infinite forwards alternate;
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage > .Animation *:nth-child(1) {
    --delay: 0ms;
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage > .Animation *:nth-child(2) {
    --delay: 500ms;
  }

  [data-app="com.lexibattle.game"] .HoldOnMessage > .Animation *:nth-child(3) {
    --delay: 1000ms;
  }
}@keyframes duel-button-push {
  100% { transform: scale(.6) }
}




@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .DuelScreen {
    padding-top: calc(var(--wages-height) + 2cqh);

    height: calc(100% + var(--wages-height));

    background-image:
      radial-gradient(circle at center, transparent 40%, #001a5570 100%),
      url("images/cyan_zebra_background.svg");
    background-size: contain;
    background-position: center;
  }




  [data-app="com.lexibattle.game"] .DuelScreen > .Body {
    height: 100%;
  }
}@keyframes duel-interval-appearing {
  0% { opacity: 0;}
  100% { opacity: 1;}
}



@keyframes duel-interval-disappearing {
  0% { opacity: 1; }
  100% { opacity: 0; }
}




@keyframes ready-for-next-word-button-motion {
  100% { transform: scale(.75) }
}



@keyframes new-event-in-log {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}



@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .DuelInterval {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1em;

    position: absolute;
    top: var(--wages-height);
    left: 0px;

    padding-bottom: 1.35em;

    box-sizing: border-box;
    width: 100%;
    height: calc(100% - var(--wages-height));
  }

  [data-app="com.lexibattle.game"] .DuelInterval.Appearing {
    display: flex;

    animation: duel-interval-appearing 700ms ease-in 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelInterval.Visible {
    display: flex;

    opacity: 1;
  }

  [data-app="com.lexibattle.game"] .DuelInterval.Disappearing {
    display: flex;

    animation: duel-interval-disappearing 700ms ease-in 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelInterval.Hidden {
    display: none;

    opacity: 0;
  }




  [data-app="com.lexibattle.game"] .DuelInterval > .Body {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    height: calc(100% - 1.35em - 1.2em - 1.2em - 1em);
  }



  [data-app="com.lexibattle.game"] .DuelLog {
    display: flex;
    flex-direction: column;
    gap: .5em;

    overflow-y: scroll;

    scroll-behavior: smooth;

    scrollbar-color: rgb(0, 247, 255) transparent;

    list-style: none;

    margin: 0px;

    padding: 2em 0px;

    box-sizing: border-box;
    width: 100%;
    height: 100%;

    mask-image: linear-gradient(
      to bottom, 
      transparent 0%, 
      black 2em, 
      black calc(100% - 2em), 
      transparent 100%
    );
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
  }



  [data-app="com.lexibattle.game"] .DuelLog > li {
    --box-shadow-y: .2em;
    --box-shadow-2-size: .25em;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0px .5em;

    padding: .65em;

    width: fit-content;

    line-height: 1.7em;

    border-radius: 1.5em;

    animation: new-event-in-log 250ms ease-in-out 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li[data-client="client"] {
    margin-left: 4em;

    box-shadow:
      0px var(--box-shadow-y) 0px #0092a5,
      0px var(--box-shadow-y) var(--box-shadow-2-size) #002429;

    background-color: #8bf2ff;

    color: #381f7e;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li[data-client="other-client"] {
    box-shadow:
      0px var(--box-shadow-y) 0px #c4bc58,
      0px var(--box-shadow-y) var(--box-shadow-2-size) #494511;

    background-color: #fff34d;
    color: #b81500;
  }

  [data-app="com.lexibattle.game"] .DuelLog
  > li:not([data-type="message"])::before {
    display: flex;
    align-items: center;
    justify-content: center;

    float: left;

    /*margin-top: .25em;*/
    margin-right: .5em;

    content: "";

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("images/black_info_icon.svg");

    box-sizing: border-box;
    width: 1.25em;
    height: 1.25em;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li[data-client="client"]::before {
    background-image: url("images/blue_info_icon.svg");
  }

  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-client="other-client"]::before {
    background-image: url("images/red_info_icon.svg");
  }


  [data-app="com.lexibattle.game"] .DuelLog > li[data-type="word-skipped"] {
    background-color: #eeeeee;

    box-shadow:
      0px var(--box-shadow-y) 0px #acacac,
      0px var(--box-shadow-y) var(--box-shadow-2-size) #002429;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li[data-type="word-skipped"]
  .Word {
    font-size: 1.2em;
  }



  [data-app="com.lexibattle.game"] .DuelLog > li[data-client="other-client"]
  .Avatar {
    padding: .2em;

    border-radius: 25%;
    border: .05em solid #ffd000;

    background-color: #ffffff;
  }


  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-client="client"][data-type="word-guessed"] .Word,
  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-client="client"][data-type="word-guessed"] .MoveCount {
    font-size: 1.2em;

    color: #6438df;
  }

  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-client="other-client"][data-type="word-guessed"] .Word,
  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-client="other-client"][data-type="word-guessed"] .MoveCount {
    font-size: 1.2em;

    color: #ef4700;
  }



  [data-app="com.lexibattle.game"] .DuelLog > li[data-type="message"] .Caption,
  [data-app="com.lexibattle.game"] .DuelLog > li[data-type="message"] .Word {
    font-weight: bold;
  }



  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-client="client"]::selection,
  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-client="client"] ::selection {
    background-color: #0daaff;
  }

  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-client="other-client"]::selection,
  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-client="other-client"] ::selection {
    background-color: #e3bb00;
  }

  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-type="word-skipped"]::selection,
  [data-app="com.lexibattle.game"] .DuelLog
  > li[data-type="word-skipped"] ::selection
  {
    background-color: #bdbdbd;
  }



  [data-app="com.lexibattle.game"] .DuelLog > li .ReportWordButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: .5em;

    padding: .25em;

    border: 0;
    border-radius: .5em;

    background-color: transparent;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li .ReportWordButton:focus {
    outline: none;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li .ReportWordButton.Push {
    animation: duel-button-push 125ms ease-in-out 0s 2 alternate forwards;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li[data-client="client"]
  .ReportWordButton:focus {
    background-color: #0daaff;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li[data-client="other-client"]
  .ReportWordButton:focus {
    background-color: #e3bb00;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li[data-type="word-skipped"]
  .ReportWordButton:focus {
    background-color: #bdbdbd;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li .ReportWordButton
  > .Content {
    display: inline-flex;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li .ReportWordButton > .Content
  > .IconFrame {
    display: inline-flex;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li .ReportWordButton > .Content
  > .IconFrame > .Icon {
    aspect-ratio: 1/1;
    height: 1.25em;
  }

  [data-app="com.lexibattle.game"] .DuelLog > li[data-type="message"] q::before,
  [data-app="com.lexibattle.game"] .DuelLog > li[data-type="message"] q::after {
    content: ""
  }



  [data-app="com.lexibattle.game"] .DuelIntervalTextInput {
    width: 100%;
    max-width: 70cqw;

    margin: 0px 2em;

    padding: .7em .5em;

    border-radius: 1.5em;
    border: 0;

    box-shadow: 0px .25em 0px #002d3135;

    background-color: #ffffffdd;
  }

  [data-app="com.lexibattle.game"] .DuelIntervalTextInput::selection,
  [data-app="com.lexibattle.game"] .DuelIntervalTextInput ::selection {
    background-color: #0070cc;

    color: #ffffff;
  }

  [data-app="com.lexibattle.game"] .DuelIntervalTextInput::placeholder {
    color: #787f8d;
  }

  [data-app="com.lexibattle.game"] .DuelIntervalTextInput:focus {
    outline: .25em solid #ffe266;
    outline-offset: .25em;
  }



  [data-app="com.lexibattle.game"] .Screen.DuelScreen > .Body > .DuelInterval
  > .Menu > ul {
    display: flex;
    gap: 1em;

    margin: 0px;

    padding: 0px;

    width: fit-content;

    list-style-type: none;
  }

  [data-app="com.lexibattle.game"] .Screen.DuelScreen > .Body > .DuelInterval
  > .Menu .Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  [data-app="com.lexibattle.game"] .Screen.DuelScreen > .Body > .DuelInterval
  > .Menu .Button > .Content {
    position: relative;
    top: -.1em;
  }



  [data-app="com.lexibattle.game"] .ReadyForNextWordButton {
    border: 0;

    background-color: transparent;
    background-image: url("images/button_3.svg");
    background-size: 100% 100%;
    background-position: center;

    padding: 1.2em 1.8em;

    box-sizing: border-box;
    aspect-ratio: 282/120;
    min-width: 12ch;
    width: fit-content;

    font-weight: bold;
    color: #ff5410;
    text-shadow:
      0px -.05em 0px #ffb091,
      0px .1em 0px #fff6d1;

    filter: drop-shadow(0px .07em .2em #006e7a77);

    animation:
      ready-for-next-word-button-motion
      1500ms
      linear
      0s
      infinite
      alternate
      forwards;
  }

  [data-app="com.lexibattle.game"]
  .ReadyForNextWordButton[aria-pressed=true] {
    background-image: url("images/button_4.svg");
  }

  [data-app="com.lexibattle.game"] .ReadyForNextWordButton.Push {
    animation: duel-button-push 125ms ease-in-out 0s 2 alternate forwards;
  }

  [data-app="com.lexibattle.game"] .ReadyForNextWordButton:focus {
    outline: none;
    background-image: url("images/button_3_focus.svg");
  }

  [data-app="com.lexibattle.game"]
  .ReadyForNextWordButton[aria-pressed=true]:focus {
    background-image: url("images/button_4_focus.svg");
  }



  [data-app="com.lexibattle.game"] .GameMenuButton2 {
    border: 0;

    background-color: transparent;
    background-image: url("images/button_6.svg");
    background-size: 100% 100%;
    background-position: center;

    padding: 0em 1em;

    box-sizing: border-box;
    aspect-ratio: 98/120;
    width: fit-content;

    filter: drop-shadow(0px .07em .15em #006e7a77);
  }

  [data-app="com.lexibattle.game"] .GameMenuButton2.Push {
    animation: duel-button-push 125ms ease-in-out 0s 2 alternate forwards;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton2:focus {
    outline: none;
    background-image: url("images/button_6_focus.svg");
  }

  [data-app="com.lexibattle.game"] .GameMenuButton2 > .Content > .IconFrame
  > img {
    height: 1.7ex;
  }



  [data-app="com.lexibattle.game"] .KickOtherClientButton {
    border: 0;

    background-color: transparent;
    background-image: url("images/button_5.svg");
    background-size: 100% 100%;
    background-position: center;

    padding: 0em 1em;

    box-sizing: border-box;
    aspect-ratio: 98/120;
    width: fit-content;

    filter: drop-shadow(0px .07em .15em #006e7a77);
  }

  [data-app="com.lexibattle.game"] .KickOtherClientButton.Push {
    animation: duel-button-push 125ms ease-in-out 0s 2 alternate forwards;
  }

  [data-app="com.lexibattle.game"] .KickOtherClientButton:focus {
    outline: none;
    background-image: url("images/button_5_focus.svg");
  }

  [data-app="com.lexibattle.game"] .KickOtherClientButton > .Content
  > .IconFrame > img {
    height: 1.7ex;
  }



  [data-app="com.lexibattle.game"] .LeaveDuelButton1 {
    border: 0;

    background-color: transparent;
    background-image: url("images/button_7.svg");
    background-size: 100% 100%;
    background-position: center;

    padding: 0em 1em;

    box-sizing: border-box;
    aspect-ratio: 98/120;
    width: fit-content;

    filter: drop-shadow(0px .07em .15em #006e7a77);
  }



  [data-app="com.lexibattle.game"] .LeaveDuelButton1.Push {
    animation: duel-button-push 125ms ease-in-out 0s 2 alternate forwards;
  }

  [data-app="com.lexibattle.game"] .LeaveDuelButton1:focus {
    outline: none;
    background-image: url("images/button_7_focus.svg");
  }

  [data-app="com.lexibattle.game"] .LeaveDuelButton1 > .Content
  > .IconFrame > img {
    height: 1.7ex;
  }
}@keyframes duel-round-appearing {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes duel-round-disappearing {
  0% { opacity: 1; }
  100% { opacity: 0; }
}




@keyframes duel-dashboard-appearing {
  0% { transform: translateX(var(--translate-x)); }
  100% { transform: translateX(0cqw); }
}

@keyframes duel-dashboard-disappearing {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--translate-x)); }
}




@keyframes duel-dashboard-score-new-inc {
  0% { opacity: 0; transform: scale(.5) translateY(3em); }
  50% { opacity: .5; transform: scale(1.5) translateY(1.5em); }
  100% { opacity: 1; transform: scale(1) translateY(0em); }
}

@keyframes duel-dashboard-score-new-dec {
  0% { opacity: 0; transform: scale(.5) translateY(-3em); }
  50% { opacity: .5; transform: scale(1.5) translateY(1.5em); }
  100% { opacity: 1; transform: scale(1) translateY(0em); }
}

@keyframes duel-dashboard-score-old-inc {
  0% { opacity: 1; }
  100% { opacity: 0; transform: scale(.5) translateY(-3em); }
}

@keyframes duel-dashboard-score-old-dec {
  0% { opacity: 1; }
  100% { opacity: 0; transform: scale(.5) translateY(3em); }
}




@keyframes duel-dashboard-cursor-appearing {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes duel-dashboard-cursor-disappearing {
  0% { opacity: 1; }
  100% { opacity: 0; }
}


@keyframes duel-dashboard-cursor-motion {
  100% { opacity: .1 }
}




@keyframes marking-suspense {
  50% { transform: scale(1.5) rotateY(180deg); }
  100% { transform: scale(1) rotateY(0deg); }
}

@keyframes marking-background-suspense {
  0% { fill: var(--fill); }
  50% { fill: var(--fill-suspense) }
  100% { fill: var(--fill); }
}

@keyframes marking-letter-suspense {
  50% { opacity: 0; }
  100% { opacity: 1%; }
}



@keyframes unknown-word-appearance {
  0% { transform: translateX(0cqw); }
  100% { transform: translateX(5%)/*transform: translateX(2.5cqw);*/ }
}




@keyframes duel-word-counter-appearing {
  0% { transform: translateY(var(--translate-y-start)); }
  100% { transform: translateY(var(--translate-y-end)); }
}

@keyframes duel-word-counter-disappearing {
  0% { transform: translateY(var(--translate-y-end)); }
  100% { transform: translateY(var(--translate-y-start)); }
}




@keyframes duel-word-counter-new-inc {
  0% { opacity: 0; transform: scale(1) translateY(1.5em); }
  50% { opacity: .5; transform: scale(4) translateY(.75em); }
  100% { opacity: 1; transform: scale(1) translateY(0em); }
}

@keyframes duel-word-counter-new-dec {
  0% { opacity: 0; transform: scale(1) translateY(-1.5em); }
  50% { opacity: .5; transform: scale(4) translateY(-.75em); }
  100% { opacity: 1; transform: scale(1) translateY(0em); }
}

@keyframes duel-word-counter-old-inc {
  0% { opacity: 1; transform: scale(1) translateY(0em); }
  50% { opacity: .5; transform: scale(4) translateY(-.75em); }
  100% { opacity: 0; transform: scale(1) translateY(-1.5em); }
}

@keyframes duel-word-counter-old-dec {
  0% { opacity: 1; transform: scale(1) translateY(0em); }
  50% { opacity: .5; transform: scale(4) translateY(.75em); }
  100% { opacity: 0; transform: scale(1) translateY(1.5em); }
}




@keyframes duel-navigation-appearing {
  0% { transform: translateY(var(--translate-y)); }
  100% { transform: translateY(0cqw); }
}

@keyframes duel-navigation-disappearing {
  0% { transform: translateY(0cqw); }
  100% { transform: translateY(var(--translate-y));}
}




@keyframes skip-word-button-motion {
  100% { transform: scale(1.55); filter: brightness(1.25); }
}




@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .DuelRound {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1em;

    position: absolute;
    top: var(--wages-height);
    left: 0px;

    padding-bottom: 1.35em;

    box-sizing: border-box;
    width: 100%;
    height: calc(100% - var(--wages-height));
  }

  [data-app="com.lexibattle.game"] .DuelRound.Appearing {
    display: flex;

    animation: duel-round-appearing 700ms ease-in 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelRound.Visible {
    display: flex;

    opacity: 1;
  }

  [data-app="com.lexibattle.game"] .DuelRound.Disappearing {
    display: flex;

    animation: duel-round-disappearing 100ms ease-in 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelRound.Hidden {
    display: none;

    opacity: 0;
  }




  [data-app="com.lexibattle.game"] .DuelNavigation {
    --translate-y: calc(-20cqh - var(--wages-height));

    position: absolute;
    top: min(4cqh, calc(4cqw * 1.4));
    left: 0px;

    transform: translateY(var(--translate-y));
  

    box-sizing: border-box;
    width: 100%;

    padding: 0px min(7cqh, calc(7cqw * 1.4))
  }

  [data-app="com.lexibattle.game"] .DuelNavigation.Appearing {
    animation: duel-navigation-appearing 700ms ease-in 0s 1 normal forwards;

    transform: translateY(var(--translate-y));
  }

  [data-app="com.lexibattle.game"] .DuelNavigation.Visible {
    transform: translateY(0cqw);
  }

  [data-app="com.lexibattle.game"] .DuelNavigation.Disappearing {
    animation: duel-navigation-disappearing 700ms ease-in 0s 1 normal forwards;

    transform: translateY(0cqw);
  }

  [data-app="com.lexibattle.game"] .DuelNavigation.Hidden {
    transform: translateY(var(--translate-y));
  }

  [data-app="com.lexibattle.game"] .DuelNavigation > ul {
    display: flex;
    gap: min(1.25cqh, calc(1.25cqw * 1.4));

    margin: 0px;

    padding: 0px;

    list-style-type: none;
  }

  [data-app="com.lexibattle.game"] .DuelNavigation > ul > li:nth-child(1),
  [data-app="com.lexibattle.game"] .DuelNavigation > ul > li:nth-child(2) {
    flex: 0;
  }

  [data-app="com.lexibattle.game"] .DuelNavigation > ul > li:nth-child(3) {
    flex: 2;

    display: flex;
    justify-content: flex-end;
  }




  [data-app="com.lexibattle.game"] .GameMenuButton3,
  [data-app="com.lexibattle.game"] .LeaveDuelButton2,
  [data-app="com.lexibattle.game"] .SkipWordButton {
    display: inline-flex;

    position: relative;

    aspect-ratio: 48/57;

    border: 0;

    background-color: transparent;

    filter: drop-shadow(0px .07em .15em #006e7a77);
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3:focus,
  [data-app="com.lexibattle.game"] .LeaveDuelButton2:focus,
  [data-app="com.lexibattle.game"] .SkipWordButton:focus {
    outline: none;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3 > .Background,
  [data-app="com.lexibattle.game"] .LeaveDuelButton2 > .Background,
  [data-app="com.lexibattle.game"] .SkipWordButton > .Background {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3 > .Background > .Border,
  [data-app="com.lexibattle.game"] .LeaveDuelButton2 > .Background > .Border,
  [data-app="com.lexibattle.game"] .SkipWordButton > .Background > .Border {
    fill: transparent;

    stroke-width: 4px;
    stroke: transparent;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3:focus > .Background
  > .Border,
  [data-app="com.lexibattle.game"] .LeaveDuelButton2:focus > .Background
  > .Border,
  [data-app="com.lexibattle.game"] .SkipWordButton:focus > .Background
  > .Border {
    stroke-width: 4px;
    stroke: #ffffff;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3 > .Background > .Face {
    fill: #bcdff0
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3 > .Background > .Bevel {
    fill: #ddedfa
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3 > .Background > .Side {
    fill: #9fc1e1
  }



  [data-app="com.lexibattle.game"] .LeaveDuelButton2 > .Background > .Face {
    fill: #ffa44f
  }

  [data-app="com.lexibattle.game"] .LeaveDuelButton2 > .Background > .Bevel {
    fill: #ffbd8f
  }

  [data-app="com.lexibattle.game"] .LeaveDuelButton2 > .Background > .Side {
    fill: #ff7d3a
  }



  [data-app="com.lexibattle.game"] .SkipWordButton > .Background > .Face {
    fill: #ffe266
  }

  [data-app="com.lexibattle.game"] .SkipWordButton > .Background > .Bevel {
    fill: #fae9a1
  }

  [data-app="com.lexibattle.game"] .SkipWordButton > .Background > .Side {
    fill: #ffce65
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3 > .Content,
  [data-app="com.lexibattle.game"] .LeaveDuelButton2 > .Content,
  [data-app="com.lexibattle.game"] .SkipWordButton > .Content {
    display: inline-flex;

    position: relative;

    padding: min(1cqh, calc(1cqw * 1.4));
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3 > .Content > .IconFrame,
  [data-app="com.lexibattle.game"] .LeaveDuelButton2 > .Content > .IconFrame,
  [data-app="com.lexibattle.game"] .SkipWordButton > .Content > .IconFrame {
    display: inline-flex;
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3 > .Content > .IconFrame
  > img,
  [data-app="com.lexibattle.game"] .LeaveDuelButton2 > .Content > .IconFrame
  > img,
  [data-app="com.lexibattle.game"] .SkipWordButton > .Content > .IconFrame
  > img {
    padding: 0px;

    width: min(2cqh, calc(2cqw * 1.4));
  }

  [data-app="com.lexibattle.game"] .GameMenuButton3.Push,
  [data-app="com.lexibattle.game"] .LeaveDuelButton2.Push,
  [data-app="com.lexibattle.game"] .SkipWordButton.Push {
    animation: duel-button-push 125ms ease-in-out 0s 2 alternate forwards;
  }

  [data-app="com.lexibattle.game"] .SkipWordButton.Shake {
    animation: skip-word-button-motion 100ms ease-out 0s 10 alternate forwards;
  }




  [data-app="com.lexibattle.game"] .DuelWordCounter {
    --translate-y-start: -20cqh;
    --translate-y-end: 0cqh;

    position: absolute;
    top: min(2.75cqh, calc(2.75cqw * 1.4));

    transform: translateY(var(--translate-y-start));

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: min(3cqh, calc(3cqw * 1.4)) min(7cqh, calc(7cqw * 1.4));

    aspect-ratio: 130/45;

    width: fit-content;
    height: fit-content;

    font: min(2.8cqh, calc(2.8cqw * 1.4)) "Lilita One";
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter ::selection {
    background-color: #222222;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter.Appearing {
    transform: translateY(var(--translate-y-start));

    animation: duel-word-counter-appearing 700ms ease-in 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter.Visible {
    transform: translateY(var(--translate-y-end));
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter.Disappearing {
    transform: translateY(var(--translate-y-end));

    animation:
      duel-word-counter-disappearing 700ms ease-in 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter.Hidden {
    transform: translateY(var(--translate-y-start));
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter > .Background {
    position: absolute;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter > .Background > .Shadow {
    fill: #2e6a7f80;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter > .Background > .Bevel {
    fill: #ff6374;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter > .Background > .Face {
    fill: #ff394d;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter > .Content {
    position: relative;
    top: -10%;

    transform: rotateZ(2.5deg);

    height: fit-content;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    color: #f6eeff;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter > .Content:focus {
    border-radius: 1em;
    outline-offset: .1em;
    outline: .1em solid #ffc8ce;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter > .Content .Dial {
    display: inline-flex;
  }


  [data-app="com.lexibattle.game"] .DuelWordCounter > .Content .DialNumber {
    display: inline-flex;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter > .Content .DialUnit {
    display: inline-flex;

    position: relative;

    width: .6em;
    height: 1.2em;
  }

  [data-app="com.lexibattle.game"] .DuelWordCounter > .Content .DialDigit {
    --duration: 500ms;

    display: inline-block;

    position: absolute;

    width: 100%;
    height: 1.2em;

    text-align: center;
  }

 [data-app="com.lexibattle.game"] .DuelWordCounter > .Content .DialDigit.Inc {
    animation:
      duel-word-counter-new-inc var(--duration) ease-out 0s 1 normal forwards;
 }

 [data-app="com.lexibattle.game"] .DuelWordCounter > .Content .DialDigit.Dec {
    animation:
      duel-word-counter-new-dec var(--duration) ease-out 0s 1 normal forwards;
 }

 [data-app="com.lexibattle.game"] .DuelWordCounter > .Content
 .DialDigit.Hidden.Inc {
    animation:
      duel-word-counter-old-inc var(--duration) ease-out 0s 1 normal forwards;
  }

 [data-app="com.lexibattle.game"] .DuelWordCounter > .Content
 .DialDigit.Hidden.Dec {
    animation:
      duel-word-counter-old-inc var(--duration) ease-out 0s 1 normal forwards;
  }



  [data-app="com.lexibattle.game"] .DuelDashboard {
    position: absolute;

    aspect-ratio: 296/100;
    width: min(60cqh, calc(60cqw * 1.4));

    transform: translateX(var(--translate-x));
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.Appearing {
    transform: translateX(var(--translate-x));

    animation:
      duel-dashboard-appearing
      700ms
      ease-out
      0s
      1
      forwards;
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.Visible {
    transform: translateX(0cqw);
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.Disappearing {
    transform: translateX(0cqw);

    animation:
      duel-dashboard-disappearing
      700ms
      ease-out
      0s
      1
      forwards;
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.Hidden {
    transform: translateX(var(--translate-x));
  }


  [data-app="com.lexibattle.game"] .DuelDashboard.Client {
    --translate-x: 100cqw;

    top: min(44%, calc(44% * 1.4));
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.OtherClient {
    --translate-x: -100cqw;

    top: min(18%, calc(18% * 1.4));
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.Visible.UnknownWord {
    animation:
      unknown-word-appearance 70ms ease-in-out 0s infinite normal forwards;
    filter: saturate(0);
  }



  [data-app="com.lexibattle.game"] .DuelDashboardName {
    position: absolute;
    left: 16.628378378%;

    display: flex;

    aspect-ratio: 223/50;
    width: 75.337837838%;

    font-size: min(2.8cqh, calc(2.8cqw * 1.4));;
  }



  [data-app="com.lexibattle.game"] .DuelDashboardName > .Background {
    position: relative;
    top: -2%;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardName > .Background
  > .Light {
    fill: #697ef5
  }

  [data-app="com.lexibattle.game"] .DuelDashboardName > .Background
  > .Face {
    fill: #384ab1
  }

  [data-app="com.lexibattle.game"] .DuelDashboardName > .Background
  > .Shadow {
    fill: #2b3d95
  }

  [data-app="com.lexibattle.game"] .DuelDashboardName > .Content {
    position: absolute;
    top: 25%;
    left: 10%;
    color: #dae0ff;

    text-shadow: 0px .1em 0px #2b3d95;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardName > .Content ::selection,
  [data-app="com.lexibattle.game"] .DuelDashboardName > .Content::selection {
    background-color: #0051ff;

    color: #f0f2ff;
    text-shadow: none;
  }


  [data-app="com.lexibattle.game"] .DuelDashboard > .Background {
    position: absolute;
    top: 31.41488%;

    aspect-ratio: 296/69;
    width: 100%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboard > .Background > .Shadow {
    fill: #2e6a7f80;
  }

  [data-app="com.lexibattle.game"] .DuelDashboard > .Background > .Side {
    fill: #ffce65;
  }

  [data-app="com.lexibattle.game"] .DuelDashboard > .Background > .Bevel {
    fill: #fae9a1;
  }

  [data-app="com.lexibattle.game"] .DuelDashboard > .Background > .Face {
    fill: #ffe266;
  }


  [data-app="com.lexibattle.game"] .DuelDashboardAvatar {
    position: absolute;
    top: 6.777086957%;
    top: 4%;
    left: 4.042787162%;

    aspect-ratio: 52/55;
    width: 17.567567568%;

    font-size: min(5cqh, 10cqw);
  }

  [data-app="com.lexibattle.game"] .DuelDashboardAvatar > .Background {
    position: absolute;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardAvatar > .Background
  > .Border {
    fill: #ffefab;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardAvatar > .Background
  > .Face {
    fill: #ffffff;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardAvatar > .Content {
    position: absolute;
    top : 0px;
    left: 0px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardAvatar > .Content ::selection,
  [data-app="com.lexibattle.game"] .DuelDashboardAvatar > .Content::selection {
    background-color: #ffe266;
  }


  [data-app="com.lexibattle.game"] .DuelDashboardScore {
    position: absolute;
    top: 60%;
    left: 9%;

    display: inline-flex;

    font: min(3.8cqh, calc(3.8cqw * 1.4)) "Lilita One";

    color: #ff3d00;

    text-shadow:
     0px max(-.2cqh, calc(-.2cqw * 1.4)) 0px #ffa61e,
     0px min(.3cqh, calc(.3cqw * 1.4)) 0px #fff3bc;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardScore::selection,
  [data-app="com.lexibattle.game"] .DuelDashboardScore ::selection {
    background-color: #ffffff;

    text-shadow: none;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardScore:focus {
    border-radius: .1em;
    outline: .07em solid #5e5a46;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardScore .DialNumber {
    display: inline-flex;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardScore .DialUnit  {
    position: relative;

    width: .65em;
    height: 1em;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardScore .DialDigit  {
    --duration: 500ms;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: absolute;

    width: 100%;
    height: 1em;

    text-align: center;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardScore .DialDigit.Inc {
    animation:
      duel-dashboard-score-new-inc var(--duration) ease-out 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardScore .DialDigit.Dec {
    animation:
      duel-dashboard-score-new-dec var(--duration) ease-out 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardScore .DialDigit.Hidden.Inc {
    animation:
      duel-dashboard-score-old-inc var(--duration) ease-out 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardScore .DialDigit.Hidden.Dec {
    animation:
      duel-dashboard-score-old-dec var(--duration) ease-out 0s 1 normal forwards;
  }




  [data-app="com.lexibattle.game"] .DuelDashboardWord {
    display: inline-flex;
    justify-content: center;

    position: absolute;
    left: 20%;

    width: 72%;

    font: min(2.5cqh, calc(2.5cqw * 1.4)) "Lilita One";
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.Client .DuelDashboardWord {
    top: 45%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.OtherClient
  .DuelDashboardWord {
    top: 47%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List {
    position: relative;

    display: inline-flex;
    justify-content: center;
    gap: .25ch;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List:focus {
    border-radius: .5em;
    outline: .1em dashed #555500;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span {
    position: relative;

    display: inline-flex;

    width: min(4cqh, calc(4cqw * 1.4));
  }
/**/
  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span.Suspense {
    --brightness: 500%;
    animation: marking-suspense 500ms ease-out 0s 1 alternate forwards;
  }

  [data-app="com.lexibattle.game"] .OtherClient
  .DuelDashboardWord > .List > span.Suspense {
    --brightness: 500%;
    animation: marking-suspense 500ms ease-out 0s 1 alternate forwards;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span.Suspense
  > .Background > path {
    animation:
      marking-background-suspense 500ms ease-in-out 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span.Suspense
  > .Content {
    animation:
      marking-letter-suspense 500ms ease-in-out 0s 1 normal forwards;
  } 
/**/

  [data-app="com.lexibattle.game"] .DuelDashboard.Client > .DuelDashboardWord
  > .List > span {
    aspect-ratio: 20/33;
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.OtherClient
  >.DuelDashboardWord > .List > span {
    aspect-ratio: 19/25;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span
  > .Background {
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span
  > .Background > .Shadow {
    --fill: #ffa61e;
    --fill-suspense: #38d0e4;
    --fill-suspense: #d83200;
    fill: var(--fill);
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span
  > .Background > .Light {
    --fill: #ffec9a;
    --fill-suspense: #b8f6ff;
    --fill-suspense: #ffd1c3;
    fill: var(--fill);
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span
  > .Background > .Face {
    --fill: #ffc039;
    --fill-suspense: #00f7ff;
    --fill-suspense: #ff3c00;
    fill: var(--fill);
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List
  > span {
    color: #e71123;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List
  > span.WellPlaced {
    color: #ffffff;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span.WellPlaced
  > .Background > .Shadow {
    --fill: #2e11e7;
    fill: var(--fill);
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span.WellPlaced
  > .Background > .Light {
    --fill: #ffec9a;
    fill: var(--fill);
  }

  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span.WellPlaced
  > .Background > .Face {
    --fill: #5439ff;
    fill: var(--fill);
  }


  [data-app="com.lexibattle.game"] .DuelDashboardWord > .List > span
  > .Content {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
  }


  [data-app="com.lexibattle.game"] .DuelDashboardCursor {
    position: absolute;

    display: flex;

    transition: opacity 500ms;

    width: 100%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardCursor.Appearing {
    opacity: 0;

    animation: 
      duel-dashboard-cursor-appearing
      500ms
      ease-out
      0s
      1
      forwards;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardCursor.Visible {
    opacity: 1;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardCursor.Disappearing {
    opacity: 1;

    animation: 
      duel-dashboard-cursor-disappearing
      500ms
      ease-out
      0s
      1
      forwards;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardCursor.Hidden {
    opacity: 0;
  }


  [data-app="com.lexibattle.game"] .DuelDashboard.Client .DuelDashboardWord
  > .DuelDashboardCursor {
    --translate-x: 100cqw;

    top: -22%;
    height: 138%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboard.OtherClient .DuelDashboardWord
  > .DuelDashboardCursor {
    --translate-x: -100cqw;

    top: -25%;
    height: 150%;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardCursor > svg {
    position: absolute;

    aspect-ratio: 20/6;
    width: min(4cqh, calc(4cqw * 1.4));

    animation:
      duel-dashboard-cursor-motion
      600ms
      ease-in
      0s
      infinite
      alternate
      forwards;

    transition: transform 250ms;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardCursor > svg > path {
    fill: transparent;
    stroke: #ff5b39;
    stroke-width: 2px;
    stroke-linecap: round;
  }

  [data-app="com.lexibattle.game"] .DuelDashboardCursor > svg:last-child {
    bottom: 0%;
  }
}
@keyframes duel-result-appearing {
  0% { transform: translateY(-50%) scale(0); }
  100% { transform: translateY(-50%) scale(1); }
}

@keyframes duel-result-disappearing {
  0% { transform: translateY(-50%) scale(1);}
  100% { transform: translateY(-50%) scale(0); }
}


@keyframes duel-result-score-new-inc {
  0% { opacity: 0; transform: scale(1) translateY(1.5em); }
  50% { opacity: .5; transform: scale(4) translateY(.75em); }
  100% { opacity: 1; transform: scale(1) translateY(0em); }
}

@keyframes duel-result-score-new-dec {
  0% { opacity: 0; transform: scale(1) translateY(-1.5em); }
  50% { opacity: .5; transform: scale(4) translateY(-.75em); }
  100% { opacity: 1; transform: scale(1) translateY(0em); }
}

@keyframes duel-result-score-old-inc {
  0% { opacity: 1; transform: scale(1) translateY(0em); }
  50% { opacity: .5; transform: scale(4) translateY(-.75em); }
  100% { opacity: 0; transform: scale(1) translateY(-1.5em); }
}

@keyframes duel-result-score-old-dec {
  0% { opacity: 1; transform: scale(1) translateY(0em); }
  50% { opacity: .5; transform: scale(4) translateY(.75em); }
  100% { opacity: 0; transform: scale(1) translateY(1.5em); }
}



@keyframes duel-result-button-motion {
  0% { transform: translateX(-50%) rotateY(0deg) rotateZ(0deg); }
  100% {
    transform: translateX(-50%) rotateY(25deg) rotateZ(-10deg) scale(1.25);
  }
}

@keyframes duel-result-button-push {
  0% { transform: translateX(-50%) scale(1); }
  100% { transform: translateX(-50%) scale(.5); }
}



@keyframes duel-result-star-1 {
  100% {
    transform: scale(1) rotateZ(-10deg);
    filter: brightness(2);
  }
}

@keyframes duel-result-star-2 {
  100% {
    transform: scale(.5) rotateZ(5deg);
    filter: brightness(2);
  }
}

@keyframes duel-result-star-3 {
  100% {
    transform: scale(.2) rotateZ(0deg);
    filter: brightness(2);
  }
}




@keyframes loser-face-left-eye {
  2% {
    d: path("m 15.66602,35.751144 c 0,1.647256 -1.355714,2.982621 -3.028073,2.982621 -1.672359,0 -3.0280728,-1.335365 -3.0280725,-2.982621 3e-7,-1.647256 1.3557145,-2.98262 3.0280725,-2.98262 1.672358,0 3.028073,1.335364 3.028073,2.98262 z")
  }

  6% {
    d: path("m 15.66602,35.751144 c 0,1.058141 -1.355715,0.982621 -3.028073,0.982621 -1.672358,0 -3.0280727,0.07552 -3.0280725,-0.982621 2e-7,-1.058139 1.3557145,-0.98262 3.0280725,-0.98262 1.672358,0 3.028073,-0.07552 3.028073,0.98262 z")
  }

  10% {
    d: path("m 15.66602,35.751144 c 0,1.647256 -1.355714,2.982621 -3.028073,2.982621 -1.672359,0 -3.0280728,-1.335365 -3.0280725,-2.982621 3e-7,-1.647256 1.3557145,-2.98262 3.0280725,-2.98262 1.672358,0 3.028073,1.335364 3.028073,2.98262 z")
  }

  100% {
    d: path("m 15.66602,35.751144 c 0,1.647256 -1.355714,2.982621 -3.028073,2.982621 -1.672359,0 -3.0280728,-1.335365 -3.0280725,-2.982621 3e-7,-1.647256 1.3557145,-2.98262 3.0280725,-2.98262 1.672358,0 3.028073,1.335364 3.028073,2.98262 z")
  }
}

@keyframes loser-face-right-eye {
  2% {
    d: path("m 27.615134,35.751144 c 0,1.647256 -1.355714,2.982621 -3.028073,2.982621 -1.672359,0 -3.028073,-1.335365 -3.028073,-2.982621 0,-1.647256 1.355715,-2.98262 3.028073,-2.98262 1.672358,0 3.028073,1.335364 3.028073,2.98262 z")
  }

  6% {
    d: path("m 27.615134,35.753161 c 0,1.058141 -1.355715,0.982621 -3.028073,0.982621 -1.672358,0 -3.028073,0.07552 -3.028073,-0.982621 0,-1.058139 1.355715,-0.98262 3.028073,-0.98262 1.672358,0 3.028073,-0.07552 3.028073,0.98262 z")
  }

  10% {
    d: path("m 27.615134,35.751144 c 0,1.647256 -1.355714,2.982621 -3.028073,2.982621 -1.672359,0 -3.028073,-1.335365 -3.028073,-2.982621 0,-1.647256 1.355715,-2.98262 3.028073,-2.98262 1.672358,0 3.028073,1.335364 3.028073,2.98262 z")
  }

  100% {
    d: path("m 27.615134,35.751144 c 0,1.647256 -1.355714,2.982621 -3.028073,2.982621 -1.672359,0 -3.028073,-1.335365 -3.028073,-2.982621 0,-1.647256 1.355715,-2.98262 3.028073,-2.98262 1.672358,0 3.028073,1.335364 3.028073,2.98262 z")
  }
}

@keyframes loser-face-mouth {
  0% {/*1*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-8.160157 8.9757256,-8.090123 5.696043,0.07003 8.815638,8.144402 8.815638,8.144402")
  }

  3% {/*0*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-6.160157 8.9757256,-6.090123 5.696043,0.07003 8.815638,6.144402 8.815638,6.144402")
  }

  6% {/*1*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-4.160157 8.9757256,-4.090123 5.696043,0.07003 8.815638,4.144402 8.815638,4.144402")
  }

  9% {/*0*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-6.160157 8.9757256,-6.090123 5.696043,0.07003 8.815638,6.144402 8.815638,6.144402")
  }

  12% {/*1*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-4.160157 8.9757256,-4.090123 5.696043,0.07003 8.815638,4.144402 8.815638,4.144402")
  }

  15% {/*0*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-6.160157 8.9757256,-6.090123 5.696043,0.07003 8.815638,6.144402 8.815638,6.144402")
  }

  18% {/*1*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-4.160157 8.9757256,-4.090123 5.696043,0.07003 8.815638,4.144402 8.815638,4.144402")
  }

  30% {/*1*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-4.160157 8.9757256,-4.090123 5.696043,0.07003 8.815638,4.144402 8.815638,4.144402")
  }

  33% {/*1*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-8.160157 8.9757256,-8.090123 5.696043,0.07003 8.815638,8.144402 8.815638,8.144402")
  }

  36% {/*0*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-6.160157 8.9757256,-6.090123 5.696043,0.07003 8.815638,6.144402 8.815638,6.144402")
  }

  39% {/*1*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-4.160157 8.9757256,-4.090123 5.696043,0.07003 8.815638,4.144402 8.815638,4.144402")
  }

  42% {/*0*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-6.160157 8.9757256,-6.090123 5.696043,0.07003 8.815638,6.144402 8.815638,6.144402")
  }

  45% {/*1*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-4.160157 8.9757256,-4.090123 5.696043,0.07003 8.815638,4.144402 8.815638,4.144402")
  }

  48% {/*0*/
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-6.160157 8.9757256,-6.090123 5.696043,0.07003 8.815638,6.144402 8.815638,6.144402")
  }

  75% {
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-6.160157 8.9757256,-6.090123 5.696043,0.07003 8.815638,6.144402 8.815638,6.144402")
  }

  100% {
    d: path("m 9.6098774,49.521169 c 0,0 3.2796836,-6.160157 8.9757256,-6.090123 5.696043,0.07003 8.815638,6.144402 8.815638,6.144402")
  }
}



@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .DuelResult {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;

    aspect-ratio: 780/272;
    width: 100%;

    background-image: url("images/red_banner_2.svg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    transform: translateY(-50%)  scale(0);
  }


  [data-app="com.lexibattle.game"] .DuelResult.Appearing {
    transform: translateY(-50%) scale(0);
    animation: duel-result-appearing 500ms ease-out 0ms 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelResult.Visible {
    transform: translateY(-50%) scale(1);
  }

  [data-app="com.lexibattle.game"] .DuelResult.Disappearing {
    transform: translateY(-50%) scale(1);
    animation: duel-result-disappearing 500ms ease-out 0ms 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelResult.Hidden {
    transform: translateY(-50%) scale(0);
  }



  [data-app="com.lexibattle.game"] .DuelResult > .Content {
    flex: 1;

    display: flex;

    position: relative;

    box-sizing: border-box;

    width: 100%;

    text-align: center;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half {
    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    box-sizing: border-box;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content {
    display: flex;
    flex-direction: column;

    align-items: center;

    position: relative;

    box-sizing: border-box;

    padding: min(10cqh, calc(10cqw * 1.4)) min(1cqh, calc(1cqw * 1.4));

    text-align: center;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  > .Caption {
    display: block;

    margin-bottom: min(2cqh, calc(2cqw * 1.4));

    text-align: center;
    font: min(5cqh, calc(5cqw * 1.4)) "Lilita One";
    color: #ffda70;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  > .Caption::selection {
    background-color: #38362e;
  }


  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  > .Name {
    display: block;

    height: 1.5em;

    margin-bottom: min(5cqh, calc(5cqw * 1.4));

    text-align: center;
    font: min(5cqh, calc(5cqw * 1.4)) "Lilita One";
    
    color: #ffb5ea;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  > .Name::selection {
    background-color: #38362e;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  .Dial {
    display: flex;

    width: fit-content;

    margin-top: min(5cqh, calc(5cqw * 1.4));

    font: min(6cqh, calc(6cqw * 1.4)) "Lilita One";
    color: #ffffff;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  .Dial ::selection {
    background-color: #38362e;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  .DialNumber {
    display: inline-flex;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  .DialUnit {
    display: inline-block;

    position: relative;

    width: .6em;
    height: 1.16em;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  .DialDigit {
    --duration: 500ms;

    display: inline-block;

    position: absolute;
    left: 0px;

    width: 100%;

    text-align: center;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  .DialDigit.Inc {
    animation:
      duel-word-counter-new-inc var(--duration) ease-out 0s 1 normal forwards;
 }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
  .DialDigit.Dec {
    animation:
      duel-word-counter-new-dec var(--duration) ease-out 0s 1 normal forwards;
 }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
 .DialDigit.Hidden.Inc {
    animation:
      duel-word-counter-old-inc var(--duration) ease-out 0s 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Half > .Content
 .DialDigit.Hidden.Dec {
    animation:
      duel-word-counter-old-inc var(--duration) ease-out 0s 1 normal forwards;
  }
/**/


/**/
  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Winner > .Star {
    position: absolute;

    display: block;

    width: 5cqw;

    user-select: none;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Winner:first-child
  > .Star:nth-child(1) {
    left: 5%;
    bottom: 40%;

    transform: scale(1.5) rotateZ(-20deg);

    animation:
      duel-result-star-1 900ms ease-in-out 0ms infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Winner:first-child
  > .Star:nth-child(2) {
    left: 11%;
    bottom: 20%;

    transform: rotateZ(15deg);

    animation:
      duel-result-star-2 1300ms ease-in-out 0ms infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Winner:first-child
  > .Star:nth-child(3) {
    left: 2%;
    bottom: 10%;

    transform: scale(.7) rotateZ(-10deg);

    animation:
      duel-result-star-3 1100ms ease-in-out 0ms infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Winner:last-child
  > .Star:nth-child(1) {
    right: 5%;
    bottom: 40%;

    transform: scale(1.5) rotateZ(-20deg);

    animation:
      duel-result-star-1 900ms ease-in-out 0ms infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Winner:last-child
  > .Star:nth-child(2) {
    right: 11%;
    bottom: 20%;

    transform: rotateZ(15deg);

    animation:
      duel-result-star-2 1300ms ease-in-out 0ms infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .DuelResult > .Content > .Winner:last-child
  > .Star:nth-child(3) {
    right: 2%;
    bottom: 10%;

    transform: scale(.7) rotateZ(-10deg);

    animation:
      duel-result-star-3 1100ms ease-in-out 0ms infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .LoserFace {
    --color: #ed0050;
  
    position: absolute;
    right: 3%;
    bottom: 10%;

    width: 12cqw;

    user-select: none;
  }

  [data-app="com.lexibattle.game"] .LoserFace > .Head > .LeftEye {
    animation: loser-face-left-eye 2000ms linear 0ms infinite normal forwards;
  }

  [data-app="com.lexibattle.game"] .LoserFace > .Head > .RightEye {
    animation: loser-face-right-eye 2000ms linear 0ms infinite normal forwards;
  }

  [data-app="com.lexibattle.game"] .LoserFace .Mouth {
    animation: loser-face-mouth 2000ms linear 0ms infinite normal forwards;
  }

  [data-app="com.lexibattle.game"] .LoserFace > .Hat {
    fill: none;
    stroke: var(--color);
    stroke-width: 2.9;
    stroke-linejoin: round;
  }

  [data-app="com.lexibattle.game"] .LoserFace > .Head > .Face {
    fill:none;
    stroke: var(--color);
    stroke-width: 2.9;
  }

  [data-app="com.lexibattle.game"] .LoserFace > .Head > .LeftEye,
  [data-app="com.lexibattle.game"] .LoserFace > .Head > .RightEye {
    fill: var(--color);
  }

  [data-app="com.lexibattle.game"] .LoserFace > .Head > .Mouth {
    fill: none;
    stroke: var(--color);
    stroke-width: 2.9;
    stroke-linecap: round;
  }

  [data-app="com.lexibattle.game"] .DuelResultButton {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    left: 50%;
    bottom: 0cqh;

    transform: translateX(-50%);
  
    font: min(4cqh, calc(4cqw * 1.4)) "Lilita One";

    aspect-ratio: 62/30;
    width: fit-content;

    box-sizing: border-box;

    padding: 1em;

    background-color: transparent;
    background-image: url("images/duel_result_ok_button.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

    border: 0;

    filter: drop-shadow(0px 0px .25em #00000077);

    color: #ffdee9;
  
    animation:
      duel-result-button-motion
      2000ms
      ease-in-out
      0ms
      infinite
      alternate
      forwards;
  }

  [data-app="com.lexibattle.game"] .DuelResultButton:focus {
    outline: none;

    background-image: url("images/duel_result_ok_button_focus.svg");
  }

  [data-app="com.lexibattle.game"] .DuelResultButton.Push {
    animation:
      duel-result-button-push
      250ms
      ease-in-out
      0ms
      2
      alternate
      forwards;
  }
}@keyframes skipped-word-banner-appearing {
  0% { transform: translateY(-50%) scale(0);}
  100% { transform: translateY(-50%) scale(1); }
}

@keyframes skipped-word-banner-disappearing {
  0% { transform: translateY(-50%) scale(1);}
  100% { transform: translateY(-50%) scale(0); }
}



@keyframes question-mark-1-motion {
  0% { transform: scale(.5); opacity: .7; }
  100% { transform: scale(1) rotateZ(-5deg); opacity: 1; }
}

@keyframes question-mark-2-motion {
  0% { transform: scale(.75); }
  100% { transform: scale(.25) rotateZ(20deg); opacity: .7; }
}

@keyframes question-mark-3-motion {
  0% { transform: scale(.5); opacity: .7; }
  100% { transform: scale(.75) rotateZ(-15deg); opacity: 1; }
}

@keyframes question-mark-4-motion {
  0% { transform: translateY(-50%) scale(.5); opacity: .7; }
  100% { transform: translateY(-50%) scale(1) rotateZ(10deg); opacity: 1; }
}



@container lexi_battle (width >= 0px) {
  [data-app="com.lexibattle.game"] .SkippedWordBanner {
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;

    aspect-ratio: 780/272;
    width: 100%;

    background-image: url("images/red_banner_1.svg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    transform: translateY(-50%)  scale(0);
  }



  [data-app="com.lexibattle.game"] .SkippedWordBanner.Appearing {
    animation:
      skipped-word-banner-appearing 500ms ease-out 0ms 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner.Visible {
    transform: translateY(-50%) scale(1);
  }



  [data-app="com.lexibattle.game"] .SkippedWordBanner.Disappearing {
    animation:
      skipped-word-banner-disappearing 500ms ease-out 0ms 1 normal forwards;
  }


  [data-app="com.lexibattle.game"] .SkippedWordBanner.Hidden {
    transform: translateY(-50%) scale(0);
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner > .Content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;

    padding: min(10cqh, calc(10cqw * 1.4)) min(1cqh, calc(1cqw * 1.4));

    text-align: center;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner > .Content > .Header {
    font: 5cqw "Lilita One";
    font: min(5cqh, calc(5cqw * 1.4)) "Lilita One";

    -webkit-text-stroke: .04em #be0040;

    color: #ffde60;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner > .Content
  > .Header::selection {
    background-color: black;

    -webkit-text-stroke: 0em transparent;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner > .Content > .Word {
    font: 6cqw "Lilita One";
    font: min(6cqh, calc(6cqw * 1.4)) "Lilita One";

    color: #ffffff;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner > .Content
  > .Word::selection {
    background-color: black;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner .QuestionMark {
    position: absolute;

    width: 5%;

    user-select: none;

    font: 12cqw "Lilita One";

    color: #ffffff;

    user-select: none;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner
  .QuestionMark:nth-child(1) {
    top: 16%;
    left: 7%;

    animation:
      question-mark-1-motion 2000ms ease-in-out 0s infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner
  .QuestionMark:nth-child(2) {
    top: 50%;
    left: 15%;

    animation:
      question-mark-2-motion 2000ms ease-in-out 0s infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner
  .QuestionMark:nth-child(3) {
    top: 60%;
    left: 5%;

    animation:
      question-mark-3-motion 1400ms ease-in-out 0s infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .SkippedWordBanner
  .QuestionMark:nth-child(4) {
    bottom: 15%;
    right: 7%;

    animation:
      question-mark-4-motion 2000ms ease-in-out 0s infinite alternate forwards;
  }
}
@keyframes virtual-keyboard-appearing {
  0% { transform: translateY(var(--translate-y)); }
  100% { transform: translateY(0cqh); }
}

@keyframes virtual-keyboard-disappearing {
  0% { transform: translateY(0cqh); }
  100% { transform: translateY(var(--translate-y)); }
}



@keyframes occurrence-appearing {
  0% { transform: scale(.2); }
  100% { transform: scale(1); }
}



@container lexi_battle (width >= 0px) {
  [data-app="com.lexibattle.game"] .VirtualKeyboard {
    --translate-y: 30cqh;

    position: absolute;
    bottom: min(2cqh, calc(2cqw * 1.4));

    display: flex;
    flex-direction: column;
    gap: min(.7cqh, calc(.7cqw * 1.4));

    transform: translateY(var(--translate-y));
  }

  [data-app="com.lexibattle.game"] .VirtualKeyboard.Appearing {
    transform: translateY(var(--translate-y));

    animation:
      virtual-keyboard-appearing
      700ms
      ease-out
      0s
      1
      forwards;
  }

  [data-app="com.lexibattle.game"] .VirtualKeyboard.Visible {
    transform: translateY(0cqh);
  }

  [data-app="com.lexibattle.game"] .VirtualKeyboard.Disappearing {
    transform: translateY(0cqh);

    animation:
      virtual-keyboard-disappearing
      700ms
      ease-out
      0s
      1
      forwards;
  }

  [data-app="com.lexibattle.game"] .VirtualKeyboard.Hidden {
    transform: translateY(var(--translate-y));
  }

  [data-app="com.lexibattle.game"] .VirtualKeyboard > .Row {
    display: flex;
    gap: min(.7cqh, calc(.7cqw * 1.4));
  }

  [data-app="com.lexibattle.game"] .VirtualKeyboard > .Row:nth-child(2) {
    margin-left: min(2.5cqh, calc(2.5cqw * 1.4));
  }

  [data-app="com.lexibattle.game"] .VirtualKeyboard > .Row:nth-child(3) {
    margin-left: min(5cqh, calc(5cqw * 1.4));
  }

  [data-app="com.lexibattle.game"] .VirtualKey {
    display: flex;
    flex-direction: column;

    position: relative;
  
    aspect-ratio: 53/53;
    width: min(6cqh, calc(6cqw * 1.4));
    /*height: min(5.5cqh, calc(5.5cqw * 1.4));*/

    border: 0;
    border-radius: min(.7cqh, calc(.7cqw * 1.4));
    
    box-shadow: 0px min(.25cqh, calc(.25cqw * 1.4)) 0px #006b9544;

    background-color: #dbfdffaa;

    color: #00212e;
    font-size: min(2.5cqh, calc(2.5cqw * 1.4));

    transition: background-color 500ms, transform 100ms ease-out;
  }

  [data-app="com.lexibattle.game"] .VirtualKey:focus {
    outline: none;
  }

  [data-app="com.lexibattle.game"] .VirtualKey.Pressed {
    transform: scale(.5);

    filter: opacity(70%);
  }

  [data-app="com.lexibattle.game"] .VirtualKey:has(.Occurrence) {
    background-color: #ffed00;

    color: #000000;

    animation: occurrence-appearing 250ms ease-in-out 0s 1 alternate backwards;
  }

  [data-app="com.lexibattle.game"] .VirtualKey > .Symbol {
    position: absolute;
    top: min(.5cqh, .7cqw);
    left: min(.5cqh, .7cqw);

    font-weight: bold;
  }

  [data-app="com.lexibattle.game"] .VirtualKey > .Occurrence {
    position: absolute;
    right: min(.5cqh, .7cqw);
    bottom: min(.5cqh, .7cqw);

    color: #000000;
  }

  [data-app="com.lexibattle.game"] .VirtualKey > .Symbol > img {
    width: min(2.5cqh, calc(2.5cqw * 1.4));

    margin: 0px;

    padding: 0px;
  }
}@keyframes round-celebration-appearing {
  0% { transform: translateY(-50%) scale(0);}
  100% { transform: translateY(-50%) scale(1); }
}

@keyframes round-celebration-disappearing {
  0% { transform: translateY(-50%) scale(1);}
  100% { transform: translateY(-50%) scale(0); }
}



@keyframes star-1-motion {
  0% { transform: scale(.5); opacity: .7; }
  100% { transform: scale(1) rotateZ(-5deg); opacity: 1; }
}

@keyframes star-2-motion {
  0% { transform: scale(.75); }
  100% { transform: scale(.25) rotateZ(20deg); opacity: .7; }
}

@keyframes star-3-motion {
  0% { transform: scale(.5); opacity: .7; }
  100% { transform: scale(.75) rotateZ(-15deg); opacity: 1; }
}

@keyframes star-4-motion {
  0% { transform: translateY(-50%) scale(.5); opacity: .7; }
  100% { transform: translateY(-50%) scale(1) rotateZ(10deg); opacity: 1; }
}



@container lexi_battle_area (width >= 0px) {
  [data-app="com.lexibattle.game"] .RoundCelebration {
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;

    aspect-ratio: 780/272;
    width: 100%;

    background-image: url("images/red_banner_1.svg");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    transform: translateY(-50%)  scale(0);
  }

  [data-app="com.lexibattle.game"] .RoundCelebration.Appearing {
    transform: translateY(-50%) scale(0);

    animation:
      round-celebration-appearing 500ms ease-out 0ms 1 normal forwards;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration.Visible {
    transform: translateY(-50%) scale(1);
  }



  [data-app="com.lexibattle.game"] .RoundCelebration.Disappearing {
    transform: translateY(-50%) scale(1);

    animation:
      round-celebration-disappearing 500ms ease-out 0ms 1 normal forwards;
  }


  [data-app="com.lexibattle.game"] .RoundCelebration.Hidden {
    transform: translateY(-50%) scale(0);
  }



  [data-app="com.lexibattle.game"] .RoundCelebration .Star {
    position: absolute;

    width: 5cqw;
    width: min(5cqh, calc(5cqw * 1.4));
    width: 5%;

    user-select: none;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration .Star:nth-child(1) {
    top: 16%;
    left: 7%;

    animation: star-1-motion 2000ms ease-in-out 0s infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration .Star:nth-child(2) {
    top: 50%;
    left: 15%;

    animation: star-2-motion 2000ms ease-in-out 0s infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration .Star:nth-child(3) {
    top: 60%;
    left: 5%;

    animation: star-3-motion 1400ms ease-in-out 0s infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration .Star:nth-child(4) {
    bottom: 15%;
    right: 7%;

    animation: star-4-motion 2000ms ease-in-out 0s infinite alternate forwards;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration > .Content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;

    padding: min(10cqh, calc(10cqw * 1.4)) min(1cqh, calc(1cqw * 1.4));

    text-align: center;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration > .Content > .Header {
    font: 5cqw "Lilita One";
    font: min(5cqh, calc(5cqw * 1.4)) "Lilita One";

    -webkit-text-stroke: .04em #be0040;

    color: #ffde60;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration > .Content
  > .Header::selection {
    background-color: black;

    -webkit-text-stroke: 0em transparent;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration > .Content > .Word {
    font: 6cqw "Lilita One";
    font: min(6cqh, calc(6cqw * 1.4)) "Lilita One";

    color: #ffffff;
  }

  [data-app="com.lexibattle.game"] .RoundCelebration > .Content
  > .Word::selection {
    background-color: black;
  }
}