/* The header: pot and round bar (owned by the bar pass). Loaded after the page's own styles. */

/* The pot. bar.js sets --pot-em, the widest the amount can be for its digit count (in ems), so the number fits any width up to
   $9,999,999.99: it is the smallest of the desktop size, a share of the height, and the width it may take. --pot-w is the
   amount's actual width, for the chips. */
.pot { --label-h: 20px; --pot-em: 5.462; --fs: min(108px, 12.5vh, max(54px, 7vw), min(100vw - 44px, 720px) / var(--pot-em)); top: max(14px, 4.6vh); }
.pot .label { font-size: 14px; line-height: var(--label-h); letter-spacing: .01em; }
.pot .amount { font-size: var(--fs); line-height: .98; white-space: nowrap; }

/* The fee chips rise beside the cents, or beside the label when the widest number for this many digits leaves no room beside
   the cents. A new chip pushes the older ones up and out (bar.js marks them .rb-out). */
.pot .chips { top: calc(var(--label-h) + var(--fs) * .1); }
#chips .chip { --half: calc(var(--fs) * var(--pot-w, var(--pot-em)) / 2); --tight: calc((var(--fs) * var(--pot-em) / 2 + 92px - 50vw) * 1000);
  left: calc(var(--half) + 10px - clamp(0px, var(--tight), var(--half) - 36px)); top: calc(0px - clamp(0px, var(--tight), var(--fs) * .1 + var(--label-h) - 3px));
  --rise: calc(22px - clamp(0px, var(--tight), 12px));
  margin: 0; animation: rb-chip 1.4s cubic-bezier(.2, .7, .3, 1) forwards; transition: translate .35s cubic-bezier(.2, .7, .3, 1), filter .35s ease-out; }
#chips .chip.rb-out { translate: 0 -12px; filter: opacity(0); }
@keyframes rb-chip { 0% { opacity: 0; transform: translateY(5px) scale(.85); } 14% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(0px - var(--rise))); } }

/* The round bar: a brass-rimmed lacquer rail */
#bar { --seg: 3.3333%; --gap: 1px; --mask: repeating-linear-gradient(90deg, #000 0 calc(var(--seg) - var(--gap)), transparent 0 var(--seg)) calc(var(--gap) / 2) 0 / 100% 100%;
  width: min(440px, 100% - 40px); margin: clamp(8px, 1.5vh, 14px) auto 0; text-align: left; color: var(--cream);
  text-shadow: 0 1px 10px rgb(0 0 0 / .6); }
