/* 지난 일 수박 합치기 (2026-10-21) — js/ps2-modal-suika.js 의 .msk-* 모양. 틀(css/ps2-modal-arcade.css 의 .ga-*) 위에 여름밤 정원 빛깔 · 문장 칸 · 조각 줄 · 로비 그림을 얹는다. */
#main .gi .pa.ga--suika { --ga-bg1: #042f2a; --ga-bg2: #0c4a3e; --ga-glow: #86efac; --ga-halo: rgba(251, 113, 133, .3); --ga-win: #15803d; --ga-hot: #fb7185; }
#main .gi .pa .msk-cv { max-width: 100%; }

/* 문장 줄: 덩어리 자리마다 번호 칸 (다음 칸은 빛남, 합친 낱말은 초록 · 튕겨 나간 낱말은 빨강 · 보여 준 낱말은 하늘색) */
#main .gi .pa .msk-ask { line-height: 1.95; }
#main .gi .pa .msk-chip { display: inline-block; min-width: 2.1em; margin: 0 1px; padding: 0 8px; border-radius: 999px; border: 1.5px dashed rgba(187, 247, 208, .55);
    background: rgba(255, 255, 255, .08); color: rgba(187, 247, 208, .85); font-weight: 800; line-height: 1.5; text-align: center; vertical-align: baseline;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
#main .gi .pa .msk-chip.is-next { border-color: #fde047; color: #fef9c3; box-shadow: 0 0 0 3px rgba(253, 224, 71, .2); animation: msk-next 1.2s ease-in-out infinite; }
#main .gi .pa .msk-chip.is-ok { border: 1.5px solid #4ade80; background: #dcfce7; color: #14532d; }
#main .gi .pa .msk-chip.is-bad { border: 1.5px solid #f87171; background: #fee2e2; color: #7f1d1d; text-decoration: line-through; }
#main .gi .pa .msk-chip.is-show { border: 1.5px solid #7dd3fc; background: #e0f2fe; color: #0c4a6e; }
@keyframes msk-next { 50% { box-shadow: 0 0 0 6px rgba(253, 224, 71, .05); } }

/* 머리의 차례 표(1단계) · 함정 수 */
#main .gi .pa .msk-side { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#main .gi .pa .msk-rule { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; background: #ecfdf5; color: #065f46; font-weight: 800; }
#main .gi .pa .msk-rule b { font-weight: 900; }
#main .gi .pa .msk-rule i { font-style: normal; color: #34d399; }
#main .gi .pa .msk-trapn { padding: 3px 10px; border-radius: 999px; background: #fee2e2; color: #991b1b; font-weight: 800; white-space: nowrap; }

