/* 막차 맞고 — 스킨 「먹·주홍·한지 + 막차」
   귀신 카드(먹선+붉은 붓질+한지)와 화투(빨강·검정·흰색)가 같은 결이라 그 셋으로만 칠한다. */
:root{
  --ink:#141317; --ink2:#1E1D23; --ink3:#2A2830;
  --paper:#F2EBDD; --paper2:#E6DCC8; --paper-ink:#2B2620;
  --red:#D3271D; --red2:#A3160F; --red-glow:rgba(211,39,29,.55);
  --gold:#E8B64C; --jade:#2F8F7A; --line1:#0052A4;
  --muted:#9C958A;
  --cw:46px; --ch:74px;           /* 바닥 패 */
  --hw:62px; --hh:99px;           /* 손패 */
  --kw:26px; --kh:42px;           /* 먹은 패 */
  --ow:15px; --oh:24px;           /* 상대 손패(뒷면) */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0B0A0D;color:var(--paper);
  font-family:'Noto Sans KR',system-ui,sans-serif;font-weight:500;overflow:hidden;user-select:none;-webkit-user-select:none}
#app{position:relative;max-width:480px;height:100%;margin:0 auto;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 60% at 50% 46%, rgba(35,48,45,.9) 0%, rgba(24,32,31,.93) 45%, rgba(15,18,18,.96) 100%),
    #0F1212;   /* 옅은 배경 그림은 첫 패가 깔린 뒤(#app.bgOn) — 느린 망에서 113KB 가 첫 패와 다퉜다(10-14). 원래 주석: 제목 화면의 비 오는 막차·붉은 달을 아주 옅게(2026-10-14 FGT 「판 화면이 제목보다 덜 공들였다」) */
  overflow:hidden}
/* 막차 창밖 불빛 — 위쪽 띠에서 지나간다 */
/* ★배경 위치(background-position)를 움직이면 매 장면 메인 스레드가 다시 칠해 판 화면이 40초 중 32초 바빴다(2026-10-14, 폰 가정 실측).
   띠를 260px 더 넓게 깔고 transform 으로 옮긴다 — 그래픽 쪽에서만 돈다. 모양·속도는 같다 */
#app::before{content:"";position:absolute;top:0;left:0;width:calc(100% + 260px);height:140px;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(90deg,transparent 0 120px,rgba(255,220,150,.20) 120px 128px,transparent 128px 260px);
  animation:tunnel 2.6s linear infinite;mask:linear-gradient(#000,transparent);will-change:transform}
@keyframes tunnel{from{transform:translateX(0)}to{transform:translateX(-260px)}}
/* 한지 결 */
#app::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  background-image:radial-gradient(rgba(255,255,255,.6) 1px,transparent 1.2px);background-size:5px 5px}

/* ── 위 막대 ── */
#top{position:relative;z-index:5;display:flex;align-items:center;gap:8px;height:44px;padding:0 10px;
  background:linear-gradient(#0D0C10,#16151A);border-bottom:2px solid var(--red2)}
#top .back{width:44px;height:44px;border:0;background:none;color:var(--paper);font-size:22px}
#top .st{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap;overflow:hidden}
#top .ln{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:11px;padding:0 6px;
  background:var(--line1);color:#fff;font:700 13px/1 'Black Han Sans',sans-serif}
#top .mul{font:16px 'Black Han Sans',sans-serif;color:var(--gold);padding:2px 8px;border:1.5px solid var(--gold);border-radius:6px}
#top .mul.hide{display:none}
#top .snd{width:44px;height:44px;border:0;background:none;color:var(--paper);font-size:18px}

/* ── 상대(귀신) ── */
#opp{position:relative;z-index:4;display:flex;gap:10px;padding:8px 10px 6px;align-items:flex-start}
#ghost{position:relative;flex:0 0 74px;height:98px;border-radius:6px;overflow:hidden;background:#000 center/cover;
  box-shadow:0 0 0 2px var(--paper2),0 0 0 4px var(--ink),0 6px 18px rgba(0,0,0,.6);transition:box-shadow .3s}
#ghost.turn{box-shadow:0 0 0 2px var(--red),0 0 0 4px var(--ink),0 0 22px var(--red-glow)}
#ghost .gname{position:absolute;left:0;right:0;bottom:0;padding:10px 4px 3px;font:13px 'Black Han Sans',sans-serif;text-align:center;
  background:linear-gradient(transparent,rgba(0,0,0,.85));letter-spacing:.5px}
#ghost.hit{animation:ghostHit .45s}
@keyframes ghostHit{20%{transform:translateX(-5px) rotate(-2deg);filter:brightness(1.6)}50%{transform:translateX(4px)}}
#oppInfo{flex:1;min-width:0}
.scoreRow{display:flex;align-items:baseline;gap:8px}
.score{font:28px/1 'Black Han Sans',sans-serif;color:var(--paper)}
.score small{font-size:14px;color:var(--muted);margin-left:2px}
.score.bump{animation:bump .5s}
@keyframes bump{30%{transform:scale(1.35);color:var(--gold)}}
.goBadge{font:15px 'Black Han Sans',sans-serif;color:#fff;background:var(--red);border-radius:5px;padding:2px 7px;animation:goPulse 1.2s infinite}
.goBadge:empty{display:none}
@keyframes goPulse{50%{box-shadow:0 0 14px var(--red-glow)}}
.flags{font-size:13px;color:var(--gold)}
#oppHand{display:flex;flex-wrap:wrap;gap:2px;margin:5px 0 4px;min-height:var(--oh)}
#bubble{position:absolute;left:92px;right:10px;top:4px;z-index:30;padding:9px 12px;border-radius:12px 12px 12px 2px;
  background:var(--paper);color:var(--paper-ink);font-size:14px;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.5);
  opacity:0;transform:translateY(-6px) scale(.96);transition:.22s;pointer-events:none}
#bubble.on{opacity:1;transform:none}
#bubble b{color:var(--red2)}

/* ── 먹은 패 줄 ── */
.caps{position:relative;z-index:3;display:flex;gap:6px;min-height:calc(var(--kh) + 4px);padding:2px 10px;align-items:flex-end}
.cg{position:relative;display:flex;padding-right:2px}
.cg .hc{width:var(--kw);height:var(--kh);border-radius:3px;margin-right:calc(var(--kw) * var(--ovl,-0.55))}
.cg .hc:last-of-type{margin-right:0}
.cg em{position:absolute;right:-6px;top:-8px;z-index:9;min-width:18px;height:18px;border-radius:9px;padding:0 4px;
  background:var(--ink);border:1.5px solid var(--paper2);font:13px/15px 'Black Han Sans',sans-serif;font-style:normal;text-align:center}
.cg.pi{margin-left:auto}
.cg .hc{transition:none}

/* ── 바닥 ── */
#table{position:relative;z-index:2;flex:1 1 0;margin:4px 8px;border-radius:14px;min-height:0;
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(160deg,#1F3A33,#142621);
  box-shadow:inset 0 0 0 1.5px rgba(232,182,76,.25),inset 0 0 40px rgba(0,0,0,.6)}
