/*
 * Shared game bar — desktop home-screen spec section 7 region B (REQ-1261).
 *
 * The stylesheet half of packages/browser-shared/game-bar-component.js: read that file's header for
 * why the component lives here and how both surfaces load it. Served at /lib/game-bar-component.css.
 *
 * SELF-CONTAINED BY NECESSITY. /game-v0 never loads game-selection.css, so this sheet cannot read the
 * --home-* tokens REQ-1259/REQ-1260 put on the hub's :root. It declares its own --game-bar-* tokens,
 * scoped to the component root rather than :root so it can never fight a host page's variables, with
 * the spec's literal values. On the hub the two sets are identical by construction; folding them into
 * one cross-screen token sheet is a separate piece of work (spec section 4 says as much: "A shared
 * colour-token set covering the whole game is a separate piece of work").
 *
 * ONE EXCEPTION, AND IT POINTS THE OTHER WAY (REQ-1268). Chrome black is not a component colour — it
 * is spec section 5's one texture that travels, and it was written out twice: here and again as
 * --home-texture-chrome-black in game-selection.css, so a colour change half-applied. Its single
 * definition now lives in the :root block below and the hub reads it from there. This sheet is where
 * it can live because it is the only stylesheet BOTH screens already load: the component script
 * injects it, so any page that mounts the bar gets the token with it and no new server route is
 * needed. That is also why the token is on :root rather than on .shared-game-bar — a page-wide token
 * has to be readable by the page, not only inside the component. It is the one global name this
 * sheet declares, and the --shared-* prefix keeps it from colliding with a host page's own.
 *
 * ------------------------------------------------------------------------------------------------
 * THE FIVE DRAWN ANCHORS ARE THE SPECIFICATION
 * ------------------------------------------------------------------------------------------------
 * Spec section 3 says to build to the grid rather than to section 7's pixels. Region B is the stated
 * exception: "Its five anchor positions are intentional and are the specification at 1440 wide ...
 * Do not pull the title bar out to the field edge at 167, and do not respace the row to fill the
 * field evenly."
 *
 * REQ-1258 put the field at min(1106px, 100% - 64px) centred, so at 1440 it runs 167 -> 1273. Every
 * position below is stated field-relative; add 167 for the page x the spec draws.
 *
 *   page x   field x   element
 *   ------   -------   -------------------------------------------------------------------
 *      177        10   game title bar          <- drawn anchor 1
 *      411       244   laurel counter          <- drawn anchor 2
 *      480       313   key counter
 *      547       380   stamp counter
 *      789       622   "Streak:"               <- drawn anchor 3
 *      842       675   streak meter
 *     1070       903   Rules                   <- drawn anchor 4
 *     1090       923   "Rules" label
 *     1185      1018   Comments                <- drawn anchor 5
 *     1209      1042   "Comments" label
 *
 * Those positions are produced by ARITHMETIC on fixed widths, never by a hand-tuned offset. The row
 * has 10px of left padding inside the 1106 field, leaving a 1096 content box:
 *
 *     192 (title) + 42 (space) + 588 (earned) + 71 (space) + 203 (tools)             = 1096
 *      35 +  34 +  37 +  30 +  30 + 212 (space) +  53 +  157                         =  588
 *      15 +   5 +  95 +  24 + auto                                                   =  203 + slack
 *
 * Every box that CONTAINS TEXT — the three counters, the "Streak:" label, the "Rules" label — takes a
 * fixed width with overflow visible, so no anchor downstream of a text run moves when the ET faces
 * render a glyph a pixel wider than the drawing did. Change one of those widths and everything after
 * it shifts; that is the point.
 *
 * ------------------------------------------------------------------------------------------------
 * THE SQUEEZE BELOW 1440
 * ------------------------------------------------------------------------------------------------
 * "Treat it as three groups — the game name, the earned counters and the streak, then Rules and
 * Comments — and let the space between the groups take the squeeze while the positions above hold at
 * full width."
 *
 * So exactly three boxes shrink and all three are SPACE, never content: the two between-group spaces
 * (42 and 71) and the counters-to-streak space inside the earned group (212). Their shrink factors
 * bias the between-group pair over the in-group one. Total give is 28 + 53 + 194 = 275px, which
 * carries the row unwrapped down to a 940px window; at 939.98 — the same rung of section 3's ladder
 * where the sidebar stacks — the row wraps instead, so 768 and below never overflow.
 */

