/* 굳은 표현 도미노 (/grammar/gerund/domino.jsp, 2026-10-19) — 틀 css/ps2-gerund-arcade.css 위에 이 게임의 색 · 로비 그림 · 보기 쟁반 · 문장 줄을 더한다.
   선택자는 .gdo-* 와 .pa.ga--domino 만 쓴다(틀 · 다른 게임에 걸리지 않게). 탁자 · 도미노 · 종은 캔버스(js/ps2-gerund-domino.js)가 그린다. */
#main .gi .pa.ga--domino { --ga-bg1: #1c120b; --ga-bg2: #3d2617; --ga-glow: #fbbf24; --ga-halo: rgba(251, 191, 36, .24); --ga-win: #92400e; --ga-accent: #b45309; --ga-hot: #f59e0b; }

/* ── 로비 그림: can't · help · (laughing 을 골라 놓음) → 밀어서 넘어뜨리고 종이 울린다 */
#main .gi .pa .ga-hero__art.gdo-hero { background: radial-gradient(70% 80% at 50% -10%, rgba(255, 196, 120, .38), transparent 62%), linear-gradient(180deg, #3d2617 0%, #1a0f08 100%); }
#main .gi .pa .gdo-hero__lamp { position: absolute; left: 50%; top: -70px; width: 280px; height: 280px; margin-left: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 150, .32), transparent); animation: gdo-lamp 6s ease-in-out infinite; }
#main .gi .pa .gdo-hero__table { position: absolute; left: 0; right: 0; bottom: 64px; height: 24px; background: linear-gradient(180deg, #6e4527, #93603a); box-shadow: 0 14px 0 #4a2a14, 0 34px 30px rgba(0, 0, 0, .45); }
#main .gi .pa .gdo-hero__row { position: absolute; left: 50%; bottom: 76px; width: 340px; height: 130px; margin-left: -170px; transform: scale(.82); transform-origin: 50% 100%; }
#main .gi .pa .gdo-hd { position: absolute; bottom: 0; width: 36px; height: 104px; border-radius: 6px; background: linear-gradient(90deg, #fffdf6, #eadfc6); box-shadow: inset 0 0 0 1px rgba(70, 40, 12, .55), 5px 6px 10px rgba(0, 0, 0, .35); transform-origin: 100% 100%; }
#main .gi .pa .gdo-hd::before, #main .gi .pa .gdo-hd::after { content: ''; position: absolute; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #8a5a2b; }
#main .gi .pa .gdo-hd::before { top: 9px; }
#main .gi .pa .gdo-hd::after { bottom: 9px; }
#main .gi .pa .gdo-hd b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); font-size: 15px; font-weight: 800; line-height: 1; color: #24170a; white-space: nowrap; letter-spacing: -.01em; }
#main .gi .pa .gdo-hd--1 { left: 20px; animation: gdo-h1 6s ease-in infinite; }
#main .gi .pa .gdo-hd--2 { left: 92px; animation: gdo-h2 6s ease-in infinite; }
#main .gi .pa .gdo-hd--3 { left: 164px; animation: gdo-h3 6s ease-in infinite; box-shadow: inset 0 0 0 1.5px #16a34a, 0 0 14px rgba(74, 222, 128, .55), 5px 6px 10px rgba(0, 0, 0, .35); }
#main .gi .pa .gdo-hb { position: absolute; left: 257px; bottom: 0; width: 60px; height: 60px; animation: gdo-hb 6s linear infinite; }
#main .gi .pa .gdo-hb s { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #111827, #4b5563, #0b1220); }
#main .gi .pa .gdo-hb i { position: absolute; left: 5px; right: 5px; bottom: 6px; height: 25px; border-radius: 26px 26px 2px 2px; background: radial-gradient(circle at 35% 25%, #fff7cc, #f4b63c 55%, #8a4b0b); box-shadow: 0 0 16px rgba(251, 191, 36, .35); }
#main .gi .pa .gdo-hb b { position: absolute; left: 50%; bottom: 30px; width: 3px; height: 22px; margin-left: -1.5px; background: #8a4b0b; }
#main .gi .pa .gdo-hb u { position: absolute; left: 50%; bottom: 50px; width: 14px; height: 7px; margin-left: -7px; border-radius: 50%; background: #f4b63c; text-decoration: none; }
#main .gi .pa .gdo-hb::after { content: ''; position: absolute; left: 50%; bottom: 10px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; border: 2px solid rgba(255, 247, 204, .85); opacity: 0; animation: gdo-hring 6s ease-out infinite; }
#main .gi .pa .gdo-hero__ding { position: absolute; left: 262px; bottom: 72px; font-size: 18px; font-weight: 900; color: #fde68a; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); opacity: 0; animation: gdo-ding 6s ease-out infinite; }
#main .gi .pa .gdo-hero__pop { position: absolute; left: 136px; bottom: 112px; font-size: 22px; font-weight: 900; color: #fbbf24; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); opacity: 0; animation: gdo-pop 6s ease-out infinite; }
#main .gi .pa .gdo-hero__tray { position: absolute; left: 50%; bottom: 13px; display: flex; gap: 10px; transform: translateX(-50%); }
#main .gi .pa .gdo-ht { padding: 8px 14px; border-radius: 8px; background: linear-gradient(180deg, #fffdf6, #eadfc6); color: #24170a; font-size: 14px; font-weight: 800; line-height: 1.1; white-space: nowrap; box-shadow: 0 2px 0 #b9a77c, 0 8px 14px -6px rgba(0, 0, 0, .6); }
#main .gi .pa .gdo-ht--ok { animation: gdo-ht 6s ease-in-out infinite; }
@keyframes gdo-lamp { 0%, 100% { opacity: .8; } 55% { opacity: 1; } }
@keyframes gdo-h1 { 0%, 34% { transform: rotate(0); } 40% { transform: rotate(21deg); } 46%, 86% { transform: rotate(31deg); } 93%, 100% { transform: rotate(0); } }
@keyframes gdo-h2 { 0%, 40% { transform: rotate(0); } 45% { transform: rotate(21deg); } 50%, 86% { transform: rotate(40deg); } 93%, 100% { transform: rotate(0); } }
@keyframes gdo-h3 { 0%, 16% { opacity: 0; transform: translate(-40px, 110px) rotate(90deg); } 26%, 45% { opacity: 1; transform: translate(0, 0) rotate(0); } 50%, 86% { opacity: 1; transform: rotate(57deg); } 92% { opacity: 0; transform: rotate(57deg); } 100% { opacity: 0; transform: translate(-40px, 110px) rotate(90deg); } }
@keyframes gdo-ht { 0%, 6% { opacity: 1; transform: none; } 11%, 15% { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 0 3px #4ade80, 0 0 18px rgba(74, 222, 128, .6); } 22%, 90% { opacity: 0; transform: translateY(-46px); } 96%, 100% { opacity: 1; transform: none; } }
@keyframes gdo-hb { 0%, 50% { transform: none; } 52% { transform: translateX(-2px) rotate(-3deg); } 54% { transform: translateX(2px) rotate(3deg); } 56% { transform: translateX(-1px) rotate(-1deg); } 58%, 100% { transform: none; } }
@keyframes gdo-hring { 0%, 50% { opacity: 0; transform: scale(.6); } 52% { opacity: .9; } 66%, 100% { opacity: 0; transform: scale(2.3); } }
@keyframes gdo-ding { 0%, 50% { opacity: 0; transform: translateY(6px) scale(.8); } 54% { opacity: 1; transform: translateY(0) scale(1.15); } 70% { opacity: 1; transform: translateY(-10px) scale(1); } 80%, 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes gdo-pop { 0%, 52% { opacity: 0; transform: translateY(8px); } 58% { opacity: 1; transform: translateY(0) scale(1.1); } 76% { opacity: 1; transform: translateY(-14px); } 86%, 100% { opacity: 0; transform: translateY(-22px); } }

/* ── 한 판: 위의 문장 줄 (굳은 표현 = 노란 띠, 고르는 칸 = 점선 상자) */
#main .gi .pa .gdo-ask .gdo-chunk { padding: 1px 4px; border-radius: 8px; background: rgba(251, 191, 36, .13); box-shadow: inset 0 -2px 0 rgba(251, 191, 36, .55); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#main .gi .pa .gdo-ask .gdo-slot { display: inline-block; min-width: 3.1em; padding: 0 7px; margin: 1px 0; border: 1.5px dashed rgba(253, 230, 138, .55); border-radius: 7px; color: #fde68a; text-align: center; line-height: 1.32; vertical-align: baseline; }
#main .gi .pa .gdo-ask .gdo-slot.is-now { border-color: var(--ga-glow); background: rgba(251, 191, 36, .2); animation: gdo-blink 1s ease-in-out infinite; }
#main .gi .pa .gdo-ask .gdo-slot.is-ok { border-style: solid; border-color: #4ade80; background: rgba(74, 222, 128, .18); color: #bbf7d0; }
#main .gi .pa .gdo-ask .gdo-slot.is-bad { border-style: solid; border-color: #f87171; background: rgba(248, 113, 113, .22); color: #fecaca; text-decoration: line-through; }
#main .gi .pa .gdo-ask .gdo-slot.is-fix { border-style: solid; border-color: #facc15; background: rgba(250, 204, 21, .18); color: #fef08a; }
@keyframes gdo-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } 50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, .28); } }
#main .gi .pa .gdo-bells { font-size: 14px; font-weight: 900; color: var(--ga-ink); font-variant-numeric: tabular-nums; }

