/* 감정 컬러 스위치 (/grammar/participle/color.jsp, 2026-10-19). 틀(.pa-*)은 css/ps2-participle-arcade.css, 여기는 색과 로비 그림 · 머리의 별(.pcs-*) */
#main .gi .pa--color { --pa-bg1: #0b0f26; --pa-bg2: #2a0d3f; --pa-glow: #32dbf0; --pa-halo: rgba(255, 61, 154, .24); --pa-win: #6d28d9; --pa-accent: #db2777; }

/* 로비 그림: 세 칸 고리(boring | bored | bore)가 돌고, 공이 튀어 올라 맞는 칸으로 통과한다 */
#main .gi .pa--color .pa-hero__art { height: 250px; background: radial-gradient(110% 90% at 50% 30%, #1b1446 0%, #0b0b22 55%, #04040c 100%); box-shadow: inset 0 0 0 1.5px rgba(50, 219, 240, .3); }
#main .gi .pa--color .pcs-hero__glow { position: absolute; left: 50%; top: 8%; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(140, 92, 255, .32), transparent 66%); }
#main .gi .pa--color .pcs-hero__wheel { position: absolute; left: 50%; top: 44px; width: 136px; height: 136px; margin-left: -68px; border-radius: 50%; animation: pcs-spin 5s linear infinite; }
#main .gi .pa--color .pcs-hero__wheel::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from -42deg, #32dbf0 0 112deg, #e2e8f0 112deg 128deg, #ff3d9a 128deg 232deg, #e2e8f0 232deg 248deg, #f6df0e 248deg 352deg, #e2e8f0 352deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 53px, #000 54px 67px, transparent 68px); mask: radial-gradient(circle, transparent 0 53px, #000 54px 67px, transparent 68px);
    filter: drop-shadow(0 0 8px rgba(50, 219, 240, .55)); }
#main .gi .pa--color .pcs-hero__l { position: absolute; z-index: 1; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-61px); }
#main .gi .pa--color .pcs-hero__l--1 { --a: 14deg; }
#main .gi .pa--color .pcs-hero__l--2 { --a: 138deg; }
#main .gi .pa--color .pcs-hero__l--3 { --a: 258deg; }
#main .gi .pa--color .pcs-hero__l b { position: absolute; left: 0; top: 0; padding: 1px 7px; border-radius: 8px; white-space: nowrap; font-size: 12px; font-weight: 900; color: #fff; background: rgba(8, 10, 28, .9);
    box-shadow: 0 0 0 1.5px currentColor; animation: pcs-unspin 5s linear infinite; }
#main .gi .pa--color .pcs-hero__l--1 b { color: #a5f3fc; }
#main .gi .pa--color .pcs-hero__l--2 b { color: #f9a8d4; }
#main .gi .pa--color .pcs-hero__l--3 b { color: #fde68a; }
/* 문: 고리 아래 양옆의 ▲ ▲ */
#main .gi .pa--color .pcs-hero__gate { position: absolute; z-index: 2; left: 50%; top: 184px; width: 58px; height: 10px; margin-left: -29px; filter: drop-shadow(0 0 5px rgba(255, 255, 255, .9)); }
#main .gi .pa--color .pcs-hero__gate::before, #main .gi .pa--color .pcs-hero__gate::after { content: ""; position: absolute; top: 0; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #fff; }
#main .gi .pa--color .pcs-hero__gate::before { left: 0; }
#main .gi .pa--color .pcs-hero__gate::after { right: 0; }
#main .gi .pa--color .pcs-hero__ball { position: absolute; z-index: 3; left: 50%; top: 222px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff 0 30%, #e2e8f0 60%, #94a3b8 100%); box-shadow: 0 0 14px rgba(255, 255, 255, .8); animation: pcs-ball 5s ease-in-out infinite; }
#main .gi .pa--color .pcs-hero__ask { position: absolute; z-index: 4; left: 50%; top: 3%; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #e0f2fe; background: rgba(8, 10, 28, .75); }
#main .gi .pa--color .pcs-hero__ask b { color: #0b1020; padding: 0 5px; border-radius: 6px; background: #32dbf0; }
#main .gi .pa--color .pcs-hero__pop { position: absolute; z-index: 4; left: 78%; top: 192px; 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: pcs-pop 5s ease-out infinite; }
@keyframes pcs-spin { to { transform: rotate(360deg); } }
@keyframes pcs-unspin { from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); } to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); } }
/* 공: 받침에서 세 번 튀어 문(약 2.3초)에 닿고, 맞는 칸(하늘색)으로 통과해 색이 바뀐 뒤 위로 사라진다 */
@keyframes pcs-ball {
    0%, 6% { transform: translateY(0); opacity: 1; background: radial-gradient(circle at 35% 35%, #fff 0 30%, #e2e8f0 60%, #94a3b8 100%); box-shadow: 0 0 14px rgba(255, 255, 255, .8); }
    14% { transform: translateY(-20px); }
    20% { transform: translateY(-9px); }
    29% { transform: translateY(-31px); }
    35% { transform: translateY(-21px); }
    46% { transform: translateY(-40px); background: radial-gradient(circle at 35% 35%, #fff 0 30%, #e2e8f0 60%, #94a3b8 100%); }
    47% { background: radial-gradient(circle at 35% 35%, #fff 0 25%, #32dbf0 60%, #0e7490 100%); box-shadow: 0 0 18px rgba(50, 219, 240, .95); }
    63% { transform: translateY(-200px); opacity: 1; background: radial-gradient(circle at 35% 35%, #fff 0 25%, #32dbf0 60%, #0e7490 100%); }
    72%, 100% { transform: translateY(-216px); opacity: 0; }
}
@keyframes pcs-pop { 0%, 46% { opacity: 0; transform: translate(-50%, 8px); } 52%, 74% { opacity: 1; transform: translate(-50%, 0); } 84%, 100% { opacity: 0; transform: translate(-50%, -12px); } }

/* 한 판 */
#main .gi .pa--color .pa-cv { touch-action: none; }
#main .gi .pa--color .pa-side { gap: 10px; }
#main .gi .pa--color .pcs-side__star { padding: 2px 10px; border-radius: 999px; background: #0b0f26; color: #fde047; font-size: 13px; font-variant-numeric: tabular-nums; }
#main .gi .pa--color .pcs-side__kind:empty { display: none; }
#main .gi .pa--color .pcs-side__kind { padding: 2px 10px; border-radius: 999px; background: #fdf2f8; color: #be185d; font-size: 12.5px; }
#main .gi .pa--color .pa-tip b { color: var(--pa-accent); }
#main .gi .pa--color .pcs-pad { min-width: 160px; }
@media (max-width: 760px) {
    #main .gi .pa--color .pa-hero__art { height: 250px; }
    #main .gi .pa--color .pcs-pad { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .pa--color .pcs-hero__wheel, #main .gi .pa--color .pcs-hero__l b, #main .gi .pa--color .pcs-hero__ball, #main .gi .pa--color .pcs-hero__pop { animation: none !important; }
    #main .gi .pa--color .pcs-hero__pop { opacity: 1; }
}