/* Game table, styled like a real felt table with wooden racks and three
   other players sitting around it (top, left, right), on every screen size.
   Phones: the table fills the screen, your 14 tiles sit in one row on your
   rack at the bottom, the controls just above it. */
.play main { padding-top: 8px; gap: 12px; padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); }
.play-title { font-size: clamp(18px, 4.6vw, 28px); margin: 0 4px; }
@media (min-width: 1024px) { .play main { padding: 18px 24px 36px; } }

.table { position: relative; display: grid; gap: 4px; border-radius: 18px; padding: 8px; color: #fff;
  background: var(--felt-tex), radial-gradient(120% 90% at 50% 45%, var(--felt-a), var(--felt-b));
  box-shadow: inset 0 0 0 6px var(--rail), inset 0 0 0 8px var(--rail-dark), 0 10px 26px rgba(0,0,0,.18);
  height: calc(100svh - 112px); min-height: 590px; max-height: 1000px;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "tools tools tools" "top top top" "left mid right" "ctrl ctrl ctrl" "rack rack rack"; }
@media (min-width: 1024px) { .table { height: calc(100svh - 90px); } }
@media (min-width: 700px) {
  .table { padding: 12px; gap: 8px; grid-template-columns: 96px minmax(0, 1fr) 96px; }
}

