@import url('../global.css');

/* =============================================================================
   Breakout — game-specific styles (frame/controls/score-bar = shared).
   ========================================================================== */

/* --- Square board: ball/paddle/bricks positioned in % by the JS. --- */
.breakout-board {
  background: var(--background-color-dark);
  touch-action: none;
}

/* --- Bricks ---
   Each brick layers a diagonal gloss over its solid colour (like the Tetris
   cells) plus a thin top highlight, for a bit of depth instead of a flat fill. */
.brick {
  position: absolute;
  border-radius: var(--border-radius-xs);
  box-shadow:
    var(--shadow-xs),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* A destroyed brick disappears (the JS model marks it `alive = false`). */
.brick.is-broken {
  display: none;
}

/* Reinforced (multi-hit) bricks wear a dark "armour" ring that thins as they
   crack (hp counts down 3 → 2 → 1), then break like a normal brick. */
.brick[data-hp='2'] {
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.4),
    var(--shadow-xs);
}
.brick[data-hp='3'] {
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.55),
    var(--shadow-xs);
  filter: brightness(0.82) contrast(1.1);
}

.brick--1 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 55%), var(--breakout-brick-1);
}
.brick--2 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 55%), var(--breakout-brick-2);
}
.brick--3 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 55%), var(--breakout-brick-3);
}
.brick--4 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 55%), var(--breakout-brick-4);
}
.brick--5 {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, transparent 55%), var(--breakout-brick-5);
}

/* --- Paddle --- */
.paddle {
  position: absolute;
  background: var(--breakout-paddle);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-sm);
}

/* --- Ball --- */
.ball {
  position: absolute;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0 12%, transparent 45%),
    var(--breakout-ball);
  border-radius: 50%;
  box-shadow:
    var(--shadow-sm),
    0 0 8px 2px rgba(255, 255, 255, 0.45);
}