/* ============================================================
   Benny — modern hot-seat card game
   ============================================================ */

:root {
  --bg-1: #0a1a3a;
  --bg-2: #142a5a;
  --bg-3: #0d1e3d;
  --felt: radial-gradient(ellipse at top, #1e3a6e 0%, #0d1e3d 55%, #06122a 100%);

  --panel: rgba(255,255,255,0.95);
  --panel-soft: rgba(255,255,255,0.08);
  --panel-border: rgba(255,255,255,0.18);

  --ink: #1c2330;
  --ink-soft: #4a556a;
  --muted: rgba(255,255,255,0.7);
  --muted-dark: rgba(28,35,48,0.55);

  --gold: #f5c451;
  --gold-deep: #c9963a;
  --accent: #4a90e2;
  --accent-deep: #1f5fa0;
  --danger: #d96a5b;

  /* Card dimensions follow the bridge-size SVG aspect ratio 212:329 (~0.644). */
  --card-w: 58px;
  --card-h: 90px;
  --card-radius: 3mm;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.16), 0 1px 1px rgba(0,0,0,0.10);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.16);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.35), 0 6px 12px rgba(0,0,0,0.18);
}

@media (min-width: 720px) {
  :root { --card-w: 76px; --card-h: 118px; }
}
@media (min-width: 1100px) {
  :root { --card-w: 86px; --card-h: 134px; }
}

/* User-chosen card-size override (start-screen setting). "m" is the default
   and intentionally leaves the breakpoints in charge; s/l/xl pin a size that
   beats every media query because these rules appear later. Keep ratio 212:329
   (~0.644) so the SVG assets render unsquashed. */
html[data-card-size="s"]  { --card-w: 48px;  --card-h: 75px;  }
html[data-card-size="l"]  { --card-w: 96px;  --card-h: 149px; }
html[data-card-size="xl"] { --card-w: 120px; --card-h: 186px; }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--bg-3);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--felt);
  background-attachment: fixed;
}
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

.hidden { display: none !important; }
.muted { color: var(--muted); }

/* ---------- Screen scaffolding ---------- */
.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; }

/* ---------- Buttons ---------- */
.pill {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.10);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.pill:hover:not(:disabled) { background: rgba(255,255,255,0.18); }
.pill:active:not(:disabled) { transform: translateY(1px); }
.pill:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.pill.primary {
  background: linear-gradient(180deg, #4a90e2, #1f5fa0);
  border-color: rgba(255,255,255,0.30);
  color: #ffffff;
}
.pill.primary:hover:not(:disabled) { background: linear-gradient(180deg, #5fa3f0, #2670b5); }
.pill.ghost { background: transparent; }
.pill.big { padding: 14px 26px; font-size: 17px; }

/* ---------- Card panel (modal-style screen blocks) ---------- */
.card-panel {
  background: var(--panel);
  color: var(--ink);
  border-radius: 18px;
  padding: 28px 24px;
  margin: 24px auto;
  width: calc(100% - 32px);
  max-width: 460px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,0.04);
}
.card-panel h2 { margin: 0 0 12px; font-size: 22px; }

/* ---------- Start screen ---------- */
#screen-start { align-items: center; justify-content: center; }
.start-panel { text-align: left; }
.card-panel.start-panel { overflow: hidden; padding-top: 0; }
.start-hero-link { display: block; line-height: 0; }
.start-hero {
  display: block;
  width: calc(100% + 48px);
  /* The art is a square (so the buildfun project card can use it 1:1), but the
     logo only fills the middle band. Crop to a shorter banner here so the start
     panel doesn't carry tall navy dead space above/below the logo. */
  aspect-ratio: 7 / 5;
  object-fit: cover;
  object-position: center;
  margin: 0 -24px 18px;
}
@supports not (aspect-ratio: 1) {
  /* Safari < 15 fallback: fixed height keeps the banner crop instead of letting
     the intrinsic square art expand the panel. */
  .start-hero { height: 220px; }
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.seg {
  display: inline-flex; padding: 4px; gap: 4px;
  background: #eef3f0; border-radius: 999px; align-self: flex-start;
  border: 1px solid rgba(0,0,0,0.05);
}
.seg-btn {
  appearance: none; border: none; background: transparent;
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
}
.seg-btn.active {
  background: #fff; color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.name-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.name-input {
  appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--ink);
  font-family: inherit;
}
.name-input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.name-input, .select { min-width: 0; max-width: 100%; }

.select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' fill='none' stroke='%231c2a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center / 12px 7px;
  border-radius: 12px;
  padding: 12px 38px 12px 14px;
  font-size: 16px;
  color: var(--ink);
  font-family: inherit;
}

#start-btn { width: 100%; margin-top: 8px; }

.mode-block { display: block; }
.mode-block.hidden { display: none !important; }

/* Two-step start screen: a "pick" view with 4 mode tiles, then a "config"
   view with the existing form. Wrappers toggle .hidden to swap views. */
.start-step { display: block; }
.start-step.hidden { display: none !important; }

.start-back-btn { display: inline-block; margin: 0 0 12px; font-size: 14px; }

.mode-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 4px;
}
.mode-tile {
  appearance: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #eef3f0;
  color: var(--ink);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-sm);
  min-height: 110px;
}
.mode-tile:hover { background: #e2e9e5; }
.mode-tile:active { transform: translateY(1px); }
.mode-tile-icon { font-size: 28px; line-height: 1; }
.mode-tile-title { font-size: 17px; font-weight: 700; }
.mode-tile-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.3; }
@media (max-width: 420px) {
  .mode-tiles { grid-template-columns: 1fr; }
  .mode-tile { min-height: 0; padding: 14px 14px; }
}
.small-help { margin: 4px 0 14px; font-size: 13px; color: var(--ink-soft); }

