/*
 * 연결어 기차 (/grammar/structure/train.jsp, 2026-10-31) — 게임 js/ps2-structure-train.js 의 꾸밈. 틀의 꾸밈은 css/ps2-structure-arcade.css (.ga-*)
 *   새벽 하늘 #1e3a8a · 청록 칸 #0f766e · 금빛 고리 #fde68a · 이어짐의 빛 #34d399
 */
#main .gi .ga--train { --ga-bg1: #10234d; --ga-bg2: #1e3a8a; --ga-glow: #fde68a; --ga-halo: rgba(52, 211, 153, .24); --ga-win: #0f766e; --ga-hot: #f59e0b; }
#main .gi .ga--train .stn-cv { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
#main .gi .ga--train .ga-q { min-height: 104px; }
#main .gi .ga--train .ga-q .stn-sent { margin: 2px 0 0; font-size: clamp(16px, 2.1vw, 19px); font-weight: 700; line-height: 1.55; color: #f8fafc; letter-spacing: -0.005em; text-align: center; }
#main .gi .ga--train .ga-q .stn-sent mark { display: inline-block; min-width: 52px; 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--train .ga-q .stn-sent mark.stn-blank { color: rgba(253, 230, 138, .75); }
#main .gi .ga--train .ga-q .stn-sent.is-ok { color: #a7f3d0; }
#main .gi .ga--train .ga-q .stn-sent.is-ok mark { background: #dcfce7; color: #14532d; border-color: transparent; }
#main .gi .ga--train .ga-q .stn-okline { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7px; font-size: clamp(14px, 1.9vw, 16px); }
#main .gi .ga--train .stn-okmark { color: #34d399; font-size: 1.15em; }
#main .gi .ga--train .stn-chip { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1.6; color: #0f172a; background: #e2e8f0; white-space: nowrap; }
#main .gi .ga--train .stn-chip--ok { background: #fde68a; }
#main .gi .ga--train .stn-chip--bad { background: #fecaca; color: #991b1b; }
#main .gi .ga--train .stn-tries { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; background: rgba(20, 184, 166, .14); color: #115e59; font-size: 12px; font-weight: 800; white-space: nowrap; }
#main .gi .ga--train .stn-tries i { font-style: normal; color: #0d9488; font-size: 11px; transition: color .2s, transform .2s; }
#main .gi .ga--train .stn-tries i.is-off { color: #cbd5e1; transform: scale(.8); }
#main .gi .ga--train .stn-speed { 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--train .stn-pad { min-width: 150px; height: 56px; }
#main .gi .ga--train .stn-pad b { font-size: 19px; }
#main .gi .ga--train .stn-pad.is-wait { opacity: .55; }
#main .gi .ga--train .stn-pad--side { min-width: 58px; font-size: 20px; }
#main .gi .ga--train .stn-pad--side:disabled, #main .gi .ga--train .stn-pad:disabled { cursor: default; }
#main .gi .ga--train .stn-pad--side:disabled { opacity: .45; }
#main .gi .ga--train .ga-card .stn-sent, #main .gi .ga--train .ga-wrong .stn-sent { text-align: left; color: var(--ga-ink); font-size: 17px; }
#main .gi .ga--train .ga-card .ga-sent mark, #main .gi .ga--train .ga-wrong .ga-sent mark { background: #dcfce7; color: #14532d; border: 0; }

