<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SplitShot.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">

    <style>

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Poppins:wght@400;600&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Tajawal', sans-serif,'Rajdhani';
    overflow: hidden;
}

body {
    background-image: url('img/bakcground.png');
    background-size: cover;
    background-color: rgb(255, 255, 255);
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.g_id_signin {
    margin-top: 20px;
}

.circle-button {
    width: 12vmin;
    height: 12vmin;
    border-radius: 50%;
    background-color: white;
    position: relative;
    margin-bottom: 2vmin;
    box-shadow: 0 0.5vmin 1vmin rgba(0,0,0,0.2);
}

.plus-button {
    position: absolute;
    bottom: -1vmin;
    right: -1vmin;
    width: 5vmin;
    height: 5vmin;
    border-radius: 50%;
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3vmin;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0.3vmin 0.6vmin rgba(0,0,0,0.3);
}

#playerName {
    width: 35vmin;
    height: 7vmin;
    padding: 1vmin 2vmin;
    margin-bottom: 3vmin;
    border: none;
    border-radius: 1vmin;
    font-size: 2.5vmin;
    text-align: center;
    background: linear-gradient(145deg, #e6e6e6, #ffffff);
    box-shadow: 0.5vmin 0.5vmin 1vmin #d1d1d1, 
                        -0.5vmin -0.5vmin 1vmin #ffffff;
    color: #333;
    transition: all 0.3s ease;
}

#playerName:focus {
    outline: none;
    transform: scale(1.05);
    box-shadow: 0.7vmin 0.7vmin 1.5vmin #d1d1d1, 
                        -0.7vmin -0.7vmin 1.5vmin #ffffff;
}

#playerName::placeholder {
    color: #888;
}

#startButton {
    width: 15vmin;
    height: 15vmin;
    border: none;
    border-radius: 1vmin;
    background: linear-gradient(145deg, #00e676, #00c853);
    color: white;
    font-size: 2.5vmin;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0.5vmin 0.5vmin 1vmin rgba(0,0,0,0.2), 
                        inset 0.5vmin 0.5vmin 1vmin rgba(255,255,255,0.2),
                        inset -0.5vmin -0.5vmin 1vmin rgba(0,0,0,0.1);
    text-shadow: 0.2vmin 0.2vmin 0.3vmin rgba(0,0,0,0.3);
}

#startButton:hover {
    transform: scale(1.1);
    box-shadow: 0.7vmin 0.7vmin 1.5vmin rgba(0,0,0,0.3), 
                        inset 0.7vmin 0.7vmin 1.5vmin rgba(255,255,255,0.3),
                        inset -0.7vmin -0.7vmin 1.5vmin rgba(0,0,0,0.15);
}

#startButton:active {
    transform: scale(0.95);
    box-shadow: 0.3vmin 0.3vmin 0.5vmin rgba(0,0,0,0.2), 
                        inset 0.3vmin 0.3vmin 0.5vmin rgba(255,255,255,0.1),
                        inset -0.3vmin -0.3vmin 0.5vmin rgba(0,0,0,0.05);
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  transition: opacity 0.5s ease-in-out;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup.show {
  opacity: 1;
  pointer-events: auto;
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ff5733;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.close-popup::before,
.close-popup::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: white;
}

.close-popup::before {
  transform: rotate(45deg);
}

.close-popup::after {
  transform: rotate(-45deg);
}

.close-popup:hover {
  background-color: #e74c3c;
  transform: scale(1.1);
}

.popup-content {
  position: relative;
  background: linear-gradient(to bottom, #f0db4f, #e6b800);
  margin: 0 auto;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  width: 800px;
  height: 450px; 
  max-height: 450px; 
  border: 5px solid #b38f00;
  transform-origin: center center;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.house-tab-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.house-tab-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #f0db4f;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 10px;
  border-radius: 5px;
}

.house-tab-button.active {
  background-color: #e6b800;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.cards-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-row {
  display: flex;
  transition: transform 0.3s ease;
  width: 100%;
}

.skin-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.skin-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.arc-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.card {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 10px;
  display: flex;
  overflow: visible !important;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  height: 350px;
  margin-right: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:last-child {
  margin-right: 0;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.card-name {
  font-size: 16px; 
  font-weight: bold;
  margin-bottom: 8px;
  order: -1;
}

.card-image {
  width: 100px; 
  height: 100px; 
  border-radius: 50%;
  overflow: hidden;
  margin: auto 0;
  position: relative;
  z-index: 1;

}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-price {
  font-size: 14px; 
  font-weight: bold;
  color: #4CAF50;
  margin-top: 8px;
}

.card-select {
  background-color: gold;
  color: #333;
  border: none;
  padding: 8px 16px; 
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-select:hover {
  background-color: #FFD700;
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.card-select:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.card-select:disabled:hover {
  transform: none;
  box-shadow: none;
}

.card-select.selected {
  background-color: white;
  color: #4CAF50;
  border: 2px solid #4CAF50;
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #0fb3ff;
    color: white;
    border: none;
    font-size: 24px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1002; 
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-button:hover {
  background-color: #0d92cf;
}

.nav-button.left {
    right: calc(100% + 20px); 
}

.nav-button.right {
    left: calc(100% + -20px);
}
.nav-button.prev {
  left: 5px;
}

.nav-button.next {
  right: 5px;
}

@media screen and (max-width: 900px) {
  .popup-content {
    width: 90%;
    height: 80vh;
    margin: 20px auto;
  }

  .nav-button.left {
    left: 10px;
  }

  .nav-button.right {
    right: 10px;
  }
}

@media screen and (max-height: 700px) {
  .popup-content {
    height: 90vh;
    margin: 15px auto;
  }
}

@media screen and (min-width: 1200px) {
  .popup-content {
    transform: scale(1);
  }

  .nav-button.left {
    left: -30px;
  }

  .nav-button.right {
    right: 30px;
  }
}

@media screen and (max-width: 480px) {
  .popup-content {
    padding: 15px;
    width: 95%;
  }

  .house-tab-button {
    padding: 8px 15px;
    font-size: 14px;
  }
}

    .package-indicator {
  text-align: center;
  margin-top: 20px;
}

.package-indicator span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #bdc3c7;
  border-radius: 50%;
  margin: 0 5px;
  transition: background-color 0.3s ease;
}

.package-indicator span.active {
  background-color: #3498db;
}

@media (max-width: 768px) {
  .coin-package {
    flex: 0 0 calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .coin-package {
    flex: 0 0 calc(100% - 20px);
  }
}

.user-info {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: 300px;
}

.user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.coin-counter {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: gold;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#logoutButton {
    margin-left: 10px;
    padding: 5px 10px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    padding: 12px 25px;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 25px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}
.tab-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ff00e0, #00e0ff);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: 25px;
}
.tab-button:hover::before {
    opacity: 0.2;
}

.tab-button.active::before {
    opacity: 1;
}
.tab-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.tab-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tab-content.active {
    opacity: 1;
    transform: translateY(0);
}

.danger-button {
    background-color: #ff4757;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 20px;
}

.danger-button:hover {
    background-color: #ff6b6b;
}

.popup-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    border-radius: 10px;
}

.popup-buttons {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.popup-button {
    padding: 0.3rem 0.6rem;
    margin: 0 0.3rem;
    border: none;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.popup-button.confirm {
    background-color: #4CAF50;
    color: white;
}

.popup-button.cancel {
    background-color: #f44336;
    color: white;
}

.popup-button:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.fixed-element {
    position: fixed;
    font-size: 16px;
    z-index: 0;
}

#coinCounter {
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: gold;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#g_id_onload {
    top: 20px;
    left: 20px;
}

#userInfo {
    bottom: 20px;
    right: 20px;
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#userInfo img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.custom-alert-container-y2k8 {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    animation: fadeIn-r3s2 0.3s ease-out;
}

.custom-alert-content-m3p5 {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 20% auto;
    padding: 20px;
    text-align: center;
    animation: slideIn-t7y1 0.3s ease-out;
}

.custom-alert-icon-f6l2 {
    font-size: 48px;
    margin-bottom: 20px;
}

#custom-alert-message-q1w9 {
    margin-bottom: 20px;
    font-size: 18px;
}

#custom-alert-close-b4n7 {
    background-color: #e74c3c;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

#custom-alert-close-b4n7:hover {
    background-color: #c0392b;
}

@keyframes fadeIn-r3s2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-t7y1 {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.modal.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-content::-webkit-scrollbar {
    width: 12px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #8e2de2, #4a00e0);
    border-radius: 10px;
    box-shadow: 0 0 15px #8e2de2;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #b13cff, #5e00ff);
    box-shadow: 0 0 20px #b13cff;
}

.modal-content {
    background: linear-gradient(145deg, #2c3e50, #34495e);
    color: white;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    padding-right: 30px; 
    max-width: 700;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.modal.show .modal-content {
    transform: scale(1);
    opacity: 1;
}

.close {
    color: #00ffff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.close:hover,
.close:focus {
    color: #00cccc;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .key-binding-column {
        width: 100%;
    }
}

.key-binding {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}
.key-binding:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.key-binding label {
    flex: 1;
    font-size: 18px;
    color: #fff;
    margin-right: 15px;
}

.key-binding-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #4a00e0;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.key-binding-input:hover, .key-binding-input:focus {
    background: rgba(74, 0, 224, 0.3);
    border-color: #8e2de2;
    outline: none;
}

.key-binding-input.listening {
    background: #8e2de2;
    border-color: #fff;
    color: #fff;
    animation: pulse 1s infinite;
}

.key-binding button {
    width: 100%;
    background: #00ffff;
    color: black;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.key-binding button:hover {
    background: #00cccc;
}

.settings-button {
    position: fixed;
    left: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(145deg, #2196f3, #21cbf3);
    border: none;
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.3),
                        inset 0 -2px 5px rgba(0,0,0,0.2),
                        inset 0 2px 5px rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.settings-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(33, 150, 243, 0.4),
                        inset 0 -2px 5px rgba(0,0,0,0.2),
                        inset 0 2px 5px rgba(255,255,255,0.2);
}

.settings-button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 5px rgba(33, 150, 243, 0.3),
                        inset 0 -1px 3px rgba(0,0,0,0.1),
                        inset 0 1px 3px rgba(255,255,255,0.1);
}

.settings-button svg {
    width: 30px;
    height: 30px;
    fill: white;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
    transition: all 0.3s ease;
}

.settings-button:hover svg {
    transform: rotate(90deg);
}

#keyBindings {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.key-binding-column {
    width: 30%;
}

.save-button {
    background: linear-gradient(45deg, #4a00e0, #8e2de2);
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 18px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.close-button::before {
    content: '×';
    transition: all 0.3s ease;
}

.close-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #fff;
}

.close-button:hover::before {
    transform: scale(1.2);
}

.close-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 80%);
    transition: all 0.3s ease;
    opacity: 0;
}

.close-button:hover::after {
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    opacity: 1;
}

.save-button:hover {
    background: linear-gradient(45deg, #5e00ff, #b13cff);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.success-modal {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    max-width: 400px;
    width: 90%;
}

.success-modal .success-icon {
    font-size: 60px;
    color: #00ff00;
    margin-bottom: 20px;
    animation: iconPulse 2s infinite;
}

.success-modal h2 {
    font-size: 28px;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.success-modal p {
    font-size: 18px;
    margin-bottom: 25px;
    opacity: 0.9;
}

.ok-button {
    background: linear-gradient(45deg, #00ffff, #00ccff);
    border: none;
    padding: 12px 30px;
    font-size: 18px;
    color: #000;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ok-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 255, 255, 0.6);
    background: linear-gradient(45deg, #00ccff, #00ffff);
}

.ok-button:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(0, 255, 255, 0.4);
}

.modal.show .success-modal {
    transform: scale(1);
    opacity: 1;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#successModal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
}

#successModal.show {
    display: flex;
    animation: modalFadeIn 0.3s ease-out;
}

.leaderboard-button {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: gold;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.leaderboard-button:hover {
    transform: scale(1.1);
}

.leaderboard-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
}

.leaderboard-modal.show {
    display: flex;
}

.leaderboard-content {
    background-color: white;
    border-radius: 15px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: zoomIn 0.3s ease;
}

.leaderboard-header {
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leaderboard-header h2 {
    margin: 0;
    font-size: 24px;
}

@keyframes zoomIn {
    from { transform: scale(0.7); }
    to { transform: scale(1); }
}

.close-leaderboard {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

.leaderboard-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

.leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.leaderboard-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.leaderboard-item span {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

.leaderboard-item img, .leaderboard-item .no-flag {
    width: 40px;
    height: 30px;
    object-fit: cover;
    margin-right: 10px;
}

.leaderboard-item:first-child {
    background-color: #ffd700;
    color: black;
}

.leaderboard-item:nth-child(2) {
    background-color: #c0c0c0;
    color: black;
}

.leaderboard-item:nth-child(3) {
    background-color: #cd7f32;
    color: black;
}

.leaderboard-item span:last-child {
    font-size: 20px;
    color: black;
}

.leaderboard-list-container::-webkit-scrollbar {
    width: 8px;
}

.leaderboard-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.leaderboard-list-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.leaderboard-list-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.no-flag {
    width: 35px;
    height: 35px;
    margin-right: 10px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e0e0e0, #c0c0c0);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #8c8c8c;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.no-flag:hover {
    background: linear-gradient(145deg, #ffffff, #d0d0d0);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5), inset 0 0 5px rgba(0, 0, 0, 0.2);
}

#loginFrame {
    background-color: rgba(255, 0, 0, 0.8);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px; 
    margin: 20px auto; 
}
#loginFrame p {
    font-size: 18px;
    margin-bottom: 20px;
    color: white;
}
#googleSignInButton {
    margin-bottom: 15px; 
}

h1 {
    font-size: 72px;
    font-weight: bold;
    text-align: center;
    margin-top: -50px;
    margin-bottom: 20px;
    color: #06f02d;
}

.level-bar {
    width: 150px;
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.level-progress {
    height: 100%;
    transition: width 0.3s ease, background 0.3s ease;
}

@keyframes levelUp {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.2); filter: brightness(1.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

.level-star.level-up {
    animation: levelUp 0.5s ease;
}

.level-star::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    transform: rotate(45deg);
}

.user-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    color: white;
}

.user-popup h2 {
    margin-top: 0;
    color: #ffffff;
    font-size: 28px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.close-popup-user {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 28px;
    color: white;
    transition: transform 0.3s ease;
}

.close-popup-user:hover {
    transform: rotate(90deg);
}

#popupUserImage {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 15px;
    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.user-info-header {
    text-align: center;
    margin-bottom: 30px;
}

.user-stats-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.stats-column {
    flex-basis: 30%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.stats-column h3 {
    color: #ffd700;
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 15px;
}

.stats-column p {
    margin: 10px 0;
    font-size: 14px;
}

#popupUserStats {
    margin-top: 20px;
}

#popupUserStats p {
    margin: 5px 0;
    font-size: 14px;
    color: #555;
}

#popupLogoutButton {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #ff4757;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

#popupLogoutButton:hover {
    background-color: #ff6b6b;
}

.user-popup::-webkit-scrollbar {
    width: 10px;
}

.user-popup::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.user-popup::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

.user-popup::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

#popupLevelInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
}

#popupLevelInfo .level-bar {
    width: 150px;
    height: 12px;
    background-color: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    margin-left: 10px;
}

#popupLevelInfo .level-progress {
    height: 100%;
    transition: width 0.3s ease, background 0.3s ease;
}

#userImage {
    cursor: pointer;
}

