/* Approved introductions; unsupported languages retain their existing video. */
.monster-explain[hidden],.monster-explanation[hidden]{display:none}
html.has-monster-explanation #daily-spark .spark-companion{display:none}
html.has-monster-explanation .conversation-actions{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:14px}
.monster-explain{display:flex;flex-direction:column;align-items:center;justify-self:end;gap:8px;min-width:0;margin-right:16px;padding:0;border:0;background:transparent;color:#87532c;font:14px/1.4 Arial,sans-serif;cursor:pointer;text-align:center}
.monster-explain img{width:60px;height:60px;flex-shrink:0;object-fit:contain;border-radius:9px}
.monster-explain span{max-width:90px;text-decoration:underline;text-underline-offset:4px}
.hero .monster-explanation{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;width:100%;max-width:none;margin:20px 0 0;padding:24px;background:#fdfaf5;border:1px solid #ddd5c8;border-radius:16px;box-sizing:border-box}
.hero .monster-explanation[hidden]{display:none}
.monster-large{width:200px;height:200px;object-fit:contain;border-radius:12px;transform-origin:50% 85%}
.monster-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.monster-heading h2{margin:0;font:500 26px/1.2 Georgia,serif}
.monster-close{border:0;background:none;color:#87532c;text-decoration:underline;cursor:pointer;min-height:44px;font:15px Arial,sans-serif}
.monster-explanation p{font:15px/1.55 Arial,sans-serif;color:#6f675f;margin:12px 0;max-width:70ch}
.monster-explanation audio{width:100%;margin:8px 0}
.monster-explanation summary{cursor:pointer;color:#87532c;min-height:44px}
.monster-explanation button:focus-visible,.monster-explanation summary:focus-visible,.monster-explain:focus-visible{outline:3px solid #87532c;outline-offset:4px}
.monster-video-alternative .hero-video-btn{font-size:15px;margin:0}
.monster-explanation.speaking .monster-large{animation:explain-sway 2.8s ease-in-out infinite}
@keyframes explain-sway{0%,100%{transform:rotate(0)}35%{transform:rotate(-1.2deg) translateY(-2px)}70%{transform:rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.monster-explanation.speaking .monster-large{animation:none}}
@media(max-width:600px){.hero .monster-explanation{grid-template-columns:1fr;padding:18px}.monster-large{margin:auto}.monster-heading h2{font-size:24px}}
/* Wrap by available content width: longer translations keep their full labels. */
@media(max-width:600px){
  html.has-monster-explanation .conversation-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 8px}
  .conversation-actions>.conversation-start{flex:0 0 auto;max-width:100%;box-sizing:border-box;padding-inline:12px;gap:12px}
  .conversation-actions>.monster-explain{flex:0 0 76px;margin:0 0 0 auto}
  .monster-explain span{max-width:76px;overflow-wrap:anywhere}
}
@media(max-width:360px){html.has-monster-explanation .conversation-actions{flex-direction:column;align-items:flex-start}.conversation-actions>.monster-explain{flex-basis:auto;margin:0}}