/* Estética: tapete de mus (fieltro verde) con naipes y piedras encima.
   La versión completa (palos en todas las secciones, textura de papel, animación de reparto) llega en la Fase 4. */

:root {
  --felt: #1e5c3c;
  --felt-light: #2b7a50;
  --felt-dark: #123d27;
  --on-felt: #f3ead6;
  --on-felt-soft: #bcd3c2;
  --carton: #f1e6cc;
  --carton-2: #fbf6e9;
  --ink: #1d1a17;
  --ink-soft: #5b5246;
  --carmin: #a3192b;
  --marino: #1f2e5a;
  --ocre: #c39432;
  --radius: 14px;
  --font-title: 'IM Fell English SC', Georgia, serif;
  --font-num: 'Playfair Display', Georgia, serif;
  --font-body: 'Alegreya', Georgia, serif;
  --team-0: var(--carmin);
  --team-1: var(--marino);
  --muted: var(--on-felt-soft);
  /* Textura de papel: ruido cálido casi invisible sobre el crema de las cartas */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body {
  background: var(--felt);
  color: var(--on-felt);
  font: 17px/1.4 var(--font-body);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* sin zoom por doble toque */
  overscroll-behavior-y: none;
}
/* Fieltro: degradado + ruido muy sutil. En una capa fija para que no "salte" al hacer scroll. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 120% 90% at 50% 35%, var(--felt-light) 0%, var(--felt) 55%, var(--felt-dark) 100%);
}

h1, h2, h3, h4 { margin: 0; font-weight: normal; }
.title { font: 2.8rem/1 var(--font-title); color: var(--on-felt); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.kicker { font: .8rem var(--font-title); letter-spacing: .08em; color: var(--muted); }

/* --- Carta (bloque de contenido) --- */
.card {
  --muted: var(--ink-soft);
  position: relative;
  color: var(--ink);
  background: var(--paper), linear-gradient(160deg, var(--carton-2), var(--carton));
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 4px var(--carton-2), inset 0 0 0 5px var(--ink-soft), 0 6px 14px rgba(0, 0, 0, .3);
  padding: 18px 16px;
}
.card-title { font: 1.3rem var(--font-title); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.title-suit { font-size: 1.1rem; display: inline-flex; }

/* «Pintas»: cortes en el doble marco que indican el palo, como en los naipes.
   Oros sin corte, copas 1, espadas 2, bastos 3. El hueco se pinta del color del margen interior. */
.card[data-suit]::before, .card[data-suit]::after {
  content: ''; position: absolute; left: 50%; width: 10px; height: 3px; margin-left: -5px;
  background: var(--carton-2); pointer-events: none;
}
.card[data-suit]::before { top: 3px; }
.card[data-suit]::after { bottom: 3px; }
.card[data-suit="oros"]::before, .card[data-suit="oros"]::after { display: none; }
.card[data-suit="espadas"]::before, .card[data-suit="espadas"]::after { margin-left: -17px; box-shadow: 24px 0 var(--carton-2); }
.card[data-suit="bastos"]::before, .card[data-suit="bastos"]::after { box-shadow: -22px 0 var(--carton-2), 22px 0 var(--carton-2); }
.corner { position: absolute; font: 900 1.1rem/1 var(--font-num); font-variant-numeric: lining-nums; }
.corner.tl { top: 10px; left: 12px; }
.corner.br { bottom: 10px; right: 12px; transform: rotate(180deg); }
.team-0 { --team: var(--team-0); }
.team-1 { --team: var(--team-1); }
.team-letter { font: 900 1.2rem var(--font-num); color: var(--team); }
.suit { width: 1em; height: 1em; display: block; }

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px; padding: 0 16px;
  font: 700 1.05rem var(--font-body); color: var(--ink); text-decoration: none;
  background: var(--carton-2);
  border: 1.5px solid var(--ink); border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer; user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary { background: var(--carmin); color: #fff8ec; }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  font-size: 1.6rem; color: inherit; text-decoration: none;
  background: none; border: 0; cursor: pointer;
}

/* --- Páginas --- */
.page { max-width: 560px; margin: 0 auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 16px; }
.stack { display: grid; gap: 12px; }
.topbar {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; text-align: center;
  padding-top: env(safe-area-inset-top); min-height: 52px;
}
.topbar h1 { font: 1.4rem var(--font-title); }
.hero { text-align: center; padding: 56px 0 12px; display: grid; justify-items: center; gap: 8px; }
.hero-suits { display: flex; gap: 10px; font-size: 1.4rem; color: var(--ocre); }
.card-link { display: grid; gap: 6px; color: var(--ink); text-decoration: none; text-align: center; }
.resume-score { font: 900 2.6rem/1 var(--font-num); font-variant-numeric: lining-nums; }

/* --- Formulario --- */
.field-title { font: 700 .95rem var(--font-body); margin: 14px 0 6px; display: flex; align-items: center; gap: 6px; }
.text-input {
  width: 100%; min-height: 48px; padding: 0 12px; font: 1.05rem var(--font-body); color: var(--ink);
  background: #fffdf7; border: 1.5px solid var(--ink-soft); border-radius: 10px;
}
select.text-input {
  appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 18px center, right 12px center; background-size: 6px 6px; background-repeat: no-repeat;
}
.pair-pick + .pair-pick { margin-top: 4px; }
.pair-pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-player { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 16px; }
.notice { background: #f6e3b4; color: var(--ink); border: 1px solid var(--ocre); border-radius: 10px; padding: 8px 12px; margin: 8px 0 0; }
.form-error { color: var(--carmin); font-weight: 700; margin: 6px 0 0; }
.page > .form-error { color: #ffd6cf; }
.saved-ok { display: flex; justify-content: center; align-items: center; gap: 8px; font: 700 1.1rem var(--font-body); color: var(--on-felt); margin: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; flex: 1 0 auto; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg label span, .seg-buttons button {
  display: grid; place-items: center; min-height: 48px; padding: 0 12px; width: 100%;
  font: 700 1rem var(--font-body); color: var(--ink);
  background: #fffdf7; border: 1.5px solid var(--ink-soft); border-radius: 10px; cursor: pointer;
}
.seg input:checked + span, .seg-buttons button[aria-pressed="true"] { background: var(--ink); color: var(--carton-2); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--ocre); }
.seg-buttons button { flex: 1 0 auto; width: auto; }

/* --- Mesa (contador) --- */
.mesa {
  min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
  max-width: 640px; margin: 0 auto; padding: 0 12px;
}
.topbar-mid { display: grid; }
.games-score { font: 900 1.6rem/1.1 var(--font-num); font-variant-numeric: lining-nums; }

.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; padding-top: 6px; }
.pair { display: grid; justify-items: center; align-content: start; gap: 12px; }

/* El naipe: todo él es el botón de +1 */
.naipe {
  position: relative; width: 100%; aspect-ratio: 5 / 8; max-height: 50dvh;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center;
  padding: 30px 8px 26px;
  font: inherit; color: var(--ink); text-align: center;
  background: var(--paper), linear-gradient(160deg, var(--carton-2), var(--carton));
  border: 1.5px solid var(--ink); border-radius: 12px;
  box-shadow: inset 0 0 0 5px var(--carton-2), inset 0 0 0 6.5px var(--team), 0 8px 16px rgba(0, 0, 0, .4), 0 1px 0 rgba(0, 0, 0, .5);
  cursor: pointer; user-select: none; transition: transform .08s ease-out;
}
.naipe:active { transform: scale(.97) rotate(-.6deg); }
.naipe:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; }
.pinta { position: absolute; width: 10px; height: 4px; margin-left: -5px; background: var(--carton-2); }
.pinta.top { top: 4px; }
.pinta.bottom { bottom: 4px; }
.naipe-corner { position: absolute; display: grid; justify-items: center; gap: 2px; color: var(--team); font-size: 15px; }
.naipe-corner b { font: 900 1.15rem/1 var(--font-num); font-variant-numeric: lining-nums; }
.naipe-corner.tl { top: 12px; left: 12px; }
.naipe-corner.br { bottom: 12px; right: 12px; transform: rotate(180deg); }
.naipe-names { font: .95rem/1.15 var(--font-title); padding: 0 18px; }
.naipe-score {
  font: 900 clamp(4.2rem, 23vw, 7.5rem)/1 var(--font-num);
  font-variant-numeric: lining-nums tabular-nums; color: var(--team);
}
.naipe-foot { font-size: .8rem; font-style: italic; color: var(--ink-soft); }
.naipe.is-warn { box-shadow: inset 0 0 0 5px var(--carton-2), inset 0 0 0 6.5px var(--ocre), 0 0 0 3px var(--ocre), 0 8px 16px rgba(0, 0, 0, .4); animation: pulse 1.6s ease-in-out infinite; }
.naipe.is-warn .naipe-foot { font: 700 .85rem var(--font-body); font-style: normal; color: #fff8ec; background: var(--ocre); padding: 2px 10px; border-radius: 999px; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 5px var(--carton-2), inset 0 0 0 6.5px var(--ocre), 0 0 0 7px rgba(195, 148, 50, .45), 0 8px 16px rgba(0, 0, 0, .4); } }

.float {
  position: absolute; left: 50%; top: 42%; pointer-events: none;
  font: 900 2.2rem var(--font-num); color: var(--team);
  animation: float-up .7s ease-out forwards;
}
@keyframes float-up { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -70px); opacity: 0; } }

/* Juegos ganados: pequeñas fichas */
.juegos { display: flex; gap: 6px; }
.pip { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--on-felt-soft); }
.pip.on { background: var(--ocre); border-color: #f4dc9b; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* Piedras sobre el tapete: amarraco (5) grande, tanto suelto pequeño */
.piedras { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 5px; min-height: 46px; max-width: 160px; }
.amarraco, .tanto { border-radius: 50% 46% 52% 48%; box-shadow: 0 2px 2px rgba(0, 0, 0, .45); }
.amarraco { width: 20px; height: 18px; background: radial-gradient(circle at 35% 30%, #fbf4e4, #d6c7a8 55%, #93836a); }
.tanto { width: 11px; height: 10px; margin-top: 4px; background: radial-gradient(circle at 35% 30%, #8f8a80, #4b4741 70%); }

/* Ficha de +5 */
.ficha {
  width: 68px; height: 68px; border-radius: 50%;
  font: 900 1.4rem var(--font-num); font-variant-numeric: lining-nums; color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #fbf4e4, #e0cfa9 55%, #a8936b);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 4px 0 var(--ink), 0 6px 10px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.ficha:active { transform: translateY(3px); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 1px 0 var(--ink); }

.actions {
  position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(18, 61, 39, .85) 30%);
}
.actions .btn { min-height: 56px; }

/* --- Hojas (paneles inferiores) --- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(10, 25, 16, .55); z-index: 10; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11;
  max-width: 640px; margin: 0 auto; max-height: 88dvh; overflow-y: auto;
  border-radius: var(--radius) var(--radius) 0 0;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  display: grid; gap: 4px;
}
.sheet-enter { animation: slide-up .18s ease-out; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; }
.sheet .btn-block { margin-top: 14px; }
@keyframes slide-up { from { transform: translateY(30px); opacity: 0; } }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper .btn { width: 64px; font-size: 1.6rem; }
.stepper-val { font: 900 2rem var(--font-num); min-width: 2ch; text-align: center; font-variant-numeric: lining-nums; }
.log { margin: 0; padding-left: 22px; display: grid; gap: 4px; }

/* --- Colores de los palos --- */
.suit-oros { color: var(--ocre); }
.suit-copas { color: var(--carmin); }
.suit-espadas { color: var(--marino); }
.suit-bastos { color: #6b4a22; }
.center { text-align: center; }
.page { overflow-x: clip; } /* que el reparto de cartas no cree scroll lateral */

/* --- Inicio --- */
.home-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nav-card { display: grid; justify-items: center; gap: 6px; padding: 16px 4px; font: 1.05rem var(--font-title); color: var(--ink); text-decoration: none; }
.queue-card { display: grid; gap: 8px; }
#queue:empty, #resume:empty, #install:empty { display: none; } /* que los huecos vacíos no sumen espacio */
.queue-card p { margin: 0; }
.queue-fail { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .12); }
.btn-danger { color: var(--carmin); border-color: var(--carmin); box-shadow: 0 3px 0 var(--carmin); }
.player-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.player-row:last-child { border-bottom: 0; }
.player-name { font: 700 1.1rem var(--font-body); }
.nav-suit { font-size: 2rem; }
.install-hint { display: grid; gap: 10px; justify-items: center; text-align: center; }
.install-hint p { margin: 0; }
.share-icon { width: 1.2em; height: 1.2em; vertical-align: -.2em; color: #2a6ad8; }
.hero { padding-top: calc(56px + env(safe-area-inset-top)); }

/* --- Ranking --- */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rank-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; }
.rank-corner { display: grid; justify-items: center; gap: 2px; font-size: 1.3rem; color: var(--ink-soft); }
.rank-corner b { font: 900 1.6rem/1 var(--font-num); font-variant-numeric: lining-nums; }
.rank-corner.suit-oros b, .rank-corner.suit-copas b, .rank-corner.suit-espadas b, .rank-corner.suit-bastos b { color: inherit; }
.rank-name { font: 700 1.2rem/1.1 var(--font-body); }
.rank-title { font: .9rem var(--font-title); color: var(--carmin); }
.rank-stats { font-size: .9rem; color: var(--ink-soft); }
.rank-extra { font-size: .8rem; color: var(--ink-soft); font-style: italic; }
.rank-pct { font: 900 1.9rem/1 var(--font-num); font-variant-numeric: lining-nums; }
.rank-pct small { font-size: .9rem; }
.rank-card.is-hot { box-shadow: inset 0 0 0 4px var(--carton-2), inset 0 0 0 5px var(--ocre), 0 6px 14px rgba(0, 0, 0, .3); }
.pairs-list { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.pairs-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; }
.deal { animation: deal .5s cubic-bezier(.2, .8, .25, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes deal { from { opacity: 0; transform: translate(45vw, -35vh) rotate(28deg); } }

/* --- Historial y partida --- */
.match-row { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.mt { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px; font-size: 1.05rem; color: var(--ink-soft); }
.mt b { font: 900 1.5rem/1.1 var(--font-num); font-variant-numeric: lining-nums; }
.mt.win { color: var(--team); font-weight: 700; }
.match-head { display: grid; gap: 6px; }
.lance-table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.lance-table th, .lance-table td { padding: 6px 4px; border-bottom: 1px solid rgba(0, 0, 0, .12); }
.lance-table thead th { font: 900 1.1rem var(--font-num); color: var(--team); }
.lance-table tbody th { text-align: left; font-weight: 700; }
.lance-table td { text-align: center; font: 700 1.1rem var(--font-num); }

/* --- Final --- */
.flip { perspective: 1000px; height: 300px; }
.flip-inner { position: relative; height: 100%; transform-style: preserve-3d; animation: flip .9s .2s ease-out both; }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Dorso del naipe: rombos carmín con marco crema */
.flip-back {
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(251, 246, 233, .5) 9px 10px),
    repeating-linear-gradient(-45deg, transparent 0 9px, rgba(251, 246, 233, .5) 9px 10px),
    var(--carmin);
  box-shadow: inset 0 0 0 10px var(--carton-2), inset 0 0 0 12px var(--carmin), inset 0 0 0 13px var(--carton-2), 0 6px 14px rgba(0, 0, 0, .3);
}
.flip-front { transform: rotateY(180deg); display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }
.flip-front .corner { color: var(--team); font-size: 1.6rem; }
.winner-name { font: 1.7rem/1.15 var(--font-title); color: var(--team); padding: 0 24px; }
.final-score { font: 900 4rem/1 var(--font-num); font-variant-numeric: lining-nums; }
@keyframes flip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; }
}

@media (max-height: 700px) {
  .naipe { max-height: 44dvh; }
  .naipe-score { font-size: clamp(3.6rem, 20vw, 6rem); }
  .ficha { width: 60px; height: 60px; }
}