@font-face {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 400;
   src: url("../css/fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
   font-family: "Roboto";
   font-style: bold;
   font-weight: 800;
   src: url("../css/fonts/Roboto-Bold.ttf") format("truetype");
}
@font-face {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 400;
   src: url("../css/fonts/BarlowSemiCondensed-Regular.ttf") format("truetype");
}

@font-face {
   font-family: "Orbitron";
   font-style: normal;
   font-weight: 400;
   src: url("../css/fonts/orbitron.ttf") format("truetype");
}

@font-face {
   font-family: "RobotoMono";
   font-style: normal;
   font-weight: 400;
   src: url("../css/fonts/RobotoMono.ttf") format("truetype");
}

body {
   font-family: "Roboto", sans-serif;
   line-height: 1.3;
   background: #111;
   padding: 0;
   padding-top: env(safe-area-inset-top);
   padding-right: env(safe-area-inset-right);
   padding-bottom: env(safe-area-inset-bottom);
   padding-left: env(safe-area-inset-left);
   margin: 0;
   height: 100vh;
   overflow: hidden;
   font-size: 18px;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility !important;
   -webkit-font-smoothing: antialiased !important;
   -webkit-user-select: none;
   user-select: none;

   /*background-image: url(../images/bg/mainBG.jpg);*/
   background-size: cover;
   background-position: center;
   color: rgba(255, 255, 255, 0.7);

   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

* {
   box-sizing: border-box;
}

.card {
   /* prevent text selection and context menu */
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
   cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: "Orbitron", "Open Sans", sans-serif;
   line-height: 1.3;
   font-weight: normal;
   margin: 1.3em 0;
}

h1 {
   text-align: center;
   font-size: 1.5em;
   font-weight: bold;
   margin: 20px auto 12px auto;
}

h1 a {
   background: none;
   color: rgba(0, 0, 0, 0.5);
   display: inline;
   font-size: 70%;
   xborder: 1px solid rgba(0, 0, 0, 0.4);
   border-radius: 4px;
}

h2 {
   font-weight: bold;
   margin: 0 auto 0.5em auto;
}

h3 {
   font-size: 1.3em;
   font-weight: bold;
   margin: 3vh 0 1vh 0;
   padding: 1vh 0;
}

h4 {
   color: #41cfc1;
   font-size: 80%;
}

h6 {
   text-transform: uppercase;
   color: rgb(100, 200, 255);
   font-weight: bold;
   margin: 0;
}

.monospace {
   font-family: "RobotoMono", monospace;
   font-weight: bold;
   letter-spacing: 1px;
}

.title {
   margin-top: 0;
}

.btnHome {
   position: absolute;
   left: -8px;
   top: -8px;

   padding: 16px;
   background: rgba(0, 0, 0, 0.8);
   border-bottom-right-radius: 70%;
   z-index: 4;
}

#boxVersion {
   font-family: "Courier New", Courier, monospace;
   position: absolute;
   font-size: 50%;
   color: rgba(155, 155, 155, 0.8);
   bottom: 1px;
   right: 10px;
   text-align: right;
   z-index: 1;
}

.heading {
   position: absolute;
   left: 0px;
   top: 0px;
   width: 260px;
   height: 45px;
   padding: 7px 0 7px 54px;
   margin: 0;
   font-size: 1.2em;
   z-index: 1;
   background-image: url(../images/bg/bg_header.png);
   background-size: 230px auto;
   background-repeat: no-repeat;
   background-position: left top;
}

.vertical-text-container {
   position: absolute;
   top: 100px;
   left: 30px;
}
.vertical-text {
   writing-mode: vertical-lr;
   transform: rotate(-180deg);
   transform-origin: top left;
}

a {
   font-family: "Orbitron", sans-serif;
   text-transform: uppercase;
   display: inline-block;
   color: steelblue;
   text-decoration: none;

   background: rgba(255, 255, 255, 0.8);
   padding: 4px 8px;
   margin: 4px 6px;
   cursor: pointer;
   border: 1px solid steelblue;
   border-radius: 3px;
}

button {
   font-family: "Open Sans", sans-serif;
   margin: 6px auto;
}

button.block,
button.center {
   margin: 20px auto;
}

section,
#splash {
   margin: 0;
   width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
   height: 100vh;
   overflow: hidden;
   position: relative;
}