.level-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    flex-direction: row-reverse;
}

.level-bar-container {
    margin-right: 15px;
}

.level-star {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.level-star svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.level-star path {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1;
}

.level-star .star-shape {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.level-star span {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    text-shadow: 
        -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 8px rgba(0,0,0,0.5);
}

@keyframes starShine {
    from {
        filter: brightness(1);
    }
    to {
        filter: brightness(1.2);
    }
}

.level-up-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.level-up-content {
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.3);
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.level-up-content.show {
    transform: scale(1);
    opacity: 1;
}

.level-up-title {
    font-size: 48px;
    color: #FFD700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.level-up-message {
    font-size: 24px;
    color: white;
    margin-bottom: 30px;
}

.coins-added {
    font-size: 36px;
    color: #FFD700;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.level-up-button {
    background: #FFD700;
    color: #333;
    border: none;
    padding: 15px 30px;
    font-size: 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.level-up-button:hover {
    background: #FFA500;
    transform: scale(1.05);
}

@keyframes coinSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.coin-icon {
    display: inline-block;
    font-size: 48px;
    margin-right: 10px;
    animation: coinSpin 2s infinite linear;
}

.player-info {
    display: flex;
    align-items: center;
}

.avatar-letter {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.avatar-letter:hover {
    opacity: 0.8;
}

.leaderboard-item,
.avatar-letter,
.level-star,
.level-star span {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.player-stats-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    color: white;
}

.player-stats-popup::-webkit-scrollbar {
    width: 10px;
}

.player-stats-popup::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.player-stats-popup::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
}

.player-stats-popup::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.player-stats-popup .user-info-header {
    text-align: center;
    margin-bottom: 30px;
}

.player-stats-popup .avatar-letter {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    font-size: 48px;
}

.player-stats-popup h2 {
    margin-top: 0;
    color: #ffffff;
    font-size: 28px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.player-stats-popup .user-stats-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.player-stats-popup .stats-column {
    flex-basis: 30%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.player-stats-popup .stats-column h3 {
    color: #ffd700;
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 15px;
}

.player-stats-popup .stats-column p {
    margin: 10px 0;
    font-size: 14px;
}

.player-stats-popup .close-popup-stats {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 28px;
    color: white;
    transition: transform 0.3s ease;
}

.player-stats-popup .close-popup-stats:hover {
    transform: rotate(90deg);
}

.close-popup-stats {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 28px;
    color: white;
    transition: transform 0.3s ease;
}

.close-popup-stats:hover {
    transform: rotate(90deg);
}

.player-info-header {
    text-align: center;
    margin-bottom: 30px;
}

.player-stats-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.stats-column {
    flex-basis: 30%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
}

.stats-column h3 {
    color: #ffd700;
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 15px;
}

.stats-column p {
    margin: 10px 0;
    font-size: 14px;
}

.data-delete-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.data-delete-content {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    margin: 5% auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 600px;
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.data-delete-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.data-delete-close:hover {
    color: #333;
}

.data-delete-title {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

.data-delete-steps {
    margin-bottom: 25px;
}

.data-delete-intro {
    color: #34495e;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.data-delete-list {
    padding-left: 0;
    list-style-type: none;
}

.data-delete-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background-color: #ecf0f1;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.data-delete-list li:hover {
    background-color: #e0e6e8;
}

.step-icon {
    font-size: 24px;
    margin-right: 15px;
}

.step-text {
    color: #2c3e50;
    font-size: 16px;
}

.data-delete-info {
    background-color: #e8f4fd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.data-delete-items {
    list-style-type: none;
    padding-left: 0;
}

.data-delete-items li {
    color: #34495e;
    margin-bottom: 10px;
    font-size: 14px;
}

.data-delete-footer {
    text-align: center;
    margin-top: 25px;
}

.data-delete-contact {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.data-delete-contact:hover {
    background-color: #2980b9;
}

.data-delete-button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.confirmation-dialog {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.confirmation-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    text-align: center;
}

.confirmation-buttons {
    margin-top: 20px;
}

.confirmation-buttons button {
    margin: 0 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#confirmDeleteBtn {
    background-color: #ff4757;
    color: white;
}

#confirmDeleteBtn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#cancelDeleteBtn {
    background-color: #7bed9f;
    color: white;
}

.settings-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.house-tab-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    padding: 10px;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
}

.house-tab-button {
    background: none;
    border: none;
    color: #333;
    font-size: 16px;
    padding: 12px 25px;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 25px;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.house-tab-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    border-radius: 25px;
}

.house-tab-button:hover::before {
    opacity: 0.1;
}

.house-tab-button.active {
    color: #fff;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.house-tab-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
}

.coin-counter-pro {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(145deg, #ffd700, #ffcc00);
  border-radius: 50px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.coin-counter-pro:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.coin-icon {
  font-size: 24px;
  margin-right: 10px;
}

#coinAmount {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  transition: all 0.3s ease;
}

#coinAmount.updated {
  animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.buy-coins-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.buy-coins-btn:hover {
  background-color: #45a049;
  transform: scale(1.1);
}

.purchase-modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.purchase-modal-content {
  background-color: #f0f8ff;
  margin: 2% auto;
  padding: 10px;
  border-radius: 15px;
  width: 72%;
  max-width: 585px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.coin-packages-container {
  position: relative;
  overflow: hidden;
  padding: 15px 0;
}

.close-purchase-modal {
  color: #7f8c8d;
  float: right;
  font-size: 36px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-purchase-modal:hover {
  color: #34495e;
}

@media (max-width: 768px) {
  .coin-packages {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .coin-packages {
    grid-template-columns: 1fr;
  }

  .purchase-modal-content {
    padding: 20px;
  }
}

.purchase-modal h2 {
  text-align: center;
  color: #2c3e50;
  font-size: 32px;
  margin-bottom: 30px;
}

.coin-icon-large {
  font-size: 32px;
  margin-bottom: 8px;
}

.coin-amount {
  font-size: 24px;
  color: #3498db;
  margin-bottom: 4px;
  font-weight: bold;
}

.coin-packages {
  display: flex;
  transition: transform 0.5s ease;
}

.coin-package {
  flex: 0 0 calc(33.333% - 15px);
  margin: 0 7.5px;
  background: linear-gradient(145deg, #ffffff, var(--package-color, #e6f2ff));
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.coin-package:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.coin-package h3 {
  color: #2c3e50;
  font-size: 20px;
  margin-bottom: 8px;
}

.coin-package p {
  margin: 10px 0;
  font-size: 18px;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
  margin: 10px 0;
}

.savings {
  color: #e74c3c;
  font-weight: bold;
  font-size: 16px;
}

.coin-package .price {
  font-size: 32px;
  font-weight: bold;
  color: #3498db;
  margin: 15px 0;
}

.buy-package {
  background-color: #2ecc71;
  color: white;
  border: none;
  padding: 10px 20px;
  margin-top: 12px;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 16px;
  font-weight: bold;
}

.buy-package:hover {
  background-color: #27ae60;
}

.best-value {
  border: 3px solid #f1c40f;
  position: relative;
  overflow: hidden;
}

.best-value::before {
  content: "Best Value";
  position: absolute;
  top: 10px;
  right: -30px;
  background-color: #f1c40f;
  color: #2c3e50;
  padding: 5px 40px;
  transform: rotate(45deg);
  font-size: 14px;
  font-weight: bold;
}

@media (max-width: 768px) {
  .coin-package {
    width: calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .coin-package {
    width: 100%;
  }
}

.payment-modal {
  display: none;
  position: fixed;
  z-index: 1002;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.payment-modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border-radius: 10px;
  width: 50%;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
}

.close-payment-modal {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-payment-modal:hover,
.close-payment-modal:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#selected-package-info {
  margin-bottom: 20px;
  font-size: 18px;
}

#paypal-button-container {
  margin-top: 20px;
}

.email-sign-in-btn {
    background-color: #0084ff;
    color: white;
    border: none;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin: 10px 0;
    cursor: pointer;
    border-radius: 50px;
    width: 100%;
    max-width: 300px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.email-sign-in-btn:hover {
    background-color: #0066cc;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.email-sign-in-btn i {
    font-size: 24px;
    margin-right: 10px;
}

.email-sign-in-btn .button-text {
    font-weight: bold;
}

@media (max-width: 400px) {
    .email-sign-in-btn {
        font-size: 14px;
        padding: 10px 15px;
    }
    .email-sign-in-btn i {
        font-size: 20px;
    }
}

:root {
  --modal-primary-color: #4a90e2;
  --modal-secondary-color: #f5a623;
  --modal-background-color: #ffffff;
  --modal-text-color: #333;
  --modal-error-color: #e74c3c;
  --modal-success-color: #2ecc71;
  --modal-border-radius: 10px;
  --modal-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  --x9k_primary: #0066ff;
    --x9k_secondary: #4d2bff;
    --x9k_accent: #6600ff;
    --x9k_dark: #ffffff;
    --x9k_glass: rgba(255, 255, 255, 0.95);
    --x9k_glow: rgba(77, 43, 255, 0.1);
}

.auth-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.auth-modal-content {
  background-color: var(--modal-background-color);
  margin: 2% auto;
  padding: 20px 30px;
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-box-shadow);
  max-width: 600px;
  width: 90%;
  position: relative;
  animation: slideIn 0.3s ease-out;
  font-family: 'Tajawal', 'Roboto', sans-serif;
  color: var(--modal-text-color);
  display: flex;
  flex-direction: column;
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.auth-modal-close {
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  transition: color 0.2s;
}

.auth-modal-close:hover {
  color: var(--modal-text-color);
}

.auth-modal h2 {
  margin-bottom: 20px;
  color: var(--modal-primary-color);
  font-size: 24px;
  text-align: center;
  font-family: 'Tajawal', 'Roboto', sans-serif;
}

.auth-modal form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.input-group {
  margin-bottom: 15px;
  position: relative;
  width: 100%;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: var(--modal-text-color);
}

.input-group input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: var(--modal-border-radius);
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
  font-family: 'Tajawal', 'Roboto', sans-serif;
}

.input-group input:focus {
  border-color: var(--modal-primary-color);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
  outline: none;
}

.auth-button {
  background-color: var(--modal-primary-color);
  color: white;
  border: none;
  display: flex;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
  border-radius: var(--modal-border-radius);
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  transition: background-color 0.3s, transform 0.1s;
  font-family: 'Tajawal', 'Roboto', sans-serif;
}

.auth-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-right: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.auth-button:hover {
  background-color: #3a7bd5;
}

.auth-button:active {
  transform: scale(0.98);
}

.forgot-password {
  text-align: center;
  margin-top: 15px;
}

.forgot-password a {
  color: var(--modal-primary-color);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.2s;
}

.forgot-password a:hover {
  color: #3a7bd5;
  text-decoration: underline;
}

.password-requirements {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  padding: 5px;
  background-color: #f8f8f8;
  border-radius: var(--modal-border-radius);
  border: 1px solid #ddd;
  width: 100%;
}

.error-message {
  color: var(--modal-error-color);
  font-size: 14px;
  margin-top: 5px;
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.error-modal, .custom-success-modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease-out;
  z-index: 9999;
}

.error-modal-content, .custom-success-modal-content {
  background-color: var(--modal-background-color);
  margin: 15% auto;
  padding: 30px;
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-box-shadow);
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: slideIn 0.3s ease-out;
  font-family: 'Tajawal', 'Roboto', sans-serif;
}

#errorMessage {
  color: var(--modal-error-color);
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

#successMessage {
  color: var(--modal-success-color);
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

#errorOkButton, #successOkButton {
  background-color: var(--modal-primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: var(--modal-border-radius);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
  font-family: 'Tajawal', 'Roboto', sans-serif;
}

#errorOkButton:hover, #successOkButton:hover {
  background-color: #3a7bd5;
}

#errorOkButton:active, #successOkButton:active {
  transform: scale(0.98);
}

@media (max-width: 480px) {
  .auth-modal-content, .error-modal-content, .custom-success-modal-content {
    width: 95%;
    padding: 20px;
  }

  .auth-modal h2 {
    font-size: 20px;
  }

  .input-group input, .auth-button {
    font-size: 14px;
    padding: 10px;
  }
}

.icon-container {
    position: fixed;
    top: 6rem;
    left: 1.25rem;
    width: 3.875rem;
    height: 3.875rem;
    background: radial-gradient(circle at 30% 30%, #ffd700, #ffa500);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 1.25rem rgba(255, 215, 0, 0.6);
}

#battlePassTimer {
    position: relative;
    margin-left: -10px; 
    margin-top: -10px;  
    white-space: nowrap;
}

.icon-container:hover {
    transform: scale(1.05);
}

.icon-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.battle-pass-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.battle-pass-container.open {
    height: 100vh;
}
.settings-button,
.leaderboard-button {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.battle-pass-open .settings-button,
.battle-pass-open .leaderboard-button {
    opacity: 0;
    visibility: hidden;
}

.coin-counter-pro,
.enlarged-image-container {
    z-index: 1000;
}

.battle-pass {
    width: 53.125rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1.25rem;
    padding: 1.875rem;
    box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.1);
    transform: translateY(-3.125rem);
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: relative;
    overflow: hidden;
}

.tier-row {
    display: flex;
    align-items: center;
    margin-bottom: 1.25rem;
    position: relative;
}

.fixed-tier {
    flex-shrink: 0;
    margin-right: 1.25rem;
    z-index: 2;
}

.scrollable-content {
    overflow: hidden;
    width: calc(100% - 10rem);
}

.tier-content {
    display: flex;
    transition: transform 0.3s ease;
}

.tier {
    width: 8.75rem;
    height: 11.25rem;
    background: #ffffff;
    border: 0.1875rem solid #ffd54f;
    border-radius: 0.9375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-right: 1.25rem;
    flex-shrink: 0;
}

.tier::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    transition: opacity 0.5s ease;
    pointer-events: none;
    border-radius: 0.9375rem;
}

.tier.unlocked::after {
    opacity: 0;
}

.tier:hover {
    transform: translateY(-0.3125rem) rotate(3deg);
    box-shadow: 0 0.3125rem 0.9375rem rgba(255, 213, 79, 0.5);
}

.tier.premium {
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
    border-color: #fdcb6e;
}

.gold, .silver {
    position: relative;
    overflow: hidden;
}

.gold::before, .silver::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent 30%
    );
    animation: rotate 10s linear infinite;
    pointer-events: none;
}

.gold::after, .silver::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 55%
    );
    background-size: 200% 200%;
    animation: shine 8s ease-in-out infinite;
    pointer-events: none;
}

.gold {
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}

.silver {
    background: radial-gradient(ellipse farthest-corner at right bottom, #C0C0C0 0%, #A9A9A9 8%, #808080 30%, #696969 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #E8E8E8 8%, #B8B8B8 25%, #787878 62.5%, #787878 100%);
}

.gold img, .silver img {
    position: relative;
    z-index: 1;
}

.image-placeholder {
    width: 6.25rem;
    height: 6.25rem;
    background-color: #e0e0e0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.25rem;
    color: #757575;
}

.separator {
    width: 100%;
    height: 0.1875rem;
    background: linear-gradient(to right, #ff9ff3, #feca57, #48dbfb, #ff6b6b);
    margin: 0.9375rem 0;
    border-radius: 0.09375rem;
}

.fruit {
    position: absolute;
    font-size: 2.5rem;
}

.back-button {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: #6c5ce7;
    color: white;
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 1.25rem;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease;
}

.back-button:hover {
    background: #5849c2;
}

.navigation-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(108, 92, 231, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.navigation-arrow.left {
    left: 0.625rem;
}

.navigation-arrow.right {
    right: 0.625rem;
}

.coins {
    font-size: 1.375rem;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 0.625rem;
    text-shadow:
        -0.0625rem -0.0625rem 0 #000,
        0.0625rem -0.0625rem 0 #000,
        -0.0625rem 0.0625rem 0 #000,
        0.0625rem 0.0625rem 0 #000,
        0 0 0.625rem rgba(255, 215, 0, 0.7);
    letter-spacing: 0.0625rem;
}

.skin {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 0.1875rem solid #FFD700;
    box-shadow: 0 0 0.9375rem rgba(255, 215, 0, 0.7);
    cursor: pointer;
    transition: transform 0.3s ease;
}

.skin:hover {
    transform: scale(1.1);
}

.skin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.rewards-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.plus-sign {
    font-size: 24px;
    margin: 0 10px;
    color: #FFD700;
    animation: pulse 1.5s infinite;
    text-shadow: 0 0 0.625rem rgba(255, 215, 0, 0.7);
}

.tier.gold .coins {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 0.0625rem rgba(0, 0, 0, 0.5));
}

.enlarged-image-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.enlarged-image-container.visible {
    opacity: 1;
}

.enlarged-image-wrapper {
    width: 21.875rem;
    height: 21.875rem;
    position: relative;
    max-width: 80vw;
    max-height: 80vh;
}

.enlarged-image-wrapper {
    width: 21.875rem;
    height: 21.875rem;
    position: relative;
    max-width: 80vw;
    max-height: 80vh;
}

#enlarged-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0.3125rem solid white;
    border-radius: 50%;
    box-shadow: 0 0 1.25rem rgba(255, 255, 255, 0.5);
}

.close-button-skin {
    position: absolute;
    top: -0.9375rem;
    right: -0.9375rem;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    font-size: 1.25rem;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.close-button-skin:hover {
    background-color: #f0f0f0;
    transform: scale(1.1);
}

.progress-bar-container {
    width: calc(100% - 10rem);
    overflow: hidden;
    position: relative;
    height: 30px;
    margin: 0 auto 20px;
    margin-left: 10rem;
    padding-left: 20px;
    padding-right: 60px;
}

.progress-bar {
    position: absolute;
    left: 28px;
    top: 0;
    height: 100%;
    width: calc(160px * 14);
    background: white;
    border-radius: 15px;
    transition: transform 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #64B5F6, #2196F3);
    border-radius: 15px;
    transition: width 0.3s ease;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0.1) 0%, 
        rgba(255,255,255,0.3) 50%, 
        rgba(255,255,255,0.1) 100%);
    border-radius: 15px;
}

@keyframes shimmer {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.progress-bar::before {
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0px,
        transparent 183px,
        #e100ff13 183px,
        #0000001c 186px
    );
    background-size: calc(160px * 14 / 12) 100%;
    pointer-events: none;
    animation: shimmer 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shine {
    0%, 100% { background-position: 0% 200%; }
    50% { background-position: 200% 0%; }
}

@media screen and (max-width: 48rem) {
    .battle-pass {
        width: 90%;
        padding: 0.9375rem;
    }
    .tier {
        width: 7.5rem;
        height: 10rem;
    }
    .coins {
        font-size: 1.125rem;
    }
    .skin {
        width: 4.375rem;
        height: 4.375rem;
    }
}

@media screen and (max-width: 30rem) {
    .battle-pass {
        width: 95%;
        padding: 0.625rem;
    }
    .tier {
        width: 6.25rem;
        height: 8.75rem;
    }
    .coins {
        font-size: 1rem;
    }
    .skin {
        width: 3.75rem;
        height: 3.75rem;
    }
}    
.locked-battle-pass {
    position: relative;
    opacity: 1.5;
}
.locked-battle-pass > * {
    pointer-events: none;
}

.locked-battle-pass::before {
    content: '🔒';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    z-index: 10;
}

.buy-battle-pass-button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: linear-gradient(45deg, #FFD700, #FFA500);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    animation: glowing 1.5s infinite alternate;
    z-index: 11;
    white-space: nowrap;  
    opacity: 1;  
}

@keyframes glowing {
    from { box-shadow: 0 0 5px #FFD700; }
    to { box-shadow: 0 0 20px #FFD700, 0 0 30px #FFA500; }
}

.modal-buy-battle-pass {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-buy-battle-pass-content {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    color: #ecf0f1;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    max-width: 400px;
    width: 90%;
    position: relative; 
}

.modal-buy-battle-pass h2 {
    color: #FFD700;
    margin-bottom: 20px;
}

.modal-buy-battle-pass p {
    margin-bottom: 30px;
}

.modal-buy-battle-pass-button {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    color: #2c3e50;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.modal-buy-battle-pass-button:hover {
    transform: scale(1.05);
}

.locked-battle-pass .buy-battle-pass-button {
    pointer-events: auto;
    z-index: 12;
}
.fruit-armor-modal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    color: #FFD700;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 1001;
}

.fruit-armor-modal-close-btn:hover {
    transform: scale(1.1);
}

#buyBattlePassModal {
    transition: all 0.5s ease-in-out;
    transform-origin: center;
}

#buyBattlePassModal.closing {
    opacity: 0;
    transform: scale(0.5);
}

.loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.win-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    animation: fadeIn 0.3s ease-out;
}

.win-modal-content {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    margin: 15% auto;
    padding: 20px;
    border-radius: 15px;
    width: 300px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    animation: scaleIn 0.3s ease-out;
}

.win-modal-title {
    color: #2c3e50;
    font-size: 24px;
    margin-bottom: 15px;
}

.win-modal-message {
    color: #34495e;
    font-size: 16px;
    margin-bottom: 20px;
}

.win-modal-reward {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #f39c12;
    margin-bottom: 20px;
}

.reward-image-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}

.win-modal-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plus-sign {
    margin: 0 10px;
    font-size: 24px;
    color: #2c3e50;
}

.win-modal-coins {
    font-size: 24px;
    font-weight: bold;
    color: #f39c12;
}

.win-modal-coins::before {
    content: '🪙 ';
    margin-right: 5px;
}

.win-modal-close {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    color: #2c3e50;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.win-modal-close:hover {
    transform: scale(1.05);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.server-select-button {
  position: fixed;
  left: 20px;
  bottom: 90px; 
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3498db, #2980b9);
  border: none;
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.server-select-button svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transition: all 0.3s ease;
}

.server-select-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4),
              inset 0 -2px 5px rgba(0,0,0,0.2),
              inset 0 2px 5px rgba(255,255,255,0.2);
}

.server-select-button:hover svg {
  transform: scale(1.1);
}

.server-modal {
  background: linear-gradient(145deg, #3498db, #2980b9);
  color: white;
  text-align: center;
}

.server-options {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.server-option {
  padding: 10px 20px;
  border: 2px solid white;
  background: transparent;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.server-option:hover, .server-option.selected {
  background: white;
  color: #3498db;
}

#saveServerChoice {
  background: white;
  color: #3498db;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#saveServerChoice:hover {
  background: #f1c40f;
  color: white;
}

.x9k_quantum_trigger {
    position: fixed;
    bottom: 20px;
    left: 100px;
    width: 60px;
    height: 60px;
    background: rgba(41, 98, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(41, 98, 255, 0.3);
    border-radius: 18px;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 20px rgba(41, 98, 255, 0.2);
    overflow: hidden;
    display: none; 

}

.x9k_quantum_trigger i {
    background: linear-gradient(135deg, #2962ff, #448aff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(41, 98, 255, 0.5));
    position: relative;
    z-index: 2;
}

.x9k_quantum_trigger:hover {
    transform: translateY(-5px);
    background: rgba(41, 98, 255, 0.15);
    border-color: #2962ff;
    box-shadow: 0 10px 30px rgba(41, 98, 255, 0.3);
}

.x9k_quantum_trigger::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(41, 98, 255, 0.1), 
        rgba(66, 165, 245, 0.1)
    );
    animation: shine 2s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%);
    }
    50% {
        transform: translateX(100%) translateY(100%);
    }
    100% {
        transform: translateX(-100%) translateY(-100%);
    }
}

.x9k_quantum_trigger::after {
    content: "DISPLAY";
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: bold;
    color: #2962ff;
    text-shadow: 0 0 10px rgba(41, 98, 255, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.x9k_quantum_trigger:hover::after {
    opacity: 1;
}
.x9k_nexus_panel {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1) !important;
    width: 400px;
    max-height: 500px;
    background: var(--x9k_glass);
    border: 1px solid rgba(0, 102, 255, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 50px rgba(0, 102, 255, 0.15);
    animation: x9k_panel_reveal 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    zoom: none !important;
}

@keyframes x9k_panel_reveal {
    from {
        transform: translate(-50%, -45%) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.x9k_nexus_content {
    padding: 20px;
    position: relative;
}

.x9k_void_close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: var(--x9k_primary);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.x9k_void_close:hover {
    transform: rotate(90deg);
    color: var(--x9k_accent);
}

.x9k_prism_title {
    text-align: center;
    margin: 0 0 20px 0;
    background: linear-gradient(135deg, var(--x9k_primary), var(--x9k_accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 2px;
    filter: drop-shadow(0 0 10px rgba(0, 102, 255, 0.2));
}

.x9k_matrix_options {
    margin-top: 15px;
}

.x9k_matrix_options label {
    display: block;
    margin-bottom: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 102, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s ease;
}

.x9k_matrix_options label:hover {
    background: var(--x9k_glow);
    transform: translateX(10px);
    border-color: var(--x9k_primary);
    box-shadow: 0 0 30px rgba(77, 43, 255, 0.1);
}

.x9k_matrix_options input[type="radio"] {
    display: none;
}

.x9k_quantum_radio {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    border: 2px solid var(--x9k_primary);
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    transition: all 0.3s ease;
}

.x9k_matrix_options input[type="radio"]:checked + label {
    background: var(--x9k_glow);
    border-color: var(--x9k_primary);
    box-shadow: 0 0 30px rgba(77, 43, 255, 0.2);
}

.x9k_matrix_options input[type="radio"]:checked + label .x9k_quantum_radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--x9k_primary);
    border-radius: 50%;
    animation: x9k_radio_pulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes x9k_radio_pulse {
    from {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.x9k_void_button {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 20px;
    background: linear-gradient(135deg, var(--x9k_primary), var(--x9k_secondary));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.x9k_void_button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.2);
}

.x9k_void_button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    animation: x9k_energy_flow 2s linear infinite;
}

@keyframes x9k_energy_flow {
    from {
        transform: rotate(45deg) translateX(-100%);
    }
    to {
        transform: rotate(45deg) translateX(100%);
    }
}

.x9k_quality_text {
    display: inline-block;
    margin-left: 12px;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, #333, var(--x9k_primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.x9k_quality_desc {
    display: block;
    margin-top: 4px;
    margin-left: 44px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.5px;
} 

.custom-notification8351 {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification-content9173 {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    width: 80%;
    max-width: 500px;
    text-align: left;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.language-selector4827 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.flag-icon {
    margin: 0 5px 5px 0;
    cursor: pointer;
    transition: transform 0.2s;
}

.flag-fixed {
    order: -1; 
    margin-right: 10px; 
}

.flag-icon:hover {
    transform: scale(1.2);
}

.flag-icon:hover {
    transform: scale(1.2);
}

.flag-icon.selected {
    border: 2px solid #4CAF50;
    border-radius: 2px;
}

.notice-title3847 {
    color: #ff6600;
    font-size: 22px;
    text-align: center;
    margin-bottom: 20px;
}

.problem-description2956, .solution-steps4721, .additional-info8103 {
    margin-bottom: 20px;
}

.solution-steps4721 h3, .additional-info8103 p:first-child {
    color: #4a4a4a;
    font-size: 16px;
    margin-bottom: 10px;
}

ol {
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
    font-size: 14px;
}

.custom-button5628 {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    margin: 20px auto 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s;
}

.custom-button5628:hover {
    background-color: #45a049;
}

.warning__flags-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 1010;
}

.warning__language-flag {
    width: 30px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.2s;
    opacity: 0.7;
}

.warning__language-flag:hover {
    transform: scale(1.1);
    opacity: 1;
}

.warning__language-flag.active {
    opacity: 1;
    border: 2px solid #4CAF50;
}

#warning-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #333;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 1000;
    min-width: 400px;
    text-align: center;
    font-family: Arial, sans-serif;
}

.warning__content {
    margin-top: 40px;  
    padding: 0 10px;
}

.warning__icon {
    display: block;
    margin: 0 auto 10px;
    width: 40px;
    height: 40px;
    color: #D8000C;
}

.warning__text {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.warning__close-btn {
    background-color: #4CAF50;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: not-allowed;
    margin-top: 10px;
    opacity: 0.7;
    font-size: 16px;
}

.warning__close-btn.active {
    cursor: pointer;
    opacity: 1;
}

.warning__timer {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

#policyReminder {
    position: fixed; 
    top: 0; 
    left: 50%;
    transform: translateX(-50%); 
    background-color: #f0f0f0;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
    font-size: 16px;
    text-align: center;
}

#policyReminder a {
    color: #007bff;
    text-decoration: underline;
}
.primary-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    transition: background-color 0.2s;
}

.primary-button:hover {
    background-color: #0056b3;
}
.help-icon-container {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    background: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.6);
    z-index: 1001;
}

.help-icon {
    font-size: 2rem;
    color: black;
    font-weight: bold;
}

.help-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1002;
    justify-content: center;
    align-items: center;
}

.help-modal-content {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
}

.help-modal-content h2 {
    margin-bottom: 1rem;
}

.help-modal-content p {
    margin-bottom: 2rem;
}

.close-help-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #ffd700;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.close-help-modal:hover {
    transform: scale(1.1);
}
.rT2wL8sY_icon {
  position: fixed;
  top: 20px;
  left: 100px;
  width: 60px;  
  height: 60px;  
  background-color: #FFD700;  
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.rT2wL8sY_icon i {
  color: #333;  
  font-size: 28px;  
}

.rT2wL8sY_icon:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.5);  
}

.eZ9yA3xD_popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;  
  height: 400px;  
  background-color: #f8f9fa;
  border-radius: 15px;  
  z-index: 1001;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: auto;

  scrollbar-width: thin;
  scrollbar-color: #FFD700 #e0e0e0;
}

