/* ---------- 牌型 : what beats what, the whole ladder on one screen ----------
   Everything here is namespaced .handranks so it cannot reach the table. Colours and
   type come from tray.css's :root tokens; the overlay sits on the deck exactly the way
   .tableview does, so the portrait query that turns .deck.table turns this with it. */
.handranks{position:absolute;inset:0;z-index:6;background:#071d15f2;
  display:flex;align-items:center;justify-content:center;padding:14px;
  animation:pullback .28s cubic-bezier(.22,.9,.28,1)}

/* Five across, two down, strongest first: reading order is the ranking. */
.handranks .hr-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 8px;
  width:100%;max-width:816px}
.handranks .hr-cell{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  min-width:0}
.handranks .hr-name{margin:0;display:flex;align-items:baseline;gap:6px;max-width:100%;
  font-size:var(--t-s);line-height:1.2;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.handranks .hr-no{flex:0 0 auto;color:var(--ink-faint)}

/* Cards are the paper the table is not made of, so they are the one white thing here. */
.handranks{--hr-cw:28px; --hr-ch:39px; --hr-gap:3px}
.handranks .hr-cards{display:flex;align-items:center;gap:var(--hr-gap)}
.handranks .hr-card{flex:0 0 auto;width:var(--hr-cw);height:var(--hr-ch);border-radius:4px;
  background:var(--paper);color:#1c2822;display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1;
  box-shadow:0 1px 0 #ffffff5e inset,0 2px 4px #06180f4d}
.handranks .hr-card b{font-size:var(--t-s);font-weight:700;letter-spacing:-.03em}
.handranks .hr-card i{font-style:normal;font-size:var(--t-s);margin-top:1px}
.handranks .hr-card.red{color:#be5046}
/* the kickers : in the hand, not part of it */
.handranks .hr-card.dim{opacity:.4}

/* A phone lying flat is a smaller deck, not a different one : same two rows, smaller
   cards, so there is still nothing to scroll. */
@media (max-width:950px) and (orientation:landscape){
  .handranks{padding:10px;--hr-cw:21px; --hr-ch:30px; --hr-gap:2px}
  .handranks .hr-grid{gap:10px 6px}
}
@media (prefers-reduced-motion:reduce){.handranks{animation:none}}