:root {
  --bg: #12161c;
  --panel: #1b212a;
  --line: rgba(255, 255, 255, .1);
  --text: #f3efe6;
  --muted: rgba(243, 239, 230, .62);
  --wood: #6a4329;
  --wood-deep: #4e2f1b;
  --amber: #f2b134;
  --bad: #ff6b57;
  --ok: #7fd68f;
  --t-black: #1d1f24;
  --t-red: #d0382c;
  --t-blue: #1d62c6;
  --t-orange: #e0870f;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font: 16px/1.4 Rubik, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
.booting { padding: 40px; color: var(--muted); }
.muted { color: var(--muted); }
.k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }

/* ---------- buttons ---------- */
.btn { border: 0; border-radius: 12px; padding: 12px 18px; background: var(--amber); color: #1c1606; font-weight: 700; }
.btn.big { padding: 16px 26px; font-size: 19px; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.dark { background: #2a323e; color: var(--text); }
.btn:disabled { opacity: .35; }
.btn:focus-visible, .card:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---------- tiles ---------- */
.tile {
  --w: 46px;
  position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.34);
  border-radius: calc(var(--w) * .15);
  background: linear-gradient(180deg, #fffaf0, #efe5cf);
  box-shadow: 0 2px 0 #c9bb96, 0 4px 8px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
  font-weight: 800; font-size: calc(var(--w) * .56); line-height: 1;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.tile::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--w) * .13); width: calc(var(--w) * .16); height: calc(var(--w) * .16); margin-left: calc(var(--w) * -.08); border-radius: 50%; background: currentColor; opacity: .85; }
.tile.joker::after { display: none; }
.tile.c0 { color: var(--t-black); }
.tile.c1 { color: var(--t-red); }
.tile.c2 { color: var(--t-blue); }
.tile.c3 { color: var(--t-orange); }
.tile.joker { color: var(--t-red); }
.tile.joker svg { width: 64%; height: 64%; }
.tile b { transform: translateY(-8%); }
.tile.new { box-shadow: 0 2px 0 #c9bb96, 0 0 0 3px var(--amber), 0 4px 8px rgba(0, 0, 0, .35); }
.tile.sel { transform: translateY(-9px); box-shadow: 0 2px 0 #c9bb96, 0 0 0 3px var(--amber), 0 10px 16px rgba(0, 0, 0, .45); }
.tile.lifted, .set.lifted { opacity: .25; }
.tile.ghost { position: fixed; z-index: 50; pointer-events: none; transform: scale(1.12) rotate(-3deg); box-shadow: 0 2px 0 #c9bb96, 0 16px 28px rgba(0, 0, 0, .55); }

/* ---------- landing / join ---------- */
.landing, .join { min-height: 100%; padding: calc(var(--safe-t) + 40px) 20px calc(var(--safe-b) + 40px); max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.logo { margin: 0; font-size: clamp(54px, 15vw, 96px); font-weight: 800; line-height: .95; letter-spacing: -.02em; display: flex; flex-direction: column; gap: 14px; }
.logo-tiles { display: flex; gap: 6px; }
.logo .tile { --w: clamp(40px, 10vw, 62px); }
.logo .tile:nth-child(1) { transform: rotate(-4deg); }
.logo .tile:nth-child(2) { transform: rotate(2deg) translateY(3px); }
.logo .tile:nth-child(3) { transform: rotate(-1deg); }
.sub { margin: 0; font-size: 19px; color: var(--muted); max-width: 34ch; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.card { text-align: left; border: 0; border-radius: 18px; padding: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 8px; }
.card .t { font-size: 24px; font-weight: 700; }
.card .d { color: var(--muted); }
.card input, .join input { font: inherit; font-size: 24px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; padding: 12px 14px; border-radius: 12px; border: 0; background: #0f1318; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); width: 100%; }
.join h1 { margin: 0; font-size: 34px; }
.join form { display: flex; flex-direction: column; gap: 12px; }
.join input { letter-spacing: .02em; text-transform: none; }

/* ---------- table (iPad) ---------- */
.tbl { height: 100%; display: flex; flex-direction: column; }
.bar { display: flex; align-items: center; gap: 16px; padding: calc(var(--safe-t) + 10px) 16px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; font-size: 18px; }
.code { margin-left: 6px; padding: 3px 9px; border-radius: 8px; background: #0f1318; letter-spacing: .14em; font-size: 15px; }
.turnname { flex: 1; text-align: center; font-size: 18px; }
.turnname b { color: var(--amber); }
.pool { color: var(--muted); }
.pool b { color: var(--text); font-variant-numeric: tabular-nums; }

/* a wooden bar table under a warm light */
.felt {
  position: relative; flex: 1; overflow: hidden; touch-action: none;
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(255, 214, 160, .16), rgba(0, 0, 0, 0) 70%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2px, rgba(0, 0, 0, 0) 2px 170px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, rgba(0, 0, 0, 0) 1px 7px),
    repeating-linear-gradient(88deg, rgba(255, 235, 200, .035) 0 2px, rgba(0, 0, 0, 0) 2px 31px),
    linear-gradient(180deg, var(--wood), var(--wood-deep));
}
.felt-hint { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); margin: 0; color: rgba(255, 236, 210, .55); font-size: 20px; text-align: center; pointer-events: none; }
.felt .set {
  position: absolute; display: flex; align-items: center; gap: 2px; padding: 6px 7px 6px 4px; border-radius: 10px;
  transform: rotate(var(--rot, 0deg)); transform-origin: 30% 50%;
  transition: box-shadow .12s, background .12s;
}
.felt .set .tile { transform: translateY(var(--jy, 0)) rotate(var(--jr, 0deg)); }
.felt .set.bad { background: rgba(255, 107, 87, .16); box-shadow: 0 0 0 2px var(--bad); }
.felt .set.hover { background: rgba(242, 177, 52, .25); box-shadow: 0 0 0 2px var(--amber); }
.grip { width: 14px; align-self: stretch; margin-right: 2px; border-radius: 7px; cursor: grab; touch-action: none;
  background: radial-gradient(circle, rgba(255, 236, 210, .55) 1.3px, transparent 1.6px) 0 0 / 7px 7px; opacity: .7; }
.set.ghost { position: fixed; z-index: 50; pointer-events: none; transform: rotate(var(--rot, 0deg)) scale(1.04); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)); }

/* seats: a place card for each player, the active player's new tiles at their spot */
.seat, .hand { position: absolute; left: calc(var(--pos) * 100%); }
.seat { display: flex; gap: 8px; align-items: baseline; padding: 6px 12px; border-radius: 999px; background: rgba(15, 12, 9, .55); color: #fbeedd; font-size: 14px; white-space: nowrap; }
.seat span { color: rgba(251, 238, 221, .7); }
.seat.off { opacity: .5; }
.seat.bottom { bottom: 10px; transform: translateX(-50%); }
.seat.top { top: 10px; transform: translateX(-50%) rotate(180deg); }
.hand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px 10px; border-radius: 16px; background: rgba(15, 12, 9, .5); box-shadow: 0 0 0 2px rgba(242, 177, 52, .6); max-width: 92%; }
.hand.bottom { bottom: 10px; transform: translateX(-50%); }
.hand.top { top: 10px; transform: translateX(-50%) rotate(180deg); }
.hand.hover { box-shadow: 0 0 0 3px var(--amber); background: rgba(242, 177, 52, .2); }
.hand-label { color: var(--amber); font-weight: 700; font-size: 14px; }
.hand-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 30px; align-items: center; }
.hand .hint { color: rgba(251, 238, 221, .7); font-size: 14px; padding: 4px 8px; }
.dock { background: var(--panel); border-top: 1px solid var(--line); padding: 10px 16px calc(var(--safe-b) + 12px); display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.turnline { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.turnline .status { font-size: 17px; }
.turnline .status.ok { color: var(--ok); }
.acts { display: flex; gap: 10px; }

/* lobby */
.lobby { min-height: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; align-items: center; padding: calc(var(--safe-t) + 30px) 30px calc(var(--safe-b) + 30px); max-width: 1100px; margin: 0 auto; }
.lobby-l { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bigcode { font-size: clamp(64px, 12vw, 120px); font-weight: 800; letter-spacing: .12em; line-height: 1; }
.url { margin: 0; color: var(--muted); font-size: 18px; }
.qr { width: 220px; height: 220px; background: #fff; border-radius: 14px; padding: 10px; }
.qr svg { width: 100%; height: 100%; display: block; }
.lobby-r h2 { margin: 0 0 12px; font-size: 26px; }
.plist-big { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.plist-big li { padding: 12px 16px; border-radius: 12px; background: var(--panel); font-size: 20px; font-weight: 500; }
.plist-big li.off { opacity: .55; }
.plist-big li.empty { color: var(--muted); font-size: 17px; }

/* results */
.results { position: fixed; inset: 0; z-index: 40; background: rgba(8, 10, 14, .78); display: grid; place-items: center; padding: 20px; }
.results .box { background: var(--panel); border-radius: 20px; padding: 26px; width: min(460px, 100%); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.results h2 { margin: 0; font-size: 28px; }
.results table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.results th { text-align: left; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-bottom: 6px; }
.results td { padding: 8px 0; border-top: 1px solid var(--line); }
.results td.n, .results th.n { text-align: right; }
.results tr.win td { color: var(--amber); font-weight: 700; }

/* ---------- phone ---------- */
.ph { min-height: 100%; display: flex; flex-direction: column; padding-top: var(--safe-t); }
.phead { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 4px; }
.phead .turn { font-size: 26px; font-weight: 800; }
.ph.myturn .phead .turn { color: var(--amber); }
.phead .meta { display: flex; gap: 12px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.rackwrap { margin: 0 10px; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, #5b3a22, #4a2f1c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 8px 20px rgba(0, 0, 0, .35); }
.rackbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rackbar .muted { font-size: 13px; color: rgba(255, 240, 220, .75); }
.seg { display: flex; background: rgba(0, 0, 0, .3); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: rgba(255, 240, 220, .8); }
.seg button.on { background: #fff4df; color: #3b2615; }
.rack { display: flex; flex-wrap: wrap; gap: 6px 5px; min-height: 66px; padding-top: 9px; }
.rack .tile { --w: 42px; }
.status { margin: 12px 16px 0; min-height: 22px; color: var(--muted); font-size: 15px; }
.status.ok { color: var(--ok); }
.mini { margin: 12px 10px 0; }
.mini .k { margin-bottom: 8px; }
.mini-felt { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--wood), var(--wood-deep)); }
.mini-felt .set { position: absolute; display: flex; gap: 1px; padding: 2px; border-radius: 5px; transform: rotate(var(--rot, 0deg)); }
.mini-felt .set.bad { box-shadow: 0 0 0 1.5px var(--bad); }
.mini-felt .tile { --w: 17px; box-shadow: 0 1px 0 #c9bb96; }
.mini-felt .tile::after { display: none; }
.mini-felt .empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: rgba(255, 236, 210, .6); font-size: 14px; }
.mini-hand { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.mini-hand span { margin-right: 6px; }
.mini-hand .tile { --w: 22px; }
.mini-hand .tile::after { display: none; }
.pacts { position: sticky; bottom: 0; margin-top: auto; padding: 12px 10px calc(var(--safe-b) + 12px); background: linear-gradient(180deg, rgba(18, 22, 28, 0), var(--bg) 30%); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pacts .btn { padding: 15px 10px; font-size: 16px; }
.pacts .wide { grid-column: 1 / -1; }
.pacts .wait { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 14px; }
.plobby { margin: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.plobby li { font-size: 18px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 96px); transform: translateX(-50%); z-index: 60; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 12px; background: #fff4df; color: #2a1d0a; font-weight: 500; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); text-align: center; }
.conn { position: fixed; top: calc(var(--safe-t) + 8px); right: 10px; z-index: 55; padding: 6px 10px; border-radius: 999px; background: var(--bad); color: #1a0703; font-size: 13px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }