/* 낱말 뽑기 (/grammar/adjective/claw.jsp, 2026-10-18). 틀(.aa-*)은 css/ps2-adjective-arcade.css, 여기는 색과 로비 그림(.ac-*) */
#main .gi .aa--claw { --aa-bg1: #1f0627; --aa-bg2: #4a0e57; --aa-glow: #f472b6; --aa-halo: rgba(249, 168, 212, .26); --aa-win: #9d174d; --aa-accent: #db2777; }

/* 로비 그림: 전광판의 칸이 하나씩 차고, 집게가 내려가 캡슐을 뽑아 올린다 */
#main .gi .aa--claw .aa-hero__art { height: 250px; background: linear-gradient(180deg, #3b0a45, #12031a); box-shadow: inset 0 0 0 1.5px rgba(249, 168, 212, .4); }
#main .gi .aa--claw .ac-hero__board { position: absolute; left: 8%; right: 8%; top: 7%; display: flex; justify-content: center; gap: 6px; padding: 8px; border-radius: 10px; background: rgba(2, 6, 23, .8); box-shadow: 0 0 0 1.5px rgba(249, 168, 212, .6), 0 0 14px rgba(244, 114, 182, .4); }
#main .gi .aa--claw .ac-hero__board i { display: grid; place-items: center; min-width: 50px; height: 26px; padding: 0 6px; border-radius: 6px; font-style: normal; font-weight: 900; font-size: 13px; color: #ecfdf5; border: 1.5px dashed rgba(255, 255, 255, .3); }
#main .gi .aa--claw .ac-hero__board i:first-child { border: 0; color: #e2e8f0; min-width: 0; }
#main .gi .aa--claw .ac-hero__board i.is-on { border: 1.5px solid #86efac; background: rgba(74, 222, 128, .2); }
#main .gi .aa--claw .ac-hero__board i:nth-child(3) { animation: ac-fill 3.6s linear infinite; }
#main .gi .aa--claw .ac-hero__board i:nth-child(3)::after { content: "wooden"; opacity: 0; animation: ac-word 3.6s linear infinite; }
#main .gi .aa--claw .ac-hero__glass { position: absolute; left: 6%; top: 32%; width: 10%; bottom: 10%; background: linear-gradient(100deg, rgba(255, 255, 255, .08), transparent); transform: skewX(-8deg); }
#main .gi .aa--claw .ac-hero__rail { position: absolute; left: 6%; right: 6%; top: 30%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
#main .gi .aa--claw .ac-hero__claw { position: absolute; left: 58%; top: 30%; width: 2px; height: 30px; margin-left: -1px; background: #e2e8f0; animation: ac-claw 3.6s ease-in-out infinite; }
#main .gi .aa--claw .ac-hero__claw b { position: absolute; left: -16px; bottom: -12px; width: 34px; height: 14px; border-radius: 6px; background: linear-gradient(90deg, #64748b, #e2e8f0, #64748b); }
#main .gi .aa--claw .ac-hero__claw b::before, #main .gi .aa--claw .ac-hero__claw b::after { content: ""; position: absolute; top: 12px; width: 4px; height: 20px; border-radius: 2px; background: #cbd5e1; }
#main .gi .aa--claw .ac-hero__claw b::before { left: 2px; transform: rotate(18deg); transform-origin: top; }
#main .gi .aa--claw .ac-hero__claw b::after { right: 2px; transform: rotate(-18deg); transform-origin: top; }
#main .gi .aa--claw .ac-hero__claw u { position: absolute; left: -32px; top: calc(100% + 26px); width: 66px; height: 26px; border-radius: 13px; display: grid; place-items: center; text-decoration: none; font-weight: 900; font-size: 11.5px; color: #111827;
    background: linear-gradient(#34d399 0 50%, #f8fafc 50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); opacity: 0; animation: ac-held 3.6s ease-in-out infinite; }
#main .gi .aa--claw .ac-hero__pile { position: absolute; left: 8%; right: 8%; bottom: 8%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#main .gi .aa--claw .ac-hero__pile i { display: grid; place-items: center; height: 28px; padding: 0 12px; border-radius: 14px; font-style: normal; font-weight: 900; font-size: 12px; color: #111827;
    background: linear-gradient(var(--c) 0 50%, #f8fafc 50%); box-shadow: 0 3px 6px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .5); }
#main .gi .aa--claw .ac-hero__pile i:nth-child(3) { animation: ac-gone 3.6s linear infinite; }
#main .gi .aa--claw .ac-hero__bulbs { position: absolute; left: 0; right: 0; top: 0; height: 8px; background: radial-gradient(circle, #f9a8d4 0 2.5px, transparent 3px) 0 0 / 22px 8px; animation: ac-bulb .5s steps(2) infinite; }
@keyframes ac-claw { 0%, 10% { height: 30px; } 35%, 45% { height: 120px; } 70%, 100% { height: 30px; } }
@keyframes ac-held { 0%, 40% { opacity: 0; } 45%, 66% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes ac-gone { 0%, 42% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes ac-fill { 0%, 70% { border-style: dashed; border-color: rgba(255, 255, 255, .3); background: transparent; } 75%, 100% { border-style: solid; border-color: #86efac; background: rgba(74, 222, 128, .2); } }
@keyframes ac-word { 0%, 70% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes ac-bulb { to { background-position: 11px 0; } }

/* 한 판 */
#main .gi .aa--claw .aa-side { display: none; }
@media (max-width: 760px) {
    #main .gi .aa--claw .aa-hero__art { height: 210px; }
    #main .gi .aa--claw .ac-hero__board i { min-width: 40px; font-size: 12px; }
}