/* לומדים בכיף – שחקנים במחשב הזה (assets/players.js): מסך מלא "מי משחק?" / "מה השם שלך?", הצ'יפ בשורה העליונה,
   ועמוד המורה players.html. משתמש בטוקנים של site.css. */

/* ───────────── תמונת שחקן ───────────── */
.pav { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pav--x { display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: var(--text); font: 400 1.1em/1 var(--font-display); }

/* ───────────── הצ'יפ בשורה העליונה: [תמונה][שם] ─────────────
   נקודת עיגון בתבניות: <div class="top__player" data-player-chip></div> (ובעמוד המשחק: class="g-player") */
.top__player, .g-player { display: flex; align-items: center; flex: none; min-width: 0; }
.pchip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; max-width: 240px;
  padding-block: 3px; padding-inline: 3px 12px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(247, 244, 238, .07); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--hair-2);
  font: 600 17px/1 var(--font-body); -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, transform 120ms var(--ease-out), box-shadow 150ms ease;
}
.pchip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pchip:hover { background: rgba(247, 244, 238, .13); box-shadow: inset 0 0 0 1.5px rgba(233, 162, 59, .55); } }
.pchip__av {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--night-4), var(--night-3));
  box-shadow: inset 0 0 0 2px rgba(233, 162, 59, .55);
}
.pchip__av .pav { width: 36px; height: 36px; }
.pchip__av .pav--x { width: 36px; height: 36px; font-size: 18px; }
.pchip__av--x { color: var(--amber-hi); box-shadow: inset 0 0 0 2px var(--hair-2); }
.pchip__av--x .i { width: 22px; height: 22px; }
.pchip__n { min-width: 0; max-width: 11ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pchip__sw { width: 18px; height: 18px; color: var(--text-3); margin-inline-start: -2px; }
@media (max-width: 520px) {
  .pchip { padding: 3px; gap: 0; }
  .pchip__n, .pchip__sw { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* טלפון: מקום לצ'יפ בשורה העליונה (בחוברת יש בה גם "נשמר", צלילים וחזרה) */
@media (max-width: 440px) {
  .top__in:has(> .top__player) { gap: 8px; }
  .top__player .pchip { min-height: 44px; }
  .top__player .pchip__av { width: 38px; height: 38px; }
  .top__player .pchip__av .pav { width: 32px; height: 32px; }
}
@media (max-width: 374px) {
  .top__in:has(> .top__player) .brand__name { font-size: 18px; }
}

/* קישורים בכותרת התחתונה (למורה · השחקנים במחשב הזה) */
.foot__links { display: inline-flex; flex-wrap: wrap; gap: 0 22px; }

/* ───────────── מסך מלא ───────────── */
html.pov-open, html.pov-open body { overflow: hidden; }
.pov {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: var(--night); color: var(--text);
  font: 400 18px/1.5 var(--font-body);
}
.pov__bg {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(1000px 520px at 50% -160px, rgba(39, 114, 138, .45), transparent 70%),
    radial-gradient(800px 360px at 50% calc(100% + 140px), rgba(233, 162, 59, .16), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 118px, rgba(247, 244, 238, .025) 118px 120px);
}
.pov__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 72px; padding: 10px var(--gutter);
}
.pov__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font: 400 21px/1 var(--font-display); }
.pov__brand .logo { width: 36px; height: 36px; }
.pov__x {
  display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(247, 244, 238, .08); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--hair-2);
  transition: background-color 150ms ease, transform 120ms var(--ease-out);
}
.pov__x .i { width: 26px; height: 26px; }
.pov__x:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .pov__x:hover { background: rgba(247, 244, 238, .15); } }
.pov__body {
  position: relative; flex: 1; width: 100%; max-width: 1120px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--gutter) clamp(28px, 6vh, 64px);
}
.pov__h { display: block; text-align: center; font: 400 clamp(36px, 5.4vw, 60px)/1.1 var(--font-display); letter-spacing: -.005em; color: var(--text); }
.pov__h:focus { outline: none; }

