:root {
      --accentRed: #ef5350;
      --accentBlue: #4c8bff;
      --accentGreen: #66bb6a;
      --myActive4: #F72585;
      --myActive: #ff6370;
      --myActive2: #FFC200;
      --myActive3: #25f797;

      --light-bg: #f0f2f5;
      --light-text: #4a5568;
      --light-card-bg: #ffffff;
      --light-input-bg: #e7ebf0;

      --dark-bg: #11141a;
      --dark-text: #e3e9ef;
      --dark-card-bg: #1b1e24;
      --dark-input-bg: #252932;

      --size: 6rem;
      --duration: 2s;
    }

    body {
      background-color: var(--dark-bg);
      color: var(--dark-text);
      font-family: 'Montserrat', sans-serif;
      margin: 0;
      padding: 1em 0.5em 0.5em;
      transition: background-color 0.6s ease, color 0.6s ease;
    }
    body.light-theme {
      background-color: var(--light-bg);
      color: var(--light-text);
    }

    .container-limited {
      max-width: 480px;
      margin: 0 auto;
      padding: 2.5rem 1.2rem 1rem;
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .top-bar {
      position: absolute;
      top: 0.2rem;
      left: 0.8rem;
      right: 0.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 10;
    }

    .top-bar-left,
    .top-bar-right {
      display: flex;
      gap: 0.5rem;
    }

    .top-bar button {
      background: none;
      border: none;
      padding: 0.3rem;
      font-size: 1.8rem;
      color: var(--dark-text);
      cursor: pointer;
      border-radius: 50%;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .top-bar button:active {
      transform: scale(0.9);
    }
    .top-bar button:hover {
      opacity: 0.85;
      transform: scale(1.1);
    }

    body.light-theme .top-bar button {
      color: var(--light-text);
    }

    .final-totals {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-family: 'Montez', cursive;
      font-size: clamp(3rem, 8vw, 5rem);
      user-select: none;
      letter-spacing: 0.03em;
      position: relative;
      z-index: 1;
      font-weight: normal;
      text-align: center;
      padding-top: 20px;
    }
    .total-item {
      display: flex;
      flex-direction: column;
      justify-content: center;

      position: relative;
      min-width: 30%;
      text-align: center;
      padding: 0.1rem 0;
    }

    .player-name-label {
      /* Increased font size for better visibility */
      font-size: clamp(0.9rem, 3vw, 1.2rem); 
      font-weight: 800; /* Made it bolder */
      cursor: pointer;
      /* Increased vertical padding and changed to a pill shape */
      margin-bottom: 15px; /* Increased space between name and badge area */
      color: white; 
      /* New deep purple/blue background color */
      background-color: #483D8B; 
      /* Reduced padding */
      padding: 2px 8px; 
      border-radius: 9px; /* This creates the fully rounded 'pill' shape */
      opacity: 0.9;
      transition: all 0.2s ease, transform 0.1s ease;
      font-family: 'Poppins', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.05em;

      /* Ensure it's on top of the badge */
      z-index: 5; 
      position: relative; 

border: 1px solid transparent;
background-color: #DCFCE7; /* bg-green-100 */
  color: #166534;            /* text-green-800 */
  border-color: #86EFAC; 





    }

    .player-name-label:active {
      transform: scale(0.95);
    }
    .player-name-label:hover {
        opacity: 1;
        background-color: var(--myActive);
        color: var(--dark-text);
    }
    body.light-theme .player-name-label {
        background-color: #3f51b5; /* Light theme name background */
        color: var(--light-card-bg);
    }

    body.light-theme .player-name-label:hover {
        background-color: var(--accentBlue);
        color: white;
    }

    .score-wrapper {
      background: linear-gradient(135deg,
        #42A5F5, #00E5FF, #1DE9B6, #A5FFEB,
        #BA68C8, #E040FB, #FF4081, #FFC107, #66BB6A
      );
      background-size: 600% 600%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: richAurora 19s ease-in-out infinite;
      text-shadow: 0 0 12px rgba(100, 220, 255, 0.5),
                   0 0 24px rgba(186, 104, 200, 0.4);
      transition: text-shadow 0.4s ease;
    }

    body.light-theme .score-wrapper {
        background: linear-gradient(
            135deg,
            var(--accentBlue),
            var(--accentRed),
            var(--myActive4),
            var(--accentBlue),
            var(--accentGreen)
        );
        background-size: 400% 400%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: richAurora-light 19s ease-in-out infinite;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.1),
                     0 0 10px rgba(0, 0, 0, 0.05);
    }

    .total-item {
      position: relative;

    }

    .total-item.rank-1::after,
    .total-item.rank-2::after,
    .total-item.rank-3::after,
    .total-item.rank-4::after {
      content: '';
      position: absolute;
      /* Adjusted top to maintain separation from the new pill shape */
      top: 45px; 

      /* Adjusted transform to position it nicely relative to the new top value */
      transform: translate(30%, -30%); 
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 20px;
      border-radius: 50%;
      backdrop-filter: blur(4px);
      opacity: 1;
      visibility: visible;
      /* Ensure it sits below the player name */
      z-index: 1; 
    }

    .total-item.rank-1::after {
      content: '1';
      background: rgba(255, 215, 0, 0.6);
      box-shadow: 0 0 8px rgba(255, 215, 0, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.4);
      color: #fff;
    }

    .total-item.rank-2::after {
      content: '2';
      background: rgba(192, 192, 192, 0.5);
      box-shadow: 0 0 8px rgba(192, 192, 192, 0.7), inset 0 0 5px rgba(255, 255, 255, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
    }

    .total-item.rank-3::after {
      content: '3';
      background: rgba(205, 127, 50, 0.5);
      box-shadow: 0 0 8px rgba(205, 127, 50, 0.7), inset 0 0 5px rgba(255, 255, 255, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
    }

    .total-item.rank-4::after {
      content: '4';
      background: rgba(75, 0, 130, 0.5);
      box-shadow: 0 0 8px rgba(75, 0, 130, 0.7), inset 0 0 5px rgba(255, 255, 255, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
    }

    body.light-theme .total-item.rank-1::after {
      background: rgba(255, 165, 0, 0.8);
      box-shadow: 0 0 8px rgba(255, 165, 0, 0.9), inset 0 0 5px rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(0,0,0,0.3);
      color: #000;
    }

    body.light-theme .total-item.rank-2::after {
      background: rgba(169, 169, 169, 0.7);
      box-shadow: 0 0 8px rgba(169, 169, 169, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(0,0,0,0.3);
      color: #000;
    }

    body.light-theme .total-item.rank-3::after {
      background: rgba(205, 92, 92, 0.7);
      box-shadow: 0 0 8px rgba(205, 92, 92, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(0,0,0,0.3);
      color: #fff;
    }

    body.light-theme .total-item.rank-4::after {
      background: rgba(138, 43, 226, 0.7);
      box-shadow: 0 0 8px rgba(138, 43, 226, 0.8), inset 0 0 5px rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(0,0,0,0.3);
      color: #fff;
    }


    .final-totals.four-teams,
    .final-totals.three-teams {
      flex-wrap: nowrap;
      justify-content: space-between;
      font-size: clamp(3rem, 8vw, 5rem);
    }
    .final-totals.four-teams .total-item,
    .final-totals.three-teams .total-item {
      min-width: 22%;
      margin: 0;
      padding: 0;

    }

    @keyframes richAurora {
      0% { background-position: 0% 50%; }
      25% { background-position: 50% 40%; }
      50% { background-position: 100% 60%; }
      75% { background-position: 50% 70%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes richAurora-light {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .final-totals .total-item {
      min-width: 30%;
      text-align: center;
      padding: 0.1rem 0;

    }

    .total-item-diff {
      font-family: 'Montez', cursive;
      font-size: clamp(3rem, 8vw, 5rem);
      bottom: -15px;
      font-weight: 800;
      min-width: 25%;
      text-shadow: none;
      -webkit-text-fill-color: inherit;
      color: var(--dark-text);

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 1;

      background: linear-gradient(135deg,
        #42A5F5, #00E5FF, #1DE9B6, #A5FFEB,
        #BA68C8, #E040FB, #FF4081, #FFC107, #66BB6A
      );
      background-size: 600% 600%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: richAurora 19s ease-in-out infinite;
    }

    body.light-theme .total-item-diff {
        color: var(--light-text);

          background: linear-gradient(
        135deg,
        var(--accentBlue),
        var(--accentRed),
        var(--myActive4),
        var(--accentBlue),
        var(--accentGreen)
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: richAurora-light 19s ease-in-out infinite;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1),
                 0 0 10px rgba(0, 0, 0, 0.05);
    }

    .card {
      background: var(--dark-card-bg);
      color: var(--dark-text);
      margin-bottom: 1rem;
      transition: transform 0.3s ease;
      border-radius: 20px;
      border: none;
      box-shadow: none;
    }

    .card.three-teams,
    .card.four-teams {


}

    body.light-theme .card {
      background: var(--light-card-bg);
      color: var(--light-text);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .75rem 1.25rem;
      font-size: clamp(1rem, 4vw, 1.2rem);
      font-weight: 600;
      cursor: pointer;
      background-color: var(--dark-card-bg);
      background-image: linear-gradient(90deg, rgba(92,107,192,0.12), rgba(63,81,181,0.08));
      color: #90caf9;
      transition: background 0.2s ease, transform 0.2s;
      border-radius: 20px !important;

      position: relative;
    }

    .card-header.three-teams,
    .card-header.four-teams {
        flex-direction: row;

    }

    .card-header.three-teams .total,
    .card-header.four-teams .total {
        font-size: clamp(1.4rem, 4vw, 1.8rem);
    }
    
    .round-number {
      font-family: 'Orbitron', sans-serif;
      font-weight: 800;
      font-size: clamp(1rem, 3.5vw, 1.4rem);
      text-transform: uppercase;
      user-select: none;
      position: relative;
      z-index: 10;
      white-space: nowrap;
      background: var(--dark-card-bg);
      padding: 4px 40px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--myActive);
    }

    .round-number.three-teams-round,
    .round-number.four-teams-round {
  display: none;

    }

    body.light-theme .round-number {
        background: var(--light-card-bg);
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: var(--accentBlue);
    }

    body.light-theme .round-number.three-teams-round,
    body.light-theme .round-number.four-teams-round {
        background: transparent;
        border: none;
        color: var(--accentBlue);
    }

    body.light-theme .card-header {
      background: linear-gradient(90deg, #e3f2fd, #f1f8ff);
      color: var(--accentBlue);
    }

    .total {
      font-weight: 300;
      font-size: clamp(1.6rem, 5vw, 2.1rem);
      min-width: 60px;
      text-align: center;
      position: relative;
    }

    .total::before {
      content: "-10";
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      padding: 1px 6px;
      font-size: 8px;
      font-weight: bold;
      color: var(--dark-text);
      background-color: var(--accentGreen);
      border-radius: 4px;
      white-space: nowrap;
      pointer-events: none;
      display: none;

    }

    .total.minus-active::before {
      display: block;
    }

    .card-header.three-teams .total,
    .card-header.four-teams .total {
        font-size: clamp(1.4rem, 4vw, 1.8rem);
    }

    .content-row {
      display: flex;
      justify-content: space-between;
      padding: 1rem;
      gap: 0.5rem;
    }

    .side-column {
      width: 45%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      position: relative;
    }
    .content-row.three-teams,
    .content-row.four-teams {
      justify-content: center;
      gap: 1.5%;
    }
    .content-row.three-teams .side-column,
    .content-row.four-teams .side-column {
      width: 30%;
      padding: 0 0.5%;
    }

    .inputs-row {
      display: flex;
      align-items: center;
      height: 50px;
      gap: 1rem;
      width: 100%;
    }

    .input-field {
      width: 48%;
      border-radius: 8px;
      padding: .4rem .6rem;
      font-size: 1.2rem;
      text-align: center;
      font-family: 'Montserrat', sans-serif;
      background: var(--dark-input-bg);
      color: var(--dark-text);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
      transition: all 0.2s ease-in-out;
    }

    .input-field.three-teams,
    .input-field.four-teams {
      width: 100%;
    }

    .input-field:focus {
      outline: 2px solid var(--accentGreen);
      background-color: rgba(100, 255, 218, 0.1);
    }
    body.light-theme .input-field {
      background: var(--light-input-bg);
      color: var(--light-text);
      border: 1px solid #ced4da;
      box-shadow: none;
    }

    body.light-theme .input-field:focus  {
      outline: 2px solid var(--myActive);
      background-color: rgba(255, 99, 112, 0.1);
    }

    .hidden-values {
      font-family: 'Montserrat', sans-serif;
      font-size: 1.8em;
      font-weight: bold;
      text-align: center;
      width: 100%;
      letter-spacing: 0.05em;
      color:#85f725;
    }
    body.light-theme .hidden-values {
      color: var(--accentRed);
    }

    .divider {
      width: 5%;
    }

    .diff-highlight {
      animation: colorFlash 0.6s ease;
    }
    @keyframes colorFlash {
      0%   { color: inherit; }
      100% { color: inherit; }
    }

    /* Combined CSS for badges */
    .minus-badge-inside, .joker-badge-inside {
      position: absolute;
      top: -2px;
      right: -2px;
      padding: 2px 4px;
      font-size: 10px;
      font-weight: bold;
      color: var(--dark-text);
      border-radius: 4px;
      z-index: 5;
      white-space: nowrap;
      text-align: center;
      line-height: 1;
      display: block;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.3s ease, visibility 0s 0.3s;
    }

    /* Specific styles for minus and joker badges */


    .minus-badge-inside {
      background-color: var(--myActive3);
      color: white;
    }

    .joker-badge-inside {
      background-color: var(--myActive2);
      color: white;
      top: -4px; /* Slightly lower position to avoid overlap */
    }


    /* This is the shared class that makes the badges visible */
    .minus-badge-inside.visible, .joker-badge-inside.visible {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.3s ease;
    }

    .icons-row i[data-type="minus"] {
      position: relative;
      display: inline-flex;
    }

    @keyframes badgePopAndChangeColor {
      0% {
        opacity: 0;
        transform: scale(0.5);
        box-shadow: 0 0 0 var(--accentRed);
      }
      50% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 10px 5px var(--accentRed);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0px 0px var(--accentRed);
      }
    }

    /* Apply the same animation to both badges when they become visible */
    .minus-badge-inside.visible, .joker-badge-inside.visible {
        animation: badgePopAndChangeColor 0.5s ease-in-out forwards;
    }
    .minus-badge-inside:not(.d-none) {
      animation: badgePopAndChangeColor 0.5s ease-in-out forwards;
    }

    .float-icon {
      position: absolute;
      font-size: 1rem;
      pointer-events: none;
      animation: floatFade 0.6s ease-out forwards;
    }

    @keyframes floatFade {
      0% {
        opacity: 1;
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        transform: translateY(-20px);
      }
    }

    @keyframes popInAndChangeColor {
      0% {
        opacity: 0;
        transform: scale(0.5);
      }
      50% {
        opacity: 1;
        transform: scale(1.2);
        color: var(--accentGreen);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        color: var(--accentRed);
      }
    }

    .hidden-values:not(.d-none) {
      animation: popInAndChangeColor 0.5s ease-out forwards;
    }
    .credit-design {
        text-align: center;
        margin-top: 1.5rem;
    }
    .credit-design .name {
font-family: 'Allura', cursive
        font-size: 2rem;
        color: var(--dark-text);
        margin: 0;
        text-transform: uppercase;
    }
    .credit-design .label {

font-family: 'Bebas Neue', sans-serif
        font-size: 0.8rem;
        color: #aaa;
        text-transform: uppercase;
    }
    .credit-design .email {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.9rem;
        color: #777;
        text-decoration: none;
        display: block;
    }
    body.light-theme .credit-design .name {
        color: var(--light-text);
    }
    body.light-theme .credit-design .label {
        color: var(--light-text);
    }
    body.light-theme .credit-design .email {
        color: var(--light-text);
    }

    .credit-design {
        text-align: center;
        margin-top: 1.5rem;
        padding: 1.2rem 1.2rem 0.8rem; /* Adjusted padding-bottom */
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        transition: all 0.4s ease-in-out;
    }

    body.light-theme .credit-design {
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .credit-design .label {
        font-family: 'Raleway', sans-serif;
        font-weight: 200;
        font-size: 1rem;
        letter-spacing: 0.2em;
        color: #C1A36D; /* Subtle Gold/Brass */
        margin: 0;
        text-transform: uppercase;
        transition: color 0.4s ease;
    }

    body.light-theme .credit-design .label {
        color: #8C6D45; /* Darker gold for light theme */
    }

    .credit-design .name {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 1.4rem;
        color: var(--dark-text);
        margin: 0.1rem 0;
        transition: color 0.4s ease;
    }

    body.light-theme .credit-design .name {
        color: #363636;
    }

    .credit-design .email {
        font-family: 'Raleway', sans-serif;
        font-size: 0.8rem;
        color: #A0A0A0; /* Soft Gray */
        text-decoration: none;
        display: block;
        margin-top: 0.1rem;
        margin-bottom: 0; /* This removes the extra space */
        transition: color 0.4s ease;
    }

    body.light-theme .credit-design .email {
        color: #808080;
    }

    .credit-design .email:hover {
        color: var(--myActive);
        text-decoration: underline;
    }

    .reset-overlay, .settings-overlay, .name-selection-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(0,0,0,0.7);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }

    .reset-confirm, .settings-content, .name-selection-content {
      background: var(--dark-card-bg);
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(0,0,0,0.3);
      text-align: center;
      color: var(--dark-text);
      max-width: 90%;
      font-size: 1.2rem;
    }

    .settings-content h3, .name-selection-content h4 {
        margin-top: 0;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        color: var(--myActive);
    }

    body.light-theme .settings-content,
    body.light-theme .name-selection-content {
        background: var(--light-card-bg);
        color: var(--light-text);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    body.light-theme .settings-content h3,
    body.light-theme .name-selection-content h4 {
        color: var(--accentBlue);
    }

    .setting-item {
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.8rem;
    }
    .setting-item span {
        font-size: 1.1rem;
    }

    .teams-buttons, .theme-buttons, .predefined-names-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    .teams-buttons button, .theme-buttons button, .predefined-names-buttons button {
        background: var(--dark-input-bg);
        color: var(--dark-text);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.5rem 1rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1.2rem;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }
    .teams-buttons button.my-active, .theme-buttons button.my-active {
        background-color: var(--myActive);
        color: white;
        border-color: var(--myActive);
    }
    body.light-theme .teams-buttons button,
    body.light-theme .theme-buttons button,
    body.light-theme .predefined-names-buttons button {
        background: var(--light-input-bg);
        color: var(--light-text);
        border-color: #ced4da;
    }
    body.light-theme .teams-buttons button.my-active,
    body.light-theme .theme-buttons button.my-active {
        background-color: var(--accentBlue);
        color: white;
        border-color: var(--accentBlue);
    }
    .theme-buttons button {
        font-size: 1.6rem;
    }
    
    .predefined-names-buttons button {
        font-size: 1rem;
    }
    .predefined-names-buttons {
        margin-bottom: 1rem;
    }
    .predefined-names-buttons button:hover {
        background-color: var(--myActive);
        color: white;
    }
    body.light-theme .predefined-names-buttons button:hover {
        background-color: var(--accentBlue);
        color: white;
    }

    .reset-buttons, .settings-buttons {
      margin-top: 1rem;
      display: flex;
      justify-content: space-around;
      gap: 1rem;
    }

    .reset-buttons button, .settings-buttons button {
      padding: 0.6rem 1.2rem;
      font-size: 1rem;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
      transition: background 0.3s ease;
    }

    .confirm {
      background-color: #e53935;
      color: white;
    }

    .confirm:hover {
      background-color: #c62828;
    }

    .cancel {
      background-color: #555;
      color: white;
    }

    .cancel:hover {
      background-color: #444;
    }

    .icons-row {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
    }

    .icons-row.two-teams {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 1rem;
    }

    .icons-row.three-teams {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        height: 6rem;
    }

    .icons-row.four-teams {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        height: 10rem;
    }

    .icons-row i {
      font-size: 2rem;
      cursor: pointer;
      user-select: none;
      color: var(--dark-text);
      transition: .2s;
    }
    body.light-theme .icons-row i {
      color: var(--light-text);
    }
    .icons-row i.active {
      color: var(--myActive);
    }
    .icons-row i.joker-1.active {
      color: var(--myActive);
    }
    .icons-row i.joker-2.active {
      color: var(--accentBlue);
    }
    .icons-row i[data-type="minus"].active {
      color: var(--myActive3);
    }
    body.light-theme .icons-row i[data-type="win"].active {
      color: var(--myActive);
    }
    body.light-theme .icons-row i[data-type="minus"].active {
      color: var(--myActive);
    }

    /* New wrapper for positioning */
    .joker-icon-wrapper {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 2rem;
        width: 2rem;
    }
    
    .joker-icon {
      width: 2rem;
      height: 2rem;
      mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911z'/%3e%3cg transform='translate(3,2) scale(0.039)'%3e%3cg transform='translate(0,256) scale(0.1,-0.1)'%3e%3cpath d='M1202 2373 c-54 -26 -85 -76 -90 -141 -4 -68 18 -115 69 -150 19 -13 35 -27 37 -31 2 -7 -274 -831 -282 -839 -3 -2 -46 15 -96 37 -125 57 -243 89 -380 104 l-114 13 -7 33 c-15 72 -74 122 -153 129 -46 4 -62 0 -100 -22 -81 -47 -107 -143 -63 -227 51 -96 186 -120 265 -46 l22 21 36 -35 c139 -132 248 -418 270 -702 6 -79 5 -87 -10 -87 -28 0 -72 -30 -90 -60 -9 -16 -16 -49 -16 -75 0 -42 5 -52 39 -86 l39 -39 702 0 702 0 39 39 c34 34 39 44 39 86 0 26 -7 59 -16 75 -18 29 -62 60 -88 60 -21 0 -21 51 -1 185 37 243 123 456 233 575 l60 65 23 -22 c80 -74 215 -50 266 46 29 55 29 102 2 158 -68 140 -287 114 -318 -38 l-7 -34 -82 -7 c-146 -12 -290 -50 -430 -114 -41 -19 -77 -33 -78 -31 -8 7 -284 831 -282 838 2 4 18 18 37 31 103 70 91 238 -22 292 -44 20 -112 20 -155 -1z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e") center/contain no-repeat;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: .2s;
      background-color: white;
    }
    .joker-icon.joker-1.active { background-color: var(--myActive); }
    .joker-icon.joker-2.active { background-color: var(--myActive2); }
    body.light-theme .joker-icon { background-color: var(--light-text); }


    #spinnerContainer {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      transition: opacity 0.4s ease;
    }

    .spinner-wrapper {
      position: relative;
      width: var(--size);
      height: var(--size);
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 600px;
    }

    i.heart-icon {
      font-size: var(--size);
      display: inline-block;
      transition: transform var(--duration) cubic-bezier(.23,.67,.41,1);
      transform: rotate(0deg);
    }
    .hidden { display: none !important; }

    @keyframes pulsePop {
      0% { transform: scale(1); }
      50% { transform: scale(1.3); }
      100% { transform: scale(1); }
    }
    .pulsePop { animation: pulsePop 0.4s ease-in-out; }

    .float-icon {
      position: absolute;
      font-size: 1rem;
      pointer-events: none;
      animation: floatFade 0.6s ease-out forwards;
    }

    @keyframes floatFade {
      0% {
        opacity: 1;
        transform: translateY(0);
      }
      100% {
        opacity: 0;
        transform: translateY(-20px);
      }
    }

    @keyframes popInAndChangeColor {
      0% {
        opacity: 0;
        transform: scale(0.5);
      }
      50% {
        opacity: 1;
        transform: scale(1.2);
        color: var(--accentGreen);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        color: var(--accentRed);
      }
    }

    .hidden-values:not(.d-none) {
      animation: popInAndChangeColor 0.5s ease-out forwards;
    }