.resume-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; margin: 0 0 18px;
  background: #fff8e0; border: 1px solid #f1d987; border-radius: 12px;
  color: var(--ink);
}
.resume-banner.hidden { display: none !important; }
.resume-banner strong { display: block; font-size: 14px; }
.resume-banner .muted { font-size: 12px; }
.resume-actions { display: flex; gap: 8px; }
.resume-actions .pill { padding: 6px 12px; font-size: 13px; color: var(--ink); background: #fff; border-color: rgba(0,0,0,0.1); }
.resume-actions .pill.primary { color: #fff; background: linear-gradient(180deg, #4a90e2, #1f5fa0); border-color: rgba(255,255,255,0.30); }

/* "Stats & achievements" entry — gold treatment to feel like a reward. */
.trophy-btn {
  appearance: none;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff5d6, #fde9b0);
  color: #5a3d10;
  border: 1px solid rgba(201,150,58,0.55);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(245,196,81,0.25) inset,
    0 4px 12px rgba(201,150,58,0.18);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.trophy-btn:hover {
  box-shadow:
    0 0 0 1px rgba(245,196,81,0.4) inset,
    0 6px 18px rgba(201,150,58,0.28);
}
.trophy-btn:active { transform: translateY(1px); }
.trophy-btn-icon {
  font-size: 22px; line-height: 1;
  flex: 0 0 auto;
  animation: trophy-pulse 2.4s ease-in-out infinite;
  transform-origin: 50% 60%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}
.trophy-btn-text { flex: 1; }
.trophy-btn-chev {
  font-size: 22px; line-height: 1;
  color: var(--gold-deep);
  font-weight: 700;
  flex: 0 0 auto;
}
@keyframes trophy-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
/* Subtle sheen sweep so the button has presence without being noisy. */
.trophy-btn::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  animation: trophy-sheen 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes trophy-sheen {
  0%, 70%, 100% { left: -40%; }
  85%           { left: 110%; }
}
@media (prefers-reduced-motion: reduce) {
  .trophy-btn-icon { animation: none; }
  .trophy-btn::after { display: none; }
}

.opp-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.opp-list-header {
  display: grid; grid-template-columns: 1fr 130px; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); font-weight: 600;
  margin: -8px 0 6px 2px;
}
.opp-row {
  display: grid; grid-template-columns: 1fr 130px; gap: 8px; align-items: center;
}
.opp-row > * { min-width: 0; }
.opp-row .name-input { padding: 10px 12px; }
.opp-row .select { padding: 10px 30px 10px 10px; }

@media (max-width: 430px) {
  .opp-row { grid-template-columns: 1fr; }
  .opp-list-header { display: none; }
  /* Mode picker stays on one line by stretching to fill and shrinking buttons */
  #mode-seg {
    align-self: stretch;
    max-width: 100%;
    padding: 3px;
    gap: 3px;
  }
  #mode-seg .seg-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
  }
}

/* Scoring screen */
.scoring-wrap { padding: 16px; display: flex; justify-content: center; }
.scoring-panel { max-width: 520px; width: 100%; text-align: left; }
.scoring-panel .muted { color: var(--ink-soft); }
.sc-rows { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 18px; }
.sc-row {
  display: grid; grid-template-columns: 1fr auto 110px; gap: 10px;
  align-items: center;
  padding: 10px; border-radius: 12px;
  background: #f4f7f5; border: 1px solid rgba(0,0,0,0.06);
}
.sc-row.is-winner { background: #e7f0fc; border-color: #b8cce4; }
.sc-row .sc-name { font-weight: 700; color: var(--ink); }
.sc-row .sc-winner-btn {
  appearance: none; border: 1px solid rgba(0,0,0,0.12); background: #fff;
  border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer;
  font-weight: 600; color: var(--ink-soft);
}
.sc-row .sc-winner-btn.is-on {
  background: linear-gradient(180deg, #4a90e2, #1f5fa0);
  color: #fff; border-color: transparent;
}
.sc-row .sc-input {
  appearance: none; -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.12); background: #fff; border-radius: 10px;
  padding: 10px 12px; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums;
  width: 100%; color: var(--ink); font-family: inherit;
}
.sc-row .sc-input:disabled { background: #eef3f0; color: var(--ink-soft); }
#sc-submit { width: 100%; }

.sc-history { margin-top: 18px; }
.sc-history:empty { display: none; }
.sc-history-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); margin: 0 0 8px;
}
.sc-history-table {
  width: 100%; border-collapse: collapse; font-size: 14px; color: var(--ink);
}
.sc-history-table th, .sc-history-table td {
  padding: 6px 8px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sc-history-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); font-weight: 600;
}
.sc-history-table td.r-col { color: var(--ink-soft); font-weight: 600; }
.sc-history-table td.winner { font-weight: 800; color: var(--accent-deep); }

/* CPU recap modal */
.recap-list { list-style: none; padding: 0; margin: 0 0 18px; }
.recap-list li {
  padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;
  background: #f4f7f5; border: 1px solid rgba(0,0,0,0.05);
  font-size: 14px; color: var(--ink);
}
.recap-list li::before {
  content: "→ "; color: var(--accent); font-weight: 700;
}

