/* 打砖块 · 局部样式（页面骨架、HUD、按钮、遮罩见 /games/assets/base.css） */

/* ---------- 场地：灰外框 + 奶油田地 ---------- */

/* 外框跟着球场走，避免宽屏下灰边留白 */
.frame {
  display: block;
  max-width: 420px;
  margin: 0 auto;
}

.stage { width: 100%; }

.stage.shake { animation: shake 0.45s ease-in-out; }

canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border-radius: var(--radius);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

canvas:focus { outline: none; }
canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 掉球时场地边缘红闪 */
.flash {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  opacity: 0;
}
.flash.on { animation: flash-edge 0.5s ease-out both; }

@keyframes flash-edge {
  0% {
    opacity: 1;
    background: rgba(239, 71, 111, 0.07);
    box-shadow: inset 0 0 30px 12px rgba(239, 71, 111, 0.62);
  }
  100% {
    opacity: 0;
    background: rgba(239, 71, 111, 0);
    box-shadow: inset 0 0 0 0 rgba(239, 71, 111, 0);
  }
}

/* 过场提示：第 N 关 / 已暂停 */
.toast {
  position: absolute;
  left: 50%;
  top: 42%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 24px;
  background: var(--cell);
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.toast.on { visibility: visible; animation: toast-in 1.2s ease-in-out both; }
.toast.on.hold { animation: none; opacity: 1; }
.toast-main { font-size: 1.4rem; line-height: 1.25; }
.toast-sub { font-size: 0.8rem; color: var(--muted); }

@keyframes toast-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- HUD：生命心形 ---------- */

.hud { flex-wrap: wrap; gap: 22px; }

/* .float 在分数右侧飘字，给这块留出空间，避免压到下一项 */
.hud-score { margin-right: 30px; }

.hearts {
  margin-left: 6px;
  color: var(--c2);
  font-size: 1.25rem;
  letter-spacing: 1px;
  line-height: 1;
}
.hearts i { font-style: normal; display: inline-block; }
.hearts i.off { color: var(--muted); opacity: 0.35; }
.hearts i.hit { animation: heart-out 0.55s ease-out; }

@keyframes heart-out {
  0% { transform: scale(0.4); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- 窄屏 ---------- */

@media (max-width: 440px) {
  .hud { gap: 14px; font-size: 0.9rem; }
  .hud b { font-size: 1.2rem; }
  .toast { padding: 8px 16px; }
  .toast-main { font-size: 1.15rem; }
}