/* ── 보기 쟁반: 캔버스 아래쪽에 겹친 단추(누워 있는 도미노). 누르기 · 칸으로 끌기 · 1 2 3 키 */
#main .gi .pa .gdo-tray { position: absolute; left: 50%; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 16px; padding: 12px 20px 16px; box-sizing: border-box; transform: translateX(-50%); pointer-events: none; }
#main .gi .pa .gdo-tray > * { pointer-events: auto; }
#main .gi .pa .gdo-tray.is-mob { flex-direction: column; gap: 9px; padding: 14px 16px 16px; }
#main .gi .pa .gdo-tile { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 128px; height: 54px; padding: 0 24px 0 12px; border: 0; border-radius: 11px;
    background: linear-gradient(180deg, #fffdf6 0%, #f3ead6 60%, #e4d6b6 100%); color: #24170a; font-family: inherit; font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.01em; white-space: nowrap;
    box-shadow: 0 3px 0 #b9a77c, 0 12px 22px -8px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .95); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
    animation: gdo-tile-in .34s cubic-bezier(.2, 1.4, .4, 1) backwards; transition: transform .14s ease, opacity .18s ease, box-shadow .14s ease, filter .14s ease; }
#main .gi .pa .gdo-tile::after { content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #8a5a2b; }
#main .gi .pa .gdo-tile__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(36, 23, 10, .1); color: #7c5a2c; font-size: 12px; font-weight: 900; }
#main .gi .pa .gdo-tile:hover { transform: translateY(-4px); box-shadow: 0 7px 0 #b9a77c, 0 18px 26px -8px rgba(0, 0, 0, .75), inset 0 1px 0 #fff; }
#main .gi .pa .gdo-tile:focus-visible { outline: 3px solid var(--ga-glow); outline-offset: 3px; }
#main .gi .pa .gdo-tile.is-drag { cursor: grabbing; transition: none; z-index: 4; box-shadow: 0 22px 34px -10px rgba(0, 0, 0, .8), 0 0 0 3px rgba(251, 191, 36, .75); }
#main .gi .pa .gdo-tile.is-back { transition: transform .26s cubic-bezier(.2, 1.4, .4, 1); }
#main .gi .pa .gdo-tile.is-gone { visibility: hidden; }
#main .gi .pa .gdo-tile.is-dim { opacity: .3; filter: grayscale(.6); }
#main .gi .pa .gdo-tile.is-ans { opacity: 1; filter: none; box-shadow: 0 0 0 3px #4ade80, 0 0 22px rgba(74, 222, 128, .6), 0 3px 0 #b9a77c; }
#main .gi .pa .gdo-tile:disabled { cursor: default; }
#main .gi .pa .gdo-tray.is-mob .gdo-tile { width: min(290px, 88%); height: 46px; font-size: 18px; }
@keyframes gdo-tile-in { 0% { opacity: 0; transform: translateY(26px) scale(.9); } 100% { opacity: 1; transform: none; } }
#main .gi .pa .gdo-pushbtn { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 30px; border: 0; border-radius: 999px; background: radial-gradient(120% 140% at 30% 20%, #fde68a 0%, #f59e0b 55%, #b45309 100%); color: #1c1206;
    font-family: inherit; font-size: 21px; font-weight: 900; line-height: 1; box-shadow: 0 4px 0 #92400e, 0 16px 30px -10px rgba(245, 158, 11, .8); cursor: pointer; animation: gdo-push 1.15s ease-in-out infinite; }
#main .gi .pa .gdo-pushbtn small { font-size: 11px; font-weight: 800; opacity: .7; }
#main .gi .pa .gdo-pushbtn__ico { font-size: 24px; }
#main .gi .pa .gdo-pushbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes gdo-push { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
#main .gi .pa .gdo-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
    #main .gi .pa .gdo-hero__table { bottom: 48px; height: 18px; }
    #main .gi .pa .gdo-hero__row { bottom: 58px; transform: scale(.72); transform-origin: 50% 100%; }
    #main .gi .pa .gdo-hero__tray { bottom: 8px; gap: 6px; }
    #main .gi .pa .gdo-ht { padding: 6px 9px; font-size: 12px; }
    #main .gi .pa .gdo-ask .gdo-slot { min-width: 2.6em; padding: 0 5px; }
}
@media (prefers-reduced-motion: reduce) {
    #main .gi .pa .gdo-tile, #main .gi .pa .gdo-pushbtn, #main .gi .pa .gdo-ask .gdo-slot.is-now { animation: none; }
}