/* Probability Live: the student's screens (prob-student.js). Builds on lab-live.css (tokens, buttons, answer
   tiles, the ring, the status strip). No avatars: competitors are name cards in their side's color + icon.
   Fits a 1366 x 768 Chromebook with no scrolling; stacks at phone width. */

.pl-screen { gap: 16px; }
.pl-strip-bar .pl-bucks b { font-size: 24px; }
.pl-coin { display: inline-block; vertical-align: -2px; margin-right: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--ll-orange-hi); box-shadow: inset 0 0 0 3px #b15e19; }
.pl-pred { color: var(--ll-text); border-color: var(--ll-teal); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.pl-sit { font-size: 15px; min-height: 40px; }
.pl-sit[aria-pressed="true"] { color: var(--ll-orange-hi); border-color: var(--ll-orange); }
.pl-center { height: auto; flex: 1; min-height: 0; }
.pl-drawing { animation: pl-pulse 0.9s ease-in-out infinite alternate; }
@keyframes pl-pulse { from { opacity: 0.55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pl-drawing { animation: none; } }
.pl-tokens { color: var(--ll-orange-hi); }

/* match-up sides: name cards in the side's color + icon (no avatars) */
.pl-sides { display: flex; align-items: stretch; justify-content: center; gap: 16px; width: min(1100px, 100%); }
.pl-side { flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border-radius: var(--ll-radius); background: var(--ll-panel); border: 1px solid var(--ll-line); border-top: 6px solid var(--sc); box-shadow: var(--ll-shadow); }
.pl-side.is-you { box-shadow: 0 0 0 3px var(--ll-teal), var(--ll-shadow); }
.pl-side-name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--ll-muted); }
.pl-side-name .ll-ticon { width: 22px; height: 22px; }
.pl-youtag { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 0 8px; border-radius: 999px; background: var(--ll-teal); color: var(--ll-on-teal); }
.pl-names { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pl-name { font-size: 28px; font-weight: 700; text-align: center; padding: 8px 16px; border-radius: var(--ll-radius-sm); background: color-mix(in srgb, var(--sc) 18%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 60%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-vs { align-self: center; font-size: 28px; font-weight: 700; color: var(--ll-muted); }
.pl-how { margin: 0; }
.pl-compete { background: rgba(63, 181, 163, .14); border: 1px solid var(--ll-teal); border-radius: var(--ll-radius); padding: 8px 16px; font-size: 22px; }
.pl-compete strong { color: var(--ll-teal-hi); margin-right: 8px; }

/* predict */
.pl-predict { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; min-height: 0; justify-content: center; }
.pl-predict-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.pl-predict-head h1 { margin: 0; }
.pl-amounts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 8px; }
.pl-back { width: 100%; text-align: center; color: var(--ll-muted); font-size: 16px; }
.pl-amt { min-width: 64px; min-height: 48px; padding: 8px 12px; border-radius: var(--ll-radius-sm); border: 1px solid color-mix(in srgb, var(--sc) 70%, transparent); background: var(--ll-bg-2); color: var(--ll-text); font-weight: 700; font-size: 20px; transition: background var(--ll-fast) var(--ll-ease); }
.pl-amt:hover:not(:disabled) { background: color-mix(in srgb, var(--sc) 30%, var(--ll-bg-2)); }
.pl-amt.is-on { background: var(--sc); color: #fff; box-shadow: 0 0 0 3px #fff inset; }
.pl-amt:disabled { opacity: 0.35; cursor: default; }
.pl-poor { color: var(--ll-orange-hi); }

/* the match */
.pl-match { flex: 1; min-height: 0; display: flex; gap: 16px; }
.pl-match--spect { flex-direction: column; }
.pl-matchline { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; font-size: 18px; }
.pl-mline { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-mline .ll-ticon { width: 16px; height: 16px; }
.pl-summary { margin: 0; }
.pl-qpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.pl-sudden { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ll-red-solid); border-radius: var(--ll-radius-sm); padding: 2px 8px; margin-bottom: 4px; }
.pl-fill { flex: 0 1 auto; }
.pl-wait { margin: auto 0; }
.pl-reveal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; text-align: center; }
.pl-reveal p { margin: 0; }
.pl-earn { color: var(--ll-green); font-weight: 700; }


/* competitor: the game on the left, the question on the right */
.pl-comp .pl-match--comp { flex-direction: row; }
.pl-gamecol { flex: 0 0 58%; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
/* Tug and Climb draw bigger: their column takes more of the row (the question panel keeps min-width 320px). */
.pl-match--climb .pl-gamecol, .pl-match--tug .pl-gamecol { flex-basis: 66%; }
.pl-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.pl-comp .pl-qpanel { flex: 1 1 0; min-width: 320px; }
.pl-comp .ll-sq { margin: 0; font-size: 22px; }
.pl-comp .ll-sqcard { min-height: 80px; }
.pl-comp .ll-sbtns { grid-template-columns: 1fr; grid-auto-rows: auto; flex: 0 1 auto; }
.pl-comp .ll-sbtn { font-size: 19px; padding: 8px 16px; min-height: 52px; }
.pl-comp .ll-fill .row { width: 100%; }
.pl-comp .ll-fill input { font-size: 22px; }
.pl-canvasbox { position: relative; line-height: 0; }
.pl-canvas { display: block; image-rendering: pixelated; border-radius: var(--ll-radius-sm); }
.pl-tags { position: absolute; inset: 0; pointer-events: none; }
.pl-tag { position: absolute; left: 0; top: 0; font: 700 14px/1.2 var(--ll-font); background: var(--ll-teal); color: var(--ll-on-teal); padding: 2px 8px; border-radius: var(--ll-radius-sm); white-space: nowrap; }
.pl-tag.is-them { background: rgba(20, 26, 44, .85); color: var(--ll-text); }
.pl-gamebar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pl-clock { color: var(--ll-text); font-weight: 700; }
.pl-aim { margin: 0; text-align: center; min-height: 1.4em; }
.pl-ctls { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pl-ctl { min-width: 54px; font-size: 18px; padding: 8px 12px; }
.pl-cells { position: absolute; inset: 0; }
.pl-cell { position: absolute; background: transparent; border: 0; border-radius: 8px; padding: 0; cursor: default; }
.pl-cell .pl-cellnum { position: absolute; left: 4px; top: 2px; font: 700 14px/1 var(--ll-font); color: rgba(255, 255, 255, 0.55); }
.pl-cell.is-open { cursor: pointer; box-shadow: 0 0 0 3px var(--ll-focus) inset; }
.pl-cell.is-open:hover { background: rgba(127, 216, 201, 0.18); }
.pl-dissolve[aria-pressed="true"] { background: var(--ll-red); border-color: transparent; }
.pl-winner { display: flex; align-items: center; gap: 12px; color: var(--sc); }
.pl-winner .ll-ticon { width: 34px; height: 34px; }

@media (max-width: 900px) {
  .pl-comp .pl-match--comp { flex-direction: column; }
  .pl-gamecol, .pl-match--climb .pl-gamecol, .pl-match--tug .pl-gamecol { flex: 0 0 auto; width: 100%; }
  .pl-comp .pl-qpanel { min-width: 0; }
  .pl-match--spect .pl-sq { margin: 0; }
}
@media (max-width: 760px) {
  .pl-sides { flex-direction: column; align-items: center; }
  .pl-side { width: 100%; }
  .pl-vs { font-size: 24px; }
}