/* 덩어리 올가미 (G.U08 동명사 게임 · /grammar/gerund/lasso.jsp) — 색(--ga-*), 로비 그림(.gla-hero), 올가미 표시 · 당기기 단추 · '왜' 카드의 내가 묶은 범위.
   틀: css/ps2-gerund-arcade.css (#main .gi .pa 아래 .ga-*). 놀이 화면(연못 · 잎 · 고리)은 캔버스에 그린다. */
#main .gi .ga--lasso { --ga-bg1: #0c2231; --ga-bg2: #14532d; --ga-glow: #fde047; --ga-halo: rgba(253, 224, 71, .22); --ga-win: #166534; --ga-accent: #0f766e; --ga-hot: #f59e0b; }

/* ── 로비 그림: 고리가 덩어리를 두르고 → 덩어리가 떠오르고 → 낚싯줄이 짝을 낚는다 (6초 되풀이) */
#main .gi .ga--lasso .gla-hero { position: absolute; inset: 0; overflow: hidden;
    background: linear-gradient(180deg, #3b2a6b 0%, #a855f7 18%, #f59e6b 33%, #3d4f94 33.6%, #1f2f6b 60%, #141f4d 100%); }
#main .gi .ga--lasso .gla-hero__moon { position: absolute; right: 12%; top: 9%; width: 28px; height: 28px; border-radius: 50%; background: #ffedd5; box-shadow: 0 0 34px 12px rgba(251, 146, 60, .45); }
#main .gi .ga--lasso .gla-hero__rip { position: absolute; width: 86px; height: 26px; border: 2px solid rgba(255, 255, 255, .38); border-radius: 50%; animation: gla-rip 3.4s ease-out infinite; }
#main .gi .ga--lasso .gla-hero__rip--a { left: 10%; top: 80%; }
#main .gi .ga--lasso .gla-hero__rip--b { right: 12%; top: 86%; animation-delay: 1.6s; }
#main .gi .ga--lasso .gla-hero__row { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 18px; white-space: nowrap; }
#main .gi .ga--lasso .gla-hero__chunk { position: relative; z-index: 2; display: inline-flex; gap: 7px; animation: gla-lift 6s ease-in-out infinite; }
#main .gi .ga--lasso .gla-hero__tail { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; transform: translateX(-22px); }
#main .gi .ga--lasso .gla-hero__leaf { position: relative; isolation: isolate; display: inline-block; padding: 6px 12px; border-radius: 999px; background: linear-gradient(#4cc46a, #17723a);
    color: #f8fafc; font-weight: 800; font-size: 15px; line-height: 1.2; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); box-shadow: 0 7px 0 -3px rgba(2, 6, 23, .35); }
#main .gi .ga--lasso .gla-hero__leaf.is-p { padding: 4px 9px; background: rgba(226, 232, 240, .85); color: #1e293b; text-shadow: none; }
#main .gi .ga--lasso .gla-hero__chunk .gla-hero__leaf { animation: gla-ink 6s ease-in-out infinite; }
#main .gi .ga--lasso .gla-hero__chunk .gla-hero__leaf::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(#fff3c4, #f0a01a); opacity: 0; animation: gla-gold 6s ease-in-out infinite; }
#main .gi .ga--lasso .gla-hero__rope { position: absolute; left: -16px; top: -13px; width: calc(100% + 32px); height: calc(100% + 26px); overflow: visible; pointer-events: none; }
#main .gi .ga--lasso .gla-hero__rope path { fill: none; stroke: #fbbf24; stroke-width: 3.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100;
    filter: drop-shadow(0 1px 0 rgba(41, 22, 4, .85)); animation: gla-draw 6s ease-in-out infinite; }
