.button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  padding: 16px;
  justify-content: center;
}

.game-btn {
  font-family: "zabars", Arial, Helvetica, sans-serif;
  font-size: clamp(18px, 1.8vw, 24px);         
  font-weight: bold;
  color: var(--btn-brown);
  background: linear-gradient(145deg, var(--btn-beige), var(--btn-beige-dark));
  border: 3px solid var(--btn-brown);
  border-radius: 15px;
  padding: clamp(10px, 1.2vh, 16px) clamp(20px, 2.5vw, 32px);
  min-width: clamp(150px, 22vw, 230px);        
  cursor: pointer;
  text-shadow: var(--shadow-text);
  box-shadow: var(--shadow-btn);
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.game-btn:hover {
  background: linear-gradient(145deg, var(--btn-beige-light), var(--btn-beige));
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}
.game-btn:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-btn-active);
}
.game-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: skewX(-25deg);
  transition: 0.5s;
}
.game-btn:hover::after {
  left: 120%;
}
.start-btn {
  background: linear-gradient(160deg, var(--btn-green), var(--btn-green-dark));
  border-color: var(--btn-green-border);
}
.start-btn:hover {
  background: linear-gradient(160deg, var(--btn-green-light), var(--btn-green));
}
.help-btn {
  background: linear-gradient(160deg, var(--btn-red), var(--btn-red-dark));
  border-color: var(--btn-red-border);
}
.help-btn:hover {
  background: linear-gradient(160deg, var(--btn-red-light), var(--btn-red));
}

.sound-btn {
  position: fixed;
  top: 20px; 
  right: 20px;
  z-index: 10;
  background: rgba(244, 228, 188, 0.95);
  border: 3px solid var(--btn-brown);
  border-radius: 50%; 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;  
  height: 50px; 
  padding: 0;   
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}

.sound-btn svg {
  width: 28px;
  height: 28px;
  fill: var(--btn-brown); 
}

.sound-btn:hover {
  transform: scale(1.1);
}

.sound-btn:active {
  transform: scale(0.95);
}

.ctrl-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-family: "zabars", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  border: 3px solid var(--btn-brown);
  background: linear-gradient(145deg, var(--btn-beige), var(--btn-beige-dark));
  color: var(--btn-brown);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), var(--shadow-btn);
  text-shadow: var(--shadow-text);
  outline: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.ctrl-btn svg {
  width: 32px;
  height: 32px;
  fill: var(--btn-brown);
}

.ctrl-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));
}

.ctrl-btn:active .ctrl-icon {
  transform: translateY(1px);
}

.story-btn {
  background: linear-gradient(160deg, var(--btn-beige-light), var(--btn-beige));
  border-color: var(--btn-brown);
}

.story-btn:hover {
  background: linear-gradient(160deg, var(--btn-beige), var(--btn-beige-dark));
}