/* 고스톱 «3D 판» — 판이 열리면(body.gsPlaying) 화면 전체를 쓰는 라운지 화면으로 바뀐다.
   · 원근(perspective)으로 기울인 초록 담요 판, 두께·그림자가 있는 화투, 부채꼴 손패, 던지는 애니메이션(gostop3d.js), 뻑!·따닥! 도장
   · 게임 로직·DOM 은 그대로 (gostop.js 가 그리는 #opps #field #hand #myTaken 을 꾸미기만 한다)
   · 위에는 배너 띠(gamebanner.js)가 지나간다. 휴대폰에서는 판을 덜 기울이고 카드를 손가락 크기로 키운다. */

/* ── 판이 열리면: 나머지는 숨기고 #table 이 화면 전체 ── */
body.gsPlaying{overflow:hidden}
body.gsPlaying #topbar,body.gsPlaying #head,body.gsPlaying #lobby,body.gsPlaying #waiting,body.gsPlaying #secHero,body.gsPlaying footer{display:none!important}
body.gsPlaying main.wrap{max-width:none;padding:0;margin:0}
body.gsPlaying #table{position:fixed;inset:0;z-index:20;overflow:auto;-webkit-overflow-scrolling:touch;border:0;border-radius:0;
  padding:58px 14px 24px;background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255,42,60,.20), transparent 60%),
    radial-gradient(ellipse 70% 45% at 15% 10%, rgba(255,176,32,.10), transparent 60%),
    radial-gradient(ellipse 70% 45% at 85% 12%, rgba(255,176,32,.08), transparent 60%),
    radial-gradient(ellipse 100% 70% at 50% 40%, #1A0E14 0%, #0E080C 55%, #07060A 100%)}
body.gsPlaying :is(#table,#pvZoom) > *{position:relative;z-index:1}
body.gsPlaying #ask{position:fixed;z-index:60} body.gsPlaying #askBack{position:fixed;z-index:59}   /* 고/스톱 창은 어디에 있어도 떠 있는 창 */
body.gsPlaying #table::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.012) 0 2px, transparent 2px 9px)}
body:not(.gsPlaying) #gbStrip{display:none!important}           /* 배너 띠는 판이 도는 동안만 */
/* 배너 띠는 «상단바보다 위» 여야 한다 — 상단바가 z-index 40 이라 30 이면 통째로 가려진다.
   (2026-09-07: 이것 때문에 판이 도는 동안에도 배너가 안 보였다.)
   45 는 상단바(40)보다 위, 고/스톱 창(59·60)과 알림(95)보다는 아래다. */
body.gsPlaying #gbStrip{z-index:45}
/* 띠가 상단바를 덮지 않도록 상단바를 띠 높이만큼 내리고, 판 안쪽 여백도 그만큼 넓힌다 */
body.gsPlaying.gb-on #topbar{position:fixed;left:0;right:0;top:44px}
body.gsPlaying.gb-on #table{padding-top:102px}
@media (max-width:760px){
  body.gsPlaying.gb-on #topbar{top:34px}
  body.gsPlaying.gb-on #table{padding-top:92px}
}                              /* 판(z 20) 위로 */
body.gsPlaying .cfab,body.gsPlaying .adsSec,body.gsPlaying #secAdsAll,body.gsPlaying #profMenu,body.gsPlaying #sfxFab{display:none!important}
body.gsPlaying #toast{z-index:95}
body.gb-on:not(.gsPlaying) #langSwitch{top:10px!important}
body.gsPlaying #langSwitch{display:none!important}                /* 판 위 언어 단추는 판을 가린다 */
body.gsPlaying #gsChatBox{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:26;width:min(300px,88vw);max-height:42vh;overflow:auto;
  margin:0;background:rgba(12,10,16,.94);border:1px solid rgba(216,179,106,.35);box-shadow:0 14px 34px rgba(0,0,0,.6)}
body.gsPlaying #gsChatBox.min{max-height:none}
/* 가운데 열 — PC 에서 너무 넓어지지 않게 */
body.gsPlaying #tableTitle,body.gsPlaying .gsOpts,body.gsPlaying :is(#table,#pvZoom) > .sc,body.gsPlaying #opps,body.gsPlaying .gsStage,body.gsPlaying .lane,body.gsPlaying #over,body.gsPlaying #rcHost,body.gsPlaying :is(#table,#pvZoom) > .card,body.gsPlaying #gsWatchBar{
  width:100%;max-width:1040px;margin-left:auto;margin-right:auto}
