/* ============================================================
   CANASTA.NOW — Game table, cards, melds and multiplayer UI
   Loaded on top of main.css (site design system).
   ============================================================ */

:root {
  --felt: #6e1d30;         /* wine baize */
  --felt-dark: #4a1220;
  --felt-light: #8a2740;
  --felt-line: rgba(255, 255, 255, 0.22);
  --card-red: #c62828;
  --card-black: #1f2733;
  --gold: #f4c430;
}

/* ---- GAME SHELL ---- */
.game-shell {
  background: radial-gradient(ellipse at 50% -20%, var(--felt-light), var(--felt) 55%, var(--felt-dark));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 0 90px rgba(0,0,0,.28);
  padding: .75rem .75rem 1.1rem;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ---- TABLE THEMES (applied to .game-shell) ---- */
.game-shell.table-green  { background: radial-gradient(ellipse at 50% -20%, #2f9e63, #176b3c 55%, #0e4527); }
.game-shell.table-blue   { background: radial-gradient(ellipse at 50% -20%, #3b82f6, #1e5fbf 55%, #143a7a); }
.game-shell.table-charcoal { background: radial-gradient(ellipse at 50% -20%, #3a4453, #262d38 55%, #171b22); }
.game-shell.table-walnut { background: radial-gradient(ellipse at 50% -20%, #a9744f, #7a4e2e 55%, #4d3019); }
.game-shell.table-navy   { background: radial-gradient(ellipse at 50% -20%, #33507a, #1e3a5f 55%, #101f36); }

.game-shell:fullscreen { display:flex; flex-direction:column; border-radius:0; padding:1rem; overflow:auto; }

/* Disable animations when the player turns them off. */
.cn-table.no-animations .cn-card,
.cn-table.no-animations .cn-meld { transition: none !important; animation: none !important; }

/* ---- TOOLBAR ---- */
.game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .35rem .5rem .6rem;
}
.game-stats {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  font-weight: 600;
}
.game-stats .stat-label {
  opacity: .65;
  font-weight: 500;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: .25rem;
}
.game-buttons { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-felt {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-sm);
  padding: .35rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.btn-felt:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn-felt:disabled { opacity: .4; cursor: default; }
.btn-felt.btn-felt-primary { background: var(--gold); border-color: var(--gold); color: #5a3d00; }
.btn-felt.btn-felt-primary:hover { background: #ffd75e; }

/* ---- BOARD WRAP ---- */
.board-wrap {
  position: relative;
  width: 100%;
  display: block;
  overflow: visible;
}

/* CLS fix — reserve the table's height before canasta.js deals into it.
   #board-wrap is populated by a render-blocking script (innerHTML inside
   engine.start()), so the browser first paints an empty 0px board with the
   home intro visible directly below it, then inflates the table and shoves the
   intro (and everything under it) off-screen — measured ~0.45 CLS on mobile.
   Holding the height keeps the content below put. Scoped to the home page and
   to <=768px: that is the only spot where content sits directly under the
   table in the initial viewport (below 768px the home layout reorders the
   table above the intro). Standalone game/daily pages have only off-screen
   content below the table, so they need no reserve — a global one would just
   leave a felt gap. Heights track the measured classic board: ~814px at 360w,
   ~767px at 390-430w. */
@media (max-width: 768px) { .page-home #board-wrap { min-height: 770px; } }
@media (max-width: 400px) { .page-home #board-wrap { min-height: 820px; } }

/* ============================================================
   CANASTA TABLE  (flex layout — opponents on top, you at bottom)
   ============================================================ */
.cn-table {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 460px;
  color: #fff;
}

/* Row of opponent / partner seats */
.cn-seats-top { display: flex; justify-content: space-around; gap: .6rem; flex-wrap: wrap; }
.cn-seat {
  background: rgba(0,0,0,.16);
  border: 1px solid var(--felt-line);
  border-radius: var(--radius);
  padding: .5rem .7rem;
  min-width: 150px;
  flex: 1 1 180px;
  max-width: 320px;
}
.cn-seat.is-turn { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(244,196,48,.5); }
.cn-seat.is-partner { background: rgba(244,196,48,.10); }
.cn-seat-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.cn-seat-name { font-weight: 700; font-size: .85rem; display: flex; align-items: center; gap: .35rem; }
.cn-seat-name .cn-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #5a3d00; font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.cn-seat-count { font-size: .72rem; opacity: .85; font-variant-numeric: tabular-nums; }
.cn-minihand { display: flex; }
.cn-minihand .cn-mini { width: 15px; height: 22px; border-radius: 3px; margin-left: -8px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 4px, transparent 4px 8px), linear-gradient(135deg, #8a1830, #4a1220);
  border: 1px solid rgba(255,255,255,.5); }
.cn-minihand .cn-mini:first-child { margin-left: 0; }

/* Center: stock, discard, message */
.cn-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: .35rem 0;
  flex-wrap: wrap;
}
.cn-pile-slot { text-align: center; }
.cn-pile-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; margin-bottom: .25rem; font-weight: 600; }
.cn-stock, .cn-discard {
  position: relative;
  width: 62px; height: 88px;
  border-radius: 8px;
}
.cn-stock {
  cursor: pointer;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 6px, transparent 6px 12px), linear-gradient(135deg, #8a1830, #4a1220);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 3px 3px 0 -1px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.9); font-weight: 800; font-size: 1.1rem;
}
.cn-stock.disabled { cursor: default; opacity: .55; }
.cn-stock .cn-stock-n { position:absolute; bottom:4px; right:0; left:0; text-align:center; font-size:.72rem; }
.cn-discard {
  background: rgba(0,0,0,.14);
  border: 2px dashed var(--felt-line);
  display: flex; align-items: center; justify-content: center;
}
.cn-discard.takeable { border-color: var(--gold); background: rgba(244,196,48,.14); cursor: pointer; }
.cn-discard.frozen::after {
  content: "❄"; position: absolute; top: 2px; right: 4px; font-size: .8rem; color: #bfe3ff;
}
.cn-discard-count { position:absolute; bottom:-18px; left:0; right:0; text-align:center; font-size:.66rem; opacity:.8; }
.cn-msg {
  min-width: 150px; max-width: 260px;
  font-size: .82rem; line-height: 1.4;
  background: rgba(0,0,0,.22);
  border-radius: var(--radius-sm);
  padding: .45rem .7rem;
}
.cn-msg strong { color: var(--gold); }

/* Meld areas */
.cn-meldzone { display: flex; flex-direction: column; gap: .3rem; }
.cn-meldzone-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; font-weight: 600; }
.cn-melds { display: flex; flex-wrap: wrap; gap: .5rem; min-height: 40px; }
.cn-melds.empty::before { content: "No melds yet"; font-size: .74rem; opacity: .55; font-style: italic; }
.cn-meld {
  position: relative;
  display: flex;
  padding: .25rem .3rem .3rem;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--felt-line);
  border-radius: 7px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.cn-meld:hover { border-color: var(--gold); }
.cn-meld.drop-ok { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(244,196,48,.6); }
.cn-meld .cn-card { margin-left: -20px; }
.cn-meld .cn-card:first-child { margin-left: 0; }
.cn-meld.is-canasta { background: linear-gradient(180deg, rgba(244,196,48,.30), rgba(198,40,40,.22)); border-color: var(--gold); }
.cn-meld-badge {
  position: absolute; top: -8px; right: -8px;
  background: var(--gold); color: #5a3d00;
  font-size: .62rem; font-weight: 800;
  border-radius: 999px; padding: .05rem .35rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.cn-meld.is-canasta .cn-meld-badge { background: #c62828; color: #fff; }

/* Red-three tray */
.cn-redthrees { display: inline-flex; gap: .2rem; align-items: center; }
.cn-redthrees .cn-card { margin-left: -26px; }
.cn-redthrees .cn-card:first-child { margin-left: 0; }

/* Your hand */
.cn-you {
  margin-top: auto;
  background: rgba(0,0,0,.16);
  border: 1px solid var(--felt-line);
  border-radius: var(--radius);
  padding: .5rem .6rem .6rem;
}
.cn-you-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; flex-wrap: wrap; }
.cn-hand {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
  min-height: 92px;
  align-items: flex-end;
}
.cn-hand .cn-card { margin-left: -14px; cursor: pointer; }
.cn-hand .cn-card:first-child { margin-left: 0; }
@media (min-width: 700px) { .cn-hand .cn-card { margin-left: 0; } .cn-hand { gap: .18rem; } }

/* Action bar */
.cn-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }
.cn-btn {
  border: 1px solid var(--gold);
  background: rgba(244,196,48,.16);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: .4rem .8rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: background .12s, opacity .12s;
}
.cn-btn:hover:not(:disabled) { background: rgba(244,196,48,.34); }
.cn-btn.primary { background: var(--gold); color: #5a3d00; }
.cn-btn.primary:hover:not(:disabled) { background: #ffd75e; }
.cn-btn.ghost { border-color: var(--felt-line); background: rgba(255,255,255,.1); }
.cn-btn:disabled { opacity: .38; cursor: default; }

/* ---- CANASTA CARD ---- */
.cn-card {
  position: relative;
  width: 52px; height: 74px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  flex: 0 0 auto;
  transition: transform .12s ease, box-shadow .12s ease;
  overflow: hidden;
  color: var(--card-black);
}
.cn-card.red { color: var(--card-red); }
.cn-card.black { color: var(--card-black); }
.cn-card .cn-r { position: absolute; top: 3px; left: 4px; font-weight: 800; font-size: .82rem; line-height: 1; letter-spacing: -.5px; }
.cn-card .cn-s { position: absolute; top: 15px; left: 4px; font-size: .72rem; line-height: 1; }
.cn-card .cn-pip { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; opacity: .92; }
.cn-card.wild .cn-pip { font-size: 1.1rem; }
.cn-card.selectable { cursor: pointer; }
.cn-card.selectable:hover { transform: translateY(-8px); box-shadow: 0 8px 16px rgba(0,0,0,.4); }
.cn-card.selected { transform: translateY(-14px); box-shadow: 0 10px 20px rgba(0,0,0,.45); outline: 2px solid var(--gold); }
.cn-card.wild { background: linear-gradient(160deg, #fff 60%, #fff3c4); }
.cn-card.is-back {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 5px, transparent 5px 10px), linear-gradient(135deg, #8a1830, #4a1220);
  border: 2px solid #fff;
}
.cn-card.dim { opacity: .5; }
.cn-card.small { width: 40px; height: 58px; }
.cn-card.small .cn-r { font-size: .68rem; }
.cn-card.small .cn-s { top: 13px; font-size: .6rem; }
.cn-card.small .cn-pip { font-size: 1.1rem; }
.cn-card.shake { animation: cnShake .25s ease; }
@keyframes cnShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

@media (max-width: 560px) {
  .cn-card { width: 42px; height: 60px; }
  .cn-card .cn-r { font-size: .7rem; }
  .cn-card .cn-pip { font-size: 1.1rem; }
  .cn-hand .cn-card { margin-left: -18px; }
  .cn-seat { min-width: 120px; }
}

/* ---- WIN / RESULT OVERLAY ---- */
.game-overlay {
  position: absolute;
  inset: 0;
  background: rgba(40, 12, 22, .84);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  border-radius: var(--radius-lg);
}
.game-overlay.open { display: flex; }
.game-overlay-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem 2.25rem;
  max-width: 440px;
  width: calc(100% - 2rem);
  text-align: center;
}
.game-overlay-card h2,
.game-overlay-card .overlay-title { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-bottom: .5rem; color: var(--text); }
.win-stats { display: flex; justify-content: center; gap: 1.5rem; margin: 1rem 0 1.25rem; }
.win-stats > div { text-align: center; }
.win-stats .num { font-size: 1.4rem; font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; }
.win-stats .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
.overlay-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ---- SETTINGS MODAL ---- */
.sn-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(40,12,22,.55); display: none; align-items: center; justify-content: center; padding: 1rem; }
.sn-modal.open { display: flex; }
.sn-modal-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 440px; max-width: 100%; max-height: 88vh; overflow-y: auto; padding: 1.25rem 1.5rem 1.5rem; }
.sn-modal-card h2 { font-size: 1.2rem; margin-bottom: 1rem; display:flex; justify-content:space-between; align-items:center; }
.sn-modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text-muted); line-height:1; }
.sn-set-row { margin-bottom: 1.1rem; }
.sn-set-row > .sn-set-label { font-weight:600; font-size:.9rem; margin-bottom:.45rem; display:block; }
.sn-swatches { display:flex; gap:.5rem; flex-wrap:wrap; }
.sn-swatch { width:44px; height:32px; border-radius:8px; cursor:pointer; border:3px solid transparent; box-shadow: var(--shadow-sm); }
.sn-swatch.active { border-color: var(--gold); }
.sn-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:.4rem 0; }
.sn-toggle-row label { font-size:.9rem; }
.sn-seg { display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.sn-seg button { border:none; background:var(--surface); padding:.3rem .8rem; font-size:.82rem; font-weight:600; cursor:pointer; color:var(--text); font-family:var(--font); }
.sn-seg button.active { background:var(--blue); color:#fff; }

/* ---- CONFETTI ---- */
.confetti { position: absolute; width: 10px; height: 14px; top: -20px; z-index: 1100; pointer-events: none; animation: confettiFall linear forwards; }
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }

/* ---- FULL-WIDTH PAGE INTRO (first paragraphs, no reading-width cap) ---- */
.page-intro {
  margin: .5rem 0 1.25rem;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: none;   /* deliberately NOT capped to a narrow measure */
}
.page-intro p { max-width: none; margin-bottom: .9rem; }
.page-intro strong { color: var(--text); }
.home-intro {
  /* No width limitation on the opening paragraph(s). */
  max-width: none;
  margin: .25rem 0 1rem;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.home-intro strong { color: var(--text); }

/* Home: intro above the game on desktop, but the GAME above the intro on mobile
   so the table is always in view without scrolling past the introduction. */
.home-play { display: flex; flex-direction: column; }
.home-play .home-intro { order: 1; }
.home-play .home-game { order: 2; }
@media (max-width: 768px) {
  .home-play .home-game { order: 1; }
  .home-play .home-intro { order: 2; margin-top: 1.25rem; }
}

/* ---- GAME PAGE LAYOUT ---- */
.game-header { margin: 1.25rem 0 .75rem; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.game-header h1 { font-size: 1.5rem; }
.game-header .tagline { color: var(--text-muted); font-size: .92rem; }
.mode-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.mode-tab { padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .82rem; font-weight: 600; }
.mode-tab:hover { border-color: var(--blue); color: var(--blue); }
.mode-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Below-the-fold content */
.game-content { margin-top: 2.5rem; }
.game-content h2 { margin: 2rem 0 .75rem; font-size: 1.4rem; }
.game-content h3 { margin: 1.25rem 0 .5rem; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; margin: 1rem 0; }
.howto-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.howto-card h3 { margin: 0 0 .4rem; font-size: 1rem; color: var(--blue-dark); }
.howto-card p { font-size: .9rem; margin: 0; }
.howto-card.has-img { padding-top: 0; overflow: hidden; }
.howto-card .howto-img { width: calc(100% + 2.5rem); max-width: none; margin: 0 -1.25rem .95rem; height: 200px; object-fit: cover; object-position: center; display: block; border-bottom: 1px solid var(--border); }
@media (max-width: 480px) { .howto-card .howto-img { height: 170px; } }
.strategy-list { margin: .75rem 0 1rem 1.25rem; color: var(--text-muted); }
.strategy-list li { margin-bottom: .55rem; font-size: .95rem; }
ol.strategy-list.numbered { list-style: decimal; padding-left: .5rem; }
ol.strategy-list.numbered li { padding-left: .35rem; }
ol.strategy-list.numbered li::marker { color: var(--blue); font-weight: 800; }

.tldr { background: var(--blue-light); border-left: 4px solid var(--blue); border-radius: var(--radius-sm); padding: .8rem 1.1rem; font-size: .96rem; line-height: 1.65; margin: 0 0 1.25rem; color: var(--text); max-width: none; }
.tldr strong { color: var(--blue-dark); }
.tip-callout { background: var(--accent-light); border: 1px solid #f3dfa0; border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .95rem; line-height: 1.6; margin: .5rem 0 1rem; }

.facts-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; font-size: .93rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.facts-table th, .facts-table td { padding: .6rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.facts-table tr:last-child th, .facts-table tr:last-child td { border-bottom: none; }
.facts-table th { width: 34%; background: var(--surface-2); font-weight: 700; color: var(--text); white-space: nowrap; }
.facts-table td { color: var(--text-muted); }
@media (max-width: 520px) { .facts-table th { width: 42%; white-space: normal; } }

/* Generic comparison / data tables that scroll on small screens */
.table-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.compare-table th, .compare-table td { padding: .55rem .8rem; border-bottom: 1px solid var(--border); text-align: left; }
.compare-table thead th { background: var(--surface-2); font-weight: 700; }
.compare-table td { color: var(--text-muted); }

/* ---- FAQ ACCORDION ---- */
.faq-accordion { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.faq-acc-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-acc-item summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; user-select: none; }
.faq-acc-item summary::-webkit-details-marker { display: none; }
.faq-acc-item summary h3 { font-size: 1rem; margin: 0; color: var(--text); }
.faq-acc-item[open] summary h3 { color: var(--blue-dark); }
.faq-acc-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform .2s ease; }
.faq-acc-item[open] .faq-acc-chevron { transform: rotate(180deg); }
.faq-acc-item summary:hover h3 { color: var(--blue); }
.faq-acc-body { padding: 0 1.25rem 1.15rem; }
.faq-acc-body p { font-size: .92rem; margin: 0 0 .6rem; color: var(--text-muted); }
.faq-acc-body :last-child { margin-bottom: 0; }
.faq-list { margin-top: 1rem; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: .75rem; }
.faq-item h3 { margin: 0 0 .4rem; font-size: 1rem; }
.faq-item p { font-size: .92rem; margin: 0; }

.variant-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1rem; }
.variant-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; color: var(--text); }
.variant-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--blue-border); color: var(--text); }
.variant-card .vc-name { font-weight: 700; color: var(--blue-dark); margin-bottom: .25rem; display: flex; align-items: center; gap: .4rem; }
.variant-card .vc-tag { font-size: .84rem; color: var(--text-muted); line-height: 1.45; }
.variant-card .vc-meta { margin-top: .6rem; font-size: .72rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; }

/* ---- ERROR PAGE HERO ---- */
.nf-hero { position: relative; text-align: center; color: #fff; background: radial-gradient(ellipse at 50% -10%, var(--felt-light), var(--felt) 55%, var(--felt-dark)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 0 80px rgba(0,0,0,.25); padding: 2.5rem 1.25rem 2.75rem; overflow: hidden; }
.nf-hero h1 { color: #fff; font-size: 1.7rem; margin: .25rem 0 .5rem; }
.nf-hero p { color: rgba(255,255,255,.85); max-width: 34rem; margin: 0 auto 1.5rem; line-height: 1.6; }
.nf-code { font-size: 3rem; font-weight: 800; letter-spacing: .1em; color: var(--gold); line-height: 1; margin-top: 1rem; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.nf-cards { display: flex; justify-content: center; align-items: flex-end; height: 118px; margin-bottom: .25rem; }
.nf-card { width: 76px; height: 106px; border-radius: 10px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,.35); margin: 0 -8px; }
.nf-card b { font-size: 1.5rem; line-height: 1; }
.nf-card i { font-style: normal; font-size: 1.6rem; line-height: 1; }
.nf-card.red { color: var(--card-red); transform: rotate(-12deg); }
.nf-card.black { color: var(--card-black); transform: rotate(12deg); }
.nf-card.back { color: rgba(255,255,255,.9); font-size: 2rem; transform: translateY(-14px) scale(1.06); background: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 6px, transparent 6px 12px), linear-gradient(135deg, #8a1830, #4a1220); border: 4px solid #fff; z-index: 2; }
.nf-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff; padding: .55rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; }
.btn-outline-light:hover { background: rgba(255,255,255,.14); color: #fff; }
.nf-linkcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem; margin-top: 1rem; text-align: left; }
.nf-linkcols h3 { font-size: 1rem; color: var(--blue-dark); margin-bottom: .5rem; }
.nf-linkcols ul { list-style: none; padding: 0; margin: 0; }
.nf-linkcols li { margin-bottom: .4rem; }
.nf-linkcols a { font-size: .92rem; }

/* ---- MULTIPLAYER ---- */
.mp-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.mp-players { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mp-player { padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.mp-player.me { border-color: var(--blue-border); background: var(--blue-light); }
.mp-player .mp-name { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.mp-player .mp-status { font-size: .75rem; color: var(--text-muted); }
.mp-progress-track { height: 10px; border-radius: 999px; background: var(--surface-3); margin-top: .5rem; overflow: hidden; }
.mp-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: 999px; transition: width .4s ease; }
.mp-code { font-size: 1.6rem; font-weight: 800; letter-spacing: .35em; font-variant-numeric: tabular-nums; background: var(--surface-3); border-radius: var(--radius-sm); padding: .4rem .6rem .4rem .9rem; display: inline-block; }
.mp-chat { max-height: 180px; overflow-y: auto; font-size: .85rem; margin: .5rem 0; }
.mp-chat .mp-chat-line { margin-bottom: .25rem; }
.mp-chat .mp-chat-name { font-weight: 700; color: var(--blue-dark); }
.mp-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mp-dot.on { background: #22c55e; }
.mp-dot.off { background: #cbd5e1; }

/* ---- RATING WIDGET ---- */
.rating-widget { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; padding: .7rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: .9rem; }
.rating-label { font-weight: 600; color: var(--text); }
.rating-stars { display: inline-flex; }
.rating-star { background: none; border: none; cursor: pointer; padding: 0 .1rem; font-size: 1.5rem; line-height: 1; color: #d1d5db; transition: color .1s; }
.rating-star.on { color: var(--gold); }
.rating-star:hover { color: #ffd75e; }
.rating-summary { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rating-widget.rated .rating-label::after { content: " thanks!"; color: var(--blue); font-weight: 400; }

/* ---- STATS BAR (localStorage per-game) ---- */
.stats-strip { display: flex; gap: 1.75rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem 1.25rem; margin-top: 1rem; box-shadow: var(--shadow-sm); }
.stats-strip > div { text-align: center; }
.stats-strip .num { font-weight: 800; font-size: 1.1rem; color: var(--blue-dark); font-variant-numeric: tabular-nums; }
.stats-strip .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }

@media (max-width: 640px) {
  .game-shell { padding: .4rem .4rem .75rem; border-radius: var(--radius); }
  .game-stats { gap: .6rem; font-size: .78rem; }
  .mp-players { grid-template-columns: 1fr; }
  .game-header h1 { font-size: 1.2rem; }
  .cn-center { gap: 1rem; }
}

/* ============================================================
   TOUCH / MOBILE INTERACTION
   Hover is unreliable on touchscreens: after a tap the :hover state
   "sticks" until you tap elsewhere. That made the last-tapped card look
   half-selected (it stayed lifted) and made overlapping fanned cards jump
   around. On touch devices we cancel hover-only movement, give tappable
   things a quick :active press cue instead, enlarge tap targets to a
   comfortable ~44px, and drop the grey tap-flash. Desktop (hover: hover)
   is completely untouched. These blocks are LAST in the file so, where a
   phone matches an earlier media query too, the touch rules win.
   ============================================================ */
@media (hover: none) {
  /* Remove the default grey/dark tap flash — we provide our own feedback. */
  .game-shell, .game-shell *, .sn-modal, .sn-modal *,
  .game-overlay, .game-overlay * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Cards: no hover-lift on touch (it stuck after a tap). Keep the
     class-driven .selected lift, and give a brief press cue while held. */
  .cn-card.selectable:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
  .cn-card.selectable:active { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(0,0,0,.4); }
  .cn-card.selected { transform: translateY(-16px); box-shadow: 0 10px 20px rgba(0,0,0,.45); outline: 2px solid var(--gold); }

  /* Toolbar & action buttons: comfortable 44px targets + press feedback,
     and cancel the sticky hover background. */
  .btn-felt { min-height: 44px; padding: .5rem .8rem; }
  .btn-felt:hover { background: rgba(255,255,255,.12); color: #fff; }
  .btn-felt:active { background: rgba(255,255,255,.30); }
  .btn-felt.btn-felt-primary:hover { background: var(--gold); }
  .btn-felt.btn-felt-primary:active { background: #ffd75e; }

  .cn-btn { min-height: 44px; padding: .55rem .9rem; }
  .cn-btn:hover:not(:disabled) { background: rgba(244,196,48,.16); }
  .cn-btn:active:not(:disabled) { background: rgba(244,196,48,.40); }
  .cn-btn.primary:hover:not(:disabled) { background: var(--gold); }
  .cn-btn.primary:active:not(:disabled) { background: #ffd75e; }

  /* Stock / discard / melds: press feedback instead of a stuck hover. */
  .cn-meld:hover { border-color: var(--felt-line); }
  .cn-meld:active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(244,196,48,.6); }
  .cn-stock:active { filter: brightness(1.18); }
  .cn-discard.takeable:active { filter: brightness(1.18); }

  /* Result overlay & settings modal: thumb-sized controls + fast taps. */
  .sn-modal, .game-overlay, .nav-mobile-panel { touch-action: manipulation; }
  .overlay-actions .btn { min-height: 44px; }
  .sn-seg button { min-height: 44px; }
  .sn-swatch { width: 52px; height: 40px; }
  .sn-modal-close { min-width: 44px; min-height: 44px; }
  .mode-tab { padding: .5rem 1rem; }
  .mode-tab:hover { border-color: var(--border); color: var(--text); }
  .rating-star { padding: 0 .25rem; }
  .rating-star:hover { color: #d1d5db; }
  .rating-star.on:hover, .rating-star.on { color: var(--gold); }
}

/* Phones: spread the fan a little so each card's tappable sliver is
   comfortable (they wrap to a second row when the hand is large). This is
   after the max-width:560px rule above, so it wins on touch phones. */
@media (hover: none) and (max-width: 640px) {
  .cn-hand { gap: .14rem; }
  .cn-hand .cn-card { margin-left: -12px; }
}