/* Bluffy page: everything beyond the arena's felt board (felt.css): accounts, menus and fair-play prompts,
   plus the layouts for laptops, tablets and phones. */
html, body { margin: 0; background: #0e3b2c; }
.lp-root button, .lp-root a, .lp-root [role=button] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a.tbtn, a.brand { color: inherit; text-decoration: none; }

/* ---------- modals ---------- */
.lp-modal-card p, .lp-modal-card ul { font-size: 15px; line-height: 1.5; margin: 8px 0; }
.lp-modal-card ul { padding-left: 20px; }
.lp-modal-card a { color: var(--you); }
.modal-note { color: var(--soft); font-size: 13px !important; }
.lp-presets { gap: 8px; margin-top: 10px; }
.lp-modal-card.rules .acct-body p:first-child { margin-top: 4px; }
.lp-modal-card.confirm { width: min(440px, 92vw); }
.confirm-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.acct-btn.danger { background: var(--bot); color: #fff; }

/* account, sign-in and leaderboard */
.lp-modal-card.acct { width: min(560px, 92vw); }
.acct-body { overflow-y: auto; min-height: 0; padding-right: 4px; }
.acct-form { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.acct-form input { flex: 1; min-width: 180px; font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.07); color: var(--ink); }
.acct-form input:focus { outline: 2px solid var(--you); outline-offset: -1px; }
.acct-btn { font: inherit; font-size: 15px; font-weight: 700; padding: 9px 16px; border-radius: 10px; border: 0; background: var(--you); color: #14110a; cursor: pointer; }
.acct-btn.wide { width: 100%; margin: 6px 0 4px; background: var(--ink); color: #12291f; }
.g-slot { display: flex; justify-content: center; min-height: 44px; margin: 6px 0 4px; }
.g-slot .acct-btn.wide { margin: 0; }
.acct-btn:disabled { opacity: .6; cursor: default; }
.acct-ok { color: var(--good); } .acct-err { color: var(--bot); }
.acct-me { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.acct-who { flex: 1; display: flex; flex-direction: column; } .acct-who small { color: var(--soft); font-size: 12px; } .acct-who b { font-size: 18px; }
.acct-rec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.acct-rec div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; }
.acct-rec small { color: var(--soft); font-size: 12px; } .acct-rec b { font-family: var(--font-display); font-size: 26px; }
.acct-rec em { font-style: normal; font-size: 16px; color: var(--soft); margin-left: 4px; }
.acct-rec .acct-seat { color: var(--soft); font-size: 13px; margin-top: 2px; }
.acct-rec .acct-seat b { font-family: var(--font-ui); font-size: 13px; color: var(--ink); margin: 0 4px; }
.lb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
table.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lb th { text-align: left; color: var(--soft); font-weight: 600; font-size: 12px; padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.lb td { padding: 6px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.lb td:first-child { color: var(--soft); width: 2em; }
table.lb tr.me td { color: var(--you); font-weight: 700; }
table.lb tr.sep td { color: var(--soft); font-size: 12px; padding-top: 12px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--you); text-decoration: underline; cursor: pointer; }
.saved-note { color: var(--soft); font-size: 13px; }
.bids .hist { padding: 0; overflow: visible; } .bids .hold { padding: 10px 0 0; } .bids .sec { padding: 0 0 12px; margin-bottom: 10px; }

/* menu (everything from the top bar, for narrower screens) */
.menu-body .mrow { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.menu-body .mrow label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); font-weight: 700; }
.menu-body .seg button { flex: 1; padding: 10px 6px; font-size: 14px; }
.mnote { color: var(--you); font-size: 12px; }
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.mgrid .tbtn { padding: 12px 10px; font-size: 14px; text-align: center; white-space: normal; }
.lp-modal-card .mgrid a.tbtn { color: var(--ink); }

/* ---------- board extras ---------- */
.acct-top { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.score .reset { background: none; border: 0; padding: 0 0 0 6px; color: var(--soft); font-size: 15px; line-height: 1; cursor: pointer; opacity: .6; }
.score .reset:hover { opacity: 1; color: var(--ink); }
.seg button.next.on { background: transparent; color: var(--you); box-shadow: inset 0 0 0 2px var(--you); }
.menu-btn { display: inline-flex; flex: none; width: 40px; height: 36px; padding: 0; border-radius: 10px; background: var(--btn-bg); border: var(--btn-border); flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-btn i { display: block; width: 17px; height: 2px; border-radius: 1px; background: var(--ink); }
.again-bar, .touch-only, .felt-panel, .acct-mini { display: none; }

/* claim grids: each grid's name sits in its empty top-left corner; no heading rows, no "Beat X" line */
.calc-head, .cg-title { display: none; }
.cg-corner { align-self: end; text-align: right; padding: 0 10px 3px 0; }
.cg-corner span { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); opacity: .8; white-space: nowrap; }

/* the bids so far, as claim codes: yours gold, Bluffy's coral, the standing claim filled in */
.tickrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ticker { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; cursor: pointer; padding: 2px 0; }
.tk { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: .02em; padding: 2px 8px;
  border-radius: 7px; border: 1.5px solid; background: transparent; white-space: nowrap; }
.tk.you { color: var(--you); border-color: rgba(245,197,66,.5); } .tk.bot { color: var(--bot); border-color: rgba(255,111,91,.5); }
.tk.cur { font-size: 24px; padding: 2px 12px; }
.tk.cur.you { background: var(--you); border-color: var(--you); color: #14110a; } .tk.cur.bot { background: var(--bot); border-color: var(--bot); color: #fff; }
.tk.call-tk { font-family: var(--font-ui); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; }
.tk.none { font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--soft); border-color: transparent; padding-left: 2px; }
.tk.fresh { animation: pop .3s ease-out .25s backwards; }
.tkw { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.tk-sep { flex: none; font-style: normal; font-size: 13px; color: var(--soft); opacity: .55; }
.tk-odds { flex: none; margin-left: 4px; font-size: 12px; color: var(--soft); }
.tick-tools { flex: none; display: flex; align-items: center; gap: 6px; }
.tk-more { display: none; background: none; border: 0; padding: 4px 2px; color: var(--soft); font-size: 13px; font-weight: 700; }   /* desktop has the sidebar */
.strip .tickrow { justify-self: stretch; }
.cc.sel { outline: 3px solid var(--you); outline-offset: 1px; z-index: 1; }
.minr.armed { background: var(--you); color: #14110a; border-color: var(--you); } .minr.armed small { color: rgba(0,0,0,.6); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100vw - 32px); box-sizing: border-box; background: var(--ink); color: #12291f;
  font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 60; animation: toastIn .2s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } }

/* the top bar stays on one line: fitTop() hides the least-used items when space runs out (they're all in the menu) */
.top { flex-wrap: nowrap; }
.top > * { flex-shrink: 0; }
.fit-hide { display: none !important; }

/* ---------- ranked / coach ---------- */
.lp-root { --coach: #7cc4ff; }
/* the mode sits on the top edge of the table's panel: gold for ranked, blue for coach */
.strip { position: relative; }
.mode-tag { position: absolute; top: 0; left: 18px; transform: translateY(-50%); z-index: 3; cursor: pointer; white-space: nowrap;
  font: 800 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  border: 1px solid; background: #0d3325; }
.mode-tag.ranked { color: var(--you); border-color: rgba(245,197,66,.6); }
.mode-tag.coach { color: var(--coach); border-color: var(--coach); background: #0e2f33; }
.mode-tag.board { color: var(--bot); border-color: rgba(255,111,91,.6); cursor: default; }   /* a Showdown board: not saved */
.mode-tag small { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--soft); }
.lp-root.coach .strip, .lp-root.coach .felt-panel { border-color: rgba(124,196,255,.55); box-shadow: inset 0 0 0 1px rgba(124,196,255,.18); }
.mode-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.mode-opt { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px; border-radius: 14px; cursor: pointer;
  background: var(--panel); border: 1.5px solid var(--line); color: var(--ink); font: inherit; }
.mode-opt b { font-family: var(--font-display); font-size: 24px; letter-spacing: .02em; }
.mode-opt span { font-size: 13.5px; line-height: 1.4; color: var(--soft); }
.mode-opt.ranked b { color: var(--you); } .mode-opt.coach b { color: var(--coach); }
.mode-opt.ranked.on { border-color: var(--you); background: rgba(245,197,66,.1); }
.mode-opt.coach.on { border-color: var(--coach); background: rgba(124,196,255,.1); }
.mode-pending { font-size: 14px !important; color: var(--ink); background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px 12px; }
.mode .mode-coach { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.mode .mode-coach.dim { opacity: .5; }
.mode .mode-coach label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--coach); font-weight: 700; }
.mode-set { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mode-set > span { min-width: 96px; font-size: 14px; color: var(--soft); }
.mode-set .seg { flex: 1; } .mode-set .seg button { flex: 1; padding: 8px 6px; font-size: 13.5px; }
.mnote.soft { color: var(--soft); }
/* Bluffy's pick: blue rings and shares on the claims it would make, and on Call */
.cc.pk { box-shadow: inset 0 0 0 2px rgba(124,196,255,.75); }
.cc.pk-top { background: #e1f1ff; box-shadow: inset 0 0 0 3px var(--coach), 0 0 0 2px rgba(124,196,255,.35); }
/* its share, top left, like the odds top right */
.cc .cc-p { position: absolute; top: 1px; left: 3px; font: 800 9.5px/1.2 var(--font-ui); color: #1565b0; letter-spacing: 0; pointer-events: none; }
.call { position: relative; }
.call .pick-tag { position: absolute; top: -8px; right: -6px; font: 800 12px/1 var(--font-ui); color: #08243a; background: var(--coach); padding: 4px 6px; border-radius: 7px; letter-spacing: 0; }
.call.pk { box-shadow: var(--call-shadow), 0 0 0 3px rgba(124,196,255,.55); }
/* call safety: pressed once, waiting for the second press (gold, like a picked claim) */
.call.armed { box-shadow: var(--call-shadow), 0 0 0 3px var(--you); animation: call-armed 1.1s ease-in-out infinite alternate; }
.call .call-again { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 800 11px/1 var(--font-ui); letter-spacing: .03em;
  color: #14110a; background: var(--you); padding: 4px 7px; border-radius: 7px; }
@keyframes call-armed { to { box-shadow: var(--call-shadow), 0 0 0 5px rgba(245,197,66,.55); } }
@media (prefers-reduced-motion: reduce) { .call.armed { animation: none; } }
.pick-btn.on { background: var(--coach); color: #08243a; border-color: var(--coach); }
.pick-sec h3 { color: var(--coach) !important; }
.pk-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 38px; gap: 8px; align-items: center; font-size: 13px; padding: 2px 0; }
.pk-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-row i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--coach) calc(var(--p) * 100%), rgba(255,255,255,.1) 0); }
.pk-row em { font-style: normal; text-align: right; color: var(--soft); font-variant-numeric: tabular-nums; }
.calc-tabs .tab-pk { width: 7px; height: 7px; border-radius: 50%; background: var(--coach); display: inline-block; }
/* score: results, with the luck-adjusted score under them, each number under its own (one grid, shared columns) */
.score { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: baseline; gap: 2px 0; line-height: 1; }
.sc-main, .score .luck { display: grid; grid-template-columns: subgrid; align-items: baseline; }
.sc-main { grid-column: 1 / -1; }
.sc-main .lbl:first-child { grid-column: 1; justify-self: end; margin-right: 8px; }
.sc-main .y { grid-column: 2; } .sc-main .dash { grid-column: 3; } .sc-main .b { grid-column: 4; }
.sc-main .lbl:last-child { grid-column: 5; justify-self: start; margin-left: 8px; }
.score .y, .score .b { text-align: center; }
.score .dash { opacity: .4; padding: 0 6px; }
.score.coach .lbl:first-child { color: var(--coach); }
.score .luck { grid-column: 2 / 5; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: 600 11px/1.1 var(--font-ui);
  font-variant-numeric: tabular-nums; }
.score .luck .y, .score .luck .b { opacity: .8; }
.score .luck .dash { padding: 0; }
.score .luck:hover .y, .score .luck:hover .b { opacity: 1; text-decoration: underline dotted; text-underline-offset: 2px; }
.luck-big { display: flex; gap: 12px; margin: 6px 0 4px; }
.luck-big > div { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.luck-big small { display: block; color: var(--soft); font-size: 12px; }
.luck-big b { font-family: var(--font-display); font-size: 30px; } .luck-big .y { color: var(--you); } .luck-big .b { color: var(--bot); }
.wc-line { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--soft); cursor: pointer; text-align: center; }
.wc-line b { color: var(--ink); font-size: 16px; }
.acct-rec .luck-seat { color: var(--ink); }
table.lb .lb-luck { color: var(--soft); }

/* sign-in offer on the first visit of the day */
.acct .later { margin-top: 4px; }

/* profile pictures */
.av-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.av-sm { display: inline-flex; width: 20px; height: 20px; margin-right: 7px; vertical-align: -5px; border-radius: 50%; overflow: hidden;
  background: var(--you); color: #14110a; font-family: var(--font-display); font-weight: 800; font-size: 13px; align-items: center; justify-content: center; }
.av-big { position: relative; flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: var(--you); color: #14110a; font-family: var(--font-display); font-weight: 800; font-size: 28px; box-shadow: 0 0 0 2px var(--you); }
.av-big::after { content: "Edit"; position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0 3px; background: rgba(0,0,0,.55); color: #fff;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; text-align: center; letter-spacing: .04em; }
.av-actions { font-size: 13px; color: var(--soft); margin-top: 2px; } .av-actions .linkbtn { font-size: 13px; }
.acct-top { display: inline-flex; align-items: center; }

/* daily streak */
.streak { background: none; border: 0; padding: 0 4px; color: var(--you); font-family: var(--font-display); font-weight: 800; font-size: 18px; white-space: nowrap; }
.streak.risk { color: var(--soft); opacity: .8; }
.streak-mini { display: none; }
.acct-streak { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--you); }
.acct-streak.risk { border-color: var(--line); }
.acct-streak .flame { font-size: 30px; line-height: 1; }
.acct-streak b { display: block; font-family: var(--font-display); font-size: 26px; line-height: 1.1; }
.acct-streak small { color: var(--soft); font-size: 13px; }

/* whose move: a gold pill by your name */
.seat .status.turn { background: var(--you); color: #14110a; padding: 1px 7px; border-radius: 6px; font-weight: 700; }
/* the name row never sizes its seat while the hand is on: "Thinking ..." or "Your move" wider than the cards runs past them,
   rather than widening the seat and sliding both hands (centred as one) sideways at every move; the same height with the pill */
.seat .who { min-height: 16px; }
.lp-root:not(.ended):not(.duel-friend) .seat .who { width: 0; min-width: 100%; }
/* the bids row as tall with "No bids yet" as with the standing bid's chip (34.8 px + padding on desktop) */
.ticker { min-height: 39px; }

/* claim grid: centred, with a rule between the grids */
.work .calc-grid { justify-content: center; align-items: flex-start; }
.work .calc-grid .cg-panel + .cg-panel { border-left: 1px solid var(--line); padding-left: calc(28px * var(--k)); }

/* the result: what happened on the left, Bluffy's moves beside it, so it all fits without scrolling;
   centred, but never pushed off the top when space is short */
.result { flex-direction: row; align-items: safe center; justify-content: center; gap: 40px; }
.res-main { flex: 0 0 auto; max-width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.result .big { font-size: clamp(40px, 7.5vh, 58px); }
.result > .lp-review { flex: 0 1 auto; min-width: 230px; max-height: 100%; overflow-y: auto; justify-content: flex-start; align-content: center; gap: 10px; }
.result > .lp-review .lp-review-move { width: 230px; min-width: 0; box-sizing: border-box; }

/* touch screens: no keyboard hints, no hover */
@media (hover: none) {
  .kb, .tbtn kbd { display: none; }
  .cc.ok:hover { transform: none; box-shadow: none; }   /* a tapped button shouldn't lift (and nudge the grid into scrolling) */
  .hover-only { display: none; } .touch-only { display: inline; }
}

/* laptops and tablets: the less-used buttons move into the menu so the top bar stays on one line */
@media (max-width: 1350px) {
  .top .tbtn.wide { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 1000px) { .top .tbtn { display: none; } }
@media (max-width: 860px) { .score .lbl { display: none; } }
.opp .opp-badge { display: none; }   /* (a phone shows it: below) */

/* ---------- phones (and short screens held sideways): app layout, nothing scrolls but the claim buttons ---------- */
@media (max-width: 700px), (max-height: 520px) and (orientation: landscape) {
  /* pinned to what's visible: a phone's first 100dvh can be taller than the screen (Call then needs a scroll) */
  .lp-root { position: fixed; inset: 0; height: auto; }
  .top { flex-wrap: nowrap; padding: 7px 12px; gap: 8px; }
  .top .spacer, .top .seg, .top .tbtn, .score .lbl, .score .reset { display: none; }
  .brand { font-size: 19px; margin-right: 0; }
  .opp { flex: none; padding: 5px 10px; } .opp small, .opp .opp-n, .opp-g { display: none; }
  .opp b { font-size: 13px; } .opp b::after { content: " ▾"; color: var(--soft); }
  /* a game with Exact: Small, with a small EXACT badge on the pill's corner (the full name runs into the score) */
  .opp .opp-x { display: none; } .opp:has(.opp-badge) { position: relative; overflow: visible; }
  .opp .opp-badge { display: block; position: absolute; right: -8px; top: -7px; padding: 2px 4px; border-radius: 5px; background: var(--you); color: #14110a;
    font: 800 8.5px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 0 0 2px #0e3b2c; }
  .score { margin-left: auto; font-size: 22px; }
  .score .dash { padding: 0 4px; }
  .score .luck { font-size: 10px; } .score .luck .dash { padding: 0; }
  .mode-tag { position: static; grid-area: hands; align-self: start; justify-self: center; transform: translateY(calc(8px - 50%)); font-size: 10px; padding: 4px 10px; }
  .mode-tag small { font-size: 10px; }
  .mode-opts { grid-template-columns: 1fr; } .mode-opt { padding: 12px 14px; } .mode-opt b { font-size: 21px; }
  .mode-set { flex-direction: column; align-items: stretch; gap: 4px; } .mode-set > span { min-width: 0; font-size: 13px; }
  .mode-set .seg button { padding: 9px 4px; font-size: 13px; }
  .acct-mini { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 30px; padding: 0 10px; box-sizing: border-box;
    border-radius: 9px; border: 1px solid var(--you); background: transparent; color: var(--you); font-size: 13px; font-weight: 700; white-space: nowrap; }
  .streak-mini { display: inline; flex: none; font-size: 16px; padding: 0 2px; margin-left: -4px; }
  .streak-top { display: none; }
  .acct-mini.in .av-img { border-radius: 50%; }
  .acct-mini.in { overflow: hidden; width: 30px; padding: 0; border-radius: 50%; background: var(--you); color: #14110a; font-family: var(--font-display); font-size: 17px; font-weight: 800; }

  .strip { display: contents; }
  .hands, .acts, .tickrow, .main { min-width: 0; }
  .hands { justify-self: center; gap: 14px; }
  .seat .who { font-size: 10px; margin-bottom: 4px; }
  .cards { gap: 5px; }
  .card { width: 40px; font-size: 24px; border-radius: 7px; }
  .vs { padding-top: 14px; font-size: 11px; }

  .tk { font-size: 17px; } .tk.cur { font-size: 21px; padding: 2px 11px; } .tk.none { font-size: 13px; }
  .tk-more { display: inline-block; }

  .main { display: flex; flex-direction: column; min-height: 0; }
  .side { display: none; }
  .work { flex: 1; min-height: 0; padding: 4px 12px 8px; }
  /* the table (hands, claim, bids) sits on a darker panel, like the desktop strip */
  .felt-panel { display: block; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }

  .acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; justify-self: stretch; padding: 10px 12px; border-top: 1px solid var(--line); background: rgba(0,0,0,.22); }
  .minr { min-width: 0; padding: 6px 10px; text-align: center; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .call { font-size: 26px; padding: 8px 10px; }
  .acts.over .minr, .acts.over .call { display: none; }
  .acts.over .again-bar { display: block; grid-column: 1 / -1; background: var(--you); color: #14110a; border: 0; border-radius: 12px; padding: 12px; font-size: 19px; font-weight: 800; }

  .result { flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 14px; }
  .res-main { display: contents; }
  .result > .lp-review { flex: none; max-height: none; overflow: visible; justify-content: center; }
  .result .big { font-size: 42px; } .result .why { font-size: 16px; }
  .result .again { display: none; }
  .cnt { width: 48px; } .cnt b { font-size: 22px; }
  .lp-review, .result > .lp-review { width: 100%; } .lp-review-move, .result > .lp-review .lp-review-move { min-width: 0; width: 100%; box-sizing: border-box; }
  .toast { bottom: 84px; }

  /* modals become sheets that slide up from the bottom */
  .lp-modal { align-items: flex-end; }
  .lp-modal-card, .lp-modal-card.acct, .lp-modal-card.confirm { width: 100%; max-height: 88vh; max-height: 88dvh; box-sizing: border-box;
    border-radius: 18px 18px 0 0; border-bottom: 0; padding: 16px 16px max(20px, env(safe-area-inset-bottom)); animation: sheetIn .18s ease-out; }
  .lp-modal-title { font-size: 24px; }
  .confirm-btns .tbtn, .confirm-btns .acct-btn { flex: 1; padding: 12px; }
}
/* phones, Huge game: one claim grid at a time behind a switch */
.calc-tabs { flex: none; width: 100%; }
.calc-tabs button { flex: 1; padding: 8px 6px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.calc-tabs button small { font-size: 11px; font-weight: 700; min-width: 18px; padding: 1px 5px; border-radius: 8px; background: rgba(255,255,255,.12); }
.calc-tabs button.on small { background: rgba(0,0,0,.12); }
.calc-tabs button.empty { opacity: .45; }
.work .calc-grid.tabbed > .cg-panel, .work .calc-grid.tabbed > .cg-panel + .cg-panel { border: 0; padding: 0; }
@keyframes sheetIn { from { transform: translateY(24px); opacity: .6; } }

/* portrait phones: one column, the Bid / Call bar at the bottom under your thumb */
@media (max-width: 700px) {
  .lp-root { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "top" "hands" "ticker" "main" "acts"; }
  .top { grid-area: top; }
  .felt-panel { grid-column: 1; grid-row: 2 / 4; margin: 8px 10px 0; }
  /* grids stacked and sharing one label column, so rank columns line up; a rule between them */
  .work .calc-grid { display: grid; justify-content: center; justify-items: stretch; gap: calc(10px * var(--k)) 0; }
  .work .calc-grid .cg-panel + .cg-panel { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: calc(10px * var(--k)); }
  .work .calc-grid .cg { justify-content: start; }   /* don't let the label column stretch */
  .cg-lab { min-width: 62px; box-sizing: border-box; }
  /* two-pair and full-house codes (33·11, 444·66) are long: tighter text so they fit their buttons */
  .cg-2p .cc, .cg-fh .cc { padding: 0 2px; letter-spacing: 0; }
  .cg-fh .cc .cc-t { font-size: .84em; }
  /* your cards and Bluffy's: as big as the width allows (2 or 3 per side) */
  .hands.n2 { --cw: clamp(44px, calc((100vw - 96px) / 4.6), 60px); }
  .hands.n3 { --cw: clamp(38px, calc((100vw - 96px) / 6.3), 50px); }
  /* Huge game: four cards each as a 2×2 block, so they can be bigger */
  .hands.n4 { --cw: clamp(38px, calc((100vw - 130px) / 4.4), 56px); gap: 14px; }
  .hands.n4 .cards { display: grid; grid-template-columns: repeat(2, var(--cw)); gap: 6px; }
  /* a Showdown board with five cards in a hand: three across, so five is two rows (3 + 2); a hand of three or fewer stays in a row */
  .hands.n5 { --cw: clamp(32px, calc((100vw - 140px) / 5.4), 46px); gap: 14px; }
  .hands.n5 .cards:has(> .card:nth-child(4)) { display: grid; grid-template-columns: repeat(3, var(--cw)); gap: 6px; }
  /* two-row hands of different sizes: the shorter sits low, its name level with the middle; VS beside the bottom row instead */
  .hands.uneven.n4 .vs, .hands.uneven.n5 .vs { align-self: flex-end; padding: 0 0 calc(var(--cw) * .7 - 6px); }
  .hands .card { width: var(--cw); font-size: calc(var(--cw) * .6); border-radius: 8px; }
  .hands .vs { padding-top: 16px; }
  .hands { grid-area: hands; padding-top: 18px; }
  .tickrow { grid-area: ticker; padding: 12px 20px 12px; }
  .ticker { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  /* the same height whoever's move it is: room for the standing claim's chip and the "your move" pill (no jump as Bluffy thinks) */
  .ticker { min-height: 32px; }   /* the chip is 31.2 px */
  .seat .who { min-height: 16px; }
  .ticker::-webkit-scrollbar { display: none; }
  .ticker.scrolled { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
  .main { grid-area: main; padding-top: 6px; }
  .acts { grid-area: acts; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* phones on their side: table on the left, claim buttons on the right */
@media (max-height: 520px) and (orientation: landscape) {
  .lp-root { grid-template-columns: minmax(250px, 36%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "top top" "hands main" "ticker main" "acts main"; }
  .top { grid-area: top; }
  .felt-panel { grid-column: 1; grid-row: 2 / 4; margin: 8px 0 0 10px; }
  .hands { grid-area: hands; padding-top: 14px; }
  .tickrow { grid-area: ticker; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 8px; padding: 12px 20px; min-height: 0; }
  .hands { padding-top: 22px; }   /* room under the mode label */
  .ticker { flex: 0 1 auto; flex-wrap: wrap; row-gap: 6px; overflow-y: auto; }
  .tick-tools { justify-content: space-between; }
  .main { grid-area: main; border-left: 1px solid var(--line); }
  .work { padding-top: 10px; }
  .acts { grid-area: acts; background: none; border-top: 0; }
  .card { width: 34px; font-size: 20px; }
  .hands.n4 { gap: 8px; } .hands.n4 .cards { gap: 3px; } .hands.n4 .card { width: 27px; font-size: 16px; border-radius: 5px; }
  .hands.n5 { gap: 8px; } .hands.n5 .cards { gap: 3px; } .hands.n5 .card { width: 25px; font-size: 15px; border-radius: 5px; }
}

/* narrowest phones: keep the header on one line */
@media (max-width: 380px) {
  .brand { font-size: 17px; }
  .top { gap: 6px; padding: 7px 10px; }
  .calc-tabs button { font-size: 13px; padding: 8px 3px; gap: 4px; }
}

/* portrait phones, Play Bluffy and coach mode: the score centred in the header, over the Ranked / Coach label (the
   menu stays on the right). A daily or duel keeps it on the right: its wider hand chip needs the room. */
@media (max-width: 700px) {
  .top { position: relative; }
  .top .score:not(.set) { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-left: 0; }
  .top:has(.score:not(.set)) .menu-btn { margin-left: auto; }
}