/* Project Legend V0.44.0 - live match ball, speed control and stance menu. */

/* ------------------------------------------------------------- the ball ---- */
.pl44-ball{
  position:absolute;left:var(--x,50%);top:var(--y,50%);
  width:clamp(10px,1.1cqw,15px);aspect-ratio:1/1;
  margin:calc(clamp(10px,1.1cqw,15px) / -2) 0 0 calc(clamp(10px,1.1cqw,15px) / -2);
  border-radius:50%;z-index:6;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,#fff 0 38%,#d8dee6 55%,#9aa6b3 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 3px 7px rgba(0,0,0,.55),0 0 12px rgba(255,255,255,.28);
  /* The travel time follows the chosen simulation speed. */
  transition:left calc(.42s * var(--pl44-speed,1)) cubic-bezier(.3,.7,.3,1),
             top  calc(.42s * var(--pl44-speed,1)) cubic-bezier(.3,.7,.3,1);
}
.pl44-ball[data-pl44-state="shot"]{
  transition:left calc(.2s * var(--pl44-speed,1)) cubic-bezier(.2,.9,.2,1),
             top  calc(.2s * var(--pl44-speed,1)) cubic-bezier(.2,.9,.2,1);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 3px 9px rgba(0,0,0,.6),0 0 20px rgba(255,255,255,.5);
}
@media (prefers-reduced-motion:reduce){
  .pl44-ball{transition:none}
}

/* --------------------------------------------------------- speed control --- */
/* Positioned into the scoreboard's free space so it distorts no layout. */
.pl44-speed{
  position:absolute;right:clamp(12px,1.2vw,22px);bottom:12px;z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
}
.pl44-speed>span{display:block;margin:0}
.pl44-speed-row{display:flex;align-items:center;gap:5px}
@media (max-width:1100px){
  .pl44-speed{position:static;align-items:center;margin:8px auto 0}
}
.pl44-speed>span{
  font-size:9px;letter-spacing:.2em;font-weight:800;
  color:var(--pl42-ink-4,#8fa3b6);margin-right:2px;
}
.pl44-speed button{
  min-height:28px;padding:0 11px;border-radius:999px;
  border:1px solid var(--pl42-line,rgba(255,255,255,.1));
  background:rgba(255,255,255,.03);color:var(--pl42-ink-3,#a9bacb);
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.pl44-speed button:hover{border-color:var(--pl42-gold,#e9b949);color:var(--pl42-gold,#e9b949)}
.pl44-speed button.is-active{
  background:var(--pl42-gold-wash,rgba(233,185,73,.1));
  border-color:var(--pl42-gold,#e9b949);color:var(--pl42-gold-bright,#f5cd6b);
}

/* ---------------------------------------------------------- stance sheet --- */
/* The sheet is rendered by the match layer as a flat run of preset buttons, so
   five options left a lone card on its own row and the actions block sat at a
   different width. Two columns with the odd last card spanning both keeps every
   row full, and the actions block becomes its own section rather than a sixth
   card pretending to be a stance. */
.pl391-presets{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;align-items:stretch;
}
.pl391-presets>.pl391-preset:last-child:nth-child(odd){grid-column:1/-1}
.pl391-preset{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:64px;padding:12px 14px;border-radius:10px;text-align:left;
  border:1px solid var(--pl42-line,rgba(255,255,255,.08));
  background:rgba(255,255,255,.025);
  transition:border-color .15s,background .15s,transform .12s;
}
.pl391-preset:hover{
  border-color:var(--pl42-gold,#e9b949);
  background:var(--pl42-gold-wash,rgba(233,185,73,.08));
}
.pl391-preset:active{transform:translateY(1px)}
.pl391-preset.active{
  border-color:var(--pl42-gold,#e9b949);
  background:var(--pl42-gold-wash,rgba(233,185,73,.12));
  box-shadow:inset 3px 0 0 var(--pl42-gold,#e9b949);
}
.pl391-preset>b{font-size:14px;font-weight:800;color:var(--pl42-ink,#eaf1f8);line-height:1.25}
.pl391-preset.active>b{color:var(--pl42-gold-bright,#f5cd6b)}
.pl391-preset>span{font-size:12px;line-height:1.4;color:var(--pl42-ink-4,#8fa3b6)}

/* The actions entry is a section header with a chevron, not a stance option. */
.pl391-player-action{
  display:flex !important;flex-direction:column;align-items:flex-start;gap:3px;
  width:100%;margin-top:12px;padding:13px 15px;border-radius:10px;text-align:left;
  border:1px solid rgba(103,183,255,.24);
  background:var(--pl42-cyan-wash,rgba(103,183,255,.08));
  position:relative;
}
.pl391-player-action:hover{border-color:var(--pl42-cyan,#67b7ff)}
.pl391-player-action>b{
  font-size:10px;letter-spacing:.18em;font-weight:800;text-transform:uppercase;
  color:var(--pl42-cyan,#67b7ff);
}
.pl391-player-action>span{font-size:12px;line-height:1.45;color:var(--pl42-ink-3,#a9bacb);padding-right:22px}
.pl391-player-action::after{
  content:'>';position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-weight:800;color:var(--pl42-cyan,#67b7ff);
}
/* Told once, under the options: the match carries on by itself. */
.pl391-presets::after{
  content:attr(data-pl44-note);grid-column:1/-1;
  font-size:11px;color:var(--pl42-ink-4,#8fa3b6);padding-top:2px;
}
@media (max-width:620px){
  .pl391-presets{grid-template-columns:1fr}
  .pl391-presets>.pl391-preset:last-child:nth-child(odd){grid-column:auto}
}