/* ============================================================
   Sylvaria — La Crónica del Recorrido (puntajes)
   Depende de styles.css + subpaginas.css
   ============================================================ */

.pt { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px) clamp(40px,8vw,90px); }

/* ---------- Botonera genérica ---------- */
.pt-btn {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em;
  font-size: 14px; cursor: pointer; border: none; border-radius: 999px;
  padding: 14px 26px; transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.pt-btn--primary { background: var(--arena); color: var(--verde); box-shadow: 0 12px 30px -12px rgba(200,180,130,.7); }
.pt-btn--primary:hover { transform: translateY(-2px); background: var(--arena-claro); }
.pt-btn--ghost { background: transparent; color: var(--arena); border: 1.5px solid rgba(200,180,130,.4); }
.pt-btn--ghost:hover { border-color: var(--verde-lima); color: var(--verde-lima); }
.pt-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.pt-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: var(--s-5); }

/* ---------- Setup: convocatoria ---------- */
.pt-card {
  background: rgba(200,180,130,.05);
  border: 1.5px solid rgba(150,190,60,.22);
  border-radius: var(--radius); padding: clamp(20px,4vw,36px);
}
.pt-card h2 { color: var(--arena-claro); font-size: clamp(26px,4vw,38px); margin-bottom: var(--s-2); }
.pt-card__sub { color: rgba(232,220,190,.7); font-size: 15px; margin-bottom: var(--s-5); }

.pt-count { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin: var(--s-4) 0 var(--s-5); }
.pt-count__btn {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: rgba(150,190,60,.12); border: 1.5px solid rgba(150,190,60,.4);
  color: var(--verde-lima); font-size: 26px; line-height: 1; display: grid; place-items: center;
}
.pt-count__btn:disabled { opacity: .35; cursor: not-allowed; }
.pt-count__num { font-family: var(--font-display); font-size: 44px; color: var(--arena-claro); min-width: 60px; text-align: center; }
.pt-count__label { display:block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-lima); }

.pt-names { display: grid; gap: 12px; }
.pt-name-row { display: flex; align-items: center; gap: 12px; }
.pt-name-row__sigil { width: 34px; height: 34px; flex: 0 0 34px; color: var(--verde-lima); }
.pt-input {
  flex: 1; background: rgba(0,0,0,.25); border: 1.5px solid rgba(200,180,130,.25);
  border-radius: 10px; padding: 12px 14px; color: var(--arena-claro);
  font-family: var(--font-body); font-size: 16px;
}
.pt-input:focus { outline: none; border-color: var(--verde-lima); }

/* ---------- Juego: hoyo actual ---------- */
.pt-hole { text-align: center; }
.pt-hole__progress { display:flex; gap:5px; justify-content:center; flex-wrap:wrap; margin-bottom: var(--s-5); }
.pt-hole__pip { width: 10px; height: 10px; border-radius: 50%; background: rgba(200,180,130,.18); }
.pt-hole__pip.done { background: var(--verde-lima); }
.pt-hole__pip.now { background: var(--arena-claro); box-shadow: 0 0 0 3px rgba(150,190,60,.25); }

.pt-hole__head { display: grid; place-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.pt-hole__sigil { width: 64px; height: 64px; color: var(--verde-lima); filter: drop-shadow(0 0 14px rgba(150,190,60,.4)); }
.pt-hole__n { font-family: var(--font-accent); color: var(--arena-claro); font-size: clamp(40px,9vw,64px); line-height: 1; }
.pt-hole__meta { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--verde-lima); }
.pt-hole__element { color: rgba(232,220,190,.6); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

.pt-players { display: grid; gap: 12px; margin: var(--s-5) 0; }
.pt-player {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  background: rgba(0,0,0,.22); border: 1px solid rgba(200,180,130,.18);
  border-radius: 12px; padding: 12px 14px;
}
.pt-player__name { font-weight: 600; color: var(--arena-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-player__sub { display:block; font-size: 11px; color: rgba(232,220,190,.5); letter-spacing: .05em; }
.pt-stepper { display: flex; align-items: center; gap: 10px; }
.pt-stepper__btn {
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  background: rgba(150,190,60,.12); border: 1px solid rgba(150,190,60,.35);
  color: var(--verde-lima); font-size: 22px; line-height: 1; display:grid; place-items:center;
}
.pt-stepper__btn:disabled { opacity:.3; cursor:not-allowed; }
.pt-stepper__val { font-family: var(--font-display); font-size: 26px; color: var(--arena-claro); min-width: 30px; text-align: center; }
.pt-flair { font-family: var(--font-accent); font-size: 13px; margin-left: 8px; }
.pt-flair--good { color: var(--verde-lima); }
.pt-flair--ace { color: #ffd86b; text-shadow: 0 0 12px rgba(255,216,107,.6); }
.pt-flair--bad { color: var(--rojo); }

/* ---------- Comentario del Guardián ---------- */
.pt-guardian {
  display:flex; gap:12px; align-items:center; justify-content:center;
  margin-top: var(--s-4); color: rgba(232,220,190,.75); font-style: italic; font-size: 14px;
  min-height: 22px; text-align:center;
}

/* ---------- Resultados / podio ---------- */
.pt-results__title { text-align:center; color: var(--arena-claro); margin-bottom: var(--s-2); }
.pt-podium { display: grid; gap: 14px; margin: var(--s-5) 0; }
.pt-rank {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px;
  background: rgba(200,180,130,.05); border: 1.5px solid rgba(150,190,60,.2);
  border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden;
}
.pt-rank--1 { border-color: rgba(255,216,107,.5); background: rgba(255,216,107,.06); }
.pt-rank__pos { font-family: var(--font-accent); font-size: 30px; color: var(--verde-lima); }
.pt-rank--1 .pt-rank__pos { color: #ffd86b; }
.pt-rank__name { font-weight: 700; color: var(--arena-claro); font-size: 18px; }
.pt-rank__title { display:block; font-family: var(--font-accent); font-size: 14px; color: var(--verde-lima); margin-top: 2px; }
.pt-rank__score { text-align: right; }
.pt-rank__total { font-family: var(--font-display); font-size: 30px; color: var(--arena-claro); line-height: 1; }
.pt-rank__vs { display:block; font-size: 12px; color: rgba(232,220,190,.6); letter-spacing: .08em; }
.pt-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top: 8px; }
.pt-badge {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: rgba(150,190,60,.14);
  color: var(--verde-lima); border: 1px solid rgba(150,190,60,.3);
}

/* ---------- Share / canvas ---------- */
.pt-share { text-align: center; margin-top: var(--s-6); }
.pt-share__preview {
  max-width: 280px; width: 70%; margin: 0 auto var(--s-4);
  border-radius: 18px; border: 1.5px solid rgba(150,190,60,.3);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); display: block;
}
.pt-share__hint { color: rgba(232,220,190,.55); font-size: 13px; margin-top: 10px; }

.pt-fade { animation: pt-fade .45s ease both; }
@keyframes pt-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pt-fade { animation: none; } }