/* ── "מי משחק?" ── */
.ppick {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px;
  width: 100%; margin-top: clamp(22px, 4.5vh, 44px);
}
.ptile {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 12px;
  width: 172px; padding: 18px 12px 16px; border: 0; border-radius: 28px; cursor: pointer;
  background: var(--night-2); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--hair), 0 7px 0 rgba(0, 0, 0, .28);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
}
.ptile__av {
  display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, var(--night-4), var(--night-3) 70%);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18);
}
.ptile__av .pav { width: 98px; height: 98px; }
.ptile__av .pav--x { width: 98px; height: 98px; font-size: 48px; }
.ptile__n { max-width: 100%; min-width: 0; font: 400 24px/1.15 var(--font-display); overflow-wrap: anywhere; text-align: center; }
.ptile:active { transform: translateY(4px); box-shadow: inset 0 0 0 1.5px var(--hair), 0 3px 0 rgba(0, 0, 0, .28); }
@media (hover: hover) and (pointer: fine) {
  .ptile:hover { background: var(--night-3); transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--hair-2), 0 11px 0 rgba(0, 0, 0, .28); }
}
.ptile.is-cur { background: var(--night-3); box-shadow: inset 0 0 0 3px var(--amber), 0 7px 0 var(--amber-deep); }
.ptile--new { background: transparent; box-shadow: inset 0 0 0 2px var(--hair-2); }
.ptile--new .ptile__av { background: rgba(233, 162, 59, .1); box-shadow: inset 0 0 0 3px rgba(233, 162, 59, .55); color: var(--amber-hi); }
.ptile--new .ptile__av .i { width: 52px; height: 52px; stroke-width: 2.4; }
.ptile--new .ptile__n { color: var(--amber-hi); }
@media (hover: hover) and (pointer: fine) { .ptile--new:hover { background: rgba(233, 162, 59, .08); } }
@media (max-width: 600px) {
  .ppick { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
  .ppick > li { display: flex; min-width: 0; }
  .ptile { width: 100%; padding: 12px 6px 12px; gap: 8px; border-radius: 22px; }
  .ptile__av { width: 84px; height: 84px; }
  .ptile__av .pav { width: 70px; height: 70px; }
  .ptile__n { font-size: 19px; }
  .ptile--new .ptile__av .i { width: 40px; height: 40px; }
}

/* ── "מה השם שלך?" ── */
.pnew {
  display: grid; width: min(100%, 1060px); gap: 16px 44px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "card" "pick" "err" "go";
}
.pnew__card {
  grid-area: card; display: grid; justify-items: center; gap: 14px;
  padding: 22px 22px 24px; border-radius: 30px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 8px 0 var(--stone), 0 40px 70px -40px rgba(0, 0, 0, .8);
}
.pnew__av {
  display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2C7C93, var(--teal) 72%);
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .16), 0 0 0 6px rgba(31, 95, 115, .14);
}
.pnew__av .pav { width: 120px; height: 120px; }
.pnew__q { font: 400 72px/1 var(--font-display); color: rgba(247, 244, 238, .55); }
.pnew__h { color: var(--ink); font-size: clamp(32px, 4vw, 44px); }
.pnew__name {
  width: 100%; min-height: 66px; padding: 6px 16px; border: 0; border-radius: 18px;
  background: #fff; color: var(--ink); text-align: center;
  font: 400 32px/1.2 var(--font-display);
  box-shadow: inset 0 0 0 2.5px var(--stone), inset 0 3px 0 rgba(16, 36, 58, .06);
  transition: box-shadow 150ms ease;
}
.pnew__name::placeholder { color: rgba(75, 93, 112, .55); }
.pnew__name:focus { outline: none; box-shadow: inset 0 0 0 3px var(--amber), 0 0 0 4px rgba(233, 162, 59, .25); }
.pnew__pick { grid-area: pick; margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; align-content: start; }
.pnew__lg { padding: 0; font: 400 26px/1.2 var(--font-display); color: var(--text); text-align: center; width: 100%; }
.pnew__err { grid-area: err; min-height: 1.5em; margin: -4px 0 -6px; text-align: center; color: var(--amber-hi); font: 400 24px/1.3 var(--font-display); }
.pnew__go { grid-area: go; display: flex; flex-wrap: wrap-reverse; gap: 12px; justify-content: center; align-items: center; }
.pnew__ok { min-width: 260px; }
.pnew__ok .i { width: 26px; height: 26px; }
.pnew__back { min-height: 52px; }
@media (min-width: 900px) {
  .pnew {
    grid-template-columns: 330px minmax(0, 1fr);
    grid-template-areas: "card pick" "card err" "go go";
    align-items: start;
  }
  .pnew__card { align-self: stretch; align-content: center; }
  .pnew__lg { text-align: start; }
  .pnew__err { text-align: start; }
}
@media (min-width: 1600px) and (min-height: 940px) {
  .pnew { width: min(100%, 1220px); grid-template-columns: 390px minmax(0, 1fr); }
  .pnew__av { width: 180px; height: 180px; }
  .pnew__av .pav { width: 146px; height: 146px; }
  .pnew__lg { font-size: 30px; }
}
@media (max-width: 899px) {
  .pov__body--new { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .pnew { gap: 14px; }
  .pnew__card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h h" "av name"; align-items: center; gap: 12px 14px; padding: 16px; border-radius: 24px; }
  .pnew__h { grid-area: h; font-size: 32px; }
  .pnew__av { grid-area: av; width: 76px; height: 76px; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .16); }
  .pnew__av .pav { width: 62px; height: 62px; }
  .pnew__q { font-size: 40px; }
  .pnew__name { grid-area: name; min-height: 60px; font-size: 26px; }
  .pnew__lg { font-size: 22px; }
  .pnew__ok { width: 100%; min-width: 0; }
  .pnew__back { min-height: 48px; }
}

