/* 소원 분수 (/grammar/conditional/fountain.jsp, 2026-10-21) — 틀 css/ps2-conditional-arcade.css 위에 이 게임의 색 · 로비 그림 · 보기 칩 · 단추 · 옆 표시만 더한다.
   틀이 상자에 'ga ga--fountain' 을 붙인다. 틀의 규칙은 '#main .gi .pa' 아래이므로 페이지 상자에 class="pa" 가 있다. */
#main .gi .pa.ga--fountain { --ga-bg1: #140f3a; --ga-bg2: #3b2a86; --ga-glow: #fde68a; --ga-halo: rgba(253, 230, 138, .22); --ga-accent: #6d28d9; --ga-win: #4c1d95; --ga-hot: #fb923c; }

/* ── 로비 그림: 밤하늘 · 별 · 등불 · 분수 · 도는 그릇 셋 · 날아가는 동전 ── */
#main .gi .ga--fountain .cft-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(90% 60% at 50% 100%, rgba(253, 230, 138, .18), transparent 60%), linear-gradient(180deg, #120c3a 0%, #3b2a86 55%, #6b4bb8 100%); }
#main .gi .ga--fountain .cft-hero__star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .7); animation: cft-twinkle 2.4s ease-in-out infinite; }
#main .gi .ga--fountain .cft-hero__lamp { position: absolute; bottom: 60px; width: 10px; height: 14px; border-radius: 3px; background: #fde68a; box-shadow: 0 0 26px 10px rgba(253, 230, 138, .35); }
#main .gi .ga--fountain .cft-hero__lamp::after { content: ''; position: absolute; left: 4px; top: 14px; width: 2px; height: 50px; background: #1f2937; }
#main .gi .ga--fountain .cft-hero__lamp--a { left: 8%; }
#main .gi .ga--fountain .cft-hero__lamp--b { right: 8%; }
#main .gi .ga--fountain .cft-hero__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(180deg, #7b6f8f, #4a4160); }
#main .gi .ga--fountain .cft-hero__basin { position: absolute; left: 50%; bottom: 34px; width: 200px; height: 74px; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(180deg, #d8d2e6, #9d95b5); box-shadow: 0 10px 0 #5e5578, 0 18px 24px rgba(0, 0, 0, .35); }
#main .gi .ga--fountain .cft-hero__water { position: absolute; left: 50%; bottom: 44px; width: 170px; height: 56px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 40%, #67e8f9, #0b4d8c 75%); box-shadow: inset 0 0 18px rgba(255, 255, 255, .35); }
#main .gi .ga--fountain .cft-hero__column { position: absolute; left: 50%; bottom: 64px; width: 16px; height: 46px; transform: translateX(-50%); border-radius: 4px 4px 0 0; background: linear-gradient(90deg, #a79fbd, #e8e2f3, #a79fbd); }
#main .gi .ga--fountain .cft-hero__column::after { content: ''; position: absolute; left: -14px; top: -8px; width: 44px; height: 16px; border-radius: 50%; background: linear-gradient(180deg, #e8e2f3, #a79fbd); }
#main .gi .ga--fountain .cft-hero__jet { position: absolute; left: 50%; bottom: 112px; width: 4px; height: 40px; transform: translateX(-50%); border-radius: 2px; background: linear-gradient(180deg, rgba(224, 242, 254, .2), #e0f2fe); animation: cft-jet 1.4s ease-in-out infinite alternate; }
#main .gi .ga--fountain .cft-hero__jet::before, #main .gi .ga--fountain .cft-hero__jet::after { content: ''; position: absolute; top: 0; width: 22px; height: 30px; border: 2px solid rgba(224, 242, 254, .75); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
#main .gi .ga--fountain .cft-hero__jet::before { left: -22px; border-right: 0; }
#main .gi .ga--fountain .cft-hero__jet::after { right: -22px; border-left: 0; }
#main .gi .ga--fountain .cft-hero__ring { position: absolute; left: 50%; bottom: 46px; width: 200px; height: 74px; transform: translateX(-50%); animation: cft-orbit 9s linear infinite; }
#main .gi .ga--fountain .cft-hero__bowl { position: absolute; width: 30px; height: 18px; margin: -9px 0 0 -15px; border-radius: 4px 4px 14px 14px; background: linear-gradient(180deg, var(--c), rgba(0, 0, 0, .35)); border-top: 3px solid #fff; box-shadow: 0 6px 10px rgba(0, 0, 0, .4); animation: cft-counter 9s linear infinite; }
#main .gi .ga--fountain .cft-hero__bowl b { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; border: 1.5px solid var(--c); background: rgba(6, 10, 24, .82); color: #fff; font-weight: 800; font-size: 11px; line-height: 1.3; white-space: nowrap; }
#main .gi .ga--fountain .cft-hero__bowl--a { --c: #38bdf8; left: 8%; top: 50%; }
#main .gi .ga--fountain .cft-hero__bowl--b { --c: #fbbf24; left: 50%; top: 0; }
#main .gi .ga--fountain .cft-hero__bowl--c { --c: #f472b6; left: 92%; top: 50%; }
#main .gi .ga--fountain .cft-hero__coin { position: absolute; left: 50%; bottom: 10px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7cc, #fbbf24 55%, #b45309); box-shadow: 0 0 10px rgba(253, 230, 138, .7); animation: cft-toss 2.6s ease-in-out infinite; }
#main .gi .ga--fountain .cft-hero__q { position: absolute; left: 14px; top: 12px; padding: 5px 12px; border-radius: 10px; background: rgba(2, 6, 23, .55); color: #fde68a; font-weight: 800; font-size: 14px; letter-spacing: -.01em; }
@keyframes cft-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes cft-jet { from { height: 34px; } to { height: 46px; } }
@keyframes cft-orbit { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
@keyframes cft-counter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes cft-toss { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 45% { transform: translate(10px, -150px) scale(.9); opacity: 1; } 60% { transform: translate(14px, -92px) scale(.6); opacity: .9; } 70%, 100% { transform: translate(14px, -92px) scale(.4); opacity: 0; } }

/* ── 위 상자: 빈칸 · 그릇 칩 ── */
#main .gi .ga--fountain .ga-q .cft-ask mark.cft-blank { min-width: 72px; }
#main .gi .ga--fountain .ga-q .cft-ask mark.cft-blank.is-ok { background: rgba(34, 197, 94, .2); color: #bbf7d0; border: 1px solid rgba(134, 239, 172, .75); }
#main .gi .ga--fountain .ga-q .cft-ask mark.cft-blank.is-bad { background: rgba(239, 68, 68, .2); color: #fecaca; border: 1px solid rgba(252, 165, 165, .75); text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .ga--fountain .cft-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin: 3px 0 1px; }
#main .gi .ga--fountain .cft-opt { --c: #38bdf8; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1.5px solid var(--c); color: #fff; font-weight: 800; font-size: 14px; line-height: 1.35; transition: opacity .2s, background .2s; }
#main .gi .ga--fountain .cft-opts.is-sent .cft-opt { font-size: 13.5px; font-weight: 700; }
#main .gi .ga--fountain .cft-opt i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #0b1020; font-style: normal; font-size: 12px; font-weight: 900; flex: none; }
#main .gi .ga--fountain .cft-opt.is-ok { background: rgba(34, 197, 94, .22); border-color: #86efac; }
#main .gi .ga--fountain .cft-opt.is-bad { background: rgba(239, 68, 68, .22); border-color: #fca5a5; }
#main .gi .ga--fountain .cft-opt.is-bad span { text-decoration: line-through; text-decoration-thickness: 2px; }
#main .gi .ga--fountain .cft-opt.is-dim { opacity: .45; }

/* ── 옆 표시(힘 · 도는 방향 · 황금 동전) · 캔버스 · 단추 ── */
#main .gi .ga--fountain .cft-meter { display: inline-flex; align-items: center; gap: 6px; }
#main .gi .ga--fountain .cft-meter i { display: inline-block; width: 54px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; vertical-align: middle; }
#main .gi .ga--fountain .cft-meter b { display: block; height: 100%; width: 50%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #fb923c); transition: width .1s linear; }
#main .gi .ga--fountain .cft-spin { color: #6d28d9; letter-spacing: -.02em; white-space: nowrap; }
#main .gi .ga--fountain .cft-gold { padding: 2px 9px; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #fde68a); color: #78350f; font-weight: 900; box-shadow: 0 0 14px rgba(251, 191, 36, .5); animation: cft-hot 1s ease-in-out infinite alternate; }
#main .gi .ga--fountain .cft-gold[hidden] { display: none; }
@keyframes cft-hot { from { filter: brightness(1); } to { filter: brightness(1.2); } }
#main .gi .ga--fountain .cft-cv { background: #2b1d5e; }
#main .gi .ga--fountain .cft-pad { min-width: 84px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#main .gi .ga--fountain .cft-pad.is-main { min-width: 120px; background: linear-gradient(180deg, #6d28d9, #140f3a); border-color: #3b2a86; color: #fff; }
#main .gi .ga--fountain .cft-pad.is-main small { color: rgba(255, 255, 255, .78); }
#main .gi .ga--fountain .ga-card__mine s { color: #b91c1c; }

@media (max-width: 560px) {
    #main .gi .ga--fountain .cft-opt { font-size: 12.5px; padding: 2px 9px 2px 3px; }
    #main .gi .ga--fountain .cft-opts.is-sent .cft-opt { font-size: 12px; }
    #main .gi .ga--fountain .cft-opt i { width: 18px; height: 18px; font-size: 11px; }
    #main .gi .ga--fountain .cft-pad { min-width: 0; }
    #main .gi .ga--fountain .cft-pad.is-main { min-width: 0; flex: 1.4; }
    #main .gi .ga--fountain .cft-meter i { width: 40px; }
    #main .gi .ga--fountain .cft-hero__bowl b { font-size: 10.5px; }
    #main .gi .ga--fountain .cft-hero__q { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .ga--fountain .cft-hero__star, #main .gi .ga--fountain .cft-hero__jet, #main .gi .ga--fountain .cft-hero__ring, #main .gi .ga--fountain .cft-hero__bowl, #main .gi .ga--fountain .cft-hero__coin, #main .gi .ga--fountain .cft-gold { animation: none; }
    #main .gi .ga--fountain .cft-hero__coin { transform: translate(10px, -150px); }
}