*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4,
p,
span,
a {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Set core body defaults */
body #main-content {
  height: fit-content;
}

body {
  min-height: 100vh;
  height: fit-content;
  text-rendering: optimizespeed;
  line-height: 1.5;
}

.flex {
  display: flex;
}

[data-button] {
  cursor: pointer;
  padding: 1em 2.5em;
  min-width: 15.5rem;
}

img {
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

.lock {
  overflow: hidden !important;
}

:root {
  --base-date-font-size: 6px;
  --base-date-font-size-one: 12px;
  --gift-width: 72.8px;
  --gift-height: 71.7px;
  --gift-top-height: 28.81px;
  --gift-bot-height: 43.72px;
  --gift-top-pos-top: calc(50% - var(--gift-top-height) * 1.45);
  --gift-bot-pos-top: calc(50% - (var(--gift-top-height) / 2));
  --gift-pos-left: calc(50% - (var(--gift-width) / 2));
  --gift-img-pos-left: calc(var(--gift-pos-left) + var(--gift-width) * 0.3);
  --gift-top-ribbon-height: calc(var(--gift-top-height) * 0.35);
  --gift-top-height-no-ribbon: calc(var(--gift-top-height) - var(--gift-top-ribbon-height));

  /* animation vars */
  --gift-animated-width: 150px;
  --gift-animated-height: 149px;
  --gift-animated-top-angle: -111deg;
  --animation-top-offset: 16px;
}

#advent-calendar .prize-box .tile.tile-animation .date {
  font-size: 16px !important;
  margin: auto !important;
  line-height: 1 !important;
}

#advent-calendar #prize-box-1 .tile.tile-animation .date,
#advent-calendar #prize-box-2 .tile.tile-animation .date,
#advent-calendar #prize-box-3 .tile.tile-animation .date,
#advent-calendar #prize-box-4 .tile.tile-animation .date,
#advent-calendar #prize-box-5 .tile.tile-animation .date,
#advent-calendar #prize-box-6 .tile.tile-animation .date,
#advent-calendar #prize-box-7 .tile.tile-animation .date,
#advent-calendar #prize-box-8 .tile.tile-animation .date,
#advent-calendar #prize-box-9 .tile.tile-animation .date {
  font-size: 28px !important;
}

.gifts-wrap {
  width: 320px;
  height: 814px;
  margin: 0 4px;
  position: relative;
}

@media screen and (min-width: 768px) and (orientation: portrait) {
  .gifts-wrap {
    width: 740px;
    height: 1882px;
  }

  :root {
    --gift-width: 168px;
    --gift-height: 164px;
    --gift-top-height: 66px;
    --gift-bot-height: 101px;
    --gift-animated-width: 250px;
    --gift-animated-height: 249px;
    --animation-top-offset: 28px;
    --base-date-font-size: 15px;
    --base-date-font-size-one: 26px;
  }

  #advent-calendar .prize-box .tile.tile-animation .date {
    font-size: 20px !important;
  }

  #advent-calendar #prize-box-1 .tile.tile-animation .date,
  #advent-calendar #prize-box-2 .tile.tile-animation .date,
  #advent-calendar #prize-box-3 .tile.tile-animation .date,
  #advent-calendar #prize-box-4 .tile.tile-animation .date,
  #advent-calendar #prize-box-5 .tile.tile-animation .date,
  #advent-calendar #prize-box-6 .tile.tile-animation .date,
  #advent-calendar #prize-box-7 .tile.tile-animation .date,
  #advent-calendar #prize-box-8 .tile.tile-animation .date,
  #advent-calendar #prize-box-9 .tile.tile-animation .date {
    font-size: 38px !important;
  }
}

@media screen and (min-width: 1024px) and (orientation: portrait) {
  #advent-calendar .prize-box .tile.tile-animation .date {
    font-size: 30px !important;
  }

  #advent-calendar #prize-box-1 .tile.tile-animation .date,
  #advent-calendar #prize-box-2 .tile.tile-animation .date,
  #advent-calendar #prize-box-3 .tile.tile-animation .date,
  #advent-calendar #prize-box-4 .tile.tile-animation .date,
  #advent-calendar #prize-box-5 .tile.tile-animation .date,
  #advent-calendar #prize-box-6 .tile.tile-animation .date,
  #advent-calendar #prize-box-7 .tile.tile-animation .date,
  #advent-calendar #prize-box-8 .tile.tile-animation .date,
  #advent-calendar #prize-box-9 .tile.tile-animation .date {
    font-size: 60px !important;
  }
}

@media screen and (min-width: 1025px) and (orientation: landscape) {
  :root {
    --gift-width: 54.01px;
    --gift-height: 53.43px;
    --gift-top-height: 21.37px;
    --gift-bot-height: 32.43px;
    --base-date-font-size: 4px;
    --base-date-font-size-one: 8px;

    /* animation vars */
    --gift-animated-top-angle: -130deg;
    --gift-animated-width: 300px;
    --gift-animated-height: 299px;
    --animation-top-offset: 35px;
  }

  #advent-calendar .prize-box .tile.tile-animation .date {
    font-size: 24px !important;
  }

  #advent-calendar #prize-box-1 .tile.tile-animation .date,
  #advent-calendar #prize-box-2 .tile.tile-animation .date,
  #advent-calendar #prize-box-3 .tile.tile-animation .date,
  #advent-calendar #prize-box-4 .tile.tile-animation .date,
  #advent-calendar #prize-box-5 .tile.tile-animation .date,
  #advent-calendar #prize-box-6 .tile.tile-animation .date,
  #advent-calendar #prize-box-7 .tile.tile-animation .date,
  #advent-calendar #prize-box-8 .tile.tile-animation .date,
  #advent-calendar #prize-box-9 .tile.tile-animation .date {
    font-size: 40px !important;
  }

  .gifts-wrap {
    width: 758px;
    height: 433px;
  }
}

@media screen and (min-width: 1280px) and (orientation: landscape) {
  :root {
    --gift-width: 67.33px;
    --gift-height: 66.61px;
    --gift-top-height: 26.63px;
    --gift-bot-height: 40.32px;
    --base-date-font-size: 5px;
    --base-date-font-size-one: 10px;
  }

  .gifts-wrap {
    width: 947px;
    height: 540px;
  }
}

@media screen and (min-width: 1440px) and (orientation: landscape) {
  :root {
    --gift-width: 75.75px;
    --gift-height: 74.94px;
    --gift-top-height: 30.01px;
    --gift-bot-height: 45.12px;
    --base-date-font-size: 6px;
    --base-date-font-size-one: 12px;
  }

  .gifts-wrap {
    width: 1065px;
    height: 608px;
  }
}

@media screen and (min-width: 1600px) and (orientation: landscape) {
  :root {
    --gift-width: 84.17px;
    --gift-height: 83px;
    --gift-top-height: 33.38px;
    --gift-bot-height: 50.05px;
    --base-date-font-size: 7px;
    --base-date-font-size-one: 14px;
  }

  .gifts-wrap {
    width: 1183.33px;
    height: 675px;
  }

  #advent-calendar {
    padding-top: 8%;
  }
}

@media screen and (min-width: 1800px) and (orientation: landscape) {
  :root {
    --gift-width: 94.69px;
    --gift-height: 92.5px;
    --gift-top-height: 37.53px;
    --gift-bot-height: 56.15px;
    --base-date-font-size: 9px;
    --base-date-font-size-one: 15px;
  }

  .gifts-wrap {
    width: 1331px;
    height: 760px;
  }
}

@media screen and (min-width: 2000px) and (orientation: landscape) {
  :root {
    --gift-width: 105.21px;
    --gift-height: 103.5px;
    --gift-top-height: 41.69px;
    --gift-bot-height: 62.4px;
    --base-date-font-size: 9px;
    --base-date-font-size-one: 18px;
  }

  .gifts-wrap {
    width: 1480px;
    height: 840px;
  }
}

@media screen and (min-width: 2560px) and (orientation: landscape) {
  :root {
    --gift-width: 134.67px;
    --gift-height: 132.5px;
    --gift-top-height: 53.4px;
    --gift-bot-height: 79.83px;
    --base-date-font-size: 12px;
    --base-date-font-size-one: 22px;
  }

  .gifts-wrap {
    width: 1894px;
    height: 1076px;
  }

  #advent-calendar {
    padding-top: 6%;
  }
}

/* positioning classes for date number */
.num-pos-1 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.num-pos-2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.num-pos-3 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.num-pos-4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.num-pos-5 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.num-pos-6 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.num-pos-7 {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

.num-pos-8 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.num-pos-9 {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* social icons ================================================= */
.social__wrap {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0 auto 20px;
  padding: 0;
}

[data-social] {
  width: 50px;
  height: 50px;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px 5px 0;
  transition: transform 0.3s ease-out, opacity 0.5s ease-in;
}

[data-social]:hover {
  transform: translateY(-10px);
  opacity: 0.6;
}

[data-social] > a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  text-decoration: none;
}

a > svg {
  max-width: 60%;
  max-height: 60%;
  width: 60%;
  height: auto;
  object-fit: contain;
  margin: auto;
}

/* tos and pp ================================================= */
.document__wrap {
  width: 90%;
  max-width: 1025px;
  height: fit-content;
  margin: 40px auto 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 25px;
  padding: 0 20px 50px;
}

.document__title {
  text-align: center;
  margin: 20px auto 50px;
}

.point {
  margin-bottom: 20px;
}

.document__wrap h4 {
  margin-bottom: 20px;
  font-weight: bold;
}

.document__wrap p {
  margin-bottom: 15px;
}

/* GAME =========================================== */

#advent-calendar {
  width: 100%;
  height: fit-content;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#advent-calendar .content {
  position: relative;
  z-index: 50;
}

.logo-container {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  padding: 30px 20px;
}

