/* ══════════════════════════════════════════════════════════════
   Thai Dummy — teak, jade felt and brass.
   ══════════════════════════════════════════════════════════════ */

:root {
  --felt-1: #0f4038;
  --felt-2: #07231f;
  --felt-edge: #052018;
  --teak-1: #7a4a26;
  --teak-2: #351d10;
  --brass: #c9a227;
  --brass-lit: #f0d585;
  --ivory: #f6efdd;
  --ivory-dim: #d9cfb6;
  --ink: #17140f;
  --red: #b02a1f;
  --jade-lit: #3ea88c;
  --danger: #d3564a;

  --card-w: clamp(52px, 8.4vw, 78px);
  --card-h: calc(var(--card-w) * 1.42);
  --r: 14px;

  --shadow-lift: 0 18px 34px -14px rgb(0 0 0 / .75);
  --font-display: 'Chonburi', Georgia, serif;
  --font-body: 'Bai Jamjuree', 'Trebuchet MS', sans-serif;
}

* { box-sizing: border-box; }

/* `hidden` has to beat the display rules the panels set on themselves. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font-body);
  color: var(--ivory);
  background:
    radial-gradient(120% 90% at 50% -10%, #1b6152 0%, transparent 60%),
    linear-gradient(168deg, #2a170d 0%, #150c07 55%, #0b0705 100%);
  /* Pinned, so a page taller than the viewport does not scroll off the end of it. */
  background-attachment: fixed;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Film grain — stops the flat colours reading as plastic.
   Deliberately NOT mix-blend-mode: a blending full-viewport layer isolates the whole
   page into one group and washes every dialog painted above it into a ghost. Plain
   opacity gets the same texture and composites predictably. */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

button, input { font: inherit; color: inherit; }

/* ─────────────────────────  buttons  ───────────────────────── */

.btn {
  border: 1px solid rgb(201 162 39 / .45);
  background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(0 0 0 / .22));
  color: var(--ivory);
  padding: .68em 1.35em;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s, background .2s, opacity .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgb(0 0 0 / .8); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .34; cursor: default; }

.btn-gold {
  background: linear-gradient(178deg, var(--brass-lit), var(--brass) 55%, #9c7a13);
  color: #241a03; border-color: #e5c76d;
  box-shadow: 0 10px 26px -12px rgb(201 162 39 / .9), inset 0 1px 0 rgb(255 255 255 / .5);
}
.btn-ghost { border-color: rgb(246 239 221 / .25); background: rgb(255 255 255 / .04); }
.btn-sm { padding: .48em 1em; font-size: .84rem; }

.link-btn {
  background: none; border: 0; cursor: pointer;
  color: var(--ivory-dim); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: rgb(201 162 39 / .5);
  font-size: .86rem;
}
.link-btn:hover { color: var(--brass-lit); }

.icon-btn {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid rgb(246 239 221 / .2); background: rgb(0 0 0 / .3);
  cursor: pointer; line-height: 1; display: grid; place-items: center;
}
.icon-btn:hover { border-color: var(--brass); color: var(--brass-lit); }
/* Labelled, not an icon. A "?" does not say "how to play", and a tooltip saying so is
   no use on a phone — someone stuck mid-hand has to be able to read the way out. */
.help-btn {
  flex: none; white-space: nowrap; cursor: pointer;
  padding: .42em 1em; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
  color: #241a03;
  background: linear-gradient(178deg, var(--brass-lit), var(--brass) 55%, #9c7a13);
  border: 1px solid #e5c76d;
  box-shadow: 0 8px 20px -12px rgb(201 162 39 / .9), inset 0 1px 0 rgb(255 255 255 / .45);
  transition: transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s;
}
.help-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgb(0 0 0 / .8); }
.help-btn:active { transform: translateY(0); }

/* The coach sits beside the rules button — same tier of thing, a way to get unstuck. */
.coach-btn {
  flex: none; white-space: nowrap; cursor: pointer;
  padding: .42em 1em; border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--felt-2);
  background: linear-gradient(178deg, #7fd3ba, var(--jade-lit) 60%, #2c7d67);
  border: 1px solid #8fe0c6;
  box-shadow: 0 8px 20px -12px rgb(62 168 140 / .9), inset 0 1px 0 rgb(255 255 255 / .45);
  transition: transform .16s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s, opacity .2s;
}
.coach-btn:hover { transform: translateY(-2px); }
.coach-btn:disabled { opacity: .5; cursor: progress; transform: none; }

.coach-answer {
  margin: 0 0 1rem; min-height: 3.2em; text-align: left;
  font-size: .92rem; line-height: 1.75; color: var(--ivory);
  background: rgb(0 0 0 / .25); border: 1px solid rgb(62 168 140 / .3);
  border-radius: 14px; padding: .9rem 1rem;
}
.coach-answer.waiting { color: var(--ivory-dim); font-style: italic; }
.coach-answer.failed { border-color: rgb(211 86 74 / .5); color: var(--danger); }
.coach-form { display: flex; gap: .5rem; margin-bottom: .7rem; }
.coach-form input { flex: 1; }
.coach-note {
  margin: 0 0 1rem; font-size: .72rem; line-height: 1.6;
  color: var(--ivory-dim); opacity: .65; text-align: left;
}

/* The way out, in the corner people already look for a back button. It was only in
   the ☰ panel before, which is nobody's first guess for "how do I leave". */
.exit-btn {
  flex: none; white-space: nowrap; cursor: pointer;
  padding: .42em .95em; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--ivory-dim);
  background: rgb(0 0 0 / .3); border: 1px solid rgb(246 239 221 / .22);
  transition: border-color .2s, color .2s, transform .16s;
}
.exit-btn:hover { border-color: var(--brass); color: var(--brass-lit); transform: translateX(-2px); }

