#contenido { max-width: 1020px; }

.water-scene { position: relative; height: 280px; overflow: hidden; border: 3px solid #cce5f6; border-radius: 22px; background: linear-gradient(#bfe8fb 0%, #e9f8ff 66%, #5daede 66%, #3395ce 100%); box-shadow: 0 7px 20px rgba(66, 128, 170, .15); }
.water-line { position: absolute; bottom: 32%; width: 100%; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 25px, rgba(255,255,255,.65) 26px 48px); opacity: .85; animation: wave 88.0s linear infinite; }
.sun { position: absolute; top: 28px; right: 10%; width: 52px; height: 52px; border-radius: 50%; background: #ffd66b; box-shadow: 0 0 0 9px rgba(255,214,107,.2); }
.cloud { position: absolute; width: 100px; height: 25px; border-radius: 30px; background: rgba(255,255,255,.82); }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }
.cloud::before { width: 44px; height: 44px; left: 18px; }.cloud::after { width: 32px; height: 32px; left: 54px; }
.cloud-one { top: 68px; left: 12%; }.cloud-two { top: 126px; right: 17%; transform: scale(.7); }

.boat { position: absolute; bottom: 21%; width: 150px; height: 86px; z-index: 2; }
.boat-left { left: 4%; }.boat-right { right: 4%; transform: scaleX(-1); }
.boat-hull { position: absolute; bottom: 0; width: 150px; height: 42px; border-radius: 8px 8px 48px 48px; background: #8e5337; border-bottom: 8px solid #643620; box-shadow: inset 0 9px #bd7449; }
.boat-hull::after { content: ""; position: absolute; top: 18px; left: 16px; width: 15px; height: 5px; border-radius: 5px; background: #f6d47a; box-shadow: 32px 0 #f6d47a, 64px 0 #f6d47a, 96px 0 #f6d47a; }
.boat-cabin { position: absolute; left: 42px; bottom: 40px; width: 67px; height: 40px; border-radius: 5px 5px 0 0; background: #f7ead0; border-top: 8px solid #cc754d; }
.boat-cabin::before { content: ""; position: absolute; left: -8px; top: -16px; width: 83px; height: 9px; border-radius: 4px; background: #9c5b3c; }

.traveler { position: absolute; z-index: 5; width: 116px; height: 230px; bottom: 36%; left: 9%; transition: left 2.3s ease-in-out, bottom 1.4s ease-in, transform 1.3s ease-in; }
.traveler.flying { left: calc(50% - 58px); bottom: 34%; animation: float 1.7s ease-in-out infinite; }
.traveler.winner { left: calc(86% - 58px); bottom: 34%; animation: float 1.7s ease-in-out infinite; }
.traveler.falling { left: calc(50% - 58px); bottom: 4%; transform: rotate(75deg); animation: none; }
.person { position: absolute; bottom: 0; left: 43px; width: 32px; height: 83px; }
.person-head { position: absolute; top: 0; left: 8px; width: 18px; height: 21px; border-radius: 48% 48% 45% 45%; background: #dd9c72; border-top: 5px solid #463229; }
.person-body { position: absolute; top: 23px; left: 6px; width: 21px; height: 34px; border-radius: 8px 8px 4px 4px; background: #5b75bd; }
.person-arm, .person-leg { position: absolute; display: block; width: 7px; border-radius: 6px; transform-origin: top; }
.person-arm { top: 28px; height: 39px; background: #dd9c72; }.arm-left { left: 4px; transform: rotate(38deg); }.arm-right { right: 2px; transform: rotate(-38deg); }
.person-leg { top: 53px; height: 34px; background: #31466b; }.leg-left { left: 8px; transform: rotate(14deg); }.leg-right { right: 7px; transform: rotate(-14deg); }
.balloon-set { position: absolute; top: 0; left: 0; width: 116px; height: 172px; }
.balloon { position: absolute; width: 31px; height: 40px; border-radius: 50% 50% 48% 48%; background: #ef6f6c; box-shadow: inset -7px -7px rgba(0,0,0,.08); transform-origin: center; transition: opacity .25s, transform .25s; }
.balloon::after { content: ""; position: absolute; left: 12px; bottom: -5px; width: 8px; height: 8px; transform: rotate(45deg); background: inherit; }
.balloon.popped { opacity: 0; transform: scale(1.8); }
.balloon-1 { left: 1px; top: 82px; background: #ef6f6c; }.balloon-2 { left: 29px; top: 75px; background: #f5b74a; }.balloon-3 { left: 59px; top: 51px; background: #66a6df; }.balloon-4 { left: 79px; top: 70px; background: #a96cc0; }.balloon-5 { left: 46px; top: 60px; background: #84b070; }.balloon-6 { left: 64px; top: 82px; background: #ed8983; }
.string { position: absolute; z-index: -1; bottom: 7px; width: 1px; height: 76px; background: #577590; transform-origin: bottom; }
.string-1 { left: 30px; transform: rotate(-18deg); }.string-2 { left: 54px; transform: rotate(-10deg); }.string-3 { left: 72px; transform: rotate(2deg); }.string-4 { left: 80px; transform: rotate(16deg); }.string-5 { left: 65px; transform: rotate(-2deg); }.string-6 { left: 76px; transform: rotate(5deg); }
.splash { position: absolute; z-index: 7; bottom: 24%; left: calc(50% - 41px); width: 82px; height: 34px; opacity: 0; transition: opacity .2s; }.splash.show { opacity: 1; animation: splash .75s ease-out; }
.splash span { position: absolute; bottom: 0; width: 13px; height: 30px; border-radius: 80% 0 80% 0; background: #dff7ff; }.splash span:nth-child(1) { left: 8px; transform: rotate(-34deg); }.splash span:nth-child(2) { left: 34px; height: 35px; transform: rotate(-7deg); }.splash span:nth-child(3) { right: 8px; transform: rotate(27deg); }
.string.popped { opacity: 0; transform: scale(1.8); }

.word-panel { padding: 1.4rem 1rem .7rem; text-align: center; }.word-instruction { margin-bottom: 1rem; color: #607d90; font-weight: 600; }
.word-slots { display: flex; justify-content: center; flex-wrap: wrap; gap: .48rem; min-height: 57px; }
.letter-slot { display: grid; place-items: center; width: 44px; height: 52px; border: 2px solid #a8cce5; border-radius: 8px; background: #fff; color: var(--blue); font-size: 1.55rem; font-weight: 800; text-transform: uppercase; box-shadow: 0 3px 0 #d9eaf5; }
.letter-slot.revealed { border-color: var(--green); background: #f2f8ed; animation: reveal .3s ease; }
.controls-panel { padding: .8rem 0 1.8rem; }.alphabet { display: flex; max-width: 690px; justify-content: center; gap: .45rem; flex-wrap: wrap; margin: auto; }

.letter-key { width: 42px; height: 42px; border: 0; border-radius: 8px; color: var(--ink); background: #ecf6fc; box-shadow: 0 3px 0 #bfdceb; font-weight: 800; transition: transform .15s, background .15s; }
.letter-key:disabled { cursor: default; opacity: 1; }
.letter-key.correct { background: var(--green); box-shadow: 0 3px 0 #628a51; color: #fff; }
.letter-key.incorrect { background: var(--red); box-shadow: 0 3px 0 #9f4040; color: #fff; }
.letter-key.pending { opacity: .52; }
.letter-key:active {
  transform: translateY(-2px); background: #d8effb;
}

.result-title { color: var(--blue); font-size: 1.45rem; font-weight: 800; }.result-detail { margin: .45rem 0; color: #486b85; }.meaning-box { margin-top: 1rem; padding: 1rem; border-radius: 10px; background: #f3f9fc; color: #486b85; text-align: left; }
@keyframes float { 50% { transform: translateY(-10px); } } 
/*@keyframes wave { to { background-position-x: 100px; } } */
@keyframes wave {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: 1920px; /* El signo negativo lo mueve hacia la izquierda; usa 48px si lo quieres hacia la derecha */
  }
}
@keyframes reveal { 50% { transform: scale(1.18); } } @keyframes splash { 50% { transform: scale(1.24); } 100% { transform: scale(.8); } }
@media (max-width: 575.98px) { .water-scene { height: 280px; }.boat { transform: scale(.68); transform-origin: bottom; }.boat-left { left: -23px; }.boat-right { right: -23px; transform: scaleX(-1) scale(.68); }.sun { right: 16px; }.cloud-two { display: none; }.traveler.flying, .traveler.falling { left: calc(50% - 58px); }.traveler.winner { left: calc(100% - 100px); }.letter-key { width: 36px; height: 39px; }.letter-slot { width: 38px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (hover: hover) {
  .letter-key:not(:disabled):hover { transform: translateY(-2px); background: #d8effb; }
}