.logo {
  width: 180px;
  height: auto;
  object-fit: contain;
}

.copyright {
  width: 100%;
  margin: auto 0 20px;
  padding: 0 20px;
}

.game-text {
  margin: 0 20px 30px;
}

.prize-box {
  width: var(--gift-width);
  height: var(--gift-height);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}

.prize-wrap {
  width: var(--gift-width);
  height: var(--gift-bot-height);
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prize-wrap .prize {
  width: calc(var(--gift-width) * 0.4);
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 3;
  opacity: 1;
  transform: rotateZ(-20deg);
}

.prize-wrap .light {
  width: var(--gift-width);
  height: auto;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
  opacity: 0;
}

.tile {
  width: var(--gift-width);
  height: var(--gift-top-height);
  display: flex !important;
  opacity: 1;
  background-size: 100% !important;
  background-repeat: no-repeat !important;
  background-position: bottom !important;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.tile-bottom {
  width: var(--gift-width);
  height: var(--gift-bot-height);
  object-fit: contain;
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.tile-inner {
  width: var(--gift-width);
  height: var(--gift-top-height-no-ribbon);
  margin-top: auto;
}

.date {
  line-height: 1;
}

/* ================================== advent door positions */

/* 1 */
#prize-box-1 {
  width: calc(var(--gift-width) * 1.56);
  height: calc(var(--gift-height) * 1.56);
  z-index: 6;
}

#prize-box-1 .tile .date {
  font-size: calc(var(--base-date-font-size-one) * 1.56) !important;
}

#prize-box-1 > .prize-wrap,
#prize-box-1 .tile-bottom {
  width: calc(var(--gift-width) * 1.56);
  height: calc(var(--gift-bot-height) * 1.56);
}

#prize-box-1 .prize {
  width: calc((var(--gift-width) * 1.56) * 0.4);
}

#prize-box-1 .light {
  width: calc(var(--gift-width) * 1.56);
}

#prize-box-1 .tile {
  width: calc(var(--gift-width) * 1.56);
  height: calc(var(--gift-top-height) * 1.56);
}

#prize-box-1 .tile-inner {
  width: calc(var(--gift-width) * 1.56);
  height: calc(var(--gift-top-height-no-ribbon) * 1.56);
}

/* 2 */
#prize-box-2 {
  width: calc(var(--gift-width) * 1);
  height: calc(var(--gift-height) * 1);
  z-index: 7;
}

#prize-box-2 .tile .date {
  font-size: calc(var(--base-date-font-size-one) * 1) !important;
}

#prize-box-2 > .prize-wrap,
#prize-box-2 .tile-bottom {
  width: calc(var(--gift-width) * 1);
  height: calc(var(--gift-bot-height) * 1);
}

#prize-box-2 .prize {
  width: calc((var(--gift-width) * 1) * 0.4);
}

#prize-box-2 .light {
  width: calc(var(--gift-width) * 1);
}

#prize-box-2 .tile {
  width: calc(var(--gift-width) * 1);
  height: calc(var(--gift-top-height) * 1);
}

#prize-box-2 .tile-inner {
  width: calc(var(--gift-width) * 1);
  height: calc(var(--gift-top-height-no-ribbon) * 1);
}

/* 3 */
#prize-box-3 {
  width: calc(var(--gift-width) * 1.21);
  height: calc(var(--gift-height) * 1.21);
  z-index: 7;
}

#prize-box-3 .tile .date {
  font-size: calc(var(--base-date-font-size-one) * 1.21) !important;
}

#prize-box-3 > .prize-wrap,
#prize-box-3 .tile-bottom {
  width: calc(var(--gift-width) * 1.21);
  height: calc(var(--gift-bot-height) * 1.21);
}

#prize-box-3 .prize {
  width: calc((var(--gift-width) * 1.21) * 0.4);
}

#prize-box-3 .light {
  width: calc(var(--gift-width) * 1.21);
}

#prize-box-3 .tile {
  width: calc(var(--gift-width) * 1.21);
  height: calc(var(--gift-top-height) * 1.21);
}

#prize-box-3 .tile-inner {
  width: calc(var(--gift-width) * 1.21);
  height: calc(var(--gift-top-height-no-ribbon) * 1.21);
}

/* 4 */
#prize-box-4 {
  width: calc(var(--gift-width) * 2.04);
  height: calc(var(--gift-height) * 2.04);
  z-index: 9;
}

#prize-box-4 .tile .date {
  font-size: calc(var(--base-date-font-size-one) * 2.04) !important;
}

#prize-box-4 > .prize-wrap,
#prize-box-4 .tile-bottom {
  width: calc(var(--gift-width) * 2.04);
  height: calc(var(--gift-bot-height) * 2.04);
}

#prize-box-4 .prize {
  width: calc((var(--gift-width) * 2.04) * 0.4);
}

#prize-box-4 .light {
  width: calc(var(--gift-width) * 2.04);
}

#prize-box-4 .tile {
  width: calc(var(--gift-width) * 2.04);
  height: calc(var(--gift-top-height) * 2.04);
}

#prize-box-4 .tile-inner {
  width: calc(var(--gift-width) * 2.04);
  height: calc(var(--gift-top-height-no-ribbon) * 2.04);
}

/* 5 */
#prize-box-5 {
  width: calc(var(--gift-width) * 2.14);
  height: calc(var(--gift-height) * 2.14);
  z-index: 8;
}

#prize-box-5 .tile .date {
  font-size: calc(var(--base-date-font-size-one) * 2.14) !important;
}

#prize-box-5 > .prize-wrap,
#prize-box-5 .tile-bottom {
  width: calc(var(--gift-width) * 2.14);
  height: calc(var(--gift-bot-height) * 2.14);
}

#prize-box-5 .prize {
  width: calc((var(--gift-width) * 2.14) * 0.4);
}

#prize-box-5 .light {
  width: calc(var(--gift-width) * 2.14);
}

#prize-box-5 .tile {
  width: calc(var(--gift-width) * 2.14);
  height: calc(var(--gift-top-height) * 2.14);
}

#prize-box-5 .tile-inner {
  width: calc(var(--gift-width) * 2.14);
  height: calc(var(--gift-top-height-no-ribbon) * 2.14);
}

/* 6 */
#prize-box-6 {
  width: calc(var(--gift-width) * 1.43);
  height: calc(var(--gift-height) * 1.43);
  z-index: 10;
}

#prize-box-6 .tile .date {
  font-size: calc(var(--base-date-font-size-one) * 1.43) !important;
}

#prize-box-6 > .prize-wrap,
#prize-box-6 .tile-bottom {
  width: calc(var(--gift-width) * 1.43);
  height: calc(var(--gift-bot-height) * 1.43);
}

#prize-box-6 .prize {
  width: calc((var(--gift-width) * 1.43) * 0.4);
}

#prize-box-6 .light {
  width: calc(var(--gift-width) * 1.43);
}

#prize-box-6 .tile {
  width: calc(var(--gift-width) * 1.43);
  height: calc(var(--gift-top-height) * 1.43);
}

#prize-box-6 .tile-inner {
  width: calc(var(--gift-width) * 1.43);
  height: calc(var(--gift-top-height-no-ribbon) * 1.43);
}

/* 7 */
#prize-box-7 {
  width: calc(var(--gift-width) * 1.42);
  height: calc(var(--gift-height) * 1.42);
  z-index: 11;
}

#prize-box-7 .tile .date {
  font-size: calc(var(--base-date-font-size-one) * 1.42) !important;
}

#prize-box-7 > .prize-wrap,
#prize-box-7 .tile-bottom {
  width: calc(var(--gift-width) * 1.42);
  height: calc(var(--gift-bot-height) * 1.42);
}

#prize-box-7 .prize {
  width: calc((var(--gift-width) * 1.42) * 0.4);
}

#prize-box-7 .light {
  width: calc(var(--gift-width) * 1.42);
}

#prize-box-7 .tile {
  width: calc(var(--gift-width) * 1.42);
  height: calc(var(--gift-top-height) * 1.42);
}

#prize-box-7 .tile-inner {
  width: calc(var(--gift-width) * 1.42);
  height: calc(var(--gift-top-height-no-ribbon) * 1.42);
}

/* 8 */
#prize-box-8 {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-height) * 1.53);
  z-index: 12;
}

#prize-box-8 .tile .date {
  font-size: calc(var(--base-date-font-size-one) * 1.53) !important;
}

#prize-box-8 > .prize-wrap,
#prize-box-8 .tile-bottom {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-bot-height) * 1.53);
}

#prize-box-8 .prize {
  width: calc((var(--gift-width) * 1.53) * 0.4);
}

#prize-box-8 .light {
  width: calc(var(--gift-width) * 1.53);
}

#prize-box-8 .tile {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-top-height) * 1.53);
}

#prize-box-8 .tile-inner {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-top-height-no-ribbon) * 1.53);
}

/* 9 */
#prize-box-9 {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-height) * 1.53);
  z-index: 13;
}

#prize-box-9 .tile .date {
  font-size: calc(var(--base-date-font-size-one) * 1.53) !important;
}

#prize-box-9 > .prize-wrap,
#prize-box-9 .tile-bottom {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-bot-height) * 1.53);
}

#prize-box-9 .prize {
  width: calc((var(--gift-width) * 1.53) * 0.4);
}

#prize-box-9 .light {
  width: calc(var(--gift-width) * 1.53);
}

#prize-box-9 .tile {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-top-height) * 1.53);
}

#prize-box-9 .tile-inner {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-top-height-no-ribbon) * 1.53);
}

/* 10 */
#prize-box-10 {
  width: calc(var(--gift-width) * 1.36);
  height: calc(var(--gift-height) * 1.36);
  z-index: 12;
}

#prize-box-10 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.36) !important;
}