.eZ9yA3xD_popup::-webkit-scrollbar {
  width: 12px; 
}

.eZ9yA3xD_popup::-webkit-scrollbar-track {
  background: #e0e0e0; 
}

.eZ9yA3xD_popup::-webkit-scrollbar-thumb {
  background-color: #FFD700; 
  border-radius: 6px;
  border: 3px solid #e0e0e0; 
}

.gM5tR1wS_content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: 30px;  
}

.hP4mJ8nK_text {
  flex: 1;
  padding: 0 20px;
}

.hP4mJ8nK_text h2 {
  color: #333;
  margin-bottom: 20px;
}

.hP4mJ8nK_text h3 {
  color: #666;
  margin: 15px 0 10px 0;
}

.hP4mJ8nK_text p, .hP4mJ8nK_text li {
  color: #555;
  line-height: 1.6;
  margin-bottom: 8px;
}

.hP4mJ8nK_text ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.instructions-header {
  position: sticky;
  top: 0;
  padding: 20px;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1002;
}

.instructions-header h2 {
  margin: 0;
  font-size: 24px;
}

.kL9mR4tP_close_button {
  position: relative;
  top: auto;
  right: auto;
  width: 30px;
  height: 30px;
  background-color: #FFD700;
  color: #333;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.kL9mR4tP_close_button:hover {
  background-color: #FFA500;
  color: white;
}

