/* Story-led refinement: all visual emphasis stays in the character section. */
.age-panel h2 { font-size: 38px; line-height: 1.05; letter-spacing: -.06em; margin: 0; }
.hero-aside { min-height: 460px; }
.chat-window { width: min(100%, 420px); padding: 18px; }
.characters { background: radial-gradient(ellipse at 50% 40%, rgba(195,120,255,.1), transparent 57%); }
.character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.character-card { transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.character-card:hover { transform: translateY(-9px); border-color: rgba(214,255,94,.48); box-shadow: 0 26px 55px rgba(0,0,0,.32); }
.portrait { height: 420px; }
.portrait::before { transform: scale(1.12); }
.portrait-soren { background: #182720; }
.portrait-soren::before { background: radial-gradient(circle at 60% 35%, #d9b08d 0 13%, #415f48 14% 30%, transparent 31%); }
.portrait-soren::after { background: radial-gradient(ellipse, #76a26b 0, transparent 63%); }
.character-body { padding: 26px 22px 24px; }
.character-body h3 { font-size: 28px; }
.character-body p { margin-bottom: 22px; }
@media (max-width: 1050px) {
  .character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 760px) {
  .hero-aside { min-height: 350px; }
  .character-grid { grid-template-columns: 1fr; gap: 16px; }
  .portrait { height: min(115vw, 440px); }
  .character-body { padding: 22px 20px; }
}