/* Playmaker engine: pitch geometry, players, labels and feedback shared by every school. Loaded first; later layers extend it. */
/*
  Shared pitch appearance.
  This file answers: HOW SHOULD A BBSoB PITCH LOOK?
*/
:root { --pitch-cols: 26; --pitch-rows: 15; }

.bbsob-pitch {
  position: relative;
  width: min(1100px, 96vw);
  aspect-ratio: 1627 / 967;
  margin: 24px auto;
  background: url("school-pitch-master.png") center / 100% 100% no-repeat;
}

/*
  One coordinate layer sits exactly over the 26 x 15 playable grid.
  Every board item is positioned from the centre of a grid square here.
  Shape never changes position: X circles and Y triangles share one anchor rule.
*/
.bbsob-coordinate-layer {
  position: absolute;
  left: 2.03%;
  right: 2.09%;
  top: 3.21%;
  bottom: 3.72%;
}

.bbsob-player {
  position: absolute;
  left: calc((var(--x) - .5) * 100% / var(--pitch-cols));
  top: calc((var(--y) - .5) * 100% / var(--pitch-rows));
  width: calc(78% / var(--pitch-cols));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font: 800 clamp(10px, 1.2vw, 15px) Arial, sans-serif;
  color: #101313;
  z-index: 2;
}

.bbsob-player.team-x {
  border-radius: 50%;
  border: 3px solid #111827;
  background: #fffdf4;
}

.bbsob-player.team-y {
  background: #111827;
  color: #fffdf4;
  clip-path: polygon(50% 2%, 98% 94%, 2% 94%);
  padding-top: .25em;
}

.bbsob-player .st {
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f4e5ad;
  border: 1px solid #4f452d;
  font: 800 11px Arial, sans-serif;
}

/* A board item can use the same x/y coordinate language as a player. */
.bbsob-ball {
  position: absolute;
  left: calc((var(--x) - .5) * (100% / var(--pitch-cols)));
  top: calc((var(--y) - .5) * (100% / var(--pitch-rows)));
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #8b7444;
  background: #f2df9a;
  color: #241b10;
  display: grid;
  place-items: center;
  font: 800 9px Arial, sans-serif;
  box-shadow: 0 0 0 2px #f8f1d7 inset;
  z-index: 4;
}

