/* DopaMahj — preppy Hong Kong mahjong.
   Layout: one screen at a time; the table is a 3x3 grid with your hand along the bottom. */
:root {
  --cream: #F8EEDF;
  --paper: #FFFBF5;
  --blush: #FCD9E5;
  --bubblegum: #FFA3CB;
  --hot: #FF4FA0;
  --cherry: #E5262F;
  --ink: #1C2470;
  --muted: #7A6A80;
  --sun: #FBC646;
  --kelly: #239447;
  --cobalt: #1F45D1;
  --lilac: #E2B9FF;
  --baby: #A6D0F4;
  --edge: #CC4C80;
  --line: #F7BDD3;
  --felt-1: #FAD0DF;
  --felt-2: #F2A9C3;

  --display: 'Righteous', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wind: 'Zen Tokyo Zoo', 'Righteous', system-ui, sans-serif;
  --num: 'Gluten', 'Nunito', system-ui, sans-serif;

  --tw: 58px;      /* hand tile width */
  --dw: 34px;      /* discard tile width */
  --ow: 24px;      /* opponent tile width */
  --radius: 18px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
#app { min-height: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.45 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- shared pieces ---------- */
.wrap {
  min-height: 100vh; min-height: 100dvh;
  padding-block: 32px 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; align-items: center;
  background:
    radial-gradient(60% 45% at 8% 0%, #FFD1E3 0%, transparent 70%),
    radial-gradient(50% 40% at 100% 100%, #FFE3C9 0%, transparent 70%),
    var(--cream);
}
.logo {
  font: 400 clamp(56px, 13vw, 112px)/0.95 var(--display);
  color: var(--hot);
  letter-spacing: -0.01em;
  text-shadow: 0 5px 0 var(--edge);
  margin: 0;
  text-wrap: balance;
}
.logo.sm { font-size: 34px; text-shadow: 0 3px 0 var(--edge); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
h2 { font-size: 34px; color: var(--hot); text-shadow: 0 3px 0 var(--edge); }
h3 { font-size: 20px; color: var(--ink); }
.sub { color: var(--muted); font-weight: 600; margin: 8px 0 0; }
.label { font: 900 12px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.btn {
  border: 0; border-radius: 999px;
  padding: 14px 28px; min-height: 52px;
  font-weight: 900; font-size: 17px;
  background: var(--hot); color: #fff;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
.btn.secondary { background: #fff; color: var(--cherry); box-shadow: 0 0 0 2px var(--bubblegum) inset, 0 4px 0 var(--line); }
.btn.gold { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 #C99318; }
.btn.blue { background: var(--cobalt); box-shadow: 0 4px 0 #142E8F; }
.btn.green { background: var(--kelly); box-shadow: 0 4px 0 #156A31; }
.btn.ghost { background: transparent; color: var(--cherry); box-shadow: none; }
.btn.small { min-height: 40px; padding: 8px 18px; font-size: 15px; }
.btn:disabled { background: #EED3DE; color: #A8899A; box-shadow: none; cursor: not-allowed; transform: none; }

.card {
  background: #fff; border-radius: 24px; padding: 24px;
  box-shadow: 0 0 0 2px var(--line), 0 10px 30px rgba(204, 76, 128, 0.12);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--blush); color: var(--cherry);
  font-weight: 800; font-size: 13px; white-space: nowrap;
}
.chip.white { background: #fff; box-shadow: 0 0 0 1.5px var(--line) inset; }
.chip.gold { background: var(--sun); color: var(--ink); }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--blush); border-radius: 16px; padding: 4px; }
.seg button {
  border: 0; background: transparent; border-radius: 12px; padding: 10px 16px;
  font-weight: 800; color: var(--muted); min-height: 42px;
}
.seg button[aria-pressed="true"] { background: #fff; color: var(--cherry); box-shadow: 0 2px 0 var(--line); }

.toggle { position: relative; width: 52px; height: 30px; flex: none; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle span { position: absolute; inset: 0; border-radius: 99px; background: #EED3DE; transition: background .15s; pointer-events: none; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.toggle input:checked + span { background: var(--hot); }
.toggle input:checked + span::after { transform: translateX(22px); }
.toggle input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }

.field { display: grid; gap: 10px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.text-input {
  width: 100%; border: 0; border-radius: 14px; padding: 14px 16px; min-height: 52px;
  background: var(--paper); box-shadow: 0 0 0 2px var(--line) inset; font-weight: 700;
}
.text-input:focus { outline: none; box-shadow: 0 0 0 2.5px var(--hot) inset; }
.text-input.code { font: 400 26px/1 var(--display); letter-spacing: 0.15em; text-transform: uppercase; text-align: center; }

.avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font: 400 19px/1 var(--display);
}
.wind {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font: 400 21px/1 var(--wind);
  color: var(--hot); box-shadow: 0 0 0 2px var(--line) inset; background: #fff;
}
.wind.dealer { background: var(--hot); color: #fff; box-shadow: none; }

/* ---------- tiles ---------- */
.tile {
  --w: var(--tw);
  position: relative; display: inline-block; flex: none;
  width: var(--w); height: calc(var(--w) * 1.344);
  border-radius: calc(var(--w) * 0.156);
  box-shadow: 0 calc(var(--w) * .078) 0 var(--edge), 0 calc(var(--w) * .14) calc(var(--w) * .16) rgba(128, 26, 77, 0.16);
  background: #fff;
  margin-bottom: calc(var(--w) * .08);
}
.tile img { display: block; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.tile.d { --w: var(--dw); }
.tile.o { --w: var(--ow); }
.tile.side { transform: rotate(90deg); margin: 0 calc(var(--w) * .17); }
.tile.claimed { opacity: .35; }
.tile.last { box-shadow: 0 calc(var(--w) * .078) 0 var(--edge), 0 0 0 3px var(--sun), 0 0 16px 2px rgba(251, 198, 70, .8); }
.tile.new-in { animation: pop .28s ease-out; }
@keyframes pop { from { transform: translateY(-14px) scale(1.08); opacity: .2; } to { transform: none; opacity: 1; } }

/* ---------- home ---------- */
.home { justify-content: center; text-align: center; gap: 28px; }
.fan { display: flex; justify-content: center; margin-bottom: 4px; --tw: clamp(46px, 11vw, 70px); }
.fan .tile { margin: 0 -6px; }
.fan .tile:nth-child(1) { transform: rotate(-16deg) translateY(16px); }
.fan .tile:nth-child(2) { transform: rotate(-8deg) translateY(4px); }
.fan .tile:nth-child(4) { transform: rotate(8deg) translateY(4px); }
.fan .tile:nth-child(5) { transform: rotate(16deg) translateY(16px); }
.home .actions { display: grid; gap: 14px; width: min(340px, 100%); }
.home .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.home .tag { font: 900 13px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--cherry); }

/* ---------- setup / lobby ---------- */
.panel { width: min(640px, 100%); display: grid; gap: 22px; }
.panel .head { display: flex; align-items: center; gap: 12px; }
.back {
  border: 0; background: #fff; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--line) inset; font: 400 22px/1 var(--display); color: var(--cherry); flex: none;
}
.seats { display: grid; gap: 10px; }
.seat {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 2px var(--line) inset;
}
.seat .who { flex: 1; min-width: 0; }
.seat .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .who small { color: var(--muted); font-weight: 700; }
.seat.empty { box-shadow: 0 0 0 2px var(--line) inset; background: transparent; border: 2px dashed var(--line); }
.code-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; background: var(--blush); }
.code-box .code { font: 400 34px/1 var(--display); letter-spacing: .14em; color: var(--cherry); }
.note { font-size: 14px; color: var(--muted); font-weight: 600; margin: 0; }
.note.warn { color: var(--cherry); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .split { grid-template-columns: 1fr; } }

/* ---------- table ---------- */
.table-screen {
  height: 100%; min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--cream);
  padding-left: max(10px, env(safe-area-inset-left, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
  padding-block: 8px;
  gap: 8px;
}
.topbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar .spacer { flex: 1; }
.menu-btn { border: 0; background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 900; color: var(--cherry); box-shadow: 0 0 0 1.5px var(--line) inset; min-height: 36px; }

.felt {
  position: relative; border-radius: 28px; min-height: 0;
  background:
    radial-gradient(70% 70% at 50% 45%, var(--felt-1) 0%, var(--felt-2) 100%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.35), inset 0 0 0 8px rgba(204,76,128,.18);
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 150px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px; padding: 12px;
  overflow: hidden;
}
.opp { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.opp.top { grid-column: 2; grid-row: 1; }
.opp.left { grid-column: 1; grid-row: 2; justify-content: center; }
.opp.right { grid-column: 3; grid-row: 2; justify-content: center; }
.ptag {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  background: #fff; border-radius: 999px; box-shadow: 0 4px 12px rgba(204,76,128,.18);
  max-width: 100%; min-width: 0; transition: box-shadow .2s;
}
.ptag.active { box-shadow: 0 0 0 3px var(--sun), 0 4px 16px rgba(251,198,70,.55); }
.ptag .nm { font-weight: 900; font-size: 14px; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptag .pts { font-size: 12px; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.ptag .avatar { width: 32px; height: 32px; font-size: 16px; }
.ptag .wind { width: 28px; height: 28px; font-size: 17px; }
.ptag .bot { font-size: 10px; font-weight: 900; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.backs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 100%; }
/* side players: one straight column of sideways tiles, like a wall */
.opp.left .backs, .opp.right .backs { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0; max-width: none; }
.tile.sv { --w: var(--sw, var(--ow)); width: calc(var(--w) * 1.344); height: var(--w); margin: 0 0 calc(var(--w) * -.06); box-shadow: 0 calc(var(--w) * .07) 0 var(--edge); }
.tile.sv img { position: absolute; left: 50%; top: 50%; width: var(--w); height: calc(var(--w) * 1.344); transform: translate(-50%, -50%) rotate(90deg); }
.opp.right .tile.sv img { transform: translate(-50%, -50%) rotate(-90deg); }
.melds { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: flex-end; }
.meld { display: flex; gap: 1px; align-items: flex-end; }
.flowers { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }

.center {
  grid-column: 2; grid-row: 2; min-height: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto 1fr; gap: 8px;
  align-items: center; justify-items: center;
}
.pool { display: flex; flex-wrap: wrap; gap: 3px; align-content: flex-start; justify-content: center; max-width: calc(var(--dw) * 8 + 24px); }
.pool.p-top { grid-column: 1 / 4; grid-row: 1; align-self: end; }
.pool.p-bottom { grid-column: 1 / 4; grid-row: 3; align-self: start; }
.pool.p-left { grid-column: 1; grid-row: 2; justify-self: end; max-width: calc(var(--dw) * 5 + 14px); }
.pool.p-right { grid-column: 3; grid-row: 2; justify-self: start; max-width: calc(var(--dw) * 5 + 14px); }
.spot { grid-column: 2; grid-row: 2; display: grid; justify-items: center; gap: 8px; }
.spot-plate {
  width: 118px; height: 118px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(204,76,128,.25), inset 0 0 0 6px var(--blush);
}
.spot-tile { --w: 54px; margin: 0; }
.spot-tile.claimed { opacity: .45; }
.spot-empty { width: 46px; height: 62px; border-radius: 9px; border: 2.5px dashed var(--bubblegum); }
.spot-chip { box-shadow: 0 4px 10px rgba(204,76,128,.18); }
.compass {
  grid-column: 2; grid-row: 2;
  width: 118px; height: 118px; border-radius: 50%;
  background: #fff; display: grid; place-items: center; text-align: center;
  box-shadow: 0 8px 24px rgba(204,76,128,.25), inset 0 0 0 6px var(--blush);
}
.compass .big { font: 400 46px/1 var(--wind); color: var(--cherry); }
.compass small { display: block; font: 900 10px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.me { grid-column: 1 / 4; grid-row: 3; display: flex; flex-direction: column; gap: 6px; align-items: center; min-width: 0; }
.me-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }

.dock { display: grid; gap: 8px; justify-items: center; padding-bottom: env(safe-area-inset-bottom, 0px); }
.hand { display: flex; align-items: flex-end; gap: 4px; max-width: 100%; padding-top: 28px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
.hand .tile { touch-action: none; cursor: pointer; transition: transform .12s ease; border: 0; padding: 0; }
.hand .tile:hover { transform: translateY(-4px); }
.hand .tile.sel { transform: translateY(-16px); }
.hand .tile.drawn { margin-left: 14px; }
.hand.locked .tile { cursor: grab; }
.hand .tile.dragging { z-index: 5; transition: none; box-shadow: 0 calc(var(--w) * .078) 0 var(--edge), 0 14px 26px rgba(128,26,77,.35); cursor: grabbing; }
.hand .tile.drop-before::before, .hand .tile.drop-after::after {
  content: ""; position: absolute; top: 4%; bottom: 4%; width: 4px; border-radius: 4px; background: var(--hot);
}
.hand .tile.drop-before::before { left: -5px; }
.hand .tile.drop-after::after { right: -5px; }
body.dragging-tile, body.dragging-tile * { user-select: none; -webkit-user-select: none; }
.hand.locked .tile:hover { transform: none; }
.hint-flag {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: var(--sun); color: var(--ink); font: 900 10px/1 var(--body); letter-spacing: .04em;
  padding: 4px 7px; border-radius: 99px; white-space: nowrap; pointer-events: none;
}
.actionbar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 52px; }
.status {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cherry); color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 900; font-size: 15px;
}
.status span { font-weight: 600; opacity: .85; }
.status.calm { background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px var(--line) inset; }

/* claim panel */
.claim {
  position: fixed; left: 50%; bottom: calc(var(--tw) * 1.45 + 104px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  width: min(720px, calc(100% - 24px)); z-index: 20;
  background: #fff; border-radius: 26px; padding: 18px; display: grid; gap: 14px;
  box-shadow: 0 0 0 3px var(--hot), 0 18px 50px rgba(128, 26, 77, .35);
  animation: rise .2s ease-out;
}
@keyframes rise { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.claim .top { display: flex; align-items: center; gap: 14px; }
.claim .top .tile { --w: 46px; }
.claim .opts { display: flex; gap: 10px; flex-wrap: wrap; }
.claim-opt {
  border: 0; border-radius: 18px; padding: 10px 14px; display: grid; gap: 6px; justify-items: center;
  background: var(--blush); font-weight: 900; color: var(--cherry); min-width: 92px;
  box-shadow: 0 0 0 2px var(--bubblegum) inset;
}
.claim-opt .tiles { display: flex; gap: 2px; --dw: 26px; }
.claim-opt.win { background: var(--sun); color: var(--ink); box-shadow: 0 0 0 2px #E2A72A inset; }
.claim-opt:hover { filter: brightness(1.03); transform: translateY(-1px); }
.timer { height: 8px; border-radius: 99px; background: var(--blush); overflow: hidden; }
.timer i { display: block; height: 100%; background: var(--hot); border-radius: inherit; transform-origin: left; animation: drain linear forwards; }
@keyframes drain { from { transform: scaleX(var(--f, 1)); } to { transform: scaleX(0); } }

/* overlay modal */
.overlay {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; grid-template-columns: minmax(0, 1fr);
  background: rgba(60, 20, 45, .45); padding: 16px; overflow-y: auto;
  animation: fade .2s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.modal { width: min(760px, 100%); background: #fff; border-radius: 28px; padding: 26px; display: grid; gap: 18px; box-shadow: 0 30px 80px rgba(60,20,45,.4); max-height: calc(100dvh - 32px); overflow-y: auto; }
.modal.small { width: min(440px, 100%); }
.result-hand { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; --tw: 40px; }
.result-hand .group { display: flex; flex-wrap: wrap; gap: 2px; }
.modal { min-width: 0; }
.faan-list { display: grid; gap: 0; }
.faan-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1.5px dashed var(--line); }
.faan-row .zh { color: var(--muted); font-weight: 600; }
.faan-row b { font-variant-numeric: tabular-nums; }
.faan-total { display: flex; justify-content: space-between; align-items: baseline; font: 400 26px/1 var(--display); color: var(--hot); }
.pay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .pay { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pay div { background: var(--paper); border-radius: 14px; padding: 10px; box-shadow: 0 0 0 1.5px var(--line) inset; min-width: 0; }
.pay div b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay .plus { color: var(--kelly); font-weight: 900; font-variant-numeric: tabular-nums; }
.pay .minus { color: var(--cherry); font-weight: 900; font-variant-numeric: tabular-nums; }
.modal .btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* how to play */
.rules { width: min(760px, 100%); display: grid; gap: 18px; }
.rules p, .rules li { max-width: 65ch; }
.rules ul { margin: 0; padding-left: 20px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; --tw: 40px; }
.legend figure { margin: 0; display: grid; justify-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.ftable { display: grid; grid-template-columns: 1fr auto auto; gap: 0 14px; }
.ftable div { padding: 7px 0; border-bottom: 1.5px dashed var(--line); }
.ftable .zh { color: var(--muted); }

/* confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confetti i { position: absolute; top: -20px; font-style: normal; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }

#toast:empty { display: none; }
#toast {
  position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%) translateY(-220%);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 800; z-index: 50;
  transition: transform .25s ease; max-width: calc(100% - 32px); text-align: center;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- smaller screens ---------- */
@media (max-width: 1280px) { :root { --tw: 50px; --dw: 30px; --ow: 20px; } }
@media (max-width: 1100px) { :root { --tw: 44px; --dw: 26px; --ow: 18px; } .felt { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) minmax(0, 120px); } }
@media (max-width: 760px) {
  :root { --tw: min(40px, calc((100vw - 64px) / 15)); --dw: 22px; --ow: 13px; }
  .hand { gap: 2px; }
  .hand .tile.drawn { margin-left: 8px; }
  .topbar .chip { font-size: 11px; padding: 5px 9px; }
  .menu-btn { padding: 6px 12px; font-size: 14px; }
  .opp.left .ptag, .opp.right .ptag { flex-direction: column; border-radius: 16px; padding: 6px; text-align: center; gap: 3px; }
  .claim { padding: 14px; gap: 10px; }
  .claim-opt { min-width: 76px; padding: 8px 10px; }
  .felt { grid-template-columns: minmax(0, 76px) minmax(0, 1fr) minmax(0, 76px); padding: 8px; gap: 4px; border-radius: 20px; }
  .spot { grid-column: 2; grid-row: 2; display: grid; justify-items: center; gap: 8px; }
.spot-plate {
  width: 118px; height: 118px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(204,76,128,.25), inset 0 0 0 6px var(--blush);
}
.spot-tile { --w: 54px; margin: 0; }
.spot-tile.claimed { opacity: .45; }
.spot-empty { width: 46px; height: 62px; border-radius: 9px; border: 2.5px dashed var(--bubblegum); }
.spot-chip { box-shadow: 0 4px 10px rgba(204,76,128,.18); }
.compass { width: 76px; height: 76px; }
  .compass .big { font-size: 30px; }
  .ptag { padding: 4px 8px 4px 4px; gap: 5px; }
  .ptag .avatar { width: 24px; height: 24px; font-size: 12px; }
  .ptag .wind { width: 22px; height: 22px; font-size: 13px; }
  .ptag .nm { font-size: 12px; }
  .opp.left .ptag .pts, .opp.right .ptag .pts { display: none; }
  .tile.sv { --sw: 15px; }
  .pool.p-left, .pool.p-right { max-width: calc(var(--dw) * 3 + 8px); }
  .btn { padding: 12px 22px; font-size: 16px; }
  .modal { padding: 20px; border-radius: 22px; }
  .result-hand { --tw: 30px; gap: 8px; }
  .faan-total { font-size: 20px; flex-wrap: wrap; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* step-through bar: shows each bot discard until you press Proceed */
.claim.step { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; width: min(560px, calc(100% - 24px)); }
.claim.step .tile { --w: 44px; margin: 0; }
.claim.step .step-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.claim.step .step-text b { font-size: 17px; }
.claim.step .step-text span { font-size: 13px; color: var(--muted); font-weight: 700; }
.claim-opt.proceed { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--line) inset; }
@media (max-width: 760px) {
  .claim.step { gap: 10px; padding: 10px 10px 10px 12px; }
  .claim.step .tile { --w: 34px; }
  .claim.step .step-text b { font-size: 15px; }
  .claim.step .step-text span { display: none; }
  .claim.step .btn { padding: 10px 18px; min-height: 44px; }
}

/* one-minute clock on the chip of whoever we're waiting for */
.ptag { position: relative; }
.clock {
  position: absolute; top: -10px; right: -8px; z-index: 2;
  background: var(--ink); color: #fff; font: 800 12px/1 var(--body, inherit); font-variant-numeric: tabular-nums;
  padding: 4px 7px; border-radius: 999px; box-shadow: 0 2px 6px rgba(28,36,112,.3);
}
.clock.low { background: var(--cherry, #e5262f); animation: clockpulse 1s ease-in-out infinite; }
@keyframes clockpulse { 50% { transform: scale(1.12); } }

/* Call / Pass beside your chip */
.calls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.calls .btn { padding: 10px 20px; min-height: 44px; font-size: 16px; }
.calls .btn:disabled { opacity: .45; cursor: not-allowed; }
.calls .btn.pass { background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--line) inset, 0 3px 0 var(--line); }
.call-opt {
  display: grid; justify-items: center; gap: 4px; padding: 6px 10px; border-radius: 14px; border: 0; cursor: pointer;
  background: #fff; box-shadow: 0 0 0 2px var(--bubblegum) inset; font: 800 13px/1.1 var(--body); color: var(--ink);
}
.call-opt.win { box-shadow: 0 0 0 3px var(--sun) inset; }
.call-opt .tiles { display: flex; gap: 1px; }
.call-opt .tile { --w: 22px; margin: 0; }
@media (max-width: 760px) {
  .calls .btn { padding: 8px 16px; font-size: 15px; }
  .call-opt .tile { --w: 16px; }
}

/* ================= Navy theme (from the Figma Home + 07 Table redesign) ================= */
:root { --navy: #242846; --felt: #A22D63; --press: #E0548E; --press-edge: #B03D5E; }
body { background: var(--navy); }
.wrap { background: var(--navy); }

/* text that sits straight on the navy */
.logo { color: var(--lilac); text-shadow: 0 .09em 0 var(--press-edge); }
.logo.sm { text-shadow: 0 3px 0 var(--press-edge); }
.wrap h2 { color: var(--lilac); text-shadow: 0 3px 0 var(--press-edge); }
.home .tag { color: var(--cream); }
.wrap .sub, .wrap .note { color: var(--cream); }
.wrap .note.warn { color: var(--bubblegum); }
.wrap .btn.ghost { color: var(--cream); }
/* ...but white cards and pop-ups keep their light styling */
.card h2, .modal h2 { color: var(--hot); text-shadow: 0 3px 0 var(--edge); }
.card .sub, .card .note, .modal .sub, .modal .note { color: var(--muted); }
.card .note.warn, .modal .note.warn { color: var(--cherry); }
.card .btn.ghost, .modal .btn.ghost { color: var(--cherry); }

/* main buttons use the deeper pink */
.btn { background: var(--press); box-shadow: 0 4px 0 var(--press-edge); }
.btn:active { box-shadow: 0 1px 0 var(--press-edge); }
.btn.secondary { background: #fff; color: var(--cherry); box-shadow: 0 0 0 2px var(--bubblegum) inset, 0 4px 0 var(--line); }
.btn.gold { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 #C99318; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn:disabled { background: #4A3F63; color: #A99BC0; box-shadow: none; }
.card .btn:disabled, .modal .btn:disabled { background: #EED3DE; color: #A8899A; }

/* table */
.felt { background: var(--felt); box-shadow: inset 0 0 0 6px rgba(255,255,255,.35); border-radius: 28px; }
.ptag { gap: 12px; padding: 8px 18px 8px 8px; box-shadow: 0 6px 16px rgba(140,47,85,.12); }
.ptag.active { box-shadow: 0 0 0 3px var(--sun), 0 6px 16px rgba(140,47,85,.12); }
.ptag .avatar { width: 44px; height: 44px; font-size: 20px; }
.ptag .nm { font-weight: 800; font-size: 16px; }
.ptag .pts { font-size: 13px; font-weight: 400; }
.ptag .bot { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ptag .wind, .ptag .wind.dealer { width: auto; height: auto; background: none; box-shadow: none; color: var(--hot); font-size: 25px; }
.status { background: var(--baby); color: var(--ink); font-weight: 800; }
.status span { font-weight: 600; opacity: 1; }
.status.calm { background: #fff; }
.spot-chip { box-shadow: none; }

/* side players: melds sit beside the hand column, sideways, on the table side */
.side-body { display: flex; gap: 8px; align-items: flex-start; }
.opp.right .side-body { flex-direction: row-reverse; }
.melds.side { flex-direction: column; flex-wrap: nowrap; gap: 6px; align-items: center; }
.melds.side .meld { flex-direction: column; gap: 0; align-items: center; }

@media (max-width: 760px) {
  .ptag { padding: 4px 8px 4px 4px; gap: 5px; }
  .ptag .avatar { width: 24px; height: 24px; font-size: 12px; }
  .ptag .nm { font-size: 12px; }
  .ptag .wind, .ptag .wind.dealer { font-size: 16px; }
  .opp.left .ptag, .opp.right .ptag { padding: 6px; gap: 3px; }
  .felt { border-radius: 20px; box-shadow: inset 0 0 0 4px rgba(255,255,255,.35); }
  .side-body { gap: 4px; }
}

.table-screen { background: var(--navy); }

/* wider side columns so the bigger name chips fit */
.felt { grid-template-columns: minmax(0, 214px) minmax(0, 1fr) minmax(0, 214px); }
.ptag .pts { white-space: nowrap; }
@media (max-width: 1280px) {
  .felt { grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 180px); }
  .opp.left .ptag, .opp.right .ptag { padding: 6px 12px 6px 6px; gap: 8px; }
  .opp.left .ptag .avatar, .opp.right .ptag .avatar { width: 34px; height: 34px; font-size: 16px; }
  .opp.left .ptag .nm, .opp.right .ptag .nm { font-size: 14px; }
  .opp.left .ptag .pts, .opp.right .ptag .pts { font-size: 12px; }
  .opp.left .ptag .wind, .opp.right .ptag .wind { font-size: 20px; }
}
@media (max-width: 1100px) { .felt { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 150px); } .opp.left .ptag .bot, .opp.right .ptag .bot { display: none; } }
@media (max-width: 760px) { .felt { grid-template-columns: minmax(0, 76px) minmax(0, 1fr) minmax(0, 76px); } }

/* wider side columns so the bigger name chips fit */
.felt { grid-template-columns: minmax(0, 214px) minmax(0, 1fr) minmax(0, 214px); }
.ptag .pts { white-space: nowrap; }
@media (max-width: 1280px) {
  .felt { grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 180px); }
  .opp.left .ptag, .opp.right .ptag { padding: 6px 12px 6px 6px; gap: 8px; }
  .opp.left .ptag .avatar, .opp.right .ptag .avatar { width: 34px; height: 34px; font-size: 16px; }
  .opp.left .ptag .nm, .opp.right .ptag .nm { font-size: 14px; }
  .opp.left .ptag .pts, .opp.right .ptag .pts { font-size: 12px; }
  .opp.left .ptag .wind, .opp.right .ptag .wind { font-size: 20px; }
}
@media (max-width: 1100px) { .felt { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 150px); } .opp.left .ptag .bot, .opp.right .ptag .bot { display: none; } }

/* 07 layout: your melds + flowers bottom-left; status, Call/Pass and your chip bottom-right */
.me { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 12px; }
.me-left { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.me-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; margin-left: auto; }
/* Discard (and Win / Kong / Sort) sit to the right of the hand */
.dock { grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; padding-block: 4px 12px; }
.dock > .hand, .dock > .note { grid-column: 2; }
.dock > .actionbar { grid-column: 3; justify-self: start; justify-content: flex-start; min-height: 0; flex-wrap: nowrap; }
.dock-row > .actionbar { grid-column: 3; justify-self: start; justify-content: flex-start; min-height: 0; flex-wrap: nowrap; }

/* the tile flying from a hand to the middle */
.tile.fly { position: fixed; z-index: 60; margin: 0; pointer-events: none; will-change: transform; }
.spot-tile.landed { animation: land .22s ease-out; }
@keyframes land { 0% { transform: scale(1.08); } 60% { transform: scale(.97); } 100% { transform: none; } }

@media (max-width: 760px) {
  .felt { grid-template-columns: minmax(0, 76px) minmax(0, 1fr) minmax(0, 76px); }
  .me { align-items: flex-end; }
  .me-right { flex-direction: column; align-items: flex-end; gap: 6px; }
  .me-right .status { font-size: 13px; padding: 8px 12px; }
  .dock { grid-template-columns: 1fr; row-gap: 8px; }
  .dock > .hand, .dock > .note, .dock > .actionbar { grid-column: 1; }
  .dock > .actionbar { justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
}

/* computer: chip + Call/Pass live in the table; phone: they drop below the hand (user's M2/M3 layout) */
.desk-only { display: contents; }
.phone-only { display: none; }
.dock-row { display: contents; }
@media (max-width: 760px) {
  .desk-only { display: none; }
  .phone-only { display: flex; align-items: center; }
  .dock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; grid-column: 1; padding-inline: 10px; }
  .dock-row > .actionbar, .dock-row > .phone-only:nth-child(2) { margin-left: auto; }
  .dock-row .calls { flex-wrap: nowrap; }
  .dock-row > .actionbar { flex-wrap: wrap; justify-content: flex-end; }
  .dock > .actionbar { justify-self: auto; }
  .me-right { flex: 1; flex-direction: row; justify-content: center; }
  .me-right .status { font-size: 14px; padding: 9px 16px; }
  .me { flex-direction: column; align-items: stretch; gap: 8px; }
  .me-right { order: 1; margin-left: 0; }
  .me-left { order: 2; align-self: flex-start; }
  .me-left:not(:has(.tile)) { display: none; }
}
.status.error { background: var(--cherry); color: #fff; animation: shake .35s ease; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* ================= Figma pass (Oct 20, from the updated frames) ================= */
:root { --accent: #E0548E; }
/* accent text is the deeper pink everywhere (chips, menu, back, selected segment, secondary buttons) */
.chip, .chip.white, .menu-btn, .spot-chip, .back, .seg button[aria-pressed="true"], .btn.secondary, .card .btn.ghost, .modal .btn.ghost { color: var(--accent); }
.home .btn.secondary.home-friends { color: var(--cherry); }
.pay .minus { color: var(--accent); }

/* home (01 / M1) */
.home .actions { width: min(700px, 100%); justify-items: center; }
.home .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
.home .phone-tagline { display: none; }
.home .tag { font-size: 13px; letter-spacing: .2em; }
@media (max-width: 760px) {
  .home .pair { grid-template-columns: 1fr; gap: 14px; }
  .home .actions { width: min(340px, 100%); }
  .home .phone-tagline { display: block; }
}

/* lobby (04 / 05) */
.code-box { background: var(--baby); border-radius: 18px; }
.code-box .code { color: var(--ink); }
.code-box .label { color: var(--muted); }
.seat .avatar { font-size: 22px; }
.card.waiting { padding: 24px; }

/* table pills */
.status { background: var(--lilac); color: var(--ink); }
.status.calm { background: #fff; color: var(--ink); font-weight: 900; box-shadow: 0 0 0 1.5px var(--line) inset; }

/* pop-ups (10 / 11 / 12 / 13): titles in ink */
.modal h2 { color: var(--ink); text-shadow: none; }
.modal .label { color: var(--muted); }
.standings { display: grid; gap: 8px; }
.rank-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; background: var(--paper); }
.rank-row .rank { font: 400 20px/1 var(--display); color: var(--hot); }
.rank-row b { font-weight: 900; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .pts { font-weight: 800; font-variant-numeric: tabular-nums; }
.rank-row.first { background: var(--sun); }
.rank-row.first .rank { color: var(--ink); }
.modal.over h2 { font-size: 30px; }

/* desktop table (07): the top bar sits inside the table */
@media (min-width: 761px) {
  .table-screen { padding-top: 56px; position: relative; grid-template-rows: 1fr auto; }
  .table-screen > .topbar { position: absolute; top: 56px; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); z-index: 3; padding: 16px 20px 0; pointer-events: none; }
  .table-screen > .topbar > * { pointer-events: auto; }
}

/* ---------- call tray (09c / 09d / 09e) ---------- */
.tray { display: grid; gap: 8px; justify-items: start; }
.tray-msg { background: rgba(36,40,70,.72); color: #fff; font-weight: 800; font-size: 15px; padding: 7px 14px; border-radius: 999px; max-width: 100%; }
.tray-msg.error { background: var(--cherry); }
.tray-msg.shake { animation: shake .35s ease; }
.tray-slots { display: flex; gap: 8px; align-items: stretch; }
.tray-box { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 14px; border: 2px dashed rgba(255,255,255,.75); background: rgba(255,255,255,.08); }
.tray-box.theirs { border-color: rgba(251,198,70,.85); background: rgba(255,255,255,.14); }
.tray.has-error .tray-box.yours { border-color: var(--cherry); }
.tile.tr { --w: 46px; margin: 0; }
.tray-slot { width: 46px; height: calc(46px * 1.344); }
.tray-tile { border: 0; padding: 0; background: none; cursor: pointer; border-radius: 8px; }
.tray-tile:hover .tile { transform: translateY(-3px); }
.hand.picking .tile { cursor: pointer; }
.hand .tile.picked { opacity: .25; transform: none; }
@media (max-width: 760px) {
  .tray { justify-items: center; }
  .tray-msg { font-size: 13px; padding: 6px 12px; text-align: center; }
  .tray-slots { gap: 6px; }
  .tray-box { padding: 6px; gap: 4px; border-radius: 10px; }
  .tile.tr { --w: 34px; }
  .tray-slot { width: 34px; height: calc(34px * 1.344); }
}

/* page background: the seigaiha tile from the Home frame's "bg" layer, repeated */
:root { --page-bg: url("../img/bg-tile.svg") 0 0 / 240px 240px repeat, var(--navy); }
body, .wrap, .table-screen { background: var(--page-bg); }
.overlay { background-color: rgba(28, 20, 50, .55); }
@media (min-width: 761px) { .dock { padding-bottom: 28px; } }
.overlay.steady { animation: none; }
/* late in a hand the discard piles shrink so the table never overflows */
.pool.crowd1 { --dw: calc(var(--dwBase, 34px) * .8); }
.pool.crowd2 { --dw: calc(var(--dwBase, 34px) * .66); }
@media (max-width: 1280px) { .pool.crowd1, .pool.crowd2 { --dwBase: 30px; } }
@media (max-width: 1100px) { .pool.crowd1, .pool.crowd2 { --dwBase: 26px; } }
@media (max-width: 760px) { .pool.crowd1, .pool.crowd2 { --dwBase: 22px; } }

/* ================= fixed-size table (Oct 20): nothing resizes while a hand is dealt ================= */
.table-screen { width: 100%; max-width: 1200px; margin-inline: auto; background: transparent; }
.felt { grid-template-rows: 150px minmax(0, 1fr) 150px; }
.felt > .center { min-height: 0; overflow: hidden; }
.me { align-self: end; max-height: 150px; }
.dock { height: 150px; box-sizing: border-box; align-content: center; overflow: visible; }
@media (min-width: 761px) {
  .table-screen { grid-template-rows: minmax(0, 1fr) 150px; height: 100vh; height: 100dvh; min-height: 640px; }
}
@media (max-width: 760px) {
  .table-screen { grid-template-rows: auto minmax(0, 1fr) 150px; height: 100vh; height: 100dvh; min-height: 640px; }
  .felt { grid-template-rows: 64px minmax(0, 1fr) 140px; }
  .me { max-height: 140px; }
  .dock { height: 150px; align-content: start; padding-top: 4px; }
}

/* keep your chip pinned to the lower right of the table; Call/Pass and the status/tray grow to its left */
@media (min-width: 761px) {
  .me-right { flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; }
  .me-right .desk-only { display: flex; align-items: center; gap: 10px; flex: none; order: 2; }
  .me-right > .status, .me-right > .tray { order: 1; flex: 0 1 auto; min-width: 0; }
  .me-right > .status { margin-bottom: 13px; }
  .me-right .ptag { flex: none; }
}

/* ================= computer table = fixed 1200 × 840 stage, scaled to the window ================= */
@media (min-width: 761px) {
  .table-screen {
    position: fixed; left: 50%; top: 50%;
    width: 1200px; height: 840px; min-height: 0; max-width: none; margin: 0;
    transform: translate(-50%, -50%) scale(var(--stage-scale, 1)); transform-origin: center center;
    padding: 48px 0 0; grid-template-rows: minmax(0, 1fr) 150px; gap: 8px;
  }
  .table-screen > .topbar { top: 48px; left: 0; right: 0; }
  body:has(.table-screen) { overflow: hidden; }

  /* keep your chip pinned to the lower right of the table; Call/Pass and the status/tray grow to its left */
  .me-right { flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end; }
  .me-right .desk-only { display: flex; align-items: center; gap: 10px; flex: none; order: 2; }
  .me-right > .status, .me-right > .tray { order: 1; flex: 0 1 auto; min-width: 0; }
  .me-right > .status { margin-bottom: 13px; }
  .me-right .ptag { flex: none; }
}
/* the stage is always 1200px wide inside, so undo the narrow-window tweaks for the table */
@media (min-width: 761px) {
  .table-screen { --tw: 58px; --dw: 34px; --ow: 24px; }
  .table-screen .pool.crowd1, .table-screen .pool.crowd2 { --dwBase: 34px; }
  .table-screen .felt { grid-template-columns: minmax(0, 214px) minmax(0, 1fr) minmax(0, 214px); }
  .table-screen .opp.left .ptag, .table-screen .opp.right .ptag { padding: 8px 18px 8px 8px; gap: 12px; }
  .table-screen .opp.left .ptag .avatar, .table-screen .opp.right .ptag .avatar { width: 44px; height: 44px; font-size: 20px; }
  .table-screen .opp.left .ptag .nm, .table-screen .opp.right .ptag .nm { font-size: 16px; }
  .table-screen .opp.left .ptag .pts, .table-screen .opp.right .ptag .pts { font-size: 13px; }
  .table-screen .opp.left .ptag .wind, .table-screen .opp.right .ptag .wind { font-size: 25px; }
  .table-screen .opp.left .ptag .bot, .table-screen .opp.right .ptag .bot { display: inline; }
}
@media (max-width: 760px) { .dock-row { height: 60px; flex: none; } }

/* ================= Oct 20 v3: one shared discard area, simple tags, bigger tiles (Figma 07) ================= */
.ptag .nm { white-space: nowrap; }
.river { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; --dw: 44px; }
.river .tile { margin: 0; }
.river.crowd1 { --dw: 38px; gap: 3px; }
.river.crowd2 { --dw: 32px; gap: 3px; }
.river .tile.claimed { opacity: .35; }
.spot { display: grid; justify-items: center; gap: 10px; }

/* ----- computer: fixed 1200 × 704 table, everything placed like the Figma frame ----- */
@media (min-width: 761px) {
  .table-screen { height: 880px; padding-top: 13px; grid-template-rows: 704px minmax(0, 1fr); --tw: 66px; --ow: 40px; }
  .table-screen > .topbar { top: 13px; padding: 16px 24px 0; }
  .table-screen .felt { display: block; position: relative; height: 704px; padding: 0; }
  .table-screen .felt > * { position: absolute; }

  /* simple name tags: avatar + name */
  .table-screen .ptag { padding: 6px 16px 6px 6px; gap: 10px; border-radius: 999px; box-shadow: 0 6px 16px rgba(140,47,85,.18); z-index: 2; }
  .table-screen .ptag .avatar { width: 28px; height: 28px; font-size: 14px; }
  .table-screen .ptag .nm { font-size: 16px; font-weight: 800; }

  /* Peony (top): tile row at the top, tag sitting on top of it */
  .table-screen .opp.top { top: 30px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; }
  .table-screen .opp.top > .ptag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -1px; }
  .table-screen .opp.top .backs { flex-wrap: nowrap; gap: 2px; }
  .table-screen .opp.top .backs .tile { --w: 40px; }
  .table-screen .opp.top .melds, .table-screen .opp.top .flowers { --ow: 34px; }

  /* Bambi (left) and Mochi (right): one sideways column at the edge, tag laid on it */
  .table-screen .opp.left, .table-screen .opp.right { top: 100px; display: block; }
  .table-screen .opp.left { left: 24px; }
  .table-screen .opp.right { right: 24px; }
  .table-screen .opp.left > .ptag, .table-screen .opp.right > .ptag { position: absolute; top: 46%; left: 27px; flex-direction: row; padding: 6px 16px 6px 6px; gap: 10px; }
  .table-screen .opp.left > .ptag { transform: translate(-50%, -50%) rotate(90deg); }
  .table-screen .opp.right > .ptag { left: auto; right: 27px; transform: translate(50%, -50%) rotate(-90deg); }
  .table-screen .opp.left .ptag .pts, .table-screen .opp.right .ptag .pts { display: none; }
  .table-screen .tile.sv { --sw: 40px; margin: 0 0 1px; }
  .table-screen .side-body { gap: 8px; }
  .table-screen .melds.side .tile.sv { --sw: 40px; }
  .table-screen .opp.left .flowers, .table-screen .opp.right .flowers { position: absolute; bottom: -8px; --ow: 34px; }
  .table-screen .opp.left .flowers { left: 62px; }
  .table-screen .opp.right .flowers { right: 62px; }

  /* every discard lines up in one area, in throw order */
  .table-screen .felt > .center { display: block; left: 120px; right: 360px; top: 112px; bottom: 120px; overflow: hidden; }
  .table-screen .river { width: 100%; }

  /* the last discard, lit up at the lower right */
  .table-screen .felt > .spot { right: 200px; bottom: 96px; width: 140px; }
  .table-screen .spot-plate { width: 132px; height: 132px; }
  .table-screen .spot-tile { --w: 60px; }

  /* you: lower right; melds and flowers lower left */
  .table-screen .felt > .me { left: 16px; right: 16px; bottom: 16px; max-height: none; }
  .table-screen .me-left { gap: 8px; }
  .table-screen .me-left .melds .tile, .table-screen .me-left .flowers .tile { --w: 44px; }

  .table-screen .dock { height: auto; padding: 8px 0 0; }
}

/* ----- phone: same idea, smaller ----- */
@media (max-width: 760px) {
  .felt > .center { display: block; grid-column: 2; grid-row: 2; overflow: hidden; padding: 4px 0; }
  .river { --dw: 22px; gap: 2px; justify-content: flex-start; }
  .river.crowd1 { --dw: 19px; }
  .river.crowd2 { --dw: 16px; gap: 1px; }
  .felt > .spot { position: absolute; right: 84px; bottom: 150px; z-index: 1; gap: 4px; }
  .felt > .spot .spot-plate { width: 64px; height: 64px; }
  .felt > .spot .spot-tile { --w: 30px; }
  .felt > .spot .spot-chip { font-size: 10px; padding: 3px 8px; }
  .ptag .nm { font-size: 12px; }
}
/* tags sit on top of their tile row / column */
.backs-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
@media (max-width: 760px) {
  .opp.top .backs-wrap { flex-direction: column-reverse; }
  .opp.left .backs-wrap, .opp.right .backs-wrap { flex-direction: column-reverse; }
}
@media (min-width: 761px) {
  .table-screen .opp.top { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; transform: translateX(-50%); }
  .table-screen .opp.top .melds, .table-screen .opp.top .flowers { flex-wrap: nowrap; }
  .table-screen .backs-wrap > .ptag { position: absolute; top: 50%; left: 50%; max-width: none; }
  .table-screen .opp.top .backs-wrap > .ptag { transform: translate(-50%, -50%); }
  .table-screen .opp.left .backs-wrap > .ptag { transform: translate(-50%, -50%) rotate(90deg); }
  .table-screen .opp.right .backs-wrap > .ptag { transform: translate(-50%, -50%) rotate(-90deg); }
  .table-screen .opp.left > .ptag, .table-screen .opp.right > .ptag { all: unset; }
  .table-screen .felt > .center { left: 150px; right: 360px; top: 104px; }
  .table-screen .opp.right .side-body { flex-direction: row-reverse; }
}
/* discard pile exactly like the Figma frame: 15 per row from the top-left, lit tile at the lower right */
@media (min-width: 761px) {
  .table-screen .felt > .center { left: 236px; right: auto; width: 728px; top: 134px; bottom: auto; height: 300px; }
  .table-screen .river { gap: 15px 4px; --dw: 45px; }
  .table-screen .river.crowd1 { gap: 8px 3px; --dw: 37px; }
  .table-screen .river.crowd2 { gap: 6px 3px; --dw: 30px; }
  .table-screen .felt > .spot { right: 198px; bottom: 84px; width: 140px; }
}
/* tile backs: no white card behind the art */
.tile.tback { background: transparent; box-shadow: 0 2px 4px rgba(36,40,70,.25); }
.tile.tback img { object-fit: fill; }
/* hand + buttons always fit: buttons stack beside the hand, hand never clips */
@media (min-width: 761px) {
  .table-screen { --tw: 62px; }
  .table-screen .dock { grid-template-columns: auto auto; justify-content: center; column-gap: 28px; }
  .table-screen .dock > .hand { grid-column: 1; overflow: visible; }
  .table-screen .dock-row { display: flex; grid-column: 2; }
  .table-screen .dock-row > .actionbar { flex-direction: column; align-items: center; gap: 6px; }
  .table-screen .dock-row .phone-only { display: none; }
}
/* tile backs: navy face (art centered, not stretched) with the same pink edge as every other tile */
.tile.tback { background: #242846; box-shadow: 0 calc(var(--w) * .078) 0 var(--edge), 0 calc(var(--w) * .14) calc(var(--w) * .16) rgba(36,40,70,.25); overflow: hidden; }
.tile.tback img { object-fit: cover; }
.tile.sv.tback { box-shadow: 0 calc(var(--w) * .07) 0 var(--edge); border-radius: calc(var(--w) * 0.156); }

/* ================= Oct 20 v4: placements copied from Figma "07 Table — your turn" (felt = 1200 × 704) ================= */
/* name-only tags */
.ptag .avatar { display: none; }
.ptag { padding: 5px 14px; gap: 0; border-radius: 999px; }
.ptag .nm { font-size: 13px; font-weight: 800; }
.ptag.active { box-shadow: 0 0 0 2.5px var(--sun), 0 4px 10px rgba(140,47,85,.15); }
@media (min-width: 761px) {
  .table-screen .ptag { padding: 5px 12px; gap: 0; box-shadow: 0 4px 10px rgba(140,47,85,.15); }
  .table-screen .ptag .nm { font-size: 12px; }
  .table-screen .ptag.active { box-shadow: 0 0 0 2.5px var(--sun), 0 4px 10px rgba(140,47,85,.15); }
  .table-screen .felt > .me .ptag { padding: 7px 14px; }
  .table-screen .felt > .me .ptag .nm { font-size: 13px; }

  /* top player: 13 tiles across 330–870, sets under the row */
  .table-screen .felt > .opp.top { left: 330px; top: 30px; width: 540px; transform: none; display: block; }
  .table-screen .opp.top .backs-wrap { display: block; }
  .table-screen .opp.top .backs { justify-content: space-between; gap: 0; width: 540px; }
  .table-screen .opp.top .backs .tile { --w: 40px; margin: 0; }
  .table-screen .opp.top > .melds, .table-screen .opp.top > .flowers { position: absolute; left: -1px; top: 63px; gap: 10px; }
  .table-screen .opp.top > .melds .tile, .table-screen .opp.top > .flowers .tile { --w: 41px; --ow: 41px; }
  .table-screen .opp.top > .flowers { left: auto; right: 0; }

  /* left player: column at x 25–79 from y 100; right player: column at x 1126–1180 from y 141 */
  .table-screen .felt > .opp.left { left: 25px; top: 100px; }
  .table-screen .felt > .opp.right { left: 1126px; right: auto; top: 141px; }
  .table-screen .side-body { display: block; position: relative; }
  .table-screen .opp.left .backs, .table-screen .opp.right .backs { gap: 1px; }
  .table-screen .tile.sv { --sw: 40px; margin: 0; }
  .table-screen .backs-wrap { display: block; }
  .table-screen .opp.left .melds.side { position: absolute; left: 61px; top: 0; }
  .table-screen .opp.right .melds.side { position: absolute; right: 61px; top: 1px; }
  .table-screen .melds.side .tile.sv { --sw: 41px; }
  .table-screen .melds.side .meld { gap: 1px; }
  .table-screen .opp.left .flowers, .table-screen .opp.right .flowers { position: absolute; bottom: auto; }
  .table-screen .opp.left .flowers { left: 61px; top: 447px; }
  .table-screen .opp.right .flowers { left: auto; right: 61px; top: 410px; }
  .table-screen .opp.left .flowers .tile, .table-screen .opp.right .flowers .tile { --ow: 41px; }

  /* one discard pile, 15 across from (236,198) */
  .table-screen .felt > .center { left: 236px; top: 198px; width: 728px; height: 230px; right: auto; bottom: auto; }
  .table-screen .river { gap: 15px 3.6px; --dw: 45px; }
  .table-screen .river.crowd1 { gap: 8px 3px; --dw: 38px; }
  .table-screen .river.crowd2 { gap: 5px 3px; --dw: 31px; }

  /* last discard plate (870,442) + chip under it */
  .table-screen .felt > .spot { left: 866px; top: 442px; right: auto; bottom: auto; width: 140px; gap: 10px; }

  /* you: tag ends at x 1123, status pill ends at 1005; flowers + sets from (81,619) */
  .table-screen .felt > .me { left: 81px; right: 77px; bottom: 26px; top: auto; }
  .table-screen .me-left .flowers .tile { --w: 54px; }
  .table-screen .me-left .melds .tile { --w: 44px; }

  /* hand: 66px tiles, 5px apart; Discard to the right */
  .table-screen { --tw: 66px; }
  .table-screen .dock > .hand { gap: 5px; }
  .table-screen .hand .tile.drawn { margin-left: 16px; }
}
@media (min-width: 761px) {
  .table-screen .felt > .opp.right { top: 100px; }
  .table-screen .opp.left .flowers, .table-screen .opp.right .flowers { top: auto; bottom: 0; flex-direction: column; gap: 3px; }
  .table-screen .me-left .flowers, .table-screen .me-left .melds { flex-wrap: nowrap; }
  .table-screen .me-left { flex-wrap: nowrap; align-items: flex-end; }
}
/* side players: sets, then flowers, stacked from the top beside the column (Figma 07) */
.side-extras { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.side-extras .flowers { flex-direction: column; gap: 2px; }
@media (min-width: 761px) {
  .table-screen .side-extras { position: absolute; top: 0; gap: 8px; }
  .table-screen .opp.left .side-extras { left: 61px; }
  .table-screen .opp.right .side-extras { right: 61px; }
  .table-screen .opp .side-extras .melds.side, .table-screen .opp .side-extras .flowers { position: static; left: auto; right: auto; top: auto; bottom: auto; }
  .table-screen .side-extras .flowers .tile.sv { --sw: 41px; }
}

/* ================= phone table, placed like Figma "M2 Table — phone" (felt 370 wide) ================= */
@media (max-width: 760px) {
  .felt { display: block; position: relative; padding: 0; }
  .felt > * { position: absolute; }
  .ptag { padding: 3px 9px; }
  .ptag .nm { font-size: 10px; }
  .ptag .clock { font-size: 10px; top: -9px; right: -10px; padding: 2px 5px; }

  /* top player: full-width row at the top, tag on it, sets under it on the left */
  .felt > .opp.top { left: 10px; right: 10px; top: 10px; display: block; transform: none; }
  .opp.top .backs-wrap { position: relative; display: block; }
  .opp.top .backs { justify-content: space-between; gap: 0; flex-wrap: nowrap; }
  .opp.top .backs .tile { --w: 24px; margin: 0; }
  .opp.top .backs-wrap > .ptag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .opp.top > .melds, .opp.top > .flowers { position: absolute; top: 40px; left: 12px; gap: 6px; }
  .opp.top > .flowers { left: auto; right: 12px; }
  .opp.top > .melds .tile, .opp.top > .flowers .tile { --ow: 20px; --w: 20px; }

  /* side players: one column on each edge from y 117, tag on it, sets + flowers beside the top */
  .felt > .opp.left { left: 10px; top: 117px; }
  .felt > .opp.right { right: 10px; top: 117px; }
  .side-body { display: block; position: relative; }
  .opp.left .backs-wrap, .opp.right .backs-wrap { position: relative; display: block; }
  .opp.left .backs, .opp.right .backs { gap: 1px; }
  .tile.sv { --sw: 24px; margin: 0; }
  .opp.left .backs-wrap > .ptag, .opp.right .backs-wrap > .ptag { position: absolute; top: 50%; left: 50%; }
  .opp.left .backs-wrap > .ptag { transform: translate(-50%, -50%) rotate(-90deg); }
  .opp.right .backs-wrap > .ptag { transform: translate(-50%, -50%) rotate(90deg); }
  .opp .side-extras { position: absolute; top: 0; gap: 6px; }
  .opp.left .side-extras { left: 37px; }
  .opp.right .side-extras { right: 37px; }
  .side-extras .melds.side .tile.sv, .side-extras .flowers .tile.sv { --sw: 20px; }
  .side-extras .melds.side, .side-extras .flowers { position: static; }

  /* discard pile: 7 across, centered under the top row */
  .felt > .center { left: 50%; top: 102px; width: 170px; height: auto; max-height: calc(100% - 330px); transform: translateX(-50%); padding: 0; grid-column: auto; grid-row: auto; }
  .river { --dw: 22px; gap: 4px 2px; justify-content: flex-start; }
  .river.crowd1 { --dw: 18px; gap: 3px 2px; }
  .felt > .center:has(.river.crowd1) { width: 182px; }
  .river.crowd2 { --dw: 15px; gap: 2px 1px; }

  /* last discard plate, then the status pill / call tray, near the bottom */
  .felt > .spot { left: 50%; right: auto; top: auto; bottom: 115px; transform: translateX(-50%); width: 120px; gap: 8px; z-index: 1; }
  .felt > .spot .spot-plate { width: 72px; height: 72px; }
  .felt > .spot .spot-tile { --w: 36px; }
  .felt > .me { left: 12px; right: 12px; bottom: 12px; top: auto; max-height: none; display: block; }
  .me-right { position: absolute; left: 0; right: 0; bottom: 51px; display: flex; justify-content: center; }
  .me-right .status { font-size: 14px; padding: 9px 18px; }
  .me-right > .tray { margin-bottom: -51px; }
  .me-left { position: absolute; left: 0; bottom: 0; }
  .me-left .flowers .tile, .me-left .melds .tile { --w: 22px; }

  /* hand under the table; your tag bottom-left, Discard / Call + Pass bottom-right */
  .table-screen { --tw: 24px; }
  .dock > .hand { gap: 1px; justify-content: center; padding-top: 12px; }
}
@media (max-width: 760px) {
  .opp.left .backs-wrap > .ptag, .opp.right .backs-wrap > .ptag { flex-direction: row; border-radius: 999px; padding: 3px 9px; gap: 0; width: max-content; text-align: left; }
  .ptag .nm { white-space: nowrap; overflow: visible; }
  .felt > .center { overflow: hidden; width: 170px; }
  .river { --dw: 19px; gap: 3px 2px; }
  .river.crowd1 { --dw: 16px; gap: 2px 1px; }
  .felt > .center:has(.river.crowd1) { width: 170px; }
  .river.crowd2 { --dw: 14px; gap: 2px 1px; }
}
@media (max-width: 760px) { .backs-wrap > .ptag { max-width: none; } }
.home .phone-tagline { display: none !important; }

/* phone: side columns size their tiles to the felt height, so 13 tiles always fit (short browser windows too) */
@media (max-width: 760px) {
  .table-screen .felt { container-type: size; container-name: felt; }
  .opp.left .backs .tile.sv, .opp.right .backs .tile.sv { --sw: clamp(13px, calc((100cqh - 190px) / 13 - 1px), 24px); }
  .opp.left .side-extras .tile.sv, .opp.right .side-extras .tile.sv { --sw: clamp(13px, calc((100cqh - 190px) / 13 - 4px), 20px); }
}
@media (max-width: 760px) {
  @container felt (max-height: 540px) {
    .spot { bottom: 104px !important; gap: 4px !important; }
    .spot .spot-plate { width: 54px !important; height: 54px !important; }
    .spot .spot-tile { --w: 28px !important; }
    .center { max-height: calc(100% - 270px) !important; }
    .me-right .status { font-size: 13px; padding: 7px 14px; }
  }
}

/* no last-discard plate any more: the call tray shows the thrown tile, the pile shows the rest */
.spot { display: none !important; }
@media (max-width: 760px) {
  /* phone pile like M2: 7 across, 22px tiles, starting under the top row */
  .felt > .center, .felt > .center:has(.river.crowd1) { width: 166px; top: 102px; max-height: calc(100% - 250px); }
  .river { --dw: 22px; gap: 4px 2px; }
  .river.crowd1 { --dw: 17px; gap: 3px 1px; }
  .felt > .center:has(.river.crowd1) { width: 170px; }
  .river.crowd2 { --dw: 14px; gap: 2px 1px; }
  @container felt (max-height: 540px) { .center { max-height: calc(100% - 210px) !important; } }
}

/* ---------- call tray always on the table (merged with the old last-discard plate) ---------- */
.felt > .tray-spot { position: absolute; left: 478px; top: 498px; z-index: 2; }
.tray-spot .tray { position: relative; display: block; }
.tray-spot .tray-msg { position: absolute; left: 0; bottom: calc(100% + 7px); white-space: nowrap; max-width: none; }
.tray.idle .tray-box.yours { opacity: .5; }
.tray-box.theirs .tray-slot { opacity: .5; }
.tray-last.landed { animation: trayLand .35s ease-out; }
@keyframes trayLand { 0% { transform: scale(1.12); } 100% { transform: none; } }
@media (max-width: 760px) {
  .felt > .tray-spot { left: 50%; top: auto; bottom: 70px; transform: translateX(-50%); }
  .tray-spot .tray-msg { left: 50%; transform: translateX(-50%); }
  .me-right { bottom: 14px; }
  .me-right > .tray { margin-bottom: 0; }
  .felt > .center, .felt > .center:has(.river.crowd1) { max-height: calc(100% - 270px); }
  @container felt (max-height: 540px) { .center { max-height: calc(100% - 250px) !important; } .felt > .tray-spot { bottom: 60px; } }
}

/* 07: the old round plate holds the newest discard, your-tiles rectangle sits right beside it */
.felt > .tray-spot { left: 429px; top: 465px; }
.tray-spot .tray-slots { align-items: center; gap: 6px; }
.tray-spot .spot-plate { width: 132px; height: 132px; flex: none; }
.tray-spot .spot-tile { --w: 60px; }
.tray-spot .tray-box.yours { width: 170px; height: 82px; box-sizing: border-box; }
.tray-spot .tray-msg { left: 138px; }
@media (max-width: 760px) {
  .felt > .tray-spot { left: 50%; top: auto; bottom: 60px; }
  .tray-spot .spot-plate { width: 72px; height: 72px; }
  .tray-spot .spot-tile { --w: 34px; }
  .tray-spot .spot-empty { width: 30px; height: 40px; }
  .tray-spot .tray-box.yours { width: 126px; height: 62px; }
  .tray-spot .tray-msg { left: 50%; }
}
@media (max-width: 760px) {
  .felt > .tray-spot { bottom: 68px; }
  @container felt (max-height: 540px) { .felt > .tray-spot { bottom: 62px; } .tray-spot .spot-plate { width: 60px; height: 60px; } .tray-spot .spot-tile { --w: 30px; } }
}

/* who threw the tile on the plate, just under it */
.tray-plate-wrap { position: relative; flex: none; }
.tray-who { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 1; }
@media (max-width: 760px) {
  .tray-who { top: calc(100% + 4px); font-size: 11px; padding: 3px 9px; }
  .felt > .tray-spot { bottom: 100px; }
  .felt > .center, .felt > .center:has(.river.crowd1) { max-height: calc(100% - 300px); }
  @container felt (max-height: 540px) { .felt > .tray-spot { bottom: 84px; } .center { max-height: calc(100% - 270px) !important; } }
}

/* 07: "who threw" chip sits right of the plate, level with its top; your-tiles box below it */
.tray-spot .tray-slots { align-items: flex-start; }
.tray-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tray-who { position: static; transform: none; margin-left: 2px; }
.tray-who-gap { height: 36px; }
.tray-spot .tray-msg { left: 138px; }
@media (max-width: 760px) {
  .tray-spot .tray-slots { align-items: center; }
  .tray-who { position: static; transform: none; }
  .tray-who-gap { height: 24px; }
  .tray-spot .tray-msg { left: 50%; }
  .felt > .tray-spot { bottom: 64px; }
  @container felt (max-height: 540px) { .felt > .tray-spot { bottom: 58px; } }
}

/* phone, like M3: 82px plate, your-tiles box centred beside it, chip floating just above the box */
@media (max-width: 760px) {
  .tray-spot .tray-slots { align-items: center; gap: 6px; }
  .tray-spot .spot-plate { width: 82px; height: 82px; }
  .tray-spot .spot-tile { --w: 34px; }
  .tray-col { position: relative; display: block; }
  .tray-who { position: absolute; left: -2px; bottom: calc(100% + 8px); font-size: 11px; padding: 4px 10px; }
  .tray-who-gap { display: none; }
  .felt > .tray-spot { bottom: 60px; }
  .tray-spot .tray-msg { bottom: calc(100% + 34px); }
  @container felt (max-height: 540px) { .felt > .tray-spot { bottom: 56px; } .tray-spot .spot-plate { width: 70px; height: 70px; } .tray-spot .spot-tile { --w: 30px; } }
}
@media (max-width: 760px) { .tray-spot .tray-who { top: auto; height: auto; line-height: normal; } }
@media (max-width: 760px) { .felt > .tray-spot { bottom: 68px; } }

/* discard pile area: room for every discard in a hand; fitRiver() picks the tile size */
.table-screen .felt > .center { left: 236px; top: 198px; width: 728px; height: 257px; right: auto; bottom: auto; overflow: hidden; }
.river { justify-content: flex-start; }
@media (max-width: 760px) {
  .table-screen .felt > .center, .table-screen .felt > .center:has(.river.crowd1) { left: 80px; right: 80px; width: auto; top: 102px; bottom: 182px; height: auto; max-height: none; transform: none; }
  @container felt (max-height: 540px) { .table-screen .felt > .center { bottom: 168px; max-height: none !important; } }
}

/* every player tag the same: one size, even padding, name centred */
.table-screen .ptag, .table-screen .opp .ptag, .table-screen .backs-wrap > .ptag, .table-screen .me-right .ptag {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  box-sizing: border-box; height: 30px; min-width: 72px; padding: 0 14px; border-radius: 999px;
}
.table-screen .ptag .nm, .table-screen .opp .ptag .nm { font-size: 14px; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; }
.table-screen .ptag .avatar { display: none; }
@media (max-width: 760px) {
  .table-screen .ptag, .table-screen .opp .ptag, .table-screen .backs-wrap > .ptag, .table-screen .me-right .ptag { height: 24px; min-width: 56px; padding: 0 10px; }
  .table-screen .ptag .nm, .table-screen .opp .ptag .nm { font-size: 12px; }
}
.table-screen .ptag { padding: 0 14px !important; height: 30px !important; gap: 0 !important; justify-content: center !important; }
.table-screen .ptag .nm { font-size: 14px !important; }
@media (max-width: 760px) {
  .table-screen .ptag { padding: 0 10px !important; height: 24px !important; }
  .table-screen .ptag .nm { font-size: 12px !important; }
}
.table-screen .ptag .clock { top: -15px !important; right: -8px !important; }
@media (max-width: 760px) { .table-screen .ptag .clock { top: -13px !important; right: -8px !important; } }