/* 정도 회전판 (/grammar/adjective/wheel.jsp, 2026-10-18). 틀(.aa-*)은 css/ps2-adjective-arcade.css, 여기는 색과 로비 그림(.ai-*) */
#main .gi .aa--wheel { --aa-bg1: #1f1206; --aa-bg2: #4a2a0c; --aa-glow: #fbbf24; --aa-halo: rgba(251, 191, 36, .26); --aa-win: #b45309; --aa-accent: #d97706; }

/* 로비 그림: 칸이 셋인 통나무 과녁이 돌고, 아래에서 핀이 날아가 맞는 칸(such)에 꽂힌다 */
#main .gi .aa--wheel .aa-hero__art { height: 250px; background: radial-gradient(110% 90% at 50% 30%, #3b220c 0%, #1a0f05 60%, #070301 100%); box-shadow: inset 0 0 0 1.5px rgba(251, 191, 36, .35); }
#main .gi .aa--wheel .ai-hero__glow { position: absolute; left: 50%; top: 6%; width: 230px; height: 230px; margin-left: -115px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 191, 36, .28), transparent 65%); }
#main .gi .aa--wheel .ai-hero__wheel { position: absolute; left: 50%; top: 13%; width: 140px; height: 140px; margin-left: -70px; border-radius: 50%; box-sizing: border-box; border: 7px solid #4a2c12;
    background: conic-gradient(from 0deg, rgba(250, 204, 21, .38) 0 120deg, rgba(244, 114, 182, .32) 120deg 240deg, rgba(56, 189, 248, .32) 240deg 360deg), radial-gradient(circle, #c08a4d 0%, #a8743c 60%, #8f5f2e 100%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .55); animation: ai-spin 4.2s linear infinite; }
#main .gi .aa--wheel .ai-hero__wheel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 9px, rgba(60, 30, 10, .16) 9px 10.5px); }
#main .gi .aa--wheel .ai-hero__s { position: absolute; z-index: 1; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-38px); }
#main .gi .aa--wheel .ai-hero__s--1 { --a: 60deg; }
#main .gi .aa--wheel .ai-hero__s--2 { --a: 180deg; }
#main .gi .aa--wheel .ai-hero__s--3 { --a: 300deg; }
#main .gi .aa--wheel .ai-hero__s b { position: absolute; left: 0; top: 0; padding: 2px 8px; border-radius: 8px; white-space: nowrap; font-size: 12.5px; font-weight: 900; color: #fff; background: rgba(15, 23, 42, .82);
    animation: ai-unspin 4.2s linear infinite; }
#main .gi .aa--wheel .ai-hero__wheel u { position: absolute; z-index: 2; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fef3c7, #78350f); }
#main .gi .aa--wheel .ai-hero__wheel em { position: absolute; z-index: 0; left: 50%; top: 50%; width: 4px; height: 30px; margin-left: -2px; border-radius: 2px; background: linear-gradient(#f8fafc, #64748b); transform-origin: 50% 0; }
#main .gi .aa--wheel .ai-hero__wheel em:nth-of-type(1) { transform: rotate(150deg) translateY(62px); }
#main .gi .aa--wheel .ai-hero__wheel em:nth-of-type(2) { transform: rotate(250deg) translateY(62px); }
#main .gi .aa--wheel .ai-hero__mark { position: absolute; z-index: 3; left: 50%; top: calc(13% + 142px); width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid #fbbf24;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, .9)); }
#main .gi .aa--wheel .ai-hero__pin { position: absolute; z-index: 2; left: 50%; bottom: 6%; width: 5px; height: 40px; margin-left: -2.5px; border-radius: 3px; background: linear-gradient(#f8fafc, #64748b); animation: ai-throw 4.2s ease-in infinite; }
#main .gi .aa--wheel .ai-hero__pin::after { content: ""; position: absolute; left: -5px; bottom: -6px; width: 15px; height: 12px; background: #fbbf24; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
#main .gi .aa--wheel .ai-hero__ask { position: absolute; z-index: 4; left: 50%; top: 2%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #fde68a; background: rgba(15, 23, 42, .7); }
#main .gi .aa--wheel .ai-hero__ask b { color: #fff; padding: 0 5px; border-radius: 6px; background: rgba(250, 204, 21, .35); }
#main .gi .aa--wheel .ai-hero__pop { position: absolute; z-index: 3; left: 79%; top: 56%; transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: 18px; color: #fde68a; text-shadow: 0 2px 10px rgba(2, 6, 23, .9); opacity: 0;
    animation: ai-pop 4.2s ease-out infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-unspin { from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); } to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); } }
@keyframes ai-throw { 0%, 30% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(-38px); opacity: 1; } 70% { transform: translateY(-38px); opacity: 1; } 78%, 100% { transform: translateY(-38px); opacity: 0; } }
@keyframes ai-pop { 0%, 40% { opacity: 0; transform: translate(-50%, 8px); } 46%, 70% { opacity: 1; transform: translate(-50%, 0); } 80%, 100% { opacity: 0; transform: translate(-50%, -12px); } }

/* 한 판 */
#main .gi .aa--wheel .aa-cv { touch-action: none; }
#main .gi .aa--wheel .aa-side { display: none; }
#main .gi .aa--wheel .aa-tip b { color: var(--aa-glow); }
@media (max-width: 760px) {
    #main .gi .aa--wheel .aa-hero__art { height: 220px; }
}