:root {
  --bg-dark: #0a0a0c;
  
  /* Balatro Colors */
  --poker-green: #2B593C;
  --casino-red: #D32F2F;
  --casino-gold: #FFB300;
  --casino-blue: #1976D2;
  --casino-purple: #7B1FA2;
  
  --panel-bg: #EAE6DF; /* off-white card color */
  --panel-dark: #2B2B2B;
  
  --border-thick: 4px solid #111;
  
  --text-main: #111;
  --text-light: #EAE6DF;
}

body.light-mode {
  /* Daytime Casino Shift */
  --bg-dark: #E8F5E9;
  --panel-dark: #F5F5F5;
  --panel-bg: #FFFFFF;
  --text-light: #111;
  --text-main: #111;
  --border-thick: 4px solid #333;
}

body.light-mode .balatro-bg {
  background: repeating-radial-gradient(
    circle at 50% 50%,
    #C8E6C9 0,
    #C8E6C9 40px,
    #A5D6A7 40px,
    #A5D6A7 80px,
    #81C784 80px,
    #81C784 120px
  );
}

body.light-mode .crt-overlay {
  background: linear-gradient(
    rgba(255, 255, 255, 0) 50%, 
    rgba(255, 255, 255, 0.2) 50%
  ),
  radial-gradient(circle, rgba(255,255,255,0) 60%, rgba(255,255,255,0.7) 100%);
  box-shadow: inset 0 0 100px rgba(255,255,255,0.8);
}

body.light-mode .status-item, 
body.light-mode .roulette-container,
body.light-mode .roulette-item {
  background: #FFF;
  color: #111;
  border-color: #333;
}

body.light-mode .message-box, 
body.light-mode .gamble-modal-box, 
body.light-mode .mystery-box {
  background: #FFF;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Pixelify Sans', sans-serif;
  color: var(--text-light);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  overflow-x: hidden;
  background-color: var(--bg-dark);
}

/* Trippy Swirling Background */
.balatro-bg {
  position: fixed;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    #1B432E 0,
    #1B432E 40px,
    #153323 40px,
    #153323 80px,
    #11291B 80px,
    #11291B 120px
  );
  animation: swirl 60s linear infinite;
  z-index: -2;
}

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

/* CRT & Scanline Overlay */
.crt-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 9999;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ),
  radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
  background-size: 100% 4px, 100% 100%;
  box-shadow: inset 0 0 100px rgba(0,0,0,0.9);
}

h1 {
  font-family: 'Press Start 2P', cursive;
  font-size: 2rem;
  margin-bottom: 30px;
  text-transform: uppercase;
  color: var(--casino-gold);
  text-shadow: 4px 4px 0 #000;
  z-index: 2;
  letter-spacing: -2px;
}

/* Chunky Card Panels */
.glass-panel {
  background: var(--panel-dark);
  border: var(--border-thick);
  border-radius: 12px;
  box-shadow: 8px 8px 0 rgba(0,0,0,1);
  position: relative;
  overflow: hidden;
  z-index: 10;
  padding: 24px;
  color: var(--text-light);
}

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--panel-dark);
  border: var(--border-thick);
  border-radius: 8px;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 100;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.1s;
}
.theme-toggle:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 #000;
}

/* Chunky Buttons */
.btn {
  background: var(--casino-red);
  border: var(--border-thick);
  color: #fff;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 6px 6px 0 #000;
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn:hover {
  filter: brightness(1.2);
}

.btn:active {
  transform: translate(6px, 6px);
  box-shadow: 0px 0px 0 #000;
}

.btn-start {
  background: var(--casino-gold);
  color: #000;
}

.presets, .setup-mode-toggle {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.preset-btn {
  background: var(--panel-dark);
  border: var(--border-thick);
  color: var(--text-light);
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 4px 4px 0 #000;
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}
.preset-btn:hover {
  background: #333;
}
.preset-btn.active {
  background: var(--casino-blue);
  color: #fff;
}
.preset-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 #000;
}

.setup-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  max-width: 600px;
  width: 100%;
}
.setup-panel label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--casino-gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.setup-panel input {
  background: var(--panel-bg);
  border: var(--border-thick);
  color: var(--text-main);
  padding: 10px;
  border-radius: 8px;
  width: 90px;
  text-align: center;
  font-size: 1.5rem;
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: 700;
  box-shadow: inset 4px 4px 0 rgba(0,0,0,0.2);
}
.setup-panel input:focus {
  outline: none;
  border-color: var(--casino-blue);
}

