/* ===== 보드게임 공용 — 가로형 테이블, 카드, 주사위 ===== */
.bgx {
  --felt: #1b3a2a;
  --felt2: #16301f;
  --wood: #4a2f1c;
  --wood2: #6b462a;
  --gold: #f0c04a;
  --cream: #fdf6e6;
  --ink: #2b1d12;
  position: absolute; inset: 0;
  /* 위쪽 이동 바와 아이폰 노치·홈바를 피해 안쪽으로 들여 둡니다. */
  padding-top: calc(54px + env(safe-area-inset-top));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; flex-direction: column;
  font-family: inherit; color: var(--cream);
  overflow: hidden;
  background:
    radial-gradient(130% 90% at 50% -10%, #2b5540 0%, var(--felt) 45%, var(--felt2) 100%);
}
.bgx * { box-sizing: border-box; }
.bgx button { font: inherit; color: inherit; cursor: pointer; border: 0; }

/* 바닥의 천 느낌 */
.bgx::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.03) 0 2px, transparent 2px 4px);
}
.bgx > * { position: relative; z-index: 1; }

/* ---------- 가로로 돌려 달라는 안내 ---------- */
.bgx-rotate {
  position: absolute; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(10,22,15,.94); text-align: center; padding: 24px;
}
.bgx-rotate .phone {
  width: 58px; height: 96px; border: 3px solid var(--gold); border-radius: 12px;
  animation: bgxTurn 2.2s ease-in-out infinite;
}
@keyframes bgxTurn { 0%,35% { transform: rotate(0); } 55%,100% { transform: rotate(-90deg); } }
.bgx-rotate b { font-size: 19px; }
.bgx-rotate p { margin: 0; font-size: 14px; opacity: .8; line-height: 1.6; }
.bgx-rotate button {
  padding: 10px 20px; border-radius: 999px; background: rgba(255,255,255,.12);
  font-size: 14px; font-weight: 700;
}

/* ---------- 설정 / 선택 화면 ---------- */
.bgx-sheet {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18px;
}
.bgx-card {
  width: 100%; max-width: 560px; margin: auto;   /* 가운데 정렬하되 넘치면 끝까지 스크롤됩니다 */
  background: linear-gradient(170deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16); border-radius: 20px;
  padding: 20px; backdrop-filter: blur(6px);
  animation: bgxUp .32s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes bgxUp { from { opacity: 0; transform: translateY(16px); } }
.bgx-card h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.3px; }
.bgx-card .sub { margin: 0 0 14px; font-size: 14px; line-height: 1.65; opacity: .82; }
.bgx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.bgx-chips span {
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  background: rgba(240,192,74,.16); border: 1px solid rgba(240,192,74,.3); color: #ffe6a8;
}
.bgx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
/* min-width:0 이 없으면 input 의 기본 최소 너비(약 20자) 때문에 칸이 화면 밖으로 밀려납니다. */
.bgx-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; opacity: .85; min-width: 0; }
.bgx-grid input, .bgx-grid select {
  font: inherit; font-size: 15px; padding: 9px 10px; border-radius: 11px;
  width: 100%; min-width: 0; max-width: 100%;
  border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.28); color: var(--cream);
}
.bgx-go {
  width: 100%; padding: 14px; border-radius: 14px; font-size: 17px; font-weight: 800;
  background: linear-gradient(180deg, #ffd96b, #e8a92c); color: #3a2503;
  box-shadow: 0 6px 0 #a9761a, 0 10px 20px rgba(0,0,0,.3);
  transition: transform .12s, box-shadow .12s;
}
.bgx-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #a9761a; }
.bgx-go.ghost {
  background: rgba(255,255,255,.1); color: var(--cream);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); margin-top: 10px;
}
.bgx-go.ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.bgx-hint { margin-top: 12px; font-size: 12px; opacity: .6; line-height: 1.6; text-align: center; }

/* ---------- 룰 보기 ---------- */
.bgx-rules { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px; }
.bgx-rules .inner { max-width: 760px; margin: 0 auto; }
.bgx-rules h2 { margin: 0 0 4px; font-size: 24px; }
.bgx-rules h3 {
  margin: 22px 0 8px; font-size: 16px; color: #ffe08a;
  padding-left: 10px; border-left: 3px solid var(--gold);
}
.bgx-rules p, .bgx-rules li { font-size: 14px; line-height: 1.75; }
.bgx-rules ul, .bgx-rules ol { margin: 0; padding-left: 20px; }
.bgx-rules li { margin-bottom: 5px; }
.bgx-rules .figure {
  margin: 12px 0; padding: 14px; border-radius: 14px;
  background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.1);
}
.bgx-rules .figure .cap { margin-top: 8px; font-size: 12px; opacity: .7; text-align: center; }
.bgx-rules .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: flex-end; }
.bgx-rules table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.bgx-rules th, .bgx-rules td {
  padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); text-align: left;
}
.bgx-rules th { background: rgba(255,255,255,.08); }