#splash {
   position: absolute;
   width: 100vw;
   left: 0;
   top: 0;
   height: 100vh;
   background-image: url(../images/bg/splash.jpg);
   background-size: cover;
   background-position: center top;
   z-index: 9;
}

.boxSplashProgress,
.boxLoaded {
   position: absolute;
   left: 10%;
   right: 10%;
   bottom: 12%;
   padding: 2px;
   border-radius: 2px;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   color: white;
   text-align: center;
}
.boxLoaded {
   bottom: 6%;
   left: 50%;
   right: auto;
   padding: 6px 12px;
   transform: translateX(-50%);
   text-transform: uppercase;
   border-radius: 6px;
}

.boxRegister .logo {
   width: 45%;
   margin-top: -30px;
   margin-bottom: 20px;
}

.imgBgRegister {
   background-image: url(../images/cards/236.jpg);
   background-size: cover;
   background-position: center;
}

.boxIconInline {
   display: flex;
   align-items: center;
   justify-content: center;
}

/* fist is icon */
.boxIconInline > div {
   width: 30px;
   height: 30px;
   margin-right: 15px;
}

/* 2nd is text */

.boxIcon {
   font-family: "Orbitron";
   font-size: 1.1em;
   border-radius: 6px;
   padding: 5px 15px;
}

.boxIcon div:last-child {
   flex: 1;
}

.orbitron,
.credits {
   font-family: "Orbitron";
}

.boxCredits {
   color: white !important;
   background: #f89f19;
   border-radius: 6px;
}

.boxCredits .creditIcon {
   background-image: url(../images/icons/credit-white.png);
}

/* std credit icon white on yellow box */
.creditIcon {
   background-image: url(../images/icons/credit.png);
   display: inline-block;
   background-size: contain;
   background-repeat: no-repeat;
   height: 1em;
   aspect-ratio: 1/1;
   margin-right: 1px;
}

/* ------------ SECTION SPECIFIC ---------------------------------------------*/
/* canvas for background effects */
canvas {
   position: absolute;
   left: 0;
   top: 0;
   width: 100vw;
   height: 100vh;
   z-index: 0;
}

#canvasFight {
   width: 90vw;
   height: 70vh;
}

#boxOffline,
#boxDebug {
   position: absolute;
   right: 10px;
   top: 10px;
   align-items: center;
   justify-content: center;
   z-index: 10;
}

/* ------------ bank & elo ---------------------------------------------*/

#bank {
   position: absolute;
   top: 10px;
   right: 3%;
   z-index: 4;
}

#bank .credits {
   color: white;
}

#bank .boxIcon {
   padding: 0 15px 0 30px;
}

.spaceIcon {
   height: 20px;
   border: 1px solid #f89f19;
   border-radius: 6px;

   background-repeat: no-repeat;
   background-position: center center;
   background-size: auto 70%;
   margin-right: 5px;
}

.creditIcon {
   background-image: url(../images/icons/credit.png);
}

.btnFightUserById {
   border-radius: 4px;
   border: none;
   background: #f89f19;
   color: white;
   text-align: center;
   margin: 0;
   height: auto;
   padding: 0px 4px;
}

#mainElo {
   position: absolute;
   top: 10px;
   left: 4%;
   z-index: 4;
}

.eloIcon {
   border: 1px solid lime;
   color: lime;
   font-size: 14px;
   line-height: 12px;
   padding: 3px 8px;
}

/* ------------ home ---------------------------------------------*/
#home {
   background-color: #000;
   background-image: url(../images/bg/menu04.jpg);
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: center top;
}

#homeMenu {
}

#homeMenu > div {
   position: absolute;
   top: 15vw; /* yeah! that's it baby: make it relative to the WIDTH so it stays at the same height in relation to background */
   width: 20%;
}

/* buttons */
#homeMenu div div {
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0.95;
}

#colMothership {
   left: 15%;
}
#colStation {
   right: 11.5%;
}
#homeMenu #colFight {
   left: 36%;
   width: 30%;
   top: 20.5vw;
}

