@font-face {
  font-family: "YasashisaGothicBoldV2";
  src: url("../../fonts/YasashisaGothicBold-V2.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-family-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-family-yasashisa: "YasashisaGothicBoldV2", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --page-bg: #f5f7f6;
  --ink: #18214a;
  --muted: #667085;
  --line: #d9dee8;
  --primary: #1f6fbf;
  --primary-dark: #18538f;
  --secondary: #eef3f6;
  --sheet-width: 595px;
  --sheet-height: 842px;
  --frame-max: 430px;
  --sheet-design-width: 390;
  --sheet-design-stage-height: calc(var(--sheet-design-width) * 844 / 390 * 1px);
  --sheet-artwork-offset-y: 0px;
  --actions-block-height: 63px;
  --card-gap-y: 10px;
  --card-bottom-padding: calc(10px + env(safe-area-inset-bottom));
  --customize-footer-offset: calc(92px + env(safe-area-inset-bottom));
  --sticker-size: 176%;
  --radius: 8px;

  /* Grid paper (top page .site-stage, Figma: 42×42px tile, ~3px lines, #EDF8FB) */
  --paper-grid-base: #fff;
  --paper-grid-line-color: #edf8fb;
  --paper-grid-tile-size: 42px;
  --paper-grid-line-width: 3px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--page-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-family-base);
}

button,
input,
select {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

.stamp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #FEFEFE;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 0 var(--card-bottom-padding);
  gap: var(--card-gap-y);
  overflow-x: clip;
}

.stamp-card__loading {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  background: rgba(255, 255, 255, 0.86);
  color: #212e79;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.stamp-card__loading[hidden] {
  display: none;
}

.stamp-card__loading-spinner {
  width: 44px;
  aspect-ratio: 1;
  border: 6px solid #c5dbff;
  border-top-color: #ffc73c;
  border-radius: 50%;
  animation: stamp-card-loading-spin 820ms linear infinite;
}

.stamp-card__loading-text {
  display: block;
}

@keyframes stamp-card-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.stamp-card__sheet-stack {
  position: relative;
  flex: none;
  display: flex;
  min-height: 0;
  width: 100%;
  max-width: var(--frame-max);
  height: calc(
    min(
      calc(100vh - var(--actions-block-height) - var(--card-gap-y) - var(--card-bottom-padding)),
      calc(var(--frame-max) * 844 / 390)
    ) + var(--sheet-artwork-offset-y)
  );
  height: calc(
    min(
      calc(100svh - var(--actions-block-height) - var(--card-gap-y) - var(--card-bottom-padding)),
      calc(var(--frame-max) * 844 / 390)
    ) + var(--sheet-artwork-offset-y)
  );
  max-height: none;
}

/* Safari: lock sheet position while modals/peel run so visualViewport changes
   do not re-center the sheet behind semi-transparent overlays. */
html.is-sheet-stack-locked .stamp-card::before {
  content: "";
  display: block;
  flex: none;
  width: 100%;
  height: var(--sheet-stack-lock-height);
  pointer-events: none;
}

html.is-sheet-stack-locked .stamp-card__sheet-stack {
  position: fixed;
  top: var(--sheet-stack-lock-top);
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--frame-max));
  max-width: var(--frame-max);
  height: var(--sheet-stack-lock-height);
  max-height: none;
  z-index: 1;
}

.sheet-viewport {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.sheet-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  container-type: inline-size;
}

.sheet-artwork {
  position: absolute;
  top: var(--sheet-artwork-offset-y);
  left: 50%;
  height: calc(100% - var(--sheet-artwork-offset-y));
  aspect-ratio: 595 / 842;
  transform: translateX(-50%);
  overflow: visible;
}

