.hr-char { display: inline-block; flex: none; vertical-align: middle; max-width: 100%; }
.hr-char svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hr-char-body, .hr-char-eyes, .hr-rotor { transform-box: fill-box; transform-origin: center; }
.hr-char--pixel.hr-mood--idle .hr-char-body { animation: hr-bob 3s ease-in-out infinite; }
.hr-char--pixel.hr-mood--idle .hr-char-eyes { animation: hr-blink 4s infinite; }
.hr-char--pixel.hr-mood--cheer .hr-char-body { animation: hr-bounce .6s ease-in-out infinite; }
.hr-char--pixel.hr-mood--oops .hr-char-body { animation: hr-shake .4s ease; }
.hr-char--pixel.hr-mood--think .hr-char-body { animation: hr-tilt 2.4s ease-in-out infinite; }
.hr-char--juno .hr-char-body { animation: hr-bob 2.2s ease-in-out infinite; }
.hr-char--juno .hr-rotor { animation: hr-rotor .25s linear infinite; }
.hr-char--juno.hr-mood--think .hr-char-eyes { animation: hr-scan 2s ease-in-out infinite; }
.hr-char--rex.hr-mood--idle .hr-char-body { animation: hr-tilt 3s ease-in-out infinite; }
.hr-char--rex.hr-mood--cheer .hr-char-body { animation: hr-bounce .6s ease; }
.hr-char--rex.hr-mood--oops .hr-char-body { animation: hr-recoil .45s ease; }
.hr-character-greeting { margin: 0 0 14px; color: #eef1ff; font-size: 14px; }
#intro-character { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0; }
.hr-briefing { display: flex; align-items: center; flex: 1 1 180px; max-width: 260px; text-align: left; gap: 6px; }
.hr-briefing p { color: #eef1ff; font-size: 13px; line-height: 1.4; margin: 0; }
.hr-briefing strong { color: #34e1ff; }
#screen-play.active { display: flex; flex-direction: column; }
#play-character { order: 1; display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.hr-speech { color: #eef1ff; background: #1f2742; border: 1px solid #445074; border-radius: 14px; padding: 9px 12px; font-size: 14px; line-height: 1.35; }
.hr-speech:empty { display: none; }
#combo-meter:empty { display: none; }
.hr-combo { display: inline-flex; align-items: center; gap: 6px; color: #ffb665; background: #302214; border: 1px solid #81551d; border-radius: 999px; padding: 5px 10px; font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.hr-combo svg { width: 18px; height: 18px; transition: transform .2s ease; }
.hr-combo.mid, .hr-combo.high { padding: 7px 12px; font-size: 15px; }
.hr-combo.mid svg, .hr-combo.high svg { width: 24px; height: 24px; }
.hr-combo.high { color: #ffd166; background: #38290e; border-color: #d2a843; }
.hr-combo-pop { animation: hr-combo-pop .32s ease-out; }
.hr-combo-out { animation: hr-extinguish .35s ease forwards; }
.hearts .hr-heart-breaking { position: relative; opacity: 1; filter: none; }
#play-next { order: 2; }
.hr-lost-heart { position: absolute; inset: 0; opacity: 1; filter: none; animation: hr-heart-break .5s ease forwards; }
.hr-lost-heart svg { display: block; width: 1em; height: 1em; }
.hr-xp-anchor { position: relative; z-index: 1; }
.hr-xp-float { position: absolute; left: 50%; top: 50%; z-index: 1; color: #ffd166; background: transparent; font-size: 20px; font-weight: 900; line-height: 1; white-space: nowrap; text-shadow: -1px -1px 0 #0b0e1a, 1px -1px 0 #0b0e1a, -1px 1px 0 #0b0e1a, 1px 1px 0 #0b0e1a, 0 2px 4px #0b0e1a; pointer-events: none; animation: hr-xp-rise .8s ease-out forwards; }
@keyframes hr-bob { 50% { transform: translateY(-4px); } }
@keyframes hr-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes hr-bounce { 50% { transform: translateY(-7px); } }
@keyframes hr-shake { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes hr-tilt { 50% { transform: rotate(-3deg); } }
@keyframes hr-rotor { 50% { transform: scaleX(.35); } }
@keyframes hr-scan { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes hr-recoil { 30% { transform: translateX(7px) rotate(6deg); opacity: .5; } }
@keyframes hr-combo-pop { 50% { transform: scale(1.12); } }
@keyframes hr-extinguish { to { transform: scale(.7); opacity: 0; } }
@keyframes hr-heart-break { from { transform: scale(1.1); opacity: 1; } to { transform: scale(.45) rotate(15deg); opacity: 0; } }
@keyframes hr-xp-rise { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(-50%, calc(-50% - 40px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hr-char-body, .hr-char-eyes, .hr-rotor, .hr-combo-out, .hr-combo-pop, .hr-lost-heart, .hr-xp-float { animation: none !important; transition: none !important; }
  .hr-combo svg { transition: none; }
  .hr-xp-float { transform: translate(-50%, -50%); }
}