body.gsPlaying #tableTitle{font-family:var(--f-disp);font-size:15px;color:#F3DFA6;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.6);margin:0 auto 6px;display:flex;align-items:center;gap:10px}
body.gsPlaying #tableTitle::before{content:'♣';color:#E0273A;font-size:15px}
body.gsPlaying .gsOpts{background:rgba(12,10,16,.7);border:1px solid rgba(216,179,106,.22);border-radius:12px;padding:6px 10px;font-size:12px;color:#C9BCA2;gap:10px;flex-wrap:wrap}
body.gsPlaying .gsOpts select{background:rgba(0,0,0,.35);color:#F2E8D2;border:1px solid rgba(216,179,106,.3);border-radius:8px;padding:3px 6px}
body.gsPlaying :is(#table,#pvZoom) > .sc{background:rgba(12,10,16,.7);border:1px solid rgba(216,179,106,.22);border-radius:12px;padding:8px 12px;color:#C9BCA2}
body.gsPlaying :is(#table,#pvZoom) > .sc b{color:#F3DFA6}
body.gsPlaying #gsWatchBar{background:rgba(12,10,16,.8);border:1px solid rgba(216,179,106,.3);color:#F2E8D2}

/* ── 상대 자리: 명패 ── */
body.gsPlaying #opps{display:flex;gap:10px;flex-wrap:wrap;margin:8px auto 10px}
body.gsPlaying .opp{flex:1 1 220px;background:linear-gradient(180deg,rgba(28,22,30,.92),rgba(14,11,16,.92));border:1px solid rgba(216,179,106,.28);border-radius:14px;padding:9px 12px;color:#F2E8D2;box-shadow:0 8px 22px rgba(0,0,0,.45);position:relative;overflow:hidden}
body.gsPlaying .opp::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:rgba(216,179,106,.35)}
body.gsPlaying .opp.turn{border-color:#F3DFA6;box-shadow:0 0 0 2px rgba(243,223,166,.35),0 0 26px rgba(255,176,32,.35),0 8px 22px rgba(0,0,0,.45)}
body.gsPlaying .opp.turn::before{background:linear-gradient(180deg,#FFD98A,#E0273A);animation:gsPulse 1.4s ease-in-out infinite}
@keyframes gsPulse{0%,100%{opacity:1}50%{opacity:.45}}
body.gsPlaying .opp .oh b{color:#F3DFA6;font-family:var(--f-disp)}
body.gsPlaying .opp .mn{color:#FFB020;font-family:var(--f-mono,monospace)}
body.gsPlaying .opp .tag{background:rgba(224,39,58,.18);border:1px solid rgba(224,39,58,.45);color:#FFB3BA}
body.gsPlaying .opp .tag.go{background:rgba(255,176,32,.16);border-color:rgba(255,176,32,.5);color:#FFD98A}

/* ── 바닥: 원근으로 기울인 담요 판 ── */
body.gsPlaying .gsStage{perspective:1100px;perspective-origin:50% -20%;margin:6px auto 12px}
body.gsPlaying #board{position:relative;transform:rotateX(14deg);transform-origin:50% 100%;transform-style:preserve-3d;
  min-height:190px;padding:18px 18px 22px;border-radius:26px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,255,255,.06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg,#1E6B45 0%,#155235 60%,#0F3E29 100%);
  border:10px solid #2A1712;
  box-shadow:0 0 0 2px rgba(216,179,106,.55), 0 0 0 5px #1A0E0B, 0 0 0 6px rgba(216,179,106,.25), 0 30px 50px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.35)}
body.gsPlaying #board::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,214,138,.10), transparent 70%)}
body.gsPlaying #board h3{color:rgba(255,255,255,.55)!important;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
body.gsPlaying #field{gap:10px 8px;align-items:flex-start;min-height:80px;transform-style:preserve-3d}
body.gsPlaying #field .hw{transform:translateZ(6px) rotate(var(--rot,0deg));
  box-shadow:0 1px 0 rgba(0,0,0,.35),0 2px 0 #b9b0a0,0 3px 0 #a79e8f,0 4px 0 #958c7e,0 14px 18px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
body.gsPlaying #field .hw:hover{transform:translateZ(18px) rotate(var(--rot,0deg)) scale(1.06);box-shadow:0 4px 0 #a79e8f,0 26px 30px rgba(0,0,0,.6)}
body.gsPlaying #field.peek{outline:2px solid #FFB020;outline-offset:6px}
/* 더미(뒤집는 패) — 판 오른쫙 위에 카드 뒷면 더미 */
body.gsPlaying #gsDeck{position:absolute;right:16px;top:14px;width:46px;height:69px;border-radius:7px;pointer-events:none;transform:translateZ(8px) rotate(-6deg);
  background:#1B1D33 url('/hwatu/back.svg') center/cover no-repeat;border:1px solid rgba(255,255,255,.25);
  box-shadow:0 1px 0 #2B2E4A,0 2px 0 #23253c,0 3px 0 #1c1e31,0 4px 0 #16182a,0 5px 0 #111226,0 12px 16px rgba(0,0,0,.55)}
body.gsPlaying #gsDeck b{position:absolute;right:-6px;bottom:-8px;background:#F3DFA6;color:#1A1206;font:800 11px/1 var(--f-disp);padding:3px 6px;border-radius:99px;box-shadow:0 2px 6px rgba(0,0,0,.4)}

/* ── 내가 먹은 것 ── */
body.gsPlaying .lane.mine{background:rgba(12,10,16,.55);border:1px solid rgba(216,179,106,.18);border-radius:14px;padding:8px 12px}
body.gsPlaying .lane.mine h3{color:#C9BCA2;margin-bottom:6px}
body.gsPlaying #myTaken{gap:4px}
body.gsPlaying #myTaken .hw{box-shadow:0 1px 0 #b9b0a0,0 2px 0 #a79e8f,0 8px 10px rgba(0,0,0,.45)}

/* ── 손패: 부채꼴 ── */
body.gsPlaying .lane:not(.mine){background:transparent;border:0;padding:0}
body.gsPlaying #handHead{text-align:center;color:#C9BCA2;font-size:12.5px;margin-bottom:4px}
body.gsPlaying #hand{justify-content:center;align-items:flex-end;flex-wrap:nowrap;gap:0;padding:22px 6px 10px;min-height:96px;perspective:800px}
body.gsPlaying #hand .hw{--rot:0deg;--ty:0px;--lift:0px;--sc:1;--mx:-3px;margin:0 var(--mx);flex:0 0 auto;transform-origin:50% 130%;
  transform:rotate(var(--rot)) translateY(var(--ty)) translateY(var(--lift)) scale(var(--sc));
  box-shadow:0 1px 0 rgba(0,0,0,.3),0 2px 0 #b9b0a0,0 3px 0 #a79e8f,0 12px 16px rgba(0,0,0,.5);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,filter .18s}
body.gsPlaying #hand .hw.pick{cursor:pointer}
body.gsPlaying #hand .hw.pick:hover{--lift:-18px;--sc:1.08;box-shadow:0 3px 0 #a79e8f,0 22px 26px rgba(0,0,0,.6);z-index:3}
body.gsPlaying #hand .hw.on{--lift:-26px;--sc:1.12;outline:0;box-shadow:0 0 0 3px #F3DFA6,0 0 26px rgba(255,214,138,.6),0 22px 26px rgba(0,0,0,.6);z-index:4}
body.gsPlaying #hand .hw:not(.pick){filter:saturate(.85)}
body.gsPlaying .lane .btn{background:rgba(255,255,255,.06);border:1px solid rgba(216,179,106,.4);color:#F2E8D2}
body.gsPlaying #gsBomb,body.gsPlaying #gsShake{background:linear-gradient(180deg,#B8202F,#7A1020);border-color:rgba(255,120,130,.4);color:#fff}

/* ── 판 끝 · 기록 ── */
body.gsPlaying #over{background:rgba(12,10,16,.9);border:1px solid rgba(216,179,106,.4);color:#F2E8D2}
body.gsPlaying #over h3{color:#F3DFA6}
body.gsPlaying :is(#table,#pvZoom) > .card{background:rgba(12,10,16,.6);border:1px solid rgba(216,179,106,.18);color:#C9BCA2}
body.gsPlaying :is(#table,#pvZoom) > .card h2{color:#F3DFA6;font-size:14px}

/* ── 날아가는 화투(잔상) · 도장 · 튀는 조각 ── */
.hwGhost{position:fixed;z-index:80;pointer-events:none;border-radius:8px;overflow:hidden;background:#F6EEDD;border:1px solid rgba(0,0,0,.4);
  box-shadow:0 2px 0 #b9b0a0,0 3px 0 #a79e8f,0 18px 26px rgba(0,0,0,.6);will-change:transform,opacity}
.hwGhost img{width:100%;height:100%;display:block;object-fit:cover}
#gsFx{position:fixed;inset:0;z-index:85;pointer-events:none;overflow:hidden}
.gsStamp{position:absolute;left:50%;top:38%;line-height:1.05;text-align:center;transform:translate(-50%,-50%) rotate(-8deg) scale(.4);opacity:0;
  font-family:var(--f-disp,'Pretendard',sans-serif);font-weight:900;font-size:clamp(44px,9vw,96px);letter-spacing:-.02em;
  color:#FFD98A;paint-order:stroke fill;-webkit-text-stroke:6px #7A1020;text-shadow:0 0 30px rgba(255,176,32,.8),0 8px 0 #5A0B18,0 14px 30px rgba(0,0,0,.7);
  animation:gsStamp 1.1s cubic-bezier(.2,.9,.2,1) forwards;white-space:nowrap}
.gsStamp.bad{color:#9FB4D8;-webkit-text-stroke:6px #1B2030;text-shadow:0 0 30px rgba(92,200,255,.5),0 8px 0 #10151f,0 14px 30px rgba(0,0,0,.7)}
.gsStamp.big{font-size:clamp(56px,12vw,130px)}
.gsStamp small{display:block;font-size:.3em;line-height:1.2;letter-spacing:.1em;color:#F2E8D2;-webkit-text-stroke:0;text-shadow:0 2px 8px rgba(0,0,0,.8);margin-top:4px}
@keyframes gsStamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.4)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.15)}30%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}75%{opacity:1;transform:translate(-50%,-52%) rotate(-8deg) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) rotate(-8deg) scale(1.05)}}
.gsBit{position:absolute;width:10px;height:10px;border-radius:2px;will-change:transform,opacity}
.gsFlash{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(255,214,138,.35),transparent 70%);animation:gsFlash .6s ease-out forwards}
@keyframes gsFlash{from{opacity:1}to{opacity:0}}
.gsShakeScreen{animation:gsShakeScreen .45s ease-in-out}
@keyframes gsShakeScreen{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(4px,-2px)}}
@media (prefers-reduced-motion:reduce){.gsStamp,.gsBit,.gsFlash,.hwGhost{animation:none!important;display:none!important}}

/* ── 휴대폰 ── */
@media (max-width:640px){
  body.gsPlaying #table{padding:52px 8px 90px}
  body.gsPlaying #tableTitle{font-size:13.5px}
  body.gsPlaying .gsOpts{font-size:11.5px;gap:8px;padding:5px 8px}
  body.gsPlaying .gsOpts label:nth-child(2){display:none}      /* 「큰 화투패」 는 휴대폰에서 이미 크게 그린다 */
  body.gsPlaying #tableTitle{display:none}                       /* 제목은 로비에서 이미 봤다 — 판을 넓게 */
  body.gsPlaying :is(#table,#pvZoom) > .sc{padding:6px 10px;font-size:12.5px;margin-bottom:6px!important}
  body.gsPlaying #opps{gap:5px;margin:0 0 6px}
  body.gsPlaying .opp{flex:1 1 100%;padding:5px 9px 5px 11px;font-size:12px}
  body.gsPlaying .opp .oh{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:12px}
  body.gsPlaying .opp .oh > .muted{flex:0 1 auto;font-size:11px!important}
  body.gsPlaying .opp .row{margin-top:4px}
  body.gsPlaying #board{transform:rotateX(10deg);padding:14px 10px 16px;border-width:7px;border-radius:20px;min-height:150px}
  body.gsPlaying #field{gap:8px 6px}
  body.gsPlaying #field .hw{width:50px;height:75px}
  body.gsPlaying #gsDeck{width:36px;height:54px;right:10px;top:8px}
  body.gsPlaying #hand .hw{width:58px;height:87px}
  body.gsPlaying .lane .btn{min-height:44px}
  body.gsPlaying #gsChatBox{left:0;right:0;bottom:0;width:100%;max-height:34vh;border-radius:16px 16px 0 0;border-bottom:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  body.gsPlaying #gsChatBox h2{font-size:13px;margin-bottom:4px}
  body.gsPlaying #gsChatList{max-height:16vh}
  body.gsPlaying.gsChat #table{padding-bottom:calc(200px + env(safe-area-inset-bottom))}   /* 방 채팅이 떠 있으면 그만큼 아래를 비운다 */
  body.gsPlaying #hand{padding:18px 8px 14px;overflow:visible}
}
@media (max-width:400px){
  body.gsPlaying #hand .hw{width:52px;height:78px}
  body.gsPlaying #field .hw{width:44px;height:66px}
}
/* 가로로 눕힌 휴대폰 — 판을 덜 기울이고 위아래 여백을 줄인다 */
@media (max-height:520px) and (orientation:landscape){
  body.gsPlaying #table{padding:50px 10px 12px}
  body.gsPlaying #board{transform:rotateX(8deg);min-height:120px;padding:10px}
  body.gsPlaying #hand{padding:10px 0 4px;min-height:70px}
  body.gsPlaying #hand .hw{width:48px;height:72px}
}
/* 「빠름」 을 골라도 도장·번쩍은 눈에 보일 만큼은 남긴다 (html.gsFast * 가 모든 애니메이션을 .01s 로 줄인다) */
html.gsFast .gsStamp{animation-duration:.8s!important} html.gsFast .gsFlash{animation-duration:.4s!important} html.gsFast .gsShakeScreen{animation-duration:.3s!important} html.gsFast .opp.turn::before{animation-duration:1.4s!important}