/* Revisions from the 0924 PC and mobile artboards, scoped to test.html. */
:root {
  --sky: #50b5e7;
  --yellow: #fff821;
  --blue: #009fff;
  --navy: #1044e8;
  --green: #00c43e;
  --red: #ff0000;
  --orange: #ff7910;
}

.concept:before,
.site-footer { background-image: url('../test-0925/sky-pattern.webp'); }
.site-header, .navigation { background-color: #195cd5; }
.pixel-button:is(.entry-button, .guide, .contact-button, .floating-entry) {
  padding: 0;
  border: 0;
  background: none;
  clip-path: none;
}
.pixel-button > img { width: 100%; height: auto; }
.entry-button { width: calc(355 * var(--s)); }
.floating-entry { min-height: 0; }
.rank-picture { width: 100%; }
.download-row .app-logo { border: 0; border-radius: 0; }
.app-banner .app-logo {
  background: #fff;
  padding: calc(25 * var(--s));
  border-radius: calc(18 * var(--s));
  aspect-ratio: 1;
  object-fit: contain;
}
.registration-step { position: relative; }
.registration-step:not(:last-child):after {
  content: '';
  position: absolute;
  right: calc(-31 * var(--s));
  top: calc(110 * var(--s));
  border-left: calc(24 * var(--s)) solid var(--navy);
  border-top: calc(21 * var(--s)) solid transparent;
  border-bottom: calc(21 * var(--s)) solid transparent;
}
.app-explanation {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--s));
  margin: calc(30 * var(--s)) 0;
}
.app-explanation-character { width: calc(170 * var(--s)); flex-shrink: 0; }
.app-explanation-bubble {
  position: relative;
  flex: 1;
  border: calc(7 * var(--s)) solid #000;
  padding: calc(17 * var(--s)) calc(24 * var(--s));
  background: #fff;
  font-size: calc(22 * var(--s));
  line-height: 1.8;
  font-weight: 500;
}
.app-explanation-bubble:before {
  content: '';
  position: absolute;
  width: calc(20 * var(--s));
  height: calc(20 * var(--s));
  left: calc(-17 * var(--s));
  top: calc(33 * var(--s));
  transform: rotate(45deg);
  border-left: calc(6 * var(--s)) solid #000;
  border-bottom: calc(6 * var(--s)) solid #000;
  background: #fff;
}
.app-explanation h4 { font-size: calc(26 * var(--s)); }
.app-explanation h4 span { color: var(--navy); }
.sync-notice { position: relative; padding-right: calc(305 * var(--s)); margin-top: calc(60 * var(--s)); }
.notice-character {
  position: absolute;
  width: calc(290 * var(--s));
  right: 0;
  bottom: 0;
}
.prizes > .content > .intro { position: relative; }
.prizes > .content > .intro:before {
  content: '';
  position: absolute;
  left: calc(40 * var(--s));
  top: calc(60 * var(--s));
  width: calc(100 * var(--s));
  height: calc(125 * var(--s));
  background: url('../test-0925/music.png') center / contain no-repeat;
}
.more h3 img { width: calc(480 * var(--s)); margin: auto; }
.more p { display: flex; justify-content: center; align-items: center; gap: calc(18 * var(--s)); }
.more p:before, .more p:after {
  content: '';
  width: calc(45 * var(--s));
  height: calc(45 * var(--s));
  flex-shrink: 0;
  background: url('../test-0925/sparkle.png') center / contain no-repeat;
}
.stamp-heading { position: relative; padding-right: calc(130 * var(--s)); }
.stamp-character {
  position: absolute;
  right: 0;
  bottom: calc(-30 * var(--s));
  width: calc(135 * var(--s));
}

@media (max-width: 767px) {
  .navigation { background: transparent; }
  .stage-dates-art > picture { width: calc(470 * var(--s)); max-width: 100%; margin-inline: auto; }
  .entry-button { width: 100%; }
  .registration-step:after { display: none; }
  .registration-stage:first-child { display: flex; flex-direction: column; }
  .registration-stage:first-child > .registration-title { order: 0; }
  .registration-steps { order: 1; }
  .app-explanation { order: 2; position: relative; margin: calc(45 * var(--s)) 0; }
  .registration-complete { order: 3; }
  .sync-notice { order: 4; padding-right: calc(22 * var(--s)); margin-top: calc(145 * var(--s)); }
  .app-explanation-bubble { padding: calc(25 * var(--s)) calc(32 * var(--s)) calc(170 * var(--s)); font-size: calc(27 * var(--s)); }
  .app-explanation h4 { font-size: calc(28 * var(--s)); margin-bottom: calc(12 * var(--s)); }
  .app-explanation-character { position: absolute; width: calc(155 * var(--s)); bottom: calc(-25 * var(--s)); left: calc(-10 * var(--s)); z-index: 1; }
  .app-explanation-bubble:before { display: none; }
  .notice-character { width: calc(440 * var(--s)); right: calc(20 * var(--s)); bottom: calc(100% - 35 * var(--s)); }
  .prizes > .content > .intro:before { left: calc(-15 * var(--s)); top: calc(20 * var(--s)); width: calc(60 * var(--s)); height: calc(80 * var(--s)); }
  .more h3 img { width: calc(420 * var(--s)); }
  .more p { gap: calc(12 * var(--s)); }
  .more p:before, .more p:after { width: calc(30 * var(--s)); height: calc(30 * var(--s)); }
  .prize-row + .prize-row:before, .stage-two:before {
    content: '';
    height: calc(48 * var(--s));
    background: currentColor;
    mask: url('../test-0925/divider.png') center / contain no-repeat;
  }
  .stamp-heading { padding-right: calc(80 * var(--s)); }
  .stamp-character { width: calc(95 * var(--s)); right: calc(-10 * var(--s)); }
  .registration-title > span { position: relative; padding-block: calc(15 * var(--s)); }
  .registration-title > strong { padding-top: calc(65 * var(--s)); }
  .registration-title > span:after {
    content: '';
    position: absolute;
    width: calc(140 * var(--s));
    height: calc(155 * var(--s));
    right: calc(-10 * var(--s));
    bottom: calc(-55 * var(--s));
    background: url('../test-0925/app-woman.png') center / contain no-repeat;
  }
  .stage-two .registration-title > span:after {
    background-image: url('../test-0925/stage-two-boy.png');
    right: auto;
    left: calc(-10 * var(--s));
  }
}