.sheet-svg,
.sheet-svg svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sheet-svg svg .sheet-pop-layer {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.sheet-svg svg.is-entering .sheet-pop-layer {
  animation: sheet-layer-pop 760ms cubic-bezier(0.18, 1.16, 0.24, 1) both;
  animation-delay: var(--sheet-pop-delay, 0ms);
}

.sheet-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.sheet-overlay__logo,
.sheet-overlay__name-plate,
.sheet-overlay__sun,
.sheet-overlay__clouds,
.sheet-overlay__champion {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.sheet-overlay__champion {
  top: 7.46%;
  left: 76.97%;
  z-index: 6;
  width: 17.39%;
  max-width: 103px;
  aspect-ratio: 1;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) rotate(-13deg);
}

.sheet-overlay__champion-bg,
.sheet-overlay__champion-text {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  height: auto;
  transform: translate(-50%, -50%);
}

.sheet-overlay__champion-bg {
  width: 100%;
}

.sheet-overlay__champion-text {
  width: 74%;
}

/* SP / tablet: Figma `iPhone 13 & 14 - 18` frame(390x934)-relative coords */
.sheet-overlay__logo {
  top: 3.3%;
  left: 5.6%;
  width: 22.6%;
}

.sheet-overlay__name-plate {
  top: -1.7%;
  left: 32.8%;
  width: 52.1%;
}

.sheet-overlay__name-plate--pink {
  display: none;
}

.sheet-stage[data-sheet-type="blue"] {
  --slot-frame-color: #9fafff;
  --sheet-name-underline-color: #97d2ff;
}

.sheet-stage[data-sheet-type="pink"] {
  --slot-frame-color: #ffa9c2;
  --sheet-name-underline-color: #ffa9c2;
}

.sheet-stage[data-sheet-type="pink"] .sheet-overlay__name-plate--blue {
  display: none;
}

.sheet-stage[data-sheet-type="pink"] .sheet-overlay__name-plate--pink {
  display: block;
}

.sheet-overlay__sun,
.sheet-overlay__clouds {
  display: none;
}

.sheet-overlay__sun {
  top: 4.4%;
  left: 72.64%;
  width: 8.65%;
}

/* Figma 完成PDF Frame (241:21506): 雲3つのみの外接 bbox（太陽は sheet-sun で別配置） */
.sheet-overlay__clouds {
  top: 10.17%;
  left: 6.47%;
  width: 87.73%;
}

.is-exporting .sheet-overlay__sun,
.is-exporting .sheet-overlay__clouds {
  display: block !important;
}

.sheet-name {
  position: absolute;
  z-index: 5;
  /* Anchor the block's vertical center on the name-plate board center, then
     pull it back by half its own height. Plate box top = -1.7% (of stage
     height); plate height = 52.1% * 168/203 = 43.11cqw; the writable board
     center sits at ~0.619 of the plate height. So the name stays vertically
     centered on the plate for both short and wrapped names. */
  top: calc(-1.7% + 26.7cqw);
  left: 38.5%;
  width: 41.5%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #212e79;
  font-family: var(--font-family-yasashisa);
  /* Figma 19.804px @ 595px sheet width (node 241:23149) */
  font-size: calc(19.8 / 595 * 100cqw);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  transform: translateY(-50%);
}

.sheet-name__line {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18em;
  width: fit-content;
  max-width: 100%;
}

.sheet-name__line + .sheet-name__line {
  margin-top: 0.12em;
}

.sheet-name__text {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

.sheet-name__underline {
  display: block;
  width: 100%;
  height: 0.145em; /* 2.87px @ 19.8px */
  border-radius: 0.05em;
  background: var(--sheet-name-underline-color);
}

@media (max-width: 599px) {
  .stamp-card {
    --sheet-artwork-offset-y: 13px;
  }

  .sheet-artwork {
    height: calc(100vw * 844 / 390);
    transform: translateX(-50%) scale(1.01);
    transform-origin: center top;
  }

  .stamp-card__sheet-stack {
    max-width: none;
    width: 100%;
    height: calc(var(--sheet-artwork-offset-y) + 100vw * 852.44 / 390);
  }

  html.is-sheet-stack-locked .stamp-card__sheet-stack {
    max-width: none;
    width: 100%;
  }

  /* Overlay tracks the artwork box; extend upward into the top offset band. */
  .sheet-overlay {
    top: calc(-1 * var(--sheet-artwork-offset-y));
    left: 0;
    width: 100%;
    height: calc(100% + var(--sheet-artwork-offset-y));
    container-type: inline-size;
  }

  /* Match the visible bounds in the 390px SP reference after sheet cropping. */
  .sheet-overlay__logo {
    left: 21.61%;
    width: 13.27%;
  }

  .sheet-overlay__name-plate {
    left: 39.21%;
    width: 33.03%;
  }

  .sheet-name {
    top: calc(-1.7% + 18.32cqw);
    left: 42.1%;
    width: 28.48%;
  }

  .stamp-card__actions {
    width: min(
      calc(100% - 48px),
      calc((var(--sheet-design-stage-height) - var(--sheet-artwork-offset-y)) * 595 / 842 * 341 / 568)
    );
    max-width: none;
  }
}

@media (min-width: 600px) and (max-width: 1024px) {
  .stamp-card {
    --sheet-artwork-offset-y: 40px;
  }

  /* Tablet: widen the stage while keeping the initial small viewport height stable. */
  .stamp-card__sheet-stack {
    max-width: none;
    width: 100%;
    height: calc(
      min(
        calc(100vh - var(--actions-block-height) - var(--card-gap-y) - var(--card-bottom-padding)),
        var(--sheet-design-stage-height)
      ) + var(--sheet-artwork-offset-y)
    );
    height: calc(
      min(
        calc(100svh - var(--actions-block-height) - var(--card-gap-y) - var(--card-bottom-padding)),
        var(--sheet-design-stage-height)
      ) + var(--sheet-artwork-offset-y)
    );
  }

  html.is-sheet-stack-locked .stamp-card__sheet-stack {
    max-width: none;
    width: 100%;
  }

  /* Overlay tracks the artwork box; extend upward into the top offset band. */
  .sheet-overlay {
    top: calc(-1 * var(--sheet-artwork-offset-y));
    left: 0;
    width: 100%;
    height: calc(100% + var(--sheet-artwork-offset-y));
    container-type: inline-size;
  }

  /* 390px frame coords remapped to the artwork-width overlay box. */
  .sheet-overlay__logo {
    left: 19.53%;
    width: 15.51%;
  }

  .sheet-overlay__name-plate {
    left: 38.2%;
    width: 35.76%;
  }

  .sheet-name {
    top: calc(-1.7% + 18.32cqw);
    left: 42.1%;
    width: 28.48%;
  }

  .stamp-card__actions {
    width: min(
      calc(100% - 48px),
      calc((var(--sheet-design-stage-height) - var(--sheet-artwork-offset-y)) * 595 / 842 * 341 / 568)
    );
    max-width: none;
  }
}

@media (min-width: 1025px) {
  html:has(#stamp-card-main:not([hidden])),
  body:has(#stamp-card-main:not([hidden])) {
    background-color: var(--paper-grid-base);
    background-image:
      linear-gradient(var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width)),
      linear-gradient(90deg, var(--paper-grid-line-color) var(--paper-grid-line-width), transparent var(--paper-grid-line-width));
    background-size: var(--paper-grid-tile-size) var(--paper-grid-tile-size);
  }

  /* PC: contain the whole sheet (lock to A4 ratio) so the sides are never
     clipped. On narrow/tall SP the sheet still fills height (cover). */
  .stamp-card {
    max-width: 600px;
    margin-inline: auto;
  }

  .sheet-overlay {
    inset: auto;
    top: calc(-1 * var(--sheet-artwork-offset-y));
    left: 0;
    width: 100%;
    height: calc(100% + var(--sheet-artwork-offset-y));
    transform: none;
    container-type: inline-size;
  }

  .stamp-card__sheet-stack {
    flex: 0 0 auto;
    height: auto;
    max-height: min(100%, calc(var(--frame-max) * 842 / 595));
    aspect-ratio: 595 / 842;
  }

  .sheet-overlay__sun,
  .sheet-overlay__clouds {
    display: block;
  }

  /* PC: 完成PDF Frame sheet-relative coords (node 241:21506) */
  .sheet-overlay__logo {
    top: 2.38%;
    left: 3.91%;
    width: 14.95%;
  }

  .sheet-overlay__name-plate {
    top: -3.44%;
    left: 32.78%;
    width: 34.48%;
  }

  .sheet-name {
    /* plate top -3.44%, plate height 34.48% * 168/203 = 28.53cqw,
       board center ~0.619 -> -3.44% + 17.66cqw (transform: translateY(-50%)
       inherited from the base rule) */
    top: calc(-3.44% + 17.66cqw);
    left: 36.54%;
    width: 27%;
  }
}

.slot-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
}

/* Customize dim: aligned to the artwork box (so mask holes match the slots)
   but rendered as a stage-level layer above the overlays / name-plate, so the
   whole sheet (logo, name-plate, top gap) is dimmed. Holes reveal the slots. */
.sheet-dim {
  position: absolute;
  top: var(--sheet-artwork-offset-y);
  left: 50%;
  height: calc(100% - var(--sheet-artwork-offset-y));
  aspect-ratio: 595 / 842;
  transform: translateX(-50%);
  z-index: 7;
  display: none;
  overflow: visible;
  pointer-events: none;
}

.sheet-stage.is-customizing .sheet-dim {
  display: block;
}

/* One masked rect that overscans beyond its box (see renderCustomizeDimLayer)
   so the whole sheet is dimmed by a single layer, with no seam. */
.customize-dim-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sheet-stage:not(.is-sheet-ready) .slot-layer {
  pointer-events: none;
}

.sheet-stage.is-customizing .sticker-slot:disabled {
  cursor: pointer;
}

.sheet-stage.is-customizing .sticker-slot .slot-label {
  font-family: var(--font-family-base);
  font-size: 14.8px;
  font-weight: 700;
  line-height: 1.2;
}

.sheet-stage[data-sheet-type] .sticker-slot .slot-label:not(.slot-label--placeholder) {
  color: var(--slot-frame-color);
}

.sheet-stage[data-challenge-mode="customize"] .sticker-slot .slot-label--placeholder {
  color: #3f65af;
  white-space: nowrap;
  font-size: clamp(9px, 17cqw, 14.8px);
}

/* Customize bubble: separate layer above sheet-dim (Figma Group 1317 / node 241:18992) */
.customize-bubble-layer {
  position: absolute;
  top: var(--sheet-artwork-offset-y);
  left: 50%;
  height: calc(100% - var(--sheet-artwork-offset-y));
  aspect-ratio: 595 / 842;
  transform: translateX(-50%);
  z-index: 8;
  display: none;
  overflow: visible;
  pointer-events: none;
  container-type: inline-size;
}

.sheet-stage.is-customizing .customize-bubble-layer:not(:empty) {
  display: block;
}

.customize-slot-bubble {
  --bubble-color: #ffb031;
  /* Figma Polygon 19 export: 21×21 bbox, visual triangle 19×16 */
  --bubble-tail-w: 3.529cqw;
  --bubble-tail-h: 2.689cqw;
  --bubble-body-h: 12.437cqw;
  --bubble-tail-overlap: 0.35cqw;

  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 18.487cqw;
  min-height: calc(var(--bubble-body-h) + var(--bubble-tail-h) - var(--bubble-tail-overlap));
  padding:
    0
    2.079cqw
    calc(var(--bubble-tail-h) - var(--bubble-tail-overlap));
  color: #fff;
  font-family: var(--font-family-base);
  font-size: 2.521cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  white-space: pre-line;
  transform: translate(-50%, -100%);
  animation: customize-slot-bubble-float 2600ms ease-in-out infinite;
}

.customize-slot-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--bubble-body-h);
  border-radius: 999px;
  background: var(--bubble-color);
  z-index: -1;
}

.customize-slot-bubble::after {
  content: "";
  position: absolute;
  top: calc(var(--bubble-body-h) - var(--bubble-tail-overlap));
  left: 50%;
  width: var(--bubble-tail-w);
  height: var(--bubble-tail-h);
  background: var(--bubble-color);
  /* Figma Polygon 19: 21×21 bbox, visual triangle inset 6.7% L/R, 75% height */
  clip-path: polygon(50% 98.44%, 6.7% 0%, 93.3% 0%);
  transform: translateX(-50%);
  z-index: -1;
}

.customize-slot-bubble__text {
  position: relative;
  z-index: 1;
}

.sheet-stage.is-customizing .sticker-slot.is-assigned-pop .slot-label {
  animation: slot-label-pop 280ms ease;
}

.customize-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  box-sizing: border-box;
  width: 100%;
  padding: 12px 40px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  pointer-events: none;
}

.customize-footer:not([hidden]) {
  pointer-events: auto;
}

.customize-footer__inner {
  width: 100%;
  max-width: 306px;
  margin: 0 auto;
}

.customize-footer__inner:has(.customize-footer__start:not([hidden])) {
  min-height: 68px;
}