/* רשת התמונות (גם בעמוד המורה) */
.pavs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pavs__o {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 44px; padding: 0; border: 0;
  border-radius: 20px; cursor: pointer; background: var(--night-2);
  box-shadow: inset 0 0 0 1.5px var(--hair), 0 5px 0 rgba(0, 0, 0, .25);
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms var(--ease-out), background-color 140ms ease, box-shadow 140ms ease;
}
.pavs__o img { width: 78%; height: 78%; object-fit: contain; pointer-events: none; transition: transform 160ms var(--ease-out); }
.pavs__o:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--hair), 0 2px 0 rgba(0, 0, 0, .25); }
@media (hover: hover) and (pointer: fine) {
  .pavs__o:hover { background: var(--night-3); }
  .pavs__o:hover img { transform: scale(1.08); }
}
.pavs__o:has(input:focus-visible) { outline: 3px solid var(--amber-hi); outline-offset: 3px; }
.pavs__o:has(input:checked), .pavs__o.is-on {
  background: rgba(233, 162, 59, .2);
  box-shadow: inset 0 0 0 3px var(--amber), 0 5px 0 var(--amber-deep);
}
.pavs__ck {
  position: absolute; top: -6px; inset-inline-end: -6px; display: none; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--amber); color: var(--amber-ink);
  box-shadow: 0 0 0 3px var(--night);
}
.pavs__ck .i { width: 16px; height: 16px; stroke-width: 3; }
.pavs__o:has(input:checked) .pavs__ck, .pavs__o.is-on .pavs__ck { display: grid; }
@media (max-width: 600px) {
  .pavs { gap: 7px; }
  .pavs__o { border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--hair), 0 3px 0 rgba(0, 0, 0, .25); }
  .pavs__o img { width: 84%; height: 84%; }
  .pavs__ck { width: 22px; height: 22px; top: -5px; inset-inline-end: -5px; }
  .pavs__ck .i { width: 13px; height: 13px; }
}

