:root {
  --base-color: #ffc3d98a;
  --base-shadow: #ff93b9;
  --darker-shadow: #f01260f3;
  --darkest-shadow: #fd4686;
  --base-highlight: #ff86b1;
  --lighter-highlight: #ffc8dc;
  --lightest: #ffffff;
}

body {
  padding: 25px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game-container {
  display: flex;
  gap: 20px;
  background: hsl(0, 0%, 13%);
  padding: 20px;
  border-radius: 10px;
}

.hud {
  width: 150px;
  background: #292727;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hud-animation {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}

.marble-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.marble-count {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #2a2a2a;
  padding: 10px;
  border-radius: 6px;
}

.marble {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
}

.marble.red {
  background: var(--base-color-red);
  box-shadow: inset -2px -1.5px 2px rgba(255, 255, 255, 0.3),
              inset 2px 2px 3px var(--darker-shadow-red);
}

.marble.blue {
  background: var(--base-color-blue);
  box-shadow: inset -2px -1.5px 2px rgba(255, 255, 255, 0.3),
              inset 2px 2px 3px var(--darker-shadow-blue);
}

.marble.green {
  background: var(--base-color-green);
  box-shadow: inset -2px -1.5px 2px rgba(255, 255, 255, 0.3),
              inset 2px 2px 3px var(--darker-shadow-green);
}

.marble.yellow {
  background: var(--base-color-yellow);
  box-shadow: inset -2px -1.5px 2px rgba(255, 255, 255, 0.3),
              inset 2px 2px 3px var(--darker-shadow-yellow);
}

.marble.purple {
  background: var(--base-color-purple);
  box-shadow: inset -2px -1.5px 2px rgba(255, 255, 255, 0.3),
              inset 2px 2px 3px var(--darker-shadow-purple);
}

.marble.orange {
  background: var(--base-color-orange);
  box-shadow: inset -2px -1.5px 2px rgba(255, 255, 255, 0.3),
              inset 2px 2px 3px var(--darker-shadow-orange);
}

.marble.pink {
  background: var(--base-color-pink);
  box-shadow: inset -2px -1.5px 2px rgba(255, 255, 255, 0.3),
              inset 2px 2px 3px var(--darker-shadow-pink);
}

#fruit-count, #bottle-count {
  color: #9BBC0F;
  font-family: 'Press Start 2P', cursive;
  font-size: 14px;
}

.title {
  color: #5C6AC4;
}

.marble {
  position: relative;
  width: 20px;
  height: 20px;
}

.marble .glass-bead {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--base-color);
  border-radius: 50%;
}

.marble .rim-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset -2px -1.5px 2px rgba(255, 255, 255, 0.308),
    inset -0.1px -0.1px 4px rgb(255, 255, 255),
    inset 2px 2px 3px var(--darker-shadow),
    inset 1px 1px 1px var(--darkest-shadow);
}

.marble .inner-shadow {
  position: absolute;
  left: 0.5px;
  top: 0.2px;
  width: 80%;
  height: 80%;
  background: var(--base-shadow);
  border-radius: 50%;
  filter: blur(4px);
}

.marble .inner-highlight {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 30%;
  height: 30%;
  background: var(--lightest);
  border-radius: 50%;
  transform: rotate(30deg);
  filter: blur(1px);
}
.marble.snake {
  --base-color: #33333380;
  --base-shadow: #222;
  --darker-shadow: #111;
  --darkest-shadow: #000;
}

.marble.red {
  --base-color: #ff000080;
  --base-shadow: #dd0000;
  --darker-shadow: #aa0000;
  --darkest-shadow: #880000;
}

.marble.blue {
  --base-color: #0000ff80;
  --base-shadow: #0000dd;
  --darker-shadow: #0000aa;
  --darkest-shadow: #000088;
}

.marble.green {
  --base-color: #00ff0080;
  --base-shadow: #00dd00;
  --darker-shadow: #00aa00;
  --darkest-shadow: #008800;
}

.marble.yellow {
  --base-color: #ffff0080;
  --base-shadow: #dddd00;
  --darker-shadow: #aaaa00;
  --darkest-shadow: #888800;
}

.marble.purple {
  --base-color: #80008080;
  --base-shadow: #660066;
  --darker-shadow: #440044;
  --darkest-shadow: #220022;
}

.marble.orange {
  --base-color: #ffa50080;
  --base-shadow: #dd8800;
  --darker-shadow: #aa6600;
  --darkest-shadow: #884400;
}

.marble.pink {
  --base-color: #ffc0cb80;
  --base-shadow: #ffb6c1;
  --darker-shadow: #ff69b4;
  --darkest-shadow: #ff1493;
}