/* ============ Love Brick Breaker Container ============ */
#love-brick-breaker {
  position: relative;
  max-width: 900px;
  margin: 150px auto;
  padding: 20px 16px 24px;
  border-radius: 18px;

  /* NEW soft yellow container */
    background: radial-gradient(circle at top, #fff8ce 0%, /* pale vanilla */ #ffeaa2 40%, /* soft yellow */ #c6eca9 70%, /* warm apricot */ #f7cd19 100% /* golden honey */);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #3b0c26;
}

/* Title */
.lbb-title {
  text-align: center;
  margin: 0 0 8px;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #474546;
}

/* === MOBILE WARNING (hidden on desktop) === */
.lbb-mobile-note {
  display: none;
}

@media (max-width: 600px) {
  .lbb-mobile-note {
    display: block;
    text-align: center;
    margin: 10px auto 20px;
    font-size: 0.9rem;
    line-height: 1.4em;
    color: #b30059;
    opacity: 0.85;
    max-width: 95%;
  }
}

/* Canvas wrapper */
.lbb-canvas-wrapper {
  position: relative;
  width: 100%;
}

/* ====== Play Area ====== */
#lbb-canvas {
  display: block;
  width: 100%;

  /* NEW Yellow gradient background */
  background: radial-gradient(circle at top,
      #fff9d6 0%,    /* light vanilla */
      #ffe89c 50%,   /* pastel yellow */
      #ffd26b 100%   /* warm golden peach */
  );

  border-radius: 14px;

  /* optional soft golden glow */
  box-shadow:
      inset 0 4px 10px rgba(0, 0, 0, 0.2),
      0 0 14px rgba(255, 200, 50, 0.3);

  margin: 0 auto;
}

/* ====== Win/Lose message ====== */
.lbb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #a0004f;

  background: rgba(255, 240, 248, 0.70);
  border-radius: 14px;
  z-index: 10;
}

/* UI Buttons + Stats */
.lbb-ui {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 14px;
}

.lbb-ui button {
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  background: linear-gradient(135deg, #ff2f7c, #ff6fb1);
  color: #fff;
  box-shadow: 0 4px 10px rgba(160, 0, 79, 0.4);
  transition: 0.15s;
}

.lbb-ui button:hover {
  transform: translateY(-1px);
}

.lbb-ui button:active {
  transform: translateY(1px);
  opacity: 0.9;
}

.lbb-stats {
  display: flex;
  gap: 16px;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Instructions */
.lbb-instructions {
  text-align: center;
  margin: 25px auto 12px;
  font-size: 0.9rem;
  color: #5a2141;
}

/* Hidden default message area */
.lbb-message {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ========= MOBILE LAYOUT TWEAKS ========= */
@media (max-width: 600px) {
  #love-brick-breaker {
    margin: 24px 12px;
    padding: 16px 12px 20px;
  }

  .lbb-title {
    font-size: 1.4rem;
  }

  .lbb-overlay {
    font-size: 1.3rem;
  }
}