/* Palitos. Paleta propia: el fondo casi negro para que los palitos —que son
   cuatro rayas— se vean de lejos, y un solo color por bando. */
.pl-intro { background: linear-gradient(170deg, #0e1016 0%, #151924 100%); color: #eef1f7; padding: 54px 0 34px; }
.pl-intro h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 6px 0 14px; letter-spacing: -.02em; }
.pl-intro .lead { color: #a2abbd; max-width: 70ch; line-height: 1.65; }
.pl-intro .lead b { color: #8fffca; font-weight: 600; }
.pl-intro .eyebrow a { color: #8fffca; }

.pl-seccion { padding: 26px 0 60px; background: #0b0d12; }
.pl { display: grid; gap: 16px; }

.pl-pantalla { position: relative; border-radius: 14px; overflow: hidden; background: #0e1016;
  border: 1px solid #222736; }
.pl-pantalla > canvas { display: block; width: 100%; height: auto; outline: none; }

.pl-panel {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(9,11,16,.93); overflow: auto;
}
.pl-panel[hidden] { display: none; }
.pl-caja { width: min(560px, 100%); background: #141824; border: 1px solid #262c3c;
  border-radius: 14px; padding: 20px 22px; color: #eef1f7; }
.pl-caja.pl-ancha { width: min(780px, 100%); }
.pl-caja h2 { font-size: 1.5rem; margin: 2px 0 10px; letter-spacing: -.015em; }
.pl-caja p { margin: 0 0 10px; font-size: .94rem; line-height: 1.55; color: #c3cbd9; }
.pl-caja p b { color: #eef1f7; }
.pl-kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
  color: #8a93a6; font-weight: 700; margin: 0 0 4px !important; }
.pl-tenue { color: #8a93a6 !important; font-size: .86rem !important; }
.pl-bien { color: #8fffca !important; }
.pl-alerta { color: #ff9aa4 !important; }

.pl-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pl-cta, .pl-cta-2 { font: inherit; font-size: .9rem; font-weight: 600; padding: 10px 16px;
  border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
.pl-cta { background: #8fffca; color: #0b2018; }
.pl-cta:hover { background: #adffd9; }
.pl-cta-2 { background: rgba(255,255,255,.07); color: #eef1f7; border-color: rgba(255,255,255,.14); }
.pl-cta-2:hover { background: rgba(255,255,255,.13); }
.pl-cta[disabled], .pl-cta-2[disabled] { opacity: .4; cursor: not-allowed; }

/* la escalera de rivales */
.pl-escalera { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px; margin: 10px 0 4px; }
.pl-rival { text-align: left; font: inherit; cursor: pointer; display: grid; gap: 4px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 12px; color: #eef1f7; }
.pl-rival b { font-size: .9rem; font-weight: 600; }
.pl-rival b i { font-style: normal; font-size: .66rem; font-weight: 700; color: #ff9aa4;
  background: rgba(255,94,108,.16); padding: 2px 6px; border-radius: 20px; margin-left: 4px; }
.pl-rival span { font-size: .78rem; color: #8a93a6; line-height: 1.45; }
.pl-rival:hover:not([disabled]) { background: rgba(255,255,255,.07); }
.pl-rival[disabled] { opacity: .42; cursor: not-allowed; }
.pl-rival.pl-hecho { border-color: rgba(143,255,202,.35); background: rgba(143,255,202,.06); }
.pl-rival.pl-toca { border-color: rgba(143,255,202,.7); }

.pl-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px; margin: 12px 0; }
.pl-datos > div { background: rgba(255,255,255,.04); border-radius: 9px; padding: 9px 11px; }
.pl-datos b { display: block; font-size: 1.2rem; color: #8fffca; }
.pl-datos span { font-size: .72rem; color: #8a93a6; }

/* el mando */
.pl-mando { display: grid; gap: 10px; }
.pl-fila { display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 9px 11px; }
.pl-rot { width: 100%; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
  color: #8a93a6; font-weight: 700; }
.pl-bt { font: inherit; font-size: .84rem; font-weight: 600; padding: 10px 13px;
  border-radius: 9px; cursor: pointer; color: #eef1f7; user-select: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  display: inline-flex; align-items: center; gap: 7px; touch-action: none; }
.pl-bt i { font-style: normal; font-size: .64rem; font-weight: 700; color: #a2abbd;
  background: rgba(0,0,0,.35); border-radius: 4px; padding: 2px 5px; }
.pl-bt:hover { background: rgba(255,255,255,.13); }
.pl-bt.pl-on { background: rgba(127,183,255,.3); border-color: rgba(127,183,255,.65); }
.pl-bt.pl-off { opacity: .35; }
.pl-tapa { border-color: rgba(127,183,255,.35); }
.pl-agarre { border-color: rgba(255,196,107,.4); }

.pl-ayuda { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pl-ayuda > div { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 14px 16px; }
.pl-ayuda h3 { margin: 0 0 6px; font-size: .92rem; color: #8fffca; }
.pl-ayuda p { margin: 0; font-size: .86rem; line-height: 1.55; color: #a2abbd; }
.pl-ayuda p b { color: #eef1f7; font-weight: 600; }
.pl-pie { font-size: .84rem; color: #8a93a6; line-height: 1.6; max-width: 74ch; margin: 0; }

/* ------------------------------------------------- el taller y las fichas */
.pl-fila-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px; margin: 12px 0 2px; }
.pl-fila-datos > div { background: rgba(255,255,255,.04); border-radius: 9px; padding: 9px 11px;
  min-width: 0; }
.pl-fila-datos b { display: block; font-size: 1.02rem; color: #8fffca; overflow-wrap: break-word; }
.pl-fila-datos span { font-size: .72rem; color: #8a93a6; }

.pl-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px; margin: 8px 0 14px; }
.pl-fichas.pl-chicas { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 8px; }
.pl-ficha { text-align: left; font: inherit; cursor: pointer; display: grid; gap: 4px;
  align-content: start; min-width: 0;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 10px 12px; color: #eef1f7; }
.pl-ficha b { font-size: .88rem; font-weight: 600; }
 /* Un pelo más claro que el gris de siempre: sobre la ficha elegida —que
    tiene un fondo verde tenue— el #8a93a6 queda en 4,42 y la norma pide 4,5.
    Lo midió scripts/contraste.js, no yo a ojo. */
.pl-ficha span { font-size: .76rem; color: #9ba4b6; line-height: 1.45; }
.pl-ficha .pl-hace { color: #c89bff; }
.pl-ficha .pl-precio { color: #ffc46b; font-weight: 600; font-size: .74rem; }
.pl-ficha:hover:not([disabled]) { background: rgba(255,255,255,.07); }
.pl-ficha[disabled] { opacity: .45; cursor: not-allowed; }
.pl-ficha.pl-toca { border-color: rgba(143,255,202,.75); background: rgba(143,255,202,.08); }
.pl-deja { color: #ffc46b !important; font-size: .72rem !important; }

/* ------------------------------------------------------- dos jugadores */
.pl-llave { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px; margin: 12px 0; }
.pl-llave .pl-cta-2 { text-align: left; display: grid; gap: 4px; min-width: 0; }
.pl-llave .pl-cta-2 b { font-size: .88rem; }
.pl-llave .pl-cta-2 span { font-size: .76rem; color: #8a93a6; line-height: 1.45;
  font-weight: 400; }
.pl-llave .pl-cta-2.pl-toca { border-color: rgba(143,255,202,.75);
  background: rgba(143,255,202,.08); }
.pl-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.pl-col { min-width: 0; background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; }
.pl-mana { border-color: rgba(200,155,255,.4); }