/* ---------- Reveal screen (slot-machine reel) ---------- */
#screen-reveal { align-items: center; justify-content: center; padding: 24px; }
.reveal-wrap { width: 100%; max-width: 460px; text-align: center; }
.reveal-title { margin: 0 0 18px; font-size: 22px; opacity: 0.9; }
.reel-frame {
  position: relative;
  height: 200px;
  margin: 0 auto 20px;
  width: min(100%, 360px);
  background: var(--panel);
  color: var(--ink);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,0.06);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%);
}
.reel { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.reel-item {
  height: 60px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: var(--ink);
}
.reel-marker {
  position: absolute; left: 12px; right: 12px; top: 50%; height: 60px;
  transform: translateY(-50%);
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  pointer-events: none;
  border-radius: 4px;
}
.reveal-name { font-size: 24px; font-weight: 700; min-height: 1.2em; margin: 12px 0 18px; }

/* ---------- Pass screen ---------- */
#screen-pass { align-items: center; justify-content: center; padding: 24px; }
.pass-wrap { text-align: center; width: 100%; max-width: 460px; }
.pass-pre { font-size: 16px; color: var(--muted); margin: 0; }
.pass-name { font-size: 38px; line-height: 1.1; margin: 8px 0 6px; }
.pass-sub { font-size: 14px; color: var(--muted); margin: 0 0 24px; }

/* ---------- Play screen ---------- */
#screen-play { padding: 0; }

.top-bar {
  display: flex; gap: 8px; padding: 10px 12px;
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(8, 50, 38, 0.55);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
  align-items: center;
}
.top-bar-help {
  margin-left: auto;
  padding: 6px 12px; font-size: 14px; font-weight: 700; line-height: 1;
  min-width: 32px;
}
.top-bar-help ~ .top-bar-help { margin-left: 0; }
.top-bar-exit { padding: 6px 14px; font-size: 13px; }
.top-bar-logo-link { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.top-bar-logo {
  height: 32px; width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* ---------- Top-bar hamburger (mobile) ---------- */
/* The narrow-screen menu container is hidden on wider screens and only the
   inline wide buttons (?, feedback, save & exit) show. Flipped on mobile via
   the media query at the bottom of this file. */
.top-bar-menu { position: relative; margin-left: auto; display: inline-flex; flex: 0 0 auto; }
.top-bar-wide { display: none !important; }
.top-bar-burger {
  padding: 6px 10px; font-size: 14px; line-height: 1; min-width: 36px;
  display: inline-flex; align-items: center; justify-content: center;
}
.burger-icon, .burger-icon::before, .burger-icon::after {
  display: block;
  width: 18px; height: 2px;
  background: #fff;
  border-radius: 2px;
  content: "";
}
.burger-icon { position: relative; }
.burger-icon::before { position: absolute; left: 0; top: -6px; }
.burger-icon::after { position: absolute; left: 0; top: 6px; }
.top-bar-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: rgba(13, 30, 61, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
  display: flex; flex-direction: column;
}
.top-bar-menu-list .menu-item {
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.top-bar-menu-list .menu-item:hover,
.top-bar-menu-list .menu-item:focus-visible {
  background: rgba(255,255,255,0.10);
  outline: none;
}
.top-bar-menu-list .menu-item:active { background: rgba(255,255,255,0.16); }
/* Destructive menu items (End game / Archive & leave) render in the danger
   colour. Safe-exit items (Save & exit) get a soft green that reads clearly
   against the dark navy menu panel without competing with the gold accents. */
.top-bar-menu-list .menu-item.danger-item { color: var(--danger, #d96a5b); }
.top-bar-menu-list .menu-item.safe-item { color: #6fd99e; }

/* Non-button content inside the menu — currently the Card size picker. The
   segmented control is reskinned dark to match the rest of the menu (the
   start-screen .seg is light, intended for the white card panel). */
.top-bar-menu-list .menu-section {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 12px 10px;
}
.top-bar-menu-list .menu-section + .menu-item {
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 4px; padding-top: 12px;
  border-radius: 0 0 8px 8px;
}
.menu-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.seg.menu-seg {
  background: rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.12);
  padding: 3px; gap: 2px;
  align-self: stretch;
}
.seg.menu-seg .seg-btn {
  font-size: 13px; padding: 6px 10px;
  color: rgba(255,255,255,0.75);
  flex: 1; text-align: center;
}
.seg.menu-seg .seg-btn.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
  box-shadow: none;
}
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-soft);
  border: 1px solid var(--panel-border);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.badge .badge-label {
  color: rgba(255,255,255,0.65);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wild-badge #bar-wild {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #2a1d05;
  padding: 1px 8px;
  border-radius: 6px;
  font-weight: 800;
}

.table-area {
  flex: 1; display: flex; flex-direction: column; gap: 10px;
  padding: 12px;
  min-height: 0;
}
.all-melds {
  display: flex; flex-direction: column; gap: 10px;
}
.other-player {
  background: var(--panel-soft);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 10px 12px;
}
.other-player.is-current {
  border-color: rgba(245,196,81,0.55);
  box-shadow: 0 0 0 1px rgba(245,196,81,0.25) inset;
}
.other-player.is-cpu-thinking {
  border-color: rgba(74,144,226,0.7);
  box-shadow: 0 0 0 1px rgba(74,144,226,0.45) inset, 0 0 16px rgba(74,144,226,0.35);
  animation: cpuThinkPulse 1.4s ease-in-out infinite;
}
@keyframes cpuThinkPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(74,144,226,0.45) inset, 0 0 16px rgba(74,144,226,0.35); }
  50%      { box-shadow: 0 0 0 1px rgba(74,144,226,0.7) inset,  0 0 26px rgba(74,144,226,0.55); }
}

/* Ghost card used for CPU-turn animations. Sits above everything, ignores
   pointer events, and uses CSS transitions to glide between rects. */
.flying-card {
  position: fixed;
  pointer-events: none;
  z-index: 240;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.25);
  border-radius: var(--card-radius);
}

/* Lock interaction while a CPU turn is animating — buttons and the hand
   are dimmed and pointer-disabled, but the human's cards stay visible. */
body.cpu-animating .hand-actions,
body.cpu-animating #draw-pile,
body.cpu-animating #discard-pile,
body.cpu-animating .hand .card {
  opacity: 0.55;
  pointer-events: none;
}

/* Drop-target hover affordances — applied by dragdrop.js while a card is
   actively hovering over a legal target during a drag. */
.discard-pile.is-drop-hover .pile-card-host,
.discard-pile.is-drop-hover .pile-card {
  outline: 3px solid rgba(245,196,81,0.95);
  outline-offset: 2px;
  border-radius: var(--card-radius);
}
#all-melds .meld.is-drop-hover {
  outline: 2px solid rgba(74,144,226,0.85);
  outline-offset: -2px;
  background: rgba(74,144,226,0.18);
}
#all-melds .card.is-drop-hover {
  outline: 3px solid rgba(245,196,81,0.95);
  outline-offset: 2px;
  border-radius: var(--card-radius);
  z-index: 2;
}
/* Multi-card "play as new set" hover: dragging ≥2 selected cards over the
   player's own row lights up the whole row in gold so it's clear the drop
   creates a new meld (rather than adding to an existing one). */
