:root {
  color-scheme: dark;
  --felt: #0b5a43;
  --felt-dark: #07362f;
  --felt-light: #14805f;
  --rail: #2a1710;
  --gold: #f2c75d;
  --ink: #f7f1e6;
  --muted: #b8cbc2;
  --danger: #d84a4a;
  --card-red: #c92f38;
  --card-black: #1f2424;
  --panel: rgba(5, 22, 20, 0.78);
  --line: rgba(255, 255, 255, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 50% 30%, rgba(29, 138, 99, 0.32), transparent 35rem),
    linear-gradient(135deg, #101514 0%, #19110d 50%, #080b0a 100%);
  color: var(--ink);
}

#pixiRoot {
  position: fixed;
  inset: 0;
  display: none;
  background: #071f1b;
}

body.pixi-active #pixiRoot {
  display: block;
}

body.pixi-active {
  min-width: 360px;
  min-height: 100dvh;
  overflow: auto;
  overscroll-behavior-y: auto;
}

body.pixi-active #pixiRoot {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100dvh;
  min-width: 360px;
}


body.pixi-active .game-shell {
  display: none;
}

#pixiRoot canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.room-overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: none;
  pointer-events: none;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 72px 20px 28px;
  color: #f7f1e6;
}

body.room-active .room-overlay { display: block; pointer-events: auto; }
.room-screen { display: grid; gap: 12px; }
.room-screen.is-hidden { display: none; }
.room-overlay .is-hidden { display: none !important; }
.lobby-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; text-shadow: 0 2px 4px #07120f; }
.lobby-heading > div:first-child { display: grid; gap: 2px; }
.lobby-heading span { color: #f2c75d; font-size: 0.78rem; font-weight: 800; }
.lobby-heading strong { font-size: 1.5rem; }
.portal-account { position: fixed; z-index: 6; top: 7px; right: max(10px, calc((100vw - 520px) / 2 + 10px)); display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 6px 5px 10px; border: 1px solid rgba(159, 240, 219, .35); border-radius: 8px; background: rgba(0, 0, 0, .22); color: #fffaf0; font-size: 12px; font-weight: 900; }
.portal-account span { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-account button { min-height: 28px; padding: 0 9px; border: 1px solid rgba(159, 240, 219, .32); border-radius: 7px; background: rgba(255, 255, 255, .1); color: #9ff0db; box-shadow: none; font-size: 11px; }
.portal-account #portalLogoutButton { border-color: rgba(159, 240, 219, .32); background: rgba(255, 255, 255, .1); color: #9ff0db; }
.lobby-toolbar, .form-row, .waiting-actions, .chat-form { display: flex; gap: 8px; }
.lobby-toolbar { justify-content: flex-end; }
.lobby-toolbar input, .chat-form input { flex: 1; }
.room-overlay input, .room-overlay select, .room-overlay button { min-height: 38px; border-radius: 6px; font: inherit; }
.room-overlay input, .room-overlay select { border: 1px solid #5a8876; background: rgba(6, 35, 29, .94); color: #f7f1e6; padding: 0 10px; }
.room-overlay button { border: 1px solid #b88e36; background: #1a4539; color: #fff7dc; padding: 0 13px; font-weight: 800; cursor: pointer; }
.room-overlay button:hover { filter: brightness(1.15); }
.room-overlay button:disabled { opacity: .45; cursor: not-allowed; }
.primary-room-button { background: #8d691d !important; border-color: #f2c75d !important; }
.room-list { display: grid; gap: 8px; max-height: calc(100vh - 170px); overflow-y: auto; padding-right: 2px; }
.room-list:empty::before { content: "아직 만들어진 방이 없습니다."; text-align: center; color: #d5e5dc; padding: 40px 12px; }
.room-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(220, 174, 70, .75); border-radius: 7px; background: rgba(4, 37, 30, .91); box-shadow: inset 0 0 0 2px rgba(2, 17, 14, .5); }
.room-item strong { display: block; font-size: 1rem; }
.room-item span { color: #d6c16e; font-size: .77rem; }
.create-screen, .waiting-screen { padding: 15px; border: 1px solid #a57b32; border-radius: 8px; background: rgba(5, 29, 23, .95); box-shadow: 0 10px 35px rgba(0,0,0,.48); }
.create-screen { position: fixed; z-index: 4; top: 50%; left: 50%; width: min(420px, calc(100vw - 40px)); transform: translate(-50%, -50%); }
.create-screen::before { content: ""; position: fixed; z-index: -1; inset: -100vmax; background: rgba(0, 0, 0, .48); }
.create-screen label { display: grid; gap: 6px; color: #edd584; font-size: .78rem; font-weight: 700; }
.room-form-head, .waiting-header { display: flex; justify-content: space-between; align-items: center; }
.room-form-head strong { color: #f2c75d; font-size: 1.15rem; }
.room-form-head button { min-width: 34px; padding: 0; font-size: 1.4rem; }
.form-row > label { flex: 1; }
.private-toggle { display: flex !important; align-items: center; grid-template-columns: auto 1fr; }
.private-toggle input { min-height: auto; }
.waiting-header { border-bottom: 1px solid rgba(221, 180, 77, .45); padding-bottom: 10px; }
.waiting-header span { display: block; color: #f2c75d; font-weight: 800; }
.waiting-header strong { font-size: .8rem; color: #d4e6dd; }
.member-list { display: flex; flex-wrap: wrap; gap: 7px; }
.member { padding: 6px 9px; border-radius: 4px; background: #164438; border: 1px solid #508b76; font-size: .8rem; }
.member.ready { border-color: #f2c75d; color: #ffe798; }
.chat-log { min-height: 240px; max-height: calc(100vh - 370px); overflow-y: auto; padding: 12px 10px; border: 1px solid #386b5b; border-radius: 6px; background: rgba(1, 17, 13, .78); font-size: .83rem; }
.chat-line { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; max-width: 82%; margin: 0 0 10px; color: #f7f1e6; word-break: break-word; }
.chat-line b { margin: 0 0 3px 6px; color: #9ee7c4; font-size: .71rem; }
.chat-line span { position: relative; padding: 8px 11px; border: 1px solid #53977d; border-radius: 3px 10px 10px 10px; background: #1e5e4c; box-shadow: 0 2px 0 rgba(0, 0, 0, .28); line-height: 1.35; }
.chat-line span::before { content: ""; position: absolute; top: -1px; left: -6px; width: 8px; height: 8px; background: #1e5e4c; border-left: 1px solid #53977d; border-top: 1px solid #53977d; transform: skewY(38deg); }
.chat-line.mine { align-items: flex-end; margin-left: auto; }
.chat-line.mine b { margin: 0 6px 3px 0; color: #ffe293; }
.chat-line.mine span { border-color: #e0ad45; border-radius: 10px 3px 10px 10px; background: #806221; color: #fff9e4; }
.chat-line.mine span::before { right: -6px; left: auto; border: 0; border-right: 1px solid #e0ad45; border-top: 1px solid #e0ad45; background: #806221; transform: skewY(-38deg); }
.chat-line.system { display: block; width: 100%; max-width: none; margin: 5px 0 10px; text-align: center; color: #dcc574; font-size: .72rem; }
.waiting-actions button { flex: 1; }

/* Match the project's Any PangPang room chat layout: head, player strip, prompt, chat, composer. */
.waiting-screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  width: min(520px, 100%);
  height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 18% 0%, rgba(31, 155, 112, .22), transparent 32%), linear-gradient(180deg, rgba(8, 33, 28, .98), rgba(4, 17, 14, .99));
  box-shadow: none;
}
.waiting-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 0 0 8px; border-bottom: 0; }
.waiting-header > div:first-child { display: grid; gap: 4px; min-width: 0; }
.waiting-header span { overflow: hidden; color: #9fe8c4; font-size: .98rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.waiting-header strong { width: fit-content; padding: 3px 7px; border: 1px solid rgba(242, 199, 93, .34); border-radius: 999px; background: rgba(242, 199, 93, .13); color: #fff0b6; font-size: .7rem; }
.waiting-head-actions button { min-height: 32px; padding: 0 10px; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #e9f5ef; font-size: .73rem; }
.member-list { flex-wrap: nowrap; min-width: 0; overflow-x: auto; padding: 2px 0 5px; scrollbar-width: none; }
.member-list::-webkit-scrollbar { display: none; }
.member { flex: 0 1 auto; min-width: 94px; max-width: 145px; overflow: hidden; padding: 7px 9px; border-color: rgba(255,255,255,.16); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.1), transparent), rgba(255,255,255,.06); color: #eef6f1; font-size: .73rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.member.ready { border-color: rgba(242,199,93,.62); background: linear-gradient(180deg, rgba(242,199,93,.2), transparent), rgba(242,199,93,.1); color: #ffe9a0; }
.waiting-actions { justify-content: center; gap: 8px; }
.waiting-actions button { flex: 0 1 150px; min-height: 42px; border-radius: 8px; font-size: .88rem; }
.chat-log { min-height: 0; max-height: none; padding: 4px 2px; border: 0; border-radius: 0; background: transparent; }
.chat-form { gap: 8px; }
.chat-form input { min-height: 44px; border-color: rgba(255,255,255,.16); border-radius: 8px; background: rgba(0,0,0,.25); font-weight: 800; }
.chat-form button { min-width: 64px; min-height: 44px; border-radius: 8px; background: rgba(159,240,219,.18); border-color: rgba(159,240,219,.36); color: #baffea; }

.confirm-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; }
.confirm-modal.is-hidden { display: none; }
.confirm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); }
.confirm-panel { position: relative; width: min(350px, 100%); display: grid; gap: 12px; padding: 20px; border: 1px solid #c79b43; border-radius: 9px; background: linear-gradient(180deg, #163a31, #0a211b); box-shadow: 0 16px 44px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.12); }
.confirm-panel strong { color: #ffe28a; font-size: 1.1rem; text-align: center; }
.confirm-panel p { margin: 0; color: #e4efe9; font-size: .86rem; line-height: 1.55; text-align: center; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.confirm-actions button { min-height: 42px; border: 1px solid #5f8879; border-radius: 7px; background: #17483c; color: #f5fff9; font-weight: 850; }
.confirm-actions button:last-child { border-color: #f2c75d; background: #8b6820; color: #fff7dc; }
.confirm-actions button:last-child.danger { border-color: #ee9a8d; background: #803c3a; color: #fff3ee; }

button,
input {
  font: inherit;
}

.game-shell {
  width: min(1200px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 28px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

.top-bar,
.control-strip {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

.top-bar {
  min-height: 82px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: grid;
  gap: 4px;
}

.brand span,
.stats span,
.seat-meta span,
.bet-control label,
.seat small {
  color: var(--muted);
  font-size: 0.84rem;
}

.brand strong {
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 10px;
}

.stats div {
  min-width: 88px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  gap: 3px;
}

.stats strong {
  color: var(--gold);
  font-size: 1.08rem;
}

.table {
  position: relative;
  min-height: 620px;
  padding: clamp(16px, 3vw, 34px);
  border: 18px solid var(--rail);
  border-radius: 48px;
  background:
    repeating-radial-gradient(ellipse at center, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 14px),
    radial-gradient(ellipse at center, var(--felt-light), var(--felt) 44%, var(--felt-dark) 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    inset 0 0 44px rgba(0, 0, 0, 0.35),
    0 26px 70px rgba(0, 0, 0, 0.34);
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(360px, 1.4fr) minmax(190px, 1fr);
  grid-template-rows: minmax(140px, auto) 1fr minmax(250px, auto);
  grid-template-areas:
    ". top ."
    "left center right"
    "bottom bottom bottom";
  gap: 14px;
}

.seat {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
}

.seat-top {
  grid-area: top;
}

.seat-left {
  grid-area: left;
}

.seat-right {
  grid-area: right;
}

.my-area-zone {
  grid-area: bottom;
  display: block;
  align-self: stretch;
  justify-self: center;
  width: min(900px, 100%);
}

.my-area {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid rgba(242, 199, 93, 0.62);
  border-radius: 12px;
  background: rgba(30, 22, 8, 0.42);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.16);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "hand"
    "controls";
  align-items: center;
  gap: 5px 14px;
}

.my-area .hole-wrap {
  grid-area: hand;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.my-area .control-strip {
  grid-area: controls;
  width: 100%;
  padding: 8px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.center-panel {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  align-self: stretch;
  display: grid;
  justify-items: center;
}

.table-public-zone {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: radial-gradient(ellipse at center, #106d50, #084536 72%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 8px 18px rgba(0, 0, 0, 0.16);
}

.table-public-zone > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.table-public-cards {
  min-height: 50px;
  max-width: 100%;
}

.public-hands {
  position: absolute;
  inset: 4%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(70px, 0.7fr) minmax(0, 1.15fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas:
    "north north north"
    "west . east"
    "south south south";
  gap: 8px;
}

.table-game-status {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(200px, 26%);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 7px;
}

.table-game-status .status-panel {
  width: 100%;
  min-height: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.42);
}

.table-game-status .status-panel strong {
  font-size: 0.84rem;
}

.table-game-status .status-panel span {
  font-size: 0.72rem;
  line-height: 1.25;
}

.public-hand {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
}

.public-north { grid-area: north; }
.public-south { grid-area: south; }
.public-west { grid-area: west; }
.public-east { grid-area: east; }

.public-hand .cards.compact {
  max-width: 100%;
  min-height: 0;
  flex-wrap: nowrap;
  overflow: visible;
}

.public-hand .compact .card {
  width: clamp(42px, 6vw, 76px);
}

.public-hand .compact .card + .card {
  margin-left: -32px;
}

.public-hand.winner {
  outline: 0;
}

.public-hand.winner .table-public-cards {
  position: relative;
}

.public-hand.winner .table-public-cards::before {
  content: "승리";
  position: absolute;
  z-index: 3;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: #2a190c;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.public-hand .card-corner b {
  font-size: clamp(0.62rem, 1.1vw, 0.9rem);
}

.public-hand .card-corner i {
  font-size: clamp(0.55rem, 0.95vw, 0.78rem);
}

.public-hand .card-symbol {
  font-size: clamp(1.25rem, 2.8vw, 2rem);
}

.public-hand > small {
  color: var(--muted);
  font-size: 0.62rem;
  white-space: nowrap;
}

.public-hand .seat-meta {
  width: fit-content;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.66rem;
  display: grid;
  justify-items: center;
  gap: 1px;
  text-align: center;
}

.public-hand .seat-meta strong {
  font-size: 0.66rem;
}

.public-hand .seat-meta span {
  position: relative;
  line-height: 1.1;
}

.public-hand.boss {
  outline: 0;
}

.public-hand.boss .seat-meta {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-hand.boss .seat-meta span::after {
  content: "보스";
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  border-radius: 999px;
  background: var(--gold);
  color: #2a190c;
  font-size: 0.48rem;
  font-weight: 800;
  line-height: 1.1;
  vertical-align: middle;
}

.seat-meta {
  width: min(210px, 100%);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.seat-meta strong {
  color: var(--gold);
  font-size: 0.94rem;
}

.cards {
  width: 100%;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.cards.compact {
  max-width: 380px;
  flex-wrap: wrap;
}

.player-cards {
  min-height: 126px;
  gap: clamp(6px, 1.5vw, 12px);
  flex-wrap: wrap;
}

.hole-wrap {
  min-width: 150px;
  min-height: 118px;
  padding: 10px 12px;
  border: 2px solid rgba(242, 199, 93, 0.62);
  border-radius: 12px;
  background: rgba(30, 22, 8, 0.42);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.16);
  display: grid;
  justify-items: center;
  gap: 8px;
}

.hole-wrap > span {
  color: var(--gold);
  font-size: 0.84rem;
  font-weight: 800;
}

.hole-cards {
  min-height: 86px;
  gap: 8px;
}

.hole-cards .card {
  border: 0;
}

.card {
  width: clamp(44px, 6.6vw, 74px);
  aspect-ratio: 0.7;
  position: relative;
  overflow: hidden;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #d8d6ce;
  background: #fffefa;
  color: var(--card-black);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.18), 0 9px 16px rgba(0, 0, 0, 0.22);
  line-height: 1;
  user-select: none;
}

.compact .card {
  width: clamp(38px, 5.3vw, 58px);
}

.card.red {
  color: var(--card-red);
}

.card.back {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent),
    repeating-linear-gradient(45deg, #173e8a 0 8px, #0f2a60 8px 16px);
  border: 2px solid rgba(255, 255, 255, 0.72);
}

.empty-cards {
  min-width: 110px;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 0.84rem;
}

.card-corner {
  position: absolute;
  z-index: 2;
  left: 5%;
  top: 5%;
  width: 19%;
  display: grid;
  justify-items: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  line-height: 0.82;
}

.card-corner b {
  font-size: clamp(0.63rem, 1.25vw, 0.92rem);
}

.card-corner i {
  margin-top: 2px;
  font-size: clamp(0.56rem, 1.05vw, 0.78rem);
  font-style: normal;
}

.card-corner-bottom {
  inset: auto 5% 5% auto;
  transform: rotate(180deg);
}

.card-symbol {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(1.35rem, 3.4vw, 2.2rem);
}

.choice-card {
  cursor: pointer;
  outline: 3px solid rgba(242, 199, 93, 0.62);
  outline-offset: 3px;
  transition: transform 150ms ease, outline-color 150ms ease;
}

.choice-card:hover {
  transform: translateY(-4px);
  outline-color: rgba(242, 199, 93, 0.95);
}

.hole-cards .card,
.hole-cards .choice-card,
.hole-cards .choice-card:hover {
  border: none;
  outline: none;
  box-shadow: none;
}

.stage-chip {
  width: max-content;
  min-width: 92px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: #2a190c;
  font-weight: 800;
  text-align: center;
}

.status-panel {
  width: min(480px, 100%);
  min-height: 84px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.29);
  display: grid;
  gap: 6px;
  text-align: center;
}

.status-panel span {
  color: var(--muted);
  font-size: 0.94rem;
}

.control-strip {
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 14px;
  align-items: center;
}

.bet-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.bet-control output {
  width: 52px;
  color: var(--gold);
  font-weight: 800;
  text-align: right;
}

input[type="range"] {
  accent-color: var(--gold);
}

.actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  gap: 10px;
}

button {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.17);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

#raiseButton {
  background: rgba(242, 199, 93, 0.22);
  color: #fff4d7;
}

#foldButton {
  background: rgba(216, 74, 74, 0.22);
}

.folded {
  opacity: 0.46;
}

.winner {
  outline: 3px solid rgba(242, 199, 93, 0.9);
  outline-offset: 4px;
}

.boss {
  outline: 3px solid rgba(242, 199, 93, 0.72);
  outline-offset: 4px;
}

.boss .seat-meta {
  border-color: rgba(242, 199, 93, 0.7);
  box-shadow: 0 0 0 1px rgba(242, 199, 93, 0.22);
}

.turn {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 7px;
}

.turn .seat-meta {
  background: rgba(242, 199, 93, 0.2);
  border-color: rgba(255, 255, 255, 0.72);
}

.public-hand.turn {
  outline: 0;
}

.public-hand.turn .seat-meta {
  border: 0;
  background: transparent;
}

.public-hand.turn .seat-meta span::before {
  content: "생각 중";
  display: inline-block;
  margin-right: 4px;
  padding: 1px 4px;
  border-radius: 999px;
  background: #f7f1e6;
  color: #16352d;
  font-size: 0.48rem;
  font-weight: 800;
  line-height: 1.1;
  vertical-align: middle;
}

#seat0.turn .seat-meta span::before {
  content: "내 차례";
}

@media (max-width: 820px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  body {
    background: linear-gradient(145deg, #101514 0%, #17110d 100%);
  }

  .game-shell {
    height: 100dvh;
    min-height: 0;
    padding: 6px;
    grid-template-rows: 52px minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
  }

  .top-bar,
  .control-strip {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .top-bar {
    min-height: 0;
    padding: 5px 6px;
    flex-direction: row;
    gap: 8px;
    box-shadow: none;
  }

  .brand {
    min-width: 72px;
    gap: 0;
  }

  .brand span {
    display: none;
  }

  .brand strong {
    font-size: 1rem;
    line-height: 1.05;
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    flex: 1;
  }

  .stats div {
    min-width: 0;
    padding: 5px 6px;
    gap: 0;
  }

  .stats span {
    font-size: 0.64rem;
  }

  .stats strong {
    font-size: 0.82rem;
  }

  .table {
    min-height: 0;
    height: 100%;
    border-width: 8px;
    border-radius: 24px;
    grid-template-columns: minmax(60px, 0.7fr) minmax(154px, 1.5fr) minmax(60px, 0.7fr);
    grid-template-rows: 78px minmax(260px, 1fr) minmax(210px, auto);
    grid-template-areas:
      ". top ."
      "left center right"
      "bottom bottom bottom";
    gap: 4px;
    padding: 7px;
  }

  .seat {
    gap: 3px;
    align-content: center;
  }

  .seat-meta {
    width: 100%;
    min-height: 26px;
    padding: 4px 6px;
    gap: 4px;
  }

  .seat-meta span,
  .seat-meta strong,
  .seat small {
    font-size: 0.66rem;
  }

  .cards {
    min-height: 50px;
    gap: 0;
  }

  .cards.compact {
    max-width: 116px;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .cards.compact .card + .card,
  .player-cards .card + .card,
  .hole-cards .card + .card {
    margin-left: -18px;
  }

  .player-cards {
    min-height: 66px;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .table-public-zone {
    min-height: 260px;
    border-radius: 7px;
    border-width: 1px;
  }

  .table-game-status {
    width: 30%;
    gap: 3px;
  }

  .table-game-status .stage-chip {
    min-width: 58px;
    padding: 4px 6px;
    font-size: 0.62rem;
  }

  .table-game-status .status-panel {
    padding: 4px;
  }

  .table-game-status .status-panel strong {
    font-size: 0.62rem;
  }

  .table-game-status .status-panel span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.54rem;
  }

  .table-public-zone > span {
    font-size: 0.6rem;
  }

  .table-public-cards {
    min-height: 30px;
  }

  .public-hand > small {
    font-size: 0.48rem;
  }

  .public-hand .seat-meta,
  .public-hand .seat-meta strong {
    padding: 0;
    font-size: 0.48rem;
  }

  .public-hand.boss .seat-meta span::after {
    margin-left: 2px;
    padding: 1px 2px;
    font-size: 0.4rem;
  }

  .public-hand.turn .seat-meta span::before {
    margin-right: 2px;
    padding: 1px 2px;
    font-size: 0.4rem;
  }

  .public-hands {
    inset: 3%;
    gap: 2px;
  }

  .public-hand .compact .card {
    width: 44px;
  }

  .public-hand .compact .card + .card {
    margin-left: -24px;
  }

  .public-hand.winner .table-public-cards::before {
    top: -10px;
    padding: 1px 4px;
    font-size: 0.48rem;
  }

  .public-hand .card-corner b {
    font-size: 0.58rem;
  }

  .public-hand .card-corner i {
    font-size: 0.5rem;
  }

  .public-hand .card-symbol {
    font-size: 1.2rem;
  }


  .my-area {
    padding: 6px;
    border-width: 1px;
    border-radius: 8px;
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .my-area .control-strip {
    padding-top: 3px;
  }

  .hole-wrap {
    min-width: 112px;
    min-height: 68px;
    padding: 5px 6px;
    border-width: 1px;
    border-radius: 7px;
    gap: 4px;
  }

  .hole-wrap > span {
    font-size: 0.68rem;
  }

  .hole-cards {
    min-height: 64px;
  }

  .center-panel {
    gap: 6px;
  }

  .stage-chip {
    min-width: 70px;
    padding: 5px 8px;
    font-size: 0.72rem;
  }

  .status-panel {
    min-height: 62px;
    padding: 8px;
    gap: 3px;
  }

  .status-panel strong {
    font-size: 0.82rem;
  }

  .status-panel span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  #dealButton {
    display: none;
  }

  .control-strip {
    padding: 6px;
    gap: 6px;
    box-shadow: none;
  }

  .bet-control {
    grid-template-columns: 42px minmax(0, 1fr) minmax(34px, auto);
    gap: 6px;
  }

  .bet-control output {
    width: auto;
    min-width: 34px;
    text-align: center;
    white-space: nowrap;
  }

  .bet-control label,
  .bet-control output {
    font-size: 0.72rem;
  }

  button {
    min-height: 38px;
    padding: 0 5px;
    font-size: 0.76rem;
  }

  .card {
    width: clamp(34px, 10.6vw, 45px);
    border-radius: 6px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.24);
  }

  .compact .card {
    width: clamp(28px, 8.6vw, 37px);
  }

  .card-corner b {
    font-size: 0.49rem;
  }

  .card-corner i {
    margin-top: 1px;
    font-size: 0.43rem;
  }

  .card-symbol {
    font-size: 1.08rem;
  }

  .empty-cards {
    min-width: 72px;
    min-height: 34px;
    padding: 8px;
    font-size: 0.66rem;
  }

  .boss,
  .turn,
  .winner {
    outline-width: 2px;
    outline-offset: 1px;
  }
}

@media (max-width: 380px) {
  .game-shell {
    grid-template-rows: 48px minmax(0, 1fr);
  }

  .table {
    grid-template-rows: 68px minmax(230px, 1fr) minmax(205px, auto);
    border-width: 7px;
    padding: 5px;
  }

  .cards.compact .card + .card,
  .player-cards .card + .card,
  .hole-cards .card + .card {
    margin-left: -20px;
  }

  .card {
    width: 34px;
  }

  .compact .card {
    width: 29px;
  }

  .hole-wrap {
    min-width: 104px;
  }
}

/* The legacy mobile layout hides document overflow. Pixi owns the full board, so it must remain scrollable. */
@media (max-width: 820px) {
  html {
    height: auto;
    overflow: auto !important;
  }

  body.pixi-active {
    height: auto;
    min-height: 100dvh;
    overflow: auto !important;
  }

}