/* Cute Temple's past rounds (cute-rounds.js): a chip for each of the latest
   results, newest first, in the top bar between the brand and the wallet,
   as many whole chips as fit. The chips are the bet panel's inner cards
   (cute.css: #0b2321 edged with #1f4a44). A cash-out is the Cash out
   button's leaf green (#add974), brighter from 3× (its highlight, #d0ed9e)
   and the BET button's gold (#f0c14b) from 10×; a bite is 0.00× in the bet
   error's soft red (#ffc4b0). No glow for a big win. Simulated rounds are
   muted, so the player's own stand out. */
body[data-character="cute"] .rounds {
  --chip: 26px;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: calc(var(--chip) + 4px);
  color: #c9e6d0;
  cursor: default;
}
/* Until cute-rounds.js fills it the slot takes no room (the previous
   deploy's page code, served for a few minutes after a deploy, never does). */
body[data-character="cute"] .rounds:empty {
  display: none;
}
body[data-character="cute"] .rounds-icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
/* 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 a new chip's pop
   room inside the clip, never past the strip's gap to the wallet. It is
   positioned, so the clip holds the chips' screen-reader text too: hidden
   chips would otherwise widen the page. */
body[data-character="cute"] .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);
  margin: -4px;
  padding: 4px;
  overflow: hidden;
  list-style: none;
}
body[data-character="cute"] .round-chip {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 58px;
  height: var(--chip);
  padding: 0 10px;
  border: 1px solid #1f4a44;
  border-radius: 9px;
  background: #0b2321;
  color: #c9e6d0;
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body[data-character="cute"] .round-times {
  margin-left: 0.06em;
  font-size: 0.86em;
  opacity: 0.8;
}
/* A cash-out in the leaf green... */
body[data-character="cute"] .round-chip.won {
  border-color: #add97447;
  color: #add974;
}
/* ...brighter from 3× (the card tinted with the leaf)... */
body[data-character="cute"] .round-chip.tier-2 {
  border-color: #add974a6;
  background: linear-gradient(#add97429, #add97429) #0b2321;
  color: #d0ed9e;
}
/* ...and the BET button's gold from 10×. */
body[data-character="cute"] .round-chip.tier-3 {
  border-color: #f0c14bb3;
  background: linear-gradient(#f0c14b2e, #f0c14b2e) #0b2321;
  color: #f0c14b;
}
/* A bite: 0.00× in the soft red. */
body[data-character="cute"] .round-chip.lost {
  border-color: #ffc4b04d;
  color: #ffc4b0;
}
body[data-character="cute"] .round-chip.is-simulated {
  opacity: 0.7;
}

/* 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
   brand 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 cute-character.js keeps the head 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="cute"] .game-layout:has(> .topbar > .rounds:not(:empty)) {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body[data-character="cute"] .topbar:has(> .rounds:not(:empty)) {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-bottom: 8px;
  }
  body[data-character="cute"] .rounds {
    --chip: 24px;
    order: 1;
    flex: 1 0 100%;
    gap: 8px;
  }
  body[data-character="cute"] .rounds-icon {
    width: 16px;
    height: 16px;
  }
  body[data-character="cute"] .rounds-list {
    column-gap: 5px;
  }
  body[data-character="cute"] .round-chip {
    min-width: 52px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 12px;
  }
}
/* On a phone the readout, now under the strip, lowers the lagoon a little
   (its top no longer meets the screen's), so the bar is the page's petrol
   behind its first row, fading out behind the strip. */
@media (max-width: 600px) and (min-height: 501px), (max-width: 520px) {
  body[data-character="cute"] .topbar:has(> .rounds:not(:empty)) {
    background: linear-gradient(180deg, #0b2629 0, #0b2629 50%, #0b262900 100%);
  }
}
/* Short screens have a lower bar, so smaller chips. Phones on their side
   (and low windows) keep one bar row, so the head keeps its height, the
   strip a little closer to the brand and the wallet. */
@media (max-height: 650px) {
  body[data-character="cute"] .rounds {
    --chip: 24px;
    gap: 7px;
  }
  body[data-character="cute"] .rounds-icon {
    width: 15px;
    height: 15px;
  }
  body[data-character="cute"] .rounds-list {
    column-gap: 5px;
  }
  body[data-character="cute"] .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="cute"] .rounds {
    margin-inline: -8px;
  }
}