/* ------------------------------------------------- Cross-screen texture (spec section 5, REQ-1268)
 * The ONE definition of chrome black in the repository. Everything black in the game is this one
 * surface — the game title bar, the Play buttons, the unselected filter button, and (once it exists)
 * the envelope's wax seal. A single repeating-linear-gradient, so it costs the same to render as a
 * flat colour and needs no image file. Read by .shared-game-bar-title below and by
 * Keep the shared title texture here rather than copying its stops into another rule. */
:root {
  --shared-texture-chrome-black: repeating-linear-gradient(
    135deg, rgba(50,50,50,.94) 0 1.449px, rgba(3,3,3,.94) 1.449px 2.899px
  );
}

.shared-game-bar {
  /* ---------------------------------------------------------------- Grid (spec section 3)
   * Repeated from the spec rather than imported, so /game-v0 lays the bar on the same field as the
   * starter page without loading the starter page's stylesheet. */
  --game-bar-field-max-width: 1106px;
  --game-bar-page-side-padding: 32px;

  /* ------------------------------------------------- Line-pattern fill (spec section 5)
   * The component's name for the one cross-screen texture defined on :root above. */
  --game-bar-texture-chrome-black: var(--shared-texture-chrome-black);

  /* ------------------------------------------------------------- Colour (spec section 4) */
  --game-bar-colour-body-ink: #000000;
  --game-bar-colour-title-label: #FFFFFF;
  --game-bar-colour-streak-day-done: #2B9B12;
  /* Section 9's one focus colour. Same #130C94 the starter page reads as --home-colour-link-and-focus;
   * restated here for the same reason every other token on this block is — /game-v0 never loads the
   * page's sheets. */
  --game-bar-colour-focus-ring: #130C94;

  /* --------------------------------------------------------------- Type (spec section 6) */
  --game-bar-font-sans: 'ET Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --game-bar-font-title-slab: 'ET Title Slab', Georgia, 'Times New Roman', serif;
  --game-bar-font-weight-regular: 400;
  --game-bar-font-weight-medium: 500;
  --game-bar-font-weight-bold: 700;
  --game-bar-type-size-16: 16px;
  --game-bar-type-size-12: 12px;
  --game-bar-type-leading-12: 16px;
  --game-bar-type-size-10: 10px;

  /* ------------------------------------------- Region B geometry (spec section 7 region B)
   * Band 61 -> 94 is 33 tall; region C opens at 122, hence the 28 below it. */
  --game-bar-band-height: 33px;
  --game-bar-band-bottom-gap: 28px;
  --game-bar-title-left-inset: 10px;
  --game-bar-title-width: 192px;
  --game-bar-earned-width: 588px;
  --game-bar-tools-width: 203px;
  --game-bar-space-name-to-earned: 42px;
  --game-bar-space-earned-to-tools: 71px;
  --game-bar-space-counters-to-streak: 212px;

  display: block;
  width: min(var(--game-bar-field-max-width), 100% - var(--game-bar-page-side-padding) * 2);
  margin-inline: auto;
  margin-bottom: var(--game-bar-band-bottom-gap);
  font-family: var(--game-bar-font-sans);
  color: var(--game-bar-colour-body-ink);
}

.shared-game-bar *,
.shared-game-bar *::before,
.shared-game-bar *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------ Focus (spec section 9, REQ-1265)
 * "2px solid #130C94, 2px offset — one treatment across the whole screen, for buttons, links and tabs
 * alike." The bar is the one region that appears on TWO screens, and /game-v0 loads neither
 * game-selection.css nor home-interaction-states.css, so the ring has to travel inside the component
 * or the same band would ring differently on the two pages it is mounted on.
 *
 * It matches nothing today, and that is correct rather than an oversight: spec section 1 lists "Rules
 * and Comments — Labels only, no destination", so they are <span>s with no behaviour and no tab stop,
 * and every counter and streak mark is a static role="img". Making any of them focusable would hand a
 * keyboard user a stop that does nothing. The rule is here so that the day one of them becomes a real
 * control, it rings the section 9 way on both host pages at once — without either page being edited. */
.shared-game-bar :focus-visible {
  outline: 2px solid var(--game-bar-colour-focus-ring);
  outline-offset: 2px;
}

.shared-game-bar-row {
  display: flex;
  align-items: center;
  height: var(--game-bar-band-height);
  padding-left: var(--game-bar-title-left-inset);
}

/* The three flexible spaces. flex-basis carries the drawn gap, so at full field width nothing
 * shrinks and every anchor lands where it was drawn; below it these are the only boxes that give.
 * The min-widths are the floor at which the three groups stop closing on each other. */
