/* AnimaLingo — STAMPS, the app's currency. Approved by Michael 2026-08-28.
   The counter sits top right on every screen. Do not re-tune these sizes
   without a fresh ruling — they are the ones he approved in the Stamp Lab. */

.al-stamps{
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.al-stamps-icon{
  width: 56px;
  height: 56px;
  display: block;
  will-change: transform;
}

.al-stamps-num{
  font-family: var(--font-read);
  font-size: 26px;
  font-weight: 800;
  color: #ffc400;
  min-width: 2ch;
  text-align: left;
  will-change: transform;
}

/* ★ The two lines under the big number (Michael 2026-08-29). The counter's pill never changes
   size: both lines hang below it. They are empty except while a game is open, and an empty line
   draws nothing. */
.al-stamps{ position: fixed; }
.al-stamps-run,
.al-stamps-bonus{
  position: absolute;
  right: 14px;
  font-family: var(--font-read);
  font-weight: 800;
  font-size: 72px;                 /* three times the old 24px — Michael 2026-08-29 */
  line-height: 1;
  color: #ffc400;                  /* the bonus line matches the run line exactly */
  white-space: nowrap;
  text-align: right;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
  pointer-events: none;
}
/* The two lines are spaced the same: 8px under the pill, and 8px under the line above. */
.al-stamps-run{   top: calc(100% + 8px); }
.al-stamps-bonus{ top: calc(100% + 88px); }

/* every flying stamp */
.al-stamps-fly{
  position: fixed;
  width: 56px;
  height: 56px;
  z-index: 61;
  pointer-events: none;
  will-change: transform, opacity;
}