#prize-box-10 > .prize-wrap,
#prize-box-10 .tile-bottom {
  width: calc(var(--gift-width) * 1.36);
  height: calc(var(--gift-bot-height) * 1.36);
}

#prize-box-10 .prize {
  width: calc((var(--gift-width) * 1.36) * 0.4);
}

#prize-box-10 .light {
  width: calc(var(--gift-width) * 1.36);
}

#prize-box-10 .tile {
  width: calc(var(--gift-width) * 1.36);
  height: calc(var(--gift-top-height) * 1.36);
}

#prize-box-10 .tile-inner {
  width: calc(var(--gift-width) * 1.36);
  height: calc(var(--gift-top-height-no-ribbon) * 1.36);
}

/* 11 */
#prize-box-11 {
  width: calc(var(--gift-width) * 1.44);
  height: calc(var(--gift-height) * 1.44);
  z-index: 14;
}

#prize-box-11 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.44) !important;
}

#prize-box-11 > .prize-wrap,
#prize-box-11 .tile-bottom {
  width: calc(var(--gift-width) * 1.44);
  height: calc(var(--gift-bot-height) * 1.44);
}

#prize-box-11 .prize {
  width: calc((var(--gift-width) * 1.44) * 0.4);
}

#prize-box-11 .light {
  width: calc(var(--gift-width) * 1.44);
}

#prize-box-11 .tile {
  width: calc(var(--gift-width) * 1.44);
  height: calc(var(--gift-top-height) * 1.44);
}

#prize-box-11 .tile-inner {
  width: calc(var(--gift-width) * 1.44);
  height: calc(var(--gift-top-height-no-ribbon) * 1.44);
}

/* 12 */
#prize-box-12 {
  width: calc(var(--gift-width) * 1.68);
  height: calc(var(--gift-height) * 1.68);
  z-index: 15;
}

#prize-box-12 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.68) !important;
}

#prize-box-12 > .prize-wrap,
#prize-box-12 .tile-bottom {
  width: calc(var(--gift-width) * 1.68);
  height: calc(var(--gift-bot-height) * 1.68);
}

#prize-box-12 .prize {
  width: calc((var(--gift-width) * 1.68) * 0.4);
}

#prize-box-12 .light {
  width: calc(var(--gift-width) * 1.68);
}

#prize-box-12 .tile {
  width: calc(var(--gift-width) * 1.68);
  height: calc(var(--gift-top-height) * 1.68);
}

#prize-box-12 .tile-inner {
  width: calc(var(--gift-width) * 1.68);
  height: calc(var(--gift-top-height-no-ribbon) * 1.68);
}

/* 13 */
#prize-box-13 {
  width: calc(var(--gift-width) * 1.38);
  height: calc(var(--gift-height) * 1.38);
  z-index: 14;
}

#prize-box-13 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.38) !important;
}

#prize-box-13 > .prize-wrap,
#prize-box-13 .tile-bottom {
  width: calc(var(--gift-width) * 1.38);
  height: calc(var(--gift-bot-height) * 1.38);
}

#prize-box-13 .prize {
  width: calc((var(--gift-width) * 1.38) * 0.4);
}

#prize-box-13 .light {
  width: calc(var(--gift-width) * 1.38);
}

#prize-box-13 .tile {
  width: calc(var(--gift-width) * 1.38);
  height: calc(var(--gift-top-height) * 1.38);
}

#prize-box-13 .tile-inner {
  width: calc(var(--gift-width) * 1.38);
  height: calc(var(--gift-top-height-no-ribbon) * 1.38);
}

/* 14 */
#prize-box-14 {
  width: calc(var(--gift-width) * 1.55);
  height: calc(var(--gift-height) * 1.55);
  z-index: 16;
}

#prize-box-14 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.55) !important;
}

#prize-box-14 > .prize-wrap,
#prize-box-14 .tile-bottom {
  width: calc(var(--gift-width) * 1.55);
  height: calc(var(--gift-bot-height) * 1.55);
}

#prize-box-14 .prize {
  width: calc((var(--gift-width) * 1.55) * 0.4);
}

#prize-box-14 .light {
  width: calc(var(--gift-width) * 1.55);
}

#prize-box-14 .tile {
  width: calc(var(--gift-width) * 1.55);
  height: calc(var(--gift-top-height) * 1.55);
}

#prize-box-14 .tile-inner {
  width: calc(var(--gift-width) * 1.55);
  height: calc(var(--gift-top-height-no-ribbon) * 1.55);
}

/* 15 */
#prize-box-15 {
  width: calc(var(--gift-width) * 1.9);
  height: calc(var(--gift-height) * 1.9);
  z-index: 17;
}

#prize-box-15 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.9) !important;
}

#prize-box-15 > .prize-wrap,
#prize-box-15 .tile-bottom {
  width: calc(var(--gift-width) * 1.9);
  height: calc(var(--gift-bot-height) * 1.9);
}

#prize-box-15 .prize {
  width: calc((var(--gift-width) * 1.9) * 0.4);
  max-height: 100px !important;
}

#prize-box-15 .light {
  width: calc(var(--gift-width) * 1.9);
}

#prize-box-15 .tile {
  width: calc(var(--gift-width) * 1.9);
  height: calc(var(--gift-top-height) * 1.9);
}

#prize-box-15 .tile-inner {
  width: calc(var(--gift-width) * 1.9);
  height: calc(var(--gift-top-height-no-ribbon) * 1.9);
}

/* 16 */
#prize-box-16 {
  width: calc(var(--gift-width) * 1.32);
  height: calc(var(--gift-height) * 1.32);
  z-index: 16;
}

#prize-box-16 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.32) !important;
}

#prize-box-16 > .prize-wrap,
#prize-box-16 .tile-bottom {
  width: calc(var(--gift-width) * 1.32);
  height: calc(var(--gift-bot-height) * 1.32);
}

#prize-box-16 .prize {
  width: calc((var(--gift-width) * 1.32) * 0.4);
}

#prize-box-16 .light {
  width: calc(var(--gift-width) * 1.32);
}

#prize-box-16 .tile {
  width: calc(var(--gift-width) * 1.32);
  height: calc(var(--gift-top-height) * 1.32);
}

#prize-box-16 .tile-inner {
  width: calc(var(--gift-width) * 1.32);
  height: calc(var(--gift-top-height-no-ribbon) * 1.32);
}

/* 17 */
#prize-box-17 {
  width: calc(var(--gift-width) * 1.59);
  height: calc(var(--gift-height) * 1.59);
  z-index: 18;
}

#prize-box-17 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.59) !important;
}

#prize-box-17 > .prize-wrap,
#prize-box-17 .tile-bottom {
  width: calc(var(--gift-width) * 1.59);
  height: calc(var(--gift-bot-height) * 1.59);
}

#prize-box-17 .prize {
  width: calc((var(--gift-width) * 1.59) * 0.4);
}

#prize-box-17 .light {
  width: calc(var(--gift-width) * 1.59);
}

#prize-box-17 .tile {
  width: calc(var(--gift-width) * 1.59);
  height: calc(var(--gift-top-height) * 1.59);
}

#prize-box-17 .tile-inner {
  width: calc(var(--gift-width) * 1.59);
  height: calc(var(--gift-top-height-no-ribbon) * 1.59);
}

/* 18 */
#prize-box-18 {
  width: calc(var(--gift-width) * 1.5);
  height: calc(var(--gift-height) * 1.5);
  z-index: 18;
}

#prize-box-18 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.5) !important;
}

#prize-box-18 > .prize-wrap,
#prize-box-18 .tile-bottom {
  width: calc(var(--gift-width) * 1.5);
  height: calc(var(--gift-bot-height) * 1.5);
}

#prize-box-18 .prize {
  width: calc((var(--gift-width) * 1.5) * 0.4);
}

#prize-box-18 .light {
  width: calc(var(--gift-width) * 1.5);
}

#prize-box-18 .tile {
  width: calc(var(--gift-width) * 1.5);
  height: calc(var(--gift-top-height) * 1.5);
}

#prize-box-18 .tile-inner {
  width: calc(var(--gift-width) * 1.5);
  height: calc(var(--gift-top-height-no-ribbon) * 1.5);
}

/* 19 */
#prize-box-19 {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-height) * 1.53);
  z-index: 20;
}

#prize-box-19 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.53) !important;
}

#prize-box-19 > .prize-wrap,
#prize-box-19 .tile-bottom {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-bot-height) * 1.53);
}

#prize-box-19 .prize {
  width: calc((var(--gift-width) * 1.53) * 0.4);
}

#prize-box-19 .light {
  width: calc(var(--gift-width) * 1.53);
}

#prize-box-19 .tile {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-top-height) * 1.53);
}

#prize-box-19 .tile-inner {
  width: calc(var(--gift-width) * 1.53);
  height: calc(var(--gift-top-height-no-ribbon) * 1.53);
}

/* 20 */
#prize-box-20 {
  width: calc(var(--gift-width) * 1.83);
  height: calc(var(--gift-height) * 1.83);
  z-index: 19;
}

#prize-box-20 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.83) !important;
}

#prize-box-20 > .prize-wrap,
#prize-box-20 .tile-bottom {
  width: calc(var(--gift-width) * 1.83);
  height: calc(var(--gift-bot-height) * 1.83);
}

#prize-box-20 .prize {
  width: calc((var(--gift-width) * 1.83) * 0.4);
}

#prize-box-20 .light {
  width: calc(var(--gift-width) * 1.83);
}

#prize-box-20 .tile {
  width: calc(var(--gift-width) * 1.83);
  height: calc(var(--gift-top-height) * 1.83);
}

#prize-box-20 .tile-inner {
  width: calc(var(--gift-width) * 1.83);
  height: calc(var(--gift-top-height-no-ribbon) * 1.83);
}