.shared-game-bar-flex-space {
  display: block;
  flex-grow: 0;
}
.shared-game-bar-flex-space--name-to-earned {
  flex-basis: var(--game-bar-space-name-to-earned);
  flex-shrink: 4;
  min-width: 14px;
}
.shared-game-bar-flex-space--earned-to-tools {
  flex-basis: var(--game-bar-space-earned-to-tools);
  flex-shrink: 4;
  min-width: 18px;
}
.shared-game-bar-flex-space--counters-to-streak {
  flex-basis: var(--game-bar-space-counters-to-streak);
  flex-shrink: 1;
  min-width: 18px;
}

/* ---------------------------------------------------------------- Group 1 — the game name
 * 192 x 33, chrome black, padding 6 / 17 / 6 / 13, gap 7, icon at 14, label ET Title Slab 16 white.
 * The radius is bottom-right 4 ONLY: the bar hangs off the masthead above it, so its top edge and
 * its left edge are square and only the free corner is rounded. */
.shared-game-bar-title {
  flex: 0 0 var(--game-bar-title-width);
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 17px 6px 13px;
  background: var(--game-bar-texture-chrome-black);
  border-radius: 0 0 4px 0;
  color: var(--game-bar-colour-title-label);
}
.shared-game-bar-title-label {
  font-family: var(--game-bar-font-title-slab);
  font-weight: var(--game-bar-font-weight-regular);
  font-size: var(--game-bar-type-size-16);
  line-height: 21px;
  white-space: nowrap;
}

/* ------------------------------------------------- Group 2 — the earned counters and the streak */
.shared-game-bar-earned {
  flex: 0 1 var(--game-bar-earned-width);
  display: flex;
  align-items: center;
}

/* One style for the counters, "Streak:", Rules and Comments: ET Sans Medium 12/16 black.
 *
 * Each counter takes its drawn width and its drawn left gap, so the key and stamp counters land on
 * 480 and 547 whatever the digits measure. overflow is left visible on purpose — a counter whose
 * numerals run a pixel or two past its drawn box spills into a 30px gap where nothing can see it,
 * which is far better than clipping a digit or letting the row respace itself. */
.shared-game-bar-counter {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: var(--game-bar-font-weight-medium);
  font-size: var(--game-bar-type-size-12);
  line-height: var(--game-bar-type-leading-12);
  white-space: nowrap;
  /* min-width defaults to auto on a flex item, which floors the box at its CONTENT width and
   * silently defeats the fixed widths above — "100" plus the laurel mark measures 37.67 in ET Sans
   * Medium, so the drawn 35 became 37.67 and pushed the key and stamp counters 2.67 late. Zeroing
   * the floor is what makes the drawn width the width. */
  min-width: 0;
}
/* Rank points. Never spent. Count leads, mark follows. */
.shared-game-bar-counter--laurel { flex: 0 0 35px; }
/* Mark leads, count follows — deliberately the opposite order to the laurel counter. */
.shared-game-bar-counter--key { flex: 0 0 37px; margin-left: 34px; }
/* Spendable postage for share links. */
.shared-game-bar-counter--stamp { flex: 0 0 30px; margin-left: 30px; }

/* A plain label, not a link. Its box is 53 wide — the distance from anchor 3 (622) to the meter
 * (675) — so the meter starts where it was drawn no matter how "Streak:" renders. */
.shared-game-bar-streak-label {
  flex: 0 0 53px;
  font-weight: var(--game-bar-font-weight-medium);
  font-size: var(--game-bar-type-size-12);
  line-height: var(--game-bar-type-leading-12);
  white-space: nowrap;
  min-width: 0;
}

/* Seven days plus the reward: 157 x 12.9 with 8 marks 20.7 apart.
 *   8 marks x 12.1 + 7 gaps x 8.6 = 157, and 12.1 + 8.6 = 20.7. */
.shared-game-bar-streak-meter {
  flex: 0 0 157px;
  /* Anchors the REQ-1803 reward stamp, which sits out of flow so the drawn positions never move. */
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 12.1px);
  column-gap: 8.6px;
  align-items: center;
  height: 12.9px;
}
.shared-game-bar-streak-mark {
  display: block;
  width: 12.1px;
  height: 12.9px;
}
.shared-game-bar-streak-mark--done { color: var(--game-bar-colour-streak-day-done); }
.shared-game-bar-streak-mark--todo { color: var(--game-bar-colour-body-ink); }
/* The reward's 44% comes from the artwork's own stroke-opacity — spec section 7 region B asks for
 * "#000 at 44%", so the colour is set here and the transparency travels with the mark. */