#all-melds .other-player.is-drop-hover {
  border-color: rgba(245,196,81,0.95);
  box-shadow: 0 0 0 2px rgba(245,196,81,0.55) inset, 0 0 18px rgba(245,196,81,0.25);
  background: rgba(245,196,81,0.10);
}
.other-player-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.player-name { font-weight: 700; }
.player-name .dealer-chip {
  font-size: 10px; padding: 2px 6px; border-radius: 999px;
  background: rgba(245,196,81,0.25); color: #ffe7a8;
  border: 1px solid rgba(245,196,81,0.35);
  margin-left: 6px; font-weight: 600;
}
.player-meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.hand-count {
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.hand-count::before {
  content: ""; display: inline-block; width: 10px; height: 14px;
  background: linear-gradient(135deg, #2a4079, #06122a);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 2px;
}
.score-chip {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700; color: #fff;
}

.melds {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.meld {
  display: flex; gap: 4px;
  padding: 6px 8px 8px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  cursor: default;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  position: relative;
  scrollbar-width: none;
}
.meld::-webkit-scrollbar { display: none; }
.meld.selectable { cursor: pointer; outline: 2px dashed transparent; transition: outline-color 0.15s; }
.meld.selectable:hover { outline-color: rgba(245,196,81,0.6); }

/* Overflow indicators — added by main.js when a meld's content extends past
   the visible edge. Box-shadow + accent border live on the scroll container
   itself, so they stay pinned to the visible edge as cards scroll past. On
   mobile the meld is full-width, so this reads as "the cards run off the
   side of the screen". */
.meld.has-overflow-right {
  box-shadow: inset -44px 0 28px -16px rgba(6,18,42,0.95);
  border-right: 5px solid rgba(245,196,81,0.95);
}
.meld.has-overflow-left {
  box-shadow: inset 44px 0 28px -16px rgba(6,18,42,0.95);
  border-left: 5px solid rgba(245,196,81,0.95);
}
.meld.has-overflow-left.has-overflow-right {
  box-shadow:
    inset 44px 0 28px -16px rgba(6,18,42,0.95),
    inset -44px 0 28px -16px rgba(6,18,42,0.95);
}
@media (max-width: 720px) {
  .melds { flex-direction: column; flex-wrap: nowrap; }
  .meld { width: 100%; }
}

.middle {
  display: flex; justify-content: center; gap: 18px;
  padding: 6px 0;
}
.pile-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pile {
  appearance: none; background: transparent; border: none; padding: 0;
  cursor: pointer; position: relative;
}
.pile:disabled { cursor: not-allowed; opacity: 0.6; }
.pile-card, .pile-card-host {
  width: var(--card-w); height: var(--card-h);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-md);
  position: relative;
}
.pile-card.back { background: var(--card-back-pattern, none); }
.pile-count {
  position: absolute; right: -6px; bottom: -6px;
  background: #fff; color: var(--ink);
  border-radius: 999px; padding: 2px 7px;
  font-size: 11px; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.pile-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pile.is-active .pile-card,
.pile.is-active .pile-card-host {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Hand ---------- */
.hand-section {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,26,58,0.55);
  padding: 8px 8px 16px;
  position: sticky; bottom: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 5;
}
.hand-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 8px;
  gap: 8px;
}
.hand-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.hand-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.hand-actions .pill { padding: 8px 12px; font-size: 13px; }

.hand {
  display: flex;
  justify-content: center;
  padding: 8px 6px 4px;
  min-height: calc(var(--card-h) + 16px);
}
.hand > .card + .card { margin-left: var(--hand-overlap, 6px); }
/* Selected cards lift via z-index so they pop above the fan; just-drawn ones
   intentionally stack by source order, otherwise dragging the gold-glow card
   into the middle of the fan leaves it sitting on top of every neighbor. */
.hand > .card.selected { z-index: 10; }

/* Fanned hand — heavy overlap and per-card rotation around a pivot below the
   row, so the cards look held in a real hand. layoutHand() in main.js sets
   each card's --card-rot. The container gets extra top padding so the rotated
   top edges have room to swing up without clipping. */
.hand.fanned { padding-top: 22px; min-height: calc(var(--card-h) + 38px); }
.hand.fanned > .card { transform-origin: 50% 220%; }

.hand-hint { font-size: 12px; color: var(--muted); padding: 6px 6px 0; }

/* ---------- Card visuals ---------- */
.card {
  position: relative;
  width: var(--card-w); height: var(--card-h);
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0,0,0,0.10);
  flex: 0 0 auto;
  color: #1c2a24;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.card-art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Modern SVG cards already have their own white fill, black stroke and rounded
   corners. Let them render unclipped so the corner rank/suit indicators aren't
   sliced off, and route the drop shadow to the SVG itself. */
.card.is-modern {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}
.card.is-modern .card-art {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18)) drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

/* Classic-style card internals (used when the user picks the classic renderer). */
.card.suit-h, .card.suit-d { color: #c5283d; }
.card.suit-s, .card.suit-c { color: #16221d; }

.card .corner {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  line-height: 1;
  font-weight: 700;
  font-size: 14px;
}
.card .corner.top-left { top: 4px; left: 4px; }
.card .corner.bottom-right { bottom: 4px; right: 4px; transform: rotate(180deg); }
.card .corner .rank { font-size: 14px; }
.card .corner .suit { font-size: 17px; margin-top: 1px; line-height: 1; }

@media (min-width: 720px) {
  .card .corner .rank { font-size: 17px; }
  .card .corner .suit { font-size: 20px; }
}

.card .face {
  position: absolute;
  top: 16%; bottom: 16%;
  left: 18%; right: 18%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(7, 1fr);
}
.card .pip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0; min-height: 0;
  width: 100%; height: 100%;
  font-size: calc(var(--card-h) * 0.18);
  line-height: 1;
  font-weight: 700;
}
.card .pip.big { font-size: calc(var(--card-h) * 0.36); }
.card .pip.flip { transform: rotate(180deg); }

.card .pip, .card .corner .suit {
  font-family: "Cambria", "DejaVu Sans", "Apple Symbols", sans-serif;
}

.card .portrait {
  position: absolute;
  top: 16%; bottom: 16%; left: 18%; right: 18%;
  display: flex; align-items: center; justify-content: center;
}
.card .portrait svg { width: 100%; height: 100%; }

.card.in-hand {
  cursor: pointer;
  /* Rotation set per-card by layoutHand() when fanned; lift set by .selected.
     Order matters: rotate first, then translate along the card's own Y axis so
     a selected card pops "out" of the fan rather than away from screen-up. */
  transform: rotate(var(--card-rot, 0deg)) translateY(var(--card-y, 0));
  transition: transform 0.12s ease, box-shadow 0.12s ease, outline-color 0.12s ease;
  /* Hand no longer scrolls horizontally (cards fan with overlap). Claim all
     touch gestures on a card so the long-press → drag reorder isn't pre-empted
     by Chrome Android's pan-x scroll heuristic. */
  touch-action: none;
}
.card.in-hand.selected {
  --card-y: -14px;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: var(--shadow-md);
}
.card.in-hand.just-drawn {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(245,196,81,0.25), var(--shadow-md);
}
.card.dragging {
  z-index: 30;
  box-shadow: var(--shadow-lg);
  /* Reset the fan rotation/pivot while the card follows the pointer — it lives
     at position:fixed during the drag and shouldn't fan around the hand's
     pivot point. */
  transform-origin: 50% 50%;
  transform: translateY(-10px) scale(1.04);
  --card-rot: 0deg;
  opacity: 0.5;
}
.card.drag-placeholder {
  opacity: 0;
  pointer-events: none;
}

/* While a hand drag is in progress, suppress the browser's native selection
   and long-press callout on the whole document — once the dragged card moves
   away from under the finger on Android Chrome, the OS otherwise starts a
   text-selection gesture on whatever is underneath, which cancels our drag
   and snaps the card back to its origin. Inputs in modals still need to be
   editable, so let them opt back in. */
body.hand-dragging,
body.hand-dragging * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body.hand-dragging input,
body.hand-dragging textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Card back */
.card.back, .pile-card.back {
  background:
    repeating-linear-gradient(45deg, #1c2e55 0 6px, #06122a 6px 12px),
    linear-gradient(135deg, #16306b, #06122a);
  border: 1px solid rgba(255,255,255,0.18);
}
.card.back::after, .pile-card.back::after {
  content: "";
  position: absolute; inset: 8%;
  border-radius: calc(var(--card-radius) - 2px);
  background:
    radial-gradient(circle at 30% 30%, rgba(245,196,81,0.22), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(245,196,81,0.16), transparent 60%);
  border: 1px dashed rgba(245,196,81,0.4);
}

/* Wildcard treatment */
.card.is-wild {
  background:
    radial-gradient(circle at 30% 20%, #fff7df 0%, #fff 40%, #fff 100%);
  border-color: rgba(201,150,58,0.55);
  box-shadow: 0 0 0 1px rgba(245,196,81,0.35) inset, var(--shadow-sm);
}
.card.is-wild .wild-banner {
  position: absolute; left: 50%; top: 50%;
  width: 78%;
  transform: translate(-50%, -50%) rotate(-10deg);
  pointer-events: none;
  user-select: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: #2a1d05;
  border: 1px solid rgba(72, 47, 8, 0.55);
  border-radius: 6px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
  text-align: center;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card.is-wild .wild-banner-label {
  font-size: calc(var(--card-w) * 0.18);
}
.card.is-wild .wild-banner-rep {
  font-size: calc(var(--card-w) * 0.22);
  letter-spacing: 0;
  font-weight: 800;
}
@media (min-width: 720px) {
  .card.is-wild .wild-banner { width: 64%; padding: 5px 10px; }
}

/* "Hide wild label" option. When the root carries .hide-wild, wildcards
   (Bennys) render as ordinary cards — the gold tint and the WILD banner are
   both suppressed so they're indistinguishable at a glance. The .is-wild class
   stays on the element (drag-to-swap detection in main.js keys off it); only
   the visual tells are removed. The override values mirror the base .card rule. */
html.hide-wild .card.is-wild {
  background: #fff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: var(--shadow-sm);
}
html.hide-wild .card.is-wild .wild-banner { display: none; }

/* Meld cards inherit hand-card size — no overrides. */

/* ---------- Round end / Match end ---------- */
#screen-round-end, #screen-match-end { align-items: center; justify-content: center; padding: 24px; }
.summary-panel { text-align: center; }
.summary-winner { color: var(--ink-soft); margin: 4px 0 18px; font-size: 15px; }
.summary-table {
  width: 100%; border-collapse: collapse; text-align: left; color: var(--ink);
  margin: 0 0 18px;
}
.summary-table th, .summary-table td {
  padding: 10px 6px; border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 15px;
}
.summary-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.summary-table tr.winner-row td { font-weight: 800; }
.summary-table tr.winner-row td:first-child::before {
  content: "🏆 ";
}
.match-end-panel .trophy { font-size: 28px; margin: 0 0 6px; }
.match-end-history { margin: 4px 0 18px; }
.match-end-history:empty { display: none; }
.match-end-rewards { margin: 4px 0 18px; text-align: left; }
.match-end-rewards:empty { display: none; }
.rewards-block { margin-top: 10px; }
.rewards-name {
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  margin: 6px 0 6px;
}
.rewards-grid { display: flex; flex-direction: column; gap: 6px; }
#new-match-btn, #continue-btn { width: 100%; }

/* ---------- Achievement cards ---------- */
.achievement-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f4f7f5;
  border: 1px solid rgba(0,0,0,0.06);
  text-align: left;
}
.achievement-card.is-unlocked {
  background: linear-gradient(180deg, #fff5d6, #fde9b0);
  border-color: rgba(201,150,58,0.55);
  box-shadow: 0 0 0 1px rgba(245,196,81,0.25) inset;
}
.achievement-card.is-locked { opacity: 0.5; filter: grayscale(0.6); }
.achievement-icon {
  font-size: 22px; line-height: 1;
  width: 32px; text-align: center;
  flex: 0 0 auto;
}
.achievement-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.achievement-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.achievement-desc { font-size: 12px; color: var(--ink-soft); }

/* Progress bar variant — shown on lifetime achievements that grow over many
   matches (Suit Sampler, Quad Collector, Long Run). The bar fills with the
   gold accent and switches to a deeper gold on full completion. */
.achievement-progress {
  display: flex; align-items: center; gap: 8px; margin-top: 2px;
}
.achievement-progress-track {
  flex: 1; height: 8px; border-radius: 999px;
  background: rgba(0,0,0,0.10);
  overflow: hidden;
  position: relative;
}
.achievement-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f5c451, #c9963a);
  border-radius: 999px;
  transition: width 0.4s ease-out;
}
.achievement-card.is-unlocked .achievement-progress-fill {
  background: linear-gradient(90deg, #f7d97c, #b8841e);
}
.achievement-progress-label {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ink-soft); flex: 0 0 auto;
  min-width: 28px; text-align: right;
}
.achievement-card.is-unlocked .achievement-progress-label { color: var(--ink); }
.achievement-items {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.achievement-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px;
  font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,0.06); color: var(--ink-soft);
  border: 1px solid rgba(0,0,0,0.06);
  font-variant-numeric: tabular-nums;
}
.achievement-item.is-on {
  background: linear-gradient(180deg, #fff5d6, #fde9b0);
  color: var(--ink);
  border-color: rgba(201,150,58,0.55);
}
.achievement-item.suit-h, .achievement-item.suit-d { color: #c0392b; }
.achievement-item.suit-s, .achievement-item.suit-c { color: var(--ink); }
.achievement-item.is-just-earned {
  box-shadow: 0 0 0 2px rgba(245,196,81,0.7);
  animation: pulseGold 1.6s ease-out 1;
}
@keyframes pulseGold {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18); }
}

.rewards-progress-block {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}

/* ---------- Profile screen ---------- */
.profile-wrap { padding: 16px; display: flex; justify-content: center; }
.profile-panel { max-width: 560px; width: 100%; text-align: left; }
.profile-panel .muted { color: var(--ink-soft); }
.profile-empty { padding: 12px 0; }
.profile-body { display: flex; flex-direction: column; gap: 18px; }
.profile-section { display: flex; flex-direction: column; gap: 8px; }
.profile-section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-soft); margin: 0;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (min-width: 540px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-tile {
  background: #f4f7f5; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px; padding: 10px 8px;
  text-align: center;
}
.stat-value {
  font-size: 22px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); margin-top: 2px;
}

.sparkline {
  background: #f4f7f5; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px; padding: 10px;
}
.sparkline-svg { width: 100%; height: 80px; display: block; }
.sparkline-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 6px; font-size: 12px; color: var(--ink-soft);
}
.sparkline-meta strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.profile-history-table {
  width: 100%; border-collapse: collapse; color: var(--ink); font-size: 14px;
}
.profile-history-table th, .profile-history-table td {
  padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,0.06);
  text-align: left;
}
.profile-history-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); font-weight: 600;
}
.profile-history-table td { font-variant-numeric: tabular-nums; }
.profile-history-table tr.winner-row td:first-child::before { content: "🏆 "; }