/* ----- tools row ----- */
.table-tools { grid-area: tools; display: flex; justify-content: flex-end; align-items: center; gap: 6px; padding: 2px 4px 0; }
.table-tools .bank { margin-right: auto; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(20,45,22,.45); border-radius: 999px; padding: 2px 10px; font-size: 15px; }
.table button.mini { min-height: 34px; padding: 4px 12px; font-size: 14px; border-radius: 9px; box-shadow: 0 2px 0 #c9bfa5; }

/* ----- name plates ----- */
.plate { display: inline-flex; align-items: center; gap: 6px; background: rgba(20,45,22,.6); border-radius: 999px; padding: 3px 10px 3px 3px;
  font-weight: 700; font-size: 15px; white-space: nowrap; position: relative; transition: box-shadow .2s; }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: #fff;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); flex: none; }
.count { background: rgba(255,255,255,.22); border-radius: 999px; padding: 0 7px; font-size: 13px; }
.east { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #c0392b; color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.slot b { display: grid; place-items: center; height: 100%; font-size: 26px; color: rgba(255,255,255,.75); }
#modal .swap-opt { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; }
#modal .swap-opt .tile { width: 44px; flex: none; }
.plate.active { background: #f2b631; color: #2b2100; box-shadow: 0 0 0 3px rgba(255,224,130,.55), 0 0 16px rgba(255,214,90,.8); }
.plate.active .count { background: rgba(0,0,0,.12); }
.thinking { display: inline-flex; gap: 3px; margin-left: 2px; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: think 1s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ----- opponents ----- */
.seat { position: relative; min-width: 0; display: flex; align-items: center; }
.seat-top { grid-area: top; flex-direction: column; gap: 4px; }
.seat-left { grid-area: left; flex-direction: column; justify-content: center; align-self: center; gap: 6px; }
.seat-right { grid-area: right; flex-direction: column; justify-content: center; align-self: center; gap: 6px; }
.seat-top .rack-backs { order: -1; }
.rack-backs { display: flex; line-height: 0; }
.rack-backs .back { line-height: 0; flex: none; }
.rack-backs .back svg { width: 100%; height: auto; display: block; }
/* across the table: same wooden rack and overlapping tiles as the side players */
.seat-top .rack-backs { padding: 3px 4px; background: linear-gradient(#d9a868, var(--rail-dark)); border-radius: 7px; }
.seat-top .back { --w: 22px; width: var(--w); margin-left: calc(var(--w) * -0.44); }
.seat-top .back:first-child { margin-left: 0; }
.seat-top .back.drawn { margin-left: 4px; }
@media (min-width: 700px) { .seat-top .back { --w: 41px; } }
.seat-left .rack-backs, .seat-right .rack-backs { flex-direction: column; padding: 4px 3px; background: linear-gradient(90deg, #d9a868, var(--rail-dark)); border-radius: 7px; }
.seat-left .back, .seat-right .back { width: 30px; margin-top: -9px; }
.seat-left .back:first-child, .seat-right .back:first-child { margin-top: 0; }
.seat-left .back.drawn, .seat-right .back.drawn { margin-top: 4px; }
/* side players: avatar on top, name under it */
.seat-left .plate, .seat-right .plate { flex-direction: column; gap: 1px; padding: 3px 2px 4px; border-radius: 14px; font-size: 11px; max-width: 100%; }
.seat-left .plate .count, .seat-right .plate .count { position: absolute; top: -6px; right: -4px; background: #fff; color: #2a3a2c; font-size: 11px; padding: 0 5px; }
.seat-left .plate .pname, .seat-right .plate .pname { max-width: 38px; overflow: hidden; text-overflow: ellipsis; }
.seat-left .thinking, .seat-right .thinking { margin: 0; }
.exposures { display: flex; flex-wrap: wrap; gap: 4px; }
.exposure { display: flex; gap: 1px; background: rgba(255,255,255,.18); padding: 2px; border-radius: 5px; }
.seat .exposure .tile { width: 15px; }
.seat-top .exposures { justify-content: center; }
.seat-left .exposures, .seat-right .exposures { position: absolute; bottom: 0; flex-direction: column; z-index: 2; }
.seat-left .exposures { left: calc(100% + 4px); } .seat-right .exposures { right: calc(100% + 4px); align-items: flex-end; }
@media (min-width: 700px) {
  .seat-left .back, .seat-right .back { width: 56px; margin-top: -18px; }
  .seat-left .plate, .seat-right .plate { font-size: 14px; padding: 4px 8px 6px; }
  .seat-left .plate .pname, .seat-right .plate .pname { max-width: none; }
  .avatar { width: 34px; height: 34px; font-size: 17px; }
  .seat .exposure .tile { width: 22px; }
}

/* ----- speech bubbles ----- */
.bubble { position: absolute; z-index: 8; background: #fff; color: #1c2a22; font-weight: 700; font-size: 17px; line-height: 1.2;
  padding: 7px 13px; border-radius: 14px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.28); pointer-events: none;
  animation: pop .22s ease-out; }
.bubble::after { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); }
.bubble-top { top: calc(100% + 4px); left: 50%; translate: -50% 0; }
.bubble-top::after { top: -5px; left: calc(50% - 6px); }
.bubble-left { left: calc(100% + 8px); top: 18%; }
.bubble-left::after { left: -5px; top: calc(50% - 6px); }
.bubble-right { right: calc(100% + 8px); top: 18%; }
.bubble-right::after { right: -5px; top: calc(50% - 6px); }
.bubble-me { bottom: calc(100% + 8px); right: 12px; }
.bubble-me::after { bottom: -5px; right: 24px; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ----- middle of the table ----- */
.mid { grid-area: mid; position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 4px; }
/* the wall: a square of face-down tiles, two high, around the discards */
.mid { --t: 12px; --d: calc(var(--t) * 1.375); --th: calc(var(--d) + var(--t) * .36); }
.wall { position: absolute; inset: 3px; pointer-events: none; }
.wside { position: absolute; display: flex; justify-content: center; gap: 1px; pointer-events: auto; }
.w0 { top: 0; left: var(--th); right: var(--th); height: var(--th); }
.w2 { bottom: 0; left: var(--th); right: var(--th); height: var(--th); flex-direction: row-reverse; align-items: flex-end; }
.w1 { right: 0; top: var(--th); bottom: var(--th); width: var(--th); flex-direction: column; align-items: flex-end; }
.w3 { left: 0; top: var(--th); bottom: var(--th); width: var(--th); flex-direction: column-reverse; }
.stk { flex: none; width: var(--t); height: var(--d); border-radius: calc(var(--t) * .18); position: relative;
  background: linear-gradient(135deg, #46b892, #1c6a52); outline: .5px solid #155a45; outline-offset: -.5px;
  box-shadow: 0 calc(var(--t) * .11) 0 #efe6cc, 0 calc(var(--t) * .17) 0 #1c6a52, 0 calc(var(--t) * .29) 0 #e4dbc1, 0 calc(var(--t) * .36) 3px rgba(0,0,0,.35); }
.w1 .stk, .w3 .stk { width: var(--d); height: var(--t); }
.w1 .stk, .w3 .stk { margin-bottom: calc(var(--t) * .3); }
.stk.one { translate: 0 calc(var(--t) * .17); box-shadow: 0 calc(var(--t) * .11) 0 #e4dbc1, 0 calc(var(--t) * .19) 3px rgba(0,0,0,.35); }
.stk.gone { visibility: hidden; }
.wall.can-draw .wside { cursor: pointer; }
.stk.live { filter: drop-shadow(0 0 3px #ffe27a) drop-shadow(0 0 6px #ffd34d); animation: live 1s ease-in-out infinite alternate; z-index: 1; }
@keyframes live { to { filter: drop-shadow(0 0 5px #fff3b8) drop-shadow(0 0 12px #ffc93d); translate: 0 calc(var(--t) * -.25); } }
.stk.one.live { animation-name: live-one; }
@keyframes live-one { from { translate: 0 calc(var(--t) * .17); } to { filter: drop-shadow(0 0 5px #fff3b8) drop-shadow(0 0 12px #ffc93d); translate: 0 calc(var(--t) * -.1); } }
.wall-count { position: absolute; top: 0; left: 0; width: var(--th); height: var(--th); display: grid; place-items: center; pointer-events: none;
  font: 700 clamp(11px, calc(var(--t) * .75), 16px)/1 var(--body); color: #fff; background: rgba(20,45,22,.55); border-radius: 50%; }
.draw-tip { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; pointer-events: none; text-align: center;
  background: rgba(20,45,22,.82); color: #ffe08a; font-weight: 700; font-size: 18px; line-height: 1.25; padding: 8px 16px; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); animation: pop .25s ease-out; }
.discards { position: absolute; inset: calc(var(--th) + 8px); overflow: hidden; display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start; justify-content: center; }
.discards.many .tile { width: 18px !important; }
.discards .tile { width: 24px; }
.discards .tile.last svg { filter: drop-shadow(0 0 3px #ffd34d) drop-shadow(0 0 3px #ffd34d); }
.fly-top { animation: fly-top .35s ease-out; } .fly-left { animation: fly-left .35s ease-out; }
.fly-right { animation: fly-right .35s ease-out; } .fly-me { animation: fly-me .35s ease-out; }
@keyframes fly-top { from { transform: translateY(-140px) scale(1.6); } }
@keyframes fly-left { from { transform: translateX(-160px) scale(1.6); } }
@keyframes fly-right { from { transform: translateX(160px) scale(1.6); } }
@keyframes fly-me { from { transform: translateY(200px) scale(1.6); } }
.callout { position: absolute; left: 50%; bottom: calc(var(--th) + 8px); translate: -50% 0; z-index: 4; display: flex; align-items: center; gap: 10px;
  background: rgba(20,45,22,.82); padding: 8px 14px; border-radius: 14px; font-size: 15px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.callout b { font-size: 18px; color: #ffe08a; }
.callout .tile { width: 50px; }
@media (min-width: 700px) { .discards .tile { width: 30px; } .discards.many .tile { width: 24px !important; } .callout .tile { width: 66px; } }

/* ----- controls ----- */
.control { grid-area: ctrl; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; }
.toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 640px; }
.status { margin: 0; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.3; background: rgba(20,45,22,.5); padding: 4px 14px; border-radius: 12px; }
.primary-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: 100%; }
.primary-row:empty { display: none; }
.stage { display: flex; gap: 4px; padding: 3px; border: 2px dashed rgba(255,255,255,.6); border-radius: 10px; }
.stage .tile { width: 40px; cursor: pointer; }
.slot { width: 40px; aspect-ratio: 64 / 88; border-radius: 6px; background: rgba(0,0,0,.12); }
@media (min-width: 700px) { .stage .tile, .slot { width: 56px; } }

.table button { font: inherit; font-weight: 700; font-size: 17px; min-height: 46px; padding: 6px 14px; border-radius: 12px; cursor: pointer;
  border: none; background: #fffaf0; color: #2a3a2c; box-shadow: 0 3px 0 #c9bfa5; }
.table button:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9bfa5; }
.table button.primary { background: var(--gold); color: var(--gold-ink); box-shadow: 0 3px 0 #b8861d; min-width: 130px; font-size: 19px; }
.table button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.table .tool { min-height: 40px; font-size: 14px; padding: 4px 4px; }
.table .tool.on { background: #d8f2cf; box-shadow: 0 3px 0 #9cc78e; }
.table .tool.win:not(:disabled) { background: #d6382b; color: #fff; box-shadow: 0 3px 0 #9b2318; animation: glow 1s infinite alternate; }
@keyframes glow { to { box-shadow: 0 3px 0 #9b2318, 0 0 14px #ff6a5c; } }
@media (min-width: 700px) { .table .tool { font-size: 16px; min-height: 46px; } }

/* ----- my rack: all 14 tiles in one row ----- */
.myrack { grid-area: rack; position: relative; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(#d9a868, var(--rail-dark)); border-radius: 10px; padding: 16px 4px 6px; }
.myrack.active { box-shadow: 0 0 0 3px #f2b631, 0 0 16px rgba(255,214,90,.7); }
.myrack > .plate { position: absolute; top: -14px; left: 8px; font-size: 13px; padding: 2px 9px 2px 2px; }
.myrack > .plate .avatar { width: 24px; height: 24px; font-size: 13px; }
.exposures.mine { justify-content: center; }
.exposures.mine .tile { width: 26px; }
.exposures.mine:empty { display: none; }
.hand { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 1000px; margin: 0 auto; }
.hand .tile { width: 100%; cursor: pointer; transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
@media (min-width: 700px) { .hand { gap: 3px; } .myrack { padding: 20px 10px 10px; } .exposures.mine .tile { width: 34px; } }
@media (hover: hover) { .hand .tile:hover { transform: translateY(-5px); } }
.tile.sel { transform: translateY(-12px); }
.tile.sel svg { filter: drop-shadow(0 0 4px #ffd34d) drop-shadow(0 0 4px #ffd34d); }
.tile.sug:not(.sel) svg { filter: drop-shadow(0 0 3px #3ee0a0) drop-shadow(0 0 4px #3ee0a0); }
.tile.need { opacity: .38; }
.hand .tile.incoming { visibility: hidden; }
.tile.drew:not(.sel) { transform: translateY(-6px); }
.tile.drew:not(.sel) svg { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #9fd8ff); }

/* ----- drawing from the wall: a hand reaches out and brings the tile back ----- */
#fx { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; border-radius: 18px; }
body.gamemode #fx { border-radius: 0; }
.fx-tile, .fx-arm { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.fx-arm { line-height: 0; filter: drop-shadow(6px 12px 10px rgba(0,0,0,.38)); }
.fx-arm img { width: 100%; height: auto; display: block; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%); mask-image: linear-gradient(to bottom, #000 92%, transparent 100%); }
.fx-tile { line-height: 0; perspective: 600px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.fx-tile svg { width: 100%; height: auto; display: block; }
.fx-flip { position: relative; transform-style: preserve-3d; }
.fx-back, .fx-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fx-face { position: absolute; inset: 0; transform: rotateY(180deg); }
.fx-tile.shown { filter: drop-shadow(0 0 10px #fff3b8) drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
@media (prefers-reduced-motion: reduce) {
  .hand .tile, .plate { transition: none; }
  .bubble, .fly-top, .fly-left, .fly-right, .fly-me, .thinking i, .table .tool.win, .stk.live, .draw-tip { animation: none; }
}

/* ----- dialogs ----- */
dialog { border: none; border-radius: 18px; padding: 0; width: min(640px, calc(100vw - 20px)); background: var(--panel); color: var(--ink); }
dialog::backdrop { background: rgba(0,0,0,.5); }
#modal-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 85vh; overflow: auto; }
#modal-body h2 { font-size: 26px; }
#modal-body h3 { margin-top: 10px; color: var(--jade); }
#modal-body .muted { color: var(--muted); margin: 0; }
#modal .actions { display: flex; flex-wrap: wrap; gap: 8px; }
#modal button { flex: 1 1 auto; font: inherit; font-weight: 700; font-size: 18px; min-height: 52px; padding: 10px 16px; border-radius: 12px; cursor: pointer;
  border: 2px solid var(--line); background: var(--panel); color: var(--ink); }
#modal button.primary { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.note { background: #fff4d6; color: #6b4d00; padding: 8px 10px; border-radius: 10px; margin: 0; }
.hint { border-top: 1px solid var(--line); padding-top: 10px; }
.hint-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pill { background: var(--jade); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.hint-tiles { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }
.hint-tiles .tile { width: 34px; }
.card-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 12px; border-bottom: 1px solid var(--line); padding: 6px 0; }
.card-row p { grid-column: 1 / -1; margin: 0; }
.pat { font-family: "Courier New", monospace; font-weight: 700; font-size: 19px; letter-spacing: 1px; overflow-wrap: anywhere; }
.val { font-weight: 700; white-space: nowrap; }
.sa { color: #1c7a4c; } .sb { color: #b8261d; } .sc { color: #1d4f9c; } .hon { color: var(--ink); }
.up { color: var(--jade); font-weight: 700; } .down { color: #c0392b; font-weight: 700; }
.pay-box { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pay-box h3 { margin: 0; color: var(--jade); }
.pay-rule { margin: 0; background: #fff4d6; color: #5a4300; padding: 8px 10px; border-radius: 10px; line-height: 1.35; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.pay-row .pay-name { font-weight: 700; }
.pay-row p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 16px; line-height: 1.3; }
.pay-row.me { background: rgba(242,182,49,.12); border-radius: 8px; padding: 6px 8px; }
.pay-total { margin: 4px 0 0; }
.small { font-size: 15px; }
.under-game { margin-top: 4px; }

/* ===== stage sits on the table, like tiles pushed to the middle ===== */
.mid .stage { position: absolute; left: 50%; bottom: calc(var(--th) + 8px); translate: -50% 0; z-index: 4; background: rgba(20,45,22,.55); }

/* ===== "turn your phone" prompt ===== */
#game-wrap { position: relative; }
.turn-tip { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px; border-radius: 18px; background: rgba(16,40,20,.72); }
.turn-tip[hidden] { display: none; }
.turn-card { background: var(--panel); color: var(--ink); border-radius: 20px; padding: 22px 20px; max-width: 340px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.turn-ico { width: 64px; height: 64px; color: var(--jade); animation: tilt 2.2s ease-in-out infinite; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.turn-h { margin: 0; font-family: var(--head); font-size: 24px; font-weight: 700; }
.turn-p { margin: 0; color: var(--muted); }
.turn-card .btn { width: 100%; }
.turn-skip { background: none; border: none; font: inherit; color: var(--muted); text-decoration: underline; padding: 10px; min-height: 44px; cursor: pointer; }

/* ===== full-screen game mode (phones) ===== */
body.gamemode { overflow: hidden; }
body.gamemode #game-wrap { position: fixed; inset: 0; z-index: 100; background: var(--felt-b); }
body.gamemode #game-wrap .table { height: 100%; min-height: 0; max-height: none; border-radius: 0; }
#game-wrap:fullscreen { background: var(--felt-b); }
/* iPhone held upright with rotation lock: we turn the table ourselves */
body.gamemode #game-wrap.rot { inset: auto; top: 0; left: 0; width: 100dvh; height: 100vw; transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
#game-wrap.rot dialog[open] { position: absolute; inset: 0; margin: auto; z-index: 50; max-height: 92%; overflow: auto; box-shadow: 0 0 0 200vmax rgba(0,0,0,.5); }

/* ===== sideways layout: controls on the right, big tiles along the bottom ===== */
#game-wrap.land { container-type: size; }
#game-wrap.land .table { padding: 6px max(8px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); gap: 4px;
  grid-template-columns: 46px minmax(0, 1fr) 46px minmax(170px, 24cqw);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top top tools" "left mid right ctrl" "rack rack rack rack";
  box-shadow: inset 0 0 0 4px var(--rail), inset 0 0 0 6px var(--rail-dark); }
#game-wrap.land .table-tools { flex-wrap: wrap; justify-content: flex-end; padding: 0; }
#game-wrap.land .table button.mini { min-height: 36px; font-size: 14px; padding: 4px 10px; }
#game-wrap.land .seat-top .back { --w: 22px; }
#game-wrap.land .seat-top { flex-direction: row; justify-content: center; gap: 10px; }
#game-wrap.land .seat-top .rack-backs { order: 0; }
#game-wrap.land .seat-left .back, #game-wrap.land .seat-right .back { width: 30px; margin-top: -11px; }
#game-wrap.land .seat-left .back:first-child, #game-wrap.land .seat-right .back:first-child { margin-top: 0; }
#game-wrap.land .seat-left .plate, #game-wrap.land .seat-right .plate { font-size: 11px; padding: 3px 2px 4px; }
#game-wrap.land .avatar { width: 28px; height: 28px; font-size: 15px; }
#game-wrap.land .discards .tile { width: clamp(20px, 6cqh, 30px); }
#game-wrap.land .control { justify-content: center; gap: 8px; padding: 0; }
#game-wrap.land .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#game-wrap.land .table .tool { min-height: clamp(40px, 11cqh, 54px); font-size: 16px; }
#game-wrap.land .status { font-size: 15px; padding: 4px 10px; }
#game-wrap.land .table button.primary { min-width: 0; width: 100%; min-height: clamp(46px, 13cqh, 60px); font-size: 20px; }
#game-wrap.land .primary-row { flex-direction: column; gap: 6px; }
#game-wrap.land .primary-row button { width: 100%; }
#game-wrap.land .stage .tile, #game-wrap.land .slot { width: clamp(36px, 11cqh, 52px); }
/* your tiles: as big as the height allows, all 14 in one row */
#game-wrap.land .myrack { padding: 14px 6px 5px; }
#game-wrap.land .hand { gap: 3px; max-width: min(100%, calc(19cqh * 14 + 39px)); }
#game-wrap.land .exposures.mine { position: absolute; right: 8px; top: -20px; }
#game-wrap.land .exposures.mine .tile { width: clamp(20px, 6cqh, 28px); }
#game-wrap.land .tile.sel { transform: translateY(-9px); }
#game-wrap.land .table { grid-template-columns: 46px minmax(0, 1fr) 46px minmax(196px, 27cqw); }
#game-wrap.land .table-tools { flex-wrap: nowrap; gap: 5px; }
#game-wrap.land .table-tools .bank { font-size: 13px; padding: 2px 8px; }
#game-wrap.land .control { gap: 5px; justify-content: flex-start; }
#game-wrap.land .toolbar { gap: 5px; }
#game-wrap.land .table .tool { min-height: clamp(38px, 10.5cqh, 52px); font-size: 15px; }
#game-wrap.land .status { font-size: 14px; line-height: 1.25; }
#game-wrap.land .table button.primary, #game-wrap.land .primary-row button { min-height: clamp(42px, 12cqh, 58px); }