* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;

  background-color: #d98b4b;

  font-family:
    Arial,
    sans-serif;
}


/* ------------------------------ */
/* Main game area                 */
/* ------------------------------ */

.game {
  position: relative;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      #65bde8 0%,
      #f3bd72 65%,
      #a95f2e 65%,
      #6f371d 100%
    );
}


/* ------------------------------ */
/* Bitcoin price box              */
/* ------------------------------ */

.price-box {
  position: absolute;

  top: 25px;
  left: 25px;

  z-index: 10;

  padding:
    14px
    20px;

  color: white;

  background-color:
    rgba(35, 20, 10, 0.85);

  border:
    3px
    solid
    #d89b45;

  border-radius: 10px;

  box-shadow:
    0 5px 14px
    rgba(40, 20, 8, 0.25);
}

.price-box span {
  display: block;

  margin-bottom: 5px;

  color: #f2c57c;

  font-size: 14px;
}

.price-box strong {
  font-size: 24px;
}
/* ------------------------------ */
/* Live trail status              */
/* ------------------------------ */

.trail-status {
  margin-top: 12px;

  padding-top: 10px;

  border-top:
    1px solid
    rgba(242, 197, 124, 0.35);
}

.trail-status-title {
  display: block;

  color: #f2c57c;

  font-size: 13px;

  font-weight: bold;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.trail-status-detail {
  display: block;

  margin-top: 4px;

  color: white;

  font-size: 15px;

  font-weight: bold;

  transition:
    color 0.25s ease;
}
/* ------------------------------ */
/* Distant circling vultures      */
/* ------------------------------ */

.vulture-layer {
  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 42%;

  z-index: 3;

  overflow: hidden;

  pointer-events: none;
}

.vulture {
  position: absolute;

  width: 70px;
  height: 28px;

  opacity: 0.72;

  animation:
    circleVulture
    16s
    linear
    infinite;

  will-change: transform;
}

.vulture-one {
  left: 62%;
  top: 19%;
}

.vulture-two {
  left: 77%;
  top: 31%;

  transform: scale(0.7);

  animation-duration: 21s;
  animation-delay: -7s;
}

.vulture-body {
  position: absolute;

  left: 31px;
  top: 12px;

  width: 8px;
  height: 11px;

  background-color: #2d211a;

  border-radius: 50%;
}

.vulture-wing-left,
.vulture-wing-right {
  position: absolute;

  top: 5px;

  width: 34px;
  height: 15px;

  border-top:
    5px
    solid
    #2d211a;

  border-radius: 50%;
}

.vulture-wing-left {
  left: 0;

  transform:
    rotate(-12deg);
}

.vulture-wing-right {
  right: 0;

  transform:
    rotate(12deg);
}

@keyframes circleVulture {

  0% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }

  25% {
    transform:
      translate(22px, -10px)
      rotate(2deg);
  }

  50% {
    transform:
      translate(44px, 0)
      rotate(0deg);
  }

  75% {
    transform:
      translate(22px, 10px)
      rotate(-2deg);
  }

  100% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }

}
/* ------------------------------ */
/* Daily Bitcoin mountain range   */
/* ------------------------------ */

.daily-mountains {
  position: absolute;

  left: 0;
  bottom: 30%;

  width: 100%;
  height: 42%;

  z-index: 0;

  pointer-events: none;
}

.daily-mountain-shape {
  fill: #9c5f3b;

  stroke: #6d3d26;
  stroke-width: 6;

  stroke-linejoin: round;

  /*
    Keep the mountain solid so the setting sun is
    visible only above the ridge, never through it.
  */
  opacity: 1;
}

/* ------------------------------ */
/* Distant desert hills           */
/* ------------------------------ */

.distant-hills {
  position: absolute;

  left: 0;
  bottom: 30%;

  width: 100%;
  height: 28%;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;
}

.distant-hills-track {
  position: absolute;

  left: 0;
  bottom: 0;

  display: flex;

  width: 200%;
  height: 100%;

  animation:
    moveDistantHills
    45s
    linear
    infinite;

  will-change: transform;
}

.distant-hills-section {
  position: relative;

  flex:
    0
    0
    50%;

  width: 50%;
  height: 100%;
}

.distant-hill {
  position: absolute;

  bottom: -35%;

  background:
    linear-gradient(
      to bottom,
      #bb7443 0%,
      #98542f 100%
    );

  border-radius:
    50%
    50%
    12%
    12%;

  opacity: 0.78;
}

