/* Game, open run and team practice. Everything here lives inside #gameRoot and
   borrows the app's cards, stats, pills, bars and switches; only the pieces the
   design system has no class for are defined below. Tokens only, so night and
   day both work.

   Two colours carry meaning on this screen and nothing else may use them:
   --cool is a number this app measured from body landmarks, --grape is a
   number a person tapped, said or answered. Every tag also carries the word,
   because colour on its own is not a label in greyscale or to a colour blind
   reader.

   The sideline sheet is the one part of this app designed for a thumb on a
   phone held in one hand at the side of a court. Its targets are 64px tall at
   the smallest, nothing on it needs a second tap to confirm, and undo is the
   same size as the actions it undoes. */

.gmwrap{display:block}
.gmsub{color:var(--mute);font-size:12.5px;line-height:1.55}
.gmerr{border-color:var(--bad)}
.gmerr p{color:var(--bad);font-size:13.5px}
.gmgo{margin-top:14px}
.btn-wide{width:100%}
.gmwrap .card{margin-bottom:14px}

/* --------------------------------------------- where a number came from */
.gmtag{
  display:inline-block;padding:4px 9px;border-radius:999px;border:1px solid currentColor;
  font:800 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;font-style:normal;
  vertical-align:middle;margin-left:8px;
}
.gmtag.measured{color:var(--cool)}
.gmtag.logged{color:var(--grape)}

/* A measured score wears its element colour. Those five colours were chosen
   for the dark stage in the training view and two of them, Electricity and
   Earth, land near 2:1 on a white card. The number is the headline of the
   whole measured block, so day gets its own inks: same hue, dark enough to
   read. The bar underneath keeps the true colour, because a 6px fill against
   the track carries no text. */
