/* 자리 블록 (/grammar/adjective/blocks.jsp, 2026-10-18). 틀(.aa-*)은 css/ps2-adjective-arcade.css, 여기는 색과 로비 그림(.ak-*) */
#main .gi .aa--blocks { --aa-bg1: #071328; --aa-bg2: #13235a; --aa-glow: #22d3ee; --aa-halo: rgba(34, 211, 238, .28); --aa-win: #0e7490; --aa-accent: #2563eb; }

/* 로비 그림: 작은 우물. 블록이 홈을 옮겨 다니다가 맞는 홈에 떨어지고, 줄이 빛나며 점수가 떠오른다. 아래에는 틀린 줄이 돌로 쌓여 있다 */
#main .gi .aa--blocks .aa-hero__art { --drop: -128px; height: 260px; background: linear-gradient(180deg, #0b2346, #050c1c); box-shadow: inset 0 0 0 1.5px rgba(34, 211, 238, .45), 0 0 30px rgba(34, 211, 238, .18); }
#main .gi .aa--blocks .ak-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(56, 189, 248, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, .08) 1px, transparent 1px);
    background-size: 28px 28px; }
#main .gi .aa--blocks .ak-hero__t { position: absolute; z-index: 0; width: 22px; height: 22px; border-radius: 4px; background: rgba(34, 211, 238, .1); box-shadow: 24px 0 0 rgba(34, 211, 238, .1), 48px 0 0 rgba(34, 211, 238, .1), 24px 24px 0 rgba(34, 211, 238, .1);
    animation: ak-drift 9s linear infinite; }
#main .gi .aa--blocks .ak-hero__t--1 { left: 8%; top: -20%; }
#main .gi .aa--blocks .ak-hero__t--2 { left: 72%; top: -40%; animation-duration: 12s; animation-delay: -4s; }
#main .gi .aa--blocks .ak-hero__t--3 { left: 42%; top: -60%; animation-duration: 15s; animation-delay: -8s; }
#main .gi .aa--blocks .ak-hero__row { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 40%; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 12px;
    background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); animation: ak-row 3.6s ease-in-out infinite; }
