/* 문장 구슬 (/grammar/adjective/marbles.jsp, 2026-10-18). 틀(.aa-*)은 css/ps2-adjective-arcade.css, 여기는 색과 로비 그림(.am-*) */
#main .gi .aa--marbles { --aa-bg1: #05261f; --aa-bg2: #0e4a3c; --aa-glow: #34d399; --aa-halo: rgba(251, 191, 36, .24); --aa-win: #047857; --aa-accent: #0f766e; }

/* 로비 그림: 금빛 길 위로 낱말 구슬 줄이 구르고, 발사대의 구슬이 틈으로 날아가 들어간 뒤 줄이 빛난다 */
#main .gi .aa--marbles .aa-hero__art { height: 250px; background: radial-gradient(120% 90% at 50% 100%, #0b4d3f 0%, #05261f 55%, #03140f 100%); box-shadow: inset 0 0 0 1.5px rgba(251, 191, 36, .35); }
#main .gi .aa--marbles .am-hero__track { position: absolute; left: 6%; right: 6%; top: 30%; height: 40px; border-radius: 999px; background: rgba(2, 6, 23, .55); box-shadow: 0 0 0 4px rgba(251, 191, 36, .25), inset 0 2px 8px rgba(0, 0, 0, .6); }
#main .gi .aa--marbles .am-hero__chain { position: absolute; z-index: 2; left: 9%; top: calc(30% + 5px); display: flex; gap: 5px; align-items: center; animation: am-roll 4s linear infinite; }
#main .gi .aa--marbles .am-hero__chain > * { flex: none; }
#main .gi .aa--marbles .am-hero__chain i { display: inline-grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font-weight: 800; font-size: 14px; font-style: normal; color: #1f2937;
    background: linear-gradient(#fffdf7, #e7dcc4); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); animation: am-gold 4s linear infinite; }
#main .gi .aa--marbles .am-hero__chain b { display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, .8); animation: am-gap 4s linear infinite; }
#main .gi .aa--marbles .am-hero__hole { position: absolute; right: 6%; top: calc(30% - 4px); width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, #000 0 55%, rgba(239, 68, 68, .6) 100%); box-shadow: 0 0 0 3px rgba(251, 191, 36, .7); }
#main .gi .aa--marbles .am-hero__base { position: absolute; left: 50%; bottom: 8%; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3c4, #d4a017 55%, #5b4300); box-shadow: 0 0 26px rgba(251, 191, 36, .6); }
#main .gi .aa--marbles .am-hero__base i { position: absolute; left: 50%; top: -22px; width: 18px; height: 34px; margin-left: -9px; border-radius: 7px; background: linear-gradient(90deg, #5b4300, #facc15, #5b4300); transform-origin: 50% 100%; transform: rotate(-16deg); }
#main .gi .aa--marbles .am-hero__shot { position: absolute; z-index: 3; left: 50%; bottom: calc(8% + 40px); display: grid; place-items: center; height: 28px; padding: 0 12px; border-radius: 999px; transform: translateX(-50%);
    font-weight: 900; font-size: 13px; color: #fff; background: linear-gradient(#2dd4bf, #0f766e); box-shadow: 0 0 16px rgba(45, 212, 191, .8); animation: am-shot 4s ease-in infinite; }
#main .gi .aa--marbles .am-hero__pop { position: absolute; z-index: 4; left: 0; right: 0; top: 12%; text-align: center; font-weight: 900; font-size: 20px; color: #fde68a; text-shadow: 0 2px 10px rgba(2, 6, 23, .9); opacity: 0;
    animation: am-pop 4s ease-out infinite; }
@keyframes am-roll { 0% { transform: translateX(-30px); } 100% { transform: translateX(40px); } }
@keyframes am-shot { 0%, 30% { opacity: 1; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(calc(-50% - 92px), -118px); } 52%, 100% { opacity: 0; transform: translate(calc(-50% - 92px), -118px); } }
@keyframes am-gap { 0%, 50% { opacity: 1; width: 30px; } 54% { width: 64px; background: linear-gradient(#2dd4bf, #0f766e); border-color: #fff; } 80% { opacity: 1; width: 64px; } 84%, 100% { opacity: 0; width: 64px; } }
@keyframes am-gold { 0%, 54% { background: linear-gradient(#fffdf7, #e7dcc4); } 58%, 76% { background: linear-gradient(#fff7d6, #f5c451); box-shadow: 0 0 14px rgba(251, 191, 36, .9); } 82%, 100% { opacity: 0; transform: scale(1.4); } }
@keyframes am-pop { 0%, 54% { opacity: 0; transform: translateY(10px); } 60%, 80% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(-14px); } }

/* 한 판 */
#main .gi .aa--marbles .aa-q .aa-ask b { padding: 1px 10px; border-radius: 999px; background: linear-gradient(#2dd4bf, #0f766e); color: #fff; }
#main .gi .aa--marbles .aa-pad:disabled { opacity: .4; cursor: default; }
#main .gi .aa--marbles .aa-side { display: none; }
@media (max-width: 760px) {
    #main .gi .aa--marbles .aa-hero__art { height: 200px; }
    #main .gi .aa--marbles .am-hero__chain i { padding: 0 8px; font-size: 12.5px; height: 26px; }
    #main .gi .aa--marbles .am-hero__chain b { width: 26px; height: 26px; }
}