/* --- BRICK ANIMATION COMPONENT STYLES --- */
.brick-animation-container {
  width: 100%;
  max-width: 600px; /* Reduced for better layout fit */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  background: transparent;
  user-select: none;
  position: relative;
  right: 0; 
}

#brick-stage {
  width: 100%; /* Making stage fluid */
  max-width: 600px;
  height: 400px; /* Reduced fixed height for stability */
  position: relative;
  pointer-events: none;
}

#brick-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- HIGH-FIDELITY SKEUOMORPHIC KEYBOARD UI --- */
.keyboard-plate {
  background: transparent;
  padding: 16px;
  display: flex;
  gap: 12px; /* Slight increase in gap since the chassis borders are gone */
  margin-top: 20px;
  position: relative;
}

.key-btn {
  width: 44px;
  height: 40px;
  position: relative;
  background: #111111; /* TeamUp Black base */
  border: none;
  border-radius: 10px; /* Big rounding for pillowy look */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #eeeeee;
  /* Deep ISO structure through shadows */
  /* Top-left light reflection, bottom-right shadow, plus deep drop base */
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.2),
    /* Bright top left bevel */ inset -3px -3px 5px rgba(0, 0, 0, 0.9),
    /* Dark bottom right inner */ 0 6px 0 #000,
    /* 3D Depth lip */ 0 10px 15px rgba(0, 0, 0, 0.5); /* Outer drop shadow */
  transition: all 0.1s ease;
  transform: translateY(-6px);
}

.key-btn:active,
.key-btn.active {
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.1),
    inset -2px -2px 5px rgba(0, 0, 0, 0.9),
    0 0 0 #000,
    0 2px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(0px);
}

.key-btn span {
  position: relative;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  display: block;
}

/* Distinct Orange Key for Special Action (!) */
.key-btn[data-key="!"] {
  background: var(--color-signal); /* TeamUp Orange */
  color: #ffffff;
  box-shadow:
    inset 2px 2px 6px rgba(255, 255, 255, 0.6),
    /* Vibrant highlight edge */ inset -3px -3px 6px rgba(150, 40, 0, 0.9),
    /* Dark orange inner shading */ 0 6px 0 #993300,
    /* Dense orange depth */ 0 10px 15px rgba(0, 0, 0, 0.5);
}

.key-btn[data-key="!"]:active,
.key-btn[data-key="!"].active {
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.5),
    inset -2px -2px 5px rgba(150, 40, 0, 0.8),
    0 0 0 #993300,
    0 2px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(0px);
}

@media (max-width: 991px) {
  .brick-animation-container {
    display: none;
  }
}