/* Grizzly's past rounds (grizzly-rounds.js), adapted from Cute Temple's
   (cute-rounds.css), every box as Cute Temple's: a chip for each of the
   latest results, newest first, in the top bar between the logo and the
   balance, as many whole chips as fit. In the ice: frosted glass chips with
   an icy rim and a snow cap (the user's snowcap.webp, over the chip's top
   edge, taking no room), a bite's 0.00x glowing red on dark violet, a
   cash-out glowing green on dark teal, brighter from 3x and brightest from
   10x. */
body[data-character="grizzly"] .rounds {
  --chip: 26px;
  --cap-h: 9px;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: calc(var(--chip) + 4px);
  color: #aeefff;
  cursor: default;
}
/* Until grizzly-rounds.js fills it the slot takes no room. */
body[data-character="grizzly"] .rounds:empty {
  display: none;
}
body[data-character="grizzly"] .rounds-icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px #5cc8ff80);
}
/* Whole chips only: the list is one chip tall, and the chips that do not fit
   wrap onto the lines under it, which its clip hides (the newest stay first).
   Its padding, taken back by its margin, leaves the snow caps, the glows and
   a new chip's pop room inside the clip. It is positioned, so the clip holds
   the chips' screen-reader text too. */
body[data-character="grizzly"] .rounds-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 12px 6px;
  min-width: 0;
  height: calc(var(--chip) + 8px + var(--cap-h));
  margin: calc(-4px - var(--cap-h)) -4px -4px;
  padding: calc(4px + var(--cap-h)) 4px 4px;
  overflow: hidden;
  list-style: none;
}
body[data-character="grizzly"] .round-chip {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  min-width: 58px;
  height: var(--chip);
  padding: 0 10px;
  border: 1px solid #c9ecff;
  border-radius: 9px;
  background: linear-gradient(180deg, #24346f, #1a2458);
  box-shadow: 0 0 6px #5cb8ff66, inset 0 0 8px #ffffff1f;
  color: #ffeaf0;
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* the snow cap, a little wider than the chip and over its top edge */
body[data-character="grizzly"] .round-chip::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: calc(100% - 0.3 * var(--cap-h));
  height: var(--cap-h);
  background: url("/assets/grizzly/snowcap.webp") center bottom / 100% 100% no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px #0a2a6040);
}
/* Its shine (grizzly.css) lies on that cap, and shows only on the chips the
   strip shows (.is-shown: grizzly-rounds.js watches which are on the shown
   line); the chips that wait on the hidden lines draw none. Only the first
   three chips twinkle (CAP_SPARKLED), their stars placed by the beat each
   chip was made with (data-beat), so a new chip moves no other's stars. */
body[data-character="grizzly"] .round-chip .cap-shine {
  left: -6%;
  right: -6%;
  bottom: calc(100% - 0.3 * var(--cap-h));
}
body[data-character="grizzly"] .round-chip:not(.is-shown) .cap-shine,
body[data-character="grizzly"] .round-chip:nth-child(n + 4) .cap-sparks {
  display: none;
}
body[data-character="grizzly"] .round-chip[data-beat="1"] {
  --spark-a: 62% 30%;
  --spark-b: 30% 40%;
}
body[data-character="grizzly"] .round-chip[data-beat="2"] {
  --spark-a: 38% 25%;
  --spark-b: 80% 40%;
}
body[data-character="grizzly"] .round-chip[data-beat="3"] {
  --spark-a: 76% 30%;
  --spark-b: 18% 40%;
}
body[data-character="grizzly"] .round-chip[data-beat="4"] {
  --spark-a: 48% 35%;
  --spark-b: 84% 30%;
}
body[data-character="grizzly"] .round-times {
  margin-left: 0.06em;
  font-size: 0.86em;
  opacity: 0.8;
}
/* A bite: 0.00x glowing red on dark violet. */
body[data-character="grizzly"] .round-chip.lost {
  border-color: #f4dcff;
  background: linear-gradient(180deg, #3b2f6e, #2a2559);
  box-shadow: 0 0 7px #ff4f7a80, inset 0 -4px 8px #ff4f7a33;
  color: #ff7d95;
  text-shadow: 0 0 5px #ff3d6acc;
}
/* A cash-out glowing green on dark teal... */
body[data-character="grizzly"] .round-chip.won {
  border-color: #c9fff0;
  background: linear-gradient(180deg, #08585d, #043f47);
  box-shadow: 0 0 7px #2fe0b073, inset 0 -4px 8px #2fe0b02e;
  color: #effff9;
  text-shadow: 0 0 5px #2fe0b0a6;
}
/* ...brighter from 3x... */
body[data-character="grizzly"] .round-chip.tier-2 {
  background: linear-gradient(180deg, #0a7a6a, #055a50);
  box-shadow: 0 0 9px #2fe0b0a6, inset 0 -4px 9px #2fe0b047;
}
/* ...and brightest from 10x. */
body[data-character="grizzly"] .round-chip.tier-3 {
  border-color: #e6fff7;
  background: linear-gradient(180deg, #0c9078, #066a5a);
  box-shadow: 0 0 12px #3ff0c0cc, inset 0 -4px 9px #3ff0c05c;
}
/* Simulated rounds are a touch quieter, so the player's own stand out. */
body[data-character="grizzly"] .round-chip.is-simulated {
  opacity: 0.82;
}

/* Portrait phones and tablets held upright (the narrow, tall screens the bet
   panel also counts), and any screen too narrow for three chips beside the
   logo and the wallet: the chips take a row of their own under the bar row,
   the bar's full width. The bar (the layout's first row) grows by it, and
   grizzly-character.js keeps the bear and the readout under the strip. */
@media (max-width: 900px) and (min-height: 651px), (max-width: 600px) and (min-height: 501px), (max-width: 520px) {
  body[data-character="grizzly"] .game-layout:has(> .topbar > .rounds:not(:empty)) {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body[data-character="grizzly"] .topbar:has(> .rounds:not(:empty)) {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-bottom: 8px;
  }
  body[data-character="grizzly"] .rounds {
    --chip: 24px;
    --cap-h: 8px;
    order: 1;
    flex: 1 0 100%;
    gap: 8px;
  }
  body[data-character="grizzly"] .rounds-icon {
    width: 16px;
    height: 16px;
  }
  body[data-character="grizzly"] .rounds-list {
    column-gap: 5px;
  }
  body[data-character="grizzly"] .round-chip {
    min-width: 52px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 12px;
  }
}
/* On a phone the strip, under the bar's first row, has the page's night
   behind that row, fading out behind the strip. */
@media (max-width: 600px) and (min-height: 501px), (max-width: 520px) {
  body[data-character="grizzly"] .topbar:has(> .rounds:not(:empty)) {
    background: linear-gradient(180deg, #0a1f4fcc 0, #0a1f4f99 50%, #0a1f4f00 100%);
  }
}
/* Short screens have a lower bar, so smaller chips. Phones on their side
   (and low windows) keep one bar row, so the bear keeps his height, the
   strip a little closer to the logo and the wallet. */
@media (max-height: 650px) {
  body[data-character="grizzly"] .rounds {
    --chip: 24px;
    --cap-h: 8px;
    gap: 7px;
  }
  body[data-character="grizzly"] .rounds-icon {
    width: 15px;
    height: 15px;
  }
  body[data-character="grizzly"] .rounds-list {
    column-gap: 5px;
  }
  body[data-character="grizzly"] .round-chip {
    min-width: 48px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 12px;
  }
}
@media (max-height: 650px) and (min-width: 601px) {
  body[data-character="grizzly"] .rounds {
    margin-inline: -8px;
  }
}