/* BREAKTHROUGH — styles */
:root {
  --bg: #05060f;
  --ink: #e8f0ff;
  --dim: #8b95b5;
  --accent: #5eead4;
  --accent2: #fbbf24;
  --danger: #f87171;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: "Avenir Next", Avenir, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: none;
  position: fixed; inset: 0; width: 100%;
}
#app { position: absolute; inset: 0; overflow: hidden; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud {
  position: absolute; left: 0; right: 0;
  top: calc(var(--safe-t) + 6px);
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 calc(var(--safe-r) + 12px) 0 calc(var(--safe-l) + 12px);
  pointer-events: none; z-index: 5;
  font-variant-numeric: tabular-nums;
}
.hud-left { display: flex; gap: 16px; }
.hud-item { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.hud-label { font-size: 9px; letter-spacing: .18em; color: var(--dim); }
.hud-item span:last-child { font-size: 16px; font-weight: 700; text-shadow: 0 0 8px rgba(94,234,212,.35); }
#hud-lives { color: #ff7b9c; letter-spacing: 2px; }
.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#mult-meter {
  position: relative; width: 120px; height: 16px; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
#mult-fill {
  position: absolute; inset: 0; width: 0%;
  background: linear-gradient(90deg, #5eead4, #fbbf24 60%, #fb7185);
  transition: width .12s linear;
}
#mult-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #fff; text-shadow: 0 1px 2px #000;
}
#power-icons { display: flex; gap: 6px; }
.power-icon {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px #000;
  background: conic-gradient(var(--c, #5eead4) calc(var(--p, 100) * 1%), rgba(255,255,255,.09) 0);
}
.power-icon i {
  font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: #0b0e1d;
  display: flex; align-items: center; justify-content: center;
}

#btn-pause {
  position: absolute; right: calc(var(--safe-r) + 10px);
  bottom: calc(var(--safe-b) + 10px); z-index: 6;
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(10,14,30,.55); color: var(--ink); font-size: 13px; cursor: pointer;
}

/* ---------- Overlay screens ---------- */
#overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.screen {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 20px);
  text-align: center; background: rgba(4,6,16,.82); backdrop-filter: blur(6px);
  pointer-events: auto; overflow: hidden;
}
.screen.visible { display: flex; }
.screen h1, .screen h2 { letter-spacing: .06em; }
.title { font-size: clamp(34px, 9vw, 64px); font-weight: 900; line-height: 1; }
.title span { color: var(--accent); text-shadow: 0 0 24px rgba(94,234,212,.55); }
.tagline { color: var(--dim); font-size: 14px; line-height: 1.5; }
.tagline b { color: var(--accent2); }
.hint { font-size: 11px; color: var(--dim); letter-spacing: .06em; }
.dim { color: var(--dim); }
#over-summary { font-size: 12px; margin-top: 4px; letter-spacing: .08em; }
.big-score { font-size: 40px; font-weight: 900; color: var(--accent); }

.btn {
  font: inherit; font-weight: 700; letter-spacing: .08em; cursor: pointer;
  padding: 12px 34px; border-radius: 14px; font-size: 15px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: var(--ink);
  transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(.96); }
.btn.primary {
  background: linear-gradient(180deg, #14b8a6, #0d9488); border-color: rgba(94,234,212,.6);
  box-shadow: 0 0 24px rgba(20,184,166,.45); color: #03110f;
}
.btn.link { border: none; background: none; color: var(--accent); font-weight: 500; text-decoration: underline; padding: 6px; }
.stack { display: flex; flex-direction: column; gap: 10px; width: min(280px, 80vw); }

/* banner */
/* banner — sits below the brick zone so it never overlaps the wall (esp. mobile) */
#banner {
  position: absolute; left: 0; right: 0; top: 62%; text-align: center; pointer-events: none; z-index: 12;
}
#banner-main {
  font-size: clamp(34px, 9vw, 72px); font-weight: 900; letter-spacing: .04em;
  color: #fff; text-shadow: 0 0 30px var(--accent2), 0 3px 0 rgba(0,0,0,.4);
}
#banner-sub { font-size: 15px; color: var(--accent); letter-spacing: .2em; margin-top: 4px; }
#banner.show { animation: bannerPop 1.6s ease forwards; }
#banner.frenzy #banner-main { color: #fff; text-shadow: 0 0 34px #fb7185, 0 0 60px #fbbf24; }
@keyframes bannerPop {
  0% { opacity: 0; transform: scale(.6); }
  12% { opacity: 1; transform: scale(1.08); }
  22% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04) translateY(-12px); }
}

/* legend */
.legend-panel {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 12px 16px; max-width: 560px; width: min(560px, 92vw);
  font-size: 12px; text-align: left; line-height: 1.45; color: var(--dim);
}
.legend-panel h3 { color: var(--ink); font-size: 12px; letter-spacing: .14em; margin: 10px 0 4px; text-transform: uppercase; }
.legend-panel h3:first-child { margin-top: 0; }
.legend-panel p b { color: var(--accent2); }
.legend-panel.small { padding: 10px 12px; }
.legend-panel.small .legend-bricks { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
#screen-legend { justify-content: flex-start; padding-top: calc(var(--safe-t) + 24px); overflow: hidden; }
#screen-legend h2 { flex: none; }
.legend-scroll { flex: 1 1 auto; min-height: 0; max-height: none; width: 100%; display: flex; justify-content: center; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.legend-scroll .legend-panel { margin: 0; }
#screen-legend .btn.primary { flex: none; margin-top: 12px; }
.legend-bricks.full, .legend-powers { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin-top: 4px; }
.leg-row { display: flex; align-items: center; gap: 8px; }
.leg-swatch {
  width: 26px; height: 13px; border-radius: 3px; flex: none;
  box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent);
  position: relative;
}
.leg-swatch::after { content: attr(data-glyph); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; color: #05060f; }
.leg-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 8px var(--c); }
.leg-row small { display: block; color: var(--dim); font-size: 10px; }
.leg-row b { color: var(--ink); font-size: 11px; }

@media (max-height: 620px) {
  .title { font-size: 34px; } .tagline { font-size: 12px; }
  .legend-panel.small .legend-bricks { grid-template-columns: 1fr 1fr; font-size: 10px; }
}