/* ─────────────────────────  entry + lobby  ───────────────────────── */

.lobby {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 5vw;
  overflow-y: auto;
}
.entry {
  position: fixed; inset: 0; overflow-y: auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2.5rem) 4rem;
}
.entry-inner { max-width: 1100px; margin: 0 auto; animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.lobby-card { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }

.lobby-card {
  width: min(430px, 100%);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: 26px;
  background:
    linear-gradient(165deg, rgb(255 255 255 / .07), rgb(0 0 0 / .3)),
    linear-gradient(180deg, var(--felt-1), var(--felt-2));
  border: 1px solid rgb(201 162 39 / .3);
  box-shadow: 0 40px 90px -30px #000, inset 0 1px 0 rgb(255 255 255 / .12);
}
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.985); } }

.brand { text-align: center; margin-bottom: 2rem; }
.brand-thai {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 3.4rem); color: var(--brass);
  line-height: 1; text-shadow: 0 2px 0 #6d5410, 0 12px 30px rgb(201 162 39 / .35);
}
.brand h1 {
  margin: .35rem 0 0; font-family: var(--font-display);
  font-size: clamp(1.15rem, 4vw, 1.5rem); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ivory);
}
.brand-game {
  margin: .8rem 0 0; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); position: relative;
}
.brand-game::before, .brand-game::after {
  content: ''; position: absolute; top: 50%; width: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(201 162 39 / .6));
}
.brand-game::before { left: 4%; }
.brand-game::after { right: 4%; transform: scaleX(-1); }
.brand-sub { margin: .45rem 0 0; color: var(--ivory-dim); font-size: .85rem; opacity: .75; }

.field { display: block; margin-bottom: 1.2rem; }
.field span {
  display: block; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass); margin-bottom: .45rem;
}
input {
  width: 100%; padding: .8em 1em; border-radius: 12px;
  border: 1px solid rgb(246 239 221 / .22); background: rgb(0 0 0 / .3);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgb(201 162 39 / .18); }
input::placeholder { color: rgb(246 239 221 / .35); }

/* The language switch, top of the menu where it is found before anything else. */
.entry-top {
  display: flex; justify-content: flex-end; align-items: center; gap: .6rem;
  margin-bottom: .8rem; flex-wrap: wrap;
}
.install-btn { border-color: rgb(201 162 39 / .5); color: var(--brass-lit); }
.install-steps {
  text-align: left; margin: 0 0 1.2rem; padding-left: 1.2rem;
  display: grid; gap: .5rem; font-size: .86rem; line-height: 1.6; color: var(--ivory-dim);
}
.install-steps li::marker { color: var(--brass); font-weight: 700; }

.pick-name {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  justify-content: center; margin-bottom: 2.2rem;
}
.pick-name .field { margin: 0; min-width: 220px; }
.entry-join { display: flex; gap: .6rem; }
.entry-join input {
  flex: 1; text-transform: uppercase; letter-spacing: .35em;
  text-align: center; font-weight: 700;
}
.pick-head {
  text-align: center; font-family: var(--font-display); font-weight: 400;
  font-size: 1rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 1.2rem;
}

/* ─────────────────────────  the menu of games  ───────────────────────── */

.game-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.game-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.25rem; border-radius: 20px;
  background: linear-gradient(165deg, rgb(255 255 255 / .07), rgb(0 0 0 / .3)),
              linear-gradient(180deg, var(--felt-1), var(--felt-2));
  border: 1px solid rgb(201 162 39 / .28);
  box-shadow: 0 24px 50px -30px #000, inset 0 1px 0 rgb(255 255 255 / .1);
  transition: transform .2s cubic-bezier(.2,.9,.3,1.2), border-color .2s, box-shadow .2s;
}
.game-card:hover {
  transform: translateY(-4px); border-color: var(--brass);
  box-shadow: 0 30px 60px -28px #000, 0 0 30px -14px rgb(201 162 39 / .6);
}
.game-top { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.game-card h3 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 1.25rem; color: var(--ivory);
}
.game-thai { font-family: var(--font-display); color: var(--brass); font-size: 1rem; }
.game-tag { margin: 0; color: var(--brass-lit); font-size: .84rem; }
.game-blurb { margin: 0; flex: 1; color: var(--ivory-dim); font-size: .82rem; line-height: 1.55; opacity: .85; }
.game-meta {
  display: flex; justify-content: space-between; gap: .5rem; margin: .2rem 0 .4rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: .6;
}
.game-actions { display: flex; gap: .5rem; }
.game-actions .btn { flex: 1; }
.game-help { align-self: center; margin-top: .1rem; font-size: .85rem; }
/* Thai sits lower and taller than Latin at the same size; give it the room. */
[lang="th"] { line-height: 1.7; }

