/* ===== 각개전투 3D — 비스듬히 내려다보는 테이블 위의 진짜 카드 =====
   WebGL 없이 CSS 3D 변환만 씁니다. 카드마다 앞뒷면과 두께, 그림자를 따로 그립니다. */

.bgx-dogwar3d { --felt: #16341f; --felt2: #0e2416; }
.bgx-dogwar3d::before { opacity: .5; }

.d3 { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* 테이블 — 여기에만 원근을 겁니다. 값이 작을수록 더 가파르게 보입니다. */
.d3-scene {
  flex: 1; min-height: 0; position: relative;
  perspective: 900px;
  perspective-origin: 50% 42%;
  overflow: hidden;
}
.d3-felt {
  position: absolute; left: -30%; right: -30%; top: -20%; bottom: -60%;
  transform: rotateX(44deg);
  transform-origin: 50% 40%;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(255,255,255,.11), transparent 70%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, #1d472c, #10291a 60%, #0b1d12);
  box-shadow: inset 0 0 120px rgba(0,0,0,.55);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 42%, #000 55%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 42%, #000 55%, transparent 100%);
}
/* 테이블 위에 드리운 조명 */
.d3-lamp {
  position: absolute; left: 50%; top: -14%; width: 72%; height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,236,190,.16), transparent 70%);
  pointer-events: none;
}