#homeMenu #btnFight {
   width: 80%;
   margin: 0 auto;
   padding: 0;
   background: none;
   font-size: 2.3em;
   color: orange;
   text-shadow: 0 0 3px orange, 0 0 10px orange;
   outline: none; /* Removes default focus outline */
   border: none; /* Ensures no border flash */
   box-shadow: none;
}
#homeMenu #btnFight:focus {
   outline: none;
}

.col {
   display: grid;
   grid-template-columns: 1fr; /* Single column */
   grid-template-rows: repeat(3, 1fr); /* Three rows with equal height */
   gap: 10px;
}

.nav {
   font-family: "Orbitron";
   width: 100%;
   color: white;
   font-size: 1.2em;
   text-transform: uppercase;
   backdrop-filter: blur(1px);
   text-align: center;
   background-image: url(../images/buttons/btn-menu.png);
   background-repeat: no-repeat;
   background-size: contain;
   aspect-ratio: 447/174;
}

.nav.disabled {
   opacity: 0.5 !important;
}

.nav.empty {
   border: none;
}

/* ranking */

#ranking {
   background-image: url(../images/bg/ranking.jpg);
   background-size: 100% auto;
   background-repeat: no-repeat;
   background-position: center top;
}

#ranking table {
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   padding: 4px;
}

/* #ranking .sub {
   background: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(5px);
   width: 90%;
   margin: 10% auto;
   text-align: center;
   min-height: 40%;
   padding: 10%;
} */

/* ------------ horizontal Menu ---------------------------------------------*/

.horizontalMenu {
   position: absolute;
   left: 250px;
   top: -10px;
   z-index: 3;
}

.horizontalMenu .btn {
   display: inline-block;
   background-color: rgba(10, 10, 10, 0.8);
   font-family: "Orbitron";
   font-size: 1.1em;
   text-transform: uppercase;
   margin: 0 10px 0 0;
   padding: 17px 22px 12px 22px !important;
   background: none;
   xborder: 1px solid rgba(255, 255, 255, 0.5);
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   opacity: 0.75;
}

.horizontalMenu .active {
   text-shadow: 0 0 4px #fff, 0 0 11px #cff, 0 0 19px #6ef, 0 0 30px #0ef;
   box-shadow: 0 0 2px #6ef, 0 0 6px #6ef inset;
   background: radial-gradient(rgba(40, 100, 120, 0.5), rgba(0, 0, 0, 0.2));
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   opacity: 1;
}

/* ------------ boxLoading ---------------------------------------------*/
#loading {
   display: none;
   width: 10000px;
   height: 100%;
   background: black;
   z-index: 20;
   overflow: scroll;
   white-space: nowrap;
}

#loading .imgCard {
   float: left;
   border: 1px solid white;
   height: 25%;
   width: auto;
}

.template {
   position: absolute; /* because sometimes we want to show the template (card) directly */
   zoom: 0.8; /* adjust dynamically to adjust to screen height. 450px height is abt 1 */
   z-index: 7;
}

.showMessage {
   display: block !important;
   flex: 1 1 0 !important;
}

button,
.btn {
   font-family: "Orbitron", sans-serif;
   padding: 5px 10px;
   border: 2px solid #11ddff;
   border-radius: 6px;
   margin-bottom: 6px;
   cursor: pointer;
   color: #fff;
   text-shadow: 0 0 4px #fff, 0 0 15px #6ef;

   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 2px 1px 4px rgba(0, 0, 0, 0.3), 2px 4px 3px rgba(3, 0, 128, 0.3), 0 0 7px 2px rgba(0, 208, 255, 0.6),
      inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 2px 1px 4px rgba(0, 0, 0, 0.3), inset 2px 4px 3px rgba(3, 0, 128, 0.3), inset 0 0 7px 2px rgba(0, 208, 255, 0.6);

   background: rgba(5, 5, 5, 0.4);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   text-transform: uppercase;
}

.btn,
.nav {
   cursor: pointer;
}

.btnBg {
   background: #196376;
}

.btnPopup {
   background: none;
}

.btnSmall {
   padding: 3px 8px;
   font-size: 80%;
   text-shadow: none;
   box-shadow: none;
   border: 1px solid rgba(255, 255, 255, 0.5);
}

.btnRed {
   background: crimson;
   color: rgba(255, 255, 255, 0.85);
}

