/* 뜻 짝 잇기 (/grammar/adjective/pairs.jsp, 2026-10-18). 틀(.aa-*)은 css/ps2-adjective-arcade.css, 여기는 색 · 판 · 타일 · 로비 그림(.ae-*) */
#main .gi .aa--pairs { --aa-bg1: #0b2a24; --aa-bg2: #11473b; --aa-glow: #38bdf8; --aa-halo: rgba(56, 189, 248, .24); --aa-win: #0f766e; --aa-accent: #0e7490; }

/* 로비 그림: 영어 타일과 뜻 타일이 깔려 있고, 가운데 타일을 넘어 꺾임 둘의 번개가 짝을 잇는다 */
#main .gi .aa--pairs .aa-hero__art { height: 250px; background: radial-gradient(120% 100% at 50% 0%, #14532d 0%, #0b2a24 55%, #04120f 100%); box-shadow: inset 0 0 0 1.5px rgba(56, 189, 248, .35); }
#main .gi .aa--pairs .ae-hero__grid { position: absolute; left: 6%; right: 6%; top: 24%; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 64px; }
#main .gi .aa--pairs .ae-hero__grid i { display: grid; align-items: center; margin: 4px; padding: 6px 7px; border-radius: 9px; font-style: normal; font-weight: 800; font-size: 12px; line-height: 1.25; color: #1f2937;
    background: linear-gradient(#fffdf6, #efe6d2); box-shadow: 0 3px 0 #c9b88f, 0 6px 12px rgba(0, 0, 0, .35); border-top: 3px solid #2563eb; overflow: hidden; }
#main .gi .aa--pairs .ae-hero__grid i.is-ko { border-top-color: #dc2626; background: linear-gradient(#fff8f5, #f3e3dc); }
#main .gi .aa--pairs .ae-hero__grid i.is-hit { animation: ae-hit 3.6s ease-in-out infinite; }
#main .gi .aa--pairs .ae-hero__bolt { position: absolute; z-index: 2; left: 20.7%; width: 58.6%; top: 14%; height: calc(10% + 6px); box-sizing: border-box; border: 3px solid #7dd3fc; border-bottom: 0; border-radius: 6px 6px 0 0;
    box-shadow: 0 0 14px rgba(125, 211, 252, .9), inset 0 0 10px rgba(125, 211, 252, .6); opacity: 0; animation: ae-bolt 3.6s ease-in-out infinite; }