#uP8qL2nJ_arrow_left, #dC3fG9hB_arrow_right {
  display: none;
}

</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<body>  

  <div id="policyReminder" style="display: none;">
    Don't forget to review our <a href="/privacy-policy" target="_blank">Privacy Policy & Terms of Service</a> periodically.
  </div>

  <div id="warning-message" style="display: none;">
    <div class="warning__flags-container">
        <span class="warning__language-flag flag-icon flag-icon-de" data-lang="de" title="Deutsch"></span>

        <span class="warning__language-flag flag-icon flag-icon-fr" data-lang="fr" title="Français"></span>
        <span class="warning__language-flag flag-icon flag-icon-pt" data-lang="pt" title="Português"></span>
        <span class="warning__language-flag flag-icon flag-icon-jp" data-lang="ja" title="日本語"></span>
        <span class="warning__language-flag flag-icon flag-icon-gb" data-lang="en" title="English"></span>
        <span class="warning__language-flag flag-icon flag-icon-cn" data-lang="zh" title="中文"></span>
        <span class="warning__language-flag flag-icon flag-icon-in" data-lang="hi" title="हिंदी"></span>
        <span class="warning__language-flag flag-icon flag-icon-es" data-lang="es" title="Español"></span>
        <span class="warning__language-flag flag-icon flag-icon-ru" data-lang="ru" title="Русский"></span>
        <span class="warning__language-flag flag-icon flag-icon-ps" data-lang="ar" title="العربية"></span>

    </div>
    <div class="warning__content">
        <svg class="warning__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="currentColor" d="M1 21h22L12 2 1 21z"/>
            <text x="12" y="16" fill="#ffffff" font-size="12" font-weight="bold" text-anchor="middle" alignment-baseline="middle">!</text>
        </svg>
        <p id="warning-text" class="warning__text"></p>
        <div class="warning__timer" id="timer">Please wait 10 seconds...</div>
        <button class="warning__close-btn" id="close-buttonn" disabled>Close</button>
    </div>