[class^="icon-"],
[class*=" icon-"] {
   background-size: contain;
   background-repeat: no-repeat;
   display: inline-block;

   width: 25px;
   height: 25px;
   float: right;
   margin-left: 20px;
}

.icon-home,
.icon-home2 {
   background-image: url(../images/icons/icon-home.png?v=4);
   animation: flicker 5s infinite;
   float: left;
   width: 30px;
   height: 30px;
   margin: 0 4px 0 0 !important;
}

.icon-info,
.icon-info2 {
   background-image: url(../images/icons/icon-info.png);
   animation: flicker 10s infinite;
   margin-right: 8px;
   filter: brightness(90%) sepia(100%) hue-rotate(300deg) saturate(300%);
}

.heading [class^="icon-"] {
   width: 25px;
   height: 25px;
   float: right;
   margin-left: 20px;
}

.closer {
   float: right;
   font-size: 36px;
   margin-right: 10px;
}
.closer:before {
   content: "\2715";
   font-weight: bold;
   text-shadow: 0 0 10px white;
}

.barWrapper {
   width: 100%;
   background: black;
   border: 1px solid rgba(220, 255, 255, 0.5);
   padding: 2px;
   border-radius: 4px;
   margin-top: 4px;
}

.bar {
   xbackground: linear-gradient(180deg, #1ac4e3, #196376);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 2px 1px 4px rgba(0, 0, 0, 0.3), 2px 4px 3px rgba(3, 0, 128, 0.3), 0 0 7px 2px rgba(0, 208, 255, 0.6),
      inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 2px 1px 4px rgba(0, 0, 0, 0.3), inset 2px 4px 3px rgba(3, 0, 128, 0.3), inset 0 0 7px 2px rgba(0, 208, 255, 0.6);
   background: rgba(200, 255, 255, 0.5);
   border-radius: 6px;
   height: 6px;
   width: 0%;
}

table {
   text-align: left;
   width: 100%;
   border-collapse: collapse;
   font-size: 1em;
}

table tbody {
   font-family: "Orbitron", sans-serif;
}

textarea {
   box-sizing: border-box;
   background: white;
   width: 100%;
   margin: 0;
}

/*table tr:nth-child(even) td {
    background: rgba(85,189,104,.7);
    color: rgba(255,255,255, .7)
}*/

hr {
   border: none;
   height: 1px;
   background: silver;
}

th {
   font-size: 14px;
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
   background: black;
   color: rgba(255, 255, 255, 0.9);
}

table.green th {
   background: #5293b8;
}
table.red th {
   background: #a8113c;
}

table td {
   padding: 2px 5px;
}
table th {
   padding: 4px;
   color: #38fcfd;
   font-weight: normal;
   text-shadow: 0 0 8px #9ef;
   background: #005b5a;
}

table.clickable {
   width: 96%;
   margin: 10px auto;
   box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.4);
   border: 6px solid rgba(255, 255, 255, 0.8);
   border-radius: 8px;
}

table.clickable tr:last-child td {
   border-bottom: 1px solid silver;
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.4);
}
table.clickable td {
   border-bottom: 1px solid silver;
}

table.red tr.checked td {
   color: #a8113c;
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 -1px 0 rgba(255, 255, 255, 0.5);
   font-weight: bold;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
table.black tr.checked td {
   color: white;
   background: #111;
   font-weight: bold;
   border: 1px solid #111;
}
table.green tr.checked td,
table tr.checked.green td {
   color: rgba(0, 0, 0, 0.8);
   background: #afd5f2;
   border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

table.clickable td:nth-child(3) {
   color: #aaa !important;
}

/* common divs */

#mainMsg {
   font-family: "Orbitron";
   color: #cff;
   position: absolute;
   left: 15%;
   right: 15%;
   top: 10%;
   padding: 10px;
   font-size: 110%;
   font-weight: normal;
   line-height: 1.5em;
   text-align: center;
   background: rgba(0, 0, 0, 0.95);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   opacity: 0.96;
   z-index: 9;
   border: 3px solid #cff;
   outline: 4px solid black;
}

#mainMsg p {
   padding: 0;
   margin: 0;
}

#mainMsg.alert {
   border: 2px solid crimson;
   color: crimson !important;
}

#mainMsg.warn {
   border: 2px solid #f89f19;
   color: #f89f19;
}

