/* ---------------------------------------------------------------------------
   Coaching → Game plan (src/gameplan_view.js) — "In the room" (src/room.css
   is the furniture): windows in the film room. The opponent on a window in
   his own colours, who calls the plan, the scouting report, then a tile per
   decision in plain words; the walkthrough is one window a call at a time,
   the coordinator talking in a dialogue box over big choice tiles.

   Solid saturated colour, 3px ink frames with cut corners, never a radius,
   a pale tint or a stripe, no emoji, no raw numbers, nothing at regular
   weight, and the gold cursor on what you point at.
--------------------------------------------------------------------------- */
.gp .plink { color: inherit; text-decoration: none; }
.gp .plink:hover { color: inherit; text-decoration: underline; }
.pxface.gp-f32 { width: 32px; height: 32px; display: block; }
.pxface.gp-f48 { width: 48px; height: 48px; display: block; }
.pxface.gp-f64 { width: 64px; height: 64px; display: block; }
/* a face in the plan: framed, on the club colour it is drawn for */
.gp .pxface.gp-f32, .gp .pxface.gp-f48 { flex: none; margin: 2px; background: var(--tm); box-shadow: var(--frame-2); image-rendering: pixelated; }

/* --- the top: who we play, who calls the plan ------------------------------------ */
/* the two top windows stand the same height */
.gp-top { align-items: stretch; }
.gp-top > .rm-stack { align-content: stretch; }
.gp-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.gp-crest { flex: none; display: grid; place-items: center; width: 84px; height: 84px; margin: 3px; background: #fff; box-shadow: var(--frame); }
.gp-logo { width: 64px; height: 64px; object-fit: contain; }
.gp-recs { flex: 1 1 180px; max-width: 360px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-launch { margin-left: auto; display: flex; }
.gp-kick { font: 900 11px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; }

.gp-ctl { display: grid; gap: 8px; align-content: start; }
.gp-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gp-m {
  margin: 3px; padding: 11px 12px 9px 30px; cursor: pointer; border: 0; text-align: left;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame);
  font: 400 22px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.gp-m:hover:not(.on) { background: var(--card-hov); color: var(--card-ink); }
.gp-m.on { background: var(--gold); color: var(--ink); }
.gp-m.on::before { background-image: var(--cur-ink); }
.gp-reset { justify-self: start; }

/* --- headings ------------------------------------------------------------------------ */
.gp-h3 { margin: 0 0 6px; font: 900 10.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }

/* --- the scouting report --------------------------------------------------------------- */
.gp-scout .rm-wb { display: grid; gap: 12px; }
.gp-units { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.gp-unit { display: grid; gap: 6px; justify-items: center; align-content: start; margin: 3px; padding: 9px 6px 8px; text-align: center;
  background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.gp-unit-k { font: 900 10px/1.15 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--card-ink); }
.gp-grade { margin: 2px; padding: 5px 9px 4px; box-shadow: var(--frame-2); color: #fff;
  font: 400 20px/1 var(--disp); text-transform: uppercase; letter-spacing: .5px; }
/* for you: their weak unit is good news, their strong one is danger */
.gp-grade.g5 { background: #e11d48; }
.gp-grade.g4 { background: #f97316; }
.gp-grade.g3 { background: #ffd34d; color: var(--ink); }
.gp-grade.g2 { background: #0b7a2e; }
.gp-grade.g1 { background: #064e2b; }
.gp-unit-r { font: 400 18px/1 var(--disp); color: var(--soft); }
.gp-lines { display: grid; gap: 6px; font: 800 15px/1.4 var(--sans); }
.gp-lines b { font-weight: 900; }
.gp-line { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.gp-line .gp-tw:empty::after { content: '\00a0'; }
.gp-dot { flex: none; width: 10px; height: 10px; background: var(--gold); box-shadow: var(--frame-2); }
.gp-people { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 3px; padding: 4px 12px 4px 4px;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.gp-chip-t { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.gp-chip-t b { font: 900 13px var(--sans); white-space: nowrap; }
.gp-chip-t i { font: 900 10px var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--card-ink); }

/* --- the plan: a tile per decision ---------------------------------------------------- */
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.gp-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 3px; padding: 10px 12px 12px;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
/* a call you made yourself wears a gold ring */
.gp-card.mine { box-shadow: var(--frame), inset 0 0 0 3px var(--tm); }
.gp-ch { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 26px; }
.gp-ct { margin-right: auto; font: 900 10.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--card-ink); }
.gp-big { font: 400 34px/.95 var(--disp); text-transform: uppercase; letter-spacing: .5px; overflow-wrap: anywhere; }
.gp-opts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; align-items: center; }
.gp-o {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; margin: 3px; padding: 6px 10px 5px; cursor: pointer; border: 0; text-align: left;
  background: #fff; color: var(--ink); box-shadow: var(--frame);
  font: 400 17px/1 var(--disp); text-transform: uppercase; letter-spacing: .5px;
}
.gp-o .pxface.gp-f32 { margin: 0; }
.gp-o em { padding: 3px 5px 2px; background: var(--ink); color: var(--gold); box-shadow: 0 0 0 2px #000;
  font: 900 9.5px/1 var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
button.gp-o:hover:not(.on) { background: var(--gold); }
button.gp-o:active { transform: translateY(2px); }
.gp-o.on { background: var(--gold); color: var(--ink); box-shadow: var(--frame), inset 0 -3px 0 0 var(--gold-dk); }
span.gp-o { cursor: default; }

/* the key matchup: your corner against their receiver */
.gp-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.gp-side { display: grid; gap: 4px; justify-items: center; text-align: center; min-width: 0; }
.gp-side .pxface.gp-f64, .gp-nof { margin: 3px; background: var(--tm); box-shadow: var(--frame); image-rendering: pixelated; }
.gp-nof { width: 64px; height: 64px; background: var(--ink); }
.gp-side b { font: 900 13px/1.15 var(--sans); overflow-wrap: anywhere; }
.gp-side i { font: 900 10px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--card-ink); }
.gp-vs-x { font: 400 30px/1 var(--disp); text-transform: uppercase; color: var(--card-ink); }
.gp-sel-l { display: inline-flex; align-items: center; gap: 8px; margin: 3px; font: 900 10.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--card-ink); }
.gp-sel { max-width: 100%; }

/* --- the walkthrough: one window, a call at a time ------------------------------------ */
.gp-walk .rm-wb { display: flex; flex-direction: column; gap: 14px; }
.gp-prog { display: inline-flex; align-items: center; }
.gp-dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.gp-dots i { display: block; width: 10px; height: 10px; background: var(--ink); box-shadow: 0 0 0 2px #000; }
.gp-dots i.done { background: #fff; }
.gp-dots i.on { background: var(--gold); }
.gp-sl { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gp-sl-t { font: 400 44px/.95 var(--disp); text-transform: uppercase; letter-spacing: .5px; overflow-wrap: anywhere; }
/* the opponent, on a plate in his own colours */
.gp-sl-intro .gp-sl-hero { display: flex; align-items: center; gap: 14px; margin: 3px; padding: 12px 14px;
  background: var(--tm); color: var(--on-tm); box-shadow: var(--frame); }
.gp-logo.big { width: 64px; height: 64px; }

/* the slow reveal: hidden until the stager shows it */
.gp-sl [data-stage] { visibility: hidden; }
.gp-sl [data-stage].show { visibility: visible; }
.gp-sl .gp-units [data-stage] { visibility: visible; opacity: 0; transform: translateY(6px); }
.gp-sl .gp-units [data-stage].show { opacity: 1; transform: none; transition: opacity 0.25s steps(3), transform 0.25s steps(3); }

/* the coordinator in the room's dialogue box: portrait, gold name, the line */
.gp-say { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 3px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); border-top: 3px solid var(--gold);
  --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.gp-say-f { padding: 12px; background: var(--tm); border-right: 3px solid var(--ink); }
.gp-say-f .rm-fc { margin: 2px; }
.gp-say-b { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px 14px; }
.gp-say-n { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.gp-say-n b { font: 400 26px/.9 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--card-ink); }
.gp-say-n small { font: 900 10.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.gp-say-p { margin: 0; min-height: 1.4em; font: 800 16px/1.4 var(--sans); }
.gp-say-c { display: flex; flex-wrap: wrap; gap: 6px; }

/* a unit's rank as a chip, and a man with his number */
.gp-uc { display: inline-grid; gap: 4px; justify-items: center; margin: 3px; padding: 7px 10px 6px; text-align: center;
  background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.gp-uc i { font: 900 9.5px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--card-ink); }
.gp-uc .gp-grade { font-size: 18px; }
.gp-uc small { font: 400 16px/1 var(--disp); color: var(--soft); }
.gp-pc { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 3px; padding: 4px 8px 4px 4px;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.gp-pc-t { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.gp-pc-t b { font: 900 13px var(--sans); white-space: nowrap; }
.gp-pc-t i { font: 900 9.5px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--card-ink); white-space: nowrap; }
.gp-ovr { flex: none; padding: 4px 7px 3px; background: #fff; color: var(--ink); box-shadow: var(--frame-2); font: 400 18px/1 var(--disp); font-style: normal; }

/* the choices: big word tiles, the cursor on the one you point at, gold for yours */
.gp-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.gp-tiles.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-tiles.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gp-tiles.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gp-tiles.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gp-tile {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 3px 3px 9px; padding: 26px 12px 12px; cursor: pointer; border: 0; text-align: left;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame), 0 6px 0 0 var(--ink); font: inherit; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.gp-tile::before { content: ''; position: absolute; right: 10px; top: 8px; width: 14px; height: 22px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden; transform: scaleX(-1); }
.gp-tile:hover:not(.on) { background: var(--card-hov); color: var(--card-ink); }
.gp-tile:hover::before, .gp-tile:focus-visible::before, .gp-tile.on::before { visibility: visible; }
.gp-tile:active { transform: translateY(3px); box-shadow: var(--frame), 0 3px 0 0 var(--ink); }
.gp-tile.on { background: var(--gold); color: var(--ink); transform: translateY(3px); box-shadow: var(--frame), 0 3px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk); }
.gp-tile.on::before { background-image: var(--cur-ink); }
.gp-tile-p { display: flex; align-items: center; gap: 8px; }
.gp-tile-l { font: 400 26px/.95 var(--disp); text-transform: uppercase; letter-spacing: .5px; overflow-wrap: anywhere; }
.gp-tile-c { font: 800 12.5px/1.35 var(--sans); color: var(--soft); }
.gp-tile.on .gp-tile-c { color: var(--ink); }
.gp-rib { position: absolute; top: 0; left: 8px; z-index: 1; padding: 4px 7px 3px; background: var(--gold); color: var(--ink); box-shadow: var(--frame-2);
  font: 900 9.5px/1 var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.gp-tile.on .gp-rib { background: var(--ink); color: var(--gold); }

/* back / next */
.gp-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gp-nav .gp-next { margin-left: auto; }

/* the summary: every call as a row, yours in gold */
.gp-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.gp-sum-s { display: grid; gap: 4px; min-width: 0; }
.gp-sum .rm-sec { margin-top: 0; }
.gp-sum-r {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-width: 0; margin: 3px; padding: 9px 12px 8px 30px;
  cursor: pointer; border: 0; text-align: left; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); font: inherit; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.gp-sum-r:hover { background: var(--card-hov); color: var(--card-ink); }
.gp-sum-t { font: 900 10.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--card-ink); }
.gp-sum-v { font: 400 22px/1 var(--disp); text-transform: uppercase; letter-spacing: .4px; text-align: right; overflow-wrap: anywhere; }
.gp-sum-r em { font-style: normal; }

/* --- snap shares: a pixel slider per man ---------------------------------------------- */
.gp-ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 10px; margin-bottom: 10px; }
.gp-ss-g { min-width: 0; margin: 3px; padding: 10px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.gp-ss-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 30px; margin-bottom: 8px; }
.gp-ss-h .gp-ct { font-size: 12px; }
.gp-ss-rows { display: grid; gap: 8px; }
.gp-ss-r {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "f n v" "s s s" "b b b";
  align-items: center; column-gap: 10px; row-gap: 2px; min-width: 0; margin: 2px; padding: 8px 10px 6px;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame-2);
}
.gp-ss-r > .pxface { grid-area: f; }
.gp .gp-ss-r .pxface.gp-f32 { margin: 0; }
.gp-ss-n { grid-area: n; display: grid; gap: 3px; min-width: 0; }
.gp-ss-n b { font: 800 15px/1.1 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-ss-n b a { color: inherit; }
.gp-ss-n i { font: 900 10.5px/1 var(--sans); font-style: normal; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); }
.gp-ss-v { grid-area: v; min-width: 70px; text-align: right; font: 400 32px/1 var(--disp); color: var(--card-ink); }
.gp-ss-b { grid-area: b; display: flex; flex-wrap: wrap; gap: 2px; }
.gp-ss-s { grid-area: s; position: relative; height: 44px; --v: 0; --c: 0; }
/* the coach's number: a white notch above and below the track */
.gp-ss-tick {
  position: absolute; top: 5px; bottom: 5px; width: 4px; pointer-events: none;
  left: calc(13px + (100% - 26px) * var(--c) / 100 - 2px); background: #fff; box-shadow: 0 0 0 2px var(--ink);
}
.gp-ss-s input[type=range] {
  position: relative; z-index: 1; -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; box-shadow: none;
}
.gp-ss-s input[type=range]::-webkit-slider-runnable-track {
  height: 16px; border: 0;
  background: linear-gradient(to right, var(--gold) 0, var(--gold) calc(var(--v) * 1%), var(--ink) calc(var(--v) * 1%), var(--ink) 100%);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px #fff;
}
.gp-ss-s input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 38px; margin-top: -11px; border: 0; border-radius: 0;
  background: #fff; box-shadow: 0 0 0 3px var(--ink), inset 0 -6px 0 0 var(--steel), inset 0 4px 0 0 #fff;
}
.gp-ss-s input[type=range]::-moz-range-track {
  height: 16px; border: 0;
  background: linear-gradient(to right, var(--gold) 0, var(--gold) calc(var(--v) * 1%), var(--ink) calc(var(--v) * 1%), var(--ink) 100%);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px #fff;
}
.gp-ss-s input[type=range]::-moz-range-thumb {
  width: 26px; height: 38px; border: 0; border-radius: 0;
  background: #fff; box-shadow: 0 0 0 3px var(--ink), inset 0 -6px 0 0 var(--steel);
}
.gp-ss-s input[type=range]:hover::-webkit-slider-thumb, .gp-ss-s input[type=range]:active::-webkit-slider-thumb { background: var(--gold); box-shadow: 0 0 0 3px var(--ink), inset 0 -6px 0 0 var(--gold-dk); }
.gp-ss-s input[type=range]:hover::-moz-range-thumb, .gp-ss-s input[type=range]:active::-moz-range-thumb { background: var(--gold); }
.gp-ss-s input[type=range]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* --- phone ------------------------------------------------------------------------------ */
@media (max-width: 720px) {
  .gp-launch { margin-left: 0; width: 100%; }
  .gp-launch .rm-btn { flex: 1; }
  .gp-crest { width: 72px; height: 72px; }
  .gp-sl-t { font-size: 30px; }
  .gp-tiles, .gp-tiles.n2, .gp-tiles.n3, .gp-tiles.n4, .gp-tiles.n5 { grid-template-columns: 1fr; }
  .gp-tile { padding-top: 24px; }
  .gp-sum { grid-template-columns: minmax(0, 1fr); }
  .gp-sum-r { grid-template-columns: minmax(0, 1fr) auto; padding-left: 12px; }
  .gp-sum-r.rm-pt::before { display: none; }
  .gp-sum-v { grid-column: 1; text-align: left; }
  .gp-sum-r em { grid-column: 2; grid-row: 1 / span 2; }
  .gp-sum-t { grid-column: 1; }
  .gp-say { grid-template-columns: minmax(0, 1fr); }
  .gp-say-f { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-right: 0; border-bottom: 3px solid var(--ink); }
  .gp-say-n b { font-size: 23px; }
  .gp-say-p { font-size: 15px; }
  .gp-tile-l { font-size: 22px; }
  .gp-units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gp-people { grid-template-columns: 1fr; }
  .gp-big { font-size: 30px; }
  .gp-m { font-size: 19px; }
  .gp-o { font-size: 15px; }
  .gp-dots i { width: 8px; height: 8px; }
  .gp-ss-g { padding: 8px 6px; }
  .gp-ss-r { padding: 8px 8px 6px; column-gap: 8px; }
  .gp-ss-v { min-width: 58px; font-size: 28px; }
}

/* Coaching tables are white rows now (room.css .rm-tbl): a coach's small
   caption there is ink, and your own row keeps the club's words */
#app .rm-tbl .co-who .n small { color: var(--card-ink); }
#app .rm-tbl tr.me .co-who .n small { color: var(--on-tm); }