.shared-game-bar-streak-mark--reward { color: var(--game-bar-colour-body-ink); }
/* REQ-1803 — only a page with a real streak (setStreakMeterState) ever sets these. The gift's 44% is
 * artwork, so "earned" is the played-day colour, not full opacity. The stamp is mark-stamp at its
 * native 13 x 15.6, absolutely placed just after the gift: out of flow, so it takes no grid cell and
 * moves no anchor, and it hides with the earned group wherever that group hides. */
.shared-game-bar-streak-mark--reward-earned { color: var(--game-bar-colour-streak-day-done); }
.shared-game-bar-streak-reward-stamp {
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  width: 13px;
  height: 15.6px;
  transform: translateY(-50%) rotate(-8deg);
  color: var(--game-bar-colour-streak-day-done);
}
.shared-game-bar-streak-reward-stamp .shared-game-bar-icon {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------- Group 3 — Rules and Comments
 * Fixed at its drawn 203 so its left edge is anchor 4 (903) and the Comments block starts at anchor
 * 5 (1018) = 903 + 15 + 5 + 95. The "Comments" label is the last thing in the row and the only box
 * left to auto width; it ends at the field's right edge. */
.shared-game-bar-tools {
  flex: 0 0 var(--game-bar-tools-width);
  display: flex;
  align-items: center;
  font-weight: var(--game-bar-font-weight-medium);
  font-size: var(--game-bar-type-size-12);
  line-height: var(--game-bar-type-leading-12);
  white-space: nowrap;
  /* Same reason as the counters: this group is the last box in the row, so letting its content
   * floor its width would push its LEFT edge — anchors 4 and 5 — out of place. */
  min-width: 0;
}
/* Circle 15, 1px black, fully round, with a "?" in ET Sans Bold 10. */
.shared-game-bar-rules-mark {
  flex: 0 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  border: 1px solid var(--game-bar-colour-body-ink);
  border-radius: 50%;
  font-weight: var(--game-bar-font-weight-bold);
  font-size: var(--game-bar-type-size-10);
  line-height: 1;
}
/* Not underlined, though it will eventually behave as a link. Its 95px box spans "Rules" plus the
 * air after it, which is what puts the Comments icon on 1018. */
.shared-game-bar-rules-label {
  flex: 0 0 95px;
  margin-left: 5px;
  min-width: 0;
}
/* Underlined, unlike Rules. */
.shared-game-bar-comments-label {
  flex: 0 0 auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.shared-game-bar-icon {
  display: block;
  flex: 0 0 auto;
}
/* mark-stamp's perforated edge is an exported luminance mask, and this sheet used to declare its
 * mask-type — the export shipped it as a style ATTRIBUTE, which the app-wide `style-src 'self'` CSP
 * blocks. The mark moved into apps/game/icons/icon-sprite.svg in REQ-1268, and a rule here cannot
 * reach it: an external <use> renders in a shadow tree that this page's stylesheets do not cascade
 * into. It carries `mask-type="luminance"` as a presentation attribute instead (SVG's own default for
 * <mask>, and a presentation attribute is not a style attribute, so the CSP has nothing to block). */
.shared-game-bar-streak-mark .shared-game-bar-icon {
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------------- Below 940 (section 3)
 * The row runs out of between-group space here, so it wraps rather than overflowing. The three
 * groups stay intact and keep their internal spacing — only the drawn positions BETWEEN them are
 * given up, which is the same trade the squeeze above makes, taken to its end. */
@media (max-width: 939.98px) {
  .shared-game-bar-row {
    flex-wrap: wrap;
    height: auto;
    padding-left: 0;
    column-gap: 20px;
    row-gap: 8px;
  }
  .shared-game-bar-flex-space--name-to-earned,
  .shared-game-bar-flex-space--earned-to-tools {
    display: none;
  }
  .shared-game-bar-flex-space--counters-to-streak {
    flex: 0 0 20px;
    min-width: 20px;
  }
  .shared-game-bar-earned,
  .shared-game-bar-tools {
    flex: 0 0 auto;
  }
  .shared-game-bar-title {
    align-self: auto;
    height: var(--game-bar-band-height);
  }
  .shared-game-bar-rules-label {
    flex: 0 0 auto;
    margin-right: 20px;
  }
}