#bar.is-lamps { --gap: 2px; }
.rb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; line-height: 18px; white-space: nowrap; }
.rb-l { font-weight: 600; color: rgb(251 240 217 / .92); overflow: hidden; }
.rb-l > span, .rb-r b { display: inline-block; }
.rb-r { color: rgb(251 240 217 / .66); }
.rb-r b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cream); margin-right: .1em; }
.rb-r i { font-style: normal; font-variant-numeric: normal; }
.is-full .rb-r b { color: #ffe3a1; }

.rb-track { position: relative; box-sizing: border-box; height: 14px; margin-top: 8px; padding: 2px; border-radius: 99px;
  background: linear-gradient(180deg, #fde7a8 0%, #c68f37 32%, #6c4413 56%, #9c6a24 76%, #f0c870 100%);
  box-shadow: 0 0 0 1px rgb(20 6 4 / .55), 0 10px 24px -8px rgb(0 0 0 / .8); }
.rb-track::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 18px 2px rgb(255 178 64 / .55), 0 0 0 1px rgb(255 222 140 / .55); }
/* the groove, the lit lamps and the shimmer share one mask (--mask): a lamp per swap, or a hairline every ten swaps */
.rb-rail, .rb-lit, .rb-shine { height: 100%; border-radius: inherit; overflow: hidden; -webkit-mask: var(--mask); mask: var(--mask); }
.rb-shine { position: absolute; inset: 2px; height: auto; pointer-events: none; }   /* the draw's shimmer, outside the glow so it never re-blurs */
.rb-rail { --bulb-c: transparent; position: relative; box-shadow: inset 0 1px 3px rgb(0 0 0 / .9);
  background: radial-gradient(50% 62% at 50% 38%, var(--bulb-c), transparent) 0 0 / var(--seg) 100%, linear-gradient(180deg, rgb(255 255 255 / .07) 0 1px, transparent 1px), linear-gradient(180deg, #12030a, #3d0811 65%, #5e0f1a); }
.rb-glow { position: absolute; inset: 2px; border-radius: inherit; filter: drop-shadow(0 0 4px rgb(255 172 56 / .55)); }
.rb-fill, .rb-cur { transform: translateX(-100%); transition: transform .75s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.rb-fill { --bulb-c: transparent; position: relative; height: 100%; border-radius: inherit; overflow: hidden;
  background: radial-gradient(50% 62% at 50% 38%, var(--bulb-c), transparent) 0 0 / var(--seg) 100%, linear-gradient(180deg, #fff8dc 0%, #ffe08a 26%, #eaa93a 60%, #b8761c 82%, #f7c868 100%); }
.is-lamps .rb-rail { --bulb-c: rgb(255 190 130 / .12); }
.is-lamps .rb-fill { --bulb-c: rgb(255 254 240 / .7); }
.rb-marq { position: absolute; inset: 0; pointer-events: none; opacity: 0; --dim-lamp: rgb(104 26 8 / .5);
  background: repeating-linear-gradient(90deg, var(--dim-lamp) 0 var(--seg), transparent 0 calc(var(--seg) * 2)); }
.rb-sweep { position: absolute; inset: 0; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .9) 50%, transparent 68%); }

/* the head: a soft ember that flares, with sparks, on each counted swap */
.rb-cur { position: absolute; inset: 2px; pointer-events: none; }
.is-full .rb-glow { filter: drop-shadow(0 0 6px rgb(255 180 64 / .8)); }
.rb-ember { position: absolute; left: 100%; top: 50%; width: 44px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s;
  background: radial-gradient(closest-side, #fffdf0, rgb(255 214 128 / .65) 30%, rgb(255 170 60 / .22) 62%, rgb(255 150 40 / 0)); }
.rb-spark { position: absolute; left: 100%; top: 50%; width: 4px; height: 4px; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%);
  background: #fff6d8; box-shadow: 0 0 6px 2px rgb(255 190 80 / .9); }
.is-fill .rb-ember { opacity: .4; }
.is-fill.is-empty .rb-ember { opacity: 0; }

/* full: the rim pulses and the lamps chase like a marquee while the countdown runs */
.is-full .rb-track::before { animation: rb-pulse .9s ease-in-out infinite alternate; }
.is-full .rb-marq { opacity: 1; animation: rb-marq .9s infinite; }
.is-full .rb-ember { opacity: .8; }
/* drawing: a slow shimmer while the drum spins */
.is-draw .rb-track::before { animation: rb-pulse 2.4s ease-in-out infinite alternate; }
.is-draw .rb-sweep { opacity: .85; animation: rb-chase 2.2s linear infinite;
  background: linear-gradient(105deg, transparent 18%, rgb(255 238 205 / .55) 38%, rgb(255 255 255 / .95) 50%, rgb(255 238 205 / .55) 62%, transparent 82%); }
/* a new round: the rail drains back to zero, then fills to where the round is */
.is-drain .rb-fill, .is-drain .rb-cur { transition: transform .44s cubic-bezier(.6, 0, .8, .3); }
#bar.is-drain .rb-ember { opacity: 1; transition-duration: .1s; }
@keyframes rb-pulse { from { opacity: .15; } to { opacity: 1; } }
@keyframes rb-marq { 0%, 50% { background: repeating-linear-gradient(90deg, var(--dim-lamp) 0 var(--seg), transparent 0 calc(var(--seg) * 2)); }
  50.01%, 100% { background: repeating-linear-gradient(90deg, transparent 0 var(--seg), var(--dim-lamp) 0 calc(var(--seg) * 2)); } }
@keyframes rb-chase { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* the floor: the efficient curve's minimum swap, with an arrow for the way it moved at the last round */
.rb-foot { margin-top: 8px; text-align: center; font-size: 12.5px; line-height: 16px; color: rgb(251 240 217 / .66); white-space: nowrap; }
.rb-floor { font-weight: 700; color: #f3d38c; }
.rb-fs { display: none; }
.rb-trend { width: 7px; height: 7px; margin-left: 5px; vertical-align: 0; fill: #f3d38c; opacity: 0; transition: opacity .4s, transform .4s; }
.rb-trend.up { opacity: .85; }
.rb-trend.down { opacity: .85; transform: rotate(180deg); }

@media (max-height: 760px) and (min-width: 600px) {   /* short landscape screens: keep the header clear of the drum */
  .pot { top: max(12px, 2.6vh); --fs: min(108px, 11vh, max(54px, 7vw), min(100vw - 44px, 720px) / var(--pot-em)); }
  #bar { margin-top: 6px; }
  .rb-track { margin-top: 6px; }
  .rb-foot { margin-top: 5px; }
}
@media (min-width: 661px) and (max-width: 1599px) and (min-height: 501px) {   /* tablets, laptops and most desktops: a 7-figure pot is wider than the gap between
  the header corners, so the pot starts under them */
  .pot { top: max(96px, 4.6vh); }
}
@media (max-width: 660px) and (min-height: 501px) {   /* phones upright: the tag and the address get the top row, the links the second */
  .pot { top: max(84px, calc(74px + env(safe-area-inset-top, 0px)), 4.6vh); }   /* under the two header rows (address, then links) */
}
@media (max-width: 480px) {
  #bar { width: min(440px, 100% - 32px); }
  .rb-head { font-size: 13px; }
  .rb-foot { font-size: 12px; }
  .rb-track { height: 12px; }
  #chips .chip { font-size: 12px; }
}
/* short phones upright: a compact header, so the machine keeps its room. The amount gets a height cap, the gaps close up,
   and under 600 px tall the floor shrinks to "$15+ swaps count". */
@media (max-width: 660px) and (max-height: 700px) {
  .pot { --label-h: 16px; --fs: min(8.4vh, max(44px, 7vw), (100vw - 44px) / var(--pot-em)); }
  .pot .label { font-size: 13px; }
  .pot .amount { line-height: .9; }
  #bar { margin-top: 4px; }
  .rb-head { font-size: 12.5px; line-height: 16px; }
  .rb-track { height: 11px; margin-top: 5px; }
  .rb-foot { margin-top: 4px; font-size: 11.5px; line-height: 14px; }
}
@media (max-width: 660px) and (max-height: 600px) {
  .rb-fw { display: none; }
  .rb-fs { display: inline; }
  .rb-track { height: 10px; }
  .rb-foot { margin-top: 3px; line-height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .rb-fill, .rb-cur { transition-duration: .01s; }
  .rb-track::before, .rb-sweep, .rb-marq { animation: none !important; }
  .is-full .rb-track::before { opacity: .8; }
}