/* ===========================================================================
   BRICK BREAKER — neon bricks and a paddle (drawn in js/games/breaker.js)
   =========================================================================== */

.breaker-host {
  inset: 4px 8px 8px;
  cursor: default;
}

/* A tall phone: board at the top, and the space below it is somewhere for
   your thumb to drag without covering anything. */
@media (max-aspect-ratio: 4/5) {
  .breaker-host {
    align-items: flex-start;
    inset: 6px 8px 8px;
  }
}

@media (max-aspect-ratio: 4/5) and (pointer: coarse) {
  .breaker-host::after {
    content: '⟷  Drag anywhere';
    position: absolute;
    left: 50%;
    bottom: 4%;
    translate: -50% 0;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--arena-ink-3);
    opacity: 0.6;
    pointer-events: none;
  }
}

/* Playing with a mouse, the paddle is the cursor. */
@media (pointer: fine) {
  .breaker-host.is-live { cursor: none; }
}

/* "Level 4 of 10 · Short Fuse", dropping in with the bricks. */
.breaker-banner {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 26px 14px;
  border-radius: var(--r-lg);
  background: rgba(6, 3, 20, 0.84);
  border: 1px solid color-mix(in srgb, var(--game-accent) 45%, transparent);
  box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.8), 0 0 40px -12px var(--game-glow);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  translate: -50% calc(-50% - 12px);
  transition: opacity 0.25s var(--ease), translate 0.25s var(--ease);
}

.breaker-banner.show {
  opacity: 1;
  translate: -50% -50%;
}

.breaker-banner small {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--arena-ink-3);
}

.breaker-banner strong {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.breaker-banner span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--game-accent);
}

/* "Tap to launch", just above the paddle. */
.breaker-prompt {
  position: absolute;
  left: 50%;
  top: 78%;
  z-index: 2;
  translate: -50% -50%;
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--game-accent);
  background: rgba(6, 3, 20, 0.78);
  border: 1px solid color-mix(in srgb, var(--game-accent) 45%, transparent);
  box-shadow: 0 0 24px -6px var(--game-glow);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}

.breaker-prompt.show {
  opacity: 1;
  animation: breaker-prompt 1.5s ease-in-out infinite;
}

@keyframes breaker-prompt {
  50% { box-shadow: 0 0 34px -2px var(--game-glow); color: #fff; }
}

/* --- Setup: mode, and the ten levels in miniature --- */
.breaker-picks {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: 100%;
}

.breaker-picks .seg { width: 100%; }

.breaker-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.breaker-strip li {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 6px 4px 4px;
  border-radius: var(--r-sm);
  background: var(--arena-chip);
  border: 1px solid var(--arena-line);
}

.breaker-thumb {
  width: 100%;
  max-width: 64px;
  height: auto;
  aspect-ratio: 3 / 2;
  image-rendering: pixelated;
}

.breaker-strip span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--arena-ink-3);
}

.breaker-note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--arena-ink-2);
  text-align: center;
}

.breaker-note strong { color: #FF3B4E; }

/* --- Results: how far the campaign got --- */
.breaker-track {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
}

.breaker-track li {
  display: grid;
  place-items: center;
  height: 26px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--arena-ink-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--arena-line);
}

.breaker-track li.is-done {
  color: #1A0A02;
  background: var(--game-accent);
  border-color: transparent;
  box-shadow: 0 0 14px -4px var(--game-glow);
}

.breaker-track li.is-fell {
  color: #FFD2D6;
  background: rgba(255, 59, 78, 0.22);
  border-color: rgba(255, 59, 78, 0.6);
}

@media (max-width: 420px) {
  .breaker-strip { gap: 4px; }
  .breaker-track { gap: 3px; }
}

/* --- Menu card preview: a rally against four rows of bricks --- */
.pv-breaker {
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 110%, rgba(255, 106, 61, 0.22), transparent 60%),
    linear-gradient(180deg, #0A0420, #06031A 70%, #120318);
  box-shadow: inset 0 0 0 1.2cqw #04060F, inset 0 0 0 1.6cqw #2ED8FF, inset 0 0 4cqw 1.6cqw rgba(46, 216, 255, 0.45);
}

/* A row of six bricks each. */
.pv-breaker i {
  left: 10%;
  right: 10%;
  height: 6.6%;
  top: calc(14% + var(--n) * 9%);
  --tint: #FF2E88;
  background: repeating-linear-gradient(90deg, var(--tint) 0 calc(16.666% - 1cqw), transparent calc(16.666% - 1cqw) 16.666%);
  filter: drop-shadow(0 0 1.6cqw var(--tint));
  border-radius: 1cqw;
}

.pv-breaker i:nth-child(1) { --n: 0; --tint: #FF2E88; }
.pv-breaker i:nth-child(2) { --n: 1; --tint: #FF6A3D; }
.pv-breaker i:nth-child(3) { --n: 2; --tint: #FFD447; }
.pv-breaker i:nth-child(4) {
  --n: 3;
  --tint: #2ED8FF;
  /* Two bricks already broken. */
  -webkit-mask-image: linear-gradient(90deg, #000 33.33%, transparent 33.33% 66.66%, #000 66.66%);
  mask-image: linear-gradient(90deg, #000 33.33%, transparent 33.33% 66.66%, #000 66.66%);
}

/* The ball zigzags between paddle and bricks. */
.pv-breaker b {
  width: 3.6cqw;
  height: 3.6cqw;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFFFFF, #9FE8FF);
  box-shadow: 0 0 2.6cqw rgba(190, 246, 255, 0.85);
  animation: pv-breaker-ball 2.6s linear infinite;
}

@keyframes pv-breaker-ball {
  0%   { left: 30%; top: 79%; }
  25%  { left: 52%; top: 49%; }
  50%  { left: 74%; top: 79%; }
  75%  { left: 52%; top: 49%; }
  100% { left: 30%; top: 79%; }
}

/* The paddle meets it at each end. */
.pv-breaker em {
  top: 82%;
  width: 22%;
  height: 4cqw;
  translate: -50% 0;
  border-radius: 99px;
  background: linear-gradient(180deg, #FFE2D2, #FF6A3D 40%, #5A1606);
  box-shadow: 0 0 3cqw rgba(255, 106, 61, 0.7), inset 2.6cqw 0 0 -1cqw #2ED8FF, inset -2.6cqw 0 0 -1cqw #2ED8FF;
  animation: pv-breaker-paddle 2.6s ease-in-out infinite;
}

@keyframes pv-breaker-paddle {
  0%, 100% { left: 30%; }
  50% { left: 74%; }
}