#table.shake{animation:tshake .42s}
#table.shake2{animation:tshake2 .6s}   /* 10-15 잠깐 껐다가 되살림 — 「바닥패 흔들림」의 진짜 원인은 착지 클래스가 남아 다시 돌던 것(table.js landOnce)이었다. 치는 맛은 그대로 둔다 */
@keyframes tshake{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-2px,1px)}80%{transform:translate(2px,0)}}
@keyframes tshake2{10%{transform:translate(-9px,4px) rotate(-.6deg)}25%{transform:translate(8px,-5px) rotate(.6deg)}40%{transform:translate(-6px,3px)}60%{transform:translate(4px,-2px)}80%{transform:translate(-2px,1px)}}
#floor{position:absolute;inset:8px;display:grid;grid-template-columns:1fr 1fr .74fr 1fr 1fr;grid-template-rows:repeat(3,1fr)}   /* 더미 줄을 좁혀 양옆 칸 묶음이 더미를 덜 덮게(2026-10-06 바닥을 가운데부터 채우면서) */
.slot{position:relative;display:flex;align-items:center;justify-content:center}
.slot .hc{width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) * -0.64)}
/* 바닥패 흐트러짐(table.js jitCard·jitSlot) — rotate·translate 는 transform 과 따로 놀아서 비행 연출과 안 부딪친다 */
.slot{translate:var(--sx,0) var(--sy,0)}
.slot .hc{rotate:var(--jr,0deg);translate:var(--jx,0) var(--jy,0)}
.slot .hc:first-child{margin-left:0}
.slot.ppuk::after{content:"뻑";position:absolute;right:2px;top:0;z-index:20;font:13px 'Black Han Sans',sans-serif;color:#fff;
  background:var(--red);border-radius:4px;padding:1px 4px;transform:rotate(8deg)}
.slot.opt{z-index:25}
.slot.opt .hc{box-shadow:0 0 0 3px var(--gold),0 0 18px var(--gold);animation:optPulse .9s infinite}
@keyframes optPulse{50%{transform:translateY(-4px)}}
#deck{position:relative;z-index:22;display:grid;place-items:center;grid-area:2/3}   /* 흩어진 바닥패가 남은 장수를 가리지 않게(고를 칸 .slot.opt 은 25로 더 위) */
#deck .pile{position:relative;width:var(--cw);height:var(--ch)}
#deck .pile i{position:absolute;inset:0;border-radius:4px;background:var(--back)}
#deck .pile i:nth-child(1){transform:translate(-3px,3px)}
#deck .pile i:nth-child(2){transform:translate(-1.5px,1.5px)}
#deck .n{position:absolute;bottom:-4px;right:-10px;z-index:3;font:13px 'Black Han Sans',sans-serif;background:var(--ink);
  border:1.5px solid var(--gold);color:var(--gold);border-radius:9px;padding:0 6px}
#deck.can .pile{animation:optPulse .9s infinite;box-shadow:0 0 18px var(--gold)}

/* ── 내 손패 ── */
#me{position:relative;z-index:4;padding:4px 8px calc(8px + env(safe-area-inset-bottom))}
#meBar{display:flex;align-items:center;gap:8px;padding:0 4px 4px}
#meBar .who{font:14px 'Black Han Sans',sans-serif;color:var(--muted)}
#meBar.turn .who{color:var(--gold)}
#meBar .who.hasT{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.1}
#meBar .who .ttl{font:10.5px/1.1 'Noto Sans KR',sans-serif;font-weight:700;color:#E8C66A;margin-bottom:1px}   /* 10-28 명패 칭호 — 이름 위에 작게(옆에 두면 360폭에서 점수·힌트를 민다) */
#meBar .hint{margin-left:auto;font-size:13.5px;color:#CFC6B4}   /* 12px·흐린 색이라 놓쳤다(FGT 3차) */
#hand{display:grid;grid-template-columns:repeat(5,1fr);gap:6px 4px;justify-items:center;min-height:calc(var(--hh)*2 + 6px)}
#hand .hc{width:var(--hw);height:var(--hh);border-radius:6px;cursor:pointer;transition:margin .15s,filter .15s,box-shadow .15s}
#hand.wait .hc{filter:brightness(.84) saturate(.85)}   /* 귀신 차례 — .62 는 「패가 검게 뭉개져 안 보인다」(FGT 8명) → 덜 어둡게 */
#hand .hc.match{box-shadow:0 0 0 2.5px var(--gold),0 6px 14px rgba(0,0,0,.5);margin-top:-6px}
/* 짝 맞는 손패 — 은은한 금빛 기운이 숨 쉬듯 번지고 위아래로 살짝 들썩인다(2026-10-06 Macho).
   translate 속성을 써서 비행 연출(transform)과 부딪히지 않는다. 카드마다 박자를 조금씩 엇갈림 */
/* ★그림자(box-shadow)를 움직이면 매 장면 다시 칠해 판에서 기다리기만 해도 폰 기준 4초 중 3.3초 바빴다(2026-10-14 실측).
   빛은 고정 그림자를 깐 겹(::before)의 투명도로, 들썩임은 translate 로 — 둘 다 그래픽 쪽에서 돈다. 모양·박자는 같다 */
