:root {
  --bar: #000;
  --felt-1: #0c9e16;
  --felt-2: #06780e;
  --felt-3: #024a08;
  --felt-4: #012e04;
  --ink: #0b4f14;
  --ink-soft: #2f5d35;
  --gold: #ffd400;
  --white: #fff;
  --red: #d10a0a;
  --bar-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* card sizes (width; height = 1.4 x width) */
  --hand-w: min(17vw, 96px);
  --trick-w: min(19vw, 104px);
  --back-w: min(10vw, 52px);
  --side-w: min(13vw, 70px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--felt-4); }
body {
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--white);
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- top bar ---------- */
.topbar {
  flex: none;
  height: calc(var(--bar-h) + var(--safe-top));
  padding: var(--safe-top) 8px 0;
  background: var(--bar);
  display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 20;
}
.icon-btn { background: none; border: 0; padding: 6px; display: grid; place-items: center; border-radius: 6px; }
.icon-btn:active { background: #222; }
.topbar-title {
  flex: 1; text-align: center; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-title .scorebtn {
  background: none; border: 0; padding: 4px 10px; border-radius: 6px; font-size: 18px;
  display: inline-flex; gap: 14px; align-items: baseline;
}
.topbar-title .scorebtn:active { background: #222; }
.scorebtn b { font-size: 20px; font-weight: 600; }
.scorebtn .lbl { font-size: 13px; color: #bbb; text-transform: uppercase; letter-spacing: .5px; margin-right: 4px; }

/* ---------- felt ---------- */
#screen {
  flex: 1; position: relative; overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 45%, var(--felt-1) 0%, var(--felt-2) 32%, var(--felt-3) 72%, var(--felt-4) 100%);
}
.scroll { position: absolute; inset: 0; overflow-y: auto; padding: 0 16px calc(24px + var(--safe-bottom)); }

/* ---------- logo ---------- */
.logo { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 26px auto 22px; max-width: 460px; }
.logo-cards { position: relative; width: 140px; height: 170px; flex: none; }
.logo-cards .lc { position: absolute; width: 104px; top: 14px; filter: drop-shadow(2px 4px 4px rgba(0,0,0,.45)); }
.logo-cards .lc .face { display: block; width: 100%; height: auto; }
.logo-cards .lc.a { left: 4px; transform: rotate(-16deg); }
.logo-cards .lc.b { left: 40px; transform: rotate(9deg); }
.logo-text { line-height: 1; }
.logo-text small { display: block; font-size: 20px; margin: 0 0 2px 6px; opacity: .95; }
.logo-text strong { display: block; font-size: clamp(52px, 17vw, 78px); font-weight: 400; letter-spacing: -2px; }

/* ---------- menu cards (home) ---------- */
.menu { max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.menu-card {
  position: relative; overflow: hidden; text-align: left;
  background: var(--white); color: var(--ink); border: 0; border-radius: 6px;
  padding: 14px 16px 16px; box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.menu-card.wide { grid-column: 1 / -1; }
.menu-card:active { transform: translateY(1px); filter: brightness(.96); }
.menu-card h2 { margin: 0 0 6px; font-size: 40px; font-weight: 400; line-height: 1.05; position: relative; }
.menu-card p { margin: 0; font-size: 15px; color: #1c3b20; position: relative; }
.menu-card .bg-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); opacity: .12; }
.section-title { max-width: 460px; margin: 26px auto 10px; font-size: 22px; padding-bottom: 8px; border-bottom: 1.5px solid rgba(255,255,255,.55); }
.row-btn {
  max-width: 460px; margin: 0 auto 10px; width: 100%; display: flex; align-items: center; gap: 14px;
  background: var(--white); color: var(--ink); border: 0; border-radius: 6px; padding: 14px 16px;
  font-size: 20px; font-weight: 500; box-shadow: 0 3px 8px rgba(0,0,0,.35); text-align: left;
}
.row-btn:active { filter: brightness(.96); }

/* ---------- generic buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 10px 18px; border: 0; border-radius: 4px;
  background: var(--white); color: var(--ink); font-size: 21px; box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.95); }
.btn:disabled { opacity: .45; }
.btn.gold { background: var(--gold); }
.btn.small { min-height: 42px; font-size: 18px; padding: 8px 14px; }
.btn svg { flex: none; }
.btn-stack { display: grid; gap: 14px; width: min(78vw, 300px); }
.btn-stack .btn { justify-content: flex-start; padding-left: 18px; }

/* ---------- page header (back arrow + title) ---------- */
.page-head { display: flex; align-items: center; gap: 10px; max-width: 460px; margin: 18px auto 16px; }
.page-head h1 { margin: 0; font-size: 28px; font-weight: 400; }
.back-btn { background: none; border: 0; padding: 4px; }

/* ---------- options ---------- */
.panel { max-width: 460px; margin: 0 auto; background: var(--white); color: #1d2a1f; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.35); overflow: hidden; }
.opt-row { display: flex; align-items: center; gap: 14px; padding: 16px; border-bottom: 1px solid #e4e8e4; }
.opt-row:last-child { border-bottom: 0; }
.opt-row .txt { flex: 1; }
.opt-row .txt b { display: block; font-size: 19px; font-weight: 500; color: var(--ink); }
.opt-row .txt span { display: block; font-size: 14px; color: #5b6b5d; margin-top: 3px; }
.opt-row.disabled .txt b, .opt-row.disabled .txt span { color: #9aa59b; }
.opt-row .value { font-size: 19px; color: var(--ink); font-weight: 500; }
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; border-radius: 15px; background: #c4cbc5; transition: background .15s; }
.switch .track::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,.35); transition: transform .15s; }
.switch input:checked + .track { background: #0b8a18; }
.switch input:checked + .track::after { transform: translateX(22px); }
.switch input:disabled + .track { opacity: .5; }
.page-actions { max-width: 460px; margin: 20px auto 0; display: grid; }

.field { width: 100%; font-size: 30px; letter-spacing: 8px; text-align: center; text-transform: uppercase; padding: 14px; border: 2px solid #c8d1c9; border-radius: 6px; color: var(--ink); outline: none; }
.field:focus { border-color: #0b8a18; }
.field.text { font-size: 18px; letter-spacing: 0; text-align: start; text-transform: none; padding: 12px; user-select: text; -webkit-user-select: text; }
.auth-fields { padding: 18px; display: grid; gap: 12px; }
.link-btn { background: none; border: 0; padding: 4px; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.note { max-width: 460px; margin: 14px auto 0; font-size: 15px; color: #d7f0d9; text-align: center; }

/* ---------- table ---------- */
.table { position: absolute; inset: 0; }
.watermark {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px; opacity: .14; pointer-events: none; filter: grayscale(1) brightness(0);
}
.watermark .logo-cards { width: 70px; height: 80px; }
.watermark .logo-cards .lc { width: 48px; top: 6px; filter: none; }
.watermark .logo-cards .lc.b { left: 18px; }
.watermark .logo-text strong { font-size: 40px; letter-spacing: -1px; }
.watermark .logo-text small { font-size: 10px; }

/* opponents' card backs */
.back {
  border-radius: 5px; border: 1.5px solid #fff;
  background-color: #2b3f86;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 30% 30%, #4a5fae, #22336f);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.opp { position: absolute; }
.opp .backs { position: relative; }
.opp .backs .back { position: absolute; }
.opp-top { left: 50%; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.opp-top .backs { height: calc(var(--back-w) * 1.4 * .6); }
.opp-top .back { width: var(--back-w); height: calc(var(--back-w) * 1.4); bottom: 0; }
.opp-side { top: 41%; transform: translateY(-50%); display: flex; align-items: center; }
.opp-left { left: 0; }
.opp-right { right: 0; flex-direction: row-reverse; }
.opp-side .backs { width: calc(var(--side-w) * .58); }
.opp-side .back { width: var(--side-w); height: calc(var(--side-w) * .7); }
.opp-left .back { right: 0; }
.opp-right .back { left: 0; }

.pname {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 19px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  transition: color .2s;
}
.pname.turn { color: var(--gold); }
.pname .tag { font-size: 11px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: #e4f5e5; }
.pname .tag.hakem { color: var(--gold); font-weight: 700; }
.pname .tag.offline { color: #ffb4a8; }
.pname .bubble {
  font-size: 14px; font-weight: 700; color: var(--ink); background: #fff; border-radius: 10px; padding: 1px 8px;
  text-shadow: none; animation: pop .25s ease-out;
}
.pname .bubble.pass { background: #cfd8d0; color: #4d5b4f; }
.pname .bot-icon { opacity: .9; }
.opp-top .pname { margin-top: 10px; }
.opp-left .pname { transform: rotate(90deg); margin-left: 6px; width: 0; justify-content: center; }
.opp-right .pname { transform: rotate(-90deg); margin-right: 6px; width: 0; justify-content: center; }
.opp-side .pname-wrap { width: 34px; display: flex; justify-content: center; }

/* HUD: contract + trump */
.hud { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 4; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;
  background: rgba(0,0,0,.35); border-radius: 14px; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.chip .suit-badge { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.chip.naras { color: var(--gold); font-weight: 700; letter-spacing: .6px; }
.hud-right { left: auto; right: 10px; align-items: flex-end; }

/* trick in the middle */
.trick { position: absolute; left: 50%; top: 45%; width: 0; height: 0; z-index: 3; }
.tcard {
  position: absolute; width: var(--trick-w); height: calc(var(--trick-w) * 1.4);
  filter: drop-shadow(1px 3px 3px rgba(0,0,0,.4));
  transition: transform .35s ease-in, opacity .35s ease-in;
}
.tcard .face { width: 100%; height: 100%; display: block; }
.tcard.p0 { transform: translate(-50%, 6%) rotate(2deg); }
.tcard.p2 { transform: translate(-50%, -106%) rotate(-3deg); }
.tcard.p1 { transform: translate(18%, -52%) rotate(6deg); }
.tcard.p3 { transform: translate(-118%, -48%) rotate(-5deg); }
.tcard.enter.p0 { animation: from-bottom .28s ease-out; }
.tcard.enter.p1 { animation: from-right .28s ease-out; }
.tcard.enter.p2 { animation: from-top .28s ease-out; }
.tcard.enter.p3 { animation: from-left .28s ease-out; }
.tcard.win { filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(1px 3px 3px rgba(0,0,0,.4)); }
.trick.sweep-us .tcard { transform: translate(-42vw, 26vh) scale(.4); opacity: 0; }
.trick.sweep-them .tcard { transform: translate(30vw, -34vh) scale(.4); opacity: 0; }

.trick.peek { cursor: pointer; }
.peek-label {
  position: absolute; transform: translate(-50%, -50%); z-index: 1; padding: 4px 10px; border-radius: 12px; white-space: nowrap;
  background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 600;
}

/* won tricks, stacked per team */
.pile { position: absolute; width: calc(var(--back-w) * .9); height: calc(var(--back-w) * 1.26); z-index: 2; }
.pile .back { position: absolute; width: 100%; height: 100%; }
.pile-us { left: 14px; bottom: calc(var(--hand-w) * 1.4 * .8 + 64px + var(--safe-bottom)); }
.pile-them { right: 14px; top: 84px; }
.pile.peekable { cursor: pointer; }
.pile.peekable::after { content: ''; position: absolute; inset: -10px; } /* a bigger tap target */
.pile.peekable .pile-count { background: var(--gold); }
.pile-count {
  position: absolute; right: -9px; top: -9px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; display: grid; place-items: center; z-index: 20;
}

/* the deck while the dealer shuffles */
.deck { position: relative; width: calc(var(--trick-w) * 1.1); height: calc(var(--trick-w) * 1.1 * 1.4); margin-bottom: 6px; }
.deck .half { position: absolute; inset: 0; }
.deck .back { position: absolute; width: 100%; height: 100%; border-radius: 7px; }
.deck.riffle .half.l { animation: riffle-l .55s ease-in-out; }
.deck.riffle .half.r { animation: riffle-r .55s ease-in-out; }
.deck.overhand .half.r { animation: overhand .5s ease-in-out; }
@keyframes riffle-l { 40% { transform: translateX(-38%) rotate(-8deg); } 70% { transform: translateX(-10%) rotate(-3deg); } }
@keyframes riffle-r { 40% { transform: translateX(38%) rotate(8deg); } 70% { transform: translateX(10%) rotate(3deg); } }
@keyframes overhand { 30% { transform: translateY(-45%); } 60% { transform: translateY(-45%) translateX(6%); } }
.center .deck + .cpanel, .center .deck + .msg { margin-top: 0; }
/* the cut: the lower packet slides out and lands on top */
.deck.cutting .half.r { animation: cut-move 1s ease-in-out forwards; z-index: 2; }
.deck.cutting .half.l { animation: cut-stay 1s ease-in-out forwards; }
@keyframes cut-move {
  0% { transform: translate(0, 0); }
  35% { transform: translate(115%, 0); }
  70% { transform: translate(115%, -8%); }
  100% { transform: translate(0, -6px); }
}
@keyframes cut-stay { 0%, 35% { transform: none; } 100% { transform: translateY(2px); } }

.trick.sweep-0 .tcard { transform: translate(-50%, 160%) scale(.6); opacity: 0; }
.trick.sweep-1 .tcard { transform: translate(220%, -50%) scale(.6); opacity: 0; }
.trick.sweep-2 .tcard { transform: translate(-50%, -260%) scale(.6); opacity: 0; }
.trick.sweep-3 .tcard { transform: translate(-320%, -50%) scale(.6); opacity: 0; }

@keyframes from-bottom { from { transform: translate(-50%, 140%) scale(.9); } }
@keyframes from-top { from { transform: translate(-50%, -240%) scale(.7); } }
@keyframes from-left { from { transform: translate(-300%, -48%) scale(.7); } }
@keyframes from-right { from { transform: translate(200%, -52%) scale(.7); } }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* center message + panels */
.center {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 6;
  width: min(calc(100% - 120px), 340px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.msg { font-size: 26px; line-height: 1.25; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.msg.small { font-size: 19px; }
.cpanel {
  width: 100%; background: #fff; color: #1d2a1f; border-radius: 8px; padding: 14px 14px 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); animation: pop .2s ease-out;
}
.cpanel h3 { margin: 0 0 4px; font-size: 20px; font-weight: 500; color: var(--ink); }
.cpanel .sub { margin: 0 0 12px; font-size: 14px; color: #5b6b5d; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 14px; }
.stepper button {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid #0b8a18; background: #fff; color: #0b8a18;
  font-size: 30px; line-height: 1; display: grid; place-items: center;
}
.stepper button:disabled { border-color: #c4cbc5; color: #c4cbc5; }
.stepper .val { min-width: 96px; font-size: 44px; font-weight: 600; color: var(--ink); }
.pbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pbtn { min-height: 50px; border-radius: 6px; border: 0; font-size: 19px; font-weight: 500; background: #e7ece8; color: #29402c; }
.pbtn.primary { background: #0b8a18; color: #fff; }
.pbtn:disabled { opacity: .45; }
.pbtn:active:not(:disabled) { filter: brightness(.93); }
.pbtn small { display: block; font-size: 12px; font-weight: 400; opacity: .85; }
.suit-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.suit-pick button { height: 62px; border-radius: 8px; border: 2px solid #d6ddd7; background: #fff; display: grid; place-items: center; }
.suit-pick button:active { border-color: #0b8a18; }

/* my hand */
.me { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--hand-w) * 1.4 * .8 + 44px + var(--safe-bottom)); z-index: 8; }
.me .pname-wrap { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; }
.hand { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--hand-w) * 1.4 * .8 + var(--safe-bottom)); }
.hcard {
  position: absolute; bottom: calc(var(--hand-w) * 1.4 * -.2 + var(--safe-bottom)); width: var(--hand-w); height: calc(var(--hand-w) * 1.4);
  padding: 0; border: 0; background: none; transform-origin: 50% 100%;
  transition: transform .18s ease-out, filter .18s;
  filter: drop-shadow(-1px 0 1.5px rgba(0,0,0,.35));
}
.hcard .face { width: 100%; height: 100%; display: block; }
.hcard.no-anim { transition: none; }
img.face { pointer-events: none; -webkit-user-drag: none; border-radius: 6%/4.3%; }
.hcard { touch-action: none; }
.hcard.dragging { transition: none; z-index: 100 !important; filter: drop-shadow(2px 8px 8px rgba(0,0,0,.45)); }
.hcard.dragging.armed { filter: drop-shadow(0 0 7px var(--gold)) drop-shadow(2px 8px 8px rgba(0,0,0,.45)); }
.tcard.enter.thrown { animation: land .16s ease-out; }
@keyframes land { from { opacity: .4; scale: 1.15; } }
.hcard.dim { filter: brightness(.62) drop-shadow(-1px 0 1.5px rgba(0,0,0,.35)); }
.hcard.sel { z-index: 50 !important; }
.hcard.new::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: -5px; height: 4px; border-radius: 2px; background: var(--gold);
}

/* ---------- lobby seats ---------- */
.seat-tab {
  position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 3px solid rgba(255,255,255,.55); background: rgba(0,0,0,.08); color: var(--gold);
  font-size: 22px; padding: 10px 22px; white-space: nowrap;
}
.seat-tab.filled { color: #fff; font-weight: 600; }
.seat-tab .tag { font-size: 11px; letter-spacing: .8px; color: #e4f5e5; font-weight: 500; }
.seat-top { left: 50%; top: -3px; transform: translateX(-50%); border-radius: 0 0 10px 10px; }
.seat-left { left: -3px; top: 46%; transform-origin: 0 0; transform: rotate(90deg) translate(-50%, -100%); border-radius: 0 0 10px 10px; }
.seat-right { right: -3px; top: 46%; transform-origin: 100% 0; transform: rotate(-90deg) translate(50%, -100%); border-radius: 0 0 10px 10px; }
.seat-tab u { text-underline-offset: 3px; }
.lobby-center { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.code-box { text-align: center; margin-bottom: 6px; }
.code-box small { display: block; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }
.code-box b { font-size: 34px; letter-spacing: 8px; font-weight: 600; }
.lobby-me { position: absolute; left: 0; right: 0; bottom: calc(18px + var(--safe-bottom)); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lobby-me .back { width: 92px; height: 70px; border-radius: 8px 8px 0 0; border-bottom: 0; }

/* ---------- overlay sheets ---------- */
#overlay:empty { display: none; }
#overlay { position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: min(100%, 420px); max-height: 100%; overflow-y: auto; background: #fff; color: #1d2a1f;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: pop .2s ease-out;
}
.sheet-head { padding: 16px 18px 10px; }
.sheet-head h2 { margin: 0; font-size: 24px; font-weight: 500; color: var(--ink); }
.sheet-head p { margin: 6px 0 0; font-size: 15px; color: #5b6b5d; }
.sheet-body { padding: 0 18px 8px; }
.sheet-foot { padding: 10px 18px 18px; display: grid; gap: 10px; }
.result-big { font-size: 30px; font-weight: 600; margin: 4px 0; }
.result-big.plus { color: #0b8a18; }
.result-big.minus { color: var(--red); }
.score-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.score-table th, .score-table td { padding: 8px 6px; text-align: right; border-bottom: 1px solid #e4e8e4; }
.score-table th:first-child, .score-table td:first-child { text-align: left; }
.score-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #6b7a6d; font-weight: 500; }
.score-table tr.total td { font-weight: 700; font-size: 19px; color: var(--ink); border-bottom: 0; }
.score-table td.plus { color: #0b8a18; }
.score-table td.minus { color: var(--red); }
.score-table .muted { color: #8a968b; font-size: 13px; }
.discard-row { display: flex; gap: 4px; margin: 8px 0 4px; }
.discard-row .mini { width: 44px; }
.discard-row .mini .face { width: 100%; height: auto; display: block; }

/* drawer */
.drawer-wrap { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.45); animation: fade .15s; }
.drawer { position: absolute; top: 0; bottom: 0; left: 0; width: min(80vw, 300px); background: #fff; color: var(--ink); padding: calc(16px + var(--safe-top)) 0 16px; box-shadow: 4px 0 20px rgba(0,0,0,.4); animation: slide-in .18s ease-out; }
@keyframes slide-in { from { transform: translateX(-100%); } }
.drawer h3 { margin: 0 20px 12px; font-size: 26px; font-weight: 400; }
.drawer button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 20px; background: none; border: 0; font-size: 19px; text-align: left; color: #1d2a1f; }
.drawer button:active { background: #eef2ee; }

/* chat */
#chat-btn { position: relative; }
#chat-btn.unread::after { content: ''; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }
.chat-panel {
  position: absolute; top: 0; bottom: 0; right: 0; width: min(88vw, 360px); display: flex; flex-direction: column;
  background: #fff; color: var(--ink); padding: var(--safe-top) 0 var(--safe-bottom); box-shadow: -4px 0 20px rgba(0,0,0,.4);
}
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e4e8e4; }
.chat-head h3 { margin: 0; font-size: 22px; font-weight: 500; }
.chat-list { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { color: #6b7a6d; text-align: center; margin: auto 0; }
.chat-msg { align-self: flex-start; max-width: 85%; display: flex; flex-direction: column; gap: 2px; }
.chat-msg.mine { align-self: flex-end; }
.chat-msg small { color: #6b7a6d; font-size: 12px; }
.chat-msg span { background: #eef2ee; color: #1d2a1f; padding: 8px 12px; border-radius: 12px; font-size: 16px; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.chat-msg.mine span { background: #d5f0d8; }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; border-top: 1px solid #e4e8e4; }

/* rules page */
.rules { max-width: 560px; margin: 0 auto; background: #fff; color: #1d2a1f; border-radius: 6px; padding: 6px 18px 18px; font-size: 16px; line-height: 1.5; }
.rules h2 { font-size: 20px; font-weight: 600; color: var(--ink); margin: 18px 0 6px; }
.rules ul { margin: 0; padding-left: 20px; }
.rules table { border-collapse: collapse; width: 100%; margin: 4px 0; font-size: 15px; }
.rules td, .rules th { border-bottom: 1px solid #e4e8e4; padding: 6px 4px; text-align: left; }

/* toast */
#toast {
  position: absolute; left: 50%; bottom: calc(150px + var(--safe-bottom)); transform: translate(-50%, 20px);
  background: rgba(20,20,20,.92); color: #fff; padding: 10px 16px; border-radius: 20px; font-size: 16px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; max-width: 86vw; text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 700px) {
  :root { --hand-w: 92px; --trick-w: 100px; --back-w: 50px; --side-w: 68px; }
}
@media (max-height: 640px) {
  .logo { margin: 12px auto 12px; }
  .logo-cards { transform: scale(.8); }
}