.lobby-game {
  padding: .9rem 1rem; border-radius: 14px; margin: 1rem 0;
  background: rgb(0 0 0 / .26); border: 1px solid rgb(201 162 39 / .25);
}
.lobby-game h3 {
  margin: 0 0 .2rem; font-family: var(--font-display); font-weight: 400;
  font-size: 1.1rem; color: var(--brass-lit);
}
.lobby-game p { margin: 0; font-size: .8rem; color: var(--ivory-dim); opacity: .8; }
.lobby-links { display: flex; gap: 1.2rem; justify-content: center; margin-top: 1.3rem; }

.lobby-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.eyebrow { margin: 0; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.code {
  margin: .1rem 0 0; font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 2.7rem); letter-spacing: .16em; color: var(--ivory);
  text-shadow: 0 10px 30px rgb(0 0 0 / .6);
}
.lobby-hint { color: var(--ivory-dim); font-size: .85rem; opacity: .8; }

.seat-list { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .5rem; }
.seat-list li {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem; border-radius: 14px;
  background: rgb(0 0 0 / .26); border: 1px solid rgb(246 239 221 / .1);
}
.seat-list .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--jade-lit); }
.seat-list .dot.bot { background: var(--brass); }
.seat-list .who { flex: 1; font-weight: 600; }
.seat-list .tag {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: .75;
}
.seat-list .drop { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: 1.1rem; }
.seat-empty { opacity: .45; font-style: italic; }

.lobby-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: space-between; }
.bot-add { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.bot-add > span { font-size: .78rem; color: var(--ivory-dim); margin-right: .2rem; }
.lobby .link-btn { display: block; margin: 1.3rem auto 0; }

/* ─────────────────────────  the table  ───────────────────────── */

.table {
  position: fixed; inset: 0;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: max(.6rem, env(safe-area-inset-top)) .6rem max(.6rem, env(safe-area-inset-bottom));
  gap: .5rem;
}

.rail { display: flex; align-items: center; gap: .6rem; }
.rail-top { justify-content: space-between; }
.round-chip {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass); border: 1px solid rgb(201 162 39 / .35);
  padding: .35rem .7rem; border-radius: 999px; white-space: nowrap;
}

.opponents { display: flex; gap: .5rem; flex: 1; justify-content: center; flex-wrap: wrap; }

.seat {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .7rem .4rem .45rem; border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(0 0 0 / .3));
  border: 1px solid rgb(246 239 221 / .14);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.seat.active {
  border-color: var(--brass);
  box-shadow: 0 0 0 1px rgb(201 162 39 / .4), 0 0 26px -4px rgb(201 162 39 / .55);
  transform: translateY(-2px);
}
.seat .av {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: .82rem; color: #241a03;
  background: linear-gradient(160deg, var(--brass-lit), var(--brass));
}
.seat.is-bot .av { background: linear-gradient(160deg, #6fb9a3, #2c7d67); color: #052018; }
.seat .meta { display: grid; line-height: 1.15; }
.seat .nm { font-weight: 600; font-size: .84rem; }
.seat .sub { font-size: .68rem; color: var(--ivory-dim); opacity: .75; }
.seat .cards { display: flex; gap: 1px; }
.seat .cards i {
  display: block; width: 6px; height: 11px; border-radius: 2px;
  background: linear-gradient(150deg, #8a5a2f, #43230f);
  border: .5px solid rgb(201 162 39 / .5);
}
.seat .dark-mark { color: var(--brass-lit); font-size: .7rem; }

/* felt */

.felt {
  position: relative; border-radius: 32px; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 34%, #15584b 0%, var(--felt-1) 45%, var(--felt-2) 100%);
  box-shadow:
    inset 0 0 0 6px var(--teak-2),
    inset 0 0 0 8px rgb(201 162 39 / .35),
    inset 0 0 90px 30px rgb(0 0 0 / .55),
    0 30px 70px -30px #000;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .4rem;
  padding: 1.1rem .8rem .8rem;
  min-height: 0;
}
.board { display: grid; align-content: center; gap: .6rem; min-height: 0; overflow-y: auto; }
.board::-webkit-scrollbar { width: 6px; }
.board::-webkit-scrollbar-thumb { background: rgb(201 162 39 / .35); border-radius: 3px; }
/* woven cloth texture */
.felt::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .09;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .5) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / .5) 0 1px, transparent 1px 4px);
}
.felt-inlay {
  position: absolute; inset: 22px; border-radius: 22px; pointer-events: none;
  border: 1px solid rgb(201 162 39 / .17);
}