/* ---------- 카드 ---------- */
.d3-card {
  position: absolute; width: 72px; height: 100px;
  transform-style: preserve-3d;
  transition: transform .34s cubic-bezier(.22,.9,.3,1), filter .2s;
  will-change: transform;
}
.d3-card .f, .d3-card .b {
  position: absolute; inset: 0; border-radius: 8px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
/* 앞면 */
.d3-card .f {
  background: linear-gradient(168deg, #fffdf5 0%, #f6ecd6 55%, #e8d9bb 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), inset 0 0 0 2.5px rgba(120,96,60,.22);
  color: #2b1d12;
}
/* 뒷면 — 발바닥 무늬 */
.d3-card .b {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.14) 0 22%, transparent 23%),
    repeating-linear-gradient(45deg, rgba(0,0,0,.14) 0 6px, transparent 6px 12px),
    linear-gradient(150deg, #8a5330, #5b3119 70%, #43220f);
  box-shadow: inset 0 0 0 2.5px rgba(240,192,74,.4), inset 0 0 22px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.d3-card .b::after { content: '🐾'; opacity: .75; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

/* 두께 — 앞면 뒤에 살짝 밀어 놓은 판을 겹쳐 옆면처럼 보이게 합니다. */
.d3-card .e {
  position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(180deg, #d8c9a8, #a89066);
  transform: translateZ(-2.2px);
}
/* 윤기 — 각도에 따라 흐르는 빛 */
.d3-card .g {
  position: absolute; inset: 0; border-radius: 8px; pointer-events: none;
  background: linear-gradient(118deg, transparent 32%, rgba(255,255,255,.42) 46%, transparent 60%);
  opacity: .55; mix-blend-mode: screen;
}
/* 바닥 그림자 */
.d3-card .s {
  position: absolute; left: 6%; right: 6%; top: 16%; bottom: -10%;
  border-radius: 50%; background: rgba(0,0,0,.42); filter: blur(7px);
  transform: translateZ(-14px); pointer-events: none;
}

/* 카드 안의 그림 */
.d3-card .f svg { position: absolute; left: 2%; bottom: 11px; width: 96%; height: 60%; }
.d3-card .f .rk {
  position: absolute; top: 3px; left: 6px; font-size: 17px; font-weight: 900; line-height: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.d3-card .f .rk2 {
  position: absolute; bottom: 3px; right: 6px; font-size: 13px; font-weight: 900;
  line-height: 1; opacity: .5; transform: rotate(180deg);
}
.d3-card .f .bd {
  position: absolute; bottom: 2px; left: 0; right: 0; text-align: center;
  font-size: 8.5px; font-weight: 800; opacity: .7; letter-spacing: -.3px; white-space: nowrap;
}
.d3-card.sp .f { background: linear-gradient(168deg, #fff3cf, #f0c877); }
.d3-card.sp.feed .f { background: linear-gradient(168deg, #d6edff, #90c2ef); }

/* 고를 수 있는 카드 / 고른 카드 */
.d3-card.able { cursor: pointer; }
.d3-card.dim { filter: saturate(.45) brightness(.72); }
.d3-card.sel .g { opacity: 1; }
.d3-card.sel .f { box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), inset 0 0 0 3px var(--gold); }

/* 바닥에 놓인 카드는 테이블과 같은 각도로 눕습니다. */
.d3-field { position: absolute; left: 50%; top: var(--fieldY, 38%); transform: translate(-50%,-50%); transform-style: preserve-3d; }
.d3-field .d3-card { transition: transform .4s cubic-bezier(.22,.9,.3,1), opacity .3s; }

/* 상대 자리 */
.d3-seats {
  position: absolute; left: 0; right: 0; top: 4px; display: flex; gap: 7px;
  justify-content: center; flex-wrap: wrap; padding: 0 10px; z-index: 5;
}
.d3-seat {
  display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  font-size: 12px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(4px); transition: background .2s, border-color .2s, transform .2s;
}
.d3-seat.on { background: rgba(240,192,74,.22); border-color: var(--gold); transform: translateY(2px) scale(1.04); }
.d3-seat.out { opacity: .45; }
.d3-seat b { font-weight: 800; }
.d3-seat .cnt { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.35); }
.d3-seat .pass { color: #ffb4a8; font-size: 11px; }
/* 상대 손패를 뒷면으로 겹쳐 보여 줍니다 */
.d3-oppo { position: absolute; left: 0; right: 0; top: 30px; height: 46px; z-index: 4; pointer-events: none; }
.d3-oppo .mini {
  position: absolute; width: 20px; height: 28px; border-radius: 3px;
  background: linear-gradient(150deg, #8a5330, #4a2a16);
  box-shadow: inset 0 0 0 1px rgba(240,192,74,.35), 0 2px 3px rgba(0,0,0,.4);
}

/* ---------- 내 손패: 부채꼴 ---------- */
.d3-hand {
  position: relative; flex: 0 0 auto; height: 134px;
  perspective: 820px; perspective-origin: 50% 120%;
}
.d3-hand .d3-card { bottom: 18px; left: 50%; transform-origin: 50% 100%; }
/* 손패 폭을 재는 동안에는 카드를 멈춰 둡니다(움직이는 중에 재면 값이 어긋납니다) */
.d3-hand.fitting .d3-card { transition: none !important; }
.d3-hand .d3-card.able:hover { filter: brightness(1.1); }

.d3-acts { flex: 0 0 auto; display: flex; gap: 7px; padding: 0 10px 10px; }
.d3-acts button {
  flex: 1; padding: 11px; border-radius: 13px; font-size: 15px; font-weight: 800;
  background: linear-gradient(180deg, #ffd96b, #e8a92c); color: #3a2503;
  box-shadow: 0 5px 0 #a9761a, 0 8px 14px rgba(0,0,0,.3);
  transition: transform .1s, box-shadow .1s, opacity .2s;
}
.d3-acts button.alt { background: linear-gradient(180deg, #d7a8f0, #9f5fc8); box-shadow: 0 5px 0 #6d3b8c, 0 8px 14px rgba(0,0,0,.3); color: #fff; }
.d3-acts button:active { transform: translateY(4px); box-shadow: none; }
.d3-acts button:disabled { opacity: .32; box-shadow: none; transform: none; cursor: default; }

/* 필드 설명 */
.d3-fieldtag {
  position: absolute; left: 50%; top: calc(var(--fieldY, 38%) + 62px); transform: translateX(-50%);
  font-size: 12px; font-weight: 800; color: var(--gold); z-index: 6;
  padding: 3px 11px; border-radius: 999px; background: rgba(0,0,0,.45);
  white-space: nowrap;
}
.d3-empty {
  position: absolute; left: 50%; top: var(--fieldY, 38%); transform: translate(-50%,-50%);
  font-size: 12.5px; opacity: .5; white-space: nowrap; z-index: 3;
}

/* 나눠 주는 중 덱 */
.d3-deck { position: absolute; left: 50%; top: 32%; transform: translate(-50%,-50%); transform-style: preserve-3d; z-index: 8; }
.d3-deck .d3-card { position: absolute; left: -36px; top: -50px; }
.d3-deck .cap {
  position: absolute; left: 50%; top: 86px; transform: translateX(-50%);
  font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--cream);
}

/* 날아가는 카드 */
.d3-fly { position: fixed; z-index: 9999; pointer-events: none; transform-style: preserve-3d; will-change: transform; }

@media (max-height: 430px) {
  .d3-card { width: 58px; height: 81px; }
  .d3-hand { height: 100px; }
  .d3-card .f .rk { font-size: 14px; }
  .d3-card .f .bd { font-size: 7px; }
  .d3-acts button { padding: 9px; font-size: 14px; }
}
@media (max-width: 420px) {
  .d3-card { width: 58px; height: 81px; }
  .d3-hand { height: 104px; }
}

/* 가로로 들면 높이가 390px 안팎이라 테이블 칸이 좁습니다. 위아래를 다시 배치합니다. */
@media (max-height: 430px) {
  .d3-scene { --fieldY: 52%; }
  .d3-oppo { top: 26px; height: 34px; }
  .d3-oppo .mini { width: 15px; height: 21px; }
  .d3-seat { padding: 3px 8px; font-size: 11px; }
  .d3-fieldtag { font-size: 11px; padding: 2px 9px; top: calc(var(--fieldY) + 50px); }
}

/* ===== 고기구이 3D — 테이블 위를 구르는 정육면체 주사위 ===== */
.bgx-grill3d { --felt: #2a1a10; --felt2: #180d07; }
.g3 { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.g3-scene {
  flex: 1; min-height: 0; position: relative;
  perspective: 1000px; perspective-origin: 50% 38%; overflow: hidden;
}
/* 불판 느낌의 바닥 */
.g3-felt {
  position: absolute; left: -30%; right: -30%; top: -22%; bottom: -55%;
  transform: rotateX(48deg); transform-origin: 50% 38%;
  background:
    radial-gradient(55% 40% at 50% 34%, rgba(255,190,110,.16), transparent 72%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.26) 0 3px, transparent 3px 16px),
    linear-gradient(180deg, #4a3221, #2a1a10 58%, #170d07);
  box-shadow: inset 0 0 130px rgba(0,0,0,.6);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 40%, #000 52%, transparent 100%);
  mask-image: radial-gradient(72% 62% at 50% 40%, #000 52%, transparent 100%);
}
.g3-coals {
  position: absolute; left: 50%; top: 30%; width: 62%; height: 44%;
  transform: translateX(-50%) rotateX(48deg);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,120,40,.2), transparent 70%);
  pointer-events: none; animation: g3Glow 3.6s ease-in-out infinite;
}
@keyframes g3Glow { 50% { opacity: .5; } }

/* ---------- 정육면체 주사위 ---------- */
.g3-die { position: relative; width: 52px; height: 52px; perspective: 520px; flex: 0 0 auto; }
.g3-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.g3-cube .fc {
  position: absolute; width: 52px; height: 52px; border-radius: 9px;
  background: linear-gradient(150deg, #fffdf4 0%, #f3e9d2 60%, #e2d4b6 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset 0 0 14px rgba(150,120,70,.3),
              inset -6px -8px 14px rgba(120,95,55,.22);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.g3-cube .fc svg { width: 84%; height: 84%; }
.g3-cube .fc .bg-pips { fill: #2b1d12; }
.g3-cube .fc .bg-die-art { display: flex; align-items: center; justify-content: center; width: 86%; height: 86%; }
.g3-cube .fc .bg-die-art svg { width: 100%; height: auto; max-height: 100%; }
/* 여섯 면을 정육면체로 세웁니다 (한 변의 절반 = 26px) */
.g3-cube .fc.f-front  { transform: translateZ(26px); }
.g3-cube .fc.f-right  { transform: rotateY(90deg) translateZ(26px); }
.g3-cube .fc.f-back   { transform: rotateY(180deg) translateZ(26px); }
.g3-cube .fc.f-left   { transform: rotateY(-90deg) translateZ(26px); }
.g3-cube .fc.f-top    { transform: rotateX(90deg) translateZ(26px); }
.g3-cube .fc.f-bottom { transform: rotateX(-90deg) translateZ(26px); }

.g3-die .sh {
  position: absolute; left: 8%; right: 8%; bottom: -9px; height: 13px;
  border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(5px);
}
.g3-die.rolling { animation: g3Hop .42s ease-in-out infinite; }
@keyframes g3Hop { 50% { transform: translateY(-16px); } }
.g3-die.rolling .sh { animation: g3Sh .42s ease-in-out infinite; }
@keyframes g3Sh { 50% { transform: scale(.68); opacity: .45; } }
.g3-die.land { animation: g3Land .36s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes g3Land { 0% { transform: translateY(-22px); } 60% { transform: translateY(3px); } 100% { transform: none; } }
.g3-die.pick-able { cursor: pointer; }
.g3-die.pick-able .g3-cube, .g3-die.hot .g3-cube { transition: transform .26s cubic-bezier(.3,1.4,.5,1); }
.g3-die.pick-able:hover .g3-cube, .g3-die.hot .g3-cube { transform: translateY(-8px) scale(1.08); }
.g3-die.pick-able:hover .fc.f-front, .g3-die.hot .fc.f-front,
.g3-die.pick-able:hover .fc.f-top, .g3-die.hot .fc.f-top { box-shadow: inset 0 0 0 3px var(--gold); }
.g3-die.dead { opacity: .3; filter: grayscale(.85); }

.g3-die.small { width: 34px; height: 34px; }
.g3-die.small .fc { width: 34px; height: 34px; border-radius: 6px; }
.g3-die.small .fc.f-front  { transform: translateZ(17px); }
.g3-die.small .fc.f-right  { transform: rotateY(90deg) translateZ(17px); }
.g3-die.small .fc.f-back   { transform: rotateY(180deg) translateZ(17px); }
.g3-die.small .fc.f-left   { transform: rotateY(-90deg) translateZ(17px); }
.g3-die.small .fc.f-top    { transform: rotateX(90deg) translateZ(17px); }
.g3-die.small .fc.f-bottom { transform: rotateX(-90deg) translateZ(17px); }
.g3-die.small .sh { bottom: -6px; height: 9px; }

.g3-pit {
  position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%);
  display: flex; flex-wrap: wrap; gap: 17px; justify-content: center; align-items: center;
  width: min(88%, 620px); z-index: 6;
}
.g3-tray {
  position: absolute; left: 10px; bottom: 10px; display: flex; gap: 7px; flex-wrap: wrap;
  max-width: 52%; z-index: 7;
}
.g3-tray .hint { font-size: 11.5px; opacity: .45; align-self: flex-end; }
.g3-sum { position: absolute; right: 12px; bottom: 10px; z-index: 7; text-align: right; }
.g3-sum .big { font-size: 30px; font-weight: 900; color: var(--gold); line-height: 1; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.g3-sum .big.bump { animation: g3Bump .3s ease; }
@keyframes g3Bump { 50% { transform: scale(1.28); } }
.g3-sum .meat {
  display: inline-block; margin-top: 5px; font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.16);
}
.g3-sum .meat.yes { background: rgba(120,230,160,.2); border-color: rgba(120,230,160,.5); color: #bff3d0; }

/* ---------- 타일 ---------- */
.g3-rail {
  position: absolute; left: 0; right: 0; top: 6px; z-index: 5;
  display: flex; gap: 4px; justify-content: center; flex-wrap: wrap;
  padding: 0 8px; perspective: 900px;
}
.g3-tile {
  position: relative; width: 46px; flex: 0 0 auto;
  transform: rotateX(42deg); transform-style: preserve-3d;
  transition: transform .3s, opacity .3s;
}
.g3-tile .top {
  border-radius: 7px; padding: 3px 2px 4px; text-align: center;
  background: linear-gradient(165deg, #fbf0d6, #decba0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
  color: #2b1d12;
}
.g3-tile b { display: block; font-size: 14px; font-weight: 900; line-height: 1; }
.g3-tile .meats { display: flex; gap: 1px; justify-content: center; height: 18px; align-items: center; }
.g3-tile .meats svg { width: 15px; height: auto; }
.g3-tile .edge {
  position: absolute; left: 0; right: 0; bottom: -4px; height: 6px; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #b99f6f, #87703f);
}
.g3-tile .sh {
  position: absolute; left: 4%; right: 4%; bottom: -9px; height: 11px;
  border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(5px);
}
.g3-tile.down .top { background: linear-gradient(165deg, #5e4a30, #37291a); color: transparent; }
.g3-tile.down b, .g3-tile.down .meats { visibility: hidden; }
.g3-tile.down .top::after {
  content: "\01F525"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 15px; opacity: .5;
}
.g3-tile.hit { transform: rotateX(42deg) translateY(-8px) scale(1.08); }
.g3-tile.hit .top { box-shadow: 0 0 0 2.5px var(--gold); }
.g3-tile.gone { opacity: 0; transform: rotateX(42deg) scale(.4); }
.g3-tile.mini { width: 30px; }
.g3-tile.mini b { font-size: 10px; }
.g3-tile.mini .meats { height: 11px; }
.g3-tile.mini .meats svg { width: 9px; }
.g3-tile.mini .edge { height: 4px; bottom: -3px; }
.g3-tile.mini .sh { display: none; }

/* ---------- 자리 ---------- */
.g3-seats {
  flex: 0 0 auto; display: flex; gap: 7px; justify-content: center; flex-wrap: wrap;
  padding: 6px 9px 0;
}
.g3-seat {
  display: flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 13px;
  font-size: 12px; background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.12);
  transition: background .2s, border-color .2s, transform .2s;
}
.g3-seat.on { background: rgba(240,192,74,.2); border-color: var(--gold); transform: translateY(-2px); }
.g3-seat b { font-weight: 800; }
.g3-seat i { font-style: normal; color: var(--gold); font-size: 11px; }
.g3-seat .pile { display: flex; gap: 2px; perspective: 500px; align-items: flex-end; }
.g3-seat .more { font-size: 10px; opacity: .6; }

.g3-acts { flex: 0 0 auto; display: flex; gap: 7px; padding: 7px 10px 10px; }
.g3-acts button {
  flex: 1; padding: 11px; border-radius: 13px; font-size: 15px; font-weight: 800;
  background: linear-gradient(180deg, #ffd96b, #e8a92c); color: #3a2503;
  box-shadow: 0 5px 0 #a9761a, 0 8px 14px rgba(0,0,0,.35);
  transition: transform .1s, box-shadow .1s, opacity .2s;
}
.g3-acts button.alt { background: linear-gradient(180deg, #8fd7a8, #49a872); box-shadow: 0 5px 0 #2f7850, 0 8px 14px rgba(0,0,0,.35); color: #0e2d1c; }
.g3-acts button:active { transform: translateY(4px); box-shadow: none; }
.g3-acts button:disabled { opacity: .32; box-shadow: none; transform: none; cursor: default; }

@media (max-height: 430px) {
  .g3-die { width: 40px; height: 40px; }
  .g3-cube .fc { width: 40px; height: 40px; border-radius: 7px; }
  .g3-cube .fc.f-front  { transform: translateZ(20px); }
  .g3-cube .fc.f-right  { transform: rotateY(90deg) translateZ(20px); }
  .g3-cube .fc.f-back   { transform: rotateY(180deg) translateZ(20px); }
  .g3-cube .fc.f-left   { transform: rotateY(-90deg) translateZ(20px); }
  .g3-cube .fc.f-top    { transform: rotateX(90deg) translateZ(20px); }
  .g3-cube .fc.f-bottom { transform: rotateX(-90deg) translateZ(20px); }
  .g3-die.small { width: 27px; height: 27px; }
  .g3-die.small .fc { width: 27px; height: 27px; border-radius: 5px; }
  .g3-die.small .fc.f-front  { transform: translateZ(13.5px); }
  .g3-die.small .fc.f-right  { transform: rotateY(90deg) translateZ(13.5px); }
  .g3-die.small .fc.f-back   { transform: rotateY(180deg) translateZ(13.5px); }
  .g3-die.small .fc.f-left   { transform: rotateY(-90deg) translateZ(13.5px); }
  .g3-die.small .fc.f-top    { transform: rotateX(90deg) translateZ(13.5px); }
  .g3-die.small .fc.f-bottom { transform: rotateX(-90deg) translateZ(13.5px); }
  .g3-pit { gap: 8px; top: 56%; }
  .g3-tile { width: 38px; }
  .g3-tile b { font-size: 12px; }
  .g3-tile .meats { height: 13px; }
  .g3-tile .meats svg { width: 11px; }
  .g3-sum .big { font-size: 23px; }
  .g3-seat { padding: 3px 8px; font-size: 11px; }
  .g3-acts button { padding: 9px; font-size: 14px; }
}

/* ===== 12지신 포커 3D — 원형 테이블에 둘러앉아 거짓말하는 게임 ===== */
.bgx-roach3d { --felt: #1b2740; --felt2: #101829; }
.r3 { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.r3-scene {
  flex: 1; min-height: 0; position: relative;
  perspective: 1000px; perspective-origin: 50% 34%; overflow: hidden;
}
/* 둥근 테이블 */
.r3-table {
  position: absolute; left: 50%; top: 55%; width: min(120%, 780px); height: 150%;
  transform: translate(-50%,-50%) rotateX(58deg);
  transform-origin: 50% 40%;
  border-radius: 50%;
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(255,255,255,.12), transparent 70%),
    linear-gradient(180deg, #2c4164, #1b2740 60%, #121a2b);
  box-shadow: 0 0 0 10px #2a1c12, 0 0 0 13px #3d2a1a, 0 24px 44px rgba(0,0,0,.6),
              inset 0 0 90px rgba(0,0,0,.5);
}
.r3-table::after {
  content: ''; position: absolute; inset: 7%;
  border-radius: 50%; border: 1px dashed rgba(255,255,255,.12);
}

/* ---------- 상대 (얼굴 없는 사람 모양) ---------- */
.r3-seat {
  position: absolute; width: 86px; margin-left: -43px; text-align: center; z-index: 6;
  transition: transform .25s, filter .25s;
}
.r3-seat .body { position: relative; height: 62px; }
.r3-seat .head {
  position: absolute; left: 50%; top: 0; width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%;
  background: linear-gradient(165deg, #cfd8e6, #8c9ab0 60%, #68758c);
  box-shadow: inset -3px -4px 7px rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.45);
}
.r3-seat .torso {
  position: absolute; left: 50%; top: 21px; width: 46px; height: 40px; margin-left: -23px;
  border-radius: 24px 24px 12px 12px;
  background: linear-gradient(165deg, #b9c4d6, #7a8799 62%, #5a6678);
  box-shadow: inset -4px -5px 9px rgba(0,0,0,.26), 0 3px 7px rgba(0,0,0,.42);
}
.r3-seat .nm {
  margin-top: 2px; font-size: 11.5px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r3-seat .cnt { font-size: 10px; font-weight: 700; opacity: .6; line-height: 1.3; }
.r3-seat.on .head { background: linear-gradient(165deg, #ffe9a8, #e8b84a 60%, #b98a24); }
.r3-seat.on .torso { background: linear-gradient(165deg, #ffe3a0, #d8a93f 62%, #a87f26); }
.r3-seat.on { transform: translateY(-5px) scale(1.06); }
.r3-seat.able { cursor: pointer; }
.r3-seat.able:hover { transform: translateY(-4px) scale(1.05); filter: brightness(1.12); }
.r3-seat.able .torso { box-shadow: inset -4px -5px 9px rgba(0,0,0,.26), 0 0 0 2.5px var(--gold), 0 3px 7px rgba(0,0,0,.42); }
.r3-seat.out { opacity: .4; }
.r3-seat.lost .torso { background: linear-gradient(165deg, #e8a0a0, #b05a5a 62%, #8a3d3d); }

/* 앞에 쌓인 카드 — 종류별 개수 */
.r3-front {
  display: flex; gap: 2px; justify-content: center; flex-wrap: wrap;
  margin-top: 2px; min-height: 16px;
}
.r3-front .chip {
  display: flex; align-items: center; gap: 1px; font-size: 9.5px; font-weight: 800;
  padding: 1px 4px; border-radius: 5px; background: rgba(0,0,0,.42); line-height: 1.3;
}
.r3-front .chip svg { width: 13px; height: 15px; }
.r3-front .chip.warn { background: rgba(230,90,90,.55); box-shadow: 0 0 0 1px rgba(255,170,170,.6); }

/* ---------- 카드 ---------- */
.r3-card {
  position: absolute; width: 62px; height: 88px;
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.22,.9,.3,1), opacity .25s;
  will-change: transform;
}
.r3-card .f, .r3-card .b {
  position: absolute; inset: 0; border-radius: 8px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
}
.r3-card .f {
  background: linear-gradient(168deg, #fffdf6 0%, #f1e8d6 58%, #ded2ba 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), inset 0 0 0 2.5px rgba(90,80,60,.2);
  color: #23201c;
}
.r3-card .b {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.12) 0 20%, transparent 21%),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.16) 0 5px, transparent 5px 10px),
    linear-gradient(150deg, #3a5a8c, #22365a 70%, #16233a);
  box-shadow: inset 0 0 0 2.5px rgba(240,192,74,.38), inset 0 0 20px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.r3-card .b::after { content: '🀫'; opacity: .6; }
.r3-card .e {
  position: absolute; inset: 0; border-radius: 8px; transform: translateZ(-2.2px);
  background: linear-gradient(180deg, #d5c8ab, #a08c66);
  /* 뒤집힌 카드에서는 이 층이 앞으로 와 뒷면 무늬를 가려 버립니다 */
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.r3-card .s {
  position: absolute; left: 7%; right: 7%; top: 18%; bottom: -10%;
  border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(7px);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: translateZ(-14px); pointer-events: none;
}
.r3-card .f > svg { position: absolute; left: 4%; bottom: 12px; width: 92%; height: 62%; }
.r3-card .f .nm {
  position: absolute; bottom: 2px; left: 0; right: 0; text-align: center;
  font-size: 9.5px; font-weight: 800; opacity: .72;
}
.r3-card .f .cnr {
  position: absolute; top: 3px; left: 5px; font-size: 10px; font-weight: 900; opacity: .55;
}
.r3-card.able { cursor: pointer; }
.r3-card.dim { filter: saturate(.5) brightness(.76); }
.r3-card.sel .f { box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), inset 0 0 0 3px var(--gold); }

/* 내 손패 */
.r3-hand { position: relative; flex: 0 0 auto; height: 112px; perspective: 820px; perspective-origin: 50% 120%; }
.r3-hand .r3-card { bottom: calc(var(--cardW) * .2); left: 50%; transform-origin: 50% 100%; }
/* 손패 폭을 재는 동안에는 카드를 멈춰 둡니다(움직이는 중에 재면 값이 어긋납니다) */
.r3-hand.fitting .r3-card { transition: none !important; }
.r3-hand .r3-card.able:hover { filter: brightness(1.1); }

/* 테이블 위를 미끄러지는 카드 */
.r3-fly { position: absolute; z-index: 20; perspective: 800px; pointer-events: none; }
.r3-fly .r3-card { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- 가운데 외침 ---------- */
.r3-shout {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); z-index: 24;
  text-align: center; pointer-events: none;
}
.r3-shout b {
  display: block; font-size: clamp(30px, 8vw, 58px); font-weight: 1000; letter-spacing: -1px;
  color: #fff; text-shadow: 0 0 18px rgba(255,210,100,.75), 0 4px 0 #9a6a12, 0 8px 22px rgba(0,0,0,.6);
  animation: r3Shout .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes r3Shout { 0% { transform: scale(.3) rotate(-7deg); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: none; opacity: 1; } }
.r3-shout .who { margin-top: 2px; font-size: 13px; font-weight: 800; opacity: .85; }
.r3-shout.fade { animation: r3Fade .4s ease both; }
@keyframes r3Fade { to { opacity: 0; transform: translate(-50%,-50%) scale(1.15); } }

/* 뒤집혀 드러나는 카드 */
.r3-reveal {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); z-index: 23;
  text-align: center;
}
.r3-reveal .r3-card { position: relative; margin: 0 auto; }
.r3-reveal .verdict {
  margin-top: 8px; font-size: 15px; font-weight: 900; padding: 4px 13px; border-radius: 999px;
  display: inline-block; background: rgba(0,0,0,.55);
}
.r3-reveal .verdict.ok { background: rgba(90,200,130,.85); color: #0d2a18; }
.r3-reveal .verdict.no { background: rgba(230,100,100,.9); color: #2a0d0d; }

/* ---------- 오른쪽 선언 패널 ---------- */
.r3-side {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 22;
  width: 158px; max-height: 94%; overflow-y: auto;
  background: rgba(10,16,28,.97); border: 1px solid rgba(255,255,255,.2); border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  padding: 9px; backdrop-filter: blur(6px);
  animation: r3Side .25s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes r3Side { from { opacity: 0; transform: translate(14px,-50%); } }
.r3-side h4 { margin: 0 0 7px; font-size: 11.5px; opacity: .72; font-weight: 700; text-align: center; }
.r3-side .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.r3-side .opt {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px;
  border-radius: 9px; background: rgba(255,255,255,.08); font-size: 11px; font-weight: 700; line-height: 1.2;
  transition: background .15s, transform .15s;
}
.r3-side .opt svg { width: 26px; height: 30px; flex: 0 0 auto; }
.r3-side .opt:hover, .r3-side .opt:active { background: rgba(240,192,74,.34); transform: translateY(-2px); }
.r3-side .opt.lie { opacity: .92; }
.r3-side .r3-back { display: block; width: 100%; margin-top: 6px; padding: 6px; border-radius: 9px; font-size: 11.5px; background: rgba(255,255,255,.08); opacity: .85; }

/* ---------- 받았을 때 고르는 패널 ---------- */
.r3-ask {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 25;
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; width: min(96%, 560px);
}
.r3-ask button {
  flex: 1 1 auto; min-width: 104px; padding: 10px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 800;
  background: linear-gradient(180deg, #ffd96b, #e8a92c); color: #3a2503;
  box-shadow: 0 4px 0 #a9761a, 0 7px 13px rgba(0,0,0,.35);
  transition: transform .1s, box-shadow .1s, opacity .2s;
}
.r3-ask button.no { background: linear-gradient(180deg, #ff9f9f, #d85a5a); box-shadow: 0 4px 0 #9a3636, 0 7px 13px rgba(0,0,0,.35); color: #2e0b0b; }
.r3-ask button.alt { background: linear-gradient(180deg, #a8c6ff, #5f82c8); box-shadow: 0 4px 0 #3b558c, 0 7px 13px rgba(0,0,0,.35); color: #fff; }
.r3-ask button:active { transform: translateY(3px); box-shadow: none; }
.r3-ask button:disabled { opacity: .35; box-shadow: none; transform: none; cursor: default; }

/* 내가 받은 카드를 몰래 볼 때 */
.r3-peek {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); z-index: 26; text-align: center;
}
.r3-peek .r3-card { position: relative; margin: 0 auto; }
.r3-peek .cap { margin-top: 7px; font-size: 12px; opacity: .8; }

.r3-acts { flex: 0 0 auto; display: flex; gap: 7px; padding: 6px 10px 10px; }
.r3-acts button {
  flex: 1; padding: 10px; border-radius: 12px; font-size: 14.5px; font-weight: 800;
  background: linear-gradient(180deg, #ffd96b, #e8a92c); color: #3a2503;
  box-shadow: 0 5px 0 #a9761a, 0 8px 14px rgba(0,0,0,.33);
  transition: transform .1s, box-shadow .1s, opacity .2s;
}
.r3-acts button.ghost { background: rgba(255,255,255,.1); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.r3-acts button:active { transform: translateY(4px); box-shadow: none; }
.r3-acts button:disabled { opacity: .32; box-shadow: none; transform: none; cursor: default; }

/* 내 앞에 쌓인 카드 */
.r3-mine {
  position: absolute; left: 10px; bottom: 8px; z-index: 8;
  display: flex; gap: 3px; flex-wrap: wrap; max-width: 46%;
}
.r3-mine .chip {
  display: flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 800;
  padding: 2px 6px; border-radius: 7px; background: rgba(0,0,0,.5);
}
.r3-mine .chip svg { width: 16px; height: 18px; }
.r3-mine .chip.warn { background: rgba(230,90,90,.6); box-shadow: 0 0 0 1px rgba(255,170,170,.7); }

@media (max-height: 430px) {
  .r3-seat { width: 70px; margin-left: -35px; }
  .r3-seat .body { height: 50px; }
  .r3-seat .head { width: 21px; height: 21px; margin-left: -10.5px; }
  .r3-seat .torso { top: 17px; width: 37px; height: 32px; margin-left: -18.5px; }
  .r3-seat .nm { font-size: 10.5px; }
  .r3-side { width: 138px; padding: 7px; }
  .r3-side .opt { font-size: 10px; padding: 3px 1px; }
  .r3-side .opt svg { width: 22px; height: 25px; }
  .r3-acts button { padding: 8px; font-size: 13.5px; }
}
@media (max-width: 420px) {
  .r3-seat { width: 68px; margin-left: -34px; }
  .r3-side { width: 138px; }
}

/* 12지신 그림(.ar-avatar)이 패널 폭을 넘지 않게 묶어 둡니다. */
.r3-side { overflow-x: hidden; }
.r3-side .opt .ar-avatar { width: 26px; height: 30px; display: block; }
.r3-side .opt .ar-avatar svg { width: 100%; height: 100%; display: block; }
.r3-front .chip .ar-avatar, .r3-mine .chip .ar-avatar { width: 15px; height: 17px; display: block; }
.r3-front .chip .ar-avatar svg, .r3-mine .chip .ar-avatar svg { width: 100%; height: 100%; display: block; }
.r3-card .f .ar-avatar { position: absolute; left: 4%; bottom: 12px; width: 92%; height: 62%; }
.r3-card .f .ar-avatar svg { width: 100%; height: 100%; display: block; }
.bgx-rules .figure .ar-avatar { width: 44px; height: 50px; margin: 0 auto; display: block; }
.bgx-rules .figure .ar-avatar svg { width: 100%; height: 100%; display: block; }

/* ===== 12지신 포커 — 어두운 방, 테이블에 앉은 1인칭 시점 ===== */
.bgx-roach3d { --felt: #141009; --felt2: #0a0806; }
.bgx-roach3d::before { opacity: .25; }

.r3-scene {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  perspective: 720px; perspective-origin: 50% 92%;
  background:
    radial-gradient(70% 48% at 50% 26%, #241d13 0%, #140f0a 58%, #0a0806 100%);
}
/* 테이블 — 바닥에 붙여 눕혀 멀어지게 만듭니다. */
.r3-table {
  position: absolute; left: 50%; top: 74%;
  width: 165%; height: 250%;
  transform: translate(-50%,-50%) rotateX(74deg);
  transform-origin: 50% 50%;
  border-radius: 50%;
  background:
    radial-gradient(58% 44% at 50% 26%, #9a7549 0%, #7a5c38 38%, #533c23 72%, #332415 100%);
  box-shadow: inset 0 0 150px rgba(0,0,0,.6);
}
/* 나뭇결 */
.r3-table::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-linear-gradient(92deg, rgba(0,0,0,.14) 0 2px, transparent 2px 26px);
  opacity: .7;
}
/* 테이블 가장자리의 어두운 테 */
.r3-table::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 14px rgba(40,26,14,.55);
}
/* 천장에서 내려오는 등 */
.r3-lamp {
  position: absolute; left: 50%; top: -12%; width: 86%; height: 86%;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(48% 46% at 50% 52%, rgba(255,206,132,.2), rgba(255,180,90,.07) 55%, transparent 76%);
}
/* 방 가장자리 어둡게 */
.r3-vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(78% 62% at 50% 46%, transparent 42%, rgba(0,0,0,.62) 100%);
}

/* ---------- 상대 (각진 저폴리 사람) ---------- */
.r3-seat {
  position: absolute; width: 96px; margin-left: -48px; text-align: center;
  z-index: 4;                       /* 테이블(z 5)보다 뒤 → 하반신이 가려집니다 */
  transform-origin: 50% 100%;       /* 키울 때 발밑이 고정되도록 */
  transition: transform .25s, filter .25s;
}
.r3-seat .body { position: relative; height: 78px; }
/* 머리 — 모서리가 살짝 깎인 상자 */
.r3-seat .head {
  position: absolute; left: 50%; top: 0; width: 30px; height: 28px; margin-left: -15px;
  border-radius: 7px 7px 5px 5px;
  background: linear-gradient(150deg, var(--c2, #b9a98f) 0%, var(--c1, #8a7a62) 52%, var(--c0, #5d5142) 100%);
  box-shadow: inset -4px -5px 8px rgba(0,0,0,.3);
}
/* 어깨가 벌어진 사다리꼴 몸통 */
.r3-seat .torso {
  position: absolute; left: 50%; top: 24px; width: 62px; height: 54px; margin-left: -31px;
  clip-path: polygon(16% 0%, 84% 0%, 100% 34%, 100% 100%, 0% 100%, 0% 34%);
  background: linear-gradient(150deg, var(--c2, #b9a98f) 0%, var(--c1, #8a7a62) 48%, var(--c0, #5d5142) 100%);
  box-shadow: inset -6px -6px 12px rgba(0,0,0,.28);
}
/* 팔 — 테이블에 올려 둔 느낌 */
.r3-seat .arm {
  position: absolute; top: 46px; width: 16px; height: 26px; border-radius: 5px;
  background: linear-gradient(150deg, var(--c1, #8a7a62), var(--c0, #5d5142));
}
.r3-seat .arm.l { left: 50%; margin-left: -40px; transform: rotate(14deg); }
.r3-seat .arm.r { left: 50%; margin-left: 24px; transform: rotate(-14deg); }

.r3-seat .nm {
  position: relative; z-index: 2; margin-bottom: 1px;
  font-size: 12.5px; font-weight: 900; letter-spacing: -.2px;
  color: var(--tag, #ffd9a0);
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(0,0,0,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r3-seat .cnt {
  position: relative; z-index: 2;
  font-size: 10px; font-weight: 700; opacity: .72; line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.r3-seat.on .head, .r3-seat.on .torso, .r3-seat.on .arm { filter: brightness(1.35) saturate(1.2); }
.r3-seat.able { cursor: pointer; }
.r3-seat.able .torso { box-shadow: inset -6px -6px 12px rgba(0,0,0,.28), 0 0 0 2.5px var(--gold); }
.r3-seat.able:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.15); }
.r3-seat.out { opacity: .45; }
.r3-seat.lost .head, .r3-seat.lost .torso { filter: grayscale(.7) brightness(.7); }

/* 앞에 쌓인 카드 — 테이블 위라 테이블보다 앞에 둡니다 */
.r3-front {
  position: relative; z-index: 6;
  display: flex; gap: 2px; justify-content: center; flex-wrap: wrap;
  margin-top: 3px; min-height: 16px;
}
.r3-front .chip {
  display: flex; align-items: center; gap: 1px; font-size: 9.5px; font-weight: 800;
  padding: 1px 4px; border-radius: 5px; background: rgba(0,0,0,.6); line-height: 1.3;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.r3-front .chip.warn { background: rgba(190,60,60,.85); box-shadow: 0 0 0 1px rgba(255,170,170,.7); }

/* 테이블은 사람보다 앞, 카드보다 뒤 */
.r3-table, .r3-lamp { z-index: 5; }
.r3-vig { z-index: 7; }
.r3-pit, .r3-fly, .r3-shout, .r3-reveal, .r3-peek, .r3-ask, .r3-mine { z-index: 10; }
.r3-side { z-index: 12; }

/* 내 앞에 쌓인 카드 */
.r3-mine {
  position: absolute; left: 10px; bottom: 8px;
  display: flex; gap: 3px; flex-wrap: wrap; max-width: 46%; align-items: center;
}
.r3-mine .chip {
  display: flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 800;
  padding: 2px 6px; border-radius: 7px; background: rgba(0,0,0,.6);
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.r3-mine .chip.warn { background: rgba(190,60,60,.85); box-shadow: 0 0 0 1px rgba(255,170,170,.7); }

@media (max-height: 430px) {
  .r3-seat { width: 80px; margin-left: -40px; }
  .r3-seat .nm { font-size: 11.5px; }
}
@media (max-width: 420px) {
  .r3-seat { width: 76px; margin-left: -38px; }
  .r3-seat .nm { font-size: 11px; }
}

/* 이름표 — 테이블 앞(z 8)에 따로 그려 가려지지 않게 합니다. */
.r3-tag {
  position: absolute; width: 110px; margin-left: -55px; text-align: center;
  z-index: 8; transform-origin: 50% 0;
  transition: transform .25s, filter .25s;
}
.r3-tag .nm {
  font-size: 12.5px; font-weight: 900; letter-spacing: -.2px; color: var(--tag, #ffd9a0);
  text-shadow: 0 1px 0 #000, 0 0 9px rgba(0,0,0,.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r3-tag .cnt {
  font-size: 10px; font-weight: 700; opacity: .75; line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
}
.r3-tag.able { cursor: pointer; }
.r3-tag.able .nm { text-shadow: 0 1px 0 #000, 0 0 10px var(--gold); }
.r3-tag.on .nm { color: #fff; }
.r3-tag.out { opacity: .45; }
.r3-tag.lost .nm { color: #ff9a9a; }
/* 앞의 .r3-seat 안에 있던 이름 규칙은 이제 쓰지 않습니다. */
.r3-seat .nm, .r3-seat .cnt { display: none; }

/* 외침이 어두운 방에 묻히지 않도록 뒤에 받침을 깔고 더 밝게 */
.r3-shout {
  padding: 16px 34px;
  background: radial-gradient(58% 130% at 50% 50%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 55%, transparent 78%);
}
.r3-shout b {
  color: #fff6e0;
  text-shadow: 0 0 10px rgba(255,214,120,.95), 0 0 26px rgba(255,170,60,.7),
               0 3px 0 #8a5a0c, 0 6px 20px rgba(0,0,0,.85);
}
.r3-shout .who { color: #ffe6b8; text-shadow: 0 1px 4px rgba(0,0,0,.9); opacity: 1; }

/* ===== 12지신 포커: 실제로 남은 공간에 맞춰 전부 비례시킵니다 =====
   사파리는 주소창·탭바·하단바가 공간을 많이 먹어서, 고정 px 로 그리면 가로에서 무너집니다.
   --seatH(사람 키)와 --cardW(카드 폭)를 자바스크립트가 재서 넣어 줍니다. */
.bgx-roach3d { --seatH: 62px; --cardW: 54px; }

.r3-hand {
  position: relative; flex: 0 0 auto;
  height: clamp(52px, 34%, 124px);
  perspective: 820px; perspective-origin: 50% 120%;
}
.r3-acts {
  flex: 0 0 auto; display: flex; gap: 6px; align-items: stretch;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
  min-height: 0;
}
.r3-acts button {
  flex: 1; padding: 0; min-height: 32px;
  border-radius: 11px; font-size: clamp(12px, 3.4vmin, 15px); font-weight: 800;
  background: linear-gradient(180deg, #ffd96b, #e8a92c); color: #3a2503;
  box-shadow: 0 4px 0 #a9761a, 0 6px 11px rgba(0,0,0,.33);
  transition: transform .1s, box-shadow .1s, opacity .2s;
}
.r3-acts button.ghost { background: rgba(255,255,255,.1); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.r3-acts button.no { background: linear-gradient(180deg, #ff9f9f, #d85a5a); box-shadow: 0 4px 0 #9a3636, 0 6px 11px rgba(0,0,0,.33); color: #2e0b0b; }
.r3-acts button.alt { background: linear-gradient(180deg, #a8c6ff, #5f82c8); box-shadow: 0 4px 0 #3b558c, 0 6px 11px rgba(0,0,0,.33); color: #fff; }
.r3-acts button:active { transform: translateY(3px); box-shadow: none; }
.r3-acts button:disabled { opacity: .32; box-shadow: none; transform: none; cursor: default; }
.r3-acts button.hide { display: none; }

/* 카드 — 폭 하나로 전부 따라갑니다 */
.r3-card { width: var(--cardW); height: calc(var(--cardW) * 1.42); }
.r3-card .f .cnr { font-size: calc(var(--cardW) * .17); top: 3px; left: 4px; }
.r3-card .f .nm { font-size: calc(var(--cardW) * .155); bottom: 1px; }
.r3-card .f .ar-avatar, .r3-card .f > svg { left: 4%; bottom: calc(var(--cardW) * .19); width: 92%; height: 60%; }

/* 사람 — 키 하나로 전부 따라갑니다 */
.r3-seat { width: calc(var(--seatH) * 1.24); margin-left: calc(var(--seatH) * -.62); }
.r3-seat .body { height: var(--seatH); }
.r3-seat .head {
  width: calc(var(--seatH) * .38); height: calc(var(--seatH) * .36);
  margin-left: calc(var(--seatH) * -.19);
  border-radius: calc(var(--seatH) * .09) calc(var(--seatH) * .09) calc(var(--seatH) * .065) calc(var(--seatH) * .065);
}
.r3-seat .torso {
  top: calc(var(--seatH) * .31); width: calc(var(--seatH) * .8); height: calc(var(--seatH) * .69);
  margin-left: calc(var(--seatH) * -.4);
}
.r3-seat .arm {
  top: calc(var(--seatH) * .59); width: calc(var(--seatH) * .21); height: calc(var(--seatH) * .33);
  border-radius: calc(var(--seatH) * .07);
}
.r3-seat .arm.l { margin-left: calc(var(--seatH) * -.52); }
.r3-seat .arm.r { margin-left: calc(var(--seatH) * .31); }

/* 이름표 */
.r3-tag { width: calc(var(--seatH) * 1.7); margin-left: calc(var(--seatH) * -.85); }
.r3-tag .nm { font-size: clamp(9px, calc(var(--seatH) * .2), 13px); }
.r3-tag .cnt { font-size: clamp(8px, calc(var(--seatH) * .16), 11px); }
.r3-front .chip { font-size: clamp(8px, calc(var(--seatH) * .15), 10px); padding: 1px 3px; }
.r3-front .chip .ar-avatar { width: clamp(10px, calc(var(--seatH) * .22), 16px); height: auto; }
/* 앞에 깔린 카드가 아직 없으면 자리를 비워 둡니다(작은 화면에서 이름표가 길어지지 않게) */
.r3-front:empty { min-height: 0; margin-top: 0; }

/* 받았을 때 고르는 버튼은 조작 줄에 들어갑니다(작은 화면에서 테이블을 가리지 않게) */
.r3-ask { display: none; }

/* 내 앞에 쌓인 카드 */
.r3-mine { font-size: clamp(9px, 2.6vmin, 11px); }
.r3-mine .chip { font-size: inherit; padding: 1px 5px; }
.r3-mine .chip .ar-avatar { width: clamp(11px, 3vmin, 16px); height: auto; }

/* 아주 낮은 화면에서는 내 앞 표시를 접습니다 */
.bgx-roach3d.tiny .r3-mine { display: none; }

/* 카드를 받는 사람 — 카드가 가는 동안 환하게 밝혀 누구에게 가는지 보이게 합니다 */
.r3-seat.getting .torso, .r3-seat.getting .head { filter: brightness(1.5) saturate(1.25); }
.r3-seat.getting .torso { box-shadow: inset -6px -6px 12px rgba(0,0,0,.28), 0 0 0 3px #ffd96b, 0 0 16px rgba(255,217,107,.75); }
.r3-tag.getting .nm { color: #fff3cf; text-shadow: 0 0 10px rgba(255,217,107,.95), 0 1px 0 #000; }
.r3-tag.getting::before {
  content: ''; position: absolute; left: 50%; top: -3px;
  width: calc(var(--seatH) * 1.1); height: calc(var(--seatH) * .34);
  margin-left: calc(var(--seatH) * -.55); border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,217,107,.5), transparent 72%);
  animation: r3Get .7s ease-in-out infinite alternate;
}
@keyframes r3Get { from { opacity: .35; } to { opacity: 1; } }

/* 테이블 위를 미끄러지는 카드 — 밑에 그림자를 깔아야 떠 있지 않고 놓인 것처럼 보입니다 */
.r3-fly::after {
  content: ''; position: absolute; left: 6%; bottom: -7%;
  width: 88%; height: 26%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55), transparent 70%);
  z-index: -1;
}

/* ===== 세트(SET) — 어두운 방, 테이블에 깔린 카드 =====
   카드 폭(--setW)만 자바스크립트가 재서 넣어 주고 나머지는 전부 거기에 비례시킵니다. */
.bgx-set3d { --setW: 74px; --setGap: 7px; }
.bgx-set3d .set-defs { position: absolute; width: 0; height: 0; }

.s3-scene {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  perspective: 900px; perspective-origin: 50% 46%;
  background: radial-gradient(72% 56% at 50% 34%, #241d13 0%, #140f0a 60%, #0a0806 100%);
}
/* 나뭇결 테이블 — 화면을 가득 채우고 가장자리는 어둡게 깔립니다 */
.s3-table {
  position: absolute; inset: -6%;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.12) 0 2px, transparent 2px 24px),
    radial-gradient(62% 52% at 50% 40%, #8d6a42 0%, #6d5134 42%, #4a3521 74%, #2c1f13 100%);
  box-shadow: inset 0 0 160px rgba(0,0,0,.66);
}
.s3-lamp {
  position: absolute; left: 50%; top: -16%; width: 92%; height: 92%;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(48% 46% at 50% 52%, rgba(255,214,146,.22), rgba(255,186,96,.07) 54%, transparent 74%);
}
.s3-vig {
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(82% 68% at 50% 46%, transparent 44%, rgba(0,0,0,.6) 100%);
}

/* 카드가 놓인 판 — 통째로 눕혀서 테이블 위에 깔린 것처럼 보이게 합니다 */
.s3-grid {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%) rotateX(26deg);
  transform-style: preserve-3d;
  display: grid; gap: var(--setGap); justify-content: center; align-content: center;
}

/* ---------- 카드 ---------- */
.s3-card {
  position: relative; width: var(--setW); height: calc(var(--setW) * 1.42);
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.22,.9,.3,1), filter .18s;
  cursor: default;
}
.s3-card .face {
  position: absolute; inset: 0; border-radius: calc(var(--setW) * .1);
  background: linear-gradient(168deg, #fffdf7 0%, #f6efe0 60%, #e6dcc6 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset 0 0 0 2.5px rgba(90,80,60,.16),
              0 6px 12px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* 카드 두께 — 아주 얇게 깔아 두면 종이가 아니라 카드처럼 보입니다 */
.s3-card .edge {
  position: absolute; inset: 0; border-radius: calc(var(--setW) * .1);
  transform: translateZ(-3px);
  background: linear-gradient(180deg, #cdbf9f, #93815c);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.s3-card.able { cursor: pointer; }
.s3-card.able:hover { transform: translateZ(6px); filter: brightness(1.05); }

/* 고른 카드는 테이블에서 떠오릅니다 */
.s3-card.on {
  transform: translateZ(16px) rotateX(-10deg);
  filter: brightness(1.08);
}
.s3-card.on .face { box-shadow: inset 0 0 0 3px var(--gold), 0 14px 22px rgba(0,0,0,.5); }

.s3-card.win .face { box-shadow: inset 0 0 0 3px #7ee6a8, 0 0 24px rgba(126,230,168,.7); }
.s3-card.win { transform: translateZ(26px) rotateX(-14deg); }
.s3-card.bad .face { box-shadow: inset 0 0 0 3px #ff8e8e, 0 0 20px rgba(255,120,120,.6); }
.s3-card.bad { animation: s3Shake .4s; }
@keyframes s3Shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.s3-card.gone { opacity: 0; transition: opacity .3s; }
.s3-card.hintOn .face { box-shadow: inset 0 0 0 3px #8fd0ff, 0 0 22px rgba(143,208,255,.75); }

/* 카드 위의 그림 1~3개 */
.s3-syms {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--setW) * .04);
  width: 84%; height: 86%;
}
.s3-syms .set-sym { width: 100%; height: auto; display: block; }
.s3-syms.n1 .set-sym { width: 86%; }
.s3-syms.n2 .set-sym { width: 92%; }

/* 룰 설명 안의 작은 카드 */
.s3-fig { --setW: 56px; display: inline-block; }
.s3-fig .s3-card { position: relative; }
.s3-card.flat { transform: none; }
.s3-card.flat .edge { display: none; }

/* ---------- 점수 줄 ---------- */
.s3-bar {
  flex: 0 0 auto; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 5px 8px; background: rgba(0,0,0,.3);
  border-top: 1px solid rgba(255,255,255,.07);
}
.s3-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08);
  font-size: clamp(10px, 2.8vmin, 13px); line-height: 1.5;
}
.s3-chip .nm { opacity: .82; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-chip b { color: var(--gold); font-weight: 900; }
.s3-chip.me { background: rgba(240,192,74,.2); box-shadow: inset 0 0 0 1px rgba(240,192,74,.5); }

/* ---------- 조작 줄 ---------- */
.s3-acts {
  flex: 0 0 auto; display: flex; gap: 6px; align-items: stretch;
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
}
.s3-acts button {
  flex: 1; padding: 0; min-height: 34px;
  border-radius: 11px; font-size: clamp(12px, 3.4vmin, 15px); font-weight: 800;
  background: linear-gradient(180deg, #ffd96b, #e8a92c); color: #3a2503;
  box-shadow: 0 4px 0 #a9761a, 0 6px 11px rgba(0,0,0,.33);
  transition: transform .1s, box-shadow .1s, opacity .2s;
}
.s3-acts button.ghost { background: rgba(255,255,255,.1); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.s3-acts button.alt { background: linear-gradient(180deg, #a8c6ff, #5f82c8); box-shadow: 0 4px 0 #3b558c, 0 6px 11px rgba(0,0,0,.33); color: #fff; }
.s3-acts button:active { transform: translateY(3px); box-shadow: none; }
.s3-acts button:disabled { opacity: .32; box-shadow: none; transform: none; cursor: default; }
.s3-acts button.hide { display: none; }

/* ---------- 가운데 외침 ---------- */
.s3-shout {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); z-index: 12;
  text-align: center; pointer-events: none;
  animation: s3Pop .3s cubic-bezier(.2,1.4,.4,1) both;
}
.s3-shout b {
  display: block; font-size: clamp(30px, 11vmin, 64px); font-weight: 900; letter-spacing: -1px;
  color: #bdf5d2; text-shadow: 0 3px 0 #16321f, 0 0 26px rgba(126,230,168,.8);
}
.s3-shout .who { margin-top: 2px; font-size: clamp(12px, 3.4vmin, 17px); font-weight: 800; color: #fff; opacity: .9; }
.s3-shout.fade { opacity: 0; transition: opacity .35s; }
@keyframes s3Pop { from { opacity: 0; transform: translate(-50%,-50%) scale(.6); } }

.bgx-head .who .dim { font-weight: 700; font-size: 12px; opacity: .6; }

@media (max-height: 430px) {
  .s3-bar { padding: 3px 8px; }
  .s3-chip { padding: 2px 8px; }
  .s3-acts button { min-height: 30px; }
}