.distant-hill-one {
  left: -8%;

  width: 38%;
  height: 78%;

  transform:
    rotate(-3deg);
}

.distant-hill-two {
  left: 24%;

  width: 32%;
  height: 96%;

  transform:
    rotate(3deg);
}

.distant-hill-three {
  left: 51%;

  width: 36%;
  height: 68%;

  transform:
    rotate(-2deg);
}

.distant-hill-four {
  left: 78%;

  width: 35%;
  height: 88%;

  transform:
    rotate(4deg);
}

@keyframes moveDistantHills {

  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(-50%);
  }

}


/* ------------------------------ */
/* Western scenery layer          */
/* ------------------------------ */

.western-scenery {
  position: absolute;

  left: 0;
  bottom: 33%;

  width: 100%;
  height: 230px;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;
}

.western-scenery-track {
  position: absolute;

  left: 0;
  bottom: 0;

  display: flex;

  width: 200%;
  height: 100%;

  animation:
    moveWesternScenery
    24s
    linear
    infinite;

  will-change: transform;
}

.western-scenery-section {
  position: relative;

  flex:
    0
    0
    50%;

  width: 50%;
  height: 100%;
}

@keyframes moveWesternScenery {

  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(-50%);
  }

}


/* ------------------------------ */
/* Cacti                          */
/* ------------------------------ */

.cactus {
  position: absolute;

  bottom: 0;

  width: 30px;
  height: 125px;

  background:
    linear-gradient(
      to right,
      #245936,
      #357548,
      #1e4b2e
    );

  border:
    3px
    solid
    #173a24;

  border-radius:
    16px
    16px
    8px
    8px;
}

.cactus::after {
  content: "";

  position: absolute;

  left: 7px;
  top: 7px;

  width: 4px;
  height: 105px;

  background-color:
    rgba(255, 255, 255, 0.12);

  border-radius: 4px;
}

.cactus-one {
  left: 12%;

  transform:
    scale(0.82);
}

.cactus-two {
  left: 76%;

  transform:
    scale(1.05);
}

.cactus-arm {
  position: absolute;

  width: 36px;
  height: 20px;

  background-color: #2d6b41;

  border:
    3px
    solid
    #173a24;

  border-radius: 12px;
}

.cactus-arm::after {
  content: "";

  position: absolute;

  bottom: 8px;

  width: 18px;
  height: 48px;

  background-color: #2d6b41;

  border:
    3px
    solid
    #173a24;

  border-radius:
    12px
    12px
    6px
    6px;
}

.cactus-arm-left {
  left: -30px;
  top: 52px;
}

.cactus-arm-left::after {
  left: -3px;
}

.cactus-arm-right {
  right: -30px;
  top: 30px;
}

.cactus-arm-right::after {
  right: -3px;
}


/* ------------------------------ */
/* Rocks                          */
/* ------------------------------ */

.rock {
  position: absolute;

  bottom: 0;

  background:
    linear-gradient(
      145deg,
      #9a694a,
      #66422f
    );

  border:
    3px
    solid
    #4e3022;
}

.rock-one {
  left: 31%;

  width: 62px;
  height: 37px;

  border-radius:
    55%
    45%
    35%
    30%;
}

.rock-two {
  left: 63%;

  width: 85px;
  height: 46px;

  border-radius:
    45%
    55%
    30%
    38%;
}

.rock-three {
  left: 92%;

  width: 48px;
  height: 29px;

  border-radius:
    50%
    40%
    35%
    28%;
}


/* ------------------------------ */
/* Western sign                   */
/* ------------------------------ */

.western-sign {
  position: absolute;

  left: 43%;
  bottom: 0;

  width: 145px;
  height: 125px;

  transform:
    rotate(-2deg);
}

.sign-board {
  position: absolute;

  top: 0;
  left: 0;

  width: 145px;
  height: 58px;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #3b210e;

  background:
    linear-gradient(
      to bottom,
      #d49a50,
      #a9672e
    );

  border:
    4px
    solid
    #5d3518;

  border-radius: 5px;

  font-family:
    Georgia,
    serif;

  font-size: 15px;
  font-weight: bold;

  letter-spacing: 1px;

  text-shadow:
    1px
    1px
    0
    rgba(255, 220, 150, 0.4);
}