#main .gi .aa--pairs .ae-hero__pop { position: absolute; z-index: 3; left: 50%; top: 3%; 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: ae-pop 3.6s ease-out infinite; }
@keyframes ae-hit { 0%, 30% { transform: none; box-shadow: 0 3px 0 #c9b88f, 0 6px 12px rgba(0, 0, 0, .35); opacity: 1; } 38%, 55% { transform: translateY(-3px); box-shadow: 0 0 0 3px #7dd3fc, 0 0 18px rgba(125, 211, 252, .9); opacity: 1; } 66%, 90% { transform: scale(1.15); opacity: 0; } 100% { opacity: 1; transform: none; } }
@keyframes ae-bolt { 0%, 36% { opacity: 0; } 40%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes ae-pop { 0%, 40% { opacity: 0; transform: translate(-50%, 8px); } 46%, 66% { opacity: 1; transform: translate(-50%, 0); } 78%, 100% { opacity: 0; transform: translate(-50%, -10px); } }

/* 판: 펠트 위에 타일, 그 위에 번개 · 입자 그림판 */
#main .gi .aa--pairs .ae-board { position: relative; max-width: 100%; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(2, 6, 23, .85), inset 0 0 0 1.5px rgba(255, 255, 255, .08); overflow: hidden; user-select: none; -webkit-user-select: none; }
#main .gi .aa--pairs .ae-board--t0 { background: radial-gradient(120% 90% at 50% 0%, #165e45 0%, #0d3b2e 60%, #082219 100%); }
#main .gi .aa--pairs .ae-board--t1 { background: radial-gradient(120% 90% at 50% 0%, #3b2a6b 0%, #241747 60%, #140b2c 100%); }
#main .gi .aa--pairs .ae-board--t2 { background: radial-gradient(120% 90% at 50% 0%, #1e3a5f 0%, #12263f 60%, #0a1626 100%); }
#main .gi .aa--pairs .ae-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 7px); }
#main .gi .aa--pairs .ae-field { position: relative; }
#main .gi .aa--pairs .ae-fx { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
#main .gi .aa--pairs .ae-time { position: absolute; z-index: 2; left: 20px; right: 20px; top: 6px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
#main .gi .aa--pairs .ae-time i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #34d399, #38bdf8); transition: width .2s linear; }
#main .gi .aa--pairs .ae-time.is-low i { background: linear-gradient(90deg, #f87171, #fb923c); }

/* 타일 */
#main .gi .aa--pairs .ae-tile { position: absolute; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 6px 10px 7px 12px; border: 0; border-top: 4px solid #2563eb; border-radius: 12px;
    background: linear-gradient(#fffdf6, #efe6d2); color: #1f2937; text-align: left; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1.28; word-break: keep-all; overflow-wrap: anywhere;
    box-shadow: 0 4px 0 #c9b88f, 0 9px 18px rgba(0, 0, 0, .38); transition: left .35s cubic-bezier(.3, 1.3, .5, 1), top .35s cubic-bezier(.3, 1.3, .5, 1), transform .15s, box-shadow .15s; animation: ae-in .45s cubic-bezier(.3, 1.4, .5, 1) backwards; }
#main .gi .aa--pairs .ae-tile.is-sm { font-size: 12px; }
#main .gi .aa--pairs .ae-tile.is-xs { font-size: 11px; line-height: 1.22; }
#main .gi .aa--pairs .ae-tile--ko { border-top-color: #dc2626; background: linear-gradient(#fff8f5, #f3e3dc); box-shadow: 0 4px 0 #cdb1a5, 0 9px 18px rgba(0, 0, 0, .38); }
#main .gi .aa--pairs .ae-tile--q { border-top-color: #7c3aed; }
#main .gi .aa--pairs .ae-tile--opt { border-top-color: #0d9488; align-items: center; text-align: center; font-size: 14px; }
#main .gi .aa--pairs .ae-tile__k { font-size: 9.5px; font-weight: 900; letter-spacing: .06em; color: #94a3b8; }
#main .gi .aa--pairs .ae-tile__t { display: block; }
#main .gi .aa--pairs .ae-tile:hover { transform: translateY(-2px); }
#main .gi .aa--pairs .ae-tile:focus-visible { outline: 3px solid #fde68a; outline-offset: 2px; }
#main .gi .aa--pairs .ae-tile.is-sel { transform: translateY(-5px) scale(1.03); box-shadow: 0 0 0 3px var(--aa-glow), 0 0 22px rgba(56, 189, 248, .75), 0 12px 22px rgba(0, 0, 0, .45); z-index: 2; }
#main .gi .aa--pairs .ae-tile[data-cat="0"] { box-shadow: inset 6px 0 0 #3b82f6, 0 4px 0 #c9b88f, 0 9px 18px rgba(0, 0, 0, .38); }
#main .gi .aa--pairs .ae-tile[data-cat="1"] { box-shadow: inset 6px 0 0 #10b981, 0 4px 0 #c9b88f, 0 9px 18px rgba(0, 0, 0, .38); }
#main .gi .aa--pairs .ae-tile[data-cat="2"] { box-shadow: inset 6px 0 0 #f59e0b, 0 4px 0 #c9b88f, 0 9px 18px rgba(0, 0, 0, .38); }
#main .gi .aa--pairs .ae-tile[data-cat].is-sel { box-shadow: 0 0 0 3px var(--aa-glow), 0 0 22px rgba(56, 189, 248, .75), 0 12px 22px rgba(0, 0, 0, .45); }
#main .gi .aa--pairs .ae-tile.is-gone { pointer-events: none; animation: ae-out .5s ease-in forwards; }
#main .gi .aa--pairs .ae-tile.is-bad { animation: ae-shake .45s; background: linear-gradient(#fee2e2, #fecaca); }
#main .gi .aa--pairs .ae-tile.is-blocked { animation: ae-shake .35s; }
#main .gi .aa--pairs .ae-probe { visibility: hidden; position: absolute; left: 0; top: 0; height: auto; animation: none; }
@keyframes ae-in { from { opacity: 0; transform: translateY(-26px) scale(.8); } }
@keyframes ae-out { 40% { transform: scale(1.12); opacity: 1; filter: brightness(1.4); } 100% { transform: scale(.4) rotate(8deg); opacity: 0; } }
@keyframes ae-shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 4px 0; } }

/* 한 판 */
#main .gi .aa--pairs .aa-side { display: none; }
#main .gi .aa--pairs .aa-ctl { display: none; }
@media (max-width: 760px) {
    #main .gi .aa--pairs .aa-hero__art { height: 230px; }
    #main .gi .aa--pairs .ae-hero__grid i { font-size: 11px; }
    #main .gi .aa--pairs .ae-tile { font-size: 11.5px; line-height: 1.24; padding: 5px 6px 6px 8px; border-radius: 10px; border-top-width: 3px; }
    #main .gi .aa--pairs .ae-tile.is-sm { font-size: 11px; }
    #main .gi .aa--pairs .ae-tile.is-xs { font-size: 10.5px; line-height: 1.2; }
    #main .gi .aa--pairs .ae-tile--opt { font-size: 12.5px; }
    #main .gi .aa--pairs .ae-tile__k { display: none; }
    #main .gi .aa--pairs .ae-time { left: 12px; right: 12px; }
}