/* DW Club loyalty-wheel presentation */
body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Prompt', sans-serif;
}

body > .container {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  min-height: 100vh;
  padding: 18px 24px 28px;
}

body > .container > .row {
  min-height: calc(100vh - 46px);
  align-items: center;
}

.loyalty-header {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(36, 5, 55, .45));
}

.loyalty-header-mobile {
  display: none;
}

.loyalty-header-pc {
  width: min(100%, 510px);
  max-height: 290px;
  margin: 0 auto 8px;
}

.wheel-stage-row {
  margin: 0 !important;
}

#chart {
  width: min(100%, 760px);
  margin: 0 auto;
}

#chart svg {
  filter: drop-shadow(0 15px 16px rgba(38, 8, 37, .55));
}

/* Only the inner wheel is animated by D3.  The outer SVG must not receive a
   second CSS transform, otherwise the spin looks like it shakes. */
#chart.is-spinning svg { animation: none !important; }

.loyalty-prize-label {
  fill: #fff6b0;
  stroke: #39104e;
  stroke-width: 3px;
  paint-order: stroke fill;
  font-size: 20px;
  font-weight: 800;
}

.loyalty-gift {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(48, 8, 48, .35));
}

.loyalty-gift img {
  width: 100%;
  height: auto;
}

.loyalty-gift-phone { width: 190px; left: -36px; bottom: 12px; }
.loyalty-gift-gold { width: 190px; right: -36px; bottom: 12px; }

body > .container > .row > .col-sm-5 > .row {
  background: linear-gradient(145deg, rgba(52, 9, 92, .94), rgba(25, 6, 61, .92));
  border: 2px solid rgba(255, 207, 55, .9);
  border-radius: 18px !important;
  box-shadow: 0 16px 36px rgba(20, 0, 33, .55) !important;
  padding: 15px 4px 19px;
}

body > .container > .row > .col-sm-5 {
  position: relative;
  z-index: 3;
}

@media (max-width: 768px) {
  body { background-position: center top !important; background-size: cover !important; background-attachment: scroll !important; }
  body > .container { padding: 0 10px 24px; max-width: 540px; }
  body > .container > .row { display: block; min-height: 0; }
  body > .container > .row > a { display: block; margin: 0 !important; }
  .logo-mobile { display: none !important; }
  .loyalty-header-mobile { display: block; width: 100%; max-height: 390px; margin: 0 auto -30px; position: relative; z-index: 2; }
  .wheel-stage-row { margin-top: -20px !important; }
  #chart { width: min(100%, 530px); }
  .loyalty-gift-phone { width: 118px; left: -19px; bottom: 205px; }
  .loyalty-gift-gold { width: 118px; right: -19px; bottom: 205px; }
  body > .container > .row > .col-sm-5 > .row { margin: 4px 7px 0 !important; padding: 12px 4px 16px; }
  .loyalty-header-pc { display: none !important; }
}