/* ---------- shared game shell ---------- */
.game-stage {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-bg);
  background-image: var(--pattern-grid);
  touch-action: none;
}
.game-hud {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(var(--safe-top) + var(--sp-2)) var(--sp-3) var(--sp-2);
  background: var(--c-surface);
  border-bottom: var(--bw-sticker) solid var(--c-shadow);
  z-index: 3;
}
.game-hud .g-score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  min-width: 64px;
  text-align: center;
  color: var(--c-accent-deep);
}
.game-hud .g-side { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.hearts { display: flex; gap: 4px; font-size: 20px; color: var(--c-danger); }
.hearts .off { color: var(--c-line); }

.game-canvas-wrap { position: relative; flex: 1; }
.game-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* start / game-over overlays */
.game-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-overlay);
  padding: var(--sp-4);
}
.game-card {
  background: var(--c-surface);
  border: var(--bw-chunky) solid var(--c-shadow);
  border-radius: var(--r-wonky);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 320px;
  width: 100%;
  animation: pop-in var(--t-pop) var(--ease-bounce);
}
.game-card h2 { font-size: var(--fs-2xl); }
.game-card .g-final {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--c-accent-deep);
}
.game-card .g-best { color: var(--c-ink-soft); font-family: var(--font-display); }
.g-record {
  font-family: var(--font-display);
  color: var(--pal-sun-deep);
  background: var(--pal-cream);
  border: var(--bw-sticker) solid var(--pal-sun-deep);
  border-radius: var(--r-pill);
  padding: 3px 14px;
  animation: pop-in 0.4s var(--ease-bounce);
}

/* red flash when hit */
.flash-bad { position: absolute; inset: 0; z-index: 4; background: rgba(217, 83, 79, 0.28); opacity: 0; pointer-events: none; }
.flash-bad.on { animation: flash-fade 0.35s; }
@keyframes flash-fade { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 67 game ---------- */
.g67-timeline {
  height: 10px;
  background: var(--c-surface-2);
  border-bottom: var(--bw-thin) solid var(--c-line);
  position: relative;
  z-index: 3;
}
.g67-timeline i {
  display: block;
  height: 100%;
  background: var(--c-accent);
  transform-origin: right;
}
.g67-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4);
  z-index: 1;
}
.g67-grid.locked { pointer-events: none; filter: saturate(0.6); }
.g67-tile {
  border: var(--bw-chunky) solid var(--c-shadow);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 9vw, 44px);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  cursor: pointer;
  padding: 0;
}
.g67-tile.up { visibility: visible; animation: pop-in 0.14s var(--ease-bounce); }
.g67-tile.hit { background: var(--st-shipped); color: #fff; border-color: var(--pal-grass-deep); }
.g67-tile.bad { background: var(--c-danger); color: #fff; border-color: #A33B38; animation: wobble 0.3s; }

.combo-meter {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--pal-blast-deep);
}
.combo-meter .cm-x { font-size: var(--fs-xl); }

.shake { animation: screen-shake 0.45s; }
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-9px, 4px) rotate(-0.6deg); }
  35% { transform: translate(8px, -5px) rotate(0.6deg); }
  55% { transform: translate(-6px, 3px); }
  75% { transform: translate(5px, -2px); }
}

.blast-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--pal-sun);
  pointer-events: none;
  animation: blast-in 0.7s var(--ease-bounce) forwards;
}
.blast-overlay .blast-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(52px, 18vw, 96px);
  color: var(--pal-night);
  text-shadow: 4px 4px 0 var(--pal-blast);
  transform: rotate(-4deg);
}
@keyframes blast-in {
  0% { opacity: 0; transform: scale(1.06); }
  12% { opacity: 1; transform: scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- games hub ---------- */
.game-hub-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: var(--bw-chunky) solid var(--c-shadow);
  border-radius: var(--r-wonky);
  box-shadow: var(--shadow-card);
  color: var(--c-ink);
  transition: transform var(--t-fast);
}
.game-hub-card:nth-child(even) { border-radius: var(--r-wonky-2); }
.game-hub-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-shadow); }
.game-hub-card .gh-icon {
  width: 58px; height: 58px;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  border: var(--bw-sticker) solid var(--c-shadow);
  font-size: 24px;
}
.game-hub-card h3 { font-size: var(--fs-xl); }
.game-hub-card .gh-best { font-size: var(--fs-sm); color: var(--c-ink-soft); font-family: var(--font-display); }
.gh-top {
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); color: var(--c-ink-faint);
}