/* ------------ popups ---------------------------------------------*/

#popup,
.popup {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   z-index: 6;
   overflow-y: scroll;
}

#popup.tutorial_fight {
   overflow: visible;
}

.popup .inner {
   height: 100vh;
   width: 100vw;
}

#popup2 {
   /* 2nd level popup */
   z-index: 9;
}

.btnClosePopup15 {
   background: none;
   font-size: 90% !important;
   color: steelblue;
}

.btnAddToDeck {
   position: absolute;
   right: 5%;
   bottom: 5%;
}

/* ------------ tutorials ---------------------------------------------*/

.page {
   height: 100vh;
   width: 100vw;
}

.tutorial img {
   width: 90%;
   margin: 0 auto;
}

.tutorial p {
   font-size: 90%;
   line-height: 1.5em;
   margin: 20px 30px 20px 200px;
   padding: 0;
   letter-spacing: 0.5px;
}

.tutorialSpeech {
   position: absolute;
   left: 3%;
   right: 3%;
   bottom: 2%;
   font-family: "Orbitron", sans-serif;
   color: #cff;
   text-align: left;

   background: #111;
   outline: 3px solid black;
   border: 2px solid rgb(250, 200, 60);
   border-radius: 6px;
   z-index: 1;
}

.tutorialSpeech b {
   color: #eef;
   text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.colorTutorial {
   color: rgb(250, 200, 60);
}

.presenter {
   position: absolute;
   left: -5%;
   bottom: 0;
   height: 130%;
   aspect-ratio: 1/1;
   background-size: contain;
   background-repeat: no-repeat;
   z-index: 2;
}

.presenter-hello {
   background-image: url(../images/other/presenter/mia-hello.png);
}

#tutorialDeck2 {
   background-image: url(../images/other/tutorial-decks2.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center top;
}

.tutorialIconDesc {
   background: #111;
   padding: 8px;
   font-size: 80%;
}

.tutorialIconDescText {
   margin-left: 60px;
}

.tutorialIconDesc .iconDesc {
   box-shadow: none;
   border-bottom: 1px solid rgba(126, 215, 215, 0.7);
}

.floatingIcon {
   background-size: contain;
   background-repeat: no-repeat;
   display: inline-block;
   float: left;
   width: 40px;
   height: 40px;
}

.markedRed {
   border: 2px solid rgba(220, 50, 50, 0.8) !important;
   border-radius: 6px;
   box-shadow: 0 0 5px rgba(233, 124, 124, 0.8), 0 0 6px rgba(233, 124, 124, 0.8) inset !important;
}

div.stickyTableWrapper {
   height: 200px;
   overflow: auto;
}

div.stickyTableWrapper table {
   width: 100%;
   table-layout: fixed;
}

div.stickyTableWrapper thead {
   position: sticky;
   top: 0;
}

div.stickyTableWrapper thead th:before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 2px;
   background-color: orange;
   z-index: 1; /* Ensure the border is below the sticky header */
}

.centerBox {
   display: flex;
   align-items: center; /* Aligns children (text) vertically in the center */
   justify-content: center; /* Aligns children (text) horizontally in the center */
}

/* flexible col with 100% height, several boxes can share height, the
   .scrollBox is the one that has the scrolling content
*/

.flexRow {
   display: flex;
   flex-direction: row; /* Aligns items in a row */
   justify-content: start; /* Ensures items are aligned to the start */
   gap: 10px; /* Optional: Add space between items */
}

.flexRow > div {
   display: flex; /* Enable flex for the inner content */
   justify-content: center; /* Center content horizontally */
   align-items: center; /* Center content vertically (optional) */
   vertical-align: middle; /* Center content vertically (optional) */
   width: auto; /* Variable width depending on content */
}

.flexCol {
   display: flex;
   flex-direction: column;
   height: 100%;
}

.scrollBox {
   height: 100%;
   overflow: hidden scroll;
   margin-right: -15px;
   padding-right: 15px;
   padding-bottom: 13px;
}

.boxInfo {
   color: #cff;
   position: absolute;
   width: 60%;
   font-size: 90%;
   background: black;
   padding: 20px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   opacity: 0.9;
   z-index: 8;
}