/* Shop */
.shop-panel {
  margin-top: 40px;
  padding-top: 30px;
  border-top: var(--border-thick);
  width: 100%;
  text-align: center;
}
.shop-items {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}
.shop-btn {
  background: var(--panel-bg);
  border: var(--border-thick);
  border-radius: 8px;
  padding: 15px 20px;
  color: var(--text-main);
  cursor: pointer;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 6px 6px 0 #000;
  transition: transform 0.1s, box-shadow 0.1s;
  flex: 1;
  min-width: 140px;
}
.shop-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}
.shop-btn:active:not(:disabled) {
  transform: translate(6px, 6px);
  box-shadow: 0px 0px 0 #000;
}
.shop-btn:disabled {
  filter: grayscale(1);
  opacity: 0.5;
  box-shadow: none;
  transform: none;
}
.shop-btn small {
  display: block;
  margin-top: 8px;
  color: #444;
  font-size: 1rem;
}

/* Game Board */
.game-container {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.game-container.active {
  display: flex;
  animation: slideUp 0.3s steps(5);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Top Status Bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  padding: 15px 30px;
  margin-bottom: 20px;
}
.status-group {
  display: flex;
  gap: 15px;
  align-items: center;
}
.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #000;
  padding: 8px 16px;
  border-radius: 8px;
  border: var(--border-thick);
  font-size: 1.5rem;
  font-family: 'Press Start 2P', cursive;
  font-size: 1rem;
  color: var(--text-light);
  box-shadow: inset 4px 4px 0 rgba(0,0,0,0.5);
}
.face-btn {
  font-size: 2.5rem;
  background: var(--panel-bg);
  border: var(--border-thick);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
}
.face-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }

/* The Board */
.board-wrapper {
  padding: 20px;
  margin-bottom: 20px;
  background: var(--panel-dark);
  border: var(--border-thick);
  border-radius: 12px;
  box-shadow: 10px 10px 0 rgba(0,0,0,1);
}

.board {
  display: grid;
  gap: 2px;
  user-select: none;
}

/* Playing Card Cells */
.cell {
  width: 32px;
  height: 32px;
  background: var(--panel-bg);
  border: 2px solid #111;
  border-bottom: 4px solid #111;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--text-main);
  transition: transform 0.1s;
}

.cell.hidden:hover {
  background: #fff;
}

.cell.hidden:active {
  transform: translateY(2px);
  border-bottom: 2px solid #111;
}

.cell.revealed {
  background: #9E9E9E;
  border: 2px solid #555;
  cursor: default;
  transform: translateY(2px);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.3);
}

