.poetry-school{position:relative;background:#fffdf5;border:1px solid #e9dfc9;border-radius:22px;padding:20px;color:#243b37;overflow:hidden}
.poetry-toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.poetry-toolbar .pill{font-size:14px;min-height:44px;padding:9px 16px}
.poetry-scene{display:flex;justify-content:center;align-items:center;gap:24px;min-height:204px;margin:12px 0}
#poetry-giraffe{height:220px;width:145px;object-fit:contain;transform-origin:50% 90%}
.poetry-rainbow{width:min(350px,60%);display:flex;flex-direction:column;align-items:center;gap:8px}#poetry-rainbow{width:100%;aspect-ratio:348/203;object-fit:contain;border-radius:6px}
#poetry-progress{font-size:18px;letter-spacing:.03em}.poetry-verse{font-size:clamp(19px,3vw,26px);line-height:1.55;margin:14px 0;text-align:center;white-space:normal;font-weight:500}
.poetry-verse-row{position:relative;padding:0 40px}.poetry-verse-row>.poetry-speaker{position:absolute;right:0;top:8px}
#poetry-content{text-align:center}.poetry-prompt{font-size:22px;margin:18px 0 14px}.poetry-blank{display:inline-block;color:#895326;letter-spacing:.07em;border-bottom:2px solid #b3a078}
.poetry-answers{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.poetry-word{display:flex;align-items:center;gap:5px;flex:0 1 46%}.poetry-word .pill{flex:1;min-height:52px;font-size:22px;padding:12px}
.poetry-speaker{border:1px solid #d7cbb1;border-radius:50%;height:44px;width:44px;background:#f9f1dc;color:#25473d;font-size:24px;cursor:pointer;flex-shrink:0}.poetry-speaker:focus-visible,.poetry-letter:focus-visible{outline:3px solid #346c8b;outline-offset:3px}
.poetry-alphabet{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:500px;margin:auto}.poetry-letter{min-height:46px;border:1px solid #cdbd9c;background:#f7efdf;border-radius:10px;color:#25473d;font-size:22px;cursor:pointer}
.poetry-feedback{font-size:20px;font-weight:600;text-align:center;min-height:56px;padding:12px 0;margin:8px 0}
.poetry-pair{font-size:24px;font-weight:600;display:inline-block}.poetry-pair mark,.poetry-verse mark{border-radius:6px;background:#ffe499;padding:0 5px;color:#263d35}
.poetry-paused{position:absolute;inset:120px 0 0;background:rgba(255,253,245,.97);z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.poetry-paused[hidden]{display:none}.poetry-paused h3{font-size:32px}
.poetry-unlock{animation:poetry-unlock-bob 1.4s ease-in-out 3;gap:10px}.poetry-unlock img{width:28px;height:38px;object-fit:contain}
.poetry-correct #poetry-giraffe{animation:poetry-nod .7s ease}.poetry-correct #poetry-rainbow{animation:poetry-fill .7s ease}.poetry-reset #poetry-rainbow{animation:poetry-fade 1.3s ease}.poetry-celebrate #poetry-rainbow{animation:poetry-rise 2.4s ease forwards}.poetry-win>img{width:160px}.poetry-win h3{font-size:28px}
@keyframes poetry-unlock-bob{50%{transform:translateY(-5px);box-shadow:0 5px 0 #d7bc70}}
@keyframes poetry-nod{40%{transform:rotate(4deg) translateY(4px)}}@keyframes poetry-fill{50%{transform:scale(1.04)}}@keyframes poetry-fade{60%{filter:grayscale(1);opacity:.6}}@keyframes poetry-rise{35%{filter:brightness(1.12);transform:translateY(-7px)}100%{transform:translateY(-35px);opacity:.2}}
@media(max-width:520px){.poetry-school{padding:12px}.poetry-scene{gap:8px;min-height:150px}#poetry-giraffe{height:175px;width:95px}.poetry-rainbow{width:68%}.poetry-verse-row{padding:0 28px}.poetry-verse-row>.poetry-speaker{right:-7px}.poetry-word{flex-basis:100%}.poetry-alphabet{grid-template-columns:repeat(6,1fr);gap:6px}.poetry-letter{min-height:44px}.poetry-feedback{font-size:18px}.poetry-toolbar .pill{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.poetry-school *,.poetry-unlock{animation:none!important;transition:none!important}}
.poetry-still *,.quiet .poetry-unlock{animation:none!important;transition:none!important}
/* Keep the verse and touch controls readable on tablets without desktop-sized art. */
.poetry-school,.poetry-school *{box-sizing:border-box}
#poetry-content,.poetry-verse,.poetry-word{min-width:0}
.poetry-word .pill{overflow-wrap:anywhere}
@media (min-width:521px) and (max-width:1100px){
 .poetry-scene{min-height:145px;margin:8px 0;gap:16px}
 #poetry-giraffe{height:155px;width:105px}
 .poetry-rainbow{max-width:270px}
 .poetry-verse{font-size:22px;line-height:1.4;margin:10px 0}
 .poetry-prompt{font-size:20px;margin:12px 0}
 .poetry-feedback{min-height:44px;padding:8px 0}
}
@media (min-width:700px) and (max-height:850px){
 .poetry-school{padding:14px}
 .poetry-scene{min-height:115px;gap:20px;margin:8px 0}
 #poetry-giraffe{height:130px;width:88px}
 .poetry-rainbow{width:240px;max-width:60%}
 .poetry-verse{font-size:22px;line-height:1.35;margin:10px 0}
 .poetry-feedback{min-height:40px;font-size:18px}
}
.poetry-scene{flex-direction:row;flex-wrap:nowrap}
#poetry-giraffe{flex-shrink:0}
.poetry-rainbow{min-width:0}
.poetry-answers:not(.poetry-alphabet){margin-top:18px}
.poetry-word{flex-basis:calc(50% - 6px);gap:8px}
.poetry-word .pill{min-height:64px;font-size:26px;padding:12px 16px}
.poetry-word .poetry-speaker{width:52px;height:52px;font-size:27px}
.poetry-word .pill:focus-visible{outline:3px solid #346c8b;outline-offset:3px}
@media(max-width:520px){
 .poetry-word{flex-basis:100%}
 .poetry-word .pill{min-height:60px;font-size:25px}
 .poetry-rainbow{width:calc(100% - 105px)}
 .poetry-verse-row{padding:0 52px 0 0}
 .poetry-verse-row>.poetry-speaker{right:0}
}
.poetry-ready .poetry-toolbar,.poetry-ready>.helper-note,.poetry-ready .poetry-feedback,.poetry-ready #poetry-progress{display:none}
.poetry-start{padding:22px 0 30px}
.poetry-start .pill{min-height:72px;min-width:170px;font-size:32px}
.poetry-answers.poetry-two{display:grid;grid-template-columns:minmax(0,1fr);max-width:540px;margin:18px auto 0;gap:14px}
.poetry-answers.poetry-four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.poetry-two .poetry-word,.poetry-four .poetry-word{width:100%;min-width:0}
.poetry-feedback-actions{display:flex;justify-content:center;align-items:center;gap:22px;margin:18px 0}
.poetry-feedback-actions .pill{min-height:60px;min-width:90px;font-size:32px;line-height:1}
.poetry-feedback-actions .poetry-speaker{height:56px;width:56px}
@media(max-width:520px){.poetry-four .poetry-word{gap:5px}.poetry-four .pill{font-size:18px;padding:10px 6px}.poetry-four .poetry-speaker{width:44px;height:44px;font-size:24px}.poetry-answers.poetry-four{gap:10px}}

/* Both hidden games share a brief unlock celebration and a lasting highlight. */
.bonus-unlock{background:#f5df98;border-color:#806022;color:#302617;box-shadow:0 0 0 3px #f5df9855;font-weight:700}.unlock-message{background:#fff4cf;border:2px solid #dbc379;border-radius:16px;padding:12px 16px}.unlock-message strong{display:block;margin-bottom:4px}

/* White victory panel matches the rainbow artwork and its animation stage. */
.poetry-school.poetry-party{background:#fff}
.poetry-party .poetry-scene{position:relative;min-height:310px;height:clamp(300px,43vh,440px);gap:0;isolation:isolate;overflow:hidden;border-radius:22px;background:#fff}
.poetry-party #poetry-giraffe{height:100%;width:62%;max-width:310px;position:relative;z-index:2;animation:none;object-fit:contain}
.poetry-party .poetry-rainbow{width:48%;margin-left:-10%;max-width:340px;align-self:center;animation:poetry-party-float 2.6s ease-in-out infinite}
.poetry-party #poetry-rainbow{aspect-ratio:1;animation:none;opacity:1;transform:none}
.poetry-party #poetry-progress[hidden]{display:none}
.poetry-party #poetry-counts,.poetry-party .helper-note,.poetry-party #poetry-feedback{display:none}
.poetry-party .poetry-win h3{font-size:clamp(25px,5vw,34px);margin:12px 0 6px}
.poetry-party .poetry-win p{margin:6px 0 16px}
.poetry-party .poetry-win .game-controls{justify-content:center;gap:12px}
.poetry-party-paused .poetry-rainbow{animation-play-state:paused}
@keyframes poetry-party-float{50%{transform:translateY(-12px) rotate(3deg)}}
@media(max-width:520px){.poetry-party .poetry-scene{height:clamp(270px,40svh,390px);min-height:270px;margin:8px 0}.poetry-party .poetry-win .pill{min-height:48px;padding:10px 16px}.poetry-party .poetry-win .text-link{font-size:16px}}
@media(prefers-reduced-motion:reduce){.poetry-party .poetry-rainbow{animation:none}}

.poetry-party.poetry-still .poetry-rainbow{animation:none}