#main .gi .aa--blocks .ak-hero__row > * { flex: none; }
#main .gi .aa--blocks .ak-hero__row i { display: inline-grid; place-items: center; height: 30px; padding: 0 10px; border-radius: 8px; font-weight: 800; font-size: 15px; line-height: 1; font-family: inherit; font-style: normal; color: #0f172a;
    background: linear-gradient(#fff, #dbe4ef); box-shadow: inset 0 -3px 0 rgba(15, 23, 42, .16); }
#main .gi .aa--blocks .ak-hero__row u { display: inline-block; width: 5px; height: 22px; border-radius: 3px; background: rgba(34, 211, 238, .55); text-decoration: none; }
#main .gi .aa--blocks .ak-hero__row em { color: #e2e8f0; font-weight: 900; font-size: 16px; line-height: 1; font-family: inherit; font-style: normal; }
/* 맞는 홈: 점선 틀 + 그 위로 떨어지는 블록(::after)과 빛줄기(::before) */
#main .gi .aa--blocks .ak-hero__row b { position: relative; display: inline-block; width: 66px; height: 30px; border-radius: 8px; border: 2px dashed #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238, .55); }
#main .gi .aa--blocks .ak-hero__row b::after { content: "always"; position: absolute; inset: -2px; display: grid; place-items: center; border-radius: 8px; font-weight: 900; font-size: 14px; color: #fff;
    background: linear-gradient(#22d3ee, #2563eb); box-shadow: 0 0 18px rgba(34, 211, 238, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .75); animation: ak-block 3.6s cubic-bezier(.5, 0, .75, .5) infinite; }
#main .gi .aa--blocks .ak-hero__row b::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 100%; height: 110px; background: linear-gradient(rgba(34, 211, 238, 0), rgba(34, 211, 238, .32)); animation: ak-beam 3.6s linear infinite; }
#main .gi .aa--blocks .ak-hero__pop { position: absolute; z-index: 4; left: 0; right: 0; bottom: 60%; text-align: center; font-weight: 900; font-size: 22px; color: #86efac; text-shadow: 0 2px 10px rgba(2, 6, 23, .8); opacity: 0;
    animation: ak-pop 3.6s ease-out infinite; }
#main .gi .aa--blocks .ak-hero__stone { position: absolute; z-index: 1; left: 4%; right: 4%; display: grid; place-items: center; height: 34px; border-radius: 9px; background: linear-gradient(#556274, #2b3442);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
#main .gi .aa--blocks .ak-hero__stone--1 { bottom: 22%; }
#main .gi .aa--blocks .ak-hero__stone--2 { bottom: 5%; }
#main .gi .aa--blocks .ak-hero__stone i { font-weight: 700; font-size: 12px; line-height: 1; font-family: inherit; font-style: normal; color: rgba(226, 232, 240, .55); white-space: nowrap; overflow: hidden; max-width: 92%; text-overflow: ellipsis; }
#main .gi .aa--blocks .ak-hero__stone i::before { content: "✗  "; }
@keyframes ak-block { 0% { transform: translate(96px, var(--drop)); opacity: 0; } 5% { transform: translate(96px, var(--drop)); opacity: 1; }
    13% { transform: translate(48px, var(--drop)); } 15% { transform: translate(48px, var(--drop)) scaleX(.2); } 17% { transform: translate(48px, var(--drop)) scaleX(1); }
    25%, 30% { transform: translate(0, var(--drop)); } 52% { transform: translate(0, 0); } 72% { transform: translate(0, 0) scale(1); opacity: 1; } 82% { transform: scale(1.25); opacity: 0; } 100% { transform: translate(96px, var(--drop)); opacity: 0; } }
@keyframes ak-beam { 0%, 26% { opacity: 0; } 30%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes ak-row { 0%, 52% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); }
    58% { box-shadow: 0 0 0 2px #bbf7d0, 0 0 30px rgba(134, 239, 172, .8); background: rgba(134, 239, 172, .32); } 78%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); } }
@keyframes ak-pop { 0%, 54% { opacity: 0; transform: translateY(14px) scale(.8); } 60% { opacity: 1; transform: translateY(0) scale(1.1); } 80% { opacity: 1; transform: translateY(-18px) scale(1); } 90%, 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes ak-drift { to { top: 120%; } }

/* 한 판 */
#main .gi .aa--blocks .ak-next { display: inline-grid; place-items: center; min-width: 54px; height: 26px; padding: 0 10px; border-radius: 8px; background: linear-gradient(#22d3ee, #2563eb); color: #fff; font-weight: 900; font-size: 13px; line-height: 1; font-family: inherit; }
#main .gi .aa--blocks .aa-q .aa-ask b { padding: 1px 9px; border-radius: 8px; background: linear-gradient(#22d3ee, #2563eb); color: #fff; }
#main .gi .aa--blocks .aa-pad:disabled { opacity: .4; cursor: default; }
#main .gi .aa--blocks .aa-side { display: none; }
@media (max-width: 760px) {
    #main .gi .aa--blocks .aa-hero__art { --drop: -86px; height: 190px; }
    #main .gi .aa--blocks .ak-hero__row { bottom: 44%; }
    #main .gi .aa--blocks .ak-hero__row i { padding: 0 7px; font-size: 13px; }
    #main .gi .aa--blocks .ak-hero__row b { width: 58px; }
    #main .gi .aa--blocks .ak-hero__row b::before { height: 76px; }
    #main .gi .aa--blocks .ak-hero__stone { height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .aa--blocks .ak-hero__row b::after, #main .gi .aa--blocks .ak-hero__row b::before { animation: none; }
}