.melds {
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;
  gap: .5rem; overflow-y: auto; padding: .2rem; min-height: 0; align-content: flex-end;
  scrollbar-width: thin; scrollbar-color: rgb(201 162 39 / .4) transparent;
}
.melds:empty::after {
  content: 'No melds down yet'; margin: auto; color: var(--ivory-dim);
  opacity: .3; font-size: .82rem; letter-spacing: .1em;
}

.meld {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .3rem .4rem .2rem; border-radius: 12px;
  background: rgb(0 0 0 / .25); border: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.meld .cards-row { display: flex; }
.meld .card { margin-right: calc(var(--card-w) * -.52); }
.meld .card:last-child { margin-right: 0; }
.meld .owner {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: .55;
}
.meld.droppable {
  border-color: var(--brass); cursor: pointer;
  box-shadow: 0 0 22px -4px rgb(201 162 39 / .7);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 34px 0 rgb(201 162 39 / .35); } }
.meld.fresh { animation: land .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes land { from { transform: translateY(-26px) scale(.9); opacity: 0; } }

.centre {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  position: relative; padding: 1.4rem 0 1.7rem;
}
.pile-labels {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  display: flex; gap: calc(var(--card-w) + 1.1rem);
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: .5;
}
.pile {
  width: var(--card-w); height: var(--card-h); border-radius: var(--r);
  border: 0; background: none; padding: 0; position: relative; cursor: default;
}
.pile.stock { cursor: pointer; }
.pile-back {
  position: absolute; inset: 0; border-radius: var(--r);
  background:
    repeating-linear-gradient(45deg, rgb(0 0 0 / .18) 0 5px, transparent 5px 10px),
    linear-gradient(155deg, #8a5a2f, #4a2814 60%, #2c1709);
  border: 1px solid rgb(201 162 39 / .5);
  box-shadow: var(--shadow-lift), inset 0 0 0 3px rgb(201 162 39 / .18);
}
.pile.stock::before, .pile.stock::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r);
  background: linear-gradient(155deg, #6d4523, #34190c);
  border: 1px solid rgb(0 0 0 / .5);
}
.pile.stock::before { transform: translate(4px, 4px); z-index: -2; }
.pile.stock::after  { transform: translate(2px, 2px); z-index: -1; }
.pile.stock:hover .pile-back { transform: translateY(-4px); }
.pile.stock .pile-back { transition: transform .2s; }
.pile.stock.live .pile-back {
  box-shadow: var(--shadow-lift), 0 0 24px -2px rgb(201 162 39 / .6);
  animation: beckon 1.9s ease-in-out infinite;
}
.pile.discard.live .card { animation: beckon 1.9s ease-in-out infinite .35s; }
@keyframes beckon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.draw-hint {
  position: absolute; left: 50%; bottom: .15rem; transform: translateX(-50%);
  margin: 0; white-space: nowrap;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-lit); opacity: .9;
  animation: fade .4s ease both;
}
.pile-count {
  position: absolute; inset: auto 0 .35rem; text-align: center;
  font-family: var(--font-display); font-size: .95rem; color: var(--brass-lit);
  text-shadow: 0 1px 3px #000;
}
.pile.discard.live { cursor: pointer; }
.pile.discard.live .card { box-shadow: var(--shadow-lift), 0 0 26px -2px rgb(201 162 39 / .75); }
.pile.discard.drop { cursor: pointer; }
.pile.discard.drop::before {
  content: 'Throw here'; position: absolute; inset: auto 0 -1.5rem; text-align: center;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-lit);
}
.pile.discard.drop .card {
  box-shadow: var(--shadow-lift), 0 0 0 2px var(--brass), 0 0 26px -2px rgb(201 162 39 / .7);
}
.pile.discard:empty::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r);
  border: 1.5px dashed rgb(246 239 221 / .18);
}

.prompt {
  margin: .5rem 0 0; text-align: center; min-height: 1.3em;
  font-size: .86rem; color: var(--brass-lit); letter-spacing: .04em;
}
.prompt.warn { color: var(--danger); }

/* ─────────────────────────  cards  ───────────────────────── */

.card {
  width: var(--card-w); height: var(--card-h); border-radius: var(--r);
  background: linear-gradient(168deg, #fffdf6, var(--ivory) 55%, #e6dcc2);
  color: var(--ink); position: relative; flex: none; cursor: default;
  border: 0; padding: 0;
  box-shadow: 0 2px 4px rgb(0 0 0 / .4), 0 10px 20px -12px rgb(0 0 0 / .8);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3), box-shadow .18s, filter .2s;
  font-family: var(--font-body);
  display: grid; place-items: center;
}
.card .corner {
  position: absolute; top: .22em; left: .34em;
  font-size: calc(var(--card-w) * .27); font-weight: 700; line-height: .95;
  display: grid; justify-items: center;
}
.card .pip { font-size: calc(var(--card-w) * .46); line-height: 1; opacity: .92; }
.card.red { color: var(--red); }
.card.speto::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r);
  border: 2px solid var(--brass); box-shadow: inset 0 0 14px rgb(201 162 39 / .45);
}
.card.joker .pip { font-size: calc(var(--card-w) * .5); }

