body {  margin: 0;  font-family: 'Oswald', sans-serif;  background: #000;  color: white;  overflow: hidden;}
body.access-body {  overflow: auto;  display: flex;  align-items: center;  justify-content: center;  min-height: 100vh;  padding: 40px 20px;}
.access-gate {  width: 100%;  display: flex;  justify-content: center;}
.access-card {  width: 100%;  max-width: 420px;  background: rgba(0, 0, 0, 0.8);  border: 1px solid rgba(0, 255, 149, 0.5);  border-radius: 16px;  padding: 36px;  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);  display: flex;  flex-direction: column;  gap: 14px;}
.access-card h1 {  margin: 0;  font-size: 1.9rem;  text-transform: uppercase;  letter-spacing: 3px;  text-align: center;}
.access-copy {  margin: 0;  font-size: 0.95rem;  color: rgba(255, 255, 255, 0.75);  text-align: center;}
.access-error {  margin: 0;  padding: 10px 14px;  background: rgba(255, 99, 99, 0.18);  border: 1px solid rgba(255, 99, 99, 0.6);  border-radius: 8px;  color: #ff7575;  text-align: center;}
.access-card label {  font-size: 0.85rem;  letter-spacing: 1px;  text-transform: uppercase;  color: rgba(255, 255, 255, 0.8);}
.access-card input {  padding: 12px 14px;  border-radius: 8px;  border: 1px solid rgba(0, 255, 149, 0.5);  background: rgba(255, 255, 255, 0.05);  color: #fff;  font-size: 1rem;}
.access-card input:focus {  outline: none;  border-color: #00ff95;  box-shadow: 0 0 0 3px rgba(0, 255, 149, 0.25);}
.access-card button {  margin-top: 6px;  padding: 12px 18px;  border-radius: 8px;  border: none;  background: linear-gradient(135deg, #0b3e27, #197149);  color: #fff;  font-size: 1rem;  font-weight: 600;  cursor: pointer;  letter-spacing: 1px;  text-transform: uppercase;}
.access-card button:hover {  filter: brightness(1.1);}
/* Money rain */

@keyframes moneyFall {
  0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }}
.money {position: fixed;top: -50px;font-size: 2rem;color: #00ff95;animation: moneyFall linear infinite;z-index: -1;}
/* Container */
.container {width: 90%;margin: 50px auto;text-align: center;position: relative;z-index: 1;}
/* Leader card */
.leader {background: linear-gradient(135deg, #0b3e27, #ff8c00);padding: 40px;border-radius: 15px;font-size: 2.5rem;font-weight: 700;color: #fff;box-shadow: 0 0 30px linear-gradient(90deg, #0b3e27, #197149);position: relative;margin-bottom: 0;}
.leader::after {content: "";background:url(../img/crown.svg);font-size: 3rem;position: absolute;top: -40px;left: 50%;transform: translateX(-50%);animation: bounce 1s infinite alternate;width: 50px;height: 50px;background-repeat: no-repeat;}
@keyframes bounce {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-50%) translateY(-10px); }}
/* Table */
table {width: 100%;border-collapse: collapse;margin: 20px 0 0 0;border: 2px solid linear-gradient(90deg, #0b3e27, #197149);box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}
th, td {padding: 15px;border: 1px solid rgba(255,215,0,0.3);}
thead {background: linear-gradient(90deg, #0b3e27, #197149);color: #fff;font-size: 1.3rem;}
tbody tr {background: rgba(255,255,255,0.05);transition: 0.3s;}
tbody tr:hover {background: rgba(255,215,0,0.2);transform: scale(1.01);}
/* Totals */
.totals {background: rgba(0,255,149,0.2);border: 2px solid #00ff95;padding: 20px;border-radius: 10px;margin-top: 20px;font-size: 1.8rem;color: #00ff95;text-shadow: 0 0 10px #00ff95;transition: all 0.3s ease;}
.yhmwuHeader {  background: linear-gradient(135deg, #0b3e27, #197149);  color: #000;  font-size: 1.5rem;  text-shadow: 0 0 10px #0b3e27, 0 0 20px #197149;  border-bottom: 3px solid #0b3e27;}
tbody tr:first-child .yhmwu {  font-size: 2rem;color: yellow;font-weight: bold;  text-shadow: 0 0 15px yellow, 0 0 30px #ffa500; /* glow effect */   /* Slightly bigger for emphasis */}
/* Keep other YHMWU cells in gold */
.yhmwu:not(:first-child) {  background: linear-gradient(135deg, #0b3e27, #0b3e271f);  color: #fff;  font-weight: bold;  border-left: 3px solid #0b3e27;  border-right: 3px solid #197149;  transition: transform 0.3s ease, box-shadow 0.3s ease;}
/* Hover effect for rows in YHMWU column */
.yhmwu:hover {  transform: scale(1.1);  box-shadow: 0 0 20px #0b3e27, 0 0 40px #197149 inset;}
/* Optional: subtle pulse animation for gold glow */
@keyframes goldPulse {
  0% { text-shadow: 0 0 10px #0b3e27, 0 0 20px #197149; }
  50% { text-shadow: 0 0 20px #0b3e27, 0 0 40px #197149; }
  100% { text-shadow: 0 0 10px #0b3e27, 0 0 20px #197149; }}
.yhmwuHeader, .yhmwu {  animation: goldPulse 2s infinite alternate;}

/* Fullscreen overlay container */
.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
}
.topTabHolder{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.topTabHolder .targetDiv{
  width: calc(50% - 10px);
  position: relative;
}

/* Hide by default */
.hidden { display: none; }

/* Black semi-transparent background */
.overlay-dark {
  position: absolute;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  top: 0; left: 0;
  animation: fadeIn 0.3s ease forwards;
}

/* Content container */
.overlay-content {
  position: relative;
  text-align: center;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-flow: column;
}

/* Explosion effect */
.explosion {
  height: 75vh;
  animation: boom 0.6s ease-out forwards;
}

/* Player name styling */
.player-name {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  font-weight: bold;
  color: linear-gradient(90deg, #0b3e27, #197149);
  text-shadow: 0 0 10px #fff, 0 0 20px #ff0;
  margin-top: 20px;
  animation: popIn 0.6s ease forwards;
}

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

@keyframes boom {
  0% { transform: scale(0.5) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(20deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}


@media screen and (min-width: 1000px) {
  /* ========================== Base Styles ========================== */
  body {margin: 0;font-family: sans-serif;background: black;color: white;overflow: hidden;text-align: center;background: url(../img/stock-market-bg.gif);
        background-size: cover;}
/* Container */
.container {width: 90%;margin: 5% auto 0 auto;}
/* Leader Card */
.leader {background:linear-gradient(90deg, #0b3e27, #197149);padding: 27.5px 0;font-size: 28px;font-weight: bold;border-radius: 10px;width: calc(50% - 10px);}
.targetDiv span{position: relative;z-index: 1;}
.targetDiv{padding: 10px;font-size: 32px;font-weight: bold;border-radius: 10px;width: calc(50% - 10px);padding: 25px 0;background: url("../img/dollar.jpg");color: #FFD700;
  position: relative;
  background-size: 180px;
            /* Text color */
            text-shadow:
                3px 3px 0 #000,
                -3px -3px 0 #000,
                3px -3px 0 #000,
                -3px 3px 0 #000;}
.targetDiv::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
}
/* Table */
table {width: 100%;border-collapse: collapse;border: 2px solid linear-gradient(90deg, #0b3e27, #197149);font-size: 20px;}
th, td {padding: 8px;             /* fixed padding */border: 1px solid linear-gradient(90deg, #0b3e27, #197149);}
thead {background: linear-gradient(90deg, #0b3e27, #197149);color: #fff;font-weight: bold;}
tbody tr {background: #222;}
tbody tr:hover {background: #555;}
/* Totals */
.totals {background: green;color: #fff;padding: 10px;font-size: 20px;font-weight: bold;margin-top: 10px;}
/* YHMWU Highlight */
.yhmwuHeader {background: linear-gradient(90deg, #0b3e27, #197149);color: #fff;font-weight: bold;}
.yhmwu:first-child {font-weight: bold;color: orange;}
}