.rhyme-time__hero-card { border-radius: 1.5rem; background: linear-gradient(135deg, oklch(0.27 0.08 255), oklch(0.34 0.09 292)); box-shadow: 0 1.5rem 3rem rgb(31 41 55 / 16%); padding: 2rem; }
.rhyme-time__hero-tile { display: inline-grid; min-height: 3.5rem; min-width: 3.5rem; place-items: center; border-radius: .9rem; padding: .55rem; font-weight: 900; }
.rhyme-time__hero-tile--primary { background: oklch(.82 .14 88); color: oklch(.24 .04 255); }
.rhyme-time__hero-tile--secondary { background: oklch(.76 .12 190); color: oklch(.22 .05 255); }
.rhyme-time__hero-tile--accent { background: oklch(.76 .13 318); color: oklch(.24 .04 255); }
.rhyme-time__level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.rhyme-time__level { display: flex; min-height: 13rem; flex-direction: column; align-items: flex-start; border: 1px solid oklch(.7 .03 255 / 35%); border-radius: 1.25rem; background: oklch(1 0 0 / 68%); padding: 1.25rem; text-align: left; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.rhyme-time__level:hover { border-color: oklch(.58 .15 255 / 70%); box-shadow: 0 .75rem 2rem oklch(.3 .08 255 / 12%); transform: translateY(-2px); }
.rhyme-time__level-mark { display: grid; min-height: 2.5rem; min-width: 2.5rem; place-items: center; border-radius: .75rem; background: oklch(.93 .05 255); color: oklch(.38 .13 255); font-weight: 900; }
.rhyme-time__game-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid oklch(.7 .03 255 / 35%); padding-bottom: 1.25rem; }
.rhyme-time__untimed { border-radius: 999px; background: oklch(.93 .05 150); color: oklch(.34 .09 150); padding: .4rem .7rem; font-size: .75rem; font-weight: 800; }
.rhyme-time__progress { height: .45rem; margin-top: 1.5rem; overflow: hidden; border-radius: 999px; background: oklch(.91 .03 255); }
.rhyme-time__progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, oklch(.58 .17 255), oklch(.7 .16 315)); transition: width 220ms ease; }
.rhyme-time__stage { max-width: 62rem; margin: 2rem auto 0; }
.rhyme-time__prompt { border-radius: 1.25rem; background: oklch(.97 .02 255); padding: 1.5rem; }
.rhyme-time__challenge-title { margin-top: .5rem; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 900; }
.rhyme-time__verse { margin-top: 1.5rem; border-left: 4px solid oklch(.7 .14 315); border-radius: .6rem; background: white; padding: 1.15rem; font-size: clamp(1.15rem, 3vw, 1.55rem); font-weight: 800; line-height: 1.7; }
.rhyme-time__blank { display: inline-block; min-width: 5rem; color: oklch(.58 .15 255); letter-spacing: .12em; }
.rhyme-time__choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.rhyme-time__choice { border: 1px solid oklch(.7 .03 255 / 40%); border-radius: .9rem; background: white; padding: 1rem; text-align: left; font-weight: 800; }
.rhyme-time__choice:hover { border-color: oklch(.58 .15 255); }
.rhyme-time__choice.is-right { border-color: oklch(.58 .15 150); background: oklch(.95 .07 150); }
.rhyme-time__choice.is-wrong { border-color: oklch(.6 .16 25); background: oklch(.97 .05 25); }
.rhyme-time__fallback, .rhyme-time__voice-note { margin-top: 1rem; border-radius: .75rem; background: oklch(.96 .06 85); padding: .75rem 1rem; }
.rhyme-time__voice-note { display: flex; gap: .75rem; }
.rhyme-time__voice-status { min-height: 1.4rem; margin-top: 1rem; color: oklch(.42 .05 255); font-size: .85rem; }
.rhyme-time__reveal { margin-top: 1rem; border-radius: 1rem; background: oklch(.96 .04 150); padding: 1rem; }
.rhyme-time__completed { margin-top: .8rem; font-size: 1.1rem; line-height: 1.55; }
.rhyme-time__explanation { margin-top: .6rem; }
.rhyme-time__feedback { min-height: 1.5rem; margin: 1rem auto 0; max-width: 62rem; font-weight: 700; }
.rhyme-time__results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rhyme-time__result-card { border: 1px solid oklch(.7 .03 255 / 35%); border-radius: 1rem; background: white; padding: 1.25rem; }
.rhyme-time__result-card span { color: oklch(.44 .12 255); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.rhyme-time__result-card strong { display: block; margin-top: .45rem; font-size: 2rem; }
@media (max-width: 620px) { .rhyme-time__choice-grid, .rhyme-time__results-grid { grid-template-columns: 1fr; } .rhyme-time__game-topbar { align-items: flex-start; flex-direction: column; } }