@charset "utf-8";
/* Backgrounds that change as the game goes: --progress runs from 0 at the first roll to
   1 at the end, set on the page by app.js (renderJourney). */

/* Christmas: snow piles up along the bottom. */
[data-theme="christmas"] .scene {
  background:
    radial-gradient(ellipse 55% 100% at 25% 100%, #ffffff 0 60%, transparent 61%) bottom / 100% calc(8px + var(--progress, 0) * 80px) no-repeat,
    radial-gradient(ellipse 50% 100% at 78% 100%, #eef4ff 0 60%, transparent 61%) bottom / 100% calc(4px + var(--progress, 0) * 64px) no-repeat;
}
/* Midsummer: the light turns to a long, warm evening. */
[data-theme="midsummer"] .scene { background: linear-gradient(transparent 30%, rgba(255, 140, 70, .5)); opacity: calc(var(--progress, 0) * .9); }
/* Halloween: the full moon rises. */
[data-theme="halloween"] .scene {
  background: radial-gradient(circle, #fff3c4 0 30px, rgba(255, 236, 190, .35) 31px, transparent 80px) no-repeat;
  background-size: 180px 180px; background-position: 82% calc(100% - var(--progress, 0) * 88%);
}
/* Lucia: dawn comes up behind the candles. */
[data-theme="lucia"] .scene { background: linear-gradient(to top, rgba(255, 170, 90, .5), transparent 65%); opacity: var(--progress, 0); }
/* Kids: a rainbow appears. */
[data-theme="kids"] .scene {
  background: radial-gradient(circle at 50% 115%, transparent 34%, #ff4f87 34.5% 36%, #ff9f1c 36% 37.5%, #ffe14d 37.5% 39%,
    #2ec4b6 39% 40.5%, #4d7cfe 40.5% 42%, #a35cff 42% 43.5%, transparent 44%);
  opacity: calc(var(--progress, 0) * .55);
}
/* Easter: eggs turn up in the grass. */
[data-theme="easter"] .scene {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='44'%3E%3Cellipse cx='20' cy='30' rx='9' ry='12' fill='%23ffb3d1'/%3E%3Cellipse cx='75' cy='32' rx='9' ry='12' fill='%23a8d8ff'/%3E%3Cellipse cx='128' cy='30' rx='9' ry='12' fill='%23fff08a'/%3E%3Cpath d='M0 44 Q20 30 40 44 T80 44 T120 44 T170 44Z' fill='%2396d26b'/%3E%3C/svg%3E") bottom / 170px 44px repeat-x;
  opacity: var(--progress, 0);
}
/* Pirates: the island comes closer. */
[data-theme="pirates"] .scene::after {
  content: "🏝️"; position: absolute; right: 6%; bottom: 40px; font-size: calc(20px + var(--progress, 0) * 70px); opacity: calc(.3 + var(--progress, 0) * .6);
}
/* Space: the moon grows. */
[data-theme="space"] .scene::after {
  content: "🌕"; position: absolute; right: 4%; top: 12%; font-size: calc(24px + var(--progress, 0) * 90px); opacity: calc(.35 + var(--progress, 0) * .5);
}
/* Disco: the floor lights up more and more. */
[data-theme="disco"] .scene { background: linear-gradient(transparent 70%, rgba(255, 63, 164, .35)); opacity: var(--progress, 0); }
/* Under the sea: deeper and darker as the dive goes on. */
[data-theme="sea"] .scene { background: linear-gradient(transparent, rgba(2, 20, 40, .7)); opacity: var(--progress, 0); }
/* Northern lights: the aurora grows brighter. */
[data-theme="arctic"] .scene { background: radial-gradient(ellipse 80% 40% at 50% 0, rgba(80, 255, 170, .35), transparent 70%); opacity: var(--progress, 0); }
/* Construction: the building rises, floor by floor. */
[data-theme="construction"] .scene::after {
  content: ""; position: absolute; right: 3%; bottom: 0; width: 90px; height: calc(var(--progress, 0) * 55vh);
  background: repeating-linear-gradient(#b5452f 0 14px, #d5dbe0 14px 16px), #b5452f; border: 3px solid #3f4a54; border-bottom: none; opacity: .85;
}
/* Wild West: the sun goes down. */
[data-theme="wildwest"] .scene { background: linear-gradient(rgba(80, 30, 60, .55), rgba(200, 60, 40, .25) 70%, transparent); opacity: var(--progress, 0); }
/* Farm: the crops grow. */
[data-theme="farm"] .scene {
  background: repeating-linear-gradient(90deg, transparent 0 10px, #4f9a2f 10px 13px, transparent 13px 30px) bottom / 100% calc(44px + var(--progress, 0) * 60px) no-repeat;
}
/* Autumn: leaves pile up. */
[data-theme="autumn"] .scene {
  background: radial-gradient(ellipse 50% 100% at 25% 100%, #c0561b 0 60%, transparent 61%) bottom / 100% calc(var(--progress, 0) * 70px) no-repeat,
    radial-gradient(ellipse 45% 100% at 75% 100%, #e3a21a 0 60%, transparent 61%) bottom / 100% calc(var(--progress, 0) * 56px) no-repeat;
}
/* Birthday: more and more confetti. */
[data-theme="birthday"] .scene {
  background: radial-gradient(circle at 20px 30px, #ff6fa8 3px, transparent 4px), radial-gradient(circle at 70px 80px, #4cc9f0 3px, transparent 4px),
    radial-gradient(circle at 120px 20px, #ffd166 3px, transparent 4px);
  background-size: 150px 110px; opacity: var(--progress, 0);
}