/* Per-row "Download" button in the Recent matches table. The base .pill is
   white-on-translucent, which is invisible against the light table — override
   to dark text on a solid light fill so it reads clearly. */
.pill.tiny {
  padding: 3px 10px; font-size: 12px; line-height: 1.2;
  border-radius: 999px;
}
.log-download-btn {
  white-space: nowrap;
  color: #000;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.25);
}
.log-download-btn:hover {
  background: rgba(0,0,0,0.12);
  color: #000;
}

.achievements-grid {
  display: grid; grid-template-columns: 1fr; gap: 6px;
}
@media (min-width: 540px) {
  .achievements-grid { grid-template-columns: 1fr 1fr; }
}

/* Confetti */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; top: -10px;
  width: 8px; height: 14px;
  opacity: 0.9;
  animation: fall linear infinite;
}
@keyframes fall {
  0% { transform: translate3d(0,-10vh,0) rotate(0deg); }
  100% { transform: translate3d(var(--dx,0), 110vh, 0) rotate(720deg); }
}

/* ---------- Modals ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  padding: 16px;
}
.modal-inner {
  background: var(--panel); color: var(--ink);
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  padding: 22px 20px;
  box-shadow: var(--shadow-lg);
}
.modal-inner h3 { margin: 0 0 8px; font-size: 18px; }
.modal-inner p { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal-actions .pill { color: var(--ink); border-color: rgba(0,0,0,0.12); background: #eef3f0; }
.modal-actions .pill.primary { color: #fff; background: linear-gradient(180deg, #4a90e2, #1f5fa0); border-color: rgba(255,255,255,0.30); }
.modal-actions .pill.ghost { background: transparent; }

.text-link {
  background: none; border: 0; padding: 8px 10px; margin: 6px auto 0; display: block;
  color: var(--accent); font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.text-link:hover { color: var(--accent-deep); }

/* Top promo bar — "Try the tutorial · How to play", shown above the mode
   tiles until the user dismisses the tutorial from the footer. */
