/* ============================================================
   Solitario (templates/play_solitaire.html, static/js/solitaire.js)
   La mesa es la protagonista: marcador compacto arriba, cartas grandes.
   Las cartas son claras también en modo oscuro (se leen mejor).
   ============================================================ */
.play-solitaire { --sol-red: #C0342C; --sol-ink: #1D1B19; --sol-paper: #FFFDF8; --sol-back: #B8322B; --sol-back-2: #8F211C; }
:root[data-theme="dark"] .play-solitaire { --sol-paper: #F3EEE5; }

/* ---------- marcador ---------- */
.sol-hud { display: flex; gap: 18px; margin-left: auto; }
.sol-hud-i { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.sol-hud-i small { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sol-hud-i b { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.sol-toolbar .sol-auto { color: var(--success); }

/* ---------- mesa ---------- */
.sol-stage {
  position: relative; isolation: isolate; padding: clamp(8px, 1.4vw, 16px);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.sol-board { position: relative; width: 100%; min-height: 240px; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sol-slot {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * .09); border: 1.5px dashed var(--line-2);
  display: grid; place-items: center; color: var(--muted);
}
.sol-slot-f::after { content: attr(data-suit); font-size: calc(var(--cw) * .42); opacity: .35; }
.sol-slot-f[data-suit="♥"]::after, .sol-slot-f[data-suit="♦"]::after { color: var(--sol-red); }
.sol-slot-w { border-color: transparent; }
.sol-slot-stock { cursor: pointer; border-style: solid; }
.sol-slot-stock svg { width: 38%; height: 38%; opacity: 0; transition: opacity var(--dur); }
.sol-slot-stock.is-recycle svg { opacity: .8; }
.sol-slot-stock.is-empty { opacity: .5; cursor: default; }

/* ---------- cartas ---------- */
.sol-card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * .09); cursor: pointer; touch-action: none;
  transition: transform .2s cubic-bezier(.2, .8, .25, 1); will-change: transform;
}
.sol-card.up { cursor: grab; }
.sol-card.dragging { cursor: grabbing; }
.sol-face, .sol-back { position: absolute; inset: 0; border-radius: inherit; }
.sol-face {
  display: none; background: var(--sol-paper); color: var(--sol-ink);
  border: 1px solid rgba(40, 30, 20, .18); box-shadow: 0 1px 1.5px rgba(40, 30, 20, .16);
  font-family: var(--font-ui); overflow: hidden;
}
.sol-card.is-red .sol-face { color: var(--sol-red); }
.sol-card.up .sol-face { display: block; }
.sol-card.up .sol-back { display: none; }
/* esquina: valor y palo en una línea, visible aunque la columna se comprima */
.sol-corner {
  position: absolute; top: calc(var(--cw) * .045); left: calc(var(--cw) * .08); right: calc(var(--cw) * .08);
  display: flex; justify-content: space-between; align-items: baseline; line-height: 1;
}
.sol-corner b { font-size: calc(var(--cw) * .26); font-weight: 700; letter-spacing: -.03em; }
.sol-corner i { font-style: normal; font-size: calc(var(--cw) * .22); }
.sol-corner-b { top: auto; bottom: calc(var(--cw) * .045); transform: rotate(180deg); }
.sol-pip { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-42%); text-align: center; font-size: calc(var(--cw) * .5); line-height: 1; }
@media (max-width: 560px) { .sol-corner-b { display: none; } .sol-pip { font-size: calc(var(--cw) * .56); transform: translateY(-30%); } }
.sol-back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 3px, transparent 3px 7px),
    linear-gradient(145deg, var(--sol-back), var(--sol-back-2));
  border: calc(var(--cw) * .045) solid var(--sol-paper);
  box-shadow: 0 0 0 1px rgba(40, 30, 20, .2), 0 1px 2px rgba(40, 30, 20, .2);
}
/* barajas (static/js/solitaire-decks.js): la cara es un SVG 100×140 y el
   dorso una imagen SVG en --sol-back-img; sin ellas queda el dibujo de arriba */
.sol-art { display: block; width: 100%; height: 100%; }
.sol-board[data-deck] .sol-face { border-color: rgba(40, 30, 20, .22); }
.sol-board[data-deck] .sol-back { background: var(--sol-back-img) center / 100% 100% no-repeat; border: 0; }
.sol-board[data-deck] .sol-slot-f::after { content: none; }
.sol-slot-suit { display: contents; }
.sol-slot-suit svg { width: 42%; height: 42%; opacity: .32; }
@media (max-width: 560px) { .sol-art .sol-ib { display: none; } }
/* mesa oscura para las barajas que la piden (Astronómica) */
.sol-stage.deck-dark { background: var(--deck-bg); border-color: transparent; transition: background var(--dur); }
.sol-stage.deck-dark .sol-slot { border-color: var(--deck-line); color: var(--deck-muted); }
/* palos oscuros (♠ ♣) en huecos sobre mesa oscura: invertidos para que se vean */
:root[data-theme="dark"] .sol-slot-f:is([data-pile="f0"], [data-pile="f3"]) .sol-slot-suit svg,
.sol-stage.deck-dark .sol-slot-f:is([data-pile="f0"], [data-pile="f3"]) .sol-slot-suit svg { filter: invert(1) grayscale(1); opacity: .4; }
.sol-stage.deck-dark .sol-slot-suit svg { opacity: .55; }
.sol-card.dragging .sol-face, .sol-card.dragging .sol-back { box-shadow: 0 12px 26px rgba(20, 14, 10, .28); }

/* pista, destino válido al arrastrar */
.sol-card.hint .sol-face, .sol-card.hint .sol-back, .sol-slot.hint { box-shadow: 0 0 0 3px var(--sel), 0 0 0 7px var(--sel-weak); animation: sol-pulse 1.1s ease-in-out infinite; }
.sol-card.drop-ok .sol-face, .sol-slot.drop-ok { box-shadow: 0 0 0 3px var(--success), 0 0 0 6px var(--success-weak); }
@keyframes sol-pulse { 50% { box-shadow: 0 0 0 3px var(--sel), 0 0 0 10px transparent; } }

/* animaciones cortas: voltear, rechazo, celebración */
.sol-card.flip .sol-face { animation: sol-flip .22s ease-out; }
@keyframes sol-flip { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.sol-card.shake .sol-face, .sol-card.shake .sol-back { animation: sol-shake .28s ease; }
@keyframes sol-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sol-card.cheer .sol-face { animation: sol-cheer .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sol-cheer { 40% { transform: translateY(-18%) rotate(-4deg); } }

/* cuenta regresiva de la carrera */
.sol-count {
  position: absolute; inset: 0; z-index: 2000; display: grid; place-items: center; pointer-events: none;
  font: 600 clamp(72px, 16vw, 150px)/1 var(--font-display); color: var(--ink);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-radius: var(--r-lg);
}
.sol-count.pop { animation: sol-pop .9s ease-out; }
@keyframes sol-pop { 0% { transform: scale(1.35); opacity: 0; } 25% { transform: scale(1); opacity: 1; } }

/* ---------- carrera: progreso de cada jugador ---------- */
.sol-race { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sol-race-row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 3.8rem; align-items: center; gap: 12px; font-size: var(--t-sm); }
.sol-race-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.sol-race-bar { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.sol-race-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ink-2); transition: width .5s var(--ease); }
.sol-race-row.is-you .sol-race-name { color: var(--ink); font-weight: 600; }
.sol-race-row.is-you .sol-race-bar span { background: var(--sel); }
.sol-race-row.is-left { opacity: .5; }
.sol-race-pct { text-align: right; color: var(--muted); }
@media (max-width: 560px) { .sol-race-row { grid-template-columns: minmax(0, 6.5rem) 1fr 3.2rem; gap: 8px; } }

/* ---------- final ---------- */
.sol-win-card .win-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-win-actions { flex-direction: column; }
.sol-again { min-height: 54px; font-size: 1.05rem; }
.sol-rank { list-style: decimal; margin: 8px 0 0; padding-left: 1.4em; text-align: left; font-size: var(--t-sm); color: var(--ink-2); }
.sol-rank li { padding: 4px 0; }
.sol-rank li.is-you { color: var(--ink); font-weight: 600; }
.sol-stats-h { margin: 14px 0 6px; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sol-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sol-stats-note { margin: 12px 0 0; font-size: var(--t-sm); }
.sol-panel { max-width: 520px; width: 100%; margin: 12px auto; }

/* ---------- móvil: marcador compacto, mesa a todo el ancho ---------- */
@media (max-width: 720px) {
  .play-solitaire .play-topbar { gap: 8px; }
  .sol-hud { gap: 12px; }
  .sol-hud-i b { font-size: .98rem; }
  .sol-hud-i small { font-size: .6rem; }
  .sol-stage { padding: 6px; margin: 0 -6px; border-radius: var(--r-md); }
  .play-solitaire .play-report { display: none; }
}
@media (max-width: 380px) { .play-solitaire .play-title { font-size: 1.05rem; } .sol-hud { gap: 9px; } }
@media (prefers-reduced-motion: reduce) {
  .sol-card { transition: none; }
  .sol-card.hint .sol-face, .sol-card.hint .sol-back, .sol-slot.hint { animation: none; }
}

/* ---------- portada del juego (templates/solitaire_hub.html) ---------- */
.sol-start fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sol-start legend { margin-bottom: 6px; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sol-start .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.sol-start .seg label { flex: 1 1 auto; }
.sol-start .seg input { position: absolute; opacity: 0; pointer-events: none; }
.sol-start .seg span, .sol-tabs button {
  display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); font: inherit; font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-2); background: var(--surface); cursor: pointer; transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.sol-start .seg input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.sol-start .seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.sol-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px !important; padding: 4px; border-radius: var(--r-pill); background: var(--surface-2); }
.sol-tabs button { border-color: transparent; background: transparent; min-height: 42px; font-size: .95rem; }
.sol-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.sol-tab { display: flex; flex-direction: column; gap: var(--s-3); }
.sol-tab[hidden] { display: none; }
.sol-tab-lede { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.sol-multi { display: flex; flex-direction: column; gap: 10px; }
.sol-opts { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-2); }
.sol-opts select { margin-left: 4px; height: 34px; padding: 0 8px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.sol-online { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.sol-legend { margin: 0 0 2px; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sol-online .arena-input { margin: 0 0 6px; height: 42px; }
.sol-online-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sol-online-row > .btn { flex: 1 1 auto; }
.sol-join-form { display: flex; gap: 6px; flex: 1 1 12rem; }
.sol-code-in { margin: 0 !important; text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-num); }
.sol-online-note { margin: 2px 0 0; font-size: var(--t-xs); }
.sol-hub-stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 0; font-size: var(--t-sm); color: var(--muted); }
.sol-hub-stats b { color: var(--ink); font-size: 1.05rem; }

/* progresión sin presión: aviso suave de pista, datos breves, más opciones */
.sol-toolbar .tool-btn.nudge { color: var(--sel-ink); background: var(--sel-weak); box-shadow: 0 0 0 2px var(--sel-weak); animation: sol-nudge 1.8s ease-in-out 3; }
@keyframes sol-nudge { 50% { box-shadow: 0 0 0 6px transparent; } }
.sol-more-ways { margin: 12px 0 0; font-size: var(--t-sm); color: var(--muted); }
.sol-more-ways a { color: var(--ink-2); }
.sol-stats-up { margin: 0 0 8px; font-weight: 600; color: var(--success); }
.sol-stats-more { margin: 12px 0 0; font-size: var(--t-sm); }
@media (prefers-reduced-motion: reduce) { .sol-toolbar .tool-btn.nudge { animation: none; } }
.sol-auto-note { margin: 0; font-size: var(--t-xs); color: var(--muted); }
.linklike { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--sel-ink); text-decoration: underline; cursor: pointer; }

/* ---------- selector de baraja ---------- */
.deck-card { max-width: 640px; width: 100%; }
.deck-current { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 14px; }
.deck-preview { display: flex; justify-content: center; gap: 6px; width: 100%; }
.deck-pv-card { flex: 0 1 74px; aspect-ratio: 100 / 140; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px rgba(40, 30, 20, .18), 0 2px 6px rgba(40, 30, 20, .12); }
.deck-pv-card .sol-art { width: 100%; height: 100%; }
.deck-pv-back { background: center / 100% 100% no-repeat; }
.deck-current-txt { margin: 0; min-height: 2.6em; text-align: center; font-size: var(--t-sm); color: var(--ink-2); }
.deck-current-txt b { color: var(--ink); }
.deck-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: min(46vh, 420px); overflow-y: auto; padding: 4px; margin: 0 -4px; }
.deck-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: var(--t-xs); cursor: pointer; transition: border-color var(--dur), background var(--dur);
}
.deck-opt:hover { border-color: var(--line-2); background: var(--surface-2); }
.deck-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); color: var(--ink); font-weight: 600; }
.deck-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.deck-opt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.deck-thumb { position: relative; width: 64px; height: 70px; }
.deck-mini { position: absolute; top: 0; width: 46px; height: 64px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(40, 30, 20, .18), 0 1px 3px rgba(40, 30, 20, .14); }
.deck-mini-back { left: 0; transform: rotate(-7deg); transform-origin: bottom center; background: center / 100% 100% no-repeat; }
.deck-mini-face { left: 16px; top: 4px; transform: rotate(5deg); transform-origin: bottom center; transition: transform .25s var(--ease); }
.deck-opt:hover .deck-mini-face { transform: rotate(8deg) translateY(-2px); }
.deck-note { margin: 12px 0 0; font-size: var(--t-xs); text-align: center; }
@media (max-width: 560px) {
  .deck-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 42vh; }
  .deck-pv-card { flex-basis: 52px; }
  .deck-thumb { width: 54px; height: 60px; }
  .deck-mini { width: 40px; height: 56px; }
  .deck-mini-face { left: 13px; }
  .deck-opt-name { font-size: .7rem; letter-spacing: -.01em; }
}
@media (prefers-reduced-motion: reduce) { .deck-mini-face { transition: none; } }