.ro-head { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--gutter) 8px; }
.ro-head h1 { margin-top: 10px; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.05em; line-height: 1; font-weight: 800; }
.ro-sec { max-width: var(--maxw); margin: 32px auto 0; padding: 0 var(--gutter); }
.ro-sec h2 { font-size: 22px; letter-spacing: -.03em; margin-bottom: 14px; }
.ro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ro-grid.three { grid-template-columns: repeat(3, 1fr); }
.ro-card { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-width: 0; }
.ro-card img { width: 100%; height: auto; }
.ro-card.fighter img { aspect-ratio: 2 / 3; object-fit: contain; background: radial-gradient(closest-side, rgba(255, 106, 26, .18), transparent); padding: 12px; }
.ro-card figcaption { padding: 12px 16px 16px; display: grid; gap: 2px; font-size: 14px; color: var(--ink2); }
.ro-card figcaption b { color: var(--ink); font-size: 16px; }
@media (max-width: 860px) { .ro-grid, .ro-grid.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ro-grid.three { grid-template-columns: 1fr; } }