/* Duelos Troll MLBB - modo partida (js/ui-partida.js): cronómetro, avisos, marcador, reglas y lista.
   Va después de components.css. Prefijo pt. Solo tokens de base.css; reutiliza .scard, .kv, .ajq, .name,
   .pl, .seg, .sbtns e .igrid. Teléfono primero; desde 700 px las reglas de los dos jugadores van lado a lado. */

/* ---------- entrada: botón "Modo partida" en el duelo ---------- */
.ptabre{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.ptabre .btn{width:100%}
.ptabre p{margin:0 4px;font-size:13px;line-height:18px;color:var(--fg2);text-align:center}
.ptabre + .sbtns{margin-top:12px}

/* ---------- cabecera ---------- */
.pthead{padding-top:6px}
.ptvs{margin:2px 0 0;font-size:15px;line-height:21px;color:var(--fg2)}

/* ---------- cronómetro: se queda pegado bajo la cabecera de la ficha (52 px) al desplazar ---------- */
.ptcron{
  position:sticky;top:52px;z-index:2;margin:6px -6px 0;padding:6px 6px 10px;
  background:var(--sheet-bg);border-bottom:.5px solid var(--sep);
}
.ptclk{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ptt{font-size:52px;line-height:56px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.ptgo{flex:none;min-width:128px;min-height:56px;font-size:19px}
.ptcron[data-run="1"] .ptgo{background:var(--accent-tint);color:var(--link)}
.ptsig{display:flex;flex-direction:column;margin:4px 0 0;font-size:14px;line-height:19px;color:var(--fg2)}
.ptsig b{font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}

/* aviso de un hito: recuadro azul que parpadea tres veces */
.ptav{
  display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;border-radius:12px;
  background:var(--accent-fill);color:#fff;animation:ptflash .9s ease-in-out 3;
}
.ptavt{flex:1;min-width:0;font-size:16px;line-height:21px;font-weight:600;overflow-wrap:break-word}
.ptavt p{margin:0}
.ptavt p + p{margin-top:4px}
.ptavb{
  flex:none;min-height:44px;padding:0 12px;border:1.5px solid currentColor;border-radius:10px;
  background:transparent;color:inherit;font-size:15px;font-weight:600;cursor:pointer;
}
.ptavb:focus-visible{outline-color:currentColor}
@keyframes ptflash{50%{opacity:.5}}

.ptayu{margin:10px 4px 0;font-size:13px;line-height:18px;color:var(--fg2)}
.ptadj{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.ptab{
  min-height:44px;border:0;border-radius:10px;background:var(--fill);color:var(--fg);
  font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;cursor:pointer;
}
.ptab:active,.ptb:active{opacity:.7}
.ptopt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;margin:4px 2px 0}
.link.is-conf{color:var(--bad-ink);font-weight:600}
.btn.is-conf{background:var(--bad-bg);color:var(--bad-ink)}

/* interruptor del pitido */
.ptsw{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;
  border:0;background:none;color:var(--fg);font-size:15px;cursor:pointer;
}
.ptswk{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:var(--fg3);transition:background .15s}
.ptswk::after{
  content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:var(--sheet-bg);transition:transform .15s;
}
.ptsw[aria-checked="true"] .ptswk{background:var(--accent-fill)}
.ptsw[aria-checked="true"] .ptswk::after{transform:translateX(18px)}

/* ---------- marcador: los dos jugadores lado a lado, también en teléfono ---------- */
.ptwin{margin-bottom:10px;padding:12px 16px;border-radius:12px;background:var(--good-bg)}
.ptwin p{margin:0}
.ptwt{font-size:22px;line-height:28px;font-weight:700;color:var(--good-ink)}
.ptws{margin-top:2px;font-size:14px;line-height:19px}
.ptwb{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ptwb .btn.tinted{background:var(--sheet-card)}   /* sobre el verde del anuncio, el azul teñido no llega a 4,5:1 */
.ptmarc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ptj{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;text-align:center}
.ptj.is-win{box-shadow:inset 0 0 0 2px var(--good-ink)}
.ptjh{display:flex;align-items:center;gap:8px;align-self:stretch;min-width:0;text-align:left}
.ptjh > div{min-width:0}
.ptjh .pl{display:block;font-size:11px;line-height:14px}
.ptjh strong{display:block;font-size:16px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
.ptnw{display:flex;flex-direction:column;align-items:center}
.ptn{font-size:60px;line-height:62px;font-weight:700;font-variant-numeric:tabular-nums}
.ptnl{font-size:12px;line-height:16px;color:var(--fg2)}
.ptpm{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-self:stretch}
.ptb{
  min-height:56px;border:0;border-radius:12px;background:var(--fill);color:var(--fg);
  font-size:30px;line-height:1;font-weight:600;cursor:pointer;
}
.ptb.mas{background:var(--accent-fill);color:#fff}
.ptb:disabled,.pttorre:disabled{opacity:.4;cursor:default}
.ptf{min-height:20px;font-size:15px;line-height:20px;font-weight:600}
.ptg{font-size:13px;line-height:18px;color:var(--fg2)}
.ptnotas{list-style:none;display:flex;flex-direction:column;gap:4px;align-self:stretch;margin:0;padding:0;text-align:left}
.ptnota{padding:6px 8px;border-radius:8px;background:var(--fill);color:var(--fg2);font-size:13px;line-height:18px}
.ptnota.is-activa{background:var(--good-bg);color:var(--good-ink);font-weight:600}
.ptnota.is-duda{background:var(--bad-bg);color:var(--bad-ink)}
.pttorre{align-self:stretch;margin-top:auto}
.ptnt{display:grid;place-items:center;align-self:stretch;min-height:44px;margin-top:auto;font-size:13px;line-height:18px;color:var(--fg2)}

/* ---------- avisos por tiempo: línea de tiempo ---------- */
.pthitos{list-style:none;margin:0;padding:4px 12px}
.pth{
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:10px 0;font-size:15px;line-height:20px;
}
.pth + .pth{border-top:.5px solid var(--sep)}
.pths{min-width:38px;font-weight:700;font-variant-numeric:tabular-nums}
.pthx{min-width:0;overflow-wrap:break-word}
.pthx b{display:block;font-weight:600}
.pthx small{display:block;font-size:12px;line-height:16px;color:var(--fg2)}
.pthc{font-size:13px;line-height:18px;color:var(--fg2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pth.is-next,.pth.is-now{margin:0 -8px;padding:10px 8px;border-radius:10px;border-top-color:transparent}
.pth.is-next + .pth,.pth.is-now + .pth{border-top-color:transparent}
.pth.is-next{background:var(--accent-tint)}
.pth.is-next .pthc{color:var(--link);font-weight:600}
.pth.is-past .pths,.pth.is-past .pthx b{font-weight:400;color:var(--fg2)}
.pth.is-now{background:var(--accent-fill)}
.pth.is-now .pths,.pth.is-now .pthx b,.pth.is-now .pthx small,.pth.is-now .pthc{color:#fff}
.ptnone{font-size:15px;line-height:21px;color:var(--fg2)}

/* ---------- reglas: en teléfono, un jugador cada vez ---------- */
.seg.ptseg{grid-template-columns:1fr 1fr;margin-bottom:10px}
.ptseg button{overflow:hidden;font-size:15px;text-overflow:ellipsis}
.ptreg{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.ptr{display:flex;flex-direction:column;gap:10px}
.ptr .link{align-self:flex-start;margin:-6px 0 -8px}
.ptr .kv .adj{margin-left:4px}
@media (max-width:699.98px){
  .ptreg[data-ver="0"] .ptr[data-n="1"],.ptreg[data-ver="1"] .ptr[data-n="0"]{display:none}
}

/* ---------- para no olvidar: casillas que se tachan ---------- */
.ptlist{padding:4px 12px}
.ptck{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer}
.ptck + .ptck{border-top:.5px solid var(--sep)}
.ptck input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--accent-fill);cursor:pointer}
.ptckx{flex:1;min-width:0;font-size:15px;line-height:20px;overflow-wrap:break-word}
.ptckx b{display:block;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg2)}
.ptckx b.fav{color:var(--good-ink)}
.ptckx b.con{color:var(--bad-ink)}
.ptck input:checked + .ptckx .ptckt{color:var(--fg2);text-decoration:line-through}

/* ---------- otra partida empezada y pie ---------- */
.ptotra{display:flex;flex-direction:column;gap:8px;margin-top:12px;font-size:15px;line-height:21px}
.sbtns.ptfoot{grid-template-columns:1fr 1fr}
.sbtns.ptfoot.one{grid-template-columns:1fr}

/* ---------- anchos ---------- */
@media (min-width:700px){
  .seg.ptseg{display:none}
  .ptreg{grid-template-columns:1fr 1fr}
  .ptt{font-size:60px;line-height:64px}
}
@media (min-width:1100px){
  /* como el duelo: el panel se ensancha para que quepan los dos jugadores lado a lado */
  .app[data-dtype="partida"] .shell{grid-template-columns:minmax(0,1fr) minmax(540px,46%)}
}
/* pantalla muy baja (teléfono tumbado): el cronómetro no se pega, que taparía media ficha */
@media (max-height:540px){
  .ptcron{position:static}
}

@media (hover:hover){
  .ptab:hover,.ptb:not(:disabled):hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
  .ptb.mas:not(:disabled):hover{box-shadow:none;filter:brightness(.94)}
  .ptavb:hover{text-decoration:underline}
}
@media (prefers-reduced-motion: reduce){
  .ptav{animation:none}
  .ptswk,.ptswk::after{transition:none}
}