/* 21 */
#prize-box-21 {
  width: calc(var(--gift-width) * 1.54);
  height: calc(var(--gift-height) * 1.54);
  z-index: 22;
}

#prize-box-21 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.54) !important;
}

#prize-box-21 > .prize-wrap,
#prize-box-21 .tile-bottom {
  width: calc(var(--gift-width) * 1.54);
  height: calc(var(--gift-bot-height) * 1.54);
}

#prize-box-21 .prize {
  width: calc((var(--gift-width) * 1.54) * 0.4);
}

#prize-box-21 .light {
  width: calc(var(--gift-width) * 1.54);
}

#prize-box-21 .tile {
  width: calc(var(--gift-width) * 1.54);
  height: calc(var(--gift-top-height) * 1.54);
}

#prize-box-21 .tile-inner {
  width: calc(var(--gift-width) * 1.54);
  height: calc(var(--gift-top-height-no-ribbon) * 1.54);
}

/* 22 */
#prize-box-22 {
  width: calc(var(--gift-width) * 1.42);
  height: calc(var(--gift-height) * 1.42);
  z-index: 24;
}

#prize-box-22 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.42) !important;
}

#prize-box-22 > .prize-wrap,
#prize-box-22 .tile-bottom {
  width: calc(var(--gift-width) * 1.42);
  height: calc(var(--gift-bot-height) * 1.42);
}

#prize-box-22 .prize {
  width: calc((var(--gift-width) * 1.42) * 0.4);
}

#prize-box-22 .light {
  width: calc(var(--gift-width) * 1.42);
}

#prize-box-22 .tile {
  width: calc(var(--gift-width) * 1.42);
  height: calc(var(--gift-top-height) * 1.42);
}

#prize-box-22 .tile-inner {
  width: calc(var(--gift-width) * 1.42);
  height: calc(var(--gift-top-height-no-ribbon) * 1.42);
}

/* 23 */
#prize-box-23 {
  width: calc(var(--gift-width) * 2.04);
  height: calc(var(--gift-height) * 2.04);
  z-index: 23;
}

#prize-box-23 .tile .date {
  font-size: calc(var(--base-date-font-size) * 2.04) !important;
}

#prize-box-23 > .prize-wrap,
#prize-box-23 .tile-bottom {
  width: calc(var(--gift-width) * 2.04);
  height: calc(var(--gift-bot-height) * 2.04);
}

#prize-box-23 .prize {
  width: calc((var(--gift-width) * 2.04) * 0.4);
}

#prize-box-23 .light {
  width: calc(var(--gift-width) * 2.04);
}

#prize-box-23 .tile {
  width: calc(var(--gift-width) * 2.04);
  height: calc(var(--gift-top-height) * 2.04);
}

#prize-box-23 .tile-inner {
  width: calc(var(--gift-width) * 2.04);
  height: calc(var(--gift-top-height-no-ribbon) * 2.04);
}

/* 24 */
#prize-box-24 {
  width: calc(var(--gift-width) * 1.5);
  height: calc(var(--gift-height) * 1.5);
  z-index: 24;
}

#prize-box-24 .tile .date {
  font-size: calc(var(--base-date-font-size) * 1.5) !important;
}

#prize-box-24 > .prize-wrap,
#prize-box-24 .tile-bottom {
  width: calc(var(--gift-width) * 1.5);
  height: calc(var(--gift-bot-height) * 1.5);
}

#prize-box-24 .prize {
  width: calc((var(--gift-width) * 1.5) * 0.4);
}

#prize-box-24 .light {
  width: calc(var(--gift-width) * 1.5);
}

#prize-box-24 .tile {
  width: calc(var(--gift-width) * 1.5);
  height: calc(var(--gift-top-height) * 1.5);
}

#prize-box-24 .tile-inner {
  width: calc(var(--gift-width) * 1.5);
  height: calc(var(--gift-top-height-no-ribbon) * 1.5);
}

/* tile positions */
.prize-box {
  position: absolute;
}

#prize-box-1 {
  top: 0;
  left: 31.94%;
}

#prize-box-2 {
  top: 4.2%;
  left: 14.72%;
}

#prize-box-3 {
  top: 6.8%;
  left: 56.2%;
}

#prize-box-4 {
  top: 10.81%;
  left: 11.76%;
}

#prize-box-5 {
  top: 15.1%;
  left: 46.11%;
}

#prize-box-6 {
  top: 18.42%;
  left: 5%;
}

#prize-box-7 {
  top: 24.8%;
  left: 32.4%;
}

#prize-box-8 {
  top: 28.86%;
  left: 3.33%;
}

#prize-box-9 {
  top: 35.56%;
  left: 32.22%;
}

#prize-box-10 {
  top: 32.3%;
  left: 62.22%;
}

#prize-box-11 {
  top: 40.14%;
  left: 1.94%;
}

#prize-box-12 {
  top: 44.9%;
  left: 30.56%;
}

#prize-box-13 {
  top: 42.5%;
  left: 64.35%;
}

#prize-box-14 {
  top: 51.12%;
  left: 0.37%;
}

#prize-box-15 {
  top: 57.52%;
  left: 30.83%;
}

#prize-box-16 {
  top: 53.2%;
  left: 65%;
}

#prize-box-17 {
  top: 62.75%;
  left: 0.74%;
}

#prize-box-18 {
  top: 63.2%;
  left: 63%;
}

#prize-box-19 {
  top: 72.54%;
  left: 32.96%;
}

#prize-box-20 {
  top: 74.8%;
  left: 0.65%;
}

#prize-box-21 {
  top: 74.8%;
  left: 62.96%;
}

#prize-box-22 {
  top: 87.52%;
  left: 1.02%;
}

#prize-box-23 {
  top: 82.04%;
  left: 28.89%;
}

#prize-box-24 {
  top: 86.8%;
  left: 63.15%;
}

