@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  --fg: #18181b;
  --fg-2: #3f3f46;
  --muted: #71717a;
  --faint: #a1a1aa;
  --line: #e4e4e7;
  --line-2: #d4d4d8;
  --page: #f4f4f5;
  --surface: #ffffff;
  --felt: #e9e9ec;
  --soft: #f4f4f5;
  --radius: 14px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.06), 0 20px 50px rgba(0, 0, 0, 0.14);
  --cw: 80px;   /* hand card width */
  --mw: 46px;   /* small card width */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--fg); }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
.hidden { display: none !important; }

/* ---------- primitives ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--fg);
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap;
  cursor: pointer; touch-action: manipulation;
  transition: transform 0.1s var(--ease), background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.btn:hover:not(:disabled) { border-color: var(--faint); background: #fafafa; }
.btn:active:not(:disabled) { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.btn:disabled { color: var(--faint); border-color: var(--line); background: var(--surface); cursor: default; }
.btn.primary { background: var(--fg); border-color: var(--fg); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.btn.primary:hover:not(:disabled) { background: #27272a; border-color: #27272a; }
.btn.primary:disabled { background: var(--line); border-color: var(--line); color: var(--surface); box-shadow: none; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); padding: 0 10px; }
.btn.ghost:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); border-color: transparent; color: var(--fg); }
.btn.block { width: 100%; height: 38px; font-size: 14px; }
.btn.thinking { opacity: 0.5; }

.field {
  height: 38px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--surface); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus { border-color: var(--fg); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); }
.field.small { height: 32px; font-size: 13px; border-radius: 999px; padding: 0 12px; }
select.field { cursor: pointer; padding-right: 8px; }

.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 11.5px; font-weight: 500; color: var(--fg-2); background: var(--surface); white-space: nowrap;
}
.badge.solid { background: var(--fg); border-color: var(--fg); color: #fff; }
.badge.muted { color: var(--muted); border-color: var(--line); background: var(--soft); }

.brand { font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }
.brand.big { font-size: 40px; letter-spacing: 0.04em; margin: 0; text-align: center; }
.brand-row { display: inline-flex; align-items: center; gap: 5px; }
.brand-row .brand + .byline { margin-left: 1px; }
.logo { display: block; }
.logo.big { margin: 0 auto 6px; }
.byline { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.login-card .byline { text-align: center; margin: 2px 0 22px; }
.brand-row .byline { margin-top: 3px; }
.err { min-height: 18px; margin: 12px 0 0; font-size: 13px; color: var(--fg-2); text-align: center; }

.view { display: none; }
.view.active { display: flex; animation: fade 0.3s var(--ease); }

/* ---------- welcome ---------- */
#welcome { position: relative; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 24px; }
#welcome .corner { position: absolute; top: 14px; right: 14px; }
.login-card { width: 100%; max-width: 340px; padding: 34px 28px 22px; box-shadow: var(--shadow-2); animation: rise 0.6s var(--ease) both; }
.login { display: flex; flex-direction: column; gap: 10px; }
.login .field { text-align: center; letter-spacing: 0.3em; font-size: 16px; }
.login.shake { animation: shake 0.35s; }

