:root {
  --bg: #071b13;
  --bg-2: #0d2a1f;
  --panel: rgba(16, 49, 36, 0.88);
  --panel-2: rgba(20, 59, 43, 0.95);
  --border: rgba(212, 175, 55, 0.28);
  --gold: #d8b248;
  --gold-soft: #f0d989;
  --text: #f5f2e9;
  --muted: #b8c7bf;
  --white-panel: #e8e6d8;
  --black-suit: #121212;
  --red-suit: #c8372d;
  --blue: #2f6fec;
  --green: #1d8f5a;
  --red: #b33a3a;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --line: rgba(212, 175, 55, 0.28);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top center, rgba(216,178,72,0.10), transparent 28%),
    linear-gradient(180deg, #082217 0%, #061710 100%);
  color: var(--text);
  min-height: 100vh;
}

.app-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px;
}

/* Auth overlay */
.auth-overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.85); z-index:9999;
  display: flex; align-items: center; justify-content: center;
}
.auth-overlay.hidden { display: none; }
.auth-box {
  background: var(--panel-2); border:1px solid var(--border);
  border-radius: var(--radius-xl); padding:40px; text-align:center;
  max-width:400px; width:90%;
}
.auth-box h2 { color: var(--gold); margin-bottom:12px; }
.auth-box p { color: var(--muted); margin-bottom:20px; }
.auth-box input {
  width:100%; padding:14px; border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,0.95); color:#111; font-size:1.1rem;
  margin-bottom:16px; outline:none;
}
.auth-error { color: var(--red); font-size:0.9rem; }
.hidden { display: none !important; }

/* Topbar */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(5,28,20,0.95), rgba(9,39,28,0.92));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}
.brand { display:flex; flex-direction:column; gap:6px; }
.brand-top {
  display:flex; align-items:center; gap:12px;
  font-size:1.1rem; color:var(--gold); font-weight:700; letter-spacing:0.02em;
}
.brand-title {
  font-size: clamp(2rem, 3.1vw, 3.4rem);
  font-weight:800; line-height:1; letter-spacing:-0.03em; color:var(--gold);
}
.brand-subtitle { color:var(--muted); font-size:1rem; margin-top:4px; }