@media screen and (min-width: 1025px) and (orientation: landscape) {
  /* 1 */
  #prize-box-1 {
    z-index: 5;
    width: calc(var(--gift-width) * 1.76);
    height: calc(var(--gift-height) * 1.76);
  }

  #prize-box-1 .tile .date {
    font-size: calc(var(--base-date-font-size-one) * 1.76) !important;
  }

  #prize-box-1 > .prize-wrap,
  #prize-box-1 .tile-bottom {
    width: calc(var(--gift-width) * 1.76);
    height: calc(var(--gift-bot-height) * 1.76);
  }

  #prize-box-1 .prize {
    width: calc((var(--gift-width) * 1.76) * 0.4);
  }

  #prize-box-1 .light {
    width: calc(var(--gift-width) * 1.76);
  }

  #prize-box-1 .tile {
    width: calc(var(--gift-width) * 1.76);
    height: calc(var(--gift-top-height) * 1.76);
  }

  #prize-box-1 .tile-inner {
    width: calc(var(--gift-width) * 1.76);
    height: calc(var(--gift-top-height-no-ribbon) * 1.76);
  }

  /* 2 */
  #prize-box-2 {
    z-index: 8;
    width: calc(var(--gift-width) * 0.91);
    height: calc(var(--gift-height) * 0.91);
  }

  #prize-box-2 .tile .date {
    font-size: calc(var(--base-date-font-size-one) * 0.91) !important;
  }

  #prize-box-2 > .prize-wrap,
  #prize-box-2 .tile-bottom {
    width: calc(var(--gift-width) * 0.91);
    height: calc(var(--gift-bot-height) * 0.91);
  }

  #prize-box-2 .prize {
    width: calc((var(--gift-width) * 0.91) * 0.4);
  }

  #prize-box-2 .light {
    width: calc(var(--gift-width) * 0.91);
  }

  #prize-box-2 .tile {
    width: calc(var(--gift-width) * 0.91);
    height: calc(var(--gift-top-height) * 0.91);
  }

  #prize-box-2 .tile-inner {
    width: calc(var(--gift-width) * 0.91);
    height: calc(var(--gift-top-height-no-ribbon) * 0.91);
  }

  /* 3 */
  #prize-box-3 {
    z-index: 11;
    width: calc(var(--gift-width) * 1.59);
    height: calc(var(--gift-height) * 1.59);
  }

  #prize-box-3 .tile .date {
    font-size: calc(var(--base-date-font-size-one) * 1.59) !important;
  }

  #prize-box-3 > .prize-wrap,
  #prize-box-3 .tile-bottom {
    width: calc(var(--gift-width) * 1.59);
    height: calc(var(--gift-bot-height) * 1.59);
  }

  #prize-box-3 .prize {
    width: calc((var(--gift-width) * 1.59) * 0.4);
  }

  #prize-box-3 .light {
    width: calc(var(--gift-width) * 1.59);
  }

  #prize-box-3 .tile {
    width: calc(var(--gift-width) * 1.59);
    height: calc(var(--gift-top-height) * 1.59);
  }

  #prize-box-3 .tile-inner {
    width: calc(var(--gift-width) * 1.59);
    height: calc(var(--gift-top-height-no-ribbon) * 1.59);
  }

  /* 4 */
  #prize-box-4 {
    z-index: 14;
    width: calc(var(--gift-width) * 3.12);
    height: calc(var(--gift-height) * 3.12);
  }

  #prize-box-4 .tile .date {
    font-size: calc(var(--base-date-font-size-one) * 3.12) !important;
  }

  #prize-box-4 > .prize-wrap,
  #prize-box-4 .tile-bottom {
    width: calc(var(--gift-width) * 3.12);
    height: calc(var(--gift-bot-height) * 3.12);
  }

  #prize-box-4 .prize {
    width: calc((var(--gift-width) * 3.12) * 0.4);
  }

  #prize-box-4 .light {
    width: calc(var(--gift-width) * 3.12);
  }

  #prize-box-4 .tile {
    width: calc(var(--gift-width) * 3.12);
    height: calc(var(--gift-top-height) * 3.12);
  }

  #prize-box-4 .tile-inner {
    width: calc(var(--gift-width) * 3.12);
    height: calc(var(--gift-top-height-no-ribbon) * 3.12);
  }

  /* 5 */
  #prize-box-5 {
    z-index: 12;
    width: calc(var(--gift-width) * 1.74);
    height: calc(var(--gift-height) * 1.74);
  }

  #prize-box-5 .tile .date {
    font-size: calc(var(--base-date-font-size-one) * 1.74) !important;
  }

  #prize-box-5 > .prize-wrap,
  #prize-box-5 .tile-bottom {
    width: calc(var(--gift-width) * 1.74);
    height: calc(var(--gift-bot-height) * 1.74);
  }

  #prize-box-5 .prize {
    width: calc((var(--gift-width) * 1.74) * 0.4);
  }

  #prize-box-5 .light {
    width: calc(var(--gift-width) * 1.74);
  }

  #prize-box-5 .tile {
    width: calc(var(--gift-width) * 1.74);
    height: calc(var(--gift-top-height) * 1.74);
  }

  #prize-box-5 .tile-inner {
    width: calc(var(--gift-width) * 1.74);
    height: calc(var(--gift-top-height-no-ribbon) * 1.74);
  }

  /* 6 */
  #prize-box-6 {
    z-index: 11;
    width: calc(var(--gift-width) * 1.19);
    height: calc(var(--gift-height) * 1.19);
  }

  #prize-box-6 .tile .date {
    font-size: calc(var(--base-date-font-size-one) * 1.19) !important;
  }

  #prize-box-6 > .prize-wrap,
  #prize-box-6 .tile-bottom {
    width: calc(var(--gift-width) * 1.19);
    height: calc(var(--gift-bot-height) * 1.19);
  }

  #prize-box-6 .prize {
    width: calc((var(--gift-width) * 1.19) * 0.4);
  }

  #prize-box-6 .light {
    width: calc(var(--gift-width) * 1.19);
  }

  #prize-box-6 .tile {
    width: calc(var(--gift-width) * 1.19);
    height: calc(var(--gift-top-height) * 1.19);
  }

  #prize-box-6 .tile-inner {
    width: calc(var(--gift-width) * 1.19);
    height: calc(var(--gift-top-height-no-ribbon) * 1.19);
  }

  /* 7 */
  #prize-box-7 {
    z-index: 17;
    width: calc(var(--gift-width) * 2.23);
    height: calc(var(--gift-height) * 2.23);
  }

  #prize-box-7 .tile .date {
    font-size: calc(var(--base-date-font-size-one) * 2.23) !important;
  }

  #prize-box-7 > .prize-wrap,
  #prize-box-7 .tile-bottom {
    width: calc(var(--gift-width) * 2.23);
    height: calc(var(--gift-bot-height) * 2.23);
  }

  #prize-box-7 .prize {
    width: calc((var(--gift-width) * 2.23) * 0.4);
  }

  #prize-box-7 .light {
    width: calc(var(--gift-width) * 2.23);
  }

  #prize-box-7 .tile {
    width: calc(var(--gift-width) * 2.23);
    height: calc(var(--gift-top-height) * 2.23);
  }

  #prize-box-7 .tile-inner {
    width: calc(var(--gift-width) * 2.23);
    height: calc(var(--gift-top-height-no-ribbon) * 2.23);
  }

  /* 8 */
  #prize-box-8 {
    z-index: 20;
    width: calc(var(--gift-width) * 1.46);
    height: calc(var(--gift-height) * 1.46);
  }

  #prize-box-8 .tile .date {
    font-size: calc(var(--base-date-font-size-one) * 1.46) !important;
  }

  #prize-box-8 > .prize-wrap,
  #prize-box-8 .tile-bottom {
    width: calc(var(--gift-width) * 1.46);
    height: calc(var(--gift-bot-height) * 1.46);
  }

  #prize-box-8 .prize {
    width: calc((var(--gift-width) * 1.46) * 0.4);
  }

  #prize-box-8 .light {
    width: calc(var(--gift-width) * 1.46);
  }

  #prize-box-8 .tile {
    width: calc(var(--gift-width) * 1.46);
    height: calc(var(--gift-top-height) * 1.46);
  }

  #prize-box-8 .tile-inner {
    width: calc(var(--gift-width) * 1.46);
    height: calc(var(--gift-top-height-no-ribbon) * 1.46);
  }

  /* 9 */
  #prize-box-9 {
    z-index: 20;
    width: calc(var(--gift-width) * 2.08);
    height: calc(var(--gift-height) * 2.08);
  }

  #prize-box-9 .tile .date {
    font-size: calc(var(--base-date-font-size-one) * 2.08) !important;
  }

  #prize-box-9 > .prize-wrap,
  #prize-box-9 .tile-bottom {
    width: calc(var(--gift-width) * 2.08);
    height: calc(var(--gift-bot-height) * 2.08);
  }

  #prize-box-9 .prize {
    width: calc((var(--gift-width) * 2.08) * 0.4);
  }

  #prize-box-9 .light {
    width: calc(var(--gift-width) * 2.08);
  }

  #prize-box-9 .tile {
    width: calc(var(--gift-width) * 2.08);
    height: calc(var(--gift-top-height) * 2.08);
  }

  #prize-box-9 .tile-inner {
    width: calc(var(--gift-width) * 2.08);
    height: calc(var(--gift-top-height-no-ribbon) * 2.08);
  }

  /* 10 */
  #prize-box-10 {
    z-index: 23;
    width: calc(var(--gift-width) * 1.28);
    height: calc(var(--gift-height) * 1.28);
  }

  #prize-box-10 .tile .date {
    font-size: calc(var(--base-date-font-size) * 1.28) !important;
  }

  #prize-box-10 > .prize-wrap,
  #prize-box-10 .tile-bottom {
    width: calc(var(--gift-width) * 1.28);
    height: calc(var(--gift-bot-height) * 1.28);
  }

  #prize-box-10 .prize {
    width: calc((var(--gift-width) * 1.28) * 0.4);
  }

  #prize-box-10 .light {
    width: calc(var(--gift-width) * 1.28);
  }

  #prize-box-10 .tile {
    width: calc(var(--gift-width) * 1.28);
    height: calc(var(--gift-top-height) * 1.28);
  }

  #prize-box-10 .tile-inner {
    width: calc(var(--gift-width) * 1.28);
    height: calc(var(--gift-top-height-no-ribbon) * 1.28);
  }

  /* 11 */
  #prize-box-11 {
    z-index: 22;
    width: calc(var(--gift-width) * 2.12);
    height: calc(var(--gift-height) * 2.12);
  }

  #prize-box-11 .tile .date {
    font-size: calc(var(--base-date-font-size) * 2.12) !important;
  }

  #prize-box-11 > .prize-wrap,
  #prize-box-11 .tile-bottom {
    width: calc(var(--gift-width) * 2.12);
    height: calc(var(--gift-bot-height) * 2.12);
  }

  #prize-box-11 .prize {
    width: calc((var(--gift-width) * 2.12) * 0.4);
  }

  #prize-box-11 .light {
    width: calc(var(--gift-width) * 2.12);
  }

  #prize-box-11 .tile {
    width: calc(var(--gift-width) * 2.12);
    height: calc(var(--gift-top-height) * 2.12);
  }

  #prize-box-11 .tile-inner {
    width: calc(var(--gift-width) * 2.12);
    height: calc(var(--gift-top-height-no-ribbon) * 2.12);
  }

  /* 12 */
  #prize-box-12 {
    z-index: 21;
    width: calc(var(--gift-width) * 3.06);
    height: calc(var(--gift-height) * 3.06);
  }

  #prize-box-12 .tile .date {
    font-size: calc(var(--base-date-font-size) * 3.06) !important;
  }

  #prize-box-12 > .prize-wrap,
  #prize-box-12 .tile-bottom {
    width: calc(var(--gift-width) * 3.06);
    height: calc(var(--gift-bot-height) * 3.06);
  }

  #prize-box-12 .prize {
    width: calc((var(--gift-width) * 3.06) * 0.4);
  }

  #prize-box-12 .light {
    width: calc(var(--gift-width) * 3.06);
  }

  #prize-box-12 .tile {
    width: calc(var(--gift-width) * 3.06);
    height: calc(var(--gift-top-height) * 3.06);
  }

  #prize-box-12 .tile-inner {
    width: calc(var(--gift-width) * 3.06);
    height: calc(var(--gift-top-height-no-ribbon) * 3.06);
  }

  /* 13 */
  #prize-box-13 {
    z-index: 23;
    width: calc(var(--gift-width) * 3.5);
    height: calc(var(--gift-height) * 3.5);
  }

  #prize-box-13 .tile .date {
    font-size: calc(var(--base-date-font-size) * 3.5) !important;
  }

  #prize-box-13 > .prize-wrap,
  #prize-box-13 .tile-bottom {
    width: calc(var(--gift-width) * 3.5);
    height: calc(var(--gift-bot-height) * 3.5);
  }

  #prize-box-13 .prize {
    width: calc((var(--gift-width) * 3.5) * 0.4);
  }

  #prize-box-13 .light {
    width: calc(var(--gift-width) * 3.5);
  }

  #prize-box-13 .tile {
    width: calc(var(--gift-width) * 3.5);
    height: calc(var(--gift-top-height) * 3.5);
  }

  #prize-box-13 .tile-inner {
    width: calc(var(--gift-width) * 3.5);
    height: calc(var(--gift-top-height-no-ribbon) * 3.5);
  }

  /* 14 */
  #prize-box-14 {
    z-index: 24;
    width: calc(var(--gift-width) * 1.99);
    height: calc(var(--gift-height) * 1.99);
  }

  #prize-box-14 .tile .date {
    font-size: calc(var(--base-date-font-size) * 1.99) !important;
  }

  #prize-box-14 > .prize-wrap,
  #prize-box-14 .tile-bottom {
    width: calc(var(--gift-width) * 1.99);
    height: calc(var(--gift-bot-height) * 1.99);
  }

  #prize-box-14 .prize {
    width: calc((var(--gift-width) * 1.99) * 0.4);
  }

  #prize-box-14 .light {
    width: calc(var(--gift-width) * 1.99);
  }

  #prize-box-14 .tile {
    width: calc(var(--gift-width) * 1.99);
    height: calc(var(--gift-top-height) * 1.99);
  }

  #prize-box-14 .tile-inner {
    width: calc(var(--gift-width) * 1.99);
    height: calc(var(--gift-top-height-no-ribbon) * 1.99);
  }

  /* 15 */
  #prize-box-15 {
    z-index: 25;
    width: calc(var(--gift-width) * 3.06);
    height: calc(var(--gift-height) * 3.06);
  }

  #prize-box-15 .tile .date {
    font-size: calc(var(--base-date-font-size) * 3.06) !important;
  }

  #prize-box-15 > .prize-wrap,
  #prize-box-15 .tile-bottom {
    width: calc(var(--gift-width) * 3.06);
    height: calc(var(--gift-bot-height) * 3.06);
  }

  #prize-box-15 .prize {
    width: calc((var(--gift-width) * 3.06) * 0.4);
    max-height: 150px !important;
  }

  #prize-box-15 .light {
    width: calc(var(--gift-width) * 3.06);
  }

  #prize-box-15 .tile {
    width: calc(var(--gift-width) * 3.06);
    height: calc(var(--gift-top-height) * 3.06);
  }

  #prize-box-15 .tile-inner {
    width: calc(var(--gift-width) * 3.06);
    height: calc(var(--gift-top-height-no-ribbon) * 3.06);
  }

  /* 16 */
  #prize-box-16 {
    z-index: 24;
    width: calc(var(--gift-width) * 2.64);
    height: calc(var(--gift-height) * 2.64);
  }

  #prize-box-16 .tile .date {
    font-size: calc(var(--base-date-font-size) * 2.64) !important;
  }

  #prize-box-16 > .prize-wrap,
  #prize-box-16 .tile-bottom {
    width: calc(var(--gift-width) * 2.64);
    height: calc(var(--gift-bot-height) * 2.64);
  }

  #prize-box-16 .prize {
    width: calc((var(--gift-width) * 2.64) * 0.4);
  }

  #prize-box-16 .light {
    width: calc(var(--gift-width) * 2.64);
  }

  #prize-box-16 .tile {
    width: calc(var(--gift-width) * 2.64);
    height: calc(var(--gift-top-height) * 2.64);
  }

  #prize-box-16 .tile-inner {
    width: calc(var(--gift-width) * 2.64);
    height: calc(var(--gift-top-height-no-ribbon) * 2.64);
  }

  /* 17 */
  #prize-box-17 {
    z-index: 23;
    width: calc(var(--gift-width) * 1.4);
    height: calc(var(--gift-height) * 1.4);
  }

  #prize-box-17 .tile .date {
    font-size: calc(var(--base-date-font-size) * 1.4) !important;
  }

  #prize-box-17 > .prize-wrap,
  #prize-box-17 .tile-bottom {
    width: calc(var(--gift-width) * 1.4);
    height: calc(var(--gift-bot-height) * 1.4);
  }

  #prize-box-17 .prize {
    width: calc((var(--gift-width) * 1.4) * 0.4);
  }

  #prize-box-17 .light {
    width: calc(var(--gift-width) * 1.4);
  }

  #prize-box-17 .tile {
    width: calc(var(--gift-width) * 1.4);
    height: calc(var(--gift-top-height) * 1.4);
  }

  #prize-box-17 .tile-inner {
    width: calc(var(--gift-width) * 1.4);
    height: calc(var(--gift-top-height-no-ribbon) * 1.4);
  }

  /* 18 */
  #prize-box-18 {
    z-index: 25;
    width: calc(var(--gift-width) * 1.42);
    height: calc(var(--gift-height) * 1.42);
  }

  #prize-box-18 .tile .date {
    font-size: calc(var(--base-date-font-size) * 1.42) !important;
  }

  #prize-box-18 > .prize-wrap,
  #prize-box-18 .tile-bottom {
    width: calc(var(--gift-width) * 1.42);
    height: calc(var(--gift-bot-height) * 1.42);
  }

  #prize-box-18 .prize {
    width: calc((var(--gift-width) * 1.42) * 0.4);
  }

  #prize-box-18 .light {
    width: calc(var(--gift-width) * 1.42);
  }

  #prize-box-18 .tile {
    width: calc(var(--gift-width) * 1.42);
    height: calc(var(--gift-top-height) * 1.42);
  }

  #prize-box-18 .tile-inner {
    width: calc(var(--gift-width) * 1.42);
    height: calc(var(--gift-top-height-no-ribbon) * 1.42);
  }

  /* 19 */
  #prize-box-19 {
    z-index: 25;
    width: calc(var(--gift-width) * 1.74);
    height: calc(var(--gift-height) * 1.74);
  }

  #prize-box-19 .tile .date {
    font-size: calc(var(--base-date-font-size) * 1.74) !important;
  }

  #prize-box-19 > .prize-wrap,
  #prize-box-19 .tile-bottom {
    width: calc(var(--gift-width) * 1.74);
    height: calc(var(--gift-bot-height) * 1.74);
  }

  #prize-box-19 .prize {
    width: calc((var(--gift-width) * 1.74) * 0.4);
  }

  #prize-box-19 .light {
    width: calc(var(--gift-width) * 1.74);
  }

  #prize-box-19 .tile {
    width: calc(var(--gift-width) * 1.74);
    height: calc(var(--gift-top-height) * 1.74);
  }

  #prize-box-19 .tile-inner {
    width: calc(var(--gift-width) * 1.74);
    height: calc(var(--gift-top-height-no-ribbon) * 1.74);
  }

  /* 20 */
  #prize-box-20 {
    z-index: 26;
    width: calc(var(--gift-width) * 2.31);
    height: calc(var(--gift-height) * 2.31);
  }

  #prize-box-20 .tile .date {
    font-size: calc(var(--base-date-font-size) * 2.31) !important;
  }

  #prize-box-20 > .prize-wrap,
  #prize-box-20 .tile-bottom {
    width: calc(var(--gift-width) * 2.31);
    height: calc(var(--gift-bot-height) * 2.31);
  }

  #prize-box-20 .prize {
    width: calc((var(--gift-width) * 2.31) * 0.4);
  }

  #prize-box-20 .light {
    width: calc(var(--gift-width) * 2.31);
  }

  #prize-box-20 .tile {
    width: calc(var(--gift-width) * 2.31);
    height: calc(var(--gift-top-height) * 2.31);
  }

  #prize-box-20 .tile-inner {
    width: calc(var(--gift-width) * 2.31);
    height: calc(var(--gift-top-height-no-ribbon) * 2.31);
  }

  /* 21 */
  #prize-box-21 {
    z-index: 26;
    width: calc(var(--gift-width) * 1.66);
    height: calc(var(--gift-height) * 1.66);
  }

  #prize-box-21 .tile .date {
    font-size: calc(var(--base-date-font-size) * 1.66) !important;
  }

  #prize-box-21 > .prize-wrap,
  #prize-box-21 .tile-bottom {
    width: calc(var(--gift-width) * 1.66);
    height: calc(var(--gift-bot-height) * 1.66);
  }

  #prize-box-21 .prize {
    width: calc((var(--gift-width) * 1.66) * 0.4);
  }

  #prize-box-21 .light {
    width: calc(var(--gift-width) * 1.66);
  }

  #prize-box-21 .tile {
    width: calc(var(--gift-width) * 1.66);
    height: calc(var(--gift-top-height) * 1.66);
  }

  #prize-box-21 .tile-inner {
    width: calc(var(--gift-width) * 1.66);
    height: calc(var(--gift-top-height-no-ribbon) * 1.66);
  }

  /* 22 */
  #prize-box-22 {
    z-index: 27;
    width: calc(var(--gift-width) * 1.4);
    height: calc(var(--gift-height) * 1.4);
  }

  #prize-box-22 .tile .date {
    font-size: calc(var(--base-date-font-size) * 1.4) !important;
  }

  #prize-box-22 > .prize-wrap,
  #prize-box-22 .tile-bottom {
    width: calc(var(--gift-width) * 1.4);
    height: calc(var(--gift-bot-height) * 1.4);
  }

  #prize-box-22 .prize {
    width: calc((var(--gift-width) * 1.4) * 0.4);
  }

  #prize-box-22 .light {
    width: calc(var(--gift-width) * 1.4);
  }

  #prize-box-22 .tile {
    width: calc(var(--gift-width) * 1.4);
    height: calc(var(--gift-top-height) * 1.4);
  }

  #prize-box-22 .tile-inner {
    width: calc(var(--gift-width) * 1.4);
    height: calc(var(--gift-top-height-no-ribbon) * 1.4);
  }

  /* 23 */
  #prize-box-23 {
    z-index: 26;
    width: calc(var(--gift-width) * 2.18);
    height: calc(var(--gift-height) * 2.18);
  }

  #prize-box-23 .tile .date {
    font-size: calc(var(--base-date-font-size) * 2.18) !important;
  }

  #prize-box-23 > .prize-wrap,
  #prize-box-23 .tile-bottom {
    width: calc(var(--gift-width) * 2.18);
    height: calc(var(--gift-bot-height) * 2.18);
  }

  #prize-box-23 .prize {
    width: calc((var(--gift-width) * 2.18) * 0.4);
  }

  #prize-box-23 .light {
    width: calc(var(--gift-width) * 2.18);
  }

  #prize-box-23 .tile {
    width: calc(var(--gift-width) * 2.18);
    height: calc(var(--gift-top-height) * 2.18);
  }

  #prize-box-23 .tile-inner {
    width: calc(var(--gift-width) * 2.18);
    height: calc(var(--gift-top-height-no-ribbon) * 2.18);
  }

  /* 24 */
  #prize-box-24 {
    z-index: 27;
    width: calc(var(--gift-width) * 1);
    height: calc(var(--gift-height) * 1);
  }

  #prize-box-24 .tile .date {
    font-size: calc(var(--base-date-font-size) * 1) !important;
  }

  #prize-box-24 > .prize-wrap,
  #prize-box-24 .tile-bottom {
    width: calc(var(--gift-width) * 1);
    height: calc(var(--gift-bot-height) * 1);
  }

  #prize-box-24 .prize {
    width: calc((var(--gift-width) * 1) * 0.4);
  }

  #prize-box-24 .light {
    width: calc(var(--gift-width) * 1);
  }

  #prize-box-24 .tile {
    width: calc(var(--gift-width) * 1);
    height: calc(var(--gift-top-height) * 1);
  }

  #prize-box-24 .tile-inner {
    width: calc(var(--gift-width) * 1);
    height: calc(var(--gift-top-height-no-ribbon) * 1);
  }

  /* ==================================================== */

  .prize-box {
    position: absolute;
  }

  #prize-box-1 {
    top: 4.32%;
    left: 42.04%;
  }

  #prize-box-2 {
    top: 14.81%;
    left: 37.32%;
  }

  #prize-box-3 {
    top: 15.68%;
    left: 52.32%;
  }

  #prize-box-4 {
    top: 21.23%;
    left: 32.54%;
  }

  #prize-box-5 {
    top: 32.59%;
    left: 53.5%;
  }

  #prize-box-6 {
    top: 23.8%;
    left: 62%;
  }

  #prize-box-7 {
    top: 34.69%;
    left: 20.07%;
  }

  #prize-box-8 {
    top: 44.2%;
    left: 29.23%;
  }

  #prize-box-9 {
    top: 41.5%;
    left: 43.31%;
  }

  #prize-box-10 {
    top: 51.5%;
    left: 54.72%;
  }

  #prize-box-11 {
    top: 45.4%;
    left: 61.27%;
  }

  #prize-box-12 {
    top: 34%;
    left: 65.4%;
  }

  #prize-box-13 {
    top: 56.79%;
    left: 7.32%;
  }

  #prize-box-14 {
    top: 56.67%;
    left: 30.63%;
  }

  #prize-box-15 {
    top: 62.35%;
    left: 43.87%;
  }

  #prize-box-16 {
    top: 67.41%;
    left: 64.15%;
  }

  #prize-box-17 {
    top: 59.38%;
    left: 80.56%;
  }

  #prize-box-18 {
    top: 82.47%;
    left: 0.56%;
  }

  #prize-box-19 {
    top: 78.52%;
    left: 27.04%;
  }

  #prize-box-20 {
    top: 71.48%;
    left: 38.17%;
  }

  #prize-box-21 {
    top: 79.5%;
    left: 60.07%;
  }

  #prize-box-22 {
    top: 82.68%;
    left: 77.89%;
  }

  #prize-box-23 {
    top: 73.09%;
    left: 82.1%;
  }

  #prize-box-24 {
    top: 87.8%;
    left: 92.46%;
  }
}