.cell.mine {
  background: var(--casino-red);
  color: #fff;
  animation: shake 0.4s infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* Colors for numbers */
.num-1 { color: #1976D2; }
.num-2 { color: #388E3C; }
.num-3 { color: #D32F2F; }
.num-4 { color: #7B1FA2; }
.num-5 { color: #F57C00; }
.num-6 { color: #0288D1; }
.num-7 { color: #C2185B; }
.num-8 { color: #000; }

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s steps(2);
  z-index: 2000;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.message-box, .gamble-modal-box, .mystery-box {
  padding: 40px;
  text-align: center;
  border-radius: 12px;
  background: var(--panel-dark);
  border: var(--border-thick);
  box-shadow: 12px 12px 0 #000;
}

.message-box h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  font-family: 'Press Start 2P', cursive;
  text-shadow: 4px 4px 0 #000;
}
.message-box p {
  font-size: 1.4rem;
  margin-bottom: 30px;
  line-height: 1.5;
  color: var(--text-light);
}
.win { color: var(--casino-gold); }
.lose { color: var(--casino-red); text-shadow: 2px 2px 0px blue, -2px -2px 0px red; }

/* Mystery Box Roulette */
.roulette-container {
  width: 100%;
  height: 80px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: var(--border-thick);
  box-shadow: inset 4px 4px 0 rgba(0,0,0,0.8);
}
.roulette-container::before {
  content: '▼'; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  color: var(--casino-gold); font-size: 1.2rem; z-index: 10;
}
.roulette-container::after {
  content: '▲'; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  color: var(--casino-gold); font-size: 1.2rem; z-index: 10;
}
.roulette-wheel {
  display: flex; position: absolute; left: 50%; height: 100%; align-items: center;
}
.roulette-item {
  min-width: 140px; height: 60px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800;
  border-left: 2px solid #333;
  border-right: 2px solid #333;
  background: #111;
  color: #fff;
  font-family: 'Pixelify Sans', sans-serif;
}
.roulette-item span { font-size: 1rem; margin-top: 5px; color: #888; }
.mystery-result { font-size: 1.5rem; margin-top: 20px; font-weight: 700; color: var(--casino-gold); font-family: 'Press Start 2P', cursive; text-shadow: 2px 2px 0 #000; }

/* Utilities */
.gamble-btn {
  background: var(--panel-dark); border: var(--border-thick); color: var(--text-light);
  padding: 10px 20px; border-radius: 8px; font-weight: 700; cursor: pointer;
  box-shadow: 4px 4px 0 #000; font-family: 'Pixelify Sans', sans-serif; font-size: 1.2rem;
}
.gamble-btn.active { background: var(--casino-red); color: #fff; transform: translate(4px, 4px); box-shadow: 0 0 0 #000; }

.gamble-info {
  display: none; padding: 12px 24px; margin-bottom: 20px; color: #fff; background: var(--casino-purple);
  border-radius: 8px; font-weight: 600; text-align: center; border: var(--border-thick); box-shadow: 4px 4px 0 #000;
}
.gamble-info.active { display: block; }

.odds-display { margin: 20px 0; }
.odds-percentage { font-size: 3rem; font-weight: 900; color: #fff; margin-bottom: 10px; font-family: 'Press Start 2P', cursive; text-shadow: 4px 4px 0 #000; }
.odds-bar-container {
  width: 100%; height: 30px; background: var(--casino-red); border: var(--border-thick); overflow: hidden;
  box-shadow: inset 4px 4px 0 rgba(0,0,0,0.5); position: relative;
}
.odds-bar {
  height: 100%; background: var(--casino-green, #388E3C); width: 0%; transition: width 0.5s steps(10);
}
.odds-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 1.2rem; font-weight: 700; }
.odds-detail { margin-top: 15px; font-size: 1.2rem; color: #aaa; }
.gamble-reward { font-size: 1.5rem; font-weight: 900; color: var(--casino-gold); margin-top: 20px; font-family: 'Press Start 2P', cursive; }

.lives-display { display: flex; gap: 5px; font-size: 1.2rem; }

.bonus-popup {
  position: fixed; pointer-events: none; font-weight: 900; font-size: 2rem; z-index: 9999;
  font-family: 'Press Start 2P', cursive; color: var(--casino-gold); text-shadow: 4px 4px 0 #000;
  animation: floatUp 1s steps(10) forwards;
}
@keyframes floatUp {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-50px); }
}

@keyframes screenShake {
  0% { transform: translate(10px, 10px) rotate(1deg); }
  10% { transform: translate(-10px, -15px) rotate(-1deg); }
  20% { transform: translate(15px, 5px) rotate(1deg); }
  30% { transform: translate(-15px, -10px) rotate(-1deg); }
  40% { transform: translate(10px, 15px) rotate(1deg); }
  50% { transform: translate(-10px, 5px) rotate(-1deg); }
  60% { transform: translate(15px, -15px) rotate(1deg); }
  70% { transform: translate(-15px, 10px) rotate(-1deg); }
  80% { transform: translate(10px, -5px) rotate(1deg); }
  90% { transform: translate(-10px, 15px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
.shake { animation: screenShake 0.4s infinite; }

@keyframes holoShine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.cell.holo {
  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 1800% 1800%;
  animation: holoShine 3s ease infinite;
  color: white !important;
  text-shadow: 2px 2px 0 #000;
  border-color: #fff;
}