.gmel{color:var(--elc,var(--ink))}
.gmel[data-el="fire"]{--elc:#ff6a1f}
.gmel[data-el="electricity"]{--elc:#ffd23f}
.gmel[data-el="earth"]{--elc:#8bc34a}
.gmel[data-el="water"]{--elc:#2ea8ff}
.gmel[data-el="air"]{--elc:#c9d6ff}
:root[data-theme="day"] .gmel[data-el="fire"]{--elc:#c23c00}
:root[data-theme="day"] .gmel[data-el="electricity"]{--elc:#8a6300}
:root[data-theme="day"] .gmel[data-el="earth"]{--elc:#3f6b13}
:root[data-theme="day"] .gmel[data-el="water"]{--elc:#0a63ab}
:root[data-theme="day"] .gmel[data-el="air"]{--elc:#4b5565}
/* --cool on white is 3.6:1, under the 4.5:1 a nine pixel label needs. */
:root[data-theme="day"] .gmtag.measured{color:#0a63ab}

.gmhonest p{color:var(--mute);font-size:12.5px;line-height:1.6;margin-bottom:8px}
.gmhonest p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- the list */
.gmlist{display:grid;gap:12px}
.gmrow{cursor:pointer;transition:.16s}
.gmrow:hover{border-color:var(--hot);transform:translateY(-1px)}
.gmrowhead{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.gmrowhead b{display:block;font:800 16px/1.2 var(--mono);letter-spacing:-.4px}
.gmrowhead small{display:block;color:var(--mute);font-size:12px;margin-top:3px}
.gmrowhead .pill{margin-left:auto;flex:none}
.gmmini{display:flex;gap:16px;flex-wrap:wrap}
.gmmini span{font:700 11px/1.3 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.8px}
.gmmini b{display:block;font:800 20px/1 var(--mono);color:var(--hot);letter-spacing:-.6px;margin-bottom:3px}
.gmrowtags{margin-top:12px}
.gmrowtags .gmtag:first-child{margin-left:0}

/* ------------------------------------------------------------ the setup */
.gmkinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:12px}
.gmkind{
  text-align:left;padding:15px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
  transition:.16s;color:var(--ink);
}
.gmkind:hover{border-color:var(--hot)}
.gmkind.on{border-color:var(--hot);background:rgba(255,90,31,.10)}
.gmkind b{display:block;font:800 15px/1.2 var(--mono);margin-bottom:5px}
.gmkind small{display:block;color:var(--mute);font-size:12px;line-height:1.5}

.gmin{
  width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font-size:14px;
}
.gmin:focus{outline:2px solid var(--hot);outline-offset:1px}
.gmtitle{margin-top:4px}

.gmrosts{display:grid;gap:9px;margin-bottom:12px}
.gmrost{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gmrost .gmin{flex:1 1 150px;min-width:0}
.gmsel{flex:1 1 180px}
.gmtrack{
  flex:none;padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);
  font:800 10px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--mute);transition:.16s;
}
.gmtrack:hover{color:var(--ink);border-color:var(--cool)}
.gmtrack.on{color:var(--cool);border-color:var(--cool);background:rgba(46,168,255,.12)}
.gmx{flex:none;width:40px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);color:var(--mute);font-size:20px;line-height:1}
.gmx:hover{color:var(--bad);border-color:var(--bad)}
.gmrow2{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.gmnote{margin:4px 0 10px 18px;color:var(--mute);font-size:12.5px;line-height:1.6}

/* ---------------------------------------------------------- the live run */
.gmclock{font:800 22px/1 var(--mono);color:var(--hot);letter-spacing:-.6px}
.gmlive{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:14px;align-items:start}
.gmstage{display:grid;gap:14px;min-width:0}
.gmvid{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#0b0f16}
.gmvid video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.gmvid canvas{position:absolute;inset:0;width:100%;height:100%}
.gmoff{position:absolute;inset:0;display:grid;place-content:center;padding:24px;text-align:center;background:rgba(7,9,13,.72)}
.gmoff p{color:#c9d6ff;font-size:13.5px;line-height:1.6;max-width:320px}
.gmcamoff{margin-bottom:0!important}
.gmcamoff p{color:var(--mute);font-size:13px;line-height:1.6}
.gmhud{margin-bottom:0!important}
.gmhud h3{display:flex;align-items:center;gap:0;flex-wrap:wrap}

.gmmeas{margin-top:12px}
.gmmrow{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.gmmrow:last-child{border-bottom:0}
.gmmrow span{flex:1;font-size:13px}
.gmmrow b{font:800 18px/1 var(--mono)}
.gmmrow small{color:var(--mute);font-size:11px;width:56px;text-align:right}

/* -------------------------------------------------- the sideline sheet */
.gmsheet{
  position:sticky;top:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;display:grid;gap:12px;
}
.gmwho{display:flex;gap:8px;flex-wrap:wrap}
.gmwhob{
  flex:1 1 90px;padding:14px 10px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);
  font:800 13px/1.2 var(--mono);color:var(--mute);transition:.14s;min-height:52px;
}
.gmwhob.on{color:var(--ink);border-color:var(--hot);background:rgba(255,90,31,.14)}
.gmcam{display:block;width:8px;height:8px;border-radius:50%;background:var(--cool);margin:5px auto 0}

.gmbar{display:flex;gap:9px}
.gmclutch,.gmundo{
  flex:1;min-height:56px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
  font:800 12px/1.2 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--mute);transition:.14s;
}
.gmclutch:hover,.gmundo:hover:not(:disabled){color:var(--ink);border-color:var(--hot)}
.gmclutch.on{color:var(--grape);border-color:var(--grape);background:rgba(157,107,255,.14)}
.gmundo{color:var(--ink)}

.gmgrp h4{font:800 9px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.gmkeys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gmkey{
  min-height:64px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
  font:700 10px/1.25 var(--mono);letter-spacing:.7px;text-transform:uppercase;color:var(--mute);
  transition:transform .08s,border-color .14s,background .14s;padding:8px 4px;
}
.gmkey b{display:block;font:800 14px/1.15 var(--mono);color:var(--ink);letter-spacing:-.2px}
.gmkey:hover{border-color:var(--hot)}
.gmkey:active{transform:scale(.94)}
.gmkey.good:hover{border-color:var(--good)}
.gmkey.good:active{background:rgba(34,217,122,.16);border-color:var(--good)}
.gmkey.bad:hover{border-color:var(--bad)}
.gmkey.bad:active{background:rgba(255,59,92,.16);border-color:var(--bad)}
.gmkey:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

.gmtape{max-height:140px;overflow:auto;display:grid;gap:4px;align-content:start}
.gmtapel{display:flex;gap:9px;font:600 12px/1.4 var(--mono);color:var(--mute);padding:4px 0;border-bottom:1px solid var(--line)}
.gmtapel:last-child{border-bottom:0}
.gmtapel span{color:var(--hot);font-weight:800;flex:none;width:44px}

/* ------------------------------------------------------------- the card */
.gmplayer .gmphead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.gmplayer .gmphead h3{margin-bottom:0;font:800 17px/1.2 var(--mono);letter-spacing:-.4px;color:var(--ink);text-transform:none}
.gmsect{margin-bottom:20px}
.gmsect:last-child{margin-bottom:0}
.gmsect h4{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;
  font:800 10px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--mute);margin-bottom:11px;
}
.gmsect .stat small{line-height:1.3;overflow-wrap:anywhere}

.gmmcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.gmmcard{background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:13px}
.gmmtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.gmmtop span{font:700 12px/1.2 var(--mono);color:var(--ink)}
.gmmtop b{font:800 24px/1 var(--mono);letter-spacing:-.8px}
.gmmcard small{display:block;color:var(--mute);font-size:11px;margin-top:8px;line-height:1.5}
.gmcal{margin-top:5px!important;font-weight:700;letter-spacing:.3px}
.gmcal.rough{color:var(--hot)}
:root[data-theme="day"] .gmcal.rough{color:#a83200}
.gmreport{line-height:1.7;white-space:pre-wrap}

.gmscale{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.gmscale span{flex:1 1 70px;font:700 12px/1 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:1px}
.gmdot{
  width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
  font:800 15px/1 var(--mono);color:var(--mute);transition:.14s;
}
.gmdot:hover{border-color:var(--hot);color:var(--ink)}
.gmdot.on{border-color:var(--hot);background:rgba(255,90,31,.16);color:var(--hot)}

/* --------------------------------------------------------- the playback */
.gmplay{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:14px;align-items:start}
.gmplay .gmvid video{transform:none;object-fit:contain;background:#000}
.gmtrack2{margin:12px 0 14px}
.gmticks{position:relative;height:34px;border-radius:9px;background:var(--panel2);border:1px solid var(--line)}
.gmtick{
  position:absolute;top:7px;width:4px;height:18px;border-radius:2px;padding:0;border:0;
  transform:translateX(-2px);cursor:pointer;
}
.gmtick:hover{height:26px;top:3px}
.gmtick.logged{background:var(--grape)}
.gmtick.measured{background:var(--cool)}
.gmhead2{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--hot);box-shadow:0 0 10px var(--hot);left:0;pointer-events:none}
.gmlegend{display:flex;align-items:center;gap:7px;margin-top:9px;font:700 10px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--mute);flex-wrap:wrap}
.gmlegend .gmtick{position:static;transform:none;width:10px;height:10px;border-radius:3px;margin-left:12px;pointer-events:none}
.gmlegend .gmtick:first-child{margin-left:0}
.gmread p{font-size:14.5px;line-height:1.65}
.gmfeedcard{position:sticky;top:14px}
.gmfeed{max-height:460px;overflow:auto;display:grid;gap:6px;align-content:start}
.gmfe{display:flex;gap:9px;padding:8px 10px;border-radius:9px;background:var(--panel2);border-left:3px solid var(--grape);font-size:12.5px;line-height:1.45}
.gmfe.measured{border-left-color:var(--cool)}
.gmfet{flex:none;font:800 11px/1.45 var(--mono);color:var(--hot);width:42px}

/* ----------------------------------------------------------------- day */
:root[data-theme="day"] .gmvid{background:#0b0f16}
:root[data-theme="day"] .gmkind.on{background:rgba(255,90,31,.08)}
:root[data-theme="day"] .gmwhob.on{background:rgba(255,90,31,.10)}
:root[data-theme="day"] .gmoff p{color:#f2f5fa}

/* --------------------------------------------------------------- phone
   One column, and the sheet goes FIRST. Somebody standing on a sideline with
   one hand on a phone has to reach the buttons without scrolling past a video
   they are not looking at, so the stage drops below the sheet and is capped at
   about a third of the screen. The action grid keeps three across: a thumb
   reaching a quarter of the way across a phone is the whole point. */
@media (max-width:900px){
  .gmlive,.gmplay{grid-template-columns:minmax(0,1fr)}
  .gmlive{display:flex;flex-direction:column}
  .gmlive .gmsheet{order:1}
  .gmlive .gmstage{order:2}
  .gmsheet,.gmfeedcard{position:static}
  .gmvid{aspect-ratio:auto;height:34vh;min-height:180px}
  .gmkey{min-height:70px}
  .gmfeed{max-height:300px}
}
@media (max-width:420px){
  .gmkeys{gap:6px}
  .gmkey{min-height:66px;font-size:9px}
  .gmkey b{font-size:13px}
}