.boxInfo h3 {
   margin-top: 0;
}

/* f.e. in gameOver.html */
.boxNeon {
   padding: 5px;
   border: 1px solid rgba(68, 72, 73, 0.7);
   border-radius: 6px;
   margin-bottom: 6px;
   cursor: pointer;
   color: #fff;
   text-shadow: 0 0 4px #fff, 0 0 11px #cff, 0 0 19px #6ef, 0 0 30px #0ef;
   box-shadow: 0 0 2px #6ef, 0 0 6px #6ef inset;
   background: radial-gradient(rgba(10, 50, 60, 0.3), rgba(0, 0, 0, 0.5));
   backdrop-filter: blur(5px);
}

.boxNeon h3 {
   margin: -5px -5px 5px -5px;
   padding: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   color: rgba(0, 0, 0, 0.7);
   background: #eef;
   box-shadow: 0 0 1px #fff, 0 0 5px #cff;
}

.boxGreen {
   background: green;
}

.boxNeonGreen {
   box-shadow: 0 0 2px #6fa, 0 0 5px #6fa inset;
}

.boxNeonGreen h3,
h3.boxNeonGreen {
   background: #afa;
   box-shadow: 0 0 2px #6fa, 0 0 5px #6fa inset;
}

.boxNeonRed {
   text-shadow: 0 0 4px #fff, 0 0 11px #faa, 0 0 19px #f99, 0 0 30px #f88;
   box-shadow: 0 0 2px #faa, 0 0 1px #faa inset;
}

.boxNeonRed h3 {
   background: #fee;
   box-shadow: 0 0 2px #faa, 0 0 5px #faa inset;
}

.boxBlack {
   background: rgba(0, 0, 0, 0.5);
   padding: 18px;
   border: 0.5px solid #eff;
   box-shadow: 0 0 4px #6ef;
}

.boxBlack h3 {
   color: #dff;
}

.boxOutline,
.boxOutline > h3 {
   margin-top: 44px;
   border: 1px solid rgba(255, 255, 255, 0.8);
   border-radius: 6px;
   padding: 15px;
}

.boxOutline > h3 {
   background: black;
   width: 65%;
   margin: -33px auto 30px auto;
   padding: 5px 15px;
}

.boxRanking {
   padding: 4px;
   border: 1px solid rgba(68, 72, 73, 0.7);
   border-radius: 6px;
   margin-bottom: 6px;
   cursor: pointer;
   color: #fff;
   text-shadow: 0 0 10px #6ef;
   box-shadow: 0 0 2px #6ef, 0 0 6px #6ef inset;
   background: radial-gradient(rgba(10, 50, 60, 0.3), rgba(0, 0, 0, 0.5));
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
}

.wrapperPulse {
   width: 100%;
   height: 40px;
}

.error {
   font-size: 1.2em;
   background: crimson !important;
   padding: 10px;
   color: white !important;
}

/* universal grid: use up full width */
.grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   justify-items: center;
   gap: 20px;
   xoverflow-y: scroll;
}

.grid > div,
.grid2 > div,
.grid3 > div,
.grid4 > div {
   width: 100%;
}
.grid > div > div {
   margin: auto;
} /* used in modules */

.grid2 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   margin: auto;
}

.grid3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin: auto;
}

.grid4 {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin: auto;
}

.grid5 {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 0.5em;
}

.gridCenter {
   justify-items: center;
}

.gap,
.gap10 {
   gap: 10px;
}

.gap20 {
   gap: 20px;
}

.gap30 {
   gap: 30px;
}

.gapResponsive {
   gap: 5%;
}

.squareGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
   grid-gap: 1em;
}

.squareGrid div {
   display: flex;
   align-items: center;
   justify-content: center;
   aspect-ratio: 1 / 1;
}

.boxInline > div {
   display: inline-flex;
   margin: 0 10px;
}

.flex {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
}

.flexRow {
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
}

.flexEven {
   flex: 1 1 0;
}
.flexEven img {
   max-width: 80%;
   margin: 5px auto;
}

.flex200 > div {
   flex: 1 1 200px;
}

.flexCentered {
   justify-content: center; /* Horizontally center items */
   align-items: center; /* Vertically center items */
}

.txtWon {
   color: #38fcfd;
}
.txtLost {
   color: #db561b;
}

