/* 괄호 리듬 (/grammar/relative/rhythm.jsp, 2026-10-18). 틀(.ra-*)은 css/ps2-relative-arcade.css, 여기는 색 · 로비 그림 · 문장 표시(.rd-*) */
#main .gi .ra--rhythm { --ra-bg1: #0b0218; --ra-bg2: #3b0764; --ra-glow: #f0abfc; --ra-halo: rgba(168, 85, 247, .3); --ra-win: #6d28d9; --ra-accent: #7c3aed; }

/* 문장: 괄호 · 짝 · 지금 판정선의 낱말 */
#main .gi .ra--rhythm .rd-ask .rd-w { transition: color .12s, background .12s; border-radius: 6px; padding: 0 1px; }
#main .gi .ra--rhythm .rd-ask .rd-w.is-cur { background: rgba(255, 255, 255, .16); box-shadow: inset 0 -2px 0 #e9d5ff; }
#main .gi .ra--rhythm .rd-ask .rd-w.is-in { color: #bae6fd; }
#main .gi .ra--rhythm .rd-w.is-v { color: #fde047; font-weight: 900; }
#main .gi .ra--rhythm .rd-br, #main .gi .ra--rhythm .ra-q .ra-ask b.rd-br { font-weight: 900; margin: 0 1px; }
#main .gi .ra--rhythm .rd-br--s, #main .gi .ra--rhythm .ra-q .ra-ask b.rd-br--s { color: #38bdf8; }
#main .gi .ra--rhythm .rd-br--e, #main .gi .ra--rhythm .ra-q .ra-ask b.rd-br--e { color: #f472b6; }
#main .gi .ra--rhythm .rd-sent .rd-w.is-in { color: #0369a1; }
#main .gi .ra--rhythm .rd-sent .rd-w.is-v { color: #a16207; box-shadow: inset 0 -2px 0 #facc15; }
#main .gi .ra--rhythm .rd-sent .rd-br--s { color: #0284c7; }
#main .gi .ra--rhythm .rd-sent .rd-br--e { color: #db2777; }
#main .gi .ra--rhythm .rd-sent u, #main .gi .ra--rhythm .rd-ask u { text-decoration: none; padding: 0 6px; border-radius: 7px; background: #dcfce7; color: #166534; box-shadow: inset 0 -2px 0 #22c55e; }
#main .gi .ra--rhythm .rd-legend { display: block; margin-top: 4px; font: 600 13px/1.5 inherit; color: var(--ra-mute); }
#main .gi .ra--rhythm .ra-card__mine s { color: #b91c1c; }

/* 머리 오른쪽: 박자 */
#main .gi .ra--rhythm .rd-bpm b { font-size: 14px; color: #7c3aed; }

/* 칼 단추 셋 */
#main .gi .ra--rhythm .rd-pad { min-width: 96px; border-width: 2px; }
#main .gi .ra--rhythm .rd-pad b { display: block; font-size: 22px; line-height: 1.1; }
#main .gi .ra--rhythm .rd-pad--s { border-color: #38bdf8; color: #0369a1; }
#main .gi .ra--rhythm .rd-pad--v { border-color: #facc15; color: #a16207; }
#main .gi .ra--rhythm .rd-pad--e { border-color: #f472b6; color: #be185d; }
#main .gi .ra--rhythm .rd-pad:active { transform: scale(.96); }

/* 로비 그림: 네온 복도 · 날아오는 블록 · 세 칼 */
#main .gi .ra--rhythm .rd-hero { background: radial-gradient(60% 50% at 50% 22%, rgba(168, 85, 247, .55), transparent 70%), linear-gradient(180deg, #05010f, #140629 60%, #0b0218); perspective: 400px; }
#main .gi .ra--rhythm .rd-hero__floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 70%; transform: rotateX(62deg); transform-origin: 50% 100%;
    background: repeating-linear-gradient(90deg, rgba(56, 189, 248, .35) 0 2px, transparent 2px 60px), repeating-linear-gradient(0deg, rgba(244, 114, 182, .4) 0 2px, transparent 2px 46px);
    animation: rd-floor 0.75s linear infinite; }
@keyframes rd-floor { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 46px; } }
#main .gi .ra--rhythm .rd-hero__block { position: absolute; left: 50%; top: 22%; padding: 4px 12px; border-radius: 8px; background: linear-gradient(#312e81, #0f0a1f); border: 1.5px solid #c4b5fd;
    color: #fff; font: 900 16px/1.3 inherit; box-shadow: 0 0 16px rgba(168, 85, 247, .8); transform: translate(-50%, 0) scale(.3); opacity: 0; animation: rd-fly 2.25s ease-in infinite; }
#main .gi .ra--rhythm .rd-hero__block--b { animation-delay: .75s; }
#main .gi .ra--rhythm .rd-hero__block--c { animation-delay: 1.5s; }
@keyframes rd-fly { 0% { top: 22%; transform: translate(-50%, 0) scale(.3); opacity: 0; } 15% { opacity: 1; } 78% { top: 66%; transform: translate(-50%, 0) scale(1.25); opacity: 1; } 84% { opacity: 0; transform: translate(-50%, 0) scale(1.5); } 100% { opacity: 0; } }
#main .gi .ra--rhythm .rd-hero__saber { position: absolute; bottom: 12%; width: 6px; height: 54px; border-radius: 4px; transform-origin: 50% 100%; }
#main .gi .ra--rhythm .rd-hero__saber--s { left: 22%; background: #38bdf8; box-shadow: 0 0 16px #38bdf8; transform: rotate(-28deg); animation: rd-swing-s 2.25s ease-in-out infinite; }
#main .gi .ra--rhythm .rd-hero__saber--v { left: 50%; background: #facc15; box-shadow: 0 0 16px #facc15; animation: rd-swing-v 2.25s ease-in-out infinite; }
#main .gi .ra--rhythm .rd-hero__saber--e { left: 78%; background: #f472b6; box-shadow: 0 0 16px #f472b6; transform: rotate(28deg); animation: rd-swing-e 2.25s ease-in-out infinite; }
@keyframes rd-swing-s { 0%, 26% { transform: rotate(-28deg); } 32% { transform: rotate(40deg); } 44%, 100% { transform: rotate(-28deg); } }
@keyframes rd-swing-e { 0%, 59% { transform: rotate(28deg); } 65% { transform: rotate(-40deg); } 77%, 100% { transform: rotate(28deg); } }
@keyframes rd-swing-v { 0%, 92% { transform: rotate(0); } 96% { transform: rotate(-36deg); } 100% { transform: rotate(0); } }
#main .gi .ra--rhythm .rd-hero__sent { position: absolute; left: 0; right: 0; top: 10px; text-align: center; color: #f5f3ff; font: 800 15px/1.4 inherit; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
#main .gi .ra--rhythm .rd-hero__sent .s { color: #38bdf8; }
#main .gi .ra--rhythm .rd-hero__sent .e { color: #f472b6; }
#main .gi .ra--rhythm .rd-hero__sent em { font-style: normal; color: #fde047; }
@media (prefers-reduced-motion: reduce) {
    #main .gi .ra--rhythm .rd-hero * { animation: none !important; }
    #main .gi .ra--rhythm .rd-hero__block--a { opacity: 1; top: 50%; transform: translate(-50%, 0); }
}