/* The scoreboard in the corner: this visit's scores, the bot pilots' and yours
   (task N3; src/ui/board.js builds it, src/scoreboard.js holds the numbers).
   styles.css only says where #botBoard sits - top right, under the g meter,
   beside the button column. Everything inside it is dressed here.

   #botBoard          the box index.html keeps for it (placed by styles.css)
     .sbBox           the panel. .sbAlone: nobody but you on it - not drawn at all
       .sbHead        the little title
       .sbRow x5      place, name, arrow, points. .sbYou: your row. .sbOff: not needed
                      data-move="up" | "down": it has just changed places

   It is something to LOOK at, never to press: touches fall through it to the
   steering (styles.css gives the box pointer-events:none and nothing here
   takes them back). It lives in #hud, so the crash card, the hangar and
   PHOTO MODE put it away with everything else. */
.sbBox{width:212px;padding:6px 6px 7px;border-radius:12px;background:var(--panel);border:1px solid var(--edge);
  font-variant-numeric:tabular-nums}
.sbBox.sbAlone{display:none}
.sbHead{margin:0 5px 4px;font-size:8px;font-weight:800;letter-spacing:.16em;color:var(--dim);white-space:nowrap}
.sbRow{display:flex;align-items:center;gap:5px;height:22px;padding:0 6px;border-radius:7px;
  font-size:12.5px;font-weight:800;line-height:1;white-space:nowrap}
.sbRow.sbOff{display:none}
/* YOUR row: the game's own blue, behind and round it - the one to find at a glance */
.sbRow.sbYou{background:rgba(77,208,255,.2);box-shadow:inset 0 0 0 1.5px var(--accent)}
.sbRank{flex:0 0 13px;text-align:right;font-style:normal;font-size:10px;color:var(--dim)}
.sbRow.sbYou .sbRank{color:var(--ink)}
/* the name in the pilot's own colour (set on the element); a dark edge keeps the deep reds readable on the panel */
.sbName{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:800;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 1px rgba(0,0,0,.9)}
.sbPts{flex:0 0 auto;min-width:38px;text-align:right;color:var(--ink)}
/* the arrow: an empty slot until the row moves, so nothing jumps sideways when it shows */
.sbArrow{flex:0 0 12px;text-align:center;text-decoration:none;font-size:11px;line-height:1}
.sbRow[data-move="up"] .sbArrow::before{content:"\25B2";color:#5ee07a}
.sbRow[data-move="down"] .sbArrow::before{content:"\25BC";color:#ff8a6b}
.sbRow[data-move="up"] .sbArrow,.sbRow[data-move="down"] .sbArrow{animation:sbPop .35s ease-out}
@keyframes sbPop{from{transform:scale(2)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.sbRow .sbArrow{animation:none !important}}

/* A desk or a TV: the HUD grows a notch there (styles.css, BIG SCREENS), and so does this. */
@media (min-width:1400px){
  .sbBox{width:252px;padding:8px 8px 9px}
  .sbHead{font-size:9px}
  .sbRow{height:26px;font-size:14.5px;gap:6px}
  .sbRank{flex-basis:15px;font-size:11px}
  .sbArrow{flex-basis:14px;font-size:13px}
}
/* A small screen - under 700 px wide (a phone held upright), or a phone on its
   side: three rows (SMALL_SCREEN in src/ui/board.js asks the same question),
   and smaller ones. The arrow's slot is only there while a row is moving, so
   the name gets every pixel the rest of the time. */
@media (max-width:699px), (orientation:landscape) and (max-height:480px){
  .sbBox{width:164px;padding:4px 4px 5px;border-radius:10px}
  .sbHead{font-size:7px;margin:0 4px 3px}
  .sbRow{height:19px;font-size:11px;gap:4px;padding:0 4px;border-radius:6px}
  .sbRank{flex-basis:11px;font-size:9px}
  .sbArrow{display:none;flex-basis:10px;font-size:9.5px}
  .sbRow[data-move="up"] .sbArrow,.sbRow[data-move="down"] .sbArrow{display:block}
  .sbPts{min-width:32px}
}
/* On its side the box sits between the takeoff bar and the two button columns: 150 px is what there is.
   styles.css puts it level with the foot of the gauges, where its corner just touches the g meter's
   (when AEROBATICS is on); a dozen pixels lower it is clear of both. */
@media (orientation:landscape) and (max-height:480px){
  #botBoard{top:calc(64px + var(--safeT))}
  .sbBox{width:150px}
}