/* Rhyme Time: one model to listen to, then a generous row of picture choices.
   This sheet is loaded only for Rhyme Time, after the shared game room. */
[data-scene="rhyme-time"] .stage-inner.has-panel {
  gap: clamp(16px, 3vmin, 30px);
  padding: clamp(6px, 1.2vmin, 14px) clamp(2px, 1vw, 14px);
}

[data-scene="rhyme-time"] .rhyme-model-panel {
  align-self: center;
  width: min(100%, 900px);
  min-height: 112px;
  padding: 16px clamp(16px, 3vw, 32px);
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 14px;
  border: 2px solid #eddaa3;
  border-radius: 28px;
  background: #fffaf0;
  box-shadow: 0 4px 0 #e6d9b7;
}
.rhyme-model-panel .rhyme-model { gap: clamp(14px, 2vw, 24px); }
.rhyme-model-panel .rhyme-model-picture {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(72px, 10vmin, 112px);
  height: clamp(72px, 10vmin, 112px);
  border-radius: 24px;
  background: #ffefba;
  font-size: clamp(54px, 8vmin, 84px);
}
.rhyme-model-copy { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.rhyme-model-label { color: #82652b; font-size: clamp(14px, 1.8vmin, 18px); font-weight: 450; line-height: 1.2; }
.rhyme-model-panel .rhyme-model-word { font-size: clamp(30px, 5vmin, 50px); font-weight: 550; color: #344f60; }
.rhyme-model-panel .hear-picture-options {
  min-height: 54px;
  max-width: 190px;
  padding: 12px 18px;
  border: 2px solid #e5d39e;
  border-radius: 18px;
  background: #fff;
  color: #705627;
  font-size: 16px;
  font-weight: 450;
  box-shadow: 0 3px 0 #e9dbb5;
}
[data-scene="rhyme-time"] .rhyme-model-panel.is-narrating {
  border-color: #427aac;
  background: #f1f8ff;
  box-shadow: 0 0 0 4px #cbe3f9, 0 5px 0 #a5c7df;
}
.rhyme-model-panel.is-narrating .rhyme-model-picture { background: #dcefff; }

[data-scene="rhyme-time"] .stage-inner.has-panel .choices {
  flex: 1 1 0;
  align-self: center;
  align-content: stretch;
  align-items: stretch;
  width: min(100%, 1080px);
  height: auto;
  max-height: 400px;
  min-height: 0;
  padding: 5px 6px 10px;
  gap: clamp(12px, 2.2vw, 28px);
  grid-auto-rows: minmax(0, 1fr);
}
[data-scene="rhyme-time"] .choices[data-count="2"] { max-width: 850px; }
[data-scene="rhyme-time"] .choices[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-scene="rhyme-time"] .choices[data-count="3"] > :last-child { grid-column: auto; justify-self: stretch; width: 100%; }
[data-scene="rhyme-time"] .choice.rhyme-choice {
  --picture-colour: #e9f1ff;
  aspect-ratio: auto;
  min-height: 140px;
  height: 100%;
  padding: clamp(10px, 2vmin, 22px);
  border: 3px solid #d7e5ed;
  border-radius: clamp(22px, 3vmin, 34px);
  background: #fff;
  box-shadow: 0 7px 0 #c4d8e3, 0 12px 24px #35546d08;
  overflow: visible;
}
[data-scene="rhyme-time"] .rhyme-choice:nth-child(2) { --picture-colour: #f7eafa; }
[data-scene="rhyme-time"] .rhyme-choice:nth-child(3) { --picture-colour: #e8f6ee; }
[data-scene="rhyme-time"] .rhyme-choice .pic {
  gap: clamp(10px, 2vmin, 20px);
  font-size: clamp(52px, 12vmin, 126px);
}
[data-scene="rhyme-time"] .rhyme-choice .pic .emoji {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.45em;
  max-width: 100%;
  flex: 0 1 auto;
  border-radius: 32%;
  background: var(--picture-colour);
  font-size: 1em;
  line-height: 1.1;
}
[data-scene="rhyme-time"] .rhyme-choice .pic .caption {
  position: static;
  color: #314e61;
  font-size: clamp(22px, 3.5vmin, 34px);
  font-weight: 550;
  line-height: 1.15;
}
@supports (font-size: 1cqw) {
  [data-scene="rhyme-time"] .rhyme-choice .pic { font-size: min(54cqw, 14vmin, 132px); }
}
[data-scene="rhyme-time"] .rhyme-choice.is-narrating {
  border-color: #377bad;
  background: #f8fcff;
  box-shadow: 0 0 0 4px #c6e3fa, 0 7px 0 #94bddb;
  transform: translateY(-3px);
}
[data-scene="rhyme-time"] .rhyme-choice.is-narrating::after {
  top: 10px; right: 10px;
  width: 34px; height: 34px;
  font-size: 24px;
  background: #377bad;
  border: 3px solid #fff;
  box-sizing: content-box;
}
[data-scene="rhyme-time"] .rhyme-choice.correct {
  border-color: #31a677;
  background: #f2fff7;
  box-shadow: 0 0 0 4px #cbf1df, 0 7px 0 #8fceb3;
}
[data-scene="rhyme-time"] .rhyme-choice.correct::after {
  content: "✓";
  position: absolute;
  display: grid; place-items: center;
  top: 10px; right: 10px;
  width: 38px; height: 38px;
  border: 3px solid white;
  border-radius: 50%;
  background: #258861;
  color: #fff;
  font: 700 25px / 1 var(--font);
}
[data-scene="rhyme-time"] .rhyme-choice.wrong { opacity: .65; }
[data-scene="rhyme-time"] .rhyme-choice:focus-visible { outline: 4px solid #246896; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  [data-scene="rhyme-time"] .rhyme-choice:hover:not(.locked):not(.wrong) {
    border-color: #91bad2;
    transform: translateY(-3px);
  }
}
[data-scene="rhyme-time"] .rhyme-choice:active:not(.locked) { transform: translateY(4px) scale(.98); }

@media (max-width: 600px) {
  .game-room .stage[data-scene="rhyme-time"] { min-height: 470px; }
  [data-scene="rhyme-time"] .stage-inner.has-panel { gap: 22px; padding: 4px 0 6px; }
  [data-scene="rhyme-time"] .rhyme-model-panel { min-height: 100px; padding: 12px; border-radius: 22px; gap: 10px; }
  .rhyme-model-panel .rhyme-model { gap: 10px; }
  .rhyme-model-panel .rhyme-model-picture { width: 66px; height: 66px; font-size: 48px; border-radius: 18px; }
  .rhyme-model-label { font-size: 13px; }
  .rhyme-model-panel .rhyme-model-word { font-size: 30px; }
  .rhyme-model-panel .hear-picture-options { max-width: 116px; min-height: 54px; padding: 10px; font-size: 13px; border-radius: 15px; }
  [data-scene="rhyme-time"] .stage-inner.has-panel .choices { max-height: 390px; gap: 12px; padding-inline: 2px; grid-template-columns: minmax(0, 1fr); }
  [data-scene="rhyme-time"] .choice.rhyme-choice { min-height: 86px; border-width: 2px; border-radius: 20px; padding: 8px 14px; }
  [data-scene="rhyme-time"] .rhyme-choice .pic { flex-direction: row; justify-content: flex-start; gap: 24px; font-size: 52px; }
  [data-scene="rhyme-time"] .rhyme-choice .pic .emoji { width: 1.35em; height: 1.25em; flex: none; }
  [data-scene="rhyme-time"] .rhyme-choice .pic .caption { font-size: 26px; text-align: left; }
  [data-scene="rhyme-time"] .rhyme-choice.is-narrating::after { top: 7px; right: 6px; width: 25px; height: 25px; font-size: 19px; border-width: 2px; }
  [data-scene="rhyme-time"] .rhyme-choice.correct::after { top: 7px; right: 6px; width: 29px; height: 29px; font-size: 20px; border-width: 2px; }
}

/* Keep every option visible on short landscape phones. */
@media (orientation: landscape) and (max-height: 550px) {
  .game-room .stage[data-scene="rhyme-time"] { min-height: 170px; }
  [data-scene="rhyme-time"] .stage-inner.has-panel { flex-direction: row; align-items: stretch; gap: 16px; padding: 2px; }
  [data-scene="rhyme-time"] .rhyme-model-panel {
    align-self: stretch; width: 29%; min-width: 150px; min-height: 0;
    flex-direction: column; justify-content: center; gap: 12px; padding: 10px;
  }
  .rhyme-model-panel .rhyme-model { gap: 10px; }
  .rhyme-model-panel .rhyme-model-picture { width: 52px; height: 56px; font-size: 40px; border-radius: 15px; }
  .rhyme-model-label { font-size: 12px; }
  .rhyme-model-panel .rhyme-model-word { font-size: 25px; }
  .rhyme-model-panel .hear-picture-options { min-height: 48px; max-width: 180px; padding: 8px 10px; font-size: 13px; }
  [data-scene="rhyme-time"] .stage-inner.has-panel .choices { align-self: stretch; height: 100%; gap: 12px; padding: 2px 2px 9px; }
  [data-scene="rhyme-time"] .choice.rhyme-choice { min-height: 120px; padding: 8px; border-radius: 22px; }
  [data-scene="rhyme-time"] .rhyme-choice .pic { font-size: min(48cqw, 15vmin, 84px); gap: 10px; }
  [data-scene="rhyme-time"] .rhyme-choice .pic .caption { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-scene="rhyme-time"] .rhyme-choice,
  [data-scene="rhyme-time"] .rhyme-choice.is-narrating { animation: none; transition: none; transform: none; }
}