/* spades.css — Spades table, cards and panels. DOM-rendered (no canvas) so cards
 * stay crisp at any size. Used by the solo page; the multiplayer table will reuse it. */

#spades-root {
  --card-w: 64px;
  --card-h: calc(var(--card-w) * 1.4);
  --felt-1: #241338;
  --felt-2: #120a1f;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Score bar ── */
#sp-scorebar {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-lg);
  padding: 6px 40px;
  font-family: var(--font-display);
}
.sp-team {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.sp-team .sp-team-name { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.sp-team .sp-team-score { font-size: 24px; font-weight: 700; line-height: 1; }
.sp-team .sp-team-bags { font-size: 12px; color: var(--text-subtle); font-family: var(--font-body); }
.sp-team.us .sp-team-score { color: var(--accent); text-shadow: 0 0 10px var(--accent-glow-subtle); }
.sp-team.them .sp-team-score { color: var(--accent2); text-shadow: 0 0 10px var(--accent2-glow-subtle); }
#sp-target { align-self: center; font-size: 11px; color: var(--text-subtle); font-family: var(--font-body); white-space: nowrap; }

/* ── Table ── */
#sp-table {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 300px;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 45%, var(--felt-1) 0%, var(--felt-2) 75%);
  border: 2px solid #3a2560;
  box-shadow: 0 0 0 1px rgba(240, 160, 48, 0.25), 0 0 24px rgba(56, 217, 192, 0.12) inset, 0 6px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#sp-table::after {
  /* faint spade watermark in the middle of the felt */
  content: '♠';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 150px;
  color: rgba(240, 160, 48, 0.04);
  pointer-events: none;
}

.sp-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.sp-seat.north { top: 10px; left: 50%; transform: translateX(-50%); }
.sp-seat.south { bottom: 10px; left: 50%; transform: translateX(-50%); }
.sp-seat.west  { left: 10px; top: 50%; transform: translateY(-50%); }
.sp-seat.east  { right: 10px; top: 50%; transform: translateY(-50%); }

.sp-plate {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 6, 18, 0.75);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 13px;
  white-space: nowrap;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sp-plate .sp-name { color: var(--text); font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.sp-seat.us .sp-name { color: var(--accent); }
.sp-seat.them .sp-name { color: var(--accent2); }
.sp-plate .sp-bid {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 0 7px;
}
.sp-plate .sp-bid b { color: var(--text-bright); font-weight: 700; }
.sp-plate .sp-bid.nil { color: #ff7ab8; }
.sp-plate .sp-bid.nil-broken { color: var(--error); text-decoration: line-through; }
.sp-seat.turn .sp-plate {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.sp-seat.turn .sp-plate::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: sp-pulse 1s ease-in-out infinite;
}
@keyframes sp-pulse { 50% { opacity: 0.3; } }

/* opponents' / partner's face-down cards */
.sp-backs { display: flex; height: calc(var(--card-h) * 0.45); }
.sp-seat.west .sp-backs, .sp-seat.east .sp-backs { flex-direction: column; height: auto; width: calc(var(--card-w) * 0.45); }
.sp-back {
  width: calc(var(--card-w) * 0.32);
  height: calc(var(--card-h) * 0.45);
  margin-left: calc(var(--card-w) * -0.2);
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(240, 160, 48, 0.35) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, #2a1648, #1a0e2e);
  border: 1px solid rgba(240, 160, 48, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.sp-back:first-child { margin-left: 0; }
.sp-seat.west .sp-back, .sp-seat.east .sp-back {
  width: calc(var(--card-h) * 0.45);
  height: calc(var(--card-w) * 0.32);
  margin-left: 0;
  margin-top: calc(var(--card-w) * -0.2);
}
.sp-seat.west .sp-back:first-child, .sp-seat.east .sp-back:first-child { margin-top: 0; }

/* ── Trick in the middle ── */
#sp-trick { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; }
#sp-trick .sp-card { position: absolute; transition: transform 0.35s ease, opacity 0.35s ease; }
#sp-trick .sp-card.from-south { animation: sp-in-south 0.25s ease-out; }
#sp-trick .sp-card.from-north { animation: sp-in-north 0.25s ease-out; }
#sp-trick .sp-card.from-west  { animation: sp-in-west 0.25s ease-out; }
#sp-trick .sp-card.from-east  { animation: sp-in-east 0.25s ease-out; }
@keyframes sp-in-south { from { translate: 0 120px; opacity: 0; } }
@keyframes sp-in-north { from { translate: 0 -120px; opacity: 0; } }
@keyframes sp-in-west  { from { translate: -160px 0; opacity: 0; } }
@keyframes sp-in-east  { from { translate: 160px 0; opacity: 0; } }
#sp-trick .sp-card.winner { box-shadow: 0 0 0 2px var(--accent), 0 0 16px var(--accent-glow); }

#sp-status {
  position: absolute;
  left: 50%;
  bottom: calc(var(--card-h) * 0.62 + 34px);
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
  text-shadow: 0 1px 3px #000;
}
#sp-broken {
  position: absolute;
  right: 14px; bottom: 12px;
  font-size: 11px;
  color: var(--text-subtle);
  z-index: 2;
}
#sp-broken.on { color: var(--accent2); }

/* ── Cards ── */
.sp-card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 6px;
  background: linear-gradient(160deg, #fbf8ff 0%, #ece6f5 100%);
  border: 1px solid #cfc4e0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  position: relative;
  color: #1c1528;
  font-family: var(--font-display);
  flex: none;
}
.sp-card.red { color: #d61f4a; }
.sp-card .sp-corner {
  position: absolute;
  left: 5px; top: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
  font-weight: 700;
  font-size: calc(var(--card-w) * 0.3);
}
.sp-card .sp-corner .s { font-size: calc(var(--card-w) * 0.26); }
.sp-card .sp-pip {
  position: absolute;
  right: 6px; bottom: 2px;
  font-size: calc(var(--card-w) * 0.55);
  line-height: 1;
  opacity: 0.9;
}

/* ── Your hand ── */
#sp-hand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: calc(var(--card-h) + 22px);
  padding-top: 18px;
}
#sp-hand .sp-card { transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s; cursor: default; }
#sp-hand.can-play .sp-card.legal { cursor: pointer; }
#sp-hand.can-play .sp-card.legal:hover { transform: translateY(-14px); }
#sp-hand.can-play .sp-card.legal { box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent-glow-subtle), 0 2px 5px rgba(0, 0, 0, 0.45); }
#sp-hand.can-play .sp-card:not(.legal) { filter: brightness(0.55); }
#sp-hand .sp-card.picked { transform: translateY(-18px); }

/* ── Panels (bid, hand summary) ── */
.sp-panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: rgba(15, 10, 26, 0.94);
  border: 1px solid var(--accent-ghost-border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 0 24px rgba(240, 160, 48, 0.18), 0 8px 30px rgba(0, 0, 0, 0.6);
  padding: 14px 16px;
  text-align: center;
  max-width: calc(100% - 24px);
}
.sp-panel.hidden { display: none; }
.sp-panel h3 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.sp-panel .sp-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.sp-bid-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sp-bid-grid button, .sp-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  min-width: 38px;
  padding: 6px 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--accent-ghost);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.sp-bid-grid button:hover, .sp-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px var(--accent-glow-subtle); }
.sp-bid-grid button.nil { color: #ff7ab8; }
.sp-bid-grid button.suggest { border-color: var(--accent2-ghost-border); }
.sp-btn.primary { background: var(--gradient-cta); color: var(--near-black); border: none; padding: 8px 22px; }
.sp-btn.primary:hover { color: var(--near-black); box-shadow: var(--gradient-cta-shadow-hover); }

.sp-summary { border-collapse: collapse; margin: 6px auto 12px; font-size: 13px; }
.sp-summary th, .sp-summary td { padding: 3px 10px; text-align: right; }
.sp-summary th { color: var(--text-subtle); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.sp-summary td:first-child, .sp-summary th:first-child { text-align: left; }
.sp-summary tr.us td:first-child { color: var(--accent); }
.sp-summary tr.them td:first-child { color: var(--accent2); }
.sp-summary td.pos { color: var(--success); }
.sp-summary td.neg { color: var(--error); }
.sp-summary tr.total td { border-top: 1px solid var(--border); font-weight: 700; color: var(--text-bright); }
.sp-notes { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }

/* ── How to play: ? button, help panel, Nil confirm ── */
#sp-help-btn {
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent2-ghost-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#sp-help-btn:hover { border-color: var(--accent2); box-shadow: 0 0 8px var(--accent2-glow-subtle); }
.sp-panel.sp-help {
  z-index: 12;
  background: rgba(15, 10, 26, 0.99);
  width: 440px;
  max-height: calc(100% - 16px);
  text-align: left;
  flex-direction: column;
}
.sp-panel.sp-help:not(.hidden) { display: flex; }
.sp-help-body { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }
.sp-panel.sp-help h3 { text-align: center; margin-bottom: 8px; }
.sp-help-body p { font-size: 13px; line-height: 1.4; color: var(--text-muted); margin: 0 0 6px; }
.sp-help-body b { color: var(--text-bright); }
.sp-help-tips { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin: 8px 0; cursor: pointer; }
.sp-panel.sp-help .sp-btn { flex: none; display: block; margin: 0 auto; }
.sp-panel .pos { color: var(--success); }
.sp-panel .neg { color: var(--error); }
.sp-nil-btns { display: flex; justify-content: center; gap: 10px; }

/* coach strip between the table and your hand (new players) */
#sp-coach {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(56, 217, 192, 0.07);
  border: 1px solid var(--accent2-ghost-border);
  border-radius: var(--radius-lg);
  padding: 6px 8px 6px 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  min-height: 46px;
}
#sp-coach.hidden { display: none; }
.sp-coach-tag {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent2);
  padding-top: 2px;
}
.sp-coach-text { flex: 1; }
.sp-coach-x {
  flex: none;
  background: none;
  border: none;
  color: var(--text-subtle);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.sp-coach-x:hover { color: var(--text); }

/* ── Small screens ── */
@media (max-width: 600px) {
  #spades-root { --card-w: 46px; }
  /* Fit the whole game (score bar, table, tip, hand) above the phone's browser toolbar:
     the table takes what's left of the small viewport after ~350px for everything else
     plus room for a floating bottom bar (iOS Safari). */
  #sp-table { aspect-ratio: auto; height: clamp(260px, calc(100svh - 350px), 470px); min-height: 0; border-radius: 18px; }
  #spades-root { gap: 4px; }
  #sp-scorebar { padding: 4px 36px; }
  #sp-help-btn { width: 24px; height: 24px; font-size: 14px; left: 5px; }
  #sp-coach { padding: 4px 6px 4px 8px; }
  #sp-hand { padding-top: 14px; height: calc(var(--card-h) + 16px); }
  .sp-plate { font-size: 11px; padding: 2px 7px; }
  .sp-plate .sp-name { max-width: 70px; }
  .sp-seat.west, .sp-seat.east { top: 42%; }
  .sp-team .sp-team-score { font-size: 20px; }
  .sp-team .sp-team-name { font-size: 11px; }
  .sp-bid-grid { grid-template-columns: repeat(5, 1fr); }
  #sp-table::after { font-size: 110px; }
  .sp-summary { font-size: 11px; }
  .sp-summary th, .sp-summary td { padding: 2px 4px; }
  .sp-summary th { font-size: 9px; }
  #sp-coach { font-size: 12px; min-height: 52px; }
  .sp-help-body p { font-size: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #spades-root { --card-w: 44px; max-width: 640px; }
  #sp-table { aspect-ratio: 21 / 8; min-height: 0; }
}

/* trick card spots around the centre, and the sweep to the trick winner */
#sp-trick .pos-south { left: calc(var(--card-w) * -0.5);  top: calc(var(--card-h) * -0.12); }
#sp-trick .pos-north { left: calc(var(--card-w) * -0.5);  top: calc(var(--card-h) * -0.88); }
#sp-trick .pos-west  { left: calc(var(--card-w) * -1.45); top: calc(var(--card-h) * -0.5); }
#sp-trick .pos-east  { left: calc(var(--card-w) * 0.45);  top: calc(var(--card-h) * -0.5); }
#sp-trick.sweep-south .sp-card { transform: translate(0, 160px) scale(0.5); opacity: 0; }
#sp-trick.sweep-north .sp-card { transform: translate(0, -160px) scale(0.5); opacity: 0; }
#sp-trick.sweep-west  .sp-card { transform: translate(-220px, 0) scale(0.5); opacity: 0; }
#sp-trick.sweep-east  .sp-card { transform: translate(220px, 0) scale(0.5); opacity: 0; }