.sign-board::before,
.sign-board::after {
  content: "";

  position: absolute;

  top: 9px;

  width: 6px;
  height: 6px;

  background-color: #3b210e;

  border-radius: 50%;
}

.sign-board::before {
  left: 9px;
}

.sign-board::after {
  right: 9px;
}

.sign-post {
  position: absolute;

  bottom: 0;

  width: 13px;
  height: 72px;

  background:
    linear-gradient(
      to right,
      #623716,
      #8b5324,
      #4a2913
    );

  border:
    3px
    solid
    #42240f;
}

.sign-post-left {
  left: 25px;
}

.sign-post-right {
  right: 25px;
}


/* ------------------------------ */
/* Bitcoin-generated hills        */
/* ------------------------------ */

.bitcoin-hills {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 48%;

  z-index: 2;

  pointer-events: none;
}

.hill-shape {
  fill: #8b4b24;

  stroke: #4f2915;
  stroke-width: 8;
  stroke-linejoin: round;
}


/* ------------------------------ */
/* Bitcoin cowboy mascot          */
/* ------------------------------ */

.rider {
  position: absolute;

  left: 50%;
  bottom: 10%;

  z-index: 5;

  width: clamp(118px, 12vw, 180px);
  aspect-ratio: 1 / 1;

  transform:
    translateX(-50%)
    rotate(0deg);

  transform-origin:
    center
    82%;

  animation: none;

  pointer-events: none;

  will-change:
    bottom,
    transform;
}

.bitcoin-cowboy-mascot {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  user-select: none;

  -webkit-user-drag: none;

  filter:
    drop-shadow(
      0 7px 4px
      rgba(58, 29, 12, 0.28)
    );
}



/* ------------------------------ */
/* Rolling tumbleweed             */
/* ------------------------------ */

.tumbleweed-layer {
  position: absolute;

  left: 0;
  bottom: 18%;

  width: 100%;
  height: 90px;

  z-index: 4;

  overflow: hidden;

  pointer-events: none;
}

.tumbleweed {
  position: absolute;

  right: -80px;
  bottom: 6px;

  width: 58px;
  height: 58px;

  border:
    5px
    solid
    #6f3f1f;

  border-radius: 50%;

  opacity: 0.9;

  animation:
    tumbleweedTravel
    13s
    linear
    infinite;

  will-change:
    transform;
}

.tumbleweed::before,
.tumbleweed::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 46px;
  height: 46px;

  border:
    4px
    solid
    #8a552d;

  border-radius: 50%;
}

.tumbleweed::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}

.tumbleweed::after {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}

@keyframes tumbleweedTravel {

  0% {
    transform:
      translateX(0)
      translateY(0)
      rotate(0deg);
  }

  20% {
    transform:
      translateX(-22vw)
      translateY(-7px)
      rotate(-240deg);
  }

  40% {
    transform:
      translateX(-44vw)
      translateY(0)
      rotate(-480deg);
  }

  60% {
    transform:
      translateX(-66vw)
      translateY(-10px)
      rotate(-720deg);
  }

  80% {
    transform:
      translateX(-88vw)
      translateY(0)
      rotate(-960deg);
  }

  100% {
    transform:
      translateX(-120vw)
      translateY(-5px)
      rotate(-1200deg);
  }

}
/* ------------------------------ */
/* Permanent current-block sign   */
/* ------------------------------ */

.current-block-panel {
  position: absolute;

  top: 25px;
  right: 25px;

  z-index: 10;

  display: flex;

  flex-direction: column;
  align-items: center;

  min-width: 190px;

  padding:
    12px
    17px;

  color: #f8d799;

  background:
    linear-gradient(
      to bottom,
      rgba(112, 63, 27, 0.94),
      rgba(55, 29, 14, 0.94)
    );

  border:
    3px
    solid
    #b97932;

  border-radius: 7px;

  box-shadow:
    0 5px 14px
    rgba(45, 24, 12, 0.28),
    inset 0 0 0 2px
    rgba(242, 197, 124, 0.12);

  font-family:
    Georgia,
    serif;

  text-align: center;

  pointer-events: none;

  transform-origin: center;
}

.current-block-title {
  margin-bottom: 3px;

  color: #f2c57c;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: bold;

  letter-spacing: 1.4px;
}