#hand .hc.match{position:relative}
#hand .hc.match::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 2.5px #FFD76A,0 0 20px 6px rgba(255,205,100,.55),0 10px 16px rgba(0,0,0,.45);will-change:opacity}
/* 2026-10-14 Macho 「위아래로 흔들리지 말고 살짝 위로 올린 채 아우라만 — 짝이 있는 패다 이 정도로」 → 들썩임(handAura) 뺐다. 올림은 margin-top:-6px 그대로 */
#hand:not(.wait) .hc.match::before{animation:handGlow 1.8s ease-in-out infinite}
#hand:not(.wait) .hc.match:nth-child(2n)::before{animation-delay:-.45s}
#hand:not(.wait) .hc.match:nth-child(3n)::before{animation-delay:-.9s}
@keyframes handGlow{0%,100%{opacity:0}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ #hand:not(.wait) .hc.match::before{animation:none} }
/* 짝 표시 끄기(설정 · 고수용, 2026-10-14) — 올림·빛 없이 */
.noHint #hand .hc.match{margin-top:0;box-shadow:none}
.noHint #hand .hc.match::before{display:none}
.flipShow{border-radius:7px;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 28px 6px rgba(255,205,100,.55),0 14px 30px rgba(0,0,0,.6);pointer-events:none}
#hand .hc.pick{margin-top:-14px;box-shadow:0 0 0 3px #fff,0 0 20px var(--gold)}

/* ── 화투 패 ── */
.hc{position:relative;flex:0 0 auto;border-radius:4px;background:#fff center/100% 100% no-repeat;
  transform-origin:0 0;box-shadow:0 2px 4px rgba(0,0,0,.45);will-change:transform}
.hc.down{background:var(--back) !important}
.hc.down > *{display:none}
#oppHand .hc{width:var(--ow);height:var(--oh);border-radius:2px;box-shadow:none}
.hc.land{animation:none}   /* 10-16 Macho 「패들이 계속 흔들려, 맞출 때·짝 없어서 내려놓을 때」 — 날아온 복사본이 사라지고 진짜 패가 나타나는 순간 크기가 튀어(.96·1.03) 툭 흔들려 보였다(녹화로 확인). 착지 크기 연출은 끄고 소리·불티만 */
@keyframes land{0%{scale:.96}100%{scale:1}}   /* 밝아짐 없이 살짝 눌렸다 펴짐(10-15) */
.hc.landSoft{animation:none}   /* 약한 착지(바닥에 깔릴 때) — 겹칠 때(land)보다 약하게 */
@keyframes landSoft{0%{scale:1.03}100%{scale:1}}
/* 기본 뒷면 — 먹색 바탕 · 얇은 금테 두 줄 · 가운데 네모 낙관 「막」 (2026-10-17 Macho 「바닥패 뒤가 일본기네? 말 나올 수 있어, 심플하고 느낌있는걸로」
   — 예전엔 먹색 바탕 가운데 붉은 동그라미라 일장기처럼 보였다. 동그라미를 없애고 한국 서화의 네모 인장으로) */
:root,[data-back="404"]{--back:
  linear-gradient(var(--red),var(--red)) 50% 50%/46% 28% no-repeat,
  linear-gradient(rgba(201,163,90,.8),rgba(201,163,90,.8)) 50% 10%/74% 1px no-repeat,
  linear-gradient(rgba(201,163,90,.8),rgba(201,163,90,.8)) 50% 90%/74% 1px no-repeat,
  linear-gradient(rgba(201,163,90,.8),rgba(201,163,90,.8)) 15% 50%/1px 82% no-repeat,
  linear-gradient(rgba(201,163,90,.8),rgba(201,163,90,.8)) 85% 50%/1px 82% no-repeat,
  repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px),
  linear-gradient(160deg,#34313A,#17161B);--backTxt:"막"}
/* 뒷면 테두리(2026-10-18 Macho 「화투패 뒷면이 왜 다 사이즈가 작아보이니?」) — 크기는 앞면과 같은데(더미 46×74 · 바닥 48×75 실측)
   앞면은 흰 종이에 붉은 테라 판 위에서 가장자리까지 또렷하고, 뒷면은 어두운 바탕이 어두운 판에 묻혀 안쪽 금테만 「패의 끝」으로 보였다.
   → 앞면처럼 붉은 테 + 종이색 띠를 가장자리에 둘러 패 크기 그대로 읽히게(inset 그림자라 모든 뒷면 무늬·시즌 뒷면에도 붙는다) */
.hc.down,#deck .pile i{box-shadow:inset 0 0 0 1.5px #8E3A40,inset 0 0 0 3.5px #E9DFC9,0 2px 4px rgba(0,0,0,.45)}
#oppHand .hc.down{box-shadow:inset 0 0 0 1px #8E3A40,inset 0 0 0 2.5px #E9DFC9}
/* 시즌 한정 뒷면(2026-10-13 js/events.js BACKS) — 그림 없이 그린다. 고른 뒷면은 <html data-back> */
[data-back="moon"]{--back:
  radial-gradient(circle at 68% 30%, #F4E3B0 0 15%, rgba(244,227,176,.25) 16% 20%, transparent 21%),
  radial-gradient(circle at 25% 70%, rgba(255,255,255,.5) 0 1.5%, transparent 2%),
  radial-gradient(circle at 40% 22%, rgba(255,255,255,.4) 0 1.2%, transparent 1.8%),
  linear-gradient(175deg,#22305A,#0B1022 70%,#1A0F12);--backTxt:""}
[data-back="lantern"]{--back:
  radial-gradient(ellipse 30% 22% at 50% 52%, #E8483A 0 60%, transparent 62%),
  radial-gradient(ellipse 36% 30% at 50% 52%, #2E5BA8 0 60%, transparent 62%),
  linear-gradient(90deg, transparent 49%, rgba(232,182,76,.7) 49% 51%, transparent 51%) 0 0/100% 30% no-repeat,
  repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px),
  linear-gradient(160deg,#2A1F14,#120D08);--backTxt:""}
.hc.down::after{content:var(--backTxt,"404");display:block !important;position:absolute;inset:0;display:grid !important;place-items:center;
  font:700 calc(var(--fs,10px)) 'Black Han Sans',sans-serif;color:var(--paper);letter-spacing:-.5px}
#hand .hc.down::after{--fs:13px}
.slot .hc.down::after,#deck .hc.down::after{--fs:10px}
#oppHand .hc.down::after{content:""}
/* 보너스패 = 부적 */
.hc.bonus{background:linear-gradient(170deg,#F7E07A,#E9C23E) !important;display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px var(--red2),0 2px 4px rgba(0,0,0,.45)}
.hc.bonus i{font:normal 900 2.1em/1 'Noto Serif KR',serif;color:var(--red2);font-size:calc(var(--bw,46px) * .3);white-space:nowrap;letter-spacing:-.04em}   /* 雙·三 → 쌍피·3피(10-16) — 두 글자라 크기를 줄임 */
.hc.bonus b{font:calc(var(--bw,46px) * .22) 'Black Han Sans',sans-serif;color:var(--red2);margin-top:2px}
#hand .hc.bonus{--bw:var(--hw)}.cg .hc.bonus{--bw:26px}

/* ── 큰 글자 컷인 ── */
#fx{position:absolute;inset:0;z-index:60;pointer-events:none}
#fxCanvas{position:absolute;inset:0;width:100%;height:100%}
.cut{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;place-items:center;width:100%}
.cut .swash{position:absolute;width:118%;height:120px;left:-9%;top:50%;margin-top:-60px;
  background:var(--red);clip-path:polygon(2% 30%,20% 18%,48% 22%,80% 10%,99% 26%,96% 70%,70% 84%,40% 78%,12% 90%,0 64%);
  transform-origin:left center;animation:swash .32s cubic-bezier(.2,.9,.2,1) both}
.cut.ink .swash{background:var(--ink);box-shadow:0 0 0 2px var(--red)}
.cut.gold .swash{background:linear-gradient(90deg,#B07A1C,var(--gold),#B07A1C)}
.cut .txt{position:relative;font:clamp(56px,19vw,92px)/1 'Black Han Sans',sans-serif;color:#fff;letter-spacing:2px;
  text-shadow:0 4px 0 var(--ink),0 0 30px rgba(0,0,0,.7);-webkit-text-stroke:2px var(--ink);
  animation:cutIn .42s cubic-bezier(.2,1.6,.4,1) both}
.cut.gold .txt{color:var(--ink);-webkit-text-stroke:0;text-shadow:0 3px 0 rgba(255,255,255,.4)}
.cut .sub{position:relative;margin-top:6px;font:18px 'Black Han Sans',sans-serif;color:var(--paper);text-shadow:0 2px 6px #000;animation:fadeUp .4s .15s both}
.cut.out{animation:cutOut .28s ease-in both}
.cut .seal{position:absolute;right:12%;top:-10px;width:58px;height:58px;border:3px solid var(--red);border-radius:8px;color:var(--red);
  display:grid;place-items:center;font:20px/1 'Black Han Sans',sans-serif;background:rgba(242,235,221,.92);transform:rotate(-12deg);
  animation:stamp .35s .18s cubic-bezier(.2,1.8,.4,1) both}
@keyframes swash{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cutIn{0%{transform:scale(2.6);opacity:0;filter:blur(6px)}100%{transform:none;opacity:1;filter:none}}
@keyframes cutOut{to{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
@keyframes stamp{0%{transform:rotate(-12deg) scale(3);opacity:0}100%{transform:rotate(-12deg);opacity:1}}
.ring{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid var(--gold);
  animation:ring .5s ease-out forwards;pointer-events:none;z-index:61}
@keyframes ring{to{transform:scale(5.5);opacity:0;border-width:1px}}
.pop{position:absolute;z-index:62;font:20px 'Black Han Sans',sans-serif;color:var(--gold);text-shadow:0 2px 0 var(--ink),0 0 8px #000;
  animation:popUp 1s ease-out forwards;pointer-events:none;white-space:nowrap}
.pop.red{color:#FF6A5E}
@keyframes popUp{0%{transform:translate(-50%,6px) scale(.6);opacity:0}20%{transform:translate(-50%,-6px) scale(1.15);opacity:1}100%{transform:translate(-50%,-40px);opacity:0}}
.chip{position:absolute;left:50%;top:62%;transform:translateX(-50%);z-index:62;padding:6px 14px;border-radius:20px;
  background:var(--paper);color:var(--paper-ink);font:16px 'Black Han Sans',sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.5);
  animation:chip 1.3s ease-out forwards;white-space:nowrap}
.chip b{color:var(--red2)}
@keyframes chip{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.05)}25%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-14px)}}

/* ── 창(고/스톱·흔들기·국진·정산) ── */
#sheet{position:absolute;inset:0;z-index:80;display:none;align-items:flex-end;justify-content:center;background:rgba(5,5,8,.55)}
#sheet.on{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.panel{position:relative;width:100%;max-width:480px;padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  background:var(--paper);color:var(--paper-ink);border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.6);
  animation:up .28s cubic-bezier(.2,.9,.2,1);
  max-height:calc(100% - 48px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}   /* 화면보다 긴 창은 안에서 스크롤 · 위 48px 은 늘 비워 둔다 = 바깥 눌러 닫기 자리(2026-10-13 설정 창이 꽉 차 바깥이 사라졌던 것) */
@keyframes up{from{transform:translateY(100%)}}
.panel h3{margin:0 0 4px;font:24px 'Black Han Sans',sans-serif}
.panel p{margin:4px 0 12px;font-size:15px;line-height:1.5;color:#5A5148}
.panel .x{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;background:none;font-size:22px;color:#6A6055}
.panel .x + h3{padding-right:40px}   /* 제목이 닫기 단추(44px) 밑으로 들어가 「선물」이 잘렸다(2026-10-13 FGT 2차) */
.panel .cards{display:flex;gap:8px;justify-content:center;margin:8px 0 14px}
.panel .cards .hc{width:58px;height:93px;border-radius:5px}
.btns{display:flex;gap:10px}
.btns.col{flex-direction:column}   /* 긴 단추 둘 — 위아래로(10-18 출석 「광고 보고 오늘 선물 한 번 더」가 반쪽 폭에 세 줄로 끼었다) */
/* 한글 줄바꿈 — 띄어쓰기 단위로, 마지막 줄에 한두 글자만 떨어지지 않게(10-18 Macho 「불필요한 여백이나 좁은 텍스트 박스가 있으면 전수 체크해서 수정해」)
   「다음 패 2장 미리 보 / 기」·「이벤트 때 열 / 림」·「튜토리얼 다시 보 / 기」처럼 꼬리 글자가 다음 줄로 떨어졌다. 칸보다 긴 낱말만 쪼갠다 */
body{word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
.btn{flex:1;min-height:56px;border:0;border-radius:12px;font:20px 'Black Han Sans',sans-serif;cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.25);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn.red{background:var(--red);color:#fff}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.line{background:transparent;color:var(--paper-ink);box-shadow:inset 0 0 0 2px var(--paper-ink)}
.btn small{display:block;font:13px 'Noto Sans KR',sans-serif;opacity:.85;margin-top:2px}
.bigScore{font:64px/1 'Black Han Sans',sans-serif;text-align:center;color:var(--red2);margin:4px 0 2px}
.bigScore small{font-size:22px;color:var(--paper-ink)}

/* 정산서 = 명부 서류 */
.doc{background:
    repeating-linear-gradient(transparent 0 33px,rgba(43,38,32,.12) 33px 34px),var(--paper)}
.doc .head{padding-right:84px;display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--paper-ink);padding-bottom:8px;margin-bottom:6px}
.doc .head img{width:46px;height:61px;object-fit:cover;border-radius:4px;filter:grayscale(.2)}
.doc .head .t{font:22px 'Black Han Sans',sans-serif}
.doc .head .s{font-size:13px;color:#7A7064}
.doc .row{display:flex;justify-content:space-between;height:34px;align-items:center;font-size:16px;opacity:0;animation:rowIn .25s forwards}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.doc .row b{font-family:'Black Han Sans',sans-serif;font-weight:400}
.doc .row.mul b{color:var(--red2)}
.doc .total{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 14px;padding-top:8px;border-top:2px solid var(--paper-ink)}
.doc .total span{font:18px 'Black Han Sans',sans-serif}
.doc .total b{font:44px/1 'Black Han Sans',sans-serif;color:var(--red2)}
.doc .bigseal{position:absolute;right:18px;top:8px;width:72px;height:72px;border:4px solid var(--red);border-radius:10px;
  display:grid;place-items:center;color:var(--red);font:34px/1 'Black Han Sans',sans-serif;transform:rotate(-14deg);
  opacity:0;mix-blend-mode:multiply}
.doc .bigseal.on{animation:stamp .4s cubic-bezier(.2,1.8,.4,1) forwards}
.doc .bigseal.lose{color:#3C3833;border-color:#3C3833}

/* 생각 중 점 */
.think{display:inline-flex;gap:3px;margin-left:6px}
.think i{width:5px;height:5px;border-radius:50%;background:var(--paper);opacity:.3;animation:think 1s infinite}
.think i:nth-child(2){animation-delay:.15s}.think i:nth-child(3){animation-delay:.3s}
@keyframes think{50%{opacity:1}}
.hidden{display:none !important}

@media (max-height:700px){
  :root{--hw:54px;--hh:86px;--cw:40px;--ch:64px;--kw:21px;--kh:34px}
  #opp{padding:4px 10px 2px}
  .doc .row{height:29px}
  .doc .head img,.doc .reward img{width:36px;height:48px}
  .doc .total b{font-size:36px}
  #ghost{flex-basis:62px;height:82px}
}
@media (prefers-reduced-motion:reduce){ #app::before{animation:none} }
/* 가장자리 칸은 안쪽으로 붙여 3~4장 묶음이 판 밖으로 안 나가게 (360px 실측) */
.slot[data-i="0"],.slot[data-i="5"],.slot[data-i="10"]{justify-content:flex-start}
.slot[data-i="4"],.slot[data-i="9"],.slot[data-i="14"]{justify-content:flex-end}
/* 정산서 보상 줄 */
.doc .reward{display:flex;gap:10px;align-items:center;margin:4px 0 6px;padding:8px;border-radius:10px;background:rgba(211,39,29,.08);animation:rowIn .3s .6s both}
.doc .reward img{width:44px;height:59px;object-fit:cover;border-radius:5px;box-shadow:0 0 0 2px var(--gold)}
.doc .reward b{font:17px 'Black Han Sans',sans-serif;font-weight:400}
.doc .reward em{font:13px 'Black Han Sans',sans-serif;font-style:normal;color:#fff;background:var(--red);border-radius:4px;padding:1px 5px;margin-left:4px}
.doc .reward span{font-size:13px;color:#7A7064}
.doc .opened{margin:2px 0 10px;font-size:13px;color:var(--red2)}
.doc .opened.lossTip{padding:8px 10px;border-radius:10px;background:rgba(160,40,30,.08);border:1px solid rgba(160,40,30,.25);line-height:1.5}   /* 10-27 연패 안내 */
.doc .lossTip b{display:block;font-size:14px}
.doc .lossTip span{display:block;color:#5a4a3a}

/* 귀신 스킬 줄 */
#skills{display:flex;gap:6px;padding:0 4px 6px}
#skills .sk{position:relative;flex:1;min-width:0;min-height:44px;border:0;border-radius:10px;padding:0 8px 0 40px;text-align:left;color:var(--paper);
  background:#1E1D23 left center/34px auto no-repeat;box-shadow:inset 0 0 0 1.5px #3A3840;font:13px 'Black Han Sans',sans-serif;overflow:hidden}
#skills .sk i{position:absolute;left:24px;bottom:2px;font-style:normal;font-size:13px}
#skills .sk b{font-weight:400;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#skills .sk em{position:absolute;right:5px;top:4px;font:13px 'Black Han Sans',sans-serif;font-style:normal;color:var(--gold)}
#skills .sk.can{box-shadow:inset 0 0 0 2px var(--gold),0 0 12px rgba(232,182,76,.45);animation:goPulse 1.4s infinite}
#skills .sk.psv{opacity:.75}
#skills .sk.psv em{color:var(--muted)}
#skills .sk.spent{filter:grayscale(1);opacity:.45}
/* 10-21 고유 스킬(최고 등급의 두 번째 스킬) · 짝꿍 표시 */
#skills .sk s{position:absolute;left:3px;top:3px;padding:0 3px;border-radius:4px;font:13px/1.3 'Noto Sans KR',system-ui,sans-serif;font-weight:700;text-decoration:none;color:#1A1418;background:var(--gold)}
#skills .sk.uq{box-shadow:inset 0 0 0 1.5px #C9A0FF}
#skills .sk.uq s{background:#C9A0FF}
#skills .sk.cb s{background:#7FD3B0}
#skills.many{gap:4px}
#skills.many .sk{padding:0 4px 0 36px;background-size:32px auto}
#skills.many .sk b{display:none}
#skills.many .sk i{left:20px}
#skills.many .sk em{top:50%;right:6px;transform:translateY(-50%);font-size:14px}
/* 카드는 띠 위로 — 예전 top:-70px 은 큰 글자(「명부 열람!」의 「명부」)를 가렸다(2026-10-14 Macho). 아래 끝만 띠 윗선에 살짝 걸친다 */
.cut .cutImg{position:absolute;left:8%;top:-122px;width:84px;height:112px;border-radius:8px;background:#000 center/cover;
  box-shadow:0 0 0 3px var(--gold),0 8px 24px rgba(0,0,0,.6);transform:rotate(-8deg);animation:stamp .4s .05s cubic-bezier(.2,1.6,.4,1) both}
.pickHand .hc{cursor:pointer}
/* 창 안 카드 줄은 접힌다(점지 손패 10장이 화면 밖으로 나가던 것, 2026-10-05) */
.panel .cards{flex-wrap:wrap}
.pickHand .hc{width:56px !important;height:90px !important}

.doc .dblBtn{width:100%;margin:2px 0 12px;min-height:52px;font-size:17px}
.doc .dblBtn[disabled]{opacity:.6}

#top .snd.vox{width:auto;min-width:44px;padding:0 6px;font:14px 'Black Han Sans',sans-serif;color:var(--paper)}

/* 같은 계열 중 약한 카드 — 효과 없음 */
#skills .sk.off{filter:grayscale(1);opacity:.4}
#skills .sk.off em{color:var(--muted);font-size:13px}
/* 처음 들어올 때 「▶ 한 판 시작」 — 그 누름으로 소리를 연다(아이폰) */
#startGate{position:absolute;left:0;right:0;top:44px;bottom:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;
  background:radial-gradient(90% 60% at 50% 42%,rgba(40,20,24,.94),rgba(8,8,11,.97))}
#startGate .sgCard{width:min(46vw,190px);aspect-ratio:3/4;border-radius:12px;background:#000 center/cover;box-shadow:0 0 0 3px var(--paper2),0 0 0 6px var(--ink),0 0 40px var(--red-glow)}
#startGate .sgName{font:28px 'Black Han Sans',sans-serif;color:#fff;margin-top:6px}
#startGate .sgSt{font-size:15px;color:var(--muted);margin-bottom:10px}
#startGate .sgGo{flex:0 0 auto;width:min(80vw,300px);min-height:60px;font-size:22px}
/* 카드 「레벨 · 부적」 칸 (js/charms.js infoHtml — 로비 도감·덱, 결과 화면 자세히 보기) 2026-10-07 */
.chBox{margin:8px 0 10px;padding:10px 12px;border-radius:12px;background:#2B2620;color:var(--paper);text-align:left}
.chLv{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chLv b{font:18px 'Black Han Sans',sans-serif;font-weight:400;color:var(--gold)}
.chDots{display:inline-flex;gap:3px}
.chDots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.chDots i.on{background:var(--gold);box-shadow:0 0 6px rgba(232,182,76,.6)}
.chLv small{font-size:13px;color:#C9BFAE}
.chRow{display:flex;gap:10px;align-items:flex-start;margin-top:8px}
.chIc{font-size:24px;line-height:1}
.chRow div{display:flex;flex-direction:column;gap:2px}
.chRow b{font:15px 'Black Han Sans',sans-serif;font-weight:400;color:var(--gold)}
.chRow span{font-size:14px;line-height:1.45}
.chRow small{font-size:13px;color:#C9BFAE}
.chPerk{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.chPerk span{padding:3px 8px;border-radius:8px;background:rgba(255,255,255,.08);color:#8F877C;font-size:13px}
.chPerk span.on{background:rgba(232,182,76,.2);color:var(--gold)}

/* 판 도중 자리를 뜬 판 = 진 판 알림 (2026-10-13 save.js forfeit) */
.ffNote{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 62px);word-break:keep-all;transform:translateX(-50%);z-index:9500;width:max-content;max-width:calc(100% - 32px);padding:11px 16px;border-radius:12px;background:rgba(20,16,24,.94);color:#F2EADB;font-size:15px;line-height:1.45;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:ffIn .3s ease-out}
.ffNote b{color:#FF7A6B}
@keyframes ffIn{from{opacity:0;transform:translate(-50%,-8px)}}

/* 정통 맞고 표시 — 판 머리 (2026-10-13) */
.classicTag{color:var(--gold,#E8B64C);font-weight:700}

/* 튜토리얼 말풍선 (2026-10-13 js/tutorial.js) */
.tutRing{position:fixed;z-index:9590;border-radius:14px;box-shadow:0 0 0 3px #E8B64C,0 0 0 9999px rgba(5,5,10,.45);pointer-events:none;animation:tutRing 1.4s ease-in-out infinite}
@keyframes tutRing{50%{box-shadow:0 0 0 6px rgba(232,182,76,.55),0 0 0 9999px rgba(5,5,10,.45)}}
.tutTip{position:fixed;z-index:9600;padding:14px 14px 10px;border-radius:14px;background:#F2EADB;color:#2B2620;font-size:15px;line-height:1.6;box-shadow:0 10px 30px rgba(0,0,0,.5);word-break:keep-all;animation:tutIn .25s ease-out}
@keyframes tutIn{from{opacity:0;transform:translateY(6px)}}
.tutTip p{margin:0 0 10px}
.tutTip b{color:#8A2B22}
.tutBtns{display:flex;gap:8px}
.tutBtns button{flex:1;min-height:44px;border:0;border-radius:10px;font:15px 'Black Han Sans',sans-serif}
.tutOk{background:#B2291F;color:#fff}
.tutOff{background:#E3D8C4;color:#5A5048}
.tutArr{position:absolute;width:14px;height:14px;background:#F2EADB;transform:rotate(45deg)}
.tutTip.below .tutArr{top:-7px}
.tutTip.above .tutArr{bottom:-7px}/* 바닥패 고르기 창(2026-10-13) — 같은 달 두 장을 크게 보여 주고 하나를 누른다 */
#sheet .pickFloor{display:flex;justify-content:center;gap:18px;margin:14px 0 6px}
#sheet .pickFloor .pf{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:96px;min-height:44px;padding:10px 10px 8px;border:2px solid rgba(0,0,0,.12);border-radius:14px;background:#fff;cursor:pointer;font:inherit;color:inherit}
#sheet .pickFloor .pf:active{transform:scale(.96)}
#sheet .pickFloor .pf .hc{display:block;width:76px;height:122px;border-radius:8px;background-size:cover;background-position:center;box-shadow:0 3px 10px rgba(0,0,0,.25)}
#sheet .pickFloor .pf b{font-size:16px}
/* 정산서 맨 위 한 줄 — 이 판으로 늘고 준 노잣돈(2026-10-14 FGT 3차) */
.panel .netLine{display:flex;align-items:baseline;gap:10px;margin:10px 0 6px;padding:10px 14px;border-radius:12px;background:#2B2620;color:#F4EEE2}
.panel .netLine span{font:20px 'Black Han Sans',sans-serif}
.panel .netLine b{font:26px 'Black Han Sans',sans-serif;margin-left:auto}
.panel .netLine.up b{color:#FFD24A}
.panel .netLine.down b{color:#FF8A7A}
.panel .netLine{flex-wrap:wrap}
.panel .netLine small{flex-basis:100%;display:block;margin-top:2px;font-size:13px;color:#C9BFAE;text-align:right}

/* ── 결정적 순간 「멈칫」(2026-10-14 FGT 손맛) — 쪽·뻑·따닥·싹쓸이·폭탄 때 판이 0.1초 눌렸다 튄다. transform 이라 그래픽 쪽에서 돈다 ── */
#table.hitStop{animation:hitStop .32s cubic-bezier(.2,1.6,.4,1)}   /* 10-15 되살림(위와 같은 이유) */
@keyframes hitStop{0%{transform:scale(1)}18%{transform:scale(.975)}45%{transform:scale(1.018)}100%{transform:scale(1)}}
/* 3고부터 판 둘레가 붉게 숨 쉰다(2026-10-14) */
#table.go3::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(214,40,40,.75),inset 0 0 40px rgba(214,40,40,.45);animation:go3 1.2s ease-in-out infinite;will-change:opacity}
@keyframes go3{50%{opacity:.35}}
/* 귀신이 기세 오를 때(귀신이 쪽·싹쓸이 등) — 초상이 살짝 커졌다 돌아온다 */
#ghost.smug{animation:ghostSmug .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes ghostSmug{40%{transform:scale(1.08) rotate(2deg)}}
/* 고·스톱·큰 판 창의 손익 미리보기(2026-10-14) */
.panel .goPrev{display:flex;gap:8px;margin:8px 0 4px}
.panel .goPrev span{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border-radius:10px;background:rgba(43,38,32,.07);font-size:13px;text-align:center}
.panel .goPrev b{font:20px 'Black Han Sans',sans-serif}
.panel .goPrev b.up{color:#2E7D32}.panel .goPrev b.down{color:#C62828}
.panel .goPrev small{font-size:13px;color:#8A7F70}

.netLine .betX{font-style:normal;color:#ffb36b;font-weight:700}   /* 큰 판 표시(10-14 FGT 4차) */
#app.bgOn{background:radial-gradient(120% 60% at 50% 46%, rgba(35,48,45,.9) 0%, rgba(24,32,31,.93) 45%, rgba(15,18,18,.96) 100%), url(../img/title/bg.webp) center 30%/cover}   /* 첫 패 뒤 옅은 배경(10-14) */
.cut.sm .txt{font-size:clamp(34px,11vw,56px);white-space:nowrap}   /* 긴 컷 글자는 한 줄로(10-14 「판돈이 올랐다」 두 줄 꺾임) */

/* ── 귀신 줄 새 배치(10-14 Macho 「카드를 키우고 획득패를 바로 옆으로」) ──
   귀신 카드 88×118 · 오른쪽 = 점수 줄 + 획득패 두 줄(광·열 / 띠·피) · 상대 손패 뒷면은 오른쪽 위에 작게 겹쳐 쌓고 장수 */
#ghost{flex:0 0 88px;height:118px}
#oppInfo{position:relative}
#oppHand{position:absolute;right:0;top:0;margin:0;flex-wrap:nowrap;gap:0;min-height:0;padding-right:4px}
#oppHand .hc{margin-left:calc(var(--ow) * -0.62)}
#oppHand .hc:first-child{margin-left:0}
#oppHand::after{content:attr(data-n);position:absolute;right:-6px;top:-7px;min-width:17px;height:17px;border-radius:9px;padding:0 3px;
  background:var(--ink);border:1.5px solid var(--paper2);font:13px/14px 'Black Han Sans',sans-serif;color:var(--paper);text-align:center}
#oppHand[data-n="0"]::after,#oppHand:not([data-n])::after{display:none}
.caps.two{display:grid;grid-template-columns:1fr 1fr;column-gap:6px;row-gap:5px;min-height:0;padding:0;margin-top:8px;align-items:end}
.caps.two .cg.pi{margin-left:0}
.caps.two .cg{min-height:var(--kh);justify-self:start;width:max-content}   /* 숫자 배지가 패 바로 옆에 붙게 */
#bubble{left:106px;right:8px;max-width:none;top:36px;border-radius:12px;font-size:13.5px}   /* 말풍선은 귀신 카드 바로 오른쪽, 귀신 줄 안에서만 — 카드 아래로 내리면 바닥패를 가렸다(10-15 Macho 「카드 우측으로, 바닥패 가리지 말고」). 획득패는 잠깐(2.2초) 덮는다 */
#bubble::before{content:'';position:absolute;left:-7px;top:14px;border:7px solid transparent;border-left:0;border-right-color:var(--paper)}
@media (max-height:700px){ #ghost{flex-basis:76px;height:102px} .caps.two{margin-top:5px;row-gap:3px} #bubble{left:94px;top:30px} }
#oppInfo .gSoul{align-self:center;padding:2px 8px 3px;border-radius:9px;background:rgba(10,8,12,.6);border:1px solid rgba(240,224,190,.18);
  font:13px/1.2 'Black Han Sans',sans-serif;color:var(--paper);letter-spacing:.5px;white-space:nowrap}   /* 귀신 점수 옆 혼백 진행(10-15) */
#oppInfo .gSoul b{font-weight:400;color:var(--gold);letter-spacing:1px}
/* 정산서 단추 줄(노선도로 · 한 판 더)은 창 아래에 늘 붙어 있게 — 정산서가 길어 「한 판 더 · 카드까지 1승」이 첫 화면 밖이었다(10-15 FGT 7차 5/5) */
.panel .btns.resBtns{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:5;margin:10px -18px calc(-18px - env(safe-area-inset-bottom));padding:10px 18px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(rgba(244,236,222,0),var(--paper) 14px);}

/* 바닥 묶음 — 첫 패를 칸 가운데에 고정하고 다음 패는 옆에 붙는다(가운데 다시 맞춤 없음, 10-16 「있던 패가 왜 옆으로 움직여」)
   왼쪽·가운데 칸은 오른쪽으로, 오른쪽 두 칸(.rev)은 왼쪽으로 자란다 — 판 밖으로 잘리지 않게 */
.slot{justify-content:flex-start;padding-left:calc(50% - var(--cw) / 2)}
.slot.rev{flex-direction:row-reverse;padding-left:0;padding-right:calc(50% - var(--cw) / 2)}
/* 귀신 줄 높이 고정 — 귀신 획득패가 두 줄로 차면 줄이 132→139px 로 커져 바닥 판이 밀리고, 바닥패 전체가 3.5px 씩 움직였다
   (10-16 Macho 「바닥에 있던 패가 왜 옆으로 움직여」 · stay_test3 실측). 획득패 칸은 귀신 카드 높이 안에서만 쓰고 넘치면 겹쳐 보인다 */
#oppInfo{height:118px;overflow:visible}
@media (max-height:700px){ #oppInfo{height:102px} }
/* 바닥 칸 너비 고정 — 묶음이 길어지면 그 칸이 내용물만큼 넓어지고(1fr 의 최소 = 내용물 폭) 다른 칸이 밀려 바닥패가 움직였다(10-16 라이브 실측 82→89px).
   minmax(0, …) 로 칸 폭을 내용물과 떼어 놓는다 — 넘치는 패는 옆 칸 위로 겹쳐 보인다 */
#floor{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.74fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}
.slot{min-width:0}

/* 바닥패 자리 고정(10-16) — 줄지어 놓기(flex) 대신 칸 가운데 기준 좌표(--ox)에 못 박는다. 옆 패가 붙거나 빠져도 남은 패는 그대로 */
.slot .hc,.slot .hc:first-child{position:absolute;left:calc(50% - var(--cw) / 2);top:calc(50% - var(--ch) / 2);margin:0 !important;
  translate:calc(var(--ox, 0px) + var(--jx, 0px)) var(--jy, 0px)}
/* 귀신 손패(뒷면) — 오른쪽 구석에 작게 몰려 버그처럼 보였다(10-16 Macho 「좀 넓게 사용해, 크기도 좀 더 키우고」). 15×24 → 22×35, 겹침 62% → 45%, 구석에서 띄움 */
#oppHand{--ow:22px;--oh:35px;right:14px;top:4px}
#oppHand .hc{margin-left:calc(var(--ow) * var(--ohov, -0.45))}   /* --ohov = table.js fitOppHand — 혼백 알약 오른쪽 빈자리에 맞춘 겹침 */
#oppHand .hc:first-child{margin-left:0}
@media (max-height:700px){ #oppHand{--ow:19px;--oh:30px} }
/* 판 바닥 꾸미기(js/skins.js, 10-16) — 고른 바닥 그림 위에 살짝 어둡게 덮어 패가 잘 보이게 */
html:not([data-felt="base"]) #table{background:radial-gradient(85% 75% at 50% 50%, rgba(0,0,0,.05), rgba(0,0,0,.42)), var(--feltImg, none) center/cover, #1F3A33}
html[data-felt-tone="light"] #table{background:radial-gradient(85% 75% at 50% 50%, rgba(0,0,0,0), rgba(60,40,20,.28)), var(--feltImg, none) center/cover, #E9DFC8}
/* 「?」 설명 단추·창(js/help.js, 10-16) — 그림 22px · 눌리는 범위 44px */
.hq{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;margin:0 2px 0 6px;padding:0;border:0;border-radius:11px;background:rgba(43,38,32,.12);color:#7A7064;font:13px/1 'Black Han Sans',sans-serif;vertical-align:middle;cursor:pointer}
.hq::before{content:"";position:absolute;inset:-11px}
#app .hq,.gx .hq,.chBox .hq,.stStake .hq{background:rgba(255,255,255,.16);color:#E9E0CF}   /* 어두운 칸(카드 창 레벨·부적, 역 창 판돈) 안의 「?」 */
.hqPop{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:24px;background:rgba(10,8,12,.45);animation:hqIn .15s ease-out}
.hqCard{position:relative;width:min(340px,100%);padding:18px 18px 14px;border-radius:16px;background:#FFFDF8;color:#2B2620;box-shadow:0 12px 36px rgba(0,0,0,.35)}
.hqCard b{display:block;margin-right:36px;font:19px 'Black Han Sans',sans-serif;font-weight:400}
.hqCard ul{margin:10px 0 0;padding-left:18px;font-size:14px;line-height:1.6;color:#4A4239}
.hqCard li{margin:3px 0}
.hqX{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;font-size:18px;color:#6A6055}
@keyframes hqIn{from{opacity:0}}
/* 잠시 멈춤(10-21 전화·알림으로 앱이 가려지면 판을 멈춘다 · js/table.js) */
#pauseOv{position:fixed;inset:0;z-index:600;display:grid;place-items:center;background:rgba(10,8,12,.72)}
#pauseOv .pzBox{width:min(300px,84vw);padding:20px 18px 16px;border-radius:16px;background:#F4EEE2;color:#2B2620;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#pauseOv .pzBox b{display:block;font:22px 'Black Han Sans',sans-serif}
#pauseOv .pzBox p{margin:8px 0 14px;font-size:15px;line-height:1.5;word-break:keep-all}
#pauseOv .pzBox .btn{width:100%;min-height:48px}
/* 바닥 같은 월 묶음 장수(10-24 Macho 「3장인지 2장인지 헷갈려」) — 맨 아래 패(칸 가운데 고정)의 귀퉁이 중 다음 패가 덮지 않는 쪽.
   왼쪽·가운데 칸은 다음 패가 오른쪽으로 → 왼쪽 위, 오른쪽 두 칸(.rev)은 왼쪽으로 자라니 → 오른쪽 위 */
.slot .fN{position:absolute;z-index:30;left:calc(50% - var(--cw) / 2 - 8px);top:calc(50% - var(--ch) / 2 - 10px);pointer-events:none;
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--gold);color:#1B1712;border:1.5px solid #1B1712;
  font:13px/19px 'Black Han Sans',sans-serif;font-style:normal;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.45)}
.slot.rev .fN{left:auto;right:calc(50% - var(--cw) / 2 - 8px)}
/* 정산서(명부 정산서 .doc)는 미끄러져 올라오지 않고 제자리에서 나타난다(10-24 Macho 「판 깰 때 깜빡이는 거」) — 긴 종이를 움직이며 다시 그리느라
   줄이 하나씩 나타나는 동안 종이 가운데가 0.7초 비어 뒤 판이 비쳤다(녹화 실측 96.5~97.2초) */
.panel.doc{animation:docIn .22s ease-out}
@keyframes docIn{from{opacity:0}}
/* 바닥 돋보기(10-25) — 겹친 묶음을 크게 나란히 */
#flZoom{position:absolute;inset:0;z-index:78;display:grid;place-items:center;padding:16px;background:rgba(5,5,8,.62);animation:fade .15s}
#flZoom .fzBox{position:relative;max-width:100%;padding:16px 14px 14px;border-radius:16px;background:var(--paper);color:var(--paper-ink);box-shadow:0 10px 40px rgba(0,0,0,.6);text-align:center}
#flZoom .fzT{font:20px 'Black Han Sans',sans-serif;margin:0 40px 10px}
#flZoom .cards{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 12px}
#flZoom .cards .hc{width:86px;height:138px;border-radius:7px;background-size:cover;background-position:center;box-shadow:0 3px 10px rgba(0,0,0,.3)}
#flZoom .x{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;background:transparent;font-size:20px;color:inherit}
#flZoom .fzClose{width:100%;min-height:44px}
.slot .fN{pointer-events:none}
/* 작은 창(고·스톱, 10-25 FGT 「고 할까요? 화면이 내 패를 다 가려」) — 바닥판 위에 띄우고 뒤는 살짝만 어둡게: 아래 내 손패·먹은 패, 위 상대 먹은 패가 보인다 */
#sheet.mini{align-items:flex-start;background:rgba(5,5,8,.14)}
#sheet.mini .panel.mini{margin:var(--miniTop,120px) 10px 0;max-width:440px;padding:10px 12px 12px;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.55);animation:docIn .16s ease-out}
.panel.mini .gsRow{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 2px}
.panel.mini h3{margin:0;font-size:21px}
.panel.mini .gsSc{font:15px 'Black Han Sans',sans-serif;text-align:right;white-space:nowrap}
.panel.mini .gsSc b{font:34px/1 'Black Han Sans',sans-serif;color:var(--red2);margin-right:2px}
.panel.mini .gsSc small{display:block;font:13px 'Noto Sans KR',sans-serif;color:#7A7064}
.panel.mini .gsNote{margin:0 0 2px;text-align:center;font-size:13px}
.panel.mini .goPrev{margin:4px 0 8px}
.panel.mini .goPrev span{padding:5px 6px}
.panel.mini .goPrev b{font-size:17px}
.panel.mini .btns .btn{min-height:50px}
/* 1회용 부적(10-25 하수구) — 카드 그림 대신 누런 부적 바탕 */
#skills .sk[data-am]{background:linear-gradient(160deg,#F3D27A,#D9A63C);color:#3A1F0E}
#skills .sk[data-am] s{background:#A8231B;color:#fff}
/* 노잣돈 꾸미기(10-25) — 「승!」 연출 띠 · 판 위 명패 */
.cut.w-fire .swash{background:linear-gradient(90deg,#7A1508,#FF6A1A,#7A1508)}
.cut.w-petal .swash{background:linear-gradient(90deg,#B85C80,#F7A8C4,#B85C80)}
.cut.w-bolt .swash{background:linear-gradient(90deg,#0E2A5A,#3A8DFF,#0E2A5A);box-shadow:0 0 0 2px #CFEAFF,0 0 24px rgba(127,211,255,.7)}
.cut.w-goldleaf .swash{background:linear-gradient(90deg,#7A520E,#F5C542 35%,#FFF1C8 50%,#F5C542 65%,#7A520E);box-shadow:0 0 30px rgba(245,197,66,.8)}
.cut.w-fire .txt,.cut.w-bolt .txt{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.45)}
/* 2차(10-25) — 먹물 폭발 · 오방색 · 별빛 · 단청 · 황금 용. 빛 흐름은 띠(120px) 배경 위치만 0.9초 움직인다 */
.cut.w-inkburst .swash{background:radial-gradient(circle at 30% 50%,#D3271D 0 10%,transparent 11%),radial-gradient(circle at 72% 40%,#D3271D 0 7%,transparent 8%),#141317;box-shadow:0 0 0 2px #D3271D}
.cut.w-obang .swash{background:linear-gradient(90deg,#1F4E9C 0 20%,#C8102E 20% 40%,#F2C230 40% 60%,#FFFFFF 60% 80%,#141317 80%)}
.cut.w-star .swash{background:radial-gradient(circle at 18% 40%,#fff 0 1.2%,transparent 1.6%),radial-gradient(circle at 63% 28%,#fff 0 1%,transparent 1.4%),radial-gradient(circle at 84% 66%,#FFF6B0 0 1.3%,transparent 1.7%),linear-gradient(90deg,#0B1338,#2A3C8C 50%,#0B1338);box-shadow:0 0 22px rgba(127,168,255,.7)}
.cut.w-dancheong .swash{background:repeating-linear-gradient(90deg,#1E7B4F 0 18px,#C8102E 18px 30px,#F2C230 30px 36px,#1F4E9C 36px 54px);box-shadow:0 0 0 3px #F2C230}
.cut.w-dragon .swash{background:linear-gradient(90deg,#5A0E08,#E5483A 25%,#F5C542 45%,#FFF1C8 50%,#F5C542 55%,#E5483A 75%,#5A0E08);box-shadow:0 0 0 2px #FFF1C8,0 0 40px rgba(245,197,66,.9)}
.cut.w-goldleaf .swash,.cut.w-star .swash,.cut.w-dancheong .swash,.cut.w-dragon .swash{background-size:200% 100%;animation:swash .32s cubic-bezier(.2,.9,.2,1) both,swFlow .9s linear .2s both}
.cut.w-star .swash{background-size:100% 100%,100% 100%,100% 100%,200% 100%}
@keyframes swFlow{from{background-position:0 0}to{background-position:100% 0}}
.cut.w-inkburst .txt,.cut.w-obang .txt,.cut.w-star .txt,.cut.w-dancheong .txt,.cut.w-dragon .txt{color:#fff;-webkit-text-stroke:2px #141317;text-shadow:0 4px 0 #141317,0 0 24px rgba(0,0,0,.6)}
.cut.w-dragon .txt{color:#FFE9A8}
@media (prefers-reduced-motion:reduce){ .cut.w-goldleaf .swash,.cut.w-star .swash,.cut.w-dancheong .swash,.cut.w-dragon .swash{animation:swash .32s both} }
html[data-plate] #meBar .who{padding:2px 10px;border-radius:7px;font-size:15px}
html[data-plate="wood"] #meBar .who{background:linear-gradient(#A0703C,#7A4E24);color:#FFF4DE;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
html[data-plate="silver"] #meBar .who{background:linear-gradient(#F2F4F7,#A9AFB8);color:#2B2620;box-shadow:inset 0 0 0 1px #fff,0 1px 3px rgba(0,0,0,.4)}
html[data-plate="gold"] #meBar .who{background:linear-gradient(#FBE29A,#C9962C);color:#2B1A08;box-shadow:inset 0 0 0 1px #FFF1C8,0 0 10px rgba(245,197,66,.6)}
html[data-plate="jade"] #meBar .who{background:linear-gradient(#A6E3C8,#3E9A7A);color:#0E2E22;box-shadow:inset 0 0 0 1px #DFF7EC,0 0 10px rgba(100,200,160,.6)}
html[data-plate="bronze"] #meBar .who{background:linear-gradient(#C08A55,#7C5531 60%,#4F8A78);color:#FFF1DC;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
html[data-plate="ebony"] #meBar .who{background:linear-gradient(#3A302A,#141110);color:#F5C542;box-shadow:inset 0 0 0 1px #8C6A2A,0 1px 3px rgba(0,0,0,.5)}
html[data-plate="ruby"] #meBar .who{background:linear-gradient(#F58A8A,#A8121E);color:#FFF1F1;box-shadow:inset 0 0 0 1px #FFC9C9,0 0 10px rgba(229,72,58,.6)}
html[data-plate="rainbow"] #meBar .who{background:linear-gradient(90deg,#FF7A7A,#FFC85A,#FFF07A,#7AE08C,#6FB8FF,#B48CFF);color:#1A1420;box-shadow:inset 0 0 0 1px #fff,0 0 12px rgba(255,255,255,.55)}
/* 손패 빛(10-25 2차) — 고정 그림자만(움직이는 그림자는 판을 통째로 다시 칠한다, 10-14 실측). 짝 기운(::before)은 빛깔만 바꾼다 */
html[data-hand="gold"]{--hgA:#F5C542;--hgB:rgba(255,205,100,.55)}
html[data-hand="jade"]{--hgA:#5FD3A8;--hgB:rgba(95,211,168,.55)}
html[data-hand="fire"]{--hgA:#FF6A1A;--hgB:rgba(255,106,26,.55)}
html[data-hand="moon"]{--hgA:#DCE6FF;--hgB:rgba(200,215,255,.6)}
html[data-hand] #hand .hc{box-shadow:0 0 0 1.5px var(--hgA),0 0 7px var(--hgB)}
html[data-hand] #hand .hc.match{box-shadow:0 0 0 2.5px var(--hgA),0 6px 14px rgba(0,0,0,.5)}
html[data-hand] #hand .hc.match::before{box-shadow:0 0 0 2.5px var(--hgA),0 0 20px 6px var(--hgB),0 10px 16px rgba(0,0,0,.45)}
html[data-hand] #hand .hc.pick{box-shadow:0 0 0 3px #fff,0 0 20px var(--hgA)}
html[data-hand].noHint #hand .hc.match{box-shadow:0 0 0 1.5px var(--hgA),0 0 7px var(--hgB)}
html[data-hand="rainbow"] #hand .hc:nth-child(6n+1){--hgA:#FF6B6B;--hgB:rgba(255,107,107,.55)}
html[data-hand="rainbow"] #hand .hc:nth-child(6n+2){--hgA:#FFB547;--hgB:rgba(255,181,71,.55)}
html[data-hand="rainbow"] #hand .hc:nth-child(6n+3){--hgA:#FFE45C;--hgB:rgba(255,228,92,.55)}
html[data-hand="rainbow"] #hand .hc:nth-child(6n+4){--hgA:#6EDB8A;--hgB:rgba(110,219,138,.55)}
html[data-hand="rainbow"] #hand .hc:nth-child(6n+5){--hgA:#62B4FF;--hgB:rgba(98,180,255,.55)}
html[data-hand="rainbow"] #hand .hc:nth-child(6n){--hgA:#B98BFF;--hgB:rgba(185,139,255,.55)}