.customize-footer__count {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 63px;
  min-height: 63px;
  margin: 0;
  padding: 0 16px;
  border-radius: 103.7px;
  background: #b6b6b6;
  color: #fff;
  font-family: var(--font-family-base);
  font-size: 14.83px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.customize-footer__count[hidden] {
  display: none;
}

.customize-footer__start[hidden] {
  display: none;
}

@keyframes slot-label-pop {
  0% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Slot customize bubble bob; keep bubble anchor translate(-50%, -100%). */
@keyframes customize-slot-bubble-float {
  0%,
  100% {
    transform: translate(-50%, -100%);
  }

  50% {
    transform: translate(-50%, calc(-100% - 10px));
  }
}

.sticker-slot {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #18214a;
  cursor: pointer;
  transform: translate(-50%, -50%);
  container-type: size;
  overflow: visible;
}

.sticker-slot:disabled {
  cursor: default;
}

.sticker-slot:focus-visible {
  outline: 4px solid rgba(31, 111, 191, 0.58);
  outline-offset: 3px;
}

.slot-label {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72%;
  height: 58%;
  color: var(--slot-frame-color, #a8adb5);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.16;
  text-align: center;
  opacity: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: keep-all;
  white-space: pre-line;
  transform: translate(-50%, -50%);
  transition: opacity 360ms ease;
  pointer-events: none;
}

.sheet-stage.is-sheet-ready .slot-label {
  opacity: 1;
}

.sticker {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--sticker-size);
  aspect-ratio: 1;
  --sticker-clip: polygon(50% 2%, 61% 35%, 96% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 4% 35%, 39% 35%);
  filter: drop-shadow(0 8px 12px rgba(24, 33, 74, 0.16));
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
}

.sticker[data-shape="circle"],
.sticker-peel[data-shape="circle"] {
  --sticker-clip: circle(50% at 50% 50%);
}

.sticker[data-shape="flower"],
.sticker-peel[data-shape="flower"] {
  --sticker-clip: polygon(50% 0%, 61% 18%, 82% 10%, 84% 32%, 100% 50%, 84% 68%, 82% 90%, 61% 82%, 50% 100%, 39% 82%, 18% 90%, 16% 68%, 0% 50%, 16% 32%, 18% 10%, 39% 18%);
}

.sticker[data-shape="burst"],
.sticker-peel[data-shape="burst"] {
  --sticker-clip: polygon(50% 0%, 58% 20%, 78% 8%, 75% 31%, 98% 30%, 82% 47%, 100% 65%, 77% 67%, 84% 90%, 62% 80%, 50% 100%, 38% 80%, 16% 90%, 23% 67%, 0% 65%, 18% 47%, 2% 30%, 25% 31%, 22% 8%, 42% 20%);
}

.sticker::before,
.sticker-face {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--sticker-clip);
}

.sticker::before {
  display: none;
}

.sticker > .sticker-face {
  display: none;
}

.sticker-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sticker__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.sticker[data-image="true"] {
  filter: drop-shadow(0 7px 10px rgba(24, 33, 74, 0.14));
}

.sticker-peel[data-image="true"] {
  clip-path: none;
  filter: none;
}

.sticker-peel[data-image="true"] .peel-top,
.sticker-peel[data-image="true"] .peel-back {
  overflow: visible;
}

.sticker-peel[data-image="true"] .sticker__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sticker-face {
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.78), transparent 26%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 8px, transparent 8px 16px),
    linear-gradient(145deg, var(--sticker-color-a), var(--sticker-color-b));
}

.sticker-face::after {
  content: "★";
  position: absolute;
  left: 50%;
  top: 51%;
  color: rgba(255, 255, 255, 0.92);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(24, 33, 74, 0.1);
  transform: translate(-50%, -50%);
}

.sticker[data-shape="circle"] .sticker-face::after,
.sticker-peel[data-shape="circle"] .sticker-face::after {
  content: "◎";
}

.sticker[data-shape="flower"] .sticker-face::after,
.sticker-peel[data-shape="flower"] .sticker-face::after {
  content: "✿";
}

.sticker[data-shape="burst"] .sticker-face::after,
.sticker-peel[data-shape="burst"] .sticker-face::after {
  content: "!";
}

.sheet-stage:not(.is-sheet-ready) .sticker {
  opacity: 0;
}

.sticker-peel {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: var(--sticker-size);
  aspect-ratio: 1;
  --sticker-clip: polygon(50% 2%, 61% 35%, 96% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 4% 35%, 39% 35%);
  opacity: 0;
  clip-path: var(--sticker-clip);
  transform: translate3d(-50%, -50%, 0);
  isolation: isolate;
  pointer-events: none;
}

.sticker-peel__bounce {
  position: absolute;
  inset: 0;
  transform-origin: center center;
}

.sticker-peel.peel-ready {
  opacity: 1;
}

.sticker-peel.is-complete {
  filter: drop-shadow(0 8px 12px rgba(24, 33, 74, 0.16));
}

.sticker-peel[data-image="true"].is-complete {
  filter: drop-shadow(0 7px 10px rgba(24, 33, 74, 0.14));
}

.sticker-peel.is-complete .sticker-peel__bounce {
  animation: sticker-finish-pop 360ms cubic-bezier(0.18, 1.35, 0.28, 1) both;
}

.peel-svg-clip-element {
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.peel-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  user-select: none;
  transform-origin: top left;
}

.peel-top,
.peel-back,
.peel-bottom {
  overflow: hidden;
  background: transparent;
}

.sticker-peel .sticker-face,
.sticker-peel .sticker-backside {
  box-shadow:
    inset 0 -8px 14px rgba(24, 33, 74, 0.12),
    inset 0 6px 10px rgba(255, 255, 255, 0.18);
}

.peel-bottom {
  display: none;
}

.sticker-backside {
  position: absolute;
  inset: 0;
  clip-path: var(--sticker-clip);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.56), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0 8px, transparent 8px 18px),
    linear-gradient(145deg, #d9ddda, #99a39f);
}

.sticker-backside-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sparkles {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: min(56vw, 420px);
  aspect-ratio: 1;
  pointer-events: none;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.sparkles__star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  opacity: 0;
  color: #f0c64a;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: translate(-50%, -50%) scale(0.2) rotate(45deg);
  filter: drop-shadow(0 1px 0 rgba(120, 88, 0, 0.16));
}

.sparkles.is-burst .sparkles__star {
  animation: sparkle-burst 860ms ease-out both;
}

.sparkles__star:nth-child(1) { animation-delay: 80ms; }
.sparkles__star:nth-child(2) { animation-delay: 113ms; }
.sparkles__star:nth-child(3) { animation-delay: 93ms; }
.sparkles__star:nth-child(4) { animation-delay: 133ms; }
.sparkles__star:nth-child(5) { animation-delay: 100ms; }
.sparkles__star:nth-child(6) { animation-delay: 140ms; }
.sparkles__star:nth-child(7) { animation-delay: 107ms; }
.sparkles__star:nth-child(8) { animation-delay: 127ms; }

.complete-effect {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

.complete-effect.is-show {
  display: block;
}

.complete-effect.is-show.is-burst,
.complete-effect.is-show.is-champion {
  overflow: visible;
}

html:has(.complete-effect.is-show),
body:has(.complete-effect.is-show) {
  overflow-y: hidden;
}

.complete-effect__backdrop {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}

.complete-effect.is-phase-two .complete-effect__backdrop {
  background: transparent;
}

.complete-effect__content {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 390px);
  min-height: 100%;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  align-content: center;
  justify-items: center;
  color: #212e79;
  text-align: center;
}

.complete-effect__logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 205px;
  height: auto;
  margin-top: 132px;
  opacity: 0;
}

.complete-effect__message {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  margin-top: 0;
  font-weight: 900;
  letter-spacing: 0;
}

.complete-effect__congrats {
  position: relative;
  z-index: 2;
  margin: 0 0 18px 18px;
  font-size: 40px;
  line-height: 0.925;
  opacity: 0;
}

.complete-effect__copy {
  display: grid;
  gap: 0;
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.38;
  letter-spacing: 0.02em;
}

.complete-effect__copy span {
  opacity: 0;
}