/* shared interaction vocabulary. */
.bbsob-square {
  position:absolute;
  left:calc((var(--x) - 1) * 100% / var(--pitch-cols));
  top:calc((var(--y) - 1) * 100% / var(--pitch-rows));
  width:calc(100% / var(--pitch-cols));
  height:calc(100% / var(--pitch-rows));
  border:0;
  background:transparent;
  padding:0;
  cursor:crosshair;
  z-index:1;
}
.bbsob-square:hover { outline:2px solid rgba(255,253,244,.72); outline-offset:-2px; }
.bbsob-player { border-style:solid; cursor:default; }
.bbsob-player.movable { cursor:pointer; }
.bbsob-player.selected { outline:3px dashed #f4e5ad; outline-offset:4px; z-index:6; }
.bbsob-player.prone { transform:translate(-50%,-50%) rotate(90deg); opacity:.92; }
.bbsob-player .ball-mark {
  position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  padding:2px 5px; border-radius:8px; background:#f4e5ad; color:#241b10;
  border:1px solid #4f452d; font:800 8px Arial,sans-serif; white-space:nowrap;
}

/* Screens & Space overlays. Everything uses the same x/y grid. */
.bbsob-area-square,.bbsob-control-square,.bbsob-route-square{position:absolute;left:calc((var(--x) - 1)*100%/var(--pitch-cols));top:calc((var(--y) - 1)*100%/var(--pitch-rows));width:calc(100%/var(--pitch-cols));height:calc(100%/var(--pitch-rows));pointer-events:none}
.bbsob-area-square{background:rgba(255,253,244,.055);z-index:0}.bbsob-control-square{background:rgba(244,229,173,.28);z-index:1}.bbsob-route-square{z-index:2;box-shadow:inset 0 0 0 3px rgba(255,253,244,.82)}
.bbsob-marker{position:absolute;left:calc((var(--x) - .5)*100%/var(--pitch-cols));top:calc((var(--y) - .5)*100%/var(--pitch-rows));transform:translate(-50%,-50%);z-index:7;min-width:26px;height:22px;padding:0 5px;border-radius:8px;display:grid;place-items:center;background:#f4e5ad;color:#241b10;border:2px solid #4f452d;font:800 9px Arial,sans-serif;pointer-events:none}

/* make the board problem readable before the learner moves anything. */
.bbsob-marker{
  min-width:48px;height:auto;min-height:30px;padding:4px 7px;border-radius:7px;
  line-height:1.05;gap:2px;
}
.bbsob-marker strong{display:block;font:900 11px Arial,sans-serif}
.bbsob-marker span{display:block;font:800 7px Arial,sans-serif;letter-spacing:.08em;white-space:nowrap}
.bbsob-marker.marker-from{background:#fffdf4;border-color:#111827;color:#111827}
.bbsob-marker.marker-a{background:#ded7bd;border-color:#4f452d;color:#241b10}
.bbsob-marker.marker-b{background:#f4e5ad;border-color:#111827;color:#111827;box-shadow:0 0 0 3px rgba(244,229,173,.30)}
.bbsob-annotation{
  position:absolute;left:calc((var(--x) - .5)*100%/var(--pitch-cols));top:calc((var(--y) - .5)*100%/var(--pitch-rows));
  transform:translate(-50%,-50%);z-index:5;pointer-events:none;white-space:nowrap;
  font:900 8px Arial,sans-serif;letter-spacing:.08em;color:#fffdf4;
  text-shadow:0 1px 2px #06291b,0 0 4px #06291b;
}
.bbsob-annotation.annotation-move{color:#f4e5ad}


/* state-change target label; same shared coordinate language. */
.bbsob-annotation.annotation-target{
  width:calc(100% / var(--pitch-cols));
  height:calc(100% / var(--pitch-rows));
  display:grid;place-items:center;
  background:rgba(244,229,173,.22);
  color:#111827;
  text-shadow:none;
  font:900 12px Arial,sans-serif;
  z-index:6;
}

.course-shell{max-width:1380px;margin:auto;padding:20px}.topnav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}.topnav button{padding:8px 12px}.lesson-head{text-align:center}.boards{display:grid;gap:16px}.boards.multi{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.board-label{text-align:center;color:#f5dfa0;font-weight:800;letter-spacing:.1em}.stepbox{max-width:900px;margin:20px auto;text-align:center}.choices{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.choices button,.nav button{padding:12px 16px;font-weight:800}.feedback{background:#f5e3a7;color:#173b2d;padding:14px;border-radius:10px;margin:14px auto;min-height:22px}.nav{display:flex;gap:10px;justify-content:center;margin-top:16px}.selected-square{outline:4px solid #f5dfa0;outline-offset:-4px}.bbsob-square{z-index:2}.bbsob-player{z-index:4}.bbsob-player.selected{filter:drop-shadow(0 0 5px #fff);outline:3px solid #f5dfa0}.progress{text-align:center;opacity:.7;margin-top:8px}


/* comparison boards must fit their grid column at 100% browser zoom. */
.boards.multi .bbsob-pitch{width:100%;max-width:1100px;}
.boards.multi>div{min-width:0;}

/* carried ball is a sibling overlay, so Y triangle clip-path cannot hide it. */
.ball-mark.carried-ball {
  position:absolute;
  left:calc((var(--x) - .5) * 100% / var(--pitch-cols));
  top:calc((var(--y) - .5) * 100% / var(--pitch-rows));
  transform:translate(-50%, 62%);
  z-index:8;
  padding:2px 5px;
  border-radius:8px;
  background:#f4e5ad;
  color:#241b10;
  border:1px solid #4f452d;
  font:800 8px Arial,sans-serif;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}


/* readability pass after source-vs-migration QA.
   Player identity must remain readable on compact comparison boards.
   Prone Y players keep the sideways triangle, while their label stays upright. */
.bbsob-player .player-label{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:1.7em;
  min-height:1.35em;
  line-height:1;
  font-weight:900;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.bbsob-player.team-x .player-label{text-shadow:none;}
.bbsob-player.team-y.prone .player-label{
  transform:rotate(-90deg);
  background:#111827;
  color:#fffdf4;
  border-radius:3px;
  padding:1px 2px;
  box-shadow:0 0 0 1px rgba(255,253,244,.75);
}
/* Keep the carried-ball badge below the player's identity instead of over it. */
.ball-mark.carried-ball{
  transform:translate(-50%, 105%);
}

/* unified visual pass.
   Keep teaching formations off the centre mark unless the exercise needs centre-field.
   Highlighted approach cells are pitch squares, not floating cards.
   The carried ball is a compact round token. */
html,body{min-height:100%;}
body{
  margin:0;
  background:#7f1717;
  color:#fffdf4;
  font-family:Georgia,"Times New Roman",serif;
}
.course-shell{max-width:1380px;margin:auto;padding:20px 20px 36px;}
.lesson-head p,.progress{color:#f2dada;}
.topnav button,.choices button,.nav button{
  background:#2b0f0d;
  color:#fffdf4;
  border:1px solid #f4d078;
  border-radius:6px;
}
.topnav button:hover,.choices button:hover,.nav button:hover{background:#8b342c;}
.feedback{background:#f4e5ad;color:#241b10;}
.board-label{color:#f4d078;}

.bbsob-highlight-square{
  position:absolute;
  left:calc((var(--x) - 1) * 100% / var(--pitch-cols));
  top:calc((var(--y) - 1) * 100% / var(--pitch-rows));
  width:calc(100% / var(--pitch-cols));
  height:calc(100% / var(--pitch-rows));
  box-sizing:border-box;
  background:rgba(255,253,244,.28);
  box-shadow:inset 0 0 0 2px rgba(255,253,244,.9);
  z-index:1;
  pointer-events:none;
}

.ball-mark.carried-ball{
  width:13px;
  height:13px;
  min-width:13px;
  padding:0;
  border-radius:50%;
  background:#f4e5ad;
  border:2px solid #241b10;
  box-shadow:0 0 0 1px #fffdf4;
  /* Keep the ball visibly attached to its carrier instead of pointing at
     the diagonally adjacent player in a tight cage. */
  transform:translate(68%, -68%);
  font-size:0;
  line-height:0;
}

/* Keep compact comparison symbols legible without changing their square geometry. */
.boards.multi .bbsob-player{font-size:clamp(9px,1vw,13px);}
.boards.multi .bbsob-player .player-label{min-width:1.45em;min-height:1.2em;}

/* Playmaker colour + comparison layout + player-state readability.
   General rule: never render more than two pitches beside each other.
   Use the same deep Playmaker burgundy as the other Playmaker schools. */
body{
  background-color:#2b0f0d;
  background-image:radial-gradient(circle at 50% 12%,rgba(160,62,49,.08),transparent 48%);
  background-attachment:fixed;
}
.lesson-head p,.progress{color:#e6d5cf;}

/* Two pitches maximum per row. 3 => 2 + 1, 16 => 2 x 8. */
.boards.multi{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
}
@media (max-width:820px){
  .boards.multi{grid-template-columns:1fr;}
}

/* Strong, unmistakable prone state: same Y triangle, rotated onto its side,
   with a light silhouette so it cannot disappear into the pitch/skull. */
.bbsob-player.team-y.prone{
  opacity:1;
  filter:
    drop-shadow(1px 0 0 #fffdf4)
    drop-shadow(-1px 0 0 #fffdf4)
    drop-shadow(0 1px 0 #fffdf4)
    drop-shadow(0 -1px 0 #fffdf4);
  z-index:7;
}
.bbsob-player.team-y.prone .player-label{
  min-width:2.1em;
  min-height:1.5em;
  background:#111827;
  color:#fffdf4;
  border:1px solid #fffdf4;
  box-shadow:none;
  font-size:.9em;
}

/* Optical centring: the Y glyph is centred inside the triangle rather than
   inheriting the small old top-padding bias. */
.bbsob-player.team-y{padding-top:0;}
.bbsob-player.team-y .player-label{transform:translateY(12%);}
.bbsob-player.team-y.prone .player-label{transform:rotate(-90deg) translateX(-12%);}

/* final Y-label breathing room.
   Only change: Y-player label text is 0.5px smaller on comparison boards. */
.boards.multi .bbsob-player.team-y .player-label{
  font-size:clamp(8px,calc(1vw - 1px),12px);
}

/* shared interaction contract.
   One pitch has one standard size. Multi-pitch layouts never exceed two columns.
   Repeated board states get an explicit step marker; selection feedback is visible. */
.boards:not(.multi){grid-template-columns:minmax(0,1fr);}
.boards:not(.multi)>div{width:100%;min-width:0;}
.boards:not(.multi) .bbsob-pitch{width:min(1100px,96vw);max-width:100%;}
.step-indicator{
  width:max-content;margin:14px auto 2px;padding:5px 10px;border:1px solid rgba(244,208,120,.65);
  border-radius:999px;color:#f4d078;font:800 12px Arial,sans-serif;letter-spacing:.08em;
}
.feedback[data-kind="wrong"]{box-shadow:inset 0 0 0 2px #7d241f;}
.feedback[data-kind="partial"]{box-shadow:inset 0 0 0 2px #9a7a2f;}
.feedback[data-kind="correct"]{box-shadow:inset 0 0 0 2px #315d43;}
.bbsob-square.selected-square{background:rgba(244,229,173,.30);outline:3px solid #f5dfa0;outline-offset:-3px;}

/* audit fixes.
   Coordinates belong to the logical workbook area, not to the decorative full pitch.
   Selection feedback is deliberately stronger than hover feedback. */
.bbsob-coordinate-label{
  position:absolute;z-index:8;pointer-events:none;color:#fffdf4;background:rgba(36,27,16,.82);
  border:1px solid rgba(244,229,173,.85);border-radius:4px;min-width:17px;height:17px;
  display:grid;place-items:center;font:800 10px Arial,sans-serif;line-height:1;
}
.bbsob-coordinate-label.coord-col{
  left:calc((var(--x) - .5) * 100% / var(--pitch-cols));
  top:calc((var(--y) - 1) * 100% / var(--pitch-rows));transform:translate(-50%,-115%);
}
.bbsob-coordinate-label.coord-row{
  left:calc((var(--x) - 1) * 100% / var(--pitch-cols));
  top:calc((var(--y) - .5) * 100% / var(--pitch-rows));transform:translate(-115%,-50%);
}
.bbsob-square.selected-square{
  background:rgba(255,245,190,.52)!important;
  outline:3px solid #fff4bd!important;outline-offset:-3px!important;
  box-shadow:inset 0 0 0 2px rgba(43,15,13,.65),0 0 9px 3px rgba(255,244,189,.78);
  z-index:3;
}


/* Ball Carrier identity rule.
   The ball itself replaces the X/Y label and sits dead-centre on its carrier.
   This remains unambiguous even in a tight cage or on compact comparison boards. */
.ball-mark.carried-ball{
  left:calc((var(--x) - .5) * 100% / var(--pitch-cols));
  top:calc((var(--y) - .5) * 100% / var(--pitch-rows));
  width:15px;
  height:15px;
  min-width:15px;
  padding:0;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#f4e5ad;
  border:2px solid #241b10;
  box-shadow:0 0 0 1px #fffdf4;
  z-index:8;
  pointer-events:none;
}