/* תמונה שכבר של ילד אחר במחשב: מעומעמת, עם השם שלו (אפשר לבחור בה בכל זאת) */
.pavs__o.is-used img { opacity: .42; filter: grayscale(.35); }
.pavs__o.is-used:has(input:checked) img { opacity: 1; filter: none; }
.pavs__who {
  position: absolute; inset-inline: 4px; bottom: 4px; padding: 1px 4px; border-radius: 6px;
  background: rgba(8, 19, 31, .78); color: var(--text-2); font: 600 12px/1.3 var(--font-body);
  text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;
}
.pnew__err .pnew__me { min-height: 48px; margin-inline-start: 8px; font: 600 18px/1 var(--font-body); vertical-align: middle; }

/* ───────────── טלפון לרוחב (גובה < 500px): "מה השם שלך?" ו"מי משחק?" בלי גלילה ─────────────
   הכרטיס (שם) ו"יאללה" מימין, רשת התמונות (8 בשורה) לידם */
@media (max-height: 500px) and (orientation: landscape) {
  .pov__bar { min-height: 48px; padding-block: 4px; }
  .pov__brand { font-size: 18px; }
  .pov__brand .logo { width: 30px; height: 30px; }
  .pov__x { width: 44px; height: 44px; }
  .pov__body { justify-content: flex-start; padding-bottom: 10px; }
  .pov__h { font-size: 30px; }
  .ppick { margin-top: 12px; gap: 10px; }
  .ptile { width: 118px; padding: 8px 6px 10px; gap: 6px; border-radius: 20px; }
  .ptile__av { width: 70px; height: 70px; }
  .ptile__av .pav { width: 58px; height: 58px; }
  .ptile__n { font-size: 18px; }
  .ptile--new .ptile__av .i { width: 34px; height: 34px; }

  .pnew {
    width: 100%; gap: 8px 20px; align-items: start;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    grid-template-areas: "card pick" "err pick" "go pick";
    grid-template-rows: auto auto 1fr;
  }
  .pnew__card { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h h" "av name"; align-items: center; gap: 8px 10px; padding: 12px; border-radius: 20px; }
  .pnew__h { grid-area: h; font-size: 26px; }
  .pnew__av { grid-area: av; width: 56px; height: 56px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16); }
  .pnew__av .pav { width: 46px; height: 46px; }
  .pnew__q { font-size: 30px; }
  .pnew__name { grid-area: name; min-height: 50px; font-size: 22px; padding-inline: 8px; }
  .pnew__lg { font-size: 19px; text-align: start; }
  .pnew__pick { gap: 6px; }
  .pavs { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .pavs__o { border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--hair), 0 3px 0 rgba(0, 0, 0, .25); }
  .pavs__o img { width: 82%; height: 82%; }
  .pavs__ck { width: 20px; height: 20px; top: -4px; inset-inline-end: -4px; }
  .pavs__ck .i { width: 12px; height: 12px; }
  .pavs__who { font-size: 10.5px; inset-inline: 2px; bottom: 2px; }
  .pnew__err { margin: 0; min-height: 0; font-size: 18px; text-align: start; }
  .pnew__go { position: sticky; bottom: 8px; justify-content: stretch; flex-wrap: nowrap; gap: 8px; }
  .pnew__ok { min-width: 0; flex: 1; min-height: 56px; font-size: 24px; }
  .pnew__back { min-height: 52px; padding-inline: 12px; }
  .pnew__back span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ───────────── עמוד המורה: השחקנים במחשב הזה ───────────── */
.pl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; padding-block: 18px 6px; }
.pl-head__t { display: grid; gap: 8px; min-width: 0; }
.pl-head h1 { font: 400 clamp(32px, 4vw, 48px)/1.1 var(--font-display); }
.pl-head h1 small { font: 500 18px/1 var(--font-body); color: var(--text-3); margin-inline-start: 10px; white-space: nowrap; }
.pl-head p { color: var(--text-2); max-width: 62ch; }
.pl-head .btn .i { width: 22px; height: 22px; stroke-width: 2.4; }
.pl-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(247, 244, 238, .05); color: var(--text-3); font-size: 15px; }
.pl-note .i { width: 18px; height: 18px; color: var(--teal-hi); }
.pl-status { min-height: 1.5em; margin-top: 10px; color: var(--good); font-weight: 600; font-size: 16px; }
.pl-list { display: grid; gap: 18px; padding-block: 12px 40px; }