/* 로비 그림: 하늘 · 언덕 · 선로 · 두 칸 · 기관차 · 떠 있는 고리 둘 */
#main .gi .ga--train .stn-hero { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#1e3a8a, #60a5fa 62%, #fde68a); }
#main .gi .ga--train .stn-hero__sun { position: absolute; left: 12%; top: 14%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #fff7d6, #fde68a 55%, rgba(253, 230, 138, 0)); }
#main .gi .ga--train .stn-hero__hill { position: absolute; left: -10%; right: -10%; bottom: 18%; height: 34%; background: radial-gradient(60% 100% at 30% 100%, #27507a 60%, transparent 61%), radial-gradient(50% 90% at 78% 100%, #1e3a5f 60%, transparent 61%); }
#main .gi .ga--train .stn-hero__rail { position: absolute; left: 0; right: 0; bottom: 12%; height: 6px; background: repeating-linear-gradient(90deg, #78533499 0 12px, transparent 12px 22px), linear-gradient(#cbd5e1, #94a3b8); }
#main .gi .ga--train .stn-hero__car { position: absolute; bottom: calc(12% + 8px); height: 44px; display: grid; place-items: center; padding: 0 8px; border-radius: 8px; background: linear-gradient(#0f766e, #115e59); border-bottom: 3px solid #fbbf24; box-shadow: 0 8px 14px -6px rgba(2, 6, 23, .6); }
#main .gi .ga--train .stn-hero__car b { padding: 2px 6px; border-radius: 5px; background: #042f2e; color: #ecfeff; font-size: 12px; white-space: nowrap; }
#main .gi .ga--train .stn-hero__car--a { left: 4%; width: 34%; }
#main .gi .ga--train .stn-hero__car--b { left: 44%; width: 36%; animation: stn-couple 5s ease-in-out infinite; }
#main .gi .ga--train .stn-hero__loco { position: absolute; bottom: calc(12% + 8px); left: 82%; width: 17%; height: 56px; border-radius: 8px 14px 6px 6px; background: linear-gradient(#b91c1c, #7f1d1d); animation: stn-couple 5s ease-in-out infinite; }
#main .gi .ga--train .stn-hero__loco::before { content: ""; position: absolute; left: 60%; top: -14px; width: 10px; height: 16px; border-radius: 2px; background: #111827; }
#main .gi .ga--train .stn-hero__hook { position: absolute; top: 18%; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 900; color: #1c1917; white-space: nowrap; background: linear-gradient(#fef3c7, #f59e0b); box-shadow: 0 0 0 2px rgba(15, 23, 42, .25); animation: stn-bob 3s ease-in-out infinite; }
#main .gi .ga--train .stn-hero__hook--ok { left: 30%; box-shadow: 0 0 0 3px #fff, 0 0 22px rgba(253, 230, 138, .9); }
#main .gi .ga--train .stn-hero__hook--bad { left: 60%; animation-delay: -1.2s; }
#main .gi .ga--train .stn-hero__puff { position: absolute; left: calc(82% + 2%); bottom: calc(12% + 70px); width: 18px; height: 18px; border-radius: 50%; background: rgba(241, 245, 249, .8); animation: stn-puff 2.4s ease-out infinite; }
@keyframes stn-couple { 0%, 40% { transform: translateX(0); } 55%, 70% { transform: translateX(-12px); } 100% { transform: translateX(0); } }
@keyframes stn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes stn-puff { 0% { transform: translate(0, 0) scale(.6); opacity: .9; } 100% { transform: translate(-30px, -40px) scale(2.2); opacity: 0; } }
#main .gi .ga--train.stn-lv1 .ga-q { min-height: 112px; }
#main .gi .ga--train.stn-lv3 .ga-q { min-height: 124px; }
@media (max-width: 760px) {
    #main .gi .ga--train .ga-q { min-height: 96px; padding: 8px 10px; gap: 2px; }
    #main .gi .ga--train.stn-lv1 .ga-q { min-height: 116px; }
    #main .gi .ga--train.stn-lv3 .ga-q { min-height: 132px; }
    #main .gi .ga--train .ga-q .ga-ask { font-size: 13.5px; }
    #main .gi .ga--train .ga-q .stn-sent { font-size: 15px; line-height: 1.45; }
    #main .gi .ga--train .ga-ko { font-size: 13px; }
    #main .gi .ga--train .ga-side { display: none; }
    #main .gi .ga--train .stn-pad { min-width: 0; height: 50px; }
    #main .gi .ga--train .stn-pad--side { flex: 0 0 58px; }
    #main .gi .ga--train .stn-hero__car b { font-size: 10.5px; }
    #main .gi .ga--train .stn-hero__hook { font-size: 11.5px; padding: 3px 9px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--train .stn-hero__car--b, #main .gi .ga--train .stn-hero__loco, #main .gi .ga--train .stn-hero__hook, #main .gi .ga--train .stn-hero__puff { animation: none; }
}