/* ============================================================
   SPADES.NOW — Game table, cards, and shared content components
   Loaded on top of main.css (site design system).
   ============================================================ */

:root {
  --felt: #3b1d63;
  --felt-dark: #24123f;
  --felt-light: #4c2a78;
  --felt-line: rgba(255, 255, 255, 0.16);
  --card-red: #d02b2b;
  --card-black: #1e293b;
  --gold: #fbbf24;
}

/* ---- GAME SHELL (the felt table) ---- */
.game-shell {
  background: radial-gradient(ellipse at 50% -15%, var(--felt-light), var(--felt) 58%, var(--felt-dark));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), inset 0 0 90px rgba(0,0,0,.35);
  padding: .75rem .75rem 1.1rem;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.game-shell.table-midnight { background: radial-gradient(ellipse at 50% -15%, #24344f, #132036 58%, #0a1220); }
.game-shell.table-emerald  { background: radial-gradient(ellipse at 50% -15%, #1c6b4e, #12503a 58%, #0a3025); }
.game-shell.table-charcoal { background: radial-gradient(ellipse at 50% -15%, #3a4453, #262d38 58%, #171b22); }
.game-shell.table-crimson  { background: radial-gradient(ellipse at 50% -15%, #7d2230, #5c1620 58%, #360b12); }
.game-shell.table-walnut   { background: radial-gradient(ellipse at 50% -15%, #6b4526, #4a2f1a 58%, #2c1a0e); }

.game-shell:fullscreen { display:flex; flex-direction:column; justify-content:center; border-radius:0; padding:1rem; }

/* ---- 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: .6; font-weight: 500; font-size: .68rem; 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: #713f12; }
.btn-felt.btn-felt-primary:hover { background: #fcd34d; }

/* ---- BOARD ---- */
.sp-board-wrap { position: relative; width: 100%; }
.sp-board { position: relative; }

/* ---- CLS: reserve space for the JS-built regions so the game engine
   injecting the board/stats after the (render-blocking) scripts load doesn't
   reflow everything below it. The board is a constant height per breakpoint in
   its initial (bidding) state — 533px on desktop across every variant — and the
   stats strip is always a fixed 6-tile row, so exact reservations hold CLS ~0.
   Mobile floats the game to the top (see the max-width:768px block), so its
   strip/board sit below the fold and never shift; a mobile board reserve would
   only leave felt gaps between hands, so it is intentionally desktop-only.
   The reserve matches the shorter play-phase board height (~460px) so there is
   no empty felt below the hand during play; the taller initial bidding board
   only grows downward — into below-the-fold space on desktop, and on mobile it
   keeps the reorder-floated intro copy below the fold — so CLS stays ~0. */
#board-wrap { min-height: 460px; }
#stats-strip { min-height: 73px; }
.sp-board.no-animations .sp-card { transition: none !important; }
.sp-board * { -webkit-tap-highlight-color: transparent; }

/* ---- TABLE GRID (seat layout) ---- */
.sp-table {
  position: relative;
  display: grid;
  gap: .35rem;
  min-height: 360px;
  padding: 2.2rem .4rem .4rem;
  align-items: center;
  justify-items: center;
}
.sp-table.seats-4 { grid-template-areas: "n n n" "w t e" "s s s"; grid-template-columns: 1fr 1.4fr 1fr; }
.sp-table.seats-3 { grid-template-areas: "w e" "t t" "s s"; grid-template-columns: 1fr 1fr; }
.sp-table.seats-2 { grid-template-areas: "n" "t" "s"; grid-template-columns: 1fr; }
.seat-pos-0 { grid-area: s; } .seat-pos-1 { grid-area: w; } .seat-pos-2 { grid-area: n; } .seat-pos-3 { grid-area: e; }
.sp-trick { grid-area: t; }

/* ---- SEATS ---- */
.sp-seat {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  color: #fff; text-align: center; padding: .2rem .4rem; border-radius: var(--radius);
  min-width: 118px; transition: box-shadow .2s, background .2s;
}
.sp-seat.active { background: rgba(251,191,36,.14); box-shadow: 0 0 0 2px rgba(251,191,36,.5); }
.sp-seat.me { color: #fff; }
.sp-seat-name { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .3rem; }
.sp-dealer { font-size: .58rem; font-weight: 800; background: var(--gold); color: #6b3f0a; border-radius: 4px; padding: .05rem .3rem; }
.sp-seat-stats { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.sp-bidpill, .sp-trickpill { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .12rem .5rem; letter-spacing: .01em; }
.sp-bidpill { background: rgba(255,255,255,.16); color: #fff; }
.sp-trickpill { background: rgba(255,255,255,.08); color: #e9d5ff; }

/* opponent face-down fan (visual only) */
.sp-fan { display: flex; height: 30px; }
.sp-fan .sp-card.back { width: 20px; height: 28px; margin-left: -14px; border-width: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.sp-fan .sp-card.back:first-child { margin-left: 0; }

/* ---- CARDS ---- */
.sp-card {
  position: relative; width: 58px; height: 82px; border-radius: 7px; background: #fff;
  border: 1px solid #cbd5e1; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  font-family: var(--font); flex-shrink: 0; display: block;
  transition: transform .14s ease, box-shadow .14s ease;
}
.sp-card.red { color: var(--card-red); }
.sp-card.black { color: var(--card-black); }
.sp-card .c-tl, .sp-card .c-br { position: absolute; line-height: 1; text-align: center; font-weight: 800; }
.sp-card .c-tl { top: 3px; left: 4px; }
.sp-card .c-br { bottom: 3px; right: 4px; transform: rotate(180deg); }
.sp-card .c-tl b, .sp-card .c-br b { display: block; font-size: 15px; letter-spacing: -.5px; }
.sp-card .c-tl i, .sp-card .c-br i { display: block; font-size: 11px; font-style: normal; margin-top: -1px; }
.sp-card .c-mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; opacity: .92; }
.sp-card.joker .c-mid { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.sp-card.joker .c-tl { top: 4px; left: 0; right: 0; font-size: 20px; }
.sp-card .c-sub { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.sp-card.back {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 5px, transparent 5px 10px),
    linear-gradient(135deg, #6d28d9, #3b0f66);
  border: 3px solid #fff;
}
.sp-board[data-back="gold"]  .sp-card.back { background: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 5px, transparent 5px 10px), linear-gradient(135deg,#b8860b,#6b4e07); }
.sp-board[data-back="ruby"]  .sp-card.back { background: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 5px, transparent 5px 10px), linear-gradient(135deg,#b91c1c,#5f0f0f); }
.sp-board[data-back="slate"] .sp-card.back { background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 5px, transparent 5px 10px), linear-gradient(135deg,#334155,#0f172a); }
.sp-board[data-back="teal"]  .sp-card.back { background: repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 5px, transparent 5px 10px), linear-gradient(135deg,#0d7a6a,#0a4038); }

/* ---- TRICK AREA ---- */
.sp-trick {
  position: relative; width: 150px; height: 150px; border-radius: 50%;
  background: rgba(0,0,0,.14); box-shadow: inset 0 0 24px rgba(0,0,0,.25);
  align-self: center;
}
.sp-trick-slot { position: absolute; }
.sp-trick-slot.winning .sp-card { box-shadow: 0 0 0 3px var(--gold), 0 3px 10px rgba(0,0,0,.4); }
.sp-trick-slot .sp-card { animation: spDrop .18s ease; }
@keyframes spDrop { from { transform: scale(.8); opacity: .4; } to { transform: scale(1); opacity: 1; } }
.trick-from-0 { bottom: 2px; left: 50%; transform: translateX(-50%); }
.trick-from-1 { left: 2px; top: 50%; transform: translateY(-50%); }
.trick-from-2 { top: 2px; left: 50%; transform: translateX(-50%); }
.trick-from-3 { right: 2px; top: 50%; transform: translateY(-50%); }
/* 3- and 2-seat tables spread the played cards evenly */
.seats-3 .trick-from-0 { bottom: 2px; left: 50%; transform: translateX(-50%); }
.seats-3 .trick-from-1 { top: 6px; left: 8px; transform: none; }
.seats-3 .trick-from-2 { top: 6px; right: 8px; transform: none; }
.seats-2 .trick-from-0 { bottom: 4px; left: 50%; transform: translateX(-50%); }
.seats-2 .trick-from-1 { top: 4px; left: 50%; transform: translateX(-50%); }

/* ---- BANNER ---- */
.sp-banner {
  position: absolute; top: .5rem; left: 50%; transform: translateX(-50%);
  color: #f5f3ff; font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  background: rgba(0,0,0,.22); padding: .28rem .9rem; border-radius: 999px; white-space: nowrap;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}

/* ---- YOUR HAND ----
   Cards overlap to the RIGHT (margin-right) so that when the fan wraps to a
   second row on narrow/mobile screens each row starts flush-left instead of
   being pulled off-screen by a negative left margin. Later cards paint on top,
   so every card's top-left rank/suit corner stays visible and tappable. */
.sp-hand-wrap { padding: .5rem .25rem .25rem; }
.sp-hand { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; }
.sp-hand .sp-card { margin-right: -18px; width: 64px; height: 90px; touch-action: manipulation; }
.sp-hand .sp-card:last-child { margin-right: 0; }
.sp-hand .sp-card.c-mid { font-size: 34px; }
.sp-hand .sp-card.playable { cursor: pointer; border-color: var(--gold); }
/* Lift on hover only where a real pointer can hover (desktop); on touch the
   hover state would otherwise "stick" after a tap. */
@media (hover: hover) {
  .sp-hand .sp-card.playable:hover { transform: translateY(-14px); box-shadow: 0 8px 18px rgba(0,0,0,.4); z-index: 5; }
}
/* Press feedback for touch (and mouse): the tapped card lifts while held. */
.sp-hand .sp-card.playable:active { transform: translateY(-14px); z-index: 6; }
.sp-hand .sp-card.dim { opacity: .5; filter: grayscale(.3); cursor: not-allowed; }
button.sp-card { padding: 0; font: inherit; }

/* ---- BID BAR ---- */
.sp-bidbar { padding: 0 .25rem; min-height: 0; }
.sp-bid-note { color: #f5f3ff; font-size: .85rem; text-align: center; margin: .3rem 0 .5rem; }
.sp-bid-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-bottom: .5rem; }
.sp-bid-btn {
  min-width: 42px; padding: .5rem .7rem; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; font-family: var(--font);
  transition: background .12s, transform .12s;
}
@media (hover: hover) {
  .sp-bid-btn:hover { background: var(--gold); color: #6b3f0a; transform: translateY(-2px); }
}
.sp-bid-btn:active { background: var(--gold); color: #6b3f0a; transform: translateY(1px); }
.sp-bid-btn.nil { background: rgba(251,191,36,.2); border-color: var(--gold); }
.sp-bid-btn.blind { display: block; margin: 0 auto; background: rgba(220,38,38,.35); border-color: #ef4444; }
.sp-bid-note strong { color: var(--gold); }

/* ---- WIN / HAND OVERLAY ---- */
.game-overlay {
  position: absolute; inset: 0; background: rgba(30, 12, 55, .82); 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: 1.75rem 2rem; max-width: 440px; width: calc(100% - 2rem); text-align: center; max-height: 90%; overflow-y: auto;
}
.game-overlay-card h2, .game-overlay-card .overlay-title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin-bottom: .5rem; }
#overlay-sub { color: var(--text-muted); font-size: .92rem; }
.sp-scoreline { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem 0 .05rem; font-weight: 600; }
.sp-scoreline > span:first-child { color: var(--text); }
.sp-scoreline .pos { color: #16a34a; } .sp-scoreline .neg { color: #dc2626; }
.sp-scoreline .sp-total { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--blue-dark); min-width: 3ch; text-align: right; }
.sp-scorenote { font-size: .74rem; color: var(--text-light); text-align: left; margin-bottom: .35rem; }
.sp-final { margin-top: .75rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.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(15,23,42,.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-swatch.card-swatch { width:34px; height:48px; border-radius:6px; border-width:2px; }
.sn-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:.4rem 0; cursor:pointer; }
.sn-toggle-row .sn-toggle-txt { font-size:.9rem; }
.sn-toggle-row input[type="checkbox"] { cursor:pointer; }

/* ---- 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; } }

/* Toast (shared with the shell) */
#sn-toast { font-family: var(--font); }

/* ============================================================
   SHARED CONTENT COMPONENTS (below-the-fold help + landing sections)
   ============================================================ */

/* Full-width factual intro under the H1 — deliberately NOT width-limited so
   the opening paragraphs span the whole content column on root and subpages. */
.lead-intro, .home-intro {
  max-width: none; width: 100%;
  margin: .35rem 0 1.15rem; font-size: 1.05rem; line-height: 1.75; color: var(--text-muted);
}
.lead-intro strong, .home-intro strong { color: var(--text); }

/* ---- GAME PAGE HEADER ---- */
.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; }
.game-content p { max-width: none; }
.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); }
.tldr strong { color: var(--blue-dark); }
.tip-callout { background: var(--accent-light, #fffbeb); border: 1px solid #fde68a; 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; } }

/* ---- 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-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 / GAME CARDS ---- */
.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; }

/* ---- 404 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, #6d28d9, #3b0f66); 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), #a78bfa); 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: #fcd34d; }
.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 STRIP ---- */
.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; }

/* ---- SCORE SHEET (printable) ---- */
.scoresheet { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.scoresheet th, .scoresheet td { border: 1px solid #94a3b8; padding: .5rem; text-align: center; height: 2.2rem; }
.scoresheet th { background: var(--surface-2); }

@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.25rem; }
  .sp-seat { min-width: 92px; }
  .sp-card { width: 48px; height: 68px; }
  .sp-card .c-mid { font-size: 24px; }
  /* Wider visible sliver (~40px) than desktop so each card is comfortably
     tappable with a finger; the fan wraps to balanced rows when it must. */
  .sp-hand .sp-card { width: 52px; height: 74px; margin-right: -12px; }
  .sp-hand .sp-card:last-child { margin-right: 0; }
  .sp-trick { width: 120px; height: 120px; }
  .sp-table { min-height: 300px; padding-top: 2rem; }
  /* During bidding the centre trick circle is empty, so on phones shrink it to
     pull the hand and bid ladder up toward the fold (it returns to full size
     once play starts and cards land in it). */
  .sp-table.phase-bidding { min-height: 240px; }
  .sp-table.phase-bidding .sp-trick { width: 64px; height: 64px; }
}

/* ---- AUTH PAGES ---- */
.auth-card { max-width: 440px; margin: 2rem auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.75rem 1.75rem 1.5rem; }
.auth-card h1 { font-size: 1.5rem; margin-bottom: .35rem; }
.auth-divider, .auth-or { display: flex; align-items: center; text-align: center; color: var(--text-light); font-size: .8rem; margin: 1rem 0; gap: .75rem; }
.auth-divider::before, .auth-divider::after, .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-benefits { list-style: none; padding: 0; margin: 1rem 0 0; }
.auth-benefits li { padding: .35rem 0 .35rem 1.5rem; position: relative; font-size: .88rem; color: var(--text-muted); }
.auth-benefits li::before { content: "\2660"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

/* ---- FLAT LOOK: no decorative shadows on tables or boxes ----
   (Functional highlight rings for whose-turn and the winning card are kept.) */
.game-shell { box-shadow: none; }
.sp-card { box-shadow: none; }
.sp-fan .sp-card.back { box-shadow: none; }
.sp-trick { box-shadow: none; }
.sp-trick-slot.winning .sp-card { box-shadow: 0 0 0 3px var(--gold); }
.sp-hand .sp-card.playable:hover { box-shadow: none; }
.nf-hero { box-shadow: none; }
.nf-card, .nf-card.back { box-shadow: none; }
#sn-toast { box-shadow: none !important; }
.nav-mega { box-shadow: none; border: 1px solid var(--border); }

/* ---- 6-SEAT TABLE (6-Player Spades) ---- */
.sp-table.seats-6 { grid-template-areas: "nw n ne" "w t e" "s s s"; grid-template-columns: 1fr 1.4fr 1fr; }
.seats-6 .seat-pos-2 { grid-area: nw; }
.seats-6 .seat-pos-3 { grid-area: n; }
.seats-6 .seat-pos-4 { grid-area: ne; }
.seats-6 .seat-pos-1 { grid-area: w; }
.seats-6 .seat-pos-5 { grid-area: e; }
.seats-6 .seat-pos-0 { grid-area: s; }
.seats-6 .trick-from-0 { bottom: 2px; left: 50%; transform: translateX(-50%); }
.seats-6 .trick-from-1 { left: 4px; bottom: 34px; transform: none; }
.seats-6 .trick-from-2 { left: 10px; top: 16px; transform: none; }
.seats-6 .trick-from-3 { top: 2px; left: 50%; transform: translateX(-50%); }
.seats-6 .trick-from-4 { right: 10px; top: 16px; transform: none; }
.seats-6 .trick-from-5 { right: 4px; bottom: 34px; transform: none; }

/* ---- MOBILE: keep the game at the top so players never scroll to play ---- */
@media (max-width: 768px) {
  .page-home .page-wrap,
  .page-game .page-wrap { display: flex; flex-direction: column; }
  /* Float the felt table (and the mode tabs that control it) above the intro copy. */
  .page-home #game-shell,
  .page-game #game-shell { order: -1; margin-top: .35rem; }
  .page-home .game-header,
  .page-game .game-header { order: -2; margin: .25rem 0 .4rem; }
  .page-home .game-header h1,
  .page-game .game-header h1 { font-size: 1.15rem; }
  .page-home .lead-intro,
  .page-game .lead-intro { order: 0; }
}

/* ============================================================
   TOUCH / COARSE-POINTER: comfortable finger targets and no sticky
   hover states. Keyed off the input device (not width) so it also
   covers touch tablets and large phones, and never affects desktop.
   ============================================================ */
@media (pointer: coarse) {
  /* Bidding ladder, toolbar and overlay actions: min 44px tap targets. */
  .sp-bid-btn { min-height: 44px; min-width: 44px; padding: .5rem .8rem; }
  .btn-felt { min-height: 40px; padding: .45rem .8rem; }
  .game-overlay .btn, .overlay-actions .btn { min-height: 44px; }
  /* The settings-modal close "×" is a tiny glyph — pad it to a real 44px
     finger target so it's easy to dismiss on a phone. */
  .sn-modal-close { min-width: 44px; min-height: 44px; margin: -.4rem -.6rem -.4rem 0; }
  .sp-hand .sp-card.playable { border-width: 2px; }
  /* Bigger, easier settings toggles and swatches. */
  .sn-toggle-row { padding: .6rem 0; }
  .sn-toggle-row input[type="checkbox"] { width: 24px; height: 24px; }
  .sn-swatch { min-width: 44px; min-height: 40px; }
  .sn-swatch.card-swatch { min-width: 38px; min-height: 52px; }
  .rating-star { font-size: 1.9rem; padding: 0 .25rem; }
  /* iOS zooms the page when focusing an input whose text is < 16px; keep the
     game/multiplayer inputs at 16px so tapping a field never zooms the table. */
  .form-control { font-size: 16px; }
}

/* Kill hover-only lift transforms on touch devices so a tapped card, bid
   button, tab or variant card doesn't stay stuck in its lifted state. */
@media (hover: none) {
  .sp-hand .sp-card.playable:hover,
  .sp-bid-btn:hover,
  .variant-card:hover,
  .mode-tab:hover,
  .btn-felt:hover { transform: none; }
}