/*
 * 조건의 징검다리 (/grammar/conditional/stones.jsp, 2026-10-21) — 게임 js/ps2-conditional-stones.js 의 꾸밈. 틀의 꾸밈은 css/ps2-conditional-arcade.css (.ga-*)
 *   강물 #0f7fb8 · 돌 #e2e8f0 · 맞는 돌의 빛 #fde68a · 이끼 #86efac
 */
#main .gi .ga--stones { --ga-bg1: #0b2a4a; --ga-bg2: #0f7fb8; --ga-glow: #fde68a; --ga-halo: rgba(45, 185, 228, .26); --ga-win: #0e7490; --ga-hot: #f59e0b; }
#main .gi .ga--stones .cst-cv { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
#main .gi .ga--stones .ga-q { min-height: 104px; }
#main .gi .ga--stones .ga-q .cst-sent { margin: 2px 0 0; font-size: clamp(16px, 2.2vw, 20px); font-weight: 700; line-height: 1.5; color: #f8fafc; letter-spacing: -0.005em; text-align: center; }
#main .gi .ga--stones .ga-q .cst-sent mark { display: inline-block; min-width: 64px; padding: 0 9px; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fde68a; border: 1px dashed rgba(253, 230, 138, .6); }
#main .gi .ga--stones .ga-q .cst-sent.is-ok { color: #a7f3d0; }
#main .gi .ga--stones .ga-q .cst-sent.is-ok mark { background: #dcfce7; color: #14532d; border-color: transparent; }
#main .gi .ga--stones .ga-q .cst-okline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; font-size: clamp(14px, 1.9vw, 16px); }
#main .gi .ga--stones .cst-okmark { color: #34d399; font-size: 1.15em; }
#main .gi .ga--stones .cst-chip { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 800; line-height: 1.6; color: #0f172a; background: #e2e8f0; white-space: nowrap; }
#main .gi .ga--stones .cst-chip--ok { background: #fde68a; }
#main .gi .ga--stones .cst-chip--bad { background: #fecaca; color: #991b1b; }
#main .gi .ga--stones .cst-tries { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(45, 185, 228, .14); color: #075985; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--stones .cst-tries i { font-style: normal; color: #0284c7; font-size: 11px; transition: color .2s, transform .2s; }
#main .gi .ga--stones .cst-tries i.is-off { color: #cbd5e1; transform: scale(.8); }
#main .gi .ga--stones .cst-flow { padding: 2px 9px; border-radius: 999px; background: rgba(251, 191, 36, .14); color: #b45309; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--stones .cst-pad { min-width: 150px; height: 56px; }
#main .gi .ga--stones .cst-pad b { font-size: 19px; }
#main .gi .ga--stones .cst-pad.is-wait { opacity: .55; }
#main .gi .ga--stones .cst-pad--side { min-width: 58px; font-size: 20px; }
#main .gi .ga--stones .cst-pad--side:disabled { opacity: .45; cursor: default; }
#main .gi .ga--stones .ga-card .cst-sent, #main .gi .ga--stones .ga-wrong .cst-sent { text-align: left; color: var(--ga-ink); font-size: 17px; }
#main .gi .ga--stones .ga-card .ga-sent mark, #main .gi .ga--stones .ga-wrong .ga-sent mark { background: #dcfce7; color: #14532d; border: 0; }