.complete-effect__stars {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 440px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.complete-effect__star {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #f6c74b;
  font-size: 28px;
  font-weight: 900;
  opacity: 0;
  filter: drop-shadow(0 2px 0 rgba(120, 88, 0, 0.16));
}

.complete-effect__deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.complete-effect__deco-layer {
  position: fixed;
  left: 11px;
  right: 0;
  top: 0;
  width: min(100vw, 390px);
  height: min(100dvh, calc(min(100vw, 390px) * 934 / 390));
  margin-left: auto;
  margin-right: auto;
  transform-origin: center center;
}

/* Figma `241:8014` frame (390x934) + Group `2027:7121` bbox. Parts use frame-relative %. */
.complete-effect__deco-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.complete-effect__deco-part {
  position: absolute;
  display: block;
  inset: auto;
  opacity: 0;
  translate: 0 0;
  transform-origin: center center;
}

/* Figma `241:8014` frame (390x934) + Group `2027:7121` child bboxes. */
.complete-effect__deco-part--stuff {
  left: -4.102564%;
  top: 3.640257%;
  width: 92.564103%;
  height: 72.48394%;
  transform: translate(2px, 2px);
  transform-origin: 58.5% 64%;
  z-index: 1;
}

.complete-effect__deco-part--cold {
  left: -8.74359%;
  top: 21.126339%;
  width: 111.307692%;
  height: 76.340471%;
  transform: translate(0, 1px);
  transform-origin: 52.8% 37.8%;
  z-index: 2;
}

.complete-effect__deco-part--warm {
  left: -7.435897%;
  top: 5.781585%;
  width: 119.487179%;
  height: 86.831906%;
  transform: translate(1px, -2px);
  transform-origin: 48.1% 50.9%;
  z-index: 3;
}

.complete-effect__phase-two {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  width: min(100%, 390px);
  min-height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: max(94px, calc(env(safe-area-inset-top) + 94px)) 16px max(30px, env(safe-area-inset-bottom));
  align-content: start;
  justify-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
}

.complete-effect__champion {
  --champion-tilt: -13deg;
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 5;
  display: block;
  width: min(100%, 340px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}

.complete-effect__champion-bg,
.complete-effect__champion-text {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  height: auto;
  transform: translate(-50%, -50%);
}

.complete-effect__champion-bg {
  width: 100%;
}

.complete-effect__champion-text {
  width: 74%;
}

.complete-effect__champion.is-peeling .complete-effect__champion-bg,
.complete-effect__champion.is-peeling .complete-effect__champion-text,
.complete-effect__champion.is-peeling .complete-effect__champion-stars {
  visibility: hidden;
}

.complete-effect__champion-peel {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  opacity: 1;
  clip-path: none;
  filter: none;
  transform: none;
  isolation: isolate;
  pointer-events: none;
}

.complete-effect__champion-peel .sticker-peel__bounce,
.complete-effect__champion-peel .peel-top,
.complete-effect__champion-peel .peel-back,
.complete-effect__champion-peel .peel-bottom {
  border-radius: 0;
}

.complete-effect__champion-peel[data-image="true"] .sticker__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.complete-effect__champion-stars {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 440px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.complete-effect__champion-star {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #f6c74b;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 2px 0 rgba(120, 88, 0, 0.16));
}

.complete-effect__modal {
  position: relative;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0;
  width: min(100%, 358px);
  min-width: 0;
  min-height: 837px;
  padding: 28px 22px 44px;
  border-radius: 9px;
  background: #fff;
  color: #212e79;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
  overflow-x: clip;
  opacity: 0;
}

.complete-effect__modal > * {
  min-width: 0;
  max-width: 100%;
}

.complete-effect__modal-logo {
  display: block;
  width: 160px;
  max-width: 62%;
  height: auto;
  margin: 0 auto 16px;
  object-fit: contain;
}

.complete-effect__camera-media {
  position: relative;
  width: 100%;
  margin: 0 auto 22px;
}

.complete-effect__camera-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.complete-effect__camera-deco {
  position: absolute;
  z-index: 2;
  top: 29.04%;
  left: 50%;
  width: 100%;
  pointer-events: none;
  transform: scale(1.3) translateX(-38%);
}

.complete-effect__camera-deco img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
}

.complete-effect__camera-text {
  width: 100%;
  margin: 0 auto 44px;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.58;
  letter-spacing: 0;
  text-align: center;
}

.shc-stamp-button--primary,
.complete-effect__camera-cta {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  min-height: 62px;
  border: 0;
  border-radius: var(--complete-button-radius, 999px);
  background: transparent;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.shc-stamp-button--primary::before,
.complete-effect__camera-cta::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  box-sizing: border-box;
  border: var(--complete-button-border-width, 2px) solid var(--complete-button-shadow-border, #212e79);
  border-radius: inherit;
  background: var(--complete-button-shadow-bg, #212e79);
  content: "";
  transform: translate(var(--complete-button-shadow-x, 4px), var(--complete-button-shadow-y, 5px));
  transition: transform 0.2s ease;
}

.shc-stamp-button--primary::after,
.complete-effect__camera-cta::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  border: var(--complete-button-border-width, 2px) solid var(--complete-button-face-border, #212e79);
  border-radius: inherit;
  background: var(--complete-button-face-bg);
  content: "";
  pointer-events: none;
  transition: background-color 0.2s ease;
}

.shc-stamp-button--primary > *,
.complete-effect__camera-cta > * {
  position: relative;
  z-index: 1;
}

.shc-stamp-button--primary:hover::after,
.complete-effect__camera-cta:hover::after {
  background: var(--complete-button-face-bg-hover, var(--complete-button-face-bg));
}

.shc-stamp-button--primary:active,
.complete-effect__camera-cta:active {
  transform: translate(var(--complete-button-press-x, 2px), var(--complete-button-press-y, 2px));
}

.shc-stamp-button--primary:active::before,
.complete-effect__camera-cta:active::before {
  transform: translate(
    calc(var(--complete-button-shadow-x, 4px) - var(--complete-button-press-x, 2px)),
    calc(var(--complete-button-shadow-y, 5px) - var(--complete-button-press-y, 2px))
  );
}

.shc-stamp-button--primary:focus-visible,
.complete-effect__camera-cta:focus-visible {
  outline: 3px solid #273db2;
  outline-offset: 4px;
}

.complete-effect__camera-cta {
  gap: 12px;
  width: 100%;
  max-width: 310px;
  min-height: 68px;
  margin: 0 auto;
  padding: 16px 24px;
  color: #212e79;
  --complete-button-face-bg: #ffb53d;
  --complete-button-face-bg-hover: #ffa928;
  --complete-button-face-border: #212e79;
  --complete-button-shadow-bg: #ff9300;
  --complete-button-shadow-border: #212e79;
  --complete-button-shadow-x: 4px;
  --complete-button-shadow-y: 5px;
  --complete-button-press-x: 2px;
  --complete-button-press-y: 2px;
}

.complete-effect__pdf-heading {
  width: 100%;
  margin: 40px 0 10px;
  font-family: var(--font-family-base);
  font-size: clamp(12px, 3.8vw, 16px);
  font-weight: 700;
  line-height: 1.5;
  color: #212e79;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
}

.complete-effect__modal .complete-effect__pdf-button {
  box-sizing: border-box;
  width: 202px;
  min-height: 51px;
  height: 51px;
  margin: 0 auto;
  padding: 0 16px;
  border: 4px solid #fff;
  border-radius: 60px;
  background: #212e79;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
}

.complete-effect__download-note {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: #3f65af;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0;
}

.complete-effect__download-note:focus-visible {
  outline: 3px solid #273db2;
  outline-offset: 4px;
}

.complete-effect__button-arrow {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

.complete-effect__button-arrow::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  background: #ff9f2f;
  content: "";
  mask-image: url("../../img/top/common/icons/button_arrow.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  transform: translate(-50%, -50%);
  -webkit-mask-image: url("../../img/top/common/icons/button_arrow.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.complete-effect.is-burst .complete-effect__backdrop {
  animation: complete-backdrop 480ms ease-out both;
}

.complete-effect.is-burst .complete-effect__logo {
  animation: complete-fade-up 900ms ease-out 120ms both;
}

.complete-effect.is-burst .complete-effect__congrats {
  animation: complete-congrats-pop-in 780ms ease-out 240ms both;
}

.complete-effect.is-burst .complete-effect__copy span:nth-child(1) {
  animation: complete-copy-in 440ms ease-out 1120ms both;
}

.complete-effect.is-burst .complete-effect__copy span:nth-child(2) {
  animation: complete-copy-in 440ms ease-out 1240ms both;
}

.complete-effect.is-burst .complete-effect__copy span:nth-child(3) {
  animation: complete-copy-in 440ms ease-out 1360ms both;
}

/* Stagger deco parts clearly after the message has landed. */
.complete-effect.is-burst .complete-effect__deco-part--stuff {
  animation:
    complete-deco-part-pop 640ms cubic-bezier(0.16, 1, 0.3, 1) 1500ms both,
    complete-deco-part-float 4s ease-in-out 2440ms infinite;
  --complete-deco-float-y: -6px;
}

.complete-effect.is-burst .complete-effect__deco-part--cold {
  animation:
    complete-deco-part-pop 640ms cubic-bezier(0.16, 1, 0.3, 1) 1870ms both,
    complete-deco-part-float 4.4s ease-in-out 2810ms infinite;
  --complete-deco-float-y: -5px;
}

.complete-effect.is-burst .complete-effect__deco-part--warm {
  animation:
    complete-deco-part-pop 640ms cubic-bezier(0.16, 1, 0.3, 1) 2240ms both,
    complete-deco-part-float 4.2s ease-in-out 3180ms infinite;
  --complete-deco-float-y: -7px;
}

.complete-effect.is-burst .complete-effect__star {
  animation: complete-message-star 820ms ease-out both;
}

.complete-effect.is-champion .complete-effect__champion {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.complete-effect.is-champion .complete-effect__champion.is-landed {
  transform: translate(-50%, -50%) scale(1) rotate(var(--champion-tilt, -13deg));
  transition: transform 280ms cubic-bezier(0.22, 1.15, 0.36, 1);
}

.complete-effect.is-champion .complete-effect__champion.is-landed .complete-effect__champion-bg {
  animation: complete-champion-rotate 10s steps(36, end) 0.2s infinite;
}

.complete-effect.is-champion .complete-effect__champion.is-landed .complete-effect__champion-star {
  animation-name: complete-star;
  animation-duration: 1400ms;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.complete-effect.is-phase-two .complete-effect__logo,
.complete-effect.is-phase-two .complete-effect__message,
.complete-effect.is-phase-two .complete-effect__deco-layer {
  animation: complete-phase-one-out 420ms ease-out both;
  pointer-events: none;
}

.complete-effect.is-phase-two .complete-effect__champion {
  animation: complete-champion-out 420ms ease-out both;
  pointer-events: none;
}

.complete-effect.is-phase-two .complete-effect__phase-two {
  visibility: visible;
  animation: complete-phase-two-in 1ms linear both;
}

.complete-effect.is-phase-two .complete-effect__modal {
  animation: complete-fade-up 620ms ease-out 360ms both;
}

.complete-effect.is-phase-two .complete-effect__pdf-heading {
  animation: complete-fade-up 620ms ease-out 480ms both;
}

.complete-effect.is-phase-two .complete-effect__pdf-button {
  animation: complete-fade-up 620ms ease-out 520ms both;
}

.complete-effect.is-phase-two .complete-effect__download-note {
  animation: complete-fade-up 620ms ease-out 600ms both;
}

@media (min-width: 1025px) {
  .complete-effect__phase-two {
    pointer-events: none;
  }

  .complete-effect__modal {
    pointer-events: auto;
  }

  body:has(.complete-effect.is-phase-two) .sheet-overlay__champion,
  .sheet-stage.is-complete .sheet-overlay__champion {
    opacity: 1;
    visibility: visible;
  }

  body:has(.complete-effect.is-phase-two) .sheet-overlay__sun,
  .sheet-stage.is-complete .sheet-overlay__sun {
    opacity: 0;
    visibility: hidden;
  }
}

.complete-effect.is-burst .complete-effect__star:nth-child(1) { --x: 0px; --y: -176px; animation-delay: 980ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(2) { --x: 92px; --y: -152px; animation-delay: 1020ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(3) { --x: 160px; --y: -86px; animation-delay: 1040ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(4) { --x: 188px; --y: 0px; animation-delay: 1000ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(5) { --x: 160px; --y: 86px; animation-delay: 1060ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(6) { --x: 92px; --y: 152px; animation-delay: 1080ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(7) { --x: 0px; --y: 176px; animation-delay: 980ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(8) { --x: -92px; --y: 152px; animation-delay: 1020ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(9) { --x: -160px; --y: 86px; animation-delay: 1040ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(10) { --x: -188px; --y: 0px; animation-delay: 1000ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(11) { --x: -160px; --y: -86px; animation-delay: 1060ms; }
.complete-effect.is-burst .complete-effect__star:nth-child(12) { --x: -92px; --y: -152px; animation-delay: 1080ms; }

.complete-effect__champion-star:nth-child(1) { --x: 0px; --y: -198px; animation-delay: 160ms; }
.complete-effect__champion-star:nth-child(2) { --x: 99px; --y: -171px; animation-delay: 190ms; }
.complete-effect__champion-star:nth-child(3) { --x: 171px; --y: -99px; animation-delay: 220ms; }
.complete-effect__champion-star:nth-child(4) { --x: 198px; --y: 0px; animation-delay: 250ms; }
.complete-effect__champion-star:nth-child(5) { --x: 171px; --y: 99px; animation-delay: 180ms; }
.complete-effect__champion-star:nth-child(6) { --x: 99px; --y: 171px; animation-delay: 210ms; }
.complete-effect__champion-star:nth-child(7) { --x: 0px; --y: 198px; animation-delay: 240ms; }
.complete-effect__champion-star:nth-child(8) { --x: -99px; --y: 171px; animation-delay: 270ms; }
.complete-effect__champion-star:nth-child(9) { --x: -171px; --y: 99px; animation-delay: 200ms; }
.complete-effect__champion-star:nth-child(10) { --x: -198px; --y: 0px; animation-delay: 230ms; }
.complete-effect__champion-star:nth-child(11) { --x: -171px; --y: -99px; animation-delay: 260ms; }
.complete-effect__champion-star:nth-child(12) { --x: -99px; --y: -171px; animation-delay: 290ms; }

.stamp-card__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: min(100%, 341px);
  max-width: 341px;
}

.stamp-card.is-customizing .stamp-card__actions {
  display: none;
}

@media (max-width: 1024px) {
  html.is-sheet-stack-locked .stamp-card__sheet-stack {
    left: 0;
    transform: none;
  }

  .customize-footer {
    position: fixed;
    z-index: 20;
  }

  .stamp-card.is-customizing {
    padding-bottom: var(--customize-footer-offset);
  }
}

@media (min-width: 1025px) {
  .customize-footer {
    position: absolute;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  /* PC customize: footer sits below the dimmed sheet, not over it. */
  .stamp-card.is-customizing .stamp-card__sheet-stack {
    flex-direction: column;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
  }

  .stamp-card.is-customizing .sheet-viewport {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 595 / 842;
    max-height: min(100%, calc(var(--frame-max) * 842 / 595));
  }

  .stamp-card.is-customizing .customize-footer {
    position: relative;
    z-index: 8;
    flex-shrink: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

.stamp-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
}

.stamp-card__actions .stamp-card__button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 63px;
  padding: 0 12px;
  border-radius: 103.7px;
  font-family: var(--font-family-base);
  font-size: 14.83px;
  font-weight: 700;
  line-height: 1.2;
}

.stamp-card__button--pdf {
  background: #212e79;
}

.stamp-card__actions .stamp-card__button--pdf:active {
  background: #1a245f;
}

.stamp-card__button--reset {
  background: #b6b6b6;
}

.stamp-card__actions .stamp-card__button--reset:active {
  background: #a3a3a3;
}

.stamp-card__button:active {
  background: var(--primary-dark);
}

.stamp-card__actions .stamp-card__button:active {
  background: inherit;
}

.stamp-card__button:disabled {
  opacity: 0.68;
  cursor: wait;
}

.stamp-card__button--secondary {
  background: var(--secondary);
  color: var(--ink);
}

.stamp-card__button--danger {
  background: #f3e8e8;
  color: #8f2525;
}

.stamp-card__modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(24, 33, 74, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.stamp-card__modal--show {
  opacity: 1;
  pointer-events: auto;
}

.stamp-card__modal-panel {
  position: relative;
  display: grid;
  width: min(100%, 380px);
  max-height: calc(100vh - 40px);
  gap: 14px;
  overflow: auto;
  padding: 28px 22px 22px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 18px 44px rgba(24, 33, 74, 0.22);
  transform: translateY(12px) scale(0.97);
  transition: transform 180ms ease;
}

.stamp-card__modal-panel--wide {
  width: min(100%, 720px);
}

.stamp-card__modal--show .stamp-card__modal-panel {
  transform: translateY(0) scale(1);
}

.complete-effect__download-modal.stamp-card__modal {
  z-index: 10;
  background: rgba(33, 46, 121, 0.5);
  pointer-events: none;
}

.complete-effect__download-modal.stamp-card__modal--show {
  pointer-events: auto;
}

.stamp-card__modal-panel--download-note {
  gap: 0;
}

.download-note-modal__title {
  margin: 0 0 24px;
  padding-top: 21px;
  color: #212e79;
  font-family: var(--font-family-base);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.download-note-modal__body {
  margin-top: 0;
  color: #3f65af;
  font-family: var(--font-family-base);
  font-size: 14.83px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.download-note-modal__body p {
  margin: 0;
}

.download-note-modal__body p + p {
  margin-top: 24px;
}

.download-note-modal__body .download-note-modal__footer {
  margin-top: 16px;
}

.stamp-card__modal-panel--challenge {
  width: min(100%, 320px);
  gap: 0;
  padding: 32px 24px 28px;
  border-radius: 24px;
  text-align: center;
}

.challenge-modal__copy {
  margin-bottom: 20px;
}

.challenge-modal__task {
  margin: 0;
  color: #212e79;
  font-family: var(--font-family-base);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.35;
}

.challenge-modal__sub {
  margin: 8px 0 0;
  color: #212e79;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.challenge-modal__icon {
  display: block;
  width: min(150px, 46vw);
  height: auto;
  margin: 0 auto 24px;
}

.challenge-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 63px;
  margin: 0 auto;
  padding: 21px 22px;
  border: 0;
  border-radius: 103.7px;
  background: #ffb031;
  color: #fff;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.challenge-modal__cta:hover {
  background: #f5a41c;
}

.challenge-modal__cta:active {
  transform: translateY(1px);
}

.challenge-modal__cta:focus-visible {
  outline: 3px solid #273db2;
  outline-offset: 4px;
}

.stamp-card__modal-panel--reset {
  width: min(100%, 320px);
}

.reset-modal__message {
  font-size: 20px;
  line-height: 1.45;
}

.reset-modal__actions {
  display: grid;
  gap: 12px;
  justify-items: stretch;
  width: 100%;
}

.reset-modal__actions .challenge-modal__cta {
  width: 100%;
  margin: 0;
}

.reset-modal__confirm {
  background: #212e79;
}

.reset-modal__confirm:hover {
  background: #1a245f;
}

.reset-modal__confirm:active {
  background: #1a245f;
}

.reset-modal__cancel {
  width: 100%;
  min-height: 63px;
  padding: 0 36px;
  border-radius: 103.7px;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.reset-modal__cancel:hover {
  background: #a8a8a8;
}

.reset-modal__cancel:active {
  background: #a3a3a3;
  transform: translateY(1px);
}

.reset-modal__cancel:focus-visible {
  outline: 3px solid #273db2;
  outline-offset: 4px;
}

.stamp-card__modal-panel--stamp-get {
  width: min(100%, 300px);
  gap: 0;
  padding: 28px 24px 32px;
  border-radius: 24px;
  overflow: visible;
  text-align: center;
}

.stamp-get-modal__title {
  margin: 0 0 16px;
  color: #212e79;
  font-family: var(--font-family-base);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
}

.stamp-get-modal__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(220px, 58vw);
  margin: 0 auto 12px;
  aspect-ratio: 1;
}

.stamp-get-modal__stars {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.stamp-get-modal__star {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #f5c53d;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  filter: drop-shadow(0 1px 0 rgba(120, 88, 0, 0.16));
}

.stamp-get-modal__star:nth-child(1) { --x: -96px; --y: -66px; }
.stamp-get-modal__star:nth-child(2) { --x: -40px; --y: -104px; }
.stamp-get-modal__star:nth-child(3) { --x: 46px; --y: -100px; }
.stamp-get-modal__star:nth-child(4) { --x: 104px; --y: -40px; }
.stamp-get-modal__star:nth-child(5) { --x: 104px; --y: 44px; }
.stamp-get-modal__star:nth-child(6) { --x: 38px; --y: 104px; }
.stamp-get-modal__star:nth-child(7) { --x: -58px; --y: 96px; }
.stamp-get-modal__star:nth-child(8) { --x: -108px; --y: 24px; }

.stamp-get-modal__sticker-wrap {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.stamp-get-modal__sticker {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stamp-get-modal__peel {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  opacity: 1;
  clip-path: none;
  filter: none;
  transform: none;
  isolation: isolate;
  pointer-events: none;
}

.stamp-get-modal__peel .sticker-peel__bounce,
.stamp-get-modal__peel .peel-top,
.stamp-get-modal__peel .peel-back,
.stamp-get-modal__peel .peel-bottom {
  border-radius: 0;
}

.stamp-get-modal__peel[data-image="true"] .sticker__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stamp-get-modal__landed-sticker {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 7px 10px rgba(24, 33, 74, 0.14));
  pointer-events: none;
  animation: sticker-finish-pop 360ms cubic-bezier(0.18, 1.35, 0.28, 1) both;
}

.stamp-get-modal__landed-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#stamp-get-modal.is-playing .stamp-get-modal__star {
  animation: stamp-get-star-burst 920ms ease-out both;
}

#stamp-get-modal.is-playing .stamp-get-modal__star:nth-child(1) { animation-delay: 120ms; }
#stamp-get-modal.is-playing .stamp-get-modal__star:nth-child(2) { animation-delay: 170ms; }
#stamp-get-modal.is-playing .stamp-get-modal__star:nth-child(3) { animation-delay: 140ms; }
#stamp-get-modal.is-playing .stamp-get-modal__star:nth-child(4) { animation-delay: 200ms; }
#stamp-get-modal.is-playing .stamp-get-modal__star:nth-child(5) { animation-delay: 150ms; }
#stamp-get-modal.is-playing .stamp-get-modal__star:nth-child(6) { animation-delay: 210ms; }
#stamp-get-modal.is-playing .stamp-get-modal__star:nth-child(7) { animation-delay: 160ms; }
#stamp-get-modal.is-playing .stamp-get-modal__star:nth-child(8) { animation-delay: 190ms; }

@keyframes stamp-get-star-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translate(calc(-50% + (var(--x) * 0.6)), calc(-50% + (var(--y) * 0.6))) scale(0.9) rotate(14deg);
  }
  60% {
    opacity: 1;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.12) rotate(20deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + (var(--x) * 1.16)), calc(-50% + (var(--y) * 1.16))) scale(0.7) rotate(24deg);
  }
}

.stamp-get-modal__name {
  margin: 0;
  color: #212e79;
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.stamp-card__modal-kicker {
  margin: 0;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
}

.stamp-card__modal-title {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
}

.stamp-card__field {
  display: grid;
  gap: 7px;
}

.stamp-card__label {
  color: #344054;
  font-size: 13px;
  font-weight: 900;
}

.stamp-card__text-input,
.stamp-card__select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  outline: none;
}

.stamp-card__text-input:focus,
.stamp-card__select:focus {
  border-color: var(--primary);
}

.stamp-card__choice-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.stamp-card__choice-group .stamp-card__label {
  grid-column: 1 / -1;
}

.stamp-card__choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-weight: 900;
  cursor: pointer;
}

.stamp-card__modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stamp-card__modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.stamp-card__modal-close-icon {
  display: block;
  width: 30px;
  height: 30px;
}

.stamp-card__modal-panel--customize {
  width: min(100%, 339px);
  gap: 0;
  padding: 25px;
  border-radius: 8.65px;
  box-shadow: none;
}

.stamp-card__modal-panel--customize .stamp-card__modal-close {
  top: 10px;
  right: 10px;
}

.customize-form__title {
  margin: 0 0 14px;
  color: #212e79;
  font-family: var(--font-family-base);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.customize-form__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 10px;
}

.customize-form__choice {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1.24px solid #c5dbff;
  border-radius: 4.94px;
  background: #fff;
  color: #3f65af;
  font-family: var(--font-family-base);
  font-size: 14.83px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.customize-form__choice--wide {
  grid-column: 1 / -1;
}

.customize-form__choice.is-selected,
.customize-form__choice:focus-visible {
  background: #c5dbff;
  border-color: #c5dbff;
  outline: none;
}

.customize-form__custom-field {
  margin-top: 15px;
}

.customize-form__custom-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1.24px solid #c5dbff;
  border-radius: 4.94px;
  background: #fff;
  color: #3f65af;
  font-family: var(--font-family-base);
  font-size: 14.83px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  outline: none;
}

.customize-form__custom-input::placeholder {
  color: #3f65af;
  opacity: 0.72;
}

.customize-form__custom-input:focus {
  border-color: #3f65af;
  background: #c5dbff;
}

.customize-form__actions {
  margin-top: 18px;
}

.customize-form__actions:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr;
}

.customize-form__submit {
  width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes sticker-finish-pop {
  0% {
    transform: scale(1, 1);
  }
  38% {
    transform: scale(1.14, 0.86);
  }
  68% {
    transform: scale(0.95, 1.08);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes sticker-peel-shadow-in {
  0% {
    filter: drop-shadow(0 1px 2px rgba(24, 33, 74, 0));
  }
  38% {
    filter: drop-shadow(0 5px 8px rgba(24, 33, 74, 0.1));
  }
  68% {
    filter: drop-shadow(0 10px 14px rgba(24, 33, 74, 0.18));
  }
  100% {
    filter: drop-shadow(0 8px 12px rgba(24, 33, 74, 0.16));
  }
}

@keyframes sticker-peel-shadow-in-image {
  0% {
    filter: drop-shadow(0 1px 2px rgba(24, 33, 74, 0));
  }
  38% {
    filter: drop-shadow(0 4px 7px rgba(24, 33, 74, 0.09));
  }
  68% {
    filter: drop-shadow(0 9px 12px rgba(24, 33, 74, 0.17));
  }
  100% {
    filter: drop-shadow(0 7px 10px rgba(24, 33, 74, 0.14));
  }
}

@keyframes sparkle-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translate(calc(-50% + (var(--x) * 0.22)), calc(-50% + (var(--y) * 0.22))) scale(0.72) rotate(18deg);
  }
  56% {
    opacity: 1;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.18) rotate(24deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 12px)) scale(0.55) rotate(24deg);
  }
}

@keyframes complete-backdrop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes complete-fade-up {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes complete-pop-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.72);
  }
  58% {
    opacity: 1;
    transform: translateY(-5px) scale(1.08, 0.94);
  }
  78% {
    opacity: 1;
    transform: translateY(2px) scale(0.98, 1.03);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes complete-copy-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes complete-congrats-pop-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.78);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  56% {
    opacity: 1;
    transform: translateY(-8px) scale(1.24);
    animation-timing-function: ease-out;
  }

  70% {
    opacity: 1;
    transform: translateY(-8px) scale(1.24);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes complete-pop-idle {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  42% {
    transform: translateY(-2px) scale(1.02);
  }
}

/* Uses `scale` (not `transform`) so per-part placement transforms stay intact. */
@keyframes complete-deco-part-pop {
  0% {
    opacity: 0;
    scale: 0.42;
  }

  18% {
    opacity: 1;
    scale: 0.62;
  }

  72% {
    opacity: 1;
    scale: 1.08;
    animation-timing-function: ease-out;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes complete-deco-part-float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 var(--complete-deco-float-y, -6px);
  }
}

@keyframes complete-phase-one-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) scale(0.94);
  }
}

@keyframes complete-champion-out {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--champion-tilt, -13.024deg));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -54%) scale(0.94) rotate(var(--champion-tilt, -13.024deg));
  }
}

@keyframes complete-phase-two-in {
  0%,
  100% {
    opacity: 1;
  }
}

@keyframes complete-champion-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes complete-star {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(-30deg);
  }
  18% {
    opacity: 1;
  }
  64% {
    opacity: 1;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.08) rotate(20deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 24px)) scale(0.42) rotate(34deg);
  }
}

@keyframes complete-message-star {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12) rotate(-28deg);
  }

  20% {
    opacity: 1;
  }

  68% {
    opacity: 1;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.08) rotate(18deg);
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 8px)) scale(0.72) rotate(28deg);
  }
}

