/* 얼굴 짝꿍 — 큰 카드 반쪽 관찰 게임 */

.cover-face{background:linear-gradient(150deg,#ffeede,#f6c7a6)}
.cover-face .cover-face-pair{position:absolute;z-index:3;left:50%;top:14px;display:flex;gap:6px;transform:translateX(-50%)}
.cover-face .cover-face-pair>span{width:46px;height:82px;overflow:hidden;border-radius:26px 6px 6px 26px;background:#fffaf2;border:3px solid #fff;box-shadow:0 5px 0 rgba(120,70,40,.14)}
.cover-face .cover-face-pair>span+span{border-radius:6px 26px 26px 6px;opacity:.9;transform:translateY(6px) rotate(4deg)}
.cover-face .cover-face-pair .g3-face-art{width:100%;height:100%}

.g3-intro-card{position:relative;display:flex!important;align-items:center;width:112px;height:132px;padding:6px;border-radius:20px;background:#fffaf2;box-shadow:inset 0 0 0 3px #f1e3cd}
.g3-intro-card .g3-face-art{width:50%;height:100%}
.g3-intro-q{flex:1;align-self:stretch;display:grid;place-items:center;margin-left:4px;border:3px dashed #d8b98d;border-radius:0 16px 16px 0;color:#c49157;font-family:'Jua',system-ui,sans-serif;font-size:32px}

.g3-top{display:flex;align-items:center;gap:10px}
.g3-progress{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:16px;background:#fff;border:1px solid rgba(40,51,47,.09)}
.g3-round{font-family:'Jua',system-ui,sans-serif;font-size:17px;white-space:nowrap}
.g3-dots{display:flex;flex-wrap:wrap;gap:4px}
.g3-dots i{width:10px;height:10px;border-radius:50%;background:#e7e3d9}
.g3-dots i[data-state="done"]{background:#6cc27b}
.g3-dots i[data-state="now"]{background:#ffc83d;box-shadow:0 0 0 3px rgba(255,200,61,.35)}
.g3-scores{display:flex;gap:6px}
.g3-score{display:flex;align-items:center;gap:6px;min-height:48px;padding:6px 10px;border-radius:16px;background:#fff;border:2px solid #eee6d6}
.g3-score small{display:block;font-size:10px;color:#6f7a76}
.g3-score b{display:block;font-family:'Jua',system-ui,sans-serif;font-size:19px;font-weight:400}
.g3-score.blue{border-color:var(--blue)}.g3-score.red{border-color:var(--red)}
.g3-score[data-turn="1"]{transform:translateY(-2px);box-shadow:0 6px 0 rgba(35,68,62,.12)}
.g3-score-art{width:34px;height:34px;display:block;border-radius:50%;overflow:hidden;background:#e9f7ee}
.g3-score-art .hw-char{width:100%;height:100%}

.say-line{width:100%;min-height:48px;border:0;cursor:pointer;font-family:inherit}
.g3-guide{font-size:16px;line-height:1.35;padding:9px 12px}

.g3-table{position:relative;display:flex;justify-content:center;padding:10px;border-radius:26px;background:linear-gradient(160deg,#fff4e3,#ffe2c6);box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 6px 0 rgba(120,80,40,.1)}
.g3-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,250px);aspect-ratio:200/176;padding:10px;border-radius:26px;background:#fffdf7;box-shadow:0 8px 0 rgba(120,80,40,.14),inset 0 0 0 3px #f2e2c8}
.g3-slot{position:relative;min-width:0;display:flex}
.g3-slot .g3-face-art{width:100%;height:100%}
.g3-slot.open .g3-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin:4px;border:3px dashed #dcbf95;border-radius:0 18px 18px 0;color:#bf8c50;background:repeating-linear-gradient(135deg,rgba(255,236,208,.5) 0 8px,transparent 8px 16px)}
.g3-slot.open:first-child .g3-empty{border-radius:18px 0 0 18px}
.g3-empty b{font-family:'Jua',system-ui,sans-serif;font-size:44px;font-weight:400;line-height:1}
.g3-empty small{font-size:12px;font-weight:800}
.g3-slot.filled .g3-face-art{animation:g3Join .45s cubic-bezier(.2,1.4,.4,1)}
.g3-seam{position:absolute;left:50%;top:14px;bottom:14px;border-left:2px dashed rgba(160,120,70,.35);pointer-events:none;transition:opacity .3s}
.g3-stage[data-joined="1"]{animation:g3Glow 1.1s ease}
.g3-stage[data-joined="1"] .g3-seam{opacity:0}
.g3-zone-hint{position:absolute;left:0;right:0;z-index:3;border-radius:12px;background:rgba(255,214,70,.3);border:3px dashed #f0a800;animation:g3Hint 1s ease-in-out infinite}

.g3-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.g3-choices[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3-choice{position:relative;min-width:0;padding:6px 4px 8px;border-radius:18px;background:#fffdf7;border:3px solid #eee0c8;box-shadow:0 5px 0 rgba(120,80,40,.13);touch-action:manipulation;transition:transform .1s,opacity .2s,border-color .15s}
.g3-choice .g3-face-art{width:100%;aspect-ratio:100/176;max-height:176px;margin:0 auto}
.g3-choices[data-count="6"] .g3-choice .g3-face-art{max-height:128px}
.g3-choices[data-count="6"]{gap:8px}
#g3Game[data-count="6"] .g3-stage{width:min(100%,230px)}
.g3-stage{width:min(100%,270px)}
.g3-choice:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(120,80,40,.13)}
.g3-choice-no{position:absolute;left:6px;top:6px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#f3ead9;color:#8a6a3f;font-size:11px;font-weight:900}
.g3-choice[data-state="wrong"]{opacity:.38;animation:g3Shake .38s ease;border-style:dashed;cursor:default}
.g3-choice[data-state="right"]{border-color:#5dbb72;background:#effbf1;transform:translateY(-4px)}

.g3-win-face{display:block;width:120px;height:106px;margin:auto}
.g3-win-face .g3-face-art{width:100%;height:100%}

@keyframes g3Join{0%{transform:translateX(30%) scale(.8);opacity:.2}100%{transform:none;opacity:1}}
@keyframes g3Glow{40%{box-shadow:0 8px 0 rgba(120,80,40,.14),0 0 0 8px rgba(255,214,70,.55)}}
@keyframes g3Shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes g3Hint{50%{background:rgba(255,214,70,.1)}}

@media (max-width:380px){
  .g3-choices{gap:7px}.g3-choice{padding:5px 2px 6px}
  .g3-guide{font-size:14px}
}
@media (max-width:330px){.g3-choices[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-height:720px){#g3Game .g3-stage,#g3Game[data-count="6"] .g3-stage{width:min(100%,190px)}.g3-choice .g3-face-art{max-height:124px}.g3-choices[data-count="6"] .g3-choice .g3-face-art{max-height:92px}.g3-table{padding:8px}}
@media (prefers-reduced-motion:reduce){.g3-zone-hint,.g3-stage[data-joined="1"],.g3-choice[data-state="wrong"],.g3-slot.filled .g3-face-art{animation:none!important}}

/* 부위 레이어 겹치기 */
.g3-face-art{position:relative;display:block;overflow:hidden;aspect-ratio:100/176}
.g3-face-art.full{aspect-ratio:200/176}
.g3-face-layers{position:absolute;top:0;bottom:0;left:0;width:200%}
.g3-face-art.right .g3-face-layers{left:-100%}
.g3-face-art.full .g3-face-layers{width:100%}
.g3-face-layers img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none}
.hero-scene .hero-art .g3-face-art{width:100%;height:100%}