.flappy-moe { max-width: 900px; margin: 28px auto 0; }
.flappy-moe-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.flappy-moe-header p { margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.flappy-moe-header h2 { margin: 0; font-size: clamp(28px, 5vw, 36px); letter-spacing: -.04em; }
.flappy-moe-header strong { white-space: nowrap; font-size: 14px; font-variant-numeric: tabular-nums; }
.flappy-moe-instructions { color: var(--muted); font-size: 14px; line-height: 1.6; }
.flappy-moe-arena { position: relative; overflow: hidden; border: 1px solid #637f80; border-radius: 16px; background: #bde0e8; }
.flappy-moe canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: pointer; }
.flappy-moe canvas:focus-visible { outline: 3px solid #c19c42; outline-offset: -3px; }
.flappy-moe-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: rgb(15 33 45 / 88%); color: #fff9ed; text-align: center; }
.flappy-moe-overlay--pass-through { pointer-events: none; }
.flappy-moe-overlay img { width: min(232px, 45vw); height: auto; max-height: 42%; object-fit: contain; }
.flappy-moe-overlay h3 { margin: 0; font-size: clamp(24px, 4vw, 36px); }
.flappy-moe-overlay p { max-width: 380px; margin: 0; color: #d9e4e6; font-size: 14px; line-height: 1.6; }
@media (max-width: 600px) {
  .flappy-moe-header { align-items: end; }
  .flappy-moe-overlay { padding: 18px; }
}