/* Parte 6 · "Vuela, corazón". Estilos aislados con la paleta de la página. */
.next-part.flappy-part { max-width: none; padding: 35px 0 30px; text-align: center; }
.flappy-intro { margin-bottom: 20px; }
.flappy-intro h2 { margin: 12px 0 14px; font: 400 clamp(2.4rem, 5vw, 3.8rem)/1.1 var(--serif); color: var(--cherry); letter-spacing: -.045em; }
.flappy-instruction { max-width: 480px; margin: 0 auto; color: var(--muted); font-size: .9375rem; line-height: 1.7; text-wrap: pretty; }
.flappy-session { width: min(100%, 400px); margin: 0 auto; padding: 12px; border: 1px solid #d9b3c0; border-radius: 19px; background: #fffaf5; box-shadow: 0 6px 0 #e9d8d4, 0 18px 45px #6b314210; }
.flappy-hud { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 0 12px; }
.flappy-hud > div + div { border-left: 1px solid #ead8df; }
.flappy-hud span, .flappy-result span { display: block; color: #79646a; font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; }
.flappy-hud strong { display: block; margin-top: 3px; font: 600 1.35rem/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.flappy-stage { position: relative; }
.flappy-canvas { display: block; width: 100%; aspect-ratio: 180 / 256; border-radius: 10px; background: #fbe2ea; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.flappy-canvas:focus-visible { outline: 3px solid var(--cherry); outline-offset: 3px; }
.flappy-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: #faf7f2b8; border-radius: 10px; }
.flappy-panel { width: min(100%, 290px); padding: 22px 20px 22px; border: 1px solid #d8adbb; border-radius: 12px; background: #fffaf5; box-shadow: 0 5px 0 #edd7dc, 0 18px 40px #6b314211; animation: flappy-pop 420ms cubic-bezier(.2,.7,.3,1) both; }
.flappy-panel-icon { display: block; width: 26px; margin: 0 auto 10px; color: var(--cherry); }
.flappy-panel-icon svg { width: 26px; height: 26px; }
.flappy-badge { display: inline-block; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: #f7e0b0; color: #7a4a0d; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.flappy-panel.is-record .flappy-panel-icon { color: #c8871f; animation: flappy-beat 800ms ease-in-out 3; }
.flappy-panel h3 { margin: 0 0 14px; font: italic 400 1.8rem/1.15 var(--serif); letter-spacing: -.035em; color: var(--cherry-dark); outline: none; }
.flappy-result { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 18px; }
.flappy-result > div + div { border-left: 1px solid #ead8df; }
.flappy-result strong { display: block; margin-top: 2px; font: 600 1.6rem/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--cherry-dark); }
.flappy-again { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; }
.flappy-again svg { width: 18px; height: 18px; }
.flappy-back { margin: 26px auto 0; }
@keyframes flappy-pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } }
@keyframes flappy-beat { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.3); } }
@media (max-width: 720px) {
  .next-part.flappy-part { padding: 24px 0 22px; }
  .flappy-intro h2 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .flappy-session { padding: 8px; border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .flappy-part *, .flappy-part *::before, .flappy-part *::after { animation: none !important; transition: none !important; }
}
.flappy-finish { margin: 26px auto 0; }
.flappy-final-button { width: min(100%, 330px); }
.flappy-finish + .flappy-back { margin-top: 14px; }