/* 조각 줄: 떨어뜨릴 조각을 고른다 (빛깔은 캔버스의 조각과 같다) */
#main .gi .pa .msk-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; width: 100%; min-height: 50px; padding: 6px 4px 10px; }
#main .gi .pa .msk-piece { position: relative; min-width: 58px; padding: 8px 16px 8px 26px; border: 0; border-radius: 999px; font-family: inherit; font-weight: 800; font-size: 16px; line-height: 1.2;
    color: #0f172a; cursor: pointer; touch-action: manipulation;
    background: radial-gradient(120% 140% at 28% 18%, var(--c1, #fef3c7) 0%, var(--c2, #fbbf24) 62%, var(--c3, #b45309) 100%);
    box-shadow: 0 4px 0 var(--c3, #b45309), 0 9px 16px rgba(2, 6, 23, .28), inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease; }
#main .gi .pa .msk-piece::before { content: ''; position: absolute; left: 10px; top: 50%; width: 10px; height: 6px; margin-top: -9px; border-radius: 10px 0; background: #16a34a; transform: rotate(-24deg); }
#main .gi .pa .msk-piece::after { content: ''; position: absolute; left: 13px; top: 50%; width: 2px; height: 7px; margin-top: -4px; border-radius: 2px; background: #78350f; }
#main .gi .pa .msk-piece:hover:not(:disabled) { transform: translateY(-2px); }
#main .gi .pa .msk-piece:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
#main .gi .pa .msk-piece__n { position: absolute; top: -7px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #0f172a; color: #fef9c3;
    font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center; }
#main .gi .pa .msk-piece.is-held { transform: translateY(3px); box-shadow: 0 1px 0 var(--c3, #b45309), 0 0 0 3px #fde047, 0 0 18px rgba(253, 224, 71, .55); }
#main .gi .pa .msk-piece.is-out { opacity: .32; }
#main .gi .pa .msk-piece.is-gone { display: none; }
#main .gi .pa .msk-piece:disabled { cursor: default; }
#main .gi .pa .msk-tray.is-wait .msk-piece:not(.is-gone) { opacity: .5; }

/* 단추 */
#main .gi .pa .msk-pad--drop { min-width: 132px; font-size: 21px; }
#main .gi .pa .msk-pad--tool { font-size: 18px; }
#main .gi .pa .msk-pad--dir { min-width: 58px; }

/* 로비 그림: 씨앗 열매 'must'에 have · missed 가 떨어져 합쳐지고 수박이 터진다 (6초 되풀이) */
#main .gi .pa .msk-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(60% 50% at 50% 20%, rgba(251, 113, 133, .22), transparent 70%), linear-gradient(180deg, #021a17 0%, #053a31 60%, #0b5646 100%); }
#main .gi .pa .msk-hero__branch { position: absolute; left: 10%; right: 10%; top: 10%; height: 5px; border-radius: 5px; background: #78350f; }
#main .gi .pa .msk-hero__branch::before, #main .gi .pa .msk-hero__branch::after { content: ''; position: absolute; top: -7px; width: 18px; height: 8px; border-radius: 10px 0; background: #16a34a; }
#main .gi .pa .msk-hero__branch::before { left: 16%; transform: rotate(-18deg); }
#main .gi .pa .msk-hero__branch::after { right: 20%; transform: rotate(16deg); }
#main .gi .pa .msk-hero__jar { position: absolute; left: 20%; right: 20%; top: 26%; bottom: 9%; border: 3px solid rgba(209, 250, 229, .45); border-top: 0; border-radius: 0 0 26px 26px;
    background: linear-gradient(90deg, rgba(209, 250, 229, .14), rgba(209, 250, 229, .04) 50%, rgba(209, 250, 229, .12)); }
#main .gi .pa .msk-hero__junk { position: absolute; left: 24%; bottom: 11%; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 14px;
    color: rgba(41, 37, 36, .75); background: radial-gradient(circle at 32% 28%, #e7e5e4, #a8a29e 60%, #57534e); }
#main .gi .pa .msk-hero__drop { position: absolute; left: 50%; width: 56px; height: 56px; margin-left: -28px; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 14px; color: #0f172a; opacity: 0; }
#main .gi .pa .msk-hero__drop--1 { background: radial-gradient(circle at 32% 28%, #dbeafe, #60a5fa 60%, #1d4ed8); animation: msk-drop1 6s ease-in infinite; }
#main .gi .pa .msk-hero__drop--2 { width: 64px; height: 64px; margin-left: -32px; background: radial-gradient(circle at 32% 28%, #fce7f3, #f472b6 60%, #be185d); animation: msk-drop2 6s ease-in infinite; }
#main .gi .pa .msk-hero__fruit { position: absolute; left: 50%; bottom: 11%; display: grid; place-content: center; text-align: center; border-radius: 50%; color: #fff; opacity: 0;
    text-shadow: 0 1px 2px rgba(2, 6, 23, .7); transform-origin: 50% 100%; }
#main .gi .pa .msk-hero__fruit small { font-size: 10px; font-weight: 700; opacity: .85; }
#main .gi .pa .msk-hero__fruit b { font-size: 13px; font-weight: 900; line-height: 1.1; }
#main .gi .pa .msk-hero__fruit--1 { width: 72px; height: 72px; margin-left: -36px; background: radial-gradient(circle at 32% 28%, #fecaca, #ef4444 60%, #7f1d1d); animation: msk-f1 6s ease infinite; }
#main .gi .pa .msk-hero__fruit--2 { width: 92px; height: 92px; margin-left: -46px; background: radial-gradient(circle at 32% 28%, #fecdd3, #e11d48 60%, #881337); animation: msk-f2 6s ease infinite; }
#main .gi .pa .msk-hero__fruit--3 { width: 118px; height: 118px; margin-left: -59px; padding: 0 12px;
    background: repeating-linear-gradient(100deg, transparent 0 13px, rgba(20, 83, 45, .75) 13px 21px), radial-gradient(circle at 32% 28%, #bbf7d0, #22c55e 60%, #14532d); animation: msk-f3 6s ease infinite; }
#main .gi .pa .msk-hero__boom { position: absolute; left: 50%; bottom: 18%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; opacity: 0;
    box-shadow: 0 -60px 0 4px #f43f5e, 52px -30px 0 3px #fde68a, 52px 30px 0 4px #86efac, 0 60px 0 3px #fb7185, -52px 30px 0 4px #fde68a, -52px -30px 0 3px #f43f5e; animation: msk-boom 6s ease-out infinite; }
#main .gi .pa .msk-hero__pop { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 900; font-size: 22px; color: #fde68a; text-shadow: 0 2px 0 rgba(2, 6, 23, .7); opacity: 0; animation: msk-pop 6s ease-out infinite; }
@keyframes msk-drop1 {
    0%, 6% { top: 2%; opacity: 0; }
    8% { top: 2%; opacity: 1; }
    24% { top: 52%; opacity: 1; }
    27%, 100% { top: 56%; opacity: 0; }
}
@keyframes msk-drop2 {
    0%, 36% { top: 2%; opacity: 0; }
    38% { top: 2%; opacity: 1; }
    54% { top: 44%; opacity: 1; }
    57%, 100% { top: 48%; opacity: 0; }
}
@keyframes msk-f1 {
    0%, 2% { opacity: 0; transform: scale(.6); }
    6%, 25% { opacity: 1; transform: scale(1); }
    27%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes msk-f2 {
    0%, 25% { opacity: 0; transform: scale(.8); }
    28% { opacity: 1; transform: scale(1.12); }
    31%, 55% { opacity: 1; transform: scale(1); }
    57%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes msk-f3 {
    0%, 55% { opacity: 0; transform: scale(.8); }
    58% { opacity: 1; transform: scale(1.12); }
    61%, 74% { opacity: 1; transform: scale(1) rotate(0); }
    76% { opacity: 1; transform: scale(1.04) rotate(-3deg); }
    78% { opacity: 1; transform: scale(1.04) rotate(3deg); }
    80% { opacity: 0; transform: scale(1.5); }
    100% { opacity: 0; }
}
@keyframes msk-boom {
    0%, 78% { opacity: 0; transform: scale(.3); }
    81% { opacity: 1; transform: scale(1); }
    92%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes msk-pop {
    0%, 79% { opacity: 0; transform: translate(-50%, 10px); }
    84% { opacity: 1; transform: translate(-50%, 0); }
    95%, 100% { opacity: 0; transform: translate(-50%, -14px); }
}
@media (max-width: 760px) {
    #main .gi .pa.ga--suika .ga-card { padding: 12px 14px; }
    #main .gi .pa.ga--suika .ga-card .ga-sent { font-size: 16px; line-height: 1.45; }
    #main .gi .pa.ga--suika .ga-card__ko { font-size: 13.5px; }
    #main .gi .pa.ga--suika .ga-card__why { margin-top: 6px; padding: 8px 10px; font-size: 14px; line-height: 1.55; }
    #main .gi .pa.ga--suika .ga-card__mine { margin-top: 6px; }
    #main .gi .pa.ga--suika .ga-card__mine .ga-sent { font-size: 14.5px; }
    #main .gi .pa.ga--suika .ga-card__row { margin-top: 8px; }
    #main .gi .pa.ga--suika .ga-q { padding: 9px 12px; }
    #main .gi .pa .msk-ask { line-height: 1.7; }
    #main .gi .pa .msk-tray { gap: 6px 7px; min-height: 44px; padding: 2px 0 6px; }
    #main .gi .pa .msk-piece { min-width: 50px; padding: 6px 11px 6px 21px; font-size: 14.5px; }
    #main .gi .pa .msk-piece::before { left: 8px; }
    #main .gi .pa .msk-piece::after { left: 11px; }
    #main .gi .pa .msk-pad--drop { min-width: 0; }
    #main .gi .pa .msk-pad--dir { min-width: 0; }
    #main .gi .pa .msk-chip { padding: 0 6px; }
    #main .gi .pa .msk-hero__fruit--3 { width: 104px; height: 104px; margin-left: -52px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .pa .msk-chip.is-next { animation: none; }
    #main .gi .pa .msk-piece { transition: none; }
    #main .gi .pa .msk-hero__drop, #main .gi .pa .msk-hero__fruit, #main .gi .pa .msk-hero__boom, #main .gi .pa .msk-hero__pop { animation: none; }
    #main .gi .pa .msk-hero__fruit--3 { opacity: 1; }
}