.tutorial-top {
  display: flex; justify-content: center; align-items: baseline;
  gap: 8px;
  margin: 4px 0 14px;
  flex-wrap: wrap;
}
.tutorial-top.hidden { display: none; }
.tutorial-top-sep { color: var(--ink-soft); opacity: 0.5; }

/* Persistent footer at the bottom of the start panel — always visible on
   both pick and config steps. Holds How to play, Contact, and the dynamic
   Dismiss/Replay tutorial control. */
.start-footer {
  display: flex; justify-content: center; align-items: baseline;
  gap: 8px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
}
.start-footer .text-link { font-size: 13px; }
.start-footer-sep { color: var(--ink-soft); opacity: 0.5; }
/* Install Benny is opportunistic — keep it on its own row when present so
   the three primary links stay together. */
.start-footer #install-btn { flex-basis: 100%; text-align: center; }
/* Build stamp — muted, full-width under the links. Lets the user confirm
   which version actually loaded (and flags a stale service-worker cache). */
.start-footer-version {
  flex-basis: 100%; text-align: center;
  font-size: 11px; color: var(--ink-soft); opacity: 0.6;
}
.start-footer-version.stale { color: var(--danger); opacity: 0.95; }

.feedback-textarea {
  width: 100%; min-height: 110px; resize: vertical; font-family: inherit;
}
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.feedback-thanks p { margin: 4px 0 16px; }