.current-block-number {
  font-size: 23px;

  line-height: 1.1;
}

.current-block-age {
  margin-top: 5px;

  color: white;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;
  font-weight: bold;
}

.current-block-panel.is-updated {
  animation:
    currentBlockUpdated
    1s
    ease-out
    1;
}

@keyframes currentBlockUpdated {
  0% {
    transform:
      scale(1);
  }

  35% {
    border-color: #ffd56a;

    box-shadow:
      0 5px 14px
      rgba(45, 24, 12, 0.28),
      0 0 24px
      rgba(255, 190, 37, 0.72);

    transform:
      translateY(-3px)
      scale(1.06);
  }

  100% {
    transform:
      scale(1);
  }
}

/* ------------------------------ */
/* Real block-mined surprise      */
/* ------------------------------ */

.block-event-layer {
  position: absolute;

  inset: 0;

  /* Below the rider (z-index 5), above the trail (z-index 2). */
  z-index: 4;

  overflow: hidden;

  pointer-events: none;

  visibility: hidden;
}

.block-event-layer.is-active {
  visibility: visible;
}

.block-impact-site {
  position: absolute;

  width: 104px;
  height: 104px;

  transform:
    translateX(-50%);
}

.block-shadow {
  position: absolute;

  left: 50%;
  bottom: -2px;

  width: 72px;
  height: 17px;

  background-color:
    rgba(45, 24, 12, 0.32);

  border-radius: 50%;

  opacity: 0;

  transform:
    translateX(-50%)
    scale(0.35);
}

.falling-bitcoin-block {
  position: absolute;

  left: 50%;
  bottom: 11px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;

  color: #5f3108;

  background:
    linear-gradient(
      135deg,
      #ffe889,
      #f59d08 72%
    );

  border:
    4px
    solid
    #8f4b08;

  border-radius: 5px;

  box-shadow:
    0 0 22px
    rgba(255, 188, 32, 0.7),
    inset 0 0 0 2px
    rgba(255, 244, 171, 0.35);

  opacity: 0;

  transform:
    translate(-50%, -78vh)
    rotate(-10deg);

  transform-origin:
    center bottom;
}

/* Small top and side faces make it read as a Bitcoin block/cube. */
.falling-bitcoin-block::before,
.falling-bitcoin-block::after {
  content: "";

  position: absolute;

  pointer-events: none;
}

.falling-bitcoin-block::before {
  left: 4px;
  top: -10px;

  width: 47px;
  height: 10px;

  background-color: #ffd35b;

  border:
    3px
    solid
    #8f4b08;

  border-bottom: 0;

  transform:
    skewX(-35deg);

  transform-origin:
    left bottom;
}

.falling-bitcoin-block::after {
  right: -10px;
  top: -4px;

  width: 10px;
  height: 50px;

  background-color: #c87407;

  border:
    3px
    solid
    #713704;

  border-left: 0;

  transform:
    skewY(-35deg);

  transform-origin:
    left top;
}

.falling-bitcoin-mark {
  position: relative;

  z-index: 1;

  font-family:
    Georgia,
    serif;

  font-size: 34px;
  font-weight: bold;

  line-height: 1;

  text-shadow:
    1px 2px 0
    rgba(255, 236, 151, 0.55);

  animation:
    bitcoinBlockGlow
    2.4s
    ease-in-out
    1.7s
    infinite;
}

.block-impact-dust {
  position: absolute;

  left: 50%;
  bottom: -3px;

  width: 140px;
  height: 58px;

  opacity: 0;

  transform:
    translateX(-50%);
}

.block-impact-dust span {
  position: absolute;

  bottom: 0;

  width: 45px;
  height: 31px;

  background-color:
    rgba(211, 146, 77, 0.82);

  border-radius: 50%;
}

.block-impact-dust span:nth-child(1) {
  left: 4px;
}

.block-impact-dust span:nth-child(2) {
  left: 47px;

  width: 52px;
  height: 39px;
}

.block-impact-dust span:nth-child(3) {
  right: 3px;
}

.block-mined-message {
  position: absolute;

  left: 50%;
  top: 16%;

  display: flex;

  flex-direction: column;
  align-items: center;

  min-width: 245px;

  padding:
    11px
    18px;

  color: #f8d799;

  background-color:
    rgba(49, 27, 14, 0.9);

  border:
    3px
    solid
    #b97932;

  border-radius: 7px;

  box-shadow:
    0 5px 14px
    rgba(45, 24, 12, 0.3);

  font-family:
    Georgia,
    serif;

  text-align: center;

  opacity: 0;

  transform:
    translate(-50%, -12px)
    scale(0.92);
}