@media screen and (min-width: 768px) and (orientation: portrait) {
  #prize-box-21 {
    top: 75.2%;
  }

  #prize-box-17 {
    top: 63%;
  }

  #prize-box-18 {
    top: 63.8%;
  }

  #prize-box-16 {
    top: 54%;
  }

  #prize-box-13 {
    top: 44%;
  }

  #prize-box-11 {
    left: 2.2%;
  }

  #prize-box-10 {
    top: 33.7%;
  }

  #prize-box-5 {
    top: 16.5%;
  }

  #prize-box-3 {
    top: 8.3%;
    left: 56%;
  }

  #prize-box-4 {
    left: 12.3%;
  }
}

@media screen and (min-width: 1280px) and (orientation: landscape) {
  #prize-box-1 {
    top: 4.9%;
  }

  #prize-box-2 {
    top: 15.4%;
  }

  #prize-box-3 {
    top: 15.85%;
  }

  #prize-box-4 {
    top: 21.6%;
  }

  #prize-box-6 {
    top: 24%;
  }

  #prize-box-7 {
    top: 34.9%;
  }

  #prize-box-8 {
    top: 44.4%;
  }

  #prize-box-12 {
    left: 65.2%;
  }

  #prize-box-14 {
    top: 56.85%;
  }
}

