/* 결과 햄버거 쌓기 (2026-10-21) — js/ps2-conditional-burger.js 의 .cbg-* 모양. 틀(css/ps2-conditional-arcade.css 의 .ga-*) 위에 저녁 식당 빛깔 · 문장 칸 · 선반(재료 목록) · 로비 그림을 얹는다. */
#main .gi .pa.ga--burger { --ga-bg1: #2a0f0b; --ga-bg2: #6b2f17; --ga-glow: #fdba74; --ga-halo: rgba(253, 186, 116, .3); --ga-win: #9a3412; --ga-hot: #fb923c; }
#main .gi .pa .cbg-cv { max-width: 100%; }

/* 문장 줄: 재료 자리마다 번호 칸 (다음 칸은 빛남, 받은 낱말은 초록 · 무너뜨린 낱말은 빨강 · 보여 준 낱말은 하늘색) */
#main .gi .pa .cbg-ask { line-height: 1.95; }
#main .gi .pa .cbg-chip { display: inline-block; min-width: 2.1em; margin: 0 1px; padding: 0 8px; border-radius: 999px; border: 1.5px dashed rgba(254, 215, 170, .55);
    background: rgba(255, 255, 255, .08); color: rgba(254, 215, 170, .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 .cbg-chip.is-next { border-color: #fde047; color: #fef9c3; box-shadow: 0 0 0 3px rgba(253, 224, 71, .2); animation: cbg-next 1.2s ease-in-out infinite; }
#main .gi .pa .cbg-chip.is-ok { border: 1.5px solid #4ade80; background: #dcfce7; color: #14532d; }
#main .gi .pa .cbg-chip.is-bad { border: 1.5px solid #f87171; background: #fee2e2; color: #7f1d1d; text-decoration: line-through; }
#main .gi .pa .cbg-chip.is-show { border: 1.5px solid #7dd3fc; background: #e0f2fe; color: #0c4a6e; }
@keyframes cbg-next { 50% { box-shadow: 0 0 0 6px rgba(253, 224, 71, .05); } }

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

/* 선반: 이 문장의 재료 (떨어지는 차례는 무작위; 빛깔은 캔버스의 재료와 같다) */
#main .gi .pa .cbg-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; width: 100%; min-height: 44px; padding: 6px 4px 10px; }
#main .gi .pa .cbg-ing { position: relative; min-width: 58px; padding: 7px 16px; border-radius: 10px; font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--ink, #0f172a); text-align: center;
    background: linear-gradient(180deg, var(--c1, #fde68a) 0%, var(--c2, #f59e0b) 55%, var(--c3, #b45309) 100%);
    box-shadow: 0 3px 0 var(--c3, #b45309), 0 8px 14px rgba(2, 6, 23, .25), inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: transform .15s ease, opacity .2s ease, box-shadow .15s ease; }
#main .gi .pa .cbg-ing b { font-weight: 800; }
#main .gi .pa .cbg-ing.is-air { transform: translateY(2px); box-shadow: 0 1px 0 var(--c3, #b45309), 0 0 0 3px #fde047, 0 0 16px rgba(253, 224, 71, .55); }
#main .gi .pa .cbg-ing.is-done { opacity: .35; filter: grayscale(.2); }
#main .gi .pa .cbg-ing.is-done::after { content: "✓"; position: absolute; top: -8px; right: -6px; width: 18px; height: 18px; border-radius: 9px; background: #16a34a; color: #fff; font-size: 11px; line-height: 18px; }
#main .gi .pa .cbg-ing.is-bad { opacity: .5; box-shadow: 0 0 0 3px #f87171; }
#main .gi .pa .cbg-ing.is-gone { display: none; }
#main .gi .pa .cbg-menu.is-wait .cbg-ing:not(.is-gone) { opacity: .55; }

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

/* 로비 그림: would · have · gone 이 접시에 쌓이고 위 빵이 덮인다, 함정 of 는 바닥에 떨어진다 (7초 되풀이) */
#main .gi .pa .cbg-hero { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(60% 50% at 50% 10%, rgba(253, 186, 116, .3), transparent 70%), linear-gradient(180deg, #1c0a06 0%, #4a2111 60%, #7a3f1c 100%); }
#main .gi .pa .cbg-hero__shelf { position: absolute; left: 6%; right: 6%; top: 10%; height: 6px; border-radius: 4px; background: #312e81; box-shadow: 0 2px 0 rgba(255, 255, 255, .12); }
#main .gi .pa .cbg-hero__lamp { position: absolute; left: 50%; top: 2%; width: 26px; height: 14px; margin-left: -13px; border-radius: 0 0 13px 13px; background: #334155; box-shadow: 0 10px 30px 10px rgba(253, 224, 71, .18); }
#main .gi .pa .cbg-hero__lamp::after { content: ''; position: absolute; left: 10px; bottom: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fef9c3; box-shadow: 0 0 10px 4px rgba(254, 249, 195, .6); }
#main .gi .pa .cbg-hero__counter { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(180deg, #c2410c, #7c2d12); box-shadow: 0 -2px 0 rgba(255, 255, 255, .18); }
#main .gi .pa .cbg-hero__plate { position: absolute; left: 50%; bottom: 11%; width: 150px; height: 18px; margin-left: -75px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #ffffff, #cbd5e1 80%); box-shadow: 0 6px 10px rgba(2, 6, 23, .4), inset 0 0 0 3px rgba(37, 99, 235, .25); }
#main .gi .pa .cbg-hero__bun { position: absolute; left: 50%; bottom: 14%; width: 112px; height: 20px; margin-left: -56px; border-radius: 4px 4px 14px 14px; background: linear-gradient(180deg, #fcd9a8, #e8a85c 60%, #b86b2a); }
#main .gi .pa .cbg-hero__layer { position: absolute; left: 50%; width: 112px; height: 22px; margin-left: -56px; border-radius: 9px; text-align: center; font-weight: 800; font-size: 14px; line-height: 22px; color: #0f172a; opacity: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
#main .gi .pa .cbg-hero__layer--1 { background: linear-gradient(180deg, #8a4b2a, #5c2f16 60%, #3b1a0a); color: #fff7ed; animation: cbg-l1 7s ease-in infinite; }
#main .gi .pa .cbg-hero__layer--2 { background: linear-gradient(180deg, #fde68a, #f59e0b 60%, #b45309); color: #431407; animation: cbg-l2 7s ease-in infinite; }
#main .gi .pa .cbg-hero__layer--3 { background: linear-gradient(180deg, #bbf7d0, #4ade80 60%, #15803d); color: #052e16; animation: cbg-l3 7s ease-in infinite; }
#main .gi .pa .cbg-hero__trap { position: absolute; left: 18%; width: 64px; height: 22px; border-radius: 9px; text-align: center; font-weight: 800; font-size: 14px; line-height: 22px; color: #fff1f2; opacity: 0;
    background: linear-gradient(180deg, #fca5a5, #ef4444 60%, #991b1b); animation: cbg-trap 7s ease-in infinite; }
#main .gi .pa .cbg-hero__lid { position: absolute; left: 50%; width: 118px; height: 26px; margin-left: -59px; border-radius: 16px 16px 5px 5px; opacity: 0; background: linear-gradient(180deg, #fcd9a8, #e8a85c 60%, #b86b2a);
    background-image: radial-gradient(3px 2px at 30% 35%, #fef3c7 95%, transparent), radial-gradient(3px 2px at 55% 25%, #fef3c7 95%, transparent), radial-gradient(3px 2px at 72% 45%, #fef3c7 95%, transparent), linear-gradient(180deg, #fcd9a8, #e8a85c 60%, #b86b2a);
    animation: cbg-lid 7s ease-in infinite; }
#main .gi .pa .cbg-hero__pop { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); font-weight: 900; font-size: 22px; color: #fde68a; text-shadow: 0 2px 0 rgba(2, 6, 23, .7); opacity: 0; animation: cbg-pop 7s ease-out infinite; }
@keyframes cbg-l1 {
    0%, 4% { top: 4%; opacity: 0; }
    6% { top: 4%; opacity: 1; }
    20% { top: 4%; opacity: 1; }
    30% { top: calc(86% - 42px); opacity: 1; }
    88% { top: calc(86% - 42px); opacity: 1; }
    92%, 100% { top: calc(86% - 42px); opacity: 0; }
}
@keyframes cbg-l2 {
    0%, 32% { top: 4%; opacity: 0; }
    34% { top: 4%; opacity: 1; }
    44% { top: calc(86% - 62px); opacity: 1; }
    88% { top: calc(86% - 62px); opacity: 1; }
    92%, 100% { top: calc(86% - 62px); opacity: 0; }
}
@keyframes cbg-l3 {
    0%, 50% { top: 4%; opacity: 0; }
    52% { top: 4%; opacity: 1; }
    62% { top: calc(86% - 82px); opacity: 1; }
    88% { top: calc(86% - 82px); opacity: 1; }
    92%, 100% { top: calc(86% - 82px); opacity: 0; }
}
@keyframes cbg-trap {
    0%, 20% { top: 4%; opacity: 0; transform: rotate(0); }
    22% { top: 4%; opacity: 1; }
    34% { top: 80%; opacity: 1; transform: rotate(8deg); }
    37%, 100% { top: 84%; opacity: 0; transform: rotate(14deg); }
}
@keyframes cbg-lid {
    0%, 64% { top: 0; opacity: 0; }
    66% { top: 0; opacity: 1; }
    74% { top: calc(86% - 110px); opacity: 1; }
    76% { top: calc(86% - 104px); opacity: 1; }
    88% { top: calc(86% - 106px); opacity: 1; }
    92%, 100% { top: calc(86% - 106px); opacity: 0; }
}
@keyframes cbg-pop {
    0%, 75% { opacity: 0; transform: translate(-50%, 10px); }
    80% { opacity: 1; transform: translate(-50%, 0); }
    90%, 100% { opacity: 0; transform: translate(-50%, -14px); }
}
@media (max-width: 760px) {
    #main .gi .pa.ga--burger .ga-card { padding: 12px 14px; }
    #main .gi .pa.ga--burger .ga-card .ga-sent { font-size: 16px; line-height: 1.45; }
    #main .gi .pa.ga--burger .ga-card__ko { font-size: 13.5px; }
    #main .gi .pa.ga--burger .ga-card__why { margin-top: 6px; padding: 8px 10px; font-size: 14px; line-height: 1.55; }
    #main .gi .pa.ga--burger .ga-card__mine { margin-top: 6px; }
    #main .gi .pa.ga--burger .ga-card__mine .ga-sent { font-size: 14.5px; }
    #main .gi .pa.ga--burger .ga-card__row { margin-top: 8px; }
    #main .gi .pa.ga--burger .ga-q { padding: 9px 12px; }
    #main .gi .pa .cbg-ask { line-height: 1.7; }
    #main .gi .pa .cbg-menu { gap: 6px 7px; min-height: 40px; padding: 2px 0 6px; }
    #main .gi .pa .cbg-ing { min-width: 50px; padding: 5px 11px; font-size: 14px; }
    #main .gi .pa .cbg-pad--drop { min-width: 0; }
    #main .gi .pa .cbg-pad--dir { min-width: 0; }
    #main .gi .pa .cbg-chip { padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .pa .cbg-chip.is-next { animation: none; }
    #main .gi .pa .cbg-ing { transition: none; }
    #main .gi .pa .cbg-hero__layer, #main .gi .pa .cbg-hero__trap, #main .gi .pa .cbg-hero__lid, #main .gi .pa .cbg-hero__pop { animation: none; }
    #main .gi .pa .cbg-hero__layer--1 { opacity: 1; top: calc(86% - 42px); }
    #main .gi .pa .cbg-hero__layer--2 { opacity: 1; top: calc(86% - 62px); }
    #main .gi .pa .cbg-hero__layer--3 { opacity: 1; top: calc(86% - 82px); }
    #main .gi .pa .cbg-hero__lid { opacity: 1; top: calc(86% - 106px); }
}