.module-picker { min-width:260px; display:flex; flex-direction:column; gap:8px; }
.module-picker label { font-size:0.95rem; color:var(--muted); }
.module-picker select {
  width:100%; background:rgba(255,255,255,0.96); color:#111; border:none;
  border-radius:16px; padding:16px 18px; font-size:1.35rem; font-weight:700;
  outline:none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.interv-toggle {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:1rem; color:var(--gold); font-weight:600; margin-top:4px;
}
.interv-toggle input[type="checkbox"] {
  width:20px; height:20px; accent-color:var(--gold); cursor:pointer;
}

/* Layout */
.layout {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 22px;
  align-items: start;
}

.panel {
  background: linear-gradient(180deg, rgba(7,38,27,0.94), rgba(8,32,24,0.96));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-inner { padding: 28px; }

.section-title {
  font-size:1.05rem; color:var(--gold-soft); text-transform:uppercase;
  letter-spacing:0.12em; margin-bottom:12px; font-weight:700;
}

.hero-question {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height:1; letter-spacing:-0.04em; font-weight:800; margin:0 0 18px;
}

/* Bidding panel (auction table) */
.bidding-panel {
  background: var(--white-panel);
  color: #111;
  border-radius: 20px;
  padding: 22px 24px;
  margin-bottom: 22px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.auction-table {
  width:100%; border-collapse:collapse; color:#000; font-weight:600; font-size:1rem;
}
.auction-table th {
  padding:8px 12px; text-align:center; font-size:1rem; font-weight:800;
  color:#1d1d1d; border-bottom:2px solid #ddd;
}
.auction-table td {
  padding:8px 12px; text-align:center; border-bottom:1px solid #eee;
  min-height:40px; font-size:1.2rem; font-weight:700;
}
.auction-table tr:last-child td { border-bottom:none; }
.bid-ns { color:#000; }
.bid-eo { color:#888; }

.turn-dot {
  display:inline-block; width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #7ff0b2, #19a35d);
  box-shadow: 0 0 14px rgba(42,212,120,0.8);
  vertical-align:middle; margin-left:4px;
}

/* Meta pills */
.meta-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:22px; }
.pill {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:999px;
  border:1px solid rgba(216,178,72,0.4);
  background:rgba(255,255,255,0.03);
  color:var(--gold-soft); font-weight:700; font-size:1rem;
}

/* Hand card */
.hand-card {
  background: linear-gradient(180deg, rgba(232,230,216,0.95), rgba(224,222,208,0.95));
  border-radius: 24px; padding:24px; color:#121212;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.hand-grid { display:grid; gap:14px; }
.suit-row {
  display:grid; grid-template-columns:56px 1fr; align-items:center; gap:12px;
  min-height:58px; border-radius:16px;
  background:rgba(245,243,230,0.72); padding:0 16px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.suit-symbol { font-size:1.9rem; text-align:center; font-weight:800; }
.spade, .club, .spades, .clubs { color: var(--black-suit); }
.heart, .diamond, .hearts, .diamonds { color: var(--red-suit); }
.cards {
  font-size:1.85rem; font-weight:800; letter-spacing:0.18em;
  white-space:nowrap; overflow-x:auto; scrollbar-width:thin;
}

/* Four hands grid (end of auction) */
.four-hands-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:16px;
}
.four-hand {
  background: linear-gradient(180deg, rgba(232,230,216,0.96), rgba(224,222,208,0.96));
  border-radius:18px; padding:18px; color:#121212;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.four-hand h4 {
  margin:0 0 10px; font-size:1rem; font-weight:800;
  display:flex; align-items:center; justify-content:space-between;
}
.four-hand h4 .hand-name { color:#1a1a1a; }
.four-hand h4 .hand-name.ns { color: var(--green); }
.four-hand h4 .hand-name.eo { color: #888; }
.four-hand h4 .hand-hcp {
  font-size:0.85rem; font-weight:700; color:#fff;
  background: var(--green); border-radius:8px; padding:3px 10px;
}
.four-hand .suit {
  display:flex; align-items:center; gap:8px;
  margin-bottom:3px; font-size:1.1rem; font-weight:700;
}
.four-hand .suit-icon { font-size:1.2rem; width:22px; text-align:center; }
.four-hand .suit-cards { letter-spacing:0.1em; }

/* Right panel */
.right-panel-top { display:flex; flex-direction:column; gap:16px; margin-bottom:18px; }

/* Options grid (bid buttons) */
.options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.bid-btn {
  appearance:none; border:none; cursor:pointer;
  border-radius:18px; min-height:72px;
  font-size:1.6rem; font-weight:800; color:#101010;
  background: linear-gradient(180deg, #e8e6d8, #dbd8c8);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.08);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.bid-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(0,0,0,0.08);
}
.bid-btn:disabled { opacity:0.5; cursor:default; transform:none; }
.bid-btn.bid-btn-open {
  background: linear-gradient(180deg, #c8cfc8, #b8bfb8);
  opacity: 0.55;
  border: 2px dashed rgba(0,0,0,0.25);
  min-height: 60px;
  font-size: 1.3rem;
}

/* Action buttons */
.action-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.action-btn {
  border:none; border-radius:16px; padding:14px 22px;
  font-size:1rem; font-weight:800; cursor:pointer; color:white;
  transition: transform 0.14s ease, opacity 0.14s ease;
}
.action-btn:hover { transform:translateY(-1px); opacity:0.95; }
.action-primary { background: linear-gradient(180deg, #2f7fe8, #1e5fc0); }
.action-secondary { background: linear-gradient(180deg, #476133, #374c27); color:#f4efd8; }

/* Result box */
.result {
  border-radius:var(--radius-lg); padding:20px; margin-bottom:18px;
  color: var(--text);
}
.result.correct-result { border:2px solid var(--green); background:rgba(29,143,90,0.15); }
.result.incorrect-result { border:2px solid var(--red); background:rgba(179,58,58,0.15); }
.result-text { font-size:1.2rem; font-weight:800; margin-bottom:12px; }
/* Suit colors: adapt to dark/light background */
.suit-black { color: #121212; }
.suit-red { color: #c8372d; }
/* On dark backgrounds (result box, coach note, auction table header) */
.result .suit-black, .coach-note .suit-black { color: #ddd; }
.result .suit-red, .coach-note .suit-red { color: #ff6b6b; }

/* Coach note (explanations) */
.coach-note {
  background:rgba(216,178,72,0.08); color:#f8f1d4;
  border:1px solid rgba(216,178,72,0.18);
  border-radius:16px; padding:16px; line-height:1.5; font-size:0.98rem;
  margin-top:12px;
}

/* Live analysis / stats */
.live-analysis {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  border:1px solid rgba(216,178,72,0.15);
  border-radius:22px; padding:20px; margin-top:18px;
}
.analysis-title {
  font-size:1rem; font-weight:800; color:var(--gold-soft);
  margin-bottom:14px; text-transform:uppercase; letter-spacing:0.12em;
}
.stats-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.stat-box {
  background:rgba(0,0,0,0.18); border-radius:16px; padding:14px;
  border:1px solid rgba(255,255,255,0.05);
}
.stat-label { color:var(--muted); font-size:0.88rem; margin-bottom:8px; }
.stat-value { font-size:1.35rem; font-weight:800; color:var(--text); }

/* Feedback */
.feedback-row { display:flex; flex-direction:column; gap:12px; }
.feedback-input {
  width:100%; padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,0.95); color:#111; font-size:1rem; outline:none;
}
.feedback-textarea {
  width:100%; min-height:80px; padding:12px 16px; border-radius:12px;
  border:1px solid var(--border); background:rgba(255,255,255,0.95);
  color:#111; font-size:1rem; outline:none; resize:vertical;
}

/* Consulta */
.consulta-resultado, #consultaResultado {
  margin-top:16px; background:#f5f0e1; border-radius:16px; padding:16px;
}
.consulta-resultado table, #consultaResultado table { width:100%; border-collapse:collapse; }
.consulta-resultado th, #consultaResultado th {
  text-align:left; padding:8px; color:#1a1a1a; font-weight:800; border-bottom:2px solid rgba(0,0,0,0.2);
}
.consulta-resultado td, #consultaResultado td {
  padding:8px; color:#1a1a1a; border-bottom:1px solid rgba(0,0,0,0.15);
}
.consulta-resultado .suit-black, #consultaResultado .suit-black { color: #1a1a1a; }
.consulta-resultado .suit-red, #consultaResultado .suit-red { color: #cc0000; }
.consulta-note {
  background: #fff3cd; border-left: 4px solid #e6a817; border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px; color: #6b4c00; font-size: 0.92em;
}

/* ── Tabla Doble Muerto (DDS) ─────────────────────────────────────────── */
#ddsTableBox {
  margin-top: 18px;
}
.dds-loading {
  color: var(--muted); font-size: 0.9rem; padding: 12px 0;
  text-align: center; font-style: italic;
}
.dds-error {
  color: #c07070; font-size: 0.88rem; padding: 10px;
  background: rgba(180,60,60,0.12); border-radius: 10px; text-align: center;
}
.dds-table {
  width: 100%; border-collapse: collapse; margin-top: 8px;
  background: rgba(16, 49, 36, 0.55);
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
}
.dds-table th {
  padding: 7px 10px; text-align: center;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em;
  color: var(--gold); border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.25);
}
.dds-table td {
  padding: 7px 10px; text-align: center;
  font-size: 1rem; font-weight: 700; color: var(--text);
  border-bottom: 1px solid rgba(212,175,55,0.1);
}
.dds-table tr:last-child td { border-bottom: none; }
.dds-suit {
  font-size: 1.1rem; font-weight: 900; width: 36px;
  color: var(--gold-soft);
}
.dds-suit.suit-black { color: #c8d8d0; }
.dds-suit.suit-red   { color: #ff8080; }
.dds-cell-ns {
  background: rgba(29, 143, 90, 0.18);
  color: #7fddaa;
}
.dds-cell-eo {
  background: rgba(255,255,255,0.04);
  color: #c8c0b0;
}
.dds-cell-highlight {
  background: rgba(216, 178, 72, 0.28) !important;
  color: var(--gold-soft) !important;
  font-size: 1.1rem;
  border-radius: 6px;
}

/* Tooltip de subasta */
.bid-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: rgba(8, 24, 16, 0.97);
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 7px 14px;
  color: var(--text);
  font-size: 0.88rem;
  max-width: 300px;
  line-height: 1.55;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.bid-tooltip .tip-call {
  font-weight: 800;
  color: var(--gold-soft);
  margin-right: 6px;
}
/* Palos visibles sobre fondo oscuro del tooltip */
.bid-tooltip .suit-black { color: #e8e6d8; }
.bid-tooltip .suit-red   { color: #ff7b7b; }
td.has-tip { cursor: help; }
td.has-tip:hover { background: rgba(216,178,72,0.15) !important; }

/* Show/hide answer buttons */
.reveal-btn {
  appearance:none; border:none; cursor:pointer;
  background: rgba(216,178,72,0.15); color:var(--gold-soft);
  border-radius:12px; padding:10px 18px; font-weight:700; font-size:0.95rem;
  border: 1px solid rgba(216,178,72,0.3);
  transition: background 0.14s ease;
}
.reveal-btn:hover { background: rgba(216,178,72,0.25); }

/* Responsive */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .topbar { flex-direction:column; align-items:stretch; }
  .options-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: 1fr; }
  .four-hands-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .app-shell { padding:14px; }
  .panel-inner { padding:18px; }
  .cards { font-size:1.3rem; }
  .options-grid { grid-template-columns: 1fr; }
  .hero-question { font-size:2rem; }
}

/* ========== SPLASH SCREEN ========== */
.splash-screen {
  position: fixed; inset: 0; z-index: 9999;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(54,208,196,0.22), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(91,123,255,0.28), transparent 32%),
    radial-gradient(circle at 50% 85%, rgba(141,82,255,0.18), transparent 30%),
    linear-gradient(135deg, #07111f 0%, #0a1628 45%, #111c34 100%);
  color: #f5f7fb; overflow: hidden;
}
.splash-shell {
  width: min(1180px, 94vw); min-height: 680px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,17,30,0.62);
  backdrop-filter: blur(22px);
  border-radius: 34px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
}
.splash-grid-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black 35%, transparent 90%);
  pointer-events: none;
}
.splash-left, .splash-right { position: relative; z-index: 1; padding: 38px; }
.splash-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 44px; }
.splash-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.splash-logo { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(62,207,190,0.95), rgba(91,123,255,0.95)); box-shadow: 0 10px 25px rgba(62,207,190,0.25); font-size: 20px; }
.splash-badge { padding: 10px 16px; border-radius: 999px; font-size: 13px; color: #dfe8ff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
.splash-hero { max-width: 590px; margin-top: 20px; }
.splash-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; margin-bottom: 22px; background: rgba(62,207,190,0.10); border: 1px solid rgba(62,207,190,0.25); color: #a7fff3; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; }
.splash-dot { width: 8px; height: 8px; border-radius: 999px; background: #3ecfbe; box-shadow: 0 0 12px #3ecfbe; }
.splash-title { font-size: clamp(2.8rem, 5vw, 5rem); line-height: 0.96; letter-spacing: -0.05em; margin-bottom: 18px; }
.splash-accent { background: linear-gradient(135deg, #ffffff 10%, #96f9ed 48%, #95a9ff 92%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.splash-sub { font-size: 1.07rem; line-height: 1.7; color: rgba(231,238,255,0.78); max-width: 540px; margin-bottom: 30px; }
.splash-login { margin-bottom: 20px; }
.splash-input { padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #f8fbff; font-size: 1rem; width: 260px; outline: none; transition: border-color .2s; }
.splash-input:focus { border-color: #3ecfbe; }
.splash-input::placeholder { color: rgba(255,255,255,0.4); }
.splash-login-error { color: #ff6b81; font-size: 0.85rem; margin-top: 6px; }
.splash-cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }
.splash-btn { padding: 15px 22px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.12); text-decoration: none; color: #f8fbff; font-weight: 600; transition: transform .18s ease, box-shadow .18s ease; cursor: pointer; }
.splash-btn:hover { transform: translateY(-2px); }
.splash-primary { background: linear-gradient(135deg, #3ecfbe, #5b7bff); box-shadow: 0 14px 30px rgba(91,123,255,0.28); border: none; }
.splash-secondary { background: rgba(255,255,255,0.06); }
.splash-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; max-width: 720px; }
.splash-stat { padding: 18px 18px 16px; border-radius: 22px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.09); }
.splash-value { font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; }
.splash-label { font-size: 0.92rem; color: rgba(224,231,250,0.7); }
.splash-right { display: flex; align-items: center; justify-content: center; }
.splash-panel { width: 100%; max-width: 430px; border-radius: 30px; padding: 22px; background: linear-gradient(180deg, rgba(16,24,40,0.88), rgba(10,18,32,0.78)); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 24px 50px rgba(0,0,0,0.35); position: relative; overflow: hidden; }
.splash-panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.splash-panel-title { font-size: 0.98rem; color: rgba(229,236,255,0.9); font-weight: 700; }
.splash-progress-chip { font-size: 0.8rem; color: #9ff8ee; padding: 8px 12px; border-radius: 999px; background: rgba(62,207,190,0.10); border: 1px solid rgba(62,207,190,0.22); }
.splash-sequence-card { padding: 18px; border-radius: 24px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 16px; }
.splash-mini-label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(201,212,235,0.58); margin-bottom: 10px; }
.splash-sequence { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.splash-hand { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; font-size: 0.95rem; color: rgba(229,236,255,0.86); }
.splash-decision { padding: 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(62,207,190,0.12), rgba(91,123,255,0.12)); border: 1px solid rgba(123,190,255,0.16); margin-bottom: 16px; }
.splash-decision strong { display: block; font-size: 1.1rem; margin-bottom: 8px; }
.splash-options { display: grid; gap: 10px; }
.splash-option { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); color: #edf3ff; font-weight: 600; }
.splash-correct { background: rgba(62,207,190,0.12); border-color: rgba(62,207,190,0.28); }
.splash-tag { font-size: 0.78rem; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(240,245,255,0.74); }
.splash-floating-cards { position: absolute; right: 28px; top: 26px; display: flex; gap: 8px; opacity: 0.25; }
.splash-floating-cards span { width: 34px; height: 46px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); display: grid; place-items: center; font-size: 0.9rem; }
@media (max-width: 980px) { .splash-shell { grid-template-columns: 1fr; } .splash-right { padding-top: 0; } .splash-stats { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .splash-left, .splash-right { padding: 24px; } .splash-topbar { margin-bottom: 28px; } .splash-panel { max-width: 100%; } .splash-sequence { font-size: 1.55rem; } .splash-cta-row { flex-direction: column; } .splash-btn { text-align: center; } }

/* ── Móvil: login accesible ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .splash-screen { overflow-y: auto; align-items: flex-start; }
  .splash-shell { min-height: unset; width: 100%; border-radius: 0; border: none; margin: 0; }
  .splash-right { display: none; }
  .splash-eyebrow { display: none; }
  .splash-title { font-size: 2rem; margin-bottom: 10px; }
  .splash-sub { font-size: 0.92rem; margin-bottom: 16px; }
  .splash-topbar { margin-bottom: 16px; }
  .splash-badge { display: none; }
  .splash-input { width: 100%; box-sizing: border-box; }
  .splash-login { margin-bottom: 14px; }
  .splash-stats { display: none; }
}

/* Back to splash button */
.back-to-splash-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--gold, #d4a843);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-left: 12px;
}
.back-to-splash-btn:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}


/* ── MÓDULO DE CARTEO ─────────────────────────────────────────────── */
#cardplayBox { margin-top: 16px; }

.cp-header {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.05); border-radius: 8px;
  padding: 8px 14px; margin-bottom: 12px; font-size: 0.95rem;
}
.cp-contract { color: var(--gold-soft); font-weight: 600; }
.cp-score { color: var(--muted); }

.cp-arena {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cp-center {
  display: flex; align-items: center; gap: 8px; width: 100%;
  justify-content: center;
}

/* Manos */
.cp-hand {
  background: rgba(255,255,255,0.04); border-radius: 8px;
  padding: 8px 12px; min-width: 160px; font-size: 0.88rem;
}
.cp-hand.cp-active-hand {
  border: 1px solid var(--gold-soft);
  background: rgba(212,175,55,0.07);
}
.cp-hand-label {
  font-size: 0.78rem; color: var(--muted); margin-bottom: 4px; font-weight: 600;
}
.cp-suit-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0; align-items: center; }
.cp-suit-sym { font-size: 1rem; width: 18px; }
.cp-red  { color: #e05252; }
.cp-black{ color: #e0e0e0; }

.cp-card {
  padding: 2px 5px; border-radius: 4px; cursor: default;
  font-weight: 500; font-size: 0.9rem; color: #ccc;
  transition: background 0.15s, transform 0.1s;
}
.cp-can-play {
  cursor: pointer; background: rgba(212,175,55,0.18);
  color: #ffe; border: 1px solid rgba(212,175,55,0.4);
}
.cp-can-play:hover {
  background: rgba(212,175,55,0.35); transform: translateY(-2px);
}

/* Baza actual */
.cp-trick {
  display: grid;
  grid-template-areas: ". n ." "w c e" ". s .";
  grid-template-columns: 1fr 60px 1fr;
  grid-template-rows: auto auto auto;
  gap: 4px; padding: 8px;
  background: rgba(0,0,0,0.2); border-radius: 8px;
  min-width: 180px;
}
.cp-slot-n { grid-area: n; }
.cp-slot-e { grid-area: e; }
.cp-slot-s { grid-area: s; }
.cp-slot-w { grid-area: w; }
.cp-trick-slot { display: flex; flex-direction: column; align-items: center; }
.cp-slot-label { font-size: 0.7rem; color: var(--muted); }
.cp-played-card {
  font-size: 1.1rem; font-weight: 700; padding: 4px 8px;
  background: rgba(255,255,255,0.08); border-radius: 6px;
  min-width: 36px; text-align: center;
}
.cp-empty { color: rgba(255,255,255,0.2); }

.cp-last-trick {
  font-size: 0.8rem; color: var(--muted); margin-top: 6px; text-align: center;
}
.cp-turn-msg {
  text-align: center; font-size: 0.9rem; padding: 6px 0; color: var(--gold-soft);
}
.cp-hand-n, .cp-hand-s { align-self: center; }
.cp-hand-e, .cp-hand-w { min-width: 130px; }