</div>

  <button class="x9k_quantum_trigger" id="x9k_trigger">
    <i class="fas fa-tv"></i> 
</button>

<div class="x9k_nexus_panel" id="x9k_panel">
    <div class="x9k_nexus_content">
        <span class="x9k_void_close" id="x9k_close">&times;</span>
        <h2 class="x9k_prism_title">Graphics Settings</h2>
        <div class="x9k_matrix_options">

            <input type="radio" id="x9k_low" name="x9k_graphics" value="low">
            <label for="x9k_low">
                <span class="x9k_quantum_radio"></span>
                <span class="x9k_quality_text">LOW</span>
                <span class="x9k_quality_desc">Balanced performance settings</span>
            </label>

            <input type="radio" id="x9k_high" name="x9k_graphics" value="high">
            <label for="x9k_high">
                <span class="x9k_quantum_radio"></span>
                <span class="x9k_quality_text">HIGH</span>
                <span class="x9k_quality_desc">Enhanced visual quality</span>
            </label>

        </div>
        <button class="x9k_void_button">APPLY CHANGES</button>
    </div>
</div>

<div id="custom-alert-x9z7" class="custom-alert-container-y2k8">
    <div class="custom-alert-content-m3p5">
      <div class="custom-alert-icon-f6l2">⚠️</div>
      <p id="custom-alert-message-q1w9"></p>
      <button id="custom-alert-close-b4n7">OK</button>
    </div>
  </div>
  <div class="game-container">
    <div class="circle-button" id="selectedHouseImage" style="display: none;">
      <div class="plus-button" id="plusButton" style="display: none;" onclick="showPopup()">+</div>
    </div>
    <input type="text" id="playerName" placeholder="Enter your name" autocomplete="off" maxlength="12" disabled style="display: none;">
    <button id="startButton" onclick="startGame()" style="display: none;">Start Now</button>

        <div id="g_id_onload" class="fixed-element"
        data-client_id="1037678962710-l4tjhro91vb3u6khuomgtagkeogue1tv.apps.googleusercontent.com"
        data-context="signin"
        data-ux_mode="popup"
        data-callback="handleCredentialResponse"
        data-auto_prompt="false">
   </div>
   <h1 id="gameTitle" style="display: none;">Splitshot</h1>
   <p id="privacyAgreement" style="font-size: 25px; font-weight: bold; margin-bottom: 10px; display: none;">By signing in, you agree to our <a href="/privacy-policy" target="_blank" style="color: #007bff; text-decoration: underline;">Privacy Policy & Terms of Service</a>.</p>
   <div id="loginFrame" style="display: none;">
    <p style="font-family: 'Roboto', sans-serif; font-weight: bold;">Join the fun! Sign in to start playing.</p>
    <div id="googleSignInButton">
        <div class="g_id_signin"
             data-type="standard"
             data-shape="pill"
             data-theme="outline"
             data-text="signin_with"
             data-size="large"
             data-logo_alignment="left">
        </div>
    </div>
    <button id="emailSignUpButton" class="email-sign-in-btn">
      <i class="fas fa-user-plus"></i>
      <span class="button-text">Sign Up with Email</span>
    </button>
    <button id="emailSignInButton" class="email-sign-in-btn">
      <i class="fas fa-sign-in-alt"></i>
      <span class="button-text">Sign In with Email</span>
    </button>
  </div>
         <button id="settingsButton" class="settings-button" onclick="showSettings()" style="display: none;">
        <svg viewBox="0 0 24 24" width="24" height="24">
        <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
      </svg>
    </button>

    <div id="settingsModal" class="modal">
      <div class="modal-content">
          <button class="close-button" onclick="hideSettings()"></button>
          <div class="settings-tabs">
              <button class="tab-button active" onclick="showTab('keyBindings')">Key Bindings</button>
              <button class="tab-button" onclick="showTab('accountSettings')">Account Settings</button>
          </div>
          <div id="keyBindingsTab" class="tab-content">
              <h2>Key Bindings</h2>
              <div id="keyBindings"></div>
              <button onclick="saveKeyBindings()" class="save-button">Save Changes</button>
          </div>
          <div id="accountSettingsTab" class="tab-content" style="display: none;">
              <h2>Account Settings</h2>
    <button id="requestDataBtn" class="primary-button">Request My Data</button>
    <button id="deleteAccountBtn" class="danger-button">Delete Account</button>
          </div>
      </div>
  </div>
  <div id="deleteAccountConfirmation" class="confirmation-dialog">
      <div class="confirmation-content">
          <h2>Delete Account</h2>
          <p>Are you sure you want to delete your account? This action cannot be undone.</p>
          <p>Typing "confirm" will permanently delete your account and all associated data, including purchased items and progress.</p>
          <p><a href="/privacy-policy" target="_blank">Learn more in our Privacy Policy</a></p>

          <button id="sendVerificationCodeBtn">Send Verification Code</button>

          <p>Enter the verification code sent to your email:</p>
          <input type="text" id="verificationCodeInput" placeholder="Enter Verification Code">

          <p>Type "confirm" to delete your account:</p>
          <input type="text" id="confirmDeleteInput" placeholder="Type 'confirm'">

          <div class="confirmation-buttons">
              <button id="confirmDeleteBtn" disabled>Delete Account</button>
              <button id="cancelDeleteBtn">Cancel</button>
          </div>
      </div>
  </div>

  <div class="popup" id="popup">
      <div class="popup-content">
          <button class="close-popup" onclick="hidePopup()">
              <span class="close-icon"></span>
          </button>
          <div class="house-tab-buttons">
              <button class="house-tab-button active" onclick="showTab('available')">Available Houses</button>
              <button class="house-tab-button" onclick="showTab('purchased')">Purchased Houses</button>
          </div>
          <div id="availableHouses" class="cards-container">
              <button class="nav-button left" onclick="navigateCards(-1)">&#8592;</button>
              <div class="card-row" id="cardRow">
              </div>
              <button class="nav-button right" onclick="navigateCards(1)">&#8594;</button>
          </div>
          <div id="purchasedHouses" class="cards-container" style="display: none;">
              <button class="nav-button left" onclick="navigatePurchasedCards(-1)">&#8592;</button>
              <div class="card-row" id="purchasedCardRow">
              </div>
              <button class="nav-button right" onclick="navigatePurchasedCards(1)">&#8594;</button>
          </div>
      </div>
  </div>      