img {
   width: 100%;
}

.white {
   color: rgba(255, 255, 255, 0.9);
}

.hidden {
   display: none !important;
}
.tiny {
   font-size: 60%;
}
.small {
   font-size: 85% !important;
   line-height: 1.1em;
   text-shadow: none;
   font-weight: normal;
}

.txtDebug {
   font-size: 80% !important;
   text-shadow: none;
   font-weight: normal;
   color: grey;
}

.disabled {
   opacity: 0.7 !important;
   filter: brightness(2);
   filter: grayscale(1);
}

.btn.disabled {
   opacity: 0.3 !important;
   box-shadow: none;
   text-shadow: none;
}

.big {
   font-size: 120%;
}
.huge {
   font-size: 160%;
}

.strike {
   text-decoration: line-through;
}

.pad {
   padding: 15px;
}
.vcenter {
   display: flex;
   justify-content: center;
}
.right {
   text-align: right;
}
.center {
   text-align: center !important;
}
.block {
   display: block;
}
.vertical {
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   transform: rotate(270deg);
}

.striped tr:nth-child(odd) td {
   background: rgba(0, 5, 5, 0.1);
}
.striped tr:nth-child(even) td {
}

table.striped th {
   background: #2d3031;
   border-top: 1px solid #eff;
   border-bottom: 1px solid #eff;
}

tr.highlight td {
   background: rgba(0, 5, 5, 0.2);
   border-top: 1px solid orange;
   border-bottom: 1px solid orange;
}

.boxNeon th,
.boxRanking th {
   border-top: none !important;
}

td.number,
th.number {
   text-align: right;
   margin-right: 20px;
}

.noBorder {
   border: none !important;
}

.lime {
   color: lime !important;
}

.lightcoral,
#boxFightLog .damage,
.colorDamage {
   color: lightcoral;
   font-weight: bold;
}

#boxFightLog .heal,
.colorHealed,
.colorHeal,
.colorHealth {
   font-weight: bold;
   color: rgba(20, 255, 0, 1);
}

.colorEnergy {
   color: #6ef;
}

.colorSpawn,
.colorUnit {
   text-transform: uppercase;
   color: yellow;
}

.newCircle {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: crimson;
   display: inline-block;
   margin: 0 5px;
   font-size: 1.2em;
   line-height: 20px;
   font-weight: bold;
}

.checkbox {
   display: inline-block;
   padding: 3px;
   width: 20px;
   height: 20px;
   border-radius: 3px;
   border: 2px solid rgba(255, 255, 255, 0.9);
   margin: 0 5px;
}

.checkmark {
   width: 100%;
   aspect-ratio: 1/1;
   background: url(../images/icons/checkmark.png);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

.icon {
   display: inline-block;
   width: 30px;
   aspect-ratio: 1/1;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 6px;
}

.iconPen {
   background-image: url(../images/buttons/pen.png);
   border: 2px solid rgba(200, 255, 255, 0.8);
   border-radius: 50px;
}

.left {
   text-align: left;
}

.above {
   position: absolute;
   left: 0;
   right: 0;
   z-index: 4;
}

textarea,
input {
   font-size: 15px;
   border: 1px solid #999;
}

.arrow-up {
   width: 0;
   height: 0;
   border-bottom: 25px solid #333;
   border-left: 25px solid transparent;
   border-right: 25px solid transparent;
   margin: 0 0 0 45%;
}

.arrow-down {
   width: 0;
   height: 0;
   border-top: 25px solid #333;
   border-left: 25px solid transparent;
   border-right: 25px solid transparent;
   margin: 0 0 0 45%;
}

.arrow-right {
   width: 0;
   height: 0;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;

   border-left: 60px solid green;
}

.arrow-left {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right: 10px solid blue;
}

.marker {
   position: absolute;
   width: 10px !important;
   height: 10px !important;
   border: 2px solid red;
   border-radius: 10px;
   z-index: 9;
}

.debug {
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   color: lime;
   font-size: 80%;
   font-family: monospace;
   z-index: 9;
}

/* prevent ranking table from flashing when clicking fight button */
/* *:active, *:focus, table:focus, table:active,
table *:focus, table *:active {
    outline: none;
    background-color: transparent!important; 
} */