.block-mined-title {
  margin-bottom: 3px;

  color: #f2c57c;

  font-size: 13px;
  font-weight: bold;

  letter-spacing: 1.4px;
}

.block-mined-number {
  font-size: 22px;
}

.block-mined-detail {
  margin-top: 3px;

  color: white;

  font-family:
    Arial,
    sans-serif;

  font-size: 11px;
}

.block-event-layer.is-active
.block-shadow {
  animation:
    blockShadowArrives
    30.5s
    ease-out
    forwards;
}

.block-event-layer.is-active
.falling-bitcoin-block {
  animation:
    bitcoinBlockFalls
    30.5s
    cubic-bezier(0.45, 0.05, 0.55, 0.95)
    forwards;
}

.block-event-layer.is-active
.block-impact-dust {
  animation:
    blockDustBurst
    1.45s
    ease-out
    1.08s
    forwards;
}

.block-event-layer.is-active
.block-mined-message {
  animation:
    showBlockMinedMessage
    5.4s
    ease
    1.35s
    forwards;
}

@keyframes bitcoinBlockFalls {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -78vh)
      rotate(-10deg);
  }

  1% {
    opacity: 1;
  }

  3.5% {
    opacity: 1;

    transform:
      translate(-50%, 0)
      rotate(2deg)
      scaleY(0.88);
  }

  4.2% {
    transform:
      translate(-50%, -9px)
      rotate(-1deg)
      scaleY(1.03);
  }

  5% {
    transform:
      translate(-50%, 0)
      rotate(0deg)
      scaleY(1);
  }

  94% {
    opacity: 1;

    transform:
      translate(-50%, 0)
      rotate(0deg)
      scaleY(1);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, 2px)
      rotate(0deg)
      scale(0.96);
  }
}

@keyframes bitcoinBlockGlow {
  0%,
  100% {
    opacity: 1;

    transform:
      scale(1);
  }

  50% {
    opacity: 0.84;

    transform:
      scale(1.04);
  }
}

@keyframes blockShadowArrives {
  0% {
    opacity: 0;

    transform:
      translateX(-50%)
      scale(0.25);
  }

  3.5% {
    opacity: 0.5;

    transform:
      translateX(-50%)
      scale(1);
  }

  94% {
    opacity: 0.45;

    transform:
      translateX(-50%)
      scale(1);
  }

  100% {
    opacity: 0;

    transform:
      translateX(-50%)
      scale(0.9);
  }
}

@keyframes blockDustBurst {
  0% {
    opacity: 0;

    transform:
      translateX(-50%)
      scale(0.3);
  }

  18% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;

    transform:
      translateX(-50%)
      translateY(-19px)
      scale(1.25);
  }
}

@keyframes showBlockMinedMessage {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -12px)
      scale(0.92);
  }

  14%,
  76% {
    opacity: 1;

    transform:
      translate(-50%, 0)
      scale(1);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -7px)
      scale(0.97);
  }
}


/* ------------------------------ */
/* Creator X profile link         */
/* ------------------------------ */

.x-profile-link {
  position: absolute;

  right: 18px;
  bottom: 18px;

  z-index: 20;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  color: #f2c57c;

  background-color:
    rgba(35, 20, 10, 0.72);

  border:
    1px
    solid
    rgba(216, 155, 69, 0.75);

  border-radius: 7px;

  font-size: 17px;

  text-decoration: none;

  opacity: 0.75;

  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}

.x-profile-link:hover,
.x-profile-link:focus-visible {
  opacity: 1;

  background-color:
    rgba(35, 20, 10, 0.92);
}
/* ------------------------------ */
/* Smaller screens                */
/* ------------------------------ */

@media (max-width: 600px) {

  .price-box {
    top: 15px;
    left: 15px;

    padding:
      10px
      14px;
  }

  .price-box strong {
    font-size: 19px;
  }

}


/* ------------------------------ */
/* Reduced-motion accessibility   */
/* ------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .distant-hills-track,
  .western-scenery-track,
  .rider {
    animation: none;
  }

}


/* ------------------------------ */
/* Current project refinements    */
/* ------------------------------ */