<div id="emailSignUpModal" class="auth-modal">
  <div class="auth-modal-content">
    <span class="auth-modal-close">&times;</span>
    <h2>Join Us</h2>
    <form id="emailSignUpForm">
      <div class="input-group">
        <label for="signUpNameInput">Name</label>
        <input type="text" id="signUpNameInput" required>
      </div>
      <div class="input-group">
        <label for="signUpEmailInput">Email</label>
        <input type="email" id="signUpEmailInput" required>
      </div>
      <div class="input-group">
        <label for="signUpPasswordInput">Password</label>
        <input type="password" id="signUpPasswordInput" required>
        <p class="password-requirements">
          Your password must be at least 8 characters long and include:
          <br>• One uppercase letter (A-Z)
          <br>• One lowercase letter (a-z)
          <br>• One number (0-9)
          <br>• One special character (!@#$%^&*)
        </p>
      </div>
      <button type="submit" class="auth-button">
        <span class="loading-spinner" style="display: none;"></span>
        <span class="button-text">Sign Up</span>
      </button>
    </form>
  </div>
</div>

<div id="emailSignInModal" class="auth-modal">
  <div class="auth-modal-content">
    <span class="auth-modal-close">&times;</span>
    <h2>Sign In</h2>
    <form id="emailSignInForm">
      <div class="input-group">
        <label for="signInEmailInput">Email</label>
        <input type="email" id="signInEmailInput" required>
      </div>
      <div class="input-group">
        <label for="signInPasswordInput">Password</label>
        <input type="password" id="signInPasswordInput" required>
      </div>
      <button type="submit" class="auth-button">
        <span class="loading-spinner" style="display: none;"></span>
        <span class="button-text">Sign In</span>
      </button>
    </form>
    <p class="forgot-password">Forgot your password? <a href="#" id="forgotPasswordLink">Click here</a></p>
  </div>
</div>

<div id="verificationModal" class="auth-modal">
  <div class="auth-modal-content">
    <h2>Verify Your Email</h2>
    <p>We've sent a verification code to your email. Please enter it below:</p>
    <form id="verificationForm">
      <div class="input-group">
        <label for="verificationCode">Verification Code</label>
        <input type="text" id="verificationCode" required>
      </div>
      <button type="submit" class="auth-button">
        <span class="loading-spinner" style="display: none;"></span>
        <span class="button-text">Verify</span>
      </button>
    </form>
  </div>
</div>

<div id="forgotPasswordModal" class="auth-modal">
  <div class="auth-modal-content">
    <span class="auth-modal-close">&times;</span>
    <h2>Reset Password</h2>
    <form id="forgotPasswordForm">
      <div class="input-group">
        <label for="forgotPasswordEmail">Email</label>
        <input type="email" id="forgotPasswordEmail" required>
      </div>
      <button type="submit" class="auth-button">
        <span class="loading-spinner" style="display: none;"></span>
        <span class="button-text">Send Verification Code</span>
      </button>
    </form>
  </div>
</div>

<div id="resetPasswordModal" class="auth-modal">
  <div class="auth-modal-content">
    <h2>Reset Password</h2>
    <form id="resetPasswordForm">
      <div class="input-group">
        <label for="newPassword">New Password</label>
        <input type="password" id="newPassword" required>
        <p class="password-requirements">
          Your password must be at least 8 characters long and include:
          <br>• One uppercase letter (A-Z)
          <br>• One lowercase letter (a-z)
          <br>• One number (0-9)
          <br>• One special character (!@#$%^&*)
        </p>
      </div>
      <div class="input-group">
        <label for="confirmNewPassword">Confirm New Password</label>
        <input type="password" id="confirmNewPassword" required>
      </div>
      <button type="submit" class="auth-button">
        <span class="loading-spinner" style="display: none;"></span>
        <span class="button-text">Change Password</span>
      </button>
    </form>
  </div>
</div>
    <div id="successModal" class="modal">
      <div class="modal-content success-modal">
        <div class="success-icon">✓</div>
        <h2>Settings Saved!</h2>
        <p>Your key bindings have been updated with magical precision.</p>
        <button id="okButton" class="ok-button">OK</button>
      </div>
    </div>
    <div id="userInfo" class="fixed-element" style="display: none;">
      <img id="userImage" src="" alt="User Image" onclick="showUserPopup()">
      <div class="level-container">
        <div class="level-star">
          <svg viewBox="0 0 100 100">
            <path class="star-shape" />
          </svg>
          <span id="userLevel"></span>
                                        </div>
        <div class="level-bar-container">
          <div class="level-bar">
            <div id="levelProgress" class="level-progress"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="errorModal" class="error-modal">
      <div class="error-modal-content">
        <h2>Error</h2>
        <p id="errorMessage"></p>
        <button id="errorOkButton" class="auth-button">OK</button>
      </div>
    </div>

    <div id="xK7mN9pQ_icon" class="rT2wL8sY_icon">
        <i class="fas fa-question"></i>
    </div>

    <div id="bF4jH6vC_popup" class="eZ9yA3xD_popup">
        <div class="instructions-header">
            <h2>Game Instructions</h2>
            <div class="kL9mR4tP_close_button">×</div>
        </div>
        <div class="gM5tR1wS_content">
            <div class="hP4mJ8nK_text">
                <h2>Part 1: Core Game Mechanics - Mass and Health System</h2>
                <h3>Basic Principle:</h3>
                <p>The bigger your cell's mass, the more health it has. Your maximum health can range from 100 to 600, depending on your total score across all your cells.</p>

                <h3>Macro Usage Effect:</h3>
                <ul>
                    <li>When you use macro (rapid size changes), your health doesn't drop immediately when you shrink.</li>
                    <li>Your maximum health stays high, even if you temporarily become smaller.</li>
                </ul>

                <h3>Important Exception:</h3>
                <p>If you get hit by a bullet while small during macro use:</p>
                <ul>
                    <li>Your health and maximum health will instantly adjust to your current smaller size.</li>
                    <li>This only happens if you take damage, not just from shrinking.</li>
                    <li>If you grow back before getting hit, your health stays high.</li>
                </ul>

                <h3>Example:</h3>
                <ul>
                    <li>You're size 100 with 1000 health.</li>
                    <li>You use macro and shrink to size 50.</li>
                    <li>Your health stays at 1000.</li>
                    <li>You get hit by a bullet at size 50.</li>
                    <li>Your health drops to match size 50's health.</li>
                </ul>

                <h2>Part 2: Shooting, Damage, and Eliminations</h2>
                <h3>Shooting Source:</h3>
                <p>Only your largest cell can shoot. All your weapons fire from your biggest cell.</p>

                <h3>Damage Target and Headshots:</h3>
                <p>Your largest cell is the primary target for damage. When your largest cell's radius is larger than approximately 70, two arcs appear around it. Hitting these arcs results in a headshot, dealing more damage than a regular hit. The arcs move around the cell, requiring skillful aiming. The exact radius for the arcs to appear isn't shown in-game—it's up to you to discover!</p>

                <h3>Eliminations, Treasure, and Health Recovery:</h3>
                <p>When you reduce an opponent's health to zero, you eliminate them. You immediately gain some of their mass, distributed among your cells, and a portion of their maximum health. The exact amount depends on several factors and may change. The eliminated player also turns into treasure, which appears near their place of death. Any player, not just the one who scored the elimination, can collect this treasure for additional mass and health. The size and health benefits from collecting the treasure are subject to various game factors.</p>

                <h2>Part 3: Item Collection, Usage, Special Items, and Scoring</h2>
                <h3>Collecting Items:</h3>
                <p>Every time you collect an item — whether it's missiles, wood, ammo, health packs, or weapons — you'll get a little bigger!  So grab everything you can!</p>

                <h3>Collectible Item Limits:</h3>
                <p>While collecting items makes you grow, your inventory can only hold so much:</p>
                <ul>
                    <li><strong>Health:</strong> You can only hold a maximum of 3 collectible health items. This limit might change.</li>
                    <li><strong>Wood and Missiles:</strong>  There's a limit on these too, but you'll have to find out what it is!</li>
                    <li><strong>Other Weapons:</strong> Each weapon has its own damage, speed, and reload. Experiment to learn more!</li>
                    <li><strong>General Inventory Limit:</strong> You can carry up to 6 collectible items (weapons, missiles, health). Once full, only wood, missiles, and health will still be added to your inventory. </li>
                </ul>

                <h3>Ammo Collection:</h3>
                <p>You can collect unlimited ammo for a weapon once it's in your inventory. Ammo collected *before* you have the weapon won't be added later.</p>

                <h3>Weapon Usage and Ammo:</h3>
                <p>Switching away from a weapon or removing it from your inventory means losing all its ammo.</p>

                <h3>Collectible Health Usage:</h3>
                <p>Using a health item heals you over 4 seconds. Splitting, shooting, using macro, or switching weapons will interrupt this.</p>

                <h3>Collectible Wood Usage:</h3>
                <p>Wood is placed in front of your largest cell and scales with its size, providing protection.</p>

                 <h3>Different Weapons</h3>
                 <p> All weapons have their own specific system, damage, speed, and reload systems, it's for you to discover</p>

                <h3>The Purple Bomb (Virus):</h3>
                <p>Colliding with the purple bomb (virus) costs you 200 health. You can push the virus with the colorful weapon and the fast weapon. If you push the virus toward an opponent and they collide with it within 2 seconds of your last hit, you get credit for the elimination. This timing may change in the future. Remember, these game rules are subject to change based on various factors and player feedback.</p>

                <h3>Scoring and Experience (XP):</h3>
                <p>Your score is based on your performance in the game. You earn XP for dealing damage (more for headshots!), getting eliminations, and colliding with other items. The exact calculations might be tweaked as we fine-tune the game, especially during this beta phase. Keep in mind there might be some unexpected results as we're still testing things out!</p>

                <h3>A Word on Sportsmanship:</h3>
                <p>While there's no in-game penalty, it's considered unsporting to completely devour a smaller player with a split attack when they pose no real threat. Focus on skilled combat and using your weapons effectively. Let's keep the game fun and fair for everyone!</p>

            </div>
            <div id="uP8qL2nJ_arrow_left" class="iX6yO7mK_arrow">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div id="dC3fG9hB_arrow_right" class="iX6yO7mK_arrow">
                <i class="fas fa-arrow-right"></i>
            </div>
        </div>
    </div>

    <div id="customSuccessModal" class="custom-success-modal">
      <div class="custom-success-modal-content">
        <h2>Success</h2>
        <p id="successMessage"></p>
        <button id="successOkButton" class="auth-button">OK</button>
      </div>
    </div>

    <div class="icon-container" id="openBattlePass" style="display: none;">
      <img src="img/battlepass.webp" alt="Battle Pass">
      <div id="battlePassTimer" style="color: black; font-size: 1rem;"></div> </div>

      <div class="help-icon-container" id="helpIcon" style="display: none;">
        <span class="help-icon">?</span>
      </div>
<div class="help-modal" id="helpModal" style="display: none;">
  <div class="help-modal-content">
    <button class="close-help-modal" id="closeHelpModal">&times;</button>
    <h2>Battle Pass System</h2>
    <p>To unlock each column of cards, you need 3000 XP. Players who have purchased the Battle Pass can claim two cards per column, while players who haven't purchased the Battle Pass can claim one card per column. There are 12 columns in total, meaning you need 36,000 XP to unlock all columns.</p>
  </div>
</div>

    <div class="battle-pass-container" id="battlePassContainer">
      <div class="battle-pass" id="battlePass">
          <button class="back-button" id="closeBattlePass">Back</button>
          <div class="progress-bar-container">
              <div class="progress-bar">
                  <div class="progress-fill"></div>
              </div>
          </div>            
      </div>
      <div class="fruit" style="top: 5%; left: 5%;">🍎</div>
      <div class="fruit" style="top: 10%; right: 5%;">🍊</div>
      <div class="fruit" style="bottom: 5%; left: 10%;">🍇</div>
      <div class="fruit" style="bottom: 10%; right: 10%;">🍓</div>
  </div>

  <div id="win-modal" class="win-modal">
    <div class="win-modal-content">
        <h2 class="win-modal-title">Congratulations!</h2>
        <p class="win-modal-message"></p>
        <div class="win-modal-reward">
            <div class="reward-image-container">
                <img id="win-modal-image" class="win-modal-image" src="" alt="Reward">
            </div>
            <span class="plus-sign">+</span>
            <span class="win-modal-coins"></span>
        </div>
        <button class="win-modal-close">Claim Reward</button>
    </div>
</div>
  <div class="modal-buy-battle-pass" id="buyBattlePassModal">
      <div class="modal-buy-battle-pass-content">
          <button class="fruit-armor-modal-close-btn" id="closeBattlePassModal">&times;</button>
          <h2>Unlock Season 1 Battle Pass!</h2>
          <p>Get exclusive Armor skins and amazing rewards!</p>
          <button class="modal-buy-battle-pass-button" onclick="purchaseBattlePass()">
            Buy for 12000 Coins
          </button>
      </div>
  </div>

  <div id="enlarged-image-container" class="enlarged-image-container">
      <div class="enlarged-image-wrapper">
          <img id="enlarged-image" src="" alt="Enlarged Skin">
          <button id="close-enlarged-image" class="close-button-skin">&times;</button>
      </div>
  </div>

  <div id="levelUpModal" class="level-up-modal" style="display: none;">
    <div class="level-up-content">
      <h1 class="level-up-title">Level Up!</h1>
      <p id="levelsGained"></p>
      <p class="level-up-message">Congratulations! You've reached level <span id="newLevel"></span>!</p>
      <p class="coins-added"><span class="coin-icon">🪙</span> <span id="coinsAdded"></span> coins added!</p>
      <button class="level-up-button" onclick="closeLevelUpModal()">Awesome!</button>
    </div>
  </div>

  <button id="serverSelectButton" class="server-select-button" style="display: none;">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 12.55a11 11 0 0 1 14.08 0"></path>
      <path d="M1.42 9a16 16 0 0 1 21.16 0"></path>
      <path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path>
      <line x1="12" y1="20" x2="12" y2="20"></line>
    </svg>
  </button>

  <div id="modal-server" class="modal">
    <div class="modal-content server-modal">
      <h2>Select Server</h2>
      <div class="server-options">
        <button id="euServer" class="server-option">European Server</button>
        <button id="usServer" class="server-option">American Server</button>
      </div>
      <button id="saveServerChoice" class="save-button">Save Choice</button>
    </div>
  </div>

  <div id="serverSuccessModal" class="modal">
    <div class="modal-content success-modal">
      <div class="success-icon">✓</div>
      <h2>Server Selected!</h2>
      <p>Your gaming experience is about to level up.</p>
      <button id="serverOkButton" class="ok-button">OK</button>
    </div>
  </div>

    <div id="userPopup" class="user-popup">
      <span class="close-popup-user" onclick="hideUserPopup()">&times;</span>
      <div class="user-info-header">
        <img id="popupUserImage" src="" alt="User Image">
        <h2 id="popupUserName"></h2>
        <div id="popupLevelInfo">
          <div class="level-star">
            <svg viewBox="0 0 100 100">
              <path class="star-shape" />
            </svg>
            <span id="popupUserLevel"></span>
          </div>
          <div class="level-bar">
            <div id="popupLevelProgress" class="level-progress"></div>
          </div>
        </div>
        <p>XP: <span id="popupUserXP"></span> / <span id="popupUserXPForNextLevel"></span></p>
      </div>
      <div class="user-stats-container">
        <div class="stats-column">
          <h3>Combat Stats</h3>
          <p>Total Kills: <span id="popupTotalKills"></span></p>
          <p>Max Kills Per Game: <span id="popupMaxKillsPerGame"></span></p>
          <p>Total Normal Damage: <span id="popupTotalNormalDamage"></span></p>
          <p>Total Headshot Damage: <span id="popupTotalHeadshotDamage"></span></p>
        </div>
        <div class="stats-column">
          <h3>Game Stats</h3>
          <p>Games Played: <span id="popupGamesPlayed"></span></p>
          <p>Total Play Time: <span id="popupTotalPlayTime"></span></p>
          <p>Longest Game Time: <span id="popupLongestGameTime"></span></p>
          <p>Total Collisions: <span id="popupTotalCollisions"></span></p>
        </div>
        <div class="stats-column">
          <h3>Accuracy Stats</h3>
          <p>Headshot Count: <span id="popupHeadshotCount"></span></p>
          <p>Normal Hit Count: <span id="popupNormalHitCount"></span></p>
          <p>K/D Ratio: <span id="popupKDRatio"></span></p>
          <p>Headshot Percentage: <span id="popupHeadshotPercentage"></span></p>
        </div>
      </div>

      <button id="popupLogoutButton" onclick="handleSignOut()">Sign Out</button>
    </div>

    <div id="playerStatsPopup" class="player-stats-popup">
    </div>

    <button id="leaderboardButton" class="leaderboard-button" onclick="showLeaderboard()" style="display: none;">
        🏆
      </button>

      <div id="leaderboardModal" class="leaderboard-modal">
        <div class="leaderboard-content">
          <div class="leaderboard-header">
            <h2>Leaderboard</h2>
            <button class="close-leaderboard" onclick="hideLeaderboard()">×</button>
          </div>
          <div class="leaderboard-list-container">
            <div id="leaderboardList"></div>
          </div>
        </div>
      </div>   
      <div id="gameAccessNotification7492" class="custom-notification8351" style="display: none;">
        <div class="notification-content9173">
            <div class="language-selector4827">
              <span class="flag-icon flag-icon-ps" data-lang="ar"></span>
              <span class="flag-icon flag-icon-us" data-lang="en"></span>
                <span class="flag-icon flag-icon-fr" data-lang="fr"></span>
                <span class="flag-icon flag-icon-de" data-lang="de"></span>
                <span class="flag-icon flag-icon-es" data-lang="es"></span>
                <span class="flag-icon flag-icon-cn" data-lang="zh"></span>
                <span class="flag-icon flag-icon-jp" data-lang="ja"></span>
                <span class="flag-icon flag-icon-ru" data-lang="ru"></span>
                <span class="flag-icon flag-icon-it" data-lang="it"></span>
                <span class="flag-icon flag-icon-br" data-lang="pt"></span>
            </div>
            <h2 class="notice-title3847">⚠️ <span class="translate" data-key="title"></span> ⚠️</h2>
            <div class="problem-description2956">
                <p class="translate" data-key="problem1"></p>
                <p class="translate" data-key="problem2"></p>
            </div>
            <div class="solution-steps4721">
                <h3 class="translate" data-key="howToFix"></h3>
                <ol>
                    <li class="translate" data-key="step1"></li>
                    <li class="translate" data-key="step2"></li>
                    <li class="translate" data-key="step3"></li>
                </ol>
            </div>
            <div class="additional-info8103">
                <p class="translate" data-key="stillNotWorking"></p>
                <p class="translate" data-key="additionalInfo"></p>
            </div>
            <div class="custom-button5628" onclick="dismissNotification5628()">
                <span class="translate" data-key="understand"></span>
            </div>
        </div>
    </div>

      <div id="coinCounter" class="coin-counter-pro" style="display: none;">
        <div class="coin-icon">🪙</div>
        <span id="coinAmount">0</span>
        <button id="buyCoinsBtn" class="buy-coins-btn">+</button>
      </div>

      <div id="purchaseModal" class="purchase-modal">
        <div class="purchase-modal-content">
          <span class="close-purchase-modal">&times;</span>
          <h2>🪙 Buy Coins 🪙</h2>
          <div class="coin-packages-container">
            <button class="nav-button prev">&#10094;</button>
            <div class="coin-packages">
              <div class="coin-package" style="--package-color: #FFD700;">
                <h3>Starter</h3>
                <div class="coin-icon-large">🪙</div>
                <p class="coin-amount">1,000</p>
                <p class="price">$0.99</p>
                <button class="buy-package" data-package="starter">Buy</button>
              </div>
              <div class="coin-package" style="--package-color: #C0C0C0;">
                <h3>Popular</h3>
                <div class="coin-icon-large">🪙🪙</div>
                <p class="coin-amount">5,500</p>
                <p class="price">$4.99</p>
                <p class="savings">-10%</p>
                <button class="buy-package" data-package="popular">Buy</button>
              </div>
              <div class="coin-package best-value" style="--package-color: #FFA500;">
                <h3>Value</h3>
                <div class="coin-icon-large">🪙🪙🪙</div>
                <p class="coin-amount">12,000</p>
                <p class="price">$9.99</p>
                <p class="savings">-20%</p>
                <button class="buy-package" data-package="value">Buy</button>
              </div>
              <div class="coin-package" style="--package-color: #4169E1;">
                <h3>Mega</h3>
                <div class="coin-icon-large">🪙🪙🪙🪙</div>
                <p class="coin-amount">26,000</p>
                <p class="price">$19.99</p>
                <p class="savings">-30%</p>
                <button class="buy-package" data-package="mega">Buy</button>
              </div>
              <div class="coin-package" style="--package-color: #8A2BE2;">
                <h3>Ultra</h3>
                <div class="coin-icon-large">🪙🪙🪙🪙🪙</div>
                <p class="coin-amount">70,000</p>
                <p class="price">$49.99</p>
                <p class="savings">-40%</p>
                <button class="buy-package" data-package="ultra">Buy</button>
              </div>
              <div class="coin-package" style="--package-color: #FF4500;">
                <h3>Legendary</h3>
                <div class="coin-icon-large">🪙🪙🪙🪙🪙🪙</div>
                <p class="coin-amount">150,000</p>
                <p class="price">$99.99</p>
                <p class="savings">-50%</p>
                <button class="buy-package" data-package="legendary">Buy</button>
              </div>
            </div>
            <button class="nav-button next">&#10095;</button>
          </div>
          <div class="package-indicator"></div>
        </div>
      </div>

      <div id="paymentModal" class="payment-modal">
        <div class="payment-modal-content">
          <span class="close-payment-modal">&times;</span>
          <h2>Complete Your Purchase</h2>
          <div id="selected-package-info"></div>
          <div id="paypal-button-container"></div>
        </div>
      </div>
              <div id="buyConfirmationPopup" class="popup-overlay" style="display: none;">
        <div class="popup-content">
          <h2>Confirm Purchase</h2>
          <p>Are you sure you want to buy this house?</p>
          <div class="popup-buttons">
            <button id="confirmBuyButton" class="popup-button confirm">Yes</button>
            <button id="cancelBuyButton" class="popup-button cancel">No</button>
          </div>
        </div>
      </div>