#main .gi .ga--lasso .gla-hero__leaf.is-v { animation: gla-v 6s ease-in-out infinite; }
#main .gi .ga--lasso .gla-hero__leaf.is-v::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(#a5f3fc, #0e7490); opacity: 0; animation: gla-cyan 6s ease-in-out infinite; }
#main .gi .ga--lasso .gla-hero__line { position: absolute; left: 50%; bottom: 100%; width: 2px; height: 190px; margin-left: -1px; background: rgba(241, 245, 249, .85); transform-origin: top; transform: scaleY(0); animation: gla-line 6s ease-in-out infinite; }
#main .gi .ga--lasso .gla-hero__line::after { content: ""; position: absolute; left: -7px; bottom: -8px; width: 8px; height: 8px; border: 2.5px solid #e2e8f0; border-top: 0; border-right: 0; border-radius: 0 0 0 8px; }
@keyframes gla-draw { 0%, 4% { stroke-dashoffset: 100; opacity: 1; } 28% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes gla-lift { 0%, 30% { transform: translateY(0); } 40%, 84% { transform: translateY(-30px); } 95%, 100% { transform: translateY(0); } }
@keyframes gla-gold { 0%, 31% { opacity: 0; } 38%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes gla-ink { 0%, 31% { color: #f8fafc; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); } 38%, 84% { color: #3a1a02; text-shadow: none; } 94%, 100% { color: #f8fafc; } }
@keyframes gla-line { 0%, 46% { transform: scaleY(0); } 54%, 70% { transform: scaleY(1); } 84%, 100% { transform: scaleY(0); } }
@keyframes gla-v { 0%, 56% { transform: translateY(0); } 66%, 84% { transform: translateY(-12px); } 95%, 100% { transform: translateY(0); } }
@keyframes gla-cyan { 0%, 52% { opacity: 0; } 58%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes gla-rip { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }

/* ── 놀이 화면 둘레 */
#main .gi .ga--lasso .gla-ropes { display: inline-flex; gap: 5px; align-items: center; }
#main .gi .ga--lasso .gla-ropes i { display: inline-block; width: 15px; height: 15px; border-radius: 50%; border: 3px solid #d97706; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 1px 0 rgba(120, 53, 15, .35); transition: border-color .2s, opacity .2s, transform .2s; }
#main .gi .ga--lasso .gla-ropes i.is-off { border-color: #cbd5e1; opacity: .55; transform: scale(.85); }
#main .gi .ga--lasso .ga-pad:disabled { opacity: .45; cursor: default; transform: none; }
#main .gi .ga--lasso .ga-pad.gla-pull { min-width: 150px; }
#main .gi .ga--lasso .ga-pad.gla-pull.is-ready { background: #ca8a04; border-color: #a16207; color: #fff; animation: gla-pulse 1.15s ease-in-out infinite; }
#main .gi .ga--lasso .ga-pad.gla-pull.is-ready small { color: rgba(255, 255, 255, .85); }
@keyframes gla-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0); } 50% { box-shadow: 0 0 0 6px rgba(253, 224, 71, .5); } }
#main .gi .ga--lasso .ga-q .gla-warn { color: #fde68a; font-weight: 700; }
#main .gi .ga--lasso .gla-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 문장 표시: 덩어리(mark, 초록) · 짝(u, 파랑) · 내가 묶은 범위 · 내가 낚은 낱말(붉게) */
#main .gi .ga--lasso .ga-sent u { background: #dbeafe; color: #1e3a8a; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
#main .gi .ga--lasso .gla-mine { padding: 0 4px; border-radius: 6px; background: #fee2e2; color: #991b1b; text-decoration: underline wavy #ef4444; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
#main .gi .ga--lasso .gla-mineSent { font-weight: 700; color: #334155; }
#main .gi .ga--lasso .gla-mineSent mark { padding: 0 4px; border-radius: 6px; background: #dcfce7; color: #14532d; }

@media (max-width: 760px) {
    #main .gi .ga--lasso .gla-hero__row { gap: 13px; top: 62%; }
    #main .gi .ga--lasso .gla-hero__chunk, #main .gi .ga--lasso .gla-hero__tail { gap: 5px; }
    #main .gi .ga--lasso .gla-hero__leaf { padding: 5px 10px; font-size: 13.5px; }
    #main .gi .ga--lasso .gla-hero__rope { left: -11px; top: -10px; width: calc(100% + 22px); height: calc(100% + 20px); }
    #main .gi .ga--lasso .ga-pad.gla-pull { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--lasso .gla-hero *, #main .gi .ga--lasso .gla-hero *::after { animation: none !important; }
    #main .gi .ga--lasso .gla-hero__rope path { stroke-dashoffset: 0; }
    #main .gi .ga--lasso .ga-pad.gla-pull.is-ready { animation: none; }
}