/* ---------- lobby ---------- */
#lobby { flex-direction: column; min-height: 100dvh; }
.appbar { position: sticky; top: 0; z-index: 2; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.appbar-in { max-width: 760px; margin: 0 auto; height: 56px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.appbar-right { display: flex; align-items: center; gap: 6px; }
.appbar-right .field { width: 150px; }
.lobby-body { width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 20px 48px; display: flex; flex-direction: column; gap: 16px; }
.create { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px 16px; }
.create .btn.primary { margin-left: auto; }
.opt { display: flex; align-items: center; gap: 10px; }
.opt-label { font-size: 13px; color: var(--muted); }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; }
.seg button { height: 26px; min-width: 36px; padding: 0 10px; border: none; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
#removeField { animation: fade 0.25s var(--ease); }
.room-list { overflow: hidden; }
.room-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 12px 16px; transition: background-color 0.15s; }
.room-row + .room-row { border-top: 1px solid var(--line); }
.room-row:hover { background: #fafafa; }
.room-row.new { animation: rise-small 0.3s var(--ease); }
.rname { font-weight: 600; font-size: 14px; }
.rmeta { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.rcount { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--fg-2); }
.empty-note { color: var(--faint); padding: 28px 16px; text-align: center; font-size: 13px; }

/* ---------- room ---------- */
#room { flex-direction: column; height: 100vh; height: 100dvh; max-width: 1080px; margin: 0 auto; padding: 0 14px calc(env(safe-area-inset-bottom) + 6px); user-select: none; -webkit-user-select: none; overflow: hidden; }
.topbar { flex: none; display: flex; align-items: center; gap: 8px; height: 50px; }
.room-title { font-weight: 700; font-size: 15px; margin-right: 4px; white-space: nowrap; }
.room-info { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.room-info.flash .badge { animation: flash 0.9s var(--ease); }
.spacer { flex: 1; }

.table {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--felt);
  border-radius: 20px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 12px;
}
.board {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top top" "left center right";
  gap: 10px;
}
.seat-top { grid-area: top; align-items: center; }
.seat-left { grid-area: left; align-items: flex-start; }
.seat-right { grid-area: right; align-items: flex-end; }
.center { grid-area: center; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding-top: 4px; }
.seat { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.seat:empty { display: none; }

/* player panel */
.pc {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 132px; max-width: 100%;
  padding: 9px 12px 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.pc.turn { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg), var(--shadow-2); }
.pc.empty { box-shadow: none; background: transparent; border-style: dashed; border-color: var(--line-2); color: var(--faint); }
.pc-top { display: flex; align-items: center; gap: 6px; }
.pc-sub { display: flex; align-items: center; gap: 6px; min-height: 20px; flex-wrap: wrap; row-gap: 3px; }
.nm { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.count { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.count.low { animation: beat 1.2s ease-in-out infinite; }
.timer:empty { display: none; }
.timer { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.timer.urgent { background: var(--fg); border-color: var(--fg); color: #fff; animation: beat 1s ease-in-out infinite; }

.played { min-height: calc(var(--mw) * 1.4 + 4px); display: flex; flex-wrap: wrap; align-items: center; }
.played.mine { flex: none; justify-content: center; min-height: calc(var(--mw) * 1.4 + 6px); }
.seat-right .played, .seat-right .reveal { justify-content: flex-end; }
.seat-top .played, .seat-top .reveal { justify-content: center; }
.reveal { display: flex; flex-wrap: wrap; row-gap: 3px; animation: fade 0.4s var(--ease); }
.say { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 500; color: var(--muted); }
.played.fresh.from-me { animation: from-me 0.34s var(--ease) both; }
.played.fresh.from-left { animation: from-left 0.34s var(--ease) both; }
.played.fresh.from-right { animation: from-right 0.34s var(--ease) both; }
.played.fresh.from-top { animation: from-top 0.34s var(--ease) both; }
.played.fresh.boom { animation: boom 0.75s var(--ease) both; }

.bottom-cards { display: flex; gap: 5px; justify-content: center; perspective: 400px; }
.bottom-cards.reveal-now .card { animation: flip 0.5s var(--ease) both; }
.bottom-cards.reveal-now .card:nth-child(2) { animation-delay: 0.1s; }
.bottom-cards.reveal-now .card:nth-child(3) { animation-delay: 0.2s; }

/* dock: me, controls, hand */
.dock { flex: none; padding-top: 8px; }
.dock-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 40px; }
.me { display: flex; align-items: center; gap: 8px; min-width: 0; }
.controls { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.controls.appear { animation: rise-small 0.2s var(--ease); }
.controls .btn { min-width: 64px; }
.controls .btn.bid { min-width: 44px; }
.controls .opt-label { margin: 0 2px 0 6px; }
.hand { position: relative; display: flex; justify-content: center; align-items: flex-end; height: calc(var(--cw) * 1.4 + 22px); padding-top: 20px; touch-action: none; }
.hand.shake { animation: shake 0.35s; }

/* ---------- cards ---------- */
.card {
  position: relative; flex: none;
  width: var(--cw); height: calc(var(--cw) * 1.4);
  border: 1px solid var(--line-2); border-radius: calc(var(--cw) * 0.12);
  background: var(--surface);
  display: flex; flex-direction: column; align-items: flex-start;
  padding: calc(var(--cw) * 0.07) 0 0 calc(var(--cw) * 0.1);
  line-height: 1;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 0.14s var(--ease), margin-left 0.25s var(--ease), border-color 0.12s, box-shadow 0.14s, background-color 0.12s;
  cursor: pointer;
}
.card .r { font-size: calc(var(--cw) * 0.32); font-weight: 600; letter-spacing: -0.03em; }
.card .s { font-size: calc(var(--cw) * 0.24); margin-top: 3px; }
.card .pip { display: none; }
.hand .card:last-child .pip { display: block; }
.card .pip { position: absolute; right: calc(var(--cw) * 0.1); bottom: calc(var(--cw) * 0.08); font-size: calc(var(--cw) * 0.44); line-height: 1; }
.card.grey { color: var(--faint); }
.card.joker .r, .card.joker .s { font-size: calc(var(--cw) * 0.27); font-weight: 600; }
.card .r.ten { letter-spacing: -0.08em; }
.card.sel { transform: translateY(-16px); border-color: var(--fg); box-shadow: -2px 4px 14px rgba(0, 0, 0, 0.16); }
.card.pending { background: var(--soft); }
@media (hover: hover) { .hand .card:hover:not(.sel) { transform: translateY(-5px); } }
.card.dealt { animation: deal 0.42s var(--ease) backwards; }
.card.arrive { animation: arrive 0.8s var(--ease) backwards; }

.card.mini { width: var(--mw); height: calc(var(--mw) * 1.4); cursor: default; border-radius: calc(var(--mw) * 0.14); padding: calc(var(--mw) * 0.08) 0 0 calc(var(--mw) * 0.12); box-shadow: -1px 0 3px rgba(0, 0, 0, 0.07); }
.card.mini .r { font-size: calc(var(--mw) * 0.38); }
.card.mini .s { font-size: calc(var(--mw) * 0.3); margin-top: 1px; }
.card.mini.joker .r, .card.mini.joker .s { font-size: calc(var(--mw) * 0.32); }
.card.mini + .card.mini { margin-left: calc(var(--mw) * -0.42); }
.bottom-cards .card.mini + .card.mini { margin-left: 0; }
.card.back { border-color: var(--line-2); background: linear-gradient(180deg, #fafafa, #ededef); }
.reveal .card.mini { --mw: 30px; }

/* ---------- result window ---------- */
.modal { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(24, 24, 27, 0.28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal.open { animation: fade 0.25s var(--ease); }
.modal.open .window { animation: pop 0.32s var(--ease); }
.window { width: 100%; max-width: 460px; max-height: 92dvh; overflow: auto; padding: 22px 22px 18px; box-shadow: var(--shadow-3); border-radius: 18px; }
.window h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.window .sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.res-row { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.res-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; }
.res-row.me-row .who { font-weight: 700; }
.res-row .delta { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.res-row .tot { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.res-row .left-cards { grid-column: 1 / -1; display: flex; flex-wrap: wrap; row-gap: 4px; }
.res-row .left-cards:empty { display: none; }
.window .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.toast { position: fixed; left: 50%; top: 14px; z-index: 20; transform: translate(-50%, -8px); max-width: 90vw; padding: 7px 14px; border-radius: 999px; background: var(--fg); color: #fff; font-size: 13px; text-align: center; opacity: 0; pointer-events: none; box-shadow: var(--shadow-2); transition: opacity 0.2s, transform 0.2s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- lobby toolbar & dialogs ---------- */
.toolbar { display: flex; justify-content: flex-end; }
.dialog { max-width: 440px; }
.form h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.form .sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.frow { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 12px; padding: 9px 0; }
.frow + .frow { border-top: 1px solid var(--line); }
.form h2 + .frow, .form .sub + .frow { margin-top: 10px; }
.frow[hidden] { display: none; }
.flabel { font-size: 13px; color: var(--muted); }
.fctl { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.fctl .field { width: 100%; height: 34px; font-size: 14px; }
.fctl select.field { width: auto; min-width: 140px; }
.fctl .seg button { min-width: 34px; }
.unit { font-size: 12.5px; color: var(--muted); }
.form .err { text-align: left; margin: 6px 0 0; min-height: 18px; }
.form.shake { animation: shake 0.35s; }
.form .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
#dialog.open .window { animation: pop 0.32s var(--ease); }
#dialog.open { animation: fade 0.25s var(--ease); }
@media (max-width: 480px) {
  .frow { grid-template-columns: 1fr; gap: 6px; }
  .badge.rule, .room-info .badge.round { display: none; }
  .topbar .btn.ghost { padding: 0 6px; }
}

/* score, card counter, used bottom cards */
.score { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.me .score { margin-left: 2px; }
.tracker { flex: none; display: flex; justify-content: center; align-items: center; gap: 3px; flex-wrap: wrap; margin: -2px 0 8px; }
.tracker:empty { display: none; }
.tk-label { font-size: 11.5px; color: var(--muted); margin-right: 6px; }
.tk { display: inline-flex; flex-direction: column; align-items: center; min-width: 22px; padding: 2px 3px; border-radius: 6px; background: rgba(255, 255, 255, 0.7); line-height: 1.1; }
.tk b { font-size: 11.5px; font-weight: 600; }
.tk i { font-style: normal; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tk.zero { background: transparent; color: var(--faint); }
.card.mini.gone { opacity: 0.5; }
.card.mini.gone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to top right, transparent calc(50% - 1.5px), var(--fg) calc(50% - 1.5px), var(--fg) calc(50% + 1.5px), transparent calc(50% + 1.5px)); }
@media (max-width: 480px) {
  .tk { min-width: 18px; padding: 1px 2px; }
  .tk-label { display: none; }
  .pc { padding: 7px 9px; }
  .pc .nm { font-size: 13px; }
}

#sfxBtn.off, #voiceBtn.off { color: var(--faint); text-decoration: line-through; }

/* ---------- animations ---------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rise-small { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes deal { from { opacity: 0; transform: translateY(-70px) rotate(-6deg) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes arrive { 0% { opacity: 0; transform: translateY(-40px); } 50% { opacity: 1; transform: translateY(-16px); } 100% { transform: none; } }
@keyframes from-me { from { opacity: 0; transform: translateY(70px) scale(1.25); } to { opacity: 1; transform: none; } }
@keyframes from-left { from { opacity: 0; transform: translateX(-40px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes from-right { from { opacity: 0; transform: translateX(40px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes from-top { from { opacity: 0; transform: translateY(-30px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes boom {
  0% { opacity: 0; transform: scale(1.6); }
  30% { opacity: 1; transform: scale(0.95); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
  100% { transform: none; }
}
@keyframes flip { from { transform: rotateY(90deg); opacity: 0.2; } to { transform: none; opacity: 1; } }
@keyframes flash { 0% { background: var(--fg); color: #fff; transform: scale(1.12); } 100% { transform: none; } }
@keyframes beat { 0%, 100% { transform: none; } 50% { transform: scale(1.12); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  :root { --cw: 62px; --mw: 34px; }
  .pc { min-width: 112px; padding: 8px 10px; }
  .count { font-size: 18px; }
}
@media (max-width: 480px) {
  :root { --cw: 54px; --mw: 30px; }
  #room { padding: 0 8px calc(env(safe-area-inset-bottom) + 4px); }
  .topbar { height: 44px; gap: 4px; }
  .table { padding: 8px; border-radius: 16px; }
  .board { gap: 6px; }
  .pc { min-width: 0; width: 100%; gap: 4px; }
  .seat-left, .seat-right { align-items: stretch; }
  .seat-top .pc { width: auto; min-width: 150px; }
  .dock-row { grid-template-columns: 1fr; gap: 6px; }
  .me { justify-content: center; order: 2; }
  .controls { order: 1; }
  .controls .btn { min-width: 56px; padding: 0 12px; }
  .controls .btn.bid { min-width: 40px; }
  .card .pip { display: none; }
  .create .btn.primary { margin-left: 0; width: 100%; }
  .appbar-right .field { width: 120px; }
  .room-row { grid-template-columns: 1fr auto; }
  .rcount { display: none; }
  .reveal .card.mini { --mw: 22px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  :root { --cw: 50px; --mw: 28px; }
  .topbar { height: 38px; }
  .table { padding: 6px 10px; border-radius: 14px; }
  .pc { padding: 5px 10px; gap: 3px; }
  .count { font-size: 16px; }
  .dock { padding-top: 4px; }
  .dock-row { min-height: 34px; }
  .hand { padding-top: 14px; height: calc(var(--cw) * 1.4 + 16px); }
  .card .pip { display: none; }
  .played.mine { min-height: calc(var(--mw) * 1.4 + 2px); }
}