.pl-card { display: grid; gap: 16px; padding: 20px 22px 22px; border-radius: 26px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--hair); min-width: 0; }
.pl-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; }
.pl-card__av { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at 50% 32%, var(--night-4), var(--night-3) 72%); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18); }
.pl-card__av .pav { width: 66px; height: 66px; }
.pl-card__av .pav--x { width: 66px; height: 66px; font-size: 30px; }
.pl-card__who { display: grid; gap: 4px; min-width: 0; }
.pl-card__n { font: 400 30px/1.1 var(--font-display); overflow-wrap: anywhere; }
.pl-card__n:focus { outline: none; }
.pl-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--text-3); font-size: 15px; }
.pl-tot { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 500; }
.pl-tot b { font-weight: 700; font-size: 17px; }
.pl-tot .star, .pl-unit__sum .star { width: 18px; height: 18px; fill: var(--amber); stroke: none; }
.pl-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); opacity: .6; }
.pl-card__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 12px; cursor: pointer; background: rgba(247, 244, 238, .05); color: var(--text-2);
  font: 500 15px/1 var(--font-body); transition: background-color 150ms ease, color 150ms ease;
}
.pl-btn .i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .pl-btn:hover { background: rgba(247, 244, 238, .1); color: var(--text); } }
.pl-btn.is-on { background: rgba(233, 162, 59, .16); color: var(--amber-hi); box-shadow: inset 0 0 0 1.5px rgba(233, 162, 59, .45); }
@media (max-width: 760px) {
  .pl-card { padding: 16px; }
  .pl-card__head { grid-template-columns: auto minmax(0, 1fr); }
  .pl-card__acts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pl-card__av { width: 64px; height: 64px; }
  .pl-card__av .pav { width: 52px; height: 52px; }
  .pl-card__n { font-size: 26px; }
}
@media (max-width: 520px) { .pl-card__acts { grid-template-columns: 1fr 1fr; } }