/* 로비 그림: 강 · 둑 둘 · 돌 셋 · 건너뛰는 사람 · 악어 */
#main .gi .ga--stones .cst-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(90% 60% at 50% 55%, rgba(255, 255, 255, .12), transparent 60%), linear-gradient(#2fb9e4, #0f7fb8 60%, #0a5f8f); }
#main .gi .ga--stones .cst-hero__bank { position: absolute; left: -4%; right: -4%; height: 34px; background: linear-gradient(#4ade80, #15803d); }
#main .gi .ga--stones .cst-hero__bank--near { bottom: -6px; border-radius: 50% 50% 0 0 / 14px 14px 0 0; }
#main .gi .ga--stones .cst-hero__bank--far { top: -6px; border-radius: 0 0 50% 50% / 0 0 14px 14px; }
#main .gi .ga--stones .cst-hero__rip { position: absolute; width: 34px; height: 6px; border-top: 2px solid rgba(255, 255, 255, .45); border-radius: 50%; animation: cst-rip 5s linear infinite; }
#main .gi .ga--stones .cst-hero__rip--0 { top: 26%; left: 10%; animation-delay: -1s; }
#main .gi .ga--stones .cst-hero__rip--1 { top: 40%; left: 60%; animation-delay: -2.4s; }
#main .gi .ga--stones .cst-hero__rip--2 { top: 56%; left: 30%; animation-delay: -3.1s; }
#main .gi .ga--stones .cst-hero__rip--3 { top: 68%; left: 72%; animation-delay: -0.4s; }
#main .gi .ga--stones .cst-hero__rip--4 { top: 30%; left: 84%; animation-delay: -4.2s; }
#main .gi .ga--stones .cst-hero__stone { position: absolute; top: 44%; width: 86px; height: 46px; margin-top: -23px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #0f172a;
    background: radial-gradient(circle at 35% 30%, #f8fafc, #94a3b8); box-shadow: 0 8px 12px -4px rgba(2, 6, 23, .5), inset 0 -4px 0 rgba(2, 6, 23, .12); animation: cst-bob 3.2s ease-in-out infinite; }
#main .gi .ga--stones .cst-hero__stone::after { content: ""; position: absolute; left: 10px; bottom: 7px; width: 16px; height: 8px; border-radius: 50%; background: rgba(134, 239, 172, .7); }
#main .gi .ga--stones .cst-hero__stone--0 { left: 8%; }
#main .gi .ga--stones .cst-hero__stone--1 { left: 37%; animation-delay: -1.1s; }
#main .gi .ga--stones .cst-hero__stone--2 { left: 66%; animation-delay: -2.2s; }
#main .gi .ga--stones .cst-hero__stone.is-ok { box-shadow: 0 0 0 3px #fde68a, 0 0 22px rgba(253, 230, 138, .9), 0 8px 12px -4px rgba(2, 6, 23, .5); animation: cst-bob 3.2s ease-in-out infinite, cst-glow 2.6s ease-in-out infinite; }
#main .gi .ga--stones .cst-hero__kid { position: absolute; left: 44%; bottom: 14%; width: 16px; height: 26px; border-radius: 6px 6px 3px 3px; background: #ef4444; animation: cst-hop 5.2s ease-in-out infinite; }
#main .gi .ga--stones .cst-hero__kid::before { content: ""; position: absolute; left: 50%; top: -16px; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: #fde7c2; box-shadow: inset 0 -5px 0 0 #fde7c2, 0 -3px 0 0 #3f2a14; }
#main .gi .ga--stones .cst-hero__kid::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: -8px; height: 8px; border-radius: 0 0 3px 3px; background: #1e3a8a; }
#main .gi .ga--stones .cst-hero__pack { position: absolute; left: -8px; top: 3px; width: 8px; height: 16px; border-radius: 4px; background: #f59e0b; }
#main .gi .ga--stones .cst-hero__croc { position: absolute; top: 72%; left: -30%; width: 76px; height: 14px; border-radius: 7px 10px 10px 7px; background: #166534; animation: cst-croc 9s linear infinite; }
#main .gi .ga--stones .cst-hero__croc::before { content: ""; position: absolute; right: 12px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: #fde68a; box-shadow: inset 0 0 0 2px #ef4444; }
#main .gi .ga--stones .cst-hero__croc::after { content: ""; position: absolute; left: 12px; right: 30px; top: -3px; height: 4px; background: repeating-linear-gradient(90deg, #14532d 0 5px, transparent 5px 10px); }
@keyframes cst-rip { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(120px); opacity: 0; } }
@keyframes cst-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes cst-glow { 0%, 100% { box-shadow: 0 0 0 3px #fde68a, 0 0 12px rgba(253, 230, 138, .6), 0 8px 12px -4px rgba(2, 6, 23, .5); } 50% { box-shadow: 0 0 0 3px #fde68a, 0 0 28px rgba(253, 230, 138, 1), 0 8px 12px -4px rgba(2, 6, 23, .5); } }
@keyframes cst-hop { 0%, 30% { left: 44%; bottom: 14%; } 45% { left: 30%; bottom: 68%; } 60%, 100% { left: 12%; bottom: 46%; } }
@keyframes cst-croc { 0% { left: -30%; } 100% { left: 110%; } }
#main .gi .ga--stones.cst-lv1 .ga-q { min-height: 112px; }
#main .gi .ga--stones.cst-lv3 .ga-q { min-height: 124px; }
@media (max-width: 760px) {
    #main .gi .ga--stones .ga-q { min-height: 96px; padding: 8px 10px; gap: 2px; }
    #main .gi .ga--stones.cst-lv1 .ga-q { min-height: 116px; }
    #main .gi .ga--stones.cst-lv3 .ga-q { min-height: 140px; }
    #main .gi .ga--stones .ga-q .ga-ask { font-size: 13.5px; }
    #main .gi .ga--stones .ga-q .cst-sent { font-size: 15.5px; line-height: 1.45; }
    #main .gi .ga--stones .ga-ko { font-size: 13px; }
    #main .gi .ga--stones .ga-side { display: none; }
    #main .gi .ga--stones .cst-pad { min-width: 0; height: 50px; }
    #main .gi .ga--stones .cst-pad--side { flex: 0 0 58px; }
    #main .gi .ga--stones .cst-hero__stone { width: 70px; height: 38px; margin-top: -19px; font-size: 12px; }
    #main .gi .ga--stones .cst-hero__stone--1 { left: 38%; }
    #main .gi .ga--stones .cst-hero__stone--2 { left: 68%; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--stones .cst-hero * { animation: none !important; }
    #main .gi .ga--stones .cst-hero__kid { left: 12%; bottom: 46%; }
    #main .gi .ga--stones .cst-hero__croc { left: 50%; }
}