/* Rhyme Time Rescue -- DOM scene: two islands, a five-plank bridge, and word cards */

.rtr-play {
  --rtr-sky1: #8fd3ff; --rtr-sky2: #e8f7ff; --rtr-water1: #29b6f6; --rtr-water2: #0277bd;
  --rtr-land: #ffe082; --rtr-land-edge: #c8a13a; --rtr-plank: #a1672e; --rtr-plank-edge: #6d4019;
}
.rtr-jungle { --rtr-sky1: #a5d6a7; --rtr-sky2: #e8f5e9; --rtr-water1: #4db6ac; --rtr-water2: #00695c; --rtr-land: #7cb342; --rtr-land-edge: #33691e; }
.rtr-arctic { --rtr-sky1: #b3e5fc; --rtr-sky2: #ffffff; --rtr-water1: #4fc3f7; --rtr-water2: #01579b; --rtr-land: #f5f9ff; --rtr-land-edge: #90caf9; --rtr-plank: #90a4ae; --rtr-plank-edge: #546e7a; }
.rtr-candy { --rtr-sky1: #f8bbd0; --rtr-sky2: #fff0f6; --rtr-water1: #ce93d8; --rtr-water2: #7b1fa2; --rtr-land: #fff59d; --rtr-land-edge: #f06292; --rtr-plank: #ff80ab; --rtr-plank-edge: #c2185b; }
.rtr-volcano { --rtr-sky1: #4e342e; --rtr-sky2: #8d6e63; --rtr-water1: #ff7043; --rtr-water2: #bf360c; --rtr-land: #5d4037; --rtr-land-edge: #3e2723; --rtr-plank: #8d6e63; --rtr-plank-edge: #3e2723; }

.rtr-scene {
  position: relative; width: 100%; aspect-ratio: 16 / 5; max-height: 210px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, var(--rtr-sky1), var(--rtr-sky2) 60%);
  border: 1px solid var(--color-border);
}
.rtr-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.16) 0 18px, transparent 18px 44px), linear-gradient(180deg, var(--rtr-water1), var(--rtr-water2));
  background-size: 88px 100%, 100% 100%;
  animation: rtr-waves 3s linear infinite;
}
@keyframes rtr-waves { to { background-position: 88px 0, 0 0; } }
.rtr-island {
  position: absolute; bottom: 26%; width: 24%; height: 26%;
  background: var(--rtr-land); border: 3px solid var(--rtr-land-edge); border-radius: 50% 50% 18% 18% / 70% 70% 30% 30%;
  display: flex; align-items: flex-start; justify-content: center;
}
.rtr-island--home { left: 2%; }
.rtr-island--far { right: 2%; }
.rtr-flag, .rtr-animal { font-size: clamp(26px, 6vw, 46px); line-height: 1; transform: translateY(-62%); }
.rtr-animal { display: inline-block; transition: transform 1.8s ease-in-out; animation: rtr-bob 1.6s ease-in-out infinite; }
.rtr-animal.is-home { animation: none; } /* transform set in JS from the real island distance */
@keyframes rtr-bob { 50% { transform: translateY(-72%); } }
.rtr-help {
  position: absolute; top: -78%; right: 2%; background: #fff; color: #37474f; border-radius: 12px; padding: 2px 8px;
  font-weight: 800; font-size: clamp(11px, 2.4vw, 15px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.rtr-bridge {
  position: absolute; left: 25%; right: 25%; bottom: 44%; height: 9%;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
  border-top: 3px dashed rgba(0, 0, 0, 0.25);
}
.rtr-plank { border-radius: 4px; opacity: 0; transform: translateY(-60px) rotate(-12deg); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); background: var(--rtr-plank); border: 2px solid var(--rtr-plank-edge); }
.rtr-plank.is-laid { opacity: 1; transform: none; }
.rtr-confetti { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; animation: rtr-fall 1.6s ease-in forwards; }
@keyframes rtr-fall { to { transform: translate(var(--drift, 0), 360px) rotate(540deg); opacity: 0.2; } }

.rtr-prompt { text-align: center; font-size: 1.35rem; font-weight: 800; }
.rtr-prompt strong { color: var(--color-primary); font-size: 1.6rem; }
.rtr-emoji { font-size: 1.8rem; vertical-align: middle; }
.rtr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.rtr-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 84px; padding: 10px; border-radius: 16px; cursor: pointer; font: inherit;
  border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
}
.rtr-card:hover:not(:disabled) { border-color: var(--color-primary); }
.rtr-card:active:not(:disabled) { transform: scale(0.97); }
.rtr-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.rtr-card-emoji { font-size: 2.2rem; line-height: 1; }
.rtr-card-word { font-size: 1.45rem; font-weight: 800; letter-spacing: 0.02em; }
.rtr-card.is-right { border-color: var(--color-success); background: rgba(74, 222, 128, 0.2); animation: rtr-yay 0.4s ease; }
.rtr-card.is-wrong { border-color: var(--color-accent); background: rgba(238, 111, 168, 0.15); opacity: 0.6; animation: rtr-no 0.35s ease; }
@keyframes rtr-yay { 50% { transform: scale(1.06); } }
@keyframes rtr-no { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.rtr-hear { padding: 8px 14px; }

@media (prefers-reduced-motion: reduce) {
  .rtr-water, .rtr-animal, .rtr-confetti, .rtr-card.is-right, .rtr-card.is-wrong { animation: none; }
  .rtr-plank, .rtr-animal { transition: none; }
}