/* Install link — shown on the start screen when beforeinstallprompt fires.
   Reuses the .text-link styling already defined above. */
#install-btn.hidden { display: none; }

.modal-rules-inner { max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; }
.modal-rules-inner h3 { font-size: 20px; margin-bottom: 12px; }
.rules-body {
  overflow-y: auto; padding-right: 6px; margin-bottom: 14px;
  font-size: 14px; line-height: 1.55; color: var(--ink);
}
.rules-body h4 {
  margin: 14px 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent-deep);
}
.rules-body h4:first-child { margin-top: 0; }
.rules-body p { margin: 0 0 8px; color: var(--ink); }
.rules-body ul, .rules-body ol { margin: 0 0 8px; padding-left: 20px; }
.rules-body li { margin-bottom: 4px; }
.rules-body strong { color: var(--ink); }

.set-picker {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 60vh; overflow: auto;
  padding: 6px 0 12px;
}
.set-picker .set-row {
  display: flex; gap: 8px; align-items: center;
  padding: 8px; border-radius: 12px;
  background: #f4f7f5; border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
}
.set-picker .set-row:hover { background: #e7efeb; }
.set-row-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-soft); flex: 1; }
.set-row-info strong { color: var(--ink); font-size: 14px; }
.set-row-cards { display: flex; gap: 3px; }
.set-row-cards .card { --card-w: 28px; --card-h: 44px; }
.set-row-cards .card .corner .rank { font-size: 9px; }
.set-row-cards .card .corner .suit { font-size: 7px; }

/* ---------- Card zoom overlay (hover / long-press) ---------- */
.card-zoom {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 70;
  pointer-events: none;
  padding: 24px;
  animation: zoom-fade-in 0.12s ease-out;
}
.card-zoom.hidden { display: none !important; }
.card-zoom .card {
  --card-w: 216px;
  --card-h: 336px;
  --card-radius: 18px;
  box-shadow: var(--shadow-lg);
  transform: none !important;
  outline: none !important;
}
.card-zoom .card .corner .rank { font-size: 38px; }
.card-zoom .card .corner .suit { font-size: 30px; }
@keyframes zoom-fade-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

