:root {
    --color-lightgrey: #f5f5f5;
    --color-yellow: #f7b22f;
    --color-red: #c42326;
    --color-green: #74cf1f;
    --color-darkgreen: #006525;
    --color-blue: #03d8ff;
    --color-pink: #ef66bf;
    --color-purple: #7f3689;
    --color-navy: #004376;
    --color-background-navy: #001B35;
    --color-yellow-transparent: rgba(247,178,47,0.84);
    --color-blue-transparent: rgba(3,216,255,0.84);
    --color-green-transparent: rgba(116,207,31,0.84);
    --color-pink-transparent: rgba(239,102,191,0.84);
    --text-small: 13px;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style: none;
}

@font-face {
  font-family: 'Electrolize';
  src: url('./Electrolize-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('./Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('./Poppins-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('./Poppins-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('./Poppins-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

html {height: -webkit-fill-available; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
body {font-family: 'Electrolize', sans-serif; margin: 0; overflow: hidden; padding-top: env(safe-area-inset-top); min-height: 100vh; min-height: -webkit-fill-available; background: var(--color-background-navy); font-size: 20px; }
canvas {display: block;}

h1, .h1{font-size: 50px; margin: 0 0 10px 0; font-family: 'Electrolize';}
h2, .h2{font-size: 32px; margin: 0 0 10px 0; font-family: 'Electrolize';}
h3, .h3{font-size: 20px; margin: 0 0 10px 0; font-family: 'Electrolize';}
p{padding: 12px 0; font-family: 'Poppins'}
a{color: #fff; text-decoration: none; color: var(--color-yellow); }
b {font-weight: bold;}
input{border: none; font-family: 'Electrolize'; display: block; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.4); box-sizing: border-box; padding: 10px 0; margin: 10px auto; font-size: 18px; color: #fff; background: transparent; }
button{border: none; font-family: 'Electrolize'; display: inline-block; width: auto; max-width: 100%; box-sizing: border-box; padding: 10px 20px; margin: 10px 0; font-size: 18px; color: #000; background: var(--color-yellow); }
input::placeholder {color: #fff; opacity: 0.6;}
hr{display: block; width: 100%; height: 1px; overflow: hidden; background: rgba(255,255,255,0.4); margin: 20px 0; border: 0;}

#wrapper{display: block; width: 100%; position: relative; overflow: hidden; min-height: 100vh;}
#wrapper.home{}

#game-canvas{position: fixed; top: 0; left: 0;}

#logo{display: block; opacity: 0; z-index: -9; max-width: 400px; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); transition: all 0.5s ease-in-out 0s;}
#logo .logo-line{fill: none; stroke: var(--color-yellow); stroke-width: 6; stroke-miterlimit: 10;}
#logo .logo-fill{fill: var(--color-yellow);}
#logo .logo-anim-01{transform: translate(-50%, -50%); transition: all 0.6s ease-in-out 1.4s;}
#logo .logo-anim-02{transform: translate(-50%, -50%); transition: all 0.6s ease-in-out 1.5s;}
#logo .logo-anim-03{transform: translate(-50%, -50%); transition: all 0.6s ease-in-out 1.6s;}
#logo .logo-anim-04{transform: translate(50%, 50%); transition: all 0.6s ease-in-out 1.7s;}
#logo .logo-anim-05{transform: translate(50%, 50%); transition: all 0.6s ease-in-out 1.8s;}
#logo .logo-anim-06{transform: translate(50%, 50%); transition: all 0.6s ease-in-out 1.9s;}
#logo .logo-arrow{opacity: 0; transition: all 0.3s ease-in-out 0.7s;}
#logo .svg-line-anim{stroke-dasharray: 300.455; stroke-dashoffset: 300.455; transition: all 1s ease-in-out 0.4s;}
#wrapper.home #logo .logo-anim-01{transform: translate(0%, 0%);}
#wrapper.home #logo .logo-anim-02{transform: translate(0%, 0%);}
#wrapper.home #logo .logo-anim-03{transform: translate(0%, 0%);}
#wrapper.home #logo .logo-anim-04{transform: translate(0%, 0%);}
#wrapper.home #logo .logo-anim-05{transform: translate(0%, 0%);}
#wrapper.home #logo .logo-anim-06{transform: translate(0%, 0%);}
#wrapper.home #logo{z-index: -1; opacity: 1;}
#wrapper.home #logo .svg-line-anim{stroke-dashoffset: 0 !important;}
#wrapper.home #logo .logo-arrow{opacity: 1;}
#wrapper.home #logo{animation: logoRotate 12s ease-in-out 3s forwards;}
@keyframes logoRotate {
    0% {transform: translate(-50%, 0%) rotate(0deg);}
    10% {transform: translate(-50%, 0%) rotate(180deg);}
    90% {transform: translate(-50%, 0%) rotate(180deg);}
    100% {transform: translate(-50%, 0%) rotate(360deg);}
}

#menu-home{display: block; position: fixed; background: rgba(0,0,0,0); z-index: 99; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; color: #fff; pointer-events: none; visibility: hidden; }
#menu-home.active{display: block; visibility: visible; pointer-events: all; background-color: rgba(0, 0, 0, 0);}
#menu-home .game-mode{text-align: center;}
#menu-home .game-mode h2{display: none;}
#menu-home .game-mode ul{display: flex; flex-direction: row; justify-content: center; align-items: baseline; gap: 40px;}
#menu-home .game-mode ul li{display: block; width: auto; }
.menu-container{position: fixed; font-family: 'Electrolize'; display: block; width: 100%; left: 0; box-sizing: border-box; bottom: 0; padding: 200px 0 50px 0; background: linear-gradient(0deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 100%); color: #fff; z-index: 1000;}
.menu-container[data-name="login"] #loginForm,
  .menu-container[data-name="profile"] #userProfile,
  .menu-container[data-name="game"] #gameModes,
  .menu-container[data-name="users"] #userList,
  .menu-container[data-name="scoreboard"] #scoreBoard,
  .menu-container[data-name="sign-up"] #signupForm,
  .menu-container[data-name="about"] #about,
  .menu-container[data-name="password-reset"] #resetPasswordForm,
  .menu-container[data-name="change-nickname"] #changeNickname{max-height: 800px; transition: max-height 0.3s ease-out 0.3s;}
.menu-container[data-user="loggedin"],
  .menu-container[data-user="loggedout"]{display: block;}
.menu-container[data-user="loggedin"] #menu-sub{display: block;}
.menu-container[data-user="loggedin"] #signupButton,
  .menu-container[data-user="loggedin"] #backToLogin{display: none;}
.menu-container[data-name="login"] #menu-sub .menu-sub-game[data-menu="login"],
  .menu-container[data-name="profile"] #menu-sub .menu-sub-game[data-menu="profile"],
  .menu-container[data-name="game"] #menu-sub .menu-sub-game[data-menu="game"],
  .menu-container[data-name="scoreboard"] #menu-sub .menu-sub-game[data-menu="scoreboard"],
  .menu-container[data-name="password-reset"] #menu-sub .menu-sub-game[data-menu="password-reset"],
  .menu-container[data-name="change-nickname"] #menu-sub .menu-sub-game[data-menu="change-nickname"]{color: #fff; border-color: #fff;}
.menu-container p{font-family: 'Electrolize';}
.menu-section{display: block; width: 100%; overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out 0s;}
.menu-section a { color: var(--color-yellow); text-decoration: none; }
.menu-section a:hover { text-decoration: underline; } .hidden { display: none; }
#menu-sub{display: none;}
#menu-sub ul{display: flex; align-items: center; justify-content: center; gap: 8px; flex-direction: row; margin: 20px auto 0 auto;}
#menu-sub li{display: block; width: 25%;}
#menu-sub a{display: block; width: 100%; padding: 10px 0 0 0; text-align: center; box-sizing: border-box; color: var(--color-yellow); border-top: 1px solid var(--color-yellow);}
#signup-options{margin-top: 30px;}
.error-message{color: #ff6b6b; text-align: left; font-size: 14px;}

.message {
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
    margin-top: 10px;
}

.message.error {
    color: #ff6b6b;
}

.message.success {
    color: #51cf66;
}

/* Message confirmation and error classes */
.message-confirmation {
    color: #51cf66;
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
    margin-top: 10px;
}

.message-error {
    color: #ff6b6b;
    text-align: center;
    font-size: 14px;
    padding: 10px 0;
    margin-top: 10px;
}
.menu-accordion{display: block; margin: 20px auto; border-top: 1px solid rgba(255,255,255,0.4); border-bottom: 1px solid rgba(255,255,255,0.4);}
.menu-accordion .btn-menu-accordion{display: block; padding: 20px 0; color: var(--color-yellow);}
.menu-accordion-inner{display: block; width: 100%; overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out 0s;}
.menu-accordion.open .menu-accordion-inner{max-height: 1000px;}
.nickname-history{display: none;}
.highscores-table{width: 100%; color: white; font-family: 'Poppins';}
.highscores-table th,
  .highscores-table td{padding: 6px 10px; text-align: left;}
.highscores-table tr:nth-child(2){font-weight: bold;}
.highscores-table th{font-weight: bold; display: none;}
td.highscores-table-level,
  td.highscores-table-score{text-align: right;}

#hints-container{display: none !important; display: flex; font-family: 'Electrolize'; overflow-x: auto; border-radius: 20px; scroll-snap-type: x mandatory; gap: 5%; width: 100%; margin: 20px auto; padding: 0; &::-webkit-scrollbar { display: none; } -ms-overflow-style: none;  scrollbar-width: none; }
.hint { flex: 0 0 80%; text-align: left; font-size: 14px; line-height: 18px; scroll-snap-align: start; backdrop-filter: blur(4px); padding: 10px 20px; background-color: rgba(247,178,47,0.8); color: #000; border-radius: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; box-sizing: border-box;}
.hint p { margin: 8px 0; padding:0;}
.hint b {font-weight: bold; text-transform: uppercase; font-size: 18px;}
#hints-container::after { content: ""; flex: 0 0 5%; }
.bg-yellow-transparent{background-color: var(--color-yellow-transparent);}
.bg-pink-transparent{background-color: var(--color-pink-transparent);}
.bg-blue-transparent{background-color: var(--color-blue-transparent);}
.bg-green-transparent{background-color: var(--color-green-transparent);}

.menu-panel{position: absolute; z-index: 90;}
.content{width: 90%; max-width: 600px; margin: 0 auto;}
.row{display: flex; align-items: flex-start; justify-content: flex-start; gap: 20px;}
.row.vertical{align-items: center;}
.row.center{justify-content: center;}
.row.reverse{flex-direction: row-reverse;}
.row.wide{align-items: center; width: 100%; justify-content: space-between;}

#beta-overiew{text-align: center; font-size: 13px; margin: 0 auto; padding: 18px 0 10px 0;}
#beta-overiew .row{margin: 0 auto; align-items: center; justify-content: center;}

#game-panel-cellselection{display: none !important;}
#game-panel-camera{}
#game-panel-stats .btn-container{justify-content: flex-end;}
#game-panel-score{display: block; height: 40px; line-height: 40px; position: fixed; z-index: 89; top: 60px; left: 100px; color: var(--color-yellow); font-size: 30px; box-sizing: border-box;}
#game-panel-mode{display: block; position: fixed; z-index: 89; top: 80px; left: 85px; color: rgba(0,0,0,0.3); font-size: 18px; box-sizing: border-box;}

#game-levelup{display: block; position: fixed; bottom: 0px; left: 0; width: 100%; transform: translateY(100%); background: linear-gradient(0deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 100%); color: white; padding: 220px 0px 60px 0px; text-align: left; z-index: 100; transition: all 0.2s ease-out 0s;}
#game-levelup .h1{margin-bottom: 20px;}
#game-levelup h2,
  #game-levelup.h2{font-size: 25px; margin-bottom: 2px;}
#game-levelup.active{transform: translateY(0%);}
#game-levelup .game-levelup-info{display: none;}
#game-levelup .row{margin: 10px 0 20px 0;}
#game-levelup .tutorial-tile{width: 40px; height: 40px;}
#game-levelup .levelup-header-intro{display: none;}
#game-levelup .levelup-header{display: block;}
#game-levelup #btn-levelup-close-intro{display: none;}
#game-levelup[data-level="1"] .levelup-header-intro{display: block;}
#game-levelup[data-level="1"] #btn-levelup-close-intro{display: block;}
#game-levelup[data-level="1"] .levelup-header{display: none;}
#game-levelup[data-level="1"] #game-levelup-level1,
  #game-levelup[data-level="2"] #game-levelup-level2,
  #game-levelup[data-level="3"] #game-levelup-level3,
  #game-levelup[data-level="4"] #game-levelup-level4,
  #game-levelup[data-level="5"] #game-levelup-level5,
  #game-levelup[data-level="6"] #game-levelup-level6,
  #game-levelup[data-level="7"] #game-levelup-level7,
  #game-levelup[data-level="8"] #game-levelup-level8{display: block;}


/* Bottom left
#game-panel-livestats{display: flex; flex-direction: column; align-items: flex-end; gap: 2px; position: fixed; z-index: 89; bottom: 50px; right: 10px;}
*/
#game-panel-livestats{display: flex; font-size: 14px; flex-direction: column; align-items: flex-start; gap: 2px; position: fixed; z-index: 89; top: 130px; left: 30px;}
.game-livestats{display: flex; flex-direction: column; line-height: 20px; justify-content: flex-start; align-items: flex-start; gap: 2px; background: rgba(0, 0, 0, 0.7); color: white; padding: 10px 12px; box-sizing: border-box; border-radius: 4px; font-size: 13px; opacity: 0; transform: translateX(-100%); overflow: hidden; animation: liveStatSlideIn 0.3s ease forwards; height: auto; margin: 0; transition: opacity 0.2s ease-out 0s; }
.game-livestats.anim-out{animation: liveStatSlideOut 0.2s ease forwards; transform: translateX(0);}
.stat-match {display: inline-flex; align-items: center; gap: 6px;}
.game-livestats > .stat-match::after {content: ''; display: inline-block; z-index: 1; height: 15px; width: auto; background-repeat: no-repeat; background-size: contain; }
.game-livestats[data-match="3"] > .stat-match::after{aspect-ratio: 3/1;}
.game-livestats[data-match="4"] > .stat-match::after{aspect-ratio: 4/1;}
.game-livestats[data-match="5"] > .stat-match::after{aspect-ratio: 5/1;}
.game-livestats[data-match="3"][data-color="red"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.9 30'%3E%3Cpath fill='%23c42326' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3Cpath fill='%23c42326' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23c42326' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="3"][data-color="blue"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.9 30'%3E%3Cpath fill='%2303d8ff' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3Cpath fill='%2303d8ff' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%2303d8ff' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="3"][data-color="yellow"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.9 30'%3E%3Cpath fill='%23ffd83c' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3Cpath fill='%23ffd83c' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23ffd83c' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="3"][data-color="navy"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.9 30'%3E%3Cpath fill='%23004376' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3Cpath fill='%23004376' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23004376' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="3"][data-color="purple"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.9 30'%3E%3Cpath fill='%237f3689' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3Cpath fill='%237f3689' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%237f3689' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="3"][data-color="green"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.9 30'%3E%3Cpath fill='%2374cf1f' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3Cpath fill='%2374cf1f' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%2374cf1f' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="3"][data-color="pink"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97.9 30'%3E%3Cpath fill='%23ef66bf' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3Cpath fill='%23ef66bf' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23ef66bf' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3C/svg%3E"); }

.game-livestats[data-match="4"][data-color="red"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131.8 30'%3E%3Cpath fill='%23c42326' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23c42326' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%23c42326' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%23c42326' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="4"][data-color="blue"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131.8 30'%3E%3Cpath fill='%2303d8ff' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%2303d8ff' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%2303d8ff' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%2303d8ff' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="4"][data-color="yellow"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131.8 30'%3E%3Cpath fill='%23ffd83c' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23ffd83c' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%23ffd83c' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%23ffd83c' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="4"][data-color="navy"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131.8 30'%3E%3Cpath fill='%23004376' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23004376' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%23004376' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%23004376' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="4"][data-color="purple"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131.8 30'%3E%3Cpath fill='%237f3689' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%237f3689' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%237f3689' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%237f3689' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="4"][data-color="green"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131.8 30'%3E%3Cpath fill='%2374cf1f' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%2374cf1f' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%2374cf1f' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%2374cf1f' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="4"][data-color="pink"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 131.8 30'%3E%3Cpath fill='%23ef66bf' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23ef66bf' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%23ef66bf' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%23ef66bf' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }

.game-livestats[data-match="5"][data-color="red"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165.8 30'%3E%3Cpath fill='%23c42326' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%23c42326' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%23c42326' d='M159.6,30H142c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C165.8,27.2,163,30,159.6,30z'/%3E%3Cpath fill='%23c42326' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23c42326' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="5"][data-color="blue"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165.8 30'%3E%3Cpath fill='%2303d8ff' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%2303d8ff' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%2303d8ff' d='M159.6,30H142c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C165.8,27.2,163,30,159.6,30z'/%3E%3Cpath fill='%2303d8ff' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%2303d8ff' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="5"][data-color="yellow"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165.8 30'%3E%3Cpath fill='%23ffd83c' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%23ffd83c' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%23ffd83c' d='M159.6,30H142c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C165.8,27.2,163,30,159.6,30z'/%3E%3Cpath fill='%23ffd83c' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23ffd83c' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="5"][data-color="navy"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165.8 30'%3E%3Cpath fill='%23004376' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%23004376' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%23004376' d='M159.6,30H142c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C165.8,27.2,163,30,159.6,30z'/%3E%3Cpath fill='%23004376' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23004376' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="5"][data-color="purple"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165.8 30'%3E%3Cpath fill='%237f3689' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%237f3689' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%237f3689' d='M159.6,30H142c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C165.8,27.2,163,30,159.6,30z'/%3E%3Cpath fill='%237f3689' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%237f3689' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="5"][data-color="green"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165.8 30'%3E%3Cpath fill='%2374cf1f' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%2374cf1f' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%2374cf1f' d='M159.6,30H142c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C165.8,27.2,163,30,159.6,30z'/%3E%3Cpath fill='%2374cf1f' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%2374cf1f' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }
.game-livestats[data-match="5"][data-color="pink"] > .stat-match::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 165.8 30'%3E%3Cpath fill='%23ef66bf' d='M91.7,30H74.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C97.9,27.2,95.1,30,91.7,30z'/%3E%3Cpath fill='%23ef66bf' d='M125.6,30H108c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C131.8,27.2,129.1,30,125.6,30z'/%3E%3Cpath fill='%23ef66bf' d='M159.6,30H142c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C165.8,27.2,163,30,159.6,30z'/%3E%3Cpath fill='%23ef66bf' d='M57.8,30H40.1c-3.4,0-6.2-2.8-6.2-6.2V6.2c0-3.4,2.8-6.2,6.2-6.2h17.6c3.4,0,6.2,2.8,6.2,6.2v17.6C63.9,27.2,61.2,30,57.8,30z'/%3E%3Cpath fill='%23ef66bf' d='M23.8,30H6.2C2.8,30,0,27.2,0,23.8V6.2C0,2.8,2.8,0,6.2,0h17.6C27.2,0,30,2.8,30,6.2v17.6C30,27.2,27.2,30,23.8,30z'/%3E%3C/svg%3E"); }

.stat-multiplier {display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; color: rgba(255,255,255,0.7);}
.stat-bonus {display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; color: rgba(255,255,255,0.7);}
.stat-bonus::after {content: ''; display: inline-block; z-index: 1; height: 15px; width: auto; background-repeat: no-repeat; background-size: contain; aspect-ratio: 2/1;}

.stat-bonus[data-direction="horizontal"]::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63.9 30'%3E%3Cpath fill='%23fff' d='M23.8 30H6.2C2.8 30 0 27.2 0 23.8V6.2C0 2.8 2.8 0 6.2 0h17.6C27.2 0 30 2.8 30 6.2v17.6C30 27.2 27.2 30 23.8 30z'/%3E%3Cpath fill='%23fff' d='M57.8 30H40.1c-3.4 0-6.2-2.8-6.2-6.2V6.2c0-3.4 2.8-6.2 6.2-6.2h17.6c3.4 0 6.2 2.8 6.2 6.2v17.6C63.9 27.2 61.2 30 57.8 30z'/%3E%3Cpath d='M12.5 24.5c-4-1.3-6.8-5-6.8-9.2 0-4.2 2.7-7.9 6.8-9.2l.6 1.9c-3.2 1-5.4 4-5.4 7.3s2.2 6.3 5.4 7.3l-.6 1.9z'/%3E%3Cpath d='M18.3 24.5l-.6-1.9c3.2-1 5.4-4 5.4-7.3 0-3.4-2.2-6.3-5.4-7.3l.6-1.9c4 1.3 6.8 5 6.8 9.2s-2.8 7.9-6.8 9.2z'/%3E%3Cpolygon points='18.3 11.7 16.8 6.3 22.2 4.8 22.7 6.7 19.2 7.7 20.2 11.1'/%3E%3Cpolygon points='8.6 25.7 8.1 23.8 11.6 22.9 10.6 19.4 12.5 18.9 14 24.2'/%3E%3Cpolygon points='55.2 20.5 53.8 19.1 57.9 15 53.8 10.9 55.2 9.5 60.7 15'/%3E%3Crect x='50' y='14' width='9.2' height='2'/%3E%3Cpolygon points='42.7 20.5 37.2 15 42.7 9.5 44.1 10.9 40 15 44.1 19.1'/%3E%3Crect x='38.6' y='14' width='9.2' height='2'/%3E%3C/svg%3E");}

.stat-bonus[data-direction="vertical"]::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63.9 30'%3E%3Cpath fill='%23fff' d='M23.8 30H6.2C2.8 30 0 27.2 0 23.8V6.2C0 2.8 2.8 0 6.2 0h17.6C27.2 0 30 2.8 30 6.2v17.6C30 27.2 27.2 30 23.8 30z'/%3E%3Cpath fill='%23fff' d='M57.8 30H40.1c-3.4 0-6.2-2.8-6.2-6.2V6.2c0-3.4 2.8-6.2 6.2-6.2h17.6c3.4 0 6.2 2.8 6.2 6.2v17.6C63.9 27.2 61.2 30 57.8 30z'/%3E%3Cpath d='M12.5 24.5c-4-1.3-6.8-5-6.8-9.2 0-4.2 2.7-7.9 6.8-9.2l.6 1.9c-3.2 1-5.4 4-5.4 7.3s2.2 6.3 5.4 7.3l-.6 1.9z'/%3E%3Cpath d='M18.3 24.5l-.6-1.9c3.2-1 5.4-4 5.4-7.3 0-3.4-2.2-6.3-5.4-7.3l.6-1.9c4 1.3 6.8 5 6.8 9.2s-2.8 7.9-6.8 9.2z'/%3E%3Cpolygon points='18.3 11.7 16.8 6.3 22.2 4.8 22.7 6.7 19.2 7.7 20.2 11.1'/%3E%3Cpolygon points='8.6 25.7 8.1 23.8 11.6 22.9 10.6 19.4 12.5 18.9 14 24.2'/%3E%3Cpolygon points='43.4 21.2 44.8 19.8 48.9 23.9 53.1 19.8 54.4 21.2 48.9 26.7'/%3E%3Crect x='48' y='16.1' width='2' height='9.2'/%3E%3Cpolygon points='43.4 8.8 48.9 3.3 54.4 8.8 53.1 10.2 48.9 6.1 44.8 10.2'/%3E%3Crect x='48' y='4.7' width='2' height='9.2'/%3E%3C/svg%3E");}

.stat-bonus[data-direction="both"]::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63.9 30'%3E%3Cpath fill='%23fff' d='M23.8 30H6.2C2.8 30 0 27.2 0 23.8V6.2C0 2.8 2.8 0 6.2 0h17.6C27.2 0 30 2.8 30 6.2v17.6C30 27.2 27.2 30 23.8 30z'/%3E%3Cpath d='M12.5 24.5c-4-1.3-6.8-5-6.8-9.2 0-4.2 2.7-7.9 6.8-9.2l.6 1.9c-3.2 1-5.4 4-5.4 7.3s2.2 6.3 5.4 7.3l-.6 1.9z'/%3E%3Cpath d='M18.3 24.5l-.6-1.9c3.2-1 5.4-4 5.4-7.3 0-3.4-2.2-6.3-5.4-7.3l.6-1.9c4 1.3 6.8 5 6.8 9.2s-2.8 7.9-6.8 9.2z'/%3E%3Cpolygon points='18.3 11.7 16.8 6.3 22.2 4.8 22.7 6.7 19.2 7.7 20.2 11.1'/%3E%3Cpolygon points='8.6 25.7 8.1 23.8 11.6 22.9 10.6 19.4 12.5 18.9 14 24.2'/%3E%3Cpath fill='%23fff' d='M60.8 30H37.1c-1.7 0-3.2-1.4-3.2-3.2V3.2c0-1.7 1.4-3.2 3.2-3.2h23.7c1.7 0 3.2 1.4 3.2 3.2v23.7C63.9 28.6 62.5 30 60.8 30z'/%3E%3Cpolygon fill='%231D1D1B' points='53.7 24.4 52.3 23.1 56.4 18.9 52.3 14.8 53.7 13.4 59.2 18.9'/%3E%3Crect x='38.7' y='18' fill='%231D1D1B' width='19.1' height='2'/%3E%3Cpolygon fill='%231D1D1B' points='48.7 11.3 44.6 7.1 40.5 11.3 39.1 9.9 44.6 4.4 50.1 9.9'/%3E%3Crect x='43.6' y='5.8' fill='%231D1D1B' width='2' height='19.1'/%3E%3C/svg%3E");
}



@keyframes liveStatSlideIn {
    from {
        opacity: 0;
        transform: translateX(-100%);
        max-height: 0;
        margin-bottom: 0;
    }
    to {
        opacity: 1;
        transform: translateX(0);
        max-height: 150px;
        margin-bottom: 4px;
    }
}

@keyframes liveStatSlideOut {
    from {
        opacity: 1;
        /*transform: translateX(0);*/
        max-height: 50px;
    }
    to {
        opacity: 0;
        /*transform: translateX(100%);*/
        max-height: 0px;
    }
}

#game-over{display: block; position: fixed; z-index: 99; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vw; height: auto; background-color: rgba(0, 0, 0, 0.5); padding: 40px; box-sizing: border-box; color: white; pointer-events: none; visibility: hidden;}
#game-over.active{display: block; visibility: visible; pointer-events: all;}

#wrapper.home .game-hud,
  #wrapper.home .btn-game-hud,
  #wrapper.home #stat-game-score,
  #wrapper.home #stat-game-mode{display: none;}
#wrapper.home canvas{display: block;}
#btn-menu-home{top: 60px; right: 20px; display: none; background: url(icon-menu.svg) center right no-repeat; background-size: auto 80%;}
#btn-menu-home.active{display: block !important;}
/* Hide button on main game modes menu */
#menuContainer[data-name="game"] #btn-menu-home {display: none !important;}
/* Firebase Login State Toggle */
#home-logged-in { display: none; }

#menuContainer #global-login-container p{padding: 0; margin: 0;}
#menuContainer[data-firebase-user="loggedin"] #home-logged-out { display: none; }
#menuContainer[data-firebase-user="loggedin"] #home-logged-in { display: flex; padding: 15px 0;}

#menuContainer[data-firebase-user="loggedout"] #home-logged-out { display: flex;  padding: 15px 0;}
#menuContainer[data-firebase-user="loggedout"] #home-logged-in { display: none; }

#game-panel-zoom{top: 120px; right: 20px; display: flex; flex-direction: column; gap: 5px; position: fixed; z-index: 100;}
#game-panel-zoom a{display: block; width: 30px; height: 30px; overflow: hidden; border-radius: 2px; text-indent: -999px; border: 2px solid var( --color-yellow); box-sizing: border-box;}
#btn-game-zoom-in{background: url(icon-zoom-in.svg) center no-repeat; background-size: 95%;}
#btn-game-zoom-out{background: url(icon-zoom-out.svg) center no-repeat; background-size: 95%;}
#btn-game-panel-camera{display: none !important; right: 0;}
#btn-game-panel-stats{left: 20px; width: 70px; top: 60px; background: url(icon-score.svg) center right no-repeat; background-size: contain;}
#stat-game-mode{display: none !important;}
.game-hud{position: fixed; z-index: 89; bottom: 0px; left: 0px; transform: translateY(100%); right: 0; color: #fff; padding: 0; box-sizing: border-box; }
.game-hud a{color: #fff;}
.game-hud.active{transform: translateY(0);}
.game-hud .game-hud-panel{display: block; width: 100%; background-color: rgba(0, 0, 0, 0.7); padding: 20px 20px 60px 20px; box-sizing: border-box;}
.btn-game-hud{display: block; position: fixed; z-index: 100; top: 30px; width: 40px; height: 40px; background: black; text-indent: -9999px; overflow: hidden;}

#wrapper.home #game-helper-container{display: none;}

#wrapper.tutorial #game-helper-container{display: none !important;}
#tutorial-message{position: fixed; bottom: 0px; left: 50%; pointer-events: none; transform: translateX(-50%); background: linear-gradient(0deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 100%); color: white; padding: 220px 0px 30px 0px; width: 100%; text-align: center; z-index: 100;}
#tutorial-message .tutorial-icon{display: block; max-width: 250px; max-height: 70px; margin: 0 auto 10px auto;}
#tutorial-message .tutorial-toggle,
  #game-levelup #btn-levelup-close{margin: 0 auto; background: var(--color-yellow-transparent); transform: translateY(calc(-100% + 10px)); position: relative; pointer-events: all; display: block; height: 30px; color: #000; font-size: 20px; line-height: 30px; border-radius: 6px; width: 95px; padding: 0 12px; box-sizing: border-box;}
#tutorial-message .tutorial-toggle::before,
  #game-levelup #btn-levelup-close::before{content: ' '; display: block; position: absolute; width: 60px; height: 1px; overflow: hidden; background: rgba(255,255,255,0.5); top: 50%; left: 0%; transform: translateX(-100%); z-index: -1;}
#tutorial-message .tutorial-toggle::after,
  #game-levelup #btn-levelup-close::after{content: ' '; display: block; position: absolute; width: 60px; height: 1px; overflow: hidden; background: rgba(255,255,255,0.5); top: 50%; left: 100%; transform: translateX(0%); z-index: -1;}
#tutorial-message .tutorial-toggle .btn-hide,
  #game-levelup #btn-levelup-close .btn-hide{display: block; position: relative; text-align: left;}
#tutorial-message .tutorial-toggle .btn-hide::before,
  #game-levelup #btn-levelup-close .btn-hide::before{content: ' '; background: url(tutorial-toggle-close.svg) center no-repeat; width: 18px; height: 18px; background-size: contain; display: block; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); z-index: 1;}
#tutorial-message .tutorial-toggle .btn-show,
  #game-levelup #btn-levelup-close .btn-show{display: none; position: relative; text-align: left;}
#tutorial-message .tutorial-toggle .btn-show::before,
  #game-levelup #btn-levelup-close .btn-show::before{content: ' '; background: url(tutorial-toggle-open.svg) center no-repeat; width: 15px; height: 15px; background-size: contain; display: block; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); z-index: 1;}
#tutorial-message .tutorial-toggle.text-only{background: none; width: auto; height: auto; color: var(--color-yellow-transparent); transform: none; border-radius: 0; margin-bottom: 20px;}
#tutorial-message .btn-tutorial-continue{color: var(--color-yellow); pointer-events: all;}
#tutorial-message .content{transition: all 0.5s ease-in-out 0s; max-height: 50vh; overflow: hidden;}
#tutorial-message.closed .content{max-height: 0px;}
#tutorial-message.closed .tutorial-toggle .btn-hide{display: none;}
#tutorial-message.closed .tutorial-toggle .btn-show{display: block;}
.tutorial-tile{display: block; width: 60px; height: 60px;}
.tutorial-intro-flip,
  .tutorial-intro-tiles{width: 70px !important; height: auto !important; aspect-ratio: 1 / 1.2;}
.tutorial-tile-pink{background: url(tutorial-tile-pink.svg) top left no-repeat; background-size: contain;}
.tutorial-tile-green{background: url(tutorial-tile-green.svg) top left no-repeat; background-size: contain;}
.tutorial-tile-purple{background: url(tutorial-tile-purple.svg) top left no-repeat; background-size: contain;}
.tutorial-tile-blue{background: url(tutorial-tile-blue.svg) top left no-repeat; background-size: contain;}
.tutorial-tile-yellow{background: url(tutorial-tile-yellow.svg) top left no-repeat; background-size: contain;}
.tutorial-tile-red{background: url(tutorial-tile-red.svg) top left no-repeat; background-size: contain;}
.tutorial-tile-pearl{background: url(tutorial-tile-pearl.svg) top left no-repeat; background-size: contain;}
.tutorial-tile-score-x15{background: url(tutorial-score-x1.5.svg) top left no-repeat; background-size: contain;}
.tutorial-intro-flip{background: url(tutorial-intro-flip.svg) center no-repeat; background-size: contain;}
.tutorial-intro-tiles{background: url(tutorial-intro-tiles.svg) center no-repeat; background-size: contain;}

#game-elements{display: none;}
#wrapper.game #game-elements{display: block;}
#game-helper-container{display: block; width: 100%; position: fixed; z-index: 90; bottom: 0; left: 0; right; padding: 0; align-items: center; justify-content: center;}
#game-helper-container .content{}
#game-helper-container #helper-options{display: flex; align-items: top; opacity: 1; transition: opacity 0.5s; pointer-events: all; justify-content: space-around; flex-direction: row; gap: 40px; margin: 0 0 50px 0;}
.game-helper-inner{display: block; width: 50%;}
.btn-game-helper{display: flex ; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; color: var(--color-yellow); font-size: 25px;}
.btn-game-helper.disabled,
  .btn-game-helper.disabled {opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.helper-icon{display: block; width: 35px; height: 35px;}
.helper-icon-path{fill: var(--color-yellow);}
#btn-game-helper-flip{}
#btn-game-helper-shuffle{}
#btn-game-helper-shuffle-activate{}
#wrapper.tutorial#game-helper-container{display: none;}

.helper-points-progress-indicator{display: none;}
.helper-points-progress{color: white; font-size: 10px;}
.helper-points-display{display: flex; width: 100%; flex-direction: row; justify-content: space-between; align-items: flex-start; margin: 8px auto; gap: 4px;}
.helper-points-display .helper-points-indcator{display: block; width: 33.33%; height: 4px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.3); overflow: hidden; text-indent: -9999px;}
.helper-points-display[data-available="1"] .indcator-1,
.helper-points-display[data-available="2"] .indcator-1,
  .helper-points-display[data-available="2"] .indcator-2,
.helper-points-display[data-available="3"] .indcator-1,
  .helper-points-display[data-available="3"] .indcator-2,
  .helper-points-display[data-available="3"] .indcator-3{background: var(--color-yellow);}
.helper-points-progress-bar{display: block; width: 100%; height: 1px; background: rgba(255,255,255,0.3); margin-top: 3px;}
.helper-points-progress-bar-inner{display: block; width: 0%; height: 2px; background: var(--color-green); border-radius: 3px;}

.helper-unlock-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.2rem;
    animation: pop-in 0.3s ease-out;
    z-index: 1000;
}
.helper-unlock-notification.fade-out {
    opacity: 0;
    transition: opacity 0.5s;
}

#helper-popup{display: block; transition: all 0.3s ease-in-out 0s; width: 100%; height: 100px; line-height: 100px; max-height: 0; overflow: hidden; color: #fff; position: relative; text-align: center;}
#helper-popup::before{content: ' '; display: block; width: 0px; height: 1px; max-width: 600px; transition: all 0.3s ease-in-out 0.2s; background: rgba(255,255,255,0.5); position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
#helper-popup .content{display: none;}
#wrapper[data-helper="flip"] #helper-popup{display: block; max-height: 100px;}
#wrapper[data-helper="flip"] #helper-popup-flip{display: block;}
#wrapper[data-helper="shuffle"] #helper-popup{display: block; max-height: 100px;}
#wrapper[data-helper="shuffle"] #helper-popup-shuffle{display: block;}

#wrapper[data-helper="flip"] #game-helper-container,
  #wrapper[data-helper="shuffle"] #game-helper-container{background: linear-gradient(0deg, rgba(0,0,0,1) 5%, rgba(0,0,0,0) 100%);}
#wrapper[data-helper="flip"] #helper-popup::before,
  #wrapper[data-helper="shuffle"] #helper-popup::before{width: 100%;}
#wrapper[data-helper="flip"] #helper-options,
  #wrapper[data-helper="shuffle"] #helper-options{opacity: 0; pointer-events: none;}

@keyframes pop-in {
    0% { transform: translate(-50%, -50%) scale(0); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.no-padding{padding: 0;}
.svg-line-anim{transition: all 1s ease-in-out 1.5s;}
.text-yellow{color: var(--color-yellow);}
.text-red{color: var(--color-red);}
.text-green{color: var(--color-green);}
.text-darkgreen{color: var(--color-darkgreen);}
.text-blue{color: var(--color-blue);}
.text-pink{color: var(--color-pink);}
.text-purple{color: var(--color-purple);}
.text-navy{color: var(--color-navy);}
.text-small{font-size: var(--text-small);}

#error-popup{display: block; width: 100%; height: auto; transform: translateY(-100%); background: red; padding: 15px 0; transition: all 0.5s ease-in-out 0s; box-sizing: border-box; color: #fff; position: fixed; top: 0; left: 0; z-index: 999;}
#error-popup.active{transform: translateY(0);}