@media screen and (min-width: 1440px) and (orientation: landscape) {
  #prize-box-23 {
    top: 73%;
  }

  #prize-box-24 {
    top: 87.7%;
  }

  #prize-box-9 {
    top: 41.7%;
  }

  #prize-box-11 {
    top: 45.6%;
  }

  #prize-box-4 {
    top: 21.9%;
  }

  #prize-box-6 {
    top: 24.4%;
  }

  #prize-box-1 {
    top: 5.3%;
  }

  #prize-box-2 {
    top: 15.7%;
  }

  #prize-box-5 {
    left: 53.1%;
  }

  #prize-box-12 {
    left: 64.6%;
  }
}

@media screen and (min-width: 1600px) and (orientation: landscape) {
  #prize-box-21 {
    top: 79.7%;
  }

  #prize-box-20 {
    top: 71.7%;
  }
}

@media screen and (min-width: 1800px) and (orientation: landscape) {
  #prize-box-12 {
    top: 34.4%;
  }

  #prize-box-6 {
    top: 24.6%;
  }

  #prize-box-3 {
    top: 16%;
  }
}

/* ================================== END of advent door positions */

/* ================================================================= */
.logo {
  max-width: 90%;
}

@media screen and (min-width: 450px) {
  .logo {
    max-width: 450px;
  }
}

/* Animation */

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px); /* Safari */
  width: 100vw;
  height: 100vh;
  transition: all 1s ease;
}

.tile-animation ~ .overlay {
  display: flex;
}

#game-view .tile-animation ~ .tile-bottom {
  animation: tileBottomAnimation 3s 0.3s ease forwards;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.1s ease 0.3s, height 0.1s ease 0.3s;
  transform-origin: top center;
  width: var(--gift-animated-width) !important;
  aspect-ratio: 1.67 / 1;
  height: auto !important;
}

.tile-animation {
  animation: tileTopAnimation 3s 0.3s ease forwards;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.1s ease 0.3s, height 0.1s ease 0.3s;
  transform-origin: bottom center;
  width: var(--gift-animated-width) !important;
  aspect-ratio: 2.53 / 1;
  height: auto !important;
}

#advent-calendar .tile-animation .tile-inner {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3.81 / 1 !important;
  margin-top: auto !important;
}

@keyframes tileBottomAnimation {
  0% {
    opacity: 0;
    position: fixed;
    z-index: 69;
    top: calc(50% - var(--gift-animated-height) / 4);
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(0deg);
  }

  10% {
    opacity: 1;
    position: fixed;
    z-index: 69;
    top: calc(50% - var(--gift-animated-height) / 4);
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(0deg);
  }

  20% {
    opacity: 1;
    position: fixed;
    z-index: 69;
    top: calc(50% - var(--gift-animated-height) / 4);
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(3deg);
  }

  30% {
    opacity: 1;
    position: fixed;
    z-index: 69;
    top: calc(50% - var(--gift-animated-height) / 4);
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(-3deg);
  }

  40% {
    opacity: 1;
    position: fixed;
    z-index: 69;
    top: calc(50% - var(--gift-animated-height) / 4);
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(3deg);
  }

  50% {
    opacity: 1;
    position: fixed;
    z-index: 69;
    top: calc(50% - var(--gift-animated-height) / 4);
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(-3deg);
  }

  60% {
    opacity: 1;
    position: fixed;
    z-index: 69;
    top: calc(50% - var(--gift-animated-height) / 4);
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(0deg);
  }

  100% {
    opacity: 1;
    position: fixed;
    z-index: 69;
    top: calc(50% - var(--gift-animated-height) / 4);
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(0deg);
  }
}

@keyframes tileTopAnimation {
  0% {
    opacity: 0;
    position: fixed;
    z-index: 70;
    top: calc((50% - var(--gift-animated-height) / 2) - var(--animation-top-offset));
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(0deg);
  }

  10% {
    opacity: 1;
    position: fixed;
    z-index: 70;
    top: calc((50% - var(--gift-animated-height) / 2) - var(--animation-top-offset));
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(0deg);
  }

  20% {
    opacity: 1;
    position: fixed;
    z-index: 70;
    top: calc((50% - var(--gift-animated-height) / 2) - var(--animation-top-offset));
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(4deg);
  }

  30% {
    opacity: 1;
    position: fixed;
    z-index: 70;
    top: calc((50% - var(--gift-animated-height) / 2) - var(--animation-top-offset));
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(-4deg);
  }

  40% {
    opacity: 1;
    position: fixed;
    z-index: 70;
    top: calc((50% - var(--gift-animated-height) / 2) - var(--animation-top-offset));
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(4deg);
  }

  50% {
    opacity: 1;
    position: fixed;
    z-index: 70;
    top: calc((50% - var(--gift-animated-height) / 2) - var(--animation-top-offset));
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(-4deg);
  }

  60% {
    opacity: 1;
    position: fixed;
    z-index: 70;
    top: calc((50% - var(--gift-animated-height) / 2) - var(--animation-top-offset));
    left: calc(50% - var(--gift-animated-width) / 2);
    transform: rotateZ(0deg);
  }

  70% {
    opacity: 1;
    position: fixed;
    z-index: 70;
    top: calc((50% - var(--gift-animated-height) / 2) - var(--animation-top-offset));
    left: calc(50% - var(--gift-animated-width) / 2);
    transform-origin: bottom left;
    transform: rotateZ(var(--gift-animated-top-angle));
  }

  100% {
    opacity: 1;
    position: fixed;
    z-index: 70;
    top: calc((50% - var(--gift-animated-height) / 2) - var(--animation-top-offset));
    left: calc(50% - var(--gift-animated-width) / 2);
    transform-origin: bottom left;
    transform: rotateZ(var(--gift-animated-top-angle));
  }
}