/* ---------- 머리글 ---------- */
.bgx-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; background: rgba(0,0,0,.26);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bgx-head .who { font-size: 14px; font-weight: 800; }
.bgx-head .who em { font-style: normal; color: var(--gold); }
.bgx-head .msg { flex: 1; font-size: 12.5px; opacity: .82; min-width: 0; }
.bgx-head .msg.warn { color: #ffb4a8; opacity: 1; }
.bgx-head .msg.good { color: #a8f0c0; opacity: 1; }

/* ---------- 날아가는 조각 ---------- */
.bgx-fly { pointer-events: none; will-change: transform; }

/* ===================== 고기구이 ===================== */
.grill-rail {
  flex: 0 0 auto; display: flex; gap: 3px; padding: 7px 8px; justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,.3), transparent);
  overflow-x: auto; scrollbar-width: none;
}
.grill-rail::-webkit-scrollbar { display: none; }
.tile {
  flex: 0 0 auto; width: 52px; border-radius: 9px;
  background: linear-gradient(165deg, #f7e9c8, #e2c895);
  box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
  color: var(--ink); padding: 3px 2px 4px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transition: transform .2s, opacity .2s, filter .2s;
}
.tile b { font-size: 15px; font-weight: 900; line-height: 1; }
.tile .meats { display: flex; gap: 1px; justify-content: center; height: 21px; align-items: center; }
.tile .meats svg { width: 17px; height: auto; display: block; }
.tile.down {
  background: linear-gradient(165deg, #6a5336, #3f301d); color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.tile.down b, .tile.down .meats { visibility: hidden; }
.tile.down::after { content: '🔥'; font-size: 15px; position: absolute; opacity: .45; }
.tile.down { position: relative; display: flex; align-items: center; justify-content: center; }
.tile.gone { opacity: 0; transform: scale(.4); width: 0; padding: 0; margin: 0; }
.tile.hit { outline: 2px solid var(--gold); outline-offset: 1px; animation: bgxPulse .8s ease-in-out infinite; }
@keyframes bgxPulse { 50% { outline-color: #fff; } }
.tile.sm { width: 36px; }
.tile.sm b { font-size: 12px; }
.tile.sm .meats svg { width: 10px; }

.grill-body { flex: 1; display: flex; min-height: 0; }

/* 왼쪽 플레이어 칸 */
.grill-seats {
  flex: 0 0 150px; display: flex; flex-direction: column; gap: 5px;
  padding: 7px; overflow-y: auto; background: rgba(0,0,0,.18);
}
.seat {
  border-radius: 11px; padding: 6px 8px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08); transition: background .2s, border-color .2s;
}
.seat.on { background: rgba(240,192,74,.16); border-color: var(--gold); }
.seat .nm { font-size: 12px; font-weight: 800; display: flex; justify-content: space-between; gap: 4px; }
.seat .nm i { font-style: normal; color: var(--gold); font-size: 11px; }
.seat .pile { display: flex; gap: 2px; margin-top: 4px; min-height: 20px; flex-wrap: wrap; }
.seat .pile .tile { width: 26px; padding: 2px 1px; }
.seat .pile .tile b { font-size: 10px; }
.seat .pile .tile .meats { height: 9px; }
.seat .pile .tile .meats svg { width: 7px; }
.seat .pile .more { font-size: 10px; opacity: .6; align-self: center; }

/* 오른쪽 주사위 테이블 */
.grill-table {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding: 8px 10px 10px; gap: 7px;
}
.grill-sum {
  display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
}
.grill-sum .big {
  font-size: 27px; font-weight: 900; line-height: 1; color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
  transition: transform .2s;
}
.grill-sum .big.bump { transform: scale(1.22); }
.grill-sum .lbl { font-size: 11px; opacity: .65; }
.grill-sum .meat-ok {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
}
.grill-sum .meat-ok.yes { background: rgba(120,230,160,.18); border-color: rgba(120,230,160,.45); color: #bff3d0; }

.grill-kept { flex: 0 0 auto; display: flex; gap: 4px; flex-wrap: wrap; min-height: 34px; align-items: center; }
.grill-pit {
  flex: 1; min-height: 0; display: flex; flex-wrap: wrap; gap: 6px;
  align-content: center; justify-content: center;
  border-radius: 14px; padding: 8px;
  background: radial-gradient(90% 100% at 50% 0%, rgba(0,0,0,.3), rgba(0,0,0,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.grill-acts { flex: 0 0 auto; display: flex; gap: 7px; }
.grill-acts button {
  flex: 1; padding: 11px 8px; border-radius: 12px; font-size: 14.5px; font-weight: 800;
  background: linear-gradient(180deg, #ffd96b, #e8a92c); color: #3a2503;
  box-shadow: 0 4px 0 #a9761a; transition: transform .1s, box-shadow .1s, opacity .2s;
}
.grill-acts button.alt { background: linear-gradient(180deg, #8fd7a8, #49a872); box-shadow: 0 4px 0 #2f7850; color: #0e2d1c; }
.grill-acts button:active { transform: translateY(3px); box-shadow: none; }
.grill-acts button:disabled { opacity: .32; box-shadow: none; transform: none; cursor: default; }

/* 주사위 */
.die {
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 10px;
  background: linear-gradient(160deg, #fffdf6, #e4dcc8);
  box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 -2px 0 rgba(0,0,0,.1), inset 0 2px 0 #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative; transition: transform .16s, box-shadow .16s, opacity .2s;
}
.die svg { width: 100%; height: 100%; display: block; }
.die.rolling { animation: bgxTumble .42s linear infinite; }
@keyframes bgxTumble {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  25%  { transform: translateY(-13px) rotate(96deg) scale(1.06); }
  50%  { transform: translateY(2px) rotate(185deg) scale(.95); }
  75%  { transform: translateY(-8px) rotate(272deg) scale(1.04); }
  100% { transform: translateY(0) rotate(360deg) scale(1); }
}
.die.land { animation: bgxLand .3s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes bgxLand {
  0% { transform: translateY(-16px) scale(1.12,.86); }
  60% { transform: translateY(0) scale(.92,1.1); }
  100% { transform: none; }
}
.die.pick-able { cursor: pointer; }
.die.pick-able:hover, .die.pick-able.hot {
  transform: translateY(-5px); box-shadow: 0 8px 12px rgba(0,0,0,.45), 0 0 0 2px var(--gold);
}
.die.dead { opacity: .3; filter: grayscale(1); }
.die.small { width: 30px; height: 30px; border-radius: 7px; }
.die.tray { width: 32px; height: 32px; border-radius: 7px; }

/* 결과판 */
.bgx-over {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-start; justify-content: center;
  background: rgba(8,20,13,.9); padding: 18px;
  animation: bgxFade .3s both;
}
@keyframes bgxFade { from { opacity: 0; } }
.bgx-over .box {
  width: 100%; max-width: 420px; margin: auto; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 18px;
  animation: bgxUp .35s cubic-bezier(.2,.9,.3,1) both;
}
.bgx-over h2 { margin: 0 0 12px; font-size: 22px; text-align: center; }
.bgx-over ol { margin: 0 0 14px; padding-left: 22px; }
.bgx-over li { font-size: 15px; line-height: 1.9; }
.bgx-over li b { color: var(--gold); }
.bgx-over li.me { font-weight: 800; }

/* ===================== 각개전투 ===================== */
.dw-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dw-seats {
  flex: 0 0 auto; display: flex; gap: 6px; padding: 6px 9px; overflow-x: auto; scrollbar-width: none;
}
.dw-seats::-webkit-scrollbar { display: none; }
.dw-seat {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 999px; font-size: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  transition: background .2s, border-color .2s, transform .2s;
}
.dw-seat.on { background: rgba(240,192,74,.18); border-color: var(--gold); transform: translateY(-2px); }
.dw-seat.out { opacity: .45; }
.dw-seat b { font-weight: 800; }
.dw-seat .cnt {
  font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.3);
}
.dw-seat .pass { color: #ffb4a8; font-size: 11px; }

.dw-field {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px; padding: 4px 10px;
}
.dw-field .label { font-size: 11px; opacity: .6; letter-spacing: .5px; }
.dw-field .cards { display: flex; gap: 5px; min-height: 74px; align-items: center; }
.dw-field .total {
  font-size: 13px; font-weight: 800; color: var(--gold);
  padding: 3px 11px; border-radius: 999px; background: rgba(0,0,0,.3);
}
.dw-field .empty { font-size: 12.5px; opacity: .45; }

.dw-reserve { display: flex; gap: 5px; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 10px 2px; }
.dw-reserve .label { font-size: 11px; opacity: .6; }

.dw-hand {
  flex: 0 0 auto; display: flex; gap: 4px; padding: 7px 9px 9px; overflow-x: auto;
  justify-content: center; scrollbar-width: none;
  background: linear-gradient(0deg, rgba(0,0,0,.3), transparent);
}
.dw-hand::-webkit-scrollbar { display: none; }
.dw-acts { flex: 0 0 auto; display: flex; gap: 7px; padding: 0 9px 9px; }
.dw-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 4px 0 #a9761a;
  transition: transform .1s, box-shadow .1s, opacity .2s;
}
.dw-acts button.alt { background: linear-gradient(180deg, #d7a8f0, #9f5fc8); box-shadow: 0 4px 0 #6d3b8c; color: #fff; }
.dw-acts button:active { transform: translateY(3px); box-shadow: none; }
.dw-acts button:disabled { opacity: .32; box-shadow: none; transform: none; cursor: default; }

/* 강아지 카드 */
.dcard {
  flex: 0 0 auto; width: 62px; height: 86px; border-radius: 9px; position: relative;
  background: linear-gradient(170deg, var(--cream), #efe2c6);
  box-shadow: 0 3px 6px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.6);
  color: var(--ink); overflow: hidden;
  transition: transform .18s, box-shadow .18s, opacity .2s;
}
.dcard svg { position: absolute; left: 0; bottom: 7px; width: 100%; height: 62%; }
.dcard .rk {
  position: absolute; top: 2px; left: 4px; font-size: 15px; font-weight: 900; line-height: 1;
}
.dcard .bd {
  position: absolute; bottom: 1px; left: 0; right: 0; text-align: center;
  font-size: 8px; font-weight: 700; opacity: .72; letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden;
}
.dcard.sp { background: linear-gradient(170deg, #ffe9b8, #f3c979); }
.dcard.sp.feed { background: linear-gradient(170deg, #c9e8ff, #8fc1ee); }
.dcard.sp .rk { font-size: 13px; }
.dcard.sel { transform: translateY(-13px); box-shadow: 0 10px 14px rgba(0,0,0,.45), 0 0 0 2.5px var(--gold); }
.dcard.able { cursor: pointer; }
.dcard.able:hover { transform: translateY(-6px); }
.dcard.dim { opacity: .42; filter: saturate(.5); }
.dcard.sm { width: 44px; height: 62px; }
.dcard.sm .rk { font-size: 11px; }
.dcard.sm .bd { font-size: 6.5px; }
.dcard.back {
  background: linear-gradient(150deg, #7a4a2c, #4a2a16); color: transparent;
  box-shadow: 0 3px 6px rgba(0,0,0,.4), inset 0 0 0 2px rgba(240,192,74,.3);
}
.dcard.back::after {
  content: '🐾'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; opacity: .55;
}

/* 덱 / 셔플 */
.dw-deck { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; }
.dw-deck .stack { position: relative; width: 62px; height: 86px; }
.dw-deck .stack .dcard { position: absolute; inset: 0; }
.dw-deck .cap {
  position: absolute; bottom: 22%; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 800;
}
@keyframes bgxRiffleL {
  0%,100% { transform: none; } 50% { transform: translateX(-26px) rotate(-11deg); }
}
@keyframes bgxRiffleR {
  0%,100% { transform: none; } 50% { transform: translateX(26px) rotate(11deg); }
}

/* 좁은 화면에서 자리 칸을 줄입니다 */
@media (max-width: 560px) {
  .grill-seats { flex-basis: 118px; }
  .seat .nm { font-size: 11px; }
  .die { width: 38px; height: 38px; }
  .dcard { width: 52px; height: 72px; }
  .dcard .bd { font-size: 7px; }
}
@media (max-height: 420px) {
  .tile { width: 38px; }
  .tile b { font-size: 12px; }
  .tile .meats { height: 12px; }
  .tile .meats svg { width: 10px; }
  .die { width: 38px; height: 38px; }
  .dcard { width: 50px; height: 70px; }
}

/* 주사위 면 안의 그림 (boardgame-art.js 가 내보내는 조각) */
.die .bg-pips { fill: #2b1d12; width: 100%; height: 100%; }
.die .bg-die-art {
  display: flex; align-items: center; justify-content: center;
  width: 84%; height: 84%;
}
.die .bg-die-art svg { width: 100%; height: auto; max-height: 100%; }
/* 타일 위의 고기, 카드 위의 강아지 */
.tile .meats svg { max-height: 100%; }
.dcard .bg-special-art { position: absolute; left: 12%; bottom: 10px; width: 76%; height: auto; }

/* 화면 위에 떠 있는 게임 이동 바(.ol-nav) 아래로 내려 줍니다 */
@media (max-height: 460px) { .bgx { padding-top: calc(48px + env(safe-area-inset-top)); } }

/* 가로로 들면 높이가 300px 남짓뿐이라, 머리글이 판을 더 먹지 않게 바짝 줄입니다 */
@media (max-height: 430px) {
  .bgx { padding-top: calc(40px + env(safe-area-inset-top)); }
  .bgx-head { padding: 3px 10px; gap: 7px; }
  .bgx-head .who { font-size: 12.5px; }
  .bgx-head .msg { font-size: 11.5px; }
  /* 떠 있는 뒤로가기 바도 같이 낮춥니다 */
  .ol-nav.ol-nav { top: calc(env(safe-area-inset-top) + 3px); }
  .ol-nav .back.back, .ol-nav .game-prev.game-prev { min-height: 34px; padding-top: 0; padding-bottom: 0; }
}

/* ===== 세로로 들었을 때 =====
   자리 칸을 왼쪽에 세워 두면 폭이 모자라므로, 위쪽에 가로로 눕힙니다. */
@media (orientation: portrait) {
  .grill-body { flex-direction: column; }
  .grill-seats {
    flex: 0 0 auto; flex-direction: row; gap: 6px;
    overflow-x: auto; overflow-y: hidden; padding: 6px 8px; scrollbar-width: none;
  }
  .grill-seats::-webkit-scrollbar { display: none; }
  .seat { flex: 0 0 auto; min-width: 112px; }
  .seat .pile { flex-wrap: nowrap; }
  .grill-rail { justify-content: flex-start; }
  .grill-table { padding: 8px 10px 10px; }
  .dw-hand { justify-content: flex-start; }
}

/* ===== 설정 화면을 화면 높이에 맞춥니다 =====
   가로로 들면 높이가 390px 안팎이라, 글자와 여백을 줄이고 이름 칸을 세 줄로 늘어놓습니다. */
@media (max-height: 500px) {
  .bgx-sheet { padding: 10px 14px; }
  .bgx-card { padding: 14px 16px; border-radius: 16px; }
  .bgx-card h2 { font-size: 19px; margin-bottom: 4px; }
  .bgx-card .sub { font-size: 12.5px; line-height: 1.5; margin-bottom: 9px; }
  .bgx-chips { gap: 5px; margin-bottom: 10px; }
  .bgx-chips span { font-size: 11px; padding: 3px 8px; }
  .bgx-grid { gap: 7px; margin-bottom: 8px; }
  .bgx-grid label { gap: 3px; font-size: 11px; }
  .bgx-grid input, .bgx-grid select { font-size: 14px; padding: 7px 9px; border-radius: 9px; }
  .bgx-go { padding: 11px; font-size: 15.5px; border-radius: 11px; }
  .bgx-go.ghost { margin-top: 7px; }
  .bgx-hint { margin-top: 8px; font-size: 11px; }
  /* 설정 화면에서는 장식용 줄을 접어 시작 버튼까지 한눈에 들어오게 합니다. */
  .bgx-card.setup .bgx-chips, .bgx-card.setup .bgx-hint { display: none; }
  .bgx-card.setup .sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* 폭이 넉넉하면 이름 칸을 세 개씩 늘어놓습니다. */
@media (min-width: 640px) {
  #gpSeats .bgx-grid, #dpSeats .bgx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== 각개전투: 밀려난 필드 카드를 어떻게 할지 고르는 화면 ===== */
.dw-ask .box.wide { max-width: 640px; }
.dw-ask-cards { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.dw-ask-tip { margin: 0 0 14px; font-size: 12.5px; line-height: 1.6; opacity: .78; text-align: center; }
.dw-slots {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 14px;
}
.dw-slot {
  flex: 0 0 auto; width: 26px; height: 62px; border-radius: 7px;
  background: rgba(240,192,74,.14); border: 1.5px dashed rgba(240,192,74,.55);
  color: var(--gold); font-size: 17px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.dw-slot:hover, .dw-slot:active { background: rgba(240,192,74,.4); color: #3a2503; transform: scaleY(1.06); }
@media (max-height: 460px) {
  .dw-ask-cards .dcard.sm, .dw-slots .dcard.sm { width: 36px; height: 50px; }
  .dw-slot { width: 20px; height: 50px; }
  .dw-ask-tip { margin-bottom: 9px; font-size: 11.5px; }
  .dw-ask .box { padding: 13px; }
  .dw-ask h2 { font-size: 18px; margin-bottom: 8px; }
}