/* ---------- Tutorial coach ----------
   Two layouts:
   - .tutorial-coach-bottom: a gold pill anchored above the hand bar; the
     game is still visible and interactive so the user can tap the
     highlighted UI element to satisfy the step.
   - .tutorial-coach-center: a centered card with a Next/Finish button,
     used for intro and outro steps. Has its own backdrop so it reads as a
     standalone moment.
   Highlighted targets get a pulsing gold ring via .tutorial-highlight. */
.tutorial-coach {
  position: fixed;
  /* Match the app's modal/panel styling (white card, dark ink) rather than a
     one-off gold pill, so the instruction boxes read as part of the same UI.
     Opaque (not the translucent --panel) so the centred intro/outro boxes and
     the in-game coach boxes don't pick up different tints from whatever sits
     behind them (dim overlay vs. navy felt) and end up looking like different
     shades. */
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tutorial-coach-bottom {
  left: 50%;
  transform: translateX(-50%);
  /* Anchor near the top of the viewport (below the play-screen top bar)
     rather than above the hand. The previous bottom-anchored position used
     to overlap the hand-bar buttons (Play set, Add to set, …) when those
     wrap onto a second row on phones. */
  top: calc(env(safe-area-inset-top, 0px) + 56px);
  z-index: 45;
  width: calc(100% - 32px);
  max-width: 380px;
  /* Don't intercept taps — the user is meant to tap the highlighted UI
     element underneath the coach text. */
  pointer-events: none;
}
.tutorial-coach-center {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 75;
  width: calc(100% - 32px);
  max-width: 380px;
}
/* Dim backdrop for the intro/outro modal. Rendered as a sibling of the
   coach under <body> (see tutorial.js:ensureCoachEl) so the `position: fixed`
   actually maps to the viewport — the coach itself is `transform`-centred,
   which would otherwise become the containing block for a nested pseudo
   and clip the dim to the coach's own box (making the modal look darker
   than the in-game .modal). Matches the .modal backdrop alpha so the two
   feel identical. */
.tutorial-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 74;
}
.tutorial-backdrop.hidden { display: none; }
.tutorial-coach-body { font-size: 14px; padding-right: 44px; }
.tutorial-coach-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tutorial-coach-actions .pill.primary {
  color: #fff;
  background: linear-gradient(180deg, #4a90e2, #1f5fa0);
  border-color: rgba(255,255,255,0.30);
}
.tutorial-coach-skip {
  position: absolute;
  top: 6px; right: 8px;
  appearance: none;
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 999px;
  color: #1c2330;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;  /* override coach-bottom's pointer-events:none */
}
.tutorial-coach-skip:hover { background: rgba(0,0,0,0.20); }

.tutorial-highlight {
  position: relative;
  z-index: 30;
  animation: tutorial-pulse 1.5s ease-in-out infinite;
}
@keyframes tutorial-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245,196,81,0.9), 0 0 18px 4px rgba(245,196,81,0.45); }
  50%      { box-shadow: 0 0 0 3px rgba(245,196,81,0.55), 0 0 6px 2px rgba(245,196,81,0.2); }
}
/* Card already has its own shadow tower — keep the pulse using outline so the
   highlight ring stays visible even on .is-modern cards with overflow:visible. */
.card.tutorial-highlight {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  animation: tutorial-card-pulse 1.5s ease-in-out infinite;
}
@keyframes tutorial-card-pulse {
  0%, 100% { outline-color: rgba(245,196,81,0.95); }
  50%      { outline-color: rgba(245,196,81,0.45); }
}

/* ---------- Update banner ----------
   Surfaces a "new version downloaded" prompt when a fresh service worker
   has finished installing and is waiting to activate. Persistent (unlike
   the toast) until the user refreshes or dismisses. */
/* Full-width strip pinned to the very top, above the sticky .top-bar (z 5).
   It's fixed (so it can't scroll out of view) and `body.update-pending`
   pads #app down by the strip's height so it pushes the UI down rather than
   overlaying it. The safe-area inset keeps the label clear of the notch on
   standalone iOS; the same calc is mirrored in the #app padding so the two
   stay in lockstep. */
.update-banner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  appearance: none; -webkit-appearance: none;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent-deep);
  color: #fff;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow-md);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.update-banner:hover { background: var(--accent); }
.update-banner:active { filter: brightness(1.08); }
body.update-pending #app {
  padding-top: calc(44px + env(safe-area-inset-top, 0px));
}
/* The sticky top bar pins to top:0 of the viewport; push its sticky anchor
   down by the strip height so a scrollable screen doesn't park it behind
   the strip. */
body.update-pending .top-bar {
  top: calc(44px + env(safe-area-inset-top, 0px));
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%);
  background: rgba(0,0,0,0.78);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 80;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  max-width: calc(100% - 32px);
  text-align: center;
}

/* ---------- Responsiveness helpers ---------- */
/* Top-bar action buttons are always collapsed into the hamburger menu now
   (used to be only at <=600px). The .top-bar-wide / .top-bar-menu defaults
   in the buttons section already enforce that — no media query needed. */
@media (max-width: 380px) {
  :root { --card-w: 52px; --card-h: 80px; }
  .top-bar { padding: 8px; }
  .badge { padding: 5px 9px; font-size: 12px; }
}
@media (min-width: 900px) {
  .table-area { padding: 18px 20px; }
  .all-melds { flex-direction: row; flex-wrap: wrap; }
  .other-player { flex: 1 1 240px; min-width: 240px; }
}