.prize-animation {
  animation: prizeAnimation 1s 1s ease forwards;
  width: var(--gift-animated-width) !important;
  height: auto !important;
  aspect-ratio: 1.67 / 1;
}

.prize-animation > .prize {
  opacity: 0;
  animation: prizeImageAnimation 2s 3s ease forwards;
  width: calc(var(--gift-animated-width) * 0.4) !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
}

@keyframes prizeImageAnimation {
  0% {
    opacity: 0;
    position: fixed;
    top: calc(50% - var(--gift-animated-height) / 1);
    left: calc(50% - var(--gift-animated-width) / 2 + ((var(--gift-animated-width) * 0.4)));
    z-index: 69;
    transform: rotateZ(-20deg) translateY(140%);
  }

  10% {
    opacity: 0;
    position: fixed;
    top: calc(50% - var(--gift-animated-height) / 4);
    left: calc(50% - var(--gift-animated-width) / 2 + ((var(--gift-animated-width) * 0.4)));
    z-index: 69;
    transform: rotateZ(-20deg) translateY(140%);
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    position: fixed;
    top: calc(50% - var(--gift-animated-height) / 2);
    left: calc(50% - var(--gift-animated-width) / 2 + ((var(--gift-animated-width) * 0.4)));
    z-index: 69;
    transform: rotateZ(-20deg) translateY(-140%) scale(1.8);
  }
}

@keyframes prizeAnimation {
  0% {
    opacity: 0;
    position: fixed;
    top: calc((50% - var(--gift-animated-height) / 2) - 2%);
    left: calc(50% - var(--gift-animated-width) / 2);
    z-index: 69;
  }

  1% {
    opacity: 1;
    position: fixed;
    top: calc((50% - var(--gift-animated-height) / 2) - 2%);
    left: calc(50% - var(--gift-animated-width) / 2);
    z-index: 69;
  }

  100% {
    opacity: 1;
    position: fixed;
    top: calc((50% - var(--gift-animated-height) / 2) - 2%);
    left: calc(50% - var(--gift-animated-width) / 2);
    z-index: 69;
  }
}

.prize-wrap.prize-animation > .light {
  opacity: 1;
  transform: translateY(-33%) scale(1.4);
  transform-origin: center center;
  transition: all 0.2s ease;
  z-index: 68;
  width: calc(var(--gift-animated-width) * 0.9) !important;
  height: auto !important;
  margin: 0 auto;
}

@media screen and (min-width: 768px) and (orientation: portrait) {
  .prize-wrap.prize-animation > .light {
    transform: translateY(-46%) scale(1.4);
  }
}

@media screen and (min-width: 900px) and (orientation: portrait) {
  .prize-wrap.prize-animation > .light {
    transform: translateY(-52%) scale(1.4);
  }
}

@media screen and (min-width: 1340px) and (orientation: portrait) {
  .prize-wrap.prize-animation > .light {
    transform: translateY(-16%) scale(1.4);
  }
}

@media screen and (min-width: 1025px) and (orientation: landscape) {
  .prize-wrap.prize-animation > .light {
    transform: translateY(-52%) scale(1.4);
  }
}

@media screen and (min-width: 1280px) and (orientation: landscape) {
  .prize-wrap.prize-animation > .light {
    transform: translateY(-50%) scale(1.4);
  }
}

@media screen and (min-width: 2000px) and (orientation: landscape) {
  .prize-wrap.prize-animation > .light {
    transform: translateY(-49%) scale(1.4);
  }
}

@media screen and (min-width: 2560px) and (orientation: landscape) {
  .prize-wrap.prize-animation > .light {
    transform: translateY(-46%) scale(1.4);
  }
}

/* ================================= layout */
#advent-calendar p,
#advent-calendar h2 {
  text-align: center;
}

.gifts-wrap {
  margin-bottom: 40px;
}

.content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1025px) and (orientation: landscape) {
  .logo {
    width: 220px;
  }

  #advent-calendar h2 {
    text-align: start;
  }

  .logo-container {
    justify-content: flex-start;
    padding: 0 20px 30px;
  }

  #register .logo-container {
    justify-content: center;
    padding: 30px 20px;
  }

  .page-wrap {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    margin: 0 50px;
  }

  #advent-calendar {
    padding-top: 7%;
    min-height: 100vh;
  }

  .content {
    grid-area: 1 / 1 / 2 / 5;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: start;
  }

  .gifts-wrap {
    grid-area: 1 / 3 / 2 / 13;
    align-self: start;
    justify-self: end;
  }

  .copyright {
    grid-area: 2 / 4 / 3 / 13;
    align-self: center;
  }

  .content-1 {
    grid-area: 2 / 1 / 3 / 5;
  }

  .content-2 {
    grid-area: 2 / 5 / 3 / 13;
  }

  .content-3 {
    grid-area: 3 / 1 / 4 / 13;
  }
}

/* REGISTER PAGE and OUTCOME */

/* calendar icon color */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(100%);
}

/* iOS Safari verticaly center selected date */
@supports (-webkit-appearance: none) {
  @media (hover: none) and (pointer: coarse) {
    #date-of-birth-input {
      box-sizing: border-box;
    }

    #date-of-birth-input::-webkit-date-and-time-value {
      /* input field height - (padding top + padding bot) */
      line-height: 46px;
    }
  }
}

.register-text {
  width: 100%;
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.nongame-page {
  flex-direction: column;
  text-align: center;
  min-height: 100vh;
  justify-content: space-between;
}

.register-content,
.outcome-content {
  margin: 0 auto;
  width: 90%;
  max-width: 950px;
}

.input-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.input-box > * {
  flex: 0 0 100%;
  margin: 0 auto;
}

.checkbox-box {
  text-align: left;
  width: 90%;
  margin-bottom: 2rem;
}

@media screen and (min-width: 887px) {
  .input-box > * {
    flex: 0 0 calc(50% - 0.5rem);
  }

  .checkbox-box {
    text-align: left;
    width: 100%;
  }
}

#outcome-image {
  margin: 0 auto;
  width: 95%;
  max-width: 325px;
}

.register-content form {
  margin-bottom: 2rem;
}

.form-control {
  background-color: transparent;
  border-radius: 0;
  padding: 10px 20px;
  text-align: center;
  height: 66px;
}

.form-control:focus {
  background-color: transparent;
  box-shadow: 0 0 0 0.2rem rgb(0, 0, 0, 0.2);
}

input[type="checkbox"]:focus {
  outline: none;
}

.header,
.m-top,
.checkbox-box,
.register-content form,
.txt-box,
.prize-box-img {
  margin-top: 2rem;
}

.footer {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 1rem;
}

@media screen and (min-width: 850px) {
  .cta-buttons {
    flex-direction: row;
  }
}

.cta-buttons {
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 10px auto;
}

.cta {
  display: none;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0;
  border: 1px solid #fff;
  background-color: transparent;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
}

input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
}

select {
  color: transparent !important;
  opacity: 0;
}

option {
  color: #000 !important;
  text-align: left !important;
}

.title {
  position: relative;
}

.span-select {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-control-label > a {
  font-weight: 900;
}

.custom-control-label::before,
.custom-control-label::after {
  top: calc(50% - 10px);
}

/*  ===== LIMIT REACHED PAGE ===== */
#limit-reached {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#limit-reached > div {
  flex: 0 0 100%;
}

.limit-container {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: auto;
  padding: 20px 10px;
  text-align: center;
}

.limit-container h2 {
  margin: 0;
}

@media screen and (min-width: 410px) {
  .limit-container {
    padding: 30px 20px;
  }
}

.nongame-page .copyright {
  margin-top: 0;
}

@media screen and (min-width: 900px) and (min-height: 1800px) and (orientation: portrait) {
  :root {
    /* animation vars */
    --gift-animated-width: 421px;
    --gift-animated-height: 420px;
    --animation-top-offset: 45px;
    --gift-animated-top-angle: -111deg;

    /* --- */
    --base-date-font-size: 9.6px;
    --base-date-font-size-one: 19.2px;
    --gift-width: 116.48px;
    --gift-height: 114.72px;
    --gift-top-height: 46.1px;
    --gift-bot-height: 69.95px;
  }

  .prize-wrap.prize-animation > .light {
    transform: translateY(-43%) scale(1.4);
  }

  .gifts-wrap {
    margin: auto !important;
    width: 512px;
    height: 1302.4px;
  }
}

@media screen and (min-width: 1300px) and (min-height: 2400px) and (orientation: portrait) {
  .prize-wrap.prize-animation > .light {
    transform: translateY(-41%) scale(1.4);
  }

  .gifts-wrap {
    width: 740px;
    height: 1882px;
  }

  :root {
    /* animation vars */
    --gift-animated-width: 421px;
    --gift-animated-height: 420px;
    --animation-top-offset: 45px;
    --gift-animated-top-angle: -111deg;
    --gift-width: 168px;
    --gift-height: 164px;
    --gift-top-height: 66px;
    --gift-bot-height: 101px;
    --base-date-font-size: 15px;
    --base-date-font-size-one: 26px;
  }
}