body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: var(--background-color, #f0f2f5);
  color: var(--text-color, #333);
  transition: background-color 0.3s, color 0.3s;
}

:root {
  --background-color: #f0f2f5;
  --text-color: #333;
  --container-background: white;
  --button-background: #007bff;
  --button-text-color: white;
  --tab-active-border: #007bff;
  --mole-hole-bg: #d4a373;
  --mole-bg: url('data:image/png;base64,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');
}

[data-theme="dark"] {
  --background-color: #121212;
  --text-color: #fff;
  --container-background: #1e1e1e;
  --button-background: #bb86fc;
  --button-text-color: #000;
  --tab-active-border: #bb86fc;
  --mole-hole-bg: #6f4e37;
}

.container {
    background: var(--container-background);
    padding: 2rem 3rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    width: 90%;
    max-width: 600px;
}

.tab-nav { display: flex; border-bottom: 2px solid #ccc; margin-bottom: 2rem; }
.tab-button { background: none; border: none; font-size: 1.2rem; padding: 15px 20px; cursor: pointer; color: var(--text-color); position: relative; transition: color 0.3s; }
.tab-button.active { color: var(--tab-active-border); border-bottom: 3px solid var(--tab-active-border); }
.tab-content { display: none; }
.tab-content.active { display: block; }

h1 { color: var(--text-color); }

#lottoNumbers { min-height: 80px; }

.lotto-ball {
  display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px;
  border-radius: 50%; color: white; font-size: 1.5rem; font-weight: bold; margin: 0 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 -3px 5px rgba(0,0,0,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4); transition: transform 0.2s ease;
}

#generateBtn {
    margin-top: 1rem; font-size: 1.2rem; border-radius: 25px; cursor: pointer; 
    transition: background-color 0.3s, box-shadow 0.3s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: var(--button-background); color: var(--button-text-color); border: none; padding: 10px 20px;
}

/* Whack-a-Mole Game Styles */
#whack-a-mole-container { margin-top: 1rem; }
#whack-a-mole-container h2 { margin-bottom: 0.5rem; }
#whack-a-mole-container p { margin-top: 0; margin-bottom: 1rem; }

.mole-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  width: 300px;
  margin: 1.5rem auto 0;
}

.mole-hole {
  width: 90px;
  height: 90px;
  background-color: var(--mole-hole-bg);
  border-radius: 50%;
  border: 5px solid #a0522d;
  position: relative;
  overflow: hidden;
  cursor: crosshair;
}

.mole {
  width: 100%;
  height: 100%;
  background-image: var(--mole-bg);
  background-size: 70%;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: absolute;
  bottom: -100%;
  transition: all 0.2s ease-in-out;
}

.mole.up {
  bottom: 0;
}

#startGameBtn {
    font-size: 1.2rem; border-radius: 25px; cursor: pointer; 
    transition: background-color 0.3s, box-shadow 0.3s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: var(--button-background); color: var(--button-text-color); border: none; padding: 10px 20px;
}

/* Form Container */
.form-container { margin-top: 3rem; border-top: 1px solid #eee; padding-top: 2rem; }
.form-group { margin-bottom: 1rem; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }

button[type="submit"] {
    font-size: 1.2rem; border-radius: 25px; cursor: pointer; 
    transition: background-color 0.3s, box-shadow 0.3s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: var(--button-background); color: var(--button-text-color); border: none; padding: 10px 20px;
}

/* Theme switcher styles - no change */
.theme-switcher-container{position:absolute;top:20px;right:20px}.theme-switcher{position:relative;display:inline-block;width:60px;height:34px}.theme-switcher input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:#2196F3}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}