.hand .card { cursor: pointer; }
.hand.asleep { opacity: .48; filter: saturate(.7); }
.hand.asleep .card { cursor: not-allowed; }
.hand.asleep .card:hover { transform: none; box-shadow: 0 2px 4px rgb(0 0 0 / .4), 0 10px 20px -12px rgb(0 0 0 / .8); }
.hand .card:hover { transform: translateY(-14px); box-shadow: 0 18px 30px -12px rgb(0 0 0 / .9); }
.hand .card.picked {
  transform: translateY(-30px);
  box-shadow: 0 26px 38px -12px rgb(0 0 0 / .9), 0 0 0 3px var(--brass-lit), 0 0 34px -2px rgb(201 162 39 / .85);
}
.hand .card.picked::before {
  content: ''; position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--brass-lit);
}
.hand .card.just-drawn { animation: drawn .6s ease both; }
@keyframes drawn {
  0% { transform: translateY(-40px) rotate(-6deg); opacity: 0; }
  60% { transform: translateY(-16px); }
}

/* ─────────────────────────  hand zone  ───────────────────────── */

.hand-zone { display: grid; gap: .45rem; }
.hand-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.you-chip { display: flex; align-items: baseline; gap: .55rem; font-size: .84rem; }
.you-chip .nm { font-weight: 700; }
.you-chip .sc { color: var(--brass); font-family: var(--font-display); font-size: .95rem; }
.you-chip .sc::after {
  content: ' ' attr(data-unit); font-family: var(--font-body); font-size: .7rem; opacity: .7;
}
.you-chip .dw { color: var(--ivory-dim); opacity: .7; font-size: .78rem; }
.hand-actions { display: flex; gap: .4rem; }

.hand {
  display: flex; justify-content: center; align-items: flex-end;
  padding: 2.5rem .6rem .4rem; min-height: calc(var(--card-h) + 2.7rem);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.hand::-webkit-scrollbar { display: none; }
.hand .card { margin-right: var(--fan, .3rem); }
.hand .card:last-child { margin-right: 0; }

/* ─────────────────────────  overlays  ───────────────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 5vw; background: rgb(3 10 8 / .82);
}
/* Dialogs deliberately have NO entrance animation. An animated layer that starts out
   display:none composites as a translucent ghost in some webviews — the DOM says
   opacity 1, the screen shows the table straight through it, and the panel reads as
   broken. Appearing instantly is worth more than the flourish. */
@keyframes fade { from { opacity: 0; } }

.sheet {
  width: min(420px, 100%); padding: 1.7rem; border-radius: 22px; text-align: center;
  background: linear-gradient(170deg, #17564a, var(--felt-2));
  border: 1px solid rgb(201 162 39 / .35);
  box-shadow: 0 40px 90px -30px #000;
}
.sheet-wide { width: min(560px, 100%); }
.sheet-scroll { max-height: 84vh; overflow-y: auto; text-align: left; }
.sheet h3 {
  margin: 0 0 .4rem; font-family: var(--font-display); font-weight: 400;
  font-size: 1.4rem; color: var(--brass-lit);
}
.sheet-sub { margin: 0 0 1.1rem; font-size: .82rem; color: var(--ivory-dim); opacity: .8; }
.sheet-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.2rem; }

.choice-list { display: grid; gap: .5rem; margin-bottom: 1.1rem; }
.choice {
  display: flex; align-items: center; gap: .5rem; justify-content: center;
  padding: .6rem; border-radius: 14px; cursor: pointer;
  background: rgb(0 0 0 / .28); border: 1px solid rgb(246 239 221 / .14);
  transition: border-color .2s, transform .2s;
}
.choice:hover { border-color: var(--brass); transform: translateY(-2px); }
.choice .mini {
  font-weight: 700; font-size: .95rem; padding: .18rem .4rem; border-radius: 6px;
  background: var(--ivory); color: var(--ink);
}
.choice .mini.red { color: var(--red); }
.choice .lbl { font-size: .78rem; color: var(--ivory-dim); letter-spacing: .08em; text-transform: uppercase; }

.rules-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.rules-head h3 { margin: 0; }
/* Sized for a thumb, not a mouse. This was a 42x22 pill: under half the 44px
   minimum touch target, so on a phone you tapped it and missed. */
.lang-switch {
  display: flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: rgb(0 0 0 / .4); border: 1px solid rgb(201 162 39 / .35);
}
.lang-btn {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  min-width: 58px; min-height: 38px;
  padding: .4em 1em; font-size: .85rem; font-weight: 600;
  color: var(--ivory-dim);
  transition: background .2s, color .2s;
}
.lang-btn:hover { color: var(--ivory); }
.lang-btn.on {
  background: linear-gradient(178deg, var(--brass-lit), var(--brass) 55%, #9c7a13);
  color: #241a03;
}

/* Anything driven by touch gets the full target. */
@media (pointer: coarse) {
  .lang-btn { min-width: 64px; min-height: 44px; font-size: .9rem; }
}

.rules-body p { font-size: .88rem; line-height: 1.62; color: var(--ivory-dim); }
/* Thai needs more room between lines than Latin does at the same size. */
.rules-body[lang="th"] p { line-height: 1.95; font-size: .9rem; }
.rules-body strong { color: var(--brass-lit); font-weight: 600; }
.rules-body em { color: var(--ivory); font-style: normal; border-bottom: 1px dotted rgb(201 162 39 / .5); }

.score-table { display: grid; gap: .5rem; text-align: left; }
.score-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem;
  padding: .7rem .9rem; border-radius: 14px;
  background: rgb(0 0 0 / .26); border: 1px solid rgb(246 239 221 / .1);
}
.score-row.win { border-color: var(--brass); background: rgb(201 162 39 / .12); }
.score-row .nm { font-weight: 700; }
.score-row .bits { font-size: .74rem; color: var(--ivory-dim); opacity: .8; margin-top: .15rem; }
.score-row .tot { font-family: var(--font-display); font-size: 1.35rem; }
.score-row .tot.pos { color: var(--jade-lit); }
.score-row .tot.neg { color: var(--danger); }
.score-row .run { font-size: .7rem; color: var(--ivory-dim); text-align: right; opacity: .7; }

/* ─────────────────────────  log / chat  ───────────────────────── */

.log-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); z-index: 70;
  display: grid; grid-template-rows: auto auto auto 1fr auto;
  background: linear-gradient(180deg, #10352e, #071b17);
  border-left: 1px solid rgb(201 162 39 / .3);
  box-shadow: -20px 0 60px -20px #000;
}
@keyframes slide { from { transform: translateX(100%); } }
.log-panel header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem; border-bottom: 1px solid rgb(246 239 221 / .1);
}
.log-panel h3 { margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--brass-lit); }
.panel-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .8rem 1rem 0;
}
.panel-caption {
  margin: .7rem 1rem 0; font-size: .72rem; line-height: 1.5;
  color: var(--ivory-dim); opacity: .6;
}
.panel-actions .danger { border-color: rgb(211 86 74 / .5); color: var(--danger); }
.panel-actions .danger:hover { border-color: var(--danger); }