@keyframes sheet-layer-pop {
  0% {
    opacity: 0;
    transform: translateY(var(--sheet-pop-distance, 48px)) scale(0.96);
  }
  52% {
    opacity: 1;
    transform: translateY(-9px) scale(1.018, 0.982);
  }
  72% {
    transform: translateY(4px) scale(0.994, 1.006);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-height: 780px) {
  .complete-effect__phase-two {
    padding-top: max(42px, calc(env(safe-area-inset-top) + 42px));
  }

  .complete-effect__modal {
    min-height: auto;
    padding: 24px 20px 22px;
  }

  .complete-effect__modal-logo {
    height: 112px;
    margin-bottom: 12px;
  }

  .complete-effect__camera-media {
    width: 82%;
    margin-bottom: 14px;
  }

  .complete-effect__camera-text {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.45;
  }

  .complete-effect__camera-cta {
    min-height: 56px;
  }

  .complete-effect__pdf-heading {
    margin-top: 24px;
  }
}

@media (min-height: 781px) and (max-height: 900px) {
  .complete-effect__phase-two {
    padding-top: max(48px, calc(env(safe-area-inset-top) + 48px));
  }

  .complete-effect__modal {
    min-height: auto;
    padding: 24px 20px 30px;
  }

  .complete-effect__camera-media {
    width: 100%;
    margin-bottom: 18px;
  }

  .complete-effect__camera-text {
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.52;
  }

  .complete-effect__camera-cta {
    min-height: 58px;
  }

  .complete-effect__pdf-heading {
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stamp-card__modal,
  .stamp-card__modal-panel,
  .stamp-card__loading-spinner,
  .shc-stamp-intro-slider__track,
  .sheet-svg svg.is-entering .sheet-pop-layer,
  .sticker-peel.is-complete .sticker-peel__bounce,
  .sparkles__star,
  .customize-slot-bubble,
  .complete-effect__backdrop,
  .complete-effect__logo,
  .complete-effect__congrats,
  .complete-effect__copy span,
  .complete-effect__deco,
  .complete-effect__deco-part,
  .complete-effect__star,
  .complete-effect__champion,
  .complete-effect__champion-bg,
  .complete-effect__champion-star,
  .complete-effect__modal,
  .complete-effect__phase-two,
  .complete-effect__pdf-heading,
  .complete-effect__pdf-button,
  .complete-effect__download-note {
    animation: none;
    transition: none;
  }

  .complete-effect__backdrop,
  .complete-effect__logo,
  .complete-effect__congrats,
  .complete-effect__copy span,
  .complete-effect__deco-part {
    opacity: 1;
  }

  .complete-effect.is-phase-two .complete-effect__logo,
  .complete-effect.is-phase-two .complete-effect__message,
  .complete-effect.is-phase-two .complete-effect__deco-layer {
    opacity: 0;
  }

  .complete-effect.is-phase-two .complete-effect__champion {
    opacity: 0;
    visibility: hidden;
  }

  .complete-effect.is-champion .complete-effect__champion,
  .complete-effect.is-phase-two .complete-effect__phase-two,
  .complete-effect.is-phase-two .complete-effect__modal,
  .complete-effect.is-phase-two .complete-effect__pdf-heading,
  .complete-effect.is-phase-two .complete-effect__pdf-button,
  .complete-effect.is-phase-two .complete-effect__download-note {
    opacity: 1;
    visibility: visible;
  }

  .complete-effect.is-champion .complete-effect__champion {
    transform: translate(-50%, -50%) rotate(var(--champion-tilt, -13deg));
  }
}

.is-exporting .stamp-card__sheet-stack,
.is-exporting .sheet-viewport {
  flex: none !important;
  width: var(--sheet-width) !important;
  height: var(--sheet-height) !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}

.is-exporting .stamp-card {
  --sheet-artwork-offset-y: 0px;
}

.is-exporting .sheet-stage {
  flex: none !important;
  width: var(--sheet-width) !important;
  height: var(--sheet-height) !important;
  min-width: 0;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.is-exporting .sheet-pop-layer,
.is-exporting .sticker-peel {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.is-exporting .sheet-name__text {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.is-exporting .sheet-name__underline {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.is-exporting .sheet-overlay__logo {
  top: 2.38%;
  left: 3.91%;
  width: 14.95%;
}

.is-exporting .sheet-overlay__name-plate {
  top: -3.44%;
  left: 32.78%;
  width: 34.48%;
}

.is-exporting .sheet-name {
  /* Export is captured at the locked 595:842 sheet ratio, so express the
     board-center anchor as a plain %height (html2canvas does not resolve cqw
     reliably). -3.44% + 0.619 * 28.53cqw == ~9.04% of stage height.
     transform: translateY(-50%) is inherited from the base rule. */
  top: 9.04%;
  left: 36.54%;
  width: 27%;
}

.is-exporting .sheet-overlay__logo,
.is-exporting .sheet-overlay__name-plate,
.is-exporting .sheet-overlay__sun,
.is-exporting .sheet-overlay__clouds,
.is-exporting .sheet-name {
  visibility: visible !important;
  opacity: 1 !important;
}

.is-exporting .sheet-overlay__champion {
  top: 7.46%;
  left: 76.97%;
  width: 17.39%;
  max-width: none;
  transform: translate(-50%, -50%) rotate(-13deg);
  opacity: 0 !important;
  visibility: hidden !important;
}

.is-exporting .sheet-stage.is-complete .sheet-overlay__champion {
  opacity: 1 !important;
  visibility: visible !important;
}

.is-exporting .sheet-stage.is-complete .sheet-overlay__sun {
  opacity: 0 !important;
  visibility: hidden !important;
}

.is-exporting .sparkles,
.is-exporting .complete-effect:not(.is-phase-two),
.is-exporting .sheet-dim,
.is-exporting .customize-dim-layer,
.is-exporting .customize-bubble-layer,
.is-exporting .customize-footer {
  display: none !important;
}

.stamp-card__export-mask {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  margin: 0;
  background: #fff;
  color: #212e79;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  pointer-events: all;
}

@page {
  size: A4 portrait;
  margin: 0;
}



/* Onboarding + shared stamp-card buttons */
body.is-onboarding {
  background: #212e79;
}

.shc-stamp-button {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.shc-stamp-button:disabled,
.shc-stamp-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.76;
}

.shc-stamp-button--primary {
  color: #fff;
  font-weight: 700;
  --complete-button-face-bg: #ff6470;
  --complete-button-face-bg-hover: #ff5060;
  --complete-button-face-border: #212e79;
  --complete-button-shadow-bg: #ff0000;
  --complete-button-shadow-border: #212e79;
  --complete-button-shadow-x: 4px;
  --complete-button-shadow-y: 5px;
  --complete-button-press-x: 2px;
  --complete-button-press-y: 2px;
}

.shc-stamp-button--secondary {
  box-sizing: border-box;
  min-height: 63px;
  padding: 16px 28px;
  border: 2px solid #212e79;
  border-radius: 999px;
  background: #fff;
  color: #212e79;
  font-size: 15px;
  font-weight: 700;
}

.shc-stamp-button--secondary:hover {
  background: #f7f8ff;
}

.shc-stamp-button--secondary:active {
  transform: translate(1px, 1px);
}

.shc-stamp-button--secondary:focus-visible {
  outline: 3px solid #273db2;
  outline-offset: 4px;
}

/* Customize footer — Figma Frame 1086 / Group 1131 (must follow .shc-stamp-button) */
.customize-footer .customize-footer__start.shc-stamp-button.shc-stamp-button--primary {
  box-sizing: border-box;
  width: 100%;
  height: 63px;
  min-height: 63px;
  margin: 0;
  padding: 0 12px;
  border-radius: 103.7px;
  color: #fff;
  font-size: 14.83px;
  font-weight: 700;
  line-height: 1.2;
  --complete-button-radius: 103.7px;
  --complete-button-face-bg: #ff6470;
  --complete-button-face-bg-hover: #ff5060;
  --complete-button-face-border: #fff;
  --complete-button-shadow-bg: #ff0000;
  --complete-button-shadow-border: #fff;
  --complete-button-shadow-x: 4px;
  --complete-button-shadow-y: 5px;
  --complete-button-press-x: 2px;
  --complete-button-press-y: 2px;
}

.shc-stamp-onboarding {
  min-height: 100vh;
  min-height: 100dvh;
  background: #212e79;
  color: #fff;
}

.shc-stamp-onboarding__inner {
  display: grid;
  width: min(100%, 390px);
  margin: 0 auto;
  padding: 46px 20px calc(24px + env(safe-area-inset-bottom));
}

#onboarding-intro .shc-stamp-onboarding__inner {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.shc-stamp-onboarding__logo {
  display: block;
  width: min(100%, 170px);
  height: auto;
  margin: 0 auto 15px;
}

.shc-stamp-intro-slider {
  position: relative;
  margin-top: 51px;
}

.shc-stamp-intro-slider__viewport {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  border: 3px solid #fff;
  border-radius: 30px;
  background: #fff;
}

.shc-stamp-intro-slider__track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  transition: transform 0.35s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.shc-stamp-intro-slider__slide {
  flex: 0 0 100%;
  min-width: 100%;
  aspect-ratio: 340 / 280;
}

.shc-stamp-intro-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shc-stamp-intro-slider__nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffc73c;
  color: #212e79;
  cursor: pointer;
}

.shc-stamp-intro-slider__nav--prev {
  left: 0;
  transform: translate(-50%, -50%);
}

.shc-stamp-intro-slider__nav--next {
  right: 0;
  transform: translate(50%, -50%);
}

.shc-stamp-intro-slider__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.shc-stamp-intro-slider__nav-icon {
  display: block;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.shc-stamp-intro-slider__nav--prev .shc-stamp-intro-slider__nav-icon {
  margin-right: 4px;
  transform: rotate(-90deg);
}

.shc-stamp-intro-slider__nav--next .shc-stamp-intro-slider__nav-icon {
  margin-left: 4px;
  transform: rotate(90deg);
}

.shc-stamp-intro-guide {
  margin-top: 23px;
  margin-bottom: 32px;
}

.shc-stamp-intro-guide__title {
  margin: 0 0 8px;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

.shc-stamp-intro-guide__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.43;
}

.shc-stamp-intro-guide__list li + li {
  margin-top: 4px;
}

.shc-stamp-setup {
  gap: 27px;
}

.shc-stamp-setup__field,
.shc-stamp-setup__group {
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  max-width: 339px;
}

.shc-stamp-setup__group {
  gap: 10px;
}

/* setup gap 27px + margin-bottom 28px = 55px to CTA */
.shc-stamp-setup__group:last-of-type {
  margin-bottom: 28px;
}

.shc-stamp-setup__group legend {
  display: block;
  padding: 0;
  margin: 0 0 18px;
}

.shc-stamp-setup__label {
  margin-bottom: 18px;
  font-family: var(--font-family-base);
  font-size: 15px;
  font-weight: 700;
  line-height: 2;
  color: #fff;
}

.shc-stamp-setup__input {
  width: 100%;
  min-height: 60px;
  padding: 12px 16px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: #000;
  font-family: var(--font-family-base);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  outline: none;
}

.shc-stamp-setup__input::placeholder {
  color: #b8bfd4;
}

.shc-stamp-setup__toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  min-height: 94px;
  padding: 25px;
  box-sizing: border-box;
  border-radius: 8.65px;
  background: #fff;
}

.shc-stamp-setup__toggle-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.shc-stamp-setup__toggle-option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
}

.shc-stamp-setup__toggle-option span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1.24px solid #c5dbff;
  border-radius: 4.94px;
  background: #fff;
  color: #3f65af;
  font-family: var(--font-family-base);
  font-size: clamp(12px, 3.8vw, 14.83px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.shc-stamp-setup__toggle[data-toggle="sheet-color"] .shc-stamp-setup__toggle-option:has(input[value="blue"]:checked) span {
  border-color: #c5dbff;
  background: #c5dbff;
}

.shc-stamp-setup__toggle[data-toggle="sheet-color"] .shc-stamp-setup__toggle-option:has(input[value="pink"]:checked) span {
  border-color: #ffc2c2;
  background: #ffc2c2;
}

.shc-stamp-setup__toggle[data-toggle="challenge-mode"] .shc-stamp-setup__toggle-option:has(input:checked) span {
  border-color: #ffc73c;
  background: #ffc73c;
}

.shc-stamp-onboarding__cta {
  width: min(100%, 306px);
  margin: 8px auto 0;
}

@media print {
  html,
  body {
    width: 210mm;
    height: 297mm;
    background: #fff;
  }

  .stamp-card {
    display: block;
    width: 210mm;
    min-height: 297mm;
    padding: 0;
    background: #fff;
  }

  .sheet-viewport {
    width: 210mm;
    height: 297mm;
  }

  .sheet-stage {
    width: 210mm;
    height: 297mm;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .stamp-card__actions,
  .stamp-card__modal {
    display: none !important;
  }

  .sheet-overlay__sun,
  .sheet-overlay__clouds {
    display: block !important;
  }
}