/* ========== EL CAMINO DE LA RANITA ========== */
.rn-home-banner {
    display: flex; align-items: center; gap: 16px;
    background: linear-gradient(135deg, #7ed957, #2bb673);
    color: #fff; border-radius: 22px; padding: 18px 22px; margin: 0 0 22px;
    box-shadow: 0 6px 0 #1e8a55, var(--shadow-lg); cursor: pointer;
    transition: transform .15s;
}
.rn-home-banner:active { transform: translateY(3px); box-shadow: 0 3px 0 #1e8a55; }
.rn-home-frog { font-size: 3.4rem; animation: bounce 2s infinite; }
.rn-home-banner h3 { font-size: 1.5rem; font-weight: 900; }
.rn-home-banner p { font-size: 1rem; opacity: .95; }
.rn-home-go { margin-left: auto; font-size: 2rem; background: rgba(255,255,255,.25); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.rn-wrap {
    max-width: 760px; margin: 0 auto; min-height: 70vh;
    background: linear-gradient(#bfe8ff, #e9fbe0); border-radius: 28px;
    padding: 18px; position: relative; overflow: hidden;
    box-shadow: var(--shadow);
    -webkit-user-select: none; user-select: none;
}
.rn-card { text-align: center; padding: 26px 10px; }
.rn-big-emoji { font-size: 6rem; animation: bounce 2s infinite; }
.rn-card h2 { font-size: 2rem; font-weight: 900; color: #2e7d32; margin: 8px 0; }
.rn-card p { font-size: 1.3rem; color: #37474f; margin: 6px 0; }
.rn-input {
    font-family: inherit; font-size: 1.8rem; font-weight: 800; text-align: center;
    width: min(340px, 90%); padding: 14px; margin: 16px auto; display: block;
    border: 4px solid #8bc34a; border-radius: 20px; outline: none; color: #2c3e50;
}
.rn-pill {
    font-family: inherit; border: none; cursor: pointer;
    min-width: 260px; padding: 16px 26px; border-radius: 40px;
    font-size: 1.35rem; font-weight: 900; color: #fff;
    box-shadow: 0 6px 0 rgba(0,0,0,.22); transition: transform .1s;
}
.rn-pill:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.22); }
.rn-green { background: #43a047; } .rn-blue { background: #1e88e5; } .rn-orange { background: #fb8c00; }
.rn-link { font-family: inherit; background: none; border: none; color: #455a64; font-size: 1.05rem; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 8px; }
.rn-icon-btn {
    font-family: inherit; border: none; cursor: pointer; background: #fff;
    width: 54px; height: 54px; border-radius: 50%; font-size: 1.7rem; font-weight: 900; color: #2b4a6f;
    box-shadow: 0 4px 0 rgba(0,0,0,.15); flex-shrink: 0;
}
.rn-dim { opacity: .25; filter: grayscale(1); }

/* mapa */
.rn-map-top { display: flex; justify-content: space-between; align-items: center; font-size: 1.35rem; color: #2b4a6f; }
.rn-top-right { display: flex; align-items: center; gap: 12px; font-weight: 900; }
.rn-star-count { background: #fff; padding: 8px 14px; border-radius: 20px; box-shadow: 0 3px 0 rgba(0,0,0,.1); }
.rn-banner-win { margin-top: 12px; background: #fff8d6; border-radius: 16px; padding: 12px; font-weight: 800; text-align: center; color: #8d6e00; }
.rn-map { position: relative; padding: 6px 0 4px; }
.rn-goal { text-align: center; font-size: 2.6rem; }
.rn-step { position: relative; height: 80px; display: flex; align-items: center; }
.rn-node {
    font-family: inherit; width: 84px; height: 84px; border-radius: 50%; border: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.2);
}
.rn-node b { font-size: 1.7rem; font-weight: 900; line-height: 1; }
.rn-node small { font-size: .78rem; font-weight: 800; margin-top: 3px; white-space: nowrap; }
.rn-done { background: #4caf50; }
.rn-cur { background: #ff9800; border: 4px solid #fff; }
.rn-lock { background: #9e9e9e; cursor: default; }
.rn-pulse { animation: rnPulse 1.4s infinite; }
@keyframes rnPulse { 0%,100% { transform: scale(1.08); } 50% { transform: scale(1.18); } }
.rn-frog { font-size: 2.8rem; margin-left: 12px; animation: bounce 1.2s infinite; }
.rn-review-tag { margin-left: 8px; background: #fff3e0; color: #e65100; font-weight: 800; font-size: .85rem; padding: 4px 10px; border-radius: 12px; }
.rn-map-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; }

/* juego */
.rn-play-top { display: flex; align-items: center; gap: 12px; }
.rn-play-title { flex: 1; font-size: 1.5rem; font-weight: 900; color: #2b4a6f; }
.rn-play-count { font-size: 1.3rem; font-weight: 900; color: #2b4a6f; background: #fff; padding: 6px 14px; border-radius: 16px; }
.rn-bar { height: 16px; background: #fff; border-radius: 10px; overflow: hidden; margin: 12px 0 4px; }
.rn-bar i { display: block; height: 100%; background: #ffb300; transition: width .4s; }
.rn-q-row { display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; }
.rn-q { font-size: 4.2rem; font-weight: 900; color: #e65100; text-align: center; margin: 4px 0; }
.rn-q-ok { color: #2e7d32; display: inline-block; animation: rnPop .4s; }
@keyframes rnPop { 0% { transform: scale(.4); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }
.rn-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0; }
.rn-group { background: #fff; border-radius: 18px; padding: 8px 10px; display: grid; gap: 2px; box-shadow: 0 3px 0 #cfd8dc; }
.rn-item { font-size: 2rem; line-height: 1.15; position: relative; text-align: center; transition: transform .2s; }
.rn-sm .rn-item { font-size: 1.45rem; }
.rn-xs .rn-item { font-size: 1.05rem; }
.rn-xs .rn-group { padding: 5px 6px; border-radius: 12px; }
.rn-item.rn-counted { transform: scale(1.15); }
.rn-item.rn-counted::after {
    content: attr(data-n); position: absolute; top: -4px; right: -6px;
    background: #e53935; color: #fff; font-size: .62rem; font-weight: 900;
    min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; padding: 0 3px;
    font-family: 'Nunito', sans-serif;
}
.rn-hint { text-align: center; font-size: 1.3rem; font-weight: 700; color: #37474f; margin: 8px 0 14px; }
.rn-answers { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding-bottom: 6px; }
.rn-ans {
    font-family: inherit; width: 120px; height: 110px; border: none; border-radius: 26px;
    font-size: 3rem; font-weight: 900; color: #fff; cursor: pointer;
    box-shadow: 0 7px 0 rgba(0,0,0,.25); transition: transform .1s, background .2s;
}
.rn-ans:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.rn-c0 { background: #42a5f5; } .rn-c1 { background: #ab47bc; } .rn-c2 { background: #ff7043; }
.rn-ans.rn-right { background: #43a047; outline: 7px solid #ffeb3b; animation: rnPop .4s; }
.rn-ans.rn-wrong { background: #b0bec5; animation: rnShake .45s; box-shadow: none; }
@keyframes rnShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-10px); } 40%,80% { transform: translateX(10px); } }

/* premio */
.rn-win { background: linear-gradient(#fff8d6, #ffe0b2); border-radius: 24px; margin: -18px; padding: 30px 16px 26px; min-height: 70vh; }
.rn-medal { font-size: 7rem; animation: rnPop .7s; }
.rn-win-stars { font-size: 3.8rem; margin: 10px 0; }
.rn-review-msg { font-size: 1.1rem !important; }
.rn-win-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; }

/* globos */
.rn-sky { position: relative; height: 58vh; min-height: 380px; margin-top: 8px; border-radius: 20px; background: linear-gradient(#9fd8ff, #e3f6ff); overflow: hidden; }
.rn-balloon {
    position: absolute; bottom: -140px; width: 92px; height: 112px;
    border: none; border-radius: 50% 50% 48% 48% / 42% 42% 58% 58%;
    color: #fff; font-family: inherit; font-size: 2.2rem; font-weight: 900; cursor: pointer;
    box-shadow: inset -10px -12px 0 rgba(0,0,0,.12), inset 10px 10px 0 rgba(255,255,255,.25);
    animation-name: rnRise; animation-timing-function: linear; animation-iteration-count: infinite;
    text-shadow: 0 2px 2px rgba(0,0,0,.25);
}
.rn-balloon::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 40px; background: rgba(0,0,0,.35); }
@keyframes rnRise { from { transform: translateY(0); } to { transform: translateY(calc(-58vh - 300px)); } }
.rn-balloon.rn-pop { animation: rnBurst .35s forwards !important; pointer-events: none; }
@keyframes rnBurst { to { transform: scale(1.8); opacity: 0; } }
.rn-balloon.rn-shake { filter: brightness(.8); }

@media (max-width: 600px) {
    .rn-q { font-size: 3rem; }
    .rn-ans { width: 96px; height: 92px; font-size: 2.4rem; }
    .rn-item { font-size: 1.5rem; }
    .rn-pill { min-width: 220px; font-size: 1.15rem; }
    .rn-node { width: 72px; height: 72px; }
    .rn-step { height: 80px; }
}