.log-list {
  list-style: none; margin: 0; padding: .8rem 1rem; overflow-y: auto;
  display: grid; gap: .45rem; align-content: start;
  font-size: .82rem; color: var(--ivory-dim);
}
.log-list li.say { color: var(--ivory); }
.log-list li.say b { color: var(--brass-lit); font-weight: 600; }
.chat-form { display: flex; gap: .4rem; padding: .8rem; border-top: 1px solid rgb(246 239 221 / .1); }
.chat-form input { flex: 1; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--card-h) + 5rem); transform: translateX(-50%);
  z-index: 95; padding: .7rem 1.2rem; border-radius: 999px;
  background: rgb(8 22 19 / .95); border: 1px solid var(--danger);
  color: var(--ivory); font-size: .85rem; box-shadow: 0 20px 40px -18px #000;
}

@media (max-width: 620px) {
  .rail-top .round-chip { display: none; }
  .melds { gap: .35rem; }
  .meld .card { margin-right: calc(var(--card-w) * -.58); }

  /* Seats go to a single scrolling row — three stacked chips eat the whole table. */
  .opponents {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .opponents::-webkit-scrollbar { display: none; }
  .help-btn, .coach-btn { padding: .36em .7em; font-size: .72rem; }
  .seat { padding: .3rem .55rem .3rem .35rem; }
  .seat .cards { display: none; }
  .seat .nm { font-size: .78rem; }
  .seat .sub { font-size: .62rem; }
  .seat .av { width: 1.6rem; height: 1.6rem; font-size: .72rem; }

  .felt { border-radius: 22px; padding: .8rem .5rem .6rem; }
  .felt-inlay { inset: 14px; border-radius: 14px; }
  .prompt { font-size: .78rem; }

  .you-chip { flex-wrap: nowrap; white-space: nowrap; font-size: .78rem; min-width: 0; }
  .you-chip .dw { overflow: hidden; text-overflow: ellipsis; }
  .hand-actions { flex: none; }
  .btn-sm { padding: .42em .8em; font-size: .78rem; }
}

/* ══════════════════════════════════════════════════════════════
   Per-game boards
   ══════════════════════════════════════════════════════════════ */

.card.face-down {
  background:
    repeating-linear-gradient(45deg, rgb(0 0 0 / .18) 0 5px, transparent 5px 10px),
    linear-gradient(155deg, #8a5a2f, #4a2814 60%, #2c1709);
  border: 1px solid rgb(201 162 39 / .5);
  box-shadow: inset 0 0 0 3px rgb(201 162 39 / .18), 0 2px 4px rgb(0 0 0 / .4);
}
.card.small { --card-w: clamp(34px, 5vw, 46px); width: var(--card-w); height: calc(var(--card-w) * 1.42); }
.card.dim { opacity: .4; filter: saturate(.55); }
.hand .card.dim:hover { transform: none; }

.melds {
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: .5rem; padding: .2rem; min-height: 0;
}
.melds-empty {
  margin: auto; color: var(--ivory-dim); opacity: .3;
  font-size: .82rem; letter-spacing: .1em;
}

/* ── Pok Deng ── */

.board-pokdeng {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-content: center; justify-items: stretch;
}
.pd-seat {
  display: grid; gap: .4rem; padding: .7rem;
  border-radius: 16px; background: rgb(0 0 0 / .26);
  border: 1px solid rgb(246 239 221 / .12);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.pd-seat.dealer { background: rgb(201 162 39 / .1); border-color: rgb(201 162 39 / .4); }
.pd-seat.mine { border-color: rgb(62 168 140 / .55); }
.pd-seat.active {
  border-color: var(--brass); transform: translateY(-3px);
  box-shadow: 0 0 26px -6px rgb(201 162 39 / .7);
}
.pd-head { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
.pd-name { font-weight: 700; font-size: .86rem; }
.pd-score { font-family: var(--font-display); color: var(--brass-lit); font-size: .95rem; }
.pd-cards { display: flex; gap: .25rem; min-height: calc(var(--card-w) * 1.42); align-items: center; }
.pd-cards .card { --card-w: clamp(40px, 6vw, 54px); width: var(--card-w); height: calc(var(--card-w) * 1.42); }
.pd-empty { font-size: .72rem; color: var(--ivory-dim); opacity: .45; font-style: italic; }
.pd-foot {
  font-size: .7rem; letter-spacing: .06em; color: var(--brass-lit); opacity: .85;
  min-height: 1em;
}

/* ── Twenty-One ── */

.board-twentyone { align-content: center; gap: 1rem; }
.bj-dealer {
  display: grid; justify-items: center; gap: .4rem; padding: .7rem;
  border-radius: 16px; background: rgb(0 0 0 / .24);
  border: 1px solid rgb(201 162 39 / .3);
}
.bj-dealer.active { border-color: var(--brass); box-shadow: 0 0 26px -6px rgb(201 162 39 / .6); }
.bj-label {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
}
.bj-cards { display: flex; gap: .3rem; align-items: center; min-height: calc(var(--card-h) * .6); }
.bj-players { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.bj-seat {
  display: grid; gap: .3rem; padding: .55rem .7rem; border-radius: 14px;
  background: rgb(0 0 0 / .26); border: 1px solid rgb(246 239 221 / .12);
}
.bj-seat.active { border-color: var(--brass); box-shadow: 0 0 22px -8px rgb(201 162 39 / .7); }
.bj-name { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem; font-weight: 600; }
.bj-score { color: var(--brass-lit); font-family: var(--font-display); }
.bj-sub { font-size: .68rem; color: var(--ivory-dim); opacity: .8; min-height: 1em; }

/* ── Crazy Eights ── */

.board-crazyeights { align-content: center; }
.ce-centre { display: flex; gap: 1.4rem; align-items: center; justify-content: center; }
.ce-top { position: relative; display: flex; align-items: center; gap: .7rem; }
.ce-called {
  display: grid; justify-items: center; gap: .1rem;
  padding: .45rem .7rem; border-radius: 12px;
  background: rgb(0 0 0 / .3); border: 1px solid rgb(201 162 39 / .4);
}
.ce-called.wild { border-color: var(--brass); box-shadow: 0 0 20px -6px rgb(201 162 39 / .8); }
.ce-called .glyph { font-size: 1.7rem; line-height: 1; color: var(--ivory); }
.ce-called .glyph.red { color: #ff6b5c; }
.ce-called .lbl {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: .7;
}

/* ── Slave / Big Two ── */

.board-bigtwo { align-content: center; }
.bt-centre { display: grid; justify-items: center; gap: .5rem; }
.bt-play { display: flex; gap: .3rem; }
.bt-caption {
  margin: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass-lit); opacity: .85;
}
.bt-open {
  margin: 0; color: var(--ivory-dim); opacity: .5;
  font-size: .84rem; letter-spacing: .08em;
}

/* ── seat badges ── */
.seat .badge {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-lit); border: 1px solid rgb(201 162 39 / .4);
  padding: .1rem .35rem; border-radius: 999px;
}

@media (max-width: 620px) {
  .board-pokdeng { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .pd-cards .card { --card-w: 34px; }
  .ce-centre { gap: .9rem; }
  /* The language switch, top of the menu where it is found before anything else. */
.entry-top {
  display: flex; justify-content: flex-end; align-items: center; gap: .6rem;
  margin-bottom: .8rem; flex-wrap: wrap;
}
.install-btn { border-color: rgb(201 162 39 / .5); color: var(--brass-lit); }
.install-steps {
  text-align: left; margin: 0 0 1.2rem; padding-left: 1.2rem;
  display: grid; gap: .5rem; font-size: .86rem; line-height: 1.6; color: var(--ivory-dim);
}
.install-steps li::marker { color: var(--brass); font-weight: 700; }

.pick-name { flex-direction: column; align-items: stretch; }
  .pick-name .field { min-width: 0; }
  .game-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   House ads — your own promos, served from your own server.
   ══════════════════════════════════════════════════════════════ */

.ad-slot { display: block; }

.ad-placeholder {
  border-style: dashed; border-color: rgb(201 162 39 / .5);
  background: rgb(0 0 0 / .18);
}
.ad-placeholder .ad-title, .ad-placeholder .ad-body { opacity: .75; }
.ad-placeholder .ad-cta { opacity: .5; }

.ad-card {
  display: flex; align-items: center; gap: .9rem;
  padding: .8rem .95rem; border-radius: 14px; text-decoration: none; color: inherit;
  background: linear-gradient(165deg, rgb(255 255 255 / .06), rgb(0 0 0 / .3));
  border: 1px solid rgb(201 162 39 / .28);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.2), border-color .2s, box-shadow .2s;
}
a.ad-card:hover {
  transform: translateY(-2px); border-color: var(--brass);
  box-shadow: 0 16px 34px -20px #000, 0 0 24px -14px rgb(201 162 39 / .8);
}
.ad-img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 10px; flex: none;
  background: rgb(0 0 0 / .35);
}
.ad-text { display: grid; gap: .12rem; flex: 1; min-width: 0; }
.ad-flag {
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: .55;
}
.ad-title { font-size: .92rem; color: var(--ivory); }
.ad-body { font-size: .78rem; color: var(--ivory-dim); opacity: .85; line-height: 1.45; }
.ad-cta {
  flex: none; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  padding: .45em 1em; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(178deg, var(--brass-lit), var(--brass) 55%, #9c7a13);
  color: #241a03;
}

/* Where the slots sit in the game */
#ad-menu { max-width: 620px; margin: 2rem auto 0; }
#ad-lobby { margin-top: 1.1rem; }
#ad-roundend { margin-top: 1.2rem; text-align: left; }

/* A slim strip between the table and your hand. Unlike the rail this survives on a
   phone, so it is the in-game slot that everyone actually sees. */
.ad-banner { margin: 0 .2rem; }
.ad-banner .ad-card { padding: .5rem .75rem; gap: .7rem; }
.ad-banner .ad-img { width: 40px; height: 40px; }
.ad-banner .ad-body { display: none; }          /* one line only — this is a strip */
.ad-banner .ad-title { font-size: .84rem; }

/* The sponsored-table mark: on the cloth, out of the way of the cards, there all round.
   Top corner rather than bottom — the prompt line lives at the foot of the felt and
   wraps to two lines on a phone, which walked straight into it. */
.ad-felt {
  position: absolute; left: 1.7rem; top: 1.5rem; z-index: 2;
}
.ad-felt-mark {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .3rem .7rem; border-radius: 999px; text-decoration: none;
  background: rgb(0 0 0 / .3); border: 1px solid rgb(201 162 39 / .3);
  transition: border-color .2s, background .2s;
}
a.ad-felt-mark:hover { border-color: var(--brass); background: rgb(0 0 0 / .45); }
.ad-felt-img { height: 18px; width: auto; border-radius: 3px; }
.ad-felt-name {
  font-family: var(--font-display); font-size: .82rem; color: var(--brass-lit);
  opacity: .9;
}
.ad-felt-flag {
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ivory-dim); opacity: .5;
}
.ad-felt .ad-placeholder { border-style: dashed; }

@media (max-width: 620px) {
  .ad-felt { left: 1.1rem; top: 1.1rem; }
  .ad-felt-name { font-size: .72rem; }
  .ad-banner .ad-cta { font-size: .66rem; padding: .35em .7em; }
}

/* The felt, with a rail either side of it on a screen wide enough to spare the room.
   The outer columns are `auto`, so a rail that is hidden collapses to nothing and the
   felt takes the width back — no combination of one, two or no rails needs its own rule.
   Below 1200px neither is drawn: squeezing the table to fit an ad is a bad trade. */
.felt-wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0;
}
/* Each child is pinned to its own column. A display:none grid item does not reserve
   one, so without this the felt slides left into the empty rail's place the moment a
   single rail is showing. */
#ad-rail-left { grid-column: 1; }
.felt-wrap > .felt { grid-column: 2; }
#ad-rail { grid-column: 3; }
.ad-rail { display: none; }
@media (min-width: 1200px) {
  .ad-rail { display: block; align-self: center; width: 200px; margin-inline: .7rem; }
  .ad-rail .ad-card { flex-direction: column; align-items: stretch; text-align: center; gap: .6rem; }
  .ad-rail .ad-img { width: 100%; height: 110px; }
  .ad-rail .ad-cta { align-self: center; }
}

@media (max-width: 620px) {
  .ad-card { gap: .7rem; padding: .7rem .8rem; }
  .ad-img { width: 48px; height: 48px; }
  .ad-cta { font-size: .7rem; padding: .4em .8em; }
}