.pl-panel { display: grid; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--night-3); box-shadow: inset 0 0 0 1px var(--hair-2); }
.pl-panel label { font-weight: 600; font-size: 15px; color: var(--text-2); }
.pl-panel p { color: var(--text-2); }
.pl-panel p b { color: var(--text); }
.pl-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pl-row .btn { min-height: 48px; font-size: 16px; padding: 0 20px; }
.pl-rename input {
  flex: 1 1 200px; min-width: 0; min-height: 50px; padding: 0 14px; border: 0; border-radius: 14px;
  background: var(--paper); color: var(--ink); font: 500 19px/1.2 var(--font-body);
}
.pl-rename input:focus-visible { outline: 3px solid var(--amber-hi); outline-offset: 2px; }
.pl-err { color: var(--amber-hi); font-weight: 600; font-size: 15px; }
.pl-err:empty { display: none; }
.pl-confirm.is-danger { background: rgba(169, 71, 58, .2); box-shadow: inset 0 0 0 1.5px rgba(226, 109, 90, .5); }
.btn--danger { --btn-bg: var(--coral); --btn-fg: #2A0D08; --btn-edge: var(--coral-deep); box-shadow: 0 5px 0 var(--btn-edge); }
.btn--danger:active { box-shadow: 0 2px 0 var(--btn-edge); }
@media (hover: hover) and (pointer: fine) { .btn--danger:hover { --btn-bg: var(--coral-hi); } }
.pavs--sm { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.pavs--sm .pavs__o { border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--hair), 0 3px 0 rgba(0, 0, 0, .25); }
.pavs--sm .pavs__ck { box-shadow: 0 0 0 3px var(--night-3); }

.pl-units { display: grid; gap: 16px; }
.pl-unit { display: grid; gap: 12px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--hair); }
.pl-unit__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; font: 600 17px/1.35 var(--font-body); color: var(--text-2); }
.pl-unit__sum { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 500; }
.pl-unit__sum small { color: var(--text-3); font-size: 14px; font-weight: 400; }
.pl-unit__sum b { font-weight: 700; }
.pl-meet { display: grid; gap: 6px; }
.pl-meet__h { font-size: 14px; font-weight: 600; color: var(--text-3); }
.pl-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 6px; }
.pl-act {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  min-height: 42px; padding: 6px 10px; border-radius: 12px;
  background: rgba(247, 244, 238, .03); color: var(--text-3); font-size: 15px;
}
.pl-act.is-played { background: rgba(247, 244, 238, .07); color: var(--text); }
.pl-act.is-gold { box-shadow: inset 0 0 0 1.5px rgba(233, 162, 59, .45); }
.pl-act__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 1.5px var(--hair-2); font-size: 12px; font-weight: 700; color: var(--text-2); }
.pl-act__t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pl-act__s .star { width: 15px; height: 15px; fill: rgba(247, 244, 238, .13); stroke: none; }
.pl-act__s .star.on { fill: var(--amber); }
.pl-bk { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-3); }
.pl-bk .i { width: 18px; height: 18px; color: var(--good); }

.pl-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 20px 48px; border-radius: 26px; text-align: center; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--hair); }
.pl-empty__avs { display: flex; margin-bottom: 6px; }
.pl-empty__avs .pav { width: 76px; height: 76px; padding: 8px; border-radius: 50%; background: var(--night-3); box-shadow: 0 0 0 5px var(--night-2); }
.pl-empty__avs .pav + .pav { margin-inline-start: -16px; }
.pl-empty h2 { font: 400 28px/1.2 var(--font-display); }
.pl-empty p { color: var(--text-2); max-width: 46ch; }

/* ───────────── תנועה (רק למי שלא ביקש להפחית) ───────────── */
@media (prefers-reduced-motion: no-preference) {
  .pov { transition: opacity 220ms var(--ease-out); }
  .pov__body { transition: transform 320ms var(--ease-out); }
  .pov.is-enter { opacity: 0; }
  .pov.is-enter .pov__body { transform: translateY(16px) scale(.985); }
  .ppick > li { animation: pov-in 360ms var(--ease-out) both; }
  .ppick > li:nth-child(2) { animation-delay: 40ms; } .ppick > li:nth-child(3) { animation-delay: 80ms; }
  .ppick > li:nth-child(4) { animation-delay: 120ms; } .ppick > li:nth-child(n+5) { animation-delay: 160ms; }
  @keyframes pov-in { from { opacity: 0; transform: translateY(14px); } }
  .pnew__av.is-pop .pav { animation: pov-pop 380ms var(--ease-out) both; }
  @keyframes pov-pop { 0% { transform: scale(.55); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
  .is-nudge { animation: pov-nudge 360ms var(--ease-io); }
  @keyframes pov-nudge { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
}
@media (prefers-reduced-motion: reduce) {
  .pchip, .ptile, .pavs__o, .pavs__o img, .pov__x, .pnew__name, .pl-btn { transition: none; }
}
html.demo .pov, html.demo .pov * { animation: none !important; transition: none !important; }