/* Explain the live-data concept immediately. */
.terrain-explanation {
  margin-top: 8px;

  color: #f2c57c;

  font-size: 11px;
  font-weight: bold;

  letter-spacing: 1.1px;

  text-transform: uppercase;

  opacity: 0.9;
}


/* Static setting sun. */
.western-sun {
  position: absolute;

  right: 12%;
  top: 37%;

  z-index: 0;

  width: 115px;
  height: 115px;

  background:
    radial-gradient(
      circle,
      #ffe6a3 0%,
      #f8c66d 55%,
      #e99848 100%
    );

  border-radius: 50%;

  box-shadow:
    0 0 35px
    rgba(255, 207, 112, 0.38);

  opacity: 0.9;

  pointer-events: none;
}


/* Wider, gentler vulture gliding. */
.vulture-two {
  transform: none;

  opacity: 0.58;
}

@keyframes circleVulture {

  0% {
    transform:
      translate(-80px, 0)
      rotate(-2deg);
  }

  20% {
    transform:
      translate(-10px, -18px)
      rotate(1deg);
  }

  40% {
    transform:
      translate(70px, 5px)
      rotate(2deg);
  }

  60% {
    transform:
      translate(145px, -14px)
      rotate(0deg);
  }

  80% {
    transform:
      translate(65px, 10px)
      rotate(-2deg);
  }

  100% {
    transform:
      translate(-80px, 0)
      rotate(-2deg);
  }

}


/* Highest daily Bitcoin peak label. */
.daily-peak-label {
  position: absolute;

  left: 50%;
  top: 32%;

  z-index: 2;

  display: flex;

  flex-direction: column;
  align-items: center;

  pointer-events: none;

  opacity: 0;

  transform:
    translate(-50%, -100%);

  transition:
    left 0.4s ease,
    top 0.4s ease,
    opacity 0.3s ease;

  white-space: nowrap;
}

.daily-peak-label.is-visible {
  opacity: 1;
}

.daily-peak-price {
  display: block;

  margin: 0;

  padding:
    4px
    8px;

  color: #f8d799;

  background-color:
    rgba(54, 29, 15, 0.84);

  border:
    1px
    solid
    rgba(242, 197, 124, 0.82);

  border-radius: 5px;

  box-shadow:
    0 3px 7px
    rgba(45, 24, 12, 0.25);

  font-family:
    Georgia,
    serif;

  font-size: 13px;
  font-weight: bold;

  line-height: 1.1;

  text-shadow:
    1px
    1px
    0
    rgba(0, 0, 0, 0.28);
}

.daily-peak-date {
  display: block;

  margin-top: 3px;

  color: #8b4b24;

  font-family:
    Arial,
    sans-serif;

  font-size: 10px;
  font-weight: bold;

  letter-spacing: 0.4px;

  text-align: center;

  text-shadow:
    1px
    1px
    0
    rgba(0, 0, 0, 0.28);
}

.daily-peak-pointer {
  display: block;

  margin-top: -1px;

  color: #5d3518;

  font-size: 11px;

  line-height: 10px;

  transform:
    rotate(180deg);
}


/* Keep the cleaner view selected earlier. */
.distant-hills {
  display: none;
}


@media (max-width: 600px) {

  .daily-peak-price {
    padding:
      3px
      6px;

    font-size: 11px;
  }

  .western-sun {
    right: 7%;

    width: 85px;
    height: 85px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .vulture,
  .falling-bitcoin-block,
  .falling-bitcoin-mark,
  .block-impact-dust {
    animation: none !important;
  }

}

/* Tumbleweed removed from the visible scene. */
.tumbleweed-layer {
  display: none;
}


@media (max-width: 600px) {
  .current-block-panel {
    top: 15px;
    right: 15px;

    min-width: 145px;

    padding:
      9px
      11px;
  }

  .current-block-title {
    font-size: 9px;
  }

  .current-block-number {
    font-size: 18px;
  }

  .current-block-age {
    font-size: 9px;
  }

  .block-impact-site {
    transform:
      translateX(-50%)
      scale(0.82);

    transform-origin:
      center bottom;
  }

  .block-mined-message {
    top: 28%;

    min-width: 205px;

    padding:
      9px
      12px;
  }

  .block-mined-number {
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-event-layer {
    display: none;
  }
}