/* 관계사 소행성 (/grammar/relative/asteroid.jsp, 2026-10-18). 틀(.ra-*)은 css/ps2-relative-arcade.css, 여기는 색 · 로비 그림 · 문장 표시(.rb-*) */
#main .gi .ra--asteroid { --ra-bg1: #070b1f; --ra-bg2: #1e1b4b; --ra-glow: #67e8f9; --ra-halo: rgba(56, 189, 248, .24); --ra-win: #0e7490; --ra-accent: #2563eb; }

/* 문장: 빈칸 · 앞의 명사 밑줄 */
#main .gi .ra--asteroid .rb-ask .rb-n { box-shadow: inset 0 -3px 0 rgba(103, 232, 249, .65); padding-bottom: 1px; }
#main .gi .ra--asteroid .rb-ask u, #main .gi .ra--asteroid .rb-sent u { text-decoration: none; padding: 0 6px; border-radius: 7px; background: rgba(134, 239, 172, .18); color: #86efac; box-shadow: inset 0 -2px 0 #86efac; }
#main .gi .ra--asteroid .rb-sent u { background: #dcfce7; color: #166534; box-shadow: inset 0 -2px 0 #22c55e; }
#main .gi .ra--asteroid .ra-card__mine s { color: #b91c1c; }

/* 머리 오른쪽: 방패 막대 */
#main .gi .ra--asteroid .rb-shield { display: inline-flex; align-items: center; gap: 6px; }
#main .gi .ra--asteroid .rb-shield b { position: relative; display: inline-block; width: 84px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
#main .gi .ra--asteroid .rb-shield i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #67e8f9); transition: width .25s linear; }
#main .gi .ra--asteroid .rb-shield i.is-low { background: linear-gradient(90deg, #ef4444, #f97316); }
#main .gi .ra--asteroid .rb-fire { min-width: 120px; }

/* 로비 그림: 별 · 우주선 · 소행성 셋 · 빛줄기 */
#main .gi .ra--asteroid .rb-hero { background: radial-gradient(60% 70% at 25% 30%, rgba(99, 102, 241, .35), transparent 70%), radial-gradient(50% 60% at 80% 75%, rgba(14, 165, 233, .28), transparent 70%), linear-gradient(180deg, #060a1c, #0b1030); }
#main .gi .ra--asteroid .rb-hero__stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 22%, #e2e8f0, transparent), radial-gradient(1px 1px at 32% 68%, #cbd5e1, transparent), radial-gradient(1.5px 1.5px at 58% 14%, #f8fafc, transparent),
    radial-gradient(1px 1px at 76% 44%, #e2e8f0, transparent), radial-gradient(1.5px 1.5px at 88% 82%, #f1f5f9, transparent), radial-gradient(1px 1px at 46% 88%, #cbd5e1, transparent), radial-gradient(1px 1px at 22% 52%, #e2e8f0, transparent), radial-gradient(1.5px 1.5px at 66% 60%, #f8fafc, transparent);
    animation: rb-twinkle 4s ease-in-out infinite alternate; }
@keyframes rb-twinkle { from { opacity: .65; } to { opacity: 1; } }
#main .gi .ra--asteroid .rb-hero__ship { position: absolute; left: 50%; top: 54%; width: 0; height: 0; margin: -13px 0 0 -11px; border-left: 34px solid #e0f2fe; border-top: 13px solid transparent; border-bottom: 13px solid transparent;
    filter: drop-shadow(0 0 10px #38bdf8); transform-origin: 11px 13px; animation: rb-ship 6s ease-in-out infinite; }
#main .gi .ra--asteroid .rb-hero__ship::after { content: ''; position: absolute; left: -46px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid rgba(103, 232, 249, .45); }
@keyframes rb-ship { 0%, 20% { transform: rotate(-160deg); } 30%, 62% { transform: rotate(-24deg); } 72%, 100% { transform: rotate(-160deg); } }
#main .gi .ra--asteroid .rb-hero__rock { position: absolute; width: 78px; height: 70px; margin: -35px 0 0 -39px; border-radius: 46% 54% 50% 50% / 52% 44% 56% 48%;
    background: radial-gradient(circle at 34% 30%, #94a3b8, #334155 58%, #0f172a); box-shadow: inset 0 0 0 1.5px rgba(203, 213, 225, .35), 0 6px 14px rgba(0, 0, 0, .5); display: grid; place-items: center; }
#main .gi .ra--asteroid .rb-hero__rock b { padding: 3px 9px; border-radius: 999px; background: rgba(2, 6, 23, .78); border: 1px solid rgba(148, 163, 184, .5); color: #fff; font: 800 13px/1.3 inherit; }
#main .gi .ra--asteroid .rb-hero__rock--a { left: 18%; top: 30%; animation: rb-drift-a 6s ease-in-out infinite; }
#main .gi .ra--asteroid .rb-hero__rock--b { left: 82%; top: 34%; animation: rb-drift-b 6s ease-in-out infinite; }
#main .gi .ra--asteroid .rb-hero__rock--c { left: 70%; top: 80%; animation: rb-hit 6s ease-in-out infinite; }
@keyframes rb-drift-a { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(14px, 10px) rotate(8deg); } }
@keyframes rb-drift-b { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-12px, 12px) rotate(-6deg); } }
@keyframes rb-hit { 0%, 30% { transform: translate(0, 0) scale(1); opacity: 1; filter: none; } 46% { transform: translate(-10px, -8px) scale(1); opacity: 1; filter: drop-shadow(0 0 16px #67e8f9); }
    52% { transform: translate(-10px, -8px) scale(1.35); opacity: 0; } 53%, 80% { opacity: 0; transform: scale(.4); } 92%, 100% { opacity: 1; transform: scale(1); } }
#main .gi .ra--asteroid .rb-hero__beam { position: absolute; left: 50%; top: 54%; width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(103, 232, 249, 0), #67e8f9);
    transform-origin: 0 50%; transform: rotate(31deg); opacity: 0; box-shadow: 0 0 12px #67e8f9; animation: rb-beam 6s linear infinite; }
@keyframes rb-beam { 0%, 38% { opacity: 0; width: 20px; } 42% { opacity: 1; width: 140px; } 48%, 100% { opacity: 0; width: 160px; } }
#main .gi .ra--asteroid .rb-hero__sent { position: absolute; left: 0; right: 0; top: 10px; text-align: center; color: #e0f2fe; font: 800 15px/1.4 inherit; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
#main .gi .ra--asteroid .rb-hero__sent u { text-decoration: none; padding: 0 6px; border-radius: 6px; color: #86efac; box-shadow: inset 0 -2px 0 #86efac; animation: rb-word 6s ease-in-out infinite; }
@keyframes rb-word { 0%, 50% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    #main .gi .ra--asteroid .rb-hero *, #main .gi .ra--asteroid .rb-hero__ship { animation: none !important; }
    #main .gi .ra--asteroid .rb-hero__sent u { opacity: 1; }
}