/* Catch 'em All — shared arcade-game look (matches Stack It). */
.tool { max-width: 620px; margin: 34px auto 60px; padding: 0 20px; text-align: center; }
.tool-title {
  font-family: 'Press Start 2P', monospace; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: clamp(20px, 5vw, 40px); text-shadow: 5px 5px 0 var(--ink);
}
.tool-sub { display: inline-block; margin: 16px 0 22px; background: var(--lime); padding: 8px 14px; font-size: 15px; }
.tool-note { display: inline-block; margin-top: 22px; background: var(--lime); padding: 8px 14px; font-size: 13px; }

.cabinet { border: var(--px) solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--lime); padding: 16px; }
.screen {
  position: relative; border: var(--px) solid var(--ink); background: var(--lime);
  width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 480 / 620; overflow: hidden;
}
#game { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: none; }
.hint { margin-top: 12px; font-size: 12px; }

.hud { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 12px; pointer-events: none; }
.hud-score { font-family: 'Press Start 2P', monospace; font-size: 12px; letter-spacing: 0.1em; }
.hud-lives { display: flex; gap: 5px; }
.hud-lives img { width: 26px; height: 26px; image-rendering: pixelated; }

.combo {
  position: absolute; left: 12px; bottom: 12px; transform-origin: left bottom;
  font-family: 'Press Start 2P', monospace; font-size: 13px; opacity: 0;
}
.combo.pop { animation: combo-pop 0.5s steps(3) forwards; }
@keyframes combo-pop { 0% { opacity: 1; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1); } }

.overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; background: var(--lime);
}
.overlay[hidden] { display: none; }   /* author rule must beat UA [hidden] */
.ov-title { font-family: 'Press Start 2P', monospace; text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(18px, 5vw, 30px); text-shadow: 4px 4px 0 var(--ink); }
.ov-score { font-family: 'Press Start 2P', monospace; font-size: 14px; }
.blink { font-family: 'Press Start 2P', monospace; font-size: 12px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.shake { animation: shake 0.24s steps(2) 2; }
@keyframes shake { 0% { transform: translate(0,0); } 25% { transform: translate(-2px